[Discover][APM] Show event.outcome badge only on failure outcomes (#213268)

## Summary

Changes the `event.outcome` badge to no longer have an icon, instead
appearing only when the `event.outcome` value is `failure`, and showing
as a `danger` colored badge.

<img alt="Event Outcome Discover Traces Screenshot 2025-03-04 173032"
src="https://github.com/user-attachments/assets/7c5ffc84-e483-4667-abed-d38461362351"
/>

Closes #213207

### How to Test

Ensure the following is added to your kibana.dev.yml:

```yaml
discover.experimental.enabledProfiles:
  - traces-data-source-profile
```

- Go to Discover page, select the APM static data view when on the
oblt-cli cluster.
- On the data grid, all the summary cells for trace data should only
show 3 badges when the `event.outcome` is either `success` or `unknown`.
Only a red badge is shown for traces that have `event.outcome` as
`failure`.

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx

@@ -171,6 +171,7 @@ export interface FieldBadgeWithActionsProps
     'onFilter' | 'property' | 'value' | 'rawValue' | 'renderValue'
   > {
   icon?: EuiBadgeProps['iconType'];
+  color?: string;
 }
 
 interface FieldBadgeWithActionsDependencies {
@@ -188,6 +189,7 @@ export function FieldBadgeWithActions({
   renderValue,
   value,
   rawValue,
+  color = 'hollow',
 }: FieldBadgeWithActionsPropsAndDependencies) {
   return (
     <CellActionsPopover
@@ -197,7 +199,7 @@ export function FieldBadgeWithActions({
       rawValue={rawValue}
       renderValue={renderValue}
       renderPopoverTrigger={({ popoverTriggerProps }) => (
-        <EuiBadge {...popoverTriggerProps} color="hollow" iconType={icon} iconSide="left">
+        <EuiBadge {...popoverTriggerProps} color={color} iconType={icon} iconSide="left">
           {truncateMiddle(value)}
         </EuiBadge>
       )}

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/summary_column.test.tsx

@@ -188,7 +188,7 @@ describe('SummaryColumn', () => {
   describe('when rendering trace badges', () => {
     it('should display service.name with different fields exposed', () => {
       const record = getBaseRecord({
-        'event.outcome': 'success',
+        'event.outcome': 'failure',
         'transaction.name': 'GET /',
         'transaction.duration.us': 100,
         'data_stream.type': 'traces',
@@ -215,6 +215,24 @@ describe('SummaryColumn', () => {
         screen.queryByTestId(`dataTableCellActionsPopover_${constants.CONTAINER_NAME_FIELD}`)
       ).not.toBeInTheDocument();
     });
+
+    it('should not display the event.outcome badge if the outcome is not "failure"', () => {
+      const record = getBaseRecord({
+        'event.outcome': 'success',
+        'transaction.name': 'GET /',
+        'transaction.duration.us': 100,
+        'data_stream.type': 'traces',
+      });
+      renderSummary(record, {
+        density: DataGridDensity.COMPACT,
+        rowHeight: ROWS_HEIGHT_OPTIONS.auto,
+        isTracesSummary: true,
+      });
+
+      expect(
+        screen.queryByTestId(`dataTableCellActionsPopover_${constants.EVENT_OUTCOME_FIELD}`)
+      ).not.toBeInTheDocument();
+    });
   });
 
   describe('when rendering the main content', () => {

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/utils.tsx

@@ -70,11 +70,11 @@ const DurationIcon = () => {
   );
 };
 
-/**
- * createResourceFields definitions
- */
 const AgentIcon = dynamic(() => import('@kbn/custom-icons/src/components/agent_icon'));
 
+const EventOutcomeBadge = (props: FieldBadgeWithActionsProps) =>
+  props.rawValue === 'failure' ? <FieldBadgeWithActions {...props} color="danger" /> : null;
+
 export interface ResourceFieldDescriptor {
   ResourceBadge: React.ComponentType<FieldBadgeWithActionsProps>;
   Icon?: () => JSX.Element;
@@ -88,13 +88,16 @@ const getResourceBadgeComponent = (
   core: CoreStart,
   share?: SharePluginStart
 ): React.ComponentType<FieldBadgeWithActionsProps> => {
-  if (name === SERVICE_NAME_FIELD) {
-    return (props: FieldBadgeWithActionsProps) => (
-      <ServiceNameBadgeWithActions {...props} share={share} core={core} />
-    );
+  switch (name) {
+    case SERVICE_NAME_FIELD:
+      return (props: FieldBadgeWithActionsProps) => (
+        <ServiceNameBadgeWithActions {...props} share={share} core={core} />
+      );
+    case EVENT_OUTCOME_FIELD:
+      return EventOutcomeBadge;
+    default:
+      return FieldBadgeWithActions;
   }
-
-  return FieldBadgeWithActions;
 };
 
 const getResourceBadgeIcon = (
@@ -115,25 +118,6 @@ const getResourceBadgeIcon = (
           />
         );
       };
-    case EVENT_OUTCOME_FIELD:
-      return () => {
-        const { euiTheme } = useEuiTheme();
-
-        const value = fields[name];
-
-        const color = value === 'failure' ? 'danger' : value === 'success' ? 'success' : 'subdued';
-
-        return (
-          <EuiIcon
-            color={color}
-            type="dot"
-            size="s"
-            css={css`
-              margin-right: ${euiTheme.size.xs};
-            `}
-          />
-        );
-      };
     case TRANSACTION_DURATION_FIELD:
     case SPAN_DURATION_FIELD:
       return DurationIcon;