fixed spelling

.github/workflows/dockerpublish.yml

@@ -5,7 +5,6 @@ on:
     # Publish `master` as Docker `latest` image.
     branches:
       - master
-      - 'release/**'
 
     # Publish `v1.2.3` tags as releases.
     tags:
@@ -15,8 +14,8 @@ on:
   pull_request:
 
   schedule:
-    # runs nightly build at 5AM
+      # runs nightly build at 5AM
-    - cron: '00 09 * * *'
+      - cron:  '00 09 * * *'
 
 env:
   IMAGE_NAME: wlan-cloud-ui
@@ -49,7 +48,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Adding property file with component version and commit hash
+      - 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,')
@@ -57,11 +56,8 @@ 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=0.0.1-SNAPSHOT
+          [ "$VERSION" == "master" ] && VERSION=latest
 
           TIMESTAMP=$(date +'%Y-%m-%d')
 
@@ -92,11 +88,8 @@ 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=0.0.1-SNAPSHOT
+          [ "$VERSION" == "master" ] && VERSION=latest
 
           echo IMAGE_ID=$IMAGE_ID
           echo VERSION=$VERSION
@@ -104,6 +97,6 @@ jobs:
 
           docker tag image $IMAGE_ID:$VERSION
           docker push $IMAGE_ID:$VERSION
-
+          
           docker tag image $IMAGE_ID:$VERSION-$TIMESTAMP
-          docker push $IMAGE_ID:$VERSION-$TIMESTAMP
+          docker push $IMAGE_ID:$VERSION-$TIMESTAMP          

app/components/UsersDropdown/index.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Popover, Row } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+
+import styles from './index.module.scss';
+
+const UsersDropdown = ({ onLogout }) => {
+  const [popoverVisible, setPopoverVisible] = useState(false);
+
+  const hidePopover = () => {
+    setPopoverVisible(false);
+  };
+
+  const handleVisibleChange = visible => {
+    setPopoverVisible(visible);
+  };
+
+  const userOptions = (
+    <>
+      <Row>
+        <Link onClick={hidePopover} to="/account">
+          Account
+        </Link>
+      </Row>
+      <Row>
+        <Link onClick={onLogout} to="/">
+          Log Out
+        </Link>
+      </Row>
+    </>
+  );
+
+  return (
+    <Popover
+      content={userOptions}
+      trigger="click"
+      getPopupContainer={e => e.parentElement}
+      visible={popoverVisible}
+      onVisibleChange={handleVisibleChange}
+      placement="bottomRight"
+      arrowPointAtCenter
+    >
+      <UserOutlined className={styles.MenuIcon} />
+    </Popover>
+  );
+};
+
+UsersDropdown.propTypes = {
+  onLogout: PropTypes.func,
+};
+
+UsersDropdown.defaultProps = {
+  onLogout: () => {},
+};
+
+export default UsersDropdown;

app/components/UsersDropdown/index.module.scss

@@ -0,0 +1,7 @@
+.MenuIcon {
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+  }
+  

app/containers/AddProfile/index.js

