(airflow) branch main updated: Add support to filter by last dagrun state in UI. (#42779)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 9c4b81d71f Add support to filter by last dagrun state in UI. (#42779)
9c4b81d71f is described below

commit 9c4b81d71f3caee3a3b1c6d9c626ee5d16f0db7c
Author: Karthikeyan Singaravelan <tir.kar...@gmail.com>
AuthorDate: Wed Oct 9 13:45:14 2024 +0530

    Add support to filter by last dagrun state in UI. (#42779)
    
    * Add support to filter by last dagrun state in UI.
    
    * Fix lint errors.
    
    * Fix lint errors.
    
    * Fix PR comments over null checks and query parameter to be 
last_dag_run_state.
---
 airflow/ui/src/pages/DagsList/DagsFilters.tsx | 55 +++++++++++++++++++++++++--
 airflow/ui/src/pages/DagsList/DagsList.tsx    |  5 ++-
 2 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/airflow/ui/src/pages/DagsList/DagsFilters.tsx 
b/airflow/ui/src/pages/DagsList/DagsFilters.tsx
index cb2be8322e..6316816f48 100644
--- a/airflow/ui/src/pages/DagsList/DagsFilters.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsFilters.tsx
@@ -25,11 +25,17 @@ import { useTableURLState } from 
"src/components/DataTable/useTableUrlState";
 import { QuickFilterButton } from "src/components/QuickFilterButton";
 
 const PAUSED_PARAM = "paused";
+const STATE_PARAM = "last_dag_run_state";
 
 export const DagsFilters = () => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const showPaused = searchParams.get(PAUSED_PARAM);
+  const state = searchParams.get(STATE_PARAM);
+  const isAll = state === null;
+  const isRunning = state === "running";
+  const isFailed = state === "failed";
+  const isSuccess = state === "success";
 
   const { setTableURLState, tableURLState } = useTableURLState();
   const { pagination, sorting } = tableURLState;
@@ -51,6 +57,23 @@ export const DagsFilters = () => {
       [pagination, searchParams, setSearchParams, setTableURLState, sorting],
     );
 
+  const handleStateChange: React.MouseEventHandler<HTMLButtonElement> =
+    useCallback(
+      ({ currentTarget: { value } }) => {
+        if (value === "all") {
+          searchParams.delete(STATE_PARAM);
+        } else {
+          searchParams.set(STATE_PARAM, value);
+        }
+        setSearchParams(searchParams);
+        setTableURLState({
+          pagination: { ...pagination, pageIndex: 0 },
+          sorting,
+        });
+      },
+      [pagination, searchParams, setSearchParams, setTableURLState, sorting],
+    );
+
   return (
     <HStack justifyContent="space-between">
       <HStack spacing={4}>
@@ -59,10 +82,34 @@ export const DagsFilters = () => {
             State:
           </Text>
           <HStack>
-            <QuickFilterButton isActive>All</QuickFilterButton>
-            <QuickFilterButton isDisabled>Failed</QuickFilterButton>
-            <QuickFilterButton isDisabled>Running</QuickFilterButton>
-            <QuickFilterButton isDisabled>Successful</QuickFilterButton>
+            <QuickFilterButton
+              isActive={isAll}
+              onClick={handleStateChange}
+              value="all"
+            >
+              All
+            </QuickFilterButton>
+            <QuickFilterButton
+              isActive={isFailed}
+              onClick={handleStateChange}
+              value="failed"
+            >
+              Failed
+            </QuickFilterButton>
+            <QuickFilterButton
+              isActive={isRunning}
+              onClick={handleStateChange}
+              value="running"
+            >
+              Running
+            </QuickFilterButton>
+            <QuickFilterButton
+              isActive={isSuccess}
+              onClick={handleStateChange}
+              value="success"
+            >
+              Successful
+            </QuickFilterButton>
           </HStack>
         </Box>
         <Box>
diff --git a/airflow/ui/src/pages/DagsList/DagsList.tsx 
b/airflow/ui/src/pages/DagsList/DagsList.tsx
index 7b87e8d253..178663baf7 100644
--- a/airflow/ui/src/pages/DagsList/DagsList.tsx
+++ b/airflow/ui/src/pages/DagsList/DagsList.tsx
@@ -29,7 +29,7 @@ import { type ChangeEventHandler, useCallback, useState } 
from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { useDagServiceGetDags } from "openapi/queries";
-import type { DAGResponse } from "openapi/requests/types.gen";
+import type { DAGResponse, DagRunState } from "openapi/requests/types.gen";
 import { DataTable } from "src/components/DataTable";
 import { ToggleTableDisplay } from 
"src/components/DataTable/ToggleTableDisplay";
 import type { CardDef } from "src/components/DataTable/types";
@@ -97,12 +97,14 @@ const cardDef: CardDef<DAGResponse> = {
 };
 
 const PAUSED_PARAM = "paused";
+const STATE_PARAM = "last_dag_run_state";
 
 export const DagsList = () => {
   const [searchParams] = useSearchParams();
   const [display, setDisplay] = useState<"card" | "table">("card");
 
   const showPaused = searchParams.get(PAUSED_PARAM);
+  const lastDagRunState = searchParams.get(STATE_PARAM) as DagRunState;
 
   const { setTableURLState, tableURLState } = useTableURLState();
   const { pagination, sorting } = tableURLState;
@@ -112,6 +114,7 @@ export const DagsList = () => {
   const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined;
 
   const { data, isFetching, isLoading } = useDagServiceGetDags({
+    lastDagRunState,
     limit: pagination.pageSize,
     offset: pagination.pageIndex * pagination.pageSize,
     onlyActive: true,