feat: [Data History Explorer]: Viewer component (with only Chart tab) (…

…#808) * added data history explorer's builder components and the modal * run prettier * [Auto] Adding updated localization files Files changed: M src/Resources/Locales/cs.json M src/Resources/Locales/de.json M src/Resources/Locales/es.json M src/Resources/Locales/fr.json M src/Resources/Locales/hu.json M src/Resources/Locales/it.json M src/Resources/Locales/ja.json M src/Resources/Locales/ko.json M src/Resources/Locales/nl.json M src/Resources/Locales/pl.json M src/Resources/Locales/pt-pt.json M src/Resources/Locales/pt.json M src/Resources/Locales/ru.json M src/Resources/Locales/sv.json M src/Resources/Locales/tr.json M src/Resources/Locales/zh-Hans.json * data history explorer viewer component * [Auto] Adding updated localization files Files changed: M src/Resources/Locales/cs.json M src/Resources/Locales/de.json M src/Resources/Locales/es.json M src/Resources/Locales/fr.json M src/Resources/Locales/hu.json M src/Resources/Locales/it.json M src/Resources/Locales/ja.json M src/Resources/Locales/ko.json M src/Resources/Locales/nl.json M src/Resources/Locales/pl.json M src/Resources/Locales/pt-pt.json M src/Resources/Locales/pt.json M src/Resources/Locales/ru.json M src/Resources/Locales/sv.json M src/Resources/Locales/tr.json M src/Resources/Locales/zh-Hans.json * jest test fail fix * styling changes and test fix * style fix * style change * moved a util method to shared file and added illustration when there is no time series twin in the list * [Auto] Adding updated localization files Files changed: M src/Resources/Locales/cs.json M src/Resources/Locales/de.json M src/Resources/Locales/es.json M src/Resources/Locales/fr.json M src/Resources/Locales/hu.json M src/Resources/Locales/it.json M src/Resources/Locales/ja.json M src/Resources/Locales/ko.json M src/Resources/Locales/nl.json M src/Resources/Locales/pl.json M src/Resources/Locales/pt-pt.json M src/Resources/Locales/pt.json M src/Resources/Locales/ru.json M src/Resources/Locales/sv.json M src/Resources/Locales/tr.json M src/Resources/Locales/zh-Hans.json * CR fix * now fixed typing error in build for iconStart * [Auto] Adding updated localization files Files changed: M src/Resources/Locales/cs.json M src/Resources/Locales/de.json M src/Resources/Locales/es.json M src/Resources/Locales/fr.json M src/Resources/Locales/hu.json M src/Resources/Locales/it.json M src/Resources/Locales/ja.json M src/Resources/Locales/ko.json M src/Resources/Locales/nl.json M src/Resources/Locales/pl.json M src/Resources/Locales/pt-pt.json M src/Resources/Locales/pt.json M src/Resources/Locales/ru.json M src/Resources/Locales/sv.json M src/Resources/Locales/tr.json M src/Resources/Locales/zh-Hans.json * CR fixes - 1 * CR fixes - 2 * [Auto] Adding updated localization files Files changed: M src/Resources/Locales/cs.json M src/Resources/Locales/de.json M src/Resources/Locales/es.json M src/Resources/Locales/fr.json M src/Resources/Locales/hu.json M src/Resources/Locales/it.json M src/Resources/Locales/ja.json M src/Resources/Locales/ko.json M src/Resources/Locales/nl.json M src/Resources/Locales/pl.json M src/Resources/Locales/pt-pt.json M src/Resources/Locales/pt.json M src/Resources/Locales/ru.json M src/Resources/Locales/sv.json M src/Resources/Locales/tr.json M src/Resources/Locales/zh-Hans.json * trigger translations * [Auto] Adding updated localization files Files changed: M src/Resources/Locales/cs.json M src/Resources/Locales/de.json M src/Resources/Locales/es.json M src/Resources/Locales/fr.json M src/Resources/Locales/hu.json M src/Resources/Locales/it.json M src/Resources/Locales/ja.json M src/Resources/Locales/ko.json M src/Resources/Locales/nl.json M src/Resources/Locales/pl.json M src/Resources/Locales/pt-pt.json M src/Resources/Locales/pt.json M src/Resources/Locales/ru.json M src/Resources/Locales/sv.json M src/Resources/Locales/tr.json M src/Resources/Locales/zh-Hans.json * trigger translations * [Auto] Adding updated localization files Files changed: M src/Resources/Locales/cs.json M src/Resources/Locales/de.json M src/Resources/Locales/es.json M src/Resources/Locales/fr.json M src/Resources/Locales/hu.json M src/Resources/Locales/it.json M src/Resources/Locales/ja.json M src/Resources/Locales/ko.json M src/Resources/Locales/nl.json M src/Resources/Locales/pl.json M src/Resources/Locales/pt-pt.json M src/Resources/Locales/pt.json M src/Resources/Locales/ru.json M src/Resources/Locales/sv.json M src/Resources/Locales/tr.json M src/Resources/Locales/zh-Hans.json * regenerate locales * trigger loc * [Auto] Adding updated localization files Files changed: M src/Resources/Locales/cs.json M src/Resources/Locales/de.json M src/Resources/Locales/es.json M src/Resources/Locales/fr.json M src/Resources/Locales/hu.json M src/Resources/Locales/it.json M src/Resources/Locales/ja.json M src/Resources/Locales/ko.json M src/Resources/Locales/nl.json M src/Resources/Locales/pl.json M src/Resources/Locales/pt-pt.json M src/Resources/Locales/pt.json M src/Resources/Locales/ru.json M src/Resources/Locales/sv.json M src/Resources/Locales/tr.json M src/Resources/Locales/zh-Hans.json * last loc * [Auto] Adding updated localization files Files changed: M src/Resources/Locales/cs.json M src/Resources/Locales/de.json M src/Resources/Locales/es.json M src/Resources/Locales/fr.json M src/Resources/Locales/hu.json M src/Resources/Locales/it.json M src/Resources/Locales/ja.json M src/Resources/Locales/ko.json M src/Resources/Locales/nl.json M src/Resources/Locales/pl.json M src/Resources/Locales/pt-pt.json M src/Resources/Locales/pt.json M src/Resources/Locales/ru.json M src/Resources/Locales/sv.json M src/Resources/Locales/tr.json M src/Resources/Locales/zh-Hans.json Co-authored-by: iremgokce <[email protected]>
microsoft · Jan 10, 2023 · 78c3e44 · 78c3e44
1 parent 5911868
commit 78c3e44
Show file tree

Hide file tree

Showing 48 changed files with 1,011 additions and 260 deletions.
diff --git a/src/Adapters/ADTDataHistoryAdapter.ts b/src/Adapters/ADTDataHistoryAdapter.ts
@@ -5,11 +5,12 @@ import {
 } from '../Models/Classes/AdapterDataClasses/ADTModelData';
 import ADTTwinData from '../Models/Classes/AdapterDataClasses/ADTTwinData';
 import AdapterEntityCache from '../Models/Classes/AdapterEntityCache';
+import AdapterResult from '../Models/Classes/AdapterResult';
 import {
     modelRefreshMaxAge,
     timeSeriesConnectionRefreshMaxAge
 } from '../Models/Constants/Constants';
-import { IAuthService } from '../Models/Constants/Interfaces';
+import { IADXConnection, IAuthService } from '../Models/Constants/Interfaces';
 import { applyMixins } from '../Models/Services/Utils';
 import ADTAdapter from './ADTAdapter';
 import ADXAdapter from './ADXAdapter';
@@ -19,11 +20,13 @@ export default class ADTDataHistoryAdapter {
     constructor(
         authService: IAuthService,
         adtHostUrl: string,
+        adxConnectionInformation?: IADXConnection,
         tenantId?: string,
         uniqueObjectId?: string,
         adtProxyServerPath = '/proxy/adt'
     ) {
         this.adtHostUrl = adtHostUrl;
+        this.adxConnectionInformation = adxConnectionInformation;
         this.authService = this.adxAuthService = authService;
         this.tenantId = tenantId;
         this.uniqueObjectId = uniqueObjectId;
@@ -43,12 +46,33 @@ export default class ADTDataHistoryAdapter {
         // Fetch & cache models on mount (makes first use of models faster as models should already be cached)
         this.getAllAdtModels();
     }
+
+    updateADXConnectionInformation = async () => {
+        if (this.adtHostUrl) {
+            const connectionInformation = await this.getTimeSeriesConnectionInformation(
+                this.adtHostUrl,
+                true,
+                true
+            );
+            this.adxConnectionInformation = connectionInformation.getData();
+            return connectionInformation;
+        } else {
+            return new AdapterResult<ADTInstanceTimeSeriesConnectionData>({
+                result: null,
+                errorInfo: null
+            });
+        }
+    };
 }
 
 export default interface ADTDataHistoryAdapter
     extends ADTAdapter,
         ADXAdapter,
-        AzureManagementAdapter {}
+        AzureManagementAdapter {
+    updateADXConnectionInformation: () => Promise<
+        AdapterResult<ADTInstanceTimeSeriesConnectionData>
+    >;
+}
 applyMixins(ADTDataHistoryAdapter, [
     ADTAdapter,
     ADXAdapter,

diff --git a/src/Adapters/MockAdapter.ts b/src/Adapters/MockAdapter.ts
@@ -1155,4 +1155,29 @@ export default class MockAdapter
             });
         }
     }
