fix(dashboard): fix table item creation

awslabs · Sep 29, 2023 · 1c406b6 · 1c406b6
1 parent 71bebef
commit 1c406b6
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 134 deletions.
diff --git a/...or/iotSiteWiseQueryEditor/modeledDataStreamQueryEditor/assetExplorer/useAsset/useAsset.ts b/...or/iotSiteWiseQueryEditor/modeledDataStreamQueryEditor/assetExplorer/useAsset/useAsset.ts
@@ -31,7 +31,7 @@ function isEnabled(assetId: string | undefined): assetId is string {
   return Boolean(assetId);
 }
 
-function createQueryFn(client: IoTSiteWiseClient) {
+export function createQueryFn(client: IoTSiteWiseClient) {
   return async function ({
     queryKey: [{ assetId }],
     signal,

diff --git a/...ages/dashboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/index.tsx b/...ages/dashboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/index.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 import { PropertiesSection } from '~/customization/propertiesSectionComponent';
 import { LineScatterChartWidget, QueryWidget, TableWidget } from '~/customization/widgets/types';
 import { DashboardWidget } from '~/types';
-import { maybeWithDefault } from '~/util/maybe';
-import { GeneralPropertiesAlarmsSection, TablePropertiesAlarmsSection } from './section';
+import { GeneralPropertiesAlarmsSection } from './section';
 import { StyledPropertiesAlarmsSection } from './styledSection';
 
 // exclude table because it is handled specially
@@ -57,19 +56,14 @@ export const PropertiesAndAlarmsSettingsConfiguration: React.FC = () => (
           (properties) => properties.styleSettings,
           (properties, updatedStyleSettings) => ({ ...properties, styleSettings: updatedStyleSettings })
         );
-        const [items, updateItems] = useProperty(
-          (properties) => properties.items,
-          (properties, updatedItems) => ({ ...properties, items: updatedItems })
-        );
 
         return (
-          <TablePropertiesAlarmsSection
-            items={maybeWithDefault([], items)}
-            updateItems={updateItems}
+          <GeneralPropertiesAlarmsSection
             queryConfig={queryConfig}
             updateQueryConfig={updateQueryConfig}
             styleSettings={styleSettings}
             updateStyleSettings={updateStyleSettings}
+            colorable={false}
           />
         );
       }}

diff --git a/...es/dashboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/section.tsx b/...es/dashboard/src/customization/propertiesSections/propertiesAndAlarmsSettings/section.tsx
@@ -1,11 +1,8 @@
 import React, { FC } from 'react';
 import { useAssetDescriptionMapQuery } from '~/hooks/useAssetDescriptionQueries';
 import { PropertyComponent } from './propertyComponent';
-import type { TableItemRef } from '@iot-app-kit/react-components';
-import { TableItem } from '@iot-app-kit/react-components';
 import { isJust } from '~/util/maybe';
 import { SelectOneWidget } from '../shared/selectOneWidget';
-import { toId } from '@iot-app-kit/source-iotsitewise';
 import SpaceBetween from '@cloudscape-design/components/space-between';
 import Box from '@cloudscape-design/components/box';
 import { PropertiesAlarmsSectionProps } from './sectionTypes';
@@ -14,10 +11,6 @@ import { IoTSiteWiseDataStreamQuery } from '~/types';
 
 const NoComponents = () => <Box variant='p'>No properties or alarms found</Box>;
 
-function isTableItemRef(value: TableItem[string]): value is TableItemRef {
-  return typeof value === 'object' && value?.$cellRef !== undefined;
-}
-
 export const GeneralPropertiesAlarmsSection: FC<PropertiesAlarmsSectionProps> = ({
   onDeleteAssetQuery = defaultOnDeleteQuery,
   queryConfig,
@@ -97,29 +90,27 @@ export const GeneralPropertiesAlarmsSection: FC<PropertiesAlarmsSectionProps> =
       ) ?? [];
 
     const unmodeled =
-      siteWiseAssetQuery?.properties?.map(({ propertyAlias, refId = propertyAlias }) =>
-        describedAssetsMap[propertyAlias] ? (
-          <PropertyComponent
-            key={propertyAlias}
-            propertyId={propertyAlias}
-            refId={refId}
-            assetSummary={describedAssetsMap[propertyAlias]}
-            styleSettings={styleSettingsValue}
-            onDeleteAssetQuery={onDeleteAssetQuery({
-              siteWiseAssetQuery: siteWiseAssetQuery,
-              assetId: '',
-              propertyId: propertyAlias,
-              updateSiteWiseAssetQuery,
-            })}
-            onUpdatePropertyColor={onUpdatePropertyColor(refId)}
-            colorable={colorable}
-          />
-        ) : null
-      ) ?? [];
+      siteWiseAssetQuery?.properties?.map(({ propertyAlias, refId = propertyAlias }) => (
+        <PropertyComponent
+          key={propertyAlias}
+          propertyId={propertyAlias}
+          refId={refId}
+          assetSummary={{ assetId: '', assetName: '', properties: [], alarms: [] }}
+          styleSettings={styleSettingsValue}
+          onDeleteAssetQuery={onDeleteAssetQuery({
+            siteWiseAssetQuery: siteWiseAssetQuery,
+            assetId: '',
+            propertyId: propertyAlias,
+            updateSiteWiseAssetQuery,
+          })}
+          onUpdatePropertyColor={onUpdatePropertyColor(refId)}
+          colorable={colorable}
+        />
+      )) ?? [];
 
     const components = [...modeled, ...unmodeled];
 
-    return components.length ? modeled : <NoComponents />;
+    return components.length ? components : <NoComponents />;
   };
 
   return (
@@ -128,39 +119,3 @@ export const GeneralPropertiesAlarmsSection: FC<PropertiesAlarmsSectionProps> =
     </SpaceBetween>
   );
 };
-type TablePropertiesAlarmsSectionProps = PropertiesAlarmsSectionProps & {
-  items: TableItem[] | undefined;
-  updateItems: (newValue: TableItem[] | undefined) => void;
-};
-export const TablePropertiesAlarmsSection: FC<TablePropertiesAlarmsSectionProps> = ({
-  items,
-  updateItems,
-  ...otherProps
-}) => {
-  const deleteQuery: PropertiesAlarmsSectionProps['onDeleteAssetQuery'] =
-    ({ assetId, propertyId, siteWiseAssetQuery, updateSiteWiseAssetQuery }) =>
-    () => {
-      const assets =
-        siteWiseAssetQuery?.assets
-          ?.map((asset) => {
-            if (assetId === asset.assetId) {
-              const { properties } = asset;
-              return {
-                assetId,
-                properties: properties.filter((p) => p.propertyId !== propertyId),
-              };
-            }
-            return asset;
-          })
-          .filter((asset) => asset.properties.length > 0) ?? [];
-
-      const newItems = items?.filter((item) => {
-        const value = item.value;
-        return isTableItemRef(value) && value.$cellRef.id !== toId({ assetId, propertyId });
-      });
-      updateSiteWiseAssetQuery({ assets });
-      updateItems(newItems);
-    };
-
-  return <GeneralPropertiesAlarmsSection {...otherProps} onDeleteAssetQuery={deleteQuery} colorable={false} />;
-};
diff --git a/packages/dashboard/src/customization/widgets/table/component.spec.tsx b/packages/dashboard/src/customization/widgets/table/component.spec.tsx
diff --git a/packages/dashboard/src/customization/widgets/table/component.tsx b/packages/dashboard/src/customization/widgets/table/component.tsx
@@ -15,6 +15,7 @@ import { useChartSize } from '~/hooks/useChartSize';
 import { DEFAULT_PREFERENCES, collectionPreferencesProps, PROPERTY_FILTERING } from './table-config';
 import { TABLE_OVERFLOW_HEIGHT, TABLE_WIDGET_MAX_HEIGHT } from '../constants';
 import { onUpdateWidgetsAction } from '~/store/actions';
+import { useTableItems } from './useTableItems';
 
 export const DEFAULT_TABLE_COLUMN_DEFINITIONS: TableColumnDefinition[] = [
   {
@@ -38,18 +39,14 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
   const { viewport } = useViewport();
   const dashboardSignificantDigits = useSelector((state: DashboardState) => state.significantDigits);
 
-  const {
-    queryConfig,
-    columnDefinitions = DEFAULT_TABLE_COLUMN_DEFINITIONS,
-    items = [],
-    thresholds,
-    significantDigits: widgetSignificantDigits,
-  } = widget.properties;
+  const { queryConfig, thresholds, significantDigits: widgetSignificantDigits } = widget.properties;
 
   const { iotSiteWiseQuery } = useQueries();
   const queries = iotSiteWiseQuery && queryConfig.query ? [iotSiteWiseQuery?.timeSeriesData(queryConfig.query)] : [];
   const key = computeQueryConfigKey(viewport, widget.properties.queryConfig);
 
+  const items = useTableItems(queryConfig.query);
+
   const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
   const chartSize = useChartSize(widget);
   const readOnly = useSelector((state: DashboardState) => state.readOnly);
@@ -87,7 +84,7 @@ const TableWidgetComponent: React.FC<TableWidget> = (widget) => {
         key={key}
         queries={queries}
         viewport={viewport}
-        columnDefinitions={columnDefinitions}
+        columnDefinitions={DEFAULT_TABLE_COLUMN_DEFINITIONS}
         items={items}
         thresholds={thresholds}
         significantDigits={significantDigits}

diff --git a/packages/dashboard/src/customization/widgets/table/useTableItems.ts b/packages/dashboard/src/customization/widgets/table/useTableItems.ts
@@ -0,0 +1,57 @@
+import { toId } from '@iot-app-kit/source-iotsitewise';
+import { useQueries } from '@tanstack/react-query';
+import { useClients } from '~/components/dashboard/clientContext';
+import { AssetCacheKeyFactory } from '~/components/queryEditor/iotSiteWiseQueryEditor/modeledDataStreamQueryEditor/assetExplorer/useAsset/assetCacheKeyFactory';
+import { createQueryFn } from '~/components/queryEditor/iotSiteWiseQueryEditor/modeledDataStreamQueryEditor/assetExplorer/useAsset/useAsset';
+import { SiteWiseQueryConfig } from '../types';
+
+export const useTableItems = (query: SiteWiseQueryConfig['query']) => {
+  const { iotSiteWiseClient } = useClients();
+
+  const assets = query?.assets ?? [];
+  const assetIds = assets.map(({ assetId }) => assetId);
+
+  const queries = useQueries({
+    queries: iotSiteWiseClient
+      ? assetIds.map((assetId) => ({
+          enabled: Boolean(assetId),
+          queryKey: new AssetCacheKeyFactory(assetId).create(),
+          queryFn: createQueryFn(iotSiteWiseClient),
+        }))
+      : [],
+  });
+
+  const assetItems = assets.flatMap(({ assetId, properties }) =>
+    properties.map(({ propertyId }) => {
+      const assetDescription = queries.find(({ data }) => data?.assetId === assetId)?.data;
+      const { unit, name } = assetDescription?.assetProperties?.find(({ id }) => id === propertyId) ?? { unit: '' };
+      return {
+        property: `${name} (${assetDescription?.assetName ?? ''})`,
+        unit,
+        value: {
+          $cellRef: {
+            id: toId({
+              assetId,
+              propertyId,
+            }),
+            resolution: 0,
+          },
+        },
+      };
+    })
+  );
+
+  const unmodeledItems =
+    query?.properties?.map(({ propertyAlias }) => ({
+      property: propertyAlias,
+      unit: '',
+      value: {
+        $cellRef: {
+          id: propertyAlias,
+          resolution: 0,
+        },
+      },
+    })) ?? [];
+
+  return [...assetItems, ...unmodeledItems];
+};