[ML] Data frame analytics: Adds map view (#81666)

* add analytics map endpoint and server model

* add map action to job and models list

* wip:fetch models for jobs. Use url generator

* get models when extending node. deduplicate elements

* add job type icons. disable map action if job not finished.

* move shared const to common dir

* persist map tab. handle indexPattern from visualizer

* use url generator in models list

* temporarily disable delete action in flyout

* update legend style. make map horizontal

* update dfa model to use spaces changes

* format creation time

* update from indexPattern to index.remove refresh button

* handle index patterns with wildcard

Author: alvarezmelissa87

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

@@ -10,3 +10,12 @@ export const ANALYSIS_CONFIG_TYPE = {
   CLASSIFICATION: 'classification',
 } as const;
 export const DEFAULT_RESULTS_FIELD = 'ml';
+
+export const JOB_MAP_NODE_TYPES = {
+  ANALYTICS: 'analytics',
+  TRANSFORM: 'transform',
+  INDEX: 'index',
+  INFERENCE_MODEL: 'inferenceModel',
+} as const;
+
+export type JobMapNodeTypes = typeof JOB_MAP_NODE_TYPES[keyof typeof JOB_MAP_NODE_TYPES];

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

@@ -12,6 +12,7 @@ export const ML_PAGES = {
   SINGLE_METRIC_VIEWER: 'timeseriesexplorer',
   DATA_FRAME_ANALYTICS_JOBS_MANAGE: 'data_frame_analytics',
   DATA_FRAME_ANALYTICS_EXPLORATION: 'data_frame_analytics/exploration',
+  DATA_FRAME_ANALYTICS_MAP: 'data_frame_analytics/map',
   /**
    * Page: Data Visualizer
    */

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

@@ -159,7 +159,7 @@ export interface DataFrameAnalyticsQueryState {
 }
 
 export type DataFrameAnalyticsUrlState = MLPageState<
-  typeof ML_PAGES.DATA_FRAME_ANALYTICS_JOBS_MANAGE,
+  typeof ML_PAGES.DATA_FRAME_ANALYTICS_JOBS_MANAGE | typeof ML_PAGES.DATA_FRAME_ANALYTICS_MAP,
   DataFrameAnalyticsQueryState | undefined
 >;
 

x-pack/plugins/ml/common/util/analytics_utils.ts

@@ -10,7 +10,8 @@ import {
   OutlierAnalysis,
   RegressionAnalysis,
 } from '../types/data_frame_analytics';
-import { ANALYSIS_CONFIG_TYPE } from '../../common/constants/data_frame_analytics';
+import { ANALYSIS_CONFIG_TYPE } from '../constants/data_frame_analytics';
+import { DataFrameAnalysisConfigType } from '../types/data_frame_analytics';
 
 export const isOutlierAnalysis = (arg: any): arg is OutlierAnalysis => {
   if (typeof arg !== 'object' || arg === null) return false;
@@ -80,3 +81,15 @@ export const getPredictedFieldName = (
   }`;
   return predictedField;
 };
+
+export const getAnalysisType = (
+  analysis: AnalysisConfig
+): DataFrameAnalysisConfigType | 'unknown' => {
+  const keys = Object.keys(analysis || {});
+
+  if (keys.length === 1) {
+    return keys[0] as DataFrameAnalysisConfigType;
+  }
+
+  return 'unknown';
+};

x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss

@@ -1,4 +1,5 @@
 @import 'pages/analytics_exploration/components/regression_exploration/index';
+@import 'pages/job_map/components/index';
 @import 'pages/analytics_management/components/analytics_list/index';
 @import 'pages/analytics_management/components/create_analytics_button/index';
 @import 'pages/analytics_creation/components/index';

x-pack/plugins/ml/public/application/data_frame_analytics/common/analytics.ts

@@ -27,6 +27,8 @@ import {
   getPredictedFieldName,
 } from '../../../../common/util/analytics_utils';
 import { ANALYSIS_CONFIG_TYPE } from '../../../../common/constants/data_frame_analytics';
+
+export { getAnalysisType } from '../../../../common/util/analytics_utils';
 export type IndexPattern = string;
 
 export enum ANALYSIS_ADVANCED_FIELDS {
@@ -159,18 +161,6 @@ interface LoadEvaluateResult {
   error: string | null;
 }
 
-export const getAnalysisType = (
-  analysis: AnalysisConfig
-): DataFrameAnalysisConfigType | 'unknown' => {
-  const keys = Object.keys(analysis);
-
-  if (keys.length === 1) {
-    return keys[0] as DataFrameAnalysisConfigType;
-  }
-
-  return 'unknown';
-};
-
 export const getTrainingPercent = (
   analysis: AnalysisConfig
 ):

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_map/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { MapButton } from './map_button';
+export { useMapAction } from './use_map_action';

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_map/map_button.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiToolTip } from '@elastic/eui';
+
+import {
+  isRegressionAnalysis,
+  isOutlierAnalysis,
+  isClassificationAnalysis,
+} from '../../../../common/analytics';
+
+import { DataFrameAnalyticsListRow } from '../analytics_list/common';
+
+export const mapActionButtonText = i18n.translate(
+  'xpack.ml.dataframe.analyticsList.mapActionName',
+  {
+    defaultMessage: 'Map',
+  }
+);
+interface MapButtonProps {
+  item: DataFrameAnalyticsListRow;
+}
+
+export const MapButton: FC<MapButtonProps> = ({ item }) => {
+  const disabled =
+    !isRegressionAnalysis(item.config.analysis) &&
+    !isOutlierAnalysis(item.config.analysis) &&
+    !isClassificationAnalysis(item.config.analysis);
+
+  if (disabled) {
+    const toolTipContent = i18n.translate(
+      'xpack.ml.dataframe.analyticsList.mapActionDisabledTooltipContent',
+      {
+        defaultMessage: 'Unknown analysis type.',
+      }
+    );
+
+    return (
+      <EuiToolTip position="top" content={toolTipContent}>
+        <>{mapActionButtonText}</>
+      </EuiToolTip>
+    );
+  }
+
+  return <>{mapActionButtonText}</>;
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_map/use_map_action.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { useMlUrlGenerator, useNavigateToPath } from '../../../../../contexts/kibana';
+import { DataFrameAnalyticsListAction, DataFrameAnalyticsListRow } from '../analytics_list/common';
+import { ML_PAGES } from '../../../../../../../common/constants/ml_url_generator';
+import { getViewLinkStatus } from '../action_view/get_view_link_status';
+
+import { mapActionButtonText, MapButton } from './map_button';
+
+export type MapAction = ReturnType<typeof useMapAction>;
+export const useMapAction = () => {
+  const mlUrlGenerator = useMlUrlGenerator();
+  const navigateToPath = useNavigateToPath();
+
+  const clickHandler = useCallback(async (item: DataFrameAnalyticsListRow) => {
+    const path = await mlUrlGenerator.createUrl({
+      page: ML_PAGES.DATA_FRAME_ANALYTICS_MAP,
+      pageState: { jobId: item.id },
+    });
+
+    await navigateToPath(path, false);
+  }, []);
+
+  const action: DataFrameAnalyticsListAction = useMemo(
+    () => ({
+      isPrimary: true,
+      name: (item: DataFrameAnalyticsListRow) => <MapButton item={item} />,
+      enabled: (item: DataFrameAnalyticsListRow) => !getViewLinkStatus(item).disabled,
+      description: mapActionButtonText,
+      icon: 'graphApp',
+      type: 'icon',
+      onClick: clickHandler,
+      'data-test-subj': 'mlAnalyticsJobMapButton',
+    }),
+    [clickHandler]
+  );
+
+  return { action };
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_actions.tsx

@@ -16,6 +16,7 @@ import { isEditActionFlyoutVisible, useEditAction, EditActionFlyout } from '../a
 import { useStartAction, StartActionModal } from '../action_start';
 import { useStopAction, StopActionModal } from '../action_stop';
 import { useViewAction } from '../action_view';
+import { useMapAction } from '../action_map';
 
 import { DataFrameAnalyticsListRow } from './common';
 
@@ -30,6 +31,7 @@ export const useActions = (
   const canStartStopDataFrameAnalytics: boolean = checkPermission('canStartStopDataFrameAnalytics');
 
   const viewAction = useViewAction();
+  const mapAction = useMapAction();
   const cloneAction = useCloneAction(canCreateDataFrameAnalytics);
   const deleteAction = useDeleteAction(canDeleteDataFrameAnalytics);
   const editAction = useEditAction(canStartStopDataFrameAnalytics);
@@ -40,6 +42,7 @@ export const useActions = (
 
   const actions: EuiTableActionsColumnType<DataFrameAnalyticsListRow>['actions'] = [
     viewAction.action,
+    mapAction.action,
   ];
 
   // isManagementTable will be the same for the lifecycle of the component