Slo overview embeddable instances api

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

@@ -28,4 +28,5 @@ export * from './bulk_delete';
 export * from './find_instances';
 export * from './repair';
 export * from './slo_templates';
+export * from './search_slo_definitions';
 export * from './get_grouped_stats';

x-pack/platform/packages/shared/kbn-slo-schema/src/rest_specs/routes/search_slo_definitions.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 { toNumberRt } from '@kbn/io-ts-utils';
+
+const searchSLODefinitionsParamsSchema = t.partial({
+  query: t.partial({
+    search: t.string,
+    size: toNumberRt,
+    searchAfter: t.string,
+    remoteName: t.string,
+  }),
+});
+
+type SearchSLODefinitionsParams = t.TypeOf<typeof searchSLODefinitionsParamsSchema.props.query>;
+
+interface SearchSLODefinitionItem {
+  id: string;
+  name: string;
+  groupBy: string[];
+  remote?: { remoteName: string; kibanaUrl: string };
+}
+
+interface SearchSLODefinitionResponse {
+  results: SearchSLODefinitionItem[];
+  searchAfter?: string;
+}
+
+export { searchSLODefinitionsParamsSchema };
+export type { SearchSLODefinitionsParams, SearchSLODefinitionResponse, SearchSLODefinitionItem };

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

@@ -11,7 +11,6 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSwitch,
   EuiSpacer,
   EuiFlyout,
   EuiFlyoutHeader,
@@ -23,7 +22,9 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ALL_VALUE } from '@kbn/slo-schema';
 import { i18n } from '@kbn/i18n';
