Skip to content

Commit f166bd2

Browse files
jackiehanyangjackiehanyang
committed
read dataSourceId from the url instead of passing props
Signed-off-by: Jackie Han <jkhanjob@gmail.com>
1 parent 7b428f8 commit f166bd2

File tree

19 files changed

+180
-187
lines changed

19 files changed

+180
-187
lines changed

‎public/models/interfaces.ts

-2
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,6 @@ export type Detector = {
205205
taskState?: DETECTOR_STATE;
206206
taskProgress?: number;
207207
taskError?: string;
208-
dataSourceId? : string;
209208
};
210209

211210
export type DetectorListItem = {
@@ -219,7 +218,6 @@ export type DetectorListItem = {
219218
lastUpdateTime: number;
220219
enabledTime?: number;
221220
detectorType?: string;
222-
dataSourceId?: string;
223221
};
224222

225223
export type EntityData = {

‎public/pages/AnomalyCharts/containers/AnomaliesChart.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@ export interface AnomaliesChartProps {
8585
selectedCategoryFields?: any[];
8686
handleCategoryFieldsChange(selectedOptions: any[]): void;
8787
openOutOfRangeCallOut?: boolean;
88-
dataSourceId?: string;
8988
}
9089

9190
export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
@@ -346,7 +345,6 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
346345
isHCDetector={props.isHCDetector}
347346
isHistorical={props.isHistorical}
348347
selectedHeatmapCell={props.selectedHeatmapCell}
349-
dataSourceId={props.dataSourceId}
350348
/>,
351349
<EuiSpacer size="m" />,
352350
<FeatureBreakDown
@@ -401,7 +399,6 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
401399
isHistorical={props.isHistorical}
402400
onDatePickerRangeChange={handleDatePickerRangeChange}
403401
openOutOfRangeCallOut={showOutOfRangeCallOut}
404-
dataSourceId={props.dataSourceId}
405402
/>
406403
)}
407404
</EuiFlexGroup>

‎public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -81,14 +81,15 @@ import {
8181
} from '../utils/constants';
8282
import { HeatmapCell } from './AnomalyHeatmapChart';
8383
import { ANOMALY_AGG, MIN_END_TIME, MAX_END_TIME } from '../../utils/constants';
84-
import { MAX_HISTORICAL_AGG_RESULTS } from '../../../utils/constants';
84+
import { DATA_SOURCE_ID, MAX_HISTORICAL_AGG_RESULTS } from '../../../utils/constants';
8585
import { searchResults } from '../../../redux/reducers/anomalyResults';
8686
import {
8787
DAY_IN_MILLI_SECS,
8888
WEEK_IN_MILLI_SECS,
8989
DETECTOR_STATE,
9090
} from '../../../../server/utils/constants';
9191
import { ENTITY_COLORS } from '../../DetectorResults/utils/constants';
92+
import { useLocation } from 'react-router-dom';
9293

