add fake pagination

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
 		}

public/app/features/correlations/CorrelationsPage.tsx

@@ -33,6 +33,7 @@ type CorrelationsPageProps = {
   fetchCorrelations: (params: GetCorrelationsParams) => Promise<CorrelationsData>;
   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) {
     </Button>
   );
 
+  console.log(correlations?.totalCount, correlations?.limit);
+
   return (
     <Page
       navModel={navModel}
@@ -178,11 +181,9 @@ export default function CorrelationsPage(props: CorrelationsPageProps) {
               <LoadingPlaceholder text={t('correlations.list.loading', 'loading...')} />
             </div>
           )}
-
           {showEmptyListCTA && (
             <EmptyCorrelationsCTA canWriteCorrelations={canWriteCorrelations} onClick={() => 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) {
               </Alert>
             )
           }
-
           {isAdding && <AddCorrelationForm onClose={() => 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) });
                 }}
               />

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<CorrelationsData> => {
+  const enhRefetch = (): Promise<CorrelationsData> => {
     return new Promise(() => currentData);
   };
 
   return (
     <CorrelationsPage
       fetchCorrelations={enhRefetch}
+      changePageFn={(toPage) => {
+        setPage(toPage);
+      }}
       correlations={{
         correlations: currentData,
         page: 0,
-        limit: 1000,
-        totalCount: currentData.length,
+        limit: limit,
+        totalCount: totalItems.current,
       }}
       isLoading={isLoading}
       error={error as Error}

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,
   };
 };