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 index 2ea165fb63702..819b75a44c7b1 100644 --- 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 ( 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', + })}{' '} + + + ), + field: 'groupId', + sortable: false, + width: `${unit * 6}px`, + render: (_, item) => { + return ( + + {item.groupId.slice(0, 5) || NOT_AVAILABLE_LABEL} + + ); + }, + }, + { + 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 ( - {item.name || NOT_AVAILABLE_LABEL} - + ); @@ -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({ 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', + })}{' '} + + + ), + field: 'groupId', + sortable: false, + width: `${unit * 6}px`, + render: (_, item: ErrorGroupItem) => { + return ( + + {item.groupId.slice(0, 5) || NOT_AVAILABLE_LABEL} + + ); + }, + }, { 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} > - {item.name || NOT_AVAILABLE_LABEL} - + ); 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 index 73d79529cf70f..c8a681d9a6d69 100644 --- 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 ( 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 index 7c77846fdaee8..73f7645034b18 100644 --- 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 (