Merge branch 'master' into feature/TW-459

2025-11-02 03:37:59 +00:00 · 2020-06-11 00:49:04 -04:00
parent 061850110a bc897206e4
commit d034d357cb
6 changed files with 181 additions and 72 deletions
--- a/app/containers/Network/containers/AccessPoints/index.js
+++ b/app/containers/Network/containers/AccessPoints/index.js
@@ -26,73 +26,61 @@ const accessPointsTableColumns = [
  {
    title: 'NAME',
    dataIndex: 'name',
-    key: 'name',
    render: renderTableCell,
  },
  {
    title: 'ALARMS',
    dataIndex: 'alarms',
-    key: 'alarms',
    render: renderTableCell,
  },
  {
    title: 'MODEL',
    dataIndex: 'model',
-    key: 'model',
    render: renderTableCell,
  },
  {
    title: 'IP',
-    dataIndex: 'ip',
-    key: 'ip',
+    dataIndex: ['status', 'protocol', 'details', 'reportedIpV4Addr'],
    render: renderTableCell,
  },
  {
    title: 'MAC',
-    dataIndex: 'macAddress',
-    key: 'mac',
+    dataIndex: ['status', 'protocol', 'details', 'reportedMacAddr'],
    render: renderTableCell,
  },
  {
    title: 'ASSET ID',
-    dataIndex: 'assetId',
-    key: 'assetId',
+    dataIndex: 'inventoryId',
    render: renderTableCell,
  },
  {
    title: 'UP TIME',
-    dataIndex: 'upTime',
-    key: 'upTime',
+    dataIndex: ['status', 'osPerformance', 'details', 'uptimeInSeconds'],
    render: renderTableCell,
  },
  {
    title: 'PROFILE',
-    dataIndex: 'profile',
-    key: 'profile',
+    dataIndex: ['profile', 'name'],
    render: renderTableCell,
  },
  {
    title: 'CHANNEL',
    dataIndex: 'channel',
-    key: 'channel',
    render: renderTableCell,
  },
  {
    title: 'CAPACITY',
-    dataIndex: 'capacity',
-    key: 'capacity',
+    dataIndex: ['status', 'radioUtilization', 'details', 'capacityDetails'],
    render: renderTableCell,
  },
  {
    title: 'NOISE FLOOR',
-    dataIndex: 'noiseFloor',
-    key: 'noiseFloor',
+    dataIndex: ['status', 'radioUtilization', 'details', 'noiseFloorDetails'],
    render: renderTableCell,
  },
  {
    title: 'DEVICES',
    dataIndex: 'devices',
-    key: 'devices',
    render: renderTableCell,
  },
 ];
@@ -103,28 +91,6 @@ const AccessPoints = ({ checkedLocations }) => {
    FILTER_EQUIPMENT
  );

-  const mapAccessPointsTableData = (dataSource = []) => {
-    return dataSource.map(
-      ({ id, name, alarms, model, inventoryId, devices, profile, channel, status }) => {
-        return {
-          key: id,
-          name,
-          alarms,
-          model,
-          ip: status.protocol.details.reportedIpV4Addr,
-          macAddress: status.protocol.details.reportedMacAddr,
-          assetId: inventoryId,
-          upTime: status.osPerformance.details.uptimeInSeconds,
-          profile: profile.name,
-          channel,
-          capacity: status.radioUtilization.details.capacityDetails,
-          noiseFloor: status.radioUtilization.details.noiseFloorDetails,
-          devices,
-        };
-      }
-    );
-  };
-
  const handleLoadMore = () => {
    if (!equipData.filterEquipment.context.lastPage) {
      fetchMore({
@@ -166,9 +132,7 @@ const AccessPoints = ({ checkedLocations }) => {
  return (
    <NetworkTable
      tableColumns={accessPointsTableColumns}
-      tableData={mapAccessPointsTableData(
-        equipData && equipData.filterEquipment && equipData.filterEquipment.items
-      )}
+      tableData={equipData && equipData.filterEquipment && equipData.filterEquipment.items}
      onLoadMore={handleLoadMore}
      isLastPage={
        equipData && equipData.filterEquipment && equipData.filterEquipment.context.lastPage
--- a/app/containers/Network/containers/ClientDeviceDetails/index.js
+++ b/app/containers/Network/containers/ClientDeviceDetails/index.js
@@ -1,9 +1,68 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useParams } from 'react-router-dom';
+import { useQuery } from '@apollo/react-hooks';
+import { Alert } from 'antd';
+import { Loading } from '@tip-wlan/wlan-cloud-ui-library';
+
+import UserContext from 'contexts/UserContext';
+import { GET_CLIENT_SESSION } from 'graphql/queries';

 const ClientDeviceDetails = () => {
  const { id } = useParams();
-  return <h1>Client Device Details: {id}</h1>;
+  const { customerId } = useContext(UserContext);
+  const { loading, error, data } = useQuery(GET_CLIENT_SESSION, {
+    variables: { customerId, macAddress: id },
+  });
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return (
+      <Alert message="Error" description="Failed to load Client Device." type="error" showIcon />
+    );
+  }
+
+  const { macAddress } = data.getClientSession[0];
+
+  /*
+  const {
+    macAddress,
+    ipAddress,
+    hostname,
+    ssid,
+    radioType,
+    signal,
+    equipment: { name },
+    details: { assocTimestamp, rxMbps, txMbps, rxRateKbps, txRateKbps, 
+      dhcpDetails: {dhcpServerIp, primaryDns, secondaryDns, gatewayIp, subnetMask, leaseTimeInSeconds, leaseStartTimestamp}
+    },
+  } = data.getClientSession[0];
+
+  assocTimestamp = Associated On
+  equipment.name = Access Point
+  radioType = Radio Band
+  signal = Signal Strength
+  rxMbps = Rx Rate
+  txMbps = Tx Rate
+
+  rxRateKbps = Rx Throughput
+  txRateKbps = Tx Throughput
+  totalRxPackets = Total Rx Packets
+  totalTxPackets = Total Tx Packets
+  
+  dhcpServerIp = DHCP Server
+  primaryDns = Primary DNS
+  secondaryDns = Secondary DNS
+  gatewayIp = Gateway
+  subnetMask = Subnet Mask
+  leaseTimeInSeconds = IP Lease Time
+  leaseStartTimestamp = IP Lease Start
+
+  */
+
+  return <h1>Client Device Details: {macAddress}</h1>;
 };

 export default ClientDeviceDetails;
--- a/app/containers/Network/containers/ClientDevices/index.js
+++ b/app/containers/Network/containers/ClientDevices/index.js
@@ -1,48 +1,81 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { NetworkTable } from '@tip-wlan/wlan-cloud-ui-library';
+import { useLazyQuery } from '@apollo/react-hooks';
+import { Alert } from 'antd';
+import { NetworkTable, Loading } from '@tip-wlan/wlan-cloud-ui-library';

-import { CLIENT_DEVICES_TABLE_DATA } from 'constants/index.js';
+import UserContext from 'contexts/UserContext';
+import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';

 const clientDevicesTableColumns = [
  {
    title: '',
    dataIndex: 'name',
-    key: 'name',
  },
  {
    title: 'MAC',
    dataIndex: 'macAddress',
-    key: 'mac',
  },
-  { title: 'OS/MODEL/MFR', dataIndex: 'osModelMfr', key: '1' },
-  { title: 'IP', dataIndex: 'ip', key: '2' },
-  { title: 'HOST NAME', dataIndex: 'hostName', key: '3' },
-  { title: 'ACCESS POINT', dataIndex: 'accessPoint', key: '4' },
-  { title: 'SSID', dataIndex: 'ssid', key: '5' },
-  { title: 'BAND', dataIndex: 'band', key: '6' },
-  { title: 'SIGNAL', dataIndex: 'signal', key: '7' },
-  { title: 'STATUS', dataIndex: 'status', key: '8' },
+  { title: 'OS/MODEL/MFR', dataIndex: 'osModelMfr' },
+  { title: 'IP', dataIndex: 'ipAddress' },
+  { title: 'HOST NAME', dataIndex: 'hostname' },
+  { title: 'ACCESS POINT', dataIndex: ['equipment', 'name'] },
+  { title: 'SSID', dataIndex: 'ssid' },
+  { title: 'BAND', dataIndex: 'radioType' },
+  { title: 'SIGNAL', dataIndex: 'signal' },
+  { title: 'STATUS', dataIndex: 'status' },
 ];

 const ClientDevices = ({ checkedLocations }) => {
-  const [devicesData, setDevicesData] = useState([]);
+  const { customerId } = useContext(UserContext);
+  const [getAllClientSessions, { loading, error, data, fetchMore }] = useLazyQuery(
+    FILTER_CLIENT_SESSIONS
+  );
+
+  const handleLoadMore = () => {
+    if (!data.getAllClientSessions.context.lastPage) {
+      fetchMore({
+        variables: { cursor: data.getAllClientSessions.context.cursor },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          const previousEntry = previousResult.getAllClientSessions;
+          const newItems = fetchMoreResult.getAllClientSessions.items;
+
+          return {
+            getAllClientSessions: {
+              context: fetchMoreResult.getAllClientSessions.context,
+              items: [...previousEntry.items, ...newItems],
+              __typename: previousEntry.__typename,
+            },
+          };
+        },
+      });
+    }
+  };

  useEffect(() => {
-    const filteredData = [];
-    if (checkedLocations.length > 0) {
-      checkedLocations.forEach(locationId => {
-        CLIENT_DEVICES_TABLE_DATA.filter(d => {
-          return d.locationId === locationId ? filteredData.push(d) : '';
-        });
-        setDevicesData(filteredData);
-      });
-    } else {
-      setDevicesData(filteredData);
-    }
+    getAllClientSessions({
+      variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
+    });
  }, [checkedLocations]);

-  return <NetworkTable tableColumns={clientDevicesTableColumns} tableData={devicesData} />;
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return (
+      <Alert message="Error" description="Failed to load client devices." type="error" showIcon />
+    );
+  }
+
+  return (
+    <NetworkTable
+      tableColumns={clientDevicesTableColumns}
+      tableData={data && data.getAllClientSessions && data.getAllClientSessions.items}
+      onLoadMore={handleLoadMore}
+      isLastPage={data && data.getAllClientSessions && data.getAllClientSessions.context.lastPage}
+    />
+  );
 };

 ClientDevices.propTypes = {
--- a/app/graphql/queries.js
+++ b/app/graphql/queries.js
@@ -74,3 +74,44 @@ export const GET_LOCATION = gql`
    }
  }
 `;
+
+export const FILTER_CLIENT_SESSIONS = gql`
+  query FilterClientSessions($customerId: Int!, $cursor: String) {
+    getAllClientSessions(customerId: $customerId, cursor: $cursor) {
+      items {
+        id
+        macAddress
+        ipAddress
+        hostname
+        ssid
+        radioType
+        signal
+        equipment {
+          name
+        }
+      }
+      context {
+        lastPage
+        cursor
+      }
+    }
+  }
+`;
+
+export const GET_CLIENT_SESSION = gql`
+  query GetClientSession($customerId: Int!, $macAddress: String!) {
+    getClientSession(customerId: $customerId, macAddress: $macAddress) {
+      id
+      macAddress
+      ipAddress
+      hostname
+      ssid
+      radioType
+      signal
+      equipment {
+        name
+      }
+      details
+    }
+  }
+`;
--- a/package-lock.json
+++ b/package-lock.json
@@ -8163,6 +8163,16 @@
      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
    },
+    "highcharts": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.1.1.tgz",
+      "integrity": "sha512-DSkI+fAqkqYDslOVLcEk8DX7W9itRIwzsdS0uVEOnVf0LF1hSKZtDINHP7ze/uBN9NdWQV9HydtiPTrkLx0lXg=="
+    },
+    "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",
--- a/package.json
+++ b/package.json
@@ -26,6 +26,8 @@
    "clean-webpack-plugin": "^3.0.0",
    "graphql": "^14.6.0",
    "graphql-tag": "^2.10.3",
+    "highcharts": "^8.1.1",
+    "highcharts-react-official": "^3.0.0",
    "history": "^4.10.1",
    "html-webpack-plugin": "^3.2.0",
    "lodash": "^4.17.15",