[APM] Add group ID to errors and crashes table (#174917)

## Summary close #174192 - Adds the group ID column in both errors and crashes table - Small UI fixes(style, fonts) - Remove culprit from errors table as the field doesn't exist for mobile #### After https://github.com/elastic/kibana/assets/3369346/5101b574-8e10-490a-be4d-dfa7c755ed2c #### Before https://github.com/elastic/kibana/assets/3369346/7b75040f-e9c2-415a-b4ad-ffa7238ed160
elastic · Jan 17, 2024 · 9568bd2 · 9568bd2
1 parent e3fed0c
commit 9568bd2
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 22 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/error_group_list/index.tsx
@@ -151,7 +151,7 @@ function ErrorGroupList({
         field: 'message',
         sortable: false,
         width: '50%',
-        render: (_, item: ErrorGroupItem) => {
+        render: (_, item) => {
           return (
             <MessageAndCulpritCell>
               <EuiToolTip

diff --git a/...s/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/index.tsx b/...s/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/index.tsx
@@ -5,15 +5,20 @@
  * 2.0.
  */
 
-import { EuiToolTip, RIGHT_ALIGNMENT, LEFT_ALIGNMENT } from '@elastic/eui';
+import {
+  EuiToolTip,
+  RIGHT_ALIGNMENT,
+  LEFT_ALIGNMENT,
+  EuiIconTip,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import React, { useMemo } from 'react';
 import { NOT_AVAILABLE_LABEL } from '../../../../../../common/i18n';
 import { asInteger } from '../../../../../../common/utils/formatters';
 import { useApmParams } from '../../../../../hooks/use_apm_params';
 import { APIReturnType } from '../../../../../services/rest/create_call_apm_api';
-import { truncate } from '../../../../../utils/style';
+import { truncate, unit } from '../../../../../utils/style';
 import {
   ChartType,
   getTimeSeriesColor,
@@ -33,6 +38,15 @@ const ErrorLink = euiStyled(ErrorOverviewLink)`
   ${truncate('100%')};
 `;
 
+const GroupIdLink = euiStyled(CrashDetailLink)`
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
+`;
+
+const MessageLink = euiStyled(CrashDetailLink)`
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
+  ${truncate('100%')};
+`;
+
 type ErrorGroupItem =
   APIReturnType<'GET /internal/apm/mobile-services/{serviceName}/errors/groups/main_statistics'>['errorGroups'][0];
 type ErrorGroupDetailedStatistics =
@@ -66,7 +80,45 @@ function MobileCrashGroupList({
   const columns = useMemo(() => {
     return [
       {
-        name: i18n.translate('xpack.apm.errorsTable.typeColumnLabel', {
+        name: (
+          <>
+            {i18n.translate('xpack.apm.crashTable.groupIdColumnLabel', {
+              defaultMessage: 'Group ID',
+            })}{' '}
+            <EuiIconTip
+              size="s"
+              type="questionInCircle"
+              color="subdued"
+              iconProps={{
+                className: 'eui-alignTop',
+              }}
+              content={i18n.translate(
+                'xpack.apm.crashTable.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: `${unit * 6}px`,
+        render: (_, item) => {
+          return (
+            <GroupIdLink
+              serviceName={serviceName}
+              groupId={item.groupId}
+              query={query}
+            >
+              {item.groupId.slice(0, 5) || NOT_AVAILABLE_LABEL}
+            </GroupIdLink>
+          );
+        },
+      },
+      {
+        name: i18n.translate('xpack.apm.crashTable.typeColumnLabel', {
           defaultMessage: 'Type',
         }),
         field: 'type',
@@ -96,20 +148,20 @@ function MobileCrashGroupList({
         field: 'message',
         sortable: false,
         width: '30%',
-        render: (_, item: ErrorGroupItem) => {
+        render: (_, item) => {
           return (
             <MessageAndCulpritCell>
               <EuiToolTip
                 id="error-message-tooltip"
                 content={item.name || NOT_AVAILABLE_LABEL}
               >
-                <CrashDetailLink
+                <MessageLink
                   serviceName={serviceName}
                   groupId={item.groupId}
                   query={query}
                 >
                   {item.name || NOT_AVAILABLE_LABEL}
-                </CrashDetailLink>
+                </MessageLink>
               </EuiToolTip>
             </MessageAndCulpritCell>
           );
@@ -118,7 +170,7 @@ function MobileCrashGroupList({
       {
         field: 'lastSeen',
         sortable: true,
-        name: i18n.translate('xpack.apm.errorsTable.lastSeenColumnLabel', {
+        name: i18n.translate('xpack.apm.crashTable.lastSeenColumnLabel', {
           defaultMessage: 'Last seen',
         }),
         align: LEFT_ALIGNMENT,
@@ -131,7 +183,7 @@ function MobileCrashGroupList({
       },
       {
         field: 'occurrences',
-        name: i18n.translate('xpack.apm.errorsTable.occurrencesColumnLabel', {
+        name: i18n.translate('xpack.apm.crashTable.occurrencesColumnLabel', {
           defaultMessage: 'Occurrences',
         }),
         sortable: true,
@@ -152,7 +204,7 @@ function MobileCrashGroupList({
               isLoading={detailedStatisticsLoading}
               series={currentPeriodTimeseries}
               valueLabel={i18n.translate(
-                'xpack.apm.serviceOverview.errorsTableOccurrences',
+                'xpack.apm.serviceOverview.crashTableOccurrences',
                 {
                   defaultMessage: `{occurrences} occ.`,
                   values: {
@@ -183,7 +235,7 @@ function MobileCrashGroupList({
     <ManagedTable
       noItemsMessage={
         isLoading
-          ? i18n.translate('xpack.apm.errorsTable.loading', {
+          ? i18n.translate('xpack.apm.crashTable.loading', {
               defaultMessage: 'Loading...',
             })
           : i18n.translate('xpack.apm.crashTable.noCrashesLabel', {

diff --git a/...s/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/index.tsx b/...s/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/index.tsx
@@ -10,6 +10,7 @@ import {
   EuiToolTip,
   RIGHT_ALIGNMENT,
   LEFT_ALIGNMENT,
+  EuiIconTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
@@ -18,7 +19,7 @@ import { NOT_AVAILABLE_LABEL } from '../../../../../../common/i18n';
 import { asInteger } from '../../../../../../common/utils/formatters';
 import { useApmParams } from '../../../../../hooks/use_apm_params';
 import { APIReturnType } from '../../../../../services/rest/create_call_apm_api';
-import { truncate } from '../../../../../utils/style';
+import { truncate, unit } from '../../../../../utils/style';
 import {
   ChartType,
   getTimeSeriesColor,
@@ -30,6 +31,10 @@ import { ITableColumn, ManagedTable } from '../../../../shared/managed_table';
 import { TimestampTooltip } from '../../../../shared/timestamp_tooltip';
 import { isTimeComparison } from '../../../../shared/time_comparison/get_comparison_options';
 
+const GroupIdLink = euiStyled(ErrorDetailLink)`
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
+`;
+
 const MessageAndCulpritCell = euiStyled.div`
   ${truncate('100%')};
 `;
@@ -38,6 +43,11 @@ const ErrorLink = euiStyled(ErrorOverviewLink)`
   ${truncate('100%')};
 `;
 
+const MessageLink = euiStyled(ErrorDetailLink)`
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
+  ${truncate('100%')};
+`;
+
 type ErrorGroupItem =
   APIReturnType<'GET /internal/apm/mobile-services/{serviceName}/errors/groups/main_statistics'>['errorGroups'][0];
 type ErrorGroupDetailedStatistics =
@@ -70,6 +80,44 @@ function MobileErrorGroupList({
   const { offset } = query;
   const columns = useMemo(() => {
     return [
+      {
+        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: `${unit * 6}px`,
+        render: (_, item: ErrorGroupItem) => {
+          return (
+            <GroupIdLink
+              serviceName={serviceName}
+              groupId={item.groupId}
+              query={query}
+            >
+              {item.groupId.slice(0, 5) || NOT_AVAILABLE_LABEL}
+            </GroupIdLink>
+          );
+        },
+      },
       {
         name: i18n.translate('xpack.apm.errorsTable.typeColumnLabel', {
           defaultMessage: 'Type',
@@ -92,12 +140,9 @@ function MobileErrorGroupList({
         },
       },
       {
-        name: i18n.translate(
-          'xpack.apm.errorsTable.errorMessageAndCulpritColumnLabel',
-          {
-            defaultMessage: 'Error message and culprit',
-          }
-        ),
+        name: i18n.translate('xpack.apm.errorsTable.errorMessageColumnLabel', {
+          defaultMessage: 'Error message',
+        }),
         field: 'message',
         sortable: false,
         width: '30%',
@@ -108,13 +153,13 @@ function MobileErrorGroupList({
                 id="error-message-tooltip"
                 content={item.name || NOT_AVAILABLE_LABEL}
               >
-                <ErrorDetailLink
+                <MessageLink
                   serviceName={serviceName}
                   groupId={item.groupId}
                   query={query}
                 >
                   {item.name || NOT_AVAILABLE_LABEL}
-                </ErrorDetailLink>
+                </MessageLink>
               </EuiToolTip>
             </MessageAndCulpritCell>
           );

diff --git a/x-pack/plugins/apm/public/components/shared/links/apm/mobile/crash_detail_link.tsx b/x-pack/plugins/apm/public/components/shared/links/apm/mobile/crash_detail_link.tsx
@@ -37,7 +37,7 @@ function CrashDetailLink({ serviceName, groupId, query, ...rest }: Props) {
 
   return (
     <EuiLink
-      data-test-subj="apmCrashDetailsLink"
+      data-test-subj="apmMobileCrashDetailsLink"
       href={crashDetailsLink}
       {...rest}
     />

diff --git a/x-pack/plugins/apm/public/components/shared/links/apm/mobile/error_detail_link.tsx b/x-pack/plugins/apm/public/components/shared/links/apm/mobile/error_detail_link.tsx
@@ -37,7 +37,7 @@ function ErrorDetailLink({ serviceName, groupId, query, ...rest }: Props) {
 
   return (
     <EuiLink
-      data-test-subj="apmErrorDetailsLink"
+      data-test-subj="apmMobileErrorDetailsLink"
       href={errorDetailsLink}
       {...rest}
     />