Enrich Missing APIs and Disk Info

.babelrc

@@ -1,18 +1,13 @@
 {
   "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
+    ["@babel/preset-env", {
+      "modules": false
+    }]
   ],
-  "plugins": ["transform-runtime"],
+  "plugins": ["@babel/plugin-transform-runtime"],
   "env": {
     "test": {
-      "presets": ["env", "stage-2"],
-      "plugins": ["istanbul"]
+      "presets": ["@babel/preset-env"]
     }
   }
 }

.dockerignore

@@ -1,2 +1,7 @@
 node_modules
 npm-debug.log
+dist
+.git
+.gitignore
+images
+*.md

.eslintrc.js

@@ -6,18 +6,23 @@ module.exports = {
     "jQuery": true
   },
   root: true,
-  parser: 'babel-eslint',
+  parser: 'vue-eslint-parser',
   parserOptions: {
+    parser: '@babel/eslint-parser',
     sourceType: 'module'
   },
   env: {
     browser: true,
   },
   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
-  extends: 'standard',
+  extends: [
+    'standard',
+    'plugin:vue/essential'
+  ],
   // required to lint *.vue files
   plugins: [
-    'html'
+    'html',
+    'vue'
   ],
   // add your custom rules here
   'rules': {
@@ -26,6 +31,8 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 0,
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    // project uses single-word component names by convention
+    'vue/multi-word-component-names': 0
   }
 }

Dockerfile

@@ -1,11 +1,14 @@
-FROM node:10 as base
+FROM node:22-alpine AS base
 
 WORKDIR /opt/cruise-control-ui
 COPY package*.json ./
-RUN npm install
+RUN npm ci
 COPY . .
 RUN npm run build
 
-FROM nginx
+FROM nginx:stable-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=base /opt/cruise-control-ui/dist/ /usr/share/nginx/html/
-EXPOSE 80
+EXPOSE 80
+HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://localhost/ || exit 1
+CMD ["nginx", "-g", "daemon off;"]

build/build.js

@@ -5,7 +5,7 @@ require('./check-versions')()
 process.env.NODE_ENV = 'production'
 
 var ora = require('ora')
-var rm = require('rimraf')
+var { rimrafSync } = require('rimraf')
 var path = require('path')
 var chalk = require('chalk')
 var webpack = require('webpack')
