[ML] Address comments from code review

elastic · Aug 8, 2019 · 992c67e · 992c67e
1 parent 7b862b5
commit 992c67e
Show file tree

Hide file tree

Showing 22 changed files with 92 additions and 143 deletions.
diff --git a/...components/display_value/display_value.js → ...omponents/display_value/display_value.tsx b/...components/display_value/display_value.js → ...omponents/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;
-}
+};
diff --git a/.../public/components/display_value/index.js → .../public/components/display_value/index.ts b/.../public/components/display_value/index.js → .../public/components/display_value/index.ts
diff --git a/...ns/ml/public/data_visualizer/components/field_data_card/content_types/boolean_content.tsx b/...ns/ml/public/data_visualizer/components/field_data_card/content_types/boolean_content.tsx
@@ -9,14 +9,10 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiProgress, EuiSpacer, EuiText } f
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { FieldVisConfig } from '../../../common';
+import { FieldDataCardProps } from '../field_data_card';
 // @ts-ignore
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
 
-interface Props {
-  config: FieldVisConfig;
-}
-
 function getPercentLabel(valueCount: number, totalCount: number): string {
   if (valueCount === 0) {
     return '0%';
@@ -30,7 +26,7 @@ function getPercentLabel(valueCount: number, totalCount: number): string {
   }
 }
 
-export const BooleanContent: FC<Props> = ({ config }) => {
+export const BooleanContent: FC<FieldDataCardProps> = ({ config }) => {
   const { stats } = config;
   if (stats === undefined) {
     return null;

diff --git a/...ugins/ml/public/data_visualizer/components/field_data_card/content_types/date_content.tsx b/...ugins/ml/public/data_visualizer/components/field_data_card/content_types/date_content.tsx
@@ -11,17 +11,13 @@ import { formatDate } from '@elastic/eui/lib/services/format';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { FieldVisConfig } from '../../../common';
+import { FieldDataCardProps } from '../field_data_card';
 // @ts-ignore
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
 
-interface Props {
-  config: FieldVisConfig;
-}
-
 const TIME_FORMAT = 'MMM D YYYY, HH:mm:ss.SSS';
 
-export const DateContent: FC<Props> = ({ config }) => {
+export const DateContent: FC<FieldDataCardProps> = ({ config }) => {
   const { stats } = config;
   if (stats === undefined) {
     return null;

diff --git a/...ublic/data_visualizer/components/field_data_card/content_types/document_count_content.tsx b/...ublic/data_visualizer/components/field_data_card/content_types/document_count_content.tsx
@@ -9,17 +9,13 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { FieldVisConfig } from '../../../common';
+import { FieldDataCardProps } from '../field_data_card';
 import { DocumentCountChart, DocumentCountChartPoint } from '../document_count_chart';
 
-interface Props {
-  config: FieldVisConfig;
-}
-
 const CHART_WIDTH = 325;
 const CHART_HEIGHT = 350;
 
-export const DocumentCountContent: FC<Props> = ({ config }) => {
+export const DocumentCountContent: FC<FieldDataCardProps> = ({ config }) => {
   const { stats } = config;
   if (stats === undefined) {
     return null;

diff --git a/.../ml/public/data_visualizer/components/field_data_card/content_types/geo_point_content.tsx b/.../ml/public/data_visualizer/components/field_data_card/content_types/geo_point_content.tsx
@@ -9,16 +9,12 @@ import { EuiIcon, EuiSpacer } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { FieldVisConfig } from '../../../common';
+import { FieldDataCardProps } from '../field_data_card';
 // @ts-ignore
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
 import { ExamplesList } from '../examples_list';
 
-interface Props {
-  config: FieldVisConfig;
-}
-
-export const GeoPointContent: FC<Props> = ({ config }) => {
+export const GeoPointContent: FC<FieldDataCardProps> = ({ config }) => {
   // TODO - adjust server-side query to get examples using:
 
   // GET /filebeat-apache-2019.01.30/_search

diff --git a/...plugins/ml/public/data_visualizer/components/field_data_card/content_types/ip_content.tsx b/...plugins/ml/public/data_visualizer/components/field_data_card/content_types/ip_content.tsx
@@ -11,16 +11,12 @@ import { formatDate } from '@elastic/eui/lib/services/format';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { FieldVisConfig } from '../../../common';
+import { FieldDataCardProps } from '../field_data_card';
 // @ts-ignore
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
 import { TopValues } from '../top_values';
 
-interface Props {
-  config: FieldVisConfig;
-}
-
-export const IpContent: FC<Props> = ({ config }) => {
+export const IpContent: FC<FieldDataCardProps> = ({ config }) => {
   const { stats, fieldFormat } = config;
   if (stats === undefined) {
     return null;

diff --git a/...ns/ml/public/data_visualizer/components/field_data_card/content_types/keyword_content.tsx b/...ns/ml/public/data_visualizer/components/field_data_card/content_types/keyword_content.tsx
@@ -11,16 +11,12 @@ import { formatDate } from '@elastic/eui/lib/services/format';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { FieldVisConfig } from '../../../common';
+import { FieldDataCardProps } from '../field_data_card';
 // @ts-ignore
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
 import { TopValues } from '../top_values';
 
-interface Props {
-  config: FieldVisConfig;
-}
-
-export const KeywordContent: FC<Props> = ({ config }) => {
+export const KeywordContent: FC<FieldDataCardProps> = ({ config }) => {
   const { stats, fieldFormat } = config;
   if (stats === undefined) {
     return null;

diff --git a/...ins/ml/public/data_visualizer/components/field_data_card/content_types/number_content.tsx b/...ins/ml/public/data_visualizer/components/field_data_card/content_types/number_content.tsx
@@ -13,10 +13,9 @@ import { i18n } from '@kbn/i18n';
 // @ts-ignore
 import { ordinalSuffix } from 'ui/utils/ordinal_suffix';
 
-import { FieldVisConfig } from '../../../common';
+import { FieldDataCardProps } from '../field_data_card';
 // @ts-ignore
 import { DisplayValue } from '../../../../components/display_value';
-// @ts-ignore
 import { kibanaFieldFormat } from '../../../../formatters/kibana_field_format';
 // @ts-ignore
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
@@ -27,10 +26,6 @@ import {
 } from '../metric_distribution_chart';
 import { TopValues } from '../top_values';
 
-interface Props {
-  config: FieldVisConfig;
-}
-
 enum DETAILS_MODE {
   DISTRIBUTION = 'distribution',
   TOP_VALUES = 'top_values',
@@ -40,7 +35,7 @@ const METRIC_DISTRIBUTION_CHART_WIDTH = 325;
 const METRIC_DISTRIBUTION_CHART_HEIGHT = 210;
 const DEFAULT_TOP_VALUES_THRESHOLD = 100;
 
-export const NumberContent: FC<Props> = ({ config }) => {
+export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
   const { stats, fieldFormat } = config;
   if (stats === undefined) {
     return null;

diff --git a/...gins/ml/public/data_visualizer/components/field_data_card/content_types/other_content.tsx b/...gins/ml/public/data_visualizer/components/field_data_card/content_types/other_content.tsx
@@ -9,16 +9,12 @@ import { EuiIcon, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { FieldVisConfig } from '../../../common';
+import { FieldDataCardProps } from '../field_data_card';
 // @ts-ignore
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
 import { ExamplesList } from '../examples_list';
 
-interface Props {
-  config: FieldVisConfig;
-}
-
-export const OtherContent: FC<Props> = ({ config }) => {
+export const OtherContent: FC<FieldDataCardProps> = ({ config }) => {
   const { stats, type, aggregatable } = config;
   if (stats === undefined) {
     return null;

diff --git a/...ugins/ml/public/data_visualizer/components/field_data_card/content_types/text_content.tsx b/...ugins/ml/public/data_visualizer/components/field_data_card/content_types/text_content.tsx
@@ -10,14 +10,10 @@ import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-import { FieldVisConfig } from '../../../common';
+import { FieldDataCardProps } from '../field_data_card';
 import { ExamplesList } from '../examples_list';
 
-interface Props {
-  config: FieldVisConfig;
-}
-
-export const TextContent: FC<Props> = ({ config }) => {
+export const TextContent: FC<FieldDataCardProps> = ({ config }) => {
   const { stats } = config;
   if (stats === undefined) {
     return null;

diff --git a/...cy/plugins/ml/public/data_visualizer/components/field_data_card/examples_list/example.tsx b/...cy/plugins/ml/public/data_visualizer/components/field_data_card/examples_list/example.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
+
+interface Props {
+  example: string | object;
+}
+
+export const Example: FC<Props> = ({ example }) => {
+  const exampleStr = typeof example === 'string' ? example : JSON.stringify(example);
+
+  // Use 95% width for each example so that the truncation ellipses show up when
+  // wrapped inside a tooltip.
+  return (
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false} style={{ width: '95%' }} className="eui-textTruncate">
+        <EuiToolTip content={exampleStr}>
+          <EuiText size="s" className="eui-textTruncate">
+            {exampleStr}
+          </EuiText>
+        </EuiToolTip>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/...gins/ml/public/data_visualizer/components/field_data_card/examples_list/examples_list.tsx b/...gins/ml/public/data_visualizer/components/field_data_card/examples_list/examples_list.tsx
@@ -6,39 +6,25 @@
 
 import React, { FC } from 'react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiSpacer, EuiText } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-interface Props {
-  examples: any[];
-}
+import { Example } from './example';
 
-function getExamples(examples: any[]) {
-  // Use 95% width for each example so that the truncation ellipses show up when
-  // wrapped inside a tooltip.
-  return examples.map((example, i) => {
-    const exampleStr = typeof example === 'string' ? example : JSON.stringify(example);
-
-    return (
-      <EuiFlexGroup key={`example_${i}`} gutterSize="s" alignItems="center">
-        <EuiFlexItem grow={false} style={{ width: '95%' }} className="eui-textTruncate">
-          <EuiToolTip content={exampleStr}>
-            <EuiText size="s" className="eui-textTruncate">
-              {exampleStr}
-            </EuiText>
-          </EuiToolTip>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  });
+interface Props {
+  examples: Array<string | object>;
 }
 
 export const ExamplesList: FC<Props> = ({ examples }) => {
   if (examples === undefined || examples === null || examples.length === 0) {
     return null;
   }
 
+  const examplesContent = examples.map((example, i) => {
+    return <Example key={`example_${i}`} example={example} />;
+  });
+
   return (
     <div>
       <EuiText>
@@ -51,7 +37,7 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
         />
       </EuiText>
       <EuiSpacer size="s" />
-      {getExamples(examples)}
+      {examplesContent}
     </div>
   );
 };
diff --git a/...k/legacy/plugins/ml/public/data_visualizer/components/field_data_card/field_data_card.tsx b/...k/legacy/plugins/ml/public/data_visualizer/components/field_data_card/field_data_card.tsx
@@ -25,11 +25,11 @@ import {
 } from './content_types';
 import { LoadingIndicator } from './loading_indicator';
 
-interface Props {
+export interface FieldDataCardProps {
   config: FieldVisConfig;
 }
 
-export const FieldDataCard: FC<Props> = ({ config }) => {
+export const FieldDataCard: FC<FieldDataCardProps> = ({ config }) => {
   const { fieldName, loading, type, existsInDocs } = config;
 
   function getCardContent() {

diff --git a/x-pack/legacy/plugins/ml/public/data_visualizer/components/field_data_card/index.ts b/x-pack/legacy/plugins/ml/public/data_visualizer/components/field_data_card/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { FieldDataCard } from './field_data_card';
+export { FieldDataCard, FieldDataCardProps } from './field_data_card';
diff --git a/...alizer/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx b/...alizer/components/field_data_card/metric_distribution_chart/metric_distribution_chart.tsx
@@ -28,7 +28,6 @@ import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 
 import { MetricDistributionChartTooltipHeader } from './metric_distribution_chart_tooltip_header';
 import { useUiChromeContext } from '../../../../contexts/ui/use_ui_chrome_context';
-// @ts-ignore
 import { kibanaFieldFormat } from '../../../../formatters/kibana_field_format';
 
 export interface MetricDistributionChartData {
@@ -83,10 +82,6 @@ export const MetricDistributionChart: FC<Props> = ({ width, height, chartData, f
     );
   };
 
-  const tooltipProps = {
-    headerFormatter,
-  };
-
   return (
     <div style={{ width, height }}>
       <Chart>
@@ -106,7 +101,7 @@ export const MetricDistributionChart: FC<Props> = ({ width, height, chartData, f
               area: { fill: 'red', visible: true, opacity: 1 },
             },
           }}
-          tooltip={tooltipProps}
+          tooltip={{ headerFormatter }}
         />
         <Axis
           id={getAxisId('bottom')}

diff --git a/...ts/field_data_card/metric_distribution_chart/metric_distribution_chart_tooltip_header.tsx b/...ts/field_data_card/metric_distribution_chart/metric_distribution_chart_tooltip_header.tsx
@@ -9,8 +9,6 @@ import React, { FC } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { MetricDistributionChartData } from './metric_distribution_chart';
-
-// @ts-ignore
 import { kibanaFieldFormat } from '../../../../formatters/kibana_field_format';
 
 interface Props {

diff --git a/...cy/plugins/ml/public/data_visualizer/components/field_data_card/top_values/top_values.tsx b/...cy/plugins/ml/public/data_visualizer/components/field_data_card/top_values/top_values.tsx
@@ -16,7 +16,6 @@ import {
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-// @ts-ignore
 import { kibanaFieldFormat } from '../../../../formatters/kibana_field_format';
 // @ts-ignore
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';