make compatible with recharts

bugfix/NETEXP-1296: Fixed refetching of service metrics data

app/containers/Dashboard/index.js

@@ -20,8 +20,11 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i] || ''}`;
 }
 
-function trafficLabelFormatter() {
-  return formatBytes(this.value);
+function trafficLabelFormatter(bytes) {
+  if (this?.value) {
+    return formatBytes(this.value);
+  }
+  return formatBytes(bytes);
 }
 
 function trafficTooltipFormatter() {
@@ -31,7 +34,7 @@ function trafficTooltipFormatter() {
 }
 
 const lineChartConfig = [
-  { key: 'inservicesAPs', title: 'Inservice APs (24 hours)' },
+  { key: 'service', title: 'Inservice APs (24 hours)' },
   { key: 'clientDevices', title: 'Client Devices (24 hours)' },
   {
     key: 'traffic',
@@ -56,9 +59,11 @@ const Dashboard = () => {
   });
 
   const [lineChartData, setLineChartData] = useState({
-    inservicesAPs: {
-      key: 'Inservice APs',
-      value: [],
+    service: {
+      inservicesAPs: {
+        key: 'Inservice APs',
+        value: [],
+      },
     },
     clientDevices: {
       is2dot4GHz: {
@@ -121,22 +126,23 @@ const Dashboard = () => {
               },
             },
           }) => {
-            inservicesAPs.push([eventTimestamp, equipmentInServiceCount]);
+            const timestamp = parseInt(eventTimestamp, 10);
+            inservicesAPs.push({ timestamp, value: equipmentInServiceCount });
 
             let total5GHz = 0;
             total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
 
-            clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
-            clientDevices5GHz.push([eventTimestamp, total5GHz || 0]);
+            clientDevices2dot4GHz.push({ timestamp, value: radios.is2dot4GHz || 0 });
+            clientDevices5GHz.push({ timestamp, value: total5GHz || 0 });
 
-            trafficBytesDownstreamData.push([
-              eventTimestamp,
-              (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0,
-            ]);
-            trafficBytesUpstreamData.push([
-              eventTimestamp,
-              (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0,
-            ]);
+            trafficBytesDownstreamData.push({
+              timestamp,
+              value: (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0,
+            });
+            trafficBytesUpstreamData.push({
+              timestamp,
+              value: (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0,
+            });
 
             totalDown += (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0;
             totalUp += (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0;
@@ -144,9 +150,11 @@ const Dashboard = () => {
         );
 
         return {
-          inservicesAPs: {
-            ...prev.inservicesAPs,
-            value: [...prev.inservicesAPs.value, ...inservicesAPs],
+          service: {
+            inservicesAPs: {
+              ...prev.service.inservicesAPs,
+              value: [...prev.service.inservicesAPs.value, ...inservicesAPs],
+            },
           },
           clientDevices: {
             is2dot4GHz: {

app/containers/Network/containers/AccessPointDetails/index.js

@@ -70,7 +70,7 @@ const AccessPointDetails = ({ locations }) => {
     loading: metricsLoading,
     error: metricsError,
     data: metricsData,
-    refetch: metricsRefetch,
+    fetchMore: fetchMoreServiceMetrics,
   } = useQuery(FILTER_SERVICE_METRICS, {
     variables: {
       customerId,
@@ -90,7 +90,29 @@ const AccessPointDetails = ({ locations }) => {
 
   const refetchData = () => {
     refetch();
-    metricsRefetch();
+    fetchMoreServiceMetrics({
+      variables: {
+        fromTime: moment()
+          .subtract(2, 'minutes')
+          .valueOf()
+          .toString(),
+        toTime: moment()
+          .valueOf()
+          .toString(),
+      },
+      updateQuery: (previousResult, { fetchMoreResult }) => {
+        const previousEntry = previousResult.filterServiceMetrics;
+        const newItems = fetchMoreResult.filterServiceMetrics.items;
+
+        return {
+          filterServiceMetrics: {
+            context: fetchMoreResult.filterServiceMetrics.context,
+            items: [...previousEntry.items, ...newItems],
+            __typename: previousEntry.__typename,
+          },
+        };
+      },
+    });
   };
 
   const handleUpdateEquipment = ({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "1.0.6",
+  "version": "1.1.1",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -9,9 +9,9 @@
   },
   "scripts": {
     "test": "jest --passWithNoTests --coverage",
-    "start": "cross-env NODE_ENV=development webpack-dev-server",
-    "start:bare": "cross-env API=ttps://portal.rtl.lab.netexperience.com NODE_ENV=bare webpack-dev-server",
-    "start:dev": "cross-env API=https://portal.rtl.lab.netexperience.com NODE_ENV=development webpack-dev-server",
+    "start": "cross-env NODE_ENV=development webpack serve",
+    "start:bare": "cross-env API=ttps://portal.rtl.lab.netexperience.com NODE_ENV=bare webpack serve",
+    "start:dev": "cross-env API=https://portal.rtl.lab.netexperience.com NODE_ENV=development webpack serve",
     "build": "webpack --mode=production",
     "format": "prettier --write 'app/**/*{.js,.scss}'",
     "eslint-fix": "eslint --fix 'app/**/*.js'",
@@ -21,33 +21,29 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^1.0.9",
+    "@tip-wlan/wlan-cloud-ui-library": "^1.1.3",
     "antd": "^4.5.2",
     "apollo-upload-client": "^13.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "graphql": "^14.6.0",
+    "graphql": "^15.5.0",
     "highcharts": "^8.1.0",
     "highcharts-react-official": "^3.0.0",
     "history": "^4.10.1",
-    "html-webpack-plugin": "^3.2.0",
     "lodash": "^4.17.15",
-    "mini-css-extract-plugin": "^0.9.0",
     "moment": "^2.26.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-helmet": "^5.2.1",
     "react-jsx-highcharts": "^4.1.0",
     "react-jsx-highstock": "^4.1.0",
-    "react-router-dom": "^5.1.2",
-    "terser-webpack-plugin": "^2.3.5"
+    "react-router-dom": "^5.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.8.7",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.8.3",
+    "@babel/runtime": "^7.13.10",
     "@testing-library/react": "^10.0.3",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
@@ -55,8 +51,10 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-root-import": "^6.4.1",
     "babel-polyfill": "^6.26.0",
+    "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.2",
     "css-loader": "^3.4.2",
+    "css-minimizer-webpack-plugin": "^1.3.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.10.0",
@@ -68,20 +66,23 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.0",
     "file-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.3.1",
     "husky": "^4.2.3",
     "jest": "^25.4.0",
     "less": "^3.11.1",
-    "less-loader": "^5.0.0",
+    "less-loader": "^6.2.0",
     "lint-staged": "^10.0.8",
+    "mini-css-extract-plugin": "^1.3.9",
     "node-sass": "^4.13.1",
     "prettier": "^1.19.1",
     "react-test-renderer": "^16.13.1",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^4.2.2"
+    "terser-webpack-plugin": "^5.1.1",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
   },
   "browserslist": [
     "last 2 versions",

webpack.config.js

@@ -1,4 +1,5 @@
-const webpackMerge = require('webpack-merge');
+/* eslint-disable import/no-extraneous-dependencies */
+const { merge } = require('webpack-merge');
 const common = require('./webpack/webpack.common');
 
 const envs = {
@@ -9,4 +10,4 @@ const envs = {
 /* eslint-disable global-require,import/no-dynamic-require */
 const env = envs[process.env.NODE_ENV || 'production'];
 const envConfig = require(`./webpack/webpack.${env}.js`);
-module.exports = webpackMerge(common, envConfig);
+module.exports = merge(common, envConfig);

webpack/webpack.common.js

@@ -1,4 +1,3 @@
-const HtmlWebPackPlugin = require('html-webpack-plugin');
 /* eslint-disable import/no-extraneous-dependencies */
 const webpack = require('webpack');
 
@@ -25,10 +24,6 @@ module.exports = {
     ],
   },
   plugins: [
-    new HtmlWebPackPlugin({
-      template: commonPaths.templatePath,
-      favicon: './app/images/favicon.ico',
-    }),
     new webpack.DefinePlugin({
       'process.env.API': JSON.stringify(process.env.API || 'http://localhost:4000'),
     }),

webpack/webpack.dev.js

@@ -1,4 +1,6 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const commonPaths = require('./paths');
 
@@ -52,7 +54,9 @@ module.exports = {
           {
             loader: 'less-loader', // compiles Less to CSS
             options: {
-              javascriptEnabled: true,
+              lessOptions: {
+                javascriptEnabled: true,
+              },
             },
           },
         ],
@@ -79,4 +83,11 @@ module.exports = {
       ),
     },
   },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: commonPaths.templatePath,
+      favicon: './app/images/favicon.ico',
+    }),
+  ],
 };

webpack/webpack.prod.js

@@ -1,6 +1,8 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+/* eslint-disable import/no-extraneous-dependencies */
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const path = require('path');
 
@@ -8,45 +10,50 @@ const commonPaths = require('./paths');
 
 module.exports = {
   output: {
-    filename: `${commonPaths.jsFolder}/[name].[hash].js`,
     path: commonPaths.outputPath,
     publicPath: '/',
-    chunkFilename: `${commonPaths.jsFolder}/[name].[chunkhash].js`,
+    filename: `${commonPaths.jsFolder}/[name].[chunkhash].js`,
+    chunkFilename: `${commonPaths.jsFolder}/[id].[chunkhash].js`,
   },
+
   optimization: {
     minimize: true,
     minimizer: [
       new TerserPlugin({
-        // Use multi-process parallel running to improve the build speed
-        // Default number of concurrent runs: os.cpus().length - 1
-        parallel: true,
-        // Enable file caching
-        cache: true,
-        sourceMap: true,
-      }),
-      new OptimizeCSSAssetsPlugin(),
-    ],
-    // Automatically split vendor and commons
-    // https://twitter.com/wSokra/status/969633336732905474
-    // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-    splitChunks: {
-      cacheGroups: {
-        vendors: {
-          test: /[\\/]node_modules[\\/]/,
-          name: 'vendors',
-          chunks: 'initial',
+        terserOptions: {
+          warnings: false,
+          compress: {
+            comparisons: false,
+          },
+          parse: {},
+          mangle: true,
+          output: {
+            comments: false,
+            ascii_only: true,
+          },
         },
-        async: {
+        parallel: true,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+    nodeEnv: 'production',
+    sideEffects: true,
+    concatenateModules: true,
+    runtimeChunk: 'single',
+    splitChunks: {
+      chunks: 'all',
+      maxInitialRequests: 10,
+      minSize: 0,
+      cacheGroups: {
+        vendor: {
           test: /[\\/]node_modules[\\/]/,
-          name: 'async',
-          chunks: 'async',
-          minChunks: 4,
+          name(module) {
+            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+            return `npm.${packageName.replace('@', '')}`;
+          },
         },
       },
     },
-    // Keep the runtime chunk seperated to enable long term caching
-    // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: true,
   },
 
   module: {
@@ -78,25 +85,48 @@ module.exports = {
           {
             loader: 'less-loader', // compiles Less to CSS
             options: {
-              javascriptEnabled: true,
+              lessOptions: {
+                javascriptEnabled: true,
+              },
             },
           },
         ],
       },
     ],
   },
+
   resolve: {
     modules: ['node_modules', 'app'],
     alias: {
       app: path.resolve(__dirname, '../', 'app'),
     },
   },
+
   plugins: [
     new CleanWebpackPlugin(),
+
+    // Minify and optimize the index.html
+    new HtmlWebpackPlugin({
+      template: commonPaths.templatePath,
+      favicon: './app/images/favicon.ico',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true,
+      },
+      inject: true,
+    }),
+
     new MiniCssExtractPlugin({
       filename: `${commonPaths.cssFolder}/[name].css`,
-      chunkFilename: `${commonPaths.cssFolder}/[name].css`,
+      chunkFilename: `${commonPaths.cssFolder}/[id].css`,
     }),
   ],
-  devtool: 'source-map',
 };