From c97e6c68451dd6cb5a57a13f2ed75779810e055b Mon Sep 17 00:00:00 2001
From: Tatiana Ovchinnikova <t.v.ovtchinnikova@gmail.com>
Date: Mon, 14 Feb 2022 13:49:00 -0600
Subject: [PATCH] Add pagination to Networks table in Launch Instance wizard

The most elegant way to add pagination is to refactor the table using
<hz-dynamic-table> which already contains pagination instead of wiring
it to the existing table framework.
This solution adds the pagination and makes the code more readable.

Partial-Bug: #1859423

Change-Id: I10dad8367b444f1097e677fb3dfec841405dcbc7
---
 .../network/network-details.html              |  23 +++
 .../network/network.controller.js             |  39 +++-
 .../network/network.controller.spec.js        |   3 -
 .../launch-instance/network/network.html      | 175 ++----------------
 .../networkports/ports.controller.js          |   5 +-
 .../networkports/ports.spec.js                |   1 -
 6 files changed, 69 insertions(+), 177 deletions(-)
 create mode 100644 openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network-details.html

diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network-details.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network-details.html
new file mode 100644
index 0000000000..cee9222ed4
--- /dev/null
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network-details.html
@@ -0,0 +1,23 @@
+<dl class="network-details dl-horizontal">
+  <dt translate>ID</dt>
+  <dd>{$ item.id $}</dd>
+  <dt translate>Project</dt>
+  <dd>{$ item.tenant_id $}</dd>
+  <dt translate>External Network</dt>
+  <dd>{$ item['router:external'] | yesno $}</dd>
+</dl>
+<span class="h5" translate>Provider Network</span>
+<div class="item" class="detail">
+  <dl class="col-sm-4">
+    <dt translate>Type</dt>
+    <dd>{$ item['provider:network_type'] $}</dd>
+  </dl>
+  <dl class="col-sm-4">
+    <dt translate>Segmentation ID</dt>
+    <dd>{$ item['provider:segmentation_id'] $}</dd>
+  </dl>
+  <dl class="col-sm-4">
+    <dt translate>Physical Network</dt>
+    <dd>{$ item['provider:physical_network'] $}</dd>
+  </dl>
+</div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.controller.js b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.controller.js
index 6126c9099e..bd2f324650 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.controller.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.controller.js
@@ -28,11 +28,12 @@
 
   LaunchInstanceNetworkController.$inject = [
     '$scope',
+    'horizon.dashboard.project.workflow.launch-instance.basePath',
     'horizon.framework.widgets.action-list.button-tooltip.row-warning.service',
     'launchInstanceModel'
   ];
 
-  function LaunchInstanceNetworkController($scope, tooltipService, launchInstanceModel) {
+  function LaunchInstanceNetworkController($scope, basePath, tooltipService, launchInstanceModel) {
     var ctrl = this;
 
     ctrl.networkStatuses = {
@@ -45,21 +46,45 @@
       'DOWN': gettext('Down')
     };
 
+    function getStatus(status) {
+      return ctrl.networkStatuses[status];
+    }
+
+    function getAdminState(state) {
+      return ctrl.networkAdminStates[state];
+    }
+
     ctrl.tableDataMulti = {
-      available: $scope.model.networks,
-      allocated: $scope.model.newInstanceSpec.networks,
-      displayedAvailable: [],
-      displayedAllocated: [],
+      available: launchInstanceModel.networks,
+      allocated: launchInstanceModel.newInstanceSpec.networks,
       minItems: 1
     };
 
+    ctrl.availableTableConfig = {
+      selectAll: false,
+      trackId: 'id',
+      detailsTemplateUrl: basePath + 'network/network-details.html',
+      columns: [
+        {id: 'name', title: gettext('Network'), priority: 1,
+          template: '<div>{$ item.name || item.id $}</div>'},
+        {id: 'subnets', title: gettext('Subnets Associated'), priority: 2,
+          template: '<div ng-repeat="subnet in item.subnets">{$ subnet.name || subnet.id $}</div>'},
+        {id: 'shared', title: gettext('Shared'), filters: ['yesno'], priority: 1},
+        {id: 'admin_state', title: gettext('Admin State'), filters: [getAdminState], priority: 1},
+        {id: 'status', title: gettext('Status'), filters: [getStatus], priority: 1}
+      ]
+    };
+
+    ctrl.allocatedTableConfig = angular.copy(ctrl.availableTableConfig);
+    ctrl.allocatedTableConfig.noItemsMessage = gettext(
+      'Select one or more networks from the available networks below.');
+
     ctrl.tableLimits = {
       maxAllocation: -1
     };
 
     ctrl.tableHelpText = {
-      allocHelpText: gettext('Select networks from those listed below.'),
-      availHelpText: gettext('Select at least one network')
+      availHelpText: gettext('Select one or more')
     };
 
     ctrl.tooltipModel = tooltipService;
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.controller.spec.js b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.controller.spec.js
index d2e962fc54..22dad64425 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.controller.spec.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.controller.spec.js
@@ -82,7 +82,6 @@
 
       it('contains help text for the table', function() {
         expect(ctrl.tableHelpText).toBeDefined();
-        expect(ctrl.tableHelpText.allocHelpText).toBeDefined();
         expect(ctrl.tableHelpText.availHelpText).toBeDefined();
       });
 
@@ -90,8 +89,6 @@
         expect(ctrl.tableDataMulti).toBeDefined();
         expect(ctrl.tableDataMulti.available).toEqual(['net-a', 'net-b']);
         expect(ctrl.tableDataMulti.allocated).toEqual(['net-a']);
-        expect(ctrl.tableDataMulti.displayedAllocated).toEqual([]);
-        expect(ctrl.tableDataMulti.displayedAvailable).toEqual([]);
         expect(ctrl.tableDataMulti.minItems).toEqual(1);
       });
 
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html
index eeda2f9142..d52e00ff2b 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html
@@ -1,169 +1,16 @@
 <div ng-controller="LaunchInstanceNetworkController as ctrl">
   <p class="step-description" translate>