@@ -15,28 +15,26 @@ var webpackConfig = require('./webpack.prod.conf')
 var spinner = ora('building for production...')
 spinner.start()
 
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+rimrafSync(path.join(config.build.assetsRoot, config.build.assetsSubDirectory))
+webpack(webpackConfig, function (err, stats) {
+  spinner.stop()
   if (err) throw err
-  webpack(webpackConfig, function (err, stats) {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(stats.toString({
-      colors: true,
-      modules: false,
-      children: false,
-      chunks: false,
-      chunkModules: false
-    }) + '\n\n')
+  process.stdout.write(stats.toString({
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }) + '\n\n')
 
-    if (stats.hasErrors()) {
-      console.log(chalk.red('  Build failed with errors.\n'))
-      process.exit(1)
-    }
+  if (stats.hasErrors()) {
+    console.log(chalk.red('  Build failed with errors.\n'))
+    process.exit(1)
+  }
 
-    console.log(chalk.cyan('  Build complete.\n'))
-    console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
+  console.log(chalk.cyan('  Build complete.\n'))
+  console.log(chalk.yellow(
+    '  Tip: built files are meant to be served over an HTTP server.\n' +
+    '  Opening index.html over file:// won\'t work.\n'
+  ))
 })

build/check-versions.js

@@ -3,11 +3,19 @@
 var chalk = require('chalk')
 var semver = require('semver')
 var packageConfig = require('../package.json')
-var shell = require('shelljs')
 function exec (cmd) {
   return require('child_process').execSync(cmd).toString().trim()
 }
 
+function which (bin) {
+  try {
+    exec('which ' + bin)
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
 var versionRequirements = [
   {
     name: 'node',
@@ -16,7 +24,7 @@ var versionRequirements = [
   }
 ]
 
-if (shell.which('npm')) {
+if (which('npm')) {
   versionRequirements.push({
     name: 'npm',
     currentVersion: exec('npm --version'),

build/dev-client.js

@@ -1,11 +1,4 @@
 /* Copyright 2017-2019 LinkedIn Corp. Licensed under the BSD 2-Clause License (the "License"). See License in the project root for license information. */
 
 /* eslint-disable */
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})
+require('webpack-hot-middleware/client?noInfo=true&reload=true')

build/dev-server.js

@@ -7,11 +7,11 @@ if (!process.env.NODE_ENV) {
   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 }
 
-var opn = require('opn')
+var open = require('open')
 var path = require('path')
 var express = require('express')
 var webpack = require('webpack')
-var proxyMiddleware = require('http-proxy-middleware')
+var { createProxyMiddleware } = require('http-proxy-middleware')
 var webpackConfig = require('./webpack.dev.conf')
 
 // default port where dev server listens for incoming traffic
@@ -27,28 +27,22 @@ var compiler = webpack(webpackConfig)
 
 var devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
-  quiet: true
 })
 
 var hotMiddleware = require('webpack-hot-middleware')(compiler, {
   log: false,
   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()
-  })
-})
 
 // proxy api requests
 Object.keys(proxyTable).forEach(function (context) {
   var options = proxyTable[context]
   if (typeof options === 'string') {
     options = { target: options }
   }
-  app.use(proxyMiddleware(options.filter || context, options))
+  // Use path filter instead of app.use(context, ...) to preserve the full
+  // request path (e.g. /kafkacruisecontrol/state) when forwarding to CC.
+  app.use(createProxyMiddleware({ ...options, pathFilter: context }))
 })
 
 // handle fallback for HTML5 history API
@@ -63,9 +57,9 @@ app.use(hotMiddleware)
 
 // serve pure static assets
 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
+app.use(staticPath.startsWith('/') ? staticPath : `/${staticPath}`, express.static(path.join(__dirname, '../static')))
 
-var uri = 'http://0.0.0.0:' + port
+var uri = 'http://localhost:' + port
 
 var _resolve
 var readyPromise = new Promise(resolve => {
@@ -77,7 +71,7 @@ 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)
+    open(uri)
   }
   _resolve()
 })

build/utils.js

@@ -2,7 +2,7 @@
 
 var path = require('path')
 var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 exports.assetsPath = function (_path) {
   var assetsSubDirectory = process.env.NODE_ENV === 'production'
@@ -21,7 +21,7 @@ exports.cssLoaders = function (options) {
     }
   }
 
-  // generate loader string to be used with extract text plugin
+  // generate loader string to be used with mini-css-extract-plugin
   function generateLoaders (loader, loaderOptions) {
     var loaders = [cssLoader]
     if (loader) {
@@ -36,10 +36,7 @@ exports.cssLoaders = function (options) {
     // Extract CSS when that option is specified
     // (which is the case during production build)
     if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
+      return [MiniCssExtractPlugin.loader].concat(loaders)
     } else {
       return ['vue-style-loader'].concat(loaders)
     }

build/vue-loader.conf.js

@@ -11,7 +11,7 @@ module.exports = {
       : config.dev.cssSourceMap,
     extract: isProduction
   }),
-  transformToRequire: {
+  transformAssetUrls: {
     video: 'src',
     source: 'src',
     img: 'src',

build/webpack.base.conf.js

@@ -2,10 +2,11 @@
 
 var path = require('path')
 var webpack = require('webpack')
-var fs = require('fs')
 var utils = require('./utils')
 var config = require('../config')
 var vueLoaderConfig = require('./vue-loader.conf')
+var ESLintPlugin = require('eslint-webpack-plugin')
+var { VueLoaderPlugin } = require('vue-loader')
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -18,7 +19,16 @@ module.exports = {
       jquery: 'jquery',
       'window.jQuery': 'jquery',
       jQuery: 'jquery'
-    })
+    }),
+    new ESLintPlugin({
+      extensions: ['js', 'vue'],
+      context: resolve('src'),
+      failOnError: true,
+      failOnWarning: false,
+      emitWarning: true,
+      emitError: true
+    }),
+    new VueLoaderPlugin()
   ],
   entry: {
     app: './src/main.js'
@@ -40,15 +50,6 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        include: [resolve('src'), resolve('test')],
-        options: {
-          formatter: require('eslint-friendly-formatter')
-        }
-      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',
@@ -64,23 +65,23 @@ module.exports = {
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          name: utils.assetsPath('img/[name].[contenthash:7].[ext]')
         }
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+          name: utils.assetsPath('media/[name].[contenthash:7].[ext]')
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          name: utils.assetsPath('fonts/[name].[contenthash:7].[ext]')
         }
       }
     ]