From a1e6cd3fcfeb31f63709a3871f65563710df950f Mon Sep 17 00:00:00 2001
From: Frederick Borges <fborges@opennebula.io>
Date: Fri, 7 May 2021 10:33:22 +0200
Subject: [PATCH] F #5363: Allow remote connections on Cloud View (master)
 (#1190)

Signed-off-by: Frederick Borges <fborges@opennebula.io>
---
 .../app/tabs/provision-tab/vms/info.hbs       |  73 ++++++++---
 .../public/app/tabs/provision-tab/vms/list.js | 116 +++++++++++-------
 .../public/app/tabs/vms-tab/buttons.js        |  16 +--
 .../images/remote_console/guacamole-alt.png   | Bin 0 -> 1608 bytes
 .../images/remote_console/virtviewer.png      | Bin 0 -> 6982 bytes
 .../public/images/remote_console/windows.png  | Bin 0 -> 2712 bytes
 src/sunstone/public/scss/app.scss             |  36 +++++-
 7 files changed, 170 insertions(+), 71 deletions(-)
 create mode 100644 src/sunstone/public/images/remote_console/guacamole-alt.png
 create mode 100644 src/sunstone/public/images/remote_console/virtviewer.png
 create mode 100644 src/sunstone/public/images/remote_console/windows.png

diff --git a/src/sunstone/public/app/tabs/provision-tab/vms/info.hbs b/src/sunstone/public/app/tabs/provision-tab/vms/info.hbs
index bdfc686b25..d93a232d2c 100644
--- a/src/sunstone/public/app/tabs/provision-tab/vms/info.hbs
+++ b/src/sunstone/public/app/tabs/provision-tab/vms/info.hbs
@@ -35,22 +35,63 @@
         </li>
         <li class="provision-bullet-item-buttons">
           <ul class="menu provision_action_icons without-link">
-            <li>
-              <button href"#" title="{{tr "Open a remote console in a new window"}}" class="button radius provision_vnc_button tip-top">
-                <i class="fas fa-fw fa-lg fa-desktop"/></button>
-            </li>
-            <li>
-              <button href"#" title="{{tr "Download a file with RDP connection"}}" class="button radius provision_rdp_button tip-top">
-                <i class="fab fa-fw fa-lg fa-windows"/></button>
-            </li>
-            <li>
-              <button href"#" title="{{tr "Download a file with virt-viewer connection"}}" class="button radius provision_wfile_button tip-top">
-                <i class="fas fa-fw fa-lg fa-external-link-square-alt"/></button>
-            </li>
-            <li>
-              <button title="{{tr "You have to boot the Virtual Machine first"}}" class="button radius white provision_vnc_button_disabled disabled tip-top" disabled>
-                <i class="fas fa-fw fa-lg fa-desktop"/></button>
-            </li>
+
+            <ul class="dropdown-menu-css">
+              <li style="margin-bottom: 0;">
+                <div>
+                  <button href="#" class="button radius provision_remote_button tip-top">
+                    <i class="fas fa-fw fa-lg fa-desktop"/>
+                  </button>
+                </div>
+              </li>
+              <li class="menu-hide" style="margin: 0; width: max-content;">
+                <ul>
+                  <!-- noVNC button -->
+                  <li class="display-list margin-tlr-1">
+                    <a href="#" class="provision_vnc_button">
+                      <div class="remote-logo-dropdown"><img src="images/remote_console/noVNC.png"/></div> VNC
+                    </a>
+                  </li>
+                  <!-- SPICE button -->
+                  <li class="display-list margin-tlr-1">
+                    <a href="#" class="provision_spice_button">
+                      <div class="remote-logo-dropdown"><img src="images/remote_console/spice.png"/></div> SPICE
+                    </a>
+                  </li>
+                  <!-- RDP button -->
+                  <li class="display-list margin-tlr-1">
+                    <a href="#" class="provision_rdp_button">
+                      <div class="remote-logo-dropdown"><img src="images/remote_console/windows.png"/></div> RDP
+                    </a>
+                  </li>
+                  <!-- Virt Viewer File button -->
+                  <li class="display-list margin-tlr-1">
+                    <a href="#" class="provision_wfile_button">
+                      <div class="remote-logo-dropdown"><img src="images/remote_console/virtviewer.png"/></div> Virt Viewer
+                    </a>
+                  </li>
+                  <!-- Guacamole VNC button -->
+                  <li class="display-list margin-tlr-1">
+                    <a href="#" class="provision_guac_vnc_button">
+                      <div class="remote-logo-dropdown"><img src="images/remote_console/guacamole-alt.png"/></div> VNC
+                    </a>
+                  </li>
+                  <!-- Guacamole RDP button -->
+                  <li class="display-list margin-tlr-1">
+                    <a href="#" class="provision_guac_rdp_button">
+                      <div class="remote-logo-dropdown"><img src="images/remote_console/guacamole-alt.png"/></div> RDP
+                    </a>
+                  </li>
+                  <!-- Guacamole SSH button -->
+                  <li class="display-list margin-tlr-1">
+                    <a href="#" class="provision_guac_ssh_button">
+                      <div class="remote-logo-dropdown"><img src="images/remote_console/guacamole-alt.png"/></div> SSH
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+
             {{#isTabActionEnabled "provision-tab" "VM.save_as_template"}}
             <li>
               <button href"#" title="{{tr "The disks of the Virtual Machine will be saved in a new Image"}}" class="button radius success provision_save_as_template_confirm_button tip-top">
diff --git a/src/sunstone/public/app/tabs/provision-tab/vms/list.js b/src/sunstone/public/app/tabs/provision-tab/vms/list.js
index c44a5f15a9..045ff419ca 100644
--- a/src/sunstone/public/app/tabs/provision-tab/vms/list.js
+++ b/src/sunstone/public/app/tabs/provision-tab/vms/list.js
@@ -327,13 +327,38 @@ define(function(require) {
           $(".provision_rdp_button", context).toggle(Boolean(OpenNebulaVM.isConnectionSupported(data, 'rdp')));
           $(".provision_wfile_button", context).toggle(Boolean(OpenNebulaVM.isWFileSupported(data)));
 
-          if (OpenNebulaVM.isVNCSupported(data) ||
-             OpenNebulaVM.isSPICESupported(data)) {
-            $(".provision_vnc_button", context).show();
-            $(".provision_vnc_button_disabled", context).hide();
+          if (OpenNebulaVM.isVNCSupported(data) && !is_fireedge_configured) {
+            $(".provision_vnc_button", context).parent().show();
           }else{
-            $(".provision_vnc_button", context).hide();
-            $(".provision_vnc_button_disabled", context).show();
+            $(".provision_vnc_button", context).parent().hide();
+          }
+
+          if (OpenNebulaVM.isSPICESupported(data)) {
+            $(".provision_spice_button", context).parent().show();
+          }else{
+            $(".provision_spice_button", context).parent().hide();
+          }
+
+          if (OpenNebulaVM.isVMRCSupported(data)) {
+            $(".provision_vmrc_button", context).parent().show();
+          }else{
+            $(".provision_vmrc_button", context).parent().hide();
+          }
+
+          if (OpenNebulaVM.isWFileSupported(data)) {
+            $(".provision_wfile_button", context).parent().show();
+          }else{
+            $(".provision_wfile_button", context).parent().hide();
+          }
+
+          if (OpenNebulaVM.isVNCSupported(data) && is_fireedge_configured) {
+            $(".provision_guac_vnc_button", context).parent().show();
+            $(".provision_guac_rdp_button", context).parent().show();
+            $(".provision_guac_ssh_button", context).parent().show();
+          }else{
+            $(".provision_guac_vnc_button", context).parent().hide();
+            $(".provision_guac_rdp_button", context).parent().hide();
+            $(".provision_guac_ssh_button", context).parent().hide();
           }
 
           $(".provision_info_vm", context).attr("vm_id", data.ID);
@@ -782,51 +807,50 @@ define(function(require) {
     });
 
     context.on("click", ".provision_vnc_button", function(){
-      var button = $(this);
-      button.attr("disabled", "disabled");
+      var vm_id = $(".provision_info_vm", context).attr("vm_id");
+      var vm_data = $(".provision_info_vm", context).data("vm");
+      
+      Sunstone.runAction("VM.startvnc_action", vm_data);
+      return false;
+    });
+
+    context.on("click", ".provision_spice_button", function(){
       var vm_id = $(".provision_info_vm", context).attr("vm_id");
       var vm_data = $(".provision_info_vm", context).data("vm");
 
-      OpenNebulaVM.vnc({
-        data : {
-          id: vm_id
-        },
-        success: function(_, response){
-          if (OpenNebulaVM.isVNCSupported(vm_data)) {
-            var link = RemoteActions.getLink(response,{
-              port: Config.vncProxyPort,
-              connnection_type: 'vnc',
-              extra_params: [
-                'port=' + Config.vncProxyPort,
-                'encrypt=' + Config.vncWSS,
-                !Config.requestVNCPassword && 'password=' + response.password
-              ]
-            });
-            // Open in a new tab the noVNC connection
-            window.open(link);
+      Sunstone.runAction("VM.startspice_action", vm_data);
+      return false;
+    });
 
-            button.removeAttr("disabled");
-          } else if (OpenNebulaVM.isSPICESupported(vm_data)) {
-            var link = RemoteActions.getLink(response, {
-              port: Config.vncProxyPort, 
-              connnection_type: 'spice',
-              extra_params: [
-                'password=' + response.password,
-                'encrypt=' + config.user_config.vnc_wss,
-              ]
-            });
-            // Open in a new tab the SPICE connection
-            window.open(link);
-          } else {
-            Notifier.notifyError("The remote console is not enabled for this VM");
-          }
-        },
-        error: function(request, response){
-          Notifier.onError(request, response);
-          button.removeAttr("disabled");
-        }
-      });
+    context.on("click", ".provision_vmrc_button", function(){
+      var vm_id = $(".provision_info_vm", context).attr("vm_id");
+      var vm_data = $(".provision_info_vm", context).data("vm");
+      var vm_name = OpenNebulaVM.getName(vm_data);
+      Sunstone.runAction("VM.startvmrc_action", vm_data, vm_name);
+      return false;
+    });
 
+    context.on("click", ".provision_guac_vnc_button", function(){
+      var vm_id = $(".provision_info_vm", context).attr("vm_id");
+      var vm_data = $(".provision_info_vm", context).data("vm");
+
+      Sunstone.runAction("VM.startguac_action", vm_data, 'vnc');
+      return false;
+    });
+
+    context.on("click", ".provision_guac_ssh_button", function(){
+      var vm_id = $(".provision_info_vm", context).attr("vm_id");
+      var vm_data = $(".provision_info_vm", context).data("vm");
+
+      Sunstone.runAction("VM.startguac_action", vm_data, 'ssh');
+      return false;
+    });
+
+    context.on("click", ".provision_guac_rdp_button", function(){
+      var vm_id = $(".provision_info_vm", context).attr("vm_id");
+      var vm_data = $(".provision_info_vm", context).data("vm");
+
+      Sunstone.runAction("VM.startguac_action", vm_data, 'rdp');
       return false;
     });
 
diff --git a/src/sunstone/public/app/tabs/vms-tab/buttons.js b/src/sunstone/public/app/tabs/vms-tab/buttons.js
index 3795371406..228f515c90 100644
--- a/src/sunstone/public/app/tabs/vms-tab/buttons.js
+++ b/src/sunstone/public/app/tabs/vms-tab/buttons.js
@@ -202,49 +202,49 @@ define(function(require) {
     "VM.startvnc" : {
       type: "action",
       id: "vm_vnc_action",
-      text: Locale.tr("VNC"),
+      text: '<div class="remote-logo-dropdown"><img src="images/remote_console/noVNC.png"/></div>' + Locale.tr("VNC"),
       layout: "vmsremote_buttons",
       custom_classes: "only-sunstone-info vnc-sunstone-info vnc-button"
     },
     "VM.startvmrc" : {
       type: "action",
-      text: Locale.tr("VMRC"),
+      text: '<div class="remote-logo-dropdown"><img src="images/remote_console/vmrc.png"/></div>' + Locale.tr("VMRC"),
       layout: "vmsremote_buttons",
       custom_classes: "only-sunstone-info vnc-sunstone-info vmrc-button"
     },
     "VM.startspice" : {
       type: "action",
-      text: Locale.tr("SPICE"),
+      text: '<div class="remote-logo-dropdown"><img src="images/remote_console/spice.png"/></div>' + Locale.tr("SPICE"),
       layout: "vmsremote_buttons",
       custom_classes: "only-sunstone-info spice-sunstone-info"
     },
     "VM.save_virt_viewer" : {
       type: "action",
-      text: Locale.tr("VIRT-VIEWER FILE"),
+      text: '<div class="remote-logo-dropdown"><img src="images/remote_console/virtviewer.png"/></div>' + Locale.tr("Virt Viewer"),
       layout: "vmsremote_buttons",
       custom_classes: "only-sunstone-info vv-sunstone-info"
     },
     "VM.guac_vnc" : {
       type: "action",
-      text: Locale.tr("GUAC VNC"),
+      text: '<div class="remote-logo-dropdown"><img src="images/remote_console/guacamole-alt.png"/></div>' + Locale.tr("VNC"),
       layout: "vmsremote_buttons",
       custom_classes: "only-sunstone-info vnc-sunstone-info guac-button"
     },
     "VM.guac_ssh" : {
       type: "action",
-      text: Locale.tr("GUAC SSH"),
+      text: '<div class="remote-logo-dropdown"><img src="images/remote_console/guacamole-alt.png"/></div>' + Locale.tr("SSH"),
       layout: "vmsremote_buttons",
       custom_classes: "only-sunstone-info ssh-sunstone-info guac-button"
     },
     "VM.guac_rdp" : {
       type: "action",
-      text: Locale.tr("GUAC RDP"),
+      text: '<div class="remote-logo-dropdown"><img src="images/remote_console/guacamole-alt.png"/></div>' + Locale.tr("RDP"),
       layout: "vmsremote_buttons",
       custom_classes: "only-sunstone-info rdp-sunstone-info guac-button"
     },
     "VM.save_rdp" : {
       type: "action",
-      text: Locale.tr("RDP Client"),
+      text: '<div class="remote-logo-dropdown"><img src="images/remote_console/windows.png"/></div>' + Locale.tr("RDP Client"),
       layout: "vmsremote_buttons",
       custom_classes: "only-sunstone-info rdp-sunstone-info"
     },
diff --git a/src/sunstone/public/images/remote_console/guacamole-alt.png b/src/sunstone/public/images/remote_console/guacamole-alt.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b87b09c763e8f8d940350afb4f71bbb24a59f68
GIT binary patch
literal 1608
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
GLSTZ?yz%k?

literal 0
HcmV?d00001

diff --git a/src/sunstone/public/images/remote_console/virtviewer.png b/src/sunstone/public/images/remote_console/virtviewer.png
new file mode 100644
index 0000000000000000000000000000000000000000..44b36e02784ab556a867fd9add853ff488533660
GIT binary patch
literal 6982
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
Hehd5`;)#}0

literal 0
HcmV?d00001

diff --git a/src/sunstone/public/images/remote_console/windows.png b/src/sunstone/public/images/remote_console/windows.png
new file mode 100644
index 0000000000000000000000000000000000000000..6918a2daf69971a2c01cdf5cee919756e1cba25c
GIT binary patch
literal 2712
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
XXbWo14=$fHPQb*-+_37V%b))MN%R3i

literal 0
HcmV?d00001

diff --git a/src/sunstone/public/scss/app.scss b/src/sunstone/public/scss/app.scss
index 794b98e1c4..3254ab131e 100644
--- a/src/sunstone/public/scss/app.scss
+++ b/src/sunstone/public/scss/app.scss
@@ -298,6 +298,20 @@ ul.dropdown-menu-css{
     & ul{
       margin: 0;
       list-style: none;
+
+      & > li{
+        display: inline-block;
+      }
+
+      & > li.display-list{
+        display: list-item;
+      }
+
+      & > li.margin-tlr-1{
+        margin-top: 1em;
+        margin-left: 1em;
+        margin-right: 1em;
+      }
     }
   }
 
@@ -320,4 +334,24 @@ ul.dropdown-menu-css{
   td{
     word-break: normal;
   }
-}
\ No newline at end of file
+}
+
+// Styles for remote consoles buttons
+.remote-logo-dropdown {
+  border-radius: 50%;
+  padding: 0.2em;
+  height: 2em;
+  width: 2em;
+  display: inline-block;
+  margin-right: 0.5em;
+  border-color: black;
+  border-width: thin;
+  border-style: solid;
+
+  img{
+      max-width: 100%;
+      height: auto;
+      display: inline-block;
+      vertical-align: middle;
+  }
+}