Add pagination to Asset events list, add asset events to dag run and …

airflow/ui/src/components/Assets/AssetEvent.tsx

@@ -42,7 +42,7 @@ export const AssetEvent = ({
   }
 
   return (
-    <Box fontSize={13} mt={1} w="full">
+    <Box borderBottomWidth={1} fontSize={13} mt={1} p={2}>
       <Text fontWeight="bold">
         <Time datetime={event.timestamp} />
       </Text>

airflow/ui/src/components/Assets/AssetEvents.tsx

@@ -16,33 +16,46 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Heading, Flex, HStack, VStack, StackSeparator, Skeleton } from "@chakra-ui/react";
+import { Box, Heading, Flex, HStack, Skeleton } from "@chakra-ui/react";
 import { createListCollection } from "@chakra-ui/react/collection";
 import { FiDatabase } from "react-icons/fi";
 
-import { useAssetServiceGetAssetEvents } from "openapi/queries";
+import type { AssetEventCollectionResponse, AssetEventResponse } from "openapi/requests/types.gen";
 import { StateBadge } from "src/components/StateBadge";
 import { Select } from "src/components/ui";
+import { pluralize } from "src/utils";
 
+import { DataTable } from "../DataTable";
+import type { CardDef, TableState } from "../DataTable/types";
 import { AssetEvent } from "./AssetEvent";
 
+const cardDef = (assetId?: number): CardDef<AssetEventResponse> => ({
+  card: ({ row }) => <AssetEvent assetId={assetId} event={row} />,
+  meta: {
+    customSkeleton: <Skeleton height="120px" width="100%" />,
+  },
+});
+
 type AssetEventProps = {
   readonly assetId?: number;
+  readonly data?: AssetEventCollectionResponse;
   readonly endDate?: string;
-  readonly orderBy?: string;
-  readonly setOrderBy?: React.Dispatch<React.SetStateAction<string>>;
-  readonly startDate?: string;
+  readonly isLoading?: boolean;
+  readonly setOrderBy?: (order: string) => void;
+  readonly setTableUrlState?: (state: TableState) => void;
+  readonly tableUrlState?: TableState;
+  readonly title?: string;
 };
 
-export const AssetEvents = ({ assetId, endDate, orderBy, setOrderBy, startDate }: AssetEventProps) => {
-  const { data, isLoading } = useAssetServiceGetAssetEvents({
-    assetId,
-    limit: 6,
-    orderBy,
-    timestampGte: startDate,
-    timestampLte: endDate,
-  });
-
+export const AssetEvents = ({
+  assetId,
+  data,
+  isLoading,
+  setOrderBy,
+  setTableUrlState,
+  tableUrlState,
+  title,
+}: AssetEventProps) => {
   const assetSortOptions = createListCollection({
     items: [
       { label: "Newest first", value: "-timestamp" },
@@ -51,15 +64,15 @@ export const AssetEvents = ({ assetId, endDate, orderBy, setOrderBy, startDate }
   });
 
   return (
-    <Box borderRadius={5} borderWidth={1} ml={2} pb={2}>
+    <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2}>
       <Flex justify="space-between" mr={1} mt={0} pl={3} pt={1}>
         <HStack>
           <StateBadge colorPalette="blue" fontSize="md" variant="solid">
             <FiDatabase />
             {data?.total_entries ?? " "}
           </StateBadge>
           <Heading marginEnd="auto" size="md">
-            Asset Events
+            {pluralize(title ?? "Asset Event", data?.total_entries ?? 0, undefined, true)}
           </Heading>
         </HStack>
         {setOrderBy === undefined ? undefined : (
@@ -85,17 +98,18 @@ export const AssetEvents = ({ assetId, endDate, orderBy, setOrderBy, startDate }
           </Select.Root>
         )}
       </Flex>
-      {isLoading ? (
-        <VStack px={3} separator={<StackSeparator />}>
-          {Array.from({ length: 5 }, (_, index) => index).map((index) => (
-            <Skeleton height={100} key={index} width="full" />
-          ))}
-        </VStack>
-      ) : (
-        <VStack px={3} separator={<StackSeparator />}>
-          {data?.asset_events.map((event) => <AssetEvent assetId={assetId} event={event} key={event.id} />)}
-        </VStack>
-      )}
+      <DataTable
+        cardDef={cardDef(assetId)}
+        columns={[]}
+        data={data?.asset_events ?? []}
+        displayMode="card"
+        initialState={tableUrlState}
+        isLoading={isLoading}
+        modelName="Asset Event"
+        onStateChange={setTableUrlState}
+        skeletonCount={5}
+        total={data?.total_entries}
+      />
     </Box>
   );
 };

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

@@ -117,8 +117,9 @@ export const DataTable = <TData,>({
   const display = displayMode === "card" && Boolean(cardDef) ? "card" : "table";
   const hasRows = rows.length > 0;
   const hasPagination =
-    table.getState().pagination.pageIndex !== 0 ||
-    (table.getState().pagination.pageIndex === 0 && rows.length !== total);
+    initialState?.pagination !== undefined &&
+    (table.getState().pagination.pageIndex !== 0 ||
+      (table.getState().pagination.pageIndex === 0 && rows.length !== total));
 
   return (
     <>

airflow/ui/src/pages/Asset/Asset.tsx

@@ -18,12 +18,14 @@
  */
 import { Box, HStack } from "@chakra-ui/react";
 import { ReactFlowProvider } from "@xyflow/react";
+import { useCallback } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { useParams } from "react-router-dom";
 
-import { useAssetServiceGetAsset } from "openapi/queries";
+import { useAssetServiceGetAsset, useAssetServiceGetAssetEvents } from "openapi/queries";
 import { AssetEvents } from "src/components/Assets/AssetEvents";
 import { BreadcrumbStats } from "src/components/BreadcrumbStats";
+import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ProgressBar, Toaster } from "src/components/ui";
 
 import { AssetGraph } from "./AssetGraph";
@@ -33,6 +35,11 @@ import { Header } from "./Header";
 export const Asset = () => {
   const { assetId } = useParams();
 
+  const { setTableURLState, tableURLState } = useTableURLState();
+  const { pagination, sorting } = tableURLState;
+  const [sort] = sorting;
+  const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : "-timestamp";
+
   const { data: asset, isLoading } = useAssetServiceGetAsset(
     { assetId: assetId === undefined ? 0 : parseInt(assetId, 10) },
     undefined,
@@ -49,6 +56,32 @@ export const Asset = () => {
     },
   ];
 
+  const { data, isLoading: isLoadingEvents } = useAssetServiceGetAssetEvents(
+    {
+      assetId: asset?.id,
+      limit: pagination.pageSize,
+      offset: pagination.pageIndex * pagination.pageSize,
+      orderBy,
+    },
+    undefined,
+    { enabled: Boolean(asset?.id) },
+  );
+
+  const setOrderBy = useCallback(
+    (value: string) => {
+      setTableURLState({
+        pagination,
+        sorting: [
+          {
+            desc: value.startsWith("-"),
+            id: value.replace("-", ""),
+          },
+        ],
+      });
+    },
+    [pagination, setTableURLState],
+  );
+
   return (
     <ReactFlowProvider>
       <Toaster />
@@ -69,8 +102,15 @@ export const Asset = () => {
           </PanelResizeHandle>
           <Panel defaultSize={30} minSize={20}>
             <Header asset={asset} />
-            <Box h="100%" overflow="auto" px={2}>
-              <AssetEvents assetId={asset?.id} />
+            <Box h="100%" overflow="auto" pt={2}>
+              <AssetEvents
+                assetId={asset?.id}
+                data={data}
+                isLoading={isLoadingEvents}
+                setOrderBy={setOrderBy}
+                setTableUrlState={setTableURLState}
+                tableUrlState={tableURLState}
+              />
             </Box>
           </Panel>
         </PanelGroup>

airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx

@@ -21,7 +21,7 @@ import dayjs from "dayjs";
 import { useState } from "react";
 import { PiBooks } from "react-icons/pi";
 
-import { useDashboardServiceHistoricalMetrics } from "openapi/queries";
+import { useAssetServiceGetAssetEvents, useDashboardServiceHistoricalMetrics } from "openapi/queries";
 import { AssetEvents } from "src/components/Assets/AssetEvents";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import TimeRangeSelector from "src/components/TimeRangeSelector";
@@ -51,6 +51,13 @@ export const HistoricalMetrics = () => {
     ? Object.values(data.task_instance_states).reduce((partialSum, value) => partialSum + value, 0)
     : 0;
 
+  const { data: assetEventsData, isLoading: isLoadingAssetEvents } = useAssetServiceGetAssetEvents({
+    limit: 6,
+    orderBy: assetSortBy,
+    timestampGte: startDate,
+    timestampLte: endDate,
+  });
+
   return (
     <Box width="100%">
       <Flex color="fg.muted" my={2}>
@@ -90,10 +97,10 @@ export const HistoricalMetrics = () => {
           </GridItem>
           <GridItem colSpan={{ base: 3 }}>
             <AssetEvents
+              data={assetEventsData}
               endDate={endDate}
-              orderBy={assetSortBy}
+              isLoading={isLoadingAssetEvents}
               setOrderBy={setAssetSortBy}
-              startDate={startDate}
             />
           </GridItem>
         </SimpleGrid>

airflow/ui/src/pages/Run/Details.tsx

@@ -19,25 +19,40 @@
 import { Box, Flex, HStack, Table, Text } from "@chakra-ui/react";
 import { useParams } from "react-router-dom";
 
-import { useDagRunServiceGetDagRun } from "openapi/queries";
+import { useDagRunServiceGetDagRun, useDagRunServiceGetUpstreamAssetEvents } from "openapi/queries";
+import { AssetEvents } from "src/components/Assets/AssetEvents";
 import RenderedJsonField from "src/components/RenderedJsonField";
 import { RunTypeIcon } from "src/components/RunTypeIcon";
 import { StateBadge } from "src/components/StateBadge";
 import Time from "src/components/Time";
 import { ClipboardRoot, ClipboardIconButton } from "src/components/ui";
-import { getDuration } from "src/utils";
+import { getDuration, isStatePending, useAutoRefresh } from "src/utils";
 
 export const Details = () => {
   const { dagId = "", runId = "" } = useParams();
 
-  const { data: dagRun } = useDagRunServiceGetDagRun({
-    dagId,
-    dagRunId: runId,
+  const refetchInterval = useAutoRefresh({ dagId });
+
+  const { data: dagRun } = useDagRunServiceGetDagRun(
+    {
+      dagId,
+      dagRunId: runId,
+    },
+    undefined,
+    { refetchInterval: (query) => (isStatePending(query.state.data?.state) ? refetchInterval : false) },
+  );
+
+  const { data, isLoading } = useDagRunServiceGetUpstreamAssetEvents({ dagId, dagRunId: runId }, undefined, {
+    enabled: dagRun?.run_type === "asset_triggered",
+    refetchInterval: () => (isStatePending(dagRun?.state) ? refetchInterval : false),
   });
 
   // TODO : Render DagRun configuration object
   return (
     <Box p={2}>
+      {data === undefined || dagRun?.run_type !== "asset_triggered" ? undefined : (
+        <AssetEvents data={data} isLoading={isLoading} title="Source Asset Event" />
+      )}
       {dagRun === undefined ? (
         <div />
       ) : (

airflow/ui/src/pages/TaskInstance/Details.tsx

@@ -20,9 +20,11 @@ import { Box, Flex, HStack, Table, Heading } from "@chakra-ui/react";
 import { useParams, useSearchParams } from "react-router-dom";
 
 import {
+  useAssetServiceGetAssetEvents,
   useTaskInstanceServiceGetMappedTaskInstance,
   useTaskInstanceServiceGetTaskInstanceTryDetails,
 } from "openapi/queries";
+import { AssetEvents } from "src/components/Assets/AssetEvents";
 import { StateBadge } from "src/components/StateBadge";
 import { TaskTrySelect } from "src/components/TaskTrySelect";
 import Time from "src/components/Time";
@@ -72,8 +74,22 @@ export const Details = () => {
     },
   );
 
+  const { data: assetEventsData, isLoading: isLoadingAssetEvents } = useAssetServiceGetAssetEvents(
+    {
+      sourceDagId: dagId,
+      sourceMapIndex: parseInt(mapIndex, 10),
+      sourceRunId: runId,
+      sourceTaskId: taskId,
+    },
+    undefined,
+    {
+      refetchInterval: () => (isStatePending(taskInstance?.state) ? refetchInterval : false),
+    },
+  );
+
   return (
     <Box p={2}>
+      <AssetEvents data={assetEventsData} isLoading={isLoadingAssetEvents} title="Created Asset Event" />
       {taskInstance === undefined || tryNumber === undefined || taskInstance.try_number <= 1 ? (
         <div />
       ) : (