Updated Branches: refs/heads/autoscale 8e6011fde -> 7dbdf1f0e
Autoscale UI: Add actions to top of dialog Support performing actions via the autoscaler dialog. This adds 'autoscaleActions' and 'actionFilter' options to the autoscaler, which specify and handle the actions appearing in the UI. Performing these actions will cause a loading overlay to appear until actions are finished, when the action bar is refreshed via the action filter. Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/7dbdf1f0 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/7dbdf1f0 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/7dbdf1f0 Branch: refs/heads/autoscale Commit: 7dbdf1f0eb88a419eef8586b1a442a0d7696fe67 Parents: 8e6011f Author: Brian Federle <[email protected]> Authored: Tue Aug 7 13:19:35 2012 -0700 Committer: Brian Federle <[email protected]> Committed: Tue Aug 7 13:25:10 2012 -0700 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 13 +++++ ui/scripts/autoscaler.js | 63 +++++++++++++++++++++- ui/scripts/ui-custom/autoscaler.js | 89 ++++++++++++++++++++++++++++++- 3 files changed, 163 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/7dbdf1f0/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 65acf2b..4429d09 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -9603,6 +9603,19 @@ div.panel.ui-dialog div.list-view div.fixed-header { max-height: 600px; } +.ui-dialog div.autoscaler .detail-actions { +} + +.ui-dialog div.autoscaler .detail-actions .buttons { + float: right; + margin-right: 6px; +} + +.ui-dialog div.autoscaler .detail-actions .buttons .action { + width: 32px; + float: left; +} + .ui-dialog div.autoscaler div.form-container div.form-item[rel=securityGroups] { display: block; width: 370px; http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/7dbdf1f0/ui/scripts/autoscaler.js ---------------------------------------------------------------------- diff --git a/ui/scripts/autoscaler.js b/ui/scripts/autoscaler.js index b960ece..860c8fe 100644 --- a/ui/scripts/autoscaler.js +++ b/ui/scripts/autoscaler.js @@ -22,6 +22,67 @@ var totalScaleDownCondition = 0; cloudStack.autoscaler = { + // UI actions to appear in dialog + autoscaleActions: { + enable: { + label: 'Enable Autoscaler', + action: function(args) { + args.response.success({ + _custom: { jobId: 12345 }, + notification: { + poll: function(args) { + args.complete({ + data: { state: 'Enabled' } + }); + } + } + }); + } + }, + disable: { + label: 'Disable Autoscaler', + action: function(args) { + args.response.success({ + _custom: { jobId: 12345 }, + notification: { + poll: function(args) { + args.complete({ + data: { state: 'Disabled' } + }); + } + } + }); + } + }, + restart: { + label: 'Restart Autoscaler', + action: function(args) { + args.response.success({ + _custom: { jobId: 12345 }, + notification: { + poll: function(args) { + args.complete({ + data: { state: 'Enabled' } + }); + } + } + }); + } + } + }, + actionFilter: function(args) { + var data = $.isArray(args.context.originalAutoscaleData) ? + args.context.originalAutoscaleData[0] : {}; + + if (data.state == 'Enabled') { + return ['disable', 'restart']; + } else if (data.state == 'Disabled') { + return ['enable']; + } + + // No existing data, so actions are not visible + return []; + }, dataProvider: function(args) { // Reset data scaleUpData = []; @@ -1288,4 +1349,4 @@ } } } -} (jQuery,cloudStack)); \ No newline at end of file +} (jQuery,cloudStack)); http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/7dbdf1f0/ui/scripts/ui-custom/autoscaler.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/autoscaler.js b/ui/scripts/ui-custom/autoscaler.js index 7b0df18..ceec5a7 100644 --- a/ui/scripts/ui-custom/autoscaler.js +++ b/ui/scripts/ui-custom/autoscaler.js @@ -25,6 +25,8 @@ var scaleuppolicy = forms.scaleUpPolicy; var scaledownpolicy = forms.scaleDownPolicy; var dataProvider = cloudStack.autoscaler.dataProvider; + var actions = cloudStack.autoscaler.autoscaleActions; + var actionFilter = cloudStack.autoscaler.actionFilter; return function(args) { var context = args.data ? @@ -58,6 +60,88 @@ scaleDownPolicyTitleForm, $scaleDownPolicyTitleForm, scaleUpPolicyForm, scaleDownPolicyForm; + var renderActions = function(args) { + var data = args.data; + var context = args.context; + var $actions = $('<div>').addClass('detail-group'); + var $actionsTable = $('<table>').append('<tr>'); + var $detailActions = $('<td>').addClass('detail-actions'); + var $buttons = $('<div>').addClass('buttons'); + var visibleActions = actionFilter ? + actionFilter({ + context: $.extend(true, {}, context, { + originalAutoscaleData: data ? [data] : null + }) + }) : + $.map(actions, function(value, key) { return key; }); + + $detailActions.append($buttons); + $actionsTable.find('tr').append($detailActions); + $actions.append($actionsTable); + + $(visibleActions).map(function(index, actionID) { + var action = actions[actionID]; + var label = _l(action.label); + var $action = $('<div>').addClass('action').addClass(actionID); + var $icon = $('<a>') + .attr({ href: '#', title: label }) + .append($('<span>').addClass('icon')); + + if (visibleActions.length == 1) $action.addClass('single'); + else if (!index) $action.addClass('first'); + else if (index == visibleActions.length - 1) $action.addClass('last'); + + // Perform action event + $action.click(function() { + var $loading = $('<div>').addClass('loading-overlay').appendTo($autoscalerDialog); + var success = function(args) { + $loading.remove(); + cloudStack.dialog.notice({ + message: _l('label.task.completed') + ': ' + label + }); + + // Reload actions + var $newActions = renderActions({ + data: data ? $.extend(data, args.data) : args.data, + context: context + }); + + $actions.after($newActions); + $actions.remove(); + }; + var error = function(message) { + $loading.remove(); + cloudStack.dialog.notice({ message: message }); + }; + + action.action({ + response: { + success: function(args) { + var notification = $.extend(args.notification, { + _custom: args._custom, + desc: label + }); + + cloudStack.ui.notifications.add( + notification, + success, {}, + error, {} + ); + }, + error: error + } + }); + }); + + $action.append($icon); + $action.appendTo($buttons); + }); + + if (!visibleActions || !visibleActions.length) $actions.hide(); + + return $actions; + }; + var renderDialogContent = function(args) { var data = args.data ? args.data : {}; @@ -76,7 +160,7 @@ $.extend(context, { originalAutoscaleData: args.data - }) + }); // Create and append top fields // -- uses create form to generate fields @@ -214,6 +298,9 @@ $autoscalerDialog.dialog('option', 'position', 'center'); $autoscalerDialog.dialog('option', 'height', 'auto'); + + // Setup actions + renderActions(args).prependTo($autoscalerDialog); }; var $loading = $('<div>').addClass('loading-overlay').appendTo($autoscalerDialog);
