From 5c7a36c741236d753c3755995ff5edf88fda06e7 Mon Sep 17 00:00:00 2001 From: "Joshua F. Rountree" Date: Wed, 6 Feb 2019 16:45:36 -0500 Subject: [PATCH] Adds some new UI for EON screens. Fixes reboot command. --- app/components/Editor.js | 77 +++++++++++++++++++++++++++++++ app/components/EonDetail/index.js | 45 ++++++++++++++++-- app/components/Terminal.js | 2 +- app/containers/App.js | 4 +- app/main.dev.js | 3 +- app/main/services/server.js | 4 +- app/package.json | 2 +- package.json | 2 + webpack.config.renderer.dev.js | 6 ++- 9 files changed, 133 insertions(+), 12 deletions(-) create mode 100644 app/components/Editor.js diff --git a/app/components/Editor.js b/app/components/Editor.js new file mode 100644 index 0000000..c83554c --- /dev/null +++ b/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 (
+ //
); + return (
); + } +} + +export default Editor; \ No newline at end of file diff --git a/app/components/EonDetail/index.js b/app/components/EonDetail/index.js index 0802314..df8d16d 100644 --- a/app/components/EonDetail/index.js +++ b/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 { ]; let CommandPane; + const isLiveDataTab = (activeTab === 'live_data' || serviceIds.includes(activeTab)); if (activeCommand) { CommandPane = commands[activeCommand]; } + + // STASHING THIS FOR LATER. + // + // { this.setTab('editor'); }}> + // Code Editor + // + // return ( + + + {statePanes} diff --git a/app/components/Terminal.js b/app/components/Terminal.js index 0d26859..93fb9e0 100644 --- a/app/components/Terminal.js +++ b/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; diff --git a/app/containers/App.js b/app/containers/App.js index 62c5318..eba4ffe 100644 --- a/app/containers/App.js +++ b/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 {}; diff --git a/app/main.dev.js b/app/main.dev.js index 56fe77a..579004c 100644 --- a/app/main.dev.js +++ b/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 }) } diff --git a/app/main/services/server.js b/app/main/services/server.js index 9e1634c..648342b 100644 --- a/app/main/services/server.js +++ b/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; diff --git a/app/package.json b/app/package.json index 0688e3f..7023146 100644 --- a/app/package.json +++ b/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": { diff --git a/package.json b/package.json index 71820b9..9612585 100644 --- a/package.json +++ b/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", diff --git a/webpack.config.renderer.dev.js b/webpack.config.renderer.dev.js index 737ec61..7b67c1d 100644 --- a/webpack.config.renderer.dev.js +++ b/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 }),