[Kimchi-devel] [PATCH v2] [Kimchi 4/8] Implement the web serial console front-end

9 Feb 2016

- This is the screen that opens when the client requests the serial
   console, basically a textarea and a websocket that communicates
   with the server (through websockify) in order to send/receive
   data from a guest serial console.

Signed-off-by: Jose Ricardo Ziviani <joserz@linux.vnet.ibm.com>
---
 ui/serial/images/favicon.ico | Bin 0 -> 15086 bytes
 ui/serial/serial.html        |  99 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 ui/serial/images/favicon.ico
 create mode 100644 ui/serial/serial.html

diff --git a/ui/serial/images/favicon.ico b/ui/serial/images/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..1d998c2543576a16c72e49630317afb8e1373b38
GIT binary patch
literal 15086
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
bLvKw_5T{H{Hi%=kc3}MAXJ2X`9G>?-JFBHw

literal 0
HcmV?d00001

diff --git a/ui/serial/serial.html b/ui/serial/serial.html
new file mode 100644
index 0000000..e3f7e21
--- /dev/null
+++ b/ui/serial/serial.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<!--
+# Project Kimchi
+#
+# Copyright IBM, Corp. 2016
+#
+# This library is free software; you can redistribute it and/or
+# modify it under the terms of the GNU Lesser General Public
+# License as published by the Free Software Foundation; either
+# version 2.1 of the License, or (at your option) any later version.
+#
+# This library is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+# Lesser General Public License for more details.
+#
+# You should have received a copy of the GNU Lesser General Public
+# License along with this library; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301 USA
+-->
+<html>
+    <head>
+        <title>Kimchi Serial Console</title>
+        <!--[if IE  lte 9]><link rel="shortcut icon" href="images/favicon.ico"><![endif]-->
+        <link rel="shortcut icon" href="images/favicon.png">
+        <style>
+            html {
+                background-color: #3A393B;
+            }
+
+            body {
+                width: 50%;
+                height: 60%;
+                margin-left: auto;
+                margin-right: auto;
+            }
+
+            .terminal {
+                width: 100%;
+                height: 100%;
+                border: #000 solid 3px;
+                font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
+                font-size: 16px;
+                color: #f0f0f0;
+                background: #000;
+            }
+
+            .terminal-cursor {
+                color: #000;
+                background: #f0f0f0;
+            }
+        </style>
+        <script src="term.js"></script>
+        <script>
+        ;(function() {
+            window.onload = function() {
+                var params = new Map()
+                var query_string = window.location.href.split('?');
+                for (var i = 1; i < query_string.length; i++) {
+                    query_string[i].split('&').forEach(function(val) {
+                        param = val.split('=');
+                        params.set(param[0], param[1]);
+                });
+            }
+
+            var url = 'wss://' + window.location.hostname + ':' + params.get('port');
+            url += '/' + params.get('path');
+            url += '?token=' + params.get('token');
+            var socket = new WebSocket(url, ['base64']);
+            var term = new Terminal({
+                cols: 80,
+                rows: 35,
+                useStyle: true,
+                screenKeys: true,
+                cursorBlink: true
+            });
+
+            term.on('data', function(data) {
+                socket.send(window.btoa(data));
+            });
+
+            socket.onopen = function() {
+                socket.send(window.btoa('\n'));
+            };
+
+            socket.onmessage = function(event) {
+                var message = event.data;
+                term.write(window.atob(message));
+            };
+
+            term.open(document.body);
+          };
+        }).call(this);
+        //# sourceURL=serial.js
+        </script>
+    </head>
+    <body>
+    </body>
+</html>
-- 
1.9.1

    