[Kimchi-devel] [PATCH v3] [Kimchi 5/8] Implement the web serial console front-end

Thu Feb 11 13:47:07 UTC 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 at linux.vnet.ibm.com>
---
 ui/serial/html/serial.html | 99 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 ui/serial/html/serial.html

diff --git a/ui/serial/html/serial.html b/ui/serial/html/serial.html
new file mode 100644
index 0000000..26ff6d0
--- /dev/null
+++ b/ui/serial/html/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.ico">
+        <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="../libs/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


