From 38e5cd602c5eacb7753b1d7f23e2286bbf25d51d Mon Sep 17 00:00:00 2001
From: Peter Piela <ppiela@cray.com>
Date: Tue, 31 May 2016 09:30:09 -0400
Subject: [PATCH] Provide capability to select deploy images

In addition to typing in a value for the uuid or location of a
deploy_kernel or deploy_ramdisk the user now has the option to
select an image from the glance repository using a button activated
dropdown.

Change-Id: I563fd07265e8dd783a7b91cb0ffcfed767c0ce10
---
 .../enroll-node/enroll-node.controller.js     |  15 +++
 .../admin/ironic/enroll-node/enroll-node.html | 107 +++++++++++-------
 2 files changed, 84 insertions(+), 38 deletions(-)

diff --git a/ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.controller.js b/ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.controller.js
index fc3ad73a..dfdd4762 100644
--- a/ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.controller.js
+++ b/ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.controller.js
@@ -27,6 +27,7 @@
     '$rootScope',
     '$modalInstance',
     'horizon.app.core.openstack-service-api.ironic',
+    'horizon.app.core.openstack-service-api.glance',
     'horizon.dashboard.admin.ironic.enroll-node.service',
     '$log'
   ];
@@ -34,11 +35,13 @@
   function EnrollNodeController($rootScope,
                                 $modalInstance,
                                 ironic,
+                                glance,
                                 enrollNodeService,
                                 $log) {
     var ctrl = this;
 
     ctrl.drivers = null;
+    ctrl.images = null;
     ctrl.loadingDriverProperties = false;
     // Object containing the set of properties associated with the currently
     // selected driver
@@ -57,6 +60,7 @@
 
     function init() {
       loadDrivers();
+      getImages();
     }
 
     /**
@@ -70,6 +74,17 @@
       });
     }
 
+    /**
+     * Get the list of images from Glance
+     *
+     * @return {void}
+     */
+    function getImages() {
+      glance.getImages().then(function(response) {
+        ctrl.images = response.data.items;
+      });
+    }
+
     /**
      * Get the properties associated with a specified driver
      *
diff --git a/ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.html b/ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.html
index aadc9488..3166182a 100644
--- a/ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.html
+++ b/ironic_ui/static/dashboard/admin/ironic/enroll-node/enroll-node.html
@@ -5,9 +5,20 @@
 <div class="modal-body">
   <div class="tabbable"> <!-- Only required for left/right tabs -->
     <ul class="nav nav-tabs">
-      <li class="required active"><a href="" data-target="#nodeInfo" data-toggle="tab" translate>Node Info</a></li>
-      <li ng-if="!ctrl.driverProperties" class="disabled"><a data-target="#driverDetails" translate>Driver Details</a></li>
-      <li ng-if="ctrl.driverProperties"><a href="" data-target="#driverDetails" data-toggle="tab" translate>Driver Details</a></li>
+      <li class="required active">
+        <a href=""
+           data-target="#nodeInfo"
+           data-toggle="tab"
+           translate>Node Info</a></li>
+      <li ng-if="!ctrl.driverProperties"
+          class="disabled">
+        <a data-target="#driverDetails"
+           translate>Driver Details</a></li>
+      <li ng-if="ctrl.driverProperties">
+        <a href=""
+           data-target="#driverDetails"
+           data-toggle="tab"
+           translate>Driver Details</a></li>
     </ul>
 
     <!--enroll node form-->
@@ -153,43 +164,63 @@
             <small><em><i class="fa fa-spin fa-refresh"></i></em></small>
           </p>
           <div class="form-group"
-                 ng-repeat="(name, property) in ctrl.driverProperties"
-                 ng-show="property.isActive()">
-              <label for="{$ name $}"
-                     class="control-label"
-                     style="white-space: nowrap"
-                     translate>
-                {$ name $}
-                <span class="help-icon"
-                      data-container="body"
-                      title=""
-                      data-toggle="tooltip"
-                      data-original-title="{$ property.getDescription() | translate $}">
-                  <span class="fa fa-question-circle"></span>
-                </span>
-              </label>
-              <div ng-if="!property.getSelectOptions()" class="">
-                <input type="text"
-                       class="form-control"
-                       id="{$ name $}"
-                       name="{$ name $}"
-                       ng-model="property.inputValue"
-                       placeholder="{$ property.getDescription() | translate $}"
-                       ng-required="property.isRequired()"/>
-              </div>
-              <div ng-if="property.getSelectOptions()" class="">
-                <select id="{$ name $}"
-                        class="form-control"
-                        ng-options="opt for opt in property.getSelectOptions()"
-                        ng-model="property.inputValue"
-                        ng-required="property.isRequired()">
-                  <option value=""
-                          disabled
-                          selected
-                          translate>{$ property.getDescription() $}</option>
-                </select>
+               ng-repeat="(name, property) in ctrl.driverProperties"
+               ng-show="property.isActive()">
+            <label for="{$ name $}"
+                   class="control-label"
+                   style="white-space: nowrap"
+                   translate>
+              {$ name $}
+              <span class="help-icon"
+                    data-container="body"
+                    title=""
+                    data-toggle="tooltip"
+                    data-original-title="{$ property.getDescription() | translate $}">
+                <span class="fa fa-question-circle"></span>
+              </span>
+            </label>
+            <div ng-if="!property.getSelectOptions()"
+                 ng-class="name === 'deploy_kernel' ||
+                           name === 'deploy_ramdisk' ? 'input-group' : ''">
+              <input type="text"
+                     class="form-control"
+                     id="{$ name $}"
+                     name="{$ name $}"
+                     ng-model="property.inputValue"
+                     placeholder="{$ property.getDescription() | translate $}"
+                     ng-required="property.isRequired()"/>
+              <div ng-if="name === 'deploy_kernel' ||
+                          name === 'deploy_ramdisk'"
+                   class="input-group-btn">
+                <button type="button"
+                        class="btn btn-primary dropdown-toggle"
+                        data-toggle="dropdown"
+                        translate>
+                  Choose an Image
+                </button>
+                <ul class="dropdown-menu">
+                  <li>
+                    <a class="dropdown-item"
+                       ng-repeat="imageObj in ctrl.images"
+                       href="#"
+                       ng-click="property.inputValue = imageObj.id">{$ imageObj.name + ' [' + imageObj.id + ']' $}</a>
+                  </li>
+                </ul>
               </div>
             </div>
+            <div ng-if="property.getSelectOptions()" class="">
+              <select id="{$ name $}"
+                      class="form-control"
+                      ng-options="opt for opt in property.getSelectOptions()"
+                      ng-model="property.inputValue"
+                      ng-required="property.isRequired()">
+                <option value=""
+                        disabled
+                        selected
+                        translate>{$ property.getDescription() $}</option>
+              </select>
+            </div>
+          </div>
         </div>
         <!--end driver details tab-->
       </div>