neo List Detectors page

Signed-off-by: Jackie Han <jkhanjob@gmail.com>

Author: jackiehanyang

public/anomaly_detection_app.tsx

@@ -17,8 +17,15 @@ import { Main } from './pages/main';
 import { Provider } from 'react-redux';
 import configureStore from './redux/configureStore';
 import { CoreServicesContext } from './components/CoreServices/CoreServices';
+import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
+import { DataSourcePluginSetup } from '../../../src/plugins/data_source/public';
 
-export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
+export function renderApp(
+  coreStart: CoreStart,
+  params: AppMountParameters,
+  dataSourceManagement: DataSourceManagementPluginSetup,
+  dataSource: DataSourcePluginSetup
+) {
   const http = coreStart.http;
   const store = configureStore(http);
 
@@ -29,13 +36,19 @@ export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
   } else {
     require('@elastic/charts/dist/theme_only_light.css');
   }
+
   ReactDOM.render(
     <Provider store={store}>
       <Router>
         <Route
           render={(props) => (
             <CoreServicesContext.Provider value={coreStart}>
-              <Main {...props} />
+              <Main
+                dataSourceEnabled={dataSource.dataSourceEnabled}
+                dataSourceManagement={dataSourceManagement}
+                setHeaderActionMenu={params.setHeaderActionMenu}
+                {...props}
+              />
             </CoreServicesContext.Provider>
           )}
         />

public/models/interfaces.ts

@@ -218,6 +218,7 @@ export type DetectorListItem = {
   lastUpdateTime: number;
   enabledTime?: number;
   detectorType?: string;
+  dataSourceId: string;
 };
 
 export type EntityData = {

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

@@ -20,7 +20,7 @@ import {
 } from '@elastic/eui';
 import { debounce, get, isEmpty } from 'lodash';
 import queryString from 'querystring';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { RouteComponentProps } from 'react-router';
 import {
@@ -44,13 +44,16 @@ import {
 } from '../../../../redux/reducers/opensearch';
 import { APP_PATH, PLUGIN_NAME } from '../../../../utils/constants';
 import { DETECTOR_STATE } from '../../../../../server/utils/constants';
-import { getVisibleOptions, sanitizeSearchText } from '../../../utils/helpers';
+import {
+  getAllDetectorsQueryParamsWithDataSourceId,
+  getVisibleOptions,
+  sanitizeSearchText,
+} from '../../../utils/helpers';
 import { EmptyDetectorMessage } from '../../components/EmptyMessage/EmptyMessage';
 import { ListFilters } from '../../components/ListFilters/ListFilters';
 import {
   MAX_DETECTORS,
   MAX_SELECTED_INDICES,
-  GET_ALL_DETECTORS_QUERY_PARAMS,
   ALL_DETECTOR_STATES,
   ALL_INDICES,
   SINGLE_DETECTOR_NOT_FOUND_MSG,
@@ -78,8 +81,13 @@ import {
   NO_PERMISSIONS_KEY_WORD,
   prettifyErrorMessage,
 } from '../../../../../server/utils/helpers';
-import { CoreStart } from '../../../../../../../src/core/public';
+import { CoreStart, MountPoint } from '../../../../../../../src/core/public';
 import { CoreServicesContext } from '../../../../components/CoreServices/CoreServices';
+import {
+  DataSourceManagementPluginSetup,
+  DataSourceSelectableConfig,
+} from '../../../../../../../src/plugins/data_source_management/public';
+import { getNotifications, getSavedObjectsClient } from '../../../../services';
 
 export interface ListRouterParams {
   from: string;
@@ -88,13 +96,19 @@ export interface ListRouterParams {
   indices: string;
   sortDirection: SORT_DIRECTION;
   sortField: string;
+  dataSourceId: string;
+}
+interface ListProps extends RouteComponentProps<ListRouterParams> {
+  dataSourceEnabled: boolean;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
 }
-interface ListProps extends RouteComponentProps<ListRouterParams> {}
 interface ListState {
   page: number;
   queryParams: GetDetectorsQueryParams;
   selectedDetectorStates: DETECTOR_STATE[];
   selectedIndices: string[];
+  selectedDataSourceId: string;
 }
 interface ConfirmModalState {
   isOpen: boolean;
@@ -198,6 +212,9 @@ export const DetectorList = (props: ListProps) => {
     selectedIndices: queryParams.indices
       ? queryParams.indices.split(',')
       : ALL_INDICES,
+    selectedDataSourceId: queryParams.dataSourceId
+      ? queryParams.dataSourceId
+      : '',
   });
 
   // Set breadcrumbs on page initialization
@@ -215,6 +232,7 @@ export const DetectorList = (props: ListProps) => {
       ...state.queryParams,
       indices: state.selectedIndices.join(','),
       from: state.page * state.queryParams.size,
+      dataSourceId: state.selectedDataSourceId,
     };
 
     history.replace({
@@ -229,6 +247,7 @@ export const DetectorList = (props: ListProps) => {
     state.queryParams,
     state.selectedDetectorStates,
     state.selectedIndices,
+    state.selectedDataSourceId,
   ]);
 
   // Handle all filtering / sorting of detectors
@@ -246,7 +265,8 @@ export const DetectorList = (props: ListProps) => {
     const curDetectorsToDisplay = getDetectorsToDisplay(
       curSelectedDetectors,
       state.page,
-      state.queryParams.size
+      state.queryParams.size,
+      state.selectedDataSourceId
     );
     setDetectorsToDisplay(curDetectorsToDisplay);
 
@@ -273,7 +293,11 @@ export const DetectorList = (props: ListProps) => {
   }, [confirmModalState.isRequestingToClose, isLoading]);
 
   const getUpdatedDetectors = async () => {
-    dispatch(getDetectorList(GET_ALL_DETECTORS_QUERY_PARAMS));
+    dispatch(
+      getDetectorList(
+        getAllDetectorsQueryParamsWithDataSourceId(state.selectedDataSourceId)
+      )
+    );
   };
 
   const handlePageChange = (pageNumber: number) => {
@@ -552,6 +576,16 @@ export const DetectorList = (props: ListProps) => {
     });
   };
 
+  const handleDataSourceChange = (e) => {
+    const dataConnectionId = e[0] ? e[0].id : undefined;
+
+    setState({
+      ...state,
+      page: 0,
+      selectedDataSourceId: dataConnectionId,
+    });
+  };
+
   const getConfirmModal = () => {
     if (confirmModalState.isOpen) {
       //@ts-ignore
@@ -626,9 +660,28 @@ export const DetectorList = (props: ListProps) => {
 
   const confirmModal = getConfirmModal();
 
+  const DataSourceMenu =
+    props.dataSourceManagement.ui.getDataSourceMenu<DataSourceSelectableConfig>();
+  const renderDataSourceComponent = useMemo(() => {
+    return (
+      <DataSourceMenu
+        setMenuMountPoint={props.setActionMenu}
+        componentType={'DataSourceSelectable'}
+        componentConfig={{
+          fullWidth: false,
+          savedObjects: getSavedObjectsClient(),
+          notifications: getNotifications(),
+          onSelectedDataSources: (dataSources) =>
+            handleDataSourceChange(dataSources),
+        }}
+      />
+    );
+  }, [getSavedObjectsClient(), getNotifications(), props.setActionMenu]);
+
   return (
     <EuiPage>
       <EuiPageBody>
+        {props.dataSourceEnabled && renderDataSourceComponent}
         <ContentPanel
           title={
             isLoading

public/pages/main/Main.tsx

@@ -23,18 +23,26 @@ import { DefineDetector } from '../DefineDetector/containers/DefineDetector';
 import { ConfigureModel } from '../ConfigureModel/containers/ConfigureModel';
 import { DashboardOverview } from '../Dashboard/Container/DashboardOverview';
 import { CoreServicesConsumer } from '../../components/CoreServices/CoreServices';
-import { CoreStart } from '../../../../../src/core/public';
+import { CoreStart, MountPoint } from '../../../../../src/core/public';
 import { AnomalyDetectionOverview } from '../Overview';
+import { DataSourceManagementPluginSetup } from '../../../../../src/plugins/data_source_management/public';
 
 enum Navigation {
   AnomalyDetection = 'Anomaly detection',
   Dashboard = 'Dashboard',
   Detectors = 'Detectors',
 }
 
-interface MainProps extends RouteComponentProps {}
+interface MainProps extends RouteComponentProps {
+  dataSourceEnabled: boolean;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
+}
 
 export function Main(props: MainProps) {
+  const { dataSourceEnabled, dataSourceManagement, setHeaderActionMenu } =
+    props;
+
   const hideSideNavBar = useSelector(
     (state: AppState) => state.adApp.hideSideNavBar
   );
@@ -83,7 +91,12 @@ export function Main(props: MainProps) {
                   exact
                   path={APP_PATH.LIST_DETECTORS}
                   render={(props: RouteComponentProps<ListRouterParams>) => (
-                    <DetectorList {...props} />
+                    <DetectorList
+                      dataSourceEnabled={dataSourceEnabled}
+                      dataSourceManagement={dataSourceManagement}
+                      setActionMenu={setHeaderActionMenu}
+                      {...props}
+                    />
                   )}
                 />
                 <Route

public/pages/utils/helpers.ts

@@ -13,7 +13,7 @@ import { CatIndex, IndexAlias } from '../../../server/models/types';
 import sortBy from 'lodash/sortBy';
 import { DetectorListItem } from '../../models/interfaces';
 import { SORT_DIRECTION } from '../../../server/utils/constants';
-import { ALL_INDICES, ALL_DETECTOR_STATES } from './constants';
+import { ALL_INDICES, ALL_DETECTOR_STATES, MAX_DETECTORS } from './constants';
 import { DETECTOR_STATE } from '../../../server/utils/constants';
 import { timeFormatter } from '@elastic/charts';
 
@@ -96,8 +96,12 @@ export const filterAndSortDetectors = (
 export const getDetectorsToDisplay = (
   detectors: DetectorListItem[],
   page: number,
-  size: number
+  size: number,
+  dataSourceId: string
 ) => {
+  detectors.forEach((detector) => {
+    detector.dataSourceId = dataSourceId;
+  });
   return detectors.slice(size * page, page * size + size);
 };
 
@@ -112,3 +116,15 @@ export const formatNumber = (data: any) => {
     return '';
   }
 };
+
+export const getAllDetectorsQueryParamsWithDataSourceId = (
+  dataSourceId: string
+) => ({
+  from: 0,
+  search: '',
+  indices: '',
+  size: MAX_DETECTORS,
+  sortDirection: SORT_DIRECTION.ASC,
+  sortField: 'name',
+  dataSourceId: dataSourceId,
+});

public/plugin.ts

@@ -35,6 +35,7 @@ import {
   setUiActions,
   setUISettings,
   setQueryService,
+  setSavedObjectsClient,
 } from './services';
 import { AnomalyDetectionOpenSearchDashboardsPluginStart } from 'public';
 import {
@@ -43,6 +44,7 @@ import {
 } from '../../../src/plugins/vis_augmenter/public';
 import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
 import { DataPublicPluginStart } from '../../../src/plugins/data/public';
+import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
 
 declare module '../../../src/plugins/ui_actions/public' {
   export interface ActionContextMapping {
@@ -55,6 +57,7 @@ export interface AnomalyDetectionSetupDeps {
   embeddable: EmbeddableSetup;
   notifications: NotificationsSetup;
   visAugmenter: VisAugmenterSetup;
+  dataSourceManagement: DataSourceManagementPluginSetup;
   //uiActions: UiActionsSetup;
 }
 
@@ -82,7 +85,12 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import('./anomaly_detection_app');
         const [coreStart] = await core.getStartServices();
-        return renderApp(coreStart, params);
+        return renderApp(
+          coreStart,
+          params,
+          plugins.dataSourceManagement,
+          plugins.dataSource
+        );
       },
     });
 
@@ -116,6 +124,7 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin
     setNotifications(core.notifications);
     setUiActions(uiActions);
     setQueryService(data.query);
+    setSavedObjectsClient(core.savedObjects.client);
     return {};
   }
 }

public/services.ts

@@ -39,6 +39,9 @@ export const [getUISettings, setUISettings] =
 export const [getQueryService, setQueryService] =
   createGetterSetter<DataPublicPluginStart['query']>('Query');
 
+export const [getSavedObjectsClient, setSavedObjectsClient] =
+  createGetterSetter<CoreStart['savedObjects']['client']>('SavedObjectsClient');
+
 // This is primarily used for mocking this module and each of its fns in tests.
 export default {
   getSavedFeatureAnywhereLoader,
@@ -49,4 +52,5 @@ export default {
   getOverlays,
   setUISettings,
   setQueryService,
+  getSavedObjectsClient,
 };

server/models/types.ts

@@ -89,6 +89,7 @@ export type GetDetectorsQueryParams = {
   indices?: string;
   sortDirection: SORT_DIRECTION;
   sortField: string;
+  dataSourceId?: string;
 };
 
 export type GetAdMonitorsQueryParams = {