feat: error handling/data-module core (#14)

* Prevent data streams with associated errors from re-requesting over and over * Refactor subscription store to utilize RXJS to broadcast subscription updates to subscribers * Update types on @iot-app-kit/components to be any query * Remove unused dependency on redux-thunk * Up required code coverage targets * run linting on test * add subscribeToDataStreamsFrom stubs
awslabs · Nov 29, 2021 · cb85241 · cb85241
1 parent f0dd4fd
commit cb85241
Show file tree

Hide file tree

Showing 55 changed files with 906 additions and 599 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,5 +2,7 @@ node_modules
 www
 build
 dist
+**/build/*
+**/dist/*
 coverage
 packages/components/loader/*
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
     "fix": "npm-run-all -p fix:prettier fix:eslint",
     "fix:eslint": "eslint --fix --ext .js,.ts,.tsx .",
     "fix:prettier": "prettier --write packages/**/*.{ts,tsx,js,json}",
-    "test": "lerna run test --stream --concurrency 1",
+    "test": "npm-run-all -p test:unit",
+    "test:unit": "lerna run test --stream --concurrency 1",
     "pack": "lerna run pack"
   },
   "devDependencies": {

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -5,55 +5,62 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AssetSummaryQuery, DataStreamQuery, Request } from "@iot-app-kit/core";
+import { AnyDataStreamQuery, AssetSummaryQuery, DataModule, Request } from "@iot-app-kit/core";
 import { DataStream, MinimalViewPortConfig } from "@synchro-charts/core";
 export namespace Components {
     interface IotAssetDetails {
         "query": AssetSummaryQuery;
     }
     interface IotBarChart {
+        "appKit": DataModule;
         "isEditing": boolean | undefined;
-        "query": DataStreamQuery;
+        "query": AnyDataStreamQuery;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotConnector {
-        "query": DataStreamQuery;
+        "appKit": DataModule;
+        "query": AnyDataStreamQuery;
         "renderFunc": ({ dataStreams }: { dataStreams: DataStream[] }) => unknown;
         "requestInfo": Request;
     }
     interface IotKpi {
+        "appKit": DataModule;
         "isEditing": boolean | undefined;
-        "query": DataStreamQuery;
+        "query": AnyDataStreamQuery;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotLineChart {
+        "appKit": DataModule;
         "isEditing": boolean | undefined;
-        "query": DataStreamQuery;
+        "query": AnyDataStreamQuery;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotScatterChart {
+        "appKit": DataModule;
         "isEditing": boolean | undefined;
-        "query": DataStreamQuery;
+        "query": AnyDataStreamQuery;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotStatusGrid {
+        "appKit": DataModule;
         "isEditing": boolean | undefined;
-        "query": DataStreamQuery;
+        "query": AnyDataStreamQuery;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotStatusTimeline {
+        "appKit": DataModule;
         "isEditing": boolean | undefined;
-        "query": DataStreamQuery;
+        "query": AnyDataStreamQuery;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
     interface IotTable {
-        "query": DataStreamQuery;
+        "query": AnyDataStreamQuery;
         "viewport": MinimalViewPortConfig;
         "widgetId": string;
     }
@@ -148,48 +155,55 @@ declare namespace LocalJSX {
         "query"?: AssetSummaryQuery;
     }
     interface IotBarChart {
+        "appKit"?: DataModule;
         "isEditing"?: boolean | undefined;
-        "query"?: DataStreamQuery;
+        "query"?: AnyDataStreamQuery;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotConnector {
-        "query"?: DataStreamQuery;
+        "appKit"?: DataModule;
+        "query"?: AnyDataStreamQuery;
         "renderFunc"?: ({ dataStreams }: { dataStreams: DataStream[] }) => unknown;
         "requestInfo"?: Request;
     }
     interface IotKpi {
+        "appKit"?: DataModule;
         "isEditing"?: boolean | undefined;
-        "query"?: DataStreamQuery;
+        "query"?: AnyDataStreamQuery;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotLineChart {
+        "appKit"?: DataModule;
         "isEditing"?: boolean | undefined;
-        "query"?: DataStreamQuery;
+        "query"?: AnyDataStreamQuery;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotScatterChart {
+        "appKit"?: DataModule;
         "isEditing"?: boolean | undefined;
-        "query"?: DataStreamQuery;
+        "query"?: AnyDataStreamQuery;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotStatusGrid {
+        "appKit"?: DataModule;
         "isEditing"?: boolean | undefined;
-        "query"?: DataStreamQuery;
+        "query"?: AnyDataStreamQuery;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotStatusTimeline {
+        "appKit"?: DataModule;
         "isEditing"?: boolean | undefined;
-        "query"?: DataStreamQuery;
+        "query"?: AnyDataStreamQuery;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }
     interface IotTable {
-        "query"?: DataStreamQuery;
+        "query"?: AnyDataStreamQuery;
         "viewport"?: MinimalViewPortConfig;
         "widgetId"?: string;
     }

diff --git a/packages/components/src/components/iot-bar-chart/iot-bar-chart.spec.ts b/packages/components/src/components/iot-bar-chart/iot-bar-chart.spec.ts
@@ -2,7 +2,7 @@ import { newSpecPage } from '@stencil/core/testing';
 import { MinimalLiveViewport } from '@synchro-charts/core';
 import { IotBarChart } from './iot-bar-chart';
 import { Components } from '../../components.d';
-import { getDataModule, initialize, SiteWiseDataStreamQuery } from '@iot-app-kit/core';
+import { registerDataSource, initialize, SiteWiseDataStreamQuery } from '@iot-app-kit/core';
 import { createMockSource } from '../../testing/createMockSource';
 import { DATA_STREAM } from '../../testing/mockWidgetProperties';
 import { IotConnector } from '../iot-connector/iot-connector';
@@ -14,8 +14,8 @@ const viewport: MinimalLiveViewport = {
 };
 
 const barChartSpecPage = async (propOverrides: Partial<Components.IotBarChart> = {}) => {
-  initialize({ registerDataSources: false });
-  getDataModule().registerDataSource(createMockSource([DATA_STREAM]));
+  const appKit = initialize({ registerDataSources: false });
+  registerDataSource(appKit, createMockSource([DATA_STREAM]));
 
   const page = await newSpecPage({
     components: [IotBarChart, IotConnector],
@@ -24,6 +24,7 @@ const barChartSpecPage = async (propOverrides: Partial<Components.IotBarChart> =
   });
   const barChart = page.doc.createElement('iot-bar-chart') as CustomHTMLElement<Components.IotBarChart>;
   const props: Partial<Components.IotBarChart> = {
+    appKit,
     widgetId: 'test-bar-chart-widget',
     isEditing: false,
     query: {

diff --git a/packages/components/src/components/iot-bar-chart/iot-bar-chart.tsx b/packages/components/src/components/iot-bar-chart/iot-bar-chart.tsx
@@ -1,6 +1,6 @@
 import { Component, Prop, h } from '@stencil/core';
 import { MinimalViewPortConfig } from '@synchro-charts/core';
-import { DataStreamQuery, Request } from '@iot-app-kit/core';
+import { AnyDataStreamQuery, DataModule, Request } from '@iot-app-kit/core';
 
 const DEFAULT_VIEWPORT = { duration: 10 * 1000 * 60 };
 
@@ -9,7 +9,9 @@ const DEFAULT_VIEWPORT = { duration: 10 * 1000 * 60 };
   shadow: false,
 })
 export class IotBarChart {
-  @Prop() query: DataStreamQuery;
+  @Prop() appKit: DataModule;
+
+  @Prop() query: AnyDataStreamQuery;
 
   @Prop() viewport: MinimalViewPortConfig = DEFAULT_VIEWPORT;
 
@@ -28,6 +30,7 @@ export class IotBarChart {
     const requestInfo = this.requestInfo();
     return (
       <iot-connector
+        appKit={this.appKit}
         query={this.query}
         requestInfo={requestInfo}
         renderFunc={({ dataStreams }) => (

diff --git a/packages/components/src/components/iot-connector/iot-connector.spec.ts b/packages/components/src/components/iot-connector/iot-connector.spec.ts
@@ -1,7 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { MinimalLiveViewport } from '@synchro-charts/core';
 import flushPromises from 'flush-promises';
-import { getDataModule, initialize, SiteWiseDataStreamQuery } from '@iot-app-kit/core';
+import { registerDataSource, initialize, SiteWiseDataStreamQuery } from '@iot-app-kit/core';
 import { IotConnector } from './iot-connector';
 import { createMockSource } from '../../testing/createMockSource';
 import { update } from '../../testing/update';
@@ -16,8 +16,8 @@ const viewport: MinimalLiveViewport = {
 
 const connectorSpecPage = async (propOverrides: Partial<Components.IotConnector> = {}) => {
   /** Initialize data source and register mock data source */
-  initialize({ registerDataSources: false });
-  getDataModule().registerDataSource(createMockSource([DATA_STREAM]));
+  const appKit = initialize({ registerDataSources: false });
+  registerDataSource(appKit, createMockSource([DATA_STREAM]));
 
   const page = await newSpecPage({
     components: [IotConnector],
@@ -26,6 +26,7 @@ const connectorSpecPage = async (propOverrides: Partial<Components.IotConnector>
   });
   const connector = page.doc.createElement('iot-connector') as CustomHTMLElement<Components.IotConnector>;
   const props: Partial<Components.IotConnector> = {
+    appKit,
     query: {
       source: 'test-mock',
       assets: [],

diff --git a/packages/components/src/components/iot-connector/iot-connector.tsx b/packages/components/src/components/iot-connector/iot-connector.tsx
@@ -1,28 +1,31 @@
 import { Component, Prop, State, Watch } from '@stencil/core';
 import { DataStream } from '@synchro-charts/core';
 import isEqual from 'lodash.isequal';
-import { getDataModule, Request, DataStreamQuery, SubscriptionUpdate } from '@iot-app-kit/core';
+import { Request, AnyDataStreamQuery, SubscriptionUpdate, subscribeToDataStreams, DataModule } from '@iot-app-kit/core';
 
 @Component({
   tag: 'iot-connector',
   shadow: false,
 })
 export class IotConnector {
-  @Prop() query: DataStreamQuery;
+  @Prop() appKit: DataModule;
+
+  @Prop() query: AnyDataStreamQuery;
 
   @Prop() requestInfo: Request;
 
   @Prop() renderFunc: ({ dataStreams }: { dataStreams: DataStream[] }) => unknown;
 
   @State() dataStreams: DataStream[] = [];
 
-  private update: (subscriptionUpdate: SubscriptionUpdate<DataStreamQuery>) => void;
+  private update: (subscriptionUpdate: SubscriptionUpdate<AnyDataStreamQuery>) => void;
 
   private unsubscribe: () => void;
 
   componentWillLoad() {
     // Subscribe to data module for the requested `query`
-    const { update, unsubscribe } = getDataModule().subscribeToDataStreams(
+    const { update, unsubscribe } = subscribeToDataStreams(
+      this.appKit,
       {
         query: this.query,
         requestInfo: this.requestInfo,

diff --git a/packages/components/src/components/iot-kpi/iot-kpi.spec.ts b/packages/components/src/components/iot-kpi/iot-kpi.spec.ts
@@ -1,5 +1,5 @@
 import { newSpecPage } from '@stencil/core/testing';
-import { getDataModule, SiteWiseDataStreamQuery, initialize } from '@iot-app-kit/core';
+import { registerDataSource, SiteWiseDataStreamQuery, initialize } from '@iot-app-kit/core';
 import { MinimalLiveViewport } from '@synchro-charts/core';
 import { IotKpi } from './iot-kpi';
 import { Components } from '../../components.d';
@@ -14,8 +14,8 @@ const viewport: MinimalLiveViewport = {
 };
 
 const kpiSpecPage = async (propOverrides: Partial<Components.IotKpi> = {}) => {
-  initialize({ registerDataSources: false });
-  getDataModule().registerDataSource(createMockSource([DATA_STREAM]));
+  const appKit = initialize({ registerDataSources: false });
+  registerDataSource(appKit, createMockSource([DATA_STREAM]));
 
   const page = await newSpecPage({
     components: [IotKpi, IotConnector],
@@ -24,6 +24,7 @@ const kpiSpecPage = async (propOverrides: Partial<Components.IotKpi> = {}) => {
   });
   const kpi = page.doc.createElement('iot-kpi') as CustomHTMLElement<Components.IotKpi>;
   const props: Partial<Components.IotKpi> = {
+    appKit,
     widgetId: 'test-kpi-widget',
     isEditing: false,
     query: {

diff --git a/packages/components/src/components/iot-kpi/iot-kpi.tsx b/packages/components/src/components/iot-kpi/iot-kpi.tsx
@@ -1,6 +1,6 @@
 import { Component, Prop, h } from '@stencil/core';
 import { MinimalViewPortConfig } from '@synchro-charts/core';
-import { DataStreamQuery } from '@iot-app-kit/core';
+import { AnyDataStreamQuery, DataModule } from '@iot-app-kit/core';
 
 const DEFAULT_VIEWPORT = { duration: 10 * 1000 };
 
@@ -9,7 +9,9 @@ const DEFAULT_VIEWPORT = { duration: 10 * 1000 };
   shadow: false,
 })
 export class IotKpi {
-  @Prop() query: DataStreamQuery;
+  @Prop() appKit: DataModule;
+
+  @Prop() query: AnyDataStreamQuery;
 
   @Prop() viewport: MinimalViewPortConfig = DEFAULT_VIEWPORT;
 
@@ -28,6 +30,7 @@ export class IotKpi {
     const requestInfo = this.requestInfo();
     return (
       <iot-connector
+        appKit={this.appKit}
         query={this.query}
         requestInfo={requestInfo}
         renderFunc={({ dataStreams }) => (

diff --git a/packages/components/src/components/iot-line-chart/iot-line-chart.spec.ts b/packages/components/src/components/iot-line-chart/iot-line-chart.spec.ts
@@ -1,7 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { MinimalLiveViewport } from '@synchro-charts/core';
 import { IotLineChart } from './iot-line-chart';
-import { getDataModule } from '@iot-app-kit/core/src/data-module';
+import { registerDataSource } from '@iot-app-kit/core';
 import { Components } from '../../components.d';
 import { createMockSource } from '../../testing/createMockSource';
 import { DATA_STREAM } from '../../testing/mockWidgetProperties';
@@ -15,8 +15,8 @@ const viewport: MinimalLiveViewport = {
 };
 
 const lineChartSpecPage = async (propOverrides: Partial<Components.IotKpi> = {}) => {
-  initialize({ registerDataSources: false });
-  getDataModule().registerDataSource(createMockSource([DATA_STREAM]));
+  const appKit = initialize({ registerDataSources: false });
+  registerDataSource(appKit, createMockSource([DATA_STREAM]));
 
   const page = await newSpecPage({
     components: [IotLineChart, IotConnector],
@@ -25,6 +25,7 @@ const lineChartSpecPage = async (propOverrides: Partial<Components.IotKpi> = {})
   });
   const lineChart = page.doc.createElement('iot-line-chart') as CustomHTMLElement<Components.IotStatusGrid>;
   const props: Partial<Components.IotStatusGrid> = {
+    appKit,
     widgetId: 'test-line-chart-widget',
     isEditing: false,
     query: {

diff --git a/packages/components/src/components/iot-line-chart/iot-line-chart.tsx b/packages/components/src/components/iot-line-chart/iot-line-chart.tsx
@@ -1,6 +1,6 @@
 import { Component, Prop, h } from '@stencil/core';
 import { MinimalViewPortConfig } from '@synchro-charts/core';
-import { DataStreamQuery, Request } from '@iot-app-kit/core';
+import { AnyDataStreamQuery, DataModule, Request } from '@iot-app-kit/core';
 
 const DEFAULT_VIEWPORT = { duration: 10 * 1000 * 60 };
 
@@ -9,7 +9,9 @@ const DEFAULT_VIEWPORT = { duration: 10 * 1000 * 60 };
   shadow: false,
 })
 export class IotLineChart {
-  @Prop() query: DataStreamQuery;
+  @Prop() appKit: DataModule;
+
+  @Prop() query: AnyDataStreamQuery;
 
   @Prop() viewport: MinimalViewPortConfig = DEFAULT_VIEWPORT;
 
@@ -28,6 +30,7 @@ export class IotLineChart {
     const requestInfo = this.requestInfo();
     return (
       <iot-connector
+        appKit={this.appKit}
         query={this.query}
         requestInfo={requestInfo}
         renderFunc={({ dataStreams }) => (