feat(slo): show instance details in slo alert page (#184051)

x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/alert_details_app_section.tsx

@@ -6,12 +6,14 @@
  */
 import { EuiFlexGroup, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useEffect } from 'react';
 import { AlertSummaryField } from '@kbn/observability-plugin/public';
-import { useKibana } from '../../../../utils/kibana_react';
+import { ALL_VALUE } from '@kbn/slo-schema';
+import React, { useEffect } from 'react';
 import { useFetchSloDetails } from '../../../../hooks/use_fetch_slo_details';
-import { ErrorRatePanel } from './components/error_rate/error_rate_panel';
+import { SLOGroupings } from '../../../../pages/slos/components/common/slo_groupings';
+import { useKibana } from '../../../../utils/kibana_react';
 import { CustomAlertDetailsPanel } from './components/custom_panels/custom_panels';
+import { ErrorRatePanel } from './components/error_rate/error_rate_panel';
 import { BurnRateAlert, BurnRateRule } from './types';
 
 interface AppSectionProps {
@@ -40,7 +42,7 @@ export default function AlertDetailsAppSection({
   const alertLink = alert.link;
 
   useEffect(() => {
-    setAlertSummaryFields([
+    const fields = [
       {
         label: i18n.translate('xpack.slo.burnRateRule.alertDetailsAppSection.summaryField.slo', {
           defaultMessage: 'Source SLO',
@@ -61,8 +63,20 @@ export default function AlertDetailsAppSection({
           </EuiLink>
         ),
       },
-    ]);
-  }, [alertLink, rule, ruleLink, setAlertSummaryFields, basePath, slo]);
+    ];
+
+    if (instanceId !== ALL_VALUE) {
+      fields.push({
+        label: i18n.translate(
+          'xpack.slo.burnRateRule.alertDetailsAppSection.summaryField.instanceId',
+          { defaultMessage: 'SLO Instance' }
+        ),
+        value: <SLOGroupings direction="column" slo={slo} gutterSize="none" truncate={false} />,
+      });
+    }
+
+    setAlertSummaryFields(fields);
+  }, [alertLink, rule, ruleLink, setAlertSummaryFields, basePath, slo, instanceId]);
 
   return (
     <EuiFlexGroup direction="column" data-test-subj="overviewSection">

x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/slo_groupings.tsx

@@ -22,10 +22,11 @@ import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 export interface Props {
   slo: SLOWithSummaryResponse | undefined;
   direction?: 'column' | 'row';
+  gutterSize?: 'none' | 's';
   truncate?: boolean;
 }
 
-export function SLOGroupings({ slo, direction = 'row', truncate = true }: Props) {
+export function SLOGroupings({ slo, direction = 'row', gutterSize = 's', truncate = true }: Props) {
   const groups = Object.entries(slo?.groupings || []);
   const shouldTruncate = truncate && groups.length > 3;
   const firstThree = shouldTruncate ? groups.slice(0, 3) : groups;
@@ -59,7 +60,7 @@ export function SLOGroupings({ slo, direction = 'row', truncate = true }: Props)
                     direction={direction}
                   >
                     <EuiFlexItem>
-                      <Entries entries={firstThree} direction={direction} />{' '}
+                      <Entries entries={firstThree} direction={direction} gutterSize={gutterSize} />
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
                       {rest.length && (
@@ -80,12 +81,16 @@ export function SLOGroupings({ slo, direction = 'row', truncate = true }: Props)
                 </>
               }
             >
-              <Entries entries={rest} direction={direction} />
+              <Entries entries={rest} direction={direction} gutterSize={gutterSize} />
             </EuiAccordion>
           </EuiFlexItem>
         </EuiFlexGroup>
       ) : (
-        <Entries entries={truncate ? firstThree : groups} direction={direction} />
+        <Entries
+          entries={truncate ? firstThree : groups}
+          gutterSize={gutterSize}
+          direction={direction}
+        />
       )}
     </>
   );
@@ -94,14 +99,16 @@ export function SLOGroupings({ slo, direction = 'row', truncate = true }: Props)
 function Entries({
   entries,
   direction,
+  gutterSize = 's',
 }: {
   entries: Array<[string, unknown]>;
   direction: 'row' | 'column';
+  gutterSize?: 'none' | 's';
 }) {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <EuiFlexGroup gutterSize="s" direction={direction}>
+    <EuiFlexGroup gutterSize={gutterSize} direction={direction}>
       {entries.map(([key, value]) => (
         <EuiFlexItem grow={false} key={key}>
           <EuiText size="s">

x-pack/plugins/observability_solution/slo/public/pages/slos/components/compact_view/slo_list_compact_view.tsx

@@ -349,7 +349,7 @@ export function SloListCompactView({ sloList, loading, error }: Props) {
       render: (_, slo: SLOWithSummaryResponse) => {
         const groups = [slo.groupBy].flat();
         return !groups.includes(ALL_VALUE) ? (
-          <SLOGroupings slo={slo} direction="column" />
+          <SLOGroupings slo={slo} direction="column" gutterSize={'none'} />
         ) : (
           <span>{NOT_AVAILABLE_LABEL}</span>
         );