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);