Dag Run and Overview Tab Display Deadlines

[imrichardwu]

PR scope change, so the branch name is a bit odd, but that's ok.

Implemented Dag run UI and Overview Tab base on the detail's at this PR(#50501 (comment))

Note

blocked by #64926

---

Was generative AI tooling used to co-author this PR?

• Yes (please specify the tool below)

---

• Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
• For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
• When adding dependency, check compliance with the ASF 3rd Party License Policy.
• For significant user-facing changes create newsfragment: {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[imrichardwu]

@vincbeck @bbovenzi @ferruzzi Please review :)

[ferruzzi]

@pierrejeambrun this is the PR to actually implement that endpoint you modified in #62374, if you can review when you get time.

[ferruzzi]

@imrichardwu - As I mentioned on Slack, I love how this looks in the screenshot, but the typescript/React stuff is well outside of my comfort zone to approve so I'll leave that for the others. The rendered result looks great to me though!

[pierrejeambrun]

Nice PR.

Overall looking good. Just a few suggestions/improvements.

[bbovenzi]

I am struggling to understand the UX here.

1. Adding a failed indicator on the grid run bar. Good call that we are missing a color blind friendly indicator here. But having the icon float above the bar and be a different icon than the "X" we've used for failed isn't the right solution. We could rethink where our run type icons go though.

2. How many deadlines do we expect to exist on a single dag run at a time? I know the list endpoint has pagination but how often will we actually need it?

3. The clock above the grid view feels out of context without much other UI for deadlines and deadline alerts.

Let me work on an issue for AIP-86's UI to make sure we are thinking this all through and developing enough API endpoints to support it.

[ferruzzi]

How many deadlines do we expect to exist on a single dag run at a time? I know the list endpoint has pagination but how often will we actually need it?

I don't see user having more than a couple. I don't know what the actual average number will be, but my expectation is under 5. That's why I didn't think the pagination was a major miss in his original code, but it can't hurt to have either way.

The rest are UI/UX questions which aren't really my forte, I'll let you artists sort that part out, but I'll keep an eye here in case I can help at all.

[bbovenzi]

I wrote up my thoughts over in AIP-86 UI issue.

[bbovenzi]

Cool!

I like the deadlines in the Overview tab and dag run header. I don't quite get the calendar view one since pending or missed deadlines are not actually in the calendar itself. So I would remove the calendar part for now and just focus on the other two.

[Copilot]

Pull request overview

Adds UI surfacing for DAG run deadlines (Calendar + DAG Overview + Run header) and extends DeadlineAlert serialization to include human-friendly metadata (name/description), aligning with the deadlines UI/API work tracked in #50501.

Changes:

• Add DeadlineAlert name/description to the Task SDK model and Core serialization/DB persistence.
• Add new UI components to display deadline status on the Run header, and deadline alerts/deadlines on DAG pages (Overview + Calendar).
• Add i18n strings for the new UI labels.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
task-sdk/src/airflow/sdk/definitions/deadline.py	Extend DeadlineAlert with optional name/description.
providers/common/ai/src/airflow/providers/common/ai/plugins/www/init.py	Add missing package __init__ (license header only).
airflow-core/src/airflow/ui/src/pages/Run/Header.tsx	Add “Deadline” stat row in DagRun header.
airflow-core/src/airflow/ui/src/pages/Run/DeadlineStatus.tsx	New component to render per-run deadline status (missed/upcoming/met).
airflow-core/src/airflow/ui/src/pages/Dag/Overview/Overview.tsx	Insert deadlines widget into DAG Overview tab.
airflow-core/src/airflow/ui/src/pages/Dag/Overview/DagDeadlines.tsx	New widget listing pending + recently missed deadlines for a DAG.
airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx	Add deadline alerts badge to the DAG header actions.
airflow-core/src/airflow/ui/src/pages/Dag/DeadlineAlertsBadge.tsx	New popover badge showing configured deadline alerts.
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/CalendarDeadlines.tsx	New calendar-period deadlines list (pending + missed).
airflow-core/src/airflow/ui/src/pages/Dag/Calendar/Calendar.tsx	Render CalendarDeadlines under the calendar.
airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json	Add translations for new deadline UI labels.
airflow-core/src/airflow/serialization/encoders.py	Include name/description in deadline alert serialization.
airflow-core/src/airflow/serialization/definitions/deadline.py	Add field constants + extend SerializedDeadlineAlert for metadata.
airflow-core/src/airflow/serialization/decoders.py	Decode name/description into SerializedDeadlineAlert.
airflow-core/src/airflow/models/serialized_dag.py	Persist name/description into deadline_alert DB rows.

Comments suppressed due to low confidence (1)

airflow-core/src/airflow/serialization/encoders.py:211

• There are existing unit tests around deadline-alert serialization; with the new name/description fields, it would be good to extend coverage to assert non-null values round-trip (not just that the keys exist). This helps prevent regressions where these fields are dropped in encode/decode.

def encode_deadline_alert(d: DeadlineAlert | SerializedDeadlineAlert) -> dict[str, Any]:
    """
    Encode a deadline alert.

    :meta private:
    """
    from airflow.sdk.serde import serialize

    return {
        "name": getattr(d, "name", None),
        "description": getattr(d, "description", None),
        "reference": encode_deadline_reference(d.reference),
        "interval": d.interval.total_seconds(),
        "callback": serialize(d.callback),
    }

[bbovenzi]

Testing this all manually and I find the UX to still be a bit confusing. Let me try to provide some guidance.

1. Let's move all the python work in this PR to a separate PR that we merge before this. Then we can just focus on the UI here.

2. We can't rely on the name and description to tell a user what the alerts and deadlines are. We can do a better job of interpreting the reference and interval. For all cases of Met, Pending, and Missed. We should compare the alert's expected vs the dag run's actual. eg "Expected dag run finish: 1 hr after logical date. Actual dag run finish: 2 hours after logical date".

3. In the dag overview page, let's include the state of the dag run with each deadline so that I can, at a glance, know things like "Running dag with a missed deadline", "Successful run with a missed deadline"

Just showing a dag run id and a date is not sufficient information for a user to know what is going on.

[bbovenzi]

Thanks for doing the human readable changes. I would still prefer that we split the python and UI changes into separate PRs.

[bbovenzi]

This file looks like a mistake?

[imrichardwu]

I split the pr. I should had @ you. And I do not think that is a mistake because the pre commit hook did that. I’m not too sure why cuz I tried getting rid of it every time and it just keeps creating it when I commit. I mention it in my note in the pr because I was kinda confuse why it did that.

[bbovenzi]

Yes, thanks I reviewed this before I saw your other PR.

[bbovenzi]

You can make this one change and skip the pre-commit checks with --no-verify