+
+    async updateADXConnectionInformation() {
+        try {
+            await this.mockNetwork();
+            const mockConnectionInformation: IADXConnection = {
+                kustoClusterUrl:
+                    'https://mockKustoClusterName.westus2.kusto.windows.net',
+                kustoDatabaseName: 'mockKustoDatabaseName',
+                kustoTableName: 'mockKustoTableName'
+            };
+            this.setADXConnectionInformation(mockConnectionInformation);
+
+            return new AdapterResult({
+                result: new ADTInstanceTimeSeriesConnectionData(
+                    mockConnectionInformation
+                ),
+                errorInfo: null
+            });
+        } catch (err) {
+            return new AdapterResult({
+                result: null,
+                errorInfo: { catastrophicError: err, errors: [err] }
+            });
+        }
+    }
 }
diff --git a/src/Cards/LinechartCard/LineChartCard.stories.local.tsx b/src/Cards/LinechartCard/LineChartCard.stories.local.tsx
@@ -71,12 +71,17 @@ export const ADXData = (
                 properties={twinProperties}
                 adapter={
                     new ADXAdapter(
-                        authenticationParameters.adx.clusterUrl,
-                        authenticationParameters.adx.databaseName,
-                        authenticationParameters.adx.tableName,
                         new MsalAuthService(
                             authenticationParameters.adx.aadParameters
-                        )
+                        ),
+                        {
+                            kustoClusterUrl:
+                                authenticationParameters.adx.clusterUrl,
+                            kustoDatabaseName:
+                                authenticationParameters.adx.databaseName,
+                            kustoTableName:
+                                authenticationParameters.adx.tableName
+                        }
                     )
                 }
             />

