[add] webapp on localhost:10501 (default)

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 *.d.ts
-*.js
 *.js.map
+src/lib/**/*.js
 .idea/
+dist/

TODO.md

@@ -0,0 +1,4 @@
+* HMR avec Vue.js ? https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr
+  * réponse : grâce à vue-loader (pour Vue.js)
+
+* Bundle analysis (taille et découpde des bundles) : https://webpack.js.org/guides/code-splitting/

app.yml

@@ -24,15 +24,15 @@ webDiffServers:
 #    frequency: 60000
 
 headServers:
-  - address: https://g1.cgeek.fr
+#  - address: https://g1.cgeek.fr
-    frequency: 60000 # 1'
+#    frequency: 60000 # 1'
-    maxLateBlocks: 3
+#    maxLateBlocks: 3
-    observedPubkey: A5LQXCkx8b6rzppfqdqeHbKPDGmKZtRcqwxP4BSeag5r
+#    observedPubkey: A5LQXCkx8b6rzppfqdqeHbKPDGmKZtRcqwxP4BSeag5r
 
 wwMeta:
-  - address: https://wot-wizard.duniter.org
+#  - address: https://wot-wizard.duniter.org
-    frequency: 60000 # 1'
+#    frequency: 60000 # 1'
-    maxLate: 14400 # 4h
+#    maxLate: 14400 # 4h
 
 mail:
   enabled: false

package.json

@@ -6,23 +6,50 @@
   "author": "cgeek <cem.moreau@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "prepublish": "tsc"
+    "prepublish": "tsc",
+    "build": "tsc && webpack --config webpack.prod.js",
+    "build:front": "webpack --config webpack.prod.js",
+    "start": "webpack-dev-server --config webpack.dev.js --open",
+    "dwatch": "node src/dwatcher.js"
   },
   "dependencies": {
-    "@types/diff": "^4.0.2",
+    "@fortawesome/fontawesome-free": "^5.13.0",
-    "@types/minimist": "^1.2.0",
+    "axios": "^0.19.2",
-    "axios": "^0.19.0",
+    "bootstrap": "^4.4.1",
+    "cors": "^2.8.5",
     "diff": "^4.0.1",
     "duniter": "^1.8.0",
+    "express": "^4.17.1",
     "js-yaml": "^3.12.1",
     "minimist": "^1.2.0",
     "nodemailer": "^6.2.1",
-    "typescript": "^3.4.3"
+    "pug": "^2.0.4",
+    "typescript": "^3.4.3",
+    "vue": "^2.6.11"
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",
+    "@types/bootstrap": "^4.3.2",
+    "@types/cors": "^2.8.6",
+    "@types/diff": "^4.0.2",
+    "@types/express": "^4.17.6",
     "@types/js-yaml": "^3.12.0",
+    "@types/minimist": "^1.2.0",
     "@types/node": "~8.9.4",
-    "@types/nodemailer": "^6.1.1"
+    "@types/nodemailer": "^6.1.1",
+    "@types/pug": "^2.0.4",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.5.3",
+    "file-loader": "^6.0.0",
+    "html-loader": "^1.1.0",
+    "html-webpack-plugin": "^4.2.0",
+    "style-loader": "^1.2.0",
+    "vue-loader": "^15.9.2",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-middleware": "^3.7.2",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^4.2.2"
   }
 }

src/dwatcher.ts

@@ -2,6 +2,7 @@ import * as minimist from 'minimist'
 import * as path from 'path'
 import {dwatch} from './lib/dwatch'
 import {Watcher} from "./lib/types/state";
+import {webappServe} from "./lib/webserver";
 
 process.on('uncaughtException', (err) => {
   // Dunno why this specific exception is not caught
@@ -22,8 +23,8 @@ process.on('unhandledRejection', (err) => {
 
   try {
     const watchers: Watcher[] = await dwatch(argv.conf || path.join(__dirname, '../app.yml'))
+    webappServe(watchers)
   } catch (e) {
-    // webappServe(watchers)
     console.error(e)
   }
 })()

src/lib/webserver.ts

@@ -0,0 +1,18 @@
+import * as express from "express";
+import {Watcher} from "./types/state";
+import * as path from "path";
+import * as cors from "cors";
+
+export function webappServe(watchers: Watcher[], host = 'localhost', port = 10501) {
+  const webapp = express()
+
+  webapp.use(cors())
+
+  webapp.get('/status', (req, res) => {
+    res.send(watchers)
+  })
+
+  webapp.use('/', express.static(path.join(__dirname, '../../dist/')))
+
+  webapp.listen(port, host, () => console.log(`webserver listening at http://${host}:${port}`))
+}

src/webapp/Index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="mt-3">
+        <ul>
+            <li v-for="w in watchers">
+                <i class="fas" v-bind:class="watcherClass(w)"></i>
+                {{ w.name }} <span>{{ w.state }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    import {api} from "./api";
+
+    export default {
+        data: function() {
+            return {
+                watchers: []
+            }
+        },
+        async created() {
+            const dwatcherAPI = api('http://localhost:10501')
+            this.watchers = await dwatcherAPI.getStatus()
+
+        },
+        methods: {
+            watcherClass(watcher) {
+                if (watcher.state === 'OK') {
+                    return ['fa-check', 'text-success']
+                }
+                if (watcher.state === 'FAILURE') {
+                    return ['fa-times', 'text-danger']
+                }
+                return []
+            }
+        }
+    }
+</script>
+
+<!--<style scoped>-->
+<!--</style>-->

src/webapp/api.js

@@ -0,0 +1,15 @@
+import * as axios from "axios";
+
+export function api(baseURL) {
+
+    const instance = axios.default.create({
+        baseURL
+    })
+
+    return {
+        async getStatus() {
+            const status = await instance.get('/status')
+            return status.data
+        }
+    }
+}

src/webapp/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+    <div id="app">
+    </div>
+</body>
+</html>
+
+

src/webapp/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import App from './Index.vue'
+import '@fortawesome/fontawesome-free/css/all.min.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+new Vue({
+    el: '#app',
+    render: h => h(App)
+})

tsconfig.json

@@ -14,6 +14,7 @@
   },
   "include": [
     "src/*",
+    "src/**/*",
     "../node_modules/@types/node/globals.d.ts"
   ],
   "compileOnSave": true

webpack.common.js

@@ -0,0 +1,55 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+    context: path.resolve(__dirname, './src/webapp/'),
+    entry: './index.js',
+    output: {
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new HtmlWebpackPlugin({
+            title: 'Output Management',
+            template: 'index.html'
+        }),
+        new VueLoaderPlugin()
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader'
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    'vue-style-loader',
+                    'css-loader'
+                ]
+            },
+            // {
+            //   test: /\.css$/,
+            //   use: [
+            //     'style-loader',
+            //     'css-loader',
+            //   ],
+            // },
+            {
+                test: /\.(png|svg|jpg|gif)$/,
+                use: [
+                    'file-loader',
+                ],
+            },
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/,
+                use: [
+                    'file-loader',
+                ],
+            },
+        ],
+    },
+};

webpack.dev.js

@@ -0,0 +1,10 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: './dist',
+  },
+});

webpack.prod.js

@@ -0,0 +1,6 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+});