Skip to content

Commit c2d97dc

Browse files
jackiehanyangjackiehanyang
committed
Support MDS on List, Detail, Dashboard, Overview pages
Signed-off-by: Jackie Han <jkhanjob@gmail.com>
1 parent c363632 commit c2d97dc

33 files changed

+603
-457
lines changed

‎public/anomaly_detection_app.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,11 @@ import { Main } from './pages/main';
1717
import { Provider } from 'react-redux';
1818
import configureStore from './redux/configureStore';
1919
import { CoreServicesContext } from './components/CoreServices/CoreServices';
20-
import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
2120
import { DataSourcePluginSetup } from '../../../src/plugins/data_source/public';
2221

2322
export function renderApp(
2423
coreStart: CoreStart,
2524
params: AppMountParameters,
26-
dataSourceManagement: DataSourceManagementPluginSetup,
2725
dataSource: DataSourcePluginSetup
2826
) {
2927
const http = coreStart.http;
@@ -45,7 +43,6 @@ export function renderApp(
4543
<CoreServicesContext.Provider value={coreStart}>
4644
<Main
4745
dataSourceEnabled={dataSource.dataSourceEnabled}
48-
dataSourceManagement={dataSourceManagement}
4946
setHeaderActionMenu={params.setHeaderActionMenu}
5047
{...props}
5148
/>

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

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

9091
export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
@@ -345,6 +346,7 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
345346
isHCDetector={props.isHCDetector}
346347
isHistorical={props.isHistorical}
347348
selectedHeatmapCell={props.selectedHeatmapCell}
349+
dataSourceId={props.dataSourceId}
348350
/>,
349351
<EuiSpacer size="m" />,
350352
<FeatureBreakDown
@@ -399,6 +401,7 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
399401
isHistorical={props.isHistorical}
400402
onDatePickerRangeChange={handleDatePickerRangeChange}
401403
openOutOfRangeCallOut={showOutOfRangeCallOut}
404+
dataSourceId={props.dataSourceId}
402405
/>
403406
)}
404407
</EuiFlexGroup>

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ interface AnomalyDetailsChartProps {
113113
selectedHeatmapCell?: HeatmapCell;
114114
onDatePickerRangeChange?(startDate: number, endDate: number): void;
115115
openOutOfRangeCallOut?: boolean;
116+
dataSourceId?: string;
116117
}
117118

