Always Show Trendcount in Dag Overview

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">

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>
   );
-};

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(
     () => () => {

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"
           />

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) => ({