This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 1766a9e0d9a Use FilterBar for Asset Event filters (#55522)
1766a9e0d9a is described below
commit 1766a9e0d9a42707c4af728f90429c28640efe87
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Thu Sep 11 12:44:32 2025 -0600
Use FilterBar for Asset Event filters (#55522)
---
.../ui/src/components/Assets/AssetEventsFilter.tsx | 107 +++++----------------
.../src/airflow/ui/src/constants/filterConfigs.tsx | 10 ++
.../src/airflow/ui/src/utils/useFiltersHandler.ts | 2 +
3 files changed, 36 insertions(+), 83 deletions(-)
diff --git
a/airflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
b/airflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
index bfa46c9b7df..ceda8443c08 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEventsFilter.tsx
@@ -16,96 +16,37 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { VStack, HStack, Box, Text, Button } from "@chakra-ui/react";
-import { useCallback, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { LuX } from "react-icons/lu";
-import { useSearchParams } from "react-router-dom";
+import { useMemo } from "react";
-import { DateTimeInput } from "src/components/DateTimeInput";
-import { SearchBar } from "src/components/SearchBar";
+import { FilterBar } from "src/components/FilterBar";
import { SearchParamsKeys } from "src/constants/searchParams";
+import { useFiltersHandler, type FilterableSearchParamsKeys } from
"src/utils/useFiltersHandler";
-const { DAG_ID, END_DATE, START_DATE, TASK_ID } = SearchParamsKeys;
-const filterKeys = [START_DATE, END_DATE, DAG_ID, TASK_ID];
+const FILTER_KEYS: Array<FilterableSearchParamsKeys> = [
+ SearchParamsKeys.START_DATE,
+ SearchParamsKeys.END_DATE,
+ SearchParamsKeys.DAG_ID,
+ SearchParamsKeys.TASK_ID,
+];
export const AssetEventsFilter = () => {
- const { t: translate } = useTranslation("common");
- const [searchParams, setSearchParams] = useSearchParams();
- const startDate = searchParams.get(START_DATE) ?? "";
- const endDate = searchParams.get(END_DATE) ?? "";
- const dagId = searchParams.get(DAG_ID) ?? "";
- const taskId = searchParams.get(TASK_ID) ?? "";
- const [resetKey, setResetKey] = useState(0);
- const handleFilterChange = useCallback(
- (paramKey: string) => (value: string) => {
- if (value === "") {
- searchParams.delete(paramKey);
- } else {
- searchParams.set(paramKey, value);
+ const { filterConfigs, handleFiltersChange, searchParams } =
useFiltersHandler(FILTER_KEYS);
+
+ const initialValues = useMemo(() => {
+ const values: Record<string, string> = {};
+
+ FILTER_KEYS.forEach((key) => {
+ const value = searchParams.get(key);
+
+ if (value !== null && value.trim() !== "") {
+ values[key] = value;
}
- setSearchParams(searchParams);
- },
- [searchParams, setSearchParams],
- );
- const filterCount = useMemo(
- () => filterKeys.reduce((acc, key) => (searchParams.get(key) === null ?
acc : acc + 1), 0),
- [searchParams],
- );
- const handleResetFilters = useCallback(() => {
- filterKeys.forEach((key) => searchParams.delete(key));
- setSearchParams(searchParams);
- setResetKey((prev) => prev + 1);
- }, [searchParams, setSearchParams]);
+ });
+
+ return values;
+ }, [searchParams]);
return (
- <VStack align="start" gap={4} paddingY="4px">
- <HStack flexWrap="wrap" gap={4}>
- <Box w="200px">
- <Text fontSize="xs">{translate("common:table.from")}</Text>
- <DateTimeInput
- onChange={(event) =>
handleFilterChange(START_DATE)(event.target.value)}
- value={startDate}
- />
- </Box>
- <Box w="200px">
- <Text fontSize="xs">{translate("common:table.to")}</Text>
- <DateTimeInput
- onChange={(event) =>
handleFilterChange(END_DATE)(event.target.value)}
- value={endDate}
- />
- </Box>
- <Box w="200px">
- <Text
fontSize="xs">{translate("common:filters.dagDisplayNamePlaceholder")}</Text>
- <SearchBar
- defaultValue={dagId}
- hideAdvanced
- hotkeyDisabled={true}
- key={`dag-id-${resetKey}`}
- onChange={handleFilterChange(DAG_ID)}
- placeHolder={translate("common:filters.dagDisplayNamePlaceholder")}
- />
- </Box>
- <Box w="200px">
- <Text
fontSize="xs">{translate("common:filters.taskIdPlaceholder")}</Text>
- <SearchBar
- defaultValue={taskId}
- hideAdvanced
- hotkeyDisabled={true}
- key={`task-id-${resetKey}`}
- onChange={handleFilterChange(TASK_ID)}
- placeHolder={translate("common:filters.taskIdPlaceholder")}
- />
- </Box>
- <Box alignSelf="end">
- {filterCount > 0 && (
- <Button onClick={handleResetFilters} size="md" variant="outline">
- <LuX />
- {translate("common:table.filterReset", { count: filterCount })}
- </Button>
- )}
- </Box>
- </HStack>
- </VStack>
+ <FilterBar configs={filterConfigs} initialValues={initialValues}
onFiltersChange={handleFiltersChange} />
);
};
diff --git a/airflow-core/src/airflow/ui/src/constants/filterConfigs.tsx
b/airflow-core/src/airflow/ui/src/constants/filterConfigs.tsx
index 5bf8c74a832..0dc09b1fd55 100644
--- a/airflow-core/src/airflow/ui/src/constants/filterConfigs.tsx
+++ b/airflow-core/src/airflow/ui/src/constants/filterConfigs.tsx
@@ -59,6 +59,11 @@ export const useFilterConfigs = () => {
label: translate("common:dagId"),
type: FilterTypes.TEXT,
},
+ [SearchParamsKeys.END_DATE]: {
+ icon: <MdDateRange />,
+ label: translate("common:table.to"),
+ type: FilterTypes.DATE,
+ },
[SearchParamsKeys.EVENT_TYPE]: {
label: translate("browse:auditLog.filters.eventType"),
type: FilterTypes.TEXT,
@@ -106,6 +111,11 @@ export const useFilterConfigs = () => {
label: translate("common:runId"),
type: FilterTypes.TEXT,
},
+ [SearchParamsKeys.START_DATE]: {
+ icon: <MdDateRange />,
+ label: translate("common:table.from"),
+ type: FilterTypes.DATE,
+ },
[SearchParamsKeys.TASK_ID]: {
hotkeyDisabled: true,
icon: <TaskIcon />,
diff --git a/airflow-core/src/airflow/ui/src/utils/useFiltersHandler.ts
b/airflow-core/src/airflow/ui/src/utils/useFiltersHandler.ts
index b6b16fe850a..241a6e9287a 100644
--- a/airflow-core/src/airflow/ui/src/utils/useFiltersHandler.ts
+++ b/airflow-core/src/airflow/ui/src/utils/useFiltersHandler.ts
@@ -29,6 +29,7 @@ export type FilterableSearchParamsKeys =
| SearchParamsKeys.BEFORE
| SearchParamsKeys.DAG_DISPLAY_NAME_PATTERN
| SearchParamsKeys.DAG_ID
+ | SearchParamsKeys.END_DATE
| SearchParamsKeys.EVENT_TYPE
| SearchParamsKeys.KEY_PATTERN
| SearchParamsKeys.LOGICAL_DATE_GTE
@@ -38,6 +39,7 @@ export type FilterableSearchParamsKeys =
| SearchParamsKeys.RUN_AFTER_LTE
| SearchParamsKeys.RUN_ID
| SearchParamsKeys.RUN_ID_PATTERN
+ | SearchParamsKeys.START_DATE
| SearchParamsKeys.TASK_ID
| SearchParamsKeys.TASK_ID_PATTERN
| SearchParamsKeys.TRY_NUMBER
