[ML] Consolidating header and content formatting

elastic · Jan 20, 2021 · b925e59 · b925e59
1 parent 9632ad8
commit b925e59
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 114 deletions.
diff --git a/...datavisualizer/file_based/components/expanded_row/geo_point_content/geo_point_content.tsx b/...datavisualizer/file_based/components/expanded_row/geo_point_content/geo_point_content.tsx
@@ -6,13 +6,14 @@
 
 import React, { FC, useMemo } from 'react';
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import { Feature, Point } from 'geojson';
 import type { FieldDataRowProps } from '../../../../stats_table/types/field_data_row';
 import { DocumentStatsTable } from '../../../../stats_table/components/field_data_expanded_row/document_stats';
 import { TopValues } from '../../../../index_based/components/field_data_row/top_values';
 import { MlEmbeddedMapComponent } from '../../../../../components/ml_embedded_map';
 import { convertWKTGeoToLonLat, getGeoPointsLayer } from './format_utils';
+import { ExpandedRowContent } from '../../../../stats_table/components/field_data_expanded_row/expanded_row_content';
 
 export const DEFAULT_GEO_REGEX = RegExp('(?<lat>.+) (?<lon>.+)');
 
@@ -58,7 +59,7 @@ export const GeoPointContent: FC<FieldDataRowProps> = ({ config }) => {
     }
   }, [config]);
   return (
-    <EuiFlexGroup data-test-subj={'mlDVGeoPointContent'} gutterSize={'xl'}>
+    <ExpandedRowContent dataTestSubj={'mlDVGeoPointContent'}>
       <DocumentStatsTable config={config} />
       {formattedResults && Array.isArray(formattedResults.stats!.topValues) && (
         <EuiFlexItem>
@@ -73,6 +74,6 @@ export const GeoPointContent: FC<FieldDataRowProps> = ({ config }) => {
           <MlEmbeddedMapComponent layerList={formattedResults.layerList} />
         </EuiFlexItem>
       )}
-    </EuiFlexGroup>
+    </ExpandedRowContent>
   );
 };
diff --git a/...blic/application/datavisualizer/index_based/components/expanded_row/geo_point_content.tsx b/...blic/application/datavisualizer/index_based/components/expanded_row/geo_point_content.tsx
@@ -6,7 +6,7 @@
 
 import React, { FC, useEffect, useState } from 'react';
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import { ExamplesList } from '../../../index_based/components/field_data_row/examples_list';
 import { FieldVisConfig } from '../../../stats_table/types';
 import { IndexPattern } from '../../../../../../../../../src/plugins/data/common/index_patterns/index_patterns';
@@ -18,6 +18,7 @@ import { ES_GEO_FIELD_TYPE } from '../../../../../../../maps/common/constants';
 import { LayerDescriptor } from '../../../../../../../maps/common/descriptor_types';
 import { useMlKibana } from '../../../../contexts/kibana';
 import { DocumentStatsTable } from '../../../stats_table/components/field_data_expanded_row/document_stats';
