Support MDS on List, Detail, Dashboard, Overview pages

public/anomaly_detection_app.tsx

@@ -18,10 +18,7 @@ import { Provider } from 'react-redux';
 import configureStore from './redux/configureStore';
 import { CoreServicesContext } from './components/CoreServices/CoreServices';
 
-export function renderApp(
-  coreStart: CoreStart,
-  params: AppMountParameters,
-) {
+export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
   const http = coreStart.http;
   const store = configureStore(http);
 

public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx

@@ -81,7 +81,10 @@ import {
 } from '../utils/constants';
 import { HeatmapCell } from './AnomalyHeatmapChart';
 import { ANOMALY_AGG, MIN_END_TIME, MAX_END_TIME } from '../../utils/constants';
-import { DATA_SOURCE_ID, MAX_HISTORICAL_AGG_RESULTS } from '../../../utils/constants';
+import {
+  DATA_SOURCE_ID,
+  MAX_HISTORICAL_AGG_RESULTS,
+} from '../../../utils/constants';
 import { searchResults } from '../../../redux/reducers/anomalyResults';
 import {
   DAY_IN_MILLI_SECS,
@@ -120,7 +123,8 @@ export const AnomalyDetailsChart = React.memo(
   (props: AnomalyDetailsChartProps) => {
     const dispatch = useDispatch();
     const location = useLocation();
-    const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
+    const dataSourceId =
+      new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
     const [showAlertsFlyout, setShowAlertsFlyout] = useState<boolean>(false);
     const [alertAnnotations, setAlertAnnotations] = useState<any[]>([]);
     const [isLoadingAlerts, setIsLoadingAlerts] = useState<boolean>(false);
@@ -177,7 +181,9 @@ export const AnomalyDetailsChart = React.memo(
         zoomRange.endDate,
         taskId
       );
-      dispatch(searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true))
+      dispatch(
+        searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true)
+      )
         .then((response: any) => {
           // Only retrieve buckets that are in the anomaly results range. This is so
           // we don't show aggregate results for where there is no data at all
@@ -196,7 +202,9 @@ export const AnomalyDetailsChart = React.memo(
             taskId,
             selectedAggId
           );
-          dispatch(searchResults(historicalAggQuery, resultIndex, dataSourceId, true))
+          dispatch(
+            searchResults(historicalAggQuery, resultIndex, dataSourceId, true)
+          )
             .then((response: any) => {
               const aggregatedAnomalies = parseHistoricalAggregatedAnomalies(
                 response,
@@ -232,7 +240,9 @@ export const AnomalyDetailsChart = React.memo(
           zoomRange.endDate,
           taskId
         );
-        dispatch(searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true))
+        dispatch(
+          searchResults(anomalyDataRangeQuery, resultIndex, dataSourceId, true)
+        )
           .then((response: any) => {
             const dataStartDate = get(
               response,

public/pages/Dashboard/Components/AnomaliesDistribution.tsx

@@ -44,7 +44,8 @@ export const AnomaliesDistributionChart = (
 ) => {
   const dispatch = useDispatch();
   const location = useLocation();
-  const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
+  const dataSourceId =
+    new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
 
   const [anomalyDistribution, setAnomalyDistribution] = useState(
     [] as object[]

public/pages/Dashboard/Components/AnomaliesLiveChart.tsx

@@ -51,7 +51,11 @@ import {
   getLatestAnomalyResultsForDetectorsByTimeRange,
   getLatestAnomalyResultsByTimeRange,
 } from '../utils/utils';
-import { DATA_SOURCE_ID, MAX_ANOMALIES, SPACE_STR } from '../../../utils/constants';
+import {
+  DATA_SOURCE_ID,
+  MAX_ANOMALIES,
+  SPACE_STR,
+} from '../../../utils/constants';
 import { ALL_CUSTOM_AD_RESULT_INDICES } from '../../utils/constants';
 import { searchResults } from '../../../redux/reducers/anomalyResults';
 import { useLocation } from 'react-router-dom';
@@ -70,7 +74,8 @@ const MAX_LIVE_DETECTORS = 10;
 export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
   const dispatch = useDispatch();
   const location = useLocation();
-  const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
+  const dataSourceId =
+    new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
 
   const [liveTimeRange, setLiveTimeRange] = useState<LiveTimeRangeState>({
     startDateTime: moment().subtract(31, 'minutes'),

public/pages/Dashboard/Container/DashboardOverview.tsx

@@ -35,11 +35,21 @@ import {
   ALL_INDICES_MESSAGE,
 } from '../utils/constants';
 import { AppState } from '../../../redux/reducers';
-import { CatIndex, IndexAlias, MDSQueryParams } from '../../../../server/models/types';
-import { getAllDetectorsQueryParamsWithDataSourceId, getVisibleOptions } from '../../utils/helpers';
+import {
+  CatIndex,
+  IndexAlias,
+  MDSQueryParams,
+} from '../../../../server/models/types';
+import {
+  getAllDetectorsQueryParamsWithDataSourceId,
+  getVisibleOptions,
+} from '../../utils/helpers';
 import { BREADCRUMBS } from '../../../utils/constants';
 import { DETECTOR_STATE } from '../../../../server/utils/constants';
-import { getDetectorStateOptions, getURLQueryParams } from '../../DetectorsList/utils/helpers';
+import {
+  getDetectorStateOptions,
+  getURLQueryParams,
+} from '../../DetectorsList/utils/helpers';
 import { DashboardHeader } from '../Components/utils/DashboardHeader';
 import { EmptyDashboard } from '../Components/EmptyDashboard/EmptyDashboard';
 import {
@@ -49,7 +59,12 @@ import {
 import { CoreServicesContext } from '../../../components/CoreServices/CoreServices';
 import { CoreStart, MountPoint } from '../../../../../../src/core/public';
 import { DataSourceSelectableConfig } from '../../../../../../src/plugins/data_source_management/public';
-import { getDataSourceManagementPlugin, getDataSourcePlugin, getNotifications, getSavedObjectsClient } from '../../../services';
+import {
+  getDataSourceManagementPlugin,
+  getDataSourcePlugin,
+  getNotifications,
+  getSavedObjectsClient,
+} from '../../../services';
 import { RouteComponentProps } from 'react-router-dom';
 
 interface OverviewProps extends RouteComponentProps {
@@ -70,7 +85,7 @@ export function DashboardOverview(props: OverviewProps) {
   const errorGettingDetectors = adState.errorMessage;
   const isLoadingDetectors = adState.requesting;
 
-  const dataSourceEnabled = getDataSourcePlugin().dataSourceEnabled;
+  const dataSourceEnabled = getDataSourcePlugin()?.dataSourceEnabled || false;
 
   const [currentDetectors, setCurrentDetectors] = useState(
     Object.values(allDetectorList)
@@ -82,7 +97,9 @@ export function DashboardOverview(props: OverviewProps) {
   const queryParams = getURLQueryParams(props.location);
   const [MDSOverviewState, setMDSOverviewState] = useState<MDSOverviewState>({
     queryParams,
-    selectedDataSourceId: queryParams.dataSourceId ? queryParams.dataSourceId : '',
+    selectedDataSourceId: queryParams.dataSourceId
+      ? queryParams.dataSourceId
+      : '',
   });
 
   const getDetectorOptions = (detectorsIdMap: {
@@ -140,7 +157,7 @@ export function DashboardOverview(props: OverviewProps) {
         selectedDataSourceId: dataSourceId,
       });
     }
-  }
+  };
 
   const opensearchState = useSelector((state: AppState) => state.opensearch);
 
@@ -191,7 +208,13 @@ export function DashboardOverview(props: OverviewProps) {
   };
 
   const intializeDetectors = async () => {
-    dispatch(getDetectorList(getAllDetectorsQueryParamsWithDataSourceId(MDSOverviewState.selectedDataSourceId)));
+    dispatch(
+      getDetectorList(
+        getAllDetectorsQueryParamsWithDataSourceId(
+          MDSOverviewState.selectedDataSourceId
+        )
+      )
+    );
     dispatch(getIndices('', MDSOverviewState.selectedDataSourceId));
     dispatch(getAliases('', MDSOverviewState.selectedDataSourceId));
   };
@@ -204,10 +227,8 @@ export function DashboardOverview(props: OverviewProps) {
     history.replace({
       ...location,
       search: queryString.stringify(updatedParams),
-    })
-    if (dataSourceEnabled ? MDSOverviewState.selectedDataSourceId : true) {
-      intializeDetectors();
-    }
+    });
+    intializeDetectors();
   }, [MDSOverviewState]);
 
   useEffect(() => {
@@ -237,28 +258,31 @@ export function DashboardOverview(props: OverviewProps) {
     filterSelectedDetectors(
       selectedDetectorsName,
       selectedDetectorStates,
-      selectedIndices,
+      selectedIndices
     );
   }, [selectedDetectorsName, selectedIndices, selectedDetectorStates]);
 
-  const DataSourceMenu =
-    getDataSourceManagementPlugin().ui.getDataSourceMenu<DataSourceSelectableConfig>();
-  const renderDataSourceComponent = useMemo(() => {
-    return (
-      <DataSourceMenu
-        setMenuMountPoint={props.setActionMenu}
-        componentType={'DataSourceSelectable'}
-        componentConfig={{
-          fullWidth: false,
-          activeOption:[{ id: MDSOverviewState.selectedDataSourceId }],
-          savedObjects: getSavedObjectsClient(),
-          notifications: getNotifications(),
-          onSelectedDataSources: (dataSources) =>
-            handleDataSourceChange(dataSources),
-        }}
-      />
-    );
-  }, [getSavedObjectsClient(), getNotifications(), props.setActionMenu]);
+  let renderDataSourceComponent = null;
+  if (dataSourceEnabled) {
+    const DataSourceMenu =
+      getDataSourceManagementPlugin().ui.getDataSourceMenu<DataSourceSelectableConfig>();
+    renderDataSourceComponent = useMemo(() => {
+      return (
+        <DataSourceMenu
+          setMenuMountPoint={props.setActionMenu}
+          componentType={'DataSourceSelectable'}
+          componentConfig={{
+            fullWidth: false,
+            activeOption: [{ id: MDSOverviewState.selectedDataSourceId }],
+            savedObjects: getSavedObjectsClient(),
+            notifications: getNotifications(),
+            onSelectedDataSources: (dataSources) =>
+              handleDataSourceChange(dataSources),
+          }}
+        />
+      );
+    }, [getSavedObjectsClient(), getNotifications(), props.setActionMenu]);
+  }
 
   return (
     <div style={{ height: '1200px' }}>
@@ -312,8 +336,7 @@ export function DashboardOverview(props: OverviewProps) {
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiSpacer />
-            <AnomaliesLiveChart 
-              selectedDetectors={currentDetectors} />
+            <AnomaliesLiveChart selectedDetectors={currentDetectors} />
             <EuiSpacer />
             <EuiFlexGroup justifyContent="spaceBetween">
               <EuiFlexItem grow={6}>

public/pages/DetectorConfig/containers/DetectorConfig.tsx

@@ -29,7 +29,8 @@ interface DetectorConfigProps extends RouteComponentProps {
 export function DetectorConfig(props: DetectorConfigProps) {
   const dispatch = useDispatch();
   const location = useLocation();
-  const dataSourceId = new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
+  const dataSourceId =
+    new URLSearchParams(location.search).get(DATA_SOURCE_ID) || '';
   const detector = useSelector(
     (state: AppState) => state.ad.detectors[props.detectorId]
   );