Add pagination to Server 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: Ifc56d2440cb461ca320b6ea4653fd7921cd1ca5f
This commit is contained in:
Tatiana Ovchinnikova
parent
363a4df3ac
commit
057abb210b
|
|
@ -41,20 +41,39 @@
|
|||
'soft-affinity': gettext('Soft Affinity')
|
||||
};
|
||||
|
||||
function getPolicyName(policy) {
|
||||
return ctrl.policies[policy];
|
||||
}
|
||||
|
||||
ctrl.tableData = {
|
||||
available: launchInstanceModel.serverGroups,
|
||||
allocated: launchInstanceModel.newInstanceSpec.server_groups,
|
||||
displayedAvailable: [],
|
||||
displayedAllocated: []
|
||||
allocated: launchInstanceModel.newInstanceSpec.server_groups
|
||||
};
|
||||
|
||||
ctrl.tableHelp = {
|
||||
/*eslint-disable max-len */
|
||||
noneAllocText: gettext('Select a server group from the available groups below.'),
|
||||
/*eslint-enable max-len */
|
||||
availHelpText: gettext('Select one')
|
||||
ctrl.availableTableConfig = {
|
||||
selectAll: false,
|
||||
trackId: 'id',
|
||||
expand: false,
|
||||
columns: [
|
||||
{id: 'name', title: gettext('Name'), priority: 1},
|
||||
{id: 'policies', title: gettext('Policy'), priority: 2, filters: [getPolicyName, 'noValue']}
|
||||
]
|
||||
};
|
||||
|
||||
ctrl.allocatedTableConfig = angular.copy(ctrl.availableTableConfig);
|
||||
ctrl.allocatedTableConfig.noItemsMessage = gettext(
|
||||
'Select a server group from the available groups below.');
|
||||
|
||||
ctrl.filterFacets = [{
|
||||
label: gettext('Name'),
|
||||
name: 'name',
|
||||
singleton: true
|
||||
}, {
|
||||
label: gettext('Policy'),
|
||||
name: 'policies',
|
||||
singleton: true
|
||||
}];
|
||||
|
||||
ctrl.tableLimits = {
|
||||
maxAllocation: 1
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,63 +3,16 @@
|
|||
Select the server group to launch the instance in.
|
||||
</p>
|
||||
|
||||
<transfer-table tr-model="ctrl.tableData"
|
||||
help-text="ctrl.tableHelp"
|
||||
limits="ctrl.tableLimits"
|
||||
clone-content>
|
||||
|
||||
<table st-table="$displayedItems"
|
||||
st-safe-src="$sourceItems"
|
||||
hz-table class="table table-striped table-rsp table-detail">
|
||||
<thead>
|
||||
<tr ng-show="$isAvailableTable">
|
||||
<th class="search-header" colspan="9">
|
||||
<hz-search-bar group-classes="input-group-sm" icon-classes="fa-search">
|
||||
</hz-search-bar>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th st-sort="name" st-sort-default class="rsp-p1" translate>Name</th>
|
||||
<th st-sort="policy" class="rsp-p1" translate>Policy</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-if="$isAllocatedTable && ctrl.tableData.allocated.length === 0">
|
||||
<td colspan="8">
|
||||
<div class="no-rows-help">
|
||||
{$ ::trCtrl.helpText.noneAllocText $}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="$isAvailableTable && trCtrl.numAvailable() === 0">
|
||||
<td colspan="8">
|
||||
<div class="no-rows-help">
|
||||
{$ ::trCtrl.helpText.noneAvailText $}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat="row in $displayedItems track by row.id"
|
||||
ng-if="$isAllocatedTable || ($isAvailableTable && !trCtrl.allocatedIds[row.id])">
|
||||
<td class="rsp-p1">{$ row.name $}</td>
|
||||
<td class="rsp-p1">{$ ctrl.policies[row.policies[0]] | noValue $}</td>
|
||||
<td class="actions_column">
|
||||
<action-list>
|
||||
<action ng-if="$isAllocatedTable"
|
||||
action-classes="'btn btn-default'"
|
||||
callback="trCtrl.deallocate" item="row">
|
||||
<span class="fa fa-arrow-down"></span>
|
||||
</action>
|
||||
<action ng-if="$isAvailableTable"
|
||||
action-classes="'btn btn-default'"
|
||||
callback="trCtrl.allocate" item="row">
|
||||
<span class="fa fa-arrow-up"></span>
|
||||
</action>
|
||||
</action-list>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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 Server Groups Transfer Table -->
|
||||
|
||||
</div> <!-- End Controller -->
|
||||
|
|
|
|||
|
|
@ -44,18 +44,13 @@
|
|||
|
||||
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([ 'server group 1', 'server group 2' ]);
|
||||
expect(ctrl.tableData.allocated).toEqual([ 'server group 1' ]);
|
||||
expect(ctrl.tableData.displayedAvailable).toEqual([]);
|
||||
expect(ctrl.tableData.displayedAllocated).toEqual([]);
|
||||
});
|
||||
|
||||
it('defines table help', function() {
|
||||
expect(ctrl.tableHelp).toBeDefined();
|
||||
expect(Object.keys(ctrl.tableHelp).length).toBe(2);
|
||||
expect(ctrl.tableHelp.noneAllocText).toBeDefined();
|
||||
expect(ctrl.tableHelp.availHelpText).toBeDefined();
|
||||
it('defines a custom no items message for allocated table', function() {
|
||||
expect(ctrl.allocatedTableConfig.noItemsMessage).toBeDefined();
|
||||
});
|
||||
|
||||
it('allows only one allocation', function() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue