[APM] Add tooltip explaining Group ID (#60425) (#65822)

* Add tooltip * Reimplement using EuiIconTip * Change styles of tooltip icon * Add EuiIconTip on Impact column in transactions table * Remove unused import * Update snashots * adding tooltip to errors and transactions overview pages Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: cauemarcondes <caue.marcondes@elastic.co> Co-authored-by: Mohinder Saluja <mohin19derp@gmail.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · May 8, 2020 · 32ad39e · 32ad39e
1 parent 32768cc
commit 32ad39e
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 30 deletions.
diff --git a/...m/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/...m/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.tsx
@@ -9,6 +9,7 @@ import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
+import { EuiIconTip } from '@elastic/eui';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ErrorGroupListAPIResponse } from '../../../../../server/lib/errors/get_error_groups';
@@ -60,13 +61,31 @@ const ErrorGroupList: React.FC<Props> = props => {
   if (!serviceName) {
     throw new Error('Service name is required');
   }
-
   const columns = useMemo(
     () => [
       {
-        name: i18n.translate('xpack.apm.errorsTable.groupIdColumnLabel', {
-          defaultMessage: 'Group ID'
-        }),
+        name: (
+          <>
+            {i18n.translate('xpack.apm.errorsTable.groupIdColumnLabel', {
+              defaultMessage: 'Group ID'
+            })}{' '}
+            <EuiIconTip
+              size="s"
+              type="questionInCircle"
+              color="subdued"
+              iconProps={{
+                className: 'eui-alignTop'
+              }}
+              content={i18n.translate(
+                'xpack.apm.errorsTable.groupIdColumnDescription',
+                {
+                  defaultMessage:
+                    'Hash of the stack trace. Groups similar errors together, even when the error message is different due to dynamic parameters.'
+                }
+              )}
+            />
+          </>
+        ),
         field: 'groupId',
         sortable: false,
         width: px(unit * 6),

diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/List/index.tsx b/x-pack/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 { EuiIcon, EuiToolTip } from '@elastic/eui';
+import { EuiToolTip, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -109,27 +109,26 @@ export function TransactionList({ items, isLoading }: Props) {
       {
         field: '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>
+          <>
+            {i18n.translate('xpack.apm.transactionsTable.impactColumnLabel', {
+              defaultMessage: 'Impact'
+            })}{' '}
+            <EuiIconTip
+              size="s"
+              type="questionInCircle"
+              color="subdued"
+              iconProps={{
+                className: 'eui-alignTop'
+              }}
+              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."
+                }
+              )}
+            />
+          </>
         ),
         sortable: true,
         dataType: 'number',

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -4212,6 +4212,7 @@
     "xpack.apm.errorRateAlertTrigger.isAbove": "の下限は",
     "xpack.apm.errorsTable.errorMessageAndCulpritColumnLabel": "エラーメッセージと原因",
     "xpack.apm.errorsTable.groupIdColumnLabel": "グループ ID",
+    "xpack.apm.errorsTable.groupIdColumnDescription": "スタックトレースのハッシュ。動的パラメーターによりエラーメッセージが異なる場合でも、同様のエラーをグループ化します。",
     "xpack.apm.errorsTable.latestOccurrenceColumnLabel": "最近のオカレンス",
     "xpack.apm.errorsTable.noErrorsLabel": "エラーが見つかりませんでした",
     "xpack.apm.errorsTable.occurrencesColumnLabel": "オカレンス",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -4212,6 +4212,7 @@
     "xpack.apm.errorRateAlertTrigger.errors": "错误",
     "xpack.apm.errorRateAlertTrigger.isAbove": "高于",
     "xpack.apm.errorsTable.errorMessageAndCulpritColumnLabel": "错误消息和原因",
+    "xpack.apm.errorsTable.groupIdColumnDescription": "堆栈跟踪的哈希值。即使由于动态参数而导致错误消息不同，也将相似的错误归为一组。",
     "xpack.apm.errorsTable.groupIdColumnLabel": "组 ID",
     "xpack.apm.errorsTable.latestOccurrenceColumnLabel": "最新一次发生",
     "xpack.apm.errorsTable.noErrorsLabel": "未找到任何错误",