[ML] Job type page (#46933)

* [ML] wip job types to react

* [ML] delete angular job_type page

* [ML] TS refactoring

* [ML] restrict page width

* [ML] refactor with CreateJobLinkCard

* [ML] data-test-subj for functional tests

* [ML] fix recognized results

* [ML] missing i18n

* [ML] add custom logo support for create job link card, change data recognizer layout

* [ML] rename iconType prop

* [ML] remove unused styles

* [ML] fix page background

* [ML] data recognizer wrappers

* [ML] fix IE issue, IndexPatternSavedObject

* [ML] fix callout

* [ML] job type directive test

* [ML] fix types

x-pack/legacy/plugins/ml/public/_hacks.scss

@@ -1,21 +1,10 @@
 .tab-datavisualizer_index_select,
 .tab-timeseriesexplorer,
-.tab-explorer,
-.tab-jobs {
+.tab-explorer, {
   // Make all page background white until More of the pages use EuiPage to wrap in panel-like components
   background-color: $euiColorEmptyShade;
 }
 
-.tab-jobs {
-  label {
-    display: inline-block;
-  }
-
-   .validation-error {
-    margin-top: $euiSizeXS;
-  }
-}
-
 // ML specific bootstrap hacks
 .button-wrapper {
   display: inline;

x-pack/legacy/plugins/ml/public/breadcrumbs.js → x-pack/legacy/plugins/ml/public/breadcrumbs.ts

@@ -8,28 +8,28 @@ import { i18n } from '@kbn/i18n';
 
 export const ML_BREADCRUMB = Object.freeze({
   text: i18n.translate('xpack.ml.machineLearningBreadcrumbLabel', {
-    defaultMessage: 'Machine Learning'
+    defaultMessage: 'Machine Learning',
   }),
-  href: '#/'
+  href: '#/',
 });
 
 export const SETTINGS = Object.freeze({
   text: i18n.translate('xpack.ml.settingsBreadcrumbLabel', {
-    defaultMessage: 'Settings'
+    defaultMessage: 'Settings',
   }),
-  href: '#/settings?'
+  href: '#/settings?',
 });
 
 export const ANOMALY_DETECTION_BREADCRUMB = Object.freeze({
   text: i18n.translate('xpack.ml.anomalyDetectionBreadcrumbLabel', {
-    defaultMessage: 'Anomaly Detection'
+    defaultMessage: 'Anomaly Detection',
   }),
-  href: '#/jobs?'
+  href: '#/jobs?',
 });
 
 export const DATA_VISUALIZER_BREADCRUMB = Object.freeze({
   text: i18n.translate('xpack.ml.datavisualizerBreadcrumbLabel', {
-    defaultMessage: 'Data Visualizer'
+    defaultMessage: 'Data Visualizer',
   }),
-  href: '#/datavisualizer?'
+  href: '#/datavisualizer?',
 });

x-pack/legacy/plugins/ml/public/components/create_job_link_card/create_job_link_card.tsx

@@ -4,25 +4,77 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, ReactElement } from 'react';
 
-import { EuiCard, EuiIcon, IconType } from '@elastic/eui';
+import {
+  EuiIcon,
+  IconType,
+  EuiText,
+  EuiTitle,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiPanel,
+  EuiLink,
+} from '@elastic/eui';
 
 interface Props {
-  iconType: IconType;
-  title: string;
-  description: string;
-  onClick(): void;
+  icon: IconType | ReactElement;
+  iconAreaLabel?: string;
+  title: any;
+  description: any;
+  href?: string;
+  onClick?: () => void;
+  isDisabled?: boolean;
+  'data-test-subj'?: string;
 }
 
 // Component for rendering a card which links to the Create Job page, displaying an
 // icon, card title, description and link.
-export const CreateJobLinkCard: FC<Props> = ({ iconType, title, description, onClick }) => (
-  <EuiCard
-    layout="horizontal"
-    icon={<EuiIcon size="xl" type={iconType} />}
-    title={title}
-    description={description}
-    onClick={onClick}
-  />
-);
+export const CreateJobLinkCard: FC<Props> = ({
+  icon,
+  iconAreaLabel,
+  title,
+  description,
+  onClick,
+  href,
+  isDisabled,
+  'data-test-subj': dateTestSubj,
+}) => {
+  const linkHrefAndOnClickProps = {
+    ...(href ? { href } : {}),
+    ...(onClick ? { onClick } : {}),
+  };
+  return (
+    <EuiPanel style={{ cursor: isDisabled ? 'not-allowed' : undefined }}>
+      <EuiLink
+        style={{
+          display: 'block',
+          pointerEvents: isDisabled ? 'none' : undefined,
+          background: 'transparent',
+          outline: 'none',
+        }}
+        data-test-subj={dateTestSubj}
+        color="subdued"
+        {...linkHrefAndOnClickProps}
+      >
+        <EuiFlexGroup gutterSize="l" responsive={true}>
+          <EuiFlexItem grow={false} style={{ paddingTop: '8px' }}>
+            {typeof icon === 'string' ? (
+              <EuiIcon size="xl" type={icon} aria-label={iconAreaLabel} />
+            ) : (
+              icon
+            )}
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiTitle size="s">
+              <h4>{title}</h4>
+            </EuiTitle>
+            <EuiText color="subdued">
+              <p>{description}</p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiLink>
+    </EuiPanel>
+  );
+};

x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.d.ts

@@ -7,9 +7,14 @@
 import { FC } from 'react';
 
 import { IndexPattern } from 'ui/index_patterns';
+import { SavedSearch } from 'src/legacy/core_plugins/kibana/public/discover/types';
 
 declare const DataRecognizer: FC<{
   indexPattern: IndexPattern;
-  results: any;
-  className: string;
+  savedSearch?: SavedSearch;
+  results: {
+    count: number;
+    onChange?: Function;
+  };
+  className?: string;
 }>;

x-pack/legacy/plugins/ml/public/components/data_recognizer/data_recognizer.js

@@ -57,9 +57,9 @@ export class DataRecognizer extends Component {
 
   render() {
     return (
-      <div className={this.className}>
+      <>
         {this.state.results}
-      </div>
+      </>
     );
   }
 }

x-pack/legacy/plugins/ml/public/components/data_recognizer/recognized_result.js

@@ -11,7 +11,9 @@ import PropTypes from 'prop-types';
 
 import {
   EuiIcon,
+  EuiFlexItem
 } from '@elastic/eui';
+import { CreateJobLinkCard } from '../create_job_link_card';
 
 export const RecognizedResult = ({
   config,
@@ -28,35 +30,23 @@ export const RecognizedResult = ({
   // if a logo is available, use that, otherwise display the id
   // the logo should be a base64 encoded image or an eui icon
   if(config.logo && config.logo.icon) {
-    logo = <div className="synopsisIcon"><EuiIcon type={config.logo.icon} size="xl" /></div>;
+    logo = <EuiIcon type={config.logo.icon} size="xl" />;
   } else if (config.logo && config.logo.src) {
-    logo = <div><img className="synopsisIcon" alt="" src={config.logo.src}/></div>;
+    logo = <img alt="" src={config.logo.src}/>;
   } else {
     logo = <h3 className="euiTitle euiTitle--small">{config.id}</h3>;
   }
 
   return (
-    <div className="euiFlexItem">
-      <a href={href} className="euiLink synopsis">
-        <div className="euiPanel euiPanel--paddingMedium synopsisPanel">
-          <div className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
-            <div className="euiFlexItem euiFlexItem--flexGrowZero ml-data-recognizer-logo">
-              {logo}
-            </div>
-            <div className="euiFlexItem synopsisContent">
-              <h4 className="euiTitle euiTitle--small synopsisTitle">{config.title}</h4>
-              <div className="euiText synopsisBody">
-                <p>
-                  <span className="euiTextColor euiTextColor--subdued">
-                    {config.description}
-                  </span>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </a>
-    </div>
+    <EuiFlexItem>
+      <CreateJobLinkCard
+        data-test-subj={id}
+        href={href}
+        title={config.title}
+        description={config.description}
+        icon={logo}
+      />
+    </EuiFlexItem>
   );
 };
 

x-pack/legacy/plugins/ml/public/datavisualizer/index_based/components/actions_panel/actions_panel.tsx

@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 
 import { IndexPattern } from 'ui/index_patterns';
 
-import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiPanel, EuiSpacer, EuiText, EuiTitle, EuiFlexGroup } from '@elastic/eui';
 
 import { useUiChromeContext } from '../../../../contexts/ui/use_ui_chrome_context';
 import { CreateJobLinkCard } from '../../../../components/create_job_link_card';
@@ -63,11 +63,9 @@ export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
           </p>
         </EuiText>
         <EuiSpacer size="m" />
-        <DataRecognizer
-          indexPattern={indexPattern}
-          results={recognizerResults}
-          className="euiFlexGroup euiFlexGrid--gutterLarge euiFlexGroup--responsive euiFlexGroup--wrap"
-        ></DataRecognizer>
+        <EuiFlexGroup gutterSize="l" responsive={true} wrap={true}>
+          <DataRecognizer indexPattern={indexPattern} results={recognizerResults}></DataRecognizer>
+        </EuiFlexGroup>
         <EuiSpacer size="l" />
       </div>
       <EuiText>
@@ -80,7 +78,7 @@ export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
       </EuiText>
       <EuiSpacer size="m" />
       <CreateJobLinkCard
-        iconType="createAdvancedJob"
+        icon="createAdvancedJob"
         title={i18n.translate('xpack.ml.datavisualizer.actionsPanel.advancedTitle', {
           defaultMessage: 'Advanced',
         })}
@@ -89,6 +87,7 @@ export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
             'Use the full range of options to create a job for more advanced use cases',
         })}
         onClick={openAdvancedJobWizard}
+        href={`${basePath}/app/ml#/jobs/new_job/advanced?index=${indexPattern}`}
       />
     </EuiPanel>
   );

x-pack/legacy/plugins/ml/public/index.scss

@@ -36,7 +36,6 @@
   @import 'components/chart_tooltip/index';
   @import 'components/confirm_modal/index';
   @import 'components/controls/index';
-  @import 'components/data_recognizer/index';
   @import 'components/documentation_help_link/index';
   @import 'components/entity_cell/index';
   @import 'components/field_title_bar/index';