118119
export const AnomalyDetailsChart = React.memo(
@@ -174,7 +175,7 @@ export const AnomalyDetailsChart = React.memo(
174175
zoomRange.endDate,
175176
taskId
176177
);
177-
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, true))
178+
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, props.dataSourceId, true))
178179
.then((response: any) => {
179180
// Only retrieve buckets that are in the anomaly results range. This is so
180181
// we don't show aggregate results for where there is no data at all
@@ -193,7 +194,7 @@ export const AnomalyDetailsChart = React.memo(
193194
taskId,
194195
selectedAggId
195196
);
196-
dispatch(searchResults(historicalAggQuery, resultIndex, true))
197+
dispatch(searchResults(historicalAggQuery, resultIndex, props.dataSourceId, true))
197198
.then((response: any) => {
198199
const aggregatedAnomalies = parseHistoricalAggregatedAnomalies(
199200
response,
@@ -229,7 +230,7 @@ export const AnomalyDetailsChart = React.memo(
229230
zoomRange.endDate,
230231
taskId
231232
);
232-
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, true))
233+
dispatch(searchResults(anomalyDataRangeQuery, resultIndex, props.dataSourceId, true))
233234
.then((response: any) => {
234235
const dataStartDate = get(
235236
response,

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

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

4950
export const AnomalyOccurrenceChart = React.memo(
@@ -82,6 +83,7 @@ export const AnomalyOccurrenceChart = React.memo(
8283
isHCDetector={props.isHCDetector}
8384
isHistorical={props.isHistorical}
8485
selectedHeatmapCell={props.selectedHeatmapCell}
86+
dataSourceId={props.dataSourceId}
8587
/>
8688
{props.isHCDetector && props.selectedHeatmapCell === undefined ? (
8789
<EuiBadge className={'anomaly-detail-chart-center'} color={'default'}>

‎public/pages/CreateDetectorSteps/hooks/useFetchDetectorInfo.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ import { getMappings } from '../../../redux/reducers/opensearch';
2121
// 1. Get detector
2222
// 2. Gets index mapping
2323
export const useFetchDetectorInfo = (
24-
detectorId: string
24+
detectorId: string,
25+
dataSourceId: string
2526
): {
2627
detector: Detector;
2728
hasError: boolean;
@@ -44,7 +45,7 @@ export const useFetchDetectorInfo = (
4445
const fetchDetector = async () => {
4546
if (!detector) {
4647
// hardcoding the datasource id for now, will update it later when working on create page
47-
await dispatch(getDetector(detectorId, '4585f560-d1ef-11ee-aa63-2181676cc573'));
48+
await dispatch(getDetector(detectorId, dataSourceId));
4849
}
4950
if (selectedIndices) {
5051
await dispatch(getMappings(selectedIndices));

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

+2
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import { ALL_CUSTOM_AD_RESULT_INDICES } from '../../utils/constants';
3535
import { searchResults } from '../../../redux/reducers/anomalyResults';
3636
export interface AnomaliesDistributionChartProps {
3737
selectedDetectors: DetectorListItem[];
38+
dataSourceId?: string;
3839
}
3940

4041
export const AnomaliesDistributionChart = (
@@ -66,6 +67,7 @@ export const AnomaliesDistributionChart = (
6667
await getAnomalyDistributionForDetectorsByTimeRange(
6768
searchResults,
6869
props.selectedDetectors,
70+
props.dataSourceId,
6971
timeRange,
7072
dispatch,
7173
0,

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import { searchResults } from '../../../redux/reducers/anomalyResults';
5757

5858
export interface AnomaliesLiveChartProps {
5959
selectedDetectors: DetectorListItem[];
60+
dataSourceId?: string;
6061
}
6162

6263
interface LiveTimeRangeState {
@@ -102,7 +103,8 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
102103
1,
103104
true,
104105
ALL_CUSTOM_AD_RESULT_INDICES,
105-
false
106+
false,
107+
props.dataSourceId
106108
);
107109
} catch (err) {
108110
console.log(
@@ -126,7 +128,8 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
126128
MAX_LIVE_DETECTORS,
127129
false,
128130
ALL_CUSTOM_AD_RESULT_INDICES,
129-
false
131+
false,
132+
props.dataSourceId
130133
);
131134
setLiveAnomalyData(latestLiveAnomalyResult);
132135

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

+27-19
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,12 @@ import {
4949
} from '../../../../server/utils/helpers';
5050
import { CoreServicesContext } from '../../../components/CoreServices/CoreServices';
5151
import { CoreStart, MountPoint } from '../../../../../../src/core/public';
52-
import { DataSourceManagementPluginSetup, DataSourceSelectableConfig } from '../../../../../../src/plugins/data_source_management/public';
53-
import { getNotifications, getSavedObjectsClient } from '../../../services';
52+
import { DataSourceSelectableConfig } from '../../../../../../src/plugins/data_source_management/public';
53+
import { getDataSourceManagementPlugin, getNotifications, getSavedObjectsClient } from '../../../services';
5454
import { RouteComponentProps } from 'react-router-dom';
5555

56-
export interface DashboardOverviewRouterParams {
57-
dataSourceId: string;
58-
}
59-
60-
interface OverviewProps extends RouteComponentProps<DashboardOverviewRouterParams> {
61-
dataSourceManagement: DataSourceManagementPluginSetup;
56+
interface OverviewProps extends RouteComponentProps {
57+
dataSourceEnabled: boolean;
6258
setActionMenu: (menuMount: MountPoint | undefined) => void;
6359
}
6460

@@ -132,12 +128,18 @@ export function DashboardOverview(props: OverviewProps) {
132128
setAllDetectorStatesSelected(isEmpty(selectedStates));
133129
};
134130

135-
const handleDataSourceChange = (e) => {
136-
const dataConnectionId = e[0] ? e[0].id : undefined;
137-
setMDSOverviewState({
138-
queryParams: dataConnectionId,
139-
selectedDataSourceId: dataConnectionId,
140-
});
131+
const handleDataSourceChange = ([event]) => {
132+
const dataSourceId = event?.id;
133+
if (!dataSourceId) {
134+
getNotifications().toasts.addDanger(
135+
prettifyErrorMessage('Unable to set data source.')
136+
);
137+
} else {
138+
setMDSOverviewState({
139+
queryParams: dataSourceId,
140+
selectedDataSourceId: dataSourceId,
141+
});
142+
}
141143
}
142144

143145
const opensearchState = useSelector((state: AppState) => state.opensearch);
@@ -190,8 +192,8 @@ export function DashboardOverview(props: OverviewProps) {
190192

191193
const intializeDetectors = async () => {
192194
dispatch(getDetectorList(getAllDetectorsQueryParamsWithDataSourceId(MDSOverviewState.selectedDataSourceId)));
193-
dispatch(getIndices(''));
194-
dispatch(getAliases(''));
195+
dispatch(getIndices('', MDSOverviewState.selectedDataSourceId));
196+
dispatch(getAliases('', MDSOverviewState.selectedDataSourceId));
195197
};
196198

197199
useEffect(() => {
@@ -203,7 +205,9 @@ export function DashboardOverview(props: OverviewProps) {
203205
...location,
204206
search: queryString.stringify(updatedParams),
205207
})
206-
intializeDetectors();
208+
if (props.dataSourceEnabled ? MDSOverviewState.selectedDataSourceId : true) {
209+
intializeDetectors();
210+
}
207211
}, [MDSOverviewState]);
208212

209213
useEffect(() => {
@@ -238,14 +242,15 @@ export function DashboardOverview(props: OverviewProps) {
238242
}, [selectedDetectorsName, selectedIndices, selectedDetectorStates]);
239243

240244
const DataSourceMenu =
241-
props.dataSourceManagement.ui.getDataSourceMenu<DataSourceSelectableConfig>();
245+
getDataSourceManagementPlugin().ui.getDataSourceMenu<DataSourceSelectableConfig>();
242246
const renderDataSourceComponent = useMemo(() => {
243247
return (
244248
<DataSourceMenu
245249
setMenuMountPoint={props.setActionMenu}
246250
componentType={'DataSourceSelectable'}
247251
componentConfig={{
248252
fullWidth: false,
253+
activeOption:[{ id: MDSOverviewState.selectedDataSourceId }],
249254
savedObjects: getSavedObjectsClient(),
250255
notifications: getNotifications(),
251256
onSelectedDataSources: (dataSources) =>
@@ -307,12 +312,15 @@ export function DashboardOverview(props: OverviewProps) {
307312
</EuiFlexItem>
308313
</EuiFlexGroup>
309314
<EuiSpacer />
310-
<AnomaliesLiveChart selectedDetectors={currentDetectors} />
315+
<AnomaliesLiveChart
316+
selectedDetectors={currentDetectors}
317+
dataSourceId={MDSOverviewState.selectedDataSourceId} />
311318
<EuiSpacer />
312319
<EuiFlexGroup justifyContent="spaceBetween">
313320
<EuiFlexItem grow={6}>
314321
<AnomaliesDistributionChart
315322
selectedDetectors={currentDetectors}
323+
dataSourceId={MDSOverviewState.selectedDataSourceId}
316324
/>
317325
</EuiFlexItem>
318326
<EuiFlexItem grow={3}>

‎public/pages/Dashboard/utils/utils.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -433,6 +433,7 @@ export const getLatestAnomalyResultsByTimeRange = async (
433433
func: (
434434
request: any,
435435
resultIndex: string,
436+
dataSourceId: string,
436437
onlyQueryCustomResultIndex: boolean
437438
) => APIAction,
438439
timeRange: string,
@@ -441,7 +442,8 @@ export const getLatestAnomalyResultsByTimeRange = async (
441442
anomalySize: number,
442443
checkLastIndexOnly: boolean,
443444
resultIndex: string,
444-
onlyQueryCustomResultIndex: boolean
445+
onlyQueryCustomResultIndex: boolean,
446+
dataSourceId = ''
445447
): Promise<object[]> => {
446448
let from = 0;
447449
let anomalyResults = [] as object[];
@@ -457,6 +459,7 @@ export const getLatestAnomalyResultsByTimeRange = async (
457459
checkLastIndexOnly
458460
),
459461
resultIndex,
462+
dataSourceId,
460463
onlyQueryCustomResultIndex
461464
)
462465
);
@@ -489,6 +492,7 @@ export const getLatestAnomalyResultsForDetectorsByTimeRange = async (
489492
func: (
490493
request: any,
491494
resultIndex: string,
495+
dataSourceId: string,
492496
onlyQueryCustomResultIndex: boolean
493497
) => APIAction,
494498
selectedDetectors: DetectorListItem[],
@@ -499,7 +503,8 @@ export const getLatestAnomalyResultsForDetectorsByTimeRange = async (
499503
detectorNum: number,
500504
checkLastIndexOnly: boolean,
501505
resultIndex: string,
502-
onlyQueryCustomResultIndex: boolean
506+
onlyQueryCustomResultIndex: boolean,
507+
dataSourceId = ''
503508
): Promise<object[]> => {
504509
const detectorAndIdMap = buildDetectorAndIdMap(selectedDetectors);
505510
let from = 0;
@@ -516,6 +521,7 @@ export const getLatestAnomalyResultsForDetectorsByTimeRange = async (
516521
checkLastIndexOnly
517522
),
518523
resultIndex,
524+
dataSourceId,
519525
onlyQueryCustomResultIndex
520526
)
521527
);
@@ -605,9 +611,11 @@ export const getAnomalyDistributionForDetectorsByTimeRange = async (
605611
func: (
606612
request: any,
607613
resultIndex: string,
614+
dataSourceId: string,
608615
onlyQueryCustomResultIndex: boolean
609616
) => APIAction,
610617
selectedDetectors: DetectorListItem[],
618+
dataSourceId = '',
611619
timeRange: string,
612620
dispatch: Dispatch<any>,
613621
threshold: number,
@@ -638,7 +646,7 @@ export const getAnomalyDistributionForDetectorsByTimeRange = async (
638646
const finalQuery = Object.assign({}, getResultQuery, anomaly_dist_aggs);
639647

640648
const result = await dispatch(
641-
func(finalQuery, resultIndex, onlyQueryCustomResultIndex)
649+
func(finalQuery, resultIndex, dataSourceId, onlyQueryCustomResultIndex)
642650
);
643651

644652
const detectorsAggResults = get(

0 commit comments

Comments
 (0)