[7.x] [APM] Documentation and alignment for impact column (#47… (#47839)

In the traces and transactions tables, left align the impact column heading and add a tooltip explaining what it means. Fixes #44313 Fixes #28559
elastic · Oct 10, 2019 · 8e64935 · 8e64935
1 parent c00d155
commit 8e64935
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TraceOverview/TraceList.tsx b/x-pack/legacy/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiToolTip } from '@elastic/eui';
+import { EuiIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
@@ -85,11 +85,31 @@ const traceListColumns: Array<ITableColumn<ITransactionGroup>> = [
   },
   {
     field: 'impact',
-    name: i18n.translate('xpack.apm.tracesTable.impactColumnLabel', {
-      defaultMessage: 'Impact'
-    }),
+    name: (
+      <EuiToolTip
+        content={i18n.translate(
+          'xpack.apm.tracesTable.impactColumnDescription',
+          {
+            defaultMessage:
+              "The most used and slowest endpoints in your service. It's calculated by taking the relative average duration times the number of transactions per minute."
+          }
+        )}
+      >
+        <>
+          {i18n.translate('xpack.apm.tracesTable.impactColumnLabel', {
+            defaultMessage: 'Impact'
+          })}{' '}
+          <EuiIcon
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+          />
+        </>
+      </EuiToolTip>
+    ),
     width: '20%',
-    align: 'right',
+    align: 'left',
     sortable: true,
     render: (value: number) => <ImpactBar value={value} />
   }

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/List/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/List/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiToolTip } from '@elastic/eui';
+import { EuiIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -101,9 +101,29 @@ export function TransactionList({ items, isLoading }: Props) {
       },
       {
         field: 'impact',
-        name: i18n.translate('xpack.apm.transactionsTable.impactColumnLabel', {
-          defaultMessage: 'Impact'
-        }),
+        name: (
+          <EuiToolTip
+            content={i18n.translate(
+              'xpack.apm.transactionsTable.impactColumnDescription',
+              {
+                defaultMessage:
+                  "The most used and slowest endpoints in your service. It's calculated by taking the relative average duration times the number of transactions per minute."
+              }
+            )}
+          >
+            <>
+              {i18n.translate('xpack.apm.transactionsTable.impactColumnLabel', {
+                defaultMessage: 'Impact'
+              })}{' '}
+              <EuiIcon
+                size="s"
+                color="subdued"
+                type="questionInCircle"
+                className="eui-alignTop"
+              />
+            </>
+          </EuiToolTip>
+        ),
         sortable: true,
         dataType: 'number',
         render: (value: number) => <ImpactBar value={value} />

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/ManagedTable/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/ManagedTable/index.tsx
@@ -6,7 +6,7 @@
 
 import { EuiBasicTable } from '@elastic/eui';
 import { sortByOrder } from 'lodash';
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, ReactNode } from 'react';
 import { idx } from '@kbn/elastic-idx';
 import { StringMap } from '../../../../typings/common';
 import { useUrlParams } from '../../../hooks/useUrlParams';
@@ -15,7 +15,7 @@ import { fromQuery, toQuery } from '../Links/url_helpers';
 
 // TODO: this should really be imported from EUI
 export interface ITableColumn<T> {
-  name: string;
+  name: ReactNode;
   actions?: StringMap[];
   field?: string;
   dataType?: string;