You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2025/06/03 09:54:29 UTC
(airflow) 02/02: Fix next asset schedule and dag card UX (#50271)
This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch v3-0-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 8a010b8829dd515082a7fa1692e5d75048b6b6ef
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Tue May 6 16:22:37 2025 -0400
Fix next asset schedule and dag card UX (#50271)
(cherry picked from commit 94ba513224416a2c0a25113899c5378ee711942e)
---
airflow-core/src/airflow/ui/src/components/Stat.tsx | 6 +++---
airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx | 7 +++++--
airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.tsx | 4 ++--
airflow-core/src/airflow/ui/src/pages/DagsList/Schedule.tsx | 2 +-
4 files changed, 11 insertions(+), 8 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/Stat.tsx b/airflow-core/src/airflow/ui/src/components/Stat.tsx
index 476bff6a21f..7dec55d8e13 100644
--- a/airflow-core/src/airflow/ui/src/components/Stat.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Stat.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Heading, type StackProps, VStack } from "@chakra-ui/react";
+import { Center, Heading, type StackProps, VStack } from "@chakra-ui/react";
import type { ReactNode } from "react";
type Props = {
@@ -25,9 +25,9 @@ type Props = {
export const Stat = ({ children, label, ...rest }: Props) => (
<VStack align="flex-start" gap={1} {...rest}>
- <Heading color="fg.muted" fontSize="xs">
+ <Heading color="fg.muted" fontSize="xs" lineHeight="1.25rem">
{label}
</Heading>
- {children}
+ <Center height="100%">{children}</Center>
</VStack>
);
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx
index 84dcb66acd6..c566a5532ac 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx
@@ -59,7 +59,7 @@ export const AssetSchedule = ({ dag }: Props) => {
return (
<HStack>
<FiDatabase style={{ display: "inline" }} />
- <Link asChild color="fg.info" display="block" py={2}>
+ <Link asChild color="fg.info" display="block" fontSize="sm">
<RouterLink to={`/assets/${asset.id}`}>{asset.name ?? asset.uri}</RouterLink>
</Link>
</HStack>
@@ -79,7 +79,10 @@ export const AssetSchedule = ({ dag }: Props) => {
<Popover.Content css={{ "--popover-bg": "colors.bg.emphasized" }} width="fit-content">
<Popover.Arrow />
<Popover.Body>
- <AssetExpression events={pendingEvents} expression={dag.asset_expression as ExpressionType} />
+ <AssetExpression
+ events={pendingEvents}
+ expression={(nextRun?.asset_expression ?? dag.asset_expression) as ExpressionType}
+ />
</Popover.Body>
</Popover.Content>
</Popover.Root>
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.tsx
index 55bd2ebb613..ca54fadd965 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.tsx
@@ -42,7 +42,7 @@ export const DagCard = ({ dag }: Props) => {
return (
<Box borderColor="border.emphasized" borderRadius={8} borderWidth={1} overflow="hidden">
- <Flex alignItems="center" bg="bg.muted" justifyContent="space-between" px={3} py={2}>
+ <Flex alignItems="center" bg="bg.muted" justifyContent="space-between" px={3} py={1}>
<HStack>
<Tooltip content={dag.description} disabled={!Boolean(dag.description)}>
<Link asChild color="fg.info" fontWeight="bold">
@@ -56,7 +56,7 @@ export const DagCard = ({ dag }: Props) => {
<TriggerDAGButton dag={dag} withText={false} />
</HStack>
</Flex>
- <SimpleGrid columns={4} gap={1} height={20} px={3}>
+ <SimpleGrid columns={4} gap={1} height={20} px={3} py={1}>
<Stat label="Schedule">
<Schedule dag={dag} />
</Stat>
diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/Schedule.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/Schedule.tsx
index 7d6d550667f..9f071cfb437 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/Schedule.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/Schedule.tsx
@@ -30,7 +30,7 @@ type Props = {
export const Schedule = ({ dag }: Props) =>
Boolean(dag.timetable_summary) ? (
- Boolean(dag.asset_expression) ? (
+ Boolean(dag.asset_expression) || dag.timetable_summary === "Asset" ? (
<AssetSchedule dag={dag} />
) : (
<Tooltip content={dag.timetable_description}>