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 index 9d27c0847ba70..14e09b52c606e 100644 --- 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,10 +95,9 @@ export const CustomUrlEditor: FC = ({ dashboards, dataViewListItems, job, - // dataView, }) => { const [queryEntityFieldNames, setQueryEntityFieldNames] = useState([]); - const isAnomalyJob = isAnomalyDetectionJob(job); + const isAnomalyJob = useMemo(() => isAnomalyDetectionJob(job), [job]); const { services: { @@ -103,8 +105,9 @@ export const CustomUrlEditor: FC = ({ }, } = 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 = ({ } 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 = ({ 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 index 4fba49f9df44b..1e5cd827d2cd4 100644 --- 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); }