This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 5ddea25c9c6 Link calendar cell to filter dagruns by the respective
start_date and state. (#73611)
5ddea25c9c6 is described below
commit 5ddea25c9c6f7b80083b5fde10c8db08f6ebc16b
Author: Karthikeyan Singaravelan <[email protected]>
AuthorDate: Thu Sep 24 02:21:48 2026 +0530
Link calendar cell to filter dagruns by the respective start_date and
state. (#73611)
---
.../ui/src/pages/Dag/Calendar/CalendarCell.tsx | 19 +++++++++++++++++--
.../ui/src/pages/Dag/Calendar/DailyCalendarView.tsx | 4 ++++
.../ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx | 4 ++++
3 files changed, 25 insertions(+), 2 deletions(-)
diff --git
a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx
b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx
index c5059691e4e..a900325716a 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarCell.tsx
@@ -19,7 +19,7 @@
import { Box } from "@chakra-ui/react";
import { FiAlertTriangle, FiClock } from "react-icons/fi";
-import { Tooltip } from "src/system-components";
+import { RouterLink, Tooltip } from "src/system-components";
import { CalendarTooltip } from "./CalendarTooltip";
import type { CalendarCellData, CalendarColorMode } from "./types";
@@ -33,6 +33,7 @@ type Props = {
secondary: string | { _dark: string; _light: string };
};
readonly cellData: CalendarCellData | undefined;
+ readonly dagId: string;
readonly index?: number;
readonly marginRight?: string;
readonly viewMode?: CalendarColorMode;
@@ -41,6 +42,7 @@ type Props = {
export const CalendarCell = ({
backgroundColor,
cellData,
+ dagId,
index,
marginRight,
viewMode = "total",
@@ -51,6 +53,7 @@ export const CalendarCell = ({
viewMode === "failed" ? (cellData?.counts.failed ?? 0) :
(cellData?.counts.total ?? 0);
const hasData = Boolean(cellData && relevantCount > 0);
const hasTooltip = Boolean(cellData);
+ const startDate = Boolean(cellData?.runs[0]?.date);
// States present in this cell, computed with the same view-mode-aware logic
the
// tooltip uses (see CalendarTooltip). Exposed as a `data-states` attribute
so e2e
@@ -160,7 +163,19 @@ export const CalendarCell = ({
}}
unmountOnExit
>
- {cellBox}
+ {hasData && startDate ? (
+ <RouterLink
+ to={
+ viewMode === "failed"
+ ?
`/dags/${dagId}/runs?start_date_gte=${startDate}&sort=start_date&state=failed`
+ :
`/dags/${dagId}/runs?start_date_gte=${startDate}&sort=start_date`
+ }
+ >
+ {cellBox}
+ </RouterLink>
+ ) : (
+ cellBox
+ )}
</Tooltip>
);
};
diff --git
a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/DailyCalendarView.tsx
b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/DailyCalendarView.tsx
index 0e09ea5bf90..a98ed8c44b6 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/DailyCalendarView.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/DailyCalendarView.tsx
@@ -37,6 +37,7 @@
import { Box, Text } from "@chakra-ui/react";
import dayjs from "dayjs";
import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
import type { CalendarTimeRangeResponse } from "openapi/requests/types.gen";
@@ -62,6 +63,7 @@ export const DailyCalendarView = ({
viewMode = "total",
}: Props) => {
const { t: translate } = useTranslation("dag");
+ const { dagId = "" } = useParams();
const dailyData = generateDailyCalendarData(data, { deadlineMap,
selectedYear, timezone });
const weekdays = [
@@ -120,6 +122,7 @@ export const DailyCalendarView = ({
<CalendarCell
backgroundColor="transparent"
cellData={undefined}
+ dagId={dagId}
key={day.date}
viewMode={viewMode}
/>
@@ -130,6 +133,7 @@ export const DailyCalendarView = ({
<CalendarCell
backgroundColor={scale.getColor(day.counts)}
cellData={day}
+ dagId={dagId}
key={day.date}
viewMode={viewMode}
/>
diff --git
a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx
b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx
index 76152fab125..5f584591b7a 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Calendar/HourlyCalendarView.tsx
@@ -38,6 +38,7 @@ import { Box, Text } from "@chakra-ui/react";
import dayjs from "dayjs";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
import type { CalendarTimeRangeResponse } from "openapi/requests/types.gen";
@@ -67,6 +68,7 @@ export const HourlyCalendarView = ({
viewMode = "total",
}: Props) => {
const { t: translate } = useTranslation("dag");
+ const { dagId = "" } = useParams();
const hourlyData = generateHourlyCalendarData(data, {
deadlineMap,
selectedMonth,
@@ -184,6 +186,7 @@ export const HourlyCalendarView = ({
<CalendarCell
backgroundColor={scale.getColor(emptyCounts)}
cellData={emptyData}
+ dagId={dagId}
index={index}
key={`${day.day}-${hour}`}
viewMode={viewMode}
@@ -200,6 +203,7 @@ export const HourlyCalendarView = ({
<CalendarCell
backgroundColor={scale.getColor(hourData.counts)}
cellData={formattedHourData}
+ dagId={dagId}
index={index}
key={`${day.day}-${hour}`}
viewMode={viewMode}
