From f593fae0c6dcf21b947889afd1579aed2e61e632 Mon Sep 17 00:00:00 2001 From: Kavya Katal Date: Mon, 15 Sep 2025 01:19:10 +0530 Subject: [PATCH 1/2] =?UTF-8?q?ui:=20switch=20DAG=20Run=20=E2=86=92=20Task?= =?UTF-8?q?=20Instances=20tab=20to=20FilterBar=20(pill=20UI)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/TaskInstances/RunTaskFilters.tsx | 43 +++++++++++++++++++ .../src/pages/TaskInstances/TaskInstances.tsx | 37 +++++----------- 2 files changed, 53 insertions(+), 27 deletions(-) create mode 100644 airflow-core/src/airflow/ui/src/pages/TaskInstances/RunTaskFilters.tsx diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstances/RunTaskFilters.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstances/RunTaskFilters.tsx new file mode 100644 index 0000000000000..3799205d6934a --- /dev/null +++ b/airflow-core/src/airflow/ui/src/pages/TaskInstances/RunTaskFilters.tsx @@ -0,0 +1,43 @@ +/*! + * Licensed to the Apache Software Foundation (ASF)... + */ +import { useMemo } from "react"; +import { FilterBar, type FilterValue } from "src/components/FilterBar"; +import { SearchParamsKeys } from "src/constants/searchParams"; +import { useFiltersHandler, type FilterableSearchParamsKeys } from "src/utils"; + +export const RunTaskFilters = () => { + // Keep to keys supported by FilterBar & TaskInstances API mapping + const searchParamKeys = useMemo( + (): Array => [ + SearchParamsKeys.TASK_ID_PATTERN, // pill label "Task" (text) + SearchParamsKeys.START_DATE, // date from + SearchParamsKeys.END_DATE, // date to + ], + [], + ); + + const { filterConfigs, handleFiltersChange, searchParams } = useFiltersHandler(searchParamKeys); + + const initialValues = useMemo(() => { + const values: Record = {}; + + filterConfigs.forEach((cfg) => { + const raw = searchParams.get(cfg.key); + + if (raw !== null && raw !== "") { + if (cfg.type === "number") { + const num = Number(raw); + + values[cfg.key] = Number.isNaN(num) ? raw : num; + } else { + values[cfg.key] = raw; + } + } + }); + + return values; + }, [searchParams, filterConfigs]); + + return ; +}; diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx index e9edce3df60f8..ba39787895542 100644 --- a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx +++ b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx @@ -1,25 +1,9 @@ /*! - * 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. + * Licensed to the Apache Software Foundation (ASF)... */ import { Flex, Link } from "@chakra-ui/react"; import type { ColumnDef } from "@tanstack/react-table"; import type { TFunction } from "i18next"; -import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom"; @@ -39,7 +23,7 @@ import { getDuration, useAutoRefresh, isStatePending } from "src/utils"; import { getTaskInstanceLink } from "src/utils/links"; import DeleteTaskInstanceButton from "./DeleteTaskInstanceButton"; -import { TaskInstancesFilter } from "./TaskInstancesFilter"; +import { RunTaskFilters } from "./RunTaskFilters"; type TaskInstanceRow = { row: { original: TaskInstanceResponse } }; @@ -49,6 +33,7 @@ const { POOL: POOL_PARAM, START_DATE: START_DATE_PARAM, STATE: STATE_PARAM, + TASK_ID_PATTERN: TASK_ID_PATTERN_PARAM, }: SearchParamsKeysType = SearchParamsKeys; const taskInstanceColumns = ({ @@ -76,7 +61,6 @@ const taskInstanceColumns = ({ : [ { accessorKey: "run_after", - // If we don't show the taskId column, make the dag run a link to the task instance cell: ({ row: { original } }: TaskInstanceRow) => Boolean(taskId) ? ( @@ -201,9 +185,9 @@ export const TaskInstances = () => { const hasFilteredState = filteredState.length > 0; const hasFilteredPool = pool.length > 0; - const [taskDisplayNamePattern, setTaskDisplayNamePattern] = useState( - searchParams.get(NAME_PATTERN_PARAM) ?? undefined, - ); + // Read the pill value (name_pattern), but accept legacy task_id_pattern too. + const taskNamePattern = + searchParams.get(NAME_PATTERN_PARAM) ?? searchParams.get(TASK_ID_PATTERN_PARAM) ?? undefined; const refetchInterval = useAutoRefresh({}); @@ -218,7 +202,7 @@ export const TaskInstances = () => { pool: hasFilteredPool ? pool : undefined, startDateGte: startDate ?? undefined, state: hasFilteredState ? filteredState : undefined, - taskDisplayNamePattern: groupId ?? taskDisplayNamePattern ?? undefined, + taskDisplayNamePattern: groupId ?? taskNamePattern ?? undefined, taskId: Boolean(groupId) ? undefined : taskId, }, undefined, @@ -230,10 +214,9 @@ export const TaskInstances = () => { return ( <> - + {/* Pill-based FilterBar for Task name + From/To */} + + Date: Mon, 15 Sep 2025 02:09:45 +0530 Subject: [PATCH 2/2] =?UTF-8?q?ui:=20switch=20DAG=20Run=20=E2=86=92=20Task?= =?UTF-8?q?=20Instances=20tab=20to=20FilterBar=20(pill=20UI)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Kavya Katal --- .../pages/TaskInstances/RunTaskFilters.tsx | 26 ++++++++++++++++--- .../src/pages/TaskInstances/TaskInstances.tsx | 18 ++++++++++++- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstances/RunTaskFilters.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstances/RunTaskFilters.tsx index 3799205d6934a..b7a9c279af497 100644 --- a/airflow-core/src/airflow/ui/src/pages/TaskInstances/RunTaskFilters.tsx +++ b/airflow-core/src/airflow/ui/src/pages/TaskInstances/RunTaskFilters.tsx @@ -1,7 +1,23 @@ /*! - * Licensed to the Apache Software Foundation (ASF)... + * 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 { useMemo } from "react"; + import { FilterBar, type FilterValue } from "src/components/FilterBar"; import { SearchParamsKeys } from "src/constants/searchParams"; import { useFiltersHandler, type FilterableSearchParamsKeys } from "src/utils"; @@ -11,8 +27,8 @@ export const RunTaskFilters = () => { const searchParamKeys = useMemo( (): Array => [ SearchParamsKeys.TASK_ID_PATTERN, // pill label "Task" (text) - SearchParamsKeys.START_DATE, // date from - SearchParamsKeys.END_DATE, // date to + SearchParamsKeys.START_DATE, // date from + SearchParamsKeys.END_DATE, // date to ], [], ); @@ -39,5 +55,7 @@ export const RunTaskFilters = () => { return values; }, [searchParams, filterConfigs]); - return ; + return ( + + ); }; diff --git a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx index ba39787895542..ae453f8ff5c77 100644 --- a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx +++ b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstances.tsx @@ -1,6 +1,22 @@ /*! - * Licensed to the Apache Software Foundation (ASF)... + * 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 { Flex, Link } from "@chakra-ui/react"; import type { ColumnDef } from "@tanstack/react-table"; import type { TFunction } from "i18next";