feat: dashboard: re-introduce status widget icon #1977

packages/dashboard/src/customization/widgets/appKitPlugin.ts

@@ -8,6 +8,7 @@ import { scatterChartPlugin } from './scatterChart/plugin';
 import { statusTimelineChartPlugin } from './status-timeline/statusTimelinePlugin';
 import { tablePlugin } from './table/plugin';
 import { getConfigValue } from '@iot-app-kit/react-components';
+import { statusPlugin } from './status/plugin';
 
 export const appKitPlugin: DashboardPlugin = {
   install: (options) => {
@@ -22,6 +23,7 @@ export const appKitPlugin: DashboardPlugin = {
     barChartPlugin.install(options);
     statusTimelineChartPlugin.install(options);
     kpiPlugin.install(options);
+    statusPlugin.install(options);
     tablePlugin.install(options);
   },
 };

packages/dashboard/src/customization/widgets/constants.ts

@@ -13,3 +13,6 @@ export const TABLE_WIDGET_INITIAL_WIDTH = 850;
 
 export const TABLE_WIDGET_MAX_HEIGHT = 520;
 export const TABLE_OVERFLOW_HEIGHT = 200;
+
+export const STATUS_WIDGET_INITIAL_HEIGHT = 200;
+export const STATUS_WIDGET_INITIAL_WIDTH = 350;

packages/dashboard/src/customization/widgets/index.ts

@@ -7,3 +7,4 @@ export * from './table/plugin';
 export * from './text/plugin';
 export * from './rectangleSymbol/plugin';
 export * from './appKitPlugin';
+export * from './status/plugin';

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;
+}

packages/dashboard/src/customization/widgets/status/component.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import pickBy from 'lodash/pickBy';
+import { Status } from '@iot-app-kit/react-components';
+import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
+import type { DashboardState } from '~/store/state';
+import type { StatusWidget } from '../types';
+import { Box } from '@cloudscape-design/components';
+import { useQueries } from '~/components/dashboard/queryContext';
+import { isDefined } from '~/util/isDefined';
+import { aggregateToString } from '~/customization/propertiesSections/aggregationSettings/helpers';
+import { getAggregation } from '../utils/widgetAggregationUtils';
+import { SiteWiseAssetQuery } from '@iot-app-kit/source-iotsitewise';
+import './component.css';
+
+const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
+  const viewport = useSelector((state: DashboardState) => state.dashboardConfiguration.viewport);
+  const dashboardSignificantDigits = useSelector((state: DashboardState) => state.significantDigits);
+
+  const {
+    styleSettings,
+    queryConfig,
+    primaryFont,
+    secondaryFont,
+    showValue,
+    showUnit,
+    showIcon,
+    showName,
+    thresholds,
+    significantDigits: widgetSignificantDigits,
+  } = widget.properties;
+
+  const { iotSiteWiseQuery } = useQueries();
+  // const query = iotSiteWiseQuery && queryConfig.query ? iotSiteWiseQuery?.timeSeriesData(queryConfig.query) : undefined;
+  const query =
+    iotSiteWiseQuery && queryConfig.query
+      ? iotSiteWiseQuery?.timeSeriesData(queryConfig.query as SiteWiseAssetQuery)
+      : undefined;
+
+  const shouldShowEmptyState = query == null || !iotSiteWiseQuery;
+  const key = computeQueryConfigKey(viewport, queryConfig);
+  const aggregation = getAggregation(widget);
+
+  if (shouldShowEmptyState) {
+    return <StatusWidgetEmptyStateComponent />;
+  }
+
+  const settings = pickBy(
+    {
+      showName,
+      showIcon,
+      showValue,
+      showUnit,
+      fontSize: primaryFont.fontSize,
+      color: primaryFont.fontColor,
+      secondaryFontSize: secondaryFont.fontSize,
+    },
+    isDefined
+  );
+
+  const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
+
+  return (
+    <Status
+      key={key}
+      query={query}
+      viewport={viewport}
+      styles={styleSettings}
+      settings={settings}
+      thresholds={thresholds}
+      aggregationType={aggregateToString(aggregation)}
+      significantDigits={significantDigits}
+    />
+  );
+};
+
+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
+        </Box>
+      </div>
+    </div>
+  );
+};
+
+export default StatusWidgetComponent;

packages/dashboard/src/customization/widgets/status/icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { default as statusSvg } from './status.svg';
+import { default as statusSvgDark } from './status-dark.svg';
+
+const StatusIcon: React.FC = () => (
+  <span>
+    <img src={statusSvg} alt='Status widget light icon' />
+    <img src={statusSvgDark} alt='Status widget dark icon' />
+  </span>
+);
+
+export default StatusIcon;

packages/dashboard/src/customization/widgets/status/plugin.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import StatusWidgetComponent from './component';
+import StatusIcon from './icon';
+import type { DashboardPlugin } from '~/customization/api';
+import type { StatusWidget } from '../types';
+import { STATUS_WIDGET_INITIAL_HEIGHT, STATUS_WIDGET_INITIAL_WIDTH } from '../constants';
+
+export const statusPlugin: DashboardPlugin = {
+  install: ({ registerWidget }) => {
+    registerWidget<StatusWidget>('status', {
+      render: (widget) => <StatusWidgetComponent {...widget} />,
+      componentLibrary: {
+        name: 'Status',
+        icon: StatusIcon,
+      },
+      properties: () => ({
+        queryConfig: {
+          source: 'iotsitewise',
+          query: undefined,
+        },
+        primaryFont: {},
+        secondaryFont: {},
+      }),
+      initialSize: {
+        height: STATUS_WIDGET_INITIAL_HEIGHT,
+        width: STATUS_WIDGET_INITIAL_WIDTH,
+      },
+    });
+  },
+};