patch ui-library

WIFI-1917: Make compatible with recharts

.github/workflows/dockerpublish.yml

@@ -5,6 +5,7 @@ on:
     # Publish `master` as Docker `latest` image.
     branches:
       - master
+      - 'release/**'
 
     # Publish `v1.2.3` tags as releases.
     tags:
@@ -13,6 +14,10 @@ on:
   # Run tests for any PRs.
   pull_request:
 
+  schedule:
+    # runs nightly build at 5AM
+    - cron: '00 09 * * *'
+
 env:
   IMAGE_NAME: wlan-cloud-ui
   DOCKER_REPO: tip-tip-wlan-cloud-docker-repo.jfrog.io
@@ -39,11 +44,31 @@ jobs:
     needs: test
 
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' || github.event_name == 'schedule'
 
     steps:
       - uses: actions/checkout@v2
 
+      - name: Adding property file with component version and commit hash
+        run: |
+          # Strip git ref prefix from version
+          VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
+
+          # Strip "v" prefix from tag name
+          [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
+
+          # Create a release snapshot if we are on release branch
+          [[ "${{ github.ref }}" == "refs/heads/release/"* ]] && VERSION=$(echo "${{ github.ref }}" | sed -e 's/refs\/heads\/release\/[v]//' | awk '{print $1"-SNAPSHOT"}')
+
+          # Use Docker `latest` tag convention
+          [ "$VERSION" == "master" ] && VERSION=1.1.0-SNAPSHOT
+
+          TIMESTAMP=$(date +'%Y-%m-%d')
+
+          echo date=$TIMESTAMP > app/commit.properties
+          echo commitId=$GITHUB_SHA >> app/commit.properties
+          echo projectVersion=$VERSION>> app/commit.properties
+
       - name: Build image
         run: docker build . -f Dockerfile -t image --build-arg NPM_TOKEN=${{secrets.NPM_REPO_AUTH_TOKEN}}
 
@@ -56,6 +81,7 @@ jobs:
       - name: Push image
         run: |
           IMAGE_ID=$DOCKER_REPO/$IMAGE_NAME
+          TIMESTAMP=$(date +'%Y-%m-%d')
 
           # Change all uppercase to lowercase
           IMAGE_ID=$(echo $IMAGE_ID | tr '[A-Z]' '[a-z]')
@@ -66,11 +92,18 @@ jobs:
           # Strip "v" prefix from tag name
           [[ "${{ github.ref }}" == "refs/tags/"* ]] && VERSION=$(echo $VERSION | sed -e 's/^v//')
 
+          # Create a release snapshot if we are on release branch
+          [[ "${{ github.ref }}" == "refs/heads/release/"* ]] && VERSION=$(echo "${{ github.ref }}" | sed -e 's/refs\/heads\/release\/[v]//' | awk '{print $1"-SNAPSHOT"}')
+
           # Use Docker `latest` tag convention
-          [ "$VERSION" == "master" ] && VERSION=latest
+          [ "$VERSION" == "master" ] && VERSION=1.1.0-SNAPSHOT
 
           echo IMAGE_ID=$IMAGE_ID
           echo VERSION=$VERSION
+          echo TIMESTAMP=$TIMESTAMP
 
           docker tag image $IMAGE_ID:$VERSION
           docker push $IMAGE_ID:$VERSION
+
+          docker tag image $IMAGE_ID:$VERSION-$TIMESTAMP
+          docker push $IMAGE_ID:$VERSION-$TIMESTAMP

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

Dockerfile

@@ -13,6 +13,7 @@ ENV PATH /app/node_modules/.bin:$PATH
 # where available (npm@5+)
 COPY package*.json ./
 
+
 #RUN npm install
 # If you are building your code for production
 RUN (echo "@tip-wlan:registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/" && echo "//tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/:_authToken=$NPM_TOKEN") > .npmrc
@@ -28,6 +29,7 @@ RUN apk add --no-cache jq
 COPY --from=build /app/dist /usr/share/nginx/html
 COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
 COPY docker_entrypoint.sh generate_config_js.sh /
+COPY app/commit.properties /
 RUN chmod +x docker_entrypoint.sh generate_config_js.sh
  
 EXPOSE 80

README.md

@@ -2,12 +2,30 @@
 
 ## Set up environment:
 
-Delete from package.json (undo this delete after all steps)
-`"@tip-wlan/wlan-cloud-ui-library": X.X.X,`
-
-Install Dependencies
+Install Dependencies:
 `npm install`
 
+You will get an error installing the package [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) because it is in a private npm registry.
+You can either install the package with the commands below or clone the repo [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and skip to the section Set up Full Development.
+
+Run
+
+```
+npm login --registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/
+```
+
+And enter the supplied credentials. Ask @sean-macfarlane for credentials if you don't have.
+
+Install package:
+
+```
+npm i --registry=https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/ @tip-wlan/wlan-cloud-ui-library
+```
+
+### Set up Full Development
+
+_Skip this section if you are not using a local [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library)_
+
 Clone [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) in parent folder
 
 ```
@@ -28,15 +46,25 @@ If `npm link` fails due to Permissions run with `sudo`
 sudo npm link ../wlan-cloud-ui-library
 ```
 
+To run Full Development you must clone [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw), follow it's README, and run it. Or you use the live production build by setting the environment variable `API` to the GraphQL domain.
+
 ## Run:
 
-### Development
+### Bare Development
+
+This is if you only want to run this repo locally, and want to use the live production builds of [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw)
+
+`npm run start:bare`
+
+### Full Development
+
+If you have cloned [wlan-cloud-ui-library](https://github.com/Telecominfraproject/wlan-cloud-ui-library) and [wlan-cloud-graphql-gw](https://github.com/Telecominfraproject/wlan-cloud-graphql-gw)
 
 `npm start`
 
 ### Tests
 
-`npm run test`
+`npm test`
 
 ### Production
 

app/commit.properties

@@ -0,0 +1,4 @@
+#This file will be used when running the docker locally
+date=${date}
+commitId=${commit.id}
+projectVersion=${project.version}

app/config.js

@@ -1 +0,0 @@
-window.REACT_APP_API = undefined;

app/containers/Accounts/index.js

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
-import gql from 'graphql-tag';
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import { useQuery, useMutation, gql } from '@apollo/client';
 import { Alert, notification } from 'antd';
 
 import { Accounts as AccountsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
@@ -8,28 +7,25 @@ import { Accounts as AccountsPage, Loading } from '@tip-wlan/wlan-cloud-ui-libra
 import UserContext from 'contexts/UserContext';
 
 const GET_ALL_USERS = gql`
-  query GetAllUsers($customerId: ID!, $cursor: String) {
-    getAllUsers(customerId: $customerId, cursor: $cursor) {
+  query GetAllUsers($customerId: ID!, $context: JSONObject) {
+    getAllUsers(customerId: $customerId, context: $context) {
       items {
         id
         email: username
-        role
+        roles
         lastModifiedTimestamp
         customerId
       }
-      context {
-        cursor
-        lastPage
-      }
+      context
     }
   }
 `;
 
 const CREATE_USER = gql`
-  mutation CreateUser($username: String!, $password: String!, $role: String!, $customerId: ID!) {
-    createUser(username: $username, password: $password, role: $role, customerId: $customerId) {
+  mutation CreateUser($username: String!, $password: String!, $roles: [String], $customerId: ID!) {
+    createUser(username: $username, password: $password, roles: $roles, customerId: $customerId) {
       username
-      role
+      roles
       customerId
     }
   }
@@ -40,7 +36,7 @@ const UPDATE_USER = gql`
     $id: ID!
     $username: String!
     $password: String!
-    $role: String!
+    $roles: [String]
     $customerId: ID!
     $lastModifiedTimestamp: String
   ) {
@@ -48,13 +44,13 @@ const UPDATE_USER = gql`
       id: $id
       username: $username
       password: $password
-      role: $role
+      roles: $roles
       customerId: $customerId
       lastModifiedTimestamp: $lastModifiedTimestamp
     ) {
       id
       username
-      role
+      roles
       customerId
       lastModifiedTimestamp
     }
@@ -70,7 +66,7 @@ const DELETE_USER = gql`
 `;
 
 const Accounts = () => {
-  const { customerId } = useContext(UserContext);
+  const { customerId, id: currentUserId } = useContext(UserContext);
 
   const { data, loading, error, refetch, fetchMore } = useQuery(GET_ALL_USERS, {
     variables: { customerId },
@@ -82,7 +78,7 @@ const Accounts = () => {
   const handleLoadMore = () => {
     if (!data.getAllUsers.context.lastPage) {
       fetchMore({
-        variables: { cursor: data.getAllUsers.context.cursor },
+        variables: { context: data.getAllUsers.context },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.getAllUsers;
           const newItems = fetchMoreResult.getAllUsers.items;
@@ -99,12 +95,12 @@ const Accounts = () => {
     }
   };
 
-  const handleCreateUser = (email, password, role) => {
+  const handleCreateUser = (email, password, roles) => {
     createUser({
       variables: {
         username: email,
         password,
-        role,
+        roles: [roles],
         customerId,
       },
     })
@@ -123,13 +119,13 @@ const Accounts = () => {
       );
   };
 
-  const handleEditUser = (id, email, password, role, lastModifiedTimestamp) => {
+  const handleEditUser = (id, email, password, roles, lastModifiedTimestamp) => {
     updateUser({
       variables: {
         id,
         username: email,
         password,
-        role,
+        roles: [roles],
         customerId,
         lastModifiedTimestamp,
       },
@@ -177,6 +173,7 @@ const Accounts = () => {
   return (
     <AccountsPage
       data={data.getAllUsers.items}
+      currentUserId={currentUserId}
       onLoadMore={handleLoadMore}
       onCreateUser={handleCreateUser}
       onEditUser={handleEditUser}

app/containers/AddProfile/index.js

@@ -1,11 +1,13 @@
 import React, { useContext } from 'react';
 import { AddProfile as AddProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
-import gql from 'graphql-tag';
-import { useMutation, useQuery } from '@apollo/react-hooks';
+import { useMutation, useQuery, gql } from '@apollo/client';
 import { notification } from 'antd';
+import { useHistory } from 'react-router-dom';
 
+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { GET_ALL_PROFILES } from 'graphql/queries';
+import { fetchMoreProfiles } from 'graphql/functions';
 
 const CREATE_PROFILE = gql`
   mutation CreateProfile(
@@ -33,10 +35,48 @@ const CREATE_PROFILE = gql`
 
 const AddProfile = () => {
   const { customerId } = useContext(UserContext);
-  const { data: ssidProfiles } = useQuery(GET_ALL_PROFILES, {
+  const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
     variables: { customerId, type: 'ssid' },
+    fetchPolicy: 'network-only',
+  });
+  const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'radius' },
+      fetchPolicy: 'network-only',
+    }
+  );
+  const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'captive_portal' },
+      fetchPolicy: 'network-only',
+    }
+  );
+  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'passpoint_venue' },
+    fetchPolicy: 'network-only',
+  });
+  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_operator' },
+      fetchPolicy: 'network-only',
+    }
+  );
+  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_osu_id_provider' },
+      fetchPolicy: 'network-only',
+    }
+  );
+  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'rf' },
+    fetchPolicy: 'network-only',
   });
   const [createProfile] = useMutation(CREATE_PROFILE);
+  const history = useHistory();
 
   const handleAddProfile = (profileType, name, details, childProfileIds = []) => {
     createProfile({
@@ -53,6 +93,7 @@ const AddProfile = () => {
           message: 'Success',
           description: 'Profile successfully created.',
         });
+        history.push(ROUTES.profiles, { refetch: true });
       })
       .catch(() =>
         notification.error({
@@ -62,12 +103,30 @@ const AddProfile = () => {
       );
   };
 
+  const handleFetchMoreProfiles = (e, key) => {
+    if (key === 'radius') fetchMoreProfiles(e, radiusProfiles, fetchMoreRadiusProfiles);
+    else if (key === 'captive_portal')
+      fetchMoreProfiles(e, captiveProfiles, fetchMoreCaptiveProfiles);
+    else if (key === 'rf') fetchMoreProfiles(e, rfProfiles, fetchMoreRfProfiles);
+    else if (key === 'passpoint_venue') fetchMoreProfiles(e, venueProfiles, fetchMoreVenueProfiles);
+    else if (key === 'passpoint_operator')
+      fetchMoreProfiles(e, operatorProfiles, fetchMoreOperatorProfiles);
+    else if (key === 'passpoint_osu_id_provider')
+      fetchMoreProfiles(e, idProviderProfiles, fetchMoreIdProviderProfiles);
+    else fetchMoreProfiles(e, ssidProfiles, fetchMore);
+  };
+
   return (
     <AddProfilePage
       onCreateProfile={handleAddProfile}
-      ssidProfiles={
-        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
-      }
+      ssidProfiles={ssidProfiles?.getAllProfiles?.items}
+      radiusProfiles={radiusProfiles?.getAllProfiles?.items}
+      captiveProfiles={captiveProfiles?.getAllProfiles?.items}
+      venueProfiles={venueProfiles?.getAllProfiles?.items}
+      operatorProfiles={operatorProfiles?.getAllProfiles?.items}
+      idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
+      rfProfiles={rfProfiles?.getAllProfiles?.items}
+      onFetchMoreProfiles={handleFetchMoreProfiles}
     />
   );
 };

app/containers/Alarms/index.js

@@ -1,14 +1,13 @@
 import React, { useContext } from 'react';
-import gql from 'graphql-tag';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery, gql } from '@apollo/client';
 import { Alert, notification } from 'antd';
 import { Alarms as AlarmsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
 
 const GET_ALL_ALARMS = gql`
-  query GetAllAlarms($customerId: ID!, $cursor: String) {
-    getAllAlarms(customerId: $customerId, cursor: $cursor) {
+  query GetAllAlarms($customerId: ID!, $context: JSONObject) {
+    getAllAlarms(customerId: $customerId, context: $context) {
       items {
         severity
         alarmCode
@@ -19,10 +18,7 @@ const GET_ALL_ALARMS = gql`
           name
         }
       }
-      context {
-        cursor
-        lastPage
-      }
+      context
     }
   }
 `;
@@ -53,7 +49,7 @@ const Alarms = () => {
   const handleLoadMore = () => {
     if (!data.getAllAlarms.context.lastPage) {
       fetchMore({
-        variables: { cursor: data.getAllAlarms.context.cursor },
+        variables: { context: data.getAllAlarms.context },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.getAllAlarms;
           const newItems = fetchMoreResult.getAllAlarms.items;

app/containers/App/index.js

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Switch, Redirect } from 'react-router-dom';
 
-import { ThemeProvider } from '@tip-wlan/wlan-cloud-ui-library';
+import { ThemeProvider, GenericNotFound } from '@tip-wlan/wlan-cloud-ui-library';
 
 import logo from 'images/tip-logo.png';
 import logoMobile from 'images/tip-logo-mobile.png';
 
-import { AUTH_TOKEN, COMPANY } from 'constants/index';
+import { AUTH_TOKEN, COMPANY, ROUTES, USER_FRIENDLY_RADIOS } from 'constants/index';
 import Login from 'containers/Login';
 
 import Network from 'containers/Network';
@@ -32,7 +32,7 @@ import ProtectedRouteWithLayout from './components/ProtectedRouteWithLayout';
 const RedirectToDashboard = () => (
   <Redirect
     to={{
-      pathname: '/dashboard',
+      pathname: ROUTES.dashboard,
     }}
   />
 );
@@ -42,7 +42,7 @@ const App = () => {
   let initialUser = {};
   if (token) {
     const { userId, userName, userRole, customerId } = parseJwt(token.access_token);
-    initialUser = { id: userId, email: userName, role: userRole, customerId };
+    initialUser = { id: userId, email: userName, roles: userRole, customerId };
   }
   const [user, setUser] = useState(initialUser);
 
@@ -50,7 +50,7 @@ const App = () => {
     setItem(AUTH_TOKEN, newToken);
     if (newToken) {
       const { userId, userName, userRole, customerId } = parseJwt(newToken.access_token);
-      setUser({ id: userId, email: userName, role: userRole, customerId });
+      setUser({ id: userId, email: userName, roles: userRole, customerId });
     }
   };
 
@@ -60,32 +60,45 @@ const App = () => {
     <UserProvider
       id={user.id}
       email={user.email}
-      role={user.role}
+      roles={user.roles}
       customerId={user.customerId}
       updateUser={updateUser}
       updateToken={updateToken}
     >
-      <ThemeProvider company={COMPANY} logo={logo} logoMobile={logoMobile}>
+      <ThemeProvider
+        company={COMPANY}
+        logo={logo}
+        logoMobile={logoMobile}
+        routes={ROUTES}
+        radioTypes={USER_FRIENDLY_RADIOS}
+      >
         <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>
           <meta name="description" content={COMPANY} />
         </Helmet>
 
         <Switch>
-          <UnauthenticatedRoute exact path="/login" component={Login} />
-          <ProtectedRouteWithLayout exact path="/" component={RedirectToDashboard} />
-          <ProtectedRouteWithLayout exact path="/dashboard" component={Dashboard} />
-          <ProtectedRouteWithLayout path="/network" component={Network} />
-          <ProtectedRouteWithLayout path="/system" component={System} />
+          <UnauthenticatedRoute exact path={ROUTES.login} component={Login} />
+          <ProtectedRouteWithLayout exact path={ROUTES.root} component={RedirectToDashboard} />
+          <ProtectedRouteWithLayout exact path={ROUTES.dashboard} component={Dashboard} />
+          <ProtectedRouteWithLayout path={ROUTES.network} component={Network} />
+          <ProtectedRouteWithLayout path={ROUTES.system} component={System} />
 
-          <ProtectedRouteWithLayout exact path="/profiles" component={Profiles} />
-          <ProtectedRouteWithLayout exact path="/profiles/:id" component={ProfileDetails} />
-          <ProtectedRouteWithLayout exact path="/addprofile" component={AddProfile} />
+          <ProtectedRouteWithLayout exact path={ROUTES.profiles} component={Profiles} />
+          <ProtectedRouteWithLayout
+            exact
+            path={`${ROUTES.profiles}/:id`}
+            component={ProfileDetails}
+          />
+          <ProtectedRouteWithLayout exact path={ROUTES.addprofile} component={AddProfile} />
 
-          <ProtectedRouteWithLayout exact path="/alarms" component={Alarms} />
-          <ProtectedRouteWithLayout exact path="/account/edit" component={EditAccount} />
-          {user.role === 'SuperUser' && (
-            <ProtectedRouteWithLayout exact path="/accounts" component={Accounts} />
+          <ProtectedRouteWithLayout exact path={ROUTES.alarms} component={Alarms} />
+          {user?.id !== 0 && (
+            <ProtectedRouteWithLayout exact path={ROUTES.account} component={EditAccount} />
           )}
+          {user?.roles?.[0] === 'SuperUser' && (
+            <ProtectedRouteWithLayout exact path={ROUTES.users} component={Accounts} />
+          )}
+          <ProtectedRouteWithLayout component={GenericNotFound} />
         </Switch>
       </ThemeProvider>
     </UserProvider>

app/containers/Dashboard/index.js

@@ -1,10 +1,11 @@
 import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
 import { Alert } from 'antd';
 import moment from 'moment';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { Dashboard as DashboardPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 import UserContext from 'contexts/UserContext';
 import { FILTER_SYSTEM_EVENTS, GET_ALL_STATUS } from 'graphql/queries';
+import { USER_FRIENDLY_RADIOS } from 'constants/index';
 
 function formatBytes(bytes, decimals = 2) {
   if (bytes === 0) return '0 Bytes';
@@ -13,14 +14,17 @@ function formatBytes(bytes, decimals = 2) {
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(k));
 
   // eslint-disable-next-line no-restricted-properties
   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() {
@@ -29,15 +33,8 @@ function trafficTooltipFormatter() {
   )}</b><br/>`;
 }
 
-const USER_FRIENDLY_RADIOS = {
-  is2dot4GHz: '2.4GHz',
-  is5GHzL: '5GHz (L)',
-  is5GHzU: '5GHz (U)',
-  is5GHz: '5GHz',
-};
-
 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',
@@ -62,9 +59,11 @@ const Dashboard = () => {
   });
 
   const [lineChartData, setLineChartData] = useState({
-    inservicesAPs: {
-      key: 'Inservice APs',
-      value: [],
+    service: {
+      inservicesAPs: {
+        key: 'Inservice APs',
+        value: [],
+      },
     },
     clientDevices: {
       is2dot4GHz: {
@@ -110,6 +109,8 @@ const Dashboard = () => {
         const clientDevices5GHz = [];
         const trafficBytesDownstreamData = [];
         const trafficBytesUpstreamData = [];
+        let totalDown = 0;
+        let totalUp = 0;
 
         list.forEach(
           ({
@@ -125,23 +126,35 @@ 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]);
+            clientDevices2dot4GHz.push({ timestamp, value: radios.is2dot4GHz || 0 });
+            clientDevices5GHz.push({ timestamp, value: total5GHz || 0 });
 
-            trafficBytesDownstreamData.push([eventTimestamp, trafficBytesDownstream]);
-            trafficBytesUpstreamData.push([eventTimestamp, trafficBytesUpstream]);
+            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;
           }
         );
 
         return {
-          inservicesAPs: {
-            ...prev.inservicesAPs,
-            value: [...prev.inservicesAPs.value, ...inservicesAPs],
+          service: {
+            inservicesAPs: {
+              ...prev.service.inservicesAPs,
+              value: [...prev.service.inservicesAPs.value, ...inservicesAPs],
+            },
           },
           clientDevices: {
             is2dot4GHz: {
@@ -163,6 +176,8 @@ const Dashboard = () => {
               value: [...prev.traffic.trafficBytesUpstream.value, ...trafficBytesUpstreamData],
             },
           },
+          totalDownstreamTraffic: totalDown,
+          totalUpstreamTraffic: totalUp,
         };
       });
     }
@@ -195,7 +210,7 @@ const Dashboard = () => {
     formatLineChartData(metricsData?.filterSystemEvents?.items);
   }, [metricsData]);
 
-  const statsArr = useMemo(() => {
+  const statsData = useMemo(() => {
     const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
 
     const {
@@ -203,8 +218,6 @@ const Dashboard = () => {
       totalProvisionedEquipment,
       equipmentInServiceCount,
       equipmentWithClientsCount,
-      trafficBytesDownstream,
-      trafficBytesUpstream,
     } = status;
 
     const clientRadios = {};
@@ -224,24 +237,13 @@ const Dashboard = () => {
       });
     }
 
-    return [
-      {
-        title: 'Access Point',
-        'Total Provisioned': totalProvisionedEquipment,
-        'In Service': equipmentInServiceCount,
-        'With Clients': equipmentWithClientsCount,
-      },
-      {
-        title: 'Client Devices',
-        'Total Associated': totalAssociated,
-        ...clientRadios,
-      },
-      {
-        title: 'Usage Information',
-        'Total Traffic (US)': formatBytes(trafficBytesUpstream),
-        'Total Traffic (DS)': formatBytes(trafficBytesDownstream),
-      },
-    ];
+    return {
+      totalProvisionedEquipment,
+      equipmentInServiceCount,
+      equipmentWithClientsCount,
+      totalAssociated,
+      clientRadios,
+    };
   }, [data]);
 
   const pieChartsData = useMemo(() => {
@@ -263,7 +265,24 @@ const Dashboard = () => {
 
   return (
     <DashboardPage
-      statsCardDetails={statsArr}
+      statsCardDetails={[
+        {
+          title: 'Access Point',
+          'Total Provisioned': statsData?.totalProvisionedEquipment,
+          'In Service': statsData?.equipmentInServiceCount,
+          'With Clients': statsData?.equipmentWithClientsCount,
+        },
+        {
+          title: 'Client Devices',
+          'Total Associated': statsData?.totalAssociated,
+          ...statsData?.clientRadios,
+        },
+        {
+          title: 'Usage Information (24 hours)',
+          'Total Traffic (US)': formatBytes(lineChartData?.totalUpstreamTraffic),
+          'Total Traffic (DS)': formatBytes(lineChartData?.totalDownstreamTraffic),
+        },
+      ]}
       pieChartDetails={pieChartsData}
       lineChartData={lineChartData}
       lineChartConfig={lineChartConfig}

app/containers/EditAccount/index.js

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
-import gql from 'graphql-tag';
-import { useMutation, useQuery } from '@apollo/react-hooks';
+import { useMutation, useQuery, gql } from '@apollo/client';
 import { notification, Alert } from 'antd';
 import { EditAccount as EditAccountPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
@@ -11,7 +10,7 @@ const GET_USER = gql`
     getUser(id: $id) {
       id
       username
-      role
+      roles
       customerId
       lastModifiedTimestamp
     }
@@ -23,7 +22,7 @@ const UPDATE_USER = gql`
     $id: ID!
     $username: String!
     $password: String!
-    $role: String!
+    $roles: [String]
     $customerId: ID!
     $lastModifiedTimestamp: String
   ) {
@@ -31,13 +30,13 @@ const UPDATE_USER = gql`
       id: $id
       username: $username
       password: $password
-      role: $role
+      roles: $roles
       customerId: $customerId
       lastModifiedTimestamp: $lastModifiedTimestamp
     ) {
       id
       username
-      role
+      roles
       customerId
       lastModifiedTimestamp
     }
@@ -50,14 +49,14 @@ const EditAccount = () => {
   const [updateUser] = useMutation(UPDATE_USER);
 
   const handleSubmit = newPassword => {
-    const { role, customerId, lastModifiedTimestamp } = data.getUser;
+    const { roles, customerId, lastModifiedTimestamp } = data.getUser;
 
     updateUser({
       variables: {
         id,
         username: email,
         password: newPassword,
-        role,
+        roles,
         customerId,
         lastModifiedTimestamp,
       },

app/containers/Login/index.js

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
-import gql from 'graphql-tag';
-import { useMutation, useApolloClient } from '@apollo/react-hooks';
+import { useMutation, useApolloClient, gql } from '@apollo/client';
 import { useHistory } from 'react-router-dom';
 import { notification } from 'antd';
 
@@ -27,9 +26,10 @@ const Login = () => {
   const handleLogin = (email, password) => {
     authenticateUser({ variables: { email, password } })
       .then(({ data }) => {
-        client.resetStore();
-        updateToken(data.authenticateUser);
-        history.push('/');
+        client.resetStore().then(() => {
+          updateToken(data.authenticateUser);
+          history.push('/');
+        });
       })
       .catch(() =>
         notification.error({

app/containers/MasterLayout/index.js

@@ -1,19 +1,19 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useLocation } from 'react-router-dom';
-import { useApolloClient, useQuery } from '@apollo/react-hooks';
+import { useApolloClient, useQuery } from '@apollo/client';
 import { AppLayout as Layout } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { GET_ALARM_COUNT } from 'graphql/queries';
 
-import { AUTH_TOKEN } from 'constants/index';
+import { AUTH_TOKEN, ROUTES } from 'constants/index';
 
 import { removeItem } from 'utils/localStorage';
 
 import UserContext from 'contexts/UserContext';
 
 const MasterLayout = ({ children }) => {
-  const { role, customerId } = useContext(UserContext);
+  const { roles, customerId, id: currentUserId } = useContext(UserContext);
 
   const client = useApolloClient();
   const location = useLocation();
@@ -30,75 +30,60 @@ const MasterLayout = ({ children }) => {
   const menuItems = [
     {
       key: 'dashboard',
-      path: '/dashboard',
+      path: ROUTES.dashboard,
       text: 'Dashboard',
     },
     {
       key: 'network',
-      path: '/network',
+      path: ROUTES.network,
       text: 'Network',
     },
     {
       key: 'profiles',
-      path: '/profiles',
+      path: ROUTES.profiles,
       text: 'Profiles',
     },
     {
       key: 'system',
-      path: '/system',
+      path: ROUTES.system,
       text: 'System',
     },
   ];
 
   const mobileMenuItems = [
-    {
-      key: 'dashboard',
-      path: '/dashboard',
-      text: 'Dashboard',
-    },
-    {
-      key: 'network',
-      path: '/network',
-      text: 'Network',
-    },
-    {
-      key: 'profiles',
-      path: '/profiles',
-      text: 'Profiles',
-    },
-    {
-      key: 'system',
-      path: '/system',
-      text: 'System',
-    },
+    ...menuItems,
     {
       key: 'settings',
       text: 'Settings',
       children: [
-        {
-          key: 'editAccount',
-          path: '/account/edit',
-          text: 'Edit Account',
-        },
+        ...(currentUserId !== 0
+          ? [
+              {
+                key: 'editAccount',
+                path: ROUTES.account,
+                text: 'Edit Account',
+              },
+            ]
+          : []),
         {
           key: 'logout',
-          path: '/',
+          path: ROUTES.root,
           text: 'Log Out',
         },
       ],
     },
   ];
 
-  if (role === 'SuperUser') {
+  if (roles?.[0] === 'SuperUser') {
     menuItems.push({
-      key: 'accounts',
-      path: '/accounts',
-      text: 'Accounts',
+      key: 'users',
+      path: ROUTES.users,
+      text: 'Users',
     });
     mobileMenuItems.push({
-      key: 'accounts',
-      path: '/accounts',
-      text: 'Accounts',
+      key: 'users',
+      path: ROUTES.users,
+      text: 'Users',
     });
   }
 
@@ -109,6 +94,7 @@ const MasterLayout = ({ children }) => {
       menuItems={menuItems}
       mobileMenuItems={mobileMenuItems}
       totalAlarms={data && data.getAlarmCount}
+      currentUserId={currentUserId}
     >
       {children}
     </Layout>

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

@@ -1,177 +1,77 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useParams } from 'react-router-dom';
-import gql from 'graphql-tag';
-import { useQuery, useMutation } from '@apollo/react-hooks';
-import { Alert, Spin, notification } from 'antd';
+import { useParams, useHistory } from 'react-router-dom';
+import { useQuery, useMutation } from '@apollo/client';
+import { Alert, notification } from 'antd';
 import moment from 'moment';
-import { AccessPointDetails as AccessPointDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import {
+  AccessPointDetails as AccessPointDetailsPage,
+  Loading,
+} from '@tip-wlan/wlan-cloud-ui-library';
 
-import { FILTER_SERVICE_METRICS } from 'graphql/queries';
-import { UPDATE_EQUIPMENT_FIRMWARE } from 'graphql/mutations';
+import {
+  GET_EQUIPMENT,
+  FILTER_SERVICE_METRICS,
+  GET_ALL_FIRMWARE,
+  GET_ALL_PROFILES,
+} from 'graphql/queries';
+import {
+  UPDATE_EQUIPMENT,
+  DELETE_EQUIPMENT,
+  UPDATE_EQUIPMENT_FIRMWARE,
+  REQUEST_EQUIPMENT_SWITCH_BANK,
+  REQUEST_EQUIPMENT_REBOOT,
+} from 'graphql/mutations';
+import { fetchMoreProfiles } from 'graphql/functions';
 import UserContext from 'contexts/UserContext';
 
-const GET_EQUIPMENT = gql`
-  query GetEquipment($id: ID!) {
-    getEquipment(id: $id) {
-      id
-      equipmentType
-      inventoryId
-      customerId
-      profileId
-      locationId
-      name
-      latitude
-      longitude
-      serial
-      lastModifiedTimestamp
-      details
-      profile {
-        name
-        childProfiles {
-          id
-          name
-          details
-        }
-      }
-      status {
-        firmware {
-          detailsJSON
-        }
-        protocol {
-          detailsJSON
-          details {
-            reportedMacAddr
-            manufacturer
-          }
-        }
-        radioUtilization {
-          detailsJSON
-        }
-        clientDetails {
-          detailsJSON
-          details {
-            numClientsPerRadio
-          }
-        }
-        osPerformance {
-          detailsJSON
-        }
-      }
-      model
-      alarmsCount
-      alarms {
-        severity
-        alarmCode
-        details
-        createdTimestamp
-      }
-    }
-  }
-`;
-
-export const GET_ALL_FIRMWARE = gql`
-  query GetAllFirmware {
-    getAllFirmware {
-      id
-      modelId
-      versionName
-      description
-      filename
-      commit
-      releaseDate
-    }
-  }
-`;
-
-const UPDATE_EQUIPMENT = gql`
-  mutation UpdateEquipment(
-    $id: ID!
-    $equipmentType: String!
-    $inventoryId: String!
-    $customerId: ID!
-    $profileId: ID!
-    $locationId: ID!
-    $name: String!
-    $latitude: String
-    $longitude: String
-    $serial: String
-    $lastModifiedTimestamp: String
-    $details: JSONObject
-  ) {
-    updateEquipment(
-      id: $id
-      equipmentType: $equipmentType
-      inventoryId: $inventoryId
-      customerId: $customerId
-      profileId: $profileId
-      locationId: $locationId
-      name: $name
-      latitude: $latitude
-      longitude: $longitude
-      serial: $serial
-      lastModifiedTimestamp: $lastModifiedTimestamp
-      details: $details
-    ) {
-      id
-      equipmentType
-      inventoryId
-      customerId
-      profileId
-      locationId
-      name
-      latitude
-      longitude
-      serial
-      lastModifiedTimestamp
-      details
-    }
-  }
-`;
-
-export const GET_ALL_PROFILES = gql`
-  query GetAllProfiles($customerId: ID!, $cursor: String, $type: String) {
-    getAllProfiles(customerId: $customerId, cursor: $cursor, type: $type) {
-      items {
-        id
-        name
-        profileType
-        details
-        childProfiles {
-          id
-          name
-          details
-        }
-      }
-      context {
-        cursor
-        lastPage
-      }
-    }
-  }
-`;
-
 const toTime = moment();
 const fromTime = moment().subtract(1, 'hour');
 
 const AccessPointDetails = ({ locations }) => {
   const { id } = useParams();
   const { customerId } = useContext(UserContext);
+  const history = useHistory();
 
   const { loading, error, data, refetch } = useQuery(GET_EQUIPMENT, {
-    variables: { id },
+    variables: {
+      id,
+    },
+    fetchPolicy: 'network-only',
+    errorPolicy: 'all',
   });
-  const { data: dataProfiles, error: errorProfiles, loading: landingProfiles } = useQuery(
-    GET_ALL_PROFILES,
+
+  const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
+    GET_ALL_FIRMWARE,
     {
-      variables: { customerId, type: 'equipment_ap' },
+      skip: !data?.getEquipment?.model,
+      variables: { modelId: data?.getEquipment?.model },
+      errorPolicy: 'all',
     }
   );
+  const {
+    data: dataProfiles,
+    error: errorProfiles,
+    loading: loadingProfiles,
+    fetchMore,
+  } = useQuery(
+    GET_ALL_PROFILES(`
+    childProfiles {
+      id
+      name
+      details
+    }`),
+    {
+      variables: { customerId, type: 'equipment_ap' },
+      fetchPolicy: 'network-only',
+    }
+  );
+
   const {
     loading: metricsLoading,
     error: metricsError,
     data: metricsData,
-    refetch: metricsRefetch,
+    fetchMore: fetchMoreServiceMetrics,
   } = useQuery(FILTER_SERVICE_METRICS, {
     variables: {
       customerId,
@@ -185,30 +85,52 @@ const AccessPointDetails = ({ locations }) => {
 
   const [updateEquipment] = useMutation(UPDATE_EQUIPMENT);
   const [updateEquipmentFirmware] = useMutation(UPDATE_EQUIPMENT_FIRMWARE);
-
-  const { data: dataFirmware, error: errorFirmware, loading: landingFirmware } = useQuery(
-    GET_ALL_FIRMWARE
-  );
+  const [requestEquipmentSwitchBank] = useMutation(REQUEST_EQUIPMENT_SWITCH_BANK);
+  const [requestEquipmentReboot] = useMutation(REQUEST_EQUIPMENT_REBOOT);
+  const [deleteEquipment] = useMutation(DELETE_EQUIPMENT);
 
   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 = (
-    equipmentId,
+  const handleUpdateEquipment = ({
+    id: equipmentId,
     equipmentType,
     inventoryId,
-    custId,
+    customerId: custId,
     profileId,
     locationId,
     name,
+    baseMacAddress,
     latitude,
     longitude,
     serial,
     lastModifiedTimestamp,
-    details
-  ) => {
+    formattedData,
+  }) => {
     updateEquipment({
       variables: {
         id: equipmentId,
@@ -218,11 +140,12 @@ const AccessPointDetails = ({ locations }) => {
         profileId,
         locationId,
         name,
+        baseMacAddress,
         latitude,
         longitude,
         serial,
         lastModifiedTimestamp,
-        details,
+        details: formattedData,
       },
     })
       .then(() => {
@@ -240,19 +163,38 @@ const AccessPointDetails = ({ locations }) => {
       );
   };
 
+  const handleDeleteEquipment = () => {
+    deleteEquipment({
+      variables: { id },
+    })
+      .then(() => {
+        history.push('/network/access-points');
+        notification.success({
+          message: 'Success',
+          description: 'Equipment successfully deleted',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment could not be deleted.',
+        })
+      );
+  };
+
   const handleUpdateEquipmentFirmware = (equipmentId, firmwareVersionId) =>
     updateEquipmentFirmware({ variables: { equipmentId, firmwareVersionId } })
       .then(firmwareResp => {
-        if (firmwareResp && firmwareResp.updateEquipmentFirmware.success === false) {
-          notification.error({
-            message: 'Error',
-            description: 'Equipment Firmware Upgrade could not be updated.',
-          });
-        } else {
+        if (firmwareResp?.data?.updateEquipmentFirmware?.success === true) {
           notification.success({
             message: 'Success',
             description: 'Equipment Firmware Upgrade in progress',
           });
+        } else {
+          notification.error({
+            message: 'Error',
+            description: 'Equipment Firmware Upgrade could not be updated.',
+          });
         }
       })
       .catch(() =>
@@ -262,11 +204,59 @@ const AccessPointDetails = ({ locations }) => {
         })
       );
 
-  if (loading || landingProfiles || landingFirmware) {
-    return <Spin size="large" />;
+  const handleRequestEquipmentSwitchBank = equipmentId =>
+    requestEquipmentSwitchBank({ variables: { equipmentId } })
+      .then(firmwareResp => {
+        if (firmwareResp?.data?.requestEquipmentSwitchBank?.success === true) {
+          notification.success({
+            message: 'Success',
+            description: 'Equipment Firmware in progress',
+          });
+        } else {
+          notification.error({
+            message: 'Error',
+            description: 'Equipment Firmware could not be updated.',
+          });
+        }
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment Firmware could not be updated.',
+        })
+      );
+
+  const handleRequestEquipmentReboot = equipmentId =>
+    requestEquipmentReboot({ variables: { equipmentId } })
+      .then(firmwareResp => {
+        if (firmwareResp?.data?.requestEquipmentReboot?.success === true) {
+          notification.success({
+            message: 'Success',
+            description: 'Equipment Firmware in progress',
+          });
+        } else {
+          notification.error({
+            message: 'Error',
+            description: 'Equipment Firmware could not be updated.',
+          });
+        }
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment Firmware could not be updated.',
+        })
+      );
+
+  const handleFetchProfiles = e => {
+    fetchMoreProfiles(e, dataProfiles, fetchMore);
+  };
+
+  if (loading) {
+    return <Loading />;
   }
 
-  if (error) {
+  if (error && !data?.getEquipment) {
     return (
       <Alert
         message="Error"
@@ -277,42 +267,29 @@ const AccessPointDetails = ({ locations }) => {
     );
   }
 
-  if (errorProfiles) {
-    return (
-      <Alert
-        message="Error"
-        description="Failed to load Access Point profiles."
-        type="error"
-        showIcon
-      />
-    );
-  }
-
-  if (errorFirmware) {
-    return (
-      <Alert
-        message="Error"
-        description="Failed to load Access Point firmware."
-        type="error"
-        showIcon
-      />
-    );
-  }
-
   return (
     <AccessPointDetailsPage
       handleRefresh={refetchData}
       onUpdateEquipment={handleUpdateEquipment}
-      data={data.getEquipment}
-      profiles={dataProfiles.getAllProfiles.items}
+      onDeleteEquipment={handleDeleteEquipment}
+      data={data?.getEquipment}
+      profiles={dataProfiles?.getAllProfiles?.items}
       osData={{
         loading: metricsLoading,
         error: metricsError,
         data: metricsData && metricsData.filterServiceMetrics.items,
       }}
-      firmware={dataFirmware.getAllFirmware}
+      firmware={dataFirmware?.getAllFirmware}
       locations={locations}
       onUpdateEquipmentFirmware={handleUpdateEquipmentFirmware}
+      onRequestEquipmentSwitchBank={handleRequestEquipmentSwitchBank}
+      onRequestEquipmentReboot={handleRequestEquipmentReboot}
+      loadingProfiles={loadingProfiles}
+      errorProfiles={errorProfiles}
+      loadingFirmware={loadingFirmware}
+      errorFirmware={errorFirmware}
+      onFetchMoreProfiles={handleFetchProfiles}
+      isLastProfilesPage={dataProfiles?.getAllProfiles?.context?.lastPage}
     />
   );
 };

app/containers/Network/containers/AccessPoints/index.js

@@ -1,28 +1,32 @@
 import React, { useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { useLazyQuery } from '@apollo/react-hooks';
-import { Alert } from 'antd';
+import { useLazyQuery } from '@apollo/client';
+import { notification } from 'antd';
 import { floor, padStart } from 'lodash';
-import { NetworkTable, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';
 
+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { FILTER_EQUIPMENT } from 'graphql/queries';
 
 import styles from './index.module.scss';
 
-const renderTableCell = tabCell => {
-  if (Array.isArray(tabCell)) {
+const renderTableCell = (text, _record, _index, defaultValue = 'N/A') => {
+  if (Array.isArray(text)) {
+    if (text.length < 1) {
+      return defaultValue;
+    }
     return (
       <div className={styles.tabColumn}>
-        {tabCell.map((i, key) => (
+        {text.map((i, key) => (
           // eslint-disable-next-line react/no-array-index-key
           <span key={key}>{i}</span>
         ))}
       </div>
     );
   }
-  return tabCell;
+  return text !== null ? text : defaultValue;
 };
 
 const durationToString = duration =>
@@ -55,12 +59,17 @@ const accessPointsTableColumns = [
   },
   {
     title: 'MAC',
-    dataIndex: ['status', 'protocol', 'details', 'reportedMacAddr'],
+    dataIndex: 'baseMacAddress',
     render: renderTableCell,
   },
   {
     title: 'MANUFACTURER',
-    dataIndex: ['status', 'protocol', 'details', 'manufacturer'],
+    dataIndex: 'manufacturer',
+    render: renderTableCell,
+  },
+  {
+    title: 'FIRMWARE',
+    dataIndex: ['status', 'firmware', 'detailsJSON', 'activeSwVersion'],
     render: renderTableCell,
   },
   {
@@ -80,8 +89,8 @@ const accessPointsTableColumns = [
   },
   {
     title: 'CHANNEL',
-    dataIndex: 'channel',
-    render: renderTableCell,
+    dataIndex: ['status', 'channel', 'detailsJSON', 'channelNumberStatusDataMap'],
+    render: text => renderTableCell(Object.values(text ?? [])),
   },
   {
     title: 'OCCUPANCY',
@@ -96,23 +105,39 @@ const accessPointsTableColumns = [
   {
     title: 'DEVICES',
     dataIndex: ['status', 'clientDetails', 'details', 'numClientsPerRadio'],
-    render: renderTableCell,
+    render: (text, record, index) => renderTableCell(text, record, index, 0),
   },
 ];
 
 const AccessPoints = ({ checkedLocations }) => {
   const { customerId } = useContext(UserContext);
-  const [filterEquipment, { loading, error, data: equipData, fetchMore }] = useLazyQuery(
+  const [filterEquipment, { loading, error, data: equipData, refetch, fetchMore }] = useLazyQuery(
     FILTER_EQUIPMENT,
     {
       errorPolicy: 'all',
     }
   );
 
+  const handleOnRefresh = () => {
+    refetch()
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Access points reloaded.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Access points could not be reloaded.',
+        })
+      );
+  };
+
   const handleLoadMore = () => {
     if (!equipData.filterEquipment.context.lastPage) {
       fetchMore({
-        variables: { cursor: equipData.filterEquipment.context.cursor },
+        variables: { context: equipData.filterEquipment.context },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.filterEquipment;
           const newItems = fetchMoreResult.filterEquipment.items;
@@ -139,22 +164,18 @@ const AccessPoints = ({ checkedLocations }) => {
     fetchFilterEquipment();
   }, [checkedLocations]);
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error && !equipData?.filterEquipment?.items) {
-    return <Alert message="Error" description="Failed to load equipment." type="error" showIcon />;
-  }
-
   return (
-    <NetworkTable
+    <NetworkTableContainer
+      activeTab={ROUTES.accessPoints}
+      onRefresh={handleOnRefresh}
       tableColumns={accessPointsTableColumns}
       tableData={equipData && equipData.filterEquipment && equipData.filterEquipment.items}
       onLoadMore={handleLoadMore}
       isLastPage={
         equipData && equipData.filterEquipment && equipData.filterEquipment.context.lastPage
       }
+      loading={loading}
+      error={error && !equipData?.filterEquipment?.items && 'Failed to load equipment.'}
     />
   );
 };

app/containers/Network/containers/AccessPoints/index.module.scss

@@ -1,5 +1,4 @@
 .tabColumn {
   display: flex;
   flex-direction: column;
-  padding: 0 30px;
 }

app/containers/Network/containers/BulkEditAccessPoints/index.js

@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Alert, notification } from 'antd';
 import { useParams } from 'react-router-dom';
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import { useQuery, useMutation } from '@apollo/client';
 import { BulkEditAccessPoints, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
 import { FILTER_EQUIPMENT_BULK_EDIT_APS } from 'graphql/queries';
@@ -11,6 +11,8 @@ import { UPDATE_EQUIPMENT_BULK } from 'graphql/mutations';
 import UserContext from 'contexts/UserContext';
 import styles from './index.module.scss';
 
+const defaultAppliedRadios = { is5GHzL: 'is5GHzL', is2dot4GHz: 'is2dot4GHz', is5GHzU: 'is5GHzU' };
+
 const renderTableCell = tabCell => {
   if (Array.isArray(tabCell)) {
     return (
@@ -25,47 +27,63 @@ const renderTableCell = tabCell => {
   return <span>{tabCell}</span>;
 };
 const accessPointsChannelTableColumns = [
-  { title: 'NAME', dataIndex: 'name', key: 'name', render: renderTableCell },
+  { title: 'Name', dataIndex: 'name', key: 'name', width: 250, render: renderTableCell },
   {
-    title: 'CHANNEL',
-    dataIndex: 'channel',
-    key: 'channel',
+    title: 'Manual Active Channel',
+    dataIndex: 'manualChannelNumber',
+    key: 'manualChannelNumber',
     editable: true,
+    width: 200,
+    render: renderTableCell,
+  },
+
+  {
+    title: 'Manual Backup Channel',
+    dataIndex: 'manualBackupChannelNumber',
+    key: 'manualBackupChannelNumber',
+    editable: true,
+    width: 210,
     render: renderTableCell,
   },
   {
-    title: 'CELL SIZE',
+    title: 'Cell Size',
     dataIndex: 'cellSize',
     key: 'cellSize',
     editable: true,
+    width: 150,
     render: renderTableCell,
   },
   {
-    title: 'PROB RESPONSE THRESHOLD',
+    title: 'Probe Response Threshold',
     dataIndex: 'probeResponseThreshold',
     key: 'probeResponseThreshold',
     editable: true,
+    width: 210,
     render: renderTableCell,
   },
   {
-    title: 'CLIENT DISCONNECT THRESHOLD',
+    title: 'Client Disconnect Threshold',
     dataIndex: 'clientDisconnectThreshold',
     key: 'clientDisconnectThreshold',
     editable: true,
+    width: 210,
+
     render: renderTableCell,
   },
   {
-    title: 'SNR (% DROP)',
+    title: 'SNR (% Drop)',
     dataIndex: 'snrDrop',
     key: 'snrDrop',
     editable: true,
+    width: 150,
     render: renderTableCell,
   },
   {
-    title: 'MIN LOAD',
+    title: 'Min Load',
     dataIndex: 'minLoad',
     key: 'minLoad',
     editable: true,
+    width: 150,
     render: renderTableCell,
   },
 ];
@@ -160,68 +178,84 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
   const [updateEquipmentBulk] = useMutation(UPDATE_EQUIPMENT_BULK);
 
   const getRadioDetails = (radioDetails, type) => {
+    if (type === 'manualChannelNumber') {
+      const manualChannelNumbers = [];
+      Object.keys(radioDetails?.radioMap || {}).map(i => {
+        return manualChannelNumbers.push(radioDetails.radioMap[i]?.manualChannelNumber);
+      });
+      return manualChannelNumbers;
+    }
+
+    if (type === 'manualBackupChannelNumber') {
+      const manualBackupChannelNumbers = [];
+      Object.keys(radioDetails?.radioMap || {}).map(i => {
+        return manualBackupChannelNumbers.push(radioDetails.radioMap[i]?.manualBackupChannelNumber);
+      });
+      return manualBackupChannelNumbers;
+    }
     if (type === 'cellSize') {
       const cellSizeValues = [];
-      Object.keys(radioDetails.radioMap).map(i => {
-        return cellSizeValues.push(radioDetails.radioMap[i].rxCellSizeDb.value);
+      Object.keys(radioDetails?.radioMap || {}).map(i => {
+        return cellSizeValues.push(radioDetails.radioMap[i]?.rxCellSizeDb?.value);
       });
       return cellSizeValues;
     }
     if (type === 'probeResponseThreshold') {
       const probeResponseThresholdValues = [];
-      Object.keys(radioDetails.radioMap).map(i => {
+      Object.keys(radioDetails?.radioMap || {}).map(i => {
         return probeResponseThresholdValues.push(
-          radioDetails.radioMap[i].probeResponseThresholdDb.value
+          radioDetails.radioMap[i]?.probeResponseThresholdDb?.value
         );
       });
       return probeResponseThresholdValues;
     }
     if (type === 'clientDisconnectThreshold') {
       const clientDisconnectThresholdValues = [];
-      Object.keys(radioDetails.radioMap).map(i => {
+      Object.keys(radioDetails?.radioMap || {}).map(i => {
         return clientDisconnectThresholdValues.push(
-          radioDetails.radioMap[i].clientDisconnectThresholdDb.value
+          radioDetails.radioMap[i]?.clientDisconnectThresholdDb?.value
         );
       });
       return clientDisconnectThresholdValues;
     }
     if (type === 'snrDrop') {
       const snrDropValues = [];
-      Object.keys(radioDetails.advancedRadioMap).map(i => {
+      Object.keys(radioDetails?.radioMap || {}).map(i => {
         return snrDropValues.push(
-          radioDetails.advancedRadioMap[i].bestApSettings.dropInSnrPercentage
+          radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.dropInSnrPercentage
         );
       });
       return snrDropValues;
     }
 
     const minLoadValue = [];
-    Object.keys(radioDetails.advancedRadioMap).map(i => {
-      return minLoadValue.push(radioDetails.advancedRadioMap[i].bestApSettings.minLoadFactor);
+    Object.keys(radioDetails?.radioMap || {}).map(i => {
+      return minLoadValue.push(
+        radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.minLoadFactor
+      );
     });
     return minLoadValue;
   };
 
-  const setAccessPointsBulkEditTableData = (dataSource = []) => {
-    const tableData = dataSource.items.map(({ id: key, name, channel, details }) => {
-      return {
-        key,
-        id: key,
-        name,
-        channel,
-        cellSize: getRadioDetails(details, 'cellSize'),
-        probeResponseThreshold: getRadioDetails(details, 'probeResponseThreshold'),
-        clientDisconnectThreshold: getRadioDetails(details, 'clientDisconnectThreshold'),
-        snrDrop: getRadioDetails(details, 'snrDrop'),
-        minLoad: getRadioDetails(details, 'minLoad'),
-      };
-    });
-    return tableData;
-  };
+  const setAccessPointsBulkEditTableData = (dataSource = []) =>
+    dataSource.items.map(({ id: key, name, details }) => ({
+      key,
+      id: key,
+      name,
+      manualChannelNumber: getRadioDetails(details, 'manualChannelNumber'),
+      manualBackupChannelNumber: getRadioDetails(details, 'manualBackupChannelNumber'),
+      cellSize: getRadioDetails(details, 'cellSize'),
+      probeResponseThreshold: getRadioDetails(details, 'probeResponseThreshold'),
+      clientDisconnectThreshold: getRadioDetails(details, 'clientDisconnectThreshold'),
+      snrDrop: getRadioDetails(details, 'snrDrop'),
+      minLoad: getRadioDetails(details, 'minLoad'),
+      radioMap: Object.keys(details?.radioMap || {}),
+    }));
 
   const setUpdatedBulkEditTableData = (
     equipmentId,
-    channel,
+    manualChannelNumber,
+    manualBackupChannelNumber,
     cellSize,
     probeResponseThreshold,
     clientDisconnectThreshold,
@@ -234,13 +268,14 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
     let minLoadFactor;
     dataSource.items.forEach(({ id: itemId, details }) => {
       if (equipmentId === itemId) {
-        Object.keys(details.radioMap).forEach((i, dataIndex) => {
+        Object.keys(details?.radioMap || defaultAppliedRadios).forEach((i, dataIndex) => {
           const frequencies = {};
           dropInSnrPercentage = snrDrop[dataIndex];
           minLoadFactor = minLoad[dataIndex];
 
           frequencies[`${i}`] = {
-            channelNumber: channel[dataIndex],
+            channelNumber: manualChannelNumber[dataIndex],
+            backupChannelNumber: manualBackupChannelNumber[dataIndex],
             rxCellSizeDb: {
               auto: true,
               value: cellSize[dataIndex],
@@ -286,48 +321,47 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
 
   const handleSaveChanges = updatedRows => {
     const editedRowsArr = [];
-    if (updatedRows.length > 0) {
-      updatedRows.map(
-        ({
-          id: equipmentId,
-          channel,
-          cellSize,
-          probeResponseThreshold,
-          clientDisconnectThreshold,
-          snrDrop,
-          minLoad,
-        }) => {
-          const updatedEuips = setUpdatedBulkEditTableData(
-            equipmentId,
-            channel,
-            cellSize,
-            probeResponseThreshold,
-            clientDisconnectThreshold,
-            snrDrop,
-            minLoad,
-            equipData && equipData.filterEquipment
-          );
-          const tempObj = {
-            equipmentId,
-            perRadioDetails: {},
-          };
-          updatedEuips.map(item => {
-            Object.keys(item).forEach(i => {
-              tempObj.perRadioDetails[i] = item[i];
-            });
-            return tempObj;
-          });
-          return editedRowsArr.push(tempObj);
-        }
+    Object.keys(updatedRows).forEach(key => {
+      const {
+        id: equipmentId,
+        manualChannelNumber,
+        manualBackupChannelNumber,
+        cellSize,
+        probeResponseThreshold,
+        clientDisconnectThreshold,
+        snrDrop,
+        minLoad,
+      } = updatedRows[key];
+      const updatedEuips = setUpdatedBulkEditTableData(
+        equipmentId,
+        manualChannelNumber,
+        manualBackupChannelNumber,
+        cellSize,
+        probeResponseThreshold,
+        clientDisconnectThreshold,
+        snrDrop,
+        minLoad,
+        equipData && equipData.filterEquipment
       );
-      updateEquipments(editedRowsArr);
-    }
+      const tempObj = {
+        equipmentId,
+        perRadioDetails: {},
+      };
+      updatedEuips.map(item => {
+        Object.keys(item).forEach(i => {
+          tempObj.perRadioDetails[i] = item[i];
+        });
+        return tempObj;
+      });
+      return editedRowsArr.push(tempObj);
+    });
+    updateEquipments(editedRowsArr);
   };
 
   const handleLoadMore = () => {
     if (!equipData.filterEquipment.context.lastPage) {
       fetchMore({
-        variables: { cursor: equipData.filterEquipment.context.cursor },
+        variables: { context: equipData.filterEquipment.context },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.filterEquipment;
           const newItems = fetchMoreResult.filterEquipment.items;
@@ -356,18 +390,9 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
   return (
     <BulkEditAccessPoints
       tableColumns={accessPointsChannelTableColumns}
-      tableData={
-        equipData &&
-        equipData.filterEquipment &&
-        setAccessPointsBulkEditTableData(equipData && equipData.filterEquipment)
-      }
+      tableData={setAccessPointsBulkEditTableData(equipData?.filterEquipment)}
       onLoadMore={handleLoadMore}
-      isLastPage={
-        equipData &&
-        equipData.filterEquipment &&
-        equipData.filterEquipment.context &&
-        equipData.filterEquipment.context.lastPage
-      }
+      isLastPage={equipData?.filterEquipment?.context?.lastPage}
       onSaveChanges={handleSaveChanges}
       breadcrumbPath={getBreadcrumbPath(id, locations)}
     />

app/containers/Network/containers/BulkEditAccessPoints/index.module.scss

@@ -1,5 +1,4 @@
 .tabColumn {
   display: flex;
   flex-direction: column;
-  padding: 0 30px;
 }

app/containers/Network/containers/ClientDeviceDetails/index.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { useParams } from 'react-router-dom';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import moment from 'moment';
 import { Alert, notification } from 'antd';
 import {

app/containers/Network/containers/ClientDevices/index.js

@@ -1,9 +1,11 @@
 import React, { useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useLazyQuery } from '@apollo/react-hooks';
-import { Alert } from 'antd';
-import { NetworkTable, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { useLazyQuery } from '@apollo/client';
+import { notification } from 'antd';
 
+import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';
+
+import { ROUTES, USER_FRIENDLY_RADIOS } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';
 
@@ -21,14 +23,30 @@ const clientDevicesTableColumns = [
   { title: 'HOST NAME', dataIndex: 'hostname' },
   { title: 'ACCESS POINT', dataIndex: ['equipment', 'name'] },
   { title: 'SSID', dataIndex: 'ssid' },
-  { title: 'BAND', dataIndex: 'radioType' },
+  {
+    title: 'BAND',
+    dataIndex: 'radioType',
+    render: band => USER_FRIENDLY_RADIOS[band],
+  },
   { title: 'SIGNAL', dataIndex: 'signal' },
-  { title: 'STATUS', dataIndex: 'status' },
+  {
+    title: 'STATUS',
+    dataIndex: ['details', 'associationState'],
+    render: text => {
+      if (text === 'Active_Data') {
+        return 'Connected';
+      }
+      if (text === 'Disconnected') {
+        return 'Disconnected';
+      }
+      return 'N/A';
+    },
+  },
 ];
 
 const ClientDevices = ({ checkedLocations }) => {
   const { customerId } = useContext(UserContext);
-  const [filterClientSessions, { loading, error, data, fetchMore }] = useLazyQuery(
+  const [filterClientSessions, { loading, error, data, refetch, fetchMore }] = useLazyQuery(
     FILTER_CLIENT_SESSIONS,
     {
       errorPolicy: 'all',
@@ -38,7 +56,7 @@ const ClientDevices = ({ checkedLocations }) => {
   const handleLoadMore = () => {
     if (!data.filterClientSessions.context.lastPage) {
       fetchMore({
-        variables: { cursor: data.filterClientSessions.context.cursor },
+        variables: { context: data.filterClientSessions.context },
         updateQuery: (previousResult, { fetchMoreResult }) => {
           const previousEntry = previousResult.filterClientSessions;
           const newItems = fetchMoreResult.filterClientSessions.items;
@@ -61,26 +79,36 @@ const ClientDevices = ({ checkedLocations }) => {
     });
   };
 
+  const handleOnRefresh = () => {
+    refetch()
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Client devices reloaded.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Client devices could not be reloaded.',
+        })
+      );
+  };
+
   useEffect(() => {
     fetchFilterClientSessions();
   }, [checkedLocations]);
 
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error && !data?.filterClientSessions?.items) {
-    return (
-      <Alert message="Error" description="Failed to load client devices." type="error" showIcon />
-    );
-  }
-
   return (
-    <NetworkTable
+    <NetworkTableContainer
+      activeTab={ROUTES.clientDevices}
       tableColumns={clientDevicesTableColumns}
-      tableData={data && data.filterClientSessions && data.filterClientSessions.items}
+      tableData={data?.filterClientSessions?.items}
       onLoadMore={handleLoadMore}
+      onRefresh={handleOnRefresh}
       isLastPage={data && data.filterClientSessions && data.filterClientSessions.context.lastPage}
+      loading={loading}
+      error={error && !data?.filterClientSessions?.items && 'Failed to load client devices.'}
     />
   );
 };

app/containers/Network/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useContext, useState } from 'react';
-import { useLocation, Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
-import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
+import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
+import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
 import { Alert, notification } from 'antd';
 import _ from 'lodash';
 import { Network as NetworkPage, PopoverMenu, Loading } from '@tip-wlan/wlan-cloud-ui-library';
@@ -12,23 +12,28 @@ import ClientDeviceDetails from 'containers/Network/containers/ClientDeviceDetai
 import BulkEditAccessPoints from 'containers/Network/containers/BulkEditAccessPoints';
 
 import UserContext from 'contexts/UserContext';
-import { GET_ALL_LOCATIONS, GET_LOCATION, GET_ALL_PROFILES } from 'graphql/queries';
+import {
+  GET_ALL_LOCATIONS,
+  GET_LOCATION,
+  GET_ALL_PROFILES,
+  FILTER_EQUIPMENT,
+} from 'graphql/queries';
 import {
   CREATE_LOCATION,
   UPDATE_LOCATION,
   DELETE_LOCATION,
   CREATE_EQUIPMENT,
 } from 'graphql/mutations';
+import { updateQueryGetAllProfiles } from 'graphql/functions';
 
 const Network = () => {
   const { path } = useRouteMatch();
   const { customerId } = useContext(UserContext);
-  const location = useLocation();
   const { loading, error, refetch, data } = useQuery(GET_ALL_LOCATIONS, {
     variables: { customerId },
   });
-  const { loading: loadingProfile, error: errorProfile, data: apProfiles } = useQuery(
-    GET_ALL_PROFILES,
+  const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
+    GET_ALL_PROFILES(),
     {
       variables: { customerId, type: 'equipment_ap' },
     }
@@ -38,13 +43,21 @@ const Network = () => {
   const [createLocation] = useMutation(CREATE_LOCATION);
   const [updateLocation] = useMutation(UPDATE_LOCATION);
   const [deleteLocation] = useMutation(DELETE_LOCATION);
-  const [createEquipment] = useMutation(CREATE_EQUIPMENT);
   const [checkedLocations, setCheckedLocations] = useState([]);
   const [deleteModal, setDeleteModal] = useState(false);
   const [editModal, setEditModal] = useState(false);
   const [addModal, setAddModal] = useState(false);
   const [apModal, setApModal] = useState(false);
 
+  const [createEquipment] = useMutation(CREATE_EQUIPMENT, {
+    refetchQueries: [
+      {
+        query: FILTER_EQUIPMENT,
+        variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
+      },
+    ],
+  });
+
   const handleGetSingleLocation = id => {
     getLocation({
       variables: { id },
@@ -52,7 +65,7 @@ const Network = () => {
   };
 
   const formatLocationListForTree = (list = []) => {
-    const checkedTreeLocations = [];
+    const checkedTreeLocations = ['0'];
     list.forEach(ele => {
       checkedTreeLocations.push(ele.id);
     });
@@ -92,26 +105,38 @@ const Network = () => {
     return [
       {
         title: (
-          <PopoverMenu locationType="NETWORK" setAddModal={setAddModal}>
+          <PopoverMenu locationId="0" locationType="NETWORK" setAddModal={setAddModal}>
             Network
           </PopoverMenu>
         ),
         id: '0',
-        value: '0',
         key: '0',
+        value: '0',
         children: unflatten(list),
       },
     ];
   };
 
-  const handleAddLocation = (name, parentId, locationType) => {
+  const handleAddLocation = ({ location }) => {
     setAddModal(false);
+    let id;
+    let locationType;
+
+    // adding location from root makes selecetedLocation null so we check for that
+    if (selectedLocation && selectedLocation.getLocation) {
+      id = selectedLocation.getLocation.id;
+      locationType = 'SITE';
+    } else {
+      id = '0';
+      locationType = 'COUNTRY';
+    }
+
     createLocation({
       variables: {
         locationType,
         customerId,
-        parentId,
-        name,
+        parentId: id,
+        name: location,
       },
     })
       .then(() => {
@@ -129,8 +154,10 @@ const Network = () => {
       );
   };
 
-  const handleEditLocation = (id, parentId, name, locationType, lastModifiedTimestamp) => {
+  const handleEditLocation = ({ name }) => {
     setEditModal(false);
+    const { id, parentId, locationType, lastModifiedTimestamp } = selectedLocation.getLocation;
+
     updateLocation({
       variables: {
         customerId,
@@ -156,8 +183,10 @@ const Network = () => {
       );
   };
 
-  const handleDeleteLocation = id => {
+  const handleDeleteLocation = () => {
     setDeleteModal(false);
+    const { id } = selectedLocation.getLocation;
+
     deleteLocation({ variables: { id } })
       .then(() => {
         notification.success({
@@ -174,8 +203,10 @@ const Network = () => {
       );
   };
 
-  const handleCreateEquipment = (inventoryId, locationId, name, profileId) => {
+  const handleCreateEquipment = ({ inventoryId, name, profileId }) => {
     setApModal(false);
+    const { id: locationId } = selectedLocation.getLocation;
+
     createEquipment({ variables: { customerId, inventoryId, locationId, name, profileId } })
       .then(() => {
         notification.success({
@@ -201,10 +232,27 @@ const Network = () => {
     setCheckedLocations(checkedKeys.checked);
   };
 
-  const locationsTree = useMemo(
-    () => formatLocationListForTree(data && data.getAllLocations)[0].children,
-    [data]
-  );
+  const handleFetchProfiles = e => {
+    if (apProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMore({
+        variables: { context: { ...apProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const locationsTree = useMemo(() => formatLocationListForTree(data && data.getAllLocations), [
+    data,
+  ]);
 
   if (loading) {
     return <Loading />;
@@ -220,7 +268,6 @@ const Network = () => {
       onCheck={onCheck}
       checkedLocations={checkedLocations}
       locations={locationsTree}
-      activeTab={location.pathname}
       selectedLocation={selectedLocation && selectedLocation.getLocation}
       addModal={addModal}
       editModal={editModal}
@@ -237,6 +284,8 @@ const Network = () => {
       profiles={(apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []}
       loadingProfile={loadingProfile}
       errorProfile={errorProfile}
+      onFetchMoreProfiles={handleFetchProfiles}
+      isLastProfilesPage={apProfiles?.getAllProfiles?.context?.lastPage}
     >
       <Switch>
         <Route
@@ -257,15 +306,17 @@ const Network = () => {
         />
         <Route
           exact
-          path={`${path}/access-points/:id`}
+          path={`${path}/access-points/:id/:tab`}
           render={props => <AccessPointDetails locations={locationsTree} {...props} />}
         />
+
         <Route
           exact
           path={`${path}/client-devices`}
           render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
         />
         <Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
+        <Redirect from={`${path}/access-points/:id`} to={`${path}/access-points/:id/general`} />
         <Redirect from={path} to={`${path}/access-points`} />
       </Switch>
     </NetworkPage>

app/containers/ProfileDetails/index.js

@@ -1,13 +1,14 @@
 import React, { useState, useContext } from 'react';
 import { useParams, Redirect } from 'react-router-dom';
-import gql from 'graphql-tag';
-import { useQuery, useMutation } from '@apollo/react-hooks';
-import { Alert, Spin, notification } from 'antd';
-import { ProfileDetails as ProfileDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { useQuery, useMutation, gql } from '@apollo/client';
+import { Alert, notification } from 'antd';
+import { ProfileDetails as ProfileDetailsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
+import { ROUTES, AUTH_TOKEN } from 'constants/index';
 import UserContext from 'contexts/UserContext';
-import { GET_ALL_PROFILES } from 'graphql/queries';
-import { FILE_UPLOAD } from 'graphql/mutations';
+import { GET_ALL_PROFILES, GET_API_URL } from 'graphql/queries';
+import { fetchMoreProfiles } from 'graphql/functions';
+import { getItem } from 'utils/localStorage';
 
 const GET_PROFILE = gql`
   query GetProfile($id: ID!) {
@@ -22,6 +23,16 @@ const GET_PROFILE = gql`
         profileType
         details
       }
+      associatedSsidProfiles {
+        id
+        name
+        profileType
+        details
+      }
+      osuSsidProfile {
+        id
+        name
+      }
       childProfileIds
       createdTimestamp
       lastModifiedTimestamp
@@ -74,23 +85,63 @@ const ProfileDetails = () => {
 
   const [redirect, setRedirect] = useState(false);
 
+  const { data: apiUrl } = useQuery(GET_API_URL);
+
   const { loading, error, data } = useQuery(GET_PROFILE, {
     variables: { id },
+    fetchPolicy: 'network-only',
   });
 
-  const { data: ssidProfiles } = useQuery(GET_ALL_PROFILES, {
+  const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
     variables: { customerId, type: 'ssid' },
+    fetchPolicy: 'network-only',
   });
 
-  const { data: radiusProfiles } = useQuery(GET_ALL_PROFILES, {
-    variables: { customerId, type: 'radius' },
+  const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'radius' },
+      fetchPolicy: 'network-only',
+    }
+  );
+
+  const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'captive_portal' },
+      fetchPolicy: 'network-only',
+    }
+  );
+
+  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'passpoint_venue' },
+    fetchPolicy: 'network-only',
+  });
+
+  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_operator' },
+      fetchPolicy: 'network-only',
+    }
+  );
+
+  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_osu_id_provider' },
+      fetchPolicy: 'network-only',
+    }
+  );
+
+  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'rf' },
+    fetchPolicy: 'network-only',
   });
 
   const [updateProfile] = useMutation(UPDATE_PROFILE);
   const [deleteProfile] = useMutation(DELETE_PROFILE);
 
-  const [fileUpload] = useMutation(FILE_UPLOAD);
-
   const handleDeleteProfile = () => {
     deleteProfile({ variables: { id } })
       .then(() => {
@@ -136,23 +187,93 @@ const ProfileDetails = () => {
       );
   };
 
-  const handleFileUpload = (fileName, file) =>
-    fileUpload({ variables: { fileName, file } })
-      .then(() => {
-        notification.success({
-          message: 'Success',
-          description: 'File successfully uploaded.',
-        });
+  const handleFileUpload = async (fileName, file) => {
+    const token = getItem(AUTH_TOKEN);
+
+    if (apiUrl?.getApiUrl) {
+      fetch(`${apiUrl?.getApiUrl}filestore/${fileName}`, {
+        method: 'POST',
+        headers: {
+          Authorization: token ? `Bearer ${token.access_token}` : '',
+          'Content-Type': 'application/octet-stream',
+        },
+        body: file,
       })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'File could not be uploaded.',
+        .then(response => response.json())
+        .then(resp => {
+          if (resp?.success) {
+            notification.success({
+              message: 'Success',
+              description: 'File successfully uploaded.',
+            });
+          } else {
+            notification.error({
+              message: 'Error',
+              description: 'File could not be uploaded.',
+            });
+          }
         })
-      );
+        .catch(() => {
+          notification.error({
+            message: 'Error',
+            description: 'File could not be uploaded.',
+          });
+        });
+    } else {
+      notification.error({
+        message: 'Error',
+        description: 'File could not be uploaded.',
+      });
+    }
+  };
+
+  const handleDownloadFile = async name => {
+    const token = getItem(AUTH_TOKEN);
+    if (apiUrl?.getApiUrl) {
+      return fetch(`${apiUrl?.getApiUrl}filestore/${encodeURIComponent(name)}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/octet-stream',
+          Authorization: token ? `Bearer ${token.access_token}` : '',
+        },
+      })
+        .then(response => response.blob())
+        .then(blob => {
+          return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(blob);
+          });
+        })
+        .catch(() => {
+          notification.error({
+            message: 'Error',
+            description: 'File could not be retrieved.',
+          });
+        });
+    }
+    return notification.error({
+      message: 'Error',
+      description: 'File could not be retrieved.',
+    });
+  };
+
+  const handleFetchMoreProfiles = (e, key) => {
+    if (key === 'radius') fetchMoreProfiles(e, radiusProfiles, fetchMoreRadiusProfiles);
+    else if (key === 'captive_portal')
+      fetchMoreProfiles(e, captiveProfiles, fetchMoreCaptiveProfiles);
+    else if (key === 'rf') fetchMoreProfiles(e, rfProfiles, fetchMoreRfProfiles);
+    else if (key === 'passpoint_venue') fetchMoreProfiles(e, venueProfiles, fetchMoreVenueProfiles);
+    else if (key === 'passpoint_operator')
+      fetchMoreProfiles(e, operatorProfiles, fetchMoreOperatorProfiles);
+    else if (key === 'passpoint_osu_id_provider')
+      fetchMoreProfiles(e, idProviderProfiles, fetchMoreIdProviderProfiles);
+    else fetchMoreProfiles(e, ssidProfiles, fetchMore);
+  };
 
   if (loading) {
-    return <Spin size="large" />;
+    return <Loading />;
   }
 
   if (error) {
@@ -162,7 +283,7 @@ const ProfileDetails = () => {
   }
 
   if (redirect) {
-    return <Redirect to="/profiles" />;
+    return <Redirect to={ROUTES.profiles} />;
   }
 
   return (
@@ -170,14 +291,22 @@ const ProfileDetails = () => {
       name={data.getProfile.name}
       profileType={data.getProfile.profileType}
       details={data.getProfile.details}
+      childProfiles={data.getProfile.childProfiles}
       childProfileIds={data.getProfile.childProfileIds}
       onDeleteProfile={handleDeleteProfile}
       onUpdateProfile={handleUpdateProfile}
-      ssidProfiles={
-        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
-      }
+      ssidProfiles={ssidProfiles?.getAllProfiles?.items}
+      rfProfiles={rfProfiles?.getAllProfiles?.items}
       radiusProfiles={radiusProfiles?.getAllProfiles?.items}
+      captiveProfiles={captiveProfiles?.getAllProfiles?.items}
+      venueProfiles={venueProfiles?.getAllProfiles?.items}
+      operatorProfiles={operatorProfiles?.getAllProfiles?.items}
+      idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
+      associatedSsidProfiles={data.getProfile?.associatedSsidProfiles}
+      osuSsidProfile={data.getProfile?.osuSsidProfile}
       fileUpload={handleFileUpload}
+      onFetchMoreProfiles={handleFetchMoreProfiles}
+      onDownloadFile={handleDownloadFile}
     />
   );
 };

app/containers/Profiles/index.js

@@ -1,29 +1,13 @@
-import React, { useContext } from 'react';
-import gql from 'graphql-tag';
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import React, { useContext, useEffect } from 'react';
+import { useQuery, useMutation, gql } from '@apollo/client';
+import { useLocation } from 'react-router-dom';
+import { Alert, notification } from 'antd';
+import { Profile as ProfilePage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
-import { Alert, Spin, notification } from 'antd';
-
-import { Profile as ProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
+import { GET_ALL_PROFILES } from 'graphql/queries';
+import { updateQueryGetAllProfiles } from 'graphql/functions';
 import UserContext from 'contexts/UserContext';
 
-const GET_ALL_PROFILES = gql`
-  query GetAllProfiles($customerId: ID!, $cursor: String) {
-    getAllProfiles(customerId: $customerId, cursor: $cursor) {
-      items {
-        id
-        name
-        profileType
-        details
-      }
-      context {
-        cursor
-        lastPage
-      }
-    }
-  }
-`;
-
 const DELETE_PROFILE = gql`
   mutation DeleteProfile($id: ID!) {
     deleteProfile(id: $id) {
@@ -34,13 +18,28 @@ const DELETE_PROFILE = gql`
 
 const Profiles = () => {
   const { customerId } = useContext(UserContext);
-  const { loading, error, data, refetch, fetchMore } = useQuery(GET_ALL_PROFILES, {
-    variables: { customerId },
-  });
+  const { loading, error, data, refetch, fetchMore } = useQuery(
+    GET_ALL_PROFILES(`equipmentCount`),
+    {
+      variables: { customerId },
+      fetchPolicy: 'network-only',
+    }
+  );
   const [deleteProfile] = useMutation(DELETE_PROFILE);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.state && location.state.refetch) {
+      refetch({
+        variables: { refresh: Date.now() },
+      });
+    }
+  }, []);
 
   const reloadTable = () => {
-    refetch()
+    refetch({
+      variables: { refresh: Date.now() },
+    })
       .then(() => {
         notification.success({
           message: 'Success',
@@ -58,25 +57,22 @@ const Profiles = () => {
   const handleLoadMore = () => {
     if (!data.getAllProfiles.context.lastPage) {
       fetchMore({
-        variables: { cursor: data.getAllProfiles.context.cursor },
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          const previousEntry = previousResult.getAllProfiles;
-          const newItems = fetchMoreResult.getAllProfiles.items;
-
-          return {
-            getAllProfiles: {
-              context: fetchMoreResult.getAllProfiles.context,
-              items: [...previousEntry.items, ...newItems],
-              __typename: previousEntry.__typename,
-            },
-          };
-        },
+        variables: { context: { ...data.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
       });
     }
   };
 
   const handleDeleteProfile = id => {
-    deleteProfile({ variables: { id } })
+    deleteProfile({
+      variables: { id },
+      refetchQueries: [
+        {
+          query: GET_ALL_PROFILES(`equipmentCount`),
+          variables: { customerId },
+        },
+      ],
+    })
       .then(() => {
         notification.success({
           message: 'Success',
@@ -92,7 +88,7 @@ const Profiles = () => {
   };
 
   if (loading) {
-    return <Spin size="large" />;
+    return <Loading />;
   }
 
   if (error) {
@@ -103,7 +99,7 @@ const Profiles = () => {
     <ProfilePage
       data={data.getAllProfiles.items}
       onReload={reloadTable}
-      isLastPage={data.getAllProfiles.context.lastPage}
+      isLastPage={data?.getAllProfiles?.context?.lastPage}
       onDeleteProfile={handleDeleteProfile}
       onLoadMore={handleLoadMore}
     />

app/containers/System/containers/AutoProvision/index.js

@@ -1,11 +1,12 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import { useQuery, useMutation } from '@apollo/client';
 import { Alert, notification } from 'antd';
 import { AutoProvision as AutoProvisionPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
 import { GET_CUSTOMER, GET_ALL_LOCATIONS, GET_ALL_PROFILES } from 'graphql/queries';
 import { UPDATE_CUSTOMER } from 'graphql/mutations';
+import { fetchMoreProfiles } from 'graphql/functions';
 
 const AutoProvision = () => {
   const { customerId } = useContext(UserContext);
@@ -14,16 +15,16 @@ const AutoProvision = () => {
   });
   const [updateCustomer] = useMutation(UPDATE_CUSTOMER);
 
-  const { data: dataLocation, loading: loadingLoaction, error: errorLocation } = useQuery(
+  const { data: dataLocation, loading: loadingLocation, error: errorLocation } = useQuery(
     GET_ALL_LOCATIONS,
     {
       variables: { customerId },
     }
   );
-  const { data: dataProfile, loading: loadingProfile, error: errorProfile } = useQuery(
-    GET_ALL_PROFILES,
+  const { data: dataProfile, loading: loadingProfile, error: errorProfile, fetchMore } = useQuery(
+    GET_ALL_PROFILES(),
     {
-      variables: { customerId, type: 'equipment_ap' },
+      variables: { customerId, type: 'equipment_ap', limit: 100 },
     }
   );
 
@@ -60,6 +61,10 @@ const AutoProvision = () => {
       );
   };
 
+  const handleFetchMoreProfiles = e => {
+    fetchMoreProfiles(e, dataProfile, fetchMore);
+  };
+
   if (loading) {
     return <Loading />;
   }
@@ -75,11 +80,12 @@ const AutoProvision = () => {
       data={data && data.getCustomer}
       dataLocation={dataLocation && dataLocation.getAllLocations}
       dataProfile={dataProfile && dataProfile.getAllProfiles.items}
-      loadingLoaction={loadingLoaction}
+      loadingLocation={loadingLocation}
       loadingProfile={loadingProfile}
       errorLocation={errorLocation}
       errorProfile={errorProfile}
       onUpdateCustomer={handleUpdateCustomer}
+      onFetchMoreProfiles={handleFetchMoreProfiles}
     />
   );
 };

app/containers/System/containers/BlockedList/index.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useQuery, useMutation } from '@apollo/react-hooks';
+import { useQuery, useMutation } from '@apollo/client';
 import { Alert, notification } from 'antd';
 import { BlockedList as BlockedListPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 import { GET_BLOCKED_CLIENTS } from 'graphql/queries';

app/containers/System/containers/Firmware/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
+import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
 import { notification } from 'antd';
 import {
   GET_ALL_FIRMWARE,
@@ -22,7 +22,7 @@ const Firmware = () => {
   const [
     getAllFirmware,
     { data: firmwareVersionData, loading: firmwareVersionLoading },
-  ] = useLazyQuery(GET_ALL_FIRMWARE);
+  ] = useLazyQuery(GET_ALL_FIRMWARE, { fetchPolicy: 'network-only' });
 
   const {
     data: trackAssignmentData,
@@ -83,8 +83,18 @@ const Firmware = () => {
     firmwareVersionRecordId,
     modelId,
     createdTimestamp,
-    lastModifiedTimestamp
+    lastModifiedTimestamp,
+    prevFirmwareVersionRecordId
   ) => {
+    if (prevFirmwareVersionRecordId !== firmwareVersionRecordId) {
+      deleteTrackAssignment({
+        variables: {
+          firmwareTrackId: firmwareTrackData.getFirmwareTrack.recordId,
+          firmwareVersionId: prevFirmwareVersionRecordId,
+        },
+      });
+    }
+
     updateTrackAssignment({
       variables: {
         trackRecordId: firmwareTrackData.getFirmwareTrack.recordId,
@@ -130,6 +140,7 @@ const Firmware = () => {
         })
       );
   };
+
   const handleCreateFirmware = (
     modelId,
     versionName,
@@ -237,7 +248,7 @@ const Firmware = () => {
       onCreateTrackAssignment={handleCreateTrackAssignment}
       onUpdateTrackAssignment={handleUpdateTrackAssignment}
       onDeleteTrackAssignment={handleDeleteTrackAssignment}
-      onCreateFirnware={handleCreateFirmware}
+      onCreateFirmware={handleCreateFirmware}
       onUpdateFirmware={handleUpdateFirmware}
       onDeleteFirmware={handleDeleteFirmware}
       firmwareError={error}

app/containers/System/containers/Manufacturer/index.js

@@ -1,9 +1,11 @@
-import React from 'react';
-import gql from 'graphql-tag';
-import { useMutation, useLazyQuery } from '@apollo/react-hooks';
+import React, { useState } from 'react';
+import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client';
 import { notification } from 'antd';
 import { Manufacturer as ManufacturerPage } from '@tip-wlan/wlan-cloud-ui-library';
-import { OUI_UPLOAD } from 'graphql/mutations';
+
+import { AUTH_TOKEN } from 'constants/index';
+import { GET_API_URL } from 'graphql/queries';
+import { getItem } from 'utils/localStorage';
 
 const GET_OUI = gql`
   query GetOui($oui: String!) {
@@ -28,7 +30,12 @@ const UPDATE_OUI = gql`
     }
   }
 `;
+
 const System = () => {
+  const token = getItem(AUTH_TOKEN);
+  const [loadingFileUpload, setLoadingFileUpload] = useState(false);
+
+  const { data: apiUrl } = useQuery(GET_API_URL);
   const [updateOUI] = useMutation(UPDATE_OUI);
   const [searchOUI, { data }] = useLazyQuery(GET_OUI, {
     onError: () => {
@@ -37,8 +44,16 @@ const System = () => {
         description: 'No matching manufacturer found for OUI',
       });
     },
+    onCompleted: () => {
+      if (!data?.getOui?.oui) {
+        notification.error({
+          message: 'Error',
+          description: 'No matching manufacturer found for OUI',
+        });
+      }
+    },
+    fetchPolicy: 'no-cache',
   });
-  const [fileUpload] = useMutation(OUI_UPLOAD);
 
   const handleUpdateOUI = (oui, manufacturerAlias, manufacturerName) => {
     updateOUI({
@@ -66,33 +81,54 @@ const System = () => {
     searchOUI({ variables: { oui } });
   };
 
-  const handleFileUpload = (fileName, file) =>
-    fileUpload({ variables: { fileName, file } })
-      .then(resp => {
-        if (resp?.ouiUpload?.success) {
-          notification.success({
-            message: 'Success',
-            description: 'File successfully uploaded.',
-          });
-        } else {
+  const handleFileUpload = (fileName, file) => {
+    if (apiUrl?.getApiUrl) {
+      setLoadingFileUpload(true);
+
+      fetch(`${apiUrl?.getApiUrl}portal/manufacturer/oui/upload?fileName=${fileName}`, {
+        method: 'POST',
+        headers: {
+          Authorization: token ? `Bearer ${token.access_token}` : '',
+          'Content-Type': 'application/octet-stream',
+        },
+        body: file,
+      })
+        .then(response => response.json())
+        .then(resp => {
+          if (resp?.success) {
+            notification.success({
+              message: 'Success',
+              description: 'File successfully uploaded.',
+            });
+          } else {
+            notification.error({
+              message: 'Error',
+              description: 'File could not be uploaded.',
+            });
+          }
+        })
+        .catch(() => {
           notification.error({
             message: 'Error',
             description: 'File could not be uploaded.',
           });
-        }
-      })
-      .catch(() =>
-        notification.error({
-          message: 'Error',
-          description: 'File could not be uploaded.',
         })
-      );
+        .finally(() => setLoadingFileUpload(false));
+    } else {
+      notification.error({
+        message: 'Error',
+        description: 'File could not be uploaded.',
+      });
+    }
+  };
+
   return (
     <ManufacturerPage
       onSearchOUI={handleSearchOUI}
       onUpdateOUI={handleUpdateOUI}
       returnedOUI={data && data.getOui}
       fileUpload={handleFileUpload}
+      loadingFileUpload={loadingFileUpload}
     />
   );
 };

app/contexts/UserProvider/index.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import UserContext from 'contexts/UserContext';
 
-const UserProvider = ({ children, id, email, role, customerId, updateUser, updateToken }) => (
-  <UserContext.Provider value={{ id, email, role, customerId, updateUser, updateToken }}>
+const UserProvider = ({ children, id, email, roles, customerId, updateUser, updateToken }) => (
+  <UserContext.Provider value={{ id, email, roles, customerId, updateUser, updateToken }}>
     {children}
   </UserContext.Provider>
 );
@@ -15,14 +15,14 @@ UserProvider.propTypes = {
   updateToken: PropTypes.func.isRequired,
   id: PropTypes.number,
   email: PropTypes.string,
-  role: PropTypes.string,
+  roles: PropTypes.instanceOf(Array),
   customerId: PropTypes.number,
 };
 
 UserProvider.defaultProps = {
   id: null,
   email: null,
-  role: null,
+  roles: [],
   customerId: null,
 };
 

app/graphql/functions.js

@@ -0,0 +1,30 @@
+export const updateQueryGetAllProfiles = (previousResult, { fetchMoreResult }) => {
+  const previousEntry = previousResult.getAllProfiles;
+  const newItems = fetchMoreResult.getAllProfiles.items;
+
+  return {
+    getAllProfiles: {
+      context: { ...fetchMoreResult.getAllProfiles.context },
+      items: [...previousEntry.items, ...newItems],
+      __typename: previousEntry.__typename,
+    },
+  };
+};
+
+export const fetchMoreProfiles = (e, profile, fetchMore) => {
+  if (profile.getAllProfiles.context.lastPage) {
+    return false;
+  }
+
+  e.persist();
+  const { target } = e;
+
+  if (target.scrollTop + target.offsetHeight + 10 >= target.scrollHeight) {
+    fetchMore({
+      variables: { context: { ...profile.getAllProfiles.context } },
+      updateQuery: updateQueryGetAllProfiles,
+    });
+  }
+
+  return true;
+};

app/graphql/mutations.js

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 export const REFRESH_TOKEN = gql`
   mutation UpdateToken($refreshToken: String!) {
@@ -99,6 +99,22 @@ export const UPDATE_EQUIPMENT_FIRMWARE = gql`
   }
 `;
 
+export const REQUEST_EQUIPMENT_SWITCH_BANK = gql`
+  mutation RequestEquipmentSwitchBank($equipmentId: ID) {
+    requestEquipmentSwitchBank(equipmentId: $equipmentId) {
+      success
+    }
+  }
+`;
+
+export const REQUEST_EQUIPMENT_REBOOT = gql`
+  mutation RequestEquipmentReboot($equipmentId: ID) {
+    requestEquipmentReboot(equipmentId: $equipmentId) {
+      success
+    }
+  }
+`;
+
 export const UPDATE_TRACK_ASSIGNMENT = gql`
   mutation UpdateFirmwareTrackAssignment(
     $trackRecordId: ID!
@@ -239,6 +255,62 @@ export const CREATE_EQUIPMENT = gql`
   }
 `;
 
+export const UPDATE_EQUIPMENT = gql`
+  mutation UpdateEquipment(
+    $id: ID!
+    $equipmentType: String!
+    $inventoryId: String!
+    $customerId: ID!
+    $profileId: ID!
+    $locationId: ID!
+    $name: String!
+    $baseMacAddress: String
+    $latitude: String
+    $longitude: String
+    $serial: String
+    $lastModifiedTimestamp: String
+    $details: JSONObject
+  ) {
+    updateEquipment(
+      id: $id
+      equipmentType: $equipmentType
+      inventoryId: $inventoryId
+      customerId: $customerId
+      profileId: $profileId
+      locationId: $locationId
+      name: $name
+      baseMacAddress: $baseMacAddress
+      latitude: $latitude
+      longitude: $longitude
+      serial: $serial
+      lastModifiedTimestamp: $lastModifiedTimestamp
+      details: $details
+    ) {
+      id
+      equipmentType
+      inventoryId
+      customerId
+      profileId
+      locationId
+      name
+      baseMacAddress
+      latitude
+      longitude
+      serial
+      lastModifiedTimestamp
+      details
+    }
+  }
+`;
+
+export const DELETE_EQUIPMENT = gql`
+  mutation DeleteEquipment($id: ID!) {
+    deleteEquipment(id: $id) {
+      id
+    }
+  }
+`;
+
 export const UPDATE_CUSTOMER = gql`
   mutation UpdateCustomer(
     $id: ID!

app/graphql/queries.js

@@ -1,4 +1,10 @@
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
+
+export const GET_API_URL = gql`
+  query GetApiUrl {
+    getApiUrl
+  }
+`;
 
 export const GET_ALL_LOCATIONS = gql`
   query GetAllLocations($customerId: ID!) {
@@ -16,13 +22,13 @@ export const FILTER_EQUIPMENT = gql`
     $locationIds: [ID]
     $customerId: ID!
     $equipmentType: String
-    $cursor: String
+    $context: JSONObject
   ) {
     filterEquipment(
       customerId: $customerId
       locationIds: $locationIds
       equipmentType: $equipmentType
-      cursor: $cursor
+      context: $context
     ) {
       items {
         name
@@ -36,12 +42,12 @@ export const FILTER_EQUIPMENT = gql`
         profile {
           name
         }
+        baseMacAddress
+        manufacturer
         status {
           protocol {
             details {
               reportedIpV4Addr
-              reportedMacAddr
-              manufacturer
             }
           }
           osPerformance {
@@ -61,11 +67,75 @@ export const FILTER_EQUIPMENT = gql`
               numClientsPerRadio
             }
           }
+          firmware {
+            detailsJSON
+          }
+          channel {
+            detailsJSON
+          }
         }
       }
-      context {
-        lastPage
-        cursor
+      context
+    }
+  }
+`;
+
+export const GET_EQUIPMENT = gql`
+  query GetEquipment($id: ID!) {
+    getEquipment(id: $id) {
+      id
+      equipmentType
+      inventoryId
+      customerId
+      profileId
+      locationId
+      name
+      latitude
+      longitude
+      serial
+      lastModifiedTimestamp
+      details
+      profile {
+        id
+        name
+        childProfiles {
+          id
+          name
+          details
+        }
+      }
+      baseMacAddress
+      manufacturer
+      status {
+        firmware {
+          detailsJSON
+        }
+        protocol {
+          detailsJSON
+        }
+        radioUtilization {
+          detailsJSON
+        }
+        clientDetails {
+          detailsJSON
+          details {
+            numClientsPerRadio
+          }
+        }
+        osPerformance {
+          detailsJSON
+        }
+        channel {
+          detailsJSON
+        }
+      }
+      model
+      alarmsCount
+      alarms {
+        severity
+        alarmCode
+        details
+        createdTimestamp
       }
     }
   }
@@ -76,13 +146,13 @@ export const FILTER_EQUIPMENT_BULK_EDIT_APS = gql`
     $locationIds: [ID]
     $customerId: ID!
     $equipmentType: String
-    $cursor: String
+    $context: JSONObject
   ) {
     filterEquipment(
       customerId: $customerId
       locationIds: $locationIds
       equipmentType: $equipmentType
-      cursor: $cursor
+      context: $context
     ) {
       items {
         name
@@ -91,10 +161,7 @@ export const FILTER_EQUIPMENT_BULK_EDIT_APS = gql`
         channel
         details
       }
-      context {
-        lastPage
-        cursor
-      }
+      context
     }
   }
 `;
@@ -112,8 +179,8 @@ export const GET_LOCATION = gql`
 `;
 
 export const FILTER_CLIENT_SESSIONS = gql`
-  query FilterClientSessions($customerId: ID!, $locationIds: [ID], $cursor: String) {
-    filterClientSessions(customerId: $customerId, locationIds: $locationIds, cursor: $cursor) {
+  query FilterClientSessions($customerId: ID!, $locationIds: [ID], $context: JSONObject) {
+    filterClientSessions(customerId: $customerId, locationIds: $locationIds, context: $context) {
       items {
         id
         macAddress
@@ -123,14 +190,12 @@ export const FILTER_CLIENT_SESSIONS = gql`
         radioType
         signal
         manufacturer
+        details
         equipment {
           name
         }
       }
-      context {
-        lastPage
-        cursor
-      }
+      context
     }
   }
 `;
@@ -157,7 +222,7 @@ export const GET_CLIENT_SESSION = gql`
 export const FILTER_SERVICE_METRICS = gql`
   query FilterServiceMetrics(
     $customerId: ID!
-    $cursor: String
+    $context: JSONObject
     $fromTime: String!
     $toTime: String!
     $clientMacs: [String]
@@ -167,7 +232,7 @@ export const FILTER_SERVICE_METRICS = gql`
   ) {
     filterServiceMetrics(
       customerId: $customerId
-      cursor: $cursor
+      context: $context
       fromTime: $fromTime
       toTime: $toTime
       clientMacs: $clientMacs
@@ -183,27 +248,34 @@ export const FILTER_SERVICE_METRICS = gql`
         txBytes
         detailsJSON
       }
-      context {
-        lastPage
-        cursor
-      }
+      context
     }
   }
 `;
 
-export const GET_ALL_PROFILES = gql`
-  query GetAllProfiles($customerId: ID!, $cursor: String, $type: String) {
-    getAllProfiles(customerId: $customerId, cursor: $cursor, type: $type) {
+export const GET_ALL_PROFILES = (fields = '') => gql`
+  query GetAllProfiles(
+    $customerId: ID!
+    $cursor: String
+    $limit: Int
+    $type: String
+    $context: JSONObject
+  ) {
+    getAllProfiles(
+      customerId: $customerId
+      cursor: $cursor
+      limit: $limit
+      type: $type
+      context: $context
+    ) {
       items {
         id
         name
         profileType
         details
+        ${fields}
       }
-      context {
-        cursor
-        lastPage
-      }
+      context
     }
   }
 `;
@@ -219,10 +291,7 @@ export const GET_ALL_STATUS = gql`
           clientCountPerOui
         }
       }
-      context {
-        lastPage
-        cursor
-      }
+      context
     }
   }
 `;
@@ -298,7 +367,7 @@ export const FILTER_SYSTEM_EVENTS = gql`
     $toTime: String!
     $equipmentIds: [ID]
     $dataTypes: [String]
-    $cursor: String
+    $context: JSONObject
     $limit: Int
   ) {
     filterSystemEvents(
@@ -307,14 +376,11 @@ export const FILTER_SYSTEM_EVENTS = gql`
       toTime: $toTime
       dataTypes: $dataTypes
       equipmentIds: $equipmentIds
-      cursor: $cursor
+      context: $context
       limit: $limit
     ) {
       items
-      context {
-        lastPage
-        cursor
-      }
+      context
     }
   }
 `;

app/index.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router } from 'react-router-dom';
-import { ApolloClient } from 'apollo-client';
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { onError } from 'apollo-link-error';
+import { ApolloClient, ApolloProvider, ApolloLink, Observable } from '@apollo/client';
+import { InMemoryCache } from '@apollo/client/cache';
+import { onError } from '@apollo/client/link/error';
 import { createUploadLink } from 'apollo-upload-client';
-import { ApolloLink, Observable } from 'apollo-link';
-import { ApolloProvider } from '@apollo/react-hooks';
 
 import 'styles/antd.less';
 import 'styles/index.scss';
@@ -17,14 +15,13 @@ import { REFRESH_TOKEN } from 'graphql/mutations';
 import { getItem, setItem, removeItem } from 'utils/localStorage';
 import history from 'utils/history';
 
-const API_URI =
-  process.env.NODE_ENV === 'development' ? 'http://localhost:4000/' : window.REACT_APP_API;
+const API_URI = process.env.NODE_ENV === 'production' ? window.REACT_APP_API : process.env.API;
 const MOUNT_NODE = document.getElementById('root');
 
 const cache = new InMemoryCache();
 
 const uploadLink = createUploadLink({
-  uri: API_URI,
+  uri: `${API_URI}/graphql`,
 });
 
 const request = async operation => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "0.2.7",
+  "version": "1.1.8",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -9,50 +9,38 @@
   },
   "scripts": {
     "test": "jest --passWithNoTests --coverage",
-    "start": "cross-env NODE_ENV=development webpack-dev-server",
+    "start": "cross-env NODE_ENV=development webpack serve --mode development",
+    "start:bare": "cross-env API=https://wlan-ui.tip-sdk.lab.netexperience.com NODE_ENV=bare webpack serve --mode development",
+    "start:dev": "cross-env API=https://wlan-ui.tip-sdk.lab.netexperience.com NODE_ENV=development webpack serve --mode development",
     "build": "webpack --mode=production",
-    "format": "prettier --write \"app/**/*.js\"",
-    "eslint-fix": "eslint --fix \"app/**/*.js\"",
-    "eslint": "eslint \"app/**/*.js\" --max-warnings=0"
+    "format": "prettier --write 'app/**/*{.js,.scss}'",
+    "eslint-fix": "eslint --fix 'app/**/*.js'",
+    "eslint": "eslint 'app/**/*.js' --max-warnings=0"
   },
   "license": "MIT",
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
-    "@apollo/react-hoc": "^3.1.4",
-    "@apollo/react-hooks": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^0.2.7",
-    "antd": "^4.3.1",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
+    "@apollo/client": "^3.1.3",
+    "@tip-wlan/wlan-cloud-ui-library": "^1.1.14",
+    "antd": "^4.5.2",
     "apollo-upload-client": "^13.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.3",
-    "highcharts": "^8.1.1",
-    "highcharts-react-official": "^3.0.0",
+    "graphql": "^15.5.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"
+    "recharts": "^2.0.9"
   },
   "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",
@@ -60,8 +48,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",
@@ -73,38 +63,38 @@
     "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",
-    "pretty-quick": "^2.0.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"
   },
-  "precommit": "NODE_ENV=production lint-staged",
   "browserslist": [
     "last 2 versions",
     "> 1%",
     "IE 10"
   ],
-  "lint-staged": {
-    "*.{js,jsx}": [
-      "pretty-quick --staged",
-      "eslint . --fix \"app/**/*.js\" --max-warnings=0",
-      "git add"
-    ]
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix 'app/**/*.js' --max-warnings=0",
+      "prettier --write"
+    ]
   }
 }

webpack.config.js

@@ -1,11 +1,13 @@
-const webpackMerge = require('webpack-merge');
+/* eslint-disable import/no-extraneous-dependencies */
+const { merge } = require('webpack-merge');
 const common = require('./webpack/webpack.common');
 
 const envs = {
   development: 'dev',
   production: 'prod',
+  bare: 'bare',
 };
 /* 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.bare.js

@@ -0,0 +1,73 @@
+const path = require('path');
+
+const commonPaths = require('./paths');
+
+module.exports = {
+  mode: 'development',
+  output: {
+    path: commonPaths.outputPath,
+    publicPath: '/',
+    filename: '[name].js',
+    chunkFilename: '[name].js',
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    port: 3000,
+    historyApiFallback: true,
+    contentBase: commonPaths.outputPath,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'less-loader', // compiles Less to CSS
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    modules: ['node_modules', 'app'],
+    alias: {
+      app: path.resolve(__dirname, '../', 'app'),
+      react: path.resolve(__dirname, '../', 'node_modules', 'react'),
+      'react-router-dom': path.resolve('./node_modules/react-router-dom'),
+    },
+  },
+};

webpack/webpack.common.js

@@ -1,4 +1,3 @@
-const HtmlWebPackPlugin = require('html-webpack-plugin');
 /* eslint-disable import/no-extraneous-dependencies */
 const webpack = require('webpack');
 
@@ -22,32 +21,11 @@ module.exports = {
         exclude: /node_modules/,
         use: ['babel-loader', 'eslint-loader'],
       },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'less-loader',
-            options: {
-              javascriptEnabled: true,
-            },
-          },
-        ],
-      },
     ],
   },
   plugins: [
-    new HtmlWebPackPlugin({
-      template: commonPaths.templatePath,
-      favicon: './app/images/favicon.ico',
-    }),
     new webpack.DefinePlugin({
-      'process.env.GRAPHQL_URL': JSON.stringify(process.env.GRAPHQL_URL),
+      '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');
 
@@ -34,6 +36,28 @@ module.exports = {
           },
           {
             loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'less-loader', // compiles Less to CSS
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+              },
+            },
           },
         ],
       },
@@ -59,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,44 +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: {
@@ -67,20 +75,58 @@ module.exports = {
           'sass-loader',
         ],
       },
+      {
+        test: /\.less$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'less-loader', // compiles Less to CSS
+            options: {
+              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',
 };