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

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

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));
+} (jQuery,cloudStack));

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