feat: [Data History Explorer]: Builder components (#807)

* 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 * jest test fail fix * styling changes and test fix * style change * CR fix * now fixed typing error in build for iconStart * 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 * CR fixes - 3 * reverting react select double scroll bar changes since it requires separate PR * cast label font weight changed Co-authored-by: iremgokce <[email protected]>
microsoft · Jan 5, 2023 · 9d390d1 · 9d390d1
1 parent 5392d96
commit 9d390d1
Show file tree

Hide file tree

Showing 68 changed files with 1,789 additions and 75 deletions.
diff --git a/src/Adapters/ADTDataHistoryAdapter.ts b/src/Adapters/ADTDataHistoryAdapter.ts
@@ -0,0 +1,56 @@
+import ADTInstanceTimeSeriesConnectionData from '../Models/Classes/AdapterDataClasses/ADTInstanceTimeSeriesConnectionData';
+import {
+    ADTAllModelsData,
+    ADTTwinToModelMappingData
+} from '../Models/Classes/AdapterDataClasses/ADTModelData';
+import ADTTwinData from '../Models/Classes/AdapterDataClasses/ADTTwinData';
+import AdapterEntityCache from '../Models/Classes/AdapterEntityCache';
+import {
+    modelRefreshMaxAge,
+    timeSeriesConnectionRefreshMaxAge
+} from '../Models/Constants/Constants';
+import { IAuthService } from '../Models/Constants/Interfaces';
+import { applyMixins } from '../Models/Services/Utils';
+import ADTAdapter from './ADTAdapter';
+import ADXAdapter from './ADXAdapter';
+import AzureManagementAdapter from './AzureManagementAdapter';
+
+export default class ADTDataHistoryAdapter {
+    constructor(
+        authService: IAuthService,
+        adtHostUrl: string,
+        tenantId?: string,
+        uniqueObjectId?: string,
+        adtProxyServerPath = '/proxy/adt'
+    ) {
+        this.adtHostUrl = adtHostUrl;
+        this.authService = this.adxAuthService = authService;
+        this.tenantId = tenantId;
+        this.uniqueObjectId = uniqueObjectId;
+        this.adtTwinCache = new AdapterEntityCache<ADTTwinData>(9000);
+        this.adtModelsCache = new AdapterEntityCache<ADTAllModelsData>(
+            modelRefreshMaxAge
+        );
+        this.adtTwinToModelMappingCache = new AdapterEntityCache<ADTTwinToModelMappingData>(
+            modelRefreshMaxAge
+        );
+        this.timeSeriesConnectionCache = new AdapterEntityCache<ADTInstanceTimeSeriesConnectionData>(
+            timeSeriesConnectionRefreshMaxAge
+        );
+
+        this.adtProxyServerPath = adtProxyServerPath;
+        this.authService.login();
+        // Fetch & cache models on mount (makes first use of models faster as models should already be cached)
+        this.getAllAdtModels();
+    }
+}
+
+export default interface ADTDataHistoryAdapter
+    extends ADTAdapter,
+        ADXAdapter,
+        AzureManagementAdapter {}
+applyMixins(ADTDataHistoryAdapter, [
+    ADTAdapter,
+    ADXAdapter,
+    AzureManagementAdapter
+]);
diff --git a/src/Adapters/MockAdapter.ts b/src/Adapters/MockAdapter.ts
@@ -113,7 +113,12 @@ export default class MockAdapter
         'mockADTInstanceResourceName.api.wcus.digitaltwins.azure.net';
     private mockContainerUrl =
         'https://mockStorageAccountName.blob.core.windows.net/mockContainerName';
-    private mockADXConnectionInformation: IADXConnection;
+    private mockADXConnectionInformation: IADXConnection = {
+        kustoClusterUrl:
+            'https://mockKustoClusterName.westus2.kusto.windows.net',
+        kustoDatabaseName: 'mockKustoDatabaseName',
+        kustoTableName: 'mockKustoTableName'
+    };
     private seededRng = seedRandom('cardboard seed');
     private mockTwinPropertiesMap: {
         [id: string]: Record<string, unknown>;
@@ -1116,7 +1121,7 @@ export default class MockAdapter
                         .split(' and Key == '); // get the part of the query where there is twin id and property information
                     const twinId = idAndPropertyPart[0].replace(/'/g, ''); // get the id and replace the single quote characters around the string
                     const twinProperty = idAndPropertyPart[1]
-                        .split(' | order by')[0]
+                        .split(' | ')[0]
                         .replace(/'/g, ''); // get the twin property and replace the single quote characters around the string
 
                     mockData.push({

diff --git a/src/Components/ADT3DSceneBuilder/Internal/Behaviors/Twins/BehaviorTwinAliasForm.tsx b/src/Components/ADT3DSceneBuilder/Internal/Behaviors/Twins/BehaviorTwinAliasForm.tsx
@@ -277,7 +277,7 @@ const BehaviorTwinAliasForm: React.FC<{
                                             disableDropdownDescription={true}
                                             dropdownLabel={element.displayName}
                                             dropdownLabelIconName={'Shapes'}
-                                            handleSelectTwinId={(
+                                            onSelectTwinId={(
                                                 selectedTwinId: string
                                             ) => {
                                                 handleTwinSelect(

diff --git a/src/Components/ADT3DSceneBuilder/Internal/Elements/ElementForm.tsx b/src/Components/ADT3DSceneBuilder/Internal/Elements/ElementForm.tsx
@@ -299,7 +299,7 @@ const SceneElementForm: React.FC<IADT3DSceneBuilderElementFormProps> = ({
                             <Stack tokens={{ childrenGap: 8 }}>
                                 <TwinSearch
                                     adapter={adapter}
-                                    handleSelectTwinId={handleSelectTwinId}
+                                    onSelectTwinId={handleSelectTwinId}
                                     initialSelectedValue={
                                         elementFormState.elementToEdit
                                             ?.primaryTwinID

diff --git a/src/Components/ADT3DSceneBuilder/Internal/Elements/Internal/ElementTwinAliasForm.tsx b/src/Components/ADT3DSceneBuilder/Internal/Elements/Internal/ElementTwinAliasForm.tsx
@@ -133,7 +133,7 @@ const ElementTwinAliasForm: React.FC = () => {
                     adapter={adapter}
                     dropdownLabel={t('twinId')}
                     dropdownLabelIconName={'Shapes'}
-                    handleSelectTwinId={handleTwinSelect}
+                    onSelectTwinId={handleTwinSelect}
                     initialSelectedValue={formData.twinId}
                     isInspectorDisabled={!formData.twinId}
                     twinId={formData.twinId}

diff --git a/...ADT3DSceneBuilder/Internal/VisualRuleForm/Internal/ConditionsCallout/ConditionSummary.tsx b/...ADT3DSceneBuilder/Internal/VisualRuleForm/Internal/ConditionsCallout/ConditionSummary.tsx
@@ -17,8 +17,8 @@ import {
 import { BoundaryType } from './BoundaryInput.types';
 import { getStyles } from './ConditionSummary.styles';
 import i18n from '../../../../../../i18n';
-import { isNumericType } from '../../VisualRuleFormUtility';
 import { useExtendedTheme } from '../../../../../../Models/Hooks/useExtendedTheme';
+import { isNumericType } from '../../../../../../Models/Classes/3DVConfig';
 
 const ROOT_LOC = '3dSceneBuilder.visualRuleForm';
 const LOC_KEYS = {

diff --git a/src/Components/ADT3DSceneBuilder/Internal/VisualRuleForm/VisualRuleForm.tsx b/src/Components/ADT3DSceneBuilder/Internal/VisualRuleForm/VisualRuleForm.tsx
@@ -22,7 +22,10 @@ import React, {
     useState
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getDefaultVisualRule } from '../../../../Models/Classes/3DVConfig';
+import {
+    getDefaultVisualRule,
+    isNumericType
+} from '../../../../Models/Classes/3DVConfig';
 import { DTDLPropertyIconographyMap } from '../../../../Models/Constants/Constants';
 import { useBehaviorFormContext } from '../../../../Models/Context/BehaviorFormContext/BehaviorFormContext';
 import {
@@ -60,7 +63,6 @@ import {
     IVisualRuleFormStyles,
     IVisualRuleFormStylesProps
 } from './VisualRuleForm.types';
-import { isNumericType } from './VisualRuleFormUtility';
 
 const getClassNames = classNamesFunction<
     IVisualRuleFormStylesProps,

diff --git a/src/Components/ADT3DSceneBuilder/Internal/VisualRuleForm/VisualRuleFormUtility.ts b/src/Components/ADT3DSceneBuilder/Internal/VisualRuleForm/VisualRuleFormUtility.ts
@@ -95,17 +95,6 @@ export const getValuesFromMap = (
     }
 };
 
-/** Check if property type is numeric */
-export const isNumericType = (type: IDTDLPropertyType): boolean => {
-    const numericTypes: IDTDLPropertyType[] = [
-        'double',
-        'float',
-        'integer',
-        'long'
-    ];
-    return numericTypes.includes(type);
-};
-
 /** Get color for new condition */
 export const getNextColor = (
     valueRanges: IValueRange[],

diff --git a/src/Components/AutoComplete/AutoComplete.tsx b/src/Components/AutoComplete/AutoComplete.tsx
@@ -46,6 +46,7 @@ export interface IAutoCompleteProps {
     ) => string;
     required?: boolean;
     isLoading?: boolean;
+    isDisabled?: boolean;
 }
 
 export function sleep(ms: number) {
@@ -65,7 +66,8 @@ export const AutoComplete: React.FC<IAutoCompleteProps> = ({
     getItems,
     onSelected,
     required = false,
-    isLoading = false
+    isLoading = false,
+    isDisabled = false
 }) => {
     const [selectedItemIndex, setSelectedItemIndex] = useState(-1);
     const [calloutVisible, setCalloutVisible] = useState(false);
@@ -250,7 +252,7 @@ export const AutoComplete: React.FC<IAutoCompleteProps> = ({
                 validateOnFocusOut={true}
                 required={required}
                 componentRef={textFieldRef}
-                disabled={isLoading}
+                disabled={isDisabled || isLoading}
             />
             <Callout
                 styles={{ root: { marginTop: topRef.current } }}

diff --git a/src/Components/AutoComplete/Intellisense.tsx b/src/Components/AutoComplete/Intellisense.tsx
@@ -14,6 +14,7 @@ export interface IIntellisenseProps {
     getPropertyNames?: GetPropertyNamesFunc;
     onChange: (value: string) => void;
     isLoading?: boolean;
+    isDisabled?: boolean;
 }
 
 export const separators = '+*&|(^/-).><={} \n';
@@ -64,7 +65,8 @@ export const Intellisense: React.FC<IIntellisenseProps> = ({
     defaultValue,
     getPropertyNames,
     onChange,
-    isLoading = false
+    isLoading = false,
+    isDisabled = false
 }) => {
     const [value, setValue] = useState(defaultValue || '');
 
@@ -227,6 +229,7 @@ export const Intellisense: React.FC<IIntellisenseProps> = ({
                 }}
                 {...autoCompleteProps}
                 isLoading={isLoading}
+                isDisabled={isDisabled}
             />
         </div>
     );

diff --git a/src/Components/BehaviorsModal/Internal/Widgets/DataHistoryWidget/DataHistoryWidget.tsx b/src/Components/BehaviorsModal/Internal/Widgets/DataHistoryWidget/DataHistoryWidget.tsx
@@ -22,7 +22,7 @@ import {
     BehaviorModalMode,
     DTwin,
     IADXConnection,
-    IDataHistoryWidgetTimeSeriesTwin,
+    IDataHistoryTimeSeriesTwin,
     TimeSeriesData
 } from '../../../../../Models/Constants';
 import { useTimeSeriesData } from '../../../../../Models/Hooks/useTimeSeriesData';
@@ -259,7 +259,7 @@ const DataHistoryWidget: React.FC<IDataHistoryWidgetProps> = ({
 const getTwinIdPropertyMap = (
     timeSeries: IDataHistoryTimeSeries,
     twins: Record<string, DTwin>
-): Array<IDataHistoryWidgetTimeSeriesTwin> =>
+): Array<IDataHistoryTimeSeriesTwin> =>
     twins
         ? timeSeries.map((ts) => {
               const splittedArray = ts.expression?.split('.'); // expression is in [PrimaryTwin.Temperature] or [PrimaryTwin.Status.Temperature] nested propery format
@@ -269,7 +269,8 @@ const getTwinIdPropertyMap = (
                       return {
                           label: ts.label,
                           twinId: twins[alias]?.$dtId,
-                          twinPropertyName: propertyPath.join('.')
+                          twinPropertyName: propertyPath.join('.'),
+                          twinPropertyType: ts.propertyType
                       };
                   }
               }
@@ -281,7 +282,7 @@ const getTwinIdPropertyMap = (
  */
 const transformADXTimeSeriesToHighChartsSeries = (
     adxTimeSeries: Array<ADXTimeSeries>,
-    twinIdPropertyMap: Array<IDataHistoryWidgetTimeSeriesTwin>
+    twinIdPropertyMap: Array<IDataHistoryTimeSeriesTwin>
 ): Array<IHighChartSeriesData> =>
     adxTimeSeries && twinIdPropertyMap
         ? adxTimeSeries.map(

diff --git a/src/Components/CardboardList/CardboardList.types.ts b/src/Components/CardboardList/CardboardList.types.ts
@@ -38,6 +38,7 @@ type IListItemBaseProps<T> = {
     iconStart?:
         | {
               name: IIconNames;
+              color?: string;
           }
         | ((item: T) => React.ReactElement);
     /** id attribute to attach to the list item button */

diff --git a/src/Components/CardboardList/CardboardListItem.styles.ts b/src/Components/CardboardList/CardboardListItem.styles.ts
@@ -29,7 +29,7 @@ export const classNames = {
     separator: `${classPrefix}-separator`
 };
 export const getStyles = memoizeFunction(
-    (theme: Theme, isMenuOpen: boolean) => {
+    (theme: Theme, isMenuOpen: boolean, iconColor?: string) => {
         const ellipseStyles = {
             overflow: 'hidden',
             whiteSpace: 'nowrap',
@@ -53,7 +53,10 @@ export const getStyles = memoizeFunction(
                 classNames.icon,
                 {
                     marginRight: 8,
-                    fontSize: StyleConstants.icons.size16
+                    fontSize: StyleConstants.icons.size16,
+                    ...(iconColor && {
+                        color: iconColor
+                    })
                 } as IStyle
             ],
             iconButton: [

diff --git a/src/Components/CardboardList/CardboardListItem.tsx b/src/Components/CardboardList/CardboardListItem.tsx
@@ -89,7 +89,13 @@ export const CardboardListItem = <T extends unknown>(
     );
 
     const theme = useTheme();
-    const classNames = getStyles(theme, isMenuOpen);
+    const classNames = getStyles(
+        theme,
+        isMenuOpen,
+        iconStart && typeof iconStart !== 'function'
+            ? iconStart.color
+            : undefined
+    );
     const buttonStyles = getButtonStyles(
         itemType,
         isSelected,
@@ -120,16 +126,17 @@ export const CardboardListItem = <T extends unknown>(
                             />
                         </>
                     )}
-                    {typeof iconStart === 'function' && iconStart(item)}
-                    {showStartIcon &&
-                        (typeof iconStart.name === 'string' ? (
-                            <FontIcon
-                                iconName={iconStart.name}
-                                className={classNames.icon}
-                            />
-                        ) : (
-                            iconStart.name
-                        ))}
+                    {typeof iconStart === 'function'
+                        ? iconStart(item)
+                        : showStartIcon &&
+                          (typeof iconStart.name === 'string' ? (
+                              <FontIcon
+                                  iconName={iconStart.name}
+                                  className={classNames.icon}
+                              />
+                          ) : (
+                              iconStart.name
+                          ))}
                     <div className={classNames.textContainer}>
                         <div
                             className={classNames.primaryText}

diff --git a/src/Components/CardboardModal/CardboardModal.tsx b/src/Components/CardboardModal/CardboardModal.tsx
@@ -128,10 +128,12 @@ const CardboardModal: React.FC<ICardboardModalProps> = (props) => {
                                 onClick={onDismiss}
                                 styles={classNames.subComponentStyles.cancelButton?.()}
                             />
-                            <PrimaryButton
-                                {...footerPrimaryButtonProps}
-                                styles={classNames.subComponentStyles.primaryButton?.()}
-                            />
+                            {footerPrimaryButtonProps && (
+                                <PrimaryButton
+                                    {...footerPrimaryButtonProps}
+                                    styles={classNames.subComponentStyles.primaryButton?.()}
+                                />
+                            )}
                         </Stack>
                     </Stack>
                 </div>

diff --git a/src/Components/CardboardModal/CardboardModal.types.ts b/src/Components/CardboardModal/CardboardModal.types.ts
@@ -24,7 +24,7 @@ export interface ICardboardModalProps {
         linkProps?: ILinkProps;
     };
     /** click handle for the primary footer button */
-    footerPrimaryButtonProps: IButtonProps;
+    footerPrimaryButtonProps?: 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
@@ -0,0 +1,36 @@
+import React from 'react';
+import { getDefaultStoryDecorator } from '../../Models/Services/StoryUtilities';
+import DataHistoryExplorer from './DataHistoryExplorer';
+import { IDataHistoryExplorerProps } from './DataHistoryExplorer.types';
+import useAuthParams from '../../../.storybook/useAuthParams';
+import MsalAuthService from '../../Models/Services/MsalAuthService';
+import ADTDataHistoryAdapter from '../../Adapters/ADTDataHistoryAdapter';
+
+const wrapperStyle = { width: '100%', height: '500px', padding: 8 };
+
+export default {
+    title: 'Components/DataHistoryExplorer',
+    component: DataHistoryExplorer,
+    decorators: [
+        getDefaultStoryDecorator<IDataHistoryExplorerProps>(wrapperStyle)
+    ]
+};
+
+export const ADT = (args) => {
+    const authenticationParameters = useAuthParams();
+    return !authenticationParameters ? (
+        <div></div>
+    ) : (
+        <DataHistoryExplorer
+            {...args}
+            adapter={
+                new ADTDataHistoryAdapter(
+                    new MsalAuthService(
+                        authenticationParameters.adt.aadParameters
+                    ),
+                    authenticationParameters.adt.hostUrl
+                )
+            }
+        />
+    );
+};