Add task instance state and name filter to task instances tab in a dagrun #45215

tirkarthi · 2024-12-26T08:07:50Z

A dagrun might have a lot of task instances that are paginated. This PR adds filters to filter by state e.g. failed task instances which is similar to the filter in dagrun page now. I have also added search by task_id or task_display_name so that users can quickly get to the required task instance in a paginated setting. Slightly related issues for grid view to search by name #32239 . This also updates the URLs so that it's shareable.

Notes for reviewer and self :

I reused the searchBar component but doesn't need advanced search as of now as it's not implemented and not useful here where search by task name is only needed. This can be added in future and the hideAdvanced part can be removed.

Screenshot :

airflow/ui/src/pages/Run/TaskInstances.tsx

jscheffl

Looks good! Just a small nit in my view. Else: LGTM

airflow/ui/src/pages/Run/TaskInstances.tsx

jscheffl · 2025-01-01T00:02:24Z

Note: As PR #45312 has been merged, the code formatting rules have changed for new UI. Please rebase and re-run pre-commit checks to ensure that formatting in folder airflow/ui is adjusted.

pierrejeambrun

Tested working as expected and code looks good overall.

A few suggestion before merging.

pierrejeambrun · 2025-01-07T15:51:25Z

airflow/ui/src/pages/Run/TaskInstances.tsx

+    { label: "All States", value: "all" },
+    { label: "Scheduled", value: "scheduled" },
+    { label: "Queued", value: "queued" },
+    { label: "Running", value: "running" },
+    { label: "Success", value: "success" },
+    { label: "Restarting", value: "restarting" },
+    { label: "Failed", value: "failed" },
+    { label: "Up For Retry", value: "up_for_retry" },
+    { label: "Up For Reschedule", value: "up_for_reschedule" },
+    { label: "Upstream failed", value: "upstream_failed" },
+    { label: "Skipped", value: "skipped" },
+    { label: "Deferred", value: "deferred" },
+    { label: "Removed", value: "removed" },


I think a task instance can also have no status => state is null, not yet scheduled.

react-select doesn't seem to allow selecting an option with value as null . Backend seems to accept "none" and transform it as None state in the query. { label: "No status", value: "none" } helps But selecting "No status" will make UI list it as "None" . Maybe displaying selected options part needs to be special cased to handle "none" .

Done in c67eec9 . Please feel free to suggest if there is a better way to handle this state. Thanks.

pierrejeambrun · 2025-01-07T16:00:49Z

airflow/ui/src/pages/Run/TaskInstances.tsx

@@ -82,12 +85,71 @@ const columns: Array<ColumnDef<TaskInstanceResponse>> = [
  },
 ];

