[ML] Add recognized modules links for Index data visualizer (#131342)

* [ML] Add dynamic registration of links for both index and file

* [ML] Consolidate type imports

* [ML] Revert uptime changes

* [ML] Fix cards visible when canDisplay is false

* [ML] Shorten create job text

* [ML] Remove as assertions

* [ML] Rename to GetAdditionalLinks

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/data_visualizer/public/application/common/components/link_card/link_card.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC, ReactElement } from 'react';
+import React, { FC } from 'react';
 
 import {
   EuiIcon,
@@ -18,8 +18,8 @@ import {
   EuiLink,
 } from '@elastic/eui';
 
-interface Props {
+export interface LinkCardProps {
-  icon: IconType | ReactElement;
+  icon: IconType;
   iconAreaLabel?: string;
   title: any;
   description: any;
@@ -31,7 +31,7 @@ interface Props {
 
 // Component for rendering a card which links to the Create Job page, displaying an
 // icon, card title, description and link.
-export const LinkCard: FC<Props> = ({
+export const LinkCard: FC<LinkCardProps> = ({
   icon,
   iconAreaLabel,
   title,
@@ -39,7 +39,7 @@ export const LinkCard: FC<Props> = ({
   onClick,
   href,
   isDisabled,
-  'data-test-subj': dateTestSubj,
+  'data-test-subj': dataTestSubj,
 }) => {
   const linkHrefAndOnClickProps = {
     ...(href ? { href } : {}),
@@ -58,7 +58,7 @@ export const LinkCard: FC<Props> = ({
           background: 'transparent',
           outline: 'none',
         }}
-        data-test-subj={dateTestSubj}
+        data-test-subj={dataTestSubj}
         color="subdued"
         {...linkHrefAndOnClickProps}
       >

x-pack/plugins/data_visualizer/public/application/common/components/results_links/index.ts

@@ -5,5 +5,5 @@
  * 2.0.
  */
 
-export type { ResultLink } from './results_links';
+export type { ResultLink, GetAdditionalLinks, GetAdditionalLinksParams } from './results_links';
 export { ResultsLinks } from './results_links';

x-pack/plugins/data_visualizer/public/application/common/components/results_links/results_links.tsx

@@ -12,10 +12,23 @@ import { EuiFlexGroup, EuiFlexItem, EuiCard, EuiIcon } from '@elastic/eui';
 import { TimeRange, RefreshInterval } from '@kbn/data-plugin/public';
 import { FindFileStructureResponse } from '@kbn/file-upload-plugin/common';
 import type { FileUploadPluginStart } from '@kbn/file-upload-plugin/public';
+import { flatten } from 'lodash';
+import { LinkCardProps } from '../link_card/link_card';
 import { useDataVisualizerKibana } from '../../../kibana_context';
+import { isDefined } from '../../util/is_defined';
 
 type LinkType = 'file' | 'index';
 
+export interface GetAdditionalLinksParams {
+  dataViewId: string;
+  dataViewTitle?: string;
+  globalState?: any;
+}
+
+export type GetAdditionalLinks = Array<
+  (params: GetAdditionalLinksParams) => Promise<ResultLink[] | undefined>
+>;
+
 export interface ResultLink {
   id: string;
   type: LinkType;
@@ -24,7 +37,7 @@ export interface ResultLink {
   description: string;
   getUrl(params?: any): Promise<string>;
   canDisplay(params?: any): Promise<boolean>;
-  dataTestSubj?: string;
+  'data-test-subj'?: string;
 }
 
 interface Props {
@@ -34,7 +47,7 @@ interface Props {
   timeFieldName?: string;
   createDataView: boolean;
   showFilebeatFlyout(): void;
-  additionalLinks: ResultLink[];
+  getAdditionalLinks?: GetAdditionalLinks;
 }
 
 interface GlobalState {
@@ -51,7 +64,7 @@ export const ResultsLinks: FC<Props> = ({
   timeFieldName,
   createDataView,
   showFilebeatFlyout,
-  additionalLinks,
+  getAdditionalLinks,
 }) => {
   const {
     services: {
@@ -70,7 +83,7 @@ export const ResultsLinks: FC<Props> = ({
   const [discoverLink, setDiscoverLink] = useState('');
   const [indexManagementLink, setIndexManagementLink] = useState('');
   const [dataViewsManagementLink, setDataViewsManagementLink] = useState('');
-  const [generatedLinks, setGeneratedLinks] = useState<Record<string, string>>({});
+  const [asyncHrefCards, setAsyncHrefCards] = useState<LinkCardProps[]>();
 
   useEffect(() => {
     let unmounted = false;
@@ -93,22 +106,30 @@ export const ResultsLinks: FC<Props> = ({
 
     getDiscoverUrl();
 
-    Promise.all(
+    if (Array.isArray(getAdditionalLinks)) {
-      additionalLinks.map(async ({ canDisplay, getUrl }) => {
+      Promise.all(
-        if ((await canDisplay({ indexPatternId: dataViewId })) === false) {
+        getAdditionalLinks.map(async (asyncCardGetter) => {
-          return null;
+          const results = await asyncCardGetter({
-        }
+            dataViewId,
-        return getUrl({ globalState, indexPatternId: dataViewId });
+          });
-      })
+          if (Array.isArray(results)) {
-    ).then((urls) => {
+            return await Promise.all(
-      const linksById = urls.reduce((acc, url, i) => {
+              results.map(async (c) => ({
-        if (url !== null) {
+                ...c,
-          acc[additionalLinks[i].id] = url;
+                canDisplay: await c.canDisplay(),
-        }
+                href: await c.getUrl(),
-        return acc;
+              }))
-      }, {} as Record<string, string>);
+            );
-      setGeneratedLinks(linksById);
+          }
-    });
+        })
+      ).then((cards) => {
+        setAsyncHrefCards(
+          flatten(cards)
+            .filter(isDefined)
+            .filter((d) => d.canDisplay === true)
+        );
+      });
+    }
 
     if (!unmounted) {
       setIndexManagementLink(
@@ -244,16 +265,15 @@ export const ResultsLinks: FC<Props> = ({
           onClick={showFilebeatFlyout}
         />
       </EuiFlexItem>
-      {additionalLinks
+      {Array.isArray(asyncHrefCards) &&
-        .filter(({ id }) => generatedLinks[id] !== undefined)
+        asyncHrefCards.map((link) => (
-        .map((link) => (
           <EuiFlexItem>
             <EuiCard
               icon={<EuiIcon size="xxl" type={link.icon} />}
               data-test-subj="fileDataVisLink"
               title={link.title}
               description={link.description}
-              href={generatedLinks[link.id]}
+              href={link.href}
             />
           </EuiFlexItem>
         ))}

x-pack/plugins/data_visualizer/public/application/common/util/is_defined.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export function isDefined<T>(argument: T | undefined | null): argument is T {
+  return argument !== undefined && argument !== null;
+}

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_data_visualizer_view/file_data_visualizer_view.js

@@ -369,7 +369,7 @@ export class FileDataVisualizerView extends Component {
               hideBottomBar={this.hideBottomBar}
               savedObjectsClient={this.savedObjectsClient}
               fileUpload={this.props.fileUpload}
-              resultsLinks={this.props.resultsLinks}
+              getAdditionalLinks={this.props.getAdditionalLinks}
               capabilities={this.props.capabilities}
             />
 

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_view/import_view.js

@@ -585,7 +585,7 @@ export class ImportView extends Component {
                       timeFieldName={timeFieldName}
                       createDataView={createDataView}
                       showFilebeatFlyout={this.showFilebeatFlyout}
-                      additionalLinks={this.props.resultsLinks ?? []}
+                      getAdditionalLinks={this.props.getAdditionalLinks ?? []}
                     />
 
                     {isFilebeatFlyoutVisible && (

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/file_data_visualizer.tsx

@@ -11,14 +11,14 @@ import { getCoreStart, getPluginsStart } from '../../kibana_services';
 
 // @ts-ignore
 import { FileDataVisualizerView } from './components/file_data_visualizer_view';
-import { ResultLink } from '../common/components/results_links';
+import { GetAdditionalLinks } from '../common/components/results_links';
 
 interface Props {
-  additionalLinks?: ResultLink[];
+  getAdditionalLinks?: GetAdditionalLinks;
 }
 
 export type FileDataVisualizerSpec = typeof FileDataVisualizer;
-export const FileDataVisualizer: FC<Props> = ({ additionalLinks }) => {
+export const FileDataVisualizer: FC<Props> = ({ getAdditionalLinks }) => {
   const coreStart = getCoreStart();
   const { data, maps, embeddable, discover, share, security, fileUpload, cloud } =
     getPluginsStart();
@@ -45,7 +45,7 @@ export const FileDataVisualizer: FC<Props> = ({ additionalLinks }) => {
             savedObjectsClient={coreStart.savedObjects.client}
             http={coreStart.http}
             fileUpload={fileUpload}
-            resultsLinks={additionalLinks}
+            getAdditionalLinks={getAdditionalLinks}
             capabilities={coreStart.application.capabilities}
           />
         </CloudContext>

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/actions_panel/actions_panel.tsx

@@ -11,28 +11,31 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import { DataView } from '@kbn/data-views-plugin/public';
+import { flatten } from 'lodash';
+import { LinkCardProps } from '../../../common/components/link_card/link_card';
 import { useDataVisualizerKibana } from '../../../kibana_context';
 import { useUrlState } from '../../../common/util/url_state';
 import { LinkCard } from '../../../common/components/link_card';
-import { ResultLink } from '../../../common/components/results_links';
+import { GetAdditionalLinks } from '../../../common/components/results_links';
+import { isDefined } from '../../../common/util/is_defined';
 
 interface Props {
   dataView: DataView;
   searchString?: string | { [key: string]: any };
   searchQueryLanguage?: string;
-  additionalLinks: ResultLink[];
+  getAdditionalLinks?: GetAdditionalLinks;
 }
 
 export const ActionsPanel: FC<Props> = ({
   dataView,
   searchString,
   searchQueryLanguage,
-  additionalLinks,
+  getAdditionalLinks,
 }) => {
   const [globalState] = useUrlState('_g');
 
   const [discoverLink, setDiscoverLink] = useState('');
-  const [generatedLinks, setGeneratedLinks] = useState<Record<string, string>>({});
+  const [asyncHrefCards, setAsyncHrefCards] = useState<LinkCardProps[]>();
 
   const {
     services: {
@@ -46,6 +49,7 @@ export const ActionsPanel: FC<Props> = ({
     let unmounted = false;
 
     const indexPatternId = dataView.id;
+    const indexPatternTitle = dataView.title;
     const getDiscoverUrl = async (): Promise<void> => {
       const isDiscoverAvailable = capabilities.discover?.show ?? false;
       if (!isDiscoverAvailable) return;
@@ -68,24 +72,33 @@ export const ActionsPanel: FC<Props> = ({
       setDiscoverLink(discoverUrl);
     };
 
-    Promise.all(
+    if (Array.isArray(getAdditionalLinks) && indexPatternId !== undefined) {
-      additionalLinks.map(async ({ canDisplay, getUrl }) => {
+      Promise.all(
-        if ((await canDisplay({ indexPatternId })) === false) {
+        getAdditionalLinks.map(async (asyncCardGetter) => {
-          return null;
+          const results = await asyncCardGetter({
-        }
+            dataViewId: indexPatternId,
-        return getUrl({ globalState, indexPatternId });
+            dataViewTitle: indexPatternTitle,
-      })
+          });
-    ).then((urls) => {
+          if (Array.isArray(results)) {
-      const linksById = urls.reduce((acc, url, i) => {
+            return await Promise.all(
-        if (url !== null) {
+              results.map(async (c) => ({
-          acc[additionalLinks[i].id] = url;
+                ...c,
-        }
+                canDisplay: await c.canDisplay(),
-        return acc;
+                href: await c.getUrl(),
-      }, {} as Record<string, string>);
+              }))
-      setGeneratedLinks(linksById);
+            );
-    });
+          }
-
+        })
+      ).then((cards) => {
+        setAsyncHrefCards(
+          flatten(cards)
+            .filter(isDefined)
+            .filter((d) => d.canDisplay === true)
+        );
+      });
+    }
     getDiscoverUrl();
+
     return () => {
       unmounted = true;
     };
@@ -96,8 +109,8 @@ export const ActionsPanel: FC<Props> = ({
     globalState,
     capabilities,
     discover,
-    additionalLinks,
     data.query,
+    getAdditionalLinks,
   ]);
 
   // Note we use display:none for the DataRecognizer section as it needs to be
@@ -105,20 +118,6 @@ export const ActionsPanel: FC<Props> = ({
   // controls whether the recognizer section is ultimately displayed.
   return (
     <div data-test-subj="dataVisualizerActionsPanel">
-      {additionalLinks
-        .filter(({ id }) => generatedLinks[id] !== undefined)
-        .map((link) => (
-          <>
-            <LinkCard
-              href={generatedLinks[link.id]}
-              icon={link.icon}
-              description={link.description}
-              title={link.title}
-              data-test-subj={link.dataTestSubj}
-            />
-            <EuiSpacer size="m" />
-          </>
-        ))}
       {discoverLink && (
         <>
           <EuiTitle size="s">
@@ -147,8 +146,23 @@ export const ActionsPanel: FC<Props> = ({
             }
             data-test-subj="dataVisualizerViewInDiscoverCard"
           />
+          <EuiSpacer size="m" />
         </>
       )}
+
+      {Array.isArray(asyncHrefCards) &&
+        asyncHrefCards.map((link) => (
+          <>
+            <LinkCard
+              href={link.href}
+              icon={link.icon}
+              description={link.description}
+              title={link.title}
+              data-test-subj={link['data-test-subj']}
+            />
+            <EuiSpacer size="m" />
+          </>
+        ))}
     </div>
   );
 };

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx

@@ -48,7 +48,7 @@ import { DatePickerWrapper } from '../../../common/components/date_picker_wrappe
 import { HelpMenu } from '../../../common/components/help_menu';
 import { createMergedEsQuery } from '../../utils/saved_search_utils';
 import { DataVisualizerDataViewManagement } from '../data_view_management';
-import { ResultLink } from '../../../common/components/results_links';
+import { GetAdditionalLinks } from '../../../common/components/results_links';
 import { useDataVisualizerGridData } from '../../hooks/use_data_visualizer_grid_data';
 import { DataVisualizerGridInput } from '../../embeddables/grid_embeddable/grid_embeddable';
 import './_index.scss';
@@ -110,7 +110,7 @@ export interface IndexDataVisualizerViewProps {
   currentDataView: DataView;
   currentSavedSearch: SavedSearchSavedObject | null;
   currentSessionId?: string;
-  additionalLinks?: ResultLink[];
+  getAdditionalLinks?: GetAdditionalLinks;
 }
 const restorableDefaults = getDefaultDataVisualizerListState();
 
@@ -129,7 +129,7 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
     dataVisualizerProps.currentSavedSearch
   );
 
-  const { currentDataView, additionalLinks, currentSessionId } = dataVisualizerProps;
+  const { currentDataView, currentSessionId, getAdditionalLinks } = dataVisualizerProps;
 
   useEffect(() => {
     if (dataVisualizerProps?.currentSavedSearch !== undefined) {
@@ -487,7 +487,7 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
                 dataView={currentDataView}
                 searchQueryLanguage={searchQueryLanguage}
                 searchString={searchString}
-                additionalLinks={additionalLinks ?? []}
+                getAdditionalLinks={getAdditionalLinks}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/index_data_visualizer.tsx

@@ -29,17 +29,16 @@ import {
   isRisonSerializationRequired,
 } from '../common/util/url_state';
 import { useDataVisualizerKibana } from '../kibana_context';
-import { ResultLink } from '../common/components/results_links';
+import { GetAdditionalLinks } from '../common/components/results_links';
 import { DATA_VISUALIZER_APP_LOCATOR, IndexDataVisualizerLocatorParams } from './locator';
 import { DATA_VISUALIZER_INDEX_VIEWER } from './constants/index_data_visualizer_viewer';
 import { INDEX_DATA_VISUALIZER_NAME } from '../common/constants';
 
-export type IndexDataVisualizerSpec = typeof IndexDataVisualizer;
-
 export interface DataVisualizerUrlStateContextProviderProps {
   IndexDataVisualizerComponent: FC<IndexDataVisualizerViewProps>;
-  additionalLinks: ResultLink[];
+  getAdditionalLinks?: GetAdditionalLinks;
 }
+export type IndexDataVisualizerSpec = typeof IndexDataVisualizer;
 
 export const getLocatorParams = (params: {
   dataViewId?: string;
@@ -73,7 +72,7 @@ export const getLocatorParams = (params: {
 
 export const DataVisualizerUrlStateContextProvider: FC<
   DataVisualizerUrlStateContextProviderProps
-> = ({ IndexDataVisualizerComponent, additionalLinks }) => {
+> = ({ IndexDataVisualizerComponent, getAdditionalLinks }) => {
   const { services } = useDataVisualizerKibana();
   const {
     data: { dataViews, search },
@@ -247,8 +246,8 @@ export const DataVisualizerUrlStateContextProvider: FC<
         <IndexDataVisualizerComponent
           currentDataView={currentDataView}
           currentSavedSearch={currentSavedSearch}
-          additionalLinks={additionalLinks}
           currentSessionId={currentSessionId}
+          getAdditionalLinks={getAdditionalLinks}
         />
       ) : (
         <div />
@@ -257,7 +256,9 @@ export const DataVisualizerUrlStateContextProvider: FC<
   );
 };
 
-export const IndexDataVisualizer: FC<{ additionalLinks: ResultLink[] }> = ({ additionalLinks }) => {
+export const IndexDataVisualizer: FC<{
+  getAdditionalLinks?: GetAdditionalLinks;
+}> = ({ getAdditionalLinks }) => {
   const coreStart = getCoreStart();
   const {
     data,
@@ -294,7 +295,7 @@ export const IndexDataVisualizer: FC<{ additionalLinks: ResultLink[] }> = ({ add
       <KibanaContextProvider services={{ ...services }}>
         <DataVisualizerUrlStateContextProvider
           IndexDataVisualizerComponent={IndexDataVisualizerView}
-          additionalLinks={additionalLinks}
+          getAdditionalLinks={getAdditionalLinks}
         />
       </KibanaContextProvider>
     </KibanaThemeProvider>

x-pack/plugins/data_visualizer/public/index.ts

@@ -18,4 +18,8 @@ export type {
   IndexDataVisualizerSpec,
   IndexDataVisualizerViewProps,
 } from './application';
-export type { ResultLink } from './application/common/components/results_links';
+export type {
+  GetAdditionalLinksParams,
+  ResultLink,
+  GetAdditionalLinks,
+} from './application/common/components/results_links';

x-pack/plugins/ml/common/constants/locator.ts

@@ -38,6 +38,7 @@ export const ML_PAGES = {
    */
   DATA_VISUALIZER_INDEX_VIEWER: 'jobs/new_job/datavisualizer',
   ANOMALY_DETECTION_CREATE_JOB: `jobs/new_job`,
+  ANOMALY_DETECTION_CREATE_JOB_RECOGNIZER: `jobs/new_job/recognize`,
   ANOMALY_DETECTION_CREATE_JOB_ADVANCED: `jobs/new_job/advanced`,
   ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE: `jobs/new_job/step/job_type`,
   ANOMALY_DETECTION_CREATE_JOB_SELECT_INDEX: `jobs/new_job/step/index_or_search`,

x-pack/plugins/ml/common/types/locator.ts

@@ -46,6 +46,7 @@ export interface MlGenericUrlPageState extends MlIndexBasedSearchState {
 export type MlGenericUrlState = MLPageState<
   | typeof ML_PAGES.DATA_VISUALIZER_INDEX_VIEWER
   | typeof ML_PAGES.ANOMALY_DETECTION_CREATE_JOB
+  | typeof ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_RECOGNIZER
   | typeof ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_ADVANCED
   | typeof ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE
   | typeof ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_INDEX

x-pack/plugins/ml/public/application/components/link_card/link_card.tsx

@@ -39,7 +39,7 @@ export const LinkCard: FC<Props> = ({
   onClick,
   href,
   isDisabled,
-  'data-test-subj': dateTestSubj,
+  'data-test-subj': dataTestSubj,
 }) => {
   const linkHrefAndOnClickProps = {
     ...(href ? { href } : {}),
@@ -58,7 +58,7 @@ export const LinkCard: FC<Props> = ({
           background: 'transparent',
           outline: 'none',
         }}
-        data-test-subj={dateTestSubj}
+        data-test-subj={dataTestSubj}
         color="subdued"
         {...linkHrefAndOnClickProps}
       >

x-pack/plugins/ml/public/application/datavisualizer/file_based/file_datavisualizer.tsx

@@ -8,7 +8,11 @@
 import React, { FC, Fragment, useState, useEffect, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import type { ResultLink, FileDataVisualizerSpec } from '@kbn/data-visualizer-plugin/public';
+import type {
+  FileDataVisualizerSpec,
+  GetAdditionalLinksParams,
+  GetAdditionalLinks,
+} from '@kbn/data-visualizer-plugin/public';
 import { useTimefilter } from '../../contexts/kibana';
 import { HelpMenu } from '../../components/help_menu';
 import { useMlKibana, useMlLocator } from '../../contexts/kibana';
@@ -19,11 +23,6 @@ import { mlNodesAvailable, getMlNodeCount } from '../../ml_nodes_check/check_ml_
 import { checkPermission } from '../../capabilities/check_capabilities';
 import { MlPageHeader } from '../../components/page_header';
 
-interface GetUrlParams {
-  indexPatternId: string;
-  globalState: any;
-}
-
 export const FileDataVisualizerPage: FC = () => {
   useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
   const {
@@ -40,60 +39,62 @@ export const FileDataVisualizerPage: FC = () => {
 
   const [FileDataVisualizer, setFileDataVisualizer] = useState<FileDataVisualizerSpec | null>(null);
 
-  const links: ResultLink[] = useMemo(
+  const getAdditionalLinks: GetAdditionalLinks = useMemo(
     () => [
-      {
+      async ({ dataViewId, globalState }: GetAdditionalLinksParams) => [
-        id: 'create_ml_job',
+        {
-        title: i18n.translate('xpack.ml.fileDatavisualizer.actionsPanel.anomalyDetectionTitle', {
+          id: 'create_ml_job',
-          defaultMessage: 'Create new ML job',
+          title: i18n.translate('xpack.ml.fileDatavisualizer.actionsPanel.anomalyDetectionTitle', {
-        }),
+            defaultMessage: 'Create ML job',
-        description: '',
+          }),
-        icon: 'machineLearningApp',
+          description: '',
-        type: 'file',
+          icon: 'machineLearningApp',
-        getUrl: async ({ indexPatternId, globalState }: GetUrlParams) => {
+          type: 'file',
-          return await mlLocator.getUrl({
+          getUrl: async () => {
-            page: ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE,
+            return await mlLocator.getUrl({
-            pageState: {
+              page: ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE,
-              index: indexPatternId,
+              pageState: {
-              globalState,
+                index: dataViewId,
-            },
+                globalState,
-          });
+              },
+            });
+          },
+          canDisplay: async () => {
+            try {
+              const { timeFieldName } = await getDataView(dataViewId);
+              return (
+                isFullLicense() &&
+                timeFieldName !== undefined &&
+                checkPermission('canCreateJob') &&
+                mlNodesAvailable()
+              );
+            } catch (error) {
+              return false;
+            }
+          },
         },
-        canDisplay: async ({ indexPatternId }) => {
+        {
-          try {
+          id: 'open_in_data_viz',
-            const { timeFieldName } = await getDataView(indexPatternId);
+          title: i18n.translate('xpack.ml.fileDatavisualizer.actionsPanel.dataframeTitle', {
-            return (
+            defaultMessage: 'Open in Data Visualizer',
-              isFullLicense() &&
+          }),
-              timeFieldName !== undefined &&
+          description: '',
-              checkPermission('canCreateJob') &&
+          icon: 'dataVisualizer',
-              mlNodesAvailable()
+          type: 'file',
-            );
+          getUrl: async () => {
-          } catch (error) {
+            return await mlLocator.getUrl({
-            return false;
+              page: ML_PAGES.DATA_VISUALIZER_INDEX_VIEWER,
-          }
+              pageState: {
+                index: dataViewId,
+                globalState,
+              },
+            });
+          },
+          canDisplay: async () => dataViewId !== '',
         },
-      },
+      ],
-      {
-        id: 'open_in_data_viz',
-        title: i18n.translate('xpack.ml.fileDatavisualizer.actionsPanel.dataframeTitle', {
-          defaultMessage: 'Open in Data Visualizer',
-        }),
-        description: '',
-        icon: 'dataVisualizer',
-        type: 'file',
-        getUrl: async ({ indexPatternId, globalState }: GetUrlParams) => {
-          return await mlLocator.getUrl({
-            page: ML_PAGES.DATA_VISUALIZER_INDEX_VIEWER,
-            pageState: {
-              index: indexPatternId,
-              globalState,
-            },
-          });
-        },
-        canDisplay: async ({ indexPatternId }) => indexPatternId !== '',
-      },
     ],
-    []
+    [mlLocator]
   );
 
   useEffect(() => {
@@ -114,7 +115,7 @@ export const FileDataVisualizerPage: FC = () => {
               defaultMessage="Data Visualizer"
             />
           </MlPageHeader>
-          <FileDataVisualizer additionalLinks={links} />
+          <FileDataVisualizer getAdditionalLinks={getAdditionalLinks} />
         </>
       ) : null}
       <HelpMenu docLink={docLinks.links.ml.guide} />

x-pack/plugins/ml/public/application/datavisualizer/index_based/index_data_visualizer.tsx

@@ -5,28 +5,38 @@
  * 2.0.
  */
 
-import React, { FC, Fragment, useEffect, useState, useMemo } from 'react';
+import React, { FC, Fragment, useEffect, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import type { ResultLink, IndexDataVisualizerSpec } from '@kbn/data-visualizer-plugin/public';
+import type {
+  IndexDataVisualizerSpec,
+  ResultLink,
+  GetAdditionalLinks,
+  GetAdditionalLinksParams,
+} from '@kbn/data-visualizer-plugin/public';
 import { useMlKibana, useTimefilter, useMlLocator } from '../../contexts/kibana';
 import { HelpMenu } from '../../components/help_menu';
 import { ML_PAGES } from '../../../../common/constants/locator';
 import { isFullLicense } from '../../license';
 import { mlNodesAvailable, getMlNodeCount } from '../../ml_nodes_check/check_ml_nodes';
 import { checkPermission } from '../../capabilities/check_capabilities';
-
 import { MlPageHeader } from '../../components/page_header';
 
-interface GetUrlParams {
+interface RecognizerModule {
-  indexPatternId: string;
+  id: string;
-  globalState: any;
+  title: string;
+  query: Record<string, object>;
+  description: string;
+  logo: {
+    icon: string;
+  };
 }
 
 export const IndexDataVisualizerPage: FC = () => {
   useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
   const {
     services: {
+      http,
       docLinks,
       dataVisualizer,
       data: {
@@ -48,8 +58,12 @@ export const IndexDataVisualizerPage: FC = () => {
     }
   }, []);
 
-  const links: ResultLink[] = useMemo(
+  const getAsyncMLCards = async ({
-    () => [
+    dataViewId,
+    dataViewTitle,
+    globalState,
+  }: GetAdditionalLinksParams): Promise<ResultLink[]> => {
+    return [
       {
         id: 'create_ml_ad_job',
         title: i18n.translate('xpack.ml.indexDatavisualizer.actionsPanel.anomalyDetectionTitle', {
@@ -64,18 +78,18 @@ export const IndexDataVisualizerPage: FC = () => {
         ),
         icon: 'createAdvancedJob',
         type: 'file',
-        getUrl: async ({ indexPatternId, globalState }: GetUrlParams) => {
+        getUrl: async () => {
           return await mlLocator.getUrl({
             page: ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_ADVANCED,
             pageState: {
-              index: indexPatternId,
+              index: dataViewId,
               globalState,
             },
           });
         },
-        canDisplay: async ({ indexPatternId }) => {
+        canDisplay: async () => {
           try {
-            const { timeFieldName } = await getDataView(indexPatternId);
+            const { timeFieldName } = await getDataView(dataViewId);
             return (
               isFullLicense() &&
               timeFieldName !== undefined &&
@@ -86,7 +100,7 @@ export const IndexDataVisualizerPage: FC = () => {
             return false;
           }
         },
-        dataTestSubj: 'dataVisualizerCreateAdvancedJobCard',
+        'data-test-subj': 'dataVisualizerCreateAdvancedJobCard',
       },
       {
         id: 'create_ml_dfa_job',
@@ -101,11 +115,11 @@ export const IndexDataVisualizerPage: FC = () => {
         ),
         icon: 'classificationJob',
         type: 'file',
-        getUrl: async ({ indexPatternId, globalState }: GetUrlParams) => {
+        getUrl: async () => {
           return await mlLocator.getUrl({
             page: ML_PAGES.DATA_FRAME_ANALYTICS_CREATE_JOB,
             pageState: {
-              index: indexPatternId,
+              index: dataViewId,
               globalState,
             },
           });
@@ -115,12 +129,57 @@ export const IndexDataVisualizerPage: FC = () => {
             isFullLicense() && checkPermission('canCreateDataFrameAnalytics') && mlNodesAvailable()
           );
         },
-        dataTestSubj: 'dataVisualizerCreateDataFrameAnalyticsCard',
+        'data-test-subj': 'dataVisualizerCreateDataFrameAnalyticsCard',
       },
-    ],
+    ];
-    []
+  };
-  );
 
+  const getAsyncRecognizedModuleCards = async (params: GetAdditionalLinksParams) => {
+    const { dataViewId, dataViewTitle } = params;
+    const modules = await http.fetch<RecognizerModule[]>(
+      `/api/ml/modules/recognize/${dataViewTitle}`,
+      {
+        method: 'GET',
+      }
+    );
+    return modules?.map(
+      (m): ResultLink => ({
+        id: m.id,
+        title: m.title,
+        description: m.description,
+        icon: m.logo.icon,
+        type: 'index',
+        getUrl: async () => {
+          return await mlLocator.getUrl({
+            page: ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_RECOGNIZER,
+            pageState: {
+              id: m.id,
+              index: dataViewId,
+            },
+          });
+        },
+        canDisplay: async () => {
+          try {
+            const { timeFieldName } = await getDataView(dataViewId);
+            return (
+              isFullLicense() &&
+              timeFieldName !== undefined &&
+              checkPermission('canCreateJob') &&
+              mlNodesAvailable()
+            );
+          } catch (error) {
+            return false;
+          }
+        },
+        'data-test-subj': m.id,
+      })
+    );
+  };
+
+  const getAdditionalLinks: GetAdditionalLinks = useMemo(
+    () => [getAsyncRecognizedModuleCards, getAsyncMLCards],
+    [mlLocator]
+  );
   return IndexDataVisualizer ? (
     <Fragment>
       {IndexDataVisualizer !== null ? (
@@ -131,7 +190,7 @@ export const IndexDataVisualizerPage: FC = () => {
               defaultMessage="Data Visualizer"
             />
           </MlPageHeader>
-          <IndexDataVisualizer additionalLinks={links} />
+          <IndexDataVisualizer getAdditionalLinks={getAdditionalLinks} />
         </>
       ) : null}
       <HelpMenu docLink={docLinks.links.ml.guide} />

x-pack/plugins/ml/public/locator/ml_locator.ts

@@ -77,6 +77,7 @@ export class MlLocatorDefinition implements LocatorDefinition<MlLocatorParams> {
         path = formatTrainedModelsNodesManagementUrl('', params.pageState);
         break;
       case ML_PAGES.ANOMALY_DETECTION_CREATE_JOB:
+      case ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_RECOGNIZER:
       case ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_ADVANCED:
       case ML_PAGES.DATA_VISUALIZER:
       case ML_PAGES.DATA_VISUALIZER_FILE: