add info icons for ingest stats

elastic · Nov 16, 2021 · 4a5e4bd · 4a5e4bd
1 parent 2b35886
commit 4a5e4bd
Showing 1 changed file with 98 additions and 21 deletions.
diff --git a/...plugins/ml/public/application/trained_models/models_management/pipelines/expended_row.tsx b/...plugins/ml/public/application/trained_models/models_management/pipelines/expended_row.tsx
@@ -6,7 +6,16 @@
  */
 
 import React, { FC } from 'react';
-import { EuiBadge, EuiInMemoryTable } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiInMemoryTable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+  EuiIcon,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
 import { EuiBasicTableColumn } from '@elastic/eui/src/components/basic_table/basic_table';
 import { i18n } from '@kbn/i18n';
 import { useFieldFormatter } from '../../../contexts/kibana/use_field_formatter';
@@ -49,23 +58,57 @@ export const ProcessorsStats: FC<ProcessorsStatsProps> = ({ stats }) => {
     },
     {
       field: 'stats.count',
-      name: i18n.translate(
-        'xpack.ml.trainedModels.modelsList.pipelines.processorStats.countHeader',
-        {
-          defaultMessage: 'Count',
-        }
+      name: (
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <FormattedMessage
+              id="xpack.ml.trainedModels.modelsList.pipelines.processorStats.countHeader"
+              defaultMessage="Count"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              position="top"
+              content={
+                <FormattedMessage
+                  id="xpack.ml.trainedModels.modelsList.pipelines.processorStats.countDescription"
+                  defaultMessage="Total number of documents ingested during the lifetime of this node"
+                />
+              }
+            >
+              <EuiIcon tabIndex={0} type="iInCircle" color={'subdued'} />
+            </EuiToolTip>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       ),
       width: '100px',
       truncateText: true,
       'data-test-subj': 'mlProcessorStatsCount',
     },
     {
       field: 'stats.time_in_millis',
-      name: i18n.translate(
-        'xpack.ml.trainedModels.modelsList.pipelines.processorStats.timePerDocHeader',
-        {
-          defaultMessage: 'Time per doc',
-        }
+      name: (
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <FormattedMessage
+              id="xpack.ml.trainedModels.modelsList.pipelines.processorStats.timePerDocHeader"
+              defaultMessage="Time per doc"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              position="top"
+              content={
+                <FormattedMessage
+                  id="xpack.ml.trainedModels.modelsList.pipelines.processorStats.timePerDocDescription"
+                  defaultMessage="Total time spent preprocessing ingest documents during the lifetime of this node"
+                />
+              }
+            >
+              <EuiIcon tabIndex={0} type="iInCircle" color={'subdued'} />
+            </EuiToolTip>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       ),
       width: '100px',
       truncateText: false,
@@ -76,23 +119,57 @@ export const ProcessorsStats: FC<ProcessorsStatsProps> = ({ stats }) => {
     },
     {
       field: 'stats.current',
-      name: i18n.translate(
-        'xpack.ml.trainedModels.modelsList.pipelines.processorStats.currentHeader',
-        {
-          defaultMessage: 'Current',
-        }
+      name: (
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <FormattedMessage
+              id="xpack.ml.trainedModels.modelsList.pipelines.processorStats.currentHeader"
+              defaultMessage="Current"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              position="top"
+              content={
+                <FormattedMessage
+                  id="xpack.ml.trainedModels.modelsList.pipelines.processorStats.currentDescription"
+                  defaultMessage="Total number of documents currently being ingested"
+                />
+              }
+            >
+              <EuiIcon tabIndex={0} type="iInCircle" color={'subdued'} />
+            </EuiToolTip>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       ),
       width: '100px',
       truncateText: false,
       'data-test-subj': 'mlProcessorStatsCurrent',
     },
     {
       field: 'stats.failed',
-      name: i18n.translate(
-        'xpack.ml.trainedModels.modelsList.pipelines.processorStats.failedHeader',
-        {
-          defaultMessage: 'Failed',
-        }
+      name: (
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false}>
+            <FormattedMessage
+              id="xpack.ml.trainedModels.modelsList.pipelines.processorStats.failedHeader"
+              defaultMessage="Failed"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              position="top"
+              content={
+                <FormattedMessage
+                  id="xpack.ml.trainedModels.modelsList.pipelines.processorStats.failedDescription"
+                  defaultMessage="Total number of failed ingest operations during the lifetime of this node"
+                />
+              }
+            >
+              <EuiIcon tabIndex={0} type="iInCircle" color={'subdued'} />
+            </EuiToolTip>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       ),
       width: '100px',
       'data-test-subj': 'mlProcessorStatsFailed',