read dataSourceId from url instead of passing it as a prop

Signed-off-by: Jackie Han <[email protected]>
opensearch-project · Apr 17, 2024 · c08a2b6 · c08a2b6
1 parent 7b428f8
commit c08a2b6
Show file tree

Hide file tree

Showing 18 changed files with 168 additions and 182 deletions.
diff --git a/public/models/interfaces.ts b/public/models/interfaces.ts
@@ -205,7 +205,6 @@ export type Detector = {
   taskState?: DETECTOR_STATE;
   taskProgress?: number;
   taskError?: string;
-  dataSourceId? : string;
 };
 
 export type DetectorListItem = {
@@ -219,7 +218,6 @@ export type DetectorListItem = {
   lastUpdateTime: number;
   enabledTime?: number;
   detectorType?: string;
-  dataSourceId?: string;
 };
 
 export type EntityData = {

diff --git a/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx b/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx
@@ -85,7 +85,6 @@ export interface AnomaliesChartProps {
   selectedCategoryFields?: any[];
   handleCategoryFieldsChange(selectedOptions: any[]): void;
   openOutOfRangeCallOut?: boolean;
-  dataSourceId?: string;
 }
 
 export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
@@ -346,7 +345,6 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
                               isHCDetector={props.isHCDetector}
                               isHistorical={props.isHistorical}
                               selectedHeatmapCell={props.selectedHeatmapCell}
-                              dataSourceId={props.dataSourceId}
                             />,
                             <EuiSpacer size="m" />,
                             <FeatureBreakDown
@@ -401,7 +399,6 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
               isHistorical={props.isHistorical}
               onDatePickerRangeChange={handleDatePickerRangeChange}
               openOutOfRangeCallOut={showOutOfRangeCallOut}
-              dataSourceId={props.dataSourceId}
             />
           )}
         </EuiFlexGroup>

diff --git a/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx b/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx
@@ -89,6 +89,7 @@ import {
   DETECTOR_STATE,
 } from '../../../../server/utils/constants';
 import { ENTITY_COLORS } from '../../DetectorResults/utils/constants';
+import { useLocation } from 'react-router-dom';
 
 interface AnomalyDetailsChartProps {
   onDateRangeChange(
@@ -113,12 +114,13 @@ interface AnomalyDetailsChartProps {
   selectedHeatmapCell?: HeatmapCell;
   onDatePickerRangeChange?(startDate: number, endDate: number): void;
   openOutOfRangeCallOut?: boolean;
-  dataSourceId?: string;
 }
 
 export const AnomalyDetailsChart = React.memo(
   (props: AnomalyDetailsChartProps) => {
     const dispatch = useDispatch();
+    const location = useLocation();
+    const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
     const [showAlertsFlyout, setShowAlertsFlyout] = useState<boolean>(false);
     const [alertAnnotations, setAlertAnnotations] = useState<any[]>([]);
     const [isLoadingAlerts, setIsLoadingAlerts] = useState<boolean>(false);
@@ -175,7 +177,7 @@ export const AnomalyDetailsChart = React.memo(
         zoomRange.endDate,
         taskId
       );
-      dispatch(searchResults(anomalyDataRangeQuery, resultIndex, props.dataSourceId, true))
+      dispatch(searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true))
         .then((response: any) => {
           // Only retrieve buckets that are in the anomaly results range. This is so
           // we don't show aggregate results for where there is no data at all
@@ -194,7 +196,7 @@ export const AnomalyDetailsChart = React.memo(
             taskId,
             selectedAggId
           );
-          dispatch(searchResults(historicalAggQuery, resultIndex, props.dataSourceId, true))
+          dispatch(searchResults(historicalAggQuery, resultIndex, dataSourceId, true))
             .then((response: any) => {
               const aggregatedAnomalies = parseHistoricalAggregatedAnomalies(
                 response,
@@ -230,7 +232,7 @@ export const AnomalyDetailsChart = React.memo(
           zoomRange.endDate,
           taskId
         );
-        dispatch(searchResults(anomalyDataRangeQuery, resultIndex, props.dataSourceId, true))
+        dispatch(searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true))
           .then((response: any) => {
             const dataStartDate = get(
               response,

diff --git a/public/pages/AnomalyCharts/containers/AnomalyOccurrenceChart.tsx b/public/pages/AnomalyCharts/containers/AnomalyOccurrenceChart.tsx
@@ -44,7 +44,6 @@ interface AnomalyOccurrenceChartProps {
   isHCDetector?: boolean;
   isHistorical?: boolean;
   selectedHeatmapCell?: HeatmapCell;
-  dataSourceId?: string;
 }
 
 export const AnomalyOccurrenceChart = React.memo(
@@ -83,7 +82,6 @@ export const AnomalyOccurrenceChart = React.memo(
           isHCDetector={props.isHCDetector}
           isHistorical={props.isHistorical}
           selectedHeatmapCell={props.selectedHeatmapCell}
-          dataSourceId={props.dataSourceId}
         />
         {props.isHCDetector && props.selectedHeatmapCell === undefined ? (
           <EuiBadge className={'anomaly-detail-chart-center'} color={'default'}>

diff --git a/public/pages/Dashboard/Components/AnomaliesDistribution.tsx b/public/pages/Dashboard/Components/AnomaliesDistribution.tsx
@@ -33,15 +33,17 @@ import { get, isEmpty } from 'lodash';
 import { AD_DOC_FIELDS } from '../../../../server/utils/constants';
 import { ALL_CUSTOM_AD_RESULT_INDICES } from '../../utils/constants';
 import { searchResults } from '../../../redux/reducers/anomalyResults';
+import { useLocation } from 'react-router-dom';
 export interface AnomaliesDistributionChartProps {
   selectedDetectors: DetectorListItem[];
-  dataSourceId?: string;
 }
 
 export const AnomaliesDistributionChart = (
   props: AnomaliesDistributionChartProps
 ) => {
   const dispatch = useDispatch();
+  const location = useLocation();
+  const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
 
   const [anomalyDistribution, setAnomalyDistribution] = useState(
     [] as object[]
@@ -67,7 +69,7 @@ export const AnomaliesDistributionChart = (
       await getAnomalyDistributionForDetectorsByTimeRange(
         searchResults,
         props.selectedDetectors,
-        props.dataSourceId,
+        dataSourceId,
         timeRange,
         dispatch,
         0,

diff --git a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
@@ -54,10 +54,10 @@ import {
 import { MAX_ANOMALIES, SPACE_STR } from '../../../utils/constants';
 import { ALL_CUSTOM_AD_RESULT_INDICES } from '../../utils/constants';
 import { searchResults } from '../../../redux/reducers/anomalyResults';
+import { useLocation } from 'react-router-dom';
 
 export interface AnomaliesLiveChartProps {
   selectedDetectors: DetectorListItem[];
-  dataSourceId?: string;
 }
 
 interface LiveTimeRangeState {
@@ -69,6 +69,8 @@ const MAX_LIVE_DETECTORS = 10;
 
 export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
   const dispatch = useDispatch();
+  const location = useLocation();
+  const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
 
   const [liveTimeRange, setLiveTimeRange] = useState<LiveTimeRangeState>({
     startDateTime: moment().subtract(31, 'minutes'),
@@ -104,7 +106,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
         true,
         ALL_CUSTOM_AD_RESULT_INDICES,
         false,
-        props.dataSourceId
+        dataSourceId
       );
     } catch (err) {
       console.log(
@@ -129,7 +131,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
         false,
         ALL_CUSTOM_AD_RESULT_INDICES,
         false,
-        props.dataSourceId
+        dataSourceId
       );
     setLiveAnomalyData(latestLiveAnomalyResult);
 

diff --git a/public/pages/Dashboard/Container/DashboardOverview.tsx b/public/pages/Dashboard/Container/DashboardOverview.tsx
@@ -313,14 +313,12 @@ export function DashboardOverview(props: OverviewProps) {
             </EuiFlexGroup>
             <EuiSpacer />
             <AnomaliesLiveChart 
-              selectedDetectors={currentDetectors}
-              dataSourceId={MDSOverviewState.selectedDataSourceId} />
+              selectedDetectors={currentDetectors} />
             <EuiSpacer />
             <EuiFlexGroup justifyContent="spaceBetween">
               <EuiFlexItem grow={6}>
                 <AnomaliesDistributionChart
                   selectedDetectors={currentDetectors}
-                  dataSourceId={MDSOverviewState.selectedDataSourceId}
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={3}>

diff --git a/public/pages/DetectorConfig/containers/DetectorConfig.tsx b/public/pages/DetectorConfig/containers/DetectorConfig.tsx
@@ -14,26 +14,27 @@ import { DetectorDefinitionFields } from '../../ReviewAndCreate/components/Detec
 import { Features } from './Features';
 import { DetectorJobs } from './DetectorJobs';
 import { EuiSpacer, EuiPage, EuiPageBody } from '@elastic/eui';
-import { RouteComponentProps } from 'react-router';
+import { RouteComponentProps, useLocation } from 'react-router';
 import { AppState } from '../../../redux/reducers';
 import { useSelector, useDispatch } from 'react-redux';
 import { getDetector } from '../../../redux/reducers/ad';
 import { EuiLoadingSpinner } from '@elastic/eui';
 interface DetectorConfigProps extends RouteComponentProps {
   detectorId: string;
-  dataSourceId: string;
   onEditFeatures(): void;
   onEditDetector(): void;
 }
 
 export function DetectorConfig(props: DetectorConfigProps) {
   const dispatch = useDispatch();
+  const location = useLocation();
+  const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
   const detector = useSelector(
     (state: AppState) => state.ad.detectors[props.detectorId]
   );
 
   useEffect(() => {
-    dispatch(getDetector(props.detectorId, props.dataSourceId));
+    dispatch(getDetector(props.detectorId, dataSourceId));
   }, []);
 
   return (

diff --git a/public/pages/DetectorDetail/containers/DetectorDetail.tsx b/public/pages/DetectorDetail/containers/DetectorDetail.tsx
@@ -108,8 +108,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
   const detectorId = get(props, 'match.params.detectorId', '') as string;
   const dataSourceEnabled = getDataSourcePlugin().dataSourceEnabled;
   const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const dataSourceId = queryParams.get('dataSourceId') as string;
+  const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
 
   const { detector, hasError, isLoadingDetector, errorMessage } =
     useFetchDetectorInfo(detectorId, dataSourceId);
@@ -162,7 +161,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
   // Getting all visible indices. Will re-fetch if changes to the detector (e.g.,
   // detector starts, result index recreated or user switches tabs to re-fetch detector)
   useEffect(() => {
-    if (props.dataSourceEnabled ? dataSourceId : true) {
+    if (dataSourceEnabled ? dataSourceId : true) {
       const getInitialIndices = async () => {
         await dispatch(getIndices('', dataSourceId)).catch((error: any) => {
           console.error(error);
@@ -373,7 +372,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
           }}
         >
 
-        {props.dataSourceEnabled && (
+        {dataSourceEnabled && (
           <DataSourceMenu
             setMenuMountPoint={props.setActionMenu}
             componentType={'DataSourceView'}
@@ -566,8 +565,6 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
             <AnomalyResults
               {...resultsProps}
               detectorId={detectorId}
-              dataSourceId={dataSourceId}
-              dataSourceEnabled={props.dataSourceEnabled}
               onStartDetector={() => handleStartAdJob(detectorId)}
               onStopDetector={() => handleStopAdJob(detectorId)}
               onSwitchToConfiguration={handleSwitchToConfigurationTab}
@@ -582,7 +579,6 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
             <HistoricalDetectorResults
               {...configProps}
               detectorId={detectorId}
-              dataSourceId={dataSourceId}
             />
           )}
         />
@@ -593,7 +589,6 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
             <DetectorConfig
               {...configProps}
               detectorId={detectorId}
-              dataSourceId={dataSourceId}
               onEditFeatures={handleEditFeature}
               onEditDetector={handleEditDetector}
             />

diff --git a/public/pages/DetectorResults/containers/AnomalyHistory.tsx b/public/pages/DetectorResults/containers/AnomalyHistory.tsx
@@ -95,10 +95,10 @@ import {
 import { CoreStart } from '../../../../../../src/core/public';
 import { CoreServicesContext } from '../../../components/CoreServices/CoreServices';
 import { prettifyErrorMessage } from '../../../../server/utils/helpers';
+import { useLocation } from 'react-router-dom';
 
 interface AnomalyHistoryProps {
   detector: Detector;
-  dataSourceId: string;
   monitor: Monitor | undefined;
   isFeatureDataMissing?: boolean;
   isHistorical?: boolean;
@@ -127,7 +127,8 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
     props.isHistorical && props.detector?.detectionDateRange
       ? props.detector.detectionDateRange.endTime
       : moment().valueOf();
-  const dataSourceId = props.dataSourceId;
+  const location = useLocation();
+  const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
   const [dateRange, setDateRange] = useState<DateRange>({
     startDate: initialStartDate,
     endDate: initialEndDate,
@@ -876,7 +877,6 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
         entityAnomalySummaries={entityAnomalySummaries}
         selectedCategoryFields={selectedCategoryFields}
         handleCategoryFieldsChange={handleCategoryFieldsChange}
-        dataSourceId={dataSourceId}
       >
         <div style={{ padding: '20px' }}>
           {isHCDetector
@@ -920,7 +920,6 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
                   isHCDetector={isHCDetector}
                   isHistorical={props.isHistorical}
                   selectedHeatmapCell={selectedHeatmapCell}
-                  dataSourceId={dataSourceId}
                 />,
                 <EuiSpacer size="m" />,
               ]

diff --git a/public/pages/DetectorResults/containers/AnomalyResults.tsx b/public/pages/DetectorResults/containers/AnomalyResults.tsx
@@ -28,7 +28,7 @@ import {
 import { get, isEmpty } from 'lodash';
 import React, { useEffect, Fragment, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { RouteComponentProps } from 'react-router';
+import { RouteComponentProps, useLocation } from 'react-router';
 import { AppState } from '../../../redux/reducers';
 import {
   BREADCRUMBS,
@@ -67,11 +67,11 @@ import { SampleIndexDetailsCallout } from '../../Overview/components/SampleIndex
 import { CoreStart } from '../../../../../../src/core/public';
 import { CoreServicesContext } from '../../../components/CoreServices/CoreServices';
 import { DEFAULT_SHINGLE_SIZE } from '../../../utils/constants';
+import { getDataSourcePlugin } from '../../../../public/services';
+
 
 interface AnomalyResultsProps extends RouteComponentProps {
   detectorId: string;
-  dataSourceId: string;
-  dataSourceEnabled: boolean;
   onStartDetector(): void;
   onStopDetector(): void;
   onSwitchToConfiguration(): void;
@@ -82,24 +82,26 @@ export function AnomalyResults(props: AnomalyResultsProps) {
   const core = React.useContext(CoreServicesContext) as CoreStart;
   const dispatch = useDispatch();
   const detectorId = props.detectorId;
-  const dataSourceId = props.dataSourceId;
   const detector = useSelector(    
     (state: AppState) => state.ad.detectors[detectorId]
   );
+  const dataSourceEnabled = getDataSourcePlugin().dataSourceEnabled;
+  const location = useLocation();
+  const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
 
   useEffect(() => {
     core.chrome.setBreadcrumbs([
       BREADCRUMBS.ANOMALY_DETECTOR,
       BREADCRUMBS.DETECTORS,
       { text: detector ? detector.name : '' },
     ]);
-    if (props.dataSourceEnabled ? dataSourceId : true) {
+    if (dataSourceEnabled ? dataSourceId : true) {
       dispatch(getDetector(detectorId, dataSourceId));
     }
   }, []);
 
   const fetchDetector = async () => {
-    if (props.dataSourceEnabled ? dataSourceId : true) {
+    if (dataSourceEnabled ? dataSourceId : true) {
       dispatch(getDetector(detectorId, dataSourceId));
     }
   };
@@ -559,12 +561,10 @@ export function AnomalyResults(props: AnomalyResultsProps) {
                   ) : null}
                   <AnomalyResultsLiveChart 
                     detector={detector} 
-                    dataSourceId={dataSourceId}
                   />
                   <EuiSpacer size="l" />
                   <AnomalyHistory
                     detector={detector}
-                    dataSourceId={dataSourceId}
                     monitor={monitor}
                     isFeatureDataMissing={isDetectorMissingData}
                     isNotSample={true}