From Concept to Code: Building the Deactivate/Reactivate Feature in OpenStack Horizon

For now, let’s get coding.

The front end

The deactivate/reactivate feature was going to be one of the options available when you clicked the drop-down next to the Launch button on the OpenStack Horizon dashboard.

Deactivate is one of the statuses that an image can have. The Glance docs include an image to illustrate the various transitions an image can undergo.

Once you deactivate an image, you can reactivate it, changing its status back to Active.

When you deactivate an image, you can no longer use its data.

I began by writing the front-end code that would ultimately allow us to have deactivate as one of the actions that you can take on an image.

Identifying the directory I was going to be working with

https://github.com/openstack/horizon/tree/master/openstack_dashboard/static/app/core/images

The images directory contained Glance code on Horizon.

The aforementioned drop-down next to Launch lists the various options to choose from when working with an image in Horizon.

I noticed that the steps directory contained most of those options (create-image, create-volume, edit-image, and update-metadata).

https://github.com/openstack/horizon/tree/master/openstack_dashboard/static/app/core/images/steps

And each option had its own directory, containing at least a controller and a view.

Writing the view and controller

I went to work writing the code for the view and controller. Note that the code is an Immediately Invoked Function Expression (IIFE). The code base uses AngularJS, which uses ES5 JavaScript.

At this point, you still cannot see the controller and view code on the front end. Since deactivate and reactivate are actions that you take on an image, you need to add some code to the actions directory.

https://github.com/openstack/horizon/tree/master/openstack_dashboard/static/app/core/images/actions

Services and modules

AngularJS services help you organize and share code across your app. You add the code you need shared as dependencies.

AngularJS modules are, in essence, containers for different parts of your app. They can include controllers, views, and services.

To see the front-end code we wrote (controllers and views), we need to create some services and add them as dependencies to our module.

I created two services, the deactivate-image service and the reactivate-image service.

Services also need code from other parts of the code base. We add these dependencies via deactivateImageService.$inject.

After creating our services, we need to add them to the actions module.

https://github.com/openstack/horizon/blob/master/openstack_dashboard/static/app/core/images/actions/actions.module.js

First, we add the services as dependencies via registerImageActions.$inject.

We then need to register the services as actions in the registerImageActions function and append them to itemActions.

itemActions are operations that you can perform on a specific image, for example, editing an image or updating its metadata.

The front end this far

At this point, our front-end code is good to go. Deactivate is one of the options on the drop-down next to Launch.

A modal also pops up when we click deactivate.