Fix security issues by bumping all dependencies (#4284)

* Fix security issues by bumping all dependencies.

* Bump node version to latest

.github/workflows/unit_tests.yml

@@ -28,7 +28,7 @@ jobs:
     name: JS unit tests
     runs-on: ubuntu-18.04
     container:
-      image: node:10.16.0-stretch
+      image: node:14-stretch
     steps:
     - name: Checkout code
       # actions/checkout@v2

web/app/index_bundle.js.lodash.tmpl

@@ -9,12 +9,12 @@
       id && (js.id = id);
       fjs.parentNode.insertBefore(js, fjs);
     };
-<% for (let chunk in htmlWebpackPlugin.files.chunks) { %>
+<% for (let chunk in htmlWebpackPlugin.files.js) { %>
   <% if (compilation.compiler.outputFileSystem.constructor.name === 'MemoryFileSystem') { %>
-    add('http://localhost:8080/<%= htmlWebpackPlugin.files.chunks[chunk].entry %>');
+    add('http://localhost:8080/<%= htmlWebpackPlugin.files.js[chunk] %>');
   <% } else { %>
     let root = fjs.src.substring(0, fjs.src.indexOf("dist"));
-    add(root+'<%= htmlWebpackPlugin.files.chunks[chunk].entry %>');
+    add(root+'<%= htmlWebpackPlugin.files.js[chunk] %>');
   <% } %>
 <% } %>
 }(document, 'script'));

web/app/js/components/ErrorBanner.jsx

