[8.x] Add SLO Definition Page (#215423) (#218120)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Add SLO Definition Page
(#215423)](#215423)

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

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

<!--BACKPORT [{"author":{"name":"Bailey
Cash","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-03-26T12:23:55Z","message":"Add
SLO Definition Page
(#215423)","sha":"8aa9b82079a3e38548ac5919c623591beb057ac0","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:skip","Team:obs-ux-management","v9.1.0"],"title":"Add
SLO Definition
Page","number":215423,"url":"https://github.com/elastic/kibana/pull/215423","mergeCommit":{"message":"Add
SLO Definition Page
(#215423)","sha":"8aa9b82079a3e38548ac5919c623591beb057ac0"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/215423","number":215423,"mergeCommit":{"message":"Add
SLO Definition Page
(#215423)","sha":"8aa9b82079a3e38548ac5919c623591beb057ac0"}}]}]
BACKPORT-->

Author: baileycash-elastic

src/platform/test/plugin_functional/test_suites/core_plugins/rendering.ts

@@ -379,6 +379,7 @@ export default function ({ getService }: PluginFunctionalProviderContext) {
         'xpack.apm.featureFlags.ruleFormV2Enabled (boolean?)',
         'xpack.observability.unsafe.ruleFormV2.enabled (boolean?)',
         'xpack.slo.experimental.ruleFormV2.enabled (boolean?)',
+        'xpack.slo.experimental.management.enabled (boolean?)',
         /**/
       ];
       // We don't assert that actualExposedConfigKeys and expectedExposedConfigKeys are equal, because test failure messages with large

x-pack/solutions/observability/plugins/slo/common/config.ts

@@ -16,6 +16,9 @@ export const configSchema = schema.object({
       ruleFormV2: schema.object({
         enabled: schema.boolean({ defaultValue: false }),
       }),
+      management: schema.object({
+        enabled: schema.boolean({ defaultValue: false }),
+      }),
     })
   ),
 });

x-pack/solutions/observability/plugins/slo/common/locators/paths.ts

@@ -15,11 +15,13 @@ export const SLO_CREATE_PATH = '/create' as const;
 export const SLO_EDIT_PATH = '/edit/:sloId' as const;
 export const SLOS_OUTDATED_DEFINITIONS_PATH = '/outdated-definitions' as const;
 export const SLO_SETTINGS_PATH = '/settings' as const;
+export const SLOS_MANAGEMENT_PATH = '/management' as const;
 
 export const paths = {
   slos: `${SLOS_BASE_PATH}${SLOS_PATH}`,
   slosSettings: `${SLOS_BASE_PATH}${SLO_SETTINGS_PATH}`,
   slosWelcome: `${SLOS_BASE_PATH}${SLOS_WELCOME_PATH}`,
+  slosManagement: `${SLOS_BASE_PATH}${SLOS_MANAGEMENT_PATH}`,
   slosOutdatedDefinitions: `${SLOS_BASE_PATH}${SLOS_OUTDATED_DEFINITIONS_PATH}`,
   sloCreate: `${SLOS_BASE_PATH}${SLO_CREATE_PATH}`,
   sloCreateWithEncodedForm: (encodedParams: string) =>

x-pack/solutions/observability/plugins/slo/public/application.tsx

@@ -140,9 +140,9 @@ export const renderApp = ({
 };
 
 function App() {
-  const { isServerless } = usePluginContext();
+  const { isServerless, experimentalFeatures } = usePluginContext();
 
-  const routes = getRoutes(isServerless);
+  const routes = getRoutes(isServerless, experimentalFeatures);
 
   return (
     <Routes enableExecutionContextTracking={true}>

x-pack/solutions/observability/plugins/slo/public/hooks/query_key_factory.ts

@@ -51,8 +51,13 @@ export const sloKeys = {
   historicalSummaries: () => [...sloKeys.all, 'historicalSummary'] as const,
   historicalSummary: (list: Array<{ sloId: string; instanceId: string }>) =>
     [...sloKeys.historicalSummaries(), list] as const,
-  definitions: (search: string, page: number, perPage: number, includeOutdatedOnly: boolean) =>
-    [...sloKeys.all, 'definitions', search, page, perPage, includeOutdatedOnly] as const,
+  allDefinitions: () => [...sloKeys.all, 'definitions'],
+  definitions: (params: {
+    search: string;
+    page: number;
+    perPage: number;
+    includeOutdatedOnly: boolean;
+  }) => [...sloKeys.allDefinitions(), params],
   globalDiagnosis: () => [...sloKeys.all, 'globalDiagnosis'] as const,
   health: (list: Array<{ sloId: string; sloInstanceId: string }>) =>
     [...sloKeys.all, 'health', list] as const,

x-pack/solutions/observability/plugins/slo/public/hooks/use_clone_slo.ts

@@ -6,7 +6,7 @@
  */
 
 import { encode } from '@kbn/rison';
-import { SLOWithSummaryResponse } from '@kbn/slo-schema';
+import { SLODefinitionResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { useCallback } from 'react';
 import { paths } from '../../common/locators/paths';
 import { useKibana } from './use_kibana';
@@ -21,8 +21,8 @@ export function useCloneSlo() {
   const spaceId = useSpace();
 
   return useCallback(
-    (slo: SLOWithSummaryResponse) => {
-      if (slo.remote) {
+    (slo: SLOWithSummaryResponse | SLODefinitionResponse) => {
+      if ('remote' in slo && slo.remote) {
         window.open(createRemoteSloCloneUrl(slo, spaceId), '_blank');
       } else {
         const clonePath = paths.sloCreateWithEncodedForm(

x-pack/solutions/observability/plugins/slo/public/hooks/use_delete_slo.ts

@@ -43,6 +43,7 @@ export function useDeleteSlo() {
       },
       onSuccess: (_data, { name }) => {
         queryClient.invalidateQueries({ queryKey: sloKeys.lists(), exact: false });
+        queryClient.invalidateQueries({ queryKey: sloKeys.allDefinitions(), exact: false });
 
         toasts.addSuccess(
           i18n.translate('xpack.slo.slo.delete.successNotification', {

x-pack/solutions/observability/plugins/slo/public/hooks/use_disable_slo.ts

@@ -44,6 +44,7 @@ export function useDisableSlo() {
       onSuccess: (_data, { name }) => {
         queryClient.invalidateQueries({ queryKey: sloKeys.lists(), exact: false });
         queryClient.invalidateQueries({ queryKey: sloKeys.details(), exact: false });
+        queryClient.invalidateQueries({ queryKey: sloKeys.allDefinitions(), exact: false });
 
         toasts.addSuccess(
           i18n.translate('xpack.slo.disable.successNotification', {

x-pack/solutions/observability/plugins/slo/public/hooks/use_enable_slo.ts

@@ -44,6 +44,10 @@ export function useEnableSlo() {
       onSuccess: (_data, { name }) => {
         queryClient.invalidateQueries({ queryKey: sloKeys.lists(), exact: false });
         queryClient.invalidateQueries({ queryKey: sloKeys.details(), exact: false });
+        queryClient.invalidateQueries({
+          queryKey: sloKeys.allDefinitions(),
+          exact: false,
+        });
 
         toasts.addSuccess(
           i18n.translate('xpack.slo.enable.successNotification', {

x-pack/solutions/observability/plugins/slo/public/hooks/use_fetch_slo_definitions.ts

@@ -18,7 +18,7 @@ export interface UseFetchSloDefinitionsResponse {
   refetch: () => void;
 }
 
-interface Params {
+interface SLODefinitionParams {
   name?: string;
   includeOutdatedOnly?: boolean;
   page?: number;
@@ -30,17 +30,22 @@ export function useFetchSloDefinitions({
   includeOutdatedOnly = false,
   page = 1,
   perPage = 100,
-}: Params): UseFetchSloDefinitionsResponse {
+}: SLODefinitionParams): UseFetchSloDefinitionsResponse {
   const { sloClient } = usePluginContext();
   const search = name.endsWith('*') ? name : `${name}*`;
 
   const { isLoading, isError, isSuccess, data, refetch } = useQuery({
-    queryKey: sloKeys.definitions(search, page, perPage, includeOutdatedOnly),
+    queryKey: sloKeys.definitions({ search, page, perPage, includeOutdatedOnly }),
     queryFn: async ({ signal }) => {
       try {
         return await sloClient.fetch('GET /api/observability/slos/_definitions 2023-10-31', {
           params: {
-            query: { search, includeOutdatedOnly, page: String(page), perPage: String(perPage) },
+            query: {
+              ...(search !== undefined && { search }),
+              ...(includeOutdatedOnly !== undefined && { includeOutdatedOnly }),
+              ...(page !== undefined && { page: String(page) }),
+              ...(perPage !== undefined && { perPage: String(perPage) }),
+            },
           },
           signal,
         });