patch ui-library

.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=1.2.0-SNAPSHOT
+          [ "$VERSION" == "master" ] && VERSION=1.1.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=1.2.0-SNAPSHOT
+          [ "$VERSION" == "master" ] && VERSION=1.1.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,11 +4,10 @@ import { useMutation, useQuery, gql } from '@apollo/client';
 import { notification } from 'antd';
 import { useHistory } from 'react-router-dom';
 
-import { ROUTES, AUTH_TOKEN } from 'constants/index';
+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
-import { GET_ALL_PROFILES, GET_API_URL } from 'graphql/queries';
+import { GET_ALL_PROFILES } from 'graphql/queries';
 import { fetchMoreProfiles } from 'graphql/functions';
-import { getItem } from 'utils/localStorage';
 
 const CREATE_PROFILE = gql`
   mutation CreateProfile(
@@ -36,9 +35,6 @@ 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',
@@ -120,46 +116,6 @@ 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}
@@ -171,7 +127,6 @@ const AddProfile = () => {
       idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
       rfProfiles={rfProfiles?.getAllProfiles?.items}
       onFetchMoreProfiles={handleFetchMoreProfiles}
-      fileUpload={handleFileUpload}
     />
   );
 };

app/containers/App/index.js

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

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

@@ -1,12 +1,9 @@
-import React, { useContext, useMemo, useEffect } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Alert, notification } from 'antd';
 import { useParams } from 'react-router-dom';
-import { useLazyQuery, useMutation } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/client';
-import { BulkEditAccessPoints, sortRadioTypes } from '@tip-wlan/wlan-cloud-ui-library';
+import { BulkEditAccessPoints, Loading } 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';
@@ -14,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 (
@@ -29,13 +28,6 @@ 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',
@@ -96,132 +88,215 @@ const accessPointsChannelTableColumns = [
   },
 ];
 
-const getRadioDetails = (radioDetails, type) => {
+const getBreadcrumbPath = (id, locations) => {
-  const sortedRadios = sortRadioTypes(Object.keys(radioDetails?.radioMap || {}));
+  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;
+  };
 
-  if (type === 'manualChannelNumber') {
+  treeRecurse(id, {
-    return sortedRadios.map(i => radioDetails.radioMap[i]?.manualChannelNumber);
+    id: 0,
-  }
+    children: locations,
+  });
 
-  if (type === 'manualBackupChannelNumber') {
+  return locationsPath;
-    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 = ({
+const getLocationPath = (selectedId, locations) => {
-  manualChannelNumber,
+  const locationsPath = [];
-  manualBackupChannelNumber,
+
-  snrDrop,
+  const treeRecurse = (parentNodeId, node) => {
-  minLoad,
+    if (node.id === parentNodeId) {
-  cellSize,
+      locationsPath.unshift(node.id);
-  probeResponseThreshold,
+
-  clientDisconnectThreshold,
+      if (node.children) {
-  radioMap = [],
+        const flatten = children => {
-}) => {
+          children.forEach(i => {
-  const frequencies = {};
+            locationsPath.unshift(i.id);
-  radioMap.forEach((i, index) => {
+            if (i.children) {
-    frequencies[i] = {
+              flatten(i.children);
-      channelNumber: manualChannelNumber[index],
+            }
-      backupChannelNumber: manualBackupChannelNumber[index],
+          });
-      dropInSnrPercentage: snrDrop[index],
+        };
-      minLoadFactor: minLoad[index],
+
-      rxCellSizeDb: {
+        flatten(node.children);
-        auto: true,
+      }
-        value: cellSize[index],
+      return node;
-      },
+    }
-      probeResponseThresholdDb: {
+    if (node.children) {
-        auto: true,
+      let parent;
-        value: probeResponseThreshold[index],
+      node.children.some(i => {
-      },
+        parent = treeRecurse(parentNodeId, i);
-      clientDisconnectThresholdDb: {
+        return parent;
-        auto: true,
+      });
-        value: clientDisconnectThreshold[index],
+      return parent;
-      },
+    }
-    };
+
-  });
+    return null;
-  return frequencies;
+  };
+
+  if (selectedId) {
+    treeRecurse(selectedId, { id: 0, children: locations });
+  }
+
+  return locationsPath;
 };
 
 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 [
+  const {
-    filterEquipment,
+    loading: filterEquipmentLoading,
-    {
+    error: filterEquipmentError,
-      loading: filterEquipmentLoading,
+    refetch,
-      error: filterEquipmentError,
+    data: equipData,
-      refetch,
+    fetchMore,
-      data: equipData,
+  } = useQuery(FILTER_EQUIPMENT_BULK_EDIT_APS, {
-      fetchMore,
+    variables: { customerId, locationIds, equipmentType: 'AP' },
-    },
-  ] = 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 formattedTableData = useMemo(
+  const getRadioDetails = (radioDetails, type) => {
-    () =>
+    if (type === 'manualChannelNumber') {
-      equipData?.filterEquipment?.items?.map(({ id: key, name, details = {} }) => ({
+      const manualChannelNumbers = [];
-        key,
+      Object.keys(radioDetails?.radioMap || {}).map(i => {
-        id: key,
+        return manualChannelNumbers.push(radioDetails.radioMap[i]?.manualChannelNumber);
-        name,
+      });
-        manualChannelNumber: getRadioDetails(details, 'manualChannelNumber'),
+      return manualChannelNumbers;
-        manualBackupChannelNumber: getRadioDetails(details, 'manualBackupChannelNumber'),
+    }
-        cellSize: getRadioDetails(details, 'cellSize'),
+
-        probeResponseThreshold: getRadioDetails(details, 'probeResponseThreshold'),
+    if (type === 'manualBackupChannelNumber') {
-        clientDisconnectThreshold: getRadioDetails(details, 'clientDisconnectThreshold'),
+      const manualBackupChannelNumbers = [];
-        snrDrop: getRadioDetails(details, 'snrDrop'),
+      Object.keys(radioDetails?.radioMap || {}).map(i => {
-        minLoad: getRadioDetails(details, 'minLoad'),
+        return manualBackupChannelNumbers.push(radioDetails.radioMap[i]?.manualBackupChannelNumber);
-        radioMap: getRadioDetails(details, 'radioMap'),
+      });
-        allowedChannels: getRadioDetails(details, 'allowedChannels'),
+      return manualBackupChannelNumbers;
-      })),
+    }
-    [equipData?.filterEquipment?.items]
+    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 updateEquipments = editedRowsArr => {
     updateEquipmentBulk({
@@ -247,10 +322,38 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
   const handleSaveChanges = updatedRows => {
     const editedRowsArr = [];
     Object.keys(updatedRows).forEach(key => {
-      return editedRowsArr.push({
+      const {
-        equipmentId: updatedRows[key].id,
+        id: equipmentId,
-        perRadioDetails: formatRadioFrequencies(updatedRows[key]),
+        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(tempObj);
     });
     updateEquipments(editedRowsArr);
   };
@@ -274,30 +377,24 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
     }
   };
 
-  useEffect(() => {
+  if (filterEquipmentLoading) {
-    fetchFilterEquipment();
+    return <Loading />;
-  }, [locationIds]);
+  }
 
   if (filterEquipmentError) {
     return (
-      <Alert
+      <Alert message="Error" description="Failed to load equipments data." type="error" showIcon />
-        message="Error"
-        description="Failed to load equipment(s) data."
-        type="error"
-        showIcon
-      />
     );
   }
 
   return (
     <BulkEditAccessPoints
       tableColumns={accessPointsChannelTableColumns}
-      tableData={formattedTableData}
+      tableData={setAccessPointsBulkEditTableData(equipData?.filterEquipment)}
       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, useMemo } from 'react';
+import React, { useContext } 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';
@@ -7,7 +7,6 @@ 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);
@@ -66,10 +65,6 @@ const AutoProvision = () => {
     fetchMoreProfiles(e, dataProfile, fetchMore);
   };
 
-  const locationsTree = useMemo(() => {
-    return formatLocations(dataLocation?.getAllLocations, true);
-  }, [dataLocation?.getAllLocations]);
-
   if (loading) {
     return <Loading />;
   }
@@ -82,9 +77,9 @@ const AutoProvision = () => {
 
   return (
     <AutoProvisionPage
-      data={data?.getCustomer}
+      data={data && data.getCustomer}
-      locationsTree={locationsTree}
+      dataLocation={dataLocation && dataLocation.getAllLocations}
-      dataProfile={dataProfile?.getAllProfiles?.items}
+      dataProfile={dataProfile && dataProfile.getAllProfiles.items}
       loadingLocation={loadingLocation}
       loadingProfile={loadingProfile}
       errorLocation={errorLocation}

app/contexts/UserProvider/index.js

@@ -1,12 +1,11 @@
 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 }}>
-    <RolesProvider role={roles}>{children}</RolesProvider>
+    {children}
   </UserContext.Provider>
 );
 

app/index.js

@@ -14,7 +14,6 @@ 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');
@@ -103,7 +102,6 @@ const render = () => {
   ReactDOM.render(
     <Router history={history}>
       <ApolloProvider client={client}>
-        <ScrollToTop />
         <App />
       </ApolloProvider>
     </Router>,

app/styles/index.scss

@@ -1,14 +1,3 @@
 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

@@ -1,110 +0,0 @@
-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.2.0",
+  "version": "1.1.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2223,9 +2223,9 @@
       }
     },
     "@tip-wlan/wlan-cloud-ui-library": {
-      "version": "1.2.2",
+      "version": "1.1.14",
-      "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",
+      "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.14.tgz",
-      "integrity": "sha1-mlLeN9yAg9KcSWEwc/s2sRxem7E="
+      "integrity": "sha1-BRTU+IQ03oDQWJM5xGo+D+S49Kc="
     },
     "@types/anymatch": {
       "version": "1.3.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "1.2.0",
+  "version": "1.1.8",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -21,7 +21,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^1.2.2",
+    "@tip-wlan/wlan-cloud-ui-library": "^1.1.14",
     "antd": "^4.5.2",
     "apollo-upload-client": "^13.0.0",
     "graphql": "^15.5.0",