Merge "Add pagination to Networks table in Launch Instance wizard"
This commit is contained in:
Zuul
Gerrit Code Review
commit
0a77f42156
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 = [{
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue