Add next run to asset expression

airflow/ui/src/components/AssetExpression/AndGateNode.tsx

@@ -22,7 +22,7 @@ import { TbLogicAnd } from "react-icons/tb";
 
 export const AndGateNode = ({ children }: PropsWithChildren) => (
   <Box
-    bg="bg.emphasized"
+    bg="bg.subtle"
     border="2px dashed"
     borderRadius="lg"
     display="inline-block"

airflow/ui/src/components/AssetExpression/AssetExpression.tsx

@@ -20,18 +20,16 @@ import { Box, Badge } from "@chakra-ui/react";
 import { Fragment } from "react";
 import { TbLogicOr } from "react-icons/tb";
 
-import type { QueuedEventResponse } from "openapi/requests/types.gen";
-
 import { AndGateNode } from "./AndGateNode";
 import { AssetNode } from "./AssetNode";
 import { OrGateNode } from "./OrGateNode";
-import type { ExpressionType } from "./types";
+import type { ExpressionType, NextRunEvent } from "./types";
 
 export const AssetExpression = ({
   events,
   expression,
 }: {
-  readonly events?: Array<QueuedEventResponse>;
+  readonly events?: Array<NextRunEvent>;
   readonly expression: ExpressionType | null;
 }) => {
   if (expression === null) {
@@ -45,8 +43,11 @@ export const AssetExpression = ({
           {expression.any.map((item, index) => (
             // eslint-disable-next-line react/no-array-index-key
             <Fragment key={`any-${index}`}>
-              {"asset" in item ? (
-                <AssetNode asset={item.asset} />
+              {"asset" in item || "alias" in item ? (
+                <AssetNode
+                  asset={item}
+                  event={events?.find((ev) => "asset" in item && ev.id === item.asset.id)}
+                />
               ) : (
                 <AssetExpression events={events} expression={item} />
               )}
@@ -65,8 +66,11 @@ export const AssetExpression = ({
           {expression.all.map((item, index) => (
             // eslint-disable-next-line react/no-array-index-key
             <Box display="inline-block" key={`all-${index}`}>
-              {"asset" in item ? (
-                <AssetNode asset={item.asset} />
+              {"asset" in item || "alias" in item ? (
+                <AssetNode
+                  asset={item}
+                  event={events?.find((ev) => "asset" in item && ev.id === item.asset.id)}
+                />
               ) : (
                 <AssetExpression events={events} expression={item} />
               )}

airflow/ui/src/components/AssetExpression/AssetNode.tsx

@@ -16,44 +16,46 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Text, VStack, HStack } from "@chakra-ui/react";
+import { Box, Text, HStack, Link } from "@chakra-ui/react";
 import { FiDatabase } from "react-icons/fi";
-
-import type { QueuedEventResponse } from "openapi/requests/types.gen";
+import { PiRectangleDashed } from "react-icons/pi";
+import { Link as RouterLink } from "react-router-dom";
 
 import Time from "../Time";
-import type { AssetSummary } from "./types";
+import type { AssetSummary, NextRunEvent } from "./types";
 
 export const AssetNode = ({
   asset,
   event,
 }: {
-  readonly asset: AssetSummary["asset"];
-  readonly event?: QueuedEventResponse;
+  readonly asset: AssetSummary;
+  readonly event?: NextRunEvent;
 }) => (
   <Box
     bg="bg.muted"
     border="1px solid"
+    borderColor={Boolean(event?.lastUpdate) ? "green" : undefined}
     borderRadius="md"
-    borderWidth={Boolean(event?.created_at) ? 3 : 1}
+    borderWidth={Boolean(event?.lastUpdate) ? 3 : 1}
     display="inline-block"
     minW="fit-content"
-    p={3}
+    p={2}
     position="relative"
   >
-    <VStack align="start" gap={2}>
-      <HStack gap={2}>
-        <FiDatabase />
-        {/* TODO add events back in when asset_expression contains asset_id */}
-        {/* {event?.id === undefined ? ( */}
-        <Text fontSize="sm">{asset.uri}</Text>
-        {/* ) : (
-          <Link asChild color="fg.info" display="block" py={2}>
-            <RouterLink to={`/assets/${event.id}`}>{asset.uri}</RouterLink>
-          </Link>
-        )} */}
-      </HStack>
-      <Time datetime={event?.created_at} />
-    </VStack>
+    <HStack gap={2}>
+      {"asset" in asset ? <FiDatabase /> : <PiRectangleDashed />}
+      {"alias" in asset ? (
+        <Text fontSize="sm">{asset.alias.name}</Text>
+      ) : (
+        <Link asChild color="fg.info" display="block" py={2}>
+          <RouterLink to={`/assets/${asset.asset.id}`}>{asset.asset.name}</RouterLink>
+        </Link>
+      )}
+    </HStack>
+    {event?.lastUpdate === undefined ? undefined : (
+      <Text color="fg.muted" fontSize="sm">
+        <Time datetime={event.lastUpdate} />
+      </Text>
+    )}
   </Box>
 );

airflow/ui/src/components/AssetExpression/OrGateNode.tsx

@@ -20,7 +20,7 @@ import { Box, HStack } from "@chakra-ui/react";
 import type { PropsWithChildren } from "react";
 
 export const OrGateNode = ({ children }: PropsWithChildren) => (
-  <Box bg="bg.emphasized" border="2px dashed" borderRadius="lg" minW="fit-content" p={4} position="relative">
+  <Box bg="bg.muted" border="2px dashed" borderRadius="lg" minW="fit-content" p={4} position="relative">
     <HStack align="center" gap={4} mt={3}>
       {children}
     </HStack>

airflow/ui/src/components/AssetExpression/types.ts

@@ -17,15 +17,26 @@
  * under the License.
  */
 
-export type AssetSummary = {
+type Asset = {
   asset: {
     group: string;
+    id: number;
     name: string;
-    timestamp?: string;
     uri: string;
   };
 };
 
+type Alias = {
+  alias: {
+    group: string;
+    name: string;
+  };
+};
+
+export type NextRunEvent = { id: number; lastUpdate: string | null; uri: string };
+
+export type AssetSummary = Alias | Asset;
+
 export type ExpressionType = {
   all?: Array<AssetSummary | ExpressionType>;
   any?: Array<AssetSummary | ExpressionType>;

airflow/ui/src/pages/AssetsList/DependencyPopover.tsx

@@ -36,7 +36,7 @@ export const DependencyPopover = ({ dependencies, type }: Props) => (
         {pluralize(type, dependencies.length)}
       </Button>
     </Popover.Trigger>
-    <Popover.Content width="fit-content">
+    <Popover.Content css={{ "--popover-bg": "colors.bg.emphasized" }} width="fit-content">
       <Popover.Arrow />
       <Popover.Body>
         {dependencies.map((dependency) => {

airflow/ui/src/pages/Dag/Header.tsx

@@ -47,7 +47,7 @@ export const Header = ({
   const stats = [
     {
       label: "Schedule",
-      value: dag === undefined ? undefined : <Schedule dag={dag} />,
+      value: dagWithRuns === undefined ? undefined : <Schedule dag={dagWithRuns} />,
     },
     {
       label: "Latest Run",

airflow/ui/src/pages/DagsList/AssetSchedule.tsx

@@ -0,0 +1,72 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import dayjs from "dayjs";
+import { FiDatabase } from "react-icons/fi";
+
+import { useAssetServiceNextRunAssets } from "openapi/queries";
+import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
+import { AssetExpression, type ExpressionType } from "src/components/AssetExpression";
+import type { NextRunEvent } from "src/components/AssetExpression/types";
+import { Button, Popover } from "src/components/ui";
+
+type Props = {
+  readonly dag: DAGWithLatestDagRunsResponse;
+};
+
+export const AssetSchedule = ({ dag }: Props) => {
+  const { data: nextRun, isLoading } = useAssetServiceNextRunAssets({ dagId: dag.dag_id });
+
+  const nextRunEvents =
+    nextRun !== undefined && "events" in nextRun ? (nextRun.events as Array<NextRunEvent>) : [];
+
+  const pendingEvents = nextRunEvents.filter((ev) => {
+    if (ev.lastUpdate !== null && dag.latest_dag_runs[0]?.run_after === undefined) {
+      return true;
+    }
+    if (ev.lastUpdate !== null && dag.latest_dag_runs[0]?.run_after !== undefined) {
+      return dayjs(ev.lastUpdate).isAfter(dag.latest_dag_runs[0]?.run_after);
+    }
+
+    return false;
+  });
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    <Popover.Root autoFocus={false} lazyMount positioning={{ placement: "bottom-end" }} unmountOnExit>
+      <Popover.Trigger asChild>
+        <Button loading={isLoading} paddingInline={0} size="sm" variant="ghost">
+          <FiDatabase style={{ display: "inline" }} />
+          {nextRunEvents.length === 1 ? (
+            nextRunEvents[0]?.uri
+          ) : (
+            <>
+              {pendingEvents.length} of {nextRunEvents.length} datasets updated
+            </>
+          )}
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content css={{ "--popover-bg": "colors.bg.emphasized" }} width="fit-content">
+        <Popover.Arrow />
+        <Popover.Body>
+          <AssetExpression events={pendingEvents} expression={dag.asset_expression as ExpressionType} />
+        </Popover.Body>
+      </Popover.Content>
+    </Popover.Root>
+  );
+};

airflow/ui/src/pages/DagsList/Schedule.tsx

@@ -19,12 +19,13 @@
 import { Text } from "@chakra-ui/react";
 import { FiCalendar } from "react-icons/fi";
 
-import type { DAGDetailsResponse, DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
-import { AssetExpression, type ExpressionType } from "src/components/AssetExpression";
-import { Button, Popover, Tooltip } from "src/components/ui";
+import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
+import { Tooltip } from "src/components/ui";
+
+import { AssetSchedule } from "./AssetSchedule";
 
 type Props = {
-  readonly dag: DAGDetailsResponse | DAGWithLatestDagRunsResponse;
+  readonly dag: DAGWithLatestDagRunsResponse;
 };
 
 export const Schedule = ({ dag }: Props) =>
@@ -36,19 +37,6 @@ export const Schedule = ({ dag }: Props) =>
         </Text>
       </Tooltip>
     ) : (
-      // eslint-disable-next-line jsx-a11y/no-autofocus
-      <Popover.Root autoFocus={false} lazyMount positioning={{ placement: "bottom-end" }} unmountOnExit>
-        <Popover.Trigger asChild>
-          <Button size="sm" variant="ghost">
-            <FiCalendar style={{ display: "inline" }} /> {dag.timetable_summary}
-          </Button>
-        </Popover.Trigger>
-        <Popover.Content width="fit-content">
-          <Popover.Arrow />
-          <Popover.Body>
-            <AssetExpression expression={dag.asset_expression as ExpressionType} />
-          </Popover.Body>
-        </Popover.Content>
-      </Popover.Root>
+      <AssetSchedule dag={dag} />
     )
   ) : undefined;