From 898f3f5e99114fcbedc94f13ab60b3a9958b8e18 Mon Sep 17 00:00:00 2001
From: Viridiana J Amezcua Orona <viridiana.j.amezcua.orona@intel.com>
Date: Wed, 23 Nov 2016 15:22:32 -0600
Subject: [PATCH 1/4] Add missing configuration for Select library

Signed-off-by: Viridiana J Amezcua Orona <viridiana.j.amezcua.orona@intel.com>
---
 Makefile         | 2 +-
 deploy.sh        | 3 ++-
 routes/tenant.js | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/Makefile b/Makefile
index df47a946..1735517e 100644
--- a/Makefile
+++ b/Makefile
@@ -74,7 +74,7 @@ install-dev:
 	-cp css/css_framework/* public/stylesheets/
 	-cp css/d3_components/d3Framework.css public/stylesheets/
 	-cp js/util/*.js public/javascripts/library/
-	sed -i.bak "s~$(subst $\",,$(match))~$(subst $\",,$(match))\\$(bootstrap)\\$(subst $\",,$(framework))\\$(subst $\",,$(chosen))\\$(subst $\",,$(chosen))\\$(subst $\",,$(d3))\\ $(subst $\",,$(jquery))\\$(subst $\",,$(jqueryui))\\$(subst $\",,$(datamanager))\\$(subst $\",,$(loadDatamanager))\\ $(subst $\",,$(validations))~" views/$(subst $\",,$(file))
+	sed -i.bak "s~$(subst $\",,$(match))~$(subst $\",,$(match))\\$(bootstrap)\\$(subst $\",,$(framework))\\$(subst $\",,$(chosen))\\$(subst $\",,$(chosen))\\$(subst $\",,$(d3))\\ $(subst $\",,$(jquery))\\ $(subst $\",,$(jquerychosen))\\ $(subst $\",,$(jqueryui))\\$(subst $\",,$(datamanager))\\$(subst $\",,$(datamanager))$(subst $\",,$(datamanager))    jquerychosen $(subst $\",,$(loadDatamanager))\\ $(subst $\",,$(validations))~" views/$(subst $\",,$(file))
 	-mkdir -p $(DESTDIR)/ciao-webui/
 	-mkdir -p $(DESTDIR)/share/ciao-webui
 	-cp config/ciao_config.json $(DESTDIR)/share/ciao-webui/
diff --git a/deploy.sh b/deploy.sh
index 5df32d84..3c145599 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -42,6 +42,7 @@ match="</title>"
 bootstrap="$cssStart/bootstrap/dist/css/bootstrap.min.css$cssEnd"
 framework="$cssStart/stylesheets/framework.css$cssEnd"
 d3="$cssStart/stylesheets/d3Framework.css$cssEnd"
+chosen="$cssStart/stylesheets/chosen.css$cssEnd"
 jquery="$jsStart/jquery/dist/jquery.js$jsEnd"
 jqueryui="$jsStart/jquery-ui/jquery-ui.js$jsEnd"
 datamanager="$jsStart/data/dataManager.js$jsEnd"
@@ -49,6 +50,6 @@ loadDatamanager="<script type='text/javascript'>window.datamanager.loadData((<%-
 validations="$jsStart/javascripts/library/validations.js$jsEnd"
 # Delete .bak (this is just for mac)
 # Replace \\ for \n (this is just for mac)
-sed -i.bak "s~$match~$match\\$bootstrap\\$framework\\$d3\\$jquery\\$jqueryui\\$datamanager\\$loadDatamanager\\$validations~" views/$file
+sed -i.bak "s~$match~$match\\$bootstrap\\$framework\\$d3\\$chosen\\$jquery\\$jqueryui\\$datamanager\\$loadDatamanager\\$validations~" views/$file
 
 npm start -- "$@"
diff --git a/routes/tenant.js b/routes/tenant.js
index d0b2b6f8..3cecd9d2 100644
--- a/routes/tenant.js
+++ b/routes/tenant.js
@@ -84,7 +84,8 @@ var usageConfig = {
     title: 'Tenant detailed view',
     page: 'pages/tenant_usage.ejs',
     scripts: [
-        '/javascripts/bundle_tenant_usage_detail.js'
+        '/javascripts/bundle_tenant_usage_detail.js',
+        '/util/chosen.jquery.js'
     ],
     data: {
         title: 'CIAO',
@@ -109,7 +110,8 @@ var groupConfig = {
     title: 'Tenant detailed group view',
     page: 'pages/tenant_group.ejs',
     scripts: [
-        '/javascripts/bundle_tenant_group.js'
+        '/javascripts/bundle_tenant_group.js',
+        '/util/chosen.jquery.js'
     ],
     data: {
         title: 'CIAO',

From 65ea1267db6150b7d77bcdebaa6b4b9c9323779a Mon Sep 17 00:00:00 2001
From: Viridiana J Amezcua Orona <viridiana.j.amezcua.orona@intel.com>
Date: Wed, 23 Nov 2016 15:26:02 -0600
Subject: [PATCH 2/4] Add configuration to create bootable volumes

-Add checkbox to define if a volume is bootable.
-Add condition if a volume is bootable, then the user should select an Image
-Add field imageRef field to request

Signed-off-by: Viridiana J Amezcua Orona <viridiana.j.amezcua.orona@intel.com>
---
 core/blockService.js                   |   3 +-
 js/components/catalogue/customModal.js | 151 +++---
 js/pages/tenant_detail.js              | 685 +++++++++++++------------
 3 files changed, 454 insertions(+), 385 deletions(-)

diff --git a/core/blockService.js b/core/blockService.js
index 6dc57718..3ff3f0d9 100644
--- a/core/blockService.js
+++ b/core/blockService.js
@@ -48,7 +48,8 @@ blockService.prototype.createVolume = function () {
 
         var jsonBody = req.body.volume? req.body :{ volume: {
             size:req.body.size,
-            name: req.body.name
+            name: req.body.name,
+            imageRef: body.imageRef
         }};
         // add optional values
         if (req.body.description) {
diff --git a/js/components/catalogue/customModal.js b/js/components/catalogue/customModal.js
index b67e9a3c..4aa8acc8 100644
--- a/js/components/catalogue/customModal.js
+++ b/js/components/catalogue/customModal.js
@@ -5,6 +5,7 @@ var Modal = reactBootstrap.Modal;
 var Button = reactBootstrap.Button;
 var Input = reactBootstrap.Input;
 var Alert = reactBootstrap.Alert;
+var Select = require('react-select');
 
 /* Custom modal usage
    Properties
@@ -40,6 +41,7 @@ var customModal = React.createClass({
             showModal: true,
             showAlert:false,
             data:[]
+
         };
     },
 
@@ -52,11 +54,17 @@ var customModal = React.createClass({
         };
     },
 
-    onChange: function( key, event ) {
+    onChange: function( key, type, event ) {
 
         if(event){
             var data = this.state.data;
-            data[key] = (event.target)?event.target.value:event.value;
+
+            if(type == 'checkbox'){
+                data[key] = event.target.checked;
+            }else{
+                data[key] = (event.target)?event.target.value:event.value;
+            }
+
             this.setState({data: data});
         }else{
             var data = this.state.data;
@@ -66,71 +74,98 @@ var customModal = React.createClass({
 
     },
 
+    getField: function(row){
+
+       // console.log('row', row);
+
+        var label = (row.validate.required)?row.label + '*':row.label;
+        switch(row.field) {
+            case "input":
+                return <Input
+                id={row.id}
+                label={label}
+                value={this.state.data[row.name]}
+                onChange={this.onChange.bind(this, row.name, row.type)}
+                type={row.type} />;
+            break;
+            case "textarea":
+                return React.createElement(
+                  'div',
+                  null,
+                  React.createElement(
+                    'div',
+                    { className: 'form-group' },
+                  <label class="control-label" >
+                  {row.label}
+                </label>
+                ),
+                React.createElement(
+                  'div',
+                  { className: 'form-group' },
+                  React.createElement(
+                    'textarea',
+                    {
+                        id: row.id,
+                        className: 'form-control' ,
+                        label:label,
+                        value:this.state.data[row.name],
+                        onChange: this.onChange.bind(this, row.name, row.type)
+
+                    },
+                    ''
+                  )
+                )
+                );
+            break;
+            case "select":
+                return <Select
+                id={row.id}
+
+                name={row.name}
+                label={label}
+                value={this.state.data[row.name]}
+                placeholder={row.placeholder?row.placeholder:label}
+                onChange={this.onChange.bind(this, row.name, row.type)}
+                options={row.options}
+                />;
+
+            break;
+            default:
+                return React.createElement(
+                    'p', {},'field not implemented'
+                );
+        }
+    },
+
     getBody: function(){
         if(this.props.type == 'form'){
             return this.props.fields.map((row, i) => {
 
-                var label = (row.validate.required)?row.label + '*':row.label;
-                switch(row.field) {
-                case "input":
-                    return <Input
-                                id={row.id}
-                                label={label}
-                                value={this.state.data[row.name]}
-                                onChange={this.onChange.bind(this, row.name)}
-                                type={row.type} />;
-                    break;
-                case "textarea":
-                    return React.createElement(
-                                'div',
-                                null,
-                                React.createElement(
-                                    'div',
-                                    { className: 'form-group' },
-                                    <label class="control-label" >
-                                        {row.label}
-                                    </label>
-                                ),
-                                React.createElement(
-                                    'div',
-                                    { className: 'form-group' },
-                                    React.createElement(
-                                        'textarea',
-                                        {
-                                          id: row.id,
-                                          className: 'form-control' ,
-                                          label:label,
-                                          value:this.state.data[row.name],
-                                          onChange: this.onChange.bind(this, row.name)
-                                        },
-                                        ''
-                                    )
-                                )
-                            );
-                    break;
-                case "select":
-                    return <Select
-                            id={row.id}
-                            name={row.id}
-                            label={label}
-                            value={this.state.data[row.name]}
-                            placeholder={row.placeholder?row.placeholder:""}
-                            onChange={this.onChange.bind(this, row.name)}
-                            options={row.options}
-                            />;
-
-                    break;
-                default:
-                    return React.createElement(
-                        'p', {},'field not implemented'
-                    );
+                if(this.props.conditions &&
+                    this.props.conditions[row.name]){
+                    var fieldCond = this.props.conditions[row.name];
+
+                    if(fieldCond){
+
+                        if(this.state.data[fieldCond] ){
+                            return this.getField(row);
+                        }else{
+                            return null;
+                        }
+                    }else{
+                        return this.getField(row);
+                    }
+                }else{
+                    return this.getField(row);
                 }
+            
             });
         }else{
             return React.createElement(
-                'p', {},this.props.body
+              'p', {},this.props.body
             );
         }
+
     },
     //Return true if the field is empty
     isEmpty: function(field){
@@ -214,7 +249,7 @@ var customModal = React.createClass({
 
     handleSubmit: function () {
         if(this.isValid()){
-            this.props.onAccept(this.state.data, this.state);
+            this.props.onAccept(this.state.data);
             this.setState({showModal:false, data: []});
         }
     },
diff --git a/js/pages/tenant_detail.js b/js/pages/tenant_detail.js
index 0da78873..c895d5dc 100644
--- a/js/pages/tenant_detail.js
+++ b/js/pages/tenant_detail.js
@@ -82,6 +82,7 @@ $('document').ready(function () {
                         datamanager.data.activeTenant.id;
                     datamanager.setDataSource('group-overview', data);
                     datamanager.setDataSource('add-instances', {activeTenant, data});
+                    datamanager.setDataSource('block-catalogue', {data:[], flavors: data});
                 }
             }.bind(this))
             .fail(function (err) {
@@ -92,6 +93,8 @@ $('document').ready(function () {
                     data.dataKey = 'group-overview';
                     data.detailUrl = '/data/' + datamanager.data.activeTenant.id;
                     datamanager.setDataSource('group-overview', data);
+                    datamanager.setDataSource('block-catalogue', {data:[]});
+
                 }
             });
     };
@@ -133,330 +136,7 @@ $('document').ready(function () {
 
         // Starts Block storage volume table implementation
     // reference name for volume table container
-    var volumeComponent = 'block-catalogue';
-    //create a volume function: executed when user clicks on Create btn/action
-    var createVolume = function(fields, containerNode){
-        // get data from modal supplied fields and build form request body
-        var form = fields.reduce((prev,current) => {
-            var val = prev;
-            val[current.name] = document.getElementById(current.id).value;
-            return val;
-        },{});
-        // post form to API service
-        $.post({url:
-            '/data/' +
-            datamanager.data.activeTenant.id
-            + '/volumes',
-                data: form
-            })
-            .done(function (data) {
-                // close modal
-                document.getElementById(containerNode.id).remove();
-            }).fail((err) => {
-                // close modal
-                document.getElementById(containerNode.id).remove();
-            });
-    };
-
-    // Modal create volume fields - use in 'Create' action
-    // available fields: [name, size, description(optional)]
-    var modalCreateFields =[
-        {
-            id: 'volume_id',
-            type:'text',
-            field:'input',
-            name:'name',
-            label:'Name',
-            validate:{
-                required:true
-            }
-        },
-        {
-            id: 'volume_size',
-            type:'text',
-            field:'input',
-            name:'size',
-            label:'Size (GB)',
-            validate:{
-                required:true,
-                regex:'^[1-9][0-9]*$',
-                message:"Size must be a integer number greater than 0"
-            }
-        },
-        {
-            id: 'volume_desc',
-            type:'textarea',
-            field:'textarea',
-            name:'description',
-            label:'Description',
-            validate:{
-                required:false
-            }
-        }];
-
-    // Actions definition - add functionality to buttons within volume table
-    var volumeActions = [
-        {
-            label: 'Create',
-            name: 'Create',
-            onClick: function (props, state) {
-                var node = document.createElement("div");
-                node.setAttribute('id',"temp-volume-create-modal");
-                if (!document.getElementById(node.id))
-                    document.body.appendChild(node);
-                var modalParams = {
-                    title: 'Create a Volume',
-                    type:'form',
-                    fields: modalCreateFields,
-                    onAccept: () => createVolume(modalCreateFields, node),
-                    onClose: function () {
-                        document.getElementById(node.id).remove();},
-                    acceptText: 'Create'
-                };
-                ReactDOM.render(<CustomModal {...modalParams} />,
-                                document.getElementById('temp-volume-create-modal'));
-            },
-            onDisabled: function () {}
-        },
-
-        {
-            label: 'Delete',
-            name: 'Delete',
-            onClick: function (props, state) {
-                var node = document.createElement("div");
-                node.setAttribute('id',"temp-volume-modal");
-                if (!document.getElementById("temp-volume-modal"))
-                    document.body.appendChild(node);
-                //get volume list from datamanager available sources
-                var volumeSource = datamanager.sources[volumeComponent].data;
-                var volumeList = volumeSource ?
-                        volumeSource.map((i) => {
-                            return {value:i.volume_id, label:i.name};
-                        }) : [];
-
-                // TODO: check text format of options, could be more legible
-                // Create modal params for deletion
-                // if 1 or more volume is selected, just confirm
-                // if no volumes are selected trigger modal to select 1 action
-                var title, fields, type, onAccept;
-                if (props.length > 0) {
-                    title = "Delete selected volumes?";
-                    type = null;
-                    fields = [];
-                    onAccept = function (params) {
-                        props.forEach((volume) => {
-                            var vol_id = volume.volume_id;
-                            $.ajax({
-                                type:'DELETE',
-                                url: '/data/' +
-                                    datamanager.data.activeTenant.id
-                                    + '/volumes/' +
-                                    vol_id
-                            })
-                                .done(function (data) {
-                                    console.log(data);
-                                });
-                        });
-
-                        document.getElementById(node.id).remove();
-                    };
-                } else {
-                    title = "Delete Volume";
-                    type = "form";
-                    fields = [
-                        {
-                            id: "delete_volume_id",
-                            name: "volume_id",
-                            label: "Select Volume",
-                            field: "select",
-                            options: volumeList,
-                            validate:{
-                                required:false
-                            }
-                        }
-                    ];
-                    onAccept = function (params) {
-                        var vol_id = document
-                                .getElementById('delete_volume_id').value;
-                        $.ajax({
-                            type:'DELETE',
-                            url: '/data/' +
-                                datamanager.data.activeTenant.id
-                                + '/volumes/' +
-                                vol_id
-                        })
-                            .done(function (data) {
-                                console.log(data);
-                            });
-                        document.getElementById(node.id).remove();
-                    };
-                }
-                var modalParams = {
-                    title: "Delete Volume",
-                    //type: "form",
-                    fields: fields,
-                    body: "You're about to remove a volume, this may result in "
-                            + "a loss of data. Are you sure you want to remove?",
-                    onAccept: onAccept,
-                    onClose: () => document.getElementById(node.id).remove(),
-                    cancelText: "Cancel",
-                    acceptText: "Delete"
-                };
-                ReactDOM.render(<CustomModal {...modalParams} />,
-                                document.getElementById('temp-volume-modal'));
-            },
-            onDisabled: function () {}
-        },
-
-        {
-            label: 'Attach',
-            name: 'Attach',
-            onClick: function (props, state) {
-                var node = document.createElement("div");
-                node.setAttribute('id',"temp-volume-modal");
-                if (!document.getElementById("temp-volume-modal"))
-                    document.body.appendChild(node);
-                // Get instance list from datamanager available sources
-                var instanceSource = datamanager.sources['instances-host'].data;
-                var instanceList =  instanceSource ?
-                        instanceSource.map((i) => {
-                            return {value: i.id, label:i.id};
-                        }) : [];
-                //get volume list from datamanager available sources
-                var volumeSource = datamanager.sources[volumeComponent].data;
-                var volumeList = volumeSource ?
-                        volumeSource.map((i) => {
-                            return {value:i.volume_id, label:i.name};
-                        }) : [];
-                // TODO: check text format of options, could be more legible
-                var modalParams = {
-                    title: "Attach Instance",
-                    type: "form",
-                    fields: [
-                        {
-                            id: "attach_volume_id",
-                            name: "volume_id",
-                            label: "Select Volume",
-                            field: "select",
-                            options: volumeList,
-                            validate:{
-                                required:false
-                            }
-                        },
-                        {
-                            id: "attach_instance",
-                            label: "Select Instance to attach volume",
-                            field:"select",
-                            options: instanceList,
-                            validate:{
-                                required:false
-                            }
-                        }
-                                ],
-                    onAccept: function (params) {
-
-                        var vol_id = document
-                                .getElementById("attach_volume_id").value;
-                        var server_id = document
-                                .getElementById("attach_instance").value;
-                        var volumeAttachment = {"volumeAttachment":{
-                            "volumeId":vol_id,
-                            "device": null
-                        }};
-                        $.post({
-                            url: '/data/' +
-                                datamanager.data.activeTenant.id
-                                + '/servers/' + server_id
-                                + '/os-volume_attachments',
-                            data:{"json": JSON.stringify(volumeAttachment)}
-                        })
-                            .done((data) => console.log(data))
-                            .fail((data) => console.log(data));
-                        document.getElementById(node.id).remove();
-                    },
-                    onClose: () => document.getElementById(node.id).remove(),
-                    cancelText: "Cancel",
-                    acceptText: "Attach"
-                };
-                ReactDOM.render(<CustomModal {...modalParams} />,
-                                document.getElementById('temp-volume-modal'));
-            },
-            onDisabled: function () {}
-        },
-
-        {
-            label: 'Detach',
-            name: 'Detach',
-            onClick: function (props, state) {
-                var node = document.createElement("div");
-                node.setAttribute('id',"temp-volume-modal");
-                if (!document.getElementById("temp-volume-modal"))
-                    document.body.appendChild(node);
-
-                //get volume list from datamanager available sources
-                var volumeSource = datamanager.sources[volumeComponent].data;
-                var volumeList = [];
-                if (volumeSource) {
-                    // COMPUTE API v2.1:only volumes with status 'in-use'
-                    // can be detached
-                    volumeList = volumeSource
-                        .filter((h) => h.status === 'in-use')
-                        .map((i) => {
-                            return {value:i.volume_id,
-                                    label:i.name};
-                        });
-                }
-                // TODO: check text format of options, could be more legible
-                var modalParams = {
-                    title: "Attach Instance",
-                    type: "form",
-                    fields: [
-                        {
-                            id: "detach_volume_id",
-                            name: "volume_id",
-                            label: "Select Volume",
-                            field: "select",
-                            options: volumeList,
-                            validate:{
-                                required:false
-                            }
-                        }
-                                ],
-                    onAccept: function (params) {
-
-                        var vol_id = document
-                                .getElementById("detach_volume_id").value;
-                        var volumeList = datamanager
-                                .sources[volumeComponent].rawData.volumes
-                                .filter((h) => h.status === 'in-use');
-                        // TODO: this detach system only works if volume
-                        // is attached to a single instance. as it detaches only
-                        // the first attachment. Look for better implementation
-                        var server_id = volumeList
-                                .filter((i) => vol_id === i.id)[0]
-                                .attachments[0]['server_id'];
-                        $.ajax({
-                            type: 'DELETE',
-                            url: '/data/' +
-                                datamanager.data.activeTenant.id
-                                + '/servers/' + server_id
-                                + '/os-volume_attachments'
-                                + '/' + vol_id
-                        })
-                            .done((data) => console.log(data))
-                            .fail((data) => console.log(data));
-                        document.getElementById(node.id).remove();
-                    },
-                    onClose: () => document.getElementById(node.id).remove(),
-                    cancelText: "Cancel",
-                    acceptText: "Detach volume"
-                };
-                ReactDOM.render(<CustomModal {...modalParams} />,
-                                document.getElementById('temp-volume-modal'));
-            },
-            onDisabled: function () {}
-        }
-    ];
+    var volumeComponent = 'block-catalogue'
 
     // Volume component 'on mount' listener executes at 'componentDidMount'
     var volumeOnMountListener = function (callback){
@@ -497,8 +177,361 @@ $('document').ready(function () {
 
     // Set volume component's event listener on datamanager
     datamanager.onDataSourceSet(volumeComponent, function (sourceData) {
+
+        console.log('sourceData', sourceData);
         var refresh = (datamanager.data.REFRESH | 3000);
         // set Select actions
+
+        //create a volume function: executed when user clicks on Create btn/action
+        var createVolume = function(form, containerNode){
+            // post form to API service
+            $.post({url:
+              '/data/' +
+              datamanager.data.activeTenant.id
+              + '/volumes',
+                  data: form
+              })
+              .done(function (data) {
+                  // close modal
+                  document.getElementById(containerNode.id).remove();
+              }).fail((err) => {
+                // close modal
+                document.getElementById(containerNode.id).remove();
+            });
+        };
+
+        // Modal create volume fields - use in 'Create' action
+        // available fields: [name, size, description(optional)]
+        var modalCreateFields =[
+
+            {
+                id: 'volume_id',
+                type:'text',
+                field:'input',
+                name:'name',
+                label:'Name',
+                validate:{
+                    required:true
+                }
+            },
+            {
+                id: 'volume_size',
+                type:'text',
+                field:'input',
+                name:'size',
+                label:'Size (GB)',
+                validate:{
+                    required:true,
+                    regex:'^[1-9][0-9]*$',
+                    message:"Size must be a integer number greater than 0"
+                }
+            },
+            {
+                id: 'volume_desc',
+                type:'textarea',
+                field:'textarea',
+                name:'description',
+                label:'Description',
+                validate:{
+                    required:false
+                }
+            },
+            {
+                id: 'volume_imageref',
+                type:'checkbox',
+                field:'input',
+                name:'imageRefCheckbox',
+                label:'Is a bootable volume',
+                validate:{
+                    required:false
+                }
+            },
+            {
+                id: "attach_volume_id",
+                name: "imageRef",
+                label: "Select a Image",
+                field: "select",
+                options: function(){
+                    // Get instance list from datamanager available sources
+                    var instanceSource = sourceData.flavors.flavors;
+
+                    return  instanceSource ?
+                        instanceSource.map((i) => {
+                            return {value: i.id, label:i.name};
+                        }) : [];
+                    
+                }(),
+                validate:{
+                    required:false
+                },
+            }
+        ];
+
+        // Actions definition - add functionality to buttons within volume table
+        sourceData.actions = [
+            {
+                label: 'Create',
+                name: 'Create',
+                onClick: function (props, state) {
+                    var node = document.createElement("div");
+                    node.setAttribute('id',"temp-volume-create-modal");
+                    if (!document.getElementById(node.id))
+                        document.body.appendChild(node);
+                    var modalParams = {
+                            title: 'Create a Volume',
+                            type:'form',
+                            conditions:{
+                                imageRef:'imageRefCheckbox'
+                            },
+                            fields: modalCreateFields,
+                            onAccept: createVolume.bind(node),
+                            onClose: function () {
+                                document.getElementById(node.id).remove();
+                            },
+                            acceptText: 'Create'
+                    };
+                    ReactDOM.render(<CustomModal {...modalParams} />,
+                    document.getElementById('temp-volume-create-modal'));
+                },
+                onDisabled: function () {}
+            },
+            {
+                label: 'Delete',
+                name: 'Delete',
+                onClick: function (props, state) {
+                    var node = document.createElement("div");
+                    node.setAttribute('id',"temp-volume-modal");
+                    if (!document.getElementById("temp-volume-modal"))
+                        document.body.appendChild(node);
+                    //get volume list from datamanager available sources
+                    var volumeSource = datamanager.sources[volumeComponent].data;
+                    var volumeList = volumeSource ?
+                    volumeSource.map((i) => {
+                        return {value:i.volume_id, label:i.name};
+                }) : [];
+
+                    // TODO: check text format of options, could be more legible
+                    // Create modal params for deletion
+                    // if 1 or more volume is selected, just confirm
+                    // if no volumes are selected trigger modal to select 1 action
+                    var title, fields, type, onAccept;
+                    if (props.length > 0) {
+                        title = "Delete selected volumes?";
+                        type = null;
+                        fields = [];
+                        onAccept = function (params) {
+                            props.forEach((volume) => {
+                                var vol_id = volume.volume_id;
+                            $.ajax({
+                                  type:'DELETE',
+                                  url: '/data/' +
+                                  datamanager.data.activeTenant.id
+                                  + '/volumes/' +
+                                  vol_id
+                              })
+                              .done(function (data) {
+                                  console.log(data);
+                              });
+                        });
+
+                            document.getElementById(node.id).remove();
+                        };
+                    } else {
+                        title = "Delete Volume";
+                        type = "form";
+                        fields = [
+                            {
+                                id: "delete_volume_id",
+                                name: "volume_id",
+                                label: "Select Volume",
+                                field: "select",
+                                options: volumeList,
+                                validate:{
+                                    required:false
+                                }
+                            }
+                        ];
+                        onAccept = function (params) {
+                            var vol_id = document
+                              .getElementById('delete_volume_id').value;
+                            $.ajax({
+                                  type:'DELETE',
+                                  url: '/data/' +
+                                  datamanager.data.activeTenant.id
+                                  + '/volumes/' +
+                                  vol_id
+                              })
+                              .done(function (data) {
+                                  console.log(data);
+                              });
+                            document.getElementById(node.id).remove();
+                        };
+                    }
+                    var modalParams = {
+                            title: "Delete Volume",
+                            //type: "form",
+                            fields: fields,
+                            body: "You're about to remove a volume, this may result in "
+                            + "a loss of data. Are you sure you want to remove?",
+                            onAccept: onAccept,
+                            onClose: () => document.getElementById(node.id).remove(),
+                      cancelText: "Cancel",
+                      acceptText: "Delete"
+                };
+                    ReactDOM.render(<CustomModal {...modalParams} />,
+                    document.getElementById('temp-volume-modal'));
+                },
+                onDisabled: function () {}
+            },
+            {
+                label: 'Attach',
+                name: 'Attach',
+                onClick: function (props, state) {
+                    var node = document.createElement("div");
+                    node.setAttribute('id',"temp-volume-modal");
+                    if (!document.getElementById("temp-volume-modal"))
+                        document.body.appendChild(node);
+                    // Get instance list from datamanager available sources
+                    var instanceSource = datamanager.sources['instances-host'].data;
+                    var instanceList =  instanceSource ?
+                    instanceSource.map((i) => {
+                        return {value: i.id, label:i.id};
+                }) : [];
+                    //get volume list from datamanager available sources
+                    var volumeSource = datamanager.sources[volumeComponent].data;
+                    var volumeList = volumeSource ?
+                    volumeSource.map((i) => {
+                        return {value:i.volume_id, label:i.name};
+                }) : [];
+                    // TODO: check text format of options, could be more legible
+                    var modalParams = {
+                            title: "Attach Instance",
+                            type: "form",
+                            fields: [
+                                {
+                                    id: "attach_volume_id",
+                                    name: "volume_id",
+                                    label: "Select Volume",
+                                    field: "select",
+                                    options: volumeList,
+                                    validate:{
+                                        required:false
+                                    }
+                                },
+                                {
+                                    id: "attach_instance",
+                                    label: "Select Instance to attach volume",
+                                    field:"select",
+                                    options: instanceList,
+                                    validate:{
+                                        required:false
+                                    }
+                                }
+                            ],
+                            onAccept: function (params) {
+
+                                var vol_id = document
+                                  .getElementById("attach_volume_id").value;
+                                var server_id = document
+                                  .getElementById("attach_instance").value;
+                                var volumeAttachment = {"volumeAttachment":{
+                                    "volumeId":vol_id,
+                                    "device": null
+                                }};
+                                $.post({
+                                      url: '/data/' +
+                                      datamanager.data.activeTenant.id
+                                      + '/servers/' + server_id
+                                      + '/os-volume_attachments',
+                                      data:{"json": JSON.stringify(volumeAttachment)}
+                                  })
+                                  .done((data) => console.log(data))
+                                .fail((data) => console.log(data));
+                                document.getElementById(node.id).remove();
+                            },
+                            onClose: () => document.getElementById(node.id).remove(),
+                      cancelText: "Cancel",
+                      acceptText: "Attach"
+                };
+                    ReactDOM.render(<CustomModal {...modalParams} />,
+                    document.getElementById('temp-volume-modal'));
+                },
+                onDisabled: function () {}
+            },
+            {
+                label: 'Detach',
+                name: 'Detach',
+                onClick: function (props, state) {
+                    var node = document.createElement("div");
+                    node.setAttribute('id',"temp-volume-modal");
+                    if (!document.getElementById("temp-volume-modal"))
+                        document.body.appendChild(node);
+
+                    //get volume list from datamanager available sources
+                    var volumeSource = datamanager.sources[volumeComponent].data;
+                    var volumeList = [];
+                    if (volumeSource) {
+                        // COMPUTE API v2.1:only volumes with status 'in-use'
+                        // can be detached
+                        volumeList = volumeSource
+                            .filter((h) => h.status === 'in-use')
+                    .map((i) => {
+                            return {value:i.volume_id,
+                                label:i.name};
+                    });
+                    }
+                    // TODO: check text format of options, could be more legible
+                    var modalParams = {
+                            title: "Attach Instance",
+                            type: "form",
+                            fields: [
+                                {
+                                    id: "detach_volume_id",
+                                    name: "volume_id",
+                                    label: "Select Volume",
+                                    field: "select",
+                                    options: volumeList,
+                                    validate:{
+                                        required:false
+                                    }
+                                }
+                            ],
+                            onAccept: function (params) {
+
+                                var vol_id = document
+                                  .getElementById("detach_volume_id").value;
+                                var volumeList = datamanager
+                                    .sources[volumeComponent].rawData.volumes
+                                    .filter((h) => h.status === 'in-use');
+                                // TODO: this detach system only works if volume
+                                // is attached to a single instance. as it detaches only
+                                // the first attachment. Look for better implementation
+                                var server_id = volumeList
+                                    .filter((i) => vol_id === i.id)[0]
+                                  .attachments[0]['server_id'];
+                                $.ajax({
+                                      type: 'DELETE',
+                                      url: '/data/' +
+                                      datamanager.data.activeTenant.id
+                                      + '/servers/' + server_id
+                                      + '/os-volume_attachments'
+                                      + '/' + vol_id
+                                  })
+                                  .done((data) => console.log(data))
+                                .fail((data) => console.log(data));
+                                document.getElementById(node.id).remove();
+                            },
+                            onClose: () => document.getElementById(node.id).remove(),
+                      cancelText: "Cancel",
+                      acceptText: "Detach volume"
+                };
+                    ReactDOM.render(<CustomModal {...modalParams} />,
+                    document.getElementById('temp-volume-modal'));
+                },
+                onDisabled: function () {}
+            }
+        ];
+
         sourceData.selectActions = [
             {label:'Select all available',string:"select_available",
              query:{"status":"available"}},
@@ -516,11 +549,11 @@ $('document').ready(function () {
         sourceData.source = '/data/' + datamanager.data.activeTenant.id
             + '/volumes/detail';
         sourceData.onMount = volumeOnMountListener;
-        sourceData.actions = volumeActions;
+        //sourceData.actions = volumeActions;
         ReactDOM.render(<Catalogue {...sourceData}/>,
                         document.getElementById('block-catalogue'));
     });
-    datamanager.setDataSource('block-catalogue', {data:[]});
+
 
     // Ends block storage volume table
 });

From 2441f6b26f95b7e0e0c2f76cca8aff6b59645950 Mon Sep 17 00:00:00 2001
From: Viridiana J Amezcua Orona <viridiana.j.amezcua.orona@intel.com>
Date: Wed, 23 Nov 2016 15:26:35 -0600
Subject: [PATCH 3/4] Add select library

Signed-off-by: Viridiana J Amezcua Orona <viridiana.j.amezcua.orona@intel.com>
---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 2ff4d8e5..0e714a3e 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "react-bootstrap": "^v0.28.3",
     "react-dom": "^0.14.8",
     "react-faux-dom": "https://github.com/Olical/react-faux-dom#v2.4.0",
+    "react-select": "^1.0.0-rc.2",
     "serve-favicon": "https://github.com/expressjs/serve-favicon#v2.3.0"
   },
   "devDependencies": {

From db6c5a6ebe1c03cb6474ff96af5bd43fb0aad574 Mon Sep 17 00:00:00 2001
From: Viridiana J Amezcua Orona <viridiana.j.amezcua.orona@intel.com>
Date: Wed, 23 Nov 2016 15:49:41 -0600
Subject: [PATCH 4/4] Fix error getting imageRef field

Signed-off-by: Viridiana J Amezcua Orona <viridiana.j.amezcua.orona@intel.com>
---
 core/blockService.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/blockService.js b/core/blockService.js
index 3ff3f0d9..8d78ee46 100644
--- a/core/blockService.js
+++ b/core/blockService.js
@@ -49,7 +49,7 @@ blockService.prototype.createVolume = function () {
         var jsonBody = req.body.volume? req.body :{ volume: {
             size:req.body.size,
             name: req.body.name,
-            imageRef: body.imageRef
+            imageRef: req.body.imageRef
         }};
         // add optional values
         if (req.body.description) {