Merge branch 'master' into feature/TW-929

app/containers/Dashboard/index.js

@@ -1,10 +1,10 @@
-import React, { useContext } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import React, { useContext, useMemo, useState } from 'react';
 import { Alert } from 'antd';
+import moment from 'moment';
+import { useQuery } from '@apollo/react-hooks';
 import { Dashboard as DashboardPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
-
 import UserContext from 'contexts/UserContext';
-import { GET_ALL_STATUS } from 'graphql/queries';
+import { FILTER_SYSTEM_EVENTS, GET_ALL_STATUS } from 'graphql/queries';
 
 function formatBytes(bytes, decimals = 2) {
   if (bytes === 0) return '0 Bytes';
@@ -19,13 +19,179 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i] || ''}`;
 }
 
+function trafficLabelFormatter() {
+  return formatBytes(this.value);
+}
+
+function trafficTooltipFormatter() {
+  return `<span style="color:${this.color}">●</span> ${this.series.name}: <b>${formatBytes(
+    this.y
+  )}</b><br/>`;
+}
+
+const USER_FRIENDLY_RADIOS = {
+  is2dot4GHz: '2.4GHz',
+  is5GHzL: '5GHz (L)',
+  is5GHzU: '5GHz (U)',
+  is5GHz: '5GHz',
+};
+
 const Dashboard = () => {
   const { customerId } = useContext(UserContext);
   const { loading, error, data } = useQuery(GET_ALL_STATUS, {
     variables: { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] },
   });
+  const [toTime] = useState(
+    moment()
+      .valueOf()
+      .toString()
+  );
+  const [fromTime] = useState(
+    moment()
+      .subtract(24, 'hours')
+      .valueOf()
+      .toString()
+  );
 
-  const titleList = ['Access Points', 'Client Devices', 'Usage Information'];
+  const {
+    loading: metricsLoading,
+    error: metricsError,
+    data: metricsData,
+    // refetch: metricsRefetch,
+  } = useQuery(FILTER_SYSTEM_EVENTS, {
+    variables: {
+      customerId,
+      fromTime,
+      toTime,
+      equipmentIds: [0],
+      dataTypes: ['StatusChangedEvent'],
+      limit: 100,
+    },
+  });
+
+  const formatLineChartData = (list = []) => {
+    const lineChartData = {
+      inservicesAPs: {
+        title: 'Inservice APs (24 hours)',
+        data: { key: 'Inservice APs', value: [] },
+      },
+      clientDevices: { title: 'Client Devices (24 hours)' },
+      traffic: {
+        title: 'Traffic (24 hours)',
+        formatter: trafficLabelFormatter,
+        tooltipFormatter: trafficTooltipFormatter,
+        data: {
+          trafficBytesDownstream: { key: 'Down Stream', value: [] },
+          trafficBytesUpstream: { key: 'Up Stream', value: [] },
+        },
+      },
+    };
+    const clientDevicesData = {};
+
+    list.forEach(
+      ({
+        eventTimestamp,
+        details: {
+          payload: {
+            details: {
+              equipmentInServiceCount,
+              associatedClientsCountPerRadio: radios,
+              trafficBytesDownstream,
+              trafficBytesUpstream,
+            },
+          },
+        },
+      }) => {
+        lineChartData.inservicesAPs.data.value.push([eventTimestamp, equipmentInServiceCount]);
+        Object.keys(radios).forEach(key => {
+          if (!clientDevicesData[key]) {
+            clientDevicesData[key] = {
+              key: USER_FRIENDLY_RADIOS[key] || key,
+              value: [],
+            };
+          }
+          clientDevicesData[key].value.push([eventTimestamp, radios[key]]);
+        });
+
+        lineChartData.traffic.data.trafficBytesDownstream.value.push([
+          eventTimestamp,
+          trafficBytesDownstream,
+        ]);
+        lineChartData.traffic.data.trafficBytesUpstream.value.push([
+          eventTimestamp,
+          trafficBytesUpstream,
+        ]);
+      }
+    );
+
+    return {
+      ...lineChartData,
+      clientDevices: { ...lineChartData.clientDevices, data: { ...clientDevicesData } },
+    };
+  };
+
+  const lineChartsData = useMemo(
+    () => formatLineChartData(metricsData?.filterSystemEvents?.items),
+    [metricsData]
+  );
+
+  const statsArr = useMemo(() => {
+    const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
+
+    const {
+      associatedClientsCountPerRadio,
+      totalProvisionedEquipment,
+      equipmentInServiceCount,
+      equipmentWithClientsCount,
+      trafficBytesDownstream,
+      trafficBytesUpstream,
+    } = status;
+
+    const clientRadios = {};
+    let totalAssociated = 0;
+    if (associatedClientsCountPerRadio) {
+      Object.keys(associatedClientsCountPerRadio).forEach(i => {
+        if (i.includes('5GHz')) {
+          if (!clientRadios['5GHz']) {
+            clientRadios['5GHz'] = 0;
+          }
+          clientRadios['5GHz'] += associatedClientsCountPerRadio[i];
+        } else {
+          const key = USER_FRIENDLY_RADIOS[i] || i;
+          clientRadios[key] = associatedClientsCountPerRadio[i];
+        }
+        totalAssociated += associatedClientsCountPerRadio[i];
+      });
+    }
+
+    return [
+      {
+        title: 'Access Point',
+        'Total Provisioned': totalProvisionedEquipment,
+        'In Service': equipmentInServiceCount,
+        'With Clients': equipmentWithClientsCount,
+      },
+      {
+        title: 'Client Devices',
+        'Total Associated': totalAssociated,
+        ...clientRadios,
+      },
+      {
+        title: 'Usage Information',
+        'Total Traffic (US)': formatBytes(trafficBytesUpstream),
+        'Total Traffic (DS)': formatBytes(trafficBytesDownstream),
+      },
+    ];
+  }, [data]);
+
+  const pieChartsData = useMemo(() => {
+    const { clientCountPerOui, equipmentCountPerOui } = data?.getAllStatus?.items[0]?.details || {};
+
+    return [
+      { title: 'AP Vendors', ...equipmentCountPerOui },
+      { title: 'Client Vendors', ...clientCountPerOui },
+    ];
+  }, [data]);
 
   if (loading) {
     return <Loading />;
@@ -35,53 +201,15 @@ const Dashboard = () => {
     return <Alert message="Error" description="Failed to load Dashboard" type="error" showIcon />;
   }
 
-  const status =
-    data.getAllStatus.items.length > 0
-      ? data.getAllStatus.items[0]
-      : { details: {}, detailsJSON: {} };
-
-  const {
-    associatedClientsCountPerRadio,
-    totalProvisionedEquipment,
-    equipmentInServiceCount,
-    equipmentWithClientsCount,
-    trafficBytesDownstream,
-    trafficBytesUpstream,
-  } = status.detailsJSON;
-  const { clientCountPerOui, equipmentCountPerOui } = status.details;
-
-  let totalAssociated = 0;
-  if (associatedClientsCountPerRadio) {
-    Object.keys(associatedClientsCountPerRadio).forEach(i => {
-      totalAssociated += associatedClientsCountPerRadio[i];
-    });
-  }
-
-  const { is2dot4GHz, is5GHzL, is5GHzU } = associatedClientsCountPerRadio || {};
-
-  const frequencies = {
-    '2.4GHz': is2dot4GHz || 0,
-    '5GHz': parseInt((is5GHzL || 0) + (is5GHzU || 0), 10),
-  };
-
-  const statsArr = [
-    {
-      'Total Provisioned': totalProvisionedEquipment,
-      'In Service': equipmentInServiceCount,
-      'With Clients': equipmentWithClientsCount,
-    },
-    {
-      'Total Associated': totalAssociated,
-      ...frequencies,
-    },
-    {
-      'Total Traffic (US)': formatBytes(trafficBytesUpstream),
-      'Total Traffic (DS)': formatBytes(trafficBytesDownstream),
-    },
-  ];
-  const pieChartData = [equipmentCountPerOui, clientCountPerOui];
-
-  return <DashboardPage titleList={titleList} statsArr={statsArr} pieChartData={pieChartData} />;
+  return (
+    <DashboardPage
+      statsCardDetails={statsArr}
+      pieChartDetails={pieChartsData}
+      lineChartDetails={lineChartsData}
+      lineChartLoading={metricsLoading}
+      lineChartError={metricsError}
+    />
+  );
 };
 
 export default Dashboard;

app/containers/Network/index.js

@@ -198,7 +198,7 @@ const Network = () => {
   };
 
   const onCheck = checkedKeys => {
-    setCheckedLocations(checkedKeys);
+    setCheckedLocations(checkedKeys.checked);
   };
 
   const locationsTree = useMemo(

app/graphql/queries.js

@@ -287,3 +287,31 @@ export const GET_CUSTOMER = gql`
     }
   }
 `;
+
+export const FILTER_SYSTEM_EVENTS = gql`
+  query FilterSystemEvents(
+    $customerId: ID!
+    $fromTime: String!
+    $toTime: String!
+    $equipmentIds: [ID]
+    $dataTypes: [String]
+    $cursor: String
+    $limit: Int
+  ) {
+    filterSystemEvents(
+      customerId: $customerId
+      fromTime: $fromTime
+      toTime: $toTime
+      dataTypes: $dataTypes
+      equipmentIds: $equipmentIds
+      cursor: $cursor
+      limit: $limit
+    ) {
+      items
+      context {
+        lastPage
+        cursor
+      }
+    }
+  }
+`;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1874,9 +1874,9 @@
       }
     },
     "@tip-wlan/wlan-cloud-ui-library": {
-      "version": "0.2.0",
-      "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-0.2.0.tgz",
-      "integrity": "sha1-Pth6gnl6Cz51flPuD1OpaOhu/Lw="
+      "version": "0.2.1",
+      "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-0.2.1.tgz",
+      "integrity": "sha1-erMcjUClH8GattvLkFOnhN72kpA="
     },
     "@types/anymatch": {
       "version": "1.3.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "author": "ConnectUs",
   "description": "React Portal",
   "engines": {
@@ -20,7 +20,7 @@
     "@ant-design/icons": "^4.2.1",
     "@apollo/react-hoc": "^3.1.4",
     "@apollo/react-hooks": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^0.2.0",
+    "@tip-wlan/wlan-cloud-ui-library": "^0.2.1",
     "antd": "^4.3.1",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",