feat(slo): health status

x-pack/packages/kbn-slo-schema/src/rest_specs/routes/get_slo_health.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 * as t from 'io-ts';
+import { healthStatusSchema, sloIdSchema, stateSchema } from '../../schema';
+import { allOrAnyString } from '../../schema/common';
+
+const fetchSLOHealthResponseSchema = t.array(
+  t.type({
+    sloId: sloIdSchema,
+    sloInstanceId: allOrAnyString,
+    sloRevision: t.number,
+    state: stateSchema,
+    health: t.type({
+      overall: healthStatusSchema,
+      rollup: healthStatusSchema,
+      summary: healthStatusSchema,
+    }),
+  })
+);
+
+const fetchSLOHealthParamsSchema = t.type({
+  body: t.type({
+    list: t.array(t.type({ sloId: sloIdSchema, sloInstanceId: allOrAnyString })),
+  }),
+});
+
+type FetchSLOHealthResponse = t.OutputOf<typeof fetchSLOHealthResponseSchema>;
+type FetchSLOHealthParams = t.TypeOf<typeof fetchSLOHealthParamsSchema.props.body>;
+
+export { fetchSLOHealthParamsSchema, fetchSLOHealthResponseSchema };
+export type { FetchSLOHealthResponse, FetchSLOHealthParams };

x-pack/packages/kbn-slo-schema/src/rest_specs/routes/index.ts

@@ -21,3 +21,4 @@ export * from './delete_instance';
 export * from './fetch_historical_summary';
 export * from './put_settings';
 export * from './get_suggestions';
+export * from './get_slo_health';

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

