Skip to content

Implement card view for tasks view of a dag - #44604

Merged
bbovenzi merged 12 commits into
apache:mainfrom
tirkarthi:tasks-tab
Dec 6, 2024
Merged

bbovenzi merged 12 commits into
apache:mainfrom
tirkarthi:tasks-tab

Conversation

@tirkarthi

@tirkarthi tirkarthi commented Dec 3, 2024 •

Copy link
Copy Markdown
Contributor

Use tasks endpoint to fill the card view first. Get dag's recent dagruns and get the last dagrun id and pass it to taskinstances endpoint to get the last run and the corresponding task instance state.

Comments for reviewers and self :

  1. Disable pagination since tasks and task instances doesn't support limit or pagination.
  2. Colors are slightly off with stateColor and the theme which will be fixed overall. Please let me know if I am missing some other configuration.
  3. The historical view of the task instances which is the last column in the card view is using list task instances endpoint which returns like 100 task instances and the limit is easily reached with 14 task instances per task. All task instance attributes are also not used with only start_date, end_date, try_number, duration and state used which could be fetched efficiently.
  4. Do we need to display a tooltip for the last run. Perhaps the start time, end time and try number of the last task instance.

This PR probably needs a rebase after #44269 is merged.

image

image

@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Dec 3, 2024
@tirkarthi
tirkarthi force-pushed the tasks-tab branch 2 times, most recently from 6335be3 to 3554cd1 Compare December 4, 2024 14:57
Comment thread airflow/ui/src/router.tsx Resolved
@bbovenzi
bbovenzi merged commit 97cb24f into apache:main Dec 6, 2024
@tirkarthi

Copy link
Copy Markdown
Contributor Author

Thanks @bbovenzi

got686-yandex pushed a commit to got686-yandex/airflow that referenced this pull request Jan 30, 2025
* Initial commit for tasks tab.

* Remove unused columns for card view.

* Fetch latest dag run and then fetch corresponding task instances.

* Make font to be consistent.

* Pass dagRunsLimit to limit the number of dagruns.

* Add recent task instance plot to card.

* Fix merge conflicts and use Status component.

* Make task name bold
Change Last Run to Last Instance in header name
Use start date and wrap it with Time tag
Show try number only when greater than 1
Use pluralize for task

* Refactor tooltip to a separate component. Fix variable name casing.

* Fix duration when null.

* Use children prop to simplify TaskInstanceTooltip wrapping.

* Omit content to reuse tooltip type.
@tirkarthi tirkarthi mentioned this pull request Dec 18, 2025
1 of 2 tasks
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.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants