From c7d58a32c6beff676b745c8cd3fb4f6365163366 Mon Sep 17 00:00:00 2001 From: Kristina Durivage Date: Tue, 2 Dec 2025 11:57:12 -0600 Subject: [PATCH] add fake pagination --- .../apps/correlations/legacy_storage.go | 6 ++++++ .../correlations/CorrelationsPage.tsx | 11 ++++++---- .../correlations/CorrelationsPageWrapper.tsx | 20 ++++++++++++++----- .../correlations/useCorrelationsK8s.ts | 18 ++++++++++++++--- 4 files changed, 43 insertions(+), 12 deletions(-) diff --git a/pkg/registry/apps/correlations/legacy_storage.go b/pkg/registry/apps/correlations/legacy_storage.go index 51240535c2c..02ab19bd2d2 100644 --- a/pkg/registry/apps/correlations/legacy_storage.go +++ b/pkg/registry/apps/correlations/legacy_storage.go @@ -110,8 +110,14 @@ func (s *legacyStorage) List(ctx context.Context, options *internalversion.ListO list := &correlationsV0.CorrelationList{ Items: make([]correlationsV0.Correlation, 0, len(rsp.Correlations)), } + for i, orig := range rsp.Correlations { if i >= int(limit) { + remaining := rsp.TotalCount - (page * limit) - int64(len(list.Items)) + if remaining > 0 { + list.RemainingItemCount = &remaining + } + list.Continue = encodeContinueToken(page+1, limit) break } diff --git a/public/app/features/correlations/CorrelationsPage.tsx b/public/app/features/correlations/CorrelationsPage.tsx index a8847b5ac78..3d6c9ef66f8 100644 --- a/public/app/features/correlations/CorrelationsPage.tsx +++ b/public/app/features/correlations/CorrelationsPage.tsx @@ -33,6 +33,7 @@ type CorrelationsPageProps = { fetchCorrelations: (params: GetCorrelationsParams) => Promise; correlations?: CorrelationsData; isLoading: boolean; + changePageFn?: (page: number) => void; removeFn?: (params: RemoveCorrelationParams) => Promise<{ message: string; }>; @@ -50,7 +51,7 @@ const loaderWrapper = css({ }); export default function CorrelationsPage(props: CorrelationsPageProps) { - const { fetchCorrelations, correlations, isLoading, error, removeFn } = props; + const { fetchCorrelations, correlations, isLoading, error, removeFn, changePageFn } = props; const navModel = useNavModel('correlations'); const [isAdding, setIsAddingValue] = useState(false); const page = useRef(1); @@ -156,6 +157,8 @@ export default function CorrelationsPage(props: CorrelationsPageProps) { ); + console.log(correlations?.totalCount, correlations?.limit); + return ( )} - {showEmptyListCTA && ( setIsAdding(true)} /> )} - { // This error is not actionable, it'd be nice to have a recovery button error && ( @@ -199,7 +200,6 @@ export default function CorrelationsPage(props: CorrelationsPageProps) { ) } - {isAdding && setIsAdding(false)} onCreated={handleAdded} />} {correlations && corrData.length >= 1 && ( @@ -220,6 +220,9 @@ export default function CorrelationsPage(props: CorrelationsPageProps) { currentPage={page.current} numberOfPages={Math.ceil(correlations?.totalCount / correlations?.limit)} onNavigate={(toPage: number) => { + if (changePageFn) { + changePageFn(toPage); + } fetchCorrelations({ page: (page.current = toPage) }); }} /> diff --git a/public/app/features/correlations/CorrelationsPageWrapper.tsx b/public/app/features/correlations/CorrelationsPageWrapper.tsx index ee9b7e68062..de6b67705a8 100644 --- a/public/app/features/correlations/CorrelationsPageWrapper.tsx +++ b/public/app/features/correlations/CorrelationsPageWrapper.tsx @@ -1,7 +1,8 @@ +import { useMemo, useRef, useState } from 'react'; + import { config, CorrelationsData } from '@grafana/runtime'; import CorrelationsPage from './CorrelationsPage'; -import { GetCorrelationsParams } from './types'; import { useCorrelations } from './useCorrelations'; import { useCorrelationsK8s } from './useCorrelationsK8s'; @@ -26,22 +27,31 @@ function CorrelationsPageAppPlatform() { ? correlations.items.map((item) => toEnrichedCorrelationDataK8s(item)).filter((i) => i !== undefined) : []; }; */ + const [page, setPage] = useState(1); + let totalItems = useRef(0); - const { currentData, isLoading, error } = useCorrelationsK8s({ limit: 10 }); + const limit = 10; + const { currentData, isLoading, error, remainingItems } = useCorrelationsK8s(limit, page); + if (page === 1) { + totalItems.current = remainingItems; + } // we cant do a straight refetch, we have to pass in new pages if necessary - const enhRefetch = (params: GetCorrelationsParams): Promise => { + const enhRefetch = (): Promise => { return new Promise(() => currentData); }; return ( { + setPage(toPage); + }} correlations={{ correlations: currentData, page: 0, - limit: 1000, - totalCount: currentData.length, + limit: limit, + totalCount: totalItems.current, }} isLoading={isLoading} error={error as Error} diff --git a/public/app/features/correlations/useCorrelationsK8s.ts b/public/app/features/correlations/useCorrelationsK8s.ts index c9a35a5c952..a01fa193587 100644 --- a/public/app/features/correlations/useCorrelationsK8s.ts +++ b/public/app/features/correlations/useCorrelationsK8s.ts @@ -1,3 +1,5 @@ +import { useCallback } from 'react'; + import { Correlation as CorrelationK8s, useListCorrelationQuery, @@ -60,16 +62,26 @@ export const toEnrichedCorrelationDataK8s = (item: CorrelationK8s): CorrelationD } }; -export const useCorrelationsK8s = (props: { limit: number }) => { - const { currentData, isLoading, error } = useListCorrelationQuery({ limit: props.limit }); +// we're faking traditional pagination here, realistically folks shouldnt have enough correlations to see a performance impact but if they do we can change the ui +export const useCorrelationsK8s = (limit: number, page: number) => { + let pagedLimit = limit; + if (page > 1) { + pagedLimit = limit * page; + } + + const { currentData, isLoading, error } = useListCorrelationQuery({ limit: pagedLimit }); + const startIdx = limit * (page - 1); + const pagedData = currentData?.items.slice(startIdx, startIdx + limit) ?? []; + const enrichedCorrelations = currentData !== undefined - ? currentData.items.map((item) => toEnrichedCorrelationDataK8s(item)).filter((i) => i !== undefined) + ? pagedData.map((item) => toEnrichedCorrelationDataK8s(item)).filter((i) => i !== undefined) : []; return { currentData: enrichedCorrelations, isLoading, error, + remainingItems: currentData?.metadata.remainingItemCount || 0, }; };