Skip to content

Show states of task groups as stacked cards in Grid view - #75442

Merged
bbovenzi merged 2 commits into
apache:mainfrom
kevinhongzl:ui/task-group-grid-colors
Oct 23, 2026
Merged

bbovenzi merged 2 commits into
apache:mainfrom
kevinhongzl:ui/task-group-grid-colors

Conversation

@kevinhongzl

Copy link
Copy Markdown
Contributor

related: #74883

Similar to what we did for mapped tasks, this pr uses stacked cards to show primary and secondary states of task groups, making it easier to spot groups with mixed task states.

2026-10-23.13-40-29.mp4

The DAG:

import time
from datetime import timedelta

import pendulum

from airflow.sdk import DAG, TaskGroup, task

QUICK = 0
SLOW = 60

@task
def work(sleep_seconds: int) -> None:
    time.sleep(sleep_seconds)

@task
def check(should_fail: bool) -> None:
    if should_fail:
        raise RuntimeError("Failing on purpose to show failed cells in the Grid view")

with DAG(
    dag_id="task_group_grid_states",
    schedule=None,
    start_date=pendulum.datetime(2024, 1, 1, tz="UTC"),
    catchup=False,
    dagrun_timeout=timedelta(seconds=15),
    default_args={"retries": 0},
):
    with TaskGroup(group_id="plain_group"):
        work.override(task_id="quick_0")(QUICK)
        work.override(task_id="quick_1")(QUICK)
        work.override(task_id="slow")(SLOW)

    with TaskGroup(group_id="group_with_mapped_tasks"):
        work.override(task_id="mapped").expand(sleep_seconds=[QUICK, QUICK, SLOW])
        work.override(task_id="plain")(QUICK)
        work.override(task_id="slow")(SLOW)

    with TaskGroup(group_id="failing_plain_group"):
        check(True) >> work.override(task_id="after")(QUICK)
        work.override(task_id="ok")(QUICK)

    with TaskGroup(group_id="failing_group_with_mapped_tasks"):
        check.expand(should_fail=[False, False, True]) >> work.override(task_id="after")(QUICK)
        work.override(task_id="ok")(QUICK)
Was generative AI tooling used to co-author this PR?
  • Yes - Claude Code (Opus 5.5)

  • 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, in airflow-core/newsfragments. You can add this file in a follow-up commit after the PR is created so you know the PR number.

@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Oct 23, 2026
@kevinhongzl
kevinhongzl force-pushed the ui/task-group-grid-colors branch from 2486eed to 9ce0421 Compare October 23, 2026 06:01
@kevinhongzl

Copy link
Copy Markdown
Contributor Author

cc: @bbovenzi

@bbovenzi bbovenzi added the backport-to-v3-4-test Backport to v3-4-test label Oct 23, 2026
@bbovenzi bbovenzi added this to the Airflow 3.4.0 milestone Oct 23, 2026
@bbovenzi
bbovenzi merged commit 2846242 into apache:main Oct 23, 2026
79 checks passed
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-4-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

Status Branch Result
✅ v3-4-test PR Link

@kevinhongzl

Copy link
Copy Markdown
Contributor Author

Thanks for reviewing and merging this so quickly!

vatsrahul1001 pushed a commit that referenced this pull request Oct 24, 2026
…75442)

* Show task groups as stacked cards in the Grid view

* Test failed task groups in the Grid stacked card
(cherry picked from commit 2846242)

Co-authored-by: Zhen-Lun (Kevin) Hong <zhenlun.hong01@gmail.com>
vatsrahul1001 pushed a commit that referenced this pull request Oct 24, 2026
…75442) (#75486)

* Show task groups as stacked cards in the Grid view

* Test failed task groups in the Grid stacked card
(cherry picked from commit 2846242)

Co-authored-by: Zhen-Lun (Kevin) Hong <zhenlun.hong01@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. backport-to-v3-4-test Backport to v3-4-test

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants