ensure field options update on dataView change for AD job

elastic · Apr 17, 2023 · 1134e2c · 1134e2c
1 parent 6740df3
commit 1134e2c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/custom_urls/custom_url_editor/editor.tsx b/x-pack/plugins/ml/public/application/components/custom_urls/custom_url_editor/editor.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { ChangeEvent, useState, useEffect, FC } from 'react';
+import React, { ChangeEvent, useMemo, useState, useRef, useEffect, FC } from 'react';
 
 import {
   EuiComboBox,
@@ -62,10 +62,14 @@ function getLinkToOptions() {
   ];
 }
 
-function getDropDownOptions(job: Job | DataFrameAnalyticsConfig, dataView?: DataView) {
-  if (isAnomalyDetectionJob(job)) {
+function getDropDownOptions(
+  isFirstRender: boolean,
+  job: Job | DataFrameAnalyticsConfig,
+  dataView?: DataView
+) {
+  if (isAnomalyDetectionJob(job) && isFirstRender) {
     return getQueryEntityFieldNames(job);
-  } else if (isDataFrameAnalyticsConfigs(job) && dataView !== undefined) {
+  } else if ((isDataFrameAnalyticsConfigs(job) || !isFirstRender) && dataView !== undefined) {
     return getSupportedFieldNames(job, dataView);
   }
   return [];
@@ -78,7 +82,6 @@ interface CustomUrlEditorProps {
   dashboards: Array<{ id: string; title: string }>;
   dataViewListItems: DataViewListItem[];
   showTimeRangeSelector?: boolean;
-  // dataView?: DataView;
   job: Job | DataFrameAnalyticsConfig;
 }
 
@@ -92,19 +95,19 @@ export const CustomUrlEditor: FC<CustomUrlEditorProps> = ({
   dashboards,
   dataViewListItems,
   job,
-  // dataView,
 }) => {
   const [queryEntityFieldNames, setQueryEntityFieldNames] = useState<string[]>([]);
-  const isAnomalyJob = isAnomalyDetectionJob(job);
+  const isAnomalyJob = useMemo(() => isAnomalyDetectionJob(job), [job]);
 
   const {
     services: {
       data: { dataViews },
     },
   } = useMlKibana();
 
+  const isFirst = useRef(true);
+
   useEffect(() => {
-    // For DFA uses the destination index Data View to get the query entities and falls back to source index Data View.
     async function getQueryEntityDropdownOptions() {
       let dataViewToUse: DataView | undefined;
       const dataViewId = customUrl?.kibanaSettings?.discoverIndexPatternId;
@@ -114,8 +117,12 @@ export const CustomUrlEditor: FC<CustomUrlEditorProps> = ({
       } catch (e) {
         dataViewToUse = undefined;
       }
-      const dropDownOptions = await getDropDownOptions(job, dataViewToUse);
+      const dropDownOptions = await getDropDownOptions(isFirst.current, job, dataViewToUse);
       setQueryEntityFieldNames(dropDownOptions);
+
+      if (isFirst.current) {
+        isFirst.current = false;
+      }
     }
 
     if (job !== undefined) {
@@ -159,6 +166,7 @@ export const CustomUrlEditor: FC<CustomUrlEditorProps> = ({
       kibanaSettings: {
         ...kibanaSettings,
         discoverIndexPatternId: e.target.value,
+        queryFieldNames: [],
       },
     });
   };

diff --git a/x-pack/plugins/ml/public/application/components/custom_urls/custom_url_editor/utils.ts b/x-pack/plugins/ml/public/application/components/custom_urls/custom_url_editor/utils.ts
@@ -11,7 +11,7 @@ import rison from '@kbn/rison';
 import url from 'url';
 import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
 import { cleanEmptyKeys } from '@kbn/dashboard-plugin/public';
-import type { DataView } from '@kbn/data-views-plugin/common';
+import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
 import { isFilterPinned, Filter } from '@kbn/es-query';
 import { DataViewListItem } from '@kbn/data-views-plugin/common';
 import { TimeRange as EsQueryTimeRange } from '@kbn/es-query';
@@ -141,17 +141,23 @@ export function getNewCustomUrlDefaults(
 // Returns the list of supported field names that can be used
 // to add to the query used when linking to a Kibana dashboard or Discover.
 export function getSupportedFieldNames(
-  job: DataFrameAnalyticsConfig,
+  job: DataFrameAnalyticsConfig | Job,
   dataView: DataView
 ): string[] {
-  const resultsField = job.dest.results_field;
   const sortedFields = dataView.fields.getAll().sort((a, b) => a.name.localeCompare(b.name)) ?? [];
-  const categoryFields = sortedFields.filter(
-    (f) =>
+  let filterFunction: (field: DataViewField) => boolean = (field: DataViewField) =>
+    categoryFieldTypes.some((type) => {
+      return field.esTypes?.includes(type);
+    });
+
+  if (isDataFrameAnalyticsConfigs(job)) {
+    const resultsField = job.dest.results_field;
+    filterFunction = (f) =>
       categoryFieldTypes.some((type) => {
         return f.esTypes?.includes(type);
-      }) && !f.name.startsWith(resultsField ?? DEFAULT_RESULTS_FIELD)
-  );
+      }) && !f.name.startsWith(resultsField ?? DEFAULT_RESULTS_FIELD);
+  }
+  const categoryFields = sortedFields.filter(filterFunction);
   return categoryFields.map((field) => field.name);
 }