Skip to content

Commit e0333ec

Browse files
committed
neo List Detectors page
Signed-off-by: Jackie Han <jkhanjob@gmail.com>
1 parent c21d6c7 commit e0333ec

File tree

11 files changed

+198
-42
lines changed

11 files changed

+198
-42
lines changed

public/anomaly_detection_app.tsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,15 @@ 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';
21+
import { DataSourcePluginSetup } from '../../../src/plugins/data_source/public';
2022

21-
export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
23+
export function renderApp(
24+
coreStart: CoreStart,
25+
params: AppMountParameters,
26+
dataSourceManagement: DataSourceManagementPluginSetup,
27+
dataSource: DataSourcePluginSetup
28+
) {
2229
const http = coreStart.http;
2330
const store = configureStore(http);
2431

@@ -29,13 +36,19 @@ export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
2936
} else {
3037
require('@elastic/charts/dist/theme_only_light.css');
3138
}
39+
3240
ReactDOM.render(
3341
<Provider store={store}>
3442
<Router>
3543
<Route
3644
render={(props) => (
3745
<CoreServicesContext.Provider value={coreStart}>
38-
<Main {...props} />
46+
<Main
47+
dataSourceEnabled={dataSource.dataSourceEnabled}
48+
dataSourceManagement={dataSourceManagement}
49+
setHeaderActionMenu={params.setHeaderActionMenu}
50+
{...props}
51+
/>
3952
</CoreServicesContext.Provider>
4053
)}
4154
/>

public/models/interfaces.ts

+1
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ export type DetectorListItem = {
218218
lastUpdateTime: number;
219219
enabledTime?: number;
220220
detectorType?: string;
221+
dataSourceId: string;
221222
};
222223

223224
export type EntityData = {

public/pages/DetectorsList/containers/List/List.tsx

+60-7
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
} from '@elastic/eui';
2121
import { debounce, get, isEmpty } from 'lodash';
2222
import queryString from 'querystring';
23-
import React, { useEffect, useState } from 'react';
23+
import React, { useEffect, useMemo, useState } from 'react';
2424
import { useDispatch, useSelector } from 'react-redux';
2525
import { RouteComponentProps } from 'react-router';
2626
import {
@@ -44,13 +44,16 @@ import {
4444
} from '../../../../redux/reducers/opensearch';
4545
import { APP_PATH, PLUGIN_NAME } from '../../../../utils/constants';
4646
import { DETECTOR_STATE } from '../../../../../server/utils/constants';
47-
import { getVisibleOptions, sanitizeSearchText } from '../../../utils/helpers';
47+
import {
48+
getAllDetectorsQueryParamsWithDataSourceId,
49+
getVisibleOptions,
50+
sanitizeSearchText,
51+
} from '../../../utils/helpers';
4852
import { EmptyDetectorMessage } from '../../components/EmptyMessage/EmptyMessage';
4953
import { ListFilters } from '../../components/ListFilters/ListFilters';
5054
import {
5155
MAX_DETECTORS,
5256
MAX_SELECTED_INDICES,
53-
GET_ALL_DETECTORS_QUERY_PARAMS,
5457
ALL_DETECTOR_STATES,
5558
ALL_INDICES,
5659
SINGLE_DETECTOR_NOT_FOUND_MSG,
@@ -78,8 +81,13 @@ import {
7881
NO_PERMISSIONS_KEY_WORD,
7982
prettifyErrorMessage,
8083
} from '../../../../../server/utils/helpers';
81-
import { CoreStart } from '../../../../../../../src/core/public';
84+
import { CoreStart, MountPoint } from '../../../../../../../src/core/public';
8285
import { CoreServicesContext } from '../../../../components/CoreServices/CoreServices';
86+
import {
87+
DataSourceManagementPluginSetup,
88+
DataSourceSelectableConfig,
89+
} from '../../../../../../../src/plugins/data_source_management/public';
90+
import { getNotifications, getSavedObjectsClient } from '../../../../services';
8391

8492
export interface ListRouterParams {
8593
from: string;
@@ -88,13 +96,19 @@ export interface ListRouterParams {
8896
indices: string;
8997
sortDirection: SORT_DIRECTION;
9098
sortField: string;
99+
dataSourceId: string;
100+
}
101+
interface ListProps extends RouteComponentProps<ListRouterParams> {
102+
dataSourceEnabled: boolean;
103+
dataSourceManagement: DataSourceManagementPluginSetup;
104+
setActionMenu: (menuMount: MountPoint | undefined) => void;
91105
}
92-
interface ListProps extends RouteComponentProps<ListRouterParams> {}
93106
interface ListState {
94107
page: number;
95108
queryParams: GetDetectorsQueryParams;
96109
selectedDetectorStates: DETECTOR_STATE[];
97110
selectedIndices: string[];
111+
selectedDataSourceId: string;
98112
}
99113
interface ConfirmModalState {
100114
isOpen: boolean;
@@ -198,6 +212,9 @@ export const DetectorList = (props: ListProps) => {
198212
selectedIndices: queryParams.indices
199213
? queryParams.indices.split(',')
200214
: ALL_INDICES,
215+
selectedDataSourceId: queryParams.dataSourceId
216+
? queryParams.dataSourceId
217+
: '',
201218
});
202219

203220
// Set breadcrumbs on page initialization
@@ -215,6 +232,7 @@ export const DetectorList = (props: ListProps) => {
215232
...state.queryParams,
216233
indices: state.selectedIndices.join(','),
217234
from: state.page * state.queryParams.size,
235+
dataSourceId: state.selectedDataSourceId,
218236
};
219237

220238
history.replace({
@@ -229,6 +247,7 @@ export const DetectorList = (props: ListProps) => {
229247
state.queryParams,
230248
state.selectedDetectorStates,
231249
state.selectedIndices,
250+
state.selectedDataSourceId,
232251
]);
233252

234253
// Handle all filtering / sorting of detectors
@@ -246,7 +265,8 @@ export const DetectorList = (props: ListProps) => {
246265
const curDetectorsToDisplay = getDetectorsToDisplay(
247266
curSelectedDetectors,
248267
state.page,
249-
state.queryParams.size
268+
state.queryParams.size,
269+
state.selectedDataSourceId
250270
);
251271
setDetectorsToDisplay(curDetectorsToDisplay);
252272

@@ -273,7 +293,11 @@ export const DetectorList = (props: ListProps) => {
273293
}, [confirmModalState.isRequestingToClose, isLoading]);
274294

275295
const getUpdatedDetectors = async () => {
276-
dispatch(getDetectorList(GET_ALL_DETECTORS_QUERY_PARAMS));
296+
dispatch(
297+
getDetectorList(
298+
getAllDetectorsQueryParamsWithDataSourceId(state.selectedDataSourceId)
299+
)
300+
);
277301
};
278302

279303
const handlePageChange = (pageNumber: number) => {
@@ -552,6 +576,16 @@ export const DetectorList = (props: ListProps) => {
552576
});
553577
};
554578

579+
const handleDataSourceChange = (e) => {
580+
const dataConnectionId = e[0] ? e[0].id : undefined;
581+
582+
setState({
583+
...state,
584+
page: 0,
585+
selectedDataSourceId: dataConnectionId,
586+
});
587+
};
588+
555589
const getConfirmModal = () => {
556590
if (confirmModalState.isOpen) {
557591
//@ts-ignore
@@ -626,9 +660,28 @@ export const DetectorList = (props: ListProps) => {
626660

627661
const confirmModal = getConfirmModal();
628662

663+
const DataSourceMenu =
664+
props.dataSourceManagement.ui.getDataSourceMenu<DataSourceSelectableConfig>();
665+
const renderDataSourceComponent = useMemo(() => {
666+
return (
667+
<DataSourceMenu
668+
setMenuMountPoint={props.setActionMenu}
669+
componentType={'DataSourceSelectable'}
670+
componentConfig={{
671+
fullWidth: false,
672+
savedObjects: getSavedObjectsClient(),
673+
notifications: getNotifications(),
674+
onSelectedDataSources: (dataSources) =>
675+
handleDataSourceChange(dataSources),
676+
}}
677+
/>
678+
);
679+
}, [getSavedObjectsClient(), getNotifications(), props.setActionMenu]);
680+
629681
return (
630682
<EuiPage>
631683
<EuiPageBody>
684+
{props.dataSourceEnabled && renderDataSourceComponent}
632685
<ContentPanel
633686
title={
634687
isLoading

public/pages/main/Main.tsx

+16-3
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,26 @@ import { DefineDetector } from '../DefineDetector/containers/DefineDetector';
2323
import { ConfigureModel } from '../ConfigureModel/containers/ConfigureModel';
2424
import { DashboardOverview } from '../Dashboard/Container/DashboardOverview';
2525
import { CoreServicesConsumer } from '../../components/CoreServices/CoreServices';
26-
import { CoreStart } from '../../../../../src/core/public';
26+
import { CoreStart, MountPoint } from '../../../../../src/core/public';
2727
import { AnomalyDetectionOverview } from '../Overview';
28+
import { DataSourceManagementPluginSetup } from '../../../../../src/plugins/data_source_management/public';
2829

2930
enum Navigation {
3031
AnomalyDetection = 'Anomaly detection',
3132
Dashboard = 'Dashboard',
3233
Detectors = 'Detectors',
3334
}
3435

35-
interface MainProps extends RouteComponentProps {}
36+
interface MainProps extends RouteComponentProps {
37+
dataSourceEnabled: boolean;
38+
dataSourceManagement: DataSourceManagementPluginSetup;
39+
setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
40+
}
3641

3742
export function Main(props: MainProps) {
43+
const { dataSourceEnabled, dataSourceManagement, setHeaderActionMenu } =
44+
props;
45+
3846
const hideSideNavBar = useSelector(
3947
(state: AppState) => state.adApp.hideSideNavBar
4048
);
@@ -83,7 +91,12 @@ export function Main(props: MainProps) {
8391
exact
8492
path={APP_PATH.LIST_DETECTORS}
8593
render={(props: RouteComponentProps<ListRouterParams>) => (
86-
<DetectorList {...props} />
94+
<DetectorList
95+
dataSourceEnabled={dataSourceEnabled}
96+
dataSourceManagement={dataSourceManagement}
97+
setActionMenu={setHeaderActionMenu}
98+
{...props}
99+
/>
87100
)}
88101
/>
89102
<Route

public/pages/utils/helpers.ts

+18-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { CatIndex, IndexAlias } from '../../../server/models/types';
1313
import sortBy from 'lodash/sortBy';
1414
import { DetectorListItem } from '../../models/interfaces';
1515
import { SORT_DIRECTION } from '../../../server/utils/constants';
16-
import { ALL_INDICES, ALL_DETECTOR_STATES } from './constants';
16+
import { ALL_INDICES, ALL_DETECTOR_STATES, MAX_DETECTORS } from './constants';
1717
import { DETECTOR_STATE } from '../../../server/utils/constants';
1818
import { timeFormatter } from '@elastic/charts';
1919

@@ -96,8 +96,12 @@ export const filterAndSortDetectors = (
9696
export const getDetectorsToDisplay = (
9797
detectors: DetectorListItem[],
9898
page: number,
99-
size: number
99+
size: number,
100+
dataSourceId: string
100101
) => {
102+
detectors.forEach((detector) => {
103+
detector.dataSourceId = dataSourceId;
104+
});
101105
return detectors.slice(size * page, page * size + size);
102106
};
103107

@@ -112,3 +116,15 @@ export const formatNumber = (data: any) => {
112116
return '';
113117
}
114118
};
119+
120+
export const getAllDetectorsQueryParamsWithDataSourceId = (
121+
dataSourceId: string
122+
) => ({
123+
from: 0,
124+
search: '',
125+
indices: '',
126+
size: MAX_DETECTORS,
127+
sortDirection: SORT_DIRECTION.ASC,
128+
sortField: 'name',
129+
dataSourceId: dataSourceId,
130+
});

public/plugin.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
setUiActions,
3636
setUISettings,
3737
setQueryService,
38+
setSavedObjectsClient,
3839
} from './services';
3940
import { AnomalyDetectionOpenSearchDashboardsPluginStart } from 'public';
4041
import {
@@ -43,6 +44,7 @@ import {
4344
} from '../../../src/plugins/vis_augmenter/public';
4445
import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
4546
import { DataPublicPluginStart } from '../../../src/plugins/data/public';
47+
import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
4648

4749
declare module '../../../src/plugins/ui_actions/public' {
4850
export interface ActionContextMapping {
@@ -55,6 +57,7 @@ export interface AnomalyDetectionSetupDeps {
5557
embeddable: EmbeddableSetup;
5658
notifications: NotificationsSetup;
5759
visAugmenter: VisAugmenterSetup;
60+
dataSourceManagement: DataSourceManagementPluginSetup;
5861
//uiActions: UiActionsSetup;
5962
}
6063

@@ -82,7 +85,12 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin
8285
mount: async (params: AppMountParameters) => {
8386
const { renderApp } = await import('./anomaly_detection_app');
8487
const [coreStart] = await core.getStartServices();
85-
return renderApp(coreStart, params);
88+
return renderApp(
89+
coreStart,
90+
params,
91+
plugins.dataSourceManagement,
92+
plugins.dataSource
93+
);
8694
},
8795
});
8896

@@ -116,6 +124,7 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin
116124
setNotifications(core.notifications);
117125
setUiActions(uiActions);
118126
setQueryService(data.query);
127+
setSavedObjectsClient(core.savedObjects.client);
119128
return {};
120129
}
121130
}

public/services.ts

+4
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ export const [getUISettings, setUISettings] =
3939
export const [getQueryService, setQueryService] =
4040
createGetterSetter<DataPublicPluginStart['query']>('Query');
4141

42+
export const [getSavedObjectsClient, setSavedObjectsClient] =
43+
createGetterSetter<CoreStart['savedObjects']['client']>('SavedObjectsClient');
44+
4245
// This is primarily used for mocking this module and each of its fns in tests.
4346
export default {
4447
getSavedFeatureAnywhereLoader,
@@ -49,4 +52,5 @@ export default {
4952
getOverlays,
5053
setUISettings,
5154
setQueryService,
55+
getSavedObjectsClient,
5256
};

server/models/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export type GetDetectorsQueryParams = {
8989
indices?: string;
9090
sortDirection: SORT_DIRECTION;
9191
sortField: string;
92+
dataSourceId?: string;
9293
};
9394

9495
export type GetAdMonitorsQueryParams = {

0 commit comments

Comments
 (0)