[Kimchi-devel] [PATCH] [Kimchi 4/6] Implement the web serial console front-end
Jose Ricardo Ziviani
joserz at linux.vnet.ibm.com
Fri Feb 5 16:39:29 UTC 2016
On 05-02-2016 14:34, Aline Manera wrote:
>
>
> On 02/04/2016 05:47 PM, Jose Ricardo Ziviani wrote:
>> - 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/images/favicon.ico | Bin 0 -> 15086 bytes
>> ui/serial/images/logo-white.png | Bin 0 -> 7583 bytes
>
> Where did those images come from? From Wok repo?
>
>> ui/serial/serial.html | 80 +
>> ui/serial/term.js | 5973
>> +++++++++++++++++++++++++++++++++++++++
>> 4 files changed, 6053 insertions(+)
>> create mode 100644 ui/serial/images/favicon.ico
>> create mode 100644 ui/serial/images/logo-white.png
>> create mode 100644 ui/serial/serial.html
>> create mode 100644 ui/serial/term.js
>>
>> diff --git a/ui/serial/serial.html b/ui/serial/serial.html
>> new file mode 100644
>> index 0000000..a81d0ee
>> --- /dev/null
>> +++ b/ui/serial/serial.html
>
> License header is missing.
OK :P
>
>> @@ -0,0 +1,80 @@
>> +<!doctype html>
>> +<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
>
> Remove the commented line
this comment is actually a way to let the browser knows that this
content is loaded dynamically:
https://developer.chrome.com/devtools/docs/javascript-debugging
↓↓↓↓
Note: Notice the "//# sourceURL=dynamicScript.js" line at the end of
dynamicScript.js file. This technique gives a name to a script created
with eval, and will be discussed in more detail in the Source Maps
section. Breakpoints can be set in dynamic JavaScript only if it has a
user supplied name.
↑↑↑↑
>
>> + </script>
>> + </head>
>> + <body>
>> + </body>
>> +</html>
>
>
>> diff --git a/ui/serial/term.js b/ui/serial/term.js
>
> As it is an imported code it is better to have it in a separated commit.
> That way, we can easily know which files are imported or not.
OK
>
>> new file mode 100644
>> index 0000000..f542dd0
>> --- /dev/null
>> +++ b/ui/serial/term.js
>> @@ -0,0 +1,5973 @@
>> +/**
>> + * term.js - an xterm emulator
>> + * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
>> + * https://github.com/chjj/term.js
>> + *
>> + * Permission is hereby granted, free of charge, to any person
>> obtaining a copy
>> + * of this software and associated documentation files (the
>> "Software"), to deal
>> + * in the Software without restriction, including without limitation
>> the rights
>> + * to use, copy, modify, merge, publish, distribute, sublicense,
>> and/or sell
>> + * copies of the Software, and to permit persons to whom the Software is
>> + * furnished to do so, subject to the following conditions:
>> + *
>> + * The above copyright notice and this permission notice shall be
>> included in
>> + * all copies or substantial portions of the Software.
>> + *
>> + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
>> EXPRESS OR
>> + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
>> MERCHANTABILITY,
>> + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
>> SHALL THE
>> + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
>> OTHER
>> + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
>> ARISING FROM,
>> + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
>> DEALINGS IN
>> + * THE SOFTWARE.
>> + *
>> + * Originally forked from (with the author's permission):
>> + * Fabrice Bellard's javascript vt100 for jslinux:
>> + * http://bellard.org/jslinux/
>> + * Copyright (c) 2011 Fabrice Bellard
>> + * The original design remains. The terminal itself
>> + * has been extended to include xterm CSI codes, among
>> + * other features.
>> + */
>> +
>>
>
--
Jose Ricardo Ziviani
-----------------------------
Software Engineer
Linux Technology Center - IBM
More information about the Kimchi-devel
mailing list