Update UI code per API changes

public/ods/fixtures/fixtures.js

@@ -211,7 +211,7 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
             steal.dev.log("fixture cluster action hostIds : ", hostIds);
             var returnData = {
                 "status": "OK",
-                "clusterHosts": []
+                "cluster_hosts": []
             };
 
             for(var i = 0; i<hostIds.length; i++) {
@@ -220,7 +220,7 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
                     "id": hostIds[i]*10
                 }
 
-                returnData.clusterHosts.push(tmp);
+                returnData.cluster_hosts.push(tmp);
             }
             return returnData;            
         }
@@ -273,24 +273,29 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
         return returnData;
     });
 
-/*
+    $.fixture('GET /api/adapters/{id}/roles', function(data) {
-    // used on Install Review Page
+        var returnData = {
-    $.fixture('GET /api/logicpartition', function() {
+            "status": "OK",
-        return self.partition_data;
+            "roles": [{
+                "name": "role1",
+                "description": "desc1"
+            }, {
+                "name": "role2",
+                "description": "desc2"
+            }, {
+                "name": "role3",
+                "description": "desc3"
+            }, {
+                "name": "role4",
+                "description": "desc4"
+            }, {
+                "name": "role5",
+                "description": "desc5"
+            }]
+        };
+        return returnData;
     });
 
-    // used on Install Review Page
-    $.fixture('GET /api/security', function() {
-        return self.security_data;
-    });
-
-    // used on Install Review Page
-    $.fixture('GET /api/networking', function(data) {
-        //console.log(data);
-        return self.networking_data;
-    });
-*/
-
     $.fixture('POST /api/triggerinstall/', function(data) {
         console.log(data);
         var returnData = {

public/ods/models/cluster.js

@@ -85,4 +85,15 @@ steal("jquery/model", "jquery/lang/json",
             }
         }, {});
 
+        $.Model('Ods.Adapter', {
+            getRoles: function(id, success, error) {
+                $.ajax({
+                    url: '/api/adapters/' + id + '/roles',
+                    type: 'get',
+                    success: success,
+                    error: error
+                });
+            }
+        }, {});
+
     });

public/ods/ods.js

@@ -18,7 +18,8 @@ steal(
             feature: null,
             machines: [],
             switches: [],
-            snmp: 1
+            snmp: 1,
+            adapter_id: null
         };
 
         var state  = new $.Observe(odsState);

public/ods/ui/host_config/host_config.css

