changed prop name spelling

2026-03-20 19:39:22 +00:00 · 2020-07-30 14:16:43 -04:00
15 changed files with 100 additions and 198 deletions
--- a/6
+++ b/6
@@ -24,11 +24,7 @@ RUN npm run build

 # production environment
 FROM nginx:stable-alpine
-RUN apk add --no-cache jq
 COPY --from=build /app/dist /usr/share/nginx/html
 COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
-COPY docker_entrypoint.sh generate_config_js.sh /
-RUN chmod +x docker_entrypoint.sh generate_config_js.sh
- 
 EXPOSE 80
-ENTRYPOINT ["/docker_entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]
--- a/app/config.js
+++ b/app/config.js
@@ -1 +0,0 @@
-window.REACT_APP_API = undefined;
--- a/app/containers/Alarms/index.js
+++ b/app/containers/Alarms/index.js
@@ -31,7 +31,6 @@ const Alarms = () => {
  const { customerId } = useContext(UserContext);
  const { loading, error, data, refetch, fetchMore } = useQuery(GET_ALL_ALARMS, {
    variables: { customerId },
-    errorPolicy: 'all',
  });

  const handleOnReload = () => {
@@ -74,10 +73,9 @@ const Alarms = () => {
    return <Loading />;
  }

-  if (error && !data?.getAllAlarms?.items) {
+  if (error) {
    return <Alert message="Error" description="Failed to load alarms." type="error" showIcon />;
  }
-
  return (
    <AlarmsPage
      data={data.getAllAlarms.items}
--- a/app/containers/Dashboard/index.js
+++ b/app/containers/Dashboard/index.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { Alert } from 'antd';
 import moment from 'moment';
 import { useQuery } from '@apollo/react-hooks';
@@ -36,164 +36,104 @@ const USER_FRIENDLY_RADIOS = {
  is5GHz: '5GHz',
 };

-const lineChartConfig = [
-  { key: 'inservicesAPs', title: 'Inservice APs (24 hours)' },
-  { key: 'clientDevices', title: 'Client Devices (24 hours)' },
-  {
-    key: 'traffic',
-    title: 'Traffic (24 hours)',
-    options: { formatter: trafficLabelFormatter, tooltipFormatter: trafficTooltipFormatter },
-  },
-];
-
 const Dashboard = () => {
-  const initialGraphTime = useRef({
-    toTime: moment()
-      .valueOf()
-      .toString(),
-    fromTime: moment()
-      .subtract(24, 'hours')
-      .valueOf()
-      .toString(),
-  });
  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 [lineChartData, setLineChartData] = useState({
-    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,
+    // refetch: metricsRefetch,
+  } = useQuery(FILTER_SYSTEM_EVENTS, {
+    variables: {
+      customerId,
+      fromTime,
+      toTime,
+      equipmentIds: [0],
+      dataTypes: ['StatusChangedEvent'],
+      limit: 1000,
    },
  });

-  const { loading: metricsLoading, error: metricsError, data: metricsData, fetchMore } = useQuery(
-    FILTER_SYSTEM_EVENTS,
-    {
-      variables: {
-        customerId,
-        fromTime: initialGraphTime.current.fromTime,
-        toTime: initialGraphTime.current.toTime,
-        equipmentIds: [0],
-        dataTypes: ['StatusChangedEvent'],
-        limit: 3000, // TODO: make get all in GraphQL
-      },
-    }
-  );
-
  const formatLineChartData = (list = []) => {
-    if (list.length) {
-      setLineChartData(prev => {
-        const inservicesAPs = [];
-        const clientDevices2dot4GHz = [];
-        const clientDevices5GHz = [];
-        const trafficBytesDownstreamData = [];
-        const trafficBytesUpstreamData = [];
+    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,
+    list.forEach(
+      ({
+        eventTimestamp,
+        details: {
+          payload: {
            details: {
-              payload: {
-                details: {
-                  equipmentInServiceCount,
-                  associatedClientsCountPerRadio: radios,
-                  trafficBytesDownstream,
-                  trafficBytesUpstream,
-                },
-              },
+              equipmentInServiceCount,
+              associatedClientsCountPerRadio: radios,
+              trafficBytesDownstream,
+              trafficBytesUpstream,
            },
-          }) => {
-            inservicesAPs.push([eventTimestamp, equipmentInServiceCount]);
-
-            let total5GHz = 0;
-            total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
-
-            clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
-            clientDevices5GHz.push([eventTimestamp, total5GHz]);
-
-            trafficBytesDownstreamData.push([eventTimestamp, trafficBytesDownstream]);
-            trafficBytesUpstreamData.push([eventTimestamp, 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]]);
+        });

-        return {
-          inservicesAPs: {
-            ...prev.inservicesAPs,
-            value: [...prev.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],
-            },
-          },
-        };
-      });
-    }
+        lineChartData.traffic.data.trafficBytesDownstream.value.push([
+          eventTimestamp,
+          trafficBytesDownstream,
+        ]);
+        lineChartData.traffic.data.trafficBytesUpstream.value.push([
+          eventTimestamp,
+          trafficBytesUpstream,
+        ]);
+      }
+    );
+
+    return {
+      ...lineChartData,
+      clientDevices: { ...lineChartData.clientDevices, data: { ...clientDevicesData } },
+    };
  };

-  useEffect(() => {
-    const interval = setInterval(() => {
-      const toTime = moment()
-        .valueOf()
-        .toString();
-      const fromTime = moment()
-        .subtract(5, 'minutes')
-        .valueOf()
-        .toString();
-      fetchMore({
-        variables: {
-          fromTime,
-          toTime,
-        },
-        updateQuery: (_, { fetchMoreResult }) => {
-          formatLineChartData(fetchMoreResult?.filterSystemEvents?.items);
-        },
-      });
-    }, 300000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  useEffect(() => {
-    formatLineChartData(metricsData?.filterSystemEvents?.items);
-  }, [metricsData]);
+  const lineChartsData = useMemo(
+    () => formatLineChartData(metricsData?.filterSystemEvents?.items),
+    [metricsData]
+  );

  const statsArr = useMemo(() => {
    const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
@@ -265,8 +205,7 @@ const Dashboard = () => {
    <DashboardPage
      statsCardDetails={statsArr}
      pieChartDetails={pieChartsData}
-      lineChartData={lineChartData}
-      lineChartConfig={lineChartConfig}
+      lineChartDetails={lineChartsData}
      lineChartLoading={metricsLoading}
      lineChartError={metricsError}
    />
--- a/app/containers/Network/containers/AccessPoints/index.js
+++ b/app/containers/Network/containers/AccessPoints/index.js
@@ -1,14 +1,11 @@
 import React, { useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
 import { useLazyQuery } from '@apollo/react-hooks';
 import { Alert } from 'antd';
-import { floor, padStart } from 'lodash';
 import { NetworkTable, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';
 import { FILTER_EQUIPMENT } from 'graphql/queries';
-
 import styles from './index.module.scss';

 const renderTableCell = tabCell => {
@@ -25,13 +22,6 @@ const renderTableCell = tabCell => {
  return tabCell;
 };

-const durationToString = duration =>
-  `${floor(duration.asDays())}d ${floor(duration.hours())}h ${padStart(
-    duration.minutes(),
-    2,
-    0
-  )}m ${padStart(duration.seconds(), 2, 0)}s`;
-
 const accessPointsTableColumns = [
  {
    title: 'NAME',
@@ -71,7 +61,7 @@ const accessPointsTableColumns = [
  {
    title: 'UP TIME',
    dataIndex: ['status', 'osPerformance', 'details', 'uptimeInSeconds'],
-    render: upTimeInSeconds => durationToString(moment.duration(upTimeInSeconds, 'seconds')),
+    render: renderTableCell,
  },
  {
    title: 'PROFILE',
@@ -84,7 +74,7 @@ const accessPointsTableColumns = [
    render: renderTableCell,
  },
  {
-    title: 'OCCUPANCY',
+    title: 'CAPACITY',
    dataIndex: ['status', 'radioUtilization', 'details', 'capacityDetails'],
    render: renderTableCell,
  },
--- a/app/containers/Network/containers/ClientDeviceDetails/index.js
+++ b/app/containers/Network/containers/ClientDeviceDetails/index.js
@@ -12,7 +12,7 @@ import UserContext from 'contexts/UserContext';
 import { GET_CLIENT_SESSION, FILTER_SERVICE_METRICS } from 'graphql/queries';

 const toTime = moment();
-const fromTime = moment().subtract(4, 'hours');
+const fromTime = moment().subtract(1, 'hour');

 const ClientDeviceDetails = () => {
  const { id } = useParams();
@@ -33,7 +33,7 @@ const ClientDeviceDetails = () => {
      toTime: toTime.valueOf().toString(),
      clientMacs: [id],
      dataTypes: ['Client'],
-      limit: 1000,
+      limit: 100,
    },
  });

@@ -73,7 +73,7 @@ const ClientDeviceDetails = () => {
      metricsData={
        metricsData && metricsData.filterServiceMetrics && metricsData.filterServiceMetrics.items
      }
-      historyDate={{ toTime, fromTime }}
+      historyDate={toTime}
    />
  );
 };
--- a/app/containers/ProfileDetails/index.js
+++ b/app/containers/ProfileDetails/index.js
@@ -77,15 +77,9 @@ const ProfileDetails = () => {
  const { loading, error, data } = useQuery(GET_PROFILE, {
    variables: { id },
  });
-
  const { data: ssidProfiles } = useQuery(GET_ALL_PROFILES, {
    variables: { customerId, type: 'ssid' },
  });
-
-  const { data: radiusProfiles } = useQuery(GET_ALL_PROFILES, {
-    variables: { customerId, type: 'radius' },
-  });
-
  const [updateProfile] = useMutation(UPDATE_PROFILE);
  const [deleteProfile] = useMutation(DELETE_PROFILE);

@@ -176,7 +170,6 @@ const ProfileDetails = () => {
      ssidProfiles={
        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
      }
-      radiusProfiles={radiusProfiles?.getAllProfiles?.items}
      fileUpload={handleFileUpload}
    />
  );
--- a/app/containers/System/containers/Firmware/index.js
+++ b/app/containers/System/containers/Firmware/index.js
@@ -237,7 +237,7 @@ const Firmware = () => {
      onCreateTrackAssignment={handleCreateTrackAssignment}
      onUpdateTrackAssignment={handleUpdateTrackAssignment}
      onDeleteTrackAssignment={handleDeleteTrackAssignment}
-      onCreateFirnware={handleCreateFirmware}
+      onCreateFirmware={handleCreateFirmware}
      onUpdateFirmware={handleUpdateFirmware}
      onDeleteFirmware={handleDeleteFirmware}
      firmwareError={error}
--- a/app/graphql/queries.js
+++ b/app/graphql/queries.js
@@ -181,7 +181,6 @@ export const FILTER_SERVICE_METRICS = gql`
        rssi
        rxBytes
        txBytes
-        detailsJSON
      }
      context {
        lastPage
--- a/app/index.html
+++ b/app/index.html
@@ -9,7 +9,6 @@

    <!-- Allow installing the app to the homescreen -->
    <meta name="mobile-web-app-capable" content="yes" />
-    <script type="text/javascript" src="/config.js"></script>
  </head>

  <body>
--- a/app/index.js
+++ b/app/index.js
@@ -18,7 +18,9 @@ import { getItem, setItem, removeItem } from 'utils/localStorage';
 import history from 'utils/history';

 const API_URI =
-  process.env.NODE_ENV === 'development' ? 'http://localhost:4000/' : window.REACT_APP_API;
+  process.env.NODE_ENV === 'development'
+    ? 'http://localhost:4000/'
+    : 'https://wlan-graphql.zone3.lab.connectus.ai/';
 const MOUNT_NODE = document.getElementById('root');

 const cache = new InMemoryCache();
--- a/docker_entrypoint.sh
+++ b/docker_entrypoint.sh
@@ -1,3 +0,0 @@
-#!/bin/sh -eu
-./generate_config_js.sh >/usr/share/nginx/html/config.js
-nginx -g "daemon off;"
--- a/generate_config_js.sh
+++ b/generate_config_js.sh
@@ -1,10 +0,0 @@
-#!/bin/sh -eu
-if [ -z "${API:-}" ]; then
-    API_URL_JSON=undefined
-else
-    API_URL_JSON=$(jq -n --arg api "$API" '$api')
-fi
- 
-cat <<EOF
-window.REACT_APP_API = $API_URL_JSON;
-EOF
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "wlan-cloud-ui",
-  "version": "0.2.7",
+  "version": "0.2.3",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1874,9 +1874,9 @@
      }
    },
    "@tip-wlan/wlan-cloud-ui-library": {
-      "version": "0.2.7",
-      "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.7.tgz",
-      "integrity": "sha1-GGCapOJxcgD36ml6ZU2j1AlzXio="
+      "version": "0.2.3",
+      "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.3.tgz",
+      "integrity": "sha1-m/aF8DLiaeGF8UDtECAabipk2P0="
    },
    "@types/anymatch": {
      "version": "1.3.1",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "wlan-cloud-ui",
-  "version": "0.2.7",
+  "version": "0.2.3",
  "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.7",
+    "@tip-wlan/wlan-cloud-ui-library": "^0.2.3",
    "antd": "^4.3.1",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",