updated accesspoint table

2025-11-02 03:37:59 +00:00 · 2020-05-20 12:09:43 -04:00
parent 85829a6708
commit 4dd36efcbe
4 changed files with 168 additions and 146 deletions
--- a/app/constants/index.js
+++ b/app/constants/index.js
@@ -1,116 +1,8 @@
-import React from 'react';
-
 export const AUTH_TOKEN = 'tip-auth-token';
 export const COMPANY = 'Telecom Infra Project';
+export const IS_RADIO_TYPE_5GHZ = 'is5GHz';
+export const IS_RADIO_TYPE_2DOT4GHZ = 'is2dot4GHz';

-export const ACCESS_POINTS_TABLE_CLOUMNS = [
-  {
-    title: 'NAME',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: 'ALARMS',
-    dataIndex: 'alarms',
-    key: 'alarms',
-  },
-  { title: 'MODEL', dataIndex: 'model', key: 'model' },
-  { title: 'IP', dataIndex: 'ip', key: 'ip' },
-  { title: 'MAC', dataIndex: 'mac', key: 'mac' },
-  { title: 'ASSET ID', dataIndex: 'assetId', key: 'assetId' },
-  { title: 'UP TIME', dataIndex: 'upTime', key: 'upTime' },
-  { title: 'PROFILE', dataIndex: 'profile', key: 'profile' },
-  {
-    title: 'CHANNEL',
-    dataIndex: 'channel',
-    key: 'channel',
-    render: channel => {
-      return (
-        <div
-          className="channelRow"
-          style={{ display: 'flex', flexDirection: 'column', padding: '0 30px' }}
-        >
-          <span>{channel && channel.is2dot4GHz ? channel.is2dot4GHz : 'null'}</span>
-          <span style={{ color: 'darkgray' }}>
-            {channel && channel.is5GHz ? channel.is5GHz : 'null'}
-          </span>
-        </div>
-      );
-    },
-  },
-  { title: 'CAPACITY', dataIndex: 'capacity', key: 'capacity' },
-  {
-    title: 'NOISE FLOOR',
-    dataIndex: 'noiseFloor',
-    key: 'noiseFloor',
-    render: noiseFloor => {
-      return (
-        <div
-          className="noiseFloorRow"
-          style={{ display: 'flex', flexDirection: 'column', padding: '0 30px' }}
-        >
-          <span>{noiseFloor && noiseFloor.is2dot4GHz ? noiseFloor.is2dot4GHz : 'null'}</span>
-          <span>{noiseFloor && noiseFloor.is5GHz ? noiseFloor.is5GHz : 'null'}</span>
-        </div>
-      );
-    },
-  },
-  {
-    title: 'DEVICES',
-    dataIndex: 'devices',
-    key: 'devices',
-  },
-];
-export const ACCESS_POINTS_TABLE_DATA = [
-  {
-    key: 0,
-    name: 'AP100',
-    alarms: 0,
-    model: 'AP20-US',
-    ip: '192.168.0.1',
-    mac: '74:9C:E3:02:91:6F',
-    assetId: 'A1B2C3D4',
-    upTime: '39h 41m 25s',
-    profile: 'Default',
-    channel: '0 0 0',
-    capacity: '1 44 44',
-    noiseFloor: '-80 -93 -93',
-    devices: [0, 0, 0],
-    locationId: 4,
-  },
-  {
-    key: 1,
-    name: 'AP100',
-    alarms: 1,
-    model: 'AP20-US',
-    ip: '192.168.0.1',
-    mac: '74:9C:E3:02:91:6F',
-    assetId: 'A1B2C3D4',
-    upTime: '39h 41m 25s',
-    profile: 'Default',
-    channel: '0 0 0',
-    capacity: '1 44 44',
-    noiseFloor: '-80 -93 -93',
-    devices: '0 0 0',
-    locationId: 5,
-  },
-  {
-    key: 2,
-    name: 'AP100',
-    alarms: 2,
-    model: 'AP20-US',
-    ip: '192.168.0.1',
-    mac: '74:9C:E3:02:91:6F',
-    assetId: 'A1B2C3D4',
-    upTime: '39h 41m 25s',
-    profile: 'Default',
-    channel: '0 0 0',
-    capacity: '1 44 44',
-    noiseFloor: '-80 -93 -93',
-    devices: '0 0 0',
-    locationId: 6,
-  },
-];
 export const CLIENT_DEVICES_TABLE_CLOUMNS = [
  {
    title: '',
--- a/app/containers/App/index.js
+++ b/app/containers/App/index.js
@@ -9,7 +9,7 @@ import logoMobile from 'images/tip-logo-mobile.png';

 import { AUTH_TOKEN, COMPANY } from 'constants/index';
 import Login from 'containers/Login';
-import ClientDevices from 'containers/ClientDevices';
+import Network from 'containers/Network';
 import Profiles from 'containers/Profiles';
 import Alarms from 'containers/Alarms';
 import EditAccount from 'containers/EditAccount';
@@ -66,7 +66,7 @@ const App = () => {
          <UnauthenticatedRoute exact path="/login" component={Login} />
          <ProtectedRouteWithLayout exact path="/" component={RedirectToDashboard} />
          <ProtectedRouteWithLayout exact path="/dashboard" component={Dashboard} />
-          <ProtectedRouteWithLayout path="/network" component={ClientDevices} />
+          <ProtectedRouteWithLayout path="/network" component={Network} />
          <ProtectedRouteWithLayout exact path="/profiles" component={Profiles} />
          <ProtectedRouteWithLayout exact path="/alarms" component={Alarms} />
          <ProtectedRouteWithLayout exact path="/account/edit" component={EditAccount} />
--- a/app/containers/ClientDevices/index.js
+++ b/app/containers/ClientDevices/index.js
@@ -1,29 +1,148 @@
 import React, { useEffect, useContext, useState } from 'react';
-import { ClientDevices as ClientDevicesPage } from '@tip-wlan/wlan-cloud-ui-library';
-import { useQuery } from '@apollo/react-hooks';
+import { useLocation } from 'react-router-dom';
+
+import {
+  Network as NetworkPage,
+  ClientDevicesTable,
+  AccessPointsTable,
+} from '@tip-wlan/wlan-cloud-ui-library';
+import { useQuery, useLazyQuery } from '@apollo/react-hooks';
 import { notification, Spin } from 'antd';
 import _ from 'lodash';
 import UserContext from 'contexts/UserContext';
 import {
-  ACCESS_POINTS_TABLE_CLOUMNS as accessPointsTableColumns,
  CLIENT_DEVICES_TABLE_CLOUMNS as clientDevicesTableColumns,
  CLIENT_DEVICES_TABLE_DATA,
-} from 'constants/index';
+  IS_RADIO_TYPE_5GHZ,
+  IS_RADIO_TYPE_2DOT4GHZ,
+} from 'constants/index.js';
 import { GET_ALL_LOCATIONS, FILTER_EQUIPMENT } from 'graphql/queries';
 import styles from './index.module.scss';

-const IS_RADIO_TYPE_5GHZ = 'is5GHz';
-const IS_RADIO_TYPE_2DOT4GHZ = 'is2dot4GHz';
+const accessPointsTableColumns = [
+  {
+    title: 'NAME',
+    dataIndex: 'name',
+    key: 'name',
+    render: name => {
+      return <span>{name || 'null'}</span>;
+    },
+  },
+  {
+    title: 'ALARMS',
+    dataIndex: 'alarms',
+    key: 'alarms',
+    render: alarms => {
+      return <span>{alarms || 'null'}</span>;
+    },
+  },
+  {
+    title: 'MODEL',
+    dataIndex: 'model',
+    key: 'model',
+    render: model => {
+      return <span>{model || 'null'}</span>;
+    },
+  },
+  {
+    title: 'IP',
+    dataIndex: 'ip',
+    key: 'ip',
+    render: ip => {
+      return <span>{ip || 'null'}</span>;
+    },
+  },
+  {
+    title: 'MAC',
+    dataIndex: 'mac',
+    key: 'mac',
+    render: mac => {
+      return <span>{mac || 'null'}</span>;
+    },
+  },
+  {
+    title: 'ASSET ID',
+    dataIndex: 'assetId',
+    key: 'assetId',
+    render: assetId => {
+      return <span>{assetId || 'null'}</span>;
+    },
+  },
+  {
+    title: 'UP TIME',
+    dataIndex: 'upTime',
+    key: 'upTime',
+    render: alarms => {
+      return <span>{alarms || 'null'}</span>;
+    },
+  },
+  {
+    title: 'PROFILE',
+    dataIndex: 'profile',
+    key: 'profile',
+    render: profile => {
+      return <span>{profile || 'null'}</span>;
+    },
+  },
+  {
+    title: 'CHANNEL',
+    dataIndex: 'channel',
+    key: 'channel',
+    render: channel => {
+      return (
+        <div className={styles.tabColumn}>
+          <span>{channel && channel.is2dot4GHz ? channel.is2dot4GHz : 'null'}</span>
+          <span style={{ color: 'darkgray' }}>
+            {channel && channel.is5GHz ? channel.is5GHz : 'null'}
+          </span>
+        </div>
+      );
+    },
+  },
+  {
+    title: 'CAPACITY',
+    dataIndex: 'capacity',
+    key: 'capacity',
+    render: capacity => {
+      return <span>{capacity || 'null'}</span>;
+    },
+  },
+  {
+    title: 'NOISE FLOOR',
+    dataIndex: 'noiseFloor',
+    key: 'noiseFloor',
+    render: noiseFloor => {
+      return (
+        <div className={styles.tabColumn}>
+          <span>{noiseFloor && noiseFloor.is2dot4GHz ? noiseFloor.is2dot4GHz : 'null'}</span>
+          <span>{noiseFloor && noiseFloor.is5GHz ? noiseFloor.is5GHz : 'null'}</span>
+        </div>
+      );
+    },
+  },
+  {
+    title: 'DEVICES',
+    dataIndex: 'devices',
+    key: 'devices',
+    render: devices => {
+      return <span>{devices || 'null'}</span>;
+    },
+  },
+];

-const ClientDevices = () => {
+const Network = () => {
  const { customerId } = useContext(UserContext);
-  const { loading, error, data, client } = useQuery(GET_ALL_LOCATIONS, {
+  const location = useLocation();
+
+  const { loading, error, data } = useQuery(GET_ALL_LOCATIONS, {
    variables: { customerId },
  });
+  const [filterEquipment, { loading: isEquipLoading, data: equipData }] = useLazyQuery(
+    FILTER_EQUIPMENT
+  );
  const [activeTab, setActiveTab] = useState('cd');
  const [locationsTree, setLocationsTree] = useState([]);
  const [checkedLocations, setCheckedLocations] = useState([]);
-  const [tableColums, setTableColumns] = useState(clientDevicesTableColumns);
  const [devicesData, setDevicesData] = useState([]);
  const [selected, setSelected] = useState(false);

@@ -96,16 +215,16 @@ const ClientDevices = () => {

        return {
          key: ap.id,
-          name: ap.name !== undefined ? ap.name : 'null',
-          alarms: ap.alarms !== undefined ? ap.alarms : 'null',
-          model: ap.model !== undefined ? ap.model : 'null',
-          ip: ap.ip !== undefined ? ap.ip : 'null',
-          mac: ap.mac !== undefined ? ap.mac : 'null',
+          name: ap.name,
+          alarms: ap.alarms,
+          model: ap.model,
+          ip: ap.ip,
+          mac: ap.mac,
          assetId: ap.inventoryId,
-          upTime: ap.uptime !== undefined ? ap.uptime : 'null',
+          upTime: ap.uptime,
          profile: ap.profileId,
-          capacity: ap.capacity !== undefined ? ap.capacity : 'null',
-          devices: ap.devices !== undefined ? ap.devices : 'null',
+          capacity: ap.capacity,
+          devices: ap.devices,
          channel: radioChannelDetails,
          noiseFloor: radioNoiseFloorDetails,
        };
@@ -114,14 +233,16 @@ const ClientDevices = () => {
  };

  const fetchFilterEquipment = async () => {
-    const ap = await client.query({
-      query: FILTER_EQUIPMENT,
+    filterEquipment({
      variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
    });
-    const accessPointsData = setAccessPointsTableData(ap.data && ap.data.filterEquipment);
-    setDevicesData(accessPointsData);
  };

+  useEffect(() => {
+    const { pathname } = location;
+    return pathname === '/network/access-points' ? setActiveTab('ap') : setActiveTab('cd');
+  }, [location]);
+
  useEffect(() => {
    if (data && data.getAllLocations) {
      const unflattenData = formatLocationListForTree(data && data.getAllLocations);
@@ -146,7 +267,6 @@ const ClientDevices = () => {
    } else {
      fetchFilterEquipment();
    }
-    setTableColumns(activeTab === 'cd' ? clientDevicesTableColumns : accessPointsTableColumns);
  }, [checkedLocations, activeTab]);

  const onSelect = () => {
@@ -157,11 +277,7 @@ const ClientDevices = () => {
    setCheckedLocations(checkedKeys);
  };

-  const onToggle = e => {
-    setActiveTab(e.target.id);
-  };
-
-  if (loading) {
+  if (loading || isEquipLoading) {
    return <Spin size="large" className={styles.spinner} />;
  }

@@ -171,19 +287,28 @@ const ClientDevices = () => {
      description: 'Failed to load Locations',
    });
  }
-
  return (
-    <ClientDevicesPage
+    <NetworkPage
      onSelect={onSelect}
      onCheck={onCheck}
-      tableColumns={tableColums}
-      tableData={devicesData}
      checkedLocations={checkedLocations}
      locations={locationsTree}
-      onToggle={onToggle}
      activeTab={activeTab}
-    />
+    >
+      {activeTab === 'cd' ? (
+        <ClientDevicesTable tableColumns={clientDevicesTableColumns} tableData={devicesData} />
+      ) : (
+        <AccessPointsTable
+          tableColumns={accessPointsTableColumns}
+          tableData={
+            equipData && equipData.filterEquipment
+              ? setAccessPointsTableData(equipData && equipData.filterEquipment)
+              : []
+          }
+        />
+      )}
+    </NetworkPage>
  );
 };

-export default ClientDevices;
+export default Network;
--- a/app/containers/ClientDevices/index.module.scss
+++ b/app/containers/ClientDevices/index.module.scss
@@ -4,3 +4,8 @@
  align-items: center;
  height: 100vh;
 }
+.tabColumn {
+  display: flex;
+  flex-direction: column;
+  padding: 0 30px;
+}