-    Networks provide the communication channels for instances in the cloud.
+    Networks provide the communication channels for instances in the cloud. You can select ports instead of networks or a mix of both.
   </p>
 
-  <transfer-table tr-model="ctrl.tableDataMulti" help-text="ctrl.tableHelpText" limits="ctrl.tableLimits">
-    <allocated validate-number-min="{$ ctrl.tableDataMulti.minItems $}" ng-model="ctrl.tableDataMulti.allocated.length">
-      <table st-table="ctrl.tableDataMulti.displayedAllocated" st-safe-src="ctrl.tableDataMulti.allocated" hz-table
-        class="table table-striped table-rsp table-detail">
-        <thead>
-          <tr>
-            <th class="reorder"></th>
-            <th class="expander"></th>
-            <th class="rsp-p1" translate>Network</th>
-            <th class="rsp-p2" translate>Subnets Associated</th>
-            <th class="rsp-p1" translate>Shared</th>
-            <th class="rsp-p1" translate>Admin State</th>
-            <th class="rsp-p1" translate>Status</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr ng-if="ctrl.tableDataMulti.allocated.length === 0">
-            <td colspan="8">
-              <div class="no-rows-help" translate>
-                Select an item from Available items below
-              </div>
-            </td>
-          </tr>
-          <tr ng-repeat-start="row in ctrl.tableDataMulti.displayedAllocated track by row.id"
-            lr-drag-data="ctrl.tableDataMulti.displayedAllocated" lr-drag-src="reorder"
-            lr-drop-target="reorder" lr-drop-success="trCtrl.updateAllocated(e, item, collection)">
-            <td class="reorder">
-              <span class="fa fa-sort" title="{$ 'Re-order items using drag and drop'|translate $}"></span>
-              {$ $index + 1 $}
-            </td>
-            <td class="expander">
-              <span class="fa fa-chevron-right" hz-expand-detail
-                title="{$ 'Click to see more details'|translate $}"></span>
-            </td>
-            <td class="rsp-p1 word-break">{$ row.name || row.id $}</td>
-            <td class="rsp-p2">
-              <div ng-repeat="subnet in row.subnets">{$ subnet.name || subnet.id $}</div>
-            </td>
-            <td class="rsp-p1">{$ row.shared | yesno $}</td>
-            <td class="rsp-p1">{$ row.admin_state | decode:ctrl.networkAdminStates $}</td>
-            <td class="rsp-p1">{$ row.status | decode:ctrl.networkStatuses $}</td>
-            <td class="actions_column">
-              <action-list>
-                <action action-classes="'btn btn-default'"
-                  callback="trCtrl.deallocate" item="row">
-                  <span class="fa fa-arrow-down"></span>
-                </action>
-              </action-list>
-            </td>
-          </tr>
-          <tr ng-repeat-end class="detail-row">
-            <td colspan="9" class="detail">
-              <dl class="dl-horizontal">
-                <dt translate>ID</dt>
-                <dd>{$ row.id $}</dd>
-                <dt translate>Project</dt>
-                <dd>{$ row.tenant_id $}</dd>
-                <dt translate>External Network</dt>
-                <dd>{$ row['router:external'] | yesno $}</dd>
-              </dl>
-              <span class="h5" translate>Provider Network</span>
-              <div class="row" class="detail">
-                <dl class="col-sm-4">
-                  <dt translate>Type</dt>
-                  <dd>{$ row['provider:network_type'] $}</dd>
-                </dl>
-                <dl class="col-sm-4">
-                  <dt translate>Segmentation ID</dt>
-                  <dd>{$ row['provider:segmentation_id'] $}</dd>
-                </dl>
-                <dl class="col-sm-4">
-                  <dt translate>Physical Network</dt>
-                  <dd>{$ row['provider:physical_network'] $}</dd>
-                </dl>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </allocated>
-    <available>
-      <hz-magic-search-context filter-facets="ctrl.networkFacets">
-        <hz-magic-search-bar></hz-magic-search-bar>
-          <table st-magic-search st-table="ctrl.tableDataMulti.displayedAvailable" st-safe-src="ctrl.tableDataMulti.available"
-            hz-table class="table table-striped table-rsp table-detail">
-          <thead>
-            <tr>
-              <th class="expander"></th>
-              <th st-sort="name" st-sort-default class="rsp-p1" translate>Network</th>
-              <th class="rsp-p2" translate>Subnets Associated</th>
-              <th st-sort="shared" class="rsp-p1" translate>Shared</th>
-              <th st-sort="admin_state" class="rsp-p1" translate>Admin State</th>
-              <th st-sort="status" class="rsp-p1" translate>Status</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr ng-if="trCtrl.numAvailable() === 0">
-              <td colspan="7">
-                <div class="no-rows-help" translate>
-                  No available items
-                </div>
-              </td>
-            </tr>
-            <tr ng-repeat-start="row in ctrl.tableDataMulti.displayedAvailable track by row.id" ng-if="!trCtrl.allocatedIds[row.id]">
-              <td class="expander">
-                <span class="fa fa-chevron-right" hz-expand-detail
-                  title="{$ 'Click to see more details'|translate $}"></span>
-              </td>
-              <td class="rsp-p1 word-break">{$ row.name || row.id $}</td>
-              <td class="rsp-p2">
-                <div ng-repeat="subnet in row.subnets">{$ subnet.name || subnet.id $}</div>
-              </td>
-              <td class="rsp-p1">{$ row.shared | yesno $}</td>
-              <td class="rsp-p1">{$ row.admin_state | decode:ctrl.networkAdminStates $}</td>
-              <td class="rsp-p1">{$ row.status | decode:ctrl.networkStatuses $}</td>
-              <td class="actions_column">
-                <action-list button-tooltip="row.warningMessage"
-                  bt-model="ctrl.tooltipModel" bt-disabled="!row.disabled"
-                  warning-classes="'invalid'">
-                  <notifications>
-                    <span class="fa fa-exclamation-circle invalid" ng-show="row.disabled"></span>
-                  </notifications>
-                  <action action-classes="'btn btn-default'"
-                    callback="trCtrl.allocate" item="row" disabled="row.disabled">
-                    <span class="fa fa-arrow-up"></span>
-                  </action>
-                </action-list>
-              </td>
-            </tr>
-            <tr ng-repeat-end class="detail-row" ng-if="!trCtrl.allocatedIds[row.id]">
-              <td colspan="9" class="detail">
-                <dl class="dl-horizontal">
-                  <dt translate>ID</dt>
-                  <dd>{$ row.id $}</dd>
-                  <dt translate>Project</dt>
-                  <dd>{$ row.tenant_id $}</dd>
-                  <dt translate>External Network</dt>
-                  <dd>{$ row['router:external'] | yesno $}</dd>
-                </dl>
-                <span class="h5" translate>Provider Network</span>
-                <div class="row">
-                  <dl class="col-sm-4">
-                    <dt translate>Type</dt>
-                    <dd>{$ row['provider:network_type'] $}</dd>
-                  </dl>
-                  <dl class="col-sm-4">
-                    <dt translate>Segmentation ID</dt>
-                    <dd>{$ row['provider:segmentation_id'] $}</dd>
-                  </dl>
-                  <dl class="col-sm-4">
-                    <dt translate>Physical Network</dt>
-                    <dd>{$ row['provider:physical_network'] $}</dd>
-                  </dl>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </hz-magic-search-context>
-    </available>
-  </transfer-table>
+  <transfer-table tr-model="ctrl.tableDataMulti" help-text="ctrl.tableHelpText" limits="ctrl.tableLimits" clone-content>
+    <hz-dynamic-table
+        config="$isAvailableTable ? ctrl.availableTableConfig : ctrl.allocatedTableConfig"
+        items="$isAvailableTable ? ($sourceItems | filterAvailable:trCtrl.allocatedIds) : $sourceItems"
+        validate-number-min="{$ ctrl.tableDataMulti.minItems $}" ng-model="ctrl.tableDataMulti.allocated.length"
+        item-actions="trCtrl.itemActions"
+        filter-facets="$isAvailableTable && ctrl.networkFacets"
+        table="ctrl">
+    </hz-dynamic-table>
+  </transfer-table> <!-- End Networks Transfer Table -->
 </div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.controller.js b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.controller.js
index 462a8573e4..e4483b7559 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.controller.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.controller.js
@@ -100,10 +100,11 @@
     };
 
     ctrl.allocatedTableConfig = angular.copy(ctrl.availableTableConfig);
+    ctrl.allocatedTableConfig.noItemsMessage = gettext(
+      'Select one or more ports from the available ports below.');
 
     ctrl.tableHelpText = {
-      allocHelpText: gettext('Select ports from those listed below.'),
-      availHelpText: gettext('Select one or more ports')
+      availHelpText: gettext('Select one or more')
     };
 
     ctrl.filterFacets = [{
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.spec.js b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.spec.js
index da5611aa18..459a1e5f03 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.spec.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.spec.js
@@ -59,7 +59,6 @@
 
       it('contains help text for the table', function() {
         expect(ctrl.tableHelpText).toBeDefined();
-        expect(ctrl.tableHelpText.allocHelpText).toBeDefined();
       });
 
       it('nameOrID returns the name', function() {