@@ -0,0 +1,18 @@
+/*
+ * 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 * as t from 'io-ts';
+
+const healthStatusSchema = t.union([t.literal('healthy'), t.literal('unhealthy')]);
+const stateSchema = t.union([
+  t.literal('no_data'),
+  t.literal('indexing'),
+  t.literal('running'),
+  t.literal('stale'),
+]);
+
+export { healthStatusSchema, stateSchema };

x-pack/packages/kbn-slo-schema/src/schema/index.ts

@@ -11,3 +11,4 @@ export * from './indicators';
 export * from './time_window';
 export * from './slo';
 export * from './settings';
+export * from './health';

x-pack/plugins/observability_solution/slo/public/hooks/query_key_factory.ts

@@ -46,6 +46,8 @@ export const sloKeys = {
   definitions: (search: string, page: number, perPage: number, includeOutdatedOnly: boolean) =>
     [...sloKeys.all, 'definitions', search, page, perPage, includeOutdatedOnly] as const,
   globalDiagnosis: () => [...sloKeys.all, 'globalDiagnosis'] as const,
+  health: (list: Array<{ sloId: string; sloInstanceId: string }>) =>
+    [...sloKeys.all, 'health', list] as const,
   burnRates: (
     sloId: string,
     instanceId: string | undefined,

x-pack/plugins/observability_solution/slo/public/hooks/use_fetch_slo_health.ts

@@ -0,0 +1,57 @@
+/*
+ * 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 { ALL_VALUE, FetchSLOHealthResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
+import { useQuery } from '@tanstack/react-query';
+import { useKibana } from '../utils/kibana_react';
+import { sloKeys } from './query_key_factory';
+
+export interface UseFetchSloHealth {
+  data: FetchSLOHealthResponse | undefined;
+  isLoading: boolean;
+  isError: boolean;
+}
+
+export interface Params {
+  list: SLOWithSummaryResponse[];
+}
+
+export function useFetchSloHealth({ list }: Params): UseFetchSloHealth {
+  const { http } = useKibana().services;
+  const payload = list.map((slo) => ({
+    sloId: slo.id,
+    sloInstanceId: slo.instanceId ?? ALL_VALUE,
+  }));
+
+  const { isLoading, isError, data } = useQuery({
+    queryKey: sloKeys.health(payload),
+    queryFn: async ({ signal }) => {
+      try {
+        const response = await http.post<FetchSLOHealthResponse>(
+          '/internal/observability/slos/_health',
+          {
+            body: JSON.stringify({ list: payload }),
+            signal,
+          }
+        );
+
+        return response;
+      } catch (error) {
+        // ignore error
+      }
+    },
+    enabled: Boolean(list.length > 0),
+    refetchOnWindowFocus: false,
+    keepPreviousData: true,
+  });
+
+  return {
+    data,
+    isLoading,
+    isError,
+  };
+}

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

@@ -18,6 +18,7 @@ import { EventsChartPanel } from './events_chart_panel';
 import { Overview } from './overview/overview';
 import { SliChartPanel } from './sli_chart_panel';
 import { SloDetailsAlerts } from './slo_detail_alerts';
+import { SloHealthCallout } from './slo_health_callout';
 import { SloRemoteCallout } from './slo_remote_callout';
 
 export const TAB_ID_URL_PARAM = 'tabId';
@@ -126,6 +127,7 @@ export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) {
   return selectedTabId === OVERVIEW_TAB_ID ? (
     <EuiFlexGroup direction="column" gutterSize="xl">
       <SloRemoteCallout slo={slo} />
+      <SloHealthCallout slo={slo} />
       <EuiFlexItem>
         <Overview slo={slo} />
       </EuiFlexItem>

x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_health_callout.tsx

@@ -0,0 +1,113 @@
+/*
+ * 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 {
+  EuiButton,
+  EuiButtonIcon,
+  EuiCallOut,
+  EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { SLOWithSummaryResponse } from '@kbn/slo-schema';
+import React from 'react';
+import { getSLOSummaryTransformId, getSLOTransformId } from '../../../../common/constants';
+import { useFetchSloHealth } from '../../../hooks/use_fetch_slo_health';
+import { useKibana } from '../../../utils/kibana_react';
+
+export function SloHealthCallout({ slo }: { slo: SLOWithSummaryResponse }) {
+  const { http } = useKibana().services;
+  const { isLoading, isError, data } = useFetchSloHealth({ list: [slo] });
+
+  if (isLoading || isError || data === undefined || data?.length !== 1) {
+    return null;
+  }
+
+  const health = data[0].health;
+  if (health.overall === 'healthy') {
+    return null;
+  }
+
+  const count = health.rollup === 'unhealthy' && health.summary === 'unhealthy' ? 2 : 1;
+
+  return (
+    <EuiCallOut
+      color="danger"
+      iconType="warning"
+      title={i18n.translate('xpack.slo.sloDetails.healthCallout.title', {
+        defaultMessage: 'This SLO has issues with its transforms',
+      })}
+    >
+      <EuiFlexGroup direction="column" alignItems="flexStart">
+        <EuiFlexItem>
+          <FormattedMessage
+            id="xpack.slo.sloDetails.healthCallout.description"
+            defaultMessage="The following {count, plural, one {transform is} other {transforms are}
+          } in an unhealthy state:"
+            values={{ count }}
+          />
+          <ul>
+            {health.rollup === 'unhealthy' && (
+              <li>
+                {getSLOTransformId(slo.id, slo.revision)}
+                <EuiCopy textToCopy={getSLOTransformId(slo.id, slo.revision)}>
+                  {(copy) => (
+                    <EuiButtonIcon
+                      data-test-subj="sloSloHealthCalloutCopyButton"
+                      aria-label={i18n.translate(
+                        'xpack.slo.sloDetails.healthCallout.copyToClipboard',
+                        { defaultMessage: 'Copy to clipboard' }
+                      )}
+                      color="text"
+                      iconType="copy"
+                      onClick={copy}
+                    />
+                  )}
+                </EuiCopy>
+              </li>
+            )}
+            {health.summary === 'unhealthy' && (
+              <li>
+                {getSLOSummaryTransformId(slo.id, slo.revision)}
+                <EuiCopy textToCopy={getSLOSummaryTransformId(slo.id, slo.revision)}>
+                  {(copy) => (
+                    <EuiButtonIcon
+                      data-test-subj="sloSloHealthCalloutCopyButton"
+                      aria-label={i18n.translate(
+                        'xpack.slo.sloDetails.healthCallout.copyToClipboard',
+                        { defaultMessage: 'Copy to clipboard' }
+                      )}
+                      color="text"
+                      iconType="copy"
+                      onClick={copy}
+                    />
+                  )}
+                </EuiCopy>
+              </li>
+            )}
+          </ul>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            data-test-subj="sloSloHealthCalloutInspectTransformButton"
+            color="danger"
+            fill
+            href={http?.basePath.prepend('/app/management/data/transform')}
+          >
+            <FormattedMessage
+              id="xpack.slo.sloDetails.healthCallout.buttonTransformLabel"
+              defaultMessage="Inspect transform"
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiCallOut>
+  );
+}