chore(alarms): clean up gauge and KPI states

awslabs · Oct 3, 2024 · 45e9b2f · 45e9b2f
1 parent 79e41aa
commit 45e9b2f
Show file tree

Hide file tree

Showing 14 changed files with 353 additions and 138 deletions.
diff --git a/...ts/e2e/tests/kpi/kpi.spec.ts-snapshots/kpi-default-settings-chromium-darwin.png b/...ts/e2e/tests/kpi/kpi.spec.ts-snapshots/kpi-default-settings-chromium-darwin.png
diff --git a/...nts/e2e/tests/kpi/kpi.spec.ts-snapshots/kpi-default-settings-chromium-linux.png b/...nts/e2e/tests/kpi/kpi.spec.ts-snapshots/kpi-default-settings-chromium-linux.png
diff --git a/packages/react-components/src/components/alarm-state/alarm-state-text.tsx b/packages/react-components/src/components/alarm-state/alarm-state-text.tsx
@@ -11,14 +11,20 @@ import {
 
 import './alarm-state-text.css';
 import { PascalCaseStateName } from '../../hooks/useAlarms/transformers';
+import { AlarmDataStatus } from '../../hooks/useAlarms';
+import { Spinner } from '@cloudscape-design/components';
 
 type AlarmStateTextOptions = {
   state?: PascalCaseStateName;
+  status?: AlarmDataStatus;
+  isLoading?: boolean;
   inheritFontColor?: boolean;
 };
 
 export const AlarmStateText = ({
   state,
+  status,
+  isLoading,
   inheritFontColor,
 }: AlarmStateTextOptions) => {
   let icon = null;
@@ -30,6 +36,13 @@ export const AlarmStateText = ({
 
   let borderBottom = '1px dashed ';
 
+  // checking if the gauge value is loading, so we dont show the alarm loading spinner
+  if (isLoading || !state) return null;
+
+  if (status?.isLoading) {
+    return <Spinner />;
+  }
+
   switch (state) {
     case 'Active':
       icon = (

diff --git a/packages/react-components/src/components/gauge/converters/convertSeries.ts b/packages/react-components/src/components/gauge/converters/convertSeries.ts
@@ -30,7 +30,7 @@ export const convertSeries = ({
     : null;
 
   const getFormatterValue = (value: number) => {
-    if (!value) return '-';
+    if (!value) return undefined;
     return `{value|${getPreciseValue(value, significantDigits)}} ${
       settings?.showUnit && unit ? '{unit| ' + unit + '}' : ''
     }`;

diff --git a/packages/react-components/src/components/gauge/gauge.tsx b/packages/react-components/src/components/gauge/gauge.tsx
@@ -85,8 +85,7 @@ export const Gauge = ({
   const streamToUse = [propertyStream, alarmStream].find(Boolean) as DataStream;
   const name = streamToUse?.name;
   const unit = streamToUse?.unit;
-  const isLoading =
-    streamToUse?.isLoading || transformedAlarm?.status.isLoading || false;
+  const isLoading = streamToUse?.isLoading || false;
   const error = transformedAlarm?.status.isError
     ? CHART_ALARM_ERROR
     : streamToUse?.error;
@@ -104,6 +103,7 @@ export const Gauge = ({
   return (
     <GaugeBase
       alarmState={transformedAlarm?.state}
+      alarmStatus={transformedAlarm?.status}
       size={size}
       propertyPoint={propertyPoint}
       name={name}

diff --git a/packages/react-components/src/components/gauge/gaugeBase.tsx b/packages/react-components/src/components/gauge/gaugeBase.tsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/default
 import React from 'react';
-import { useECharts, useLoadableEChart } from '../../hooks/useECharts';
+import { useECharts } from '../../hooks/useECharts';
 import { GaugeBaseProperties } from './types';
 import { useGaugeConfiguration } from './hooks/useGaugeConfiguration';
 import { useResizableGauge } from './hooks/useResizableGauge';
@@ -32,6 +32,7 @@ export const GaugeBase: React.FC<GaugeBaseProperties> = ({
   significantDigits,
   error,
   alarmState,
+  alarmStatus,
   ...options
 }) => {
   const gaugeValue = propertyPoint?.y;
@@ -40,13 +41,9 @@ export const GaugeBase: React.FC<GaugeBaseProperties> = ({
   // Setup instance of echarts
   const { ref, chartRef } = useECharts(options?.theme);
 
-  // apply loading animation to echart instance
-  useLoadableEChart(chartRef, isLoading);
-
   useGaugeConfiguration(
     chartRef,
     {
-      isLoading,
       thresholds: thresholds,
       gaugeValue: gaugeValue,
       name,
@@ -77,23 +74,23 @@ export const GaugeBase: React.FC<GaugeBaseProperties> = ({
           height: size?.height,
         }}
       />
-      {!isLoading && (
-        <GaugeText
-          valueColor={thresholdsToColor({
-            gaugeValue,
-            thresholds,
-            defaultColor: settings?.color,
-          })}
-          unit={unit}
-          error={error}
-          settings={settings}
-          name={name}
-          quality={quality}
-          value={gaugeValue}
-          alarmState={alarmState}
-          significantDigits={significantDigits}
-        />
-      )}
+      <GaugeText
+        valueColor={thresholdsToColor({
+          gaugeValue,
+          thresholds,
+          defaultColor: settings?.color,
+        })}
+        isLoading={isLoading}
+        alarmStatus={alarmStatus}
+        unit={unit}
+        error={error}
+        settings={settings}
+        name={name}
+        quality={quality}
+        value={gaugeValue}
+        alarmState={alarmState}
+        significantDigits={significantDigits}
+      />
     </div>
   );
 };
diff --git a/packages/react-components/src/components/gauge/gaugeText.tsx b/packages/react-components/src/components/gauge/gaugeText.tsx
@@ -12,6 +12,8 @@ import { PascalCaseStateName } from '../../hooks/useAlarms/transformers';
 import { getPreciseValue } from '../../utils/getPreciseValue';
 import { Primitive } from '@iot-app-kit/core';
 import { GaugeErrorText } from './gaugeErrorText';
+import { AlarmDataStatus } from '../../hooks/useAlarms';
+import { Spinner } from '@cloudscape-design/components';
 
 const getFormattedValue = ({
   value,
@@ -21,6 +23,7 @@ const getFormattedValue = ({
   fontSize,
   unitFontSize,
   showUnit,
+  isLoading,
 }: {
   value?: Primitive;
   valueColor?: string;
@@ -29,8 +32,11 @@ const getFormattedValue = ({
   fontSize?: number;
   unitFontSize?: number;
   showUnit?: boolean;
+  isLoading?: boolean;
 }) => {
-  if (!value) return '-';
+  if (!value) return null;
+
+  if (isLoading) return <Spinner data-testid='loading' />;
 
   return (
     <div
@@ -55,10 +61,12 @@ export const GaugeText = ({
   value,
   unit,
   alarmState,
+  alarmStatus,
   valueColor,
   significantDigits,
   settings,
   error,
+  isLoading,
 }: {
   value?: Primitive;
   error?: string;
@@ -67,6 +75,7 @@ export const GaugeText = ({
   unit?: string;
   valueColor?: string;
   alarmState?: PascalCaseStateName;
+  alarmStatus?: AlarmDataStatus;
   settings?: GaugeSettings;
   significantDigits?: number;
   isLoading?: boolean;
@@ -84,18 +93,28 @@ export const GaugeText = ({
         }}
       >
         <GaugeErrorText error={error} />
-        {alarmState && <AlarmStateText state={alarmState} />}
-        {getFormattedValue({
-          value,
-          unit,
-          valueColor,
-          fontSize: settings?.fontSize,
-          unitFontSize: settings?.unitFontSize,
-          showUnit: settings?.showUnit,
-          significantDigits,
-        })}
-        {hasVisibleName && <div className='gauge-property-name'>{name}</div>}
-        {hasVisibleQuality && <DataQualityText quality={quality} />}
+        <AlarmStateText
+          status={alarmStatus}
+          state={alarmState}
+          isLoading={isLoading}
+        />
+        {!error &&
+          getFormattedValue({
+            value,
+            unit,
+            valueColor,
+            fontSize: settings?.fontSize,
+            unitFontSize: settings?.unitFontSize,
+            showUnit: settings?.showUnit,
+            significantDigits,
+            isLoading: isLoading,
+          })}
+        {!isLoading && hasVisibleName && (
+          <div className='gauge-property-name'>{name}</div>
+        )}
+        {!isLoading && hasVisibleQuality && (
+          <DataQualityText quality={quality} />
+        )}
       </div>
     </div>
   );

diff --git a/packages/react-components/src/components/gauge/types.ts b/packages/react-components/src/components/gauge/types.ts
@@ -7,6 +7,7 @@ import {
 import type { WidgetSettings } from '../../common/dataTypes';
 import type { ComponentQuery } from '../../common/chartTypes';
 import { PascalCaseStateName } from '../../hooks/useAlarms/transformers';
+import { AlarmDataStatus } from '../../hooks/useAlarms';
 
 export type GaugeProps = {
   size?: { width: number; height: number };
@@ -26,6 +27,7 @@ export type GaugeBaseProperties = WidgetSettings &
   > & {
     isLoading?: boolean;
     alarmState?: PascalCaseStateName;
+    alarmStatus?: AlarmDataStatus;
   };
 export type GaugeSettings = {
   gaugeThickness?: number;

diff --git a/packages/react-components/src/components/kpi/kpi.tsx b/packages/react-components/src/components/kpi/kpi.tsx
@@ -103,8 +103,7 @@ export const KPI = ({
   const name = propertyStream?.name;
   const unit = propertyStream?.unit;
   const backgroundColor = settings?.color || settings?.backgroundColor;
-  const isLoading =
-    propertyStream?.isLoading || transformedAlarm?.status.isLoading || false;
+  const isLoading = propertyStream?.isLoading || false;
   const error = transformedAlarm?.status.isError
     ? CHART_ALARM_ERROR
     : propertyStream?.error;
@@ -113,6 +112,7 @@ export const KPI = ({
     <KpiBase
       propertyPoint={propertyPoint}
       alarmState={transformedAlarm?.state}
+      alarmStatus={transformedAlarm?.status}
       settings={{ ...settings, backgroundColor }}
       propertyThreshold={propertyThreshold}
       aggregationType={dataStreams[0]?.aggregationType}