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

---

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.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 6 comments.

Comments suppressed due to low confidence (1)

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

• This PR is focused on UI changes for displaying DAG run deadlines, but it also modifies core trigger serialization behavior. Since this change is unrelated to the stated scope and could have broad impact on DAG serialization/deserialization, it would be safer to either justify the necessity in the PR description or move it into a separate PR with its own tests/validation.

def encode_trigger(trigger: BaseEventTrigger | dict):
    from airflow.serialization.serialized_objects import BaseSerialization

    def _ensure_serialized(d):
        """
        Make sure the kwargs dict is JSON-serializable.

        This is done with BaseSerialization logic. A simple check is added to
        ensure we don't double-serialize, which is possible when a trigger goes
        through multiple serialization layers.
        """
        if isinstance(d, dict) and Encoding.TYPE in d:
            return d
        return BaseSerialization.serialize(d)

    if isinstance(trigger, dict):
        classpath = trigger["classpath"]
        kwargs = trigger["kwargs"]
    else:
        classpath, kwargs = trigger.serialize()
    return {
        "classpath": classpath,
        "kwargs": {k: _ensure_serialized(v) for k, v in kwargs.items()},
    }

[bbovenzi]

I don't think we want to use humanize for the duration. The number of seconds is important. Instead let's go with the Expected/Actual date idea below where we can give a quick duration next to the Actual date

When we have more than one deadline. We probably just want to have a badge saying (3 Missed Deadlines) with the ability to click on it for more info. Otherwise the header gets stretched too much.

Also, for a Met deadline. I think we should still have a description in a tooltip.

[bbovenzi]

A few more UX comments.

[bbovenzi]

Ok I think this is good! We can always refine this later but let's get this merged.