Create Demo Server Target (#433)

frontend/package.json

@@ -6,6 +6,7 @@
     "release": "cross-env NODE_ENV=production node ./tool/build.js",
     "build": "cross-env NODE_ENV=dev node ./tool/build.js",
     "dev": "cross-env NODE_ENV=dev node tool/dev-server.js",
+    "demo": "cross-env NODE_ENV=demo node tool/demo-server.js",
     "lint": "./node_modules/fecs/bin/fecs --rule"
   },
   "engines": {

frontend/src/common/util/http.js

@@ -10,7 +10,7 @@ const instance = axios.create({
   timeout: 30000,
 });
 
-// for better ux, don't send the error msg because there will be too mutch error
+// for better ux, don't send the error msg because there will be too many errors
 const responseErrorStatus = (response) => {
   const data = response.data;
   // if (data[STATUS] !== 0) {
@@ -20,13 +20,13 @@ const responseErrorStatus = (response) => {
   return data;
 };
 
-// for better ux, don't send the error msg because there will be too mutch error
+// for better ux, don't send the error msg because there will be too many errors
 const responseNetError = (error) => {
   // Notification.error('net error');
   return Promise.reject(error);
 };
 
-// post from
+// post form
 const formInstance = axios.create({
   baseURL: '/',
   timeout: 3000,

frontend/src/scalars/ui/Chart.vue

@@ -144,6 +144,7 @@ export default {
   },
   data() {
     return {
+      isDemo: process.env.NODE_ENV === 'demo',
       width: 400,
       height: 300,
       isExpand: false,
@@ -183,11 +184,13 @@ export default {
     this.initChart(this.tagInfo);
     this.toggleSelectZoom(true);
 
-    if (this.running) {
+    if (this.running && !this.isDemo) {
       this.startInterval();
     }
 
     this.$watch('running', function(running) {
+      // if it is demo, do not trigger interval
+      running = running && !this.isDemo;
       running ? this.startInterval() : this.stopInterval();
     });
   },
@@ -340,6 +343,7 @@ export default {
         };
         return getPluginScalarsScalars(params);
       });
+
       axios.all(requestList).then((resArray) => {
         if (resArray.every((res) => res.status === 0)) {
           this.originData = resArray.map((res) => res.data);

frontend/src/scalars/ui/Config.vue

@@ -68,6 +68,7 @@
       class="visual-dl-page-run-toggle"
       dark
       block
+      v-if="!isDemo"
     >
       {{ config.running ? 'Running' : 'Stopped' }}
     </v-btn>
@@ -106,6 +107,7 @@ export default {
         'default', 'descending', 'ascending', 'nearest',
       ],
       smoothingValue: this.config.smoothing,
+      isDemo: process.env.NODE_ENV === 'demo',
     };
   },
   watch: {

frontend/tool/demo-server.js

+'use strict';
+
+process.env.NODE_ENV = 'demo'; // this is the only diff from dev server
+let devPort = 8999;
+let opn = require('opn');
+let express = require('express');
+let webpack = require('webpack');
+let proxyMiddleware = require('http-proxy-middleware');
+let webpackConfig = require('./webpack.demo.config');
+let autoresponse = require('autoresponse');
+let path = require('path');
+
+let port = devPort;
+let autoOpenBrowser = false;
+
+let app = express();
+let compiler = webpack(webpackConfig);
+
+let devMiddleware = require('webpack-dev-middleware')(compiler, {
+    publicPath: webpackConfig.output.publicPath,
+    disableHostCheck: true,
+    quiet: false,
+    noInfo: false,
+    stats: {
+        colors: true
+    },
+    headers: {'Access-Control-Allow-Origin': '*'}
+});
+
+let hotMiddleware = require('webpack-hot-middleware')(compiler, {
+    heartbeat: 2000
+});
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+        hotMiddleware.publish({
+            action: 'reload'
+        });
+        cb();
+    });
+});
+
+// autoresponse
+let AutoresponseMatchs = ['data'];
+let matchsReg = new RegExp(AutoresponseMatchs.join('\|'));
+let excludeReg = /\.(html|js|map)$/;
+let isAutoresponseRequest = (path) => {
+    return !excludeReg.test(path) && matchsReg.test(path);
+}
+
+app.use(autoresponse({
+    logLevel: 'debug',
+    root: path.dirname(__dirname),
+    rules: [
+        {
+            match: isAutoresponseRequest,
+            method: ['get', 'post', , 'delete']
+        }
+    ]
+}));
+
+// serve webpack bundle output
+app.use(devMiddleware);
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware);
+
+let uri = 'http://localhost:' + port;
+
+let _resolve;
+let readyPromise = new Promise(resolve => {
+    _resolve = resolve;
+});
+
+console.log('> Starting demo server...');
+devMiddleware.waitUntilValid(() => {
+    console.log('> Listening at ' + uri + '\n');
+    // when env is testing, don't need open it
+    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+        opn(uri);
+    }
+
+    _resolve();
+});
+
+let server = app.listen(port);
+
+module.exports = {
+    ready: readyPromise,
+    close() {
+        server.close();
+    }
+};

frontend/tool/webpack.demo.config.js

+'use strict';
+const webpack = require('webpack');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+let merge = require('webpack-merge');
+let baseWebpackConfig = require('./webpack.config');
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+    baseWebpackConfig.entry[name] = ['./tool/dev-client'].concat(baseWebpackConfig.entry[name]);
+});
+
+/**
+ * demo config
+ *
+ * @type {Object}
+ */
+
+module.exports = merge(baseWebpackConfig, {
+    // cheap-module-eval-source-map is faster for development
+    devtool: '#cheap-module-eval-source-map',
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                'NODE_ENV': '"demo"'  //  only diff from webpack.dev.config.js
+            }
+        }),
+        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NoEmitOnErrorsPlugin(),
+        // https://github.com/ampedandwired/html-webpack-plugin
+        new FriendlyErrorsPlugin()
+    ]
+});

scripts/start_demo_server.sh

+#!/bin/bash
+set -ex
+
+CURRENT_DIR=`pwd`
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+cd $SCRIPT_DIR/../frontend
+export PYTHONPATH=$PYTHONPATH:"$SCRIPT_DIR/.."
+
+rm -rf ./dist
+mkdir dist
+npm run build
+
+# the config is the only diff from dev_server (webpack.demo.config.js)
+./node_modules/.bin/webpack --watch --config tool/webpack.demo.config.js --output-path=../visualdl/server/dist &
+# Track webpack pid
+WEBPACKPID=$!
+
+function finish {
+    kill -9 $WEBPACKPID
+}
+
+trap finish EXIT HUP INT QUIT PIPE TERM
+
+cd $CURRENT_DIR
+
+# Run the visualDL with local PATH
+python ${SCRIPT_DIR}/../visualdl/server/visualDL "$@"

scripts/start_dev_server.sh

@@ -8,6 +8,10 @@ SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 cd $SCRIPT_DIR/../frontend
 export PYTHONPATH=$PYTHONPATH:"$SCRIPT_DIR/.."
 
+rm -rf ./dist
+mkdir dist
+npm run build
+
 ./node_modules/.bin/webpack --watch --config tool/webpack.dev.config.js --output-path=../visualdl/server/dist &
 # Track webpack pid
 WEBPACKPID=$!