Unified the layout for VNC/SPICE remote consoles

app/assets/javascripts/remote_consoles/spice.js

@@ -0,0 +1,32 @@
+//= require jquery
+//= require spice-html5-bower/spiceHTML5/spicearraybuffer
+//= require spice-html5-bower
+//= require_tree ../locale
+//= require gettext/all
+
+$(function() {
+  var host = window.location.hostname;
+  var encrypt = window.location.protocol === 'https:';
+  var port = encrypt ? 443 : 80;
+  if (window.location.port) {
+    port = window.location.port;
+  }
+
+  $('#ctrlaltdel').click(sendCtrlAltDel);
+
+  var spice = new SpiceMainConn({
+    uri: (encrypt ? 'wss://' : 'ws://') + host + ':' + port + '/' + $('#remote-console').attr('data-url'),
+    screen_id: "remote-console",
+    password: $('#remote-console').attr('data-secret'),
+    onerror: function(e) {
+      spice.stop();
+      $('#connection-status').removeClass('label-success label-warning').addClass('label-danger');
+      $('#connection-status').text(__('Disconnected'));
+      console.error("SPICE", e);
+    },
+    onsuccess: function() {
+      $('#connection-status').removeClass('label-danger label-warning').addClass('label-success');
+      $('#connection-status').text(__('Connected'));
+    },
+  });
+});

app/assets/javascripts/remote_consoles/vnc.js

@@ -0,0 +1,39 @@
+//= require jquery
+//= require novnc-rails
+//= require_tree ../locale
+//= require gettext/all
+
+$(function() {
+  var host = window.location.hostname;
+  var encrypt = window.location.protocol === 'https:';
+  var port = encrypt ? 443 : 80;
+  if (window.location.port) {
+    port = window.location.port;
+  }
+
+  // noVNC requires an empty canvas item
+  var canvas = document.createElement('canvas');
+  $('#remote-console').append(canvas);
+
+  var vnc = new RFB({
+    target: canvas,
+    encrypt: encrypt,
+    true_color: true,
+    local_cursor: true,
+    shared: true,
+    view_only: false,
+    onUpdateState: function(_, state, _, msg) {
+      if (['normal', 'loaded'].includes(state)) {
+        $('#connection-status').removeClass('label-danger label-warning').addClass('label-success');
+        $('#connection-status').text(__('Connected'));
+      } else if (state === 'disconnected') {
+        $('#connection-status').removeClass('label-success label-warning').addClass('label-danger');
+        $('#connection-status').text(__('Disconnected'));
+        console.error('VNC', msg);
+      }
+    },
+  });
+
+  $('#ctrlaltdel').click(vnc.sendCtrlAltDel);
+  vnc.connect(host, port, $('#remote-console').attr('data-secret'), $('#remote-console').attr('data-url'));
+});

app/controllers/vm_common.rb

@@ -156,22 +156,23 @@ def vm_selected
   end
 
   def launch_html5_console
-    proto = request.ssl? ? 'wss' : 'ws'
+    scheme = request.ssl? ? 'wss' : 'ws'
     override_content_security_policy_directives(
-      :connect_src => ["'self'", "#{proto}://#{request.env['HTTP_HOST']}"],
+      :connect_src => ["'self'", "#{scheme}://#{request.env['HTTP_HOST']}"],
       :img_src     => %w(data: 'self')
     )
-    %i(secret url).each { |p| params.require(p) }
-    @secret = j(params[:secret])
-    @url = j(params[:url])
-
-    case j(params[:proto])
-    when 'spice'     # spice, vnc - from rhevm
-      render(:template => 'vm_common/console_spice', :layout => false)
-    when nil, 'vnc'  # nil - from vmware
-      render(:template => 'vm_common/console_vnc', :layout => false)
-    when 'novnc_url' # from OpenStack
-      redirect_to host_address
+    %i(secret url proto).each { |p| params.require(p) }
+
+    proto = j(params[:proto])
+    if %w(vnc spice).include?(proto) # VMWare, RHEV
+      @console = {
+        :url    => j(params[:url]),
+        :secret => j(params[:secret]),
+        :type   => proto
+      }
+      render(:template => 'layouts/remote_console', :layout => false)
+    else
+      raise 'Unsupported protocol'
     end
   end
 

app/views/layouts/remote_console.html.haml

@@ -0,0 +1,75 @@
+= render :partial => 'layouts/doctype'
+%html{:lang => I18n.locale.to_s.sub('-', '_')}
+  %head
+    %title
+      = _('ManageIQ HTML5 Remote Console')
+    = favicon_link_tag
+    = stylesheet_link_tag 'application'
+    -# Load the required JS based on the console type
+    = javascript_include_tag 'jquery', "remote_consoles/#{@console[:type]}"
+    -# Css for the unified look & feel
+    :css
+      #remote-console {
+        position: fixed;
+        width: 100%;
+        height: calc(100% - 30px) !important;
+        overflow: auto;
+      }
+      footer {
+        position: fixed;
+        line-height: 30px;
+        vertical-align: middle;
+        height: 30px;
+        width: 100%;
+        top: calc(100% - 32px);
+        padding-left: 0.2em;
+        padding-right: 0.2em;
+      }
+    -# Handling the fullscreen button
+    :javascript
+      $(function () {
+        $('#fullscreen').click(function () {
+          switch(true) {
+            case document.fullScreenEnabled:
+              if (document.fullscreenElement) {
+                document.exitFullscreen();
+              } else {
+                document.documentElement.requestFullscreen();
+              }
+              break;
+            case document.webkitFullscreenEnabled:
+              if (document.webkitFullscreenElement) {
+                document.webkitExitFullscreen();
+              } else {
+                document.documentElement.webkitRequestFullscreen();
+              }
+              break;
+            case document.mozFullScreenEnabled:
+              if (document.mozFullscreenElement) {
+                document.mozExitFullscreen();
+              } else {
+                document.documentElement.mozRequestFullscreen();
+              }
+              break;
+            case document.msFullscreenEnabled:
+              if (document.msFullscreenElement) {
+                document.msExitFullscreen();
+              } else {
+                document.documentElement.msRequestFullscreen();
+              }
+              break;
+          }
+        });
+
+      });
+  %body
+    #remote-console{'data-url' => @console[:url], 'data-secret' => @console[:secret]}
+    %footer
+      .pull-left
+        %span#console-type.label.label-info= @console[:type].upcase
+        %span#connection-status.label.label-warning Connecting
+      .pull-right
+        %button#ctrlaltdel.btn.btn-default{:title => _('Send CTRL+ALT+DEL')}
+          %i.fa.fa-keyboard-o
+        %button#fullscreen.btn.btn-default{:title => _('Toggle Fullscreen')}
+          %i.fa.fa-arrows-alt

config/initializers/assets.rb

@@ -0,0 +1,3 @@
+Rails.application.config.assets.precompile += %w(
+  remote_consoles/*.js
+)