[8.x] feat(slo): SLO grouping values selector (#202364)

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

@@ -0,0 +1,37 @@
+/*
+ * 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 { toBooleanRt } from '@kbn/io-ts-utils';
+
+const getSLOGroupingsParamsSchema = t.type({
+  path: t.type({ id: t.string }),
+  query: t.intersection([
+    t.type({
+      instanceId: t.string,
+      groupingKey: t.string,
+    }),
+    t.partial({
+      search: t.string,
+      afterKey: t.string,
+      size: t.string,
+      excludeStale: toBooleanRt,
+      remoteName: t.string,
+    }),
+  ]),
+});
+
+const getSLOGroupingsResponseSchema = t.type({
+  groupingKey: t.string,
+  values: t.array(t.string),
+  afterKey: t.union([t.string, t.undefined]),
+});
+
+type GetSLOGroupingsParams = t.TypeOf<typeof getSLOGroupingsParamsSchema.props.query>;
+type GetSLOGroupingsResponse = t.OutputOf<typeof getSLOGroupingsResponseSchema>;
+
+export { getSLOGroupingsParamsSchema, getSLOGroupingsResponseSchema };
+export type { GetSLOGroupingsResponse, GetSLOGroupingsParams };

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/loading_state.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import React from 'react';
+
+export function LoadingState({ dataTestSubj }: { dataTestSubj?: string }) {
+  return (
+    <EuiFlexGroup alignItems="center" justifyContent="center" style={{ height: '100%' }}>
+      <EuiFlexItem grow={false}>
+        <EuiLoadingSpinner size="xxl" data-test-subj={dataTestSubj} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

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,149 @@
+/*
+ * 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,
+  EuiFlexItem,
+} 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 (
+    <EuiFlexItem grow={false}>
+      <EuiComboBox<string>
+        css={css`
+          max-width: 500px;
+        `}
+        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);
+          }
+        }}
+      />
+    </EuiFlexItem>
+  );
+}
+
+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,44 @@
+/*
+ * 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, EuiFlexItem, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+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" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiText size="xs">
+          <h4>
+            {i18n.translate('xpack.slo.sloDetails.groupings.title', {
+              defaultMessage: 'Instance',
+            })}
+          </h4>
+        </EuiText>
+      </EuiFlexItem>
+      {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 };