F #4089: Firecracker vm actions in Sunstone (#4704)

Signed-off-by: Jorge Lobo <jlobo@opennebula.systems>

src/sunstone/public/app/opennebula/vm.js

@@ -823,8 +823,6 @@ define(function(require) {
   // Return a dropdown with all the
   function ipsDropdown(element, divider) {
     var ipsStr = this.ipsStr(element,divider,groupByIpsDropdown);
-    console.log(ipsStr);
-
     const ips = ipsStr.split('<br>');
     if ((ips.length < 2) && (!~ipsStr.indexOf("li"))) return ipsStr;
     var html = '<ul class="dropdown menu ips-dropdown" data-dropdown-menu><li><a>Show IPs</a><ul class="menu" style="max-height: 25em; overflow: scroll;">';

src/sunstone/public/app/sunstone.js

@@ -863,6 +863,7 @@ define(function(require) {
           SunstoneCfg["tabs"][tabName]["panelInstances"][panelName] = panelInstance;
           templatePanelsParams.push({
             "panelName": panelName,
+            "class": panelInstance.class,
             "icon": panelInstance.icon,
             "title": panelInstance.title,
             "html": panelInstance.html(),

src/sunstone/public/app/sunstone/buttons.hbs

@@ -56,7 +56,7 @@
     <ul id='{{customId}}lock_buttons' class='lock-sunstone-info only-sunstone-info only-sunstone-list dropdown-pane menu vertical' data-dropdown></ul>
 
 
-    <button type='button' data-toggle='{{customId}}vmspause_buttons' class='only-sunstone-info only-sunstone-list top_button  button secondary dropdown'>
+    <button type='button' data-toggle='{{customId}}vmspause_buttons' class='not_firecracker only-sunstone-info only-sunstone-list top_button  button secondary dropdown'>
       <i class='fas fa-pause'/>
     </button>
     <ul id='{{customId}}vmspause_buttons' class='only-sunstone-info only-sunstone-list dropdown-pane menu vertical' data-dropdown></ul>
@@ -66,7 +66,7 @@
     </button>
     <ul id='{{customId}}vmsstop_buttons' class='only-sunstone-info only-sunstone-list dropdown-pane menu vertical' data-dropdown></ul>
 
-    <button type='button' data-toggle='{{customId}}vmsrepeat_buttons' class='only-sunstone-info only-sunstone-list top_button  button secondary dropdown'>
+    <button type='button' data-toggle='{{customId}}vmsrepeat_buttons' class='not_firecracker only-sunstone-info only-sunstone-list top_button  button secondary dropdown'>
       <i class='fas fa-redo-alt'/>
     </button>
     <ul id='{{customId}}vmsrepeat_buttons' class='only-sunstone-info only-sunstone-list dropdown-pane menu vertical' data-dropdown></ul>

src/sunstone/public/app/sunstone/panels.hbs

@@ -17,7 +17,7 @@
 <div id="{{containerId}}">
   <ul id="{{containerId}}Tabs" class="tabs sunstone-info-tabs text-center" data-tabs>
     {{#each panels}}
-    <li class="tabs-title {{#if active}}is-active{{/if}}">
+    <li class="{{class}} tabs-title {{#if active}}is-active{{/if}}">
       <a href="#{{panelName}}">
         {{#if icon}}
           <i class="fas {{icon}}"></i>

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

@@ -46,6 +46,7 @@ define(function(require) {
       type: "single",
       call: OpenNebulaVM.show,
       callback: function(request, response) {
+        $(".not_firecracker").removeClass("hide");
         if (Config.isTabEnabled("provision-tab")) {
           $(".provision_refresh_info", ".provision_list_vms").click();
         } else {
@@ -54,6 +55,13 @@ define(function(require) {
             Sunstone.insertPanels(TAB_ID, response);
           }
         }
+        if(response && 
+          response.VM && 
+          response.VM.USER_TEMPLATE && 
+          response.VM.USER_TEMPLATE.HYPERVISOR &&
+          response.VM.USER_TEMPLATE.HYPERVISOR === "firecracker"){
+            $(".not_firecracker").addClass("hide");
+          }
       },
       error: Notifier.onError
     },

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

@@ -76,7 +76,7 @@ define(function(require) {
       type: "action",
       text: Locale.tr("Migrate") + ' <span class="label secondary radius">' + Locale.tr("live") + '</span>',
       layout: "vmsmigration_buttons",
-      custom_classes : "state-dependent"
+      custom_classes : "state-dependent not_firecracker"
     },
     "VM.hold" : {
       type: "action",

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

@@ -84,7 +84,6 @@ define(function(require) {
     if (memoryCost == undefined){
       memoryCost = Config.onedConf.DEFAULT_COST.MEMORY_COST;
     }
-    console.log("element ->",this.element);
     return TemplateInfo({
       'element': this.element,
       'resizeStateEnabled': resizeStateEnabled,

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

@@ -42,6 +42,22 @@ define(function(require) {
   var RESOURCE = "VM";
   var XML_ROOT = "VM";
 
+  var isFirecracker = function(context){
+    return context && 
+    context.element && 
+    context.element.USER_TEMPLATE && 
+    context.element.USER_TEMPLATE.HYPERVISOR && 
+    context.element.USER_TEMPLATE.HYPERVISOR === "firecracker"
+  }
+
+  var validateState = function(context, state){
+    var rtn = false;
+    if(context && state && context.element && context.element.STATE && context.element.LCM_STATE){
+      rtn = StateActions.enabledStateAction(state, context.element.STATE, context.element.LCM_STATE)
+    }
+    return rtn;
+  }
+
   /*
     CONSTRUCTOR
    */
@@ -50,7 +66,6 @@ define(function(require) {
     this.panelId = PANEL_ID;
     this.title = Locale.tr("Network");
     this.icon = "fa-globe";
-
     this.element = info[XML_ROOT];
 
     return this;
@@ -62,7 +77,6 @@ define(function(require) {
   Panel.prototype.onShow = _onShow;
   Panel.prototype.getState = _getState;
   Panel.prototype.setState = _setState;
-
   return Panel;
 
   /*
@@ -86,18 +100,17 @@ define(function(require) {
                   <th>" + Locale.tr("IPv6 ULA") + "</th>\
                   <th>" + Locale.tr("IPv6 Global") + "</th>\
                   <th colspan=\"\">" + Locale.tr("Actions") + "</th>\
-                  <th>"                 ;
+                  <th>";
 
     if (Config.isTabActionEnabled("vms-tab", "VM.attachnic")) {
-      if (StateActions.enabledStateAction("VM.attachnic",
+      var renderButton = function(disable){
-            that.element.STATE,
+        var renderDisable = disable? "disabled='disabled'" : "";
-            that.element.LCM_STATE) &&
+        return "<button id='attach_nic' class='button small success right radius' "+renderDisable+">" + Locale.tr("Attach nic") + "</button>";
-          OpenNebulaVM.isNICAttachSupported(that.element)) {
+      }
-        html += "\
+      if (validateState(that,"VM.attachnic") && OpenNebulaVM.isNICAttachSupported(that.element)) {
-             <button id=\"attach_nic\" class=\"button small success right radius\" >" + Locale.tr("Attach nic") + "</button>";
+        html += renderButton(isFirecracker(that))
       } else {
-        html += "\
+        html += renderButton(!isFirecracker(that));
-             <button id=\"attach_nic\" class=\"button small success right radius\" disabled=\"disabled\">" + Locale.tr("Attach nic") + "</button>";
       }
     }
 
@@ -290,14 +303,16 @@ define(function(require) {
           ) {
             actions = Locale.tr("attach/detach in progress");
           } else {
-            if ( 
+
-              Config.isTabActionEnabled("vms-tab", "VM.detachnic") &&
+            if(Config.isTabActionEnabled("vms-tab", "VM.detachnic")){
-              StateActions.enabledStateAction("VM.detachnic", that.element.STATE, that.element.LCM_STATE)
-            ) {
               var icon = $("<i/>",{class:"fas fa-times"});
-              var anchorAttributes = {class: "detachnic"}
+              var anchorAttributes = {class: "detachnic", href: "VM.detachnic"};
-              var anchor = $("<a/>",anchorAttributes).append(icon);
+              var anchor = $("<a/>",anchorAttributes).append(icon); //"<a href=\"VM.detachnic\" class=\"detachnic\" ><i class=\"fas fa-times\"/></a>";
-              actions += anchor.get(0).outerHTML; //"<a href=\"VM.detachnic\" class=\"detachnic PEPE\" ><i class=\"fas fa-times\"/></a>";
+              if (validateState(that,"VM.attachnic") && OpenNebulaVM.isNICAttachSupported(that.element)) {
+                html += isFirecracker(that) && anchor.get(0).outerHTML;
+              } else {
+                html += !isFirecracker(that) && anchor.get(0).outerHTML;
+              }
             }
           }
         }

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

@@ -46,6 +46,7 @@ define(function(require) {
     this.panelId = PANEL_ID;
     this.title = Locale.tr("Snapshots");
     this.icon = "fa-laptop";
+    this.class = "not_firecracker";
 
     this.element = info[XML_ROOT];
 

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

@@ -49,6 +49,22 @@ define(function(require) {
   var RESOURCE = "VM"
   var XML_ROOT = "VM"
 
+  var isFirecracker = function(context){
+    return context && 
+    context.element && 
+    context.element.USER_TEMPLATE && 
+    context.element.USER_TEMPLATE.HYPERVISOR && 
+    context.element.USER_TEMPLATE.HYPERVISOR === "firecracker"
+  }
+
+  var validateState = function(context, state){
+    var rtn = false;
+    if(context && state && context.element && context.element.STATE && context.element.LCM_STATE){
+      rtn = StateActions.enabledStateAction(state, context.element.STATE, context.element.LCM_STATE)
+    }
+    return rtn;
+  }
+
   /*
     CONSTRUCTOR
    */
@@ -255,7 +271,6 @@ define(function(require) {
 
     var disk_dt_data = [];
     if (disks.length) {
-
       for (var i = 0; i < disks.length; i++) {
         var disk = disks[i];
 
@@ -285,21 +300,23 @@ define(function(require) {
         } else {
           actions = '';
 
-
           if (Config.isTabActionEnabled("vms-tab", "VM.disk_saveas")) {
             // Check if it's volatile
-            if (disk.IMAGE_ID &&
+            if (disk.IMAGE_ID && validateState(that,"VM.disk_saveas")) {
-                 StateActions.enabledStateAction("VM.disk_saveas", that.element.STATE, that.element.LCM_STATE)) {
+                  if(Array.isArray(that.element.HISTORY_RECORDS.HISTORY)){
-              if(Array.isArray(that.element.HISTORY_RECORDS.HISTORY)){
+                    var historyLenght = that.element.HISTORY_RECORDS.HISTORY.length - 1;
-                var historyLenght = that.element.HISTORY_RECORDS.HISTORY.length - 1;
+                    if(that.element.LCM_STATE != "3" || that.element.HISTORY_RECORDS.HISTORY[historyLenght].VM_MAD != "vcenter"){
-                if(that.element.LCM_STATE != "3" || that.element.HISTORY_RECORDS.HISTORY[historyLenght].VM_MAD != "vcenter"){
+                      var render = '<a href="VM.disk_saveas" class="disk_saveas nowrap" >\
-                  actions += '<a href="VM.disk_saveas" class="disk_saveas nowrap" >\
+                        <i class="fas fa-save fa-fw" title="Saveas"></i>\
-              <i class="fas fa-save fa-fw" title="Saveas"></i></a> &emsp;';
+                      </a> &emsp;';
-                }
+                      actions += !isFirecracker(that)? render : "";
-              } else {
+                  }
-                if(that.element.LCM_STATE != "3" || that.element.HISTORY_RECORDS.HISTORY.VM_MAD != "vcenter"){
+                } else {
-                  actions += '<a href="VM.disk_saveas" class="disk_saveas nowrap" >\
+                  if(that.element.LCM_STATE != "3" || that.element.HISTORY_RECORDS.HISTORY.VM_MAD != "vcenter"){
-              <i class="fas fa-save fa-fw" title="Saveas"></i></a> &emsp;';
+                    var render ='<a href="VM.disk_saveas" class="disk_saveas nowrap" >\
+                      <i class="fas fa-save fa-fw" title="Saveas"></i>\
+                    </a> &emsp;';
+                    actions += !isFirecracker(that)? render : "";
                 }
               }
               //+ Locale.tr("Save as") + ';'
@@ -308,23 +325,29 @@ define(function(require) {
 
 
           if (Config.isTabActionEnabled("vms-tab", "VM.detachdisk")) {
-            if (StateActions.enabledStateAction("VM.detachdisk", that.element.STATE, that.element.LCM_STATE) && !disk.CONTEXT) {
+            var vmState = validateState(that,"VM.detachdisk");
-              actions += ('<a href="VM.detachdisk" class="detachdisk nowrap" >\
+            var render = (
-              <i class="fas fa-times fa-fw" title="Detach"></i></a> &emsp;');// + Locale.tr("Detach") +
+              '<a href="VM.detachdisk" class="detachdisk nowrap" >\
-              
+                  <i class="fas fa-times fa-fw" title="Detach"></i>\
+               </a> &emsp;'
+            );
+            if(isFirecracker(that) && !vmState){
+              actions += render;
+            }
+            if(!isFirecracker(that) && vmState && !disk.CONTEXT){
+              actions += render;
             }
           }
 
           if (Config.isTabActionEnabled("vms-tab", "VM.disk_snapshot_create")) {
-            if (StateActions.enabledStateAction("VM.disk_snapshot_create", that.element.STATE, that.element.LCM_STATE) && disk.IMAGE_ID) {
+            if (validateState(that,"VM.disk_snapshot_create") && disk.IMAGE_ID) {
               actions += ('<a href="VM.disk_snapshot_create" class="disk_snapshot_create nowrap" >\
               <i class="fas fa-camera fa-fw" title="Snapshot"></i></a> &emsp;');//+ Locale.tr("Snapshot") +
-              
             }
           }
           
           if (Config.isTabActionEnabled("vms-tab", "VM.disk_resize")) {
-            if (StateActions.enabledStateAction("VM.disk_resize", that.element.STATE, that.element.LCM_STATE) && !disk.CONTEXT) {
+            if (validateState(that,"VM.disk_resize") && !disk.CONTEXT) {
               if(Array.isArray(that.element.HISTORY_RECORDS.HISTORY)){
                 var historyLenght = that.element.HISTORY_RECORDS.HISTORY.length - 1;
                 if(that.element.LCM_STATE != "3" || that.element.HISTORY_RECORDS.HISTORY[historyLenght].VM_MAD != "vcenter"){
@@ -450,7 +473,9 @@ define(function(require) {
     }
 
     if (Config.isTabActionEnabled("vms-tab", "VM.attachdisk")) {
-      if (!StateActions.enabledStateAction("VM.attachdisk", that.element.STATE, that.element.LCM_STATE)){
+      var vmState = validateState(that,"VM.attachdisk");
+
+      if((isFirecracker(that) && vmState) || (!isFirecracker(that) && !vmState)){
         $('#attach_disk', context).attr("disabled", "disabled");
       }
 
@@ -741,6 +766,11 @@ define(function(require) {
 
   function _onShow(context) {
     var that = this;
+    var vmState = validateState(that,"VM.attachdisk");
+    if((isFirecracker(that) && vmState)){
+      $('#attach_disk', context).attr("disabled", "disabled");
+    }
+
     if (OpenNebulaVM.isDiskGraphsSupported(that.element)) {
       OpenNebulaVM.monitor({
         data: {

src/sunstone/public/app/tabs/vms-tab/panels/storage/disk-details.hbs

@@ -18,7 +18,7 @@
   <div class="row collapse">
     <div class="large-12 columns" style="padding-bottom: 1em;">
       {{#isTabActionEnabled "vms-tab" "VM.disk_saveas"}}
-      <button class="disk_snapshot_saveas button secondary small radius" disabled="disabled">
+      <button class="disk_snapshot_saveas button secondary small radius not_firecracker" disabled="disabled">
         <span class="fas fa-save fa-fw"></span>{{tr "Save as"}}
       </button>
       {{/isTabActionEnabled}}

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

@@ -29,7 +29,7 @@
             <th>{{tr "Actions"}}
               {{#isTabActionEnabled "vms-tab" "VM.attachdisk"}}
               <span class="right">
-                <button id="attach_disk" class="button small success right radius">
+                <button id="attach_disk" class="attach_disk button small success right radius">
                   {{tr "Attach disk"}}
                 </button>
               </span>