[SLO] Add group by remote in SLO Overview embeddable (elastic#181006)

Fixes elastic#181005 Fixes elastic#181014 This PR adds the group by remote option in the SLO Overview embeddable. It also fixes a bug with filtering in a grouped view, which would return no results (both in SLO Overview page and SLO Overview embeddable). ## How to test **Scenario**: User wants to have an embeddable in their Dashboard with all SLOs grouped by remote **Given** user has enabled Remote cluster under SLO Settings in SLO Overview page **And** in the Dashboard app they add an SLO Overview Embeddable **And** they select to group by `Remote` without any extra filtering **When** they click Save **Then** They should see all the remote clusters **And** when they click on the remote cluster they should see the respective SLOs in the expanded accordion https://github.com/elastic/kibana/assets/2852703/41162e27-2901-40e1-b704-11c89a6c0fd2 **Scenario**: User wants to have an embeddable in their Dashboard with all SLOs grouped by a **specific** remote **Given** user has enabled Remote cluster under SLO Settings in SLO Overview page **And** in the Dashboard app they add an SLO Overview Embeddable **And** they select to group by `Remote` **And** they select a specific remote cluster from the list of remote clusters **When** they click Save **Then** They should see all the remote clusters **And** when they click on the remote cluster they should see the respective SLOs in the expanded accordion **Before** https://github.com/elastic/kibana/assets/2852703/b900f8d9-f414-4550-ac65-a1d7bbf9e7b4 **After** https://github.com/elastic/kibana/assets/2852703/f887342b-9afe-43e9-9795-6c2ae42f413e **Scenario**: User wants to apply extra filtering to the Grouped Overview page **Given** user has grouped by Tags in the SLO Overview page **And** they want to see only the healthy SLOs **When** they type `slo.tags: "production"` **Then** They should see only the production group **And** when they click on the production group they should see the respective SLOs in the expanded accordion https://github.com/elastic/kibana/assets/2852703/bf010cad-42da-476d-9f63-b7a1d6f4295f
jennypavlova · Apr 17, 2024 · 3922bcc · 3922bcc
1 parent 1d88277
commit 3922bcc
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 22 deletions.
diff --git a/...bservability_solution/slo/public/embeddable/slo/overview/group_view/slo_group_filters.tsx b/...bservability_solution/slo/public/embeddable/slo/overview/group_view/slo_group_filters.tsx
@@ -13,6 +13,8 @@ import { EuiFormRow, EuiComboBox, EuiSelect, EuiComboBoxOptionOption, EuiText }
 import { i18n } from '@kbn/i18n';
 
 import { useFetchSloGroups } from '../../../../hooks/use_fetch_slo_groups';
+import { useGetSettings } from '../../../../pages/slo_settings/use_get_settings';
+
 import { SLI_OPTIONS } from '../../../../pages/slo_edit/constants';
 import { useKibana } from '../../../../utils/kibana_react';
 import { useCreateDataView } from '../../../../hooks/use_create_data_view';
@@ -24,27 +26,6 @@ interface Option {
   text: string;
 }
 
-export const groupByOptions: Option[] = [
-  {
-    text: i18n.translate('xpack.slo.sloGroupConfiguration.groupBy.tags', {
-      defaultMessage: 'Tags',
-    }),
-    value: 'slo.tags',
-  },
-  {
-    text: i18n.translate('xpack.slo.sloGroupConfiguration.groupBy.status', {
-      defaultMessage: 'Status',
-    }),
-    value: 'status',
-  },
-  {
-    text: i18n.translate('xpack.slo.sloGroupConfiguration.groupBy.sliType', {
-      defaultMessage: 'SLI type',
-    }),
-    value: 'slo.indicator.type',
-  },
-];
-
 interface Props {
   onSelected: (prop: string, value: string | Array<string | undefined> | Filter[]) => void;
   selectedFilters: GroupFilters;
@@ -70,6 +51,41 @@ export function SloGroupFilters({ selectedFilters, onSelected }: Props) {
       ui: { SearchBar },
     },
   } = useKibana().services;
+  const { data: settings } = useGetSettings();
+
+  const hasRemoteEnabled =
+    settings && (settings.useAllRemoteClusters || settings.selectedRemoteClusters.length > 0);
+
+  const groupByOptions: Option[] = [
+    {
+      text: i18n.translate('xpack.slo.sloGroupConfiguration.groupBy.tags', {
+        defaultMessage: 'Tags',
+      }),
+      value: 'slo.tags',
+    },
+    {
+      text: i18n.translate('xpack.slo.sloGroupConfiguration.groupBy.status', {
+        defaultMessage: 'Status',
+      }),
+      value: 'status',
+    },
+    {
+      text: i18n.translate('xpack.slo.sloGroupConfiguration.groupBy.sliType', {
+        defaultMessage: 'SLI type',
+      }),
+      value: 'slo.indicator.type',
+    },
+    ...(hasRemoteEnabled
+      ? [
+          {
+            text: i18n.translate('xpack.slo.sloGroupConfiguration.groupBy.remoteCluster', {
+              defaultMessage: 'Remote cluster',
+            }),
+            value: '_index',
+          },
+        ]
+      : []),
+  ];
   const { dataView } = useCreateDataView({
     indexPatternString: SLO_SUMMARY_DESTINATION_INDEX_NAME,
   });
@@ -122,6 +138,12 @@ export function SloGroupFilters({ selectedFilters, onSelected }: Props) {
           defaultMessage: 'SLI type',
         })
       );
+    } else if (selectedGroupBy === '_index') {
+      setSelectedGroupByLabel(
+        i18n.translate('xpack.slo.sloGroupConfiguration.remoteClusterLabel', {
+          defaultMessage: 'Remote cluster',
+        })
+      );
     }
   }, [isLoading, data, selectedGroupBy]);
 

diff --git a/.../observability_solution/slo/public/pages/slos/components/grouped_slos/group_list_view.tsx b/.../observability_solution/slo/public/pages/slos/components/grouped_slos/group_list_view.tsx
@@ -55,7 +55,7 @@ export function GroupListView({
   filters,
 }: Props) {
   const groupQuery = `"${groupBy}": "${group}"`;
-  const query = kqlQuery ? `"${groupQuery}) and ${kqlQuery}` : groupQuery;
+  const query = kqlQuery ? `${groupQuery} and ${kqlQuery}` : groupQuery;
   let groupName = group.toLowerCase();
   if (groupBy === 'slo.indicator.type') {
     groupName = SLI_OPTIONS.find((option) => option.value === group)?.text ?? group;