[MDS][Part 3] Wired all UI components to the data source menu

public/components/MDS/DataSourceMenuWrapper.tsx

@@ -3,52 +3,42 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useContext } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import {
   DataSourceManagementPluginSetup,
-  DataSourceOption,
   DataSourceSelectableConfig,
   DataSourceViewConfig,
 } from '../../../../../src/plugins/data_source_management/public';
 import { AppMountParameters, CoreStart } from 'opensearch-dashboards/public';
 import { ROUTES } from '../../utils/constants';
+import { DataSourceContext } from '../../services/DataSourceContext';
 
 export interface DataSourceMenuWrapperProps {
   core: CoreStart;
   dataSourceManagement?: DataSourceManagementPluginSetup;
+  dataSourceMenuReadOnly: boolean;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
 }
 
 export const DataSourceMenuWrapper: React.FC<DataSourceMenuWrapperProps> = ({
   core,
   dataSourceManagement,
+  dataSourceMenuReadOnly,
   setHeaderActionMenu,
 }) => {
   if (!dataSourceManagement) {
     return null;
   }
 
-  const [activeOption, setActiveOption] = useState({ id: '', label: '', checked: '' });
+  const { dataSource, setDataSource } = useContext(DataSourceContext)!;
   const DataSourceMenuViewComponent = dataSourceManagement.ui?.getDataSourceMenu<
     DataSourceViewConfig
   >();
   const DataSourceMenuSelectableComponent = dataSourceManagement.ui?.getDataSourceMenu<
     DataSourceSelectableConfig
   >();
 
-  const onDataSourceSelected = useCallback(
-    (sources: DataSourceOption[]) => {
-      if (
-        sources[0] &&
-        (activeOption.id !== sources[0].id || activeOption.label !== sources[0].label)
-      ) {
-        setActiveOption(sources[0]);
-      }
-    },
-    [setActiveOption, activeOption]
-  );
-
   return (
     <Switch>
       <Route
@@ -69,7 +59,7 @@ export const DataSourceMenuWrapper: React.FC<DataSourceMenuWrapperProps> = ({
             <DataSourceMenuViewComponent
               componentConfig={{
                 fullWidth: false,
-                activeOption: [activeOption],
+                activeOption: [dataSource],
               }}
               componentType="DataSourceView"
               setMenuMountPoint={setHeaderActionMenu}
@@ -79,6 +69,7 @@ export const DataSourceMenuWrapper: React.FC<DataSourceMenuWrapperProps> = ({
       />
       <Route
         path={[
+          ROUTES.ROOT,
           ROUTES.OVERVIEW,
           ROUTES.DETECTORS,
           ROUTES.ALERTS,
@@ -90,7 +81,6 @@ export const DataSourceMenuWrapper: React.FC<DataSourceMenuWrapperProps> = ({
           ROUTES.RULES_CREATE,
           ROUTES.RULES_IMPORT,
           ROUTES.RULES_DUPLICATE,
-          ROUTES.DETECTORS_CREATE,
           ROUTES.LOG_TYPES_CREATE,
           ROUTES.CORRELATION_RULE_CREATE,
         ]}
@@ -101,9 +91,36 @@ export const DataSourceMenuWrapper: React.FC<DataSourceMenuWrapperProps> = ({
               setMenuMountPoint={setHeaderActionMenu}
               componentConfig={{
                 fullWidth: false,
-                activeOption: [activeOption],
+                activeOption: [dataSource],
+                notifications: core.notifications,
+                onSelectedDataSources: setDataSource,
+                savedObjects: core.savedObjects.client,
+              }}
+            />
+          );
+        }}
+      />
+      <Route
+        path={[ROUTES.DETECTORS_CREATE]}
+        render={() => {
+          return dataSourceMenuReadOnly ? (
+            <DataSourceMenuViewComponent
+              componentConfig={{
+                fullWidth: false,
+                activeOption: [dataSource],
+              }}
+              componentType="DataSourceView"
+              setMenuMountPoint={setHeaderActionMenu}
+            />
+          ) : (
+            <DataSourceMenuSelectableComponent
+              componentType="DataSourceSelectable"
+              setMenuMountPoint={setHeaderActionMenu}
+              componentConfig={{
+                fullWidth: false,
+                activeOption: [dataSource],
                 notifications: core.notifications,
-                onSelectedDataSources: onDataSourceSelected,
+                onSelectedDataSources: setDataSource,
                 savedObjects: core.savedObjects.client,
               }}
             />

public/pages/Alerts/containers/Alerts/Alerts.tsx

@@ -40,7 +40,6 @@ import {
 import { CoreServicesContext } from '../../../../components/core_services';
 import AlertsService from '../../../../services/AlertsService';
 import DetectorService from '../../../../services/DetectorService';
-import { AlertItem } from '../../../../../server/models/interfaces';
 import { AlertFlyout } from '../../components/AlertFlyout/AlertFlyout';
 import { FindingsService, IndexPatternsService, OpenSearchService } from '../../../../services';
 import { parseAlertSeverityToOption } from '../../../CreateDetector/components/ConfigureAlerts/utils/helpers';
@@ -55,13 +54,12 @@ import {
 } from '../../../../utils/helpers';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { match, RouteComponentProps, withRouter } from 'react-router-dom';
-import { DateTimeFilter } from '../../../Overview/models/interfaces';
 import { ChartContainer } from '../../../../components/Charts/ChartContainer';
-import { Detector } from '../../../../../types';
+import { AlertItem, DataSourceProps, DateTimeFilter, Detector } from '../../../../../types';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import { DataStore } from '../../../../store/DataStore';
 
-export interface AlertsProps extends RouteComponentProps {
+export interface AlertsProps extends RouteComponentProps, DataSourceProps {
   alertService: AlertsService;
   detectorService: DetectorService;
   findingService: FindingsService;
@@ -134,7 +132,9 @@ export class Alerts extends Component<AlertsProps, AlertsState> {
       prevState.alerts !== this.state.alerts ||
       prevState.alerts.length !== this.state.alerts.length;
 
-    if (alertsChanged) {
+    if (this.props.dataSource !== prevProps.dataSource) {
+      this.onRefresh();
+    } else if (alertsChanged) {
       this.filterAlerts();
     } else if (this.state.groupBy !== prevState.groupBy) {
       renderVisualization(this.generateVisualizationSpec(this.state.filteredAlerts), 'alerts-view');

public/pages/Correlations/containers/CorrelationRules.tsx

@@ -21,11 +21,13 @@ import {
   getCorrelationRulesTableColumns,
   getCorrelationRulesTableSearchConfig,
 } from '../utils/helpers';
-import { CorrelationRule, CorrelationRuleTableItem } from '../../../../types';
+import { CorrelationRule, CorrelationRuleTableItem, DataSourceProps } from '../../../../types';
 import { RouteComponentProps } from 'react-router-dom';
 import { DeleteCorrelationRuleModal } from '../components/DeleteModal';
 
-export const CorrelationRules: React.FC<RouteComponentProps> = (props: RouteComponentProps) => {
+export interface CorrelationRulesProps extends RouteComponentProps, DataSourceProps {}
+
+export const CorrelationRules: React.FC<CorrelationRulesProps> = (props: CorrelationRulesProps) => {
   const context = useContext(CoreServicesContext);
   const [allRules, setAllRules] = useState<CorrelationRuleTableItem[]>([]);
   const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
@@ -49,9 +51,11 @@ export const CorrelationRules: React.FC<RouteComponentProps> = (props: RouteComp
       BREADCRUMBS.CORRELATIONS,
       BREADCRUMBS.CORRELATION_RULES,
     ]);
+  }, []);
 
+  useEffect(() => {
     getCorrelationRules();
-  }, [getCorrelationRules]);
+  }, [getCorrelationRules, props.dataSource]);
 
   const headerActions = useMemo(
     () => [

public/pages/Correlations/containers/CorrelationsContainer.tsx

@@ -2,7 +2,12 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { CorrelationFinding, CorrelationGraphData, DateTimeFilter } from '../../../../types';
+import {
+  CorrelationFinding,
+  CorrelationGraphData,
+  DataSourceProps,
+  DateTimeFilter,
+} from '../../../../types';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import {
@@ -13,7 +18,6 @@ import {
   getSeverityColor,
   getSeverityLabel,
   graphRenderOptions,
-  getNodeSize,
 } from '../utils/constants';
 import {
   EuiIcon,
@@ -55,10 +59,11 @@ import { getLogTypeLabel } from '../../LogTypes/utils/helpers';
 
 interface CorrelationsProps
   extends RouteComponentProps<
-    any,
-    any,
-    { finding: FindingItemType; correlatedFindings: CorrelationFinding[] }
-  > {
+      any,
+      any,
+      { finding: FindingItemType; correlatedFindings: CorrelationFinding[] }
+    >,
+    DataSourceProps {
   setDateTimeFilter?: Function;
   dateTimeFilter?: DateTimeFilter;
   onMount: () => void;
@@ -123,7 +128,9 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
     prevState: Readonly<CorrelationsState>,
     snapshot?: any
   ): void {
-    if (
+    if (prevProps.dataSource !== this.props.dataSource) {
+      this.onRefresh();
+    } else if (
       prevState.logTypeFilterOptions !== this.state.logTypeFilterOptions ||
       prevState.severityFilterOptions !== this.state.severityFilterOptions ||
       prevProps.dateTimeFilter !== this.props.dateTimeFilter

public/pages/Correlations/containers/CreateCorrelationRule.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { Form, Formik, FormikErrors, FormikTouched } from 'formik';
 import { ContentPanel } from '../../../components/ContentPanel';
 import { DataStore } from '../../../store/DataStore';
@@ -37,15 +37,17 @@ import {
   CorrelationRuleAction,
   CorrelationRuleModel,
   CorrelationRuleQuery,
+  DataSourceProps,
 } from '../../../../types';
 import { BREADCRUMBS, ROUTES } from '../../../utils/constants';
 import { CoreServicesContext } from '../../../components/core_services';
 import { RouteComponentProps, useParams } from 'react-router-dom';
 import { validateName } from '../../../utils/validation';
 import { FieldMappingService, IndexService } from '../../../services';
 import { errorNotificationToast, getDataSources, getLogTypeOptions } from '../../../utils/helpers';
+import _ from 'lodash';
 
-export interface CreateCorrelationRuleProps {
+export interface CreateCorrelationRuleProps extends DataSourceProps {
   indexService: IndexService;
   fieldMappingService: FieldMappingService;
   history: RouteComponentProps<
@@ -102,6 +104,7 @@ export const CreateCorrelationRule: React.FC<CreateCorrelationRuleProps> = (
   const [period, setPeriod] = useState({ interval: 1, unit: 'MINUTES' });
   const [dataFilterEnabled, setDataFilterEnabled] = useState(false);
   const [groupByEnabled, setGroupByEnabled] = useState(false);
+  const resetForm = useRef(false);
 
   const validateCorrelationRule = useCallback(
     (rule: CorrelationRuleModel) => {
@@ -190,7 +193,9 @@ export const CreateCorrelationRule: React.FC<CreateCorrelationRuleProps> = (
       setLogTypeOptions(options);
     };
     setupLogTypeOptions();
-  }, []);
+
+    resetForm.current = true;
+  }, [props.dataSource]);
 
   useEffect(() => {
     setPeriod(parseTime(initialValues.time_window));
@@ -242,7 +247,7 @@ export const CreateCorrelationRule: React.FC<CreateCorrelationRuleProps> = (
 
   useEffect(() => {
     getIndices();
-  }, [props.indexService]);
+  }, [props.indexService, props.dataSource]);
 
   const getLogFields = useCallback(
     async (indexName: string) => {
@@ -723,6 +728,11 @@ export const CreateCorrelationRule: React.FC<CreateCorrelationRuleProps> = (
         enableReinitialize={true}
       >
         {({ values: { name, queries, time_window }, touched, errors, ...props }) => {
+          if (resetForm.current) {
+            resetForm.current = false;
+            props.resetForm();
+          }
+
           return (
             <Form>
               <ContentPanel

public/pages/CreateDetector/components/DefineDetector/components/DetectorDataSource/DetectorDataSource.tsx

@@ -21,8 +21,9 @@ import { NotificationsStart } from 'opensearch-dashboards/public';
 import { getDataSources } from '../../../../../../utils/helpers';
 import _ from 'lodash';
 import { FieldMappingService } from '../../../../../../services';
+import { DataSourceProps } from '../../../../../../../types';
 
-interface DetectorDataSourceProps {
+interface DetectorDataSourceProps extends DataSourceProps {
   detectorIndices: string[];
   indexService: IndexService;
   fieldMappingService?: FieldMappingService;
@@ -60,6 +61,16 @@ export default class DetectorDataSource extends Component<
     this.getDataSources();
   };
 
+  componentDidUpdate(
+    prevProps: Readonly<DetectorDataSourceProps>,
+    prevState: Readonly<DetectorDataSourceState>,
+    snapshot?: any
+  ): void {
+    if (prevProps.dataSource !== this.props.dataSource) {
+      this.getDataSources();
+    }
+  }
+
   getDataSources = async () => {
     this.setState({ loading: true });
     const res = await getDataSources(this.props.indexService, this.props.notifications);

public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx

@@ -24,6 +24,7 @@ import { NotificationsStart } from 'opensearch-dashboards/public';
 import { logTypesWithDashboards } from '../../../../../utils/constants';
 import {
   CreateDetectorSteps,
+  DataSourceProps,
   Detector,
   DetectorCreationStep,
   FieldMapping,
@@ -35,7 +36,7 @@ import { ruleTypes } from '../../../../Rules/utils/constants';
 import { ThreatIntelligence } from '../components/ThreatIntelligence/ThreatIntelligence';
 import { addDetectionType, removeDetectionType } from '../../../../../utils/helpers';
 
-interface DefineDetectorProps extends RouteComponentProps {
+interface DefineDetectorProps extends RouteComponentProps, DataSourceProps {
   detector: Detector;
   isEdit: boolean;
   indexService: IndexService;