openstack/deb-horizon
Code Issues Proposed changes

Merge "Cleaning up the Transfer Table"

Browse Source
This commit is contained in:
Jenkins 2015-08-27 12:52:57 +00:00 committed by Gerrit Code Review
commit 8ede6555af
10 changed files with 131 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
horizon/static/framework/widgets/action-list/button-tooltip.row-warning.service.js Normal file
View File

@ -0,0 +1,65 @@
/*
* (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(function() {
'use strict';
angular
.module('horizon.framework.widgets.action-list')
.factory('horizon.framework.widgets.action-list.button-tooltip.row-warning.service', tooltip);
tooltip.$inject = [
'$timeout',
'horizon.framework.widgets.basePath'
];
/**
* @ngdoc factory
* @name horizon.framework.widgets.action-list.button-tooltip.row-warning.service
* @description
* Provides the default model for buttons that can not be clicked
* because there are errors with the data in the row.
*/
function tooltip($timeout, path) {
var service = {
templateUrl: path + 'action-list/warning-tooltip.html',
data: {
clickMessage: gettext('Click here to expand the row and view the errors.'),
expandDetail: expandDetail
}
};
return service;
///////////////
function expandDetail() {
/*eslint-disable angular/ng_controller_as_vm */
// 'this' referred here is the this for the function not the controller
var row = this.element.closest('tr');
/*eslint-enable angular/ng_controller_as_vm */
if (!row.hasClass('expanded')) {
// Timeout needed to prevent
// $apply already in progress error
$timeout(function() {
row.find('[hz-expand-detail]').click();
}, 0, false);
}
}
} // end of tooltip
})(); // end of IIFE

155
horizon/static/framework/widgets/transfer-table/transfer-table.controller.js
View File

@ -82,148 +82,87 @@
}
var ctrl = this;
ctrl.allocatedIds = {};
ctrl.available = {
sourceItems: trModel.available,
displayedItems: trModel.displayedAvailable
};
ctrl.allocated = {
sourceItems: trModel.allocated,
displayedItems: trModel.displayedAllocated
};
ctrl.allocate = allocate;
ctrl.deallocate = deallocate;
ctrl.toggleView = toggleView;
ctrl.updateAllocated = updateAllocated;
ctrl.numAllocated = numAllocated;
ctrl.numDisplayedAvailable = numDisplayedAvailable;
ctrl.helpText = angular.extend({}, helpText, trHelpText);
ctrl.limits = angular.extend({}, limits, trLimits);
ctrl.numAvailable = trModel.available ? trModel.available.length : 0;
ctrl.numAvailable = numAvailable;
ctrl.views = { allocated: true, available: true };
// Tooltip model
ctrl.tooltipModel = {
templateUrl: path + 'action-list/warning-tooltip.html',
data: {
clickMessage: gettext('Click here to expand the row and view the errors.'),
expandDetail: expandDetail
}
};
// Update tracking of allocated IDs when allocated changed
$scope.$watchCollection(allocatedCollection, onNewAllocated);
// Update available count when available changed
$scope.$watchCollection(availableCollection, onNewAvailable);
// Initialize tracking of allocated IDs
setAllocatedIds(trModel.allocated);
init();
//////////
// helper function
function expandDetail() {
/*eslint-disable angular/ng_controller_as_vm */
// 'this' referred here is the this for the function not the controller
var row = this.element.closest('tr');
/*eslint-enable angular/ng_controller_as_vm */
if (!row.hasClass('expanded')) {
// Timeout needed to prevent
// $apply already in progress error
$timeout(function() {
row.find('[hz-expand-detail]').click();
}, 0, false);
}
function init() {
// populate the allocatedIds if allocated source given
angular.forEach(ctrl.allocated.sourceItems, function(item) {
ctrl.allocatedIds[item.id] = true;
});
}
function setAllocatedIds(allocatedRows) {
ctrl.allocatedIds = {};
if (allocatedRows) {
angular.forEach(allocatedRows, function(alloc) {
ctrl.allocatedIds[alloc.id] = true;
});
if (trModel.available) {
ctrl.numAvailable = trModel.available.length - allocatedRows.length;
} else {
ctrl.numAvailable = 0;
}
} else {
trModel.allocated = [];
trModel.displayedAllocated = [];
}
}
function allocate(row) {
function allocate(item) {
// Add to allocated only if limit not reached
if (ctrl.limits.maxAllocation < 0 ||
trModel.allocated.length < ctrl.limits.maxAllocation) {
// Add to allocated only if limit not reached
trModel.allocated.push(row);
ctrl.numAvailable -= 1;
} else if (ctrl.limits.maxAllocation === 1) {
// Swap out rows if only one allocation allowed
trModel.allocated.pop();
ctrl.limits.maxAllocation > ctrl.allocated.sourceItems.length) {
ctrl.allocated.sourceItems.push(item);
ctrl.allocatedIds[item.id] = true;
}
// Swap out items if only one allocation allowed
else if (ctrl.limits.maxAllocation === 1) {
var temp = ctrl.allocated.sourceItems.pop();
delete ctrl.allocatedIds[temp.id];
// When swapping out, Smart-Table $watch is
// not detecting change so timeout is used
// as workaround.
// not detecting change so timeout is used as workaround.
$timeout(function() {
trModel.allocated.push(row);
ctrl.allocated.sourceItems.push(item);
ctrl.allocatedIds[item.id] = true;
$scope.$apply();
}, 0, false);
}
}
function deallocate(row) {
ctrl.numAvailable += 1;
var allocLen = trModel.allocated.length;
for (var i = allocLen - 1; i >= 0; i--) {
if (trModel.allocated[i].id === row.id) {
trModel.allocated.splice(i, 1);
}
// move item from from allocated to available
function deallocate(item) {
var index = ctrl.allocated.sourceItems.indexOf(item);
if (index >= 0) {
ctrl.allocated.sourceItems.splice(index, 1);
delete ctrl.allocatedIds[item.id];
}
}
// Show/hide allocated or available sections
function toggleView(view) {
var show = ctrl.views[view];
ctrl.views[view] = !show;
// update allocated when users re-order via drag-and-drop
function updateAllocated(event, item, orderedItems) {
ctrl.allocated.sourceItems.splice(0, ctrl.allocated.sourceItems.length);
Array.prototype.push.apply(ctrl.allocated.sourceItems, orderedItems);
}
// Allocated array needs to be updated when rows re-ordered
function updateAllocated(e, item, orderedItems) {
var allocLen = trModel.allocated.length;
trModel.allocated.splice(0, allocLen);
Array.prototype.push.apply(trModel.allocated, orderedItems);
/////////////
function toggleView(view) {
ctrl.views[view] = !ctrl.views[view];
}
function numAllocated() {
return trModel.allocated ? trModel.allocated.length : 0;
return ctrl.allocated.sourceItems.length;
}
function numDisplayedAvailable() {
if (trModel.displayedAvailable) {
var filtered = trModel.displayedAvailable.filter(function(avail) {
return !ctrl.allocatedIds[avail.id];
});
return filtered.length;
}
return 0;
}
function allocatedCollection() {
return trModel.allocated;
}
function onNewAllocated(newAllocated) {
setAllocatedIds(newAllocated);
}
function availableCollection() {
return trModel.available;
}
function onNewAvailable(newAvailable) {
var numAvailable = newAvailable ? newAvailable.length : 0;
var numAllocated = trModel.allocated ? trModel.allocated.length : 0;
ctrl.numAvailable = numAvailable - numAllocated;
function numAvailable() {
return ctrl.available.sourceItems.length - ctrl.allocated.sourceItems.length;
}
}

2
horizon/static/framework/widgets/transfer-table/transfer-table.html
View File

@ -32,7 +32,7 @@
ng-class="trCtrl.views.available ? 'fa-chevron-down' : 'fa-chevron-right'"
ng-click="trCtrl.toggleView('available')"></span>
{$ ::trCtrl.helpText.availTitle $}
<span class="badge badge-info">{$ trCtrl.numAvailable $}</span>
<span class="badge badge-info">{$ trCtrl.numAvailable() $}</span>
<span class="pull-right help-text" ng-if="::trCtrl.helpText.availHelpText">
{$ ::trCtrl.helpText.availHelpText $}
</span>

7
openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/select-flavor-table.directive.js
View File

@ -23,7 +23,8 @@
selectFlavorTable.$inject = [
'horizon.dashboard.project.workflow.launch-instance.basePath',
'horizon.framework.widgets.transfer-table.helpText',
'horizon.framework.widgets.charts.donutChartSettings'
'horizon.framework.widgets.charts.donutChartSettings',
'horizon.framework.widgets.action-list.button-tooltip.row-warning.service'
];
/**
@ -52,7 +53,7 @@
* </select-flavor-table>
* '''
*/
function selectFlavorTable(basePath, transferTableHelpText, donutChartSettings) {
function selectFlavorTable(basePath, transferTableHelpText, donutChartSettings, tooltipService) {
var directive = {
restrict: 'E',
@ -102,7 +103,7 @@
scope.rowExpandText = transferTableHelpText.expandDetailsText;
scope.itemButtonClasses = "fa fa-plus";
scope.tooltipModel = transferTableController.tooltipModel;
scope.tooltipModel = tooltipService;
} else {
// This table used in "allocated" portion of transfer table
scope.showSearchBar = false;

2
openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.html
View File

@ -91,7 +91,7 @@
</tr>
</thead>
<tbody>
<tr ng-if="trCtrl.numDisplayedAvailable() === 0">
<tr ng-if="trCtrl.numAvailable() === 0">
<td colspan="8">
<div class="no-rows-help">
{$ ::trCtrl.helpText.noneAvailText $}

9
openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.controller.js
View File

@ -26,9 +26,12 @@
.module('horizon.dashboard.project.workflow.launch-instance')
.controller('LaunchInstanceNetworkController', LaunchInstanceNetworkController);
LaunchInstanceNetworkController.$inject = ['$scope'];
LaunchInstanceNetworkController.$inject = [
'$scope',
'horizon.framework.widgets.action-list.button-tooltip.row-warning.service'
];
function LaunchInstanceNetworkController($scope) {
function LaunchInstanceNetworkController($scope, tooltipService) {
var ctrl = this;
ctrl.networkStatuses = {
@ -56,5 +59,7 @@
allocHelpText: gettext('Select networks from those listed below.'),
availHelpText: gettext('Select at least one network')
};
ctrl.tooltipModel = tooltipService;
}
})();

4
openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html
View File

@ -116,7 +116,7 @@
</tr>
</thead>
<tbody>
<tr ng-if="trCtrl.numDisplayedAvailable() === 0">
<tr ng-if="trCtrl.numAvailable() === 0">
<td colspan="8">
<div class="no-rows-help" translate>
No available items
@ -138,7 +138,7 @@
<td class="rsp-p1">{$ row.status | decode:ctrl.networkStatuses $}</td>
<td class="action-col">
<action-list button-tooltip="row.warningMessage"
bt-model="trCtrl.tooltipModel" bt-disabled="!row.disabled"
bt-model="ctrl.tooltipModel" bt-disabled="!row.disabled"
warning-classes="'invalid'">
<notifications>
<span class="fa fa-exclamation-circle invalid" ng-show="row.disabled"></span>

2
openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.spec.js
View File

@ -18,6 +18,8 @@
describe('Launch Instance Network Step', function() {
beforeEach(module('horizon.framework.widgets'));
beforeEach(module('horizon.framework.widgets.action-list'));
beforeEach(module('horizon.dashboard.project.workflow.launch-instance'));
describe('LaunchInstanceNetworkController', function() {

2
openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.html
View File

@ -75,7 +75,7 @@
</tr>
</thead>
<tbody>
<tr ng-if="trCtrl.numDisplayedAvailable() === 0">
<tr ng-if="trCtrl.numAvailable() === 0">
<td colspan="8">
<div class="no-rows-help">
{$ ::trCtrl.helpText.noneAvailText $}

2
openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.html
View File

@ -330,7 +330,7 @@
<tbody>
<tr ng-if="trCtrl.numDisplayedAvailable() === 0">
<tr ng-if="trCtrl.numAvailable() === 0">
<td colspan="{$ ctrl.tableHeadCells.length + 2 $}">
<div class="no-rows-help">
{$ ::trCtrl.helpText.noneAvailText $}