@@ -7,7 +7,7 @@ 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';
+import { updateQueryGetAllProfiles } from 'graphql/functions';
 
 const CREATE_PROFILE = gql`
   mutation CreateProfile(
@@ -37,43 +37,24 @@ const AddProfile = () => {
   const { customerId } = useContext(UserContext);
   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();
@@ -103,30 +84,111 @@ const AddProfile = () => {
       );
   };
 
-  const handleFetchMoreProfiles = (e, key) => {
+  const handleFetchProfiles = e => {
-    if (key === 'radius') fetchMoreProfiles(e, radiusProfiles, fetchMoreRadiusProfiles);
+    if (ssidProfiles.getAllProfiles.context.lastPage) {
-    else if (key === 'captive_portal')
+      return false;
-      fetchMoreProfiles(e, captiveProfiles, fetchMoreCaptiveProfiles);
+    }
-    else if (key === 'rf') fetchMoreProfiles(e, rfProfiles, fetchMoreRfProfiles);
+
-    else if (key === 'passpoint_venue') fetchMoreProfiles(e, venueProfiles, fetchMoreVenueProfiles);
+    e.persist();
-    else if (key === 'passpoint_operator')
+    const { target } = e;
-      fetchMoreProfiles(e, operatorProfiles, fetchMoreOperatorProfiles);
+
-    else if (key === 'passpoint_osu_id_provider')
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-      fetchMoreProfiles(e, idProviderProfiles, fetchMoreIdProviderProfiles);
+      fetchMore({
-    else fetchMoreProfiles(e, ssidProfiles, fetchMore);
+        variables: { context: { ...ssidProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchVenueProfiles = e => {
+    if (venueProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreVenueProfiles({
+        variables: { context: { ...venueProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchRfProfiles = e => {
+    if (rfProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreRfProfiles({
+        variables: { context: { ...rfProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchOperatorProfiles = e => {
+    if (operatorProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreOperatorProfiles({
+        variables: { context: { ...operatorProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchIdProviderProfiles = e => {
+    if (idProviderProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreIdProviderProfiles({
+        variables: { context: { ...idProviderProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
   };
 
   return (
     <AddProfilePage
       onCreateProfile={handleAddProfile}
-      ssidProfiles={ssidProfiles?.getAllProfiles?.items}
+      ssidProfiles={
-      radiusProfiles={radiusProfiles?.getAllProfiles?.items}
+        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
-      captiveProfiles={captiveProfiles?.getAllProfiles?.items}
+      }
       venueProfiles={venueProfiles?.getAllProfiles?.items}
       operatorProfiles={operatorProfiles?.getAllProfiles?.items}
       idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
       rfProfiles={rfProfiles?.getAllProfiles?.items}
-      onFetchMoreProfiles={handleFetchMoreProfiles}
+      onFetchMoreProfiles={handleFetchProfiles}
+      onFetchMoreVenueProfiles={handleFetchVenueProfiles}
+      onFetchMoreOperatorProfiles={handleFetchOperatorProfiles}
+      onFetchMoreIdProviderProfiles={handleFetchIdProviderProfiles}
+      onFetchMoreRfProfiles={handleFetchRfProfiles}
     />
   );
 };

app/containers/App/index.js

@@ -92,9 +92,7 @@ const App = () => {
           <ProtectedRouteWithLayout exact path={ROUTES.addprofile} component={AddProfile} />
 
           <ProtectedRouteWithLayout exact path={ROUTES.alarms} component={Alarms} />
-          {user?.id !== 0 && (
+          <ProtectedRouteWithLayout exact path={ROUTES.account} component={EditAccount} />
-            <ProtectedRouteWithLayout exact path={ROUTES.account} component={EditAccount} />
-          )}
           {user?.roles?.[0] === 'SuperUser' && (
             <ProtectedRouteWithLayout exact path={ROUTES.users} component={Accounts} />
           )}

app/containers/Dashboard/index.js

@@ -129,17 +129,11 @@ const Dashboard = () => {
             clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
             clientDevices5GHz.push([eventTimestamp, total5GHz || 0]);
 
-            trafficBytesDownstreamData.push([
+            trafficBytesDownstreamData.push([eventTimestamp, trafficBytesDownstream || 0]);
-              eventTimestamp,
+            trafficBytesUpstreamData.push([eventTimestamp, trafficBytesUpstream || 0]);
-              (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0,
-            ]);
-            trafficBytesUpstreamData.push([
-              eventTimestamp,
-              (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0,
-            ]);
 
-            totalDown += (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0;
+            totalDown += trafficBytesDownstream || 0;
-            totalUp += (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0;
+            totalUp += trafficBytesUpstream || 0;
           }
         );
 

app/containers/MasterLayout/index.js

@@ -12,8 +12,10 @@ import { removeItem } from 'utils/localStorage';
 
 import UserContext from 'contexts/UserContext';
 
+import UsersDropdown from 'components/UsersDropdown';
+
 const MasterLayout = ({ children }) => {
-  const { roles, customerId, id: currentUserId } = useContext(UserContext);
+  const { roles, customerId, email } = useContext(UserContext);
 
   const client = useApolloClient();
   const location = useLocation();
@@ -56,15 +58,11 @@ const MasterLayout = ({ children }) => {
       key: 'settings',
       text: 'Settings',
       children: [
-        ...(currentUserId !== 0
+        {
-          ? [
+          key: 'editAccount',
-              {
+          path: ROUTES.account,
-                key: 'editAccount',
+          text: 'Account',
-                path: ROUTES.account,
+        },
-                text: 'Edit Account',
-              },
-            ]
-          : []),
         {
           key: 'logout',
           path: ROUTES.root,
@@ -94,7 +92,8 @@ const MasterLayout = ({ children }) => {
       menuItems={menuItems}
       mobileMenuItems={mobileMenuItems}
       totalAlarms={data && data.getAlarmCount}
-      currentUserId={currentUserId}
+      currentUserEmail={email}
+      usersDropdown={<UsersDropdown onLogout={handleLogout} />}
     >
       {children}
     </Layout>

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

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useParams, useHistory } from 'react-router-dom';
-import { useQuery, useMutation } from '@apollo/client';
+import { useQuery, useMutation, gql } from '@apollo/client';
 import { Alert, notification } from 'antd';
 import moment from 'moment';
 import {
@@ -9,22 +9,126 @@ import {
   Loading,
 } from '@tip-wlan/wlan-cloud-ui-library';
 
+import { FILTER_SERVICE_METRICS, GET_ALL_FIRMWARE, GET_ALL_PROFILES } from 'graphql/queries';
 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 { updateQueryGetAllProfiles } 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 {
+        id
+        name
+        childProfiles {
+          id
+          name
+          details
+        }
+      }
+      baseMacAddress
+      manufacturer
+      status {
+        firmware {
+          detailsJSON
+        }
+        protocol {
+          detailsJSON
+        }
+        radioUtilization {
+          detailsJSON
+        }
+        clientDetails {
+          detailsJSON
+          details {
+            numClientsPerRadio
+          }
+        }
+        osPerformance {
+          detailsJSON
+        }
+      }
+      model
+      alarmsCount
+      alarms {
+        severity
+        alarmCode
+        details
+        createdTimestamp
+      }
+    }
+  }
+`;
+
+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
+    }
+  }
+`;
+
+const DELETE_EQUIPMENT = gql`
+  mutation DeleteEquipment($id: ID!) {
+    deleteEquipment(id: $id) {
+      id
+    }
+  }
+`;
+
 const toTime = moment();
 const fromTime = moment().subtract(1, 'hour');
 
@@ -38,7 +142,6 @@ const AccessPointDetails = ({ locations }) => {
       id,
     },
     fetchPolicy: 'network-only',
-    errorPolicy: 'all',
   });
 
   const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
@@ -46,9 +149,9 @@ const AccessPointDetails = ({ locations }) => {
     {
       skip: !data?.getEquipment?.model,
       variables: { modelId: data?.getEquipment?.model },
-      errorPolicy: 'all',
     }
   );
+
   const {
     data: dataProfiles,
     error: errorProfiles,
@@ -93,21 +196,20 @@ const AccessPointDetails = ({ locations }) => {
     metricsRefetch();
   };
 
-  const handleUpdateEquipment = ({
+  const handleUpdateEquipment = (
-    id: equipmentId,
+    equipmentId,
     equipmentType,
     inventoryId,
-    customerId: custId,
+    custId,
     profileId,
     locationId,
     name,
-    baseMacAddress,
     latitude,
     longitude,
     serial,
     lastModifiedTimestamp,
-    formattedData,
+    details
-  }) => {
+  ) => {
     updateEquipment({
       variables: {
         id: equipmentId,
@@ -117,12 +219,11 @@ const AccessPointDetails = ({ locations }) => {
         profileId,
         locationId,
         name,
-        baseMacAddress,
         latitude,
         longitude,
         serial,
         lastModifiedTimestamp,
-        details: formattedData,
+        details,
       },
     })
       .then(() => {
@@ -226,14 +327,28 @@ const AccessPointDetails = ({ locations }) => {
       );
 
   const handleFetchProfiles = e => {
-    fetchMoreProfiles(e, dataProfiles, fetchMore);
+    if (dataProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMore({
+        variables: { context: { ...dataProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
   };
 
   if (loading) {
     return <Loading />;
   }
 
-  if (error && !data?.getEquipment) {
+  if (error) {
     return (
       <Alert
         message="Error"

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

@@ -89,8 +89,8 @@ const accessPointsTableColumns = [
   },
   {
     title: 'CHANNEL',
-    dataIndex: ['status', 'channel', 'detailsJSON', 'channelNumberStatusDataMap'],
+    dataIndex: 'channel',
-    render: text => renderTableCell(Object.values(text ?? [])),
+    render: renderTableCell,
   },
   {
     title: 'OCCUPANCY',

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

@@ -11,8 +11,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 (
@@ -27,63 +25,47 @@ const renderTableCell = tabCell => {
   return <span>{tabCell}</span>;
 };
 const accessPointsChannelTableColumns = [
-  { title: 'Name', dataIndex: 'name', key: 'name', width: 250, render: renderTableCell },
+  { title: 'NAME', dataIndex: 'name', key: 'name', render: renderTableCell },
   {
-    title: 'Manual Active Channel',
+    title: 'CHANNEL',
-    dataIndex: 'manualChannelNumber',
+    dataIndex: 'channel',
-    key: 'manualChannelNumber',
+    key: 'channel',
     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: 'Probe Response Threshold',
+    title: 'PROB 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,
   },
 ];
@@ -178,84 +160,68 @@ 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 => {
+      Object.keys(radioDetails.radioMap).map(i => {
-        return cellSizeValues.push(radioDetails.radioMap[i]?.rxCellSizeDb?.value);
+        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?.radioMap || {}).map(i => {
+      Object.keys(radioDetails.advancedRadioMap).map(i => {
         return snrDropValues.push(
-          radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.dropInSnrPercentage
+          radioDetails.advancedRadioMap[i].bestApSettings.dropInSnrPercentage
         );
       });
       return snrDropValues;
     }
 
     const minLoadValue = [];
-    Object.keys(radioDetails?.radioMap || {}).map(i => {
+    Object.keys(radioDetails.advancedRadioMap).map(i => {
-      return minLoadValue.push(
+      return minLoadValue.push(radioDetails.advancedRadioMap[i].bestApSettings.minLoadFactor);
-        radioDetails.advancedRadioMap[i]?.bestApSettings?.value?.minLoadFactor
-      );
     });
     return minLoadValue;
   };
 
-  const setAccessPointsBulkEditTableData = (dataSource = []) =>
+  const setAccessPointsBulkEditTableData = (dataSource = []) => {
-    dataSource.items.map(({ id: key, name, details }) => ({
+    const tableData = dataSource.items.map(({ id: key, name, channel, details }) => {
-      key,
+      return {
-      id: key,
+        key,
-      name,
+        id: key,
-      manualChannelNumber: getRadioDetails(details, 'manualChannelNumber'),
+        name,
-      manualBackupChannelNumber: getRadioDetails(details, 'manualBackupChannelNumber'),
+        channel,
-      cellSize: getRadioDetails(details, 'cellSize'),
+        cellSize: getRadioDetails(details, 'cellSize'),
-      probeResponseThreshold: getRadioDetails(details, 'probeResponseThreshold'),
+        probeResponseThreshold: getRadioDetails(details, 'probeResponseThreshold'),
-      clientDisconnectThreshold: getRadioDetails(details, 'clientDisconnectThreshold'),
+        clientDisconnectThreshold: getRadioDetails(details, 'clientDisconnectThreshold'),
-      snrDrop: getRadioDetails(details, 'snrDrop'),
+        snrDrop: getRadioDetails(details, 'snrDrop'),
-      minLoad: getRadioDetails(details, 'minLoad'),
+        minLoad: getRadioDetails(details, 'minLoad'),
-      radioMap: Object.keys(details?.radioMap || {}),
+      };
-    }));
+    });
+    return tableData;
+  };
 
   const setUpdatedBulkEditTableData = (
     equipmentId,
-    manualChannelNumber,
+    channel,
-    manualBackupChannelNumber,
     cellSize,
     probeResponseThreshold,
     clientDisconnectThreshold,
@@ -268,14 +234,13 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
     let minLoadFactor;
     dataSource.items.forEach(({ id: itemId, details }) => {
       if (equipmentId === itemId) {
-        Object.keys(details?.radioMap || defaultAppliedRadios).forEach((i, dataIndex) => {
+        Object.keys(details.radioMap).forEach((i, dataIndex) => {
           const frequencies = {};
           dropInSnrPercentage = snrDrop[dataIndex];
           minLoadFactor = minLoad[dataIndex];
 
           frequencies[`${i}`] = {
-            channelNumber: manualChannelNumber[dataIndex],
+            channelNumber: channel[dataIndex],
-            backupChannelNumber: manualBackupChannelNumber[dataIndex],
             rxCellSizeDb: {
               auto: true,
               value: cellSize[dataIndex],
@@ -321,41 +286,42 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
 
   const handleSaveChanges = updatedRows => {
     const editedRowsArr = [];
-    Object.keys(updatedRows).forEach(key => {
+    if (updatedRows.length > 0) {
-      const {
+      updatedRows.map(
-        id: equipmentId,
+        ({
-        manualChannelNumber,
+          id: equipmentId,
-        manualBackupChannelNumber,
+          channel,
-        cellSize,
+          cellSize,
-        probeResponseThreshold,
+          probeResponseThreshold,
-        clientDisconnectThreshold,
+          clientDisconnectThreshold,
-        snrDrop,
+          snrDrop,
-        minLoad,
+          minLoad,
-      } = updatedRows[key];
+        }) => {
-      const updatedEuips = setUpdatedBulkEditTableData(
+          const updatedEuips = setUpdatedBulkEditTableData(
-        equipmentId,
+            equipmentId,
-        manualChannelNumber,
+            channel,
-        manualBackupChannelNumber,
+            cellSize,
-        cellSize,
+            probeResponseThreshold,
-        probeResponseThreshold,
+            clientDisconnectThreshold,
-        clientDisconnectThreshold,
+            snrDrop,
-        snrDrop,
+            minLoad,
-        minLoad,
+            equipData && equipData.filterEquipment
-        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);
+        }
       );
-      const tempObj = {
+      updateEquipments(editedRowsArr);
-        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 = () => {
@@ -390,9 +356,18 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
   return (
     <BulkEditAccessPoints
       tableColumns={accessPointsChannelTableColumns}
-      tableData={setAccessPointsBulkEditTableData(equipData?.filterEquipment)}
+      tableData={
+        equipData &&
+        equipData.filterEquipment &&
+        setAccessPointsBulkEditTableData(equipData && equipData.filterEquipment)
+      }
       onLoadMore={handleLoadMore}
-      isLastPage={equipData?.filterEquipment?.context?.lastPage}
+      isLastPage={
+        equipData &&
+        equipData.filterEquipment &&
+        equipData.filterEquipment.context &&
+        equipData.filterEquipment.context.lastPage
+      }
       onSaveChanges={handleSaveChanges}
       breadcrumbPath={getBreadcrumbPath(id, locations)}
     />

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

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

app/containers/ProfileDetails/index.js

@@ -4,11 +4,11 @@ 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 { 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 { FILE_UPLOAD } from 'graphql/mutations';
-import { getItem } from 'utils/localStorage';
+import { updateQueryGetAllProfiles } from 'graphql/functions';
 
 const GET_PROFILE = gql`
   query GetProfile($id: ID!) {
@@ -23,16 +23,6 @@ const GET_PROFILE = gql`
         profileType
         details
       }
-      associatedSsidProfiles {
-        id
-        name
-        profileType
-        details
-      }
-      osuSsidProfile {
-        id
-        name
-      }
       childProfileIds
       createdTimestamp
       lastModifiedTimestamp
@@ -85,8 +75,6 @@ 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',
@@ -94,14 +82,12 @@ const ProfileDetails = () => {
 
   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',
     }
   );
 
@@ -109,20 +95,17 @@ const ProfileDetails = () => {
     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',
     }
   );
 
@@ -130,18 +113,18 @@ const ProfileDetails = () => {
     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(() => {
@@ -187,89 +170,145 @@ const ProfileDetails = () => {
       );
   };
 
-  const handleFileUpload = async (fileName, file) => {
+  const handleFileUpload = (fileName, file) =>
-    const token = getItem(AUTH_TOKEN);
+    fileUpload({ variables: { fileName, file } })
-
+      .then(() => {
-    if (apiUrl?.getApiUrl) {
+        notification.success({
-      fetch(`${apiUrl?.getApiUrl}filestore/${fileName}`, {
+          message: 'Success',
-        method: 'POST',
+          description: 'File successfully uploaded.',
-        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({
+      .catch(() =>
-        message: 'Error',
+        notification.error({
-        description: 'File could not be uploaded.',
+          message: 'Error',
+          description: 'File could not be uploaded.',
+        })
+      );
+
+  const handleFetchProfiles = e => {
+    if (ssidProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMore({
+        variables: { context: { ...ssidProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
       });
     }
+
+    return true;
   };
 
-  const handleDownloadFile = async name => {
+  const handleFetchRadiusProfiles = e => {
-    const token = getItem(AUTH_TOKEN);
+    if (radiusProfiles.getAllProfiles.context.lastPage) {
-    if (apiUrl?.getApiUrl) {
+      return false;
-      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',
+    e.persist();
-      description: 'File could not be retrieved.',
+    const { target } = e;
-    });
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreRadiusProfiles({
+        variables: { context: { ...radiusProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
   };
 
-  const handleFetchMoreProfiles = (e, key) => {
+  const handleFetchCaptiveProfiles = e => {
-    if (key === 'radius') fetchMoreProfiles(e, radiusProfiles, fetchMoreRadiusProfiles);
+    if (captiveProfiles.getAllProfiles.context.lastPage) {
-    else if (key === 'captive_portal')
+      return false;
-      fetchMoreProfiles(e, captiveProfiles, fetchMoreCaptiveProfiles);
+    }
-    else if (key === 'rf') fetchMoreProfiles(e, rfProfiles, fetchMoreRfProfiles);
+
-    else if (key === 'passpoint_venue') fetchMoreProfiles(e, venueProfiles, fetchMoreVenueProfiles);
+    e.persist();
-    else if (key === 'passpoint_operator')
+    const { target } = e;
-      fetchMoreProfiles(e, operatorProfiles, fetchMoreOperatorProfiles);
+
-    else if (key === 'passpoint_osu_id_provider')
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-      fetchMoreProfiles(e, idProviderProfiles, fetchMoreIdProviderProfiles);
+      fetchMoreCaptiveProfiles({
-    else fetchMoreProfiles(e, ssidProfiles, fetchMore);
+        variables: { context: { ...captiveProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchVenueProfiles = e => {
+    if (venueProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreVenueProfiles({
+        variables: { context: { ...venueProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchRfProfiles = e => {
+    if (rfProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreRfProfiles({
+        variables: { context: { ...rfProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchOperatorProfiles = e => {
+    if (operatorProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreOperatorProfiles({
+        variables: { context: { ...operatorProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchIdProviderProfiles = e => {
+    if (idProviderProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreIdProviderProfiles({
+        variables: { context: { ...idProviderProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
   };
 
   if (loading) {
@@ -302,11 +341,14 @@ const ProfileDetails = () => {
       venueProfiles={venueProfiles?.getAllProfiles?.items}
       operatorProfiles={operatorProfiles?.getAllProfiles?.items}
       idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
-      associatedSsidProfiles={data.getProfile?.associatedSsidProfiles}
-      osuSsidProfile={data.getProfile?.osuSsidProfile}
       fileUpload={handleFileUpload}
-      onFetchMoreProfiles={handleFetchMoreProfiles}
+      onFetchMoreProfiles={handleFetchProfiles}
-      onDownloadFile={handleDownloadFile}
+      onFetchMoreRfProfiles={handleFetchRfProfiles}
+      onFetchMoreRadiusProfiles={handleFetchRadiusProfiles}
+      onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
+      onFetchMoreVenueProfiles={handleFetchVenueProfiles}
+      onFetchMoreOperatorProfiles={handleFetchOperatorProfiles}
+      onFetchMoreIdProviderProfiles={handleFetchIdProviderProfiles}
     />
   );
 };

app/graphql/functions.js

@@ -10,21 +10,3 @@ export const updateQueryGetAllProfiles = (previousResult, { fetchMoreResult }) =
     },
   };
 };
-
-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

@@ -255,62 +255,6 @@ 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

@@ -70,9 +70,6 @@ export const FILTER_EQUIPMENT = gql`
           firmware {
             detailsJSON
           }
-          channel {
-            detailsJSON
-          }
         }
       }
       context
