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 (