@@ -1,7 +1,18 @@
-.tab_panel{
+.tab_panel {
   display: none;
 }
 
 .tab_panel_active {
   display: block;
+}
+
+.roles {
+  width: 150px;
+
+}
+
+.ms-choice {
+    border: 1px solid #C0C0C0;
+    border-radius: 6px;
+    box-shadow: 0 0 5px 0 rgba(215, 211, 207, 0.75) inset;
 }

public/ods/ui/host_config/host_config.js

@@ -9,7 +9,9 @@ steal(
     'ods/models/cluster.js',
     'lib/jquery-ui-1.10.3.custom.css',
     'lib/jquery-ui-1.10.3.custom.js',
-    'lib/jquery.numeric.js'
+    'lib/jquery.numeric.js',
+    'lib/jquery.multiple.select.js',
+    'lib/multiple-select.css'
 ).then(function($) {
     $.Controller('Ods.Ui.host_config', {}, {
         init: function() {
@@ -61,11 +63,48 @@ steal(
                 this.focus();
             });
 
-            this.filloutTabs();
+            // get adapter roles
+            this.adapterRoles = [];
+            Ods.Adapter.getRoles(this.options.odsState.adapter_id, this.proxy('onGetRoles'), this.proxy('onGetRolesErr'));
 
             this.server_count = this.options.odsState.servers.length;
         },
 
+        onGetRoles: function(data, textStatus, xhr) {
+            steal.dev.log(" *** onGetRoles data *** ", data);
+            steal.dev.log(" *** onGetRoles textStatus *** ", textStatus);
+            steal.dev.log(" *** onGetRoles xhr *** ", xhr);
+            if (xhr.status == 200) {
+                this.adapterRoles = data.roles;
+                this.filloutTabs();
+            }
+        },
+
+        onGetRolesErr: function(xhr, status, statusText) {
+            steal.dev.log(" *** onGetRoleErr xhr *** ", xhr);
+            steal.dev.log(" *** onGetRoleErr status *** ", status);
+            steal.dev.log(" *** onGetRoleErr statusText *** ", xhr);
+            this.adapterRoles = [];
+            this.filloutTabs();
+
+            $('.roles').multipleSelect({
+                placeholder: "No roles available",
+                selectAll: false
+            });
+
+        },
+
+        fillRolesDropdowns: function(el, selectedRoles) {
+            for (var i = 0; i < this.adapterRoles.length; i++) {
+                el.append("<option value=" + this.adapterRoles[i].name + ">" + this.adapterRoles[i].description + "</option>");
+            }
+            el.multipleSelect({
+                placeholder: "auto",
+                selectAll: false
+            });
+            el.multipleSelect("setSelects", selectedRoles);
+        },
+
         fillHostnameBySwitchIp: function() {
             var serverData = this.options.odsState.servers_config;
             this.server_count = 0;
@@ -130,7 +169,13 @@ steal(
             var serverData = this.options.odsState.servers_config;
             var servers = serverData[switchIp];
             for (var i = 0; i < servers.length; i++) {
-                $('#tab1 table tbody').append(this.view('server_row', servers[i]));
+                $('#hostconfig-table tbody').append(this.view('server_row', servers[i]));
+                var roles = servers[i].roles;
+                var rolesDropdown = $("#hostconfig-table tbody tr").eq(i).find(".roles");
+                if(!roles) {
+                    roles = [];
+                }
+                this.fillRolesDropdowns(rolesDropdown, roles);
             }
         },
 
@@ -143,6 +188,11 @@ steal(
             for (var i = 0; i < this.options.odsState.servers_config[currentSwitch].length; i++) {
                 this.options.odsState.servers_config[currentSwitch][i].hostname = $("#hostconfig-table tbody tr").eq(i).find(".hostname").val();
                 this.options.odsState.servers_config[currentSwitch][i].server_ip = $("#hostconfig-table tbody tr").eq(i).find(".serverIp").val();
+                var roles = $("#hostconfig-table tbody tr").eq(i).find(".roles").val();
+                if(!roles) {
+                    roles = [];
+                }
+                this.options.odsState.servers_config[currentSwitch][i].roles = roles;
             }
         },
 
@@ -198,6 +248,7 @@ steal(
                     var clusterhost_id = servers[i]['clusterhost_id'];
                     var hostname = servers[i]['hostname'];
                     var server_ip = servers[i]['server_ip'];
+                    var roles = servers[i]['roles'];
 
                     var clusterhostConfigData = {
                         "hostname": hostname,
@@ -207,7 +258,8 @@ steal(
                                     "ip": server_ip
                                 }
                             }
-                        }
+                        },
+                        "roles": roles
                     };
 
                     Ods.ClusterHost.update(clusterhost_id, clusterhostConfigData, this.proxy('onHostconfigData'), this.proxy('onHostconfigDataErr'));

public/ods/ui/host_config/host_config_test.html

@@ -28,7 +28,8 @@
           port: "1",
           server_ip: "10.2.172.9",
           switch_ip: "172.29.8.40",
-          vlan: "1"
+          vlan: "1",
+          roles: []
         };
 
         var server2 = {
@@ -39,7 +40,8 @@
           port: "2",
           server_ip: "10.2.172.9",
           switch_ip: "172.29.8.40",
-          vlan: "2"
+          vlan: "2",
+          roles: []
         };
 
         if (config["172.29.8.40"] == undefined) {
@@ -60,7 +62,8 @@
           feature: null,
           machines: [],
           switches: [],
-          snmp: 1
+          snmp: 1,
+          adapter_id: 1
         };
 
         var state  = new $.Observe(odsState);

public/ods/ui/host_config/views/init.ejs

@@ -32,6 +32,7 @@
               <th>Port</th>
               <th>Host name</th>
               <th>IP address</th>
+              <th>Roles</th>
             </tr>
           </thead>
           <tbody>

public/ods/ui/host_config/views/server_row.ejs

@@ -1,5 +1,15 @@
 <tr data-hostid="<%= clusterhost_id %>">
-  <td><%= port %></td>
+  <td>
-  <td><input class="rounded hostname non-empty-value" name="hostname" value="<%= hostname  %>"></td>
+    <%= port %>
-  <td><input class="rounded serverIp non-empty-value" name="serverIp" value="<%= server_ip  %>"></td> 
+  </td>
+  <td>
+    <input class="rounded hostname non-empty-value" name="hostname" value="<%= hostname  %>">
+  </td>
+  <td>
+    <input class="rounded serverIp non-empty-value" name="serverIp" value="<%= server_ip  %>">
+  </td>
+  <td>
+    <select multiple="multiple" class="roles" name="roles">
+    </select>
+  </td> 
 </tr>

public/ods/ui/install_review/install_review.js

@@ -350,7 +350,7 @@ steal(
                     "background": "#0000ff",
                     "opacity": 0.5
                 });
-                this.totalProgressLabel.text(total * 100 + "%");
+                this.totalProgressLabel.text(Math.round(total * 100) + "%");
                 this.totalProgressbarValue.css({
                     "width": total * this.totalProgressbar.width()
                 });
@@ -411,9 +411,15 @@ steal(
                     right: 120,
                     bottom: 0,
                     left: 130
-                },
+                };
-                    width = 1000 - margin.right - margin.left,
+
-                    height = 500 - margin.top - margin.bottom;
+                var serversHeight = this.options.odsState.servers.length * 68;
+                if (serversHeight < 500) {
+                    serversHeight = 500;
+                }
+
+                var width = 1000 - margin.right - margin.left,
+                    height = serversHeight - margin.top - margin.bottom;
 
                 imgWidth = 163;
                 imgHeight = 32;

