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.
apache · Oct 9, 2024 · 9c4b81d · 9c4b81d
1 parent 66a89f1
commit 9c4b81d
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git 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
@@ -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,