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} + /> </> )}