diff --git a/...al/Behaviors/Widgets/WidgetBuilders/DataHistoryWidgetBuilder/DataHistoryWidgetBuilder.tsx b/...al/Behaviors/Widgets/WidgetBuilders/DataHistoryWidgetBuilder/DataHistoryWidgetBuilder.tsx
@@ -16,8 +16,15 @@ import { useBoolean, useId } from '@fluentui/react-hooks';
 import produce from 'immer';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { DOCUMENTATION_LINKS } from '../../../../../../../Models/Constants/Constants';
+import {
+    AggregationTypeDropdownOptions,
+    DOCUMENTATION_LINKS
+} from '../../../../../../../Models/Constants/Constants';
 import { isValidADXClusterUrl } from '../../../../../../../Models/Services/Utils';
+import {
+    getQuickTimeSpanKeyByValue,
+    getYAxisTypeOptions
+} from '../../../../../../../Models/SharedUtils/DataHistoryUtils';
 import {
     IADXTimeSeriesConnection,
     IDataHistoryAggregationType,
@@ -26,20 +33,16 @@ import {
 } from '../../../../../../../Models/Types/Generated/3DScenesConfiguration-v1.0.0';
 import { ADT3DScenePageContext } from '../../../../../../../Pages/ADT3DScenePage/ADT3DScenePage';
 import { ADXConnectionInformationLoadingState } from '../../../../../../../Pages/ADT3DScenePage/ADT3DScenePage.types';
-import QuickTimesDropdown, {
-    getQuickTimeSpanKeyByValue
-} from '../../../../../../QuickTimesDropdown/QuickTimesDropdown';
+import QuickTimesDropdown from '../../../../../../QuickTimesDropdown/QuickTimesDropdown';
 import TooltipCallout from '../../../../../../TooltipCallout/TooltipCallout';
 import { getActionButtonStyles } from '../../../../Shared/LeftPanel.styles';
 import { getWidgetFormStyles } from '../../WidgetForm/WidgetForm.styles';
 import { getStyles } from './DataHistoryWidgetBuilder.styles';
 import {
-    AggregationTypeOptions,
     ChartOptionKeys,
     IDataHistoryWidgetBuilderProps,
     MAX_NUMBER_OF_TIME_SERIES,
     SERIES_LIST_ITEM_ID_PREFIX,
-    getYAxisTypeOptions,
     IDataHistoryWidgetBuilderStyleProps,
     IDataHistoryWidgetBuilderStyles
 } from './DataHistoryWidgetBuilder.types';
@@ -393,7 +396,7 @@ const DataHistoryWidgetBuilder: React.FC<IDataHistoryWidgetBuilderProps> = ({
                             option.key as IDataHistoryAggregationType
                         )
                     }
-                    options={AggregationTypeOptions}
+                    options={AggregationTypeDropdownOptions}
                     onRenderLabel={handleOnRenderAggregationMethodLabel}
                 />
             </Stack>

diff --git a/...haviors/Widgets/WidgetBuilders/DataHistoryWidgetBuilder/DataHistoryWidgetBuilder.types.ts b/...haviors/Widgets/WidgetBuilders/DataHistoryWidgetBuilder/DataHistoryWidgetBuilder.types.ts
@@ -1,15 +1,6 @@
+import { IStyle, IStyleFunctionOrObject, ITheme } from '@fluentui/react';
 import {
-    IChoiceGroupOption,
-    IDropdownOption,
-    IStyle,
-    IStyleFunctionOrObject,
-    ITheme
-} from '@fluentui/react';
-import { TFunction } from 'i18next';
-import {
-    IDataHistoryAggregationType,
     IDataHistoryChartOptions,
-    IDataHistoryChartYAxisType,
     IDataHistoryWidget
 } from '../../../../../../../Models/Types/Generated/3DScenesConfiguration-v1.0.0';
 import { IWidgetBuilderFormDataProps } from '../../../../../ADT3DSceneBuilder.types';
@@ -36,38 +27,3 @@ export interface IDataHistoryWidgetBuilderStyles {
 
 /** Existing chart options for data history widget in the 3D config schema */
 export type ChartOptionKeys = keyof IDataHistoryChartOptions;
-
-export const getYAxisTypeOptions = (
-    t: TFunction
-): Array<IChoiceGroupOption> => {
-    return [
-        {
-            key: 'shared' as IDataHistoryChartYAxisType,
-            text: t(
-                'widgets.dataHistory.form.chartOptions.yAxisType.sharedLabel'
-            )
-        },
-        {
-            key: 'independent' as IDataHistoryChartYAxisType,
-            text: t(
-                'widgets.dataHistory.form.chartOptions.yAxisType.independentLabel'
-            )
-        }
-    ];
-};
-
-/** No translation needed for these options */
-export const AggregationTypeOptions: Array<IDropdownOption> = [
-    {
-        key: 'avg' as IDataHistoryAggregationType,
-        text: 'avg'
-    },
-    {
-        key: 'min' as IDataHistoryAggregationType,
-        text: 'min'
-    },
-    {
-        key: 'max' as IDataHistoryAggregationType,
-        text: 'max'
-    }
-];
diff --git a/src/Components/BehaviorsModal/Internal/Widgets/DataHistoryWidget/DataHistoryWidget.tsx b/src/Components/BehaviorsModal/Internal/Widgets/DataHistoryWidget/DataHistoryWidget.tsx
@@ -27,6 +27,7 @@ import {
 } from '../../../../../Models/Constants';
 import { useTimeSeriesData } from '../../../../../Models/Hooks/useTimeSeriesData';
 import { getMockTimeSeriesDataArrayInLocalTime } from '../../../../../Models/Services/Utils';
+import { getQuickTimeSpanKeyByValue } from '../../../../../Models/SharedUtils/DataHistoryUtils';
 import {
     IDataHistoryTimeSeries,
     IDataHistoryWidgetConfiguration
@@ -37,9 +38,7 @@ import {
     IOverflowMenuProps,
     OverflowMenu
 } from '../../../../OverflowMenu/OverflowMenu';
-import QuickTimesDropdown, {
-    getQuickTimeSpanKeyByValue
-} from '../../../../QuickTimesDropdown/QuickTimesDropdown';
+import QuickTimesDropdown from '../../../../QuickTimesDropdown/QuickTimesDropdown';
 import { BehaviorsModalContext } from '../../../BehaviorsModal';
 import { getStyles } from './DataHistoryWidget.styles';
 import {

diff --git a/...viorsModal/Internal/Widgets/DataHistoryWidget/Internal/DataHistoryWidgetErrorHandling.tsx b/...viorsModal/Internal/Widgets/DataHistoryWidget/Internal/DataHistoryWidgetErrorHandling.tsx
@@ -141,7 +141,6 @@ export const DataHistoryWidgetErrorHandling: React.FC<IDataHistoryWidgetErrorHan
     return (
         <div style={classNames.errorContainer.root}>
             <IllustrationMessage
-                headerText=""
                 descriptionText={errorObj.description}
                 type={'info'}
                 width={'compact'}

diff --git a/src/Components/CardboardModal/CardboardModal.tsx b/src/Components/CardboardModal/CardboardModal.tsx
@@ -34,6 +34,7 @@ const CardboardModal: React.FC<ICardboardModalProps> = (props) => {
         footerDangerButtonProps,
         footerLinkProps,
         footerPrimaryButtonProps,
+        footerDefaultButtonProps,
         isOpen,
         modalProps,
         onDismiss,
@@ -126,6 +127,7 @@ const CardboardModal: React.FC<ICardboardModalProps> = (props) => {
                             <DefaultButton
                                 text={t('cancel')}
                                 onClick={onDismiss}
+                                {...footerDefaultButtonProps}
                                 styles={classNames.subComponentStyles.cancelButton?.()}
                             />
                             {footerPrimaryButtonProps && (

diff --git a/src/Components/CardboardModal/CardboardModal.types.ts b/src/Components/CardboardModal/CardboardModal.types.ts
@@ -25,6 +25,7 @@ export interface ICardboardModalProps {
     };
     /** click handle for the primary footer button */
     footerPrimaryButtonProps?: IButtonProps;
+    footerDefaultButtonProps?: IButtonProps;
     /** is the modal open */
     isOpen: boolean;
     /** additional props to pass to the modal for customization */

diff --git a/src/Components/DataHistoryExplorer/DataHistoryExplorer.stories.local.tsx b/src/Components/DataHistoryExplorer/DataHistoryExplorer.stories.local.tsx
@@ -6,7 +6,7 @@ import useAuthParams from '../../../.storybook/useAuthParams';
 import MsalAuthService from '../../Models/Services/MsalAuthService';
 import ADTDataHistoryAdapter from '../../Adapters/ADTDataHistoryAdapter';
 
-const wrapperStyle = { width: '100%', height: '500px', padding: 8 };
+const wrapperStyle = { width: '100%', height: '500px' };
 
 export default {
     title: 'Components/DataHistoryExplorer',

diff --git a/src/Components/DataHistoryExplorer/DataHistoryExplorer.stories.tsx b/src/Components/DataHistoryExplorer/DataHistoryExplorer.stories.tsx
@@ -5,7 +5,7 @@ import DataHistoryExplorer from './DataHistoryExplorer';
 import { IDataHistoryExplorerProps } from './DataHistoryExplorer.types';
 import MockAdapter from '../../Adapters/MockAdapter';
 
-const wrapperStyle = { width: '100%', height: '500px', padding: 8 };
+const wrapperStyle = { width: '100%', height: '500px' };
 
 export default {
     title: 'Components/DataHistoryExplorer/Mock',
@@ -30,3 +30,17 @@ export const WithTitle = Template.bind({}) as DataHistoryExplorerStory;
 WithTitle.args = {
     hasTitle: true
 } as IDataHistoryExplorerProps;
+
+export const WithSeries = Template.bind({}) as DataHistoryExplorerStory;
+WithSeries.args = {
+    timeSeriesTwins: [
+        {
+            twinId: 'SaltMachine_C0',
+            twinPropertyName: 'Temperature',
+            twinPropertyType: 'double',
+            chartProps: {
+                color: 'yellow'
+            }
+        }
+    ]
+} as IDataHistoryExplorerProps;
diff --git a/src/Components/DataHistoryExplorer/DataHistoryExplorer.styles.ts b/src/Components/DataHistoryExplorer/DataHistoryExplorer.styles.ts
@@ -47,7 +47,9 @@ export const getStyles = (
             { flexGrow: 1, overflow: 'hidden' }
         ],
         subComponentStyles: {
-            builder: { root: { width: 240 } }
+            builder: { root: { width: 240 } },
+            viewer: { root: { flexGrow: 1 } },
+            loadingSpinner: { root: { flexGrow: 1 } }
         }
     };
 };