Add tasks search in task instances page.

apache · Dec 26, 2024 · 3a2fe8f · 3a2fe8f
1 parent e63f370
commit 3a2fe8f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 13 deletions.
diff --git a/airflow/ui/src/components/SearchBar.tsx b/airflow/ui/src/components/SearchBar.tsx
@@ -29,6 +29,7 @@ type Props = {
   readonly buttonProps?: ButtonProps;
   readonly defaultValue: string;
   readonly groupProps?: InputGroupProps;
+  readonly hideAdvanced?: boolean;
   readonly onChange: (value: string) => void;
   readonly placeHolder: string;
 };
@@ -37,6 +38,7 @@ export const SearchBar = ({
   buttonProps,
   defaultValue,
   groupProps,
+  hideAdvanced = false,
   onChange,
   placeHolder,
 }: Props) => {
@@ -70,15 +72,17 @@ export const SearchBar = ({
               size="xs"
             />
           ) : undefined}
-          <Button
-            fontWeight="normal"
-            height="1.75rem"
-            variant="ghost"
-            width={140}
-            {...buttonProps}
-          >
-            Advanced Search
-          </Button>
+          {Boolean(hideAdvanced) ? undefined : (
+            <Button
+              fontWeight="normal"
+              height="1.75rem"
+              variant="ghost"
+              width={140}
+              {...buttonProps}
+            >
+              Advanced Search
+            </Button>
+          )}
         </>
       }
       startElement={<FiSearch />}

diff --git a/airflow/ui/src/pages/Run/TaskInstances.tsx b/airflow/ui/src/pages/Run/TaskInstances.tsx
@@ -20,11 +20,11 @@ import {
   Box,
   Link,
   createListCollection,
-  Flex,
+  HStack,
   type SelectValueChangeDetails,
 } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import {
   Link as RouterLink,
   useParams,
@@ -39,8 +39,13 @@ import type {
 import { DataTable } from "src/components/DataTable";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { SearchBar } from "src/components/SearchBar";
 import Time from "src/components/Time";
 import { Select, Status } from "src/components/ui";
+import {
+  SearchParamsKeys,
+  type SearchParamsKeysType,
+} from "src/constants/searchParams";
 import { capitalize, getDuration } from "src/utils";
 import { getTaskInstanceLink } from "src/utils/links";
 
@@ -128,6 +133,12 @@ export const TaskInstances = () => {
   const [sort] = sorting;
   const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : "-start_date";
   const filteredState = searchParams.get(STATE_PARAM);
+  const { NAME_PATTERN: NAME_PATTERN_PARAM }: SearchParamsKeysType =
+    SearchParamsKeys;
+
+  const [taskDisplayNamePattern, setTaskDisplayNamePattern] = useState(
+    searchParams.get(NAME_PATTERN_PARAM) ?? undefined,
+  );
 
   const handleStateChange = useCallback(
     ({ value }: SelectValueChangeDetails<string>) => {
@@ -147,6 +158,20 @@ export const TaskInstances = () => {
     [pagination, searchParams, setSearchParams, setTableURLState, sorting],
   );
 
+  const handleSearchChange = (value: string) => {
+    if (value) {
+      searchParams.set(NAME_PATTERN_PARAM, value);
+    } else {
+      searchParams.delete(NAME_PATTERN_PARAM);
+    }
+    setSearchParams(searchParams);
+    setTableURLState({
+      pagination: { ...pagination, pageIndex: 0 },
+      sorting,
+    });
+    setTaskDisplayNamePattern(value);
+  };
+
   const { data, error, isFetching, isLoading } =
     useTaskInstanceServiceGetTaskInstances(
       {
@@ -156,14 +181,17 @@ export const TaskInstances = () => {
         offset: pagination.pageIndex * pagination.pageSize,
         orderBy,
         state: filteredState === null ? undefined : [filteredState],
+        taskDisplayNamePattern: Boolean(taskDisplayNamePattern)
+          ? taskDisplayNamePattern
+          : undefined,
       },
       undefined,
       { enabled: !isNaN(pagination.pageSize) },
     );
 
   return (
     <Box pt={4}>
-      <Flex>
+      <HStack>
         <Select.Root
           collection={stateOptions}
           maxW="250px"
@@ -197,7 +225,14 @@ export const TaskInstances = () => {
             ))}
           </Select.Content>
         </Select.Root>
-      </Flex>
+        <SearchBar
+          buttonProps={{ disabled: true }}
+          defaultValue={taskDisplayNamePattern ?? ""}
+          hideAdvanced
+          onChange={handleSearchChange}
+          placeHolder="Search Tasks"
+        />
+      </HStack>
       <DataTable
         columns={columns}
         data={data?.task_instances ?? []}