[ML] Job type page

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

@@ -6,23 +6,56 @@
 
 import React, { FC } 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;
+  title: any;
+  description: any;
+  href?: string;
+  onClick?: () => void;
+  isDisabled?: boolean;
 }
 
 // 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> = ({
+  iconType,
+  title,
+  description,
+  onClick,
+  href,
+  isDisabled,
+}) => (
+  <EuiPanel style={{ cursor: isDisabled ? 'not-allowed' : undefined }}>
+    {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+    <EuiLink
+      href={href}
+      onClick={onClick}
+      style={{ display: 'block', pointerEvents: isDisabled ? 'none' : undefined }}
+    >
+      <EuiFlexGroup gutterSize="l" responsive={true}>
+        <EuiFlexItem grow={false} style={{ paddingTop: '8px' }}>
+          <EuiIcon size="xl" type={iconType} aria-label="" />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h3>{title}</h3>
+          </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/jobs/breadcrumbs.js → x-pack/legacy/plugins/ml/public/jobs/breadcrumbs.ts

@@ -4,106 +4,109 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-import { ML_BREADCRUMB, DATA_VISUALIZER_BREADCRUMB, ANOMALY_DETECTION_BREADCRUMB } from '../breadcrumbs';
 import { i18n } from '@kbn/i18n';
+import { Breadcrumb } from 'ui/chrome';
+import {
+  ANOMALY_DETECTION_BREADCRUMB,
+  DATA_VISUALIZER_BREADCRUMB,
+  ML_BREADCRUMB,
+} from '../breadcrumbs';
 
-
-export function getJobManagementBreadcrumbs() {
+export function getJobManagementBreadcrumbs(): Breadcrumb[] {
   // Whilst top level nav menu with tabs remains,
   // use root ML breadcrumb.
   return [
     ML_BREADCRUMB,
     ANOMALY_DETECTION_BREADCRUMB,
     {
       text: i18n.translate('xpack.ml.anomalyDetection.jobManagementLabel', {
-        defaultMessage: 'Job Management'
+        defaultMessage: 'Job Management',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getCreateJobBreadcrumbs() {
+export function getCreateJobBreadcrumbs(): Breadcrumb[] {
   return [
     ML_BREADCRUMB,
     ANOMALY_DETECTION_BREADCRUMB,
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.createJobLabel', {
-        defaultMessage: 'Create job'
+        defaultMessage: 'Create job',
       }),
-      href: '#/jobs/new_job'
-    }
+      href: '#/jobs/new_job',
+    },
   ];
 }
 
-export function getCreateSingleMetricJobBreadcrumbs() {
+export function getCreateSingleMetricJobBreadcrumbs(): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.singleMetricLabel', {
-        defaultMessage: 'Single metric'
+        defaultMessage: 'Single metric',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getCreateMultiMetricJobBreadcrumbs() {
+export function getCreateMultiMetricJobBreadcrumbs(): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.multiMetricLabel', {
-        defaultMessage: 'Multi metric'
+        defaultMessage: 'Multi metric',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getCreatePopulationJobBreadcrumbs() {
+export function getCreatePopulationJobBreadcrumbs(): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.populationLabel', {
-        defaultMessage: 'Population'
+        defaultMessage: 'Population',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getAdvancedJobConfigurationBreadcrumbs() {
+export function getAdvancedJobConfigurationBreadcrumbs(): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.advancedConfigurationLabel', {
-        defaultMessage: 'Advanced configuration'
+        defaultMessage: 'Advanced configuration',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getCreateRecognizerJobBreadcrumbs($routeParams) {
+export function getCreateRecognizerJobBreadcrumbs($routeParams: any): Breadcrumb[] {
   return [
     ...getCreateJobBreadcrumbs(),
     {
       text: $routeParams.id,
-      href: ''
-    }
+      href: '',
+    },
   ];
 }
 
-export function getDataVisualizerIndexOrSearchBreadcrumbs() {
+export function getDataVisualizerIndexOrSearchBreadcrumbs(): Breadcrumb[] {
   return [
     ML_BREADCRUMB,
     DATA_VISUALIZER_BREADCRUMB,
     {
       text: i18n.translate('xpack.ml.jobsBreadcrumbs.selectIndexOrSearchLabel', {
-        defaultMessage: 'Select index or search'
+        defaultMessage: 'Select index or search',
       }),
-      href: ''
-    }
+      href: '',
+    },
   ];
 }

x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/index.js

@@ -9,5 +9,4 @@
 // SASS TODO: Import wizard.scss instead
 // import 'plugins/kibana/visualize/wizard/wizard.less';
 import './steps/index_or_search';
-import './steps/job_type';
 import 'plugins/ml/components/data_recognizer';