From 49dca581257e8f29b7d8d337d17a47521759cbba Mon Sep 17 00:00:00 2001
From: Peter Piela <ppiela@cray.com>
Date: Thu, 12 May 2016 10:47:59 -0400
Subject: [PATCH] Fix node list magic search bar

Recent changes to the magic search bar caused the existing code to
stop working. This fix addresses those changes.

Change-Id: I4fc5cde241b2579676fba3a53a5a3b1db4fc587a
---
 .../admin/ironic/node-list/node-list.html     | 335 +++++++++---------
 1 file changed, 168 insertions(+), 167 deletions(-)

diff --git a/ironic_ui/static/dashboard/admin/ironic/node-list/node-list.html b/ironic_ui/static/dashboard/admin/ironic/node-list/node-list.html
index b1d8723b..8dbcfc88 100644
--- a/ironic_ui/static/dashboard/admin/ironic/node-list/node-list.html
+++ b/ironic_ui/static/dashboard/admin/ironic/node-list/node-list.html
@@ -1,170 +1,171 @@
-<table ng-controller="IronicNodeListController as table"
-       hz-table ng-cloak
-       st-table="table.nodes"
-       st-safe-src="table.nodesSrc"
-       default-sort="name"
-       default-sort-reverse="false"
-       class="table table-striped table-rsp table-detail">
+<div ng-controller="IronicNodeListController as table">
 
-  <thead>
-    <tr>
-      <th colspan="100" class="search-header">
-        <hz-magic-search-bar group-classes="input-group-sm" icon-classes="fa-search"
-          filter-facets="table.nodeFacets">
-        </hz-magic-search-bar>
-      </th>
-    </tr>
-    <tr>
-      <th colspan="8">
-        <button class="btn btn-default btn-sm pull-right"
-                ng-click="table.enrollNode()">
-          <span class="fa fa-plus"></span>
-          <span translate>Enroll Node</span>
-        </button>
-      </th>
-      <th class="action-col">
-        <action-list dropdown class="pull-right">
-          <action button-type="split-button"
-                  action-classes="'btn btn-default btn-sm'"
-                  callback="table.actions.powerOnAll"
-                  item="tCtrl.selected"
-                  disabled="tCtrl.selected.length === 0">
-            {$ 'Power on' | translate $}
-          </action>
-          <menu>
-            <action button-type="menu-item"
-                    callback="table.actions.powerOffAll"
-                    item="tCtrl.selected"
-                    disabled="tCtrl.selected.length === 0">
-              {$ 'Power off' | translate $}
-            </action>
-            <action button-type="menu-item"
-                    callback="table.putNodesInMaintenanceMode"
-                    item="tCtrl.selected"
-                    disabled="tCtrl.selected.length === 0">
-              {$ 'Maintenance on' | translate $}
-            </action>
-            <action button-type="menu-item"
-                    callback="table.removeNodesFromMaintenanceMode"
-                    item="tCtrl.selected"
-                    disabled="tCtrl.selected.length === 0">
-              {$ 'Maintenance off' | translate $}
-            </action>
-            <action button-type="menu-item"
-                    callback="table.actions.deleteNodes"
-                    item="tCtrl.selected"
-                    disabled="tCtrl.selected.length === 0">
-              <span class="fa fa-trash"></span>
-              {$ 'Delete nodes' | translate $}
-            </action>
-          </menu>
-        </action-list>
-      </th>
-    </tr>
+  <hz-magic-search-context filter-facets="table.nodeFacets">
+    <hz-magic-search-bar>
+    </hz-magic-search-bar>
 
-    <tr>
-      <th class="multi_select_column">
-        <input type="checkbox"
-               hz-select-all="table.nodes"/>
-      </th>
-      <th translate class="rsp-p1" st-sort="name" st-sort-default="name">
-        Node Name
-      </th>
-      <th translate class="rsp-p1" st-sort="instance_uuid">
-        Instance ID
-      </th>
-      <th translate class="rsp-p2" st-sort="power_state">
-        Power State
-      </th>
-      <th translate class="rsp-p2" st-sort="provision_state">
-        Provisioning State
-      </th>
-      <th translate class="rsp-p2" st-sort="maintenance">
-        Maintenance
-      </th>
-      <th translate class="rsp-p2" st-sort="ports">
-        Ports
-      </th>
-      <th translate class="rsp-p2" st-sort="driver">
-        Driver
-      </th>
-      <th translate class="actions_column">
-        Actions
-      </th>
-    </tr>
-  </thead>
+    <table st-magic-search
+           hz-table ng-cloak
+           st-table="table.nodes"
+           st-safe-src="table.nodesSrc"
+           default-sort="name"
+           default-sort-reverse="false"
+           class="table table-striped table-rsp table-detail">
 