public/ods/ui/install_review/install_review_test.html

@@ -47,9 +47,23 @@
         if (config["172.29.8.40"] == undefined) {
             config["172.29.8.40"] = [server1];
             config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
         } else {
             config["172.29.8.40"].push(server1);
             config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
+            config["172.29.8.40"].push(server2);
         }
 
         var odsState = {
@@ -68,6 +82,7 @@
         var state  = new $.Observe(odsState);
         state.servers_config = config;
         state.cluster_id = 1;
+        state.servers = [{},{},{},{},{},{},{},{},{}];
 
         $('#install_review-test').ods_ui_install_review({ "odsState" : state });
 

public/ods/ui/install_review/views/install.ejs

@@ -4,6 +4,24 @@
 
 <p style="padding-left: 30px; color: black;">Click <a class="dashboard-link disabled">here</a> to go to OpenStack dashboard when deployment is finished.</p>
 
+<div class="rounded" style="margin-left: 45px; margin-bottom: 20px;"><center>
+  <table style="width:80%">
+    <tbody>
+      <tr>
+        <td style="width: 20%;">Total Progress:</td>
+        <td style="width: 70%;">
+          <div class="totalProgressbar float_left" style="width:100%; height: 20px; border: 1px solid #aaaaaa;">
+            <div class="progress-label">Waiting...</div>
+            <!--<div id="total_percentage" style="position: absolute; z-index: 5; margin-left: 390px;"></div>
+            <div id="total_bar" style="width:0%; height: 100%; background: #0000ff; opacity: 0.5;"></div>-->
+          </div>
+        </td>
+        <td style="font-size: 13px; font-weight: bold;">&nbsp;&nbsp;Errors: 0</td>
+      </tr>
+    </tbody>
+  </table>
+</center></div>
+
 <div id="install_tabs" style="margin-left: 45px;">
   <ul>
     <li><a href="#tabs-1">Graph</a></li>
@@ -23,24 +41,5 @@
   </center></div>
 </div>
 
-<br>
-
-<div class="rounded" style="margin-left: 45px;"><center>
-  <table style="width:80%">
-    <tbody>
-      <tr>
-        <td style="width: 20%;">Total Progress:</td>
-        <td style="width: 70%;">
-          <div class="totalProgressbar float_left" style="width:100%; height: 20px; border: 1px solid #aaaaaa;">
-            <div class="progress-label">Waiting...</div>
-            <!--<div id="total_percentage" style="position: absolute; z-index: 5; margin-left: 390px;"></div>
-            <div id="total_bar" style="width:0%; height: 100%; background: #0000ff; opacity: 0.5;"></div>-->
-          </div>
-        </td>
-        <td style="font-size: 13px; font-weight: bold;">&nbsp;&nbsp;Errors: 0</td>
-      </tr>
-    </tbody>
-  </table>
-</center></div>
 
 <div class="clear"></div>

public/ods/ui/networking/networking.js

@@ -162,6 +162,7 @@ steal(
 
                         if (!isConfiged) {
                             server['hostname'] = '';
+                            server['roles'] = [];
                         }
 
                         server['server_ip'] = this.startPrefix + (parseInt(this.startLastDigit) + i);

public/ods/ui/servers/servers.js

@@ -161,6 +161,7 @@ steal(
                             "adapter_id": 1
                         }
                     }, this.proxy('onClusterCreated'), this.proxy('onClusterCreatedErr'));
+                    this.options.odsState.adapter_id = 1;
                 } else {
                     // replace all hosts in current cluster
                     var cluster_id = this.options.odsState.cluster_id;
@@ -556,10 +557,10 @@ steal(
             $("#server_continue_err").hide();
 
             if (xhr.status == 200) { // OK
-                // Assume the machine orders are same in returned data (data.clusterHosts) 
+                // Assume the machine orders are same in returned data (data.cluster_hosts) 
                 // and cached data (this.options.odsState.servers)
-                for (var i = 0; i < data.clusterHosts.length; i++) {
+                for (var i = 0; i < data.cluster_hosts.length; i++) {
-                    this.options.odsState.servers[i]['clusterhost_id'] = data.clusterHosts[i].id;
+                    this.options.odsState.servers[i]['clusterhost_id'] = data.cluster_hosts[i].id;
                 }
                 $("#continuing").css("opacity", 0);
                 this.options.nav.gotoStep("3");