@@ -80,67 +77,6 @@ export const FILTER_EQUIPMENT = gql`
   }
 `;
 
-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
-      }
-    }
-  }
-`;
-
 export const FILTER_EQUIPMENT_BULK_EDIT_APS = gql`
   query FilterEquipment(
     $locationIds: [ID]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "1.0.7",
+  "version": "0.7.5",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -10,8 +10,8 @@
   "scripts": {
     "test": "jest --passWithNoTests --coverage",
     "start": "cross-env NODE_ENV=development webpack-dev-server",
-    "start:bare": "cross-env API=ttps://portal.rtl.lab.netexperience.com NODE_ENV=bare webpack-dev-server",
+    "start:bare": "cross-env API=https://wlan-graphql.qa.lab.wlan.tip.build NODE_ENV=bare webpack-dev-server",
-    "start:dev": "cross-env API=https://portal.rtl.lab.netexperience.com NODE_ENV=development webpack-dev-server",
+    "start:dev": "cross-env API=https://wlan-graphql.qa.lab.wlan.tip.build NODE_ENV=development webpack-dev-server",
     "build": "webpack --mode=production",
     "format": "prettier --write 'app/**/*{.js,.scss}'",
     "eslint-fix": "eslint --fix 'app/**/*.js'",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^1.0.10",
+    "@tip-wlan/wlan-cloud-ui-library": "^0.7.6",
     "antd": "^4.5.2",
     "apollo-upload-client": "^13.0.0",
     "clean-webpack-plugin": "^3.0.0",