Don’t crash if bad data, fix pagination to be usable with cursor only

packages/grafana-ui/src/components/Pagination/Pagination.tsx

@@ -19,6 +19,8 @@ export interface Props {
   /** Small version only shows the current page and the navigation buttons. */
   showSmallVersion?: boolean;
   className?: string;
+  /** If we are using cursor based pagination, disable next page button when we have no cursor */
+  hasNextPage?: boolean;
 }
 
 /**
@@ -33,6 +35,7 @@ export const Pagination = ({
   hideWhenSinglePage,
   showSmallVersion,
   className,
+  hasNextPage,
 }: Props) => {
   const styles = useStyles2(getStyles);
   const pageLengthToCondense = showSmallVersion ? 1 : 8;
@@ -122,13 +125,14 @@ export const Pagination = ({
           </Button>
         </li>
         {pageButtons}
+        {pageButtons.length === 0 && <li className={styles.item}>{currentPage}</li>}
         <li className={styles.item}>
           <Button
             aria-label={nextPageLabel}
             size="sm"
             variant="secondary"
             onClick={() => onNavigate(currentPage + 1)}
-            disabled={currentPage === numberOfPages}
+            disabled={!hasNextPage || currentPage === numberOfPages}
           >
             <Icon name="angle-right" />
           </Button>

public/app/features/correlations/CorrelationsPage.tsx

@@ -42,6 +42,7 @@ type CorrelationsPageProps = {
     | Status
   >;
   error?: Error;
+  hasNextPage?: boolean;
 };
 
 const collator = new Intl.Collator();
@@ -57,7 +58,7 @@ const loaderWrapper = css({
 });
 
 export default function CorrelationsPage(props: CorrelationsPageProps) {
-  const { fetchCorrelations, correlations, isLoading, error, removeFn, changePageFn } = props;
+  const { fetchCorrelations, correlations, isLoading, error, removeFn, changePageFn, hasNextPage } = props;
   const navModel = useNavModel('correlations');
   const [isAdding, setIsAddingValue] = useState(false);
   const page = useRef(1);
@@ -157,6 +158,7 @@ export default function CorrelationsPage(props: CorrelationsPageProps) {
     [RowActions, canWriteCorrelations]
   );
 
+  console.log(correlations?.totalCount, correlations?.limit);
   const corrData = correlations?.correlations ?? [];
   const showEmptyListCTA = corrData.length === 0 && !isAdding && !error;
   const addButton = canWriteCorrelations && corrData.length !== 0 && !isAdding && (
@@ -231,6 +233,7 @@ export default function CorrelationsPage(props: CorrelationsPageProps) {
                   }
                   fetchCorrelations({ page: (page.current = toPage) });
                 }}
+                hasNextPage={hasNextPage}
               />
             </>
           )}

public/app/features/correlations/CorrelationsPageWrapper.tsx

@@ -24,8 +24,8 @@ export function CorrelationsPageLegacy() {
 function CorrelationsPageAppPlatform() {
   const [page, setPage] = useState(1);
   let totalItems = useRef(0);
-  const limit = 100;
-  const { currentData, isLoading, error, remainingItems } = useCorrelationsK8s(limit, page);
+  const limit = 10;
+  const { currentData, isLoading, error, remainingItems, doesContinue } = useCorrelationsK8s(limit, page);
   const [deleteCorrelation] = useDeleteCorrelationMutation();
   if (page === 1) {
     totalItems.current = remainingItems;
@@ -54,6 +54,7 @@ function CorrelationsPageAppPlatform() {
         const deleteData = deleteCorrelation({ name: params.uid });
         return deleteData.unwrap();
       }}
+      hasNextPage={doesContinue}
     />
   );
 }

public/app/features/correlations/useCorrelationsK8s.ts

@@ -23,7 +23,7 @@ export const toEnrichedCorrelationDataK8s = (item: CorrelationK8s): CorrelationD
         config: {
           field: item.spec.config.field,
           target: {
-            url: item.spec.config.target.url || '',
+            url: item.spec.config?.target?.url || '',
           },
           transformations: [], // todo fix
         },
@@ -73,5 +73,6 @@ export const useCorrelationsK8s = (limit = 100, page: number) => {
     isLoading,
     error: fmtedError,
     remainingItems: currentData?.metadata.remainingItemCount || 0,
+    doesContinue: currentData?.metadata.continue !== undefined,
   };
 };