Skip to content

Commit 2e4923a

Browse files
bfederlevijayvenkat
bfederle
authored and
vijayvenkat
committed
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.
1 parent 4abf8eb commit 2e4923a

3 files changed

Lines changed: 163 additions & 2 deletions

File tree

‎ui/css/cloudstack3.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10669,6 +10669,19 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
1066910669
max-height: 600px;
1067010670
}
1067110671

10672+
.ui-dialog div.autoscaler .detail-actions {
10673+
}
10674+
10675+
.ui-dialog div.autoscaler .detail-actions .buttons {
10676+
float: right;
10677+
margin-right: 6px;
10678+
}
10679+
10680+
.ui-dialog div.autoscaler .detail-actions .buttons .action {
10681+
width: 32px;
10682+
float: left;
10683+
}
10684+
1067210685
.ui-dialog div.autoscaler div.form-container div.form-item[rel=securityGroups] {
1067310686
display: block;
1067410687
width: 370px;

‎ui/scripts/autoscaler.js‎

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,67 @@
2222
var totalScaleDownCondition = 0;
2323

2424
cloudStack.autoscaler = {
25+
// UI actions to appear in dialog
26+
autoscaleActions: {
27+
enable: {
28+
label: 'Enable Autoscaler',
29+
action: function(args) {
30+
args.response.success({
31+
_custom: { jobId: 12345 },
32+
notification: {
33+
poll: function(args) {
34+
args.complete({
35+
data: { state: 'Enabled' }
36+
});
37+
}
38+
}
39+
});
40+
}
41+
},
42+
disable: {
43+
label: 'Disable Autoscaler',
44+
action: function(args) {
45+
args.response.success({
46+
_custom: { jobId: 12345 },
47+
notification: {
48+
poll: function(args) {
49+
args.complete({
50+
data: { state: 'Disabled' }
51+
});
52+
}
53+
}
54+
});
55+
}
56+
},
57+
restart: {
58+
label: 'Restart Autoscaler',
59+
action: function(args) {
60+
args.response.success({
61+
_custom: { jobId: 12345 },
62+
notification: {
63+
poll: function(args) {
64+
args.complete({
65+
data: { state: 'Enabled' }
66+
});
67+
}
68+
}
69+
});
70+
}
71+
}
72+
},
73+
actionFilter: function(args) {
74+
var data = $.isArray(args.context.originalAutoscaleData) ?
75+
args.context.originalAutoscaleData[0] : {};
76+
77+
if (data.state == 'Enabled') {
78+
return ['disable', 'restart'];
79+
} else if (data.state == 'Disabled') {
80+
return ['enable'];
81+
}
82+
83+
// No existing data, so actions are not visible
84+
return [];
85+
},
2586
dataProvider: function(args) {
2687
// Reset data
2788
scaleUpData = [];
@@ -1288,4 +1349,4 @@
12881349
}
12891350
}
12901351
}
1291-
} (jQuery,cloudStack));
1352+
} (jQuery,cloudStack));

‎ui/scripts/ui-custom/autoscaler.js‎

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
var scaleuppolicy = forms.scaleUpPolicy;
2626
var scaledownpolicy = forms.scaleDownPolicy;
2727
var dataProvider = cloudStack.autoscaler.dataProvider;
28+
var actions = cloudStack.autoscaler.autoscaleActions;
29+
var actionFilter = cloudStack.autoscaler.actionFilter;
2830

2931
return function(args) {
3032
var context = args.data ?
@@ -58,6 +60,88 @@
5860
scaleDownPolicyTitleForm, $scaleDownPolicyTitleForm,
5961
scaleUpPolicyForm, scaleDownPolicyForm;
6062

63+
var renderActions = function(args) {
64+
var data = args.data;
65+
var context = args.context;
66+
var $actions = $('<div>').addClass('detail-group');
67+
var $actionsTable = $('<table>').append('<tr>');
68+
var $detailActions = $('<td>').addClass('detail-actions');
69+
var $buttons = $('<div>').addClass('buttons');
70+
var visibleActions = actionFilter ?
71+
actionFilter({
72+
context: $.extend(true, {}, context, {
73+
originalAutoscaleData: data ? [data] : null
74+
})
75+
}) :
76+
$.map(actions, function(value, key) { return key; });
77+
78+
$detailActions.append($buttons);
79+
$actionsTable.find('tr').append($detailActions);
80+
$actions.append($actionsTable);
81+
82+
$(visibleActions).map(function(index, actionID) {
83+
var action = actions[actionID];
84+
var label = _l(action.label);
85+
var $action = $('<div>').addClass('action').addClass(actionID);
86+
var $icon = $('<a>')
87+
.attr({ href: '#', title: label })
88+
.append($('<span>').addClass('icon'));
89+
90+
if (visibleActions.length == 1) $action.addClass('single');
91+
else if (!index) $action.addClass('first');
92+
else if (index == visibleActions.length - 1) $action.addClass('last');
93+
94+
// Perform action event
95+
$action.click(function() {
96+
var $loading = $('<div>').addClass('loading-overlay').appendTo($autoscalerDialog);
97+
var success = function(args) {
98+
$loading.remove();
99+
cloudStack.dialog.notice({
100+
message: _l('label.task.completed') + ': ' + label
101+
});
102+
103+
// Reload actions
104+
var $newActions = renderActions({
105+
data: data ? $.extend(data, args.data) : args.data,
106+
context: context
107+
});
108+
109+
$actions.after($newActions);
110+
$actions.remove();
111+
};
112+
var error = function(message) {
113+
$loading.remove();
114+
cloudStack.dialog.notice({ message: message });
115+
};
116+
117+
action.action({
118+
response: {
119+
success: function(args) {
120+
var notification = $.extend(args.notification, {
121+
_custom: args._custom,
122+
desc: label
123+
});
124+
125+
cloudStack.ui.notifications.add(
126+
notification,
127+
success, {},
128+
error, {}
129+
);
130+
},
131+
error: error
132+
}
133+
});
134+
});
135+
136+
$action.append($icon);
137+
$action.appendTo($buttons);
138+
});
139+
140+
if (!visibleActions || !visibleActions.length) $actions.hide();
141+
142+
return $actions;
143+
};
144+
61145
var renderDialogContent = function(args) {
62146
var data = args.data ? args.data : {};
63147

@@ -76,7 +160,7 @@
76160

77161
$.extend(context, {
78162
originalAutoscaleData: args.data
79-
})
163+
});
80164

81165
// Create and append top fields
82166
// -- uses create form to generate fields
@@ -214,6 +298,9 @@
214298

215299
$autoscalerDialog.dialog('option', 'position', 'center');
216300
$autoscalerDialog.dialog('option', 'height', 'auto');
301+
302+
// Setup actions
303+
renderActions(args).prependTo($autoscalerDialog);
217304
};
218305

219306
var $loading = $('<div>').addClass('loading-overlay').appendTo($autoscalerDialog);

0 commit comments

Comments
 (0)