[9.2] [SLO] Indicate missing transforms in the health callout (#237769) (#239208)

# Backport

This will backport the following commits from `main` to `9.2`:
- [[SLO] Indicate missing transforms in the health callout
(#237769)](#237769)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Panagiota
Mitsopoulou","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-15T17:12:31Z","message":"[SLO]
Indicate missing transforms in the health callout (#237769)\n\nFixes
https://github.com/elastic/kibana/issues/234217\n\n## Ηοw to test\n\n-
Create a few SLOs\n- Go to Stack Management > Ingest Pipeline > delete a
rollup or summary\ningest pipeline of one/some of your SLOs\n- Go to
Stack Management > Transforms > delete a rollup or summary\ntransform of
one/some of your SLOs\n- Go to SLO Overview page > You should see a list
of unhealthy or\nmissing SLOs (the name of the SLO will appear and no
summary or rollup\ntransform)\n- Click on the Inspect button of the
unhealthy/missing SLO which links\nto SLO details page. The Health
callout lists the exact state of\ntransforms (missing or
unhealthy)\n\n\n## How it should look like\n\n#### SLO Overview
page\n\n<img width=\"500\" height=\"644\" alt=\"Screenshot 2025-10-13 at
12 14
10\"\nsrc=\"https://github.com/user-attachments/assets/86dc9158-2fca-4fe3-8e23-acd62e90b810\"\n/>\n\n\n####
SLO Details page\n\n<img width=\"500\" height=\"438\" alt=\"Screenshot
2025-10-13 at 12 13
42\"\nsrc=\"https://github.com/user-attachments/assets/b95e9e3d-e8c0-497b-8432-0d179d714040\"\n/>\n\n---------\n\nCo-authored-by:
Chris Cowan <[email protected]>\nCo-authored-by: Elastic Machine
<[email protected]>\nCo-authored-by: kibanamachine
<[email protected]>","sha":"77a1edeea6fb1827446bdb817ff6c05802ee2c1f","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:obs-ux-management","backport:version","author:obs-ux-management","v9.2.0","v9.3.0","v9.1.6","v8.19.6"],"title":"[SLO]
Indicate missing transforms in the health
callout","number":237769,"url":"https://github.com/elastic/kibana/pull/237769","mergeCommit":{"message":"[SLO]
Indicate missing transforms in the health callout (#237769)\n\nFixes
https://github.com/elastic/kibana/issues/234217\n\n## Ηοw to test\n\n-
Create a few SLOs\n- Go to Stack Management > Ingest Pipeline > delete a
rollup or summary\ningest pipeline of one/some of your SLOs\n- Go to
Stack Management > Transforms > delete a rollup or summary\ntransform of
one/some of your SLOs\n- Go to SLO Overview page > You should see a list
of unhealthy or\nmissing SLOs (the name of the SLO will appear and no
summary or rollup\ntransform)\n- Click on the Inspect button of the
unhealthy/missing SLO which links\nto SLO details page. The Health
callout lists the exact state of\ntransforms (missing or
unhealthy)\n\n\n## How it should look like\n\n#### SLO Overview
page\n\n<img width=\"500\" height=\"644\" alt=\"Screenshot 2025-10-13 at
12 14
10\"\nsrc=\"https://github.com/user-attachments/assets/86dc9158-2fca-4fe3-8e23-acd62e90b810\"\n/>\n\n\n####
SLO Details page\n\n<img width=\"500\" height=\"438\" alt=\"Screenshot
2025-10-13 at 12 13
42\"\nsrc=\"https://github.com/user-attachments/assets/b95e9e3d-e8c0-497b-8432-0d179d714040\"\n/>\n\n---------\n\nCo-authored-by:
Chris Cowan <[email protected]>\nCo-authored-by: Elastic Machine
<[email protected]>\nCo-authored-by: kibanamachine
<[email protected]>","sha":"77a1edeea6fb1827446bdb817ff6c05802ee2c1f"}},"sourceBranch":"main","suggestedTargetBranches":["9.2","9.1","8.19"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/237769","number":237769,"mergeCommit":{"message":"[SLO]
Indicate missing transforms in the health callout (#237769)\n\nFixes
https://github.com/elastic/kibana/issues/234217\n\n## Ηοw to test\n\n-
Create a few SLOs\n- Go to Stack Management > Ingest Pipeline > delete a
rollup or summary\ningest pipeline of one/some of your SLOs\n- Go to
Stack Management > Transforms > delete a rollup or summary\ntransform of
one/some of your SLOs\n- Go to SLO Overview page > You should see a list
of unhealthy or\nmissing SLOs (the name of the SLO will appear and no
summary or rollup\ntransform)\n- Click on the Inspect button of the
unhealthy/missing SLO which links\nto SLO details page. The Health
callout lists the exact state of\ntransforms (missing or
unhealthy)\n\n\n## How it should look like\n\n#### SLO Overview
page\n\n<img width=\"500\" height=\"644\" alt=\"Screenshot 2025-10-13 at
12 14
10\"\nsrc=\"https://github.com/user-attachments/assets/86dc9158-2fca-4fe3-8e23-acd62e90b810\"\n/>\n\n\n####
SLO Details page\n\n<img width=\"500\" height=\"438\" alt=\"Screenshot
2025-10-13 at 12 13
42\"\nsrc=\"https://github.com/user-attachments/assets/b95e9e3d-e8c0-497b-8432-0d179d714040\"\n/>\n\n---------\n\nCo-authored-by:
Chris Cowan <[email protected]>\nCo-authored-by: Elastic Machine
<[email protected]>\nCo-authored-by: kibanamachine
<[email protected]>","sha":"77a1edeea6fb1827446bdb817ff6c05802ee2c1f"}},{"branch":"9.1","label":"v9.1.6","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.6","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Panagiota Mitsopoulou <[email protected]>
Co-authored-by: Chris Cowan <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

Author: 4 people

x-pack/platform/packages/shared/kbn-slo-schema/src/schema/health.ts

@@ -7,7 +7,11 @@
 
 import * as t from 'io-ts';
 
-const healthStatusSchema = t.union([t.literal('healthy'), t.literal('unhealthy')]);
+const healthStatusSchema = t.union([
+  t.literal('healthy'),
+  t.literal('unhealthy'),
+  t.literal('missing'),
+]);
 const stateSchema = t.union([
   t.literal('no_data'),
   t.literal('indexing'),

x-pack/solutions/observability/plugins/slo/public/lib/slo_health_helpers.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export function getSloHealthStateText(hasUnhealthy: boolean, hasMissing: boolean) {
+  if (hasUnhealthy && hasMissing) {
+    return i18n.translate('xpack.slo.sloHealth.unhealthyOrMissingState', {
+      defaultMessage: 'an unhealthy or missing',
+    });
+  } else if (hasUnhealthy) {
+    return i18n.translate('xpack.slo.sloHealth.unhealthyState', {
+      defaultMessage: 'an unhealthy',
+    });
+  } else {
+    return i18n.translate('xpack.slo.sloHealth.missingState', {
+      defaultMessage: 'a missing',
+    });
+  }
+}

…omponents/external_link_display_text.tsx …lth_callout/content_with_inspect_cta.tsxx-pack/solutions/observability/plugins/slo/public/pages/slo_details/components/external_link_display_text.tsx renamed to x-pack/solutions/observability/plugins/slo/public/pages/slo_details/components/health_callout/content_with_inspect_cta.tsx x-pack/solutions/observability/plugins/slo/public/pages/slo_details/components/external_link_display_text.tsx renamed to x-pack/solutions/observability/plugins/slo/public/pages/slo_details/components/health_callout/content_with_inspect_cta.tsx

@@ -5,18 +5,18 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiText } from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGroup, EuiLink, EuiIcon, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 
-export function ExternalLinkDisplayText({
+export function ContentWithInspectCta({
+  url,
   textSize,
   content,
-  url,
 }: {
+  url: string;
   textSize: 's' | 'xs';
   content: string;
-  url: string;
 }) {
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>

x-pack/solutions/observability/plugins/slo/public/pages/slo_details/components/health_callout/content_with_reset_cta.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+
+export function ContentWithResetCta({
+  textSize,
+  content,
+  handleReset,
+}: {
+  textSize: 's' | 'xs';
+  content: string;
+  handleReset: () => void;
+}) {
+  return (
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <EuiText size={textSize}>{content}</EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup
+          alignItems="center"
+          justifyContent="spaceBetween"
+          gutterSize="xs"
+          responsive={false}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiIcon type="refresh" color="subdued" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText
+              size={textSize}
+              color="subdued"
+              onClick={handleReset}
+              css={{ cursor: 'pointer' }}
+            >
+              <FormattedMessage
+                id="xpack.slo.sloDetails.healthCallout.buttonTransformMissingLabel"
+                defaultMessage="Reset"
+              />
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

x-pack/solutions/observability/plugins/slo/public/pages/slo_details/components/slo_details.tsx

@@ -17,6 +17,7 @@ import { Definition } from './definition/definition';
 import { SloDetailsAlerts } from './slo_detail_alerts';
 import { SloHealthCallout } from './slo_health_callout';
 import { SloRemoteCallout } from './slo_remote_callout';
+import { ActionModalProvider } from '../../../context/action_modal';
 
 export const TAB_ID_URL_PARAM = 'tabId';
 export const OVERVIEW_TAB_ID = 'overview';
@@ -69,15 +70,17 @@ export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) {
   }
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="xl">
-      <SloRemoteCallout slo={slo} />
-      <SloHealthCallout slo={slo} />
+    <ActionModalProvider>
+      <EuiFlexGroup direction="column" gutterSize="xl">
+        <SloRemoteCallout slo={slo} />
+        <SloHealthCallout slo={slo} />
 
-      <EuiFlexGroup direction="column" gutterSize="l">
-        <BurnRatePanel slo={slo} isAutoRefreshing={isAutoRefreshing} />
-        <HistoricalDataCharts slo={slo} isAutoRefreshing={isAutoRefreshing} />
-        <EventsChartPanel slo={slo} range={range} />
+        <EuiFlexGroup direction="column" gutterSize="l">
+          <BurnRatePanel slo={slo} isAutoRefreshing={isAutoRefreshing} />
+          <HistoricalDataCharts slo={slo} isAutoRefreshing={isAutoRefreshing} />
+          <EventsChartPanel slo={slo} range={range} />
+        </EuiFlexGroup>
       </EuiFlexGroup>
-    </EuiFlexGroup>
+    </ActionModalProvider>
   );
 }