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 <[email protected]> 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}>
