dashboard: add initial novnc console

circle/dashboard/static/dashboard/novnc/base64.js

+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// From: http://hg.mozilla.org/mozilla-central/raw-file/ec10630b1a54/js/src/devtools/jint/sunspider/string-base64.js
+
+/*jslint white: false, bitwise: false, plusplus: false */
+/*global console */
+
+var Base64 = {
+
+/* Convert data (an array of integers) to a Base64 string. */
+toBase64Table : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='.split(''),
+base64Pad     : '=',
+
+encode: function (data) {
+    "use strict";
+    var result = '';
+    var toBase64Table = Base64.toBase64Table;
+    var length = data.length
+    var lengthpad = (length%3);
+    var i = 0, j = 0;
+    // Convert every three bytes to 4 ascii characters.
+  /* BEGIN LOOP */
+    for (i = 0; i < (length - 2); i += 3) {
+        result += toBase64Table[data[i] >> 2];
+        result += toBase64Table[((data[i] & 0x03) << 4) + (data[i+1] >> 4)];
+        result += toBase64Table[((data[i+1] & 0x0f) << 2) + (data[i+2] >> 6)];
+        result += toBase64Table[data[i+2] & 0x3f];
+    }
+  /* END LOOP */
+
+    // Convert the remaining 1 or 2 bytes, pad out to 4 characters.
+    if (lengthpad === 2) {
+        j = length - lengthpad;
+        result += toBase64Table[data[j] >> 2];
+        result += toBase64Table[((data[j] & 0x03) << 4) + (data[j+1] >> 4)];
+        result += toBase64Table[(data[j+1] & 0x0f) << 2];
+        result += toBase64Table[64];
+    } else if (lengthpad === 1) {
+        j = length - lengthpad;
+        result += toBase64Table[data[j] >> 2];
+        result += toBase64Table[(data[j] & 0x03) << 4];
+        result += toBase64Table[64];
+        result += toBase64Table[64];
+    }
+
+    return result;
+},
+
+/* Convert Base64 data to a string */
+toBinaryTable : [
+    -1,-1,-1,-1, -1,-1,-1,-1, -1,-1,-1,-1, -1,-1,-1,-1,
+    -1,-1,-1,-1, -1,-1,-1,-1, -1,-1,-1,-1, -1,-1,-1,-1,
+    -1,-1,-1,-1, -1,-1,-1,-1, -1,-1,-1,62, -1,-1,-1,63,
+    52,53,54,55, 56,57,58,59, 60,61,-1,-1, -1, 0,-1,-1,
+    -1, 0, 1, 2,  3, 4, 5, 6,  7, 8, 9,10, 11,12,13,14,
+    15,16,17,18, 19,20,21,22, 23,24,25,-1, -1,-1,-1,-1,
+    -1,26,27,28, 29,30,31,32, 33,34,35,36, 37,38,39,40,
+    41,42,43,44, 45,46,47,48, 49,50,51,-1, -1,-1,-1,-1
+],
+
+decode: function (data, offset) {
+    "use strict";
+    offset = typeof(offset) !== 'undefined' ? offset : 0;
+    var toBinaryTable = Base64.toBinaryTable;
+    var base64Pad = Base64.base64Pad;
+    var result, result_length, idx, i, c, padding;
+    var leftbits = 0; // number of bits decoded, but yet to be appended
+    var leftdata = 0; // bits decoded, but yet to be appended
+    var data_length = data.indexOf('=') - offset;
+
+    if (data_length < 0) { data_length = data.length - offset; }
+
+    /* Every four characters is 3 resulting numbers */
+    result_length = (data_length >> 2) * 3 + Math.floor((data_length%4)/1.5);
+    result = new Array(result_length);
+
+    // Convert one by one.
+  /* BEGIN LOOP */
+    for (idx = 0, i = offset; i < data.length; i++) {
+        c = toBinaryTable[data.charCodeAt(i) & 0x7f];
+        padding = (data.charAt(i) === base64Pad);
+        // Skip illegal characters and whitespace
+        if (c === -1) {
+            console.error("Illegal character code " + data.charCodeAt(i) + " at position " + i);
+            continue;
+        }
+        
+        // Collect data into leftdata, update bitcount
+        leftdata = (leftdata << 6) | c;
+        leftbits += 6;
+
+        // If we have 8 or more bits, append 8 bits to the result
+        if (leftbits >= 8) {
+            leftbits -= 8;
+            // Append if not padding.
+            if (!padding) {
+                result[idx++] = (leftdata >> leftbits) & 0xff;
+            }
+            leftdata &= (1 << leftbits) - 1;
+        }
+    }
+  /* END LOOP */
+
+    // If there are any bits left, the base64 string was corrupted
+    if (leftbits) {
+        throw {name: 'Base64-Error', 
+               message: 'Corrupted base64 string'};
+    }
+
+    return result;
+}
+
+}; /* End of Base64 namespace */

circle/dashboard/static/dashboard/novnc/playback.js

+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2012 Joel Martin
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ */
+
+"use strict";
+/*jslint browser: true, white: false */
+/*global Util, VNC_frame_data, finish */
+
+var rfb, mode, test_state, frame_idx, frame_length,
+    iteration, iterations, istart_time,
+
+    // Pre-declarations for jslint
+    send_array, next_iteration, queue_next_packet, do_packet;
+
+// Override send_array
+send_array = function (arr) {
+    // Stub out send_array
+};
+
+next_iteration = function () {
+    if (iteration === 0) {
+        frame_length = VNC_frame_data.length;
+        test_state = 'running';
+    } else {
+        rfb.disconnect();
+    }
+    
+    if (test_state !== 'running') { return; }
+
+    iteration += 1;
+    if (iteration > iterations) {
+        finish();
+        return;
+    }
+
+    frame_idx = 0;
+    istart_time = (new Date()).getTime();
+    rfb.connect('test', 0, "bogus");
+
+    queue_next_packet();
+
+};
+
+queue_next_packet = function () {
+    var frame, foffset, toffset, delay;
+    if (test_state !== 'running') { return; }
+
+    frame = VNC_frame_data[frame_idx];
+    while ((frame_idx < frame_length) && (frame.charAt(0) === "}")) {
+        //Util.Debug("Send frame " + frame_idx);
+        frame_idx += 1;
+        frame = VNC_frame_data[frame_idx];
+    }
+
+    if (frame === 'EOF') {
+        Util.Debug("Finished, found EOF");
+        next_iteration();
+        return;
+    }
+    if (frame_idx >= frame_length) {
+        Util.Debug("Finished, no more frames");
+        next_iteration();
+        return;
+    }
+
+    if (mode === 'realtime') {
+        foffset = frame.slice(1, frame.indexOf('{', 1));
+        toffset = (new Date()).getTime() - istart_time;
+        delay = foffset - toffset;
+        if (delay < 1) {
+            delay = 1;
+        }
+
+        setTimeout(do_packet, delay);
+    } else {
+        setTimeout(do_packet, 1);
+    }
+};
+
+var bytes_processed = 0;
+
+do_packet = function () {
+    //Util.Debug("Processing frame: " + frame_idx);
+    var frame = VNC_frame_data[frame_idx],
+        start = frame.indexOf('{', 1) + 1;
+    bytes_processed += frame.length - start;
+    if (VNC_frame_encoding === 'binary') {
+        var u8 = new Uint8Array(frame.length - start);
+        for (var i = 0; i < frame.length - start; i++) {
+            u8[i] = frame.charCodeAt(start + i);
+        }
+        rfb.recv_message({'data' : u8});
+    } else {
+        rfb.recv_message({'data' : frame.slice(start)});
+    }
+    frame_idx += 1;
+
+    queue_next_packet();
+};
+

circle/dashboard/static/dashboard/novnc/webutil.js

+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2012 Joel Martin
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ *
+ * See README.md for usage and integration instructions.
+ */
+
+"use strict";
+/*jslint bitwise: false, white: false */
+/*global Util, window, document */
+
+// Globals defined here
+var WebUtil = {}, $D;
+
+/*
+ * Simple DOM selector by ID
+ */
+if (!window.$D) {
+    window.$D = function (id) {
+        if (document.getElementById) {
+            return document.getElementById(id);
+        } else if (document.all) {
+            return document.all[id];
+        } else if (document.layers) {
+            return document.layers[id];
+        }
+        return undefined;
+    };
+}
+
+
+/* 
+ * ------------------------------------------------------
+ * Namespaced in WebUtil
+ * ------------------------------------------------------
+ */
+
+// init log level reading the logging HTTP param
+WebUtil.init_logging = function(level) {
+    if (typeof level !== "undefined") {
+        Util._log_level = level;
+    } else {
+        Util._log_level = (document.location.href.match(
+            /logging=([A-Za-z0-9\._\-]*)/) ||
+            ['', Util._log_level])[1];
+    }
+    Util.init_logging();
+};
+
+
+WebUtil.dirObj = function (obj, depth, parent) {
+    var i, msg = "", val = "";
+    if (! depth) { depth=2; }
+    if (! parent) { parent= ""; }
+
+    // Print the properties of the passed-in object 
+    for (i in obj) {
+        if ((depth > 1) && (typeof obj[i] === "object")) { 
+            // Recurse attributes that are objects
+            msg += WebUtil.dirObj(obj[i], depth-1, parent + "." + i);
+        } else {
+            //val = new String(obj[i]).replace("\n", " ");
+            if (typeof(obj[i]) === "undefined") {
+                val = "undefined";
+            } else {
+                val = obj[i].toString().replace("\n", " ");
+            }
+            if (val.length > 30) {
+                val = val.substr(0,30) + "...";
+            } 
+            msg += parent + "." + i + ": " + val + "\n";
+        }
+    }
+    return msg;
+};
+
+// Read a query string variable
+WebUtil.getQueryVar = function(name, defVal) {
+    var re = new RegExp('[?][^#]*' + name + '=([^&#]*)'),
+        match = document.location.href.match(re);
+    if (typeof defVal === 'undefined') { defVal = null; }
+    if (match) {
+        return decodeURIComponent(match[1]);
+    } else {
+        return defVal;
+    }
+};
+
+
+/*
+ * Cookie handling. Dervied from: http://www.quirksmode.org/js/cookies.html
+ */
+
+// No days means only for this browser session
+WebUtil.createCookie = function(name,value,days) {
+    var date, expires;
+    if (days) {
+        date = new Date();
+        date.setTime(date.getTime()+(days*24*60*60*1000));
+        expires = "; expires="+date.toGMTString();
+    }
+    else {
+        expires = "";
+    }
+    document.cookie = name+"="+value+expires+"; path=/";
+};
+
+WebUtil.readCookie = function(name, defaultValue) {
+    var i, c, nameEQ = name + "=", ca = document.cookie.split(';');
+    for(i=0; i < ca.length; i += 1) {
+        c = ca[i];
+        while (c.charAt(0) === ' ') { c = c.substring(1,c.length); }
+        if (c.indexOf(nameEQ) === 0) { return c.substring(nameEQ.length,c.length); }
+    }
+    return (typeof defaultValue !== 'undefined') ? defaultValue : null;
+};
+
+WebUtil.eraseCookie = function(name) {
+    WebUtil.createCookie(name,"",-1);
+};
+
+/*
+ * Setting handling.
+ */
+
+WebUtil.initSettings = function(callback) {
+    var callbackArgs = Array.prototype.slice.call(arguments, 1);
+    if (window.chrome && window.chrome.storage) {
+        window.chrome.storage.sync.get(function (cfg) {
+            WebUtil.settings = cfg;
+            console.log(WebUtil.settings);
+            if (callback) {
+                callback.apply(this, callbackArgs);
+            }
+        });
+    } else {
+        // No-op
+        if (callback) {
+            callback.apply(this, callbackArgs);
+        }
+    }
+};
+
+// No days means only for this browser session
+WebUtil.writeSetting = function(name, value) {
+    if (window.chrome && window.chrome.storage) {
+        //console.log("writeSetting:", name, value);
+        if (WebUtil.settings[name] !== value) {
+            WebUtil.settings[name] = value;
+            window.chrome.storage.sync.set(WebUtil.settings);
+        }
+    } else {
+        localStorage.setItem(name, value);
+    }
+};
+
+WebUtil.readSetting = function(name, defaultValue) {
+    var value;
+    if (window.chrome && window.chrome.storage) {
+        value = WebUtil.settings[name];
+    } else {
+        value = localStorage.getItem(name);
+    }
+    if (typeof value === "undefined") {
+        value = null;
+    }
+    if (value === null && typeof defaultValue !== undefined) {
+        return defaultValue;
+    } else {
+        return value;
+    }
+};
+
+WebUtil.eraseSetting = function(name) {
+    if (window.chrome && window.chrome.storage) {
+        window.chrome.storage.sync.remove(name);
+        delete WebUtil.settings[name];
+    } else {
+        localStorage.removeItem(name);
+    }
+};
+
+/*
+ * Alternate stylesheet selection
+ */
+WebUtil.getStylesheets = function() { var i, links, sheets = [];
+    links = document.getElementsByTagName("link");
+    for (i = 0; i < links.length; i += 1) {
+        if (links[i].title &&
+            links[i].rel.toUpperCase().indexOf("STYLESHEET") > -1) {
+            sheets.push(links[i]);
+        }
+    }
+    return sheets;
+};
+
+// No sheet means try and use value from cookie, null sheet used to
+// clear all alternates.
+WebUtil.selectStylesheet = function(sheet) {
+    var i, link, sheets = WebUtil.getStylesheets();
+    if (typeof sheet === 'undefined') {
+        sheet = 'default';
+    }
+    for (i=0; i < sheets.length; i += 1) {
+        link = sheets[i];
+        if (link.title === sheet) {    
+            Util.Debug("Using stylesheet " + sheet);
+            link.disabled = false;
+        } else {
+            //Util.Debug("Skipping stylesheet " + link.title);
+            link.disabled = true;
+        }
+    }
+    return sheet;
+};

circle/dashboard/templates/dashboard/vm-detail-console.html

