[WIFI-10515] Crash fix when receiving corrupted statistics

Signed-off-by: Charles <charles.bourque96@gmail.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.7.0(0)",
+  "version": "2.7.0(1)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.7.0(0)",
+      "version": "2.7.0(1)",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.7.0(0)",
+  "version": "2.7.0(1)",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",

src/components/InterfaceStatistics/LatestStatisticsModal.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { CButton, CModal, CModalHeader, CModalBody, CModalTitle, CPopover } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
 import { cilX } from '@coreui/icons';
@@ -32,6 +32,17 @@ const LatestStatisticsModal = ({ show, toggle }) => {
       .catch(() => {});
   };
 
+  const latestStatsString = useMemo(() => {
+    if (latestStats) {
+      try {
+        return JSON.stringify(latestStats, null, 2);
+      } catch (e) {
+        return '';
+      }
+    }
+    return '';
+  }, [latestStats]);
+
   useEffect(() => {
     if (show) {
       getLatestStats();
@@ -52,13 +63,9 @@ const LatestStatisticsModal = ({ show, toggle }) => {
       </CModalHeader>
       <CModalBody>
         <div style={{ textAlign: 'right' }}>
-          <CopyToClipboardButton
+          <CopyToClipboardButton t={t} size="lg" content={latestStatsString} />
-            t={t}
-            size="lg"
-            content={JSON.stringify(latestStats ?? {}, null, 4)}
-          />
         </div>
-        <pre className="ignore">{JSON.stringify(latestStats, null, 2)}</pre>
+        <pre className="ignore">{latestStatsString}</pre>
       </CModalBody>
     </CModal>
   );

src/components/InterfaceStatistics/StatisticsChartList.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { CSpinner } from '@coreui/react';
+import { CSpinner, CAlert } from '@coreui/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as createUuid } from 'uuid';
 import axiosInstance from 'utils/axiosInstance';
@@ -23,8 +23,10 @@ const StatisticsChartList = ({ deviceSerialNumber, setOptions, section, time })
     memory: [],
     settings: {},
   });
+  const [error, setError] = useState(false);
 
   const transformIntoDataset = (data) => {
+    try {
       let sortedData = data.sort((a, b) => {
         if (a.recorded > b.recorded) return 1;
         if (b.recorded > a.recorded) return -1;
@@ -244,9 +246,20 @@ const StatisticsChartList = ({ deviceSerialNumber, setOptions, section, time })
         setOptions([...sectionOptions, { value: 'memory', label: t('statistics.memory') }]);
         setStatOptions({ ...newOptions });
       }
+      setError(false);
+    } catch (e) {
+      setError(true);
+    }
   };
 
   const getInterface = useCallback(() => {
+    if (error) {
+      return (
+        <CAlert color="danger" style={{ width: '240px' }}>
+          Error while parsing statistics
+        </CAlert>
+      );
+    }
     if (statOptions.interfaceList.length === 0) return <p>N/A</p>;
 
     const interfaceToShow = statOptions.interfaceList.find(
@@ -273,8 +286,9 @@ const StatisticsChartList = ({ deviceSerialNumber, setOptions, section, time })
         </div>
       );
     }
+
     return <p>N/A</p>;
-  }, [statOptions, section]);
+  }, [statOptions, section, error]);
 
   const getStatistics = () => {
     setLoading(true);

src/contexts/WebSocketProvider/utils.js

@@ -31,25 +31,3 @@ export const extractWebSocketResponse = (message) => {
   }
   return undefined;
 };
-
-export const getStatusFromNotification = (notification) => {
-  let status = 'success';
-  if (notification.content.warning?.length > 0) status = 'warning';
-  if (notification.content.error?.length > 0) status = 'error';
-
-  return status;
-};
-
-export const getNotificationDescription = (t, notification) => {
-  if (
-    notification.content.type === 'venue_configuration_update' ||
-    notification.content.type === 'entity_configuration_update'
-  ) {
-    return t('configurations.notification_details', {
-      success: notification.content.success.length,
-      warning: notification.content.warning.length,
-      error: notification.content.error.length,
-    });
-  }
-  return notification.content.details;
-};