[SLOs] In Embeddables, show all related instances option (elastic#175503

) ## Summary in SLOs embeddable, added the ability show all related instances Overviews and alerts !! if selected SLO has group-by, it will give an option to show all related instances from the group-by field <img width="829" alt="image" src="https://github.com/elastic/kibana/assets/3505601/f57ad76b-4170-4fc0-8335-c0f0b2a8807e"> All related instances will appear as grid <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/3505601/c43f058a-1b43-4e44-807d-4157e1f4a2be">
CoenWarmer · Feb 15, 2024 · 34dbd2a · 34dbd2a
1 parent 692f95e
commit 34dbd2a
Show file tree

Hide file tree

Showing 16 changed files with 383 additions and 47 deletions.
diff --git a/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_alerts_summary.tsx b/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_alerts_summary.tsx
@@ -22,15 +22,22 @@ interface Props {
   slos: SloItem[];
   timeRange: TimeRange;
   onLoaded?: () => void;
+  showAllGroupByInstances?: boolean;
 }
 
-export function SloAlertsSummary({ slos, deps, timeRange, onLoaded }: Props) {
+export function SloAlertsSummary({
+  slos,
+  deps,
+  timeRange,
+  onLoaded,
+  showAllGroupByInstances,
+}: Props) {
   const {
     charts,
     triggersActionsUi: { getAlertSummaryWidget: AlertSummaryWidget },
   } = deps;
 
-  const esQuery = useSloAlertsQuery(slos, timeRange);
+  const esQuery = useSloAlertsQuery(slos, timeRange, showAllGroupByInstances);
   const timeBuckets = useTimeBuckets();
   const bucketSize = useMemo(
     () =>

diff --git a/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_alerts_table.tsx b/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_alerts_table.tsx
@@ -22,9 +22,14 @@ interface Props {
   timeRange: TimeRange;
   onLoaded?: () => void;
   lastReloadRequestTime: number | undefined;
+  showAllGroupByInstances?: boolean;
 }
 
-export const getSloInstanceFilter = (sloId: string, sloInstanceId: string) => {
+export const getSloInstanceFilter = (
+  sloId: string,
+  sloInstanceId: string,
+  showAllGroupByInstances = false
+) => {
   return {
     bool: {
       must: [
@@ -33,7 +38,7 @@ export const getSloInstanceFilter = (sloId: string, sloInstanceId: string) => {
             'slo.id': sloId,
           },
         },
-        ...(sloInstanceId !== ALL_VALUE
+        ...(sloInstanceId !== ALL_VALUE && !showAllGroupByInstances
           ? [
               {
                 term: {
@@ -47,7 +52,11 @@ export const getSloInstanceFilter = (sloId: string, sloInstanceId: string) => {
   };
 };
 
-export const useSloAlertsQuery = (slos: SloItem[], timeRange: TimeRange) => {
+export const useSloAlertsQuery = (
+  slos: SloItem[],
+  timeRange: TimeRange,
+  showAllGroupByInstances?: boolean
+) => {
   return useMemo(() => {
     const query: AlertsTableStateProps['query'] = {
       bool: {
@@ -66,25 +75,34 @@ export const useSloAlertsQuery = (slos: SloItem[], timeRange: TimeRange) => {
           },
           {
             bool: {
-              should: slos.map((slo) => getSloInstanceFilter(slo.id, slo.instanceId)),
+              should: slos.map((slo) =>
+                getSloInstanceFilter(slo.id, slo.instanceId, showAllGroupByInstances)
+              ),
             },
           },
         ],
       },
     };
 
     return query;
-  }, [slos, timeRange]);
+  }, [showAllGroupByInstances, slos, timeRange.from]);
 };
 
-export function SloAlertsTable({ slos, deps, timeRange, onLoaded, lastReloadRequestTime }: Props) {
+export function SloAlertsTable({
+  slos,
+  deps,
+  timeRange,
+  onLoaded,
+  lastReloadRequestTime,
+  showAllGroupByInstances,
+}: Props) {
   const {
     triggersActionsUi: { alertsTableConfigurationRegistry, getAlertsStateTable: AlertsStateTable },
   } = deps;
 
   return (
     <AlertsStateTable
-      query={useSloAlertsQuery(slos, timeRange)}
+      query={useSloAlertsQuery(slos, timeRange, showAllGroupByInstances)}
       alertsTableConfigurationRegistry={alertsTableConfigurationRegistry}
       configurationId={SLO_ALERTS_TABLE_CONFIG_ID}
       featureIds={[AlertConsumers.SLO, AlertConsumers.OBSERVABILITY]}

diff --git a/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_included_count.tsx b/x-pack/plugins/observability/public/embeddable/slo/alerts/components/slo_included_count.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useFetchSloList } from '../../../../hooks/slo/use_fetch_slo_list';
+import { SloItem } from '../types';
+
+export function SloIncludedCount({ slos }: { slos: SloItem[] }) {
+  const { data: sloList } = useFetchSloList({
+    kqlQuery: slos.map((slo) => `slo.id:${slo.id}`).join(' or '),
+    perPage: 0,
+  });
+
+  return (
+    <FormattedMessage
+      id="xpack.observability.sloAlertsWrapper.sLOsIncludedFlexItemLabel.withInstances"
+      defaultMessage="{numOfSlos, number} {numOfSlos, plural, one {SLO} other {SLOs}}{instances} included"
+      values={{
+        numOfSlos: slos.length,
+        instances: i18n.translate(
+          'xpack.observability.sloAlertsWrapper.sLOsIncludedFlexItemLabel.instancesCount',
+          {
+            defaultMessage: ' ({count, number} {count, plural, one {Instance} other {Instances}})',
+            values: { count: sloList?.total ?? 0 },
+          }
+        ),
+      }}
+    />
+  );
+}
diff --git a/x-pack/plugins/observability/public/embeddable/slo/alerts/slo_alerts_embeddable.tsx b/x-pack/plugins/observability/public/embeddable/slo/alerts/slo_alerts_embeddable.tsx
@@ -106,7 +106,11 @@ export class SLOAlertsEmbeddable extends AbstractEmbeddable<
     const queryClient = new QueryClient();
 
     const I18nContext = this.deps.i18n.Context;
-    const { slos, timeRange = { from: 'now-15m/m', to: 'now' } } = this.getInput();
+    const {
+      slos,
+      timeRange = { from: 'now-15m/m', to: 'now' },
+      showAllGroupByInstances,
+    } = this.getInput();
 
     const deps = this.deps;
     const kibanaVersion = this.kibanaVersion;
@@ -129,6 +133,7 @@ export class SLOAlertsEmbeddable extends AbstractEmbeddable<
                 slos={slos}
                 timeRange={timeRange}
                 reloadSubject={this.reloadSubject}
+                showAllGroupByInstances={showAllGroupByInstances}
               />
             </QueryClientProvider>
           </Router>

diff --git a/x-pack/plugins/observability/public/embeddable/slo/alerts/slo_alerts_wrapper.tsx b/x-pack/plugins/observability/public/embeddable/slo/alerts/slo_alerts_wrapper.tsx
@@ -14,6 +14,7 @@ import { IEmbeddable, EmbeddableOutput } from '@kbn/embeddable-plugin/public';
 import { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
 import { Subject } from 'rxjs';
 import styled from 'styled-components';
+import { SloIncludedCount } from './components/slo_included_count';
 import { SloAlertsSummary } from './components/slo_alerts_summary';
 import { SloAlertsTable } from './components/slo_alerts_table';
 import type { SloItem } from './types';
@@ -29,6 +30,7 @@ interface Props {
   embeddable: IEmbeddable<SloAlertsEmbeddableInput, EmbeddableOutput>;
   onRenderComplete?: () => void;
   reloadSubject: Subject<SloAlertsEmbeddableInput | undefined>;
+  showAllGroupByInstances?: boolean;
 }
 
 export function SloAlertsWrapper({
@@ -38,6 +40,7 @@ export function SloAlertsWrapper({
   timeRange: initialTimeRange,
   onRenderComplete,
   reloadSubject,
+  showAllGroupByInstances: initialShowAllGroupByInstances,
 }: Props) {
   const {
     application: { navigateToUrl },
@@ -46,6 +49,9 @@ export function SloAlertsWrapper({
 
   const [timeRange, setTimeRange] = useState<TimeRange>(initialTimeRange);
   const [slos, setSlos] = useState<SloItem[]>(initialSlos);
+  const [showAllGroupByInstances, setShowAllGroupByInstances] = useState<boolean | undefined>(
+    initialShowAllGroupByInstances
+  );
 
   const [lastRefreshTime, setLastRefreshTime] = useState<number | undefined>(undefined);
 
@@ -59,6 +65,7 @@ export function SloAlertsWrapper({
         if (nTimeRange && (nTimeRange.from !== timeRange.from || nTimeRange.to !== timeRange.to)) {
           setTimeRange(nTimeRange);
         }
+        setShowAllGroupByInstances(input.showAllGroupByInstances);
       }
       setLastRefreshTime(Date.now());
     });
@@ -74,10 +81,7 @@ export function SloAlertsWrapper({
   const [isSummaryLoaded, setIsSummaryLoaded] = useState(false);
   const [isTableLoaded, setIsTableLoaded] = useState(false);
   useEffect(() => {
-    if (!onRenderComplete) {
-      return;
-    }
-    if (isSummaryLoaded && isTableLoaded) {
+    if (isSummaryLoaded && isTableLoaded && onRenderComplete) {
       onRenderComplete();
     }
   }, [isSummaryLoaded, isTableLoaded, onRenderComplete]);
@@ -117,10 +121,17 @@ export function SloAlertsWrapper({
             }}
             data-test-subj="o11ySloAlertsWrapperSlOsIncludedLink"
           >
-            {i18n.translate('xpack.observability.sloAlertsWrapper.sLOsIncludedFlexItemLabel', {
-              defaultMessage: '{numOfSlos} SLOs included',
-              values: { numOfSlos: slos.length },
-            })}
+            {showAllGroupByInstances ? (
+              <SloIncludedCount slos={slos} />
+            ) : (
+              i18n.translate('xpack.observability.sloAlertsWrapper.sLOsIncludedFlexItemLabel', {
+                defaultMessage:
+                  '{numOfSlos, number} {numOfSlos, plural, one {SLO} other {SLOs}} included',
+                values: {
+                  numOfSlos: slos.length,
+                },
+              })
+            )}
           </EuiLink>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -143,6 +154,7 @@ export function SloAlertsWrapper({
             deps={deps}
             timeRange={timeRange}
             onLoaded={() => setIsSummaryLoaded(true)}
+            showAllGroupByInstances={showAllGroupByInstances}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={true}>
@@ -152,6 +164,7 @@ export function SloAlertsWrapper({
             timeRange={timeRange}
             onLoaded={() => setIsTableLoaded(true)}
             lastReloadRequestTime={lastRefreshTime}
+            showAllGroupByInstances={showAllGroupByInstances}
           />
         </EuiFlexItem>
       </EuiFlexGroup>

diff --git a/x-pack/plugins/observability/public/embeddable/slo/alerts/slo_configuration.tsx b/x-pack/plugins/observability/public/embeddable/slo/alerts/slo_configuration.tsx
@@ -16,9 +16,12 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSpacer,
+  EuiSwitch,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
+import { ALL_VALUE } from '@kbn/slo-schema';
 
 import { SloSelector } from './slo_selector';
 import type { EmbeddableSloProps, SloAlertsEmbeddableInput, SloItem } from './types';
@@ -30,9 +33,16 @@ interface SloConfigurationProps {
 }
 
 export function SloConfiguration({ initialInput, onCreate, onCancel }: SloConfigurationProps) {
+  const [showAllGroupByInstances, setShowAllGroupByInstances] = useState(
+    initialInput?.showAllGroupByInstances ?? false
+  );
   const [selectedSlos, setSelectedSlos] = useState(initialInput?.slos ?? []);
+
   const [hasError, setHasError] = useState(false);
-  const onConfirmClick = () => onCreate({ slos: selectedSlos });
+
+  const onConfirmClick = () => onCreate({ slos: selectedSlos, showAllGroupByInstances });
+
+  const hasGroupBy = selectedSlos?.some((slo) => slo.instanceId !== ALL_VALUE);
 
   return (
     <EuiModal
@@ -71,6 +81,21 @@ export function SloConfiguration({ initialInput, onCreate, onCancel }: SloConfig
             />
           </EuiFlexItem>
         </EuiFlexGroup>
+        {hasGroupBy && (
+          <>
+            <EuiSpacer />
+            <EuiSwitch
+              label={i18n.translate(
+                'xpack.observability.sloConfiguration.euiSwitch.showAllGroupByLabel',
+                { defaultMessage: 'Show all related group-by instances' }
+              )}
+              checked={showAllGroupByInstances}
+              onChange={(e) => {
+                setShowAllGroupByInstances(e.target.checked);
+              }}
+            />
+          </>
+        )}
       </EuiModalBody>
       <EuiModalFooter>
         <EuiButtonEmpty onClick={onCancel} data-test-subj="sloCancelButton">

diff --git a/x-pack/plugins/observability/public/embeddable/slo/alerts/types.ts b/x-pack/plugins/observability/public/embeddable/slo/alerts/types.ts
@@ -18,6 +18,7 @@ export interface EmbeddableSloProps {
   slos: SloItem[];
   timeRange?: TimeRange;
   lastReloadRequestTime?: number | undefined;
+  showAllGroupByInstances?: boolean;
 }
 
 export type SloAlertsEmbeddableInput = EmbeddableInput & EmbeddableSloProps;
diff --git a/x-pack/plugins/observability/public/embeddable/slo/overview/slo_configuration.tsx b/x-pack/plugins/observability/public/embeddable/slo/overview/slo_configuration.tsx
@@ -16,8 +16,11 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSwitch,
+  EuiSpacer,
 } from '@elastic/eui';
 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 { EmbeddableSloProps } from './types';
@@ -29,8 +32,14 @@ interface SloConfigurationProps {
 
 export function SloConfiguration({ onCreate, onCancel }: SloConfigurationProps) {
   const [selectedSlo, setSelectedSlo] = useState<EmbeddableSloProps>();
+  const [showAllGroupByInstances, setShowAllGroupByInstances] = useState(false);
+
   const onConfirmClick = () =>
-    onCreate({ sloId: selectedSlo?.sloId, sloInstanceId: selectedSlo?.sloInstanceId });
+    onCreate({
+      showAllGroupByInstances,
+      sloId: selectedSlo?.sloId,
+      sloInstanceId: selectedSlo?.sloInstanceId,
+    });
   const [hasError, setHasError] = useState(false);
 
   return (
@@ -57,6 +66,21 @@ export function SloConfiguration({ onCreate, onCancel }: SloConfigurationProps)
             />
           </EuiFlexItem>
         </EuiFlexGroup>
+        {selectedSlo?.sloInstanceId !== ALL_VALUE && (
+          <>
+            <EuiSpacer />
+            <EuiSwitch
+              label={i18n.translate(
+                'xpack.observability.sloConfiguration.euiSwitch.showAllGroupByLabel',
+                { defaultMessage: 'Show all related group-by instances' }
+              )}
+              checked={showAllGroupByInstances}
+              onChange={(e) => {
+                setShowAllGroupByInstances(e.target.checked);
+              }}
+            />
+          </>
+        )}
       </EuiModalBody>
       <EuiModalFooter>
         <EuiButtonEmpty onClick={onCancel} data-test-subj="sloCancelButton">