From 2e4923a286534e54086fa8fe0cd65c276bdc32dd 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 | 63 ++++++++++++++++++++- ui/scripts/ui-custom/autoscaler.js | 89 +++++++++++++++++++++++++++++- 3 files changed, 163 insertions(+), 2 deletions(-) diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index ce4aaeeed60..a28133c5b47 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -10669,6 +10669,19 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it 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 b960ece4db0..860c8fe852d 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)); diff --git a/ui/scripts/ui-custom/autoscaler.js b/ui/scripts/ui-custom/autoscaler.js index 7b0df187c75..ceec5a71df2 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 = $('
').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 : {}; @@ -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 = $('
').addClass('loading-overlay').appendTo($autoscalerDialog);