+import { ExpandedRowContent } from '../../../stats_table/components/field_data_expanded_row/expanded_row_content';
 
 export const GeoPointContent: FC<{
   config: FieldVisConfig;
@@ -61,7 +62,7 @@ export const GeoPointContent: FC<{
 
   if (stats?.examples === undefined) return null;
   return (
-    <EuiFlexGroup data-test-subj={'mlDVIndexBasedMapContent'} gutterSize={'xl'}>
+    <ExpandedRowContent dataTestSubj={'mlDVIndexBasedMapContent'}>
       <DocumentStatsTable config={config} />
 
       <EuiFlexItem>
@@ -70,6 +71,6 @@ export const GeoPointContent: FC<{
       <EuiFlexItem className={'mlDataVisualizerMapWrapper'}>
         <MlEmbeddedMapComponent layerList={layerList} />
       </EuiFlexItem>
-    </EuiFlexGroup>
+    </ExpandedRowContent>
   );
 };
diff --git a/...pplication/datavisualizer/index_based/components/field_data_row/top_values/top_values.tsx b/...pplication/datavisualizer/index_based/components/field_data_row/top_values/top_values.tsx
@@ -19,6 +19,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import { kibanaFieldFormat } from '../../../../../formatters/kibana_field_format';
 import { roundToDecimalPlace } from '../../../../../formatters/round_to_decimal_place';
+import { ExpandedRowFieldHeader } from '../../../../stats_table/components/expanded_row_field_header';
 
 interface Props {
   stats: any;
@@ -46,51 +47,62 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
   } = stats;
   const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
   return (
-    <div data-test-subj="mlFieldDataTopValues" className={'mlFieldDataTopValuesContainer'}>
-      {Array.isArray(topValues) &&
-        topValues.map((value: any) => (
-          <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
-            <EuiFlexItem
-              grow={false}
-              className={classNames(
-                'eui-textTruncate',
-                'mlTopValuesValueLabelContainer',
-                `mlTopValuesValueLabelContainer--${compressed === true ? 'small' : 'large'}`
-              )}
-            >
-              <EuiToolTip content={kibanaFieldFormat(value.key, fieldFormat)} position="right">
-                <EuiText size="xs" textAlign={'right'} color="subdued">
-                  {kibanaFieldFormat(value.key, fieldFormat)}
+    <EuiFlexItem data-test-subj={'mlTopValues'}>
+      <ExpandedRowFieldHeader>
+        <FormattedMessage id="xpack.ml.fieldDataCard.topValuesLabel" defaultMessage="Top values" />
+      </ExpandedRowFieldHeader>
+
+      <div data-test-subj="mlFieldDataTopValues" className={'mlFieldDataTopValuesContainer'}>
+        {Array.isArray(topValues) &&
+          topValues.map((value: any) => (
+            <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
+              <EuiFlexItem
+                grow={false}
+                className={classNames(
+                  'eui-textTruncate',
+                  'mlTopValuesValueLabelContainer',
+                  `mlTopValuesValueLabelContainer--${compressed === true ? 'small' : 'large'}`
+                )}
+              >
+                <EuiToolTip content={kibanaFieldFormat(value.key, fieldFormat)} position="right">
+                  <EuiText size="xs" textAlign={'right'} color="subdued">
+                    {kibanaFieldFormat(value.key, fieldFormat)}
+                  </EuiText>
+                </EuiToolTip>
+              </EuiFlexItem>
+              <EuiFlexItem data-test-subj="mlFieldDataTopValueBar">
+                <EuiProgress
+                  value={value.doc_count}
+                  max={progressBarMax}
+                  color={barColor}
+                  size="m"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+                className={classNames('eui-textTruncate', 'mlTopValuesPercentLabelContainer')}
+              >
+                <EuiText size="xs" textAlign="left" color="subdued">
+                  {getPercentLabel(value.doc_count, progressBarMax)}
                 </EuiText>
-              </EuiToolTip>
-            </EuiFlexItem>
-            <EuiFlexItem data-test-subj="mlFieldDataTopValueBar">
-              <EuiProgress value={value.doc_count} max={progressBarMax} color={barColor} size="m" />
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
-              className={classNames('eui-textTruncate', 'mlTopValuesPercentLabelContainer')}
-            >
-              <EuiText size="xs" textAlign="left" color="subdued">
-                {getPercentLabel(value.doc_count, progressBarMax)}
-              </EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        ))}
-      {isTopValuesSampled === true && (
-        <Fragment>
-          <EuiSpacer size="xs" />
-          <EuiText size="xs" textAlign={'left'}>
-            <FormattedMessage
-              id="xpack.ml.fieldDataCard.topValues.calculatedFromSampleDescription"
-              defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard"
-              values={{
-                topValuesSamplerShardSize,
-              }}
-            />
-          </EuiText>
-        </Fragment>
-      )}
-    </div>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          ))}
+        {isTopValuesSampled === true && (
+          <Fragment>
+            <EuiSpacer size="xs" />
+            <EuiText size="xs" textAlign={'left'}>
+              <FormattedMessage
+                id="xpack.ml.fieldDataCard.topValues.calculatedFromSampleDescription"
+                defaultMessage="Calculated from sample of {topValuesSamplerShardSize} documents per shard"
+                values={{
+                  topValuesSamplerShardSize,
+                }}
+              />
+            </EuiText>
+          </Fragment>
+        )}
+      </div>
+    </EuiFlexItem>
   );
 };
diff --git a/...lic/application/datavisualizer/stats_table/components/field_data_expanded_row/_index.scss b/...lic/application/datavisualizer/stats_table/components/field_data_expanded_row/_index.scss
@@ -1 +1,7 @@
 @import 'number_content';
+
+.mlDataVisualizerExpandedRow {
+  @include euiBreakpoint('xs', 's', 'm', '') {
+    flex-direction: column;
+  }
+}
diff --git a/...ication/datavisualizer/stats_table/components/field_data_expanded_row/boolean_content.tsx b/...ication/datavisualizer/stats_table/components/field_data_expanded_row/boolean_content.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { FC, ReactNode, useMemo } from 'react';
-import { EuiBasicTable, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiBasicTable, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { Axis, BarSeries, Chart, Settings } from '@elastic/charts';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -16,6 +16,7 @@ import { getTFPercentage } from '../../utils';
 import { roundToDecimalPlace } from '../../../../formatters/round_to_decimal_place';
 import { useDataVizChartTheme } from '../../hooks';
 import { DocumentStatsTable } from './document_stats';
+import { ExpandedRowContent } from './expanded_row_content';
 
 function getPercentLabel(value: number): string {
   if (value === 0) {
@@ -85,7 +86,7 @@ export const BooleanContent: FC<FieldDataRowProps> = ({ config }) => {
   );
 
   return (
-    <EuiFlexGroup data-test-subj={'mlDVBooleanContent'} gutterSize={'xl'}>
+    <ExpandedRowContent dataTestSubj={'mlDVBooleanContent'}>
       <DocumentStatsTable config={config} />
 
       <EuiFlexItem className={'mlDataVisualizerSummaryTableWrapper'}>
@@ -138,6 +139,6 @@ export const BooleanContent: FC<FieldDataRowProps> = ({ config }) => {
           />
         </Chart>
       </EuiFlexItem>
-    </EuiFlexGroup>
+    </ExpandedRowContent>
   );
 };
diff --git a/...pplication/datavisualizer/stats_table/components/field_data_expanded_row/date_content.tsx b/...pplication/datavisualizer/stats_table/components/field_data_expanded_row/date_content.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { FC, ReactNode } from 'react';
-import { EuiBasicTable, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiBasicTable, EuiFlexItem } from '@elastic/eui';
 // @ts-ignore
 import { formatDate } from '@elastic/eui/lib/services/format';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -14,6 +14,7 @@ import { i18n } from '@kbn/i18n';
 import type { FieldDataRowProps } from '../../types/field_data_row';
 import { ExpandedRowFieldHeader } from '../expanded_row_field_header';
 import { DocumentStatsTable } from './document_stats';
+import { ExpandedRowContent } from './expanded_row_content';
 const TIME_FORMAT = 'MMM D YYYY, HH:mm:ss.SSS';
 interface SummaryTableItem {
   function: string;
@@ -66,7 +67,7 @@ export const DateContent: FC<FieldDataRowProps> = ({ config }) => {
   ];
 
   return (
-    <EuiFlexGroup data-test-subj={'mlDVDateContent'} gutterSize={'xl'}>
+    <ExpandedRowContent dataTestSubj={'mlDVDateContent'}>
       <DocumentStatsTable config={config} />
       <EuiFlexItem className={'mlDataVisualizerSummaryTableWrapper'}>
         <ExpandedRowFieldHeader>{summaryTableTitle}</ExpandedRowFieldHeader>
@@ -80,6 +81,6 @@ export const DateContent: FC<FieldDataRowProps> = ({ config }) => {
           tableLayout="auto"
         />
       </EuiFlexItem>
-    </EuiFlexGroup>
+    </ExpandedRowContent>
   );
 };
diff --git a/...on/datavisualizer/stats_table/components/field_data_expanded_row/expanded_row_content.tsx b/...on/datavisualizer/stats_table/components/field_data_expanded_row/expanded_row_content.tsx
@@ -0,0 +1,24 @@
+/*
+ * 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, ReactNode } from 'react';
+import { EuiFlexGroup } from '@elastic/eui';
+
+interface Props {
+  children: ReactNode;
+  dataTestSubj: string;
+}
+export const ExpandedRowContent: FC<Props> = ({ children, dataTestSubj }) => {
+  return (
+    <EuiFlexGroup
+      data-test-subj={dataTestSubj}
+      gutterSize={'xl'}
+      className={'mlDataVisualizerExpandedRow'}
+    >
+      {children}
+    </EuiFlexGroup>
+  );
+};
diff --git a/.../application/datavisualizer/stats_table/components/field_data_expanded_row/ip_content.tsx b/.../application/datavisualizer/stats_table/components/field_data_expanded_row/ip_content.tsx
@@ -5,14 +5,10 @@
  */
 
 import React, { FC } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-
-import { FormattedMessage } from '@kbn/i18n/react';
-
 import type { FieldDataRowProps } from '../../types/field_data_row';
 import { TopValues } from '../../../index_based/components/field_data_row/top_values';
-import { ExpandedRowFieldHeader } from '../expanded_row_field_header';
 import { DocumentStatsTable } from './document_stats';
+import { ExpandedRowContent } from './expanded_row_content';
 
 export const IpContent: FC<FieldDataRowProps> = ({ config }) => {
   const { stats } = config;
@@ -22,17 +18,9 @@ export const IpContent: FC<FieldDataRowProps> = ({ config }) => {
   const fieldFormat = 'fieldFormat' in config ? config.fieldFormat : undefined;
 
   return (
-    <EuiFlexGroup gutterSize={'xl'}>
+    <ExpandedRowContent dataTestSubj={'mlDVIPContent'}>
       <DocumentStatsTable config={config} />
-      <EuiFlexItem>
-        <ExpandedRowFieldHeader>
-          <FormattedMessage
-            id="xpack.ml.fieldDataCard.cardIp.topValuesLabel"
-            defaultMessage="Top values"
-          />
-        </ExpandedRowFieldHeader>
-        <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+      <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" />
+    </ExpandedRowContent>
   );
 };
diff --git a/...ication/datavisualizer/stats_table/components/field_data_expanded_row/keyword_content.tsx b/...ication/datavisualizer/stats_table/components/field_data_expanded_row/keyword_content.tsx
@@ -5,30 +5,20 @@
  */
 
 import React, { FC } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
 import type { FieldDataRowProps } from '../../types/field_data_row';
 import { TopValues } from '../../../index_based/components/field_data_row/top_values';
-import { ExpandedRowFieldHeader } from '../expanded_row_field_header';
 import { DocumentStatsTable } from './document_stats';
+import { ExpandedRowContent } from './expanded_row_content';
 
 export const KeywordContent: FC<FieldDataRowProps> = ({ config }) => {
   const { stats } = config;
   const fieldFormat = 'fieldFormat' in config ? config.fieldFormat : undefined;
 
   return (
-    <EuiFlexGroup data-test-subj={'mlDVKeywordContent'} gutterSize={'xl'}>
+    <ExpandedRowContent dataTestSubj={'mlDVKeywordContent'}>
       <DocumentStatsTable config={config} />
 
-      <EuiFlexItem>
-        <ExpandedRowFieldHeader>
-          <FormattedMessage
-            id="xpack.ml.fieldDataCard.cardKeyword.topValuesLabel"
-            defaultMessage="Top values"
-          />
-        </ExpandedRowFieldHeader>
-        <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+      <TopValues stats={stats} fieldFormat={fieldFormat} barColor="secondary" />
+    </ExpandedRowContent>
   );
 };