Move the ui code over into the client, and just let the client serve it

This simplifies development a bit and makes it easier to view the status page
straight from a client's `make run`

Jenkinsfile

@@ -61,7 +61,6 @@ pipeline {
             parallel {
                 stage('Evergreen Client') {
                     steps {
-                        sh 'make -C distribution/ui check'
                         sh 'make -C distribution/client check'
                     }
                     post {

activate

@@ -1,3 +1,3 @@
 #!/bin/sh
 
-export PATH=./node_modules/.bin:${PWD}tools:${PATH}
+export PATH=./node_modules/.bin:${PWD}/tools:${PATH}

distribution/client/.gitignore

@@ -1,2 +1,4 @@
 node_modules/
 coverage/
+public/main.js
+public/main.js.map

distribution/client/Makefile

@@ -1,9 +1,14 @@
 include ../../node.mk
 
-run: depends
+PATH:=./node_modules/.bin:../../tools:$(PATH)
+
+build: depends
+	webpack-cli
+
+run: depends build
 	EVERGREEN_HOME=/tmp/ \
 		EVERGREEN_ENDPOINT=http://127.0.0.1:3030 \
 		FLAVOR=docker-cloud \
-		$(NODE) npm run client
+		npm run client
 
 .PHONY: run

distribution/client/config/default.json

@@ -1,4 +1,5 @@
 {
     "host" : "0.0.0.0",
-    "port" : 8081
+    "port" : 8081,
+    "public": "../public/"
 }

distribution/client/config/test.json

@@ -0,0 +1,5 @@
+{
+    "host" : "0.0.0.0",
+    "port" : 8081,
+    "public": "../public/"
+}

distribution/client/package.json

@@ -12,13 +12,20 @@
   "author": "R Tyler Croy",
   "license": "GPL-3.0",
   "devDependencies": {
+    "css-loader": "^1.0.0",
     "eslint": "^4.19.1",
     "hoek": "^5.0.4",
+    "html-webpack-plugin": "^3.2.0",
     "jest": "^22.4.4",
-    "memfs": "^2.9.4"
+    "memfs": "^2.9.4",
+    "source-map-loader": "^0.2.4",
+    "style-loader": "^0.23.0",
+    "webpack": "^4.17.1",
+    "webpack-cli": "^3.1.0"
   },
   "dependencies": {
     "@feathersjs/configuration": "^2.0.0",
+    "@feathersjs/express": "^1.2.3",
     "@feathersjs/feathers": "^3.1.7",
     "@feathersjs/rest-client": "^1.4.1",
     "@feathersjs/socketio": "^3.2.2",
@@ -42,6 +49,10 @@
   },
   "jest": {
     "collectCoverage": true,
+    "coveragePathIgnorePatterns": [
+      "<rootDir>/ui/index.js",
+      "<rootDir>/src/lib/ui.js"
+    ],
     "coverageReporters": [
       "json",
       "lcov",

distribution/client/public/index.html

@@ -107,5 +107,5 @@
                 </a>
             </footer>
         </div>
-    </body>
+    <script type="text/javascript" src="main.js"></script></body>
 </html>

distribution/client/src/lib/ui.js

@@ -5,6 +5,7 @@
  */
 
 const feathers      = require('@feathersjs/feathers');
+const express       = require('@feathersjs/express');
 const socketio      = require('@feathersjs/socketio');
 const configuration = require('@feathersjs/configuration');
 const logger        = require('winston');
@@ -18,6 +19,10 @@ class MessageService {
     this.recent = [];
   }
 
+  async find() {
+    return this.recent;
+  }
+
   async create(data, params) {
     if (params.log) {
       logger[params.log](data, params.error);
@@ -33,11 +38,15 @@ class MessageService {
 
 class UI {
   constructor() {
-    const app = feathers();
+    const app = express(feathers());
     this.app = app;
-    app.configure(configuration());
-    app.configure(socketio());
 
+    app.configure(configuration());
+    app.configure(express.rest());
+    app.configure(socketio());
+    app.use('/', express.static(__dirname + app.get('public')));
+
+    app.use(express.notFound());
     app.use('messages', new MessageService(app));
 
     /*

distribution/client/ui-test/index.test.js

@@ -1,5 +1,5 @@
 
-const index = require('../src/index');
+const index = require('../ui/index');
 
 describe('Application root', () => {
   it('should be an object', () => {

distribution/client/ui/index.js

@@ -4,8 +4,7 @@ const feathers = require('@feathersjs/feathers');
 const socketio = require('@feathersjs/socketio-client');
 const io       = require('socket.io-client');
 
-const socket = io('/', {
-  path: '/evergreen/socket.io',
+const socket = io('', {
   reconnection: true,
   reconnectionDelay: 1000,
   reconnectionDelayMax : 5000,
@@ -20,7 +19,13 @@ socket.on('connect', () => {
   for (let el of document.getElementsByClassName('status-indicator')) {
     el.setAttribute('class', 'status-indicator connected');
   }
+
+  socket.emit('find', 'messages', {}, (error, data) => {
+    console.log('Found messages', data);
+    data.forEach(m => window.addEvergreenMessage(m));
+  });
 });
+
 socket.on('disconnect', () => {
   for (let el of document.getElementsByClassName('status-indicator')) {
     el.setAttribute('class', 'status-indicator disconnected');
@@ -32,21 +37,21 @@ socket.on('reconnect', () => {
 
 app.service('messages').on('created', (data) => {
   console.log('Received message from the backend:', data);
-  window.addEvergreenMessage(data.message);
+  window.addEvergreenMessage(data);
 });
 
 /*
  * Really crappy manual HTML construction, this should clearly be improved in
  * the future
  */
-window.addEvergreenMessage = (message) => {
+window.addEvergreenMessage = (data) => {
   const containers = document.getElementsByClassName('messages');
 
   const el = document.createElement('div');
   el.setAttribute('class', 'message');
 
   const m = document.createElement('pre');
-  m.innerHTML = message;
+  m.innerHTML = data.message;
 
   el.appendChild(m);
 

distribution/client/webpack.config.js

@@ -1,9 +1,8 @@
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   entry: {
-    main: './src/index.js',
+    main: './ui/index.js',
   },
   devServer: {
     contentBase: path.join(__dirname, 'public'),
@@ -21,17 +20,12 @@ module.exports = {
     ]
   },
   plugins: [
-    new HtmlWebpackPlugin({
-      template: "./public/index.html",
-      excludeChunks: [
-      ],
-    }),
   ],
   resolve: {
     extensions: ['.tsx', '.ts', '.js', '.jsx', '.json']
   },
   output: {
-    path: path.resolve(__dirname, 'build'),
+    path: path.resolve(__dirname, 'public'),
   }
 };
 

distribution/ui/.eslintrc.json

@@ -1,47 +0,0 @@
-{
-  "env": {
-    "es6": true,
-    "browser":true,
-    "jest": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2017
-  },
-  "extends": "eslint:recommended",
-  "rules": {
-    "no-console": [
-        0
-    ],
-    "indent": [
-      "error",
-      2
-    ],
-    "linebreak-style": [
-      "error",
-      "unix"
-    ],
-    "quotes": [
-      "error",
-      "single"
-    ],
-    "semi": [
-      "error",
-      "always"
-    ],
-    "prefer-arrow-callback": [
-      "error",
-      { "allowNamedFunctions": true }
-    ],
-    "no-var": "error",
-    "keyword-spacing": "error",
-    "block-spacing": "error",
-    "space-before-blocks": "error",
-    "spaced-comment": "error",
-    "space-infix-ops": "error",
-    "semi-spacing": "error",
-    "template-tag-spacing": "error",
-    "curly": "error",
-    "brace-style": "error",
-    "no-trailing-spaces": "error"
-  }
-}

distribution/ui/.gitignore

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

distribution/ui/Makefile

@@ -1,10 +0,0 @@
-include ../../node.mk
-PATH:=./node_modules/.bin:../../tools:$(PATH)
-
-build:
-	webpack-cli
-
-run:
-	webpack-dev-server
-
-.PHONY: build run

distribution/ui/package.json

@@ -1,38 +0,0 @@
-{
-  "name": "evergreen-ui",
-  "version": "1.0.0",
-  "description": "Evergreen UI for rendering client-side status information",
-  "main": "src/index.js",
-  "scripts": {
-    "test": "jest",
-    "eslint": "eslint src/. test/. --config .eslintrc.json",
-    "jest": "jest"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jenkins-infra/evergreen.git"
-  },
-  "author": "R Tyler Croy",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/jenkins-infra/evergreen/issues"
-  },
-  "homepage": "https://github.com/jenkins-infra/evergreen#readme",
-  "devDependencies": {
-    "css-loader": "^1.0.0",
-    "eslint": "^5.4.0",
-    "eslint-cli": "^1.1.1",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.5.0",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^0.23.0",
-    "webpack": "^4.17.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.6"
-  },
-  "dependencies": {
-    "@feathersjs/feathers": "^3.1.7",
-    "@feathersjs/socketio-client": "^1.1.0",
-    "socket.io-client": "^2.1.1"
-  }
-}