Various fixes and updates...

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -1,40 +1,46 @@
-# TRex Web Playground
+# TRex Web Playground #
 
 
 Have TRex running inside a container using your web browser.
 
 Provides a quick way to get a look-and-feel of what TRex is.
 
-![alt text](https://trex-tgn.cisco.com/trex/doc/images/trexweb.jpg)
+![trex logo](https://i.imgur.com/gx0r5PS.png)
 
 
-## Getting Started
+## Getting Started ##
 
-TRex web playground is actually  a simple skeleton meant to be enhanced.
+TRex web playground is actually a simple skeleton meant to be enhanced.
 
 It consists of a node.js server and client static HTML file.
 
 
-### Prerequisites
+### Prerequisites ###
 
 To get the server running you need:
+* [Node.js](https://nodejs.org)
+* [Docker](https://docs.docker.com/install/)
 
+### Installing ###
+
+Assuming you have node.js and Docker, do...
 
 ```
-Node.js
-Docker
+$ docker pull trexcisco/trex-dev:2.36
 ```
 
-### Installing
+And to install the JS dependancies...
+```
+$ yarn install
+```
 
-Assuming you have node.js and Docker installed and ready, install the following Node packages
+...or...
 
 ```
-npm install express pty tmp dockerode log-timestamp socket.io
+$ npm install
 ```
 
 
-
 End with an example of getting some data out of the system or using it for a little demo
 
 ## Starting TRex Web Server
@@ -53,5 +59,3 @@ It was created in a few days just to play with the possibilties.
 
 Thus, we encourge contributing to this project by someone who actually knows Javascript and node.js :)
 
-
-

client/client.js

@@ -1,162 +1,153 @@
 // some layouts
 function setup_tabs() {
-    $("#codetabs").tabs({
+    $('#codetabs').tabs({
         activate: function (event, ui) {
         }
     });
-    
-    $("#outputtabs").tabs({
+
+    $('#outputtabs').tabs({
         activate: function (event, ui) {
-            var active = $("#outputtabs").tabs('option', 'active')
+            const active = $('#outputtabs').tabs('option', 'active');
             if (active == 0)  {
-                document.querySelectorAll("a[href='#console']")[0].style.color = "black";
+                document.querySelectorAll('a[href="#console"]')[0].style.color = 'black';
             } else if (active == 1) {
-                document.querySelectorAll("a[href='#output']")[0].style.color = "black";
+                document.querySelectorAll('a[href="#output"]')[0].style.color = 'black';
             } else if (active == 2) {
-                document.querySelectorAll("a[href='#tcpdump']")[0].style.color = "black";
+                document.querySelectorAll('a[href="#tcpdump"]')[0].style.color = 'black';
             }
         }
-    });    
+    });
 }
 
 function get_console_size() {
-    console_window = document.getElementById("console");
-    cols = Math.floor(console_window.offsetWidth / 10);
-    rows = Math.floor(console_window.offsetHeight / 19);
+    console_window = document.getElementById('console');
+    const cols = Math.floor(console_window.offsetWidth / 10);
+    const rows = Math.floor(console_window.offsetHeight / 19);
 
-    return {cols: cols, rows: rows};
+    return { cols, rows };
 }
 
 function on_window_resize() {
-    cols, rows = get_console_size();
+    const { cols, rows } = get_console_size();
 
     client.terminals.console.resize(cols, rows);
     client.terminals.code.resize(cols, rows);
     client.terminals.tcpdump.resize(cols, rows);
 }
 
-function register_events() {
-
-}
+function create_editors() {
 
+    // editors
+    ace.require('ace/ext/language_tools');
+    client.range = ace.require('ace/range').Range;
+    client.editors = [];
+
+    // pcap editor
+    client.editors.push(ace.edit('PCAP'));
+    client.editors[0].setOptions({
+        enableBasicAutocompletion: true,
+        enableSnippets: true,
+        enableLiveAutocompletion: true
+    });
 
-function create_editors() {
-     // editors
-     ace.require("ace/ext/language_tools");
-     client.range = ace.require('ace/range').Range;
-
-     client.editors = [];
-
-     // pcap editor
-     client.editors.push(ace.edit("PCAP"));
-
-     client.editors[0].setOptions({
-         enableBasicAutocompletion: true,
-         enableSnippets: true,
-         enableLiveAutocompletion: true
-
-     });
-     client.editors[0].setShowPrintMargin(false);
-     client.editors[0].session.setMode("ace/mode/python");
-     client.editors[0].setValue(document.getElementById("pcapcode").innerHTML, -1);
-
-     // streams editor
-     client.editors.push(ace.edit("STREAMS"));
-
-     client.editors[1].setOptions({
-         enableBasicAutocompletion: true,
-         enableSnippets: true,
-         enableLiveAutocompletion: true
-
-     });
-     client.editors[1].setShowPrintMargin(false);
-     client.editors[1].session.setMode("ace/mode/python");
-     client.editors[1].setValue(document.getElementById("streamscode").innerHTML, -1);
+    client.editors[0].setShowPrintMargin(false);
+    client.editors[0].session.setMode('ace/mode/python');
+    client.editors[0].setValue(document.getElementById('pcapcode').innerHTML, -1);
+
+    // streams editor
+    client.editors.push(ace.edit('STREAMS'));
+    client.editors[1].setOptions({
+        enableBasicAutocompletion: true,
+        enableSnippets: true,
+        enableLiveAutocompletion: true
+    });
+
+    client.editors[1].setShowPrintMargin(false);
+    client.editors[1].session.setMode('ace/mode/python');
+    client.editors[1].setValue(document.getElementById('streamscode').innerHTML, -1);
 }
 
 
 function create_terminals() {
-    
+
     Terminal.colors[256] = '#ffffff';
     Terminal.colors[257] = '#000000';
 
     client.terminals = {};
 
-    dim = get_console_size();
+    const { cols, rows } = get_console_size();
 
     client.terminals.console = new Terminal({
         screenKeys: true,
         useStyle: true,
-        cols: dim.cols,
-        rows: dim.rows,
+        cols,
+        rows,
     });
 
     client.terminals.code = new Terminal({
         screenKeys: true,
         useStyle: true,
-        cols: cols,
-        rows: rows,
+        cols,
+        rows,
     });
 
     client.terminals.tcpdump = new Terminal({
         screenKeys: true,
         useStyle: true,
-        cols: cols,
-        rows: rows,
+        cols,
+        rows,
     });
 
     Terminal.colors[256] = '#ffffff';
     Terminal.colors[257] = '#000000';
 
-    client.terminals.console.open(document.getElementById("console"));
-    client.terminals.code.open(document.getElementById("output"))
-    client.terminals.tcpdump.open(document.getElementById("tcpdump"))
+    client.terminals.console.open(document.getElementById('console'));
+    client.terminals.code.open(document.getElementById('output'));
+    client.terminals.tcpdump.open(document.getElementById('tcpdump'));
 
     // register some events
     client.terminals.console.on('data', function(data) {
-        client.socket.emit("console-input", data);
+        client.socket.emit('console-input', data);
 	});
 }
 
 
 function create_socket() {
     // Connect to the socket.io server
-    client.socket = io.connect('http://csi-trex-10:8080');
+    client.socket = io.connect('http://localhost:7171');
 
     // disconnect
-    client.socket.on("disconnect", function() {
-        deinit();
-    });
+    client.socket.on('disconnect', deinit);
 
     // console output
     client.socket.on('console-output', function(data) {
         client.terminals.console.write(data);
 
-        if ($("#outputtabs").tabs('option', 'active') != 0) {
-            document.querySelectorAll("a[href='#console']")[0].style.color = "red";
+        if ($('#outputtabs').tabs('option', 'active') != 0) {
+            document.querySelectorAll('a[href="#console"]')[0].style.color = 'red';
         }
     });
 
     // code output
     client.socket.on('code-run-output', function(data) {
-        var ss = data.split("\n");
-        for (var s in ss) {
+        const ss = data.split('\n');
+        for (let s in ss) {
             client.terminals.code.writeln(ss[s]);
         }
 
-        if ($("#outputtabs").tabs('option', 'active') != 1) {
-            document.querySelectorAll("a[href='#output']")[0].style.color = "red";
+        if ($('#outputtabs').tabs('option', 'active') != 1) {
+            document.querySelectorAll('a[href="#output"]')[0].style.color = 'red';
         }
     })
 
     // tcpdump output
     client.socket.on('tcpdump-output', function(data) {
         client.terminals.tcpdump.write(data);
 
-        if ($("#outputtabs").tabs('option', 'active') != 2) {
-            document.querySelectorAll("a[href='#tcpdump']")[0].style.color = "red";
+        if ($('#outputtabs').tabs('option', 'active') != 2) {
+            document.querySelectorAll('a[href="#tcpdump"]')[0].style.color = 'red';
         }
-        
+
     });
 }
 
@@ -166,45 +157,41 @@ function onRunClick() {
     //$("#outputtabs").tabs("option", "active", 1);
 
     // get the current active tab
-    code_tab = $("#codetabs").tabs('option', 'active');
+    code_tab = $('#codetabs').tabs('option', 'active');
     editor = client.editors[code_tab];
 
     code = editor.session.getValue();
     client.terminals.code.write('\033[2J');
     client.terminals.code.write('\033[H');
     client.terminals.code.write('Launching script:\r\n\n');
-    client.socket.emit("code-run-input", code);
+    client.socket.emit('code-run-input', code);
 }
 
 
 function onStopClick() {
-    client.socket.emit("code-run-input", "ESC");
+    client.socket.emit('code-run-input', 'ESC');
 }
 
 function setup_buttons() {
-    document.getElementById("stopbutton").onclick = onStopClick;
-    document.getElementById("runbutton").onclick = onRunClick;
+    document.getElementById('stopbutton').onclick = onStopClick;
+    document.getElementById('runbutton').onclick = onRunClick;
 }
 
-
-
-
 function init() {
     setup_tabs();
     setup_buttons();
 
     create_socket();
     create_terminals();
     create_editors();
-
-
+
     client.terminals.console.write('Allocating TRex Docker container...\r\n\n');
     client.terminals.console.write('Starting TRex Server...\r\n\n');
 }
 
 function deinit() {
     client.terminals.console.destroy();
-    client.terminals.code.destroy();    
+    client.terminals.code.destroy();
 }
 
 client = {};

client/css/style.css

@@ -1,7 +1,7 @@
     body {
         overflow: hidden;
     }
-    
+
     #trexlogo {
         margin: 0;
         position: absolute;
@@ -16,7 +16,6 @@
         position: absolute;
         top: 0%;
         bottom: 0%;
-        left: 90%;
         right: 0%;
 
    }
@@ -76,7 +75,7 @@
         right: 0%;
         border-style: ridge;
 	}
-	
+
     #outputtabs {
         margin: 0;
         position: absolute;
@@ -186,4 +185,3 @@
   color: #666666;
 }
 
-