From 2950725308967197bf4a8c1effdedb1768113ecc Mon Sep 17 00:00:00 2001
From: mgiota <panagiota.mitsopoulou@elastic.co>
Date: Wed, 17 Jan 2024 09:13:19 +0100
Subject: [PATCH] pass sort and direction to the group view

---
 .../slos/components/grouped_slos/group_list_view.tsx     | 7 ++++++-
 .../pages/slos/components/grouped_slos/group_view.tsx    | 7 ++++++-
 .../public/pages/slos/components/slo_list.tsx            | 9 ++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/observability/public/pages/slos/components/grouped_slos/group_list_view.tsx b/x-pack/plugins/observability/public/pages/slos/components/grouped_slos/group_list_view.tsx
index c5e16070bf078..301f8358ece76 100644
--- a/x-pack/plugins/observability/public/pages/slos/components/grouped_slos/group_list_view.tsx
+++ b/x-pack/plugins/observability/public/pages/slos/components/grouped_slos/group_list_view.tsx
@@ -9,15 +9,18 @@ import React, { memo, useState } from 'react';
 import { EuiPanel, EuiAccordion, EuiTablePagination } from '@elastic/eui';
 import { useFetchSloList } from '../../../../hooks/slo/use_fetch_slo_list';
 import { SlosView } from '../slos_view';
+import type { SortDirection } from '../slo_list_search_bar';
 
 interface Props {
   isCompact: boolean;
   group: string;
   kqlQuery: string;
   sloView: string;
+  sort: string;
+  direction: SortDirection;
 }
 
-export function GroupListView({ isCompact, group, kqlQuery, sloView }: Props) {
+export function GroupListView({ isCompact, group, kqlQuery, sloView, sort, direction }: Props) {
   const query = kqlQuery ? `"slo.tags": ${group} and ${kqlQuery}` : `"slo.tags": ${group}`;
   const [page, setPage] = useState(0);
   const ITEMS_PER_PAGE = 10;
@@ -29,6 +32,8 @@ export function GroupListView({ isCompact, group, kqlQuery, sloView }: Props) {
     data: sloList,
   } = useFetchSloList({
     kqlQuery: query,
+    sortBy: sort,
+    sortDirection: direction,
     perPage: ITEMS_PER_PAGE,
     page: page + 1,
   });
diff --git a/x-pack/plugins/observability/public/pages/slos/components/grouped_slos/group_view.tsx b/x-pack/plugins/observability/public/pages/slos/components/grouped_slos/group_view.tsx
index 2340c70ecf2f8..771824f021661 100644
--- a/x-pack/plugins/observability/public/pages/slos/components/grouped_slos/group_view.tsx
+++ b/x-pack/plugins/observability/public/pages/slos/components/grouped_slos/group_view.tsx
@@ -8,15 +8,18 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { GroupListView } from './group_list_view';
 import { useFetchSloGroups } from '../../../../hooks/slo/use_fetch_slo_groups';
+import type { SortDirection } from '../slo_list_search_bar';
 
 interface Props {
   isCompact: boolean;
   groupBy: string;
   kqlQuery: string;
   sloView: string;
+  sort: string;
+  direction: SortDirection;
 }
 
-export function GroupView({ isCompact, kqlQuery, sloView }: Props) {
+export function GroupView({ isCompact, kqlQuery, sloView, sort, direction }: Props) {
   const { data, isLoading } = useFetchSloGroups();
 
   if (isLoading) {
@@ -38,6 +41,8 @@ export function GroupView({ isCompact, kqlQuery, sloView }: Props) {
               group={group}
               kqlQuery={kqlQuery}
               isCompact={isCompact}
+              sort={sort}
+              direction={direction}
             />
           );
         })}
diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx
index 17311f9fdc603..033a7a705ce6c 100644
--- a/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx
+++ b/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx
@@ -127,7 +127,14 @@ export function SloList({ autoRefresh }: Props) {
 
       {groupBy !== 'ungrouped' && (
         <>
-          <GroupView sloView={view} groupBy={groupBy} isCompact={isCompact} kqlQuery={query} />
+          <GroupView
+            sloView={view}
+            groupBy={groupBy}
+            isCompact={isCompact}
+            kqlQuery={query}
+            sort={sort}
+            direction={direction}
+          />
         </>
       )}