From f9d8ac7507351611ad9fec0bfe36688f55ee2b47 Mon Sep 17 00:00:00 2001
From: Dominic Leung <leungcheuk209@gmail.com>
Date: Mon, 5 May 2025 10:12:02 +0800
Subject: [PATCH 1/5] always show trendcount

---
 .../ui/src/components/Assets/AssetEvents.tsx  |  2 +-
 .../ui/src/components/TrendCountButton.tsx    |  9 ++----
 .../ui/src/components/TrendCountChart.tsx     | 30 ++++++++++++++++---
 .../ui/src/pages/Dag/Overview/Overview.tsx    |  6 ++--
 4 files changed, 32 insertions(+), 15 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 4becd16cc9544..f34570580b787 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
@@ -63,7 +63,7 @@ export const AssetEvents = ({
   });
 
   return (
-    <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2}>
+    <Box borderBottomWidth={0} borderRadius={5} borderWidth={1}>
       <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 c67b9f3456798..9880ab55f61bd 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 483fe9efb6b22..68f86ae35d339 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 6d8a7f768a04b..ab785ec46e5cd 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) => ({

From 6772d17e88ad56904602d2b3dbcbdbd2153fc155 Mon Sep 17 00:00:00 2001
From: Dominic Leung <leungcheuk209@gmail.com>
Date: Mon, 5 May 2025 11:05:58 +0800
Subject: [PATCH 2/5] only override margin left of assetevents for overview.tsx

---
 .../src/airflow/ui/src/components/Assets/AssetEvents.tsx     | 5 ++++-
 .../src/airflow/ui/src/pages/Dag/Overview/Overview.tsx       | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

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 f34570580b787..03234b0724105 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";
 
@@ -42,6 +43,7 @@ type AssetEventProps = {
   readonly isLoading?: boolean;
   readonly setOrderBy?: (order: string) => void;
   readonly setTableUrlState?: (state: TableState) => void;
+  readonly sx?: BoxProps;
   readonly tableUrlState?: TableState;
   readonly title?: string;
 };
@@ -52,6 +54,7 @@ export const AssetEvents = ({
   isLoading,
   setOrderBy,
   setTableUrlState,
+  sx,
   tableUrlState,
   title,
 }: AssetEventProps) => {
@@ -63,7 +66,7 @@ export const AssetEvents = ({
   });
 
   return (
-    <Box borderBottomWidth={0} borderRadius={5} borderWidth={1}>
+    <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2} {...sx}>
       <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/pages/Dag/Overview/Overview.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx
index ab785ec46e5cd..819ef1a843e35 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
@@ -139,6 +139,7 @@ export const Overview = () => {
             data={assetEventsData}
             isLoading={isLoadingAssetEvents}
             setOrderBy={setAssetSortBy}
+            sx={{ ml: 0 }} // Override margin left
             title="Created Asset Event"
           />
         ) : undefined}

From 568ffdca9f28fc0d2e8e6695d5ca82e1a594ab44 Mon Sep 17 00:00:00 2001
From: Dominic Leung <leungcheuk209@gmail.com>
Date: Tue, 6 May 2025 12:11:45 +0800
Subject: [PATCH 3/5] update AssetEvent props

---
 .../src/airflow/ui/src/components/Assets/AssetEvents.tsx   | 7 +++----
 .../src/airflow/ui/src/pages/Dag/Overview/Overview.tsx     | 2 +-
 2 files changed, 4 insertions(+), 5 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 03234b0724105..e1da2f90c85b2 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
@@ -17,7 +17,6 @@
  * 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";
 
@@ -41,9 +40,9 @@ type AssetEventProps = {
   readonly assetId?: number;
   readonly data?: AssetEventCollectionResponse;
   readonly isLoading?: boolean;
+  readonly [key: string]: unknown;
   readonly setOrderBy?: (order: string) => void;
   readonly setTableUrlState?: (state: TableState) => void;
-  readonly sx?: BoxProps;
   readonly tableUrlState?: TableState;
   readonly title?: string;
 };
@@ -54,9 +53,9 @@ export const AssetEvents = ({
   isLoading,
   setOrderBy,
   setTableUrlState,
-  sx,
   tableUrlState,
   title,
+  ...rest
 }: AssetEventProps) => {
   const assetSortOptions = createListCollection({
     items: [
@@ -66,7 +65,7 @@ export const AssetEvents = ({
   });
 
   return (
-    <Box borderBottomWidth={0} borderRadius={5} borderWidth={1} ml={2} {...sx}>
+    <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/pages/Dag/Overview/Overview.tsx b/airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx
index 819ef1a843e35..b28ca34e10971 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
@@ -138,8 +138,8 @@ export const Overview = () => {
           <AssetEvents
             data={assetEventsData}
             isLoading={isLoadingAssetEvents}
+            ml={0}
             setOrderBy={setAssetSortBy}
-            sx={{ ml: 0 }} // Override margin left
             title="Created Asset Event"
           />
         ) : undefined}

From d7e06fc4c90a2ce1529a1ebca6225980d6ec8cf7 Mon Sep 17 00:00:00 2001
From: Dominic Leung <leungcheuk209@gmail.com>
Date: Tue, 6 May 2025 12:18:27 +0800
Subject: [PATCH 4/5] Update task overview.tsx also

---
 .../src/airflow/ui/src/pages/Task/Overview/Overview.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 6c1e5d4e7d695..24ef0fb20671d 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) => ({

From 457f627405a5593e57a95eb31084eaf4544949c2 Mon Sep 17 00:00:00 2001
From: Dominic Leung <leungcheuk209@gmail.com>
Date: Wed, 7 May 2025 01:03:17 +0800
Subject: [PATCH 5/5] update typehints for general props

---
 .../src/airflow/ui/src/components/Assets/AssetEvents.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 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 e1da2f90c85b2..913640a8a342e 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";
 
@@ -40,7 +41,6 @@ type AssetEventProps = {
   readonly assetId?: number;
   readonly data?: AssetEventCollectionResponse;
   readonly isLoading?: boolean;
-  readonly [key: string]: unknown;
   readonly setOrderBy?: (order: string) => void;
   readonly setTableUrlState?: (state: TableState) => void;
   readonly tableUrlState?: TableState;
@@ -56,7 +56,7 @@ export const AssetEvents = ({
   tableUrlState,
   title,
   ...rest
-}: AssetEventProps) => {
+}: AssetEventProps & BoxProps) => {
   const assetSortOptions = createListCollection({
     items: [
       { label: "Newest first", value: "-timestamp" },