Skip to content

Commit c08a2b6

Browse files
jackiehanyangjackiehanyang
committed
read dataSourceId from url instead of passing it as a prop
Signed-off-by: Jackie Han <jkhanjob@gmail.com>
1 parent 7b428f8 commit c08a2b6

File tree

18 files changed

+168
-182
lines changed

18 files changed

+168
-182
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

+6-4
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ import {
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('dataSourceId') || '';
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

+4-2
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,17 @@ 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';
3637
export interface AnomaliesDistributionChartProps {
3738
selectedDetectors: DetectorListItem[];
38-
dataSourceId?: string;
3939
}
4040

4141
export const AnomaliesDistributionChart = (
4242
props: AnomaliesDistributionChartProps
4343
) => {
4444
const dispatch = useDispatch();
45+
const location = useLocation();
46+
const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
4547

4648
const [anomalyDistribution, setAnomalyDistribution] = useState(
4749
[] as object[]
@@ -67,7 +69,7 @@ export const AnomaliesDistributionChart = (
6769
await getAnomalyDistributionForDetectorsByTimeRange(
6870
searchResults,
6971
props.selectedDetectors,
70-
props.dataSourceId,
72+
dataSourceId,
7173
timeRange,
7274
dispatch,
7375
0,

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@ import {
5454
import { 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('dataSourceId') || '';
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

+4-3
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,27 @@ 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';
2222
interface DetectorConfigProps extends RouteComponentProps {
2323
detectorId: string;
24-
dataSourceId: string;
2524
onEditFeatures(): void;
2625
onEditDetector(): void;
2726
}
2827

2928
export function DetectorConfig(props: DetectorConfigProps) {
3029
const dispatch = useDispatch();
30+
const location = useLocation();
31+
const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
3132
const detector = useSelector(
3233
(state: AppState) => state.ad.detectors[props.detectorId]
3334
);
3435

3536
useEffect(() => {
36-
dispatch(getDetector(props.detectorId, props.dataSourceId));
37+
dispatch(getDetector(props.detectorId, dataSourceId));
3738
}, []);
3839

3940
return (

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

+3-8
Original file line numberDiff line numberDiff line change
@@ -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('dataSourceId') || '';
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

+3-4
Original file line numberDiff line numberDiff line change
@@ -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('dataSourceId') || '';
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
]

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
import { get, isEmpty } from 'lodash';
2929
import React, { useEffect, Fragment, useState } from 'react';
3030
import { useSelector, useDispatch } from 'react-redux';
31-
import { RouteComponentProps } from 'react-router';
31+
import { RouteComponentProps, useLocation } from 'react-router';
3232
import { AppState } from '../../../redux/reducers';
3333
import {
3434
BREADCRUMBS,
@@ -67,11 +67,11 @@ import { SampleIndexDetailsCallout } from '../../Overview/components/SampleIndex
6767
import { CoreStart } from '../../../../../../src/core/public';
6868
import { CoreServicesContext } from '../../../components/CoreServices/CoreServices';
6969
import { DEFAULT_SHINGLE_SIZE } from '../../../utils/constants';
70+
import { getDataSourcePlugin } from '../../../../public/services';
71+
7072

7173
interface AnomalyResultsProps extends RouteComponentProps {
7274
detectorId: string;
73-
dataSourceId: string;
74-
dataSourceEnabled: boolean;
7575
onStartDetector(): void;
7676
onStopDetector(): void;
7777
onSwitchToConfiguration(): void;
@@ -82,24 +82,26 @@ export function AnomalyResults(props: AnomalyResultsProps) {
8282
const core = React.useContext(CoreServicesContext) as CoreStart;
8383
const dispatch = useDispatch();
8484
const detectorId = props.detectorId;
85-
const dataSourceId = props.dataSourceId;
8685
const detector = useSelector(
8786
(state: AppState) => state.ad.detectors[detectorId]
8887
);
88+
const dataSourceEnabled = getDataSourcePlugin().dataSourceEnabled;
89+
const location = useLocation();
90+
const dataSourceId = new URLSearchParams(location.search).get('dataSourceId') || '';
8991

9092
useEffect(() => {
9193
core.chrome.setBreadcrumbs([
9294
BREADCRUMBS.ANOMALY_DETECTOR,
9395
BREADCRUMBS.DETECTORS,
9496
{ text: detector ? detector.name : '' },
9597
]);
96-
if (props.dataSourceEnabled ? dataSourceId : true) {
98+
if (dataSourceEnabled ? dataSourceId : true) {
9799
dispatch(getDetector(detectorId, dataSourceId));
98100
}
99101
}, []);
100102

101103
const fetchDetector = async () => {
102-
if (props.dataSourceEnabled ? dataSourceId : true) {
104+
if (dataSourceEnabled ? dataSourceId : true) {
103105
dispatch(getDetector(detectorId, dataSourceId));
104106
}
105107
};
@@ -559,12 +561,10 @@ export function AnomalyResults(props: AnomalyResultsProps) {
559561
) : null}
560562
<AnomalyResultsLiveChart
561563
detector={detector}
562-
dataSourceId={dataSourceId}
563564
/>
564565
<EuiSpacer size="l" />
565566
<AnomalyHistory
566567
detector={detector}
567-
dataSourceId={dataSourceId}
568568
monitor={monitor}
569569
isFeatureDataMissing={isDetectorMissingData}
570570
isNotSample={true}

0 commit comments

Comments
 (0)