-  <tbody>
-    <tr ng-repeat="node in table.nodes">
-      <td class="multi_select_column">
-        <input type="checkbox"
-               hz-select="node"
-               ng-model="tCtrl.selections[node.id].checked"/>
-      </td>
-      <td class="rsp-p1">
-        <a href="{$ node.uuid $}">
-          {$ node.name || node.uuid $}
-        </a>
-      </td>
-      <td class="rsp-p1">
-        <!-- multiple tags used purposefully to ensure that the link
-        is removed if node uuid == no instance. Using ng-attr-href
-        only removed the href and the <a> styling remained which could
-        cause confusion for users. -->
-        <a href="/admin/instances/{$ node.instance_uuid $}/detail"
-           ng-if="node.instance_uuid">
-          {$ node.instance_uuid $}
-        </a>
-        <span ng-if="!node.instance_uuid">{$ 'No Instance' | translate $}</span>
-      </td>
-      <td class="rsp-p2" >
-        <div ng-class="{'running': node['target_power_state']}">
-          {$ node.power_state $}
-        </div>
-      </td>
-      <td class="rsp-p2">{$ node.provision_state $}</td>
-      <td class="rsp-p2">{$ node.maintenance $}</td>
-      <td class="rsp-p2">{$ node.ports.length $}</td>
-      <td class="rsp-p2">{$ node.driver $}</td>
-      <td class="actions_column">
-        <action-list dropdown>
-          <action button-type="split-button"
-                  action-classes="'btn btn-default btn-sm'"
-                  callback="table.actions.powerOn"
-                  disabled="node['power_state']!=='power off'"
-                  item="node">
-            {$ 'Power on' | translate $}
-          </action>
-          <menu>
-            <action button-type="menu-item"
-                    callback="table.actions.powerOff"
-                    disabled="node['power_state']!=='power on'"
-                    item="node">
-              {$ 'Power off' | translate $}
-            </action>
-            <action button-type="menu-item"
-                    callback="table.putNodeInMaintenanceMode"
-                    disabled="node['maintenance']"
-                    item="node">
-              {$ 'Maintenance on' | translate $}
-            </action>
-            <action button-type="menu-item"
-                    callback="table.removeNodeFromMaintenanceMode"
-                    disabled="!node['maintenance']"
-                    item="node">
-              {$ 'Maintenance off' | translate $}
-            </action>
-            <action button-type="menu-item"
-                    callback="table.actions.deleteNode"
-                    disabled="!(node['provision_state']==='available' || node['provision_state']==='nostate' || node['provision_state']==='manageable' || node['provision_state']==='enroll')"
-                    item="node">
-              <span class="fa fa-trash"></span>
-              {$ 'Delete node' | translate $}
-            </action>
-          </menu>
-        </action-list>
-      </td>
-    </tr>
-  </tbody>
-  <tfoot hz-table-footer items="table.nodes"></tfoot>
-</table>
+      <thead>
+        <tr>
+          <th colspan="8">
+            <button class="btn btn-default btn-sm pull-right"
+                    ng-click="table.enrollNode()">
+              <span class="fa fa-plus"></span>
+              <span translate>Enroll Node</span>
+            </button>
+          </th>
+          <th class="action-col">
+            <action-list dropdown class="pull-right">
+              <action button-type="split-button"
+                      action-classes="'btn btn-default btn-sm'"
+                      callback="table.actions.powerOnAll"
+                      item="tCtrl.selected"
+                      disabled="tCtrl.selected.length === 0">
+                {$ 'Power on' | translate $}
+              </action>
+              <menu>
+                <action button-type="menu-item"
+                        callback="table.actions.powerOffAll"
+                        item="tCtrl.selected"
+                        disabled="tCtrl.selected.length === 0">
+                  {$ 'Power off' | translate $}
+                </action>
+                <action button-type="menu-item"
+                        callback="table.putNodesInMaintenanceMode"
+                        item="tCtrl.selected"
+                        disabled="tCtrl.selected.length === 0">
+                  {$ 'Maintenance on' | translate $}
+                </action>
+                <action button-type="menu-item"
+                        callback="table.removeNodesFromMaintenanceMode"
+                        item="tCtrl.selected"
+                        disabled="tCtrl.selected.length === 0">
+                  {$ 'Maintenance off' | translate $}
+                </action>
+                <action button-type="menu-item"
+                        callback="table.actions.deleteNodes"
+                        item="tCtrl.selected"
+                        disabled="tCtrl.selected.length === 0">
+                  <span class="fa fa-trash"></span>
+                  {$ 'Delete nodes' | translate $}
+                </action>
+              </menu>
+            </action-list>
+          </th>
+        </tr>
+
+        <tr>
+          <th class="multi_select_column">
+            <input type="checkbox"
+                   hz-select-all="table.nodes"/>
+          </th>
+          <th translate class="rsp-p1" st-sort="name" st-sort-default="name">
+            Node Name
+          </th>
+          <th translate class="rsp-p1" st-sort="instance_uuid">
+            Instance ID
+          </th>
+          <th translate class="rsp-p2" st-sort="power_state">
+            Power State
+          </th>
+          <th translate class="rsp-p2" st-sort="provision_state">
+            Provisioning State
+          </th>
+          <th translate class="rsp-p2" st-sort="maintenance">
+            Maintenance
+          </th>
+          <th translate class="rsp-p2" st-sort="ports">
+            Ports
+          </th>
+          <th translate class="rsp-p2" st-sort="driver">
+            Driver
+          </th>
+          <th translate class="actions_column">
+            Actions
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr ng-repeat="node in table.nodes">
+          <td class="multi_select_column">
+            <input type="checkbox"
+                   hz-select="node"
+                   ng-model="tCtrl.selections[node.id].checked"/>
+          </td>
+          <td class="rsp-p1">
+            <a href="{$ node.uuid $}">
+              {$ node.name || node.uuid $}
+            </a>
+          </td>
+          <td class="rsp-p1">
+            <!-- multiple tags used purposefully to ensure that the link
+                 is removed if node uuid == no instance. Using ng-attr-href
+                 only removed the href and the <a> styling remained which could
+                 cause confusion for users. -->
+            <a href="/admin/instances/{$ node.instance_uuid $}/detail"
+               ng-if="node.instance_uuid">
+              {$ node.instance_uuid $}
+            </a>
+            <span ng-if="!node.instance_uuid">{$ 'No Instance' | translate $}</span>
+          </td>
+          <td class="rsp-p2" >
+            <div ng-class="{'running': node['target_power_state']}">
+              {$ node.power_state $}
+            </div>
+          </td>
+          <td class="rsp-p2">{$ node.provision_state $}</td>
+          <td class="rsp-p2">{$ node.maintenance $}</td>
+          <td class="rsp-p2">{$ node.ports.length $}</td>
+          <td class="rsp-p2">{$ node.driver $}</td>
+          <td class="actions_column">
+            <action-list dropdown>
+              <action button-type="split-button"
+                      action-classes="'btn btn-default btn-sm'"
+                      callback="table.actions.powerOn"
+                      disabled="node['power_state']!=='power off'"
+                      item="node">
+                {$ 'Power on' | translate $}
+              </action>
+              <menu>
+                <action button-type="menu-item"
+                        callback="table.actions.powerOff"
+                        disabled="node['power_state']!=='power on'"
+                        item="node">
+                  {$ 'Power off' | translate $}
+                </action>
+                <action button-type="menu-item"
+                        callback="table.putNodeInMaintenanceMode"
+                        disabled="node['maintenance']"
+                        item="node">
+                  {$ 'Maintenance on' | translate $}
+                </action>
+                <action button-type="menu-item"
+                        callback="table.removeNodeFromMaintenanceMode"
+                        disabled="!node['maintenance']"
+                        item="node">
+                  {$ 'Maintenance off' | translate $}
+                </action>
+                <action button-type="menu-item"
+                        callback="table.actions.deleteNode"
+                        disabled="!(node['provision_state']==='available' || node['provision_state']==='nostate' || node['provision_state']==='manageable' || node['provision_state']==='enroll')"
+                        item="node">
+                  <span class="fa fa-trash"></span>
+                  {$ 'Delete node' | translate $}
+                </action>
+              </menu>
+            </action-list>
+          </td>
+        </tr>
+      </tbody>
+      <tfoot hz-table-footer items="table.nodes"></tfoot>
+    </table>
+  </hz-magic-search-context>
+</div>