@@ -62,10 +62,6 @@ class ErrorSnackbar extends React.Component {
         TransitionComponent={props => <Slide direction="up" {...props} />}
         ContentProps={{
           'aria-describedby': 'message-id',
-          variantMapping: { // https://github.com/mui-org/material-ui/issues/13144
-            body1: 'div',
-            body2: 'div',
-          },
           className: classNames(classes.error, classes.margin),
         }}
         message={(

web/app/js/components/Navigation.jsx

@@ -449,7 +449,7 @@ class NavigationBase extends React.Component {
         <Divider />
         <MenuList>
           <Typography variant="button" component="div" className={classes.sidebarHeading}>
-                Cluster
+            Cluster
           </Typography>
           { this.menuItem('/namespaces', 'Namespaces', namespaceIcon) }
 
@@ -468,6 +468,7 @@ class NavigationBase extends React.Component {
           value={{ name: formattedNamespaceName.toUpperCase() }}
           options={filteredNamespaces}
           autoSelect
+          getOptionSelected={option => option.name === selectedNamespace}
           getOptionLabel={option => { if (option.name !== '_all') { return option.name; } else { return 'All Namespaces'; } }}
           onChange={this.handleNamespaceChange}
           size="small"
@@ -495,7 +496,7 @@ class NavigationBase extends React.Component {
 
         <MenuList>
           <Typography variant="button" component="div" className={classes.sidebarHeading}>
-                Workloads
+            Workloads
           </Typography>
 
           { this.menuItem(`/namespaces/${selectedNamespace}/cronjobs`, 'Cron Jobs', cronJobIcon) }
@@ -517,7 +518,7 @@ class NavigationBase extends React.Component {
 
         <MenuList>
           <Typography variant="button" component="div" className={classes.sidebarHeading}>
-                Configuration
+            Configuration
           </Typography>
 
           { this.menuItem(`/namespaces/${selectedNamespace}/trafficsplits`, 'Traffic Splits', <FontAwesomeIcon icon={faFilter} className={classes.shrinkIcon} />) }
@@ -526,7 +527,7 @@ class NavigationBase extends React.Component {
         <Divider />
         <MenuList>
           <Typography variant="button" component="div" className={classes.sidebarHeading}>
-                Tools
+            Tools
           </Typography>
 
           { this.menuItem('/tap', 'Tap', <FontAwesomeIcon icon={faMicroscope} className={classes.shrinkIcon} />) }

web/app/js/components/ServiceMesh.jsx

@@ -1,4 +1,4 @@
-import { distanceInWordsToNow, subSeconds } from 'date-fns';
+import { formatDistanceToNow, subSeconds } from 'date-fns';
 import { handlePageVisibility, withPageVisibility } from './util/PageVisibility.jsx';
 import BaseTable from './BaseTable.jsx';
 import CallToAction from './CallToAction.jsx';
@@ -122,7 +122,7 @@ class ServiceMesh extends React.Component {
         name: component,
         pods: _map(byDeployName[deployName], p => {
           const uptimeSec = !p.uptime ? 0 : parseInt(p.uptime.split('.')[0], 10);
-          const uptime = distanceInWordsToNow(subSeconds(Date.now(), uptimeSec));
+          const uptime = formatDistanceToNow(subSeconds(Date.now(), uptimeSec));
 
           return {
             name: p.name,

web/app/js/components/TopRoutes.jsx

@@ -215,7 +215,7 @@ class TopRoutes extends React.Component {
                 variant="outlined"
                 disabled={requestInProgress || !query.namespace || !query.resource_type}
                 onClick={this.handleBtnClick(true)}>
-              Start
+                Start
               </Button>
             </Grid>
 
@@ -225,7 +225,7 @@ class TopRoutes extends React.Component {
                 variant="outlined"
                 disabled={!requestInProgress}
                 onClick={this.handleBtnClick(false)}>
-              Stop
+                Stop
               </Button>
             </Grid>
           </Grid>

web/app/package.json

@@ -4,81 +4,82 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.2.0-7",
-    "@fortawesome/free-regular-svg-icons": "5.9.0",
-    "@fortawesome/free-solid-svg-icons": "5.9.0",
-    "@fortawesome/react-fontawesome": "0.1.4",
-    "@material-ui/core": "4.7.1",
-    "@material-ui/icons": "4.5.1",
-    "@material-ui/lab": "^4.0.0-alpha.36",
+    "@fortawesome/fontawesome-svg-core": "1.2.28",
+    "@fortawesome/free-regular-svg-icons": "5.13.0",
+    "@fortawesome/free-solid-svg-icons": "5.13.0",
+    "@fortawesome/react-fontawesome": "0.1.9",
+    "@material-ui/core": "4.9.11",
+    "@material-ui/icons": "4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.50",
     "classnames": "2.2.6",
     "css-mediaquery": "^0.1.2",
-    "d3-drag": "1.2.3",
+    "d3-drag": "1.2.5",
     "d3-force": "2.0.1",
-    "d3-format": "1.3.2",
-    "d3-selection": "1.4.0",
-    "date-fns": "1.30.1",
-    "lodash": "4.17.13",
+    "d3-format": "1.4.4",
+    "d3-selection": "1.4.1",
+    "date-fns": "2.12.0",
+    "lodash": "4.17.15",
     "path": "0.12.7",
-    "prop-types": "15.6.1",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "prop-types": "15.7.2",
+    "query-string": "^6.12.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
     "react-linkify": "1.0.0-alpha",
-    "react-page-visibility": "^5.1.0",
+    "react-page-visibility": "^6.1.0",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
     "react-router-prop-types": "1.0.4",
-    "use-query-params": "0.4.4",
-    "whatwg-fetch": "2.0.3"
+    "use-query-params": "1.1.1",
+    "whatwg-fetch": "3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0",
-    "@babel/plugin-proposal-class-properties": "7.5.5",
-    "@babel/preset-env": "7.5.5",
-    "@babel/preset-react": "7.0.0",
-    "@babel/runtime": "7.5.5",
-    "@wdio/cli": "5.15.4",
-    "@wdio/local-runner": "5.15.4",
-    "@wdio/mocha-framework": "5.15.1",
-    "@wdio/sync": "5.15.1",
-    "babel-eslint": "8.0.3",
-    "babel-jest": "24.9.0",
-    "babel-loader": "8.0.6",
-    "babel-plugin-import": "1.7.0",
+    "@babel/core": "7.9.0",
+    "@babel/plugin-proposal-class-properties": "7.8.3",
+    "@babel/preset-env": "7.9.5",
+    "@babel/preset-react": "7.9.4",
+    "@babel/runtime": "7.9.2",
+    "@wdio/cli": "6.1.2",
+    "@wdio/local-runner": "6.1.2",
+    "@wdio/mocha-framework": "6.1.0",
+    "@wdio/sync": "6.1.0",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "25.4.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-import": "1.13.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "chai": "4.0.1",
+    "chai": "4.2.0",
     "chai-webdriverio": "1.0.0",
-    "chromedriver": "77.0.0",
+    "chromedriver": "81.0.0",
     "clean-webpack-plugin": "3.0.0",
-    "css-loader": "2.1.1",
-    "enzyme": "3.7.0",
-    "enzyme-adapter-react-16": "1.15.1",
-    "eslint": "6.7.2",
-    "eslint-config-airbnb": "18.0.1",
-    "eslint-loader": "3.0.3",
-    "eslint-plugin-import": "2.19.1",
+    "css-loader": "3.5.2",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.2",
+    "eslint": "6.8.0",
+    "eslint-config-airbnb": "18.1.0",
+    "eslint-loader": "4.0.0",
+    "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-promise": "4.2.1",
-    "eslint-plugin-react": "7.17.0",
-    "eslint-plugin-react-hooks": "1.7.0",
-    "file-loader": "2.0.0",
-    "history": "4.7.2",
-    "html-webpack-plugin": "3.2.0",
-    "jest": "24.9.0",
-    "jest-dot-reporter": "1.0.7",
-    "jest-enzyme": "7.0.2",
+    "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react-hooks": "3.0.0",
+    "file-loader": "6.0.0",
+    "history": "4.10.1",
+    "html-webpack-plugin": "4.2.0",
+    "jest": "25.4.0",
+    "jest-dot-reporter": "1.0.14",
+    "jest-enzyme": "7.1.2",
     "lodash-webpack-plugin": "0.11.5",
-    "react-test-renderer": "16.5.2",
-    "sinon": "7.0.0",
+    "react-test-renderer": "16.13.1",
+    "sinon": "9.0.2",
     "sinon-stub-promise": "4.0.0",
-    "style-loader": "0.21.0",
-    "url-loader": "1.0.1",
-    "wdio-chromedriver-service": "5.0.2",
-    "webdriverio": "5.15.4",
-    "webpack": "4.41.1",
-    "webpack-bundle-analyzer": "3.3.2",
-    "webpack-cli": "3.3.9",
-    "webpack-dev-server": "3.8.2"
+    "style-loader": "1.1.4",
+    "url-loader": "4.1.0",
+    "wdio-chromedriver-service": "6.0.2",
+    "webdriverio": "6.1.2",
+    "webpack": "4.43.0",
+    "webpack-bundle-analyzer": "3.7.0",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.10.3"
   },
   "jest": {
     "testEnvironment": "enzyme",

web/app/webpack-mv-plugin.js

@@ -1,17 +0,0 @@
-// WebpackMvPlugin copies /dist/index_bundle.js.out to /dist/index_bundle.js
-class WebpackMvPlugin {
-  apply(compiler) {
-    compiler.hooks.compilation.tap('webpack-mv-plugin', function(compilation) {
-      compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(
-        'webpack-mv-plugin',
-        function(htmlPluginData, cb) {
-          var out = htmlPluginData.plugin.childCompilationOutputName;
-          htmlPluginData.plugin.childCompilationOutputName = out.substring(0, out.indexOf('.out'));
-          cb(null, htmlPluginData);
-        }
-      );
-    });
-  };
-}
-
-module.exports = WebpackMvPlugin;

web/app/webpack.config.js

@@ -4,7 +4,6 @@ const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
-const WebpackMvPlugin = require('./webpack-mv-plugin.js');
 
 // uncomment here and in plugins to analyze webpack bundle size
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -75,13 +74,11 @@ module.exports = {
       'paths': true,
       'shorthands': true
     }),
-    // compile the bundle with hashed filename into index_bundle.js.out
+    // compile the bundle with hashed filename into index_bundle.js
     new HtmlWebpackPlugin({
       inject: false,
-      filename: "index_bundle.js.out",
+      filename: 'index_bundle.js',
       template: 'index_bundle.js.lodash.tmpl',
     }),
-    // move /dist/index_bundle.js.out to /dist/index_bundle.js
-    new WebpackMvPlugin()
-  ]
+  ],
 };