-import { SloSelector } from '../alerts/slo_selector';
+import type { SearchSLODefinitionItem } from '@kbn/slo-schema';
+import { SloDefinitionSelector } from './slo_definition_selector';
+import { SloInstanceSelector } from './slo_instance_selector';
 
 import type {
   SingleSloCustomInput,
@@ -54,60 +55,65 @@ interface GroupConfigurationProps {
 }
 
 function SingleSloConfiguration({ overviewMode, onCreate, onCancel }: SingleConfigurationProps) {
-  const [selectedSlo, setSelectedSlo] = useState<SingleSloCustomInput>();
-  const [showAllGroupByInstances, setShowAllGroupByInstances] = useState(false);
+  const [selectedSloDefinition, setSelectedSloDefinition] = useState<
+    SearchSLODefinitionItem | undefined
+  >();
+  const [selectedInstanceId, setSelectedInstanceId] = useState<string | undefined>(ALL_VALUE);
   const [hasError, setHasError] = useState(false);
-  const hasGroupBy = selectedSlo && selectedSlo.sloInstanceId !== ALL_VALUE;
+  const showAllGroupByInstances = selectedInstanceId === ALL_VALUE;
+
+  const hasGroupBy = selectedSloDefinition?.groupBy
+    ? selectedSloDefinition.groupBy.length > 0 && !selectedSloDefinition.groupBy.includes(ALL_VALUE)
+    : false;
+
+  const onConfirmClick = () => {
+    if (!selectedSloDefinition) {
+      setHasError(true);
+      return;
+    }
+
+    const remoteName: string | undefined = selectedSloDefinition?.remote?.remoteName;
 
-  const onConfirmClick = () =>
     onCreate({
       showAllGroupByInstances,
-      sloId: selectedSlo?.sloId,
-      sloInstanceId: selectedSlo?.sloInstanceId,
-      remoteName: selectedSlo?.remoteName,
+      sloId: selectedSloDefinition.id,
+      sloInstanceId: selectedInstanceId ?? ALL_VALUE,
+      remoteName,
       overviewMode,
     });
+  };
 
   return (
     <>
       <EuiFlyoutBody>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiFlexGroup>
+            <EuiFlexGroup direction="column" gutterSize="m">
               <EuiFlexItem data-test-subj="singleSloSelector" grow>
-                <SloSelector
-                  singleSelection={true}
-                  hasError={hasError}
+                <SloDefinitionSelector
+                  hasError={hasError && !selectedSloDefinition}
                   onSelected={(slo) => {
+                    setSelectedSloDefinition(slo);
                     setHasError(slo === undefined);
-                    if (slo && 'id' in slo) {
-                      setSelectedSlo({
-                        sloId: slo.id,
-                        sloInstanceId: slo.instanceId,
-                        remoteName: slo.remote?.remoteName,
-                      });
+                    // Reset instance selection when SLO changes
+                    if (slo) {
+                      setSelectedInstanceId(undefined);
                     }
                   }}
                 />
               </EuiFlexItem>
+              {hasGroupBy && selectedSloDefinition && (
+                <EuiFlexItem data-test-subj="singleSloInstanceSelector" grow>
+                  <SloInstanceSelector
+                    remoteName={selectedSloDefinition.remote?.remoteName}
+                    sloId={selectedSloDefinition.id}
+                    onSelected={(instanceId) => {
+                      setSelectedInstanceId(instanceId);
+                    }}
+                  />
+                </EuiFlexItem>
+              )}
             </EuiFlexGroup>
-            {hasGroupBy && (
-              <>
-                <EuiSpacer />
-                <EuiSwitch
-                  label={i18n.translate(
-                    'xpack.slo.sloConfiguration.euiSwitch.showAllGroupByLabel',
-                    {
-                      defaultMessage: 'Show all related group-by instances',
-                    }
-                  )}
-                  checked={showAllGroupByInstances}
-                  onChange={(e) => {
-                    setShowAllGroupByInstances(e.target.checked);
-                  }}
-                />
-              </>
-            )}
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutBody>
@@ -122,7 +128,7 @@ function SingleSloConfiguration({ overviewMode, onCreate, onCancel }: SingleConf
 
           <EuiButton
             data-test-subj="sloConfirmButton"
-            isDisabled={!selectedSlo || hasError}
+            isDisabled={!selectedSloDefinition || hasError || (hasGroupBy && !selectedInstanceId)}
             onClick={onConfirmClick}
             fill
           >

x-pack/solutions/observability/plugins/slo/public/embeddable/slo/overview/slo_definition_selector.tsx

@@ -0,0 +1,109 @@
+/*
+ * 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 React, { useMemo, useEffect, useState } from 'react';
+import type { EuiComboBoxOptionOption } from '@elastic/eui';
+import { EuiComboBox, EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { debounce } from 'lodash';
+import type { SearchSLODefinitionItem } from '@kbn/slo-schema';
+import { useFetchSloDefinitionsWithRemote } from '../../../hooks/use_fetch_slo_definitions_with_remote';
+
+interface Props {
+  onSelected: (slo: SearchSLODefinitionItem | undefined) => void;
+  hasError?: boolean;
+  remoteName?: string;
+}
+
+const SLO_REQUIRED = i18n.translate('xpack.slo.sloEmbeddable.config.errors.sloRequired', {
+  defaultMessage: 'SLO is required.',
+});
+
+export function SloDefinitionSelector({ onSelected, hasError, remoteName }: Props) {
+  const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionOption<string>>>(
+    []
+  );
+  const [searchValue, setSearchValue] = useState<string>('');
+  const search = searchValue.trim();
+
+  const { isLoading, data: definitionsData } = useFetchSloDefinitionsWithRemote({
+    search,
+    size: 100,
+    remoteName,
+  });
+
+  const options = useMemo(() => {
+    return (
+      definitionsData?.results.map((slo) => ({
+        label: slo.name,
+        value: slo.id,
+      })) ?? []
+    );
+  }, [definitionsData]);
+
+  const onChange = (opts: Array<EuiComboBoxOptionOption<string>>) => {
+    setSelectedOptions(opts);
+    if (opts.length === 0) {
+      onSelected(undefined);
+      return;
+    }
+
+    const selectedSloId = opts[0].value!;
+    const selectedSlo = definitionsData?.results.find((slo) => slo.id === selectedSloId);
+    onSelected(selectedSlo);
+  };
+
+  const onSearchChange = useMemo(
+    () =>
+      debounce((value: string) => {
+        setSearchValue(value);
+      }, 300),
+    []
+  );
+
+  useEffect(() => {
+    return () => {
+      onSearchChange.cancel();
+    };
+  }, [onSearchChange]);
+
+  return (
+    <EuiFormRow
+      fullWidth
+      isInvalid={hasError}
+      error={hasError ? SLO_REQUIRED : undefined}
+      label={i18n.translate('xpack.slo.embeddable.sloDefinitionSelectorLabel', {
+        defaultMessage: 'SLO Definition',
+      })}
+    >
+      <EuiComboBox
+        aria-label={i18n.translate(
+          'xpack.slo.sloEmbeddable.config.sloDefinitionSelector.ariaLabel',
+          {
+            defaultMessage: 'SLO Definition',
+          }
+        )}
+        placeholder={i18n.translate(
+          'xpack.slo.sloEmbeddable.config.sloDefinitionSelector.placeholder',
+          {
+            defaultMessage: 'Select a SLO definition',
+          }
+        )}
+        data-test-subj="sloDefinitionSelector"
+        options={options}
+        selectedOptions={selectedOptions}
+        async
+        isLoading={isLoading}
+        onChange={onChange}
+        fullWidth
+        onSearchChange={onSearchChange}
+        isInvalid={hasError}
+        singleSelection={{ asPlainText: true }}
+      />
+    </EuiFormRow>
+  );
+}

x-pack/solutions/observability/plugins/slo/public/embeddable/slo/overview/slo_embeddable_factory.tsx

@@ -235,7 +235,6 @@ export const getOverviewEmbeddableFactory = ({
         };
 
         const queryClient = new QueryClient();
-
         return (
           <EuiThemeProvider darkMode={true}>
             <KibanaContextProvider services={deps}>
@@ -249,7 +248,19 @@ export const getOverviewEmbeddableFactory = ({
                 }}
               >
                 <QueryClientProvider client={queryClient}>
-                  {showAllGroupByInstances ? <SloCardChartList sloId={sloId!} /> : renderOverview()}
+                  {overviewMode === 'groups' ? (
+                    renderOverview()
+                  ) : showAllGroupByInstances ? (
+                    <div
+                      data-test-subj="sloSingleOverviewPanel"
+                      data-shared-item=""
+                      style={{ width: '100%' }}
+                    >
+                      <SloCardChartList data-test-subj="sloSingleOverviewPanel" sloId={sloId!} />
+                    </div>
+                  ) : (
+                    renderOverview()
+                  )}
                 </QueryClientProvider>
               </PluginContext.Provider>
             </KibanaContextProvider>