From eff75b2aecef5051db3c78b30640cbd7f40bb7dd Mon Sep 17 00:00:00 2001
From: Peter Piela <ppiela@cray.com>
Date: Fri, 26 Aug 2016 09:55:28 -0400
Subject: [PATCH] Improve the display of node information

Automatically set focus to the reason field in the maintenance popup
Use filters like noValue and date: 'medium' to improve display of node data
Ensure event handlers are cleaned up when the node-list is destroyed

Change-Id: I15eee5beb933ff5623d21d418dbd771ab3cfc043
---
 .../admin/ironic/maintenance/maintenance.html |  2 +-
 .../node-details/sections/configuration.html  | 30 +++++++--------
 .../node-details/sections/overview.html       | 24 ++++++------
 .../ironic/node-list/node-list.controller.js  | 38 +++++++++++++------
 4 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/ironic_ui/static/dashboard/admin/ironic/maintenance/maintenance.html b/ironic_ui/static/dashboard/admin/ironic/maintenance/maintenance.html
index 9d1dd805..4110057f 100644
--- a/ironic_ui/static/dashboard/admin/ironic/maintenance/maintenance.html
+++ b/ironic_ui/static/dashboard/admin/ironic/maintenance/maintenance.html
@@ -9,6 +9,7 @@
         <input type="text"
                class="form-control input-sm"
                ng-model="maintReason"
+               auto-focus
                placeholder=""/>
       </div>
     </div>
@@ -28,4 +29,3 @@
     Put Node(s) Into Maintenance Mode
   </button>
 </div>
-
diff --git a/ironic_ui/static/dashboard/admin/ironic/node-details/sections/configuration.html b/ironic_ui/static/dashboard/admin/ironic/node-details/sections/configuration.html
index 9bc51c3b..824c5fb7 100644
--- a/ironic_ui/static/dashboard/admin/ironic/node-details/sections/configuration.html
+++ b/ironic_ui/static/dashboard/admin/ironic/node-details/sections/configuration.html
@@ -6,13 +6,13 @@
     <hr class="header_rule">
     <dl class="dl-horizontal">
       <dt translate>Node ID</dt>
-      <dd>{$ ctrl.node.uuid $}</dd>
+      <dd>{$ ctrl.node.uuid | noValue $}</dd>
       <dt translate>Chassis ID</dt>
       <dd>{$ ctrl.node.chassis_uuid | noValue $}</dd>
       <dt translate>Created At</dt>
-      <dd>{$ ctrl.node.created_at | date:'medium' $}</dd>
+      <dd>{$ ctrl.node.created_at | date:'medium' | noValue $}</dd>
       <dt translate>Extra</dt>
-      <dd>{$ ctrl.node.extra $}</dd>
+      <dd>{$ ctrl.node.extra | noValue $}</dd>
     </dl>
   </div>
 
@@ -114,7 +114,7 @@
     <dl class="dl-horizontal">
       <dt ng-repeat-start="(propertyName, propertyValue) in ctrl.node.properties">
         {$ propertyName $}</dt>
-      <dd ng-repeat-end>{$ propertyValue $}</dd>
+      <dd ng-repeat-end>{$ propertyValue | noValue $}</dd>
     </dl>
   </div>
 
@@ -125,29 +125,29 @@
     <div ng-switch="ctrl.node.driver">
       <dl ng-switch-when="pxe_ssh" class="dl-horizontal">
         <dt translate>Driver</dt>
-        <dd>{$ ctrl.node.driver $}</dd>
+        <dd>{$ ctrl.node.driver | noValue $}</dd>
         <dt translate>SSH Port</dt>
-        <dd>{$ ctrl.node.driver_info.ssh_port $}</dd>
+        <dd>{$ ctrl.node.driver_info.ssh_port | noValue $}</dd>
         <dt translate>SSH Username</dt>
-        <dd>{$ ctrl.node.driver_info.ssh_username $}</dd>
+        <dd>{$ ctrl.node.driver_info.ssh_username | noValue $}</dd>
         <dt translate>Deploy Kernel</dt>
         <dd>
           <a ng-if="deploy_kernel_is_uuid = ctrl.isUuid(ctrl.node.driver_info.deploy_kernel)"
              href="/dashboard/admin/images/{$ ctrl.node.driver_info.deploy_kernel $}/detail">
