Skip to content

feat: surface failed-run and missed-deadline indicators in the Grid view and add Deadlines tab to DAG run detail#62188

Closed
imrichardwu wants to merge 6 commits intoapache:mainfrom
imrichardwu:error-ui
Closed

feat: surface failed-run and missed-deadline indicators in the Grid view and add Deadlines tab to DAG run detail#62188
imrichardwu wants to merge 6 commits intoapache:mainfrom
imrichardwu:error-ui

Conversation

@imrichardwu
Copy link
Contributor

@imrichardwu imrichardwu commented Feb 19, 2026

This PR adds two complementary pieces of UI feedback for DAG runs in the Grid view:

  1. Failed-run indicator – a warning icon (triangle with "!") is rendered above the
    duration bar for any run whose state is failed. Clicking the icon navigates directly
    to the run detail page (task-instances view), letting operators drill in without first
    having to select the bar.

  2. Missed-deadline indicator – a clock/deadline icon is rendered above the duration bar
    (stacked above the failed icon when both apply) for any run that has at least one missed
    deadline. Clicking it navigates to the new Deadlines tab described below.

Backend changes

  • GridRunsResponse (datamodel) gains a has_missed_deadline: bool field so the grid
    endpoint can communicate per-run deadline status without an extra round-trip.
  • A new private-UI router deadlines_router is mounted at /ui/deadlines/{dag_id}/{run_id}.
    The endpoint fetches all Deadline rows for the given DAG run (joined with the associated
    DeadlineAlert for name/description), orders them by deadline_time, and returns a list
    of DeadlineResponse objects.
  • DeadlineResponse exposes: id, deadline_time, missed, created_at,
    alert_name (nullable), alert_description (nullable).
  • The OpenAPI private-UI spec (_private_ui.yaml) is updated accordingly, and the generated
    TypeScript client is regenerated.

Frontend changes

  • FailedIcon – new Chakra createIcon SVG component (warning triangle) for React usage.
  • DeadlineIcon – new Chakra createIcon SVG component (clock) for React usage.
  • failedIconPlugin – Chart.js plugin that draws warning triangles on the canvas above
    failed bars inside DurationChart. (The canvas plugin path is kept separate from the
    React icon because Chart.js operates on a <canvas> element.)
  • Bar (Grid/Bar.tsx) – renders the FailedIcon and/or DeadlineIcon as absolute-
    positioned ghost buttons above each bar, with dynamic vertical offsets so the icons
    never overlap the bar or each other.
  • Deadlines page (pages/Run/Deadlines.tsx) – sortable, filterable table of deadlines
    for a DAG run. Columns: alert name, deadline time, status (Missed / On Track badge),
    created at, description. A checkbox filters to missed deadlines only.
  • Router and Run detail view are updated to include the new deadlines tab route.
Screenshot 2026-02-19 at 10 50 16 AM
Was generative AI tooling used to co-author this PR?
  • Yes (please specify the tool below)


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.

This commit introduces a new `FailedIcon` component for representing failure states in the UI, along with a plugin for the DurationChart that visually indicates failed indices. The `FailedIcon` is created using Chakra UI's icon system, while the plugin draws a custom icon on the chart for failed data points.
- Introduced a new DeadlinesService to fetch deadlines for specific DAG runs.
- Added a new endpoint to the OpenAPI specification for retrieving DAG run deadlines.
- Created a Deadlines component to display deadlines in a table format with sorting and filtering options.
- Integrated a DeadlineIcon to visually indicate missed deadlines in the Gantt chart.
- Updated the UI to include a new tab for deadlines in the DAG run details page.
- Enhanced the existing services and types to accommodate the new deadlines feature.
- Added translations for deadlines-related UI elements.
@vincbeck
Copy link
Contributor

Suggestion: can you split your PR into 2? One for the back-end, one for the front-end? It would make it easier to review, plus, very often back-end and front-end are not reviewed by the same persons so that way you get "specialized" reviews on back-end and front-end :)

@imrichardwu
Copy link
Contributor Author

imrichardwu commented Feb 19, 2026

Suggestion: can you split your PR into 2? One for the back-end, one for the front-end? It would make it easier to review, plus, very often back-end and front-end are not reviewed by the same persons so that way you get "specialized" reviews on back-end and front-end :)

here is the pr for the backend: #62189
here is the pr for the frontend: #62195

@imrichardwu imrichardwu deleted the error-ui branch February 21, 2026 01:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:API Airflow's REST/HTTP API area:translations area:UI Related to UI/UX. For Frontend Developers. translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants