[SLO] Move overview embeddable to new react registry (#181930)

Fixes #179296

## 🍒 Summary

This PR converts the SLO Overview embeddable (Single SLO & Grouped SLOs)
to the new React Embeddable framework. There are no UI changes to the
current embeddable and the behavior should be the same. I have a video
of how the embeddable should work.



https://github.com/elastic/kibana/assets/2852703/d37c3f99-3140-4a09-a223-36a1d2242649

## ✔️ Acceptance criteria
- A new `create_overview_panel_action` action is created, which adds the
`SLO Overview` option in the Add panel section
- The `SLO Overview` menu option is grouped under SLOs menu
- Clicking on the single SLO card should open a Flyout with the SLO
details
- Clicking on the Grouped SLOs should expand the accordion and show the
SLOs that belong to this group
- The Grouped SLO have the `Edit criteria` option
- `Edit criteria` option appears under `More` panel options only for the
Grouped SLOs
- Kibana screenshot tool should report no timeout error.
- Clicking on the Refresh button should reload the embeddable
- We should be able to set default dimensions to the embeddable panels
cc @nickpeihl
  - Depends on #182120

---------

Co-authored-by: kibanamachine <[email protected]>

x-pack/plugins/observability_solution/slo/kibana.jsonc

@@ -49,7 +49,8 @@
       "kibanaUtils",
       "unifiedSearch",
       "embeddable",
-      "ingestPipelines"
+      "ingestPipelines",
+      "dashboard"
     ]
   }
 }

x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_alerts_embeddable_factory.ts

@@ -13,7 +13,7 @@ import {
   ErrorEmbeddable,
   IContainer,
 } from '@kbn/embeddable-plugin/public';
-import { COMMON_SLO_GROUPING } from '../overview/slo_embeddable_factory';
+import { COMMON_SLO_GROUPING } from '../common/constants';
 import { SLO_ALERTS_EMBEDDABLE, SLOAlertsEmbeddable } from './slo_alerts_embeddable';
 import { SloPublicPluginsStart, SloPublicStart } from '../../..';
 import { SloAlertsEmbeddableInput } from './types';

x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_configuration.tsx

@@ -28,7 +28,7 @@ import type { EmbeddableSloProps, SloAlertsEmbeddableInput, SloItem } from './ty
 
 interface SloConfigurationProps {
   initialInput?: Partial<SloAlertsEmbeddableInput>;
-  onCreate: (props: EmbeddableSloProps) => void; // TODO check change point detection
+  onCreate: (props: EmbeddableSloProps) => void;
   onCancel: () => void;
 }
 

x-pack/plugins/observability_solution/slo/public/embeddable/slo/common/constants.ts

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+export const COMMON_SLO_GROUPING = [
+  {
+    id: 'slos',
+    getDisplayName: () => 'SLOs',
+    getIconType: () => {
+      return 'visGauge';
+    },
+  },
+];

x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/index.ts → x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/constants.ts

@@ -5,4 +5,5 @@
  * 2.0.
  */
 
-export { SloOverviewEmbeddableFactoryDefinition } from './slo_embeddable_factory';
+export const SLO_OVERVIEW_EMBEDDABLE_ID = 'SLO_EMBEDDABLE';
+export const ADD_SLO_OVERVIEW_ACTION_ID = 'CREATE_SLO_OVERVIEW_EMBEDDABLE';

x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/group_view/group_view.tsx

@@ -9,7 +9,6 @@ import React, { useState, useEffect } from 'react';
 import { Filter } from '@kbn/es-query';
 import { Subject } from 'rxjs';
 import { SLOView } from '../../../../pages/slos/components/toggle_slo_view';
-import { SloEmbeddableInput } from '../types';
 import { GroupView } from '../../../../pages/slos/components/grouped_slos/group_view';
 import { buildCombinedKqlQuery } from './helpers/build_kql_query';
 
@@ -20,45 +19,29 @@ interface Props {
   sloView: SLOView;
   sort?: string;
   filters?: Filter[];
-  reloadGroupSubject: Subject<SloEmbeddableInput | undefined>;
+  reloadSubject: Subject<boolean>;
 }
 
 export function GroupSloView({
   sloView,
-  groupBy: initialGroupBy = 'status',
-  groups: initialGroups = [],
-  kqlQuery: initialKqlQuery = '',
-  filters: initialFilters = [],
-  reloadGroupSubject,
+  groupBy = 'status',
+  groups = [],
+  kqlQuery = '',
+  filters = [],
+  reloadSubject,
 }: Props) {
   const [lastRefreshTime, setLastRefreshTime] = useState<number | undefined>(undefined);
-  const [groupBy, setGroupBy] = useState(initialGroupBy);
-  const [kqlQuery, setKqlQuery] = useState(initialKqlQuery);
-  const [filters, setFilters] = useState(initialFilters);
-  const [groups, setGroups] = useState(initialGroups);
   const combinedKqlQuery = buildCombinedKqlQuery({ groups, groupBy, kqlQuery });
 
   useEffect(() => {
-    const subs = reloadGroupSubject?.subscribe((input) => {
-      if (input) {
-        const nGroupBy = input?.groupFilters?.groupBy ?? groupBy;
-        setGroupBy(nGroupBy);
-
-        const nKqlInput = input?.groupFilters?.kqlQuery ?? kqlQuery;
-        setKqlQuery(nKqlInput);
-
-        const nFilters = input?.groupFilters?.filters ?? filters;
-        setFilters(nFilters);
-
-        const nGroups = input?.groupFilters?.groups ?? groups;
-        setGroups(nGroups);
-      }
+    reloadSubject?.subscribe(() => {
       setLastRefreshTime(Date.now());
     });
     return () => {
-      subs?.unsubscribe();
+      reloadSubject?.unsubscribe();
     };
-  }, [filters, groupBy, groups, kqlQuery, reloadGroupSubject]);
+  }, [reloadSubject]);
+
   return (
     <GroupView
       sloView={sloView}

x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_configuration.tsx

@@ -25,36 +25,35 @@ import { i18n } from '@kbn/i18n';
 import { SloSelector } from '../alerts/slo_selector';
 
 import type {
-  SingleSloProps,
-  GroupSloProps,
-  SloEmbeddableInput,
+  SingleSloCustomInput,
+  GroupSloCustomInput,
   GroupFilters,
   OverviewMode,
 } from './types';
 import { SloGroupFilters } from './group_view/slo_group_filters';
 import { OverviewModeSelector } from './overview_mode_selector';
 
 interface SloConfigurationProps {
-  initialInput?: Partial<SloEmbeddableInput> | undefined;
-  onCreate: (props: SingleSloProps | GroupSloProps) => void;
+  initialInput?: GroupSloCustomInput;
+  onCreate: (props: SingleSloCustomInput | GroupSloCustomInput) => void;
   onCancel: () => void;
 }
 
 interface SingleConfigurationProps {
-  onCreate: (props: SingleSloProps) => void;
+  onCreate: (props: SingleSloCustomInput) => void;
   onCancel: () => void;
   overviewMode: OverviewMode;
 }
 
 interface GroupConfigurationProps {
-  onCreate: (props: GroupSloProps) => void;
+  onCreate: (props: GroupSloCustomInput) => void;
   onCancel: () => void;
   overviewMode: OverviewMode;
-  initialInput?: GroupSloProps;
+  initialInput?: GroupSloCustomInput;
 }
 
 function SingleSloConfiguration({ overviewMode, onCreate, onCancel }: SingleConfigurationProps) {
-  const [selectedSlo, setSelectedSlo] = useState<SingleSloProps>();
+  const [selectedSlo, setSelectedSlo] = useState<SingleSloCustomInput>();
   const [showAllGroupByInstances, setShowAllGroupByInstances] = useState(false);
   const [hasError, setHasError] = useState(false);
   const hasGroupBy = selectedSlo && selectedSlo.sloInstanceId !== ALL_VALUE;
@@ -144,10 +143,10 @@ function GroupSloConfiguration({
   initialInput,
 }: GroupConfigurationProps) {
   const [selectedGroupFilters, setSelectedGroupFilters] = useState<GroupFilters>({
-    groupBy: initialInput?.groupFilters.groupBy ?? 'status',
-    filters: initialInput?.groupFilters.filters ?? [],
-    kqlQuery: initialInput?.groupFilters.kqlQuery ?? '',
-    groups: initialInput?.groupFilters.groups ?? [],
+    groupBy: initialInput?.groupFilters?.groupBy ?? 'status',
+    filters: initialInput?.groupFilters?.filters ?? [],
+    kqlQuery: initialInput?.groupFilters?.kqlQuery ?? '',
+    groups: initialInput?.groupFilters?.groups ?? [],
   });
 
   const onConfirmClick = () =>
@@ -226,7 +225,7 @@ export function SloConfiguration({ initialInput, onCreate, onCancel }: SloConfig
       </EuiFlyoutHeader>
       {overviewMode === 'groups' ? (
         <GroupSloConfiguration
-          initialInput={initialInput as GroupSloProps}
+          initialInput={initialInput as GroupSloCustomInput}
           overviewMode={overviewMode}
           onCreate={onCreate}
           onCancel={onCancel}