-            {$ ctrl.node.driver_info.deploy_kernel $}
+            {$ ctrl.node.driver_info.deploy_kernel | noValue $}
           </a>
           <span ng-if="!deploy_kernel_is_uuid">
-            {$ ctrl.node.driver_info.deploy_kernel $}
+            {$ ctrl.node.driver_info.deploy_kernel | noValue $}
           </span>
         </dd>
         <dt translate>Deploy Ramdisk</dt>
         <dd>
           <a ng-if="deploy_ramdisk_is_uuid = ctrl.isUuid(ctrl.node.driver_info.deploy_ramdisk)"
              href="/dashboard/admin/images/{$ ctrl.node.driver_info.deploy_ramdisk $}/detail">
-            {$ ctrl.node.driver_info.deploy_ramdisk $}
+            {$ ctrl.node.driver_info.deploy_ramdisk | noValue $}
           </a>
           <span ng-if="!deploy_ramdisk_is_uuid">
-            {$ ctrl.node.driver_info.deploy_ramdisk $}
+            {$ ctrl.node.driver_info.deploy_ramdisk | noValue $}
           </span>
         </dd>
       </dl>
@@ -176,23 +176,23 @@
     <div ng-switch="ctrl.node.driver">
       <dl ng-switch-when="pxe_ssh" class="dl-horizontal">
         <dt translate>Instance Name</dt>
-        <dd>{$ ctrl.node.instance_info.display_name $}</dd>
+        <dd>{$ ctrl.node.instance_info.display_name | noValue $}</dd>
         <dt translate>Ramdisk</dt>
         <dd>
           <a href="/dashboard/admin/images/{$ ctrl.node.instance_info.ramdisk $}/detail">
-            {$ ctrl.node.instance_info.ramdisk $}
+            {$ ctrl.node.instance_info.ramdisk | noValue $}
           </a>
         </dd>
         <dt translate>Kernel</dt>
         <dd>
           <a href="/dashboard/admin/images/{$ ctrl.node.instance_info.kernel $}/detail">
-            {$ ctrl.node.instance_info.kernel $}
+            {$ ctrl.node.instance_info.kernel | noValue $}
           </a>
         </dd>
       </dl>
       <dl ng-switch-default class="dl-horizontal">
         <dt ng-repeat-start="(id, value) in ctrl.node.instance_info">{$ id $}</dt>
-        <dd ng-repeat-end>{$ value $}</dd>
+        <dd ng-repeat-end>{$ value | noValue $}</dd>
       </dl>
     </div>
   </div>
diff --git a/ironic_ui/static/dashboard/admin/ironic/node-details/sections/overview.html b/ironic_ui/static/dashboard/admin/ironic/node-details/sections/overview.html
index d54477cd..91b98db3 100644
--- a/ironic_ui/static/dashboard/admin/ironic/node-details/sections/overview.html
+++ b/ironic_ui/static/dashboard/admin/ironic/node-details/sections/overview.html
@@ -8,17 +8,17 @@
       <dt translate>Name</dt>
       <dd>{$ ctrl.node['name'] $}</dd>
       <dt translate>Maintenance</dt>
-      <dd>{$ ctrl.node['maintenance'] ? 'True' : 'False' $}</dd>
+      <dd>{$ ctrl.node['maintenance'] | yesno $}</dd>
       <dt translate>Maintenance Reason</dt>
-      <dd>{$ ctrl.node['maintenance_reason'] $}</dd>
+      <dd>{$ ctrl.node['maintenance_reason'] | noValue $}</dd>
       <dt translate>Inspection Started At</dt>
-      <dd>{$ ctrl.node['inspection_started_at'] $}</dd>
+      <dd>{$ ctrl.node['inspection_started_at'] | date: 'medium' | noValue $}</dd>
       <dt translate>Inspection Finished At</dt>
-      <dd>{$ ctrl.node['inspection_finished_at'] $}</dd>
+      <dd>{$ ctrl.node['inspection_finished_at'] | date: 'medium' | noValue $}</dd>
       <dt translate>Reservation</dt>
-      <dd>{$ ctrl.node['reservation'] $}</dd>
+      <dd>{$ ctrl.node['reservation'] | noValue $}</dd>
       <dt translate>Console Enabled</dt>
