Merge branch 'ui-vpc-redesign'

ui/css/cloudstack3.css

@@ -7925,6 +7925,7 @@ div.ui-dialog div.multi-edit-add-list div.view div.data-table table.body tbody t
   width: 87px !important;
   min-width: 87px !important;
   max-width: 87px !important;
+  font-size: 10px;
 }
 
 /** Header fields*/
@@ -7974,6 +7975,15 @@ div.ui-dialog div.multi-edit-add-list div.view div.data-table table.body tbody t
 .multi-edit .header-fields input[type=submit] {
 }
 
+/* Sortable */
+.multi-edit table tbody tr td.reorder,
+.multi-edit table thead tr th.reorder {
+  width: 30px !important;
+  min-width: 30px !important;
+  max-width: 30px !important;
+}
+
+
 /*Security Rules*/
 .security-rules .multi-edit input {
   width: 69px;
@@ -11726,13 +11736,15 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
 .destroy .icon,
 .remove .icon,
 .delete .icon,
-.decline .icon {
+.decline .icon,
+.deleteacllist .icon {
   background-position: 1px -92px;
 }
 
 .destroy:hover .icon,
 .remove:hover .icon,
-.delete:hover .icon {
+.delete:hover .icon,
+.deleteacllist:hover .icon {
   background-position: 1px -674px;
 }
 
@@ -11818,13 +11830,15 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
 
 .downloadVolume .icon,
 .downloadTemplate .icon,
-.downloadISO .icon {
+.downloadISO .icon,
+.replaceacllist .icon {
   background-position: -35px -125px;
 }
 
 .downloadVolume:hover .icon,
 .downloadTemplate:hover .icon,
-.downloadISO:hover .icon {
+.downloadISO:hover .icon,
+.replaceacllist:hover .icon {
   background-position: -35px -707px;
 }
 
@@ -11857,12 +11871,14 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
 }
 
 .add .icon,
-.addNew .icon {
+.addNew .icon,
+.assignVm .icon {
   background-position: -37px -61px;
 }
 
 .add:hover .icon,
-.addNew:hover .icon {
+.addNew:hover .icon,
+.assignVm:hover .icon {
   background-position: -37px -643px;
 }
 

ui/modules/modules.js

@@ -16,6 +16,7 @@
 // under the License.
 (function($, cloudStack) {
   cloudStack.modules = [
+    'vpc',
     'infrastructure',
     'vnmcNetworkProvider',
     'vnmcAsa1000v'

ui/modules/vpc/vpc.css

@@ -0,0 +1,313 @@
+/*[fmt]1C20-1C0D-E*/
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+.vpc-network-chart {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.vpc-network-chart .tiers {
+  margin: 40px 46px 0 0;
+  width: 362px;
+  float: right;
+}
+
+.vpc-network-chart .tier-item {
+  border: 1px solid #477FB4;
+  overflow: hidden;
+  width: 326px;
+  height: 182px;
+  margin: 18px;
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  background: #8DB1D3;
+}
+
+.vpc-network-chart .tier-item .header {
+  width: 100%;
+  float: left;
+  padding: 7px 0 6px;
+  position: relative;
+  /*+box-shadow:inset 0px 1px 1px #FFFFFF;*/
+  -moz-box-shadow: inset 0px 1px 1px #FFFFFF;
+  -webkit-box-shadow: inset 0px 1px 1px #FFFFFF;
+  -o-box-shadow: inset 0px 1px 1px #FFFFFF;
+  box-shadow: inset 0px 1px 1px #FFFFFF;
+  background: #69839D;
+  border-bottom: 1px solid #40639E;
+}
+
+.vpc-network-chart .tier-item .header .detail-link {
+  cursor: pointer;
+  background: #435667 url(../../images/sprites.png) -428px -83px;
+  /*+box-shadow:inset 0px 1px 4px #2F2F2F;*/
+  -moz-box-shadow: inset 0px 1px 4px #2F2F2F;
+  -webkit-box-shadow: inset 0px 1px 4px #2F2F2F;
+  -o-box-shadow: inset 0px 1px 4px #2F2F2F;
+  box-shadow: inset 0px 1px 4px #2F2F2F;
+  width: 16px;
+  height: 16px;
+  float: right;
+  /*+placement:shift -8px 2px;*/
+  position: relative;
+  left: -8px;
+  top: 2px;
+  /*+border-radius:10px;*/
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -khtml-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.vpc-network-chart .tier-item .header .detail-link:hover {
+  background-color: #454545;
+}
+
+.vpc-network-chart .tier-item .header .title {
+  margin-left: 9px;
+  width: 268px;
+  height: 20px;
+  float: left;
+  overflow: hidden;
+}
+
+.vpc-network-chart .tier-item .header .title span {
+  font-size: 20px;
+  color: #FFFFFF;
+  /*+text-shadow:0px 1px 1px #000000;*/
+  -moz-text-shadow: 0px 1px 1px #000000;
+  -webkit-text-shadow: 0px 1px 1px #000000;
+  -o-text-shadow: 0px 1px 1px #000000;
+  text-shadow: 0px 1px 1px #000000;
+}
+
+.vpc-network-chart .tier-item .content {
+  width: 100%;
+  height: 100%;
+  /*+box-shadow:inset 0px 1px 1px #FFFFFF;*/
+  -moz-box-shadow: inset 0px 1px 1px #FFFFFF;
+  -webkit-box-shadow: inset 0px 1px 1px #FFFFFF;
+  -o-box-shadow: inset 0px 1px 1px #FFFFFF;
+  box-shadow: inset 0px 1px 1px #FFFFFF;
+  border-bottom: 1px solid #8DB1D3;
+}
+
+.vpc-network-chart .tier-item .content .dashboard {
+  height: 117px;
+}
+
+.vpc-network-chart .tier-item .content .dashboard-item {
+  width: 145px;
+  height: 54px;
+  margin: 7px 9px 0;
+  background: #C1E0FE;
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  float: left;
+  cursor: pointer;
+}
+
+.vpc-network-chart .tier-item .content .dashboard-item:hover {
+  background-color: #DBEDFE;
+  /*+box-shadow:inset 0px 1px 2px #000000;*/
+  -moz-box-shadow: inset 0px 1px 2px #000000;
+  -webkit-box-shadow: inset 0px 1px 2px #000000;
+  -o-box-shadow: inset 0px 1px 2px #000000;
+  box-shadow: inset 0px 1px 2px #000000;
+}
+
+.vpc-network-chart .tier-item .content .dashboard-item .total {
+  font-size: 30px;
+  /*+placement:shift 7px 5px;*/
+  position: relative;
+  left: 7px;
+  top: 5px;
+  color: #145CA1;
+  font-weight: 100;
+  /*+text-shadow:0px 1px 1px #FFFFFF;*/
+  -moz-text-shadow: 0px 1px 1px #FFFFFF;
+  -webkit-text-shadow: 0px 1px 1px #FFFFFF;
+  -o-text-shadow: 0px 1px 1px #FFFFFF;
+  text-shadow: 0px 1px 1px #FFFFFF;
+}
+
+.vpc-network-chart .tier-item .content .dashboard-item .total.multiline {
+  font-size: 14px;
+}
+
+.vpc-network-chart .tier-item .content .dashboard-item .name {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: #0861B7;
+  /*+placement:shift 8px 7px;*/
+  position: relative;
+  left: 8px;
+  top: 7px;
+  /*+text-shadow:0px 1px 1px #FFFFFF;*/
+  -moz-text-shadow: 0px 1px 1px #FFFFFF;
+  -webkit-text-shadow: 0px 1px 1px #FFFFFF;
+  -o-text-shadow: 0px 1px 1px #FFFFFF;
+  text-shadow: 0px 1px 1px #FFFFFF;
+}
+
+.vpc-network-chart .tier-item .content .info {
+  /*+placement:shift 10px 5px;*/
+  position: relative;
+  left: 10px;
+  top: 5px;
+}
+
+.vpc-network-chart .tier-item .content .info .cidr-label {
+  font-size: 10px;
+  color: #1860A7;
+}
+
+.vpc-network-chart .tier-item .content .info .cidr {
+  color: #364553;
+  font-size: 10px;
+  /*+text-shadow:0px 1px #C7D8E9;*/
+  -moz-text-shadow: 0px 1px #C7D8E9;
+  -webkit-text-shadow: 0px 1px #C7D8E9;
+  -o-text-shadow: 0px 1px #C7D8E9;
+  text-shadow: 0px 1px #C7D8E9;
+}
+
+.vpc-network-chart .tier-placeholder {
+  cursor: pointer;
+  background: #EFEFEF;
+  border: 4px dotted #B1B1B1;
+  /*+border-radius:8px;*/
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -khtml-border-radius: 8px;
+  border-radius: 8px;
+  width: 325px;
+  text-align: center;
+  padding: 57px 0 55px;
+  margin: 0 0 0 18px;
+}
+
+.vpc-network-chart .tier-placeholder:hover {
+  background: #DCDCDC;
+  /*+border-radius:8px;*/
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -khtml-border-radius: 8px;
+  border-radius: 8px;
+  /*+box-shadow:inset 0px 1px 4px #000000;*/
+  -moz-box-shadow: inset 0px 1px 4px #000000;
+  -webkit-box-shadow: inset 0px 1px 4px #000000;
+  -o-box-shadow: inset 0px 1px 4px #000000;
+  box-shadow: inset 0px 1px 4px #000000;
+  /*+text-shadow:0px 1px #FFFFFF;*/
+  -moz-text-shadow: 0px 1px #FFFFFF;
+  -webkit-text-shadow: 0px 1px #FFFFFF;
+  -o-text-shadow: 0px 1px #FFFFFF;
+  text-shadow: 0px 1px #FFFFFF;
+}
+
+.vpc-network-chart .tier-placeholder:hover span {
+  color: #535353;
+}
+
+.vpc-network-chart .tier-placeholder span {
+  color: #AFAFAF;
+  font-size: 24px;
+  font-weight: 200;
+}
+
+.vpc-network-chart .tier-item.router {
+  width: 258px;
+  height: 218px;
+  background: #BDBDBD;
+  border: 1px solid #808080;
+  float: left;
+  /*+placement:shift 10px 176px;*/
+  position: relative;
+  left: 10px;
+  top: 176px;
+}
+
+.vpc-network-chart .tier-item.router .header {
+  padding: 15px 0 14px;
+  border-bottom: 1px solid #808080;
+  background: #C3C6C9;
+/*Old browsers*/
+  background: -moz-linear-gradient(top, #c3c6c9 0%, #909497 100%);
+/*FF3.6+*/
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3c6c9), color-stop(100%,#909497));
+/*Chrome,Safari4+*/
+  background: -webkit-linear-gradient(top, #c3c6c9 0%,#909497 100%);
+/*Chrome10+,Safari5.1+*/
+  background: -o-linear-gradient(top, #c3c6c9 0%,#909497 100%);
+/*Opera 11.10+*/
+  background: -ms-linear-gradient(top, #c3c6c9 0%,#909497 100%);
+/*IE10+*/
+  background: linear-gradient(to bottom, #c3c6c9 0%,#909497 100%);
+/*W3C*/
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3c6c9', endColorstr='#909497',GradientType=0 );
+/*IE6-8*/
+}
+
+.vpc-network-chart .tier-item.router .header .title {
+  width: 212px;
+  margin-top: 3px;
+}
+
+.vpc-network-chart .tier-item.router .header .title span {
+  padding: 0 0 0 50px;
+}
+
+.vpc-network-chart .tier-item.router .header span.icon {
+  background: url(../../images/sprites.png) -589px -1175px;
+  padding: 10px 10px 10px 20px;
+  float: left;
+  position: absolute;
+  top: 7px;
+  left: 10px;
+}
+
+.vpc-network-chart .tier-item.router .dashboard-item {
+  width: 100px;
+  /*[empty]margin:;*/
+  padding: 0px 2px 0px 6px;
+  height: 73px;
+  background: #A7A7A7;
+}
+
+.vpc-network-chart .tier-item.router .dashboard-item span {
+  color: #FFFFFF;
+  /*+text-shadow:0px 1px #000000;*/
+  -moz-text-shadow: 0px 1px #000000;
+  -webkit-text-shadow: 0px 1px #000000;
+  -o-text-shadow: 0px 1px #000000;
+  text-shadow: 0px 1px #000000;
+}
+
+.vpc-network-chart .tier-item.router .dashboard-item:hover {
+  background-color: #818181;
+}
+

ui/modules/vpc/vpc.js

@@ -0,0 +1,327 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+(function($, cloudStack) {
+  var addTierDialog = function(args) {
+    var $placeholder = args.$placeholder;
+    var context = args.context;
+    var addAction = cloudStack.vpc.tiers.actions.add;
+
+    cloudStack.dialog.createForm({
+      context: context,
+      form: addAction.createForm,
+      after: function(args) {
+        var $loading = $('<div>').addClass('loading-overlay')
+          .prependTo($placeholder);
+
+        addAction.action({
+          context: context,
+          data: args.data,
+          response: {
+            success: function(args) {
+              cloudStack.ui.notifications.add(
+                // Notification
+                {
+                  desc: addAction.label
+                },
+
+                // Success
+                function(args) {
+                  $loading.remove();
+                  $placeholder.closest('.vpc-network-chart').trigger('reload');
+                },
+
+                {},
+
+                // Error
+                function(args) {
+                  $loading.remove();
+                }
+              );
+            },
+            error: function(errorMsg) {
+              cloudStack.dialog.notice({ message: _s(errorMsg) });
+              $loading.remove();
+            }
+          }
+        });
+      }
+    });
+  };
+
+  var elems = {
+    tier: function(args) {
+      var tier = args.tier;
+      var context = $.extend(true, {}, args.context, {
+        networks: [tier]
+      });
+      var dashboardItems = args.dashboardItems;
+      var $tier = $('<div>').addClass('tier-item');
+      var $header = $('<div>').addClass('header');
+      var $title = $('<div>').addClass('title').append($('<span>'));
+      var $content = $('<div>').addClass('content');
+      var $browser = $('#browser .container');
+      var $dashboard = elems.dashboard({
+        context: context,
+        dashboardItems: dashboardItems
+      });
+      var $detailLink = $('<div>').addClass('detail-link');
+      var $info = $('<div>').addClass('info');
+      var $cidrLabel = $('<span>').addClass('cidr-label');
+      var $cidr = $('<span>').addClass('cidr');
+
+      $detailLink.click(function() {
+        $browser.cloudBrowser('addPanel', {
+          title: tier.displayname ? tier.displayname : tier.name,
+          complete: function($panel) {
+            var $detailView = $('<div>').detailView(
+              $.extend(true, {}, cloudStack.vpc.tiers.detailView, {
+                $browser: $browser,
+                context: context,
+                onActionComplete: function() {
+                  $tier.closest('.vpc-network-chart').trigger('reload');
+                }
+              })
+            );
+
+            $detailView.appendTo($panel);
+          }
+        });
+      });
+
+      $cidrLabel.html('CIDR: ');
+      $cidr.html(tier.cidr);
+      $title.find('span').html(tier.displayname ? tier.displayname : tier.name);
+      $header.append($title, $detailLink);
+      $info.append($cidrLabel, $cidr);
+      $content.append($dashboard, $info);
+      $tier.append($header, $content);
+
+      return $tier;
+    },
+
+    router: function(args) {
+      var $router = elems.tier({
+        context: args.context,
+        tier: {
+          name: 'Router',
+        },
+        dashboardItems: args.dashboardItems
+      }).addClass('router');
+
+      $router.find('.info, .detail-link').remove();
+      $router.find('.header').prepend($('<span></span>').addClass('icon').html('&nbsp;'));
+
+      return $router;
+    },
+
+    tierPlaceholder: function(args) {
+      var context = args.context;
+      var $placeholder = $('<div>').addClass('tier-placeholder');
+
+      $placeholder.append($('<span>').append('Create network'));
+      $placeholder.click(function() {
+        addTierDialog({
+          context: context,
+          $placeholder: $placeholder
+        });
+      });
+
+      return $placeholder;
+    },
+
+    dashboard: function(args) {
+      var $dashboard = $('<div>').addClass('dashboard');
+      var context = args.context;
+      var tier = context.networks[0];
+
+      $(args.dashboardItems).map(function(index, dashboardItem) {
+        var $dashboardItem = $('<div>').addClass('dashboard-item');
+        var $name = $('<div>').addClass('name').append($('<span>'));
+        var $total = $('<div>').addClass('total').append($('<span>'));
+        var id = dashboardItem.id;
+
+        $name.find('span').html(dashboardItem.name);
+
+
+        if (dashboardItem.totalMultiLine) {
+          $total.find('span').html(dashboardItem.totalMultiLine);
+          $total.addClass('multiline');
+        } else {
+          $total.find('span').html(dashboardItem.total ? dashboardItem.total : 0);
+        }
+
+        $dashboardItem.append($total, $name);
+        $dashboardItem.appendTo($dashboard);
+
+        $dashboardItem.click(function() {
+          var section = cloudStack.vpc.sections[id];
+          var $section = $('<div>');
+          var $loading = $('<div>').addClass('loading-overlay');
+          
+          if ($.isFunction(section)) {
+            section = cloudStack.vpc.sections[id]();
+          }
+
+          var before = section.before;
+          var load = function() {
+            $('#browser .container').cloudBrowser('addPanel', {
+              title: tier.name + ' - ' + dashboardItem.name,
+              maximizeIfSelected: true,
+              complete: function($panel) {
+                if (section.listView) {
+                  $section.listView($.extend(true, {}, section, {
+                    onActionComplete: function() {
+                      $dashboardItem.closest('.vpc-network-chart').trigger('reload');
+                    },
+                    context: context
+                  }));
+                }
+
+                $section.appendTo($panel);
+              }
+            });            
+          };
+
+          if (before) {
+            before.check({
+              context: context,
+              response: {
+                success: function(result) {
+                  // true means content exists
+                  if (result) {
+                    load();
+                  } else {
+                    cloudStack.dialog.confirm({
+                      message: before.messages.confirm,
+                      action: function() {
+                        $loading.appendTo($dashboardItem.closest('.vpc-network-chart'));
+                        before.action({
+                          context: context,
+                          response: {
+                            success: function() {
+                              $loading.remove();
+                              $dashboardItem.closest('.vpc-network-chart').trigger('reload');
+                              load();
+                            }
+                          }
+                        });
+                      }
+                    })
+                  }
+                }
+              }
+            });
+          } else {
+            load();
+          }
+        });
+      });
+
+      return $dashboard;
+    }
+  };
+
+  cloudStack.modules.vpc = function(module) {
+    var vpc = cloudStack.vpc;
+    var vpcSection = cloudStack.sections.network.sections.vpc;
+    var listConfigureAction = vpcSection.listView.actions.configureVpc.action;
+    var detailsConfigureAction = vpcSection.listView.detailView.actions.configureVpc.action;
+
+    var vpcChart = function(args) {
+      var context = args.context;
+      var vpcItem = context.vpc[0];
+
+      var chart = function(args) {
+        args = args ? args : {};
+
+        var $chart = $('<div>').addClass('vpc-network-chart');
+        var $tiers = $('<div>').addClass('tiers');
+        var $toolbar = $('<div>').addClass('toolbar');
+
+        $toolbar.appendTo($chart);
+        $tiers.appendTo($chart);
+
+        // Get tiers
+        var $loading = $('<div>').addClass('loading-overlay').prependTo($chart);
+        vpc.tiers.dataProvider({
+          context: context,
+          response: {
+            success: function(data) {
+              var tiers = data.tiers;
+              var $placeholder = elems.tierPlaceholder({
+                context: context
+              });
+
+              $(tiers).map(function(index, tier) {
+                var $tier = elems.tier({
+                  context: context,
+                  tier: tier,
+                  dashboardItems: tier._dashboardItems
+                });
+                $tier.appendTo($tiers);
+              });
+
+              // Add placeholder tier
+              $tiers.append($placeholder);
+              $loading.remove();
+
+              if (!tiers.length) {
+                addTierDialog({
+                  context: context,
+                  $placeholder: $placeholder
+                });
+              }
+
+              if (args.complete) {
+                args.complete($chart);
+              }
+
+              // Router
+              elems.router({
+                context: context,
+                dashboardItems: data.routerDashboard
+              }).appendTo($chart);
+            }
+          }
+        });
+
+        $chart.bind('reload', function() {
+          chart({
+            complete: function($newChart) {
+              $chart.replaceWith($newChart);
+            }
+          });
+        });
+
+        return $chart;
+      };
+
+      $('#browser .container').cloudBrowser('addPanel', {
+        title: vpcItem.displaytext ? vpcItem.displaytext : vpcItem.name,
+        maximizeIfSelected: true,
+        complete: function($panel) {
+          var $chart = chart();
+
+          $chart.appendTo($panel);
+        }
+      });
+    };
+
+    listConfigureAction.custom = vpcChart;
+    detailsConfigureAction.custom = vpcChart;
+  };
+}(jQuery, cloudStack));

ui/scripts/instances.js

@@ -204,6 +204,14 @@
 					  affinitygroupid: args.context.affinityGroups[0].id
 					});		
 				}
+
+        if("vpc" in args.context &&
+           "networks" in args.context) {
+          $.extend(data, {
+            vpcid: args.context.vpc[0].id,
+            networkid: args.context.networks[0].id
+          });
+        }
               
         $.ajax({
           url: createURL('listVirtualMachines'),

ui/scripts/sharedFunctions.js

@@ -276,7 +276,7 @@ cloudStack.actionFilter = {
   guestNetwork: function(args) {    
     var jsonObj = args.context.item;
 		var allowedActions = [];
-    
+                allowedActions.push('replaceacllist');
 		if(jsonObj.type == 'Isolated') {
 		  allowedActions.push('edit');		//only Isolated network is allowed to upgrade to a different network offering (Shared network is not allowed to)
 			allowedActions.push('restart');   

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

ui/scripts/ui/widgets/listView.js

@@ -104,6 +104,10 @@
               cloudStack.ui.notifications.add(
                 notification,
                 function(args) {
+                  if (listViewArgs.onActionComplete) {
+                    listViewArgs.onActionComplete();
+                  }
+                  
                   if ($item.is(':visible') && !isHeader) {
                     replaceItem(
                       $item,
@@ -175,6 +179,10 @@
 
                 if (additional && additional.success) additional.success(args);
 
+                if (listViewArgs.onActionComplete == true) {
+                  listViewArgs.onActionComplete();
+                }
+                
                 cloudStack.ui.notifications.add(
                   notification,
 
@@ -213,6 +221,10 @@
                     if (options.complete) {
                       options.complete(args);
                     }
+
+                    if (listViewArgs.onActionComplete) {
+                      listViewArgs.onActionComplete();
+                    }
                   },
 
                   {},
@@ -1187,6 +1199,10 @@
                       $quickViewTooltip.hide();
                     },
                     onActionComplete: function() {
+                      if (listViewArgs.onActionComplete) {
+                        listViewArgs.onActionComplete();
+                      }
+                      
                       $tr.removeClass('loading').find('td:last .loading').remove();
                       $quickViewTooltip.remove();
                     }
@@ -1798,6 +1814,8 @@
           });
         }
 
+        detailViewArgs.data.onActionComplete = listViewArgs.onActionComplete;
+
         createDetailView(
           detailViewArgs,
           function($detailView) { //complete(), callback funcion
@@ -1873,7 +1891,7 @@
     if (!options) options = {};
 
     var viewArgs = listView.data('view-args');
-    var listViewArgs = viewArgs.listView ? viewArgs.listView : viewArgs;
+    var listViewArgs = $.isPlainObject(viewArgs.listView) ? viewArgs.listView : viewArgs;
     var targetArgs = listViewArgs.activeSection ? listViewArgs.sections[
       listViewArgs.activeSection
     ].listView : listViewArgs;
@@ -1903,7 +1921,7 @@
     var $newRow;
     var $listView = $row.closest('.list-view');
     var viewArgs = $listView.data('view-args');
-    var listViewArgs = viewArgs.listView ? viewArgs.listView : viewArgs;
+    var listViewArgs = $.isPlainObject(viewArgs.listView) ? viewArgs.listView : viewArgs;
     var targetArgs = listViewArgs.activeSection ? listViewArgs.sections[
       listViewArgs.activeSection
     ].listView : listViewArgs;