feature #3748: Add VNC dialog

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

@@ -375,7 +375,7 @@ define(function(require) {
       var action = OpenNebulaHelper.action(method);
       var request = OpenNebulaHelper.request(resource, method, id);
       $.ajax({
-        url: "vm/" + id + "/" + method,
+        url: "vm/" + id + "/startvnc",
         type: "POST",
         dataType: "json",
         success: function(response) {
@@ -387,9 +387,6 @@ define(function(require) {
         }
       });
     },
-    "startvnc" : function(params) {
-      OpenNebula.VM.vnc(params, "startvnc");
-    },
     "update": function(params) {
       var action_obj = {"template_raw" : params.data.extra_param};
       OpenNebulaAction.simple_action(params, RESOURCE, "update", action_obj);

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

@@ -3,7 +3,7 @@ define(function(require) {
   var Buttons = require('./vms-tab/buttons');
   var Actions = require('./vms-tab/actions');
   var Table = require('./vms-tab/datatable');
-
+  require('utils/vnc');
   var TAB_ID = require('./vms-tab/tabId');
   var DATATABLE_ID = "dataTableVms";
 
@@ -13,7 +13,8 @@ define(function(require) {
     require('./vms-tab/dialogs/resize'),
     require('./vms-tab/dialogs/attach-disk'),
     require('./vms-tab/dialogs/attach-nic'),
-    require('./vms-tab/dialogs/snapshot')
+    require('./vms-tab/dialogs/snapshot'),
+    require('./vms-tab/dialogs/vnc')
   ];
 
   var _panels = [

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

@@ -4,11 +4,13 @@ define(function(require) {
   var Locale = require('utils/locale');
   var OpenNebulaVM = require('opennebula/vm');
   var CommonActions = require('utils/common-actions');
+  var Vnc = require('utils/vnc');
 
   var TAB_ID = require('./tabId');
   var CREATE_DIALOG_ID = require('./form-panels/create/formPanelId');
   var DEPLOY_DIALOG_ID = require('./dialogs/deploy/dialogId');
   var MIGRATE_DIALOG_ID = require('./dialogs/migrate/dialogId');
+  var VNC_DIALOG_ID = require('./dialogs/vnc/dialogId');
   
   var XML_ROOT = "VM";
   var RESOURCE = "VM";
@@ -58,13 +60,13 @@ define(function(require) {
     
     "VM.create_dialog" : {
       type: "custom",
-      call: function(){
+      call: function() {
         Sunstone.showFormPanel(TAB_ID, CREATE_DIALOG_ID, "create");
       }
     },
     "VM.deploy" : {
       type: "custom",
-      call: function(){
+      call: function() {
         Sunstone.getDialog(DEPLOY_DIALOG_ID).show();
       }
     },
@@ -84,6 +86,50 @@ define(function(require) {
        dialog.show();
      }
     },
+    "VM.startvnc" : {
+      type: "custom",
+      call: function() {
+        $.each(Sunstone.getDataTable(TAB_ID).elements(), function(index, elem) {
+          if (!Vnc.lockStatus()) {
+            Vnc.lock();
+            Sunstone.runAction("VM.startvnc_action", elem);
+          } else {
+            Notifier.notifyError(Locale.tr("VNC Connection in progress"))
+            return false;
+          }
+        });
+      }
+    },
+    "VM.startvnc_action" : {
+      type: "single",
+      call: OpenNebulaVM.vnc,
+      callback: function(request, response) {
+       var dialog = Sunstone.getDialog(VNC_DIALOG_ID);
+       dialog.setElement(response);
+       dialog.show();
+      },
+      error: function(req, resp) {
+        Notifier.onError(req, resp);
+        Vnc.unlock();
+      },
+      notify: true
+    },
+    //"VM.startspice" : {
+    //  type: "custom",
+    //  call: function() {
+    //   popUpSPICE();
+    // }
+    //},
+    //"VM.startspice_action" : {
+    //  type: "single",
+    //  call: OpenNebula.VM.startvnc,
+    //  callback: spiceCallback,
+    //  error: function(req, resp) {
+    //    onError(req, resp);
+    //    spice_lock = false;
+    //  },
+    //  notify: true
+    //},
     /*"VM.create" : {
       type: "custom",
       call: function(id, name) {
@@ -129,127 +175,8 @@ define(function(require) {
       notify: true
     },
   
-    "VM.log" : {
-      type: "single",
-      call: OpenNebula.VM.log,
-      callback: function(req, res) {
-        //after calling VM.log we process the answer
-        //update the tab and pop it up again
-        res = res['vm_log'];
-        var log_lines = res.split("\n");
-        var colored_log = '';
-        for (var i = 0; i < log_lines.length; i++) {
-          var line = log_lines[i];
-          if (line.match(/\[E\]/)) {
-            line = '<span class="vm_log_error">' + line + '</span>';
-          }
-          colored_log += line + "<br>";
-        }
  
-        $('#vm_log_tab').html('<div class="row"><div class="large-11 small-centered columns log-tab">' + colored_log + '</div></div>')
-      },
-      error: function(request, error_json) {
-        $("#vm_log pre").html('');
-        onError(request, error_json);
-      }
-    },
- 
-    "VM.startvnc" : {
-      type: "custom",
-      call: function() {
-       popUpVnc();
-     }
-    },
- 
-    "VM.startspice" : {
-      type: "custom",
-      call: function() {
-       popUpSPICE();
-     }
-    },
- 
-    "VM.startvnc_action" : {
-      type: "single",
-      call: OpenNebula.VM.startvnc,
-      callback: vncCallback,
-      error: function(req, resp) {
-        onError(req, resp);
-        vnc_lock = false;
-      },
-      notify: true
-    },
- 
-    "VM.startspice_action" : {
-      type: "single",
-      call: OpenNebula.VM.startvnc,
-      callback: spiceCallback,
-      error: function(req, resp) {
-        onError(req, resp);
-        spice_lock = false;
-      },
-      notify: true
-    },
- 
-    "VM.monitor" : {
-      type: "monitor",
-      call : OpenNebula.VM.monitor,
-      callback: function(req, response) {
-        var vm_graphs = [
-             {
-               monitor_resources : "CPU",
-               labels : "Real CPU",
-               humanize_figures : false,
-               div_graph : $(".vm_cpu_graph")
-             },
-             {
-               monitor_resources : "MEMORY",
-               labels : "Real MEM",
-               humanize_figures : true,
-               div_graph : $(".vm_memory_graph")
-             },
-             {labels : "Network reception",
-               monitor_resources : "NET_RX",
-               humanize_figures : true,
-               convert_from_bytes : true,
-               div_graph : $("#vm_net_rx_graph")
-             },
-             {labels : "Network transmission",
-               monitor_resources : "NET_TX",
-               humanize_figures : true,
-               convert_from_bytes : true,
-               div_graph : $("#vm_net_tx_graph")
-             },
-             {labels : "Network reception speed",
-               monitor_resources : "NET_RX",
-               humanize_figures : true,
-               convert_from_bytes : true,
-               y_sufix : "B/s",
-               derivative : true,
-               div_graph : $("#vm_net_rx_speed_graph")
-             },
-             {labels : "Network transmission speed",
-               monitor_resources : "NET_TX",
-               humanize_figures : true,
-               convert_from_bytes : true,
-               y_sufix : "B/s",
-               derivative : true,
-               div_graph : $("#vm_net_tx_speed_graph")
-             }
-         ];
- 
-        // The network speed graphs require the derivative of the data,
-        // and this process is done in place. They must be the last
-        // graphs to be processed
- 
-        for (var i = 0; i < vm_graphs.length; i++) {
-          plot_graph(
-              response,
-              vm_graphs[i]
-          );
-        }
-      },
-      error: vmMonitorError
-    },
+
  */
   };
 

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

@@ -10,6 +10,9 @@ define(function(require) {
   var TemplateUtils = require('utils/template-utils');
   var OpenNebulaVM = require('opennebula/vm');
   var StateActions = require('./utils/state-actions');
+  var Sunstone = require('sunstone');
+  var Vnc = require('utils/vnc');
+  var Notifier = require('utils/notifier');
   
   /*
     CONSTANTS
@@ -19,6 +22,7 @@ define(function(require) {
   var XML_ROOT = "VM";
   var TAB_NAME = require('./tabId');
 
+
   /*
     CONSTRUCTOR
    */
@@ -73,6 +77,7 @@ define(function(require) {
   Table.prototype.constructor = Table;
   Table.prototype.elementArray = _elementArray;
   Table.prototype.onUpdateView = _onUpdateView;
+  Table.prototype.initialize = _initialize;
 
   return Table;
 
@@ -143,4 +148,21 @@ define(function(require) {
   function _onUpdateView() {
     StateActions.resetStateButtons();
   }
+
+  function _initialize(opts) {
+    TabDataTable.prototype.initialize.call(this, opts);
+
+    $('#' + this.dataTableId).on("click", '.vnc', function() {
+      var vmId = $(this).attr('vm_id');
+
+      if (!Vnc.lockStatus()) {
+        Vnc.lock();
+        Sunstone.runAction("VM.startvnc_action", vmId);
+      } else {
+        Notifier.notifyError(tr("VNC Connection in progress"))
+      }
+
+      return false;
+    });
+  }
 });

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

@@ -0,0 +1,79 @@
+define(function(require) {
+  /*
+    DEPENDENCIES
+   */
+  
+  var BaseDialog = require('utils/dialogs/dialog');
+  var TemplateHTML = require('hbs!./vnc/html');
+  var Sunstone = require('sunstone');
+  var Vnc = require('utils/vnc');
+
+  /*
+    CONSTANTS
+   */
+  
+  var DIALOG_ID = require('./vnc/dialogId');
+  var TAB_ID = require('../tabId')
+
+  /*
+    CONSTRUCTOR
+   */
+
+  function Dialog() {
+    this.dialogId = DIALOG_ID;
+
+    BaseDialog.call(this);
+  };
+
+  Dialog.DIALOG_ID = DIALOG_ID;
+  Dialog.prototype = Object.create(BaseDialog.prototype);
+  Dialog.prototype.constructor = Dialog;
+  Dialog.prototype.html = _html;
+  Dialog.prototype.onShow = _onShow;
+  Dialog.prototype.onClose = _onClose;
+  Dialog.prototype.setup = _setup;
+  Dialog.prototype.setElement = _setElement;
+
+  return Dialog;
+  
+  /*
+    FUNCTION DEFINITIONS
+   */
+
+  function _html() {
+    return TemplateHTML({
+      'dialogId': this.dialogId
+    });
+  }
+
+  function _setup(context) {
+    var that = this;
+
+    $("#open_in_a_new_window", context).on("click", function() {
+       var dialog = Sunstone.getDialog(DIALOG_ID);
+       dialog.hide();
+    });
+
+    $('#sendCtrlAltDelButton', context).click(function() {
+      Vnc.sendCtrlAltDel();
+      return false;
+    });
+
+    return false;
+  }
+
+  function _onShow(context) {   
+    Vnc.vncCallback(this.element);
+    return false;
+  }
+
+  function _onClose(context) {   
+    Vnc.disconnect();
+    Vnc.unlock();
+    return false;
+  }
+
+  function _setElement(element) {
+    this.element = element
+  }
+});

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

@@ -0,0 +1,3 @@
+define(function(require) {
+  return 'vncVMDialog';
+});

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

@@ -0,0 +1,18 @@
+<div id="{{dialogId}}" class="reveal-modal large max-height" style="width:auto; max-width:70%" data-reveal >
+  <div class="row">
+    <div class="large-12 columns">
+      <h3 class="subheader" id="vnc_dialog">
+        {{tr "VNC"}}
+        <span id="VNC_status">{{tr "Loading"}}</span>
+        <a id="open_in_a_new_window" href="" target="_blank" title="{{tr "Open in a new window"}}"> <i class="fa fa-external-link detach-vnc-icon"/></a>
+        <span id="VNC_buttons" class="right">
+          <input type="button" value="Send CtrlAltDel" id="sendCtrlAltDelButton"></span>
+      </h3>
+    </div>
+  </div>
+  <div class="reveal-body" style="width:100%; overflow-x:overlay">
+    <canvas id="VNC_canvas" width="640px">{{tr "Canvas not supported."}}</canvas>
+    <div id="VNC_status_bar" class="VNC_status_bar"></div>
+  </div>
+  <a class="close-reveal-modal">&#215;</a>
+</div>