Add pagination to Security Groups 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: Iaff9e1f3c834a2bdb5823249de632ce472811a7d
This commit is contained in:
Tatiana Ovchinnikova
parent
aa3c7e1919
commit
a62751ca4f
|
|
@ -1,4 +1,4 @@
|
|||
<table st-table="row.security_group_rules" class="table table-condensed table-rsp security-group-details">
|
||||
<table st-table="item.security_group_rules" class="table table-condensed table-rsp security-group-details">
|
||||
<thead>
|
||||
<tr>
|
||||
<th st-sort="direction" st-sort-default translate>Direction</th>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="d in row.security_group_rules">
|
||||
<tr ng-repeat="d in item.security_group_rules">
|
||||
<td>{$ d.direction | noValue $}</td>
|
||||
<td>{$ d.ethertype | noValue $}</td>
|
||||
<td>{$ d.protocol | noValue $}</td>
|
||||
|
|
|
|||
|
|
@ -37,16 +37,24 @@
|
|||
|
||||
ctrl.tableData = {
|
||||
available: launchInstanceModel.securityGroups,
|
||||
allocated: launchInstanceModel.newInstanceSpec.security_groups,
|
||||
displayedAvailable: [],
|
||||
displayedAllocated: []
|
||||
allocated: launchInstanceModel.newInstanceSpec.security_groups
|
||||
};
|
||||
|
||||
ctrl.tableDetails = basePath + 'security-groups/security-group-details.html';
|
||||
ctrl.availableTableConfig = {
|
||||
selectAll: false,
|
||||
trackId: 'id',
|
||||
detailsTemplateUrl: basePath + 'security-groups/security-group-details.html',
|
||||
columns: [
|
||||
{id: 'name', title: gettext('Name'), priority: 1},
|
||||
{id: 'description', title: gettext('Description'), priority: 2}
|
||||
]
|
||||
};
|
||||
|
||||
ctrl.allocatedTableConfig = angular.copy(ctrl.availableTableConfig);
|
||||
ctrl.allocatedTableConfig.noItemsMessage = gettext(
|
||||
'Select one or more security groups from the available groups below.');
|
||||
|
||||
ctrl.tableHelp = {
|
||||
/*eslint-disable max-len */
|
||||
noneAllocText: gettext('Select one or more security groups from the available groups below.'),
|
||||
/*eslint-enable max-len */
|
||||
availHelpText: gettext('Select one or more')
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,106 +1,13 @@
|
|||
<div ng-controller="LaunchInstanceSecurityGroupsController as ctrl">
|
||||
<p class="step-description" translate>Select the security groups to launch the instance in.</p>
|
||||
|
||||
<transfer-table tr-model="ctrl.tableData"
|
||||
help-text="ctrl.tableHelp"
|
||||
limits="ctrl.tableLimits">
|
||||
|
||||
<!-- Security Groups Allocated -->
|
||||
<allocated>
|
||||
<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 st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
|
||||
<th st-sort="description" class="rsp-p2" translate>Description</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-if="ctrl.tableData.allocated.length === 0">
|
||||
<td colspan="8">
|
||||
<div class="no-rows-help">
|
||||
{$ ::trCtrl.helpText.noneAllocText $}
|
||||
</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 word-break">{$ row.name $}</td>
|
||||
<td class="rsp-p2">{$ row.description $}</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></td>
|
||||
<td class="detail" colspan="3" ng-include="ctrl.tableDetails">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</allocated>
|
||||
|
||||
<!-- Security Groups Available -->
|
||||
<available>
|
||||
<hz-magic-search-context filter-facets="ctrl.filterFacets">
|
||||
<hz-magic-search-bar></hz-magic-search-bar>
|
||||
<table st-table="ctrl.tableData.displayedAvailable"
|
||||
st-magic-search
|
||||
st-safe-src="ctrl.tableData.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>Name</th>
|
||||
<th st-sort="description" class="rsp-p1" translate>Description</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 word-break">{$ row.name$}</td>
|
||||
<td class="rsp-p1">{$ row.description $}</td>
|
||||
<td class="actions_column">
|
||||
<action-list>
|
||||
<action action-classes="'btn btn-default'"
|
||||
callback="trCtrl.allocate" item="row">
|
||||
<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 class="detail" colspan="4" ng-include="ctrl.tableDetails">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</hz-magic-search-context>
|
||||
</available>
|
||||
|
||||
<transfer-table tr-model="ctrl.tableData" help-text="ctrl.tableHelp" 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 Security Groups Transfer Table -->
|
||||
|
||||
</div> <!-- End Controller -->
|
||||
|
|
|
|||
|
|
@ -45,21 +45,22 @@
|
|||
|
||||
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([ 'group 1', 'group 2' ]);
|
||||
expect(ctrl.tableData.allocated).toEqual([ 'group 1' ]);
|
||||
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('defines table help', function() {
|
||||
expect(ctrl.tableHelp).toBeDefined();
|
||||
expect(Object.keys(ctrl.tableHelp).length).toBe(2);
|
||||
expect(ctrl.tableHelp.noneAllocText).toBeDefined();
|
||||
expect(Object.keys(ctrl.tableHelp).length).toBe(1);
|
||||
expect(ctrl.tableHelp.availHelpText).toBeDefined();
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue