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 be8763a4f9bc050d2dd343c97105444edd9994aa Author: Dominic Leung <[email protected]> AuthorDate: Wed May 7 03:56:55 2025 +0800 Always Show Trendcount in Dag Overview (#50183) * always show trendcount * only override margin left of assetevents for overview.tsx * update AssetEvent props * Update task overview.tsx also * update typehints for general props (cherry picked from commit 909645608f4e6c7949ff8e23575e89a4d5a0cbdc) --- .../ui/src/components/Assets/AssetEvents.tsx | 6 +++-- .../airflow/ui/src/components/TrendCountButton.tsx | 9 ++----- .../airflow/ui/src/components/TrendCountChart.tsx | 30 +++++++++++++++++++--- .../airflow/ui/src/pages/Dag/Overview/Overview.tsx | 7 ++--- .../ui/src/pages/Task/Overview/Overview.tsx | 4 +-- 5 files changed, 38 insertions(+), 18 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx index 4becd16cc95..913640a8a34 100644 --- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx +++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx @@ -17,6 +17,7 @@ * under the License. */ import { Box, Heading, Flex, HStack, Skeleton } from "@chakra-ui/react"; +import type { BoxProps } from "@chakra-ui/react"; import { createListCollection } from "@chakra-ui/react/collection"; import { FiDatabase } from "react-icons/fi"; @@ -54,7 +55,8 @@ export const AssetEvents = ({ setTableUrlState, tableUrlState, title, -}: AssetEventProps) => { + ...rest +}: AssetEventProps & BoxProps) => { const assetSortOptions = createListCollection({ items: [ { label: "Newest first", value: "-timestamp" }, @@ -63,7 +65,7 @@ export const AssetEvents = ({ }); return ( - <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2}> + <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2} {...rest}> <Flex justify="space-between" mr={1} mt={0} pl={3} pt={1}> <HStack> <StateBadge colorPalette="blue" fontSize="md" variant="solid"> diff --git a/airflow-core/src/airflow/ui/src/components/TrendCountButton.tsx b/airflow-core/src/airflow/ui/src/components/TrendCountButton.tsx index c67b9f34567..9880ab55f61 100644 --- a/airflow-core/src/airflow/ui/src/components/TrendCountButton.tsx +++ b/airflow-core/src/airflow/ui/src/components/TrendCountButton.tsx @@ -43,12 +43,8 @@ export const TrendCountButton = ({ label, route, startDate, -}: Props) => { - if (count === 0 && !isLoading) { - return undefined; - } - - return isLoading ? ( +}: Props) => + isLoading ? ( <Skeleton borderRadius={4} height="45px" width="350px" /> ) : ( <Link to={route}> @@ -63,4 +59,3 @@ export const TrendCountButton = ({ </HStack> </Link> ); -}; diff --git a/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx b/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx index 483fe9efb6b..68f86ae35d3 100644 --- a/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx +++ b/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx @@ -101,21 +101,43 @@ export const TrendCountChart = ({ endDate, events, startDate }: Props) => { const chartRef = useRef<ChartJS<"line">>(); // Get raw color values instead of CSS variables - const [bgLight, bgDark, lineLight, lineDark] = useToken("colors", [ + const [bgLightGreen, bgDarkGreen, lineLightGreen, lineDarkGreen] = useToken("colors", [ + "green.100", + "green.800", + "green.500", + "green.400", + ]); + + const [bgLightRed, bgDarkRed, lineLightRed, lineDarkRed] = useToken("colors", [ "red.100", "red.800", "red.500", "red.400", ]); - const backgroundColor = colorMode === "light" ? bgLight : bgDark; - const lineColor = colorMode === "light" ? lineLight : lineDark; - const intervalData = useMemo( () => aggregateEventsIntoIntervals(events, startDate, endDate), [events, startDate, endDate], ); + const backgroundColor = + colorMode === "light" + ? intervalData.some((value) => value > 0) + ? bgLightRed + : bgLightGreen + : intervalData.some((value) => value > 0) + ? bgDarkRed + : bgDarkGreen; + + const lineColor = + colorMode === "light" + ? intervalData.some((value) => value > 0) + ? lineLightRed + : lineLightGreen + : intervalData.some((value) => value > 0) + ? lineDarkRed + : lineDarkGreen; + // Cleanup chart instance on unmount useEffect( () => () => { diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx index 6d8a7f768a0..b28ca34e109 100644 --- a/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx @@ -84,7 +84,7 @@ export const Overview = () => { }); return ( - <Box m={4}> + <Box m={4} spaceY={4}> <Box my={2}> <TimeRangeSelector defaultValue={defaultHour} @@ -96,7 +96,7 @@ export const Overview = () => { </Box> <HStack flexWrap="wrap"> <TrendCountButton - colorPalette="failed" + colorPalette={(failedTasks?.total_entries ?? 0) === 0 ? "green" : "failed"} count={failedTasks?.total_entries ?? 0} endDate={endDate} events={(failedTasks?.task_instances ?? []).map((ti) => ({ @@ -111,7 +111,7 @@ export const Overview = () => { startDate={startDate} /> <TrendCountButton - colorPalette="failed" + colorPalette={(failedRuns?.total_entries ?? 0) === 0 ? "green" : "failed"} count={failedRuns?.total_entries ?? 0} endDate={endDate} events={(failedRuns?.dag_runs ?? []).map((dr) => ({ @@ -138,6 +138,7 @@ export const Overview = () => { <AssetEvents data={assetEventsData} isLoading={isLoadingAssetEvents} + ml={0} setOrderBy={setAssetSortBy} title="Created Asset Event" /> diff --git a/airflow-core/src/airflow/ui/src/pages/Task/Overview/Overview.tsx b/airflow-core/src/airflow/ui/src/pages/Task/Overview/Overview.tsx index 6c1e5d4e7d6..24ef0fb2067 100644 --- a/airflow-core/src/airflow/ui/src/pages/Task/Overview/Overview.tsx +++ b/airflow-core/src/airflow/ui/src/pages/Task/Overview/Overview.tsx @@ -65,7 +65,7 @@ export const Overview = () => { ); return ( - <Box m={4}> + <Box m={4} spaceY={4}> <Box my={2}> <TimeRangeSelector defaultValue={defaultHour} @@ -77,7 +77,7 @@ export const Overview = () => { </Box> <HStack flexWrap="wrap"> <TrendCountButton - colorPalette="failed" + colorPalette={(failedTaskInstances?.total_entries ?? 0) === 0 ? "green" : "red"} count={failedTaskInstances?.total_entries ?? 0} endDate={endDate} events={(failedTaskInstances?.task_instances ?? []).map((ti) => ({
