Adds some new UI for EON screens.

Fixes reboot command.

app/components/Editor.js

@@ -0,0 +1,77 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Terminal } from 'xterm';
+import { remote, clipboard } from 'electron';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import settings from 'electron-settings';
+const { app } = remote;
+import path from 'path';
+import * as uiActions from '../actions/ui_actions';
+// import MonacoEditor from 'react-monaco-editor';
+const data = {
+  name: 'root',
+  toggled: true,
+  children: [
+      {
+          name: 'parent',
+          children: [
+              { name: 'child1' },
+              { name: 'child2' }
+          ]
+      },
+      {
+          name: 'loading parent',
+          loading: true,
+          children: []
+      },
+      {
+          name: 'parent',
+          children: [
+              {
+                  name: 'nested parent',
+                  children: [
+                      { name: 'nested child 1' },
+                      { name: 'nested child 2' }
+                  ]
+              }
+          ]
+      }
+  ]
+};
+class Editor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      code: '// type your code...',
+    }
+  }
+  editorDidMount(editor, monaco) {
+    console.log('editorDidMount', editor);
+    editor.focus();
+  }
+  onChange(newValue, e) {
+    console.log('onChange', newValue, e);
+  }
+  render() {
+    const code = this.state.code;
+    const options = {
+      selectOnLineNumbers: true
+    };
+    // return (<div>
+    //   <MonacoEditor
+    //     width="800"
+    //     height="600"
+    //     language="javascript"
+    //     theme="vs-dark"
+    //     value={code}
+    //     options={options}
+    //     onChange={this.onChange}
+    //     editorDidMount={this.editorDidMount}
+    //   /></div>);
+    return (<div></div>);
+  }
+}
+
+export default Editor;

app/components/EonDetail/index.js

@@ -8,6 +8,7 @@ import Layout from '../Layout';
 import StateList from './StateList';
 import { TabContent, Nav, NavItem, NavLink, TabPane } from 'reactstrap';
 import Terminal from '../Terminal';
