openstack/horizon
Code Issues Proposed changes

Add pagination to Networks table in Launch Instance wizard

Browse Source 
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
This commit is contained in:
Tatiana Ovchinnikova 2022-02-14 13:49:00 -06:00
parent 18545ca921
commit c97e6c6845
6 changed files with 69 additions and 177 deletions
openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance
network
network-details.htmlnetwork.controller.jsnetwork.controller.spec.jsnetwork.html
networkports
ports.controller.jsports.spec.js

23
openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network-details.html Normal file

@ -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>

39
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;

3
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);
});

175
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>

5
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 = [{

1
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() {