feat(dashboard): kpi and status widget empty states

awslabs · Mar 16, 2023 · 9dea96d · 9dea96d
1 parent 7f1e113
commit 9dea96d
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 2 deletions.
diff --git a/packages/dashboard/src/customization/widgets/kpi/component.css b/packages/dashboard/src/customization/widgets/kpi/component.css
@@ -0,0 +1,14 @@
+.kpi-widget-empty-state {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.kpi-widget-empty-state-message-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  text-align: center;
+}
diff --git a/packages/dashboard/src/customization/widgets/kpi/component.tsx b/packages/dashboard/src/customization/widgets/kpi/component.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Kpi } from '@iot-app-kit/react-components';
-
 import { useDataSource } from '../../hooks/useDataSource';
 import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { Annotations, YAnnotation } from '@synchro-charts/core';
 import type { DashboardState } from '~/store/state';
 import type { KPIWidget } from '../types';
+import { Box } from '@cloudscape-design/components';
+import './component.css';
 
 const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
   const viewport = useSelector((state: DashboardState) => state.dashboardConfiguration.viewport);
@@ -30,9 +31,35 @@ const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
     colorDataAcrossThresholds: thresholdSettings?.colorAcrossThresholds,
   };
 
+  const shouldShowEmptyState = queries.length === 0 || !dataSource;
+
+  if (shouldShowEmptyState) {
+    return <KPIWidgetEmptyStateComponent />;
+  }
+
   return (
     <Kpi key={key} queries={queries} viewport={viewport} styleSettings={styleSettings} annotations={annotations} />
   );
 };
 
+const KPIWidgetEmptyStateComponent: React.FC = () => {
+  return (
+    <div className='kpi-widget-empty-state'>
+      <Box variant='strong' color='text-status-inactive' margin='s'>
+        KPI
+      </Box>
+
+      <div className='kpi-widget-empty-state-message-container'>
+        <Box variant='strong' color='text-status-inactive' margin={{ horizontal: 's' }}>
+          No properties or alarms
+        </Box>
+
+        <Box variant='p' color='text-status-inactive' margin={{ bottom: 's', horizontal: 's' }}>
+          Add a property or alarm to populate KPI chart
+        </Box>
+      </div>
+    </div>
+  );
+};
+
 export default KPIWidgetComponent;
diff --git a/packages/dashboard/src/customization/widgets/status/component.css b/packages/dashboard/src/customization/widgets/status/component.css
@@ -0,0 +1,14 @@
+.status-widget-empty-state {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.status-widget-empty-state-message-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  text-align: center;
+}
diff --git a/packages/dashboard/src/customization/widgets/status/component.tsx b/packages/dashboard/src/customization/widgets/status/component.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-
 import { StatusGrid } from '@iot-app-kit/react-components';
 import { useDataSource } from '../../hooks/useDataSource';
 import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { Annotations, YAnnotation } from '@synchro-charts/core';
 import type { DashboardState } from '~/store/state';
 import type { StatusWidget } from '../types';
+import { Box } from '@cloudscape-design/components';
+import './component.css';
 
 const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
   const viewport = useSelector((state: DashboardState) => state.dashboardConfiguration.viewport);
@@ -30,6 +31,12 @@ const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
     colorDataAcrossThresholds: thresholdSettings?.colorAcrossThresholds,
   };
 
+  const shouldShowEmptyState = !queries.length || !dataSource;
+
+  if (shouldShowEmptyState) {
+    return <StatusWidgetEmptyStateComponent />;
+  }
+
   return (
     <StatusGrid
       key={key}
@@ -41,4 +48,24 @@ const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
   );
 };
 
+const StatusWidgetEmptyStateComponent: React.FC = () => {
+  return (
+    <div className='status-widget-empty-state'>
+      <Box variant='strong' color='text-status-inactive' margin='s'>
+        Status
+      </Box>
+
+      <div className='status-widget-empty-state-message-container'>
+        <Box variant='strong' color='text-status-inactive' margin={{ horizontal: 's' }}>
+          No properties or alarms
+        </Box>
+
+        <Box variant='p' color='text-status-inactive' margin={{ bottom: 's', horizontal: 's' }}>
+          Add a property or alarm to populate status chart
+        </Box>
+      </div>
+    </div>
+  );
+};
+
 export default StatusWidgetComponent;