B #2394: Improve the dialog when attach nic or instanciated vm in network tab (#2397)

(cherry picked from commit c45d290c974733fce2c5f5f1790ba2ab1f6c9678)

src/sunstone/public/app/tabs/groups-tab/form-panels/create/wizard.hbs

@@ -17,7 +17,7 @@
   <div class="row collapse" id="default_vdc_warning">
     <div class="large-12 columns">
       <span class="radius warning label">
-        <i class="fas fa-warning"/> {{tr "New Groups are automatically added to the default VDC"}}
+        <i class="fas fa-exclamation-triangle"/> {{tr "New Groups are automatically added to the default VDC"}}
       </span>
     </div>
   </div>

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

@@ -72,7 +72,7 @@ define(function(require){
         read_only: true,
         fixed_ids: ids,
         starred_ids: updatingIds,
-        starred_icon: '<i class="fas fa-warning fa-fw"></i>'
+        starred_icon: '<i class="fas fa-exclamation-triangle fa-fw"></i>'
       }
     };
 

src/sunstone/public/app/tabs/secgroups-tab/panels/vms/html.hbs

@@ -16,7 +16,7 @@
 
 {{#unless allUpdated}}
 <div class="row">
-  <p>{{{tr "VMs marked with <i class='fas fa-warning'></i> are waiting to be updated with the latest rules:"}}}
+  <p>{{{tr "VMs marked with <i class='fas fa-exclamation-triangle'></i> are waiting to be updated with the latest rules:"}}}
 </div>
 {{/unless}}
 <div class="row">

src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab.js

@@ -20,13 +20,13 @@ define(function(require) {
    */
 
   var Config = require('sunstone-config');
-  var Locale = require('utils/locale');
-  var Tips = require('utils/tips');
+  var OpenNebulaNetwork = require('opennebula/network');
   var VNetsTable = require('tabs/vnets-tab/datatable');
   var SecgroupsTable = require('tabs/secgroups-tab/datatable');
   var WizardFields = require('utils/wizard-fields');
   var UniqueId = require('utils/unique-id');
   var CreateUtils = require('../utils');
+  var Notifier = require('utils/notifier');
 
   /*
     TEMPLATES
@@ -43,6 +43,7 @@ define(function(require) {
    */
 
   function NicTab(nicTabId) {
+    that = this;
     this.nicTabId = 'nicTab' + nicTabId + UniqueId.id();
 
     this.vnetsTable = new VNetsTable(this.nicTabId + 'Table', {'select': true});
@@ -50,7 +51,12 @@ define(function(require) {
     var secgroupSelectOptions = {
       'select': true,
       'selectOptions': {
-        "multiple_choice": true
+        "multiple_choice": true,
+        'unselect_callback': function(aData, options){
+          if (that.secGroups && that.secGroups.includes(aData[options.id_index])){
+            $("div[name='str_nic_tab_id'] table tbody tr td:contains('" + aData[options.name_index] + "')").click();
+          }
+        }
       }
     }
     this.secgroupsTable = new SecgroupsTable(this.nicTabId + 'SGTable', secgroupSelectOptions);
@@ -98,6 +104,18 @@ define(function(require) {
         'select_callback': function(aData, options) {
           // If the net is selected by Id, avoid overwriting it with name+uname
           if ($('#NETWORK_ID', context).val() != aData[options.id_index]) {
+            OpenNebulaNetwork.show({
+              data : {
+                id: aData[options.id_index]
+              },
+              timeout: true,
+              success: function (request, vn){
+                that.secGroups = vn["VNET"]["TEMPLATE"]["SECURITY_GROUPS"].split(",");
+                that.secgroupsTable.selectResourceTableSelect(
+                  { ids : that.secGroups });
+              },
+              error: Notifier.onError
+            });
             $('#NETWORK_ID', context).val("");
             $('#NETWORK', context).val(aData[options.name_index]);
             $('#NETWORK_UNAME', context).val(aData[options.uname_index]);
@@ -106,10 +124,10 @@ define(function(require) {
         }
       }
     });
-    that.vnetsTable.refreshResourceTableSelect();
 
     that.secgroupsTable.initialize();
     that.secgroupsTable.refreshResourceTableSelect();
+    that.vnetsTable.refreshResourceTableSelect();
 
     $("input.pci-type-nic", context).on("change", function(){
       var tbody = $(".pci-row tbody", context);

src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab/html.hbs

@@ -227,7 +227,10 @@
   <fieldset>
     <legend>{{tr "Security Groups"}}</legend>
     <div name="str_nic_tab_id" str_nic_tab_id="{{nicTabId}}">
-      {{{secgroupsTableSelectHTML}}}
+      {{{secgroupsTableSelectHTML}}}<br>
+      <span class="radius warning label">
+        <i class="fas fa-exclamation-triangle"/> {{tr "Security Groups belonging to the selected Virtual Network will be applied and cannot be unselected"}}
+      </span>
     </div>
   </fieldset>
   {{! Hidden inputs for white/black ports and icmp drop. These inputs are

src/sunstone/public/app/tabs/vnets-tab/form-panels/create/wizard.hbs

@@ -257,7 +257,7 @@
       <div class="row" id="default_sg_warning">
         <div class="large-12 columns">
           <span class="radius warning label">
-            <i class="fas fa-warning"/> {{tr "The default Security Group 0 is automatically added to new Virtual Networks"}}
+            <i class="fas fa-exclamation-triangle"/> {{tr "The default Security Group 0 is automatically added to new Virtual Networks"}}
           </span>
         </div>
       </div>

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

@@ -895,7 +895,7 @@ define(function(require) {
 
           $('#selected_ids_row_' + that.dataTableId + ' span[row_id="' + row_id + '"]', section).remove();
 
-          that.selectOptions.unselect_callback();
+          that.selectOptions.unselect_callback(aData, that.selectOptions);
         } else {
           ids[row_id] = true;