Merge pull request #109 from Telecominfraproject/NETEXP-3471

WIFI-3471 Change image tag to 1.3.0-SNAPSHOT

.github/workflows/dockerpublish.yml

@@ -61,7 +61,7 @@ jobs:
           [[ "${{ 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=0.0.1-SNAPSHOT
+          [ "$VERSION" == "master" ] && VERSION=1.3.0-SNAPSHOT
 
           TIMESTAMP=$(date +'%Y-%m-%d')
 
@@ -96,7 +96,7 @@ jobs:
           [[ "${{ 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=0.0.1-SNAPSHOT
+          [ "$VERSION" == "master" ] && VERSION=1.3.0-SNAPSHOT
 
           echo IMAGE_ID=$IMAGE_ID
           echo VERSION=$VERSION

app/constants/index.js

@@ -3,9 +3,9 @@ export const COMPANY = 'Telecom Infra Project';
 
 export const USER_FRIENDLY_RADIOS = {
   is2dot4GHz: '2.4GHz',
+  is5GHz: '5GHz',
   is5GHzL: '5GHz (L)',
   is5GHzU: '5GHz (U)',
-  is5GHz: '5GHz',
 };
 
 export const ROUTES = {

app/containers/Accounts/index.js

@@ -95,7 +95,7 @@ const Accounts = () => {
     }
   };
 
-  const handleCreateUser = (email, password, roles) => {
+  const handleCreateUser = ({ email, password, roles }) => {
     createUser({
       variables: {
         username: email,
@@ -119,7 +119,7 @@ const Accounts = () => {
       );
   };
 
-  const handleEditUser = (id, email, password, roles, lastModifiedTimestamp) => {
+  const handleEditUser = ({ id, email, password, roles, lastModifiedTimestamp }) => {
     updateUser({
       variables: {
         id,

app/containers/AddProfile/index.js

@@ -4,10 +4,11 @@ import { useMutation, useQuery, gql } from '@apollo/client';
 import { notification } from 'antd';
 import { useHistory } from 'react-router-dom';
 
-import { ROUTES } from 'constants/index';
+import { ROUTES, AUTH_TOKEN } from 'constants/index';
 import UserContext from 'contexts/UserContext';
-import { GET_ALL_PROFILES } from 'graphql/queries';
+import { GET_ALL_PROFILES, GET_API_URL } from 'graphql/queries';
 import { fetchMoreProfiles } from 'graphql/functions';
+import { getItem } from 'utils/localStorage';
 
 const CREATE_PROFILE = gql`
   mutation CreateProfile(
@@ -35,6 +36,9 @@ const CREATE_PROFILE = gql`
 
 const AddProfile = () => {
   const { customerId } = useContext(UserContext);
+
+  const { data: apiUrl } = useQuery(GET_API_URL);
+
   const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
     variables: { customerId, type: 'ssid' },
     fetchPolicy: 'network-only',
@@ -116,6 +120,46 @@ const AddProfile = () => {
     else fetchMoreProfiles(e, ssidProfiles, fetchMore);
   };
 
+  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,
+      })
+        .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.',
+      });
+    }
+  };
+
   return (
     <AddProfilePage
       onCreateProfile={handleAddProfile}
@@ -127,6 +171,7 @@ const AddProfile = () => {
       idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
       rfProfiles={rfProfiles?.getAllProfiles?.items}
       onFetchMoreProfiles={handleFetchMoreProfiles}
+      fileUpload={handleFileUpload}
     />
   );
 };

app/containers/App/index.js

@@ -75,7 +75,6 @@ const App = () => {
         <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>
           <meta name="description" content={COMPANY} />
         </Helmet>
-
         <Switch>
           <UnauthenticatedRoute exact path={ROUTES.login} component={Login} />
           <ProtectedRouteWithLayout exact path={ROUTES.root} component={RedirectToDashboard} />

app/containers/Dashboard/index.js

@@ -34,12 +34,27 @@ function trafficTooltipFormatter() {
 }
 
 const lineChartConfig = [
-  { key: 'service', title: 'Inservice APs (24 hours)' },
-  { key: 'clientDevices', title: 'Client Devices (24 hours)' },
+  {
+    key: 'service',
+    title: 'Inservice APs (24 hours)',
+    lines: [{ key: 'inServiceAps', name: 'Inservice APs' }],
+  },
+  {
+    key: 'clientDevices',
+    title: 'Client Devices (24 hours)',
+    lines: [
+      { key: 'clientDevices2dot4GHz', name: '2.4GHz' },
+      { key: 'clientDevices5GHz', name: '5GHz' },
+    ],
+  },
   {
     key: 'traffic',
-    title: 'Traffic (24 hours)',
-    options: { formatter: trafficLabelFormatter, tooltipFormatter: trafficTooltipFormatter },
+    title: 'Traffic - 5 min intervals (24 hours)',
+    lines: [
+      { key: 'trafficBytesDownstreamData', name: 'Downstream' },
+      { key: 'trafficBytesUpstreamData', name: 'Upstream' },
+    ],
+    options: { formatter: trafficLabelFormatter, trafficTooltipFormatter },
   },
 ];
 
@@ -58,34 +73,8 @@ const Dashboard = () => {
     variables: { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] },
   });
 
-  const [lineChartData, setLineChartData] = useState({
-    service: {
-      inservicesAPs: {
-        key: 'Inservice APs',
-        value: [],
-      },
-    },
-    clientDevices: {
-      is2dot4GHz: {
-        key: USER_FRIENDLY_RADIOS.is2dot4GHz,
-        value: [],
-      },
-      is5GHz: {
-        key: USER_FRIENDLY_RADIOS.is5GHz,
-        value: [],
-      },
-    },
-    traffic: {
-      trafficBytesDownstream: {
-        key: 'Down Stream',
-        value: [],
-      },
-      trafficBytesUpstream: {
-        key: 'Up Stream',
-        value: [],
-      },
-    },
-  });
+  const [lineChartData, setLineChartData] = useState([]);
+  const [trafficBytesData, setTrafficBytesData] = useState();
 
   const { loading: metricsLoading, error: metricsError, data: metricsData, fetchMore } = useQuery(
     FILTER_SYSTEM_EVENTS,
@@ -103,83 +92,65 @@ const Dashboard = () => {
 
   const formatLineChartData = (list = []) => {
     if (list.length) {
-      setLineChartData(prev => {
-        const inservicesAPs = [];
-        const clientDevices2dot4GHz = [];
-        const clientDevices5GHz = [];
-        const trafficBytesDownstreamData = [];
-        const trafficBytesUpstreamData = [];
-        let totalDown = 0;
-        let totalUp = 0;
+      const chartData = [];
 
-        list.forEach(
-          ({
-            eventTimestamp,
-            details: {
-              payload: {
-                details: {
-                  equipmentInServiceCount,
-                  associatedClientsCountPerRadio: radios,
-                  trafficBytesDownstream,
-                  trafficBytesUpstream,
-                },
+      let inServiceAps = 0;
+      let clientDevices2dot4GHz = 0;
+      let clientDevices5GHz = 0;
+      let trafficBytesDownstreamData = 0;
+      let trafficBytesUpstreamData = 0;
+      let totalDown = 0;
+      let totalUp = 0;
+
+      list.forEach(
+        ({
+          eventTimestamp,
+          details: {
+            payload: {
+              details: {
+                equipmentInServiceCount,
+                associatedClientsCountPerRadio: radios,
+                trafficBytesDownstream,
+                trafficBytesUpstream,
               },
             },
-          }) => {
-            const timestamp = parseInt(eventTimestamp, 10);
-            inservicesAPs.push({ timestamp, value: equipmentInServiceCount });
+          },
+        }) => {
+          const timestamp = parseInt(eventTimestamp, 10);
+          inServiceAps = equipmentInServiceCount;
 
-            let total5GHz = 0;
-            total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
+          let total5GHz = 0;
+          total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
 
-            clientDevices2dot4GHz.push({ timestamp, value: radios.is2dot4GHz || 0 });
-            clientDevices5GHz.push({ timestamp, value: total5GHz || 0 });
+          clientDevices2dot4GHz = radios.is2dot4GHz || 0;
+          clientDevices5GHz = total5GHz || 0;
 
-            trafficBytesDownstreamData.push({
-              timestamp,
-              value: (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0,
-            });
-            trafficBytesUpstreamData.push({
-              timestamp,
-              value: (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0,
-            });
+          trafficBytesDownstreamData = (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0;
+          trafficBytesUpstreamData = (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0;
 
-            totalDown += (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0;
-            totalUp += (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0;
-          }
-        );
+          totalDown += (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0;
+          totalUp += (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0;
+          chartData.push({
+            timestamp,
+            inServiceAps,
+            clientDevices2dot4GHz,
+            clientDevices5GHz,
+            trafficBytesDownstreamData,
+            trafficBytesUpstreamData,
+          });
+        }
+      );
 
+      setTrafficBytesData(prev => {
         return {
-          service: {
-            inservicesAPs: {
-              ...prev.service.inservicesAPs,
-              value: [...prev.service.inservicesAPs.value, ...inservicesAPs],
-            },
-          },
-          clientDevices: {
-            is2dot4GHz: {
-              ...prev.clientDevices.is2dot4GHz,
-              value: [...prev.clientDevices.is2dot4GHz.value, ...clientDevices2dot4GHz],
-            },
-            is5GHz: {
-              ...prev.clientDevices.is5GHz,
-              value: [...prev.clientDevices.is5GHz.value, ...clientDevices5GHz],
-            },
-          },
-          traffic: {
-            trafficBytesDownstream: {
-              ...prev.traffic.trafficBytesDownstream,
-              value: [...prev.traffic.trafficBytesDownstream.value, ...trafficBytesDownstreamData],
-            },
-            trafficBytesUpstream: {
-              ...prev.traffic.trafficBytesUpstream,
-              value: [...prev.traffic.trafficBytesUpstream.value, ...trafficBytesUpstreamData],
-            },
-          },
-          totalDownstreamTraffic: totalDown,
-          totalUpstreamTraffic: totalUp,
+          totalUpstreamTraffic: (prev?.totalUpstreamTraffic || 0) + totalUp,
+          totalDownstreamTraffic: (prev?.totalDownstreamTraffic || 0) + totalDown,
         };
       });
+
+      setLineChartData(prev => {
+        return [...prev, ...chartData];
+      });
     }
   };
 
@@ -279,8 +250,8 @@ const Dashboard = () => {
         },
         {
           title: 'Usage Information (24 hours)',
-          'Total Traffic (US)': formatBytes(lineChartData?.totalUpstreamTraffic),
-          'Total Traffic (DS)': formatBytes(lineChartData?.totalDownstreamTraffic),
+          'Total Traffic (Downstream)': formatBytes(trafficBytesData?.totalDownstreamTraffic),
+          'Total Traffic (Upstream)': formatBytes(trafficBytesData?.totalUpstreamTraffic),
         },
       ]}
       pieChartDetails={pieChartsData}

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

@@ -63,6 +63,7 @@ const AccessPointDetails = ({ locations }) => {
     }`),
     {
       variables: { customerId, type: 'equipment_ap' },
+      fetchPolicy: 'network-only',
     }
   );
 

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

@@ -1,9 +1,12 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Alert, notification } from 'antd';
 import { useParams } from 'react-router-dom';
-import { useQuery, useMutation } from '@apollo/client';
-import { BulkEditAccessPoints, Loading } from '@tip-wlan/wlan-cloud-ui-library';
+import { useLazyQuery, useMutation } from '@apollo/client';
+import { BulkEditAccessPoints, sortRadioTypes } from '@tip-wlan/wlan-cloud-ui-library';
+import { USER_FRIENDLY_RADIOS } from 'constants/index';
+
+import { getBreadcrumbPath, getLocationPath } from 'utils/locations';
 
 import { FILTER_EQUIPMENT_BULK_EDIT_APS } from 'graphql/queries';
 import { UPDATE_EQUIPMENT_BULK } from 'graphql/mutations';
@@ -11,8 +14,6 @@ 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 (
@@ -28,6 +29,13 @@ const renderTableCell = tabCell => {
 };
 const accessPointsChannelTableColumns = [
   { title: 'Name', dataIndex: 'name', key: 'name', width: 250, render: renderTableCell },
+
+  {
+    title: 'Radios',
+    dataIndex: 'radioMap',
+    width: 150,
+    render: text => renderTableCell(text.map(i => USER_FRIENDLY_RADIOS[i])),
+  },
   {
     title: 'Manual Active Channel',
     dataIndex: 'manualChannelNumber',
@@ -88,215 +96,132 @@ const accessPointsChannelTableColumns = [
   },
 ];
 
-const getBreadcrumbPath = (id, locations) => {
-  const locationsPath = [];
-  const treeRecurse = (parentNodeId, node) => {
-    if (node.id === parentNodeId) {
-      locationsPath.unshift(node);
-      return node;
-    }
-    if (node.children) {
-      let parent;
-      node.children.some(i => {
-        parent = treeRecurse(parentNodeId, i);
-        return parent;
-      });
-      if (parent) {
-        locationsPath.unshift(node);
-      }
-      return parent;
-    }
-    return null;
-  };
+const getRadioDetails = (radioDetails, type) => {
+  const sortedRadios = sortRadioTypes(Object.keys(radioDetails?.radioMap || {}));
 
-  treeRecurse(id, {
-    id: 0,
-    children: locations,
-  });
-
-  return locationsPath;
-};
-
-const getLocationPath = (selectedId, locations) => {
-  const locationsPath = [];
-
-  const treeRecurse = (parentNodeId, node) => {
-    if (node.id === parentNodeId) {
-      locationsPath.unshift(node.id);
-
-      if (node.children) {
-        const flatten = children => {
-          children.forEach(i => {
-            locationsPath.unshift(i.id);
-            if (i.children) {
-              flatten(i.children);
-            }
-          });
-        };
-
-        flatten(node.children);
-      }
-      return node;
-    }
-    if (node.children) {
-      let parent;
-      node.children.some(i => {
-        parent = treeRecurse(parentNodeId, i);
-        return parent;
-      });
-      return parent;
-    }
-
-    return null;
-  };
-
-  if (selectedId) {
-    treeRecurse(selectedId, { id: 0, children: locations });
+  if (type === 'manualChannelNumber') {
+    return sortedRadios.map(i => radioDetails.radioMap[i]?.manualChannelNumber);
   }
 
-  return locationsPath;
+  if (type === 'manualBackupChannelNumber') {
+    return sortedRadios.map(i => radioDetails.radioMap[i]?.manualBackupChannelNumber);
+  }
+  if (type === 'snrDrop') {
+    return sortedRadios.map(
+      i => radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.dropInSnrPercentage
+    );
+  }
+  if (type === 'allowedChannels') {
+    return sortedRadios.map(i => radioDetails.radioMap[i]?.allowedChannelsPowerLevels);
+  }
+
+  if (type === 'minLoad') {
+    return sortedRadios.map(
+      i => radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.minLoadFactor
+    );
+  }
+
+  if (type === 'cellSize') {
+    return sortedRadios.map(i => radioDetails.radioMap[i]?.rxCellSizeDb?.value);
+  }
+
+  if (type === 'probeResponseThreshold') {
+    return sortedRadios.map(i => radioDetails.radioMap[i]?.probeResponseThresholdDb?.value);
+  }
+
+  if (type === 'clientDisconnectThreshold') {
+    return sortedRadios.map(i => radioDetails.radioMap[i]?.clientDisconnectThresholdDb?.value);
+  }
+
+  return sortedRadios;
+};
+
+const formatRadioFrequencies = ({
+  manualChannelNumber,
+  manualBackupChannelNumber,
+  snrDrop,
+  minLoad,
+  cellSize,
+  probeResponseThreshold,
+  clientDisconnectThreshold,
+  radioMap = [],
+}) => {
+  const frequencies = {};
+  radioMap.forEach((i, index) => {
+    frequencies[i] = {
+      channelNumber: manualChannelNumber[index],
+      backupChannelNumber: manualBackupChannelNumber[index],
+      dropInSnrPercentage: snrDrop[index],
+      minLoadFactor: minLoad[index],
+      rxCellSizeDb: {
+        auto: true,
+        value: cellSize[index],
+      },
+      probeResponseThresholdDb: {
+        auto: true,
+        value: probeResponseThreshold[index],
+      },
+      clientDisconnectThresholdDb: {
+        auto: true,
+        value: clientDisconnectThreshold[index],
+      },
+    };
+  });
+  return frequencies;
 };
 
 const BulkEditAPs = ({ locations, checkedLocations }) => {
   const { id } = useParams();
   const { customerId } = useContext(UserContext);
+
   const locationIds = useMemo(() => {
     const locationPath = getLocationPath(id, locations);
     return locationPath.filter(f => checkedLocations.includes(f));
   }, [id, locations, checkedLocations]);
 
-  const {
-    loading: filterEquipmentLoading,
-    error: filterEquipmentError,
-    refetch,
-    data: equipData,
-    fetchMore,
-  } = useQuery(FILTER_EQUIPMENT_BULK_EDIT_APS, {
-    variables: { customerId, locationIds, equipmentType: 'AP' },
+  const [
+    filterEquipment,
+    {
+      loading: filterEquipmentLoading,
+      error: filterEquipmentError,
+      refetch,
+      data: equipData,
+      fetchMore,
+    },
+  ] = useLazyQuery(FILTER_EQUIPMENT_BULK_EDIT_APS, {
+    errorPolicy: 'all',
+    fetchPolicy: 'cache-first',
   });
 
+  const fetchFilterEquipment = async () => {
+    filterEquipment({
+      variables: {
+        customerId,
+        locationIds,
+        equipmentType: 'AP',
+      },
+    });
+  };
   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);
-      });
-      return cellSizeValues;
-    }
-    if (type === 'probeResponseThreshold') {
-      const probeResponseThresholdValues = [];
-      Object.keys(radioDetails?.radioMap || {}).map(i => {
-        return probeResponseThresholdValues.push(
-          radioDetails.radioMap[i]?.probeResponseThresholdDb?.value
-        );
-      });
-      return probeResponseThresholdValues;
-    }
-    if (type === 'clientDisconnectThreshold') {
-      const clientDisconnectThresholdValues = [];
-      Object.keys(radioDetails?.radioMap || {}).map(i => {
-        return clientDisconnectThresholdValues.push(
-          radioDetails.radioMap[i]?.clientDisconnectThresholdDb?.value
-        );
-      });
-      return clientDisconnectThresholdValues;
-    }
-    if (type === 'snrDrop') {
-      const snrDropValues = [];
-      Object.keys(radioDetails?.radioMap || {}).map(i => {
-        return snrDropValues.push(
-          radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.dropInSnrPercentage
-        );
-      });
-      return snrDropValues;
-    }
-
-    const minLoadValue = [];
-    Object.keys(radioDetails?.radioMap || {}).map(i => {
-      return minLoadValue.push(
-        radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.minLoadFactor
-      );
-    });
-    return minLoadValue;
-  };
-
-  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,
-    manualChannelNumber,
-    manualBackupChannelNumber,
-    cellSize,
-    probeResponseThreshold,
-    clientDisconnectThreshold,
-    snrDrop,
-    minLoad,
-    dataSource = []
-  ) => {
-    const updatedItems = [];
-    let dropInSnrPercentage;
-    let minLoadFactor;
-    dataSource.items.forEach(({ id: itemId, details }) => {
-      if (equipmentId === itemId) {
-        Object.keys(details?.radioMap || defaultAppliedRadios).forEach((i, dataIndex) => {
-          const frequencies = {};
-          dropInSnrPercentage = snrDrop[dataIndex];
-          minLoadFactor = minLoad[dataIndex];
-
-          frequencies[`${i}`] = {
-            channelNumber: manualChannelNumber[dataIndex],
-            backupChannelNumber: manualBackupChannelNumber[dataIndex],
-            rxCellSizeDb: {
-              auto: true,
-              value: cellSize[dataIndex],
-            },
-            probeResponseThresholdDb: {
-              auto: true,
-              value: probeResponseThreshold[dataIndex],
-            },
-            clientDisconnectThresholdDb: {
-              auto: true,
-              value: clientDisconnectThreshold[dataIndex],
-            },
-            dropInSnrPercentage,
-            minLoadFactor,
-          };
-          updatedItems.push(frequencies);
-        });
-      }
-    });
-    return updatedItems;
-  };
+  const formattedTableData = useMemo(
+    () =>
+      equipData?.filterEquipment?.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: getRadioDetails(details, 'radioMap'),
+        allowedChannels: getRadioDetails(details, 'allowedChannels'),
+      })),
+    [equipData?.filterEquipment?.items]
+  );
 
   const updateEquipments = editedRowsArr => {
     updateEquipmentBulk({
@@ -322,38 +247,10 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
   const handleSaveChanges = updatedRows => {
     const editedRowsArr = [];
     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
-      );
-      const tempObj = {
-        equipmentId,
-        perRadioDetails: {},
-      };
-      updatedEuips.map(item => {
-        Object.keys(item).forEach(i => {
-          tempObj.perRadioDetails[i] = item[i];
-        });
-        return tempObj;
+      return editedRowsArr.push({
+        equipmentId: updatedRows[key].id,
+        perRadioDetails: formatRadioFrequencies(updatedRows[key]),
       });
-      return editedRowsArr.push(tempObj);
     });
     updateEquipments(editedRowsArr);
   };
@@ -377,24 +274,30 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
     }
   };
 
-  if (filterEquipmentLoading) {
-    return <Loading />;
-  }
+  useEffect(() => {
+    fetchFilterEquipment();
+  }, [locationIds]);
 
   if (filterEquipmentError) {
     return (
-      <Alert message="Error" description="Failed to load equipments data." type="error" showIcon />
+      <Alert
+        message="Error"
+        description="Failed to load equipment(s) data."
+        type="error"
+        showIcon
+      />
     );
   }
 
   return (
     <BulkEditAccessPoints
       tableColumns={accessPointsChannelTableColumns}
-      tableData={setAccessPointsBulkEditTableData(equipData?.filterEquipment)}
+      tableData={formattedTableData}
       onLoadMore={handleLoadMore}
       isLastPage={equipData?.filterEquipment?.context?.lastPage}
       onSaveChanges={handleSaveChanges}
       breadcrumbPath={getBreadcrumbPath(id, locations)}
+      loading={filterEquipmentLoading}
     />
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useQuery, useMutation } from '@apollo/client';
 import { Alert, notification } from 'antd';
 import { AutoProvision as AutoProvisionPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
@@ -6,6 +6,8 @@ import { AutoProvision as AutoProvisionPage, Loading } from '@tip-wlan/wlan-clou
 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';
+import { formatLocations } from 'utils/locations';
 
 const AutoProvision = () => {
   const { customerId } = useContext(UserContext);
@@ -14,13 +16,13 @@ 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(
+  const { data: dataProfile, loading: loadingProfile, error: errorProfile, fetchMore } = useQuery(
     GET_ALL_PROFILES(),
     {
       variables: { customerId, type: 'equipment_ap', limit: 100 },
@@ -60,6 +62,14 @@ const AutoProvision = () => {
       );
   };
 
+  const handleFetchMoreProfiles = e => {
+    fetchMoreProfiles(e, dataProfile, fetchMore);
+  };
+
+  const locationsTree = useMemo(() => {
+    return formatLocations(dataLocation?.getAllLocations, true);
+  }, [dataLocation?.getAllLocations]);
+
   if (loading) {
     return <Loading />;
   }
@@ -72,14 +82,15 @@ const AutoProvision = () => {
 
   return (
     <AutoProvisionPage
-      data={data && data.getCustomer}
-      dataLocation={dataLocation && dataLocation.getAllLocations}
-      dataProfile={dataProfile && dataProfile.getAllProfiles.items}
-      loadingLoaction={loadingLoaction}
+      data={data?.getCustomer}
+      locationsTree={locationsTree}
+      dataProfile={dataProfile?.getAllProfiles?.items}
+      loadingLocation={loadingLocation}
       loadingProfile={loadingProfile}
       errorLocation={errorLocation}
       errorProfile={errorProfile}
       onUpdateCustomer={handleUpdateCustomer}
+      onFetchMoreProfiles={handleFetchMoreProfiles}
     />
   );
 };

app/contexts/UserProvider/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { RolesProvider } from '@tip-wlan/wlan-cloud-ui-library';
 
 import UserContext from 'contexts/UserContext';
 
 const UserProvider = ({ children, id, email, roles, customerId, updateUser, updateToken }) => (
   <UserContext.Provider value={{ id, email, roles, customerId, updateUser, updateToken }}>
-    {children}
+    <RolesProvider role={roles}>{children}</RolesProvider>
   </UserContext.Provider>
 );
 

app/index.js

@@ -14,6 +14,7 @@ import { AUTH_TOKEN } from 'constants/index';
 import { REFRESH_TOKEN } from 'graphql/mutations';
 import { getItem, setItem, removeItem } from 'utils/localStorage';
 import history from 'utils/history';
+import { ScrollToTop } from '@tip-wlan/wlan-cloud-ui-library';
 
 const API_URI = process.env.NODE_ENV === 'production' ? window.REACT_APP_API : process.env.API;
 const MOUNT_NODE = document.getElementById('root');
@@ -102,6 +103,7 @@ const render = () => {
   ReactDOM.render(
     <Router history={history}>
       <ApolloProvider client={client}>
+        <ScrollToTop />
         <App />
       </ApolloProvider>
     </Router>,

app/styles/index.scss

@@ -1,3 +1,14 @@
 body {
   font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active,
+input:-webkit-autofill::first-line {
+  -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
+  transition: color 9999s ease-out, background-color 9999s ease-out;
+  font-size: 14px !important;
+  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+}

app/utils/locations.js

@@ -0,0 +1,110 @@
+import { filter, isEmpty, each } from 'lodash';
+
+export const NETWORK_NODE = {
+  title: 'Network',
+  id: '0',
+  key: '0',
+  value: '0',
+  name: 'Network',
+};
+
+export const formatLocations = (list = [], disableRoot = false) => {
+  function unflatten(array, p) {
+    let tree = [];
+    const parent = typeof p !== 'undefined' ? p : { id: '0' };
+    let children = filter(array, child => child.parentId === parent.id);
+    children = children.map(c => ({
+      title: c.name,
+      value: `${c.id}`,
+      key: c.id,
+      isLeaf: false,
+      ...c,
+    }));
+    if (!isEmpty(children)) {
+      if (parent.id === '0') {
+        tree = children;
+      } else {
+        parent.children = children;
+      }
+      each(children, child => unflatten(array, child));
+    }
+    return tree;
+  }
+
+  return [
+    {
+      ...NETWORK_NODE,
+      ...(disableRoot && { disabled: true }),
+      children: unflatten(list),
+    },
+  ];
+};
+
+export const getBreadcrumbPath = (id, locations) => {
+  const locationsPath = [];
+  const treeRecurse = (parentNodeId, node) => {
+    if (node.id === parentNodeId) {
+      locationsPath.unshift(node);
+      return node;
+    }
+    if (node.children) {
+      let parent;
+      node.children.some(i => {
+        parent = treeRecurse(parentNodeId, i);
+        return parent;
+      });
+      if (parent) {
+        locationsPath.unshift(node);
+      }
+      return parent;
+    }
+    return null;
+  };
+
+  treeRecurse(id, {
+    id: 0,
+    children: locations,
+  });
+
+  return locationsPath;
+};
+
+export const getLocationPath = (selectedId, locations) => {
+  const locationsPath = [];
+
+  const treeRecurse = (parentNodeId, node) => {
+    if (node.id === parentNodeId) {
+      locationsPath.unshift(node.id);
+
+      if (node.children) {
+        const flatten = children => {
+          children.forEach(i => {
+            locationsPath.unshift(i.id);
+            if (i.children) {
+              flatten(i.children);
+            }
+          });
+        };
+
+        flatten(node.children);
+      }
+      return node;
+    }
+    if (node.children) {
+      let parent;
+      node.children.some(i => {
+        parent = treeRecurse(parentNodeId, i);
+        return parent;
+      });
+      return parent;
+    }
+
+    return null;
+  };
+
+  if (selectedId) {
+    treeRecurse(selectedId, { id: 0, children: locations });
+  }
+
+  return locationsPath;
+};

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2223,9 +2223,9 @@
       }
     },
     "@tip-wlan/wlan-cloud-ui-library": {
-      "version": "1.1.3",
-      "resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-1.1.3.tgz",
-      "integrity": "sha1-Vcz6J9sDy/oQE/4elDBtx9KG4hc="
+      "version": "1.2.2",
+      "resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-1.2.2.tgz",
+      "integrity": "sha1-mlLeN9yAg9KcSWEwc/s2sRxem7E="
     },
     "@types/anymatch": {
       "version": "1.3.1",
@@ -2280,6 +2280,32 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ=="
+    },
+    "@types/d3-scale": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.2.2.tgz",
+      "integrity": "sha512-qpQe8G02tzUwt9sdWX1h8A/W0Q1+N48wMnYXVOkrzeLUkCfvzJYV9Ee3aORCS4dN4ONRLFmMvaXdziQ29XGLjQ==",
+      "requires": {
+        "@types/d3-time": "*"
+      }
+    },
+    "@types/d3-shape": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-2.0.0.tgz",
+      "integrity": "sha512-NLzD02m5PiD1KLEDjLN+MtqEcFYn4ZL9+Rqc9ZwARK1cpKZXd91zBETbe6wpBB6Ia0D0VZbpmbW3+BsGPGnCpA==",
+      "requires": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "@types/d3-time": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.0.0.tgz",
+      "integrity": "sha512-Abz8bTzy8UWDeYs9pCa3D37i29EWDjNTjemdk0ei1ApYVNqulYlGUKip/jLOpogkPSsPz/GvZCYiC7MFlEk0iQ=="
+    },
     "@types/eslint": {
       "version": "7.2.7",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.7.tgz",
@@ -2403,6 +2429,11 @@
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
       "dev": true
     },
+    "@types/resize-observer-browser": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.5.tgz",
+      "integrity": "sha512-8k/67Z95Goa6Lznuykxkfhq9YU3l1Qe6LNZmwde1u7802a3x8v44oq0j91DICclxatTr0rNnhXx7+VTIetSrSQ=="
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -5105,6 +5136,11 @@
         }
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
+    },
     "css-what": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -5259,6 +5295,73 @@
         "array-find-index": "^1.0.1"
       }
     },
+    "d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "requires": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+    },
+    "d3-format": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+    },
+    "d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "requires": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "d3-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
+      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+    },
+    "d3-scale": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "requires": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      }
+    },
+    "d3-shape": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "requires": {
+        "d3-path": "1 - 2"
+      }
+    },
+    "d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "requires": {
+        "d3-array": "2"
+      }
+    },
+    "d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "requires": {
+        "d3-time": "1 - 2"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -5305,6 +5408,11 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
+    "decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -5523,6 +5631,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6264,8 +6380,7 @@
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
     "events": {
       "version": "3.3.0",
@@ -6645,6 +6760,11 @@
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
       "dev": true
     },
+    "fast-equals": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-2.0.1.tgz",
+      "integrity": "sha512-jIHAbyu5Txdi299DitHXr4wuvw7ajz8S4xVgShJmQOUD6TovsKzvMoHoq9G8+dO6xeKWrwH3DURT+ZDKnwjSsA=="
+    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -7269,16 +7389,6 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
-    "highcharts": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.2.2.tgz",
-      "integrity": "sha512-F63TXO7RxsvTcpO/KOubQZWualYpCMyCTuKtoWbt7KCsfQ3Kl7Fr6HEyyJdjkYl+XlnmnKlSRi9d3HjLK9Q0wg=="
-    },
-    "highcharts-react-official": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/highcharts-react-official/-/highcharts-react-official-3.0.0.tgz",
-      "integrity": "sha512-VefJgDY2hkT9gfppsQGrRF2g5u8d9dtfHGcx2/xqiP+PkZXCqalw9xOeKVCRvJKTOh0coiDFwvVjOvB7KaGl4A=="
-    },
     "history": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@@ -8002,6 +8112,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -11413,16 +11528,10 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "lodash.memoize": {
       "version": "4.1.2",
@@ -11436,6 +11545,11 @@
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -12869,8 +12983,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "picomatch": {
       "version": "2.2.2",
@@ -13697,6 +13810,14 @@
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -14151,23 +14272,20 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-jsx-highcharts": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/react-jsx-highcharts/-/react-jsx-highcharts-4.2.1.tgz",
-      "integrity": "sha512-IDrHGWpL4Y+nz36cwcESf4QVYzUSasrZqMLn2fdVf5DbEv3zM9uJHrrSjONooFYGtrBolXLsuj3oKSqZI17dlA==",
-      "requires": {
-        "@babel/runtime": "^7.13.9",
-        "uuid": "^8.3.2"
-      }
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "react-jsx-highstock": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/react-jsx-highstock/-/react-jsx-highstock-4.2.1.tgz",
-      "integrity": "sha512-GabfVED3HY/v8QswqV7/XAHt+bbqhqaXLG31DZPVfmlweGh+enHjwAGvOfKpbsNYyDGlmcV6UKknHCDq2rj+mg==",
+    "react-resize-detector": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-6.7.1.tgz",
+      "integrity": "sha512-54l8LWPBIRdtv0I/W/fMkmtgWX0mUIxKKAJKKimihNFueXtHuElDdXDyinQRmV7iku99AoyrSAhkCU/zjFG5+Q==",
       "requires": {
-        "@babel/runtime": "^7.13.9",
-        "lodash-es": "^4.17.21",
-        "react-jsx-highcharts": "4.2.1"
+        "@types/resize-observer-browser": "^0.1.5",
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "resize-observer-polyfill": "^1.5.1"
       }
     },
     "react-router": {
@@ -14209,6 +14327,16 @@
         "shallowequal": "^1.0.1"
       }
     },
+    "react-smooth": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.0.tgz",
+      "integrity": "sha512-wK4dBBR6P21otowgMT9toZk+GngMplGS1O5gk+2WSiHEXIrQgDvhR5IIlT74Vtu//qpTcipkgo21dD7a7AUNxw==",
+      "requires": {
+        "fast-equals": "^2.0.0",
+        "raf": "^3.4.0",
+        "react-transition-group": "2.9.0"
+      }
+    },
     "react-test-renderer": {
       "version": "16.14.0",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
@@ -14221,6 +14349,17 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-transition-group": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "requires": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -14456,6 +14595,41 @@
       "integrity": "sha512-v1SEYUOXXdbBZK8ZuNgO4TBjamPsiSgcFr0aP+tEKpQZK8vooEUqV6nm6Cv502mX4NF2EfsnVqtNAHG+/6Ur1Q==",
       "dev": true
     },
+    "recharts": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.0.9.tgz",
+      "integrity": "sha512-JNsXE80PuF3hugUCE7JqDOMSvu5xQLxtjOaqFKKZI2pCJ1PVJzhwDv4TWk0nO4AvADbeWzYEHbg8C5Hcrh42UA==",
+      "requires": {
+        "@types/d3-scale": "^3.0.0",
+        "@types/d3-shape": "^2.0.0",
+        "classnames": "^2.2.5",
+        "d3-interpolate": "^2.0.1",
+        "d3-scale": "^3.2.3",
+        "d3-shape": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.19",
+        "react-is": "16.10.2",
+        "react-resize-detector": "^6.6.3",
+        "react-smooth": "^2.0.0",
+        "recharts-scale": "^0.4.4",
+        "reduce-css-calc": "^2.1.8"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.10.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
+          "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA=="
+        }
+      }
+    },
+    "recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "requires": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
     "rechoir": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
@@ -14486,6 +14660,22 @@
         }
       }
     },
+    "reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        }
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -16921,11 +17111,6 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
-    "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
-    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -9,9 +9,9 @@
   },
   "scripts": {
     "test": "jest --passWithNoTests --coverage",
-    "start": "cross-env NODE_ENV=development webpack serve",
-    "start:bare": "cross-env API=ttps://portal.rtl.lab.netexperience.com NODE_ENV=bare webpack serve",
-    "start:dev": "cross-env API=https://portal.rtl.lab.netexperience.com NODE_ENV=development webpack serve",
+    "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,.scss}'",
     "eslint-fix": "eslint --fix 'app/**/*.js'",
@@ -21,12 +21,10 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^1.1.3",
+    "@tip-wlan/wlan-cloud-ui-library": "^1.2.2",
     "antd": "^4.5.2",
     "apollo-upload-client": "^13.0.0",
     "graphql": "^15.5.0",
-    "highcharts": "^8.1.0",
-    "highcharts-react-official": "^3.0.0",
     "history": "^4.10.1",
     "lodash": "^4.17.15",
     "moment": "^2.26.0",
@@ -34,9 +32,8 @@
     "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"
+    "react-router-dom": "^5.1.2",
+    "recharts": "^2.0.9"
   },
   "devDependencies": {
     "@babel/core": "^7.8.7",