UI: Switch TaskInstances table to cursor-based pagination

Replace offset-based pagination with cursor-based pagination
for the TaskInstances listing page, leveraging the new cursor
API endpoint. Pagination now shows only previous/next buttons
without page numbers or total count, which eliminates the
expensive COUNT(*) query for large datasets.

Add generic cursor pagination support to DataTable via an
optional cursorPagination prop so other tables can adopt it.

Author: pierrejeambrun

airflow-core/src/airflow/ui/src/components/DataTable/DataTable.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Heading, HStack, Text } from "@chakra-ui/react";
+import { Box, Heading, HStack, IconButton, Text } from "@chakra-ui/react";
 import {
   getCoreRowModel,
   getExpandedRowModel,
@@ -31,6 +31,7 @@ import {
 } from "@tanstack/react-table";
 import React, { type ReactNode, useRef, useCallback } from "react";
 import { useTranslation } from "react-i18next";
+import { HiChevronLeft, HiChevronRight } from "react-icons/hi2";
 import { useLocalStorage } from "usehooks-ts";
 
 import { CardList } from "src/components/DataTable/CardList";
@@ -40,10 +41,18 @@ import { createSkeletonMock } from "src/components/DataTable/skeleton";
 import type { CardDef, MetaColumn, TableState } from "src/components/DataTable/types";
 import { ProgressBar, Pagination, Toaster } from "src/components/ui";
 
+export type CursorPaginationProps = {
+  readonly hasNext: boolean;
+  readonly hasPrevious: boolean;
+  readonly onNext: () => void;
+  readonly onPrevious: () => void;
+};
+
 type DataTableProps<TData> = {
   readonly allowFiltering?: boolean;
   readonly cardDef?: CardDef<TData>;
   readonly columns: Array<MetaColumn<TData>>;
+  readonly cursorPagination?: CursorPaginationProps;
   readonly data: Array<TData>;
   readonly displayMode?: "card" | "table";
   readonly errorMessage?: ReactNode | string;
@@ -68,6 +77,7 @@ export const DataTable = <TData,>({
   allowFiltering,
   cardDef,
   columns,
+  cursorPagination,
   data,
   displayMode = "table",
   errorMessage,
@@ -148,7 +158,10 @@ export const DataTable = <TData,>({
 
   const display = displayMode === "card" && Boolean(cardDef) ? "card" : "table";
   const hasRows = rows.length > 0;
-  const hasPagination = initialState?.pagination !== undefined && (pageIndex !== 0 || rows.length !== total);
+  const hasOffsetPagination =
+    !cursorPagination && initialState?.pagination !== undefined && (pageIndex !== 0 || rows.length !== total);
+  const hasCursorPagination =
+    cursorPagination !== undefined && (cursorPagination.hasNext || cursorPagination.hasPrevious);
 
   // Default to show columns filter only if there are actually many columns displayed
   const showColumnsFilter = allowFiltering ?? columns.length > 5;
@@ -158,7 +171,7 @@ export const DataTable = <TData,>({
     [modelName, translate],
   );
   const showRowCount = Boolean(
-    showRowCountHeading && !Boolean(isLoading) && !Boolean(isFetching) && total > 0,
+    showRowCountHeading && !cursorPagination && !Boolean(isLoading) && !Boolean(isFetching) && total > 0,
   );
   const noRowsModelName = translateModelName(0);
 
@@ -190,7 +203,7 @@ export const DataTable = <TData,>({
           </Text>
         )}
       </Box>
-      {hasPagination ? (
+      {hasOffsetPagination ? (
         <Pagination.Root
           count={rowCount}
           my={2}
@@ -206,6 +219,30 @@ export const DataTable = <TData,>({
           </HStack>
         </Pagination.Root>
       ) : undefined}
+      {hasCursorPagination ? (
+        <HStack justifyContent="center" my={2}>
+          <IconButton
+            aria-label="Previous page"
+            data-testid="cursor-prev"
+            disabled={!cursorPagination.hasPrevious}
+            onClick={cursorPagination.onPrevious}
+            size="sm"
+            variant="outline"
+          >
+            <HiChevronLeft />
+          </IconButton>
+          <IconButton
+            aria-label="Next page"
+            data-testid="cursor-next"
+            disabled={!cursorPagination.hasNext}
+            onClick={cursorPagination.onNext}
+            size="sm"
+            variant="outline"
+          >
+            <HiChevronRight />
+          </IconButton>
+        </HStack>
+      ) : undefined}
     </Box>
   );
 };

airflow-core/src/airflow/ui/src/components/DataTable/index.ts

@@ -18,3 +18,4 @@
  */
 
 export { DataTable } from "./DataTable";
+export type { CursorPaginationProps } from "./DataTable";

airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx

@@ -21,6 +21,7 @@
 import { Flex, Link } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
 import type { TFunction } from "i18next";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom";
 
@@ -29,6 +30,7 @@ import type { TaskInstanceResponse } from "openapi/requests/types.gen";
 import { ClearTaskInstanceButton } from "src/components/Clear";
 import { DagVersion } from "src/components/DagVersion";
 import { DataTable } from "src/components/DataTable";
+import type { CursorPaginationProps } from "src/components/DataTable";
 import { useRowSelection, type GetColumnsParams } from "src/components/DataTable/useRowSelection";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
@@ -274,6 +276,16 @@ export const TaskInstances = () => {
   const [sort] = sorting;
   const orderBy = sort ? [`${sort.desc ? "-" : ""}${sort.id}`] : ["-id"];
 
+  const [cursor, setCursor] = useState<string>("");
+
+  // Reset cursor to the first page when filters or sort order change.
+  const searchParamsKey = searchParams.toString();
+  const sortKey = sort ? `${sort.desc ? "-" : ""}${sort.id}` : "";
+
+  useEffect(() => {
+    setCursor("");
+  }, [searchParamsKey, sortKey]);
+
   const filteredState = searchParams.getAll(STATE_PARAM);
   const filteredDagVersion = searchParams.get(DAG_VERSION_PARAM);
   const durationGte = searchParams.get(DURATION_GTE_PARAM);
@@ -296,6 +308,7 @@ export const TaskInstances = () => {
 
   const { data, error, isLoading } = useTaskInstanceServiceGetTaskInstances(
     {
+      cursor,
       dagId: dagId ?? "~",
       dagIdPattern: filteredDagIdPattern ?? undefined,
       dagRunId: runId ?? "~",
@@ -306,7 +319,6 @@ export const TaskInstances = () => {
       logicalDateGte: logicalDateGte ?? undefined,
       logicalDateLte: logicalDateLte ?? undefined,
       mapIndex: mapIndexFilter !== null && mapIndexFilter !== "" ? [Number(mapIndexFilter)] : undefined,
-      offset: pagination.pageIndex * pagination.pageSize,
       operatorNamePattern: operatorNamePattern ?? undefined,
       orderBy,
       poolNamePattern: poolNamePattern ?? undefined,
@@ -329,6 +341,28 @@ export const TaskInstances = () => {
     },
   );
 
+  const nextCursor = data && "next_cursor" in data ? data.next_cursor : undefined;
+  const previousCursor = data && "previous_cursor" in data ? data.previous_cursor : undefined;
+
+  const handleNextPage = useCallback(() => {
+    if (nextCursor !== undefined && nextCursor !== null) {
+      setCursor(nextCursor);
+    }
+  }, [nextCursor]);
+
+  const handlePreviousPage = useCallback(() => {
+    if (previousCursor !== undefined && previousCursor !== null) {
+      setCursor(previousCursor);
+    }
+  }, [previousCursor]);
+
+  const cursorPagination: CursorPaginationProps = {
+    hasNext: nextCursor !== undefined && nextCursor !== null,
+    hasPrevious: previousCursor !== undefined && previousCursor !== null,
+    onNext: handleNextPage,
+    onPrevious: handlePreviousPage,
+  };
+
   const { allRowsSelected, clearSelections, handleRowSelect, handleSelectAll, selectedRows } =
     useRowSelection({
       data: data?.task_instances,
@@ -354,13 +388,13 @@ export const TaskInstances = () => {
       <TaskInstancesFilter />
       <DataTable
         columns={columns}
+        cursorPagination={cursorPagination}
         data={data?.task_instances ?? []}
         errorMessage={<ErrorAlert error={error} />}
         initialState={tableURLState}
         isLoading={isLoading}
         modelName="common:taskInstance"
         onStateChange={setTableURLState}
-        total={data && "total_entries" in data ? data.total_entries : undefined}
       />
       <ActionBar.Root closeOnInteractOutside={false} open={Boolean(selectedRows.size)}>
         <ActionBar.Content>