feat(slo): SLO grouping values selector

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

@@ -13,7 +13,7 @@ export * from './find_group';
 export * from './find_definition';
 export * from './get';
 export * from './get_burn_rates';
-export * from './get_instances';
+export * from './get_slo_groupings';
 export * from './get_preview_data';
 export * from './reset';
 export * from './manage';

x-pack/plugins/observability_solution/slo/public/components/slo/auto_refresh_button/auto_refresh_button.tsx

@@ -32,7 +32,7 @@ export function AutoRefreshButton({ disabled, isAutoRefreshing, onClick }: Props
       data-test-subj="autoRefreshButton"
       disabled={disabled}
       iconSide="left"
-      iconType="play"
+      iconType="refresh"
       onClick={onClick}
     >
       {i18n.translate('xpack.slo.slosPage.autoRefreshButtonLabel', {

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

@@ -67,6 +67,15 @@ export const sloKeys = {
     groupings?: Record<string, unknown>
   ) => [...sloKeys.all, 'preview', indicator, range, groupings] as const,
   burnRateRules: (search: string) => [...sloKeys.all, 'burnRateRules', search],
+  groupings: (params: {
+    sloId: string;
+    instanceId: string;
+    groupingKey: string;
+    search?: string;
+    afterKey?: string;
+    excludeStale?: boolean;
+    remoteName?: string;
+  }) => [...sloKeys.all, 'fetch_slo_groupings', params] as const,
 };
 
 export type SloKeys = typeof sloKeys;

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

@@ -0,0 +1,139 @@
+/*
+ * 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 { EuiButtonIcon, EuiComboBox, EuiComboBoxOptionOption, EuiCopy } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import { ALL_VALUE, SLOWithSummaryResponse } from '@kbn/slo-schema';
+import React, { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import useDebounce from 'react-use/lib/useDebounce';
+import { SLOS_BASE_PATH } from '../../../../../common/locators/paths';
+import { useFetchSloGroupings } from '../../hooks/use_fetch_slo_instances';
+import { useGetQueryParams } from '../../hooks/use_get_query_params';
+
+interface Props {
+  slo: SLOWithSummaryResponse;
+  groupingKey: string;
+  value?: string;
+}
+
+interface Field {
+  label: string;
+  value: string;
+}
+
+export function SLOGroupingValueSelector({ slo, groupingKey, value }: Props) {
+  const isAvailable = window.location.pathname.includes(SLOS_BASE_PATH);
+  const { search: searchParams } = useLocation();
+  const history = useHistory();
+  const { remoteName } = useGetQueryParams();
+
+  const [currentValue, setCurrentValue] = useState<string | undefined>(value);
+  const [options, setOptions] = useState<Field[]>([]);
+  const [search, setSearch] = useState<string | undefined>(undefined);
+  const [debouncedSearch, setDebouncedSearch] = useState<string | undefined>(undefined);
+  useDebounce(() => setDebouncedSearch(search), 500, [search]);
+
+  const { isLoading, isError, data } = useFetchSloGroupings({
+    sloId: slo.id,
+    groupingKey,
+    instanceId: slo.instanceId ?? ALL_VALUE,
+    search: debouncedSearch,
+    remoteName,
+  });
+
+  useEffect(() => {
+    if (data) {
+      setSearch(undefined);
+      setDebouncedSearch(undefined);
+      setOptions(data.values.map(toField));
+    }
+  }, [data]);
+
+  const onChange = (selected: Array<EuiComboBoxOptionOption<string>>) => {
+    const newValue = selected[0].value;
+    if (!newValue) return;
+    setCurrentValue(newValue);
+
+    const urlSearchParams = new URLSearchParams(searchParams);
+    const newGroupings = { ...slo.groupings, [groupingKey]: newValue };
+    urlSearchParams.set('instanceId', toInstanceId(newGroupings, slo.groupBy));
+    history.replace({
+      search: urlSearchParams.toString(),
+    });
+  };
+
+  return (
+    <EuiComboBox<string>
+      fullWidth={false}
+      css={css`
+        max-width: fit-content;
+      `}
+      isClearable={false}
+      compressed
+      prepend={groupingKey}
+      append={
+        currentValue ? (
+          <EuiCopy textToCopy={currentValue}>
+            {(copy) => (
+              <EuiButtonIcon
+                data-test-subj="sloSLOGroupingValueSelectorButton"
+                color="text"
+                iconType="copyClipboard"
+                onClick={copy}
+                aria-label={i18n.translate('xpack.slo.sLOGroupingValueSelector.copyButton.label', {
+                  defaultMessage: 'Copy value to clipboard',
+                })}
+              />
+            )}
+          </EuiCopy>
+        ) : (
+          <EuiButtonIcon
+            data-test-subj="sloSLOGroupingValueSelectorButton"
+            color="text"
+            disabled={true}
+            iconType="copyClipboard"
+            aria-label={i18n.translate(
+              'xpack.slo.sLOGroupingValueSelector.copyButton.noValueLabel',
+              { defaultMessage: 'Select a value before' }
+            )}
+          />
+        )
+      }
+      singleSelection={{ asPlainText: true }}
+      options={options}
+      isLoading={isLoading}
+      isDisabled={isError || !isAvailable}
+      placeholder={i18n.translate('xpack.slo.sLOGroupingValueSelector.placeholder', {
+        defaultMessage: 'Select a group value',
+      })}
+      selectedOptions={currentValue ? [toField(currentValue)] : []}
+      onChange={onChange}
+      truncationProps={{
+        truncation: 'end',
+      }}
+      onSearchChange={(searchValue: string) => {
+        if (searchValue !== '') {
+          setSearch(searchValue);
+        }
+      }}
+    />
+  );
+}
+
+function toField(value: string): Field {
+  return { label: value, value };
+}
+
+function toInstanceId(
+  groupings: Record<string, string | number>,
+  groupBy: string | string[]
+): string {
+  const groups = [groupBy].flat();
+  return groups.map((group) => groupings[group]).join(',');
+}

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

@@ -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 { EuiFlexGroup } from '@elastic/eui';
+import { SLOWithSummaryResponse } from '@kbn/slo-schema';
+import React from 'react';
+import { SLOGroupingValueSelector } from './slo_grouping_value_selector';
+
+export function SLOGroupings({ slo }: { slo: SLOWithSummaryResponse }) {
+  const groupings = Object.entries(slo.groupings ?? {});
+
+  if (!groupings.length) {
+    return null;
+  }
+
+  return (
+    <EuiFlexGroup direction="row" gutterSize="s">
+      {groupings.map(([groupingKey, groupingValue]) => {
+        return (
+          <SLOGroupingValueSelector
+            key={groupingKey}
+            slo={slo}
+            groupingKey={groupingKey}
+            value={String(groupingValue)}
+          />
+        );
+      })}
+    </EuiFlexGroup>
+  );
+}

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

@@ -5,11 +5,10 @@
  * 2.0.
  */
 
-import React from 'react';
 import { ComponentStory } from '@storybook/react';
-
-import { KibanaReactStorybookDecorator } from '../../../utils/kibana_react.storybook_decorator';
+import React from 'react';
 import { buildSlo } from '../../../data/slo/slo';
+import { KibanaReactStorybookDecorator } from '../../../utils/kibana_react.storybook_decorator';
 import { HeaderControl as Component, Props } from './header_control';
 
 export default {
@@ -22,11 +21,10 @@ const Template: ComponentStory<typeof Component> = (props: Props) => <Component
 
 const defaultProps: Props = {
   slo: buildSlo(),
-  isLoading: false,
 };
 
 export const Default = Template.bind({});
 Default.args = defaultProps;
 
 export const WithLoading = Template.bind({});
-WithLoading.args = { slo: undefined, isLoading: true };
+WithLoading.args = { slo: undefined };

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

@@ -22,21 +22,20 @@ import { SloDeleteModal } from '../../../components/slo/delete_confirmation_moda
 import { SloResetConfirmationModal } from '../../../components/slo/reset_confirmation_modal/slo_reset_confirmation_modal';
 import { useCloneSlo } from '../../../hooks/use_clone_slo';
 import { useFetchRulesForSlo } from '../../../hooks/use_fetch_rules_for_slo';
+import { useKibana } from '../../../hooks/use_kibana';
 import { usePermissions } from '../../../hooks/use_permissions';
 import { useResetSlo } from '../../../hooks/use_reset_slo';
-import { useKibana } from '../../../hooks/use_kibana';
 import { convertSliApmParamsToApmAppDeeplinkUrl } from '../../../utils/slo/convert_sli_apm_params_to_apm_app_deeplink_url';
 import { isApmIndicatorType } from '../../../utils/slo/indicator';
 import { EditBurnRateRuleFlyout } from '../../slos/components/common/edit_burn_rate_rule_flyout';
 import { useGetQueryParams } from '../hooks/use_get_query_params';
 import { useSloActions } from '../hooks/use_slo_actions';
 
 export interface Props {
-  slo?: SLOWithSummaryResponse;
-  isLoading: boolean;
+  slo: SLOWithSummaryResponse;
 }
 
-export function HeaderControl({ isLoading, slo }: Props) {
+export function HeaderControl({ slo }: Props) {
   const {
     application: { navigateToUrl, capabilities },
     http: { basePath },
@@ -58,10 +57,10 @@ export function HeaderControl({ isLoading, slo }: Props) {
   const { mutateAsync: resetSlo, isLoading: isResetLoading } = useResetSlo();
 
   const { data: rulesBySlo, refetchRules } = useFetchRulesForSlo({
-    sloIds: slo ? [slo.id] : undefined,
+    sloIds: [slo.id],
   });
 
-  const rules = slo ? rulesBySlo?.[slo?.id] ?? [] : [];
+  const rules = rulesBySlo?.[slo.id] ?? [];
 
   const handleActionsClick = () => setIsPopoverOpen((value) => !value);
   const closePopover = () => setIsPopoverOpen(false);
@@ -92,10 +91,6 @@ export function HeaderControl({ isLoading, slo }: Props) {
   });
 
   const handleNavigateToApm = () => {
-    if (!slo) {
-      return undefined;
-    }
-
     const url = convertSliApmParamsToApmAppDeeplinkUrl(slo);
     if (url) {
       navigateToUrl(basePath.prepend(url));
@@ -105,10 +100,8 @@ export function HeaderControl({ isLoading, slo }: Props) {
   const navigateToClone = useCloneSlo();
 
   const handleClone = async () => {
-    if (slo) {
-      setIsPopoverOpen(false);
-      navigateToClone(slo);
-    }
+    setIsPopoverOpen(false);
+    navigateToClone(slo);
   };
 
   const handleDelete = () => {
@@ -140,11 +133,9 @@ export function HeaderControl({ isLoading, slo }: Props) {
   };
 
   const handleResetConfirm = async () => {
-    if (slo) {
-      await resetSlo({ id: slo.id, name: slo.name });
-      removeResetQueryParam();
-      setResetConfirmationModalOpen(false);
-    }
+    await resetSlo({ id: slo.id, name: slo.name });
+    removeResetQueryParam();
+    setResetConfirmationModalOpen(false);
   };
 
   const handleResetCancel = () => {
@@ -182,8 +173,6 @@ export function HeaderControl({ isLoading, slo }: Props) {
             iconType="arrowDown"
             iconSize="s"
             onClick={handleActionsClick}
-            isLoading={isLoading}
-            disabled={isLoading}
           >
             {i18n.translate('xpack.slo.sloDetails.headerControl.actions', {
               defaultMessage: 'Actions',
@@ -315,7 +304,7 @@ export function HeaderControl({ isLoading, slo }: Props) {
         refetchRules={refetchRules}
       />
 
-      {slo && isRuleFlyoutVisible ? (
+      {isRuleFlyoutVisible ? (
         <AddRuleFlyout
           consumer={sloFeatureId}
           ruleTypeId={SLO_BURN_RATE_RULE_TYPE_ID}
@@ -326,11 +315,11 @@ export function HeaderControl({ isLoading, slo }: Props) {
         />
       ) : null}
 
-      {slo && isDeleteConfirmationModalOpen ? (
+      {isDeleteConfirmationModalOpen ? (
         <SloDeleteModal slo={slo} onCancel={handleDeleteCancel} onSuccess={handleDeleteConfirm} />
       ) : null}
 
-      {slo && isResetConfirmationModalOpen ? (
+      {isResetConfirmationModalOpen ? (
         <SloResetConfirmationModal
           slo={slo}
           onCancel={handleResetCancel}