F #5422: upgrade webpack and build newstone

Signed-off-by: Jorge Lobo <jlobo@opennebula.io>

src/fireedge/package.json

@@ -20,9 +20,12 @@
     "node": ">=10.21.0"
   },
   "keywords": [
-    "flow",
-    "vms",
-    "opennebula"
+    "opennebula",
+    "guacamole",
+    "provider",
+    "provision",
+    "sunstone",
+    "vms"
   ],
   "devDependencies": {
     "eslint": "7.11.0",
@@ -39,11 +42,11 @@
     "opennebula-generatepotfile": "1.0.0",
     "opennebula-potojson": "1.0.0",
     "react-hot-loader": "4.13.0",
-    "webpack-dev-middleware": "3.7.2",
+    "webpack-dev-middleware": "5.0.0",
     "webpack-hot-middleware": "2.25.0"
   },
   "dependencies": {
-    "@babel/cli": "7.12.13",
+    "@babel/cli": "7.14.5",
     "@babel/core": "7.12.13",
     "@babel/node": "7.12.13",
     "@babel/plugin-proposal-class-properties": "7.12.13",
@@ -56,7 +59,7 @@
     "@loadable/babel-plugin": "5.13.2",
     "@loadable/component": "5.14.1",
     "@loadable/server": "5.14.2",
-    "@loadable/webpack-plugin": "5.14.2",
+    "@loadable/webpack-plugin": "5.15.0",
     "@material-ui/core": "4.11.0",
     "@material-ui/lab": "4.0.0-alpha.58",
     "@reduxjs/toolkit": "1.5.1",
@@ -64,14 +67,13 @@
     "atob": "2.1.2",
     "axios": "0.21.1",
     "babel-eslint": "10.1.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.2.1",
     "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-react-hmre": "1.1.1",
     "btoa": "1.2.1",
     "clsx": "1.1.1",
-    "colors": "1.4.0",
     "compression": "1.7.4",
-    "copy-webpack-plugin": "6.1.1",
+    "copy-webpack-plugin": "9.0.1",
     "cors": "2.8.5",
     "cross-env": "7.0.2",
     "dagre": "0.8.5",
@@ -96,6 +98,7 @@
     "notistack": "1.0.9",
     "opennebula-guacamole": "1.0.0",
     "path": "0.12.7",
+    "process": "0.11.10",
     "prop-types": "15.7.2",
     "qrcode": "1.4.4",
     "react": "16.14.0",
@@ -118,11 +121,12 @@
     "socket.io-client": "4.1.2",
     "speakeasy": "2.0.0",
     "sprintf-js": "1.1.2",
+    "time-fix-plugin": "^2.0.7",
     "upcast": "4.0.0",
     "url": "0.11.0",
     "uuid": "8.3.1",
-    "webpack": "4.43.0",
-    "webpack-cli": "3.3.12",
+    "webpack": "5.41.0",
+    "webpack-cli": "4.7.2",
     "webpack-node-externals": "2.5.2",
     "window-or-global": "1.0.1",
     "xml2js": "0.4.23",
@@ -131,4 +135,4 @@
     "yup": "0.32.9",
     "zeromq": "5.2.0"
   }
-}
+}

src/fireedge/src/client/apps/flow/_app.js

@@ -25,9 +25,9 @@ import LoadingScreen from 'client/components/LoadingScreen'
 import { fakeDelay } from 'client/utils'
 import { _APPS, TIME_HIDE_LOGO } from 'client/constants'
 
-const APP_NAME = _APPS.flow.name
+const APP_NAME = _APPS.sunstone.name
 
