[APM] Add Unhandled badge to sample summary (#148406)

The 'Unhandled' badge was added in a previous iteration on top of the error sample exception message, after some feedback from @boriskirov, the badge is now displayed on the error sample summary <img width="1570" alt="image" src="https://user-images.githubusercontent.com/31922082/210610536-f8db8c72-3bea-4223-b290-6616206c87b8.png">
elastic · Jan 4, 2023 · b497ea9 · b497ea9
1 parent 14c8991
commit b497ea9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/...ugins/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx b/...ugins/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx
@@ -145,6 +145,7 @@ export function ErrorSampleDetails({
   const status = error.http?.response?.status_code;
   const environment = error.service.environment;
   const serviceVersion = error.service.version;
+  const isUnhandled = error.error.exception?.[0].handled === false;
 
   const traceExplorerLink = router.link('/traces/explorer/waterfall', {
     query: {
@@ -294,6 +295,13 @@ export function ErrorSampleDetails({
                 <EuiBadge color="hollow">{serviceVersion}</EuiBadge>
               </EuiToolTip>
             ) : null,
+            isUnhandled ? (
+              <EuiBadge color="warning">
+                {i18n.translate('xpack.apm.errorGroupDetails.unhandledLabel', {
+                  defaultMessage: 'Unhandled',
+                })}
+              </EuiBadge>
+            ) : null,
           ]}
         />
       )}

diff --git a/...ck/plugins/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx b/...ck/plugins/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiText, EuiSpacer, EuiCodeBlock, EuiBadge } from '@elastic/eui';
+import { EuiText, EuiSpacer, EuiCodeBlock } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
@@ -24,20 +24,9 @@ export function SampleSummary({ error }: Props) {
   const logMessage = error.error.log?.message;
   const excMessage = error.error.exception?.[0].message;
   const culprit = error.error.culprit;
-  const isUnhandled = error.error.exception?.[0].handled === false;
 
   return (
     <>
-      {isUnhandled && (
-        <>
-          <EuiBadge color="warning">
-            {i18n.translate('xpack.apm.errorGroupDetails.unhandledLabel', {
-              defaultMessage: 'Unhandled',
-            })}
-          </EuiBadge>
-          <EuiSpacer />
-        </>
-      )}
       {logMessage && (
         <>
           <EuiText size="s">