From 98b4f598beeffa04b779d67e61ecaa03590ea93b Mon Sep 17 00:00:00 2001 From: Brian Federle Date: Tue, 7 Aug 2012 13:19:35 -0700 Subject: [PATCH] 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. --- ui/css/cloudstack3.css | 13 +++++ ui/scripts/autoscaler.js | 61 ++++++++++++++++++++ ui/scripts/ui-custom/autoscaler.js | 89 +++++++++++++++++++++++++++++- 3 files changed, 162 insertions(+), 1 deletion(-) diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 1abac2fe60e..45d9ba4debf 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -9683,6 +9683,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; diff --git a/ui/scripts/autoscaler.js b/ui/scripts/autoscaler.js index 7bd3f7e3c83..91543c17b61 100644 --- a/ui/scripts/autoscaler.js +++ b/ui/scripts/autoscaler.js @@ -17,6 +17,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 = []; diff --git a/ui/scripts/ui-custom/autoscaler.js b/ui/scripts/ui-custom/autoscaler.js index a897c0d0828..b0ab5859ecd 100644 --- a/ui/scripts/ui-custom/autoscaler.js +++ b/ui/scripts/ui-custom/autoscaler.js @@ -18,6 +18,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 ? @@ -51,6 +53,88 @@ scaleDownPolicyTitleForm, $scaleDownPolicyTitleForm, scaleUpPolicyForm, scaleDownPolicyForm; + var renderActions = function(args) { + var data = args.data; + var context = args.context; + var $actions = $('
').addClass('detail-group'); + var $actionsTable = $('').append(''); + var $detailActions = $('
').addClass('detail-actions'); + var $buttons = $('
').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 = $('
').addClass('action').addClass(actionID); + var $icon = $('') + .attr({ href: '#', title: label }) + .append($('').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 = $('
').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 : {}; @@ -69,7 +153,7 @@ $.extend(context, { originalAutoscaleData: args.data - }) + }); // Create and append top fields // -- uses create form to generate fields @@ -207,6 +291,9 @@ $autoscalerDialog.dialog('option', 'position', 'center'); $autoscalerDialog.dialog('option', 'height', 'auto'); + + // Setup actions + renderActions(args).prependTo($autoscalerDialog); }; var $loading = $('
').addClass('loading-overlay').appendTo($autoscalerDialog);