-const FlowApp = () => {
+const SunstoneApp = () => {
   const [firstRender, setFirstRender] = React.useState(() => true)
 
   const { jwt } = useAuth()
@@ -57,6 +57,6 @@ const FlowApp = () => {
   )
 }
 
-FlowApp.displayName = '_FlowApp'
+SunstoneApp.displayName = '_SunstoneApp'
 
-export default FlowApp
+export default SunstoneApp

src/fireedge/src/client/apps/flow/index.js

@@ -27,9 +27,9 @@ import App from 'client/apps/flow/_app'
 import theme from 'client/apps/flow/theme'
 import { _APPS, APP_URL } from 'client/constants'
 
-const APP_NAME = _APPS.flow.name
+const APP_NAME = _APPS.sunstone.name
 
-const Flow = ({ store, location, context }) => (
+const Sunstone = ({ store, location, context }) => (
   <ReduxProvider store={store}>
     <TranslateProvider>
       <MuiProvider theme={theme}>
@@ -51,18 +51,18 @@ const Flow = ({ store, location, context }) => (
   </ReduxProvider>
 )
 
-Flow.propTypes = {
+Sunstone.propTypes = {
   location: PropTypes.string,
   context: PropTypes.shape({}),
   store: PropTypes.shape({})
 }
 
-Flow.defaultProps = {
+Sunstone.defaultProps = {
   location: '',
   context: {},
   store: {}
 }
 
-Flow.displayName = 'FlowApp'
+Sunstone.displayName = 'SunstoneApp'
 
-export default Flow
+export default Sunstone

src/fireedge/src/client/dev/_app.js

@@ -39,7 +39,7 @@ const DevelopmentApp = props => {
   return (
     <>
       {appName === _APPS.provision.name && <ProvisionApp {...props} />}
-      {appName === _APPS.flow.name && <FlowApp {...props} />}
+      {appName === _APPS.sunstone.name && <FlowApp {...props} />}
     </>
   )
 }

src/fireedge/src/client/utils/rest.js

@@ -31,7 +31,7 @@ http.interceptors.response.use(
     if (response.status === httpCodes.unauthorized.id) {
       const configErrorParser = {
         color: 'red',
-        type: response?.data?.message ?? response?.statusText,
+        error: response?.data?.message ?? response?.statusText,
         message: 'Error request: %s'
       }
 

src/fireedge/src/server/index.js

@@ -69,7 +69,6 @@ if (env && env.NODE_ENV && env.NODE_ENV === defaultWebpackMode) {
     const webpackConfig = require('../../webpack.config.dev.client')
     const compiler = webpack(webpackConfig)
     app.use(webpackDevMiddleware(compiler, {
-      noInfo: true,
       serverSideRender: true,
       publicPath: webpackConfig.output.publicPath,
       stats: {
@@ -86,8 +85,7 @@ if (env && env.NODE_ENV && env.NODE_ENV === defaultWebpackMode) {
     if (error) {
       messageTerminal({
         color: 'red',
-        type: error,
-        message: '%s'
+        error
       })
     }
   }
@@ -106,7 +104,7 @@ if (userLog === defaultTypeLog && global && global.FIREEDGE_LOG) {
     const config = {
       color: 'red',
       message: 'Error: %s',
-      type: err.message || ''
+      error: err.message || ''
     }
     messageTerminal(config)
   }
@@ -157,7 +155,7 @@ appServer.listen(port, host, err => {
   if (!err) {
     config = {
       color: 'green',
-      type: `${host}:${port}`,
+      error: `${host}:${port}`,
       message: 'Server listen in %s'
     }
   }

src/fireedge/src/server/routes/api/index.js

@@ -33,7 +33,7 @@ defaultFilesRoutes.map(file => {
   } catch (error) {
     if (error instanceof Error && error.code === 'MODULE_NOT_FOUND') {
       const config = defaultConfigErrorMessage
-      config.type = error.message
+      config.error = error.message
       messageTerminal(config)
     }
   }

src/fireedge/src/server/routes/api/provision/functions.js

@@ -36,7 +36,7 @@ const eventsEmitter = new events.EventEmitter()
 const defaultError = (err = '', message = 'Error: %s') => ({
   color: 'red',
   message,
-  type: err
+  error: err || ''
 })
 
 const publish = (eventName = '', message = {}) => {
@@ -124,7 +124,7 @@ const createFolderWithFiles = (path = '', files = [], filename = '') => {
       })
     }
   } catch (error) {
-    messageTerminal(defaultError((error && error.message) || ''))
+    messageTerminal(defaultError(error && error.message))
   }
   return rtn
 }
@@ -140,7 +140,7 @@ const createTemporalFile = (path = '', ext = '', content = '', filename = '') =>
     writeFileSync(file, content)
     rtn = { name, path: file }
   } catch (error) {
-    messageTerminal(defaultError((error && error.message) || ''))
+    messageTerminal(defaultError(error && error.message))
   }
   return rtn
 }
@@ -158,7 +158,7 @@ const createYMLContent = (content = '') => {
     }
     rtn = stringify(doc.contents)
   } catch (error) {
-    messageTerminal(defaultError((error && error.message) || ''))
+    messageTerminal(defaultError(error && error.message))
   }
   return rtn
 }
@@ -168,7 +168,7 @@ const removeFile = (path = '') => {
     try {
       removeSync(path, { force: true })
     } catch (error) {
-      messageTerminal(defaultError((error && error.message) || ''))
+      messageTerminal(defaultError(error && error.message))
     }
   }
 }
@@ -201,7 +201,7 @@ const renameFolder = (path = '', name = '', type = 'replace', callback) => {
         rtn = newPath
       }
     } catch (error) {
-      messageTerminal(defaultError((error && error.message) || ''))
+      messageTerminal(defaultError(error && error.message))
     }
   }
   return rtn
@@ -214,7 +214,7 @@ const moveToFolder = (path = '', relative = '/../') => {
       moveSync(path, `${dirname(path + relative)}/${basename(path)}`)
       rtn = true
     } catch (error) {
-      messageTerminal(defaultError((error && error.message) || ''))
+      messageTerminal(defaultError(error && error.message))
     }
   }
   return rtn
@@ -278,7 +278,7 @@ const executeCommandAsync = (
     })
 
     execute.on('error', error => {
-      messageTerminal(defaultError((error && error.message) || '', 'Error command: %s'))
+      messageTerminal(defaultError(error && error.message, 'Error command: %s'))
     })
 
     execute.on('close', (code) => {
@@ -320,7 +320,7 @@ const findRecursiveFolder = (path = '', finder = '', rtn = false) => {
         }
       })
     } catch (error) {
-      messageTerminal(defaultError((error && error.message) || '', 'Error: %s'))
+      messageTerminal(defaultError(error && error.message))
     }
   }
   return rtn

src/fireedge/src/server/routes/websockets/guacamole/index.js

@@ -25,7 +25,7 @@ genFireedgeKey()
 const configError = (error) => ({
   color: 'red',
   message: 'Error: %s',
-  type: error && error.message
+  error: error && error.message
 })
 
 const clientOptions = {

src/fireedge/src/server/routes/websockets/hooks/index.js

@@ -61,7 +61,7 @@ const main = (app = {}, type = '') => {
                   if (error) {
                     const configErrorParser = {
                       color: 'red',
-                      type: error,
+                      error,
                       message: 'Error parser: %s'
                     }
                     messageTerminal(configErrorParser)
@@ -80,7 +80,7 @@ const main = (app = {}, type = '') => {
   } catch (error) {
     const configErrorHooks = {
       color: 'red',
-      type: error,
+      error,
       message: '%s'
     }
     messageTerminal(configErrorHooks)

src/fireedge/src/server/routes/websockets/index.js

@@ -55,7 +55,7 @@ const websockets = (appServer = {}) => {
           } catch (error) {
             if (error instanceof Error) {
               const config = defaultConfigErrorMessage
-              config.type = error.message
+              config.error = error.message
               messageTerminal(config)
             }
           }

src/fireedge/src/server/routes/websockets/provision/index.js

@@ -21,7 +21,7 @@ const main = (app = {}, type = '') => {
   const configErrorProvision = (error = '') => {
     return {
       color: 'red',
-      type: error,
+      error,
       message: '%s'
     }
   }

src/fireedge/src/server/routes/websockets/vmrc/index.js

@@ -38,7 +38,7 @@ const vmrcProxy = createProxyMiddleware(endpointVmrc, {
   logLevel: 'debug',
   pathRewrite: path => path.replace(endpointVmrc, '/ticket'),
   onError: err => {
-    config.type = err.message
+    config.error = err.message
     config.message = 'Error connection : %s'
     messageTerminal(config)
   },
@@ -54,7 +54,7 @@ const vmrcProxy = createProxyMiddleware(endpointVmrc, {
           ).toString()
           return esxi
         } catch (error) {
-          config.type = error.message
+          config.error = error.message
           config.message = 'Error read vmrc token: %s'
           messageTerminal(config)
         }

src/fireedge/src/server/utils/constants/defaults.js

@@ -17,9 +17,9 @@ const appName = 'fireedge'
 const baseUrl = `${appName ? `/${appName}/` : '/'}`
 const baseUrlWebsockets = 'websockets/'
 const apps = {
-  flow: {
-    name: 'flow',
-    theme: 'flow',
+  sunstone: {
+    name: 'sunstone',
+    theme: 'sunstone',
     assets: true
   },
   provision: {

src/fireedge/src/server/utils/general.js

@@ -13,18 +13,29 @@
 /* limitations under the License.                                             */
 /* -------------------------------------------------------------------------- */
 
-const colors = require('colors')
+// const colors = require('colors')
+const { sprintf } = require('sprintf-js')
 
-const messageTerminal = ({ color, type, error, message }) => {
-  const colorConsole = color || 'red'
-  const typeConsole = type || ''
-  const errorConsole = error || ''
-  const messageConsole = message || 'Message Console '
-  const consoleColor =
-    colorConsole === 'green'
-      ? colors.green(messageConsole)
-      : colors.red(messageConsole)
-  console.log(consoleColor, typeConsole, errorConsole)
+const messageTerminal = (
+  {
+    color = 'red',
+    error = '',
+    message = '%s'
+  }
+) => {
+  let consoleColor = ''
+  switch (color) {
+    case 'green':
+      consoleColor = '\x1b[32m'
+      break
+    case 'yellow':
+      consoleColor = '\x1b[33m'
+      break
+    default:
+      consoleColor = '\x1b[31m'
+      break
+  }
+  console.log(consoleColor, sprintf(message, error))
 }
 
 const addPrintf = (string = '', args = '') => {

src/fireedge/src/server/utils/jwt.js

@@ -70,7 +70,7 @@ const validateAuth = req => {
         messageTerminal({
           color: 'red',
           message: 'invalid: %s',
-          type: messageError
+          error: messageError
         })
       }
     }

src/fireedge/src/server/utils/server.js

@@ -135,7 +135,7 @@ const encrypt = (data = '', key = '', iv = '') => {
       messageTerminal({
         color: 'red',
         message: 'Error: %s',
-        type: errorData
+        error: errorData
       })
     }
   }
@@ -155,7 +155,7 @@ const decrypt = (data = '', key = '', iv = '') => {
       messageTerminal({
         color: 'red',
         message: 'Error: %s',
-        type: errorData
+        error: errorData
       })
     }
   }
@@ -177,7 +177,7 @@ const existsFile = (path = '', success = () => undefined, error = () => undefine
     messageTerminal({
       color: 'red',
       message: 'Error: %s',
-      type: errorData
+      error: errorData
     })
   }
   if (rtn) {
@@ -220,7 +220,7 @@ const genFireedgeKey = () => {
               messageTerminal({
                 color: 'red',
                 message: 'Error: %s',
-                type: (err && err.message) || ''
+                error: (err && err.message) || ''
               })
             })
         }
@@ -258,7 +258,7 @@ const getSunstoneAuth = () => {
         const config = {
           color: 'red',
           message: 'Error: %s',
-          type: err.message || ''
+          error: err.message || ''
         }
         messageTerminal(config)
       })

src/fireedge/src/server/utils/yml.js

@@ -29,7 +29,7 @@ const getConfig = () => {
       const config = {
         color: 'red',
         message: 'Error: %s',
-        type: err.message || ''
+        error: err.message || ''
       }
       messageTerminal(config)
     })

src/fireedge/webpack.config.dev.client.js

@@ -1,10 +1,10 @@
 const path = require('path')
 const webpack = require('webpack')
+const TimeFixPlugin = require('time-fix-plugin')
 const { defaultWebpackMode, defaultAppName } = require('./src/server/utils/constants/defaults')
 
 const appName = defaultAppName ? `/${defaultAppName}` : ''
 
-/** @type {import('webpack').Configuration} */
 module.exports = {
   mode: defaultWebpackMode,
   entry: [
@@ -34,14 +34,21 @@ module.exports = {
     ]
   },
   resolve: {
-    extensions: ['.js']
+    extensions: ['.js'],
+    alias: {
+      process: 'process/browser'
+    }
   },
   plugins: [
+    new TimeFixPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(defaultWebpackMode)
       }
+    }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
     })
   ],
   devtool: 'inline-source-map'

src/fireedge/webpack.config.prod.client.js

@@ -2,6 +2,7 @@ const path = require('path')
 const webpack = require('webpack')
 const CopyPlugin = require('copy-webpack-plugin')
 const LoadablePlugin = require('@loadable/webpack-plugin')
+const TimeFixPlugin = require('time-fix-plugin')
 const { defaultApps, defaultFileStats, defaultAppName } = require('./src/server/utils/constants/defaults')
 
 const js = {
@@ -12,11 +13,15 @@ const js = {
 
 const bundle = ({ assets = false, name = 'flow' }) => {
   const plugins = [
+    new TimeFixPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('production')
       }
     }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    }),
     new LoadablePlugin({ filename: name + defaultFileStats })
   ]
   if (assets) {
@@ -41,11 +46,15 @@ const bundle = ({ assets = false, name = 'flow' }) => {
     stats: {
       warnings: false
     },
+    resolve: {
+      alias: {
+        process: 'process/browser'
+      }
+    },
     plugins,
     module: {
       rules: [js]
-    },
-    devtool: ''
+    }
   }
 }
 

src/fireedge/webpack.config.prod.server.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const webpack = require('webpack')
 const nodeExternals = require('webpack-node-externals')
+const TimeFixPlugin = require('time-fix-plugin')
 const { defaultProductionWebpackMode } = require('./src/server/utils/constants/defaults')
 
 const js = {
@@ -24,18 +25,26 @@ module.exports = {
   stats: {
     warnings: false
   },
+  resolve: {
+    alias: {
+      process: 'process/browser'
+    }
+  },
   plugins: [
+    new TimeFixPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(defaultProductionWebpackMode)
       }
     }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    }),
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 1
     })
   ],
   module: {
     rules: [js]
-  },
-  devtool: ''
+  }
 }