fix broken anomaly detector monitor defining method (#1371)

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

Author: jackiehanyang

public/pages/CreateMonitor/containers/AnomalyDetectors/AnomalyDetectors.js

@@ -20,17 +20,38 @@ class AnomalyDetectors extends React.Component {
     this.state = {
       detectorOptions: [],
       isLoading: false,
+      lastFetchedDataSourceId: undefined,
     };
     this.searchDetectors = this.searchDetectors.bind(this);
   }
   async componentDidMount() {
     await this.searchDetectors();
   }
 
+  async componentDidUpdate(prevProps) {
+    if (prevProps.landingDataSourceId !== this.props.landingDataSourceId) {
+      await this.searchDetectors();
+    }
+  }
+
   async searchDetectors() {
     const httpClient = getClient();
     try {
-      const dataSourceQuery = getDataSourceQueryObj();
+      // Prefer the landing dataSourceId when available.
+      // Fallback to the global helper
+      const dataSourceQuery = this.props.landingDataSourceId
+        ? { query: { dataSourceId: this.props.landingDataSourceId } }
+        : getDataSourceQueryObj();
+
+      // Avoid refetching if we're already fetched for this dataSourceId
+      const currentDataSourceId = dataSourceQuery?.query?.dataSourceId;
+      if (
+        this.state.lastFetchedDataSourceId === currentDataSourceId &&
+        this.state.detectorOptions.length
+      ) {
+        return;
+      }
+
       const response = await httpClient.post('../api/alerting/detectors/_search', {
         query: dataSourceQuery?.query,
       });
@@ -44,7 +65,7 @@ class AnomalyDetectors extends React.Component {
             interval: detector.detectionInterval,
             resultIndex: detector.resultIndex,
           }));
-        this.setState({ detectorOptions });
+        this.setState({ detectorOptions, lastFetchedDataSourceId: currentDataSourceId });
       } else {
         // TODO: 'response.ok' is 'false' when there is no anomaly-detection config index in the cluster, and notification should not be shown to new Anomaly-Detection users
         // backendErrorNotification(notifications, 'get', 'detectors', response.resp);
@@ -129,6 +150,7 @@ class AnomalyDetectors extends React.Component {
 AnomalyDetectors.propTypes = {
   values: PropTypes.object.isRequired,
   renderEmptyMessage: PropTypes.func.isRequired,
+  landingDataSourceId: PropTypes.string,
 };
 
 export default AnomalyDetectors;

public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/AnomalyDetector.test.js

@@ -47,6 +47,38 @@ describe('AnomalyDetectors', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('refetches detectors when landingDataSourceId changes', async () => {
+    httpClient.post.mockResolvedValue({ ok: true, detectors: [] });
+    const TestHarness = ({ landingDataSourceId }) => (
+      <CoreContext.Provider value={{ http: httpClientMock }}>
+        <Formik initialValues={FORMIK_INITIAL_VALUES}>
+          {({ values }) => (
+            <AnomalyDetectors
+              values={values}
+              renderEmptyMessage={renderEmptyMessage}
+              landingDataSourceId={landingDataSourceId}
+            />
+          )}
+        </Formik>
+      </CoreContext.Provider>
+    );
+
+    const wrapper = mount(<TestHarness landingDataSourceId={undefined} />);
+
+    await runAllPromises();
+    wrapper.update();
+
+    // Change the data source id and ensure we re-fetch with the new query param.
+    wrapper.setProps({ landingDataSourceId: 'demo' });
+
+    await runAllPromises();
+    wrapper.update();
+
+    const lastCallArgs = httpClient.post.mock.calls[httpClient.post.mock.calls.length - 1];
+    expect(lastCallArgs[0]).toEqual('../api/alerting/detectors/_search');
+    expect(lastCallArgs[1]).toMatchObject({ query: { dataSourceId: 'demo' } });
+  });
+
   test('should be able to select the detector', async () => {
     httpClientMock.post.mockResolvedValueOnce({
       ok: true,

public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js

@@ -253,6 +253,7 @@ export default class CreateMonitor extends Component {
                       />
                     ) : null
                   }
+                  landingDataSourceId={this.props.landingDataSourceId}
                 />
 
                 {values.preventVisualEditor ? null : (

public/pages/CreateMonitor/containers/MonitorDetails/MonitorDetails.js

@@ -14,7 +14,13 @@ import AnomalyDetectors from '../AnomalyDetectors/AnomalyDetectors';
 import { MONITOR_TYPE } from '../../../../utils/constants';
 import Schedule from '../../components/Schedule';
 
-const renderAnomalyDetector = ({ httpClient, values, detectorId, flyoutMode }) => ({
+const renderAnomalyDetector = ({
+  httpClient,
+  values,
+  detectorId,
+  flyoutMode,
+  landingDataSourceId,
+}) => ({
   actions: [],
   content: (
     <React.Fragment>
@@ -24,6 +30,7 @@ const renderAnomalyDetector = ({ httpClient, values, detectorId, flyoutMode }) =
         renderEmptyMessage={renderEmptyMessage}
         detectorId={detectorId}
         flyoutMode={flyoutMode}
+        landingDataSourceId={landingDataSourceId}
       />
     </React.Fragment>
   ),
@@ -51,9 +58,11 @@ const MonitorDetails = ({
   detectorId,
   flyoutMode,
   renderNewToggle,
+  landingDataSourceId,
 }) => {
   const anomalyDetectorContent =
-    isAd && renderAnomalyDetector({ httpClient, values, detectorId, flyoutMode });
+    isAd &&
+    renderAnomalyDetector({ httpClient, values, detectorId, flyoutMode, landingDataSourceId });
   const displayMonitorDefinitionCards = values.monitor_type !== MONITOR_TYPE.CLUSTER_METRICS;
   const Container = useMemo(
     () => (flyoutMode ? ({ children }) => <>{children}</> : ContentPanel),

server/services/AnomalyDetectorService.js

@@ -6,14 +6,15 @@ import { get } from 'lodash';
 import { mapKeysDeep, toCamel } from './utils/helpers';
 import { anomalyResultMapper } from './utils/adHelpers';
 import { MDSEnabledClientService } from './MDSEnabledClientService';
+import { DEFAULT_HEADERS } from './utils/constants';
 
 const MAX_DETECTOR_COUNT = 1000;
 export default class DestinationsService extends MDSEnabledClientService {
   getDetector = async (context, req, res) => {
     const { detectorId } = req.params;
     const client = this.getClientBasedOnDataSource(context, req);
     try {
-      const resp = await client('alertingAD.getDetector', { detectorId });
+      const resp = await client('alertingAD.getDetector', { detectorId, headers: DEFAULT_HEADERS });
       const {
         anomaly_detector,
         _seq_no: seqNo,
@@ -49,6 +50,7 @@ export default class DestinationsService extends MDSEnabledClientService {
     try {
       const resp = await client('alertingAD.searchDetectors', {
         body: searchRequest,
+        headers: DEFAULT_HEADERS,
       });
 
       const totalDetectors = resp.hits.total.value;
@@ -93,6 +95,7 @@ export default class DestinationsService extends MDSEnabledClientService {
         const previewResponse = await client('alertingAD.previewDetector', {
           detectorId,
           body: requestBody,
+          headers: DEFAULT_HEADERS,
         });
         const transformedKeys = mapKeysDeep(previewResponse, toCamel);
         return res.ok({
@@ -133,9 +136,11 @@ export default class DestinationsService extends MDSEnabledClientService {
         };
         const detectorResponse = await client('alertingAD.getDetector', {
           detectorId,
+          headers: DEFAULT_HEADERS,
         });
         const anomaliesResponse = await client('alertingAD.searchResults', {
           body: requestBody,
+          headers: DEFAULT_HEADERS,
         });
         const transformedKeys = get(anomaliesResponse, 'hits.hits', []).map((result) =>
           mapKeysDeep(result._source, toCamel)