Merge "Allow wiring of <hz-dynamic-table> into <transfer-table>"

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair-details.html

@@ -1,6 +1,6 @@
 <dl class="key-pair-details">
   <dt translate>Public Key</dt>
   <dd>
-    <pre><code>{$ row.public_key $}</code></pre>
+    <pre><code>{$ item.public_key $}</code></pre>
   </dd>
 </dl>

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.controller.js

@@ -62,12 +62,32 @@
 
     ctrl.tableData = {
       available: launchInstanceModel.keypairs,
-      allocated: launchInstanceModel.newInstanceSpec.key_pair,
-      displayedAvailable: [],
-      displayedAllocated: []
+      allocated: launchInstanceModel.newInstanceSpec.key_pair
     };
 
-    ctrl.tableDetails = basePath + 'keypair/keypair-details.html';
+    ctrl.availableTableConfig = {
+      selectAll: false,
+      trackId: 'id',
+      detailsTemplateUrl: basePath + 'keypair/keypair-details.html',
+      columns: [
+        {id: 'name', title: gettext('Name'), priority: 1},
+        {id: 'fingerprint', title: gettext('Fingerprint'), priority: 2}
+      ]
+    };
+
+    ctrl.allocatedTableConfig = angular.copy(ctrl.availableTableConfig);
+    ctrl.allocatedTableConfig.noItemsMessage = gettext(
+      'Select a key pair from the available key pairs below.');
+
+    ctrl.filterFacets = [{
+      label: gettext('Name'),
+      name: 'name',
+      singleton: true
+    }, {
+      label: gettext('Fingerprint'),
+      name: 'fingerprint',
+      singleton: true
+    }];
 
     ctrl.tableLimits = {
       maxAllocation: 1

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.controller.spec.js

@@ -66,15 +66,17 @@
 
       it('sets table data to appropriate scoped items', function() {
         expect(ctrl.tableData).toBeDefined();
-        expect(Object.keys(ctrl.tableData).length).toBe(4);
+        expect(Object.keys(ctrl.tableData).length).toBe(2);
         expect(ctrl.tableData.available).toEqual([{name: 'key1'}, {name: 'key2'}]);
         expect(ctrl.tableData.allocated).toEqual(['key1']);
-        expect(ctrl.tableData.displayedAvailable).toEqual([]);
-        expect(ctrl.tableData.displayedAllocated).toEqual([]);
       });
 
       it('defines table details template', function() {
-        expect(ctrl.tableDetails).toBeDefined();
+        expect(ctrl.availableTableConfig.detailsTemplateUrl).toBeDefined();
+      });
+
+      it('defines a custom no items message for allocated table', function() {
+        expect(ctrl.allocatedTableConfig.noItemsMessage).toBeDefined();
       });
 
       it('allows allocation of only one', function() {

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.html

@@ -27,102 +27,13 @@
     <translate>Import Key Pair</translate>
   </button>
 
-  <transfer-table tr-model="ctrl.tableData"
-                  limits="ctrl.tableLimits">
-
-    <!-- Key Pairs Allocated-->
-    <allocated validate-number-min="ctrl.isKeypairRequired" ng-model="ctrl.tableData.allocated.length">
-      <table st-table="ctrl.tableData.displayedAllocated"
-             st-safe-src="ctrl.tableData.allocated" hz-table
-             class="table table-striped table-rsp table-detail">
-        <thead>
-          <tr>
-            <th class="expander"></th>
-            <th class="rsp-p1" translate>Name</th>
-            <th class="rsp-p2" translate>Fingerprint</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-        <tr ng-if="ctrl.tableData.allocated.length === 0">
-          <td colspan="8">
-            <div class="no-rows-help" translate>
-              Select a key pair from the available key pairs below.
-            </div>
-          </td>
-        </tr>
-        <tr ng-repeat-start="row in ctrl.tableData.displayedAllocated track by row.id">
-          <td class="expander">
-            <span class="fa fa-chevron-right" hz-expand-detail
-                  title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
-          </td>
-          <td class="rsp-p1">{$ row.name $}</td>
-          <td class="rsp-p2">{$ row.fingerprint $}</td>
-          <td class="actions_column">
-            <action-list>
-              <action action-classes="'btn btn-default'"
-                      callback="trCtrl.deallocate" item="row">
-                <span class="fa fa-minus"></span>
-              </action>
-            </action-list>
-          </td>
-        </tr>
-        <tr ng-repeat-end class="detail-row">
-          <td class="detail" colspan="4" ng-include="ctrl.tableDetails"></td>
-        </tr>
-        </tbody>
-      </table>
-    </allocated>
-
-    <!-- Key Pairs Available -->
-    <available>
-      <table st-table="ctrl.tableData.displayedAvailable"
-             st-safe-src="ctrl.tableData.available"
-             hz-table class="table table-striped table-rsp table-detail">
-        <thead>
-          <tr>
-            <th class="search-header" colspan="7">
-              <hz-search-bar icon-classes="fa-search"></hz-search-bar>
-            </th>
-          </tr>
-          <tr>
-            <th class="expander"></th>
-            <th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
-            <th st-sort="fingerprint" class="rsp-p1" translate>Fingerprint</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr ng-if="trCtrl.numAvailable() === 0">
-            <td colspan="8">
-              <div class="no-rows-help">
-                {$ ::trCtrl.helpText.noneAvailText $}
-              </div>
-            </td>
-          </tr>
-          <tr ng-repeat-start="row in ctrl.tableData.displayedAvailable track by row.id"
-              ng-if="!trCtrl.allocatedIds[row.id]">
-            <td class="expander">
-              <span class="fa fa-chevron-right" hz-expand-detail
-                    title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
-            </td>
-            <td class="rsp-p1">{$ row.name$}</td>
-            <td class="rsp-p1">{$ row.fingerprint $}</td>
-            <td class="actions_column">
-              <action-list>
-                <action action-classes="'btn btn-default'"
-                        callback="trCtrl.allocate" item="row">
-                  <span class="fa fa-plus"></span>
-                </action>
-              </action-list>
-            </td>
-          </tr>
-          <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
-            <td class="detail" colspan="4" ng-include="ctrl.tableDetails">
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </available>
+  <transfer-table tr-model="ctrl.tableData" limits="ctrl.tableLimits" clone-content>
+    <hz-dynamic-table
+        config="$isAvailableTable ? ctrl.availableTableConfig : ctrl.allocatedTableConfig"
+        items="$isAvailableTable ? ($sourceItems | filterAvailable:trCtrl.allocatedIds) : $sourceItems"
+        item-actions="trCtrl.itemActions"
+        filter-facets="$isAvailableTable && ctrl.filterFacets"
+        table="ctrl">
+    </hz-dynamic-table>
   </transfer-table> <!-- End Key Pairs Table -->
 </div> <!-- End Controller -->

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance-model.service.js

@@ -346,7 +346,7 @@
       angular.extend(
         model.keypairs,
         data.data.items.map(function (e) {
-          e.keypair.id = e.keypair.name;
+          e.keypair.id = 'li_keypair:' + e.keypair.name;
           return e.keypair;
         }));
       if (data.data.items.length === 1) {