pass sort and direction to the group view

elastic · Jan 17, 2024 · 2950725 · 2950725
1 parent be65bfe
commit 2950725
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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}
+          />
         </>
       )}