-CONSOLE
+<div class="btn-toolbar">
+    <div class="btn-group">
+        <button id="sendCtrlAltDelButton" class="btn btn-danger small" href="#">Send CtrlAltDel</button>
+        <button id="akkount-mate" class="btn btn-default small" href="#">Máténak akkountot adok</button>
+        <button id="akkount-bd" class="btn btn-success small" href="#">bd-nek akkountot adok</button>
+    </div>
+    <div class="btn-group">
+        <button id="blabla" class="btn btn-warning small disabled" href="#">GubaSanyinak akkountot adok</button>
+    </div>
+</div>
+<div class="alert alert-info" id="noVNC_status">
+</div>
+
+<canvas id="noVNC_canvas" width="640px" height="20px">Canvas not supported.
+</canvas>
+
+<script src="{{ STATIC_URL }}dashboard/novnc/util.js"></script>
+<script>
+    "use strict";
+
+    var INCLUDE_URI = '{{ STATIC_URL }}dashboard/novnc/';
+
+    Util.load_scripts(["webutil.js", "base64.js", "websock.js", "des.js",
+                       "input.js", "display.js", "jsunzip.js", "rfb.js"]);
+
+    var rfb;
+
+    function updateState(rfb, state, oldstate, msg) {
+        var s, sb, cad
+        s = $('#noVNC_status')[0];
+        cad = $('#sendCtrlAltDelButton')[0];
+
+        if (state === "normal") { cad.disabled = false; }
+        else                    { cad.disabled = true; }
+
+        if (typeof(msg) !== 'undefined') {
+            s.innerHTML = msg;
+        }
+    }
+
+    $('a[data-toggle$="pill"][href!="#console"]').click(function() {
+        alert('SZIA');
+        if (rfb) {
+            rfb.disconnect();
+            rfb = 0;
+        }
+        $("#vm-info-pane").fadeIn();
+        $("#vm-detail-pane").removeClass("col-md-12");
+    });
+    $('#sendCtrlAltDelButton').click(function() {
+        rfb.sendCtrlAltDel(); return false;});
+    $('#akkount-mate').click(function() {
+        alert('NEM!!!!!!444'); return false;});
+    $('#akkount-bd').click(function() {
+        alert('OK, ADOK!!!!!!444'); return false;});
+
+
+    $('a[href$="console"]').click(function() {
+        var host, port, password, path;
+
+        $("#vm-info-pane").hide();
+        $("#vm-detail-pane").addClass("col-md-12");
+        WebUtil.init_logging('warn');
+
+        host = '10.9.2.232';
+        port = '443';
+        password = 'tbdgpzhtow';
+        path = 'vnc/';
+
+        rfb = new RFB({'target': $D('noVNC_canvas'),
+                       'encrypt': true,// (window.location.protocol === "https:"),
+                       'true_color':   true,
+                       'local_cursor': true,
+                       'shared':       true,
+                       'view_only':    false,
+                       'updateState':  updateState});
+        rfb.connect(host, port, password, path);
+    });
+    </script>

circle/dashboard/templates/dashboard/vm-detail.html

@@ -7,7 +7,7 @@
     <h1>devenv <small>550.vm.ik.bme.hu</small></h1>
     <h1>devenv <small>550.vm.ik.bme.hu</small></h1>
   </div>
   </div>
   <div class="row">
   <div class="row">
-    <div class="col-md-4">
+    <div class="col-md-4" id="vm-info-pane">
       <div class="big">
       <div class="big">
         <span class="label label-success ">RUNNING</span>
         <span class="label label-success ">RUNNING</span>
         <div class="btn-group">
         <div class="btn-group">
@@ -28,7 +28,7 @@
         <dd>ac metus interdum, tincidunt</dd>
         <dd>ac metus interdum, tincidunt</dd>
       </dl>
       </dl>
     </div>
     </div>
-    <div class="col-md-8">
+    <div class="col-md-8" id="vm-detail-pane">
       <div class="panel panel-default" id="vm-detail-panel">
       <div class="panel panel-default" id="vm-detail-panel">
         <ul class="nav nav-pills panel-heading">
         <ul class="nav nav-pills panel-heading">
           <li class="active">
           <li class="active">

circle/dashboard/urls.py

@@ -2,8 +2,8 @@ from django.conf.urls import patterns, url
 
 
 from .views import IndexView, VmDetailView
 from .views import IndexView, VmDetailView
 
 
-urlpatterns = patterns(
-    '',
-    url(r'^$', IndexView.as_view()),
-    url(r'^vm/\d+/$', VmDetailView.as_view()),
+urlpatterns = patterns('',
+                       url(r'^$', IndexView.as_view()),
+                       url(r'^vm/(?P<id>\d+)/$', VmDetailView.as_view(),
+                           name='dashboard.views.detail'),
 )
 )