[CLOUDSTACK-6045] Create GUI to add primary storage based on plug-ins [1]

 At the time being, if an admin wants to add primary storage to CloudStack that is NOT based on the default storage plug-in, the admin must invoke the addStoragePool API outside of the CloudStack GUI. 

It would be beneficial to CloudStack admins if they could add this kind of primary storage to CloudStack via its standard GUI. 

This project will require a degree of usability work in that the designer must analyze CloudStack's GUI sufficiently to come up with a plan for where the necessary information can be input. 
Once a GUI prototype has been developed (one could use a tool like PowerPoint for this purpose), then the developer must analyze the necessary HTML and JavaScript logic to add the proposed support. 
This project could take the form of an optional GUI plug-in. 
It is possible this project may add one or more parameters to the addStoragePool API. If so, then this will require Java changes on the backend. 
It is likely the developer will have to create a new CloudStack API: One to retrieve the list of installed storage plug-ins.

A more detailed description

In order to make this user friendly, I plan to add a new API to CloudStack to collect existing storage tags. This information can be used to recommend to admins storage tags that might be applicable when they are creating primary storage. I will need to leverage a third-party GUI control to facilitate entry of storage tags. This will make it easier for the users to not make data-entry errors.

I also will have to make use of another third-party GUI control to enable easy entry of key/value pairs. This can often be useful for the url parameter of the createStoragePool API call.

 Approach

I’ll use my GitHub account to host the project and I’ll create a blog where I’ll write down my progress notes (steps accomplished, problems faced, etc.). At the moment, this is how I see the chronology of the project: 

• Building a working CS environment

• Determining what dev tool I’d like to use for JavaScript and Java

• Analyzing the current Add Primary Storage window

• Figuring out if I should modify the existing Add Primary Storage window or make an optional GUI plug-in (I’ll need to come up with pros and cons of each approach)

• Making sure the GUI can collect all of the relevant info and make use of a third-party controls to facilitate entry of sets of storage tags and key/value pairs (this could be leveraged in other parts of the CloudStack GUI, as well)

• As part of the process of adding a third-party controls to CloudStack’s GUI, I plan to examine the overall GUI for opportunities where these controls could be used. I don’t necessarily plan to implement those improvements, but at least log JIRA tickets so others can make use of these controls to improve overall usability in these scenarios.

• Making a new CloudStack API call, if necessary, to get the registered storage plug-ins (this API will be invoked to supply data to a combo box in the GUI)

• If I take the approach of adding a new GUI plug-in to complete this project, I need to determine how this GUI plug-in will be deployed and made available to CloudStack admins who’d like to install it.

Design

For the time being: [6]

1/ The admin who wants to add a primary storage based on a plug-in different from the default one, has to run a program that does an "addStorage API call"

2/The CloudStack Management servers gets the API call and defers to the storage plug-in specified in the API call's provider field .

The primary storage is added :The management server asks the storage plug-in in question to add an appropriate row to the storage_pool table to represent the new primary storage

What it will be like once the project is accomplished:

Instead of running a program to make the addStoragePool API call, the admin will be able to add the primary storage (associated with a plugin different from the default one) using the GUI.

So the 1st step is now broken into 3 steps :

1-a) The user selects the form (that i'll add to the GUI)

1-b) The form gets the list of the storage provides using the listStorageProviders API call to the management server

1-c) The user submits the form and an addStorage API call is invoked

A possible design of the "Create Storage Pool" form:

A possible improvement for the Storage Tagging System in the CloudStack GUI:

I plan to improve the “Storage Tags” input. The new input won’t use commas anywmore to separate the different tags. It will also use autocompletion to suggest the existings storage tags to the user.

The new input will be like the image below:

[1] https://issues.apache.org/jira/browse/CLOUDSTACK-6045

[2]https://cwiki.apache.org/confluence/display/CLOUDSTACK/UI+Plugin+Tutorial

[3] http://cloudstack.apache.org/docs/api/apidocs-4.3/root_admin/createStoragePool.html

[4]http://cloudstack.apache.org/docs/api/apidocs-4.3/root_admin/listStorageProviders.html

[5]http://loopj.com/jquery-tokeninput/

[6]http://www.youtube.com/watch?v=GFDzM9sPqQc&feature=youtu.be