-      <dd>{$ ctrl.node['console_enabled'] ? 'True' : 'False' $}</dd>
+      <dd>{$ ctrl.node['console_enabled'] | yesno $}</dd>
     </dl>
   </div>
 
@@ -30,21 +30,21 @@
       <dt translate>Instance ID</dt>
       <dd>
         <a href="/admin/instances/{$ ctrl.node['instance_uuid'] $}/detail">
-          {$ ctrl.node['instance_uuid'] $}
+          {$ ctrl.node['instance_uuid'] | noValue $}
         </a>
       </dd>
       <dt translate>Power State</dt>
       <dd ng-class="{'running': ctrl.node['target_power_state']}">{$ ctrl.node['power_state'] $}</dd>
       <dt translate>Target Power State</dt>
-      <dd>{$ ctrl.node['target_power_state'] $}</dd>
+      <dd>{$ ctrl.node['target_power_state'] | noValue $}</dd>
       <dt translate>Provision State</dt>
-      <dd>{$ ctrl.node['provision_state'] $}</dd>
+      <dd>{$ ctrl.node['provision_state'] | noValue $}</dd>
       <dt translate>Target Provision State</dt>
-      <dd>{$ ctrl.node['target_provision_state'] $}</dd>
+      <dd>{$ ctrl.node['target_provision_state'] | noValue $}</dd>
       <dt translate>Last Error</dt>
-      <dd>{$ ctrl.node['last_error'] $}</dd>
+      <dd>{$ ctrl.node['last_error'] | noValue $}</dd>
       <dt translate>Updated At</dt>
-      <dd>{$ ctrl.node['updated_at'] $}</dd>
+      <dd>{$ ctrl.node['updated_at'] | date: 'medium' | noValue $}</dd>
     </dl>
   </div>
 </div>
diff --git a/ironic_ui/static/dashboard/admin/ironic/node-list/node-list.controller.js b/ironic_ui/static/dashboard/admin/ironic/node-list/node-list.controller.js
index 295d96c1..a539e5b3 100755
--- a/ironic_ui/static/dashboard/admin/ironic/node-list/node-list.controller.js
+++ b/ironic_ui/static/dashboard/admin/ironic/node-list/node-list.controller.js
@@ -22,6 +22,7 @@
       .controller('IronicNodeListController', IronicNodeListController);
 
   IronicNodeListController.$inject = [
+    '$scope',
     '$rootScope',
     'horizon.app.core.openstack-service-api.ironic',
     'horizon.dashboard.admin.ironic.events',
@@ -31,7 +32,8 @@
     'horizon.dashboard.admin.ironic.enroll-node.service'
   ];
 
-  function IronicNodeListController($rootScope,
+  function IronicNodeListController($scope,
+                                    $rootScope,
                                     ironic,
                                     ironicEvents,
                                     actions,
@@ -89,20 +91,32 @@
     ];
 
     // Listen for the creation of new nodes, and update the node list
-    $rootScope.$on(ironicEvents.ENROLL_NODE_SUCCESS, function() {
-      init();
-    });
+    var enrollNodeHandler =
+        $rootScope.$on(ironicEvents.ENROLL_NODE_SUCCESS,
+                       function() {
+                         init();
+                       });
 
-    $rootScope.$on(ironicEvents.DELETE_NODE_SUCCESS, function() {
-      init();
-    });
+    var deleteNodeHandler = $rootScope.$on(ironicEvents.DELETE_NODE_SUCCESS,
+                                           function() {
+                                             init();
+                                           });
 
-    $rootScope.$on(ironicEvents.CREATE_PORT_SUCCESS, function() {
-      init();
-    });
+    var createPortHandler = $rootScope.$on(ironicEvents.CREATE_PORT_SUCCESS,
+                                           function() {
+                                             init();
+                                           });
 
-    $rootScope.$on(ironicEvents.DELETE_PORT_SUCCESS, function() {
-      init();
+    var deletePortHandler = $rootScope.$on(ironicEvents.DELETE_PORT_SUCCESS,
+                                           function() {
+                                             init();
+                                           });
+
+    $scope.$on('destroy', function() {
+      enrollNodeHandler();
+      deleteNodeHandler();
+      createPortHandler();
+      deletePortHandler();
     });
 
     init();