+import Editor from '../Editor';
 import commands from '../commands';
 import inflection from 'inflection';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -30,6 +31,9 @@ class EonDetail extends React.PureComponent {
   runCommand = (command) => {
     this.props.RUN_COMMAND(command);
   }
+  toggleLiveData = () => {
+    this.props.TOGGLE_DATA();
+  }
   render() {
     const { activeTab, activeCommand, network, devices, currentStateKeys, eon, services, serviceIds } = this.props;
     const commandKeys = Object.keys(commands);
@@ -88,34 +92,67 @@ class EonDetail extends React.PureComponent {
       </NavItem>
     ];
     let CommandPane;
+    const isLiveDataTab = (activeTab === 'live_data' || serviceIds.includes(activeTab));
     if (activeCommand) {
       CommandPane = commands[activeCommand];
     }
+
+  // STASHING THIS FOR LATER.  
+  // <NavItem key={"editor-tab-link"}>
+  //   <NavLink className={classnames({
+  //       "no-select": true,
+  //       active: activeTab === 'editor',
+  //       disabled: !serviceIds.length
+  //     })}
+  //     onClick={() => { this.setTab('editor'); }}>
+  //     <span className={"icon"}><FontAwesomeIcon icon="code" /></span> Code Editor
+  //   </NavLink>
+  // </NavItem>
     return (
       <Layout className={'eon-detail'} title={`${this.props.eon.ip}`} contextActions={contextActions}>
         <Nav tabs className={'tab-list'}>
           <NavItem key={"console-tab-link"}>
             <NavLink className={classnames({
-                test: true,
                 "no-select": true,
-                active: serviceIds.length && activeTab === 'console',
+                active: activeTab === 'console',
                 disabled: !serviceIds.length
               })}
               onClick={() => { this.setTab('console'); }}>
-              Console
+              <span className={"icon"}><FontAwesomeIcon icon="terminal" /></span> Console
             </NavLink>
+
             {activeTab === 'console' && 
               <Nav tabs className={'command-list'}>
                 {commandTabs}
               </Nav>
             }
           </NavItem>
-          {stateTabs}
+          <NavItem key={"live_data-tab-link"}>
+            <NavLink className={classnames({
+                "no-select": true,
+                active: serviceIds.length && isLiveDataTab,
+                disabled: !serviceIds.length
+              })}
+              onClick={() => { this.setTab('live_data'); }}>
+              <span className={"icon"}><FontAwesomeIcon icon="stream" /></span> Live Data
+            </NavLink>
+
+            {(activeTab === 'live_data' || serviceIds.includes(activeTab)) &&
+              <Nav tabs className={'command-list'}>
+                {stateTabs}
+              </Nav>
+            }
+          </NavItem>
+
+
         </Nav>
         <TabContent className={'tab-content'} activeTab={activeTab}>
           <TabPane className={"console-tab console-tab-pane"} key={"console-tab-pane"} tabId={'console'}>
             <Terminal eonIp={eon.ip} activeCommand={activeCommand} CommandPane={CommandPane} />
           </TabPane>
+          <TabPane className={"editor-tab editor-tab-pane"} key={"editor-tab-pane"} tabId={'editor'}>
+            <Editor eonIp={eon.ip} />
+          </TabPane>
           {statePanes}
         </TabContent>
       </Layout>

app/components/Terminal.js

@@ -27,7 +27,7 @@ Terminal.applyAddon(winptyCompat);
 class ReactTerminal extends React.Component {
   constructor(props) {
     super(props);
-    this.HOST = `127.0.0.1:${process.env.WORKBENCH_SHELL_PORT}`;
+    this.HOST = `127.0.0.1:${app.TERMINAL_PORT}`;
     this.SOCKET_URL = `ws://${this.HOST}/terminals/`;
     this.failures = 0;
     this.interval = null;

app/containers/App.js

@@ -6,10 +6,10 @@ import * as NetworkConnectionActions from '../actions/network_connection_actions
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import rpc from '../rpc-client';
-import { faPause, faTimes, faPlay, faUndo, faCheck, faCircle, faQuestion, faSync, faChevronLeft, faChevronRight, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faStream, faCode, faTerminal, faPause, faTimes, faPlay, faUndo, faCheck, faCircle, faQuestion, faSync, faChevronLeft, faChevronRight, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import settings from 'electron-settings';
-library.add(faPause, faTimes, faUndo, faPlay, faCheck, faCircle, faGithub, faQuestion, faSync, faChevronLeft, faPlus, faChevronRight);
+library.add(faStream, faCode, faTerminal, faPause, faTimes, faUndo, faPlay, faCheck, faCircle, faGithub, faQuestion, faSync, faChevronLeft, faPlus, faChevronRight);
 
 function mapStateToProps(state) {
   return {};

app/main.dev.js

@@ -9,7 +9,7 @@
  */
 import writeLog from './main/log';
 import { app, BrowserWindow, shell, Menu, nativeImage } from 'electron';
-import electronSettings from 'electron-settings';
+
 import * as settings from './settings';
 import debounce from "lodash.debounce";
 import { startServer } from './main/services/server';
@@ -105,6 +105,7 @@ let mainWindow;
 
 
 app.on('ready', async () => {
+  const electronSettings = require('electron-settings');
   if (!electronSettings.get("windowBounds")) {
     electronSettings.set("windowBounds", { width: 800, height: 800 })
   }

app/main/services/server.js

@@ -2,7 +2,7 @@ import defaultShell from '../default-shell';
 var terminals = {};
 var logs = {};
 import getPort from 'get-port';
-// import { ipcMain } from 'electron';
+import { app as electronApp } from 'electron';
 import * as types from '../../constants/eon_list_action_types';
 const express = require('express');
 const app = express();
@@ -17,7 +17,7 @@ module.exports = {
   startServer() {
     const argv = require('yargs').argv;
     return getPort({port: argv.port || 9778}).then((port) => {
-
+      electronApp.TERMINAL_PORT = port;
       writeLog(`Listening for ${types.SELECT_EON}`);
       // ipcMain.on(types.SELECT_EON, (evt) => {
       //   const { sender } = evt;

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "workbench",
   "productName": "Workbench",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "The Openpilot Workbench is to help people fix problems with EON, Openpilot, etc.",
   "main": "./main.prod.js",
   "author": {

package.json

@@ -258,6 +258,7 @@
     "mkdirp": "^0.5.1",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.21",
+    "monaco-editor-webpack-plugin": "^1.7.0",
     "network-list": "^1.1.5",
     "node-arp": "^1.0.6",
     "node-cidr": "^1.0.0",
@@ -272,6 +273,7 @@
     "react-json-view": "^1.19.1",
     "react-lazy-load": "^3.0.13",
     "react-moment": "^0.8.1",
+    "react-monaco-editor": "^0.23.0",
     "react-redux": "^5.0.7",
     "react-resize-detector": "^3.1.2",
     "react-router": "^4.3.1",

webpack.config.renderer.dev.js

@@ -15,6 +15,7 @@ import merge from 'webpack-merge';
 import { spawn, execSync } from 'child_process';
 import baseConfig from './webpack.config.base';
 import CheckNodeEnv from './internals/scripts/CheckNodeEnv';
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 CheckNodeEnv('development');
 
@@ -231,7 +232,10 @@ export default merge.smart(baseConfig, {
           manifest: require(manifest),
           sourceType: 'var'
         }),
-
+    new MonacoWebpackPlugin({
+      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+      languages: ['json','python','cpp','javascript','markdown','ruby','xml','yaml']
+    }),
     new webpack.HotModuleReplacementPlugin({
       // multiStep: true
     }),