Feature #2939: Show resource id and name in confirmation dialogs

src/sunstone/public/app/tabs/clusters-tab/panels/info.js

@@ -101,7 +101,8 @@ define(function(require) {
       dialog.setParams(
         { element: that.element,
           action : "Cluster.append_template",
-          resourceName : Locale.tr("Cluster")
+          resourceName : Locale.tr("Cluster"),
+          tabId : TAB_ID
         });
 
       dialog.show();

src/sunstone/public/app/tabs/groups-tab/actions.js

@@ -81,8 +81,8 @@ define(function(require) {
     "Group.set_quota" : {
       type: "multiple",
       call: OpenNebulaResource.set_quota,
-      elements: function() {
-        return Sunstone.getDataTable(TAB_ID).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(TAB_ID).elements(opts);
       },
       callback: function(request) {
         Sunstone.getDialog(QUOTAS_DIALOG_ID).hide();

src/sunstone/public/app/tabs/groups-tab/dialogs/quotas/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Update Quota"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form data-abide novalidate id="{{dialogId}}Form">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/tabs/hosts-tab/actions.js

@@ -95,8 +95,8 @@ define(function(require) {
           });
         }
       },
-      elements: function() {
-        return Sunstone.getDataTable(TAB_ID).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(TAB_ID).elements(opts);
       }
     }
   };

src/sunstone/public/app/tabs/hosts-tab/panels/info.js

@@ -129,7 +129,8 @@ define(function(require) {
       dialog.setParams(
         { element: that.element,
           action : "Host.append_template",
-          resourceName : Locale.tr("Host")
+          resourceName : Locale.tr("Host"),
+          tabId : TAB_ID
         });
 
       dialog.show();

src/sunstone/public/app/tabs/images-tab/dialogs/clone.js

@@ -113,7 +113,10 @@ define(function(require) {
   }
 
   function _onShow(dialog) {
-    var sel_elems = Sunstone.getDataTable(IMAGES_TAB_ID).elements();
+    var sel_elems = Sunstone.getDataTable(IMAGES_TAB_ID).elements({names: true});
+
+    this.setNames(sel_elems);
+
     //show different text depending on how many elements are selected
     if (sel_elems.length > 1) {
       $('.clone_one', dialog).hide();
@@ -122,7 +125,7 @@ define(function(require) {
     } else {
       $('.clone_one', dialog).show();
       $('.clone_several', dialog).hide();
-      $('input[name="image_clone_name"]', dialog).val('Copy of ' + OpenNebulaImage.getName(sel_elems[0]));
+      $('input[name="image_clone_name"]', dialog).val('Copy of ' + sel_elems[0].name);
     };
 
     this.datastoreTable.resetResourceTableSelect();

src/sunstone/public/app/tabs/images-tab/dialogs/clone/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Clone Image"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form id="{{dialogId}}Form" action="" class="custom creation">
     <div class="row">
       <div class="columns large-12">

src/sunstone/public/app/tabs/images-tab/panels/snapshots.js

@@ -33,6 +33,7 @@ define(function(require){
     CONSTANTS
    */
 
+  var TAB_ID = require('../tabId');
   var PANEL_ID = require('./snapshots/panelId');
   var RESOURCE = "Image";
   var XML_ROOT = "IMAGE";
@@ -126,6 +127,7 @@ define(function(require){
 
         Sunstone.getDialog(CONFIRM_DIALOG_ID).setParams({
           //header :
+          headerTabId: TAB_ID,
           body : Locale.tr("This will delete all the other image snapshots"),
           //question :
           submit : function(){
@@ -158,6 +160,7 @@ define(function(require){
 
         Sunstone.getDialog(CONFIRM_DIALOG_ID).setParams({
           //header :
+          headerTabId: TAB_ID,
           body : Locale.tr("This will delete the image snapshot "+snapshot_id),
           //question :
           submit : function(){

src/sunstone/public/app/tabs/marketplaceapps-tab/actions.js

@@ -82,8 +82,8 @@ define(function(require) {
         OpenNebulaAction.clear_cache("IMAGE");
         OpenNebulaAction.clear_cache("VMTEMPLATE");
       },
-      elements: function() {
-        return Sunstone.getDataTable(TAB_ID).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(TAB_ID).elements(opts);
       },
       error: function(request, response){
         // without tab id param to work for both templates and vms tab
@@ -101,8 +101,8 @@ define(function(require) {
           window.open("http://localhost:9869/marketplaceapp/"+this+"/download?csrftoken="+csrftoken, "_blank");
         });
       },
-      elements: function() {
-        return Sunstone.getDataTable(TAB_ID).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(TAB_ID).elements(opts);
       },
       error: Notifier.onError
     },

src/sunstone/public/app/tabs/oneflow-services-tab/dialogs/scale.js

@@ -64,6 +64,7 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
   }
 
   function _setup(context) {

src/sunstone/public/app/tabs/oneflow-services-tab/dialogs/scale/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Scale"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form data-abide novalidate id="{{dialogId}}Form">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/tabs/oneflow-templates-tab/actions.js

@@ -68,8 +68,8 @@ define(function(require) {
 
         Notifier.notifyCustom(Locale.tr("Service created"), " ID: " + response.DOCUMENT.ID, false);
       },
-      elements: function() {
-        return Sunstone.getDataTable(TAB_ID).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(TAB_ID).elements(opts);
       },
       error: function(request, response){
         Sunstone.hideFormPanelLoading(TAB_ID);

src/sunstone/public/app/tabs/oneflow-templates-tab/dialogs/clone.js

@@ -93,7 +93,10 @@ define(function(require) {
   }
 
   function _onShow(context) {
-    var sel_elems = Sunstone.getDataTable(ONEFLOW_TEMPLATES_TAB_ID).elements();
+    var sel_elems = Sunstone.getDataTable(ONEFLOW_TEMPLATES_TAB_ID).elements({names: true});
+
+    this.setNames(sel_elems);
+
     //show different text depending on how many elements are selected
     if (sel_elems.length > 1) {
       $('.clone_one', context).hide();
@@ -102,7 +105,7 @@ define(function(require) {
     } else {
       $('.clone_one', context).show();
       $('.clone_several', context).hide();
-      $('input[name="name"]', context).val('Copy of ' + OpenNebulaServiceTemplate.getName(sel_elems[0]));
+      $('input[name="name"]', context).val('Copy of ' + sel_elems[0].name);
     };
 
     $("input[name='name']", context).focus();

src/sunstone/public/app/tabs/oneflow-templates-tab/dialogs/clone/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Clone Service Template"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form id="{{dialogId}}Form" action="" class="custom creation">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/tabs/secgroups-tab/actions.js

@@ -75,6 +75,7 @@ define(function(require) {
         call: function() {
           Sunstone.getDialog(CONFIRM_DIALOG_ID).setParams({
             //header :
+            headerTabId: TAB_ID,
             body : Locale.tr(
               "Please note: each time the rules are edited, the commit operation is done automatically. "+
               "<br/><br/>"+

src/sunstone/public/app/tabs/secgroups-tab/dialogs/clone.js

@@ -93,7 +93,9 @@ define(function(require) {
   }
 
   function _onShow(context) {
-    var sel_elems = Sunstone.getDataTable(TAB_ID).elements();
+    var sel_elems = Sunstone.getDataTable(TAB_ID).elements({names: true});
+
+    this.setNames(sel_elems);
 
     //show different text depending on how many elements are selected
     if (sel_elems.length > 1) {
@@ -104,7 +106,7 @@ define(function(require) {
       $('.clone_one', context).show();
       $('.clone_several', context).hide();
 
-      $('input',context).val('Copy of ' + OpenNebulaSecurityGroup.getName(sel_elems[0]));
+      $('input',context).val('Copy of ' + sel_elems[0].name);
     }
 
     $("input[name='name']",context).focus();

src/sunstone/public/app/tabs/secgroups-tab/dialogs/clone/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Clone Security Group"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form data-abide novalidate id="{{dialogId}}Form">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/tabs/templates-tab/actions-common.js

@@ -82,8 +82,8 @@ define(function(require) {
             var elementId = request.request.data[0][0].toString();
             Sunstone.getDataTable(TAB_ID).deleteElement(elementId);
           },
-          elements: function() {
-            return Sunstone.getDataTable(TAB_ID).elements();
+          elements: function(opts) {
+            return Sunstone.getDataTable(TAB_ID).elements(opts);
           },
           error: Notifier.onError,
           notify: true
@@ -106,8 +106,8 @@ define(function(require) {
           callback : function(request, response) {
             Sunstone.runAction(RESOURCE+".show", req.request.data[0][0]);
           },
-          elements: function() {
-            return Sunstone.getDataTable(TAB_ID).elements();
+          elements: function(opts) {
+            return Sunstone.getDataTable(TAB_ID).elements(opts);
           },
           error: Notifier.onError,
           notify: false
@@ -127,8 +127,8 @@ define(function(require) {
           callback : function(request, response) {
             Sunstone.runAction(RESOURCE+".show", req.request.data[0][0]);
           },
-          elements: function() {
-            return Sunstone.getDataTable(TAB_ID).elements();
+          elements: function(opts) {
+            return Sunstone.getDataTable(TAB_ID).elements(opts);
           },
           error: Notifier.onError,
           notify: false
@@ -157,8 +157,8 @@ define(function(require) {
 
           Notifier.notifyCustom(Locale.tr("VM created"), " ID: " + response, false);
         },
-        elements: function() {
-          return Sunstone.getDataTable(TAB_ID).elements();
+        elements: function(opts) {
+          return Sunstone.getDataTable(TAB_ID).elements(opts);
         },
         error: function(request, response){
           // without tab id param to work for both templates and vms tab

src/sunstone/public/app/tabs/templates-tab/dialogs/clone.js

@@ -114,7 +114,10 @@ define(function(require) {
   }
 
   function _onShow(context) {
-    var sel_elems = Sunstone.getDataTable(this.tabId).elements();
+    var sel_elems = Sunstone.getDataTable(this.tabId).elements({names: true});
+
+    this.setNames(sel_elems);
+
     //show different text depending on how many elements are selected
     if (sel_elems.length > 1) {
       $('.clone_one', context).hide();
@@ -123,7 +126,7 @@ define(function(require) {
     } else {
       $('.clone_one', context).show();
       $('.clone_several', context).hide();
-      $('input[name="name"]', context).val('Copy of ' + OpenNebulaTemplate.getName(sel_elems[0]));
+      $('input[name="name"]', context).val('Copy of ' + sel_elems[0].name);
     };
 
     $("input[name='name']", context).focus();

src/sunstone/public/app/tabs/templates-tab/dialogs/clone/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 id="create_vnet_header" class="subheader">{{tr "Clone Template"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form id="{{dialogId}}Form" action="" class="custom creation">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/tabs/users-tab/actions.js

@@ -245,8 +245,8 @@ define(function(require) {
     "User.set_quota" : {
       type: "multiple",
       call: OpenNebulaResource.set_quota,
-      elements: function() {
-        return Sunstone.getDataTable(TAB_ID).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(TAB_ID).elements(opts);
       },
       callback: function(request) {
         Sunstone.getDialog(QUOTAS_DIALOG_ID).hide();

src/sunstone/public/app/tabs/users-tab/dialogs/auth-driver.js

@@ -95,6 +95,7 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
 
     return false;
   }

src/sunstone/public/app/tabs/users-tab/dialogs/auth-driver/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Change authentication"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form data-abide novalidate id="{{dialogId}}Form">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/tabs/users-tab/dialogs/groups.js

@@ -34,6 +34,7 @@ define(function(require) {
    */
 
   var DIALOG_ID = require('./groups/dialogId');
+  var TAB_ID = require('../tabId');
 
   /*
     CONSTRUCTOR
@@ -121,6 +122,8 @@ define(function(require) {
   }
 
   function _onShow(dialog) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
+
     this.groupsTable.refreshResourceTableSelect();
 
     if (this.originalGroupIds !== undefined && this.originalGroupIds.length > 0) {

src/sunstone/public/app/tabs/users-tab/dialogs/groups/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Select Secondary Groups"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form data-abide novalidate id="{{dialogId}}Form">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/tabs/users-tab/dialogs/password.js

@@ -105,6 +105,7 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
 
     return false;
   }

src/sunstone/public/app/tabs/users-tab/dialogs/password/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Update Password"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form data-abide novalidate id="{{dialogId}}Form">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/tabs/users-tab/dialogs/quotas/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Update Quota"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form data-abide novalidate id="{{dialogId}}Form">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/tabs/vms-tab/actions.js

@@ -217,8 +217,8 @@ define(function(require) {
 
         Sunstone.runAction("VM.refresh");
       },
-      elements: function() {
-        return Sunstone.getDataTable(TAB_ID).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(TAB_ID).elements(opts);
       },
       error: function(request, response) {
         Sunstone.hideFormPanelLoading(TAB_ID);

src/sunstone/public/app/tabs/vms-tab/dialogs/attach-disk.js

@@ -90,8 +90,10 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
+
     this.diskTab.onShow(context);
-    $("#vm_id", context).val(this.element.ID);
+
     return false;
   }
 

src/sunstone/public/app/tabs/vms-tab/dialogs/attach-disk/html.hbs

@@ -20,14 +20,9 @@
       <h3 class="subheader" id="">{{tr "Attach new disk"}}</h3>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
-      <div class="row">
-        <div class="large-6 columns">
-          <label for="vm_id">{{tr "Virtual Machine ID"}}</label>
-          <input style="border-style: inset; background-color: lightgrey" type="text" name="vm_id" id="vm_id" disabled/>
-        </div>
-      </div>
       {{{diskTabHTML}}}
       <div class="reveal-footer">
         <div class="form_buttons">

src/sunstone/public/app/tabs/vms-tab/dialogs/attach-nic.js

@@ -90,8 +90,10 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
+
     this.nicTab.onShow(context);
-    $("#vm_id", context).val(this.element.ID);
+
     return false;
   }
 

src/sunstone/public/app/tabs/vms-tab/dialogs/attach-nic/html.hbs

@@ -20,14 +20,9 @@
       <h3 class="subheader" id="">{{tr "Attach new nic"}}</h3>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
-      <div class="row">
-        <div class="large-6 columns">
-          <label for="vm_id">{{tr "Virtual Machine ID"}}</label>
-          <input style="border-style: inset; background-color: lightgrey" type="text" name="vm_id" id="vm_id" disabled/>
-        </div>
-      </div>
       {{{nicTabHTML}}}
       <div class="reveal-footer">
         <div class="form_buttons">

src/sunstone/public/app/tabs/vms-tab/dialogs/deploy.js

@@ -107,6 +107,7 @@ define(function(require) {
   }
 
   function _onShow(dialog) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
     this.datastoresTable.resetResourceTableSelect();
     this.hostsTable.resetResourceTableSelect();
 

src/sunstone/public/app/tabs/vms-tab/dialogs/deploy/html.hbs

@@ -20,6 +20,7 @@
       <h3 id="deploy_vm_header" class="subheader">{{tr "Deploy Virtual Machine"}}</h3>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
       <div class="row">

src/sunstone/public/app/tabs/vms-tab/dialogs/disk-saveas.js

@@ -92,7 +92,7 @@ define(function(require) {
   }
 
   function _onShow(context) {
-    $("#vm_id", context).val(this.element.ID);
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
     $("#disk_id", context).val(this.diskId);
     $("#snapshot_id", context).val(this.snapshotId);
     $("#image_name", context).focus();

src/sunstone/public/app/tabs/vms-tab/dialogs/disk-saveas/html.hbs

@@ -20,20 +20,15 @@
       <h3 class="subheader" id="">{{tr "Disk Saveas"}}</h3>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
       <div class="row">
-        <div class="large-6 columns">
-          <label for="vm_id">{{tr "Virtual Machine ID"}}</label>
-          <input style="border-style: inset; background-color: lightgrey" type="text" name="vm_id" id="vm_id" disabled/>
-        </div>
         <div class="large-6 columns">
           <label for="disk_id">{{tr "Disk ID"}}</label>
           <input style="border-style: inset; background-color: lightgrey" type="text" name="disk_id" id="disk_id" disabled/>
         </div>
-      </div>
-      <div class="row snapshot_id_row">
-        <div class="large-6 columns">
+        <div class="large-6 columns snapshot_id_row">
           <label for="snapshot_id">{{tr "Snapshot ID"}}</label>
           <input style="border-style: inset; background-color: lightgrey" type="text" name="snapshot_id" id="snapshot_id" disabled/>
         </div>

src/sunstone/public/app/tabs/vms-tab/dialogs/disk-snapshot.js

@@ -84,7 +84,7 @@ define(function(require) {
   }
 
   function _onShow(context) {
-    $("#vm_id", context).val(this.element.ID);
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
     $("#disk_id", context).val(this.diskId);
     $("#snapshot_name", context).focus();
     return false;

src/sunstone/public/app/tabs/vms-tab/dialogs/disk-snapshot/html.hbs

@@ -20,13 +20,10 @@
       <h3 class="subheader" id="">{{tr "Disk Snapshot"}}</h3>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
       <div class="row">
-        <div class="large-6 columns">
-          <label for="vm_id">{{tr "Virtual Machine ID"}}</label>
-          <input style="border-style: inset; background-color: lightgrey" type="text" name="vm_id" id="vm_id" disabled/>
-        </div>
         <div class="large-6 columns">
           <label for="disk_id">{{tr "Disk ID"}}</label>
           <input style="border-style: inset; background-color: lightgrey" type="text" name="disk_id" id="disk_id" disabled/>

src/sunstone/public/app/tabs/vms-tab/dialogs/migrate.js

@@ -133,11 +133,11 @@ define(function(require) {
           var element = vm_json.VM;
           var hostname = OpenNebulaVM.hostnameStr(element);
 
-          $("#current_hosts_of_vms").append(
+          $('.confirm-resources-header', context).append(
               '<span class="radius secondary label">' +
-              Locale.tr("VM") + ' [' + element.ID + '] ' +
+              Locale.tr("VM") + ' ' + element.ID + ' '+ element.NAME +' ' +
               Locale.tr("is currently running on Host") +
-              ' [' + hostname + ']</span><br>'
+              ' ' + hostname + '</span><br>'
           );
         }
       });

src/sunstone/public/app/tabs/vms-tab/dialogs/migrate/html.hbs

@@ -20,11 +20,10 @@
       <h3 id="migrate_vm_header" class="subheader">{{tr "Migrate Virtual Machine"}}</h3>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
+  <br>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
-      <div id="current_hosts_of_vms" class="row"></div>
-      <br>
-      <br>
       <div class="row">
         <fieldset>
           <legend>{{tr "Select a Host"}}</legend>
@@ -34,7 +33,7 @@
         <div class="row">
           <div class="large-6 columns">
             <input type="checkbox" name="enforce" id="enforce"/>
-            <label for="vm_id">
+            <label for="enforce">
               {{tr "Enforce"}}
               <span class="tip">
                 {{tr "If it is set to true, the host capacity will be checked. This will only affect oneadmin requests, regular users resize requests will always be enforced"}}

src/sunstone/public/app/tabs/vms-tab/dialogs/resize.js

@@ -93,7 +93,9 @@ define(function(require) {
 
   function _onShow(context) {
     var that = this;
-    $('#vm_id', context).text(that.element.ID);
+
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
+
     CapacityInputs.fill(context, that.element);
 
     // TODO context.foundation('slider', 'reflow');

src/sunstone/public/app/tabs/vms-tab/dialogs/resize/html.hbs

@@ -20,16 +20,13 @@
     <h3 class="subheader" id="">{{tr "Resize VM capacity"}}</h3>
   </div>
 </div>
+<div class="confirm-resources-header"></div>
 <div class="reveal-body">
   <form id="{{dialogId}}Form" action="">
     <div class="row centered">
-      <div class="large-6 columns">
-        <label for="vm_id">{{tr "Virtual Machine ID"}}</label>
-        <label style="border-style: inset; background-color: lightgrey" type="text" name="vm_id" id="vm_id" disabled/>
-      </div>
       <div class="large-6 columns">
         <input type="checkbox" name="enforce" id="enforce"/>
-        <label class="inline" for="vm_id">
+        <label class="inline" for="enforce">
           {{tr "Enforce"}}
           <span class="tip">
             {{tr "If it is set to true, the host capacity will be checked. This will only affect oneadmin requests, regular users resize requests will always be enforced"}}

src/sunstone/public/app/tabs/vms-tab/dialogs/saveas-template.js

@@ -71,7 +71,7 @@ define(function(require) {
     $('#' + DIALOG_ID + 'Form', context).submit(function() {
       var template_name = $('#template_name', this).val();
       var persistent = $('#saveas_persistency', this).is(":checked") ? true : false;
-      var vm_id = $("#vm_id", context).val();
+      var vm_id = Sunstone.getDataTable(TAB_ID).elements();
 
       OpenNebula.VM.save_as_template({
         data : {
@@ -99,7 +99,7 @@ define(function(require) {
   }
 
   function _onShow(context) {
-    $("#vm_id", context).val(Sunstone.getDataTable(TAB_ID).elements());
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
     $("#template_name", context).focus();
     return false;
   }

src/sunstone/public/app/tabs/vms-tab/dialogs/saveas-template/html.hbs

@@ -20,14 +20,9 @@
       <h3 class="subheader" id="">{{tr "Save as Template"}}</h3>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
-      <div class="row">
-        <div class="large-6 columns">
-          <label for="vm_id">{{tr "Virtual Machine ID"}}</label>
-          <input style="border-style: inset; background-color: lightgrey" type="text" name="vm_id" id="vm_id" disabled/>
-        </div>
-      </div>
       <div class="row">
         <div class="large-12 columns">
           <label for="template_name">{{tr "Template name"}}</label>

src/sunstone/public/app/tabs/vms-tab/dialogs/snapshot.js

@@ -83,7 +83,7 @@ define(function(require) {
   }
 
   function _onShow(context) {
-    $("#vm_id", context).val(this.element.ID);
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
     $("#snapshot_name", context).focus();
     return false;
   }

src/sunstone/public/app/tabs/vms-tab/dialogs/snapshot/html.hbs

@@ -20,14 +20,9 @@
       <h3 class="subheader" id="">{{tr "Snapshot"}}</h3>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
-      <div class="row">
-        <div class="large-6 columns">
-          <label for="vm_id">{{tr "Virtual Machine ID"}}</label>
-          <input style="border-style: inset; background-color: lightgrey" type="text" name="vm_id" id="vm_id" disabled/>
-        </div>
-      </div>
       <div class="row">
         <div class="large-12 columns">
           <label for="snapshot_name">{{tr "Snapshot name"}}</label>

src/sunstone/public/app/tabs/vms-tab/panels/network.js

@@ -392,6 +392,7 @@ define(function(require) {
 
         Sunstone.getDialog(CONFIRM_DIALOG_ID).setParams({
           //header :
+          headerTabId: TAB_ID,
           body : Locale.tr("This will detach the nic immediately"),
           //question :
           submit : function(){

src/sunstone/public/app/tabs/vms-tab/panels/storage.js

@@ -350,6 +350,7 @@ define(function(require) {
 
         Sunstone.getDialog(CONFIRM_DIALOG_ID).setParams({
           //header :
+          headerTabId: TAB_ID,
           body : Locale.tr("This will detach the disk immediately"),
           //question :
           submit : function(){
@@ -453,6 +454,7 @@ define(function(require) {
 
         Sunstone.getDialog(CONFIRM_DIALOG_ID).setParams({
           //header :
+          headerTabId: TAB_ID,
           body : Locale.tr("This will delete the disk snapshot "+snapshot_id),
           //question :
           submit : function(){

src/sunstone/public/app/tabs/vnets-tab/dialogs/add-ar.js

@@ -31,6 +31,7 @@ define(function(require) {
    */
 
   var DIALOG_ID = require('./add-ar/dialogId');
+  var TAB_ID = require('../tabId');
 
   /*
     CONSTRUCTOR
@@ -91,8 +92,9 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
+
     this.arTab.onShow();
-    $('#vnet_id', this.dialogElement).text(this.vnetId);
   }
 
   function _setId(id) {

src/sunstone/public/app/tabs/vnets-tab/dialogs/add-ar/html.hbs

@@ -18,14 +18,11 @@
   <div class="reveal-body">
     <form data-abide novalidate id="add_ar_form" action="">
       <div class="row">
-        <div class="large-12 columns">
-          <h3>
-            {{tr "New Address Range"}}
-            <br>
-            <small>{{tr "Virtual Network"}} <span id="vnet_id"/></small>
-          </h3>
-        </div>
+        <h3 class="subheader">
+          {{tr "New Address Range"}}
+        </h3>
       </div>
+      <div class="confirm-resources-header"></div>
       {{{arTabHTML}}}
       <div class="reveal-footer">
         <div class="form_buttons">

src/sunstone/public/app/tabs/vnets-tab/dialogs/reserve.js

@@ -33,6 +33,7 @@ define(function(require) {
    */
 
   var DIALOG_ID = require('./reserve/dialogId');
+  var TAB_ID = require('../tabId');
 
   /*
     CONSTRUCTOR
@@ -132,6 +133,8 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
+
     this.vnetsTable.refreshResourceTableSelect();
     this.arsTable.refreshResourceTableSelect();
   }
@@ -143,7 +146,5 @@ define(function(require) {
    */
   function _setParams(params) {
     this.vnetId = params.vnetId;
-
-    $('#vnet_id', this.dialogElement).text(params.vnetId);
   }
 });

src/sunstone/public/app/tabs/vnets-tab/dialogs/reserve/html.hbs

@@ -18,12 +18,11 @@
   <div class="reveal-body">
     <form id="reserve_form" action="">
       <div class="row">
-        <div class="large-12 columns">
-          <h3 class="subheader" id="">
-            {{tr "Reservation from Virtual Network"}} <span id="vnet_id"/>
-          </h3>
-        </div>
+        <h3 class="subheader">
+          {{tr "Reservation from Virtual Network"}}
+        </h3>
       </div>
+      <div class="confirm-resources-header"></div>
       <div class="row">
         <div class="large-6 columns">
           <label for="reserve_size">{{tr "Number of addresses"}}</label>

src/sunstone/public/app/tabs/vnets-tab/dialogs/update-ar.js

@@ -31,6 +31,7 @@ define(function(require) {
    */
 
   var DIALOG_ID = require('./update-ar/dialogId');
+  var TAB_ID = require('../tabId');
 
   /*
     CONSTRUCTOR
@@ -91,6 +92,8 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
+
     this.arTab.onShow();
   }
 
@@ -98,7 +101,6 @@ define(function(require) {
     this.vnetId = params.vnetId;
     this.arId = params.arId;
 
-    $('#vnet_id', this.dialogElement).text(params.vnetId);
     $('#ar_id', this.dialogElement).text(params.arId);
     this.arTab.fill(params.arData);
   }

src/sunstone/public/app/tabs/vnets-tab/dialogs/update-ar/html.hbs

@@ -18,14 +18,11 @@
   <div class="reveal-body">
     <form data-abide novalidate id="update_ar_form" action="">
       <div class="row">
-        <div class="large-12 columns">
-          <h3>
-            {{tr "Edit Address Range"}} <span id="ar_id"/>
-            <br>
-            <small>{{tr "Virtual Network"}} <span id="vnet_id"/></small>
-          </h3>
-        </div>
+        <h3 class="subheader">
+          {{tr "Edit Address Range"}} <span id="ar_id"/>
+        </h3>
       </div>
+      <div class="confirm-resources-header"></div>
       {{{arTabHTML}}}
       <div class="reveal-footer">
         <div class="form_buttons">

src/sunstone/public/app/tabs/vnets-tab/panels/ar.js

@@ -173,6 +173,7 @@ define(function(require) {
 
         Sunstone.getDialog(CONFIRM_DIALOG_ID).setParams({
           //header :
+          headerTabId: TAB_ID,
           body : Locale.tr("This will delete all the addresses in this range"),
           //question :
           submit : function(){

src/sunstone/public/app/tabs/vrouters-tab/dialogs/attach-nic.js

@@ -94,7 +94,8 @@ define(function(require) {
   }
 
   function _onShow(context) {
-    $("#vr_id", context).val(this.element.ID);
+    this.setNames( Sunstone.getDataTable(TAB_ID).elements({names: true}) );
+
     return false;
   }
 

src/sunstone/public/app/tabs/vrouters-tab/dialogs/attach-nic/html.hbs

@@ -20,14 +20,9 @@
       <h3 class="subheader" id="">{{tr "Attach new nic"}}</h3>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
-      <div class="row">
-        <div class="large-6 columns">
-          <label for="vr_id">{{tr "Virtual Router ID"}}</label>
-          <input style="border-style: inset; background-color: lightgrey" type="text" name="vr_id" id="vr_id" disabled/>
-        </div>
-      </div>
       <div class="row">
         <div class="large-12 columns nicsContext">
           <div class="provision_network_selector">

src/sunstone/public/app/tabs/vrouters-tab/panels/info.js

@@ -150,6 +150,7 @@ define(function(require) {
 
         Sunstone.getDialog(CONFIRM_DIALOG_ID).setParams({
           //header :
+          headerTabId: TAB_ID,
           body : Locale.tr("This will detach the nic immediately"),
           //question :
           submit : function(){

src/sunstone/public/app/utils/common-actions.js

@@ -101,8 +101,8 @@ define(function(require) {
         var elementId = request.request.data.toString();
         Sunstone.getDataTable(that.tabId).deleteElement(elementId);
       },
-      elements: function() {
-        return Sunstone.getDataTable(that.tabId).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(that.tabId).elements(opts);
       },
       error: Notifier.onError,
       notify: true
@@ -117,8 +117,8 @@ define(function(require) {
       callback: function (req) {
         Sunstone.runAction(that.resourceStr + ".show", req.request.data[0]);
       },
-      elements: function() {
-        return Sunstone.getDataTable(that.tabId).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(that.tabId).elements(opts);
       },
       error: Notifier.onError,
       notify: true
@@ -133,8 +133,8 @@ define(function(require) {
       callback: function (req) {
         Sunstone.runAction(that.resourceStr + ".show", req.request.data[0][0]);
       },
-      elements: function() {
-        return Sunstone.getDataTable(that.tabId).elements();
+      elements: function(opts) {
+        return Sunstone.getDataTable(that.tabId).elements(opts);
       },
       error: Notifier.onError,
       notify: true

src/sunstone/public/app/utils/dialogs/clusters.js

@@ -34,6 +34,8 @@ define(function(require) {
    */
 
   var DIALOG_ID = require('./clusters/dialogId');
+  var DATASTORES_TAB_ID = require('tabs/datastores-tab/tabId');
+  var VNETS_TAB_ID = require('tabs/vnets-tab/tabId');
 
   /*
     CONSTRUCTOR
@@ -137,6 +139,12 @@ define(function(require) {
   }
 
   function _onShow(dialog) {
+    if(this.resource == "datastore"){
+      this.setNames( Sunstone.getDataTable(DATASTORES_TAB_ID).elements({names: true}) );
+    }else{
+      this.setNames( Sunstone.getDataTable(VNETS_TAB_ID).elements({names: true}) );
+    }
+
     this.clustersTable.refreshResourceTableSelect();
 
     if (this.originalClusterIds !== undefined && this.originalClusterIds.length > 0) {

src/sunstone/public/app/utils/dialogs/clusters/html.hbs

@@ -18,6 +18,7 @@
   <div class="row">
     <h3 class="subheader">{{tr "Clusters"}}</h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form data-abide novalidate id="{{dialogId}}Form">
     <div class="row">
       <div class="large-12 columns">

src/sunstone/public/app/utils/dialogs/confirm-with-select.js

@@ -24,6 +24,7 @@ define(function(require) {
   var Sunstone = require('sunstone');
   var Locale = require('utils/locale');
   var Notifier = require('utils/notifier');
+  var TemplateUtils = require('utils/template-utils');
 
   /*
     CONSTANTS
@@ -121,13 +122,13 @@ define(function(require) {
 
     $('#confirm_with_select_tip', dialog).html(tip);
 
-    var action = Sunstone.getAction(this.actionId);
-    var elements = action.elements();
-    if (elements) {
-      var str = this.actionId.split('.');
-      $(".confirm_action", dialog).html(str[1] + ' ' + str[0] + ': ' + elements.join(', '))
+    if(this.button.text) {
+      $('.subheader', dialog).html(this.button.text);
     }
 
+    var action = Sunstone.getAction(this.actionId);
+    this.setNames( action.elements({names: true}) );
+
     if (this.button.custom_select) {
       $('div#confirm_select', dialog).html(this.button.custom_select);
 

src/sunstone/public/app/utils/dialogs/confirm-with-select/html.hbs

@@ -18,12 +18,11 @@
   <div class="row">
     <h3 class="subheader">
       {{tr "Confirm"}}
-      <br>
-      &emsp;
-      <small class="confirm_action"></small>
     </h3>
+    <div class="confirm-resources-header"></div>
   </div>
   <form action="">
+    <br/>
     <div class="row">
       <div id="confirm_with_select_tip">{{tr "You need to select something."}}</div>
     </div>

src/sunstone/public/app/utils/dialogs/confirm.js

@@ -23,6 +23,7 @@ define(function(require) {
   var TemplateHTML = require('hbs!./confirm/html');
   var Sunstone = require('sunstone');
   var Locale = require('utils/locale');
+  var TemplateUtils = require('utils/template-utils');
 
   /*
     CONSTANTS
@@ -74,13 +75,13 @@ define(function(require) {
     $('#confirm_proceed', dialog).val(actionId);
     $('#confirm_tip', dialog).text(tip);
 
-    var action = Sunstone.getAction(actionId);
-    var elements = action.elements();
-    if (elements) {
-      var str = actionId.split('.');
-      $(".confirm_action", dialog).html(str[1] + ' ' + str[0] + ': ' + elements.join(', '))
+    if(button.text) {
+      $('.subheader', dialog).html(button.text);
     }
 
+    var action = Sunstone.getAction(actionId);
+    this.setNames( action.elements({names: true}) );
+
     return false;
   }
 });

src/sunstone/public/app/utils/dialogs/confirm/html.hbs

@@ -17,14 +17,13 @@
   <div class="row">
     <h3 class="subheader">
       {{tr "Confirm"}}
-      <br>
-      &emsp;
-      <small class="confirm_action"></small>
     </h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form action="">
+    <br/>
     <div id="confirm_tip">{{tr "You have to confirm this action."}}</div>
-    <br />
+    <br/>
     <div id="question">{{tr "Do you want to proceed?"}}</div>
     <br />
     <div class="form_buttons">

src/sunstone/public/app/utils/dialogs/dialog.js

@@ -15,7 +15,7 @@
 /* -------------------------------------------------------------------------- */
 
 define(function(require) {
-//  require('foundation.reveal');
+  var TemplateUtils = require('utils/template-utils');
 
   function BaseDialog() {
     return this;
@@ -26,6 +26,7 @@ define(function(require) {
     'show': _show,
     'hide': _hide,
     'reset': _reset,
+    'setNames': _setNames,
   };
 
   return BaseDialog;
@@ -70,4 +71,21 @@ define(function(require) {
     this.dialogElement = this.insert();
     return false;
   }
+
+  function _setNames(elements){
+    var html = "";
+
+    if (elements) {
+      html = '<h6 class="subheader">';
+
+      html += elements.map(function(element){
+        return (TemplateUtils.htmlEncode(element.id)+'&nbsp;'+
+                TemplateUtils.htmlEncode(element.name));
+        }).join(',&emsp;')
+
+      html += '</h6>';
+    }
+
+    $('.confirm-resources-header', this.dialogElement).html(html);
+  }
 })

src/sunstone/public/app/utils/dialogs/generic-confirm.js

@@ -60,6 +60,7 @@ define(function(require) {
   /**
    * @param {object} params.
    *        - params.header : Optional, html string
+   *        - params.headerTabId : Optional, tabId for the subheader resource ids
    *        - params.body : Optional, html string
    *        - params.question : Optional, html string
    *        - params.buttons : Optional, html string for the button.
@@ -136,6 +137,10 @@ define(function(require) {
       $(".form_buttons", context).html(html);
     }
 
+    if (this.params.headerTabId != undefined){
+      this.setNames( Sunstone.getDataTable(this.params.headerTabId).elements({names: true}) );
+    }
+
     return false;
   }
 });

src/sunstone/public/app/utils/dialogs/generic-confirm/html.hbs

@@ -21,6 +21,7 @@
       <br>
     </h3>
   </div>
+  <div class="confirm-resources-header"></div>
   <form id="{{dialogId}}Form">
     <div id="body">{{tr "You have to confirm this action."}}</div>
     <br/>

src/sunstone/public/app/utils/dialogs/overcommit.js

@@ -88,10 +88,13 @@ define(function(require) {
   }
 
   function _onShow(context) {
+    this.setNames( Sunstone.getDataTable(this.tabId).elements({names: true}) );
+
+/*
     $("#element_id", context).text(this.element.ID);
     $("#element_name", context).text(this.element.NAME);
     $("#resource_name", context).text(this.resourceName);
-
+*/
     WizardFields.fill(context, this.element.TEMPLATE);
 
     return false;
@@ -102,11 +105,13 @@ define(function(require) {
    *        - params.element : host or cluster element
    *        - params.action : sunstone action e.g. "Host.append_template"
    *        - params.resourceName : For the header. e.g. "Host"
+   *        - params.tabId: e.g. 'hosts-tab'
    */
   function _setParams(params) {
     this.element = params.element;
 
     this.action = params.action;
     this.resourceName = params.resourceName;
+    this.tabId = params.tabId;
   }
 });

src/sunstone/public/app/utils/dialogs/overcommit/html.hbs

@@ -18,9 +18,9 @@
   <div class="row">
     <div class="large-12 columns">
       <h3 class="subheader">{{tr "Host Overcommitment"}}</h3>
-      <h4 class="subheader"><span id="resource_name"/> <span id="element_id"/> <span id="element_name"/></h4>
     </div>
   </div>
+  <div class="confirm-resources-header"></div>
   <div class="reveal-body">
     <form id="{{dialogId}}Form" action="">
       <div class="row">

src/sunstone/public/app/utils/quotas/quota-widgets.js

@@ -23,7 +23,7 @@ define(function(require) {
   var ResourceSelect = require('utils/resource-select');
   var QuotaLimits = require('./quota-limits');
   var QuotaDefaults = require('utils/quotas/quota-defaults');
-
+  var TemplateUtils = require('utils/template-utils');
 
   // Constants
   var QUOTA_LIMIT_DEFAULT   = QuotaLimits.QUOTA_LIMIT_DEFAULT;
@@ -1200,6 +1200,22 @@ define(function(require) {
   }
 
   function _populateQuotasDialog(resource_info, default_quotas, context){
+    var action = $('div.form_buttons button',context).val();
+    var elements = Sunstone.getAction(action).elements({names: true});
+
+    if (elements) {
+      var html = '<h6 class="subheader">';
+
+      html += elements.map(function(element){
+        return (TemplateUtils.htmlEncode(element.id)+'&nbsp;'+
+                TemplateUtils.htmlEncode(element.name));
+        }).join(',&emsp;')
+
+      html += '</h6>';
+
+      $('.confirm-resources-header', context).html(html);
+    }
+
     var vms_quota = _vmsWidget(resource_info, default_quotas);
     var cpu_quota = _cpuWidget(resource_info, default_quotas);
     var memory_quota = _memoryWidget(resource_info, default_quotas);

src/sunstone/public/app/utils/tab-datatable.js

@@ -545,11 +545,13 @@ define(function(require) {
   }
 
   //returns an array of ids of selected elements in a dataTable
-  function _elements(forceDataTable) {
+  function _elements(opts) {
+    var that = this;
+
     var selected_nodes = [];
     if (this.dataTable) {
       var tab = this.dataTable.parents(".tab")
-      if (Sunstone.rightInfoVisible(tab) && !forceDataTable) {
+      if (Sunstone.rightInfoVisible(tab)) {
         selected_nodes.push(Sunstone.rightInfoResourceId(tab));
       } else {
         //Which rows of the datatable are checked?
@@ -559,6 +561,17 @@ define(function(require) {
         });
       }
     };
+
+    if (opts && opts.names){
+      var pairs = [];
+
+      $.each(selected_nodes, function(){
+        pairs.push({id: this, name: OpenNebula[that.resource].getName(this)});
+      });
+
+      return pairs;
+    }
+
     return selected_nodes;
   }
 

src/sunstone/public/scss/_layout.scss

@@ -98,4 +98,11 @@
   //color: #cfcfcf !important;
   cursor: default !important;
   opacity: 0.25;
+}
+
+// Dialogs
+
+.confirm-resources-header {
+  overflow-y: auto;
+  max-height: 6em;
 }