[ML] Converts index based data visualizer to React (#42685)

* [ML] Converts index based data visualizer to React

* [ML] Remove unused imports in React data visualizer

* [ML] Address review feedback

* [ML] Address comments from code review

* [ML] Remove redundant ts-ignore

x-pack/legacy/plugins/ml/common/constants/search.ts

@@ -6,3 +6,8 @@
 
 export const ANNOTATIONS_TABLE_DEFAULT_QUERY_SIZE = 500;
 export const ANOMALIES_TABLE_DEFAULT_QUERY_SIZE = 500;
+
+export enum SEARCH_QUERY_LANGUAGE {
+  KUERY = 'kuery',
+  LUCENE = 'lucene',
+}

x-pack/legacy/plugins/ml/public/app.js

@@ -22,6 +22,7 @@ import 'plugins/ml/jobs';
 import 'plugins/ml/services/calendar_service';
 import 'plugins/ml/components/messagebar';
 import 'plugins/ml/data_frame';
+import 'plugins/ml/data_visualizer';
 import 'plugins/ml/datavisualizer';
 import 'plugins/ml/explorer';
 import 'plugins/ml/timeseriesexplorer';

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

@@ -0,0 +1,28 @@
+/*
+ * 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 { EuiCard, EuiIcon, IconType } from '@elastic/eui';
+
+interface Props {
+  iconType: IconType;
+  title: string;
+  description: string;
+  onClick(): void;
+}
+
+// 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}
+  />
+);

x-pack/legacy/plugins/ml/public/components/create_job_link_card/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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 { CreateJobLinkCard } from './create_job_link_card';

x-pack/legacy/plugins/ml/public/components/display_value/display_value.js → x-pack/legacy/plugins/ml/public/components/display_value/display_value.tsx

@@ -4,31 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
-import React from 'react';
-import {
-  EuiToolTip
-} from '@elastic/eui';
-
+import React, { FC } from 'react';
+import { EuiToolTip } from '@elastic/eui';
 
 const MAX_CHARS = 12;
 
-export function DisplayValue({ value }) {
+export const DisplayValue: FC<{ value: any }> = ({ value }) => {
   const length = String(value).length;
-  let formattedValue;
 
   if (length <= MAX_CHARS) {
-    formattedValue = value;
+    return value;
   } else {
-    formattedValue = (
+    return (
       <EuiToolTip content={value} anchorClassName="valueWrapper">
-        <span>
-          {value}
-        </span>
+        <span>{value}</span>
       </EuiToolTip>
     );
   }
-
-  return formattedValue;
-}
+};

x-pack/legacy/plugins/ml/public/components/field_data_card/content_types/card_text.html

@@ -30,7 +30,7 @@
     ></p>
     <p
       i18n-id="xpack.ml.fieldDataCard.cardText.fieldMayBePopulatedDescription"
-      i18n-default-message="It may be populated, for example, using a {copyToParam} parameter in the document mapping, or be pruned from the {sourceParam} field afer indexing through the use of {includesParam} and {excludesParam} parameters."
+      i18n-default-message="It may be populated, for example, using a {copyToParam} parameter in the document mapping, or be pruned from the {sourceParam} field after indexing through the use of {includesParam} and {excludesParam} parameters."
       i18n-values="{
         html_copyToParam: '<span class=\'text-code\'>copy_to</span>',
         html_sourceParam: '<span class=\'text-code\'>_source</span>',

x-pack/legacy/plugins/ml/public/components/field_title_bar/index.js

@@ -7,3 +7,5 @@
 
 
 import './field_title_bar_directive';
+
+export { FieldTitleBar } from './field_title_bar';

x-pack/legacy/plugins/ml/public/data_visualizer/_index.scss

@@ -0,0 +1 @@
+@import 'components/field_data_card/index';

x-pack/legacy/plugins/ml/public/data_visualizer/breadcrumbs.ts

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import { ML_BREADCRUMB } from '../breadcrumbs';
+
+export function getDataVisualizerBreadcrumbs() {
+  // Whilst top level nav menu with tabs remains,
+  // use root ML breadcrumb.
+  return [ML_BREADCRUMB];
+}

x-pack/legacy/plugins/ml/public/data_visualizer/common/field_vis_config.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { ML_JOB_FIELD_TYPES } from '../../../common/constants/field_types';
+
+// The internal representation of the configuration used to build the visuals
+// which display the field information.
+// TODO - type stats
+export interface FieldVisConfig {
+  type: ML_JOB_FIELD_TYPES;
+  fieldName?: string;
+  existsInDocs: boolean;
+  aggregatable: boolean;
+  loading: boolean;
+  stats?: any;
+  fieldFormat?: any;
+  isUnsupportedType?: boolean;
+}

x-pack/legacy/plugins/ml/public/data_visualizer/common/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 { FieldVisConfig } from './field_vis_config';
+export { FieldRequestConfig } from './request';

x-pack/legacy/plugins/ml/public/data_visualizer/common/request.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 { ML_JOB_FIELD_TYPES } from '../../../common/constants/field_types';
+
+export interface FieldRequestConfig {
+  fieldName?: string;
+  type: ML_JOB_FIELD_TYPES;
+  cardinality: number;
+}

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

@@ -0,0 +1,65 @@
+/*
+ * 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 { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+
+import { IndexPattern } from 'ui/index_patterns';
+
+import { EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+
+import { useUiChromeContext } from '../../../contexts/ui/use_ui_chrome_context';
+import { CreateJobLinkCard } from '../../../components/create_job_link_card';
+
+interface Props {
+  indexPattern: IndexPattern;
+}
+
+export const ActionsPanel: FC<Props> = ({ indexPattern }) => {
+  const basePath = useUiChromeContext().getBasePath();
+
+  function openAdvancedJobWizard() {
+    // TODO - pass the search string to the advanced job page as well as the index pattern
+    //       (add in with new advanced job wizard?)
+    window.open(`${basePath}/app/ml#/jobs/new_job/advanced?index=${indexPattern}`, '_self');
+  }
+
+  return (
+    <EuiPanel data-test-subj="mlDataVisualizerActionsPanel">
+      <EuiTitle>
+        <h2>
+          <FormattedMessage
+            id="xpack.ml.datavisualizer.actionsPanel.createJobTitle"
+            defaultMessage="Create Job"
+          />
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiText>
+        <p>
+          <FormattedMessage
+            id="xpack.ml.datavisualizer.actionsPanel.createJobDescription"
+            defaultMessage="Use the Advanced job wizard to create a job to find anomalies in this data:"
+          />
+        </p>
+      </EuiText>
+      <EuiSpacer size="m" />
+      <CreateJobLinkCard
+        iconType="createAdvancedJob"
+        title={i18n.translate('xpack.ml.datavisualizer.actionsPanel.advancedTitle', {
+          defaultMessage: 'Advanced',
+        })}
+        description={i18n.translate('xpack.ml.datavisualizer.actionsPanel.advancedDescription', {
+          defaultMessage:
+            'Use the full range of options to create a job for more advanced use cases',
+        })}
+        onClick={openAdvancedJobWizard}
+      />
+    </EuiPanel>
+  );
+};

x-pack/legacy/plugins/ml/public/data_visualizer/components/actions_panel/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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 { ActionsPanel } from './actions_panel';

x-pack/legacy/plugins/ml/public/data_visualizer/components/field_data_card/_field_data_card.scss

@@ -0,0 +1,62 @@
+.mlFieldDataCard {
+  height: 420px;
+  width: 360px;
+
+
+  // Note the names of these styles need to match the type of the field they are displaying.
+  .boolean {
+    background-color: $euiColorVis5;
+  }
+
+  .date {
+    background-color: $euiColorVis7;
+  }
+
+  .document_count {
+    background-color: $euiColorVis2;
+  }
+
+  .geo_point {
+    background-color: $euiColorVis8;
+  }
+
+  .ip {
+    background-color: $euiColorVis3;
+  }
+
+  .keyword {
+    background-color: $euiColorVis0;
+  }
+
+  .number {
+    background-color: $euiColorVis1;
+  }
+
+  .text {
+    background-color: $euiColorVis9;
+  }
+
+  .type-other, .unknown {
+    background-color: $euiColorVis6;
+  }
+
+
+  // Use euiPanel styling
+  @include euiPanel($selector: 'mlFieldDataCard__content');
+
+  .mlFieldDataCard__content {
+    @include euiFontSizeS;
+    height: 385px;
+    border-radius: 0px 0px $euiBorderRadius $euiBorderRadius;
+    overflow: hidden;
+  }
+
+  .mlFieldDataCard__codeContent {
+    font-family: $euiCodeFontFamily;
+  }
+
+  .mlFieldDataCard__stats {
+    padding: $euiSizeS $euiSizeS 0px $euiSizeS;
+    text-align: center;
+  }
+}

x-pack/legacy/plugins/ml/public/data_visualizer/components/field_data_card/_index.scss

@@ -0,0 +1 @@
+@import 'field_data_card';