guan404ming commented on code in PR #54895:
URL: https://github.com/apache/airflow/pull/54895#discussion_r2298555119
##########
airflow-core/src/airflow/ui/src/pages/XCom/XComFilters.tsx:
##########
@@ -16,206 +16,151 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Box, Button, HStack, Text, VStack } from "@chakra-ui/react";
-import { useCallback, useMemo, useState } from "react";
+import { VStack } from "@chakra-ui/react";
+import { useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next";
-import { LuX } from "react-icons/lu";
-import { useSearchParams, useParams } from "react-router-dom";
+import { FiBarChart } from "react-icons/fi";
+import { MdDateRange, MdNumbers, MdSearch } from "react-icons/md";
+import { useParams, useSearchParams } from "react-router-dom";
+import { DagIcon } from "src/assets/DagIcon";
+import { TaskIcon } from "src/assets/TaskIcon";
import { useTableURLState } from "src/components/DataTable/useTableUrlState";
-import { DateTimeInput } from "src/components/DateTimeInput";
-import { SearchBar } from "src/components/SearchBar";
-import { NumberInputField, NumberInputRoot } from
"src/components/ui/NumberInput";
+import { FilterBar, type FilterConfig, type FilterValue } from
"src/components/FilterBar";
import { SearchParamsKeys } from "src/constants/searchParams";
-const FILTERS = [
- {
- hotkeyDisabled: false,
- key: SearchParamsKeys.KEY_PATTERN,
- translationKey: "keyPlaceholder",
- type: "search",
- },
- {
- hotkeyDisabled: true,
- key: SearchParamsKeys.DAG_DISPLAY_NAME_PATTERN,
- translationKey: "dagDisplayNamePlaceholder",
- type: "search",
- },
- {
- hotkeyDisabled: true,
- key: SearchParamsKeys.RUN_ID_PATTERN,
- translationKey: "runIdPlaceholder",
- type: "search",
- },
- {
- hotkeyDisabled: true,
- key: SearchParamsKeys.TASK_ID_PATTERN,
- translationKey: "taskIdPlaceholder",
- type: "search",
- },
- {
- hotkeyDisabled: true,
- key: SearchParamsKeys.MAP_INDEX,
- translationKey: "mapIndexPlaceholder",
- type: "number",
- },
- {
- key: SearchParamsKeys.LOGICAL_DATE_GTE,
- translationKey: "logicalDateFromPlaceholder",
- type: "datetime",
- },
- {
- key: SearchParamsKeys.LOGICAL_DATE_LTE,
- translationKey: "logicalDateToPlaceholder",
- type: "datetime",
- },
- {
- key: SearchParamsKeys.RUN_AFTER_GTE,
- translationKey: "runAfterFromPlaceholder",
- type: "datetime",
- },
- {
- key: SearchParamsKeys.RUN_AFTER_LTE,
- translationKey: "runAfterToPlaceholder",
- type: "datetime",
- },
-] as const satisfies ReadonlyArray<{
- readonly hotkeyDisabled?: boolean;
- readonly key: string;
- readonly translationKey: string;
- readonly type: "datetime" | "number" | "search";
-}>;
-
export const XComFilters = () => {
const [searchParams, setSearchParams] = useSearchParams();
const { dagId = "~", mapIndex = "-1", runId = "~", taskId = "~" } =
useParams();
const { setTableURLState, tableURLState } = useTableURLState();
const { pagination, sorting } = tableURLState;
- const { t: translate } = useTranslation(["browse", "common"]);
- const [resetKey, setResetKey] = useState(0);
-
- const visibleFilters = useMemo(
- () =>
- FILTERS.filter((filter) => {
- switch (filter.key) {
- case SearchParamsKeys.DAG_DISPLAY_NAME_PATTERN:
- return dagId === "~";
- case SearchParamsKeys.KEY_PATTERN:
- case SearchParamsKeys.LOGICAL_DATE_GTE:
- case SearchParamsKeys.LOGICAL_DATE_LTE:
- case SearchParamsKeys.RUN_AFTER_GTE:
- case SearchParamsKeys.RUN_AFTER_LTE:
- return true;
- case SearchParamsKeys.MAP_INDEX:
- return mapIndex === "-1";
- case SearchParamsKeys.RUN_ID_PATTERN:
- return runId === "~";
- case SearchParamsKeys.TASK_ID_PATTERN:
- return taskId === "~";
- default:
- return true;
- }
- }),
- [dagId, mapIndex, runId, taskId],
- );
+ const { t: translate } = useTranslation(["browse", "common", "admin"]);
+
+ const filterConfigs: Array<FilterConfig> = useMemo(() => {
+ const configs: Array<FilterConfig> = [
+ {
+ icon: <MdSearch />,
+ key: SearchParamsKeys.KEY_PATTERN,
+ label: translate("admin:columns.key"),
+ placeholder: translate("common:filters.keyPlaceholder"),
+ type: "text",
+ },
+ {
+ icon: <MdDateRange />,
+ key: SearchParamsKeys.LOGICAL_DATE_GTE,
+ label: translate("common:filters.logicalDateFromPlaceholder"),
+ placeholder: translate("common:filters.logicalDateFromPlaceholder"),
+ type: "date",
+ },
+ {
+ icon: <MdDateRange />,
+ key: SearchParamsKeys.LOGICAL_DATE_LTE,
+ label: translate("common:filters.logicalDateToPlaceholder"),
+ placeholder: translate("common:filters.logicalDateToPlaceholder"),
+ type: "date",
+ },
+ {
+ icon: <MdDateRange />,
+ key: SearchParamsKeys.RUN_AFTER_GTE,
+ label: translate("common:filters.runAfterFromPlaceholder"),
+ placeholder: translate("common:filters.runAfterFromPlaceholder"),
+ type: "date",
+ },
+ {
+ icon: <MdDateRange />,
+ key: SearchParamsKeys.RUN_AFTER_LTE,
+ label: translate("common:filters.runAfterToPlaceholder"),
+ placeholder: translate("common:filters.runAfterToPlaceholder"),
+ type: "date",
+ },
+ ];
+
+ if (dagId === "~") {
+ configs.push({
+ icon: <DagIcon />,
+ key: SearchParamsKeys.DAG_DISPLAY_NAME_PATTERN,
+ label: translate("common:dagName"),
+ placeholder: translate("common:filters.dagDisplayNamePlaceholder"),
+ type: "text",
+ });
+ }
+
+ if (runId === "~") {
+ configs.push({
+ icon: <FiBarChart />,
+ key: SearchParamsKeys.RUN_ID_PATTERN,
+ label: translate("common:runId"),
+ placeholder: translate("common:filters.runIdPlaceholder"),
+ type: "text",
+ });
+ }
+
+ if (taskId === "~") {
+ configs.push({
+ icon: <TaskIcon />,
+ key: SearchParamsKeys.TASK_ID_PATTERN,
+ label: translate("common:taskId"),
+ placeholder: translate("common:filters.taskIdPlaceholder"),
+ type: "text",
+ });
+ }
+
+ if (mapIndex === "-1") {
+ configs.push({
+ icon: <MdNumbers />,
+ key: SearchParamsKeys.MAP_INDEX,
+ label: translate("common:mapIndex"),
+ min: -1,
+ placeholder: translate("common:filters.mapIndexPlaceholder"),
+ type: "number",
+ });
+ }
+
+ return configs;
+ }, [dagId, mapIndex, runId, taskId, translate]);
+
+ const initialValues = useMemo(() => {
+ const values: Record<string, FilterValue> = {};
- const handleFilterChange = useCallback(
- (paramKey: string) => (value: string) => {
- if (value === "") {
- searchParams.delete(paramKey);
- } else {
- searchParams.set(paramKey, value);
+ filterConfigs.forEach((config) => {
+ const value = searchParams.get(config.key);
+
+ if (value !== null && value !== "") {
+ values[config.key] = config.type === "number" ? Number(value) : value;
}
+ });
+
+ return values;
+ }, [searchParams, filterConfigs]);
+
+ const handleFiltersChange = useCallback(
Review Comment:
We could also extract this function to make it reusable.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscr...@airflow.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
