Detail view actions: Add support listView selection

Adds a new dialog 'cloudStack.dialog.listView'

-- Supports displaying a list view in a popup dialog, for selecting
   items for an action (i.e., selecting VMs for an LB rule). Arguments
   are a list view object and the 'type' of selection: either
   'checkbox' or 'radio'

Example:

detailView: {
  name: 'Internal Lb details',
  actions: {
    assignVm: {
      label: 'Assign VMs to LB',
      messages: {
        notification: function(args) { return 'Assign VM to internal LB rule'; }
      },
      listView: $.extend(true, {}, cloudStack.sections.instances.listView, {
        type: 'checkbox',
        filters: false
      }),
      action: function(args) {
        args.response.success();
      },
      notification: {
        poll: function(args) {
          args.complete();
        }
      }
    }
  },
  ...
}

ui/scripts/ui/dialog.js

@@ -14,7 +14,7 @@
 // KIND, either express or implied.  See the License for the
 // specific language governing permissions and limitations
 // under the License.
-(function($, cloudStack) {
+(function($, cloudStack, _l) {
   cloudStack.dialog = {
     /**
      * Error message form
@@ -506,6 +506,94 @@
       }
     },
 
+    // Dialog with list view selector
+    listView: function(args) {
+      var listView = args.listView;
+      var after = args.after;
+      var context = args.context;
+      var $listView = $('<div>');
+
+      listView.actions = {
+        select: {
+          label: _l('label.select.instance'),
+          type: listView.type,
+          action: {
+            uiCustom: function(args) {
+              var $item = args.$item;
+              var $input = $item.find('td.actions input:visible');
+
+              if ($input.attr('type') == 'checkbox') {
+                if ($input.is(':checked'))
+                  $item.addClass('multi-edit-selected');
+                else
+                  $item.removeClass('multi-edit-selected');
+              } else {
+                $item.siblings().removeClass('multi-edit-selected');
+                $item.addClass('multi-edit-selected');
+              }
+            }
+          }
+        }
+      };
+
+      // Init list view
+      $listView = $('<div>').listView({
+        context: context,
+        uiCustom: true,
+        listView: listView
+      });
+
+      // Change action label
+      $listView.find('th.actions').html(_l('label.select'));
+      
+      $listView.dialog({
+        dialogClass: 'multi-edit-add-list panel',
+        width: 825,
+        title: _l('Select VM'),
+        buttons: [
+          {
+            text: _l('label.apply'),
+            'class': 'ok',
+            click: function() {
+              if (!$listView.find(
+                'input[type=radio]:checked, input[type=checkbox]:checked'
+              ).size()) {
+                cloudStack.dialog.notice({ message: _l('message.select.instance')});
+
+                return false;
+              }
+              
+              after({
+                context: $.extend(true, {}, context, {
+                  instances: $listView.find('tr.multi-edit-selected').map(function(index, row) {
+                    var $row = $(row);
+
+                    return $row.data('json-obj');
+                  })
+                })
+              });
+              
+              $listView.remove();
+
+              $('div.overlay').remove();
+            }
+          },
+          {
+            text: _l('label.cancel'),
+            'class': 'cancel',
+            click: function() {
+              $listView.fadeOut(function() {
+                $listView.remove();
+              });
+              $('div.overlay').fadeOut(function() {
+                $('div.overlay').remove();
+              });
+            }
+          }
+        ]
+      }).parent('.ui-dialog').overlay();
+    },
+
     /**
      * to change a property(e.g. validation) of a createForm field after a createForm is rendered
      */
@@ -612,4 +700,4 @@
       return false;
     }
   };
-})(window.jQuery, window.cloudStack);
+})(window.jQuery, window.cloudStack, _l);

ui/scripts/ui/widgets/detailView.js

@@ -70,7 +70,8 @@
             action.notification : {};
       var messages = action.messages;
       var id = args.id;
-      var context = args.context ? args.context : $detailView.data('view-args').context;
+      var context = $.extend(true, {},
+                             args.context ? args.context : $detailView.data('view-args').context);
       var _custom = $detailView.data('_custom');
       var customAction = action.action.custom;
       var noAdd = action.noAdd;
@@ -273,7 +274,7 @@
         notification.desc = messages.notification(messageArgs);
         notification.section = 'instances';
 
-        if (!action.createForm) {
+        if (!action.createForm && !action.listView) {
           if (messages && messages.confirm) {
             cloudStack.dialog.confirm({
               message: messages.confirm(messageArgs),
@@ -286,7 +287,7 @@
           } else {
             performAction({ id: id });
           }
-        } else {
+        } else if (action.createForm) {
           cloudStack.dialog.createForm({
             form: action.createForm,
             after: function(args) {
@@ -301,6 +302,15 @@
             },
             context: context
           });
+        } else if (action.listView) {
+          cloudStack.dialog.listView({
+            context: context,
+            listView: action.listView,
+            after: function(args) {
+              context = args.context;
+              performAction();
+            }
+          });
         }
       }
     },