Add filtering for tasks view

airflow-core/src/airflow/ui/public/i18n/locales/en/common.json

@@ -7,6 +7,7 @@
     "Providers": "Providers",
     "Variables": "Variables"
   },
+  "allOperators": "All Operators",
   "asset_one": "Asset",
   "asset_other": "Assets",
   "assetEvent_one": "Asset Event",

airflow-core/src/airflow/ui/public/i18n/locales/en/tasks.json

@@ -0,0 +1,10 @@
+{
+  "mapped": "Mapped",
+  "notMapped": "Not mapped",
+  "retries": "Retries",
+  "searchTasks": "Search tasks",
+  "selectMapped": "Select mapped",
+  "selectOperator": "Select operators",
+  "selectRetryValues": "Select retry values",
+  "selectTriggerRules": "Select trigger rules"
+}

airflow-core/src/airflow/ui/src/constants/searchParams.ts

@@ -35,12 +35,15 @@ export enum SearchParamsKeys {
   LOGICAL_DATE_GTE = "logical_date_gte",
   LOGICAL_DATE_LTE = "logical_date_lte",
   MAP_INDEX = "map_index",
+  MAPPED = "mapped",
   NAME_PATTERN = "name_pattern",
   OFFSET = "offset",
+  OPERATOR = "operator",
   OWNERS = "owners",
   PAUSED = "paused",
   POOL = "pool",
   RESPONSE_RECEIVED = "response_received",
+  RETRIES = "retries",
   RUN_AFTER_GTE = "run_after_gte",
   RUN_AFTER_LTE = "run_after_lte",
   RUN_ID = "run_id",
@@ -54,6 +57,7 @@ export enum SearchParamsKeys {
   TAGS_MATCH_MODE = "tags_match_mode",
   TASK_ID = "task_id",
   TASK_ID_PATTERN = "task_id_pattern",
+  TRIGGER_RULE = "trigger_rule",
   TRIGGERING_USER_NAME_PATTERN = "triggering_user_name_pattern",
   TRY_NUMBER = "try_number",
   USER = "user",

airflow-core/src/airflow/ui/src/pages/Dag/Tasks/TaskFilters/AttrSelectFilter.tsx

@@ -0,0 +1,60 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { type CollectionItem, createListCollection, type SelectValueChangeDetails } from "@chakra-ui/react";
+
+import { Select } from "src/components/ui";
+
+type Props = {
+  readonly handleSelect: (value: CollectionItem) => void;
+  readonly placeholderText: string;
+  readonly selectedValue: string | undefined;
+  readonly values: Array<{ key: string; label: string }> | undefined;
+};
+
+export const AttrSelectFilter = ({ handleSelect, placeholderText, selectedValue, values }: Props) => {
+  const thingCollection = createListCollection({ items: values ?? [] });
+  const handleValueChange = (details: SelectValueChangeDetails) => {
+    if (Array.isArray(details.value)) {
+      handleSelect(details.value[0]);
+    }
+  };
+  const selectedDisplay = values?.find((item) => item.key === selectedValue);
+
+  return (
+    <Select.Root
+      collection={thingCollection}
+      maxW="200px"
+      onValueChange={handleValueChange}
+      value={selectedValue === undefined ? [] : [selectedValue]}
+    >
+      <Select.Trigger colorPalette="blue" minW="max-content">
+        <Select.ValueText placeholder={placeholderText} width="auto">
+          {() => selectedDisplay?.label}
+        </Select.ValueText>
+      </Select.Trigger>
+      <Select.Content>
+        {thingCollection.items.map((option) => (
+          <Select.Item item={option.key} key={option.label}>
+            {option.label}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+};

airflow-core/src/airflow/ui/src/pages/Dag/Tasks/TaskFilters/AttrSelectFilterMulti.tsx

@@ -0,0 +1,75 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { type CollectionItem, createListCollection } from "@chakra-ui/react";
+import type { SelectValueChangeDetails } from "@chakra-ui/react";
+
+import { Select } from "src/components/ui";
+
+type Props = {
+  readonly displayPrefix: string | undefined;
+  readonly handleSelect: (values: Array<CollectionItem>) => void;
+  readonly placeholderText: string;
+  readonly selectedValues: Array<string> | undefined;
+  readonly values: Array<string> | undefined;
+};
+
+export const AttrSelectFilterMulti = ({
+  displayPrefix,
+  handleSelect,
+  placeholderText,
+  selectedValues,
+  values,
+}: Props) => {
+  const thingCollection = createListCollection({ items: values ?? [] });
+
+  const handleValueChange = (details: SelectValueChangeDetails) => {
+    if (Array.isArray(details.value)) {
+      handleSelect(details.value);
+    }
+  };
+  let displayValue = selectedValues?.join(", ") ?? undefined;
+
+  if (displayValue !== undefined && displayPrefix !== undefined) {
+    displayValue = `${displayPrefix}: ${displayValue}`;
+  }
+
+  // debugger;
+  return (
+    <Select.Root
+      collection={thingCollection}
+      maxW="200px"
+      multiple
+      onValueChange={handleValueChange}
+      value={selectedValues}
+    >
+      <Select.Trigger colorPalette="blue" minW="max-content">
+        <Select.ValueText placeholder={placeholderText} width="auto">
+          {() => displayValue}
+        </Select.ValueText>
+      </Select.Trigger>
+      <Select.Content>
+        {thingCollection.items.map((option) => (
+          <Select.Item item={option} key={option}>
+            {option}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+};

airflow-core/src/airflow/ui/src/pages/Dag/Tasks/TaskFilters/TaskFilters.tsx

@@ -0,0 +1,136 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, HStack } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
+
+import type { TaskCollectionResponse } from "openapi/requests";
+import { SearchBar } from "src/components/SearchBar.tsx";
+import { ResetButton } from "src/components/ui";
+import { SearchParamsKeys } from "src/constants/searchParams.ts";
+import { AttrSelectFilter } from "src/pages/Dag/Tasks/TaskFilters/AttrSelectFilter.tsx";
+import { AttrSelectFilterMulti } from "src/pages/Dag/Tasks/TaskFilters/AttrSelectFilterMulti.tsx";
+
+export const TaskFilters = ({ tasksData }: { readonly tasksData: TaskCollectionResponse | undefined }) => {
+  const { MAPPED, NAME_PATTERN, OPERATOR, RETRIES, TRIGGER_RULE } = SearchParamsKeys;
+  const { t: translate } = useTranslation("tasks");
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedOperators = searchParams.getAll(OPERATOR);
+  const selectedTriggerRules = searchParams.getAll(TRIGGER_RULE);
+  const selectedRetries = searchParams.getAll(RETRIES);
+  const selectedMapped = searchParams.get(MAPPED) ?? undefined;
+
+  const handleSelectedOperators = (value: Array<string> | undefined) => {
+    searchParams.delete(OPERATOR);
+    value?.forEach((x) => searchParams.append(OPERATOR, x));
+    setSearchParams(searchParams);
+  };
+  const handleSelectedRetries = (value: Array<string> | undefined) => {
+    searchParams.delete(RETRIES);
+    value?.forEach((x) => searchParams.append(RETRIES, x));
+    setSearchParams(searchParams);
+  };
+  const handleSelectedTriggerRules = (value: Array<string> | undefined) => {
+    searchParams.delete(TRIGGER_RULE);
+    value?.forEach((x) => searchParams.append(TRIGGER_RULE, x));
+    setSearchParams(searchParams);
+  };
+  const handleSelectedMapped = (value: string | undefined) => {
+    searchParams.delete(MAPPED);
+    if (value !== undefined) {
+      searchParams.set(MAPPED, value);
+    }
+    setSearchParams(searchParams);
+  };
+
+  const onClearFilters = () => {
+    setSearchParams();
+  };
+
+  const allOperatorNames: Array<string> = [
+    ...new Set(tasksData?.tasks.map((task) => task.operator_name).filter((item) => item !== null) ?? []),
+  ];
+  const allTriggerRules: Array<string> = [
+    ...new Set(tasksData?.tasks.map((task) => task.trigger_rule).filter((item) => item !== null) ?? []),
+  ];
+  const allRetryValues: Array<string> = [
+    ...new Set(
+      tasksData?.tasks.map((task) => task.retries?.toString()).filter((item) => item !== undefined) ?? [],
+    ),
+  ];
+  const allMappedValues = [
+    { key: "true", label: translate("mapped") },
+    { key: "false", label: translate("notMapped") },
+  ];
+  const taskNamePattern = searchParams.get(NAME_PATTERN) ?? "";
+  const handleSearchChange = (value: string) => {
+    if (value) {
+      searchParams.set(NAME_PATTERN, value);
+    } else {
+      searchParams.delete(NAME_PATTERN);
+    }
+    setSearchParams(searchParams);
+  };
+
+  return (
+    <>
+      <HStack justifyContent="space-between" style={{ marginBottom: "5px" }}>
+        <SearchBar
+          defaultValue={taskNamePattern}
+          hideAdvanced
+          hotkeyDisabled
+          onChange={handleSearchChange}
+          placeHolder={translate("searchTasks")}
+        />
+        <Box>
+          <ResetButton filterCount={searchParams.size} onClearFilters={onClearFilters} />
+        </Box>
+      </HStack>
+      <HStack justifyContent="space-between">
+        <AttrSelectFilterMulti
+          displayPrefix={undefined}
+          handleSelect={handleSelectedOperators}
+          placeholderText={translate("selectOperator")}
+          selectedValues={selectedOperators}
+          values={allOperatorNames}
+        />
+        <AttrSelectFilterMulti
+          displayPrefix={undefined}
+          handleSelect={handleSelectedTriggerRules}
+          placeholderText={translate("selectTriggerRules")}
+          selectedValues={selectedTriggerRules}
+          values={allTriggerRules}
+        />
+        <AttrSelectFilterMulti
+          displayPrefix={translate("retries")}
+          handleSelect={handleSelectedRetries}
+          placeholderText={translate("selectRetryValues")}
+          selectedValues={selectedRetries}
+          values={allRetryValues}
+        />
+        <AttrSelectFilter
+          handleSelect={handleSelectedMapped}
+          placeholderText={translate("selectMapped")}
+          selectedValue={selectedMapped}
+          values={allMappedValues}
+        />
+      </HStack>
+    </>
+  );
+};