Text metrics

Author: C-D-Lewis

dashboard/src/components/DeviceCard.ts

@@ -402,7 +402,9 @@ const DeviceCard = ({ device }: { device: Device }) => {
     try {
       await fetch(`http://${ip}:5959/ping`);
       fabricate.update(stateKey, true);
-    } catch (err) { /* It isn't available */ }
+    } catch (err) {
+      /* It isn't available */
+    }
   };
 
   return DeviceCardContainer()

dashboard/src/components/MetricGraph.ts

@@ -84,16 +84,20 @@ const GraphView = () => fabricate('Row')
     width: '100%',
     height: `${GRAPH_HEIGHT}px`,
   }))
-  .onUpdate((el, { metricHistory, monitorData: { minValue, maxValue } }) => {
+  .onUpdate((el, { metricHistory, monitorData: { type, minValue, maxValue } }) => {
     if (!metricHistory.length) return;
 
+    // Show no point for non-number data
+    if (type !== 'number') return;
+
     // Average into buckets
     const copy = [...metricHistory];
     const buckets = [];
     while (copy.length) {
       const points = copy.splice(0, BUCKET_SIZE);
       const avgIndex = Math.floor(points.length / 2);
       buckets.push({
+        // @ts-expect-error handled with 'type'
         value: points.reduce((acc, [, value]) => acc + value, 0) / points.length,
         timestamp: points[avgIndex][0],
         dateTime: new Date(points[avgIndex][0]).toISOString(),

dashboard/src/components/controls/MonitorControls.ts

@@ -29,19 +29,33 @@ const fetchMetric = async (state: AppState, metric: string, setProp: SetPropFunc
   );
   const { message: newHistory } = res;
 
-  // Aggregate values
-  const minValue = metric.includes('Perc')
-    ? 0
-    : newHistory.reduce(
-      (acc: number, [, value]: MetricPoint) => (value < acc ? value : acc),
-      9999999,
-    );
-  const maxValue = metric.includes('Perc')
-    ? 100
-    : newHistory.reduce(
-      (acc: number, [, value]: MetricPoint) => (value > acc ? value : acc),
-      0,
-    );
+  const type: AppState['monitorData']['type'] = Array.isArray(newHistory[0][1]) ? 'array' : 'number';
+  setProp('type', type);
+
+  let minValue;
+  let maxValue;
+
+  if (type === 'number') {
+    // Aggregate values
+    minValue = metric.includes('Perc')
+      ? 0
+      : newHistory.reduce(
+        // @ts-expect-error handled with 'type'
+        (acc: number, [, value]: MetricPoint) => (value < acc ? value : acc),
+        9999999,
+      );
+    maxValue = metric.includes('Perc')
+      ? 100
+      : newHistory.reduce(
+        // @ts-expect-error handled with 'type'
+        (acc: number, [, value]: MetricPoint) => (value > acc ? value : acc),
+        0,
+      );
+  } else if (type === 'array') {
+    // Just show the data in the maxValue label
+    [, maxValue] = newHistory.slice(-1);
+  }
+
   const minTime = shortDateTime(newHistory[0][0]);
   const maxTime = shortDateTime(newHistory[newHistory.length - 1][0]);
 

dashboard/src/constants.ts

@@ -58,6 +58,7 @@ export const INITIAL_STATE: AppState = {
     maxValue: 99999,
     minTime: 0,
     maxTime: 99999,
+    type: 'number',
   },
 };
 

dashboard/src/pages/FleetPage.ts

@@ -105,6 +105,8 @@ const FleetPage = () => {
       if (!fleet.length) return;
 
       updateLayout(el, state);
+
+      // FIXME: Each DeviceCard should load its own apps after IP tests are done
       fetchApps(state);
     }, ['fleet']);
 };

dashboard/src/types.ts

@@ -37,7 +37,7 @@ export type DataPoint = {
 };
 
 /** Raw metric point */
-export type MetricPoint = [number, number];
+export type MetricPoint = [number, number | string[]];
 
 /** monitor plugin configuration */
 export type MonitorPlugin = {
@@ -102,6 +102,7 @@ export type AppState = {
     maxValue: number;
     minTime: number;
     maxTime: number;
+    type: 'array' | 'number';
   };
 };