+const stateOptions = createListCollection({


By adding typing here you will be able to remove manual casting as TaskInstanceState. (And also by handling the None).

createListCollection<{ label: string; value: TaskInstanceState | "all" }

Thanks, done in c67eec9

pierrejeambrun · 2025-01-07T16:02:03Z

airflow/ui/src/components/SearchBar.tsx

+          {Boolean(hideAdvanced) ? undefined : (
+            <Button fontWeight="normal" height="1.75rem" variant="ghost" width={140} {...buttonProps}>
+              Advanced Search
+            </Button>
+          )}


I am not aware of a SearchBar that actually leverage this feature. (with a working button).

As you mentioned in the description. This can be removed if unused.

I think it would be a better practice to make the prop showAdvanced and force pages to opt in to it

There is some API work done which will be used in advanced search. For now I can keep it as opt out here.

#45420

pierrejeambrun · 2025-01-07T16:05:22Z

airflow/ui/src/pages/Run/TaskInstances.tsx

@@ -82,12 +85,71 @@ const columns: Array<ColumnDef<TaskInstanceResponse>> = [
  },
 ];

+const stateOptions = createListCollection({
+  items: [
+    { label: "All States", value: "all" },


I believe this can be further simplified, by having nothing selected at all 'undefined' value, that is considered all implicitly so we do not have to manually handle an "all". Because that also mess up the typing to have that extra virtual 'state'.

Yes, I think it needs to be some version of undefined because otherwise the clear X appears when it shouldn't

I added clearable by default. Now I have made it so that it's clearable only when a state is selected and it's not shown for "all states" when no state is selected.

bbovenzi · 2025-01-07T18:34:01Z

airflow/ui/src/pages/Run/TaskInstances.tsx

@@ -96,13 +158,53 @@ export const TaskInstances = () => {
      limit: pagination.pageSize,
      offset: pagination.pageIndex * pagination.pageSize,
      orderBy,
+      state: filteredState === null ? undefined : [filteredState],


Since state accepts an array. We should make it a MultiSelect component.

Thanks, done. I am appending to query parameter state on multiple selection so that it's sent as array to backend for filtering

tirkarthi requested review from bbovenzi, pierrejeambrun, ryanahamilton and jscheffl as code owners December 26, 2024 08:07

boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Dec 26, 2024

jscheffl reviewed Dec 26, 2024

View reviewed changes

airflow/ui/src/pages/Run/TaskInstances.tsx Outdated Show resolved Hide resolved

airflow/ui/src/pages/Run/TaskInstances.tsx Outdated Show resolved Hide resolved

jscheffl approved these changes Dec 26, 2024

View reviewed changes

airflow/ui/src/pages/Run/TaskInstances.tsx Outdated Show resolved Hide resolved

tirkarthi force-pushed the task-instance-state-filter branch from 3a2fe8f to fe68b6f Compare December 26, 2024 11:02

tirkarthi force-pushed the task-instance-state-filter branch from fe68b6f to e2b6060 Compare January 5, 2025 14:11

pierrejeambrun reviewed Jan 7, 2025

View reviewed changes

bbovenzi reviewed Jan 7, 2025

View reviewed changes

tirkarthi force-pushed the task-instance-state-filter branch from e2b6060 to 67746c6 Compare January 8, 2025 19:04

tirkarthi added 6 commits January 9, 2025 14:24

Add state filter to task instances tab in dagrun page.

a6bfbbb

Add tasks search in task instances page.

4762c1a

Make dropdown clearable.

4d0d554

Rebase and run format for line number rule.

dc2992a

Add support for multiple state selection.

a2c3e02

Support no status for filtering.

c67eec9

tirkarthi force-pushed the task-instance-state-filter branch from 67746c6 to c67eec9 Compare January 9, 2025 09:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add task instance state and name filter to task instances tab in a dagrun #45215

Add task instance state and name filter to task instances tab in a dagrun #45215

tirkarthi commented Dec 26, 2024

jscheffl left a comment

jscheffl commented Jan 1, 2025

pierrejeambrun left a comment •

edited

Loading

pierrejeambrun Jan 7, 2025

tirkarthi Jan 9, 2025 •

edited

Loading

tirkarthi Jan 9, 2025

pierrejeambrun Jan 7, 2025

tirkarthi Jan 9, 2025

pierrejeambrun Jan 7, 2025 •

edited

Loading

bbovenzi Jan 7, 2025

tirkarthi Jan 9, 2025

pierrejeambrun Jan 7, 2025

bbovenzi Jan 7, 2025

tirkarthi Jan 8, 2025

bbovenzi Jan 7, 2025

tirkarthi Jan 8, 2025

Add task instance state and name filter to task instances tab in a dagrun #45215

Are you sure you want to change the base?

Add task instance state and name filter to task instances tab in a dagrun #45215

Conversation

tirkarthi commented Dec 26, 2024

jscheffl left a comment

Choose a reason for hiding this comment

jscheffl commented Jan 1, 2025

pierrejeambrun left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tirkarthi Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pierrejeambrun Jan 7, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pierrejeambrun left a comment •

edited

Loading

tirkarthi Jan 9, 2025 •

edited

Loading

pierrejeambrun Jan 7, 2025 •

edited

Loading