9394
interface AnomalyDetailsChartProps {
9495
onDateRangeChange(
@@ -113,12 +114,13 @@ interface AnomalyDetailsChartProps {
113114
selectedHeatmapCell?: HeatmapCell;
114115
onDatePickerRangeChange?(startDate: number, endDate: number): void;
115116
openOutOfRangeCallOut?: boolean;
116-
dataSourceId?: string;
117117
}
118118

119119
export const AnomalyDetailsChart = React.memo(
120120
(props: AnomalyDetailsChartProps) => {
121121
const dispatch = useDispatch();
122+
const location = useLocation();
123+
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
122124
const [showAlertsFlyout, setShowAlertsFlyout] = useState<boolean>(false);
123125
const [alertAnnotations, setAlertAnnotations] = useState<any[]>([]);
124126
const [isLoadingAlerts, setIsLoadingAlerts] = useState<boolean>(false);
@@ -175,7 +177,7 @@ export const AnomalyDetailsChart = React.memo(
175177
zoomRange.endDate,
176178
taskId
177179
);
178-
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, props.dataSourceId, true))
180+
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true))
179181
.then((response: any) => {
180182
// Only retrieve buckets that are in the anomaly results range. This is so
181183
// we don't show aggregate results for where there is no data at all
@@ -194,7 +196,7 @@ export const AnomalyDetailsChart = React.memo(
194196
taskId,
195197
selectedAggId
196198
);
197-
dispatch(searchResults(historicalAggQuery, resultIndex, props.dataSourceId, true))
199+
dispatch(searchResults(historicalAggQuery, resultIndex, dataSourceId, true))
198200
.then((response: any) => {
199201
const aggregatedAnomalies = parseHistoricalAggregatedAnomalies(
200202
response,
@@ -230,7 +232,7 @@ export const AnomalyDetailsChart = React.memo(
230232
zoomRange.endDate,
231233
taskId
232234
);
233-
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, props.dataSourceId, true))
235+
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true))
234236
.then((response: any) => {
235237
const dataStartDate = get(
236238
response,

‎public/pages/AnomalyCharts/containers/AnomalyOccurrenceChart.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ interface AnomalyOccurrenceChartProps {
4444
isHCDetector?: boolean;
4545
isHistorical?: boolean;
4646
selectedHeatmapCell?: HeatmapCell;
47-
dataSourceId?: string;
4847
}
4948

5049
export const AnomalyOccurrenceChart = React.memo(
@@ -83,7 +82,6 @@ export const AnomalyOccurrenceChart = React.memo(
8382
isHCDetector={props.isHCDetector}
8483
isHistorical={props.isHistorical}
8584
selectedHeatmapCell={props.selectedHeatmapCell}
86-
dataSourceId={props.dataSourceId}
8785
/>
8886
{props.isHCDetector && props.selectedHeatmapCell === undefined ? (
8987
<EuiBadge className={'anomaly-detail-chart-center'} color={'default'}>

‎public/pages/Dashboard/Components/AnomaliesDistribution.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,18 @@ import { get, isEmpty } from 'lodash';
3333
import { AD_DOC_FIELDS } from '../../../../server/utils/constants';
3434
import { ALL_CUSTOM_AD_RESULT_INDICES } from '../../utils/constants';
3535
import { searchResults } from '../../../redux/reducers/anomalyResults';
36+
import { useLocation } from 'react-router-dom';
37+
import { DATA_SOURCE_ID } from '../../../utils/constants';
3638
export interface AnomaliesDistributionChartProps {
3739
selectedDetectors: DetectorListItem[];
38-
dataSourceId?: string;
3940
}
4041

4142
export const AnomaliesDistributionChart = (
4243
props: AnomaliesDistributionChartProps
4344
) => {
4445
const dispatch = useDispatch();
46+
const location = useLocation();
47+
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
4548

4649
const [anomalyDistribution, setAnomalyDistribution] = useState(
4750
[] as object[]
@@ -67,7 +70,7 @@ export const AnomaliesDistributionChart = (
6770
await getAnomalyDistributionForDetectorsByTimeRange(
6871
searchResults,
6972
props.selectedDetectors,
70-
props.dataSourceId,
73+
dataSourceId,
7174
timeRange,
7275
dispatch,
7376
0,

‎public/pages/Dashboard/Components/AnomaliesLiveChart.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,13 @@ import {
5151
getLatestAnomalyResultsForDetectorsByTimeRange,
5252
getLatestAnomalyResultsByTimeRange,
5353
} from '../utils/utils';
54-
import { MAX_ANOMALIES, SPACE_STR } from '../../../utils/constants';
54+
import { DATA_SOURCE_ID, MAX_ANOMALIES, SPACE_STR } from '../../../utils/constants';
5555
import { ALL_CUSTOM_AD_RESULT_INDICES } from '../../utils/constants';
5656
import { searchResults } from '../../../redux/reducers/anomalyResults';
57+
import { useLocation } from 'react-router-dom';
5758

5859
export interface AnomaliesLiveChartProps {
5960
selectedDetectors: DetectorListItem[];
60-
dataSourceId?: string;
6161
}
6262

6363
interface LiveTimeRangeState {
@@ -69,6 +69,8 @@ const MAX_LIVE_DETECTORS = 10;
6969

7070
export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
7171
const dispatch = useDispatch();
72+
const location = useLocation();
73+
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
7274

7375
const [liveTimeRange, setLiveTimeRange] = useState<LiveTimeRangeState>({
7476
startDateTime: moment().subtract(31, 'minutes'),
@@ -104,7 +106,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
104106
true,
105107
ALL_CUSTOM_AD_RESULT_INDICES,
106108
false,
107-
props.dataSourceId
109+
dataSourceId
108110
);
109111
} catch (err) {
110112
console.log(
@@ -129,7 +131,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
129131
false,
130132
ALL_CUSTOM_AD_RESULT_INDICES,
131133
false,
132-
props.dataSourceId
134+
dataSourceId
133135
);
134136
setLiveAnomalyData(latestLiveAnomalyResult);
135137

‎public/pages/Dashboard/Container/DashboardOverview.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -313,14 +313,12 @@ export function DashboardOverview(props: OverviewProps) {
313313
</EuiFlexGroup>
314314
<EuiSpacer />
315315
<AnomaliesLiveChart
316-
selectedDetectors={currentDetectors}
317-
dataSourceId={MDSOverviewState.selectedDataSourceId} />
316+
selectedDetectors={currentDetectors} />
318317
<EuiSpacer />
319318
<EuiFlexGroup justifyContent="spaceBetween">
320319
<EuiFlexItem grow={6}>
321320
<AnomaliesDistributionChart
322321
selectedDetectors={currentDetectors}
323-
dataSourceId={MDSOverviewState.selectedDataSourceId}
324322
/>
325323
</EuiFlexItem>
326324
<EuiFlexItem grow={3}>

‎public/pages/DetectorConfig/containers/DetectorConfig.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,28 @@ import { DetectorDefinitionFields } from '../../ReviewAndCreate/components/Detec
1414
import { Features } from './Features';
1515
import { DetectorJobs } from './DetectorJobs';
1616
import { EuiSpacer, EuiPage, EuiPageBody } from '@elastic/eui';
17-
import { RouteComponentProps } from 'react-router';
17+
import { RouteComponentProps, useLocation } from 'react-router';
1818
import { AppState } from '../../../redux/reducers';
1919
import { useSelector, useDispatch } from 'react-redux';
2020
import { getDetector } from '../../../redux/reducers/ad';
2121
import { EuiLoadingSpinner } from '@elastic/eui';
22+
import { DATA_SOURCE_ID } from '../../../utils/constants';
2223
interface DetectorConfigProps extends RouteComponentProps {
2324
detectorId: string;
24-
dataSourceId: string;
2525
onEditFeatures(): void;
2626
onEditDetector(): void;
2727
}
2828

2929
export function DetectorConfig(props: DetectorConfigProps) {
3030
const dispatch = useDispatch();
31+
const location = useLocation();
32+
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
3133
const detector = useSelector(
3234
(state: AppState) => state.ad.detectors[props.detectorId]
3335
);
3436

3537
useEffect(() => {
36-
dispatch(getDetector(props.detectorId, props.dataSourceId));
38+
dispatch(getDetector(props.detectorId, dataSourceId));
3739
}, []);
3840

3941
return (

‎public/pages/DetectorDetail/containers/DetectorDetail.tsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import {
4242
import { getIndices } from '../../../redux/reducers/opensearch';
4343
import { getErrorMessage, Listener } from '../../../utils/utils';
4444
import { darkModeEnabled } from '../../../utils/opensearchDashboardsUtils';
45-
import { BREADCRUMBS } from '../../../utils/constants';
45+
import { BREADCRUMBS, DATA_SOURCE_ID } from '../../../utils/constants';
4646
import { DetectorControls } from '../components/DetectorControls';
4747
import { ConfirmModal } from '../components/ConfirmModal/ConfirmModal';
4848
import { useFetchMonitorInfo } from '../hooks/useFetchMonitorInfo';
@@ -108,8 +108,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
108108
const detectorId = get(props, 'match.params.detectorId', '') as string;
109109
const dataSourceEnabled = getDataSourcePlugin().dataSourceEnabled;
110110
const location = useLocation();
111-
const queryParams = new URLSearchParams(location.search);
112-
const dataSourceId = queryParams.get('dataSourceId') as string;
111+
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
113112

114113
const { detector, hasError, isLoadingDetector, errorMessage } =
115114
useFetchDetectorInfo(detectorId, dataSourceId);
@@ -162,7 +161,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
162161
// Getting all visible indices. Will re-fetch if changes to the detector (e.g.,
163162
// detector starts, result index recreated or user switches tabs to re-fetch detector)
164163
useEffect(() => {
165-
if (props.dataSourceEnabled ? dataSourceId : true) {
164+
if (dataSourceEnabled ? dataSourceId : true) {
166165
const getInitialIndices = async () => {
167166
await dispatch(getIndices('', dataSourceId)).catch((error: any) => {
168167
console.error(error);
@@ -373,7 +372,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
373372
}}
374373
>
375374

376-
{props.dataSourceEnabled && (
375+
{dataSourceEnabled && (
377376
<DataSourceMenu
378377
setMenuMountPoint={props.setActionMenu}
379378
componentType={'DataSourceView'}
@@ -566,8 +565,6 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
566565
<AnomalyResults
567566
{...resultsProps}
568567
detectorId={detectorId}
569-
dataSourceId={dataSourceId}
570-
dataSourceEnabled={props.dataSourceEnabled}
571568
onStartDetector={() => handleStartAdJob(detectorId)}
572569
onStopDetector={() => handleStopAdJob(detectorId)}
573570
onSwitchToConfiguration={handleSwitchToConfigurationTab}
@@ -582,7 +579,6 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
582579
<HistoricalDetectorResults
583580
{...configProps}
584581
detectorId={detectorId}
585-
dataSourceId={dataSourceId}
586582
/>
587583
)}
588584
/>
@@ -593,7 +589,6 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
593589
<DetectorConfig
594590
{...configProps}
595591
detectorId={detectorId}
596-
dataSourceId={dataSourceId}
597592
onEditFeatures={handleEditFeature}
598593
onEditDetector={handleEditDetector}
599594
/>

‎public/pages/DetectorResults/containers/AnomalyHistory.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ import {
6565
TOP_CHILD_ENTITIES_TO_FETCH,
6666
} from '../utils/constants';
6767
import { MIN_IN_MILLI_SECS } from '../../../../server/utils/constants';
68-
import { MAX_ANOMALIES } from '../../../utils/constants';
68+
import { DATA_SOURCE_ID, MAX_ANOMALIES } from '../../../utils/constants';
6969
import {
7070
searchResults,
7171
getDetectorResults,
@@ -95,10 +95,10 @@ import {
9595
import { CoreStart } from '../../../../../../src/core/public';
9696
import { CoreServicesContext } from '../../../components/CoreServices/CoreServices';
9797
import { prettifyErrorMessage } from '../../../../server/utils/helpers';
98+
import { useLocation } from 'react-router-dom';
9899

99100
interface AnomalyHistoryProps {
100101
detector: Detector;
101-
dataSourceId: string;
102102
monitor: Monitor | undefined;
103103
isFeatureDataMissing?: boolean;
104104
isHistorical?: boolean;
@@ -127,7 +127,8 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
127127
props.isHistorical && props.detector?.detectionDateRange
128128
? props.detector.detectionDateRange.endTime
129129
: moment().valueOf();
130-
const dataSourceId = props.dataSourceId;
130+
const location = useLocation();
131+
const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
131132
const [dateRange, setDateRange] = useState<DateRange>({
132133
startDate: initialStartDate,
133134
endDate: initialEndDate,
@@ -876,7 +877,6 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
876877
entityAnomalySummaries={entityAnomalySummaries}
877878
selectedCategoryFields={selectedCategoryFields}
878879
handleCategoryFieldsChange={handleCategoryFieldsChange}
879-
dataSourceId={dataSourceId}
880880
>
881881
<div style={{ padding: '20px' }}>
882882
{isHCDetector
@@ -920,7 +920,6 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
920920
isHCDetector={isHCDetector}
921921
isHistorical={props.isHistorical}
922922
selectedHeatmapCell={selectedHeatmapCell}
923-
dataSourceId={dataSourceId}
924923
/>,
925924
<EuiSpacer size="m" />,
926925
]

0 commit comments

Comments
 (0)