This is an automated email from the ASF dual-hosted git repository. jedcunningham pushed a commit to branch v2-9-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 83e7dec335d40e3435607172c3b348c245dc39a6 Author: Brent Bovenzi <[email protected]> AuthorDate: Thu Apr 4 12:56:27 2024 -0400 Improve audit log events filter (#38719) (cherry picked from commit b094da448f0adbf24d6492b62748625c49da2e5b) --- airflow/www/static/js/dag/details/AuditLog.tsx | 73 +++++++++++++++----------- 1 file changed, 41 insertions(+), 32 deletions(-) diff --git a/airflow/www/static/js/dag/details/AuditLog.tsx b/airflow/www/static/js/dag/details/AuditLog.tsx index e30fbbe68e..d991812781 100644 --- a/airflow/www/static/js/dag/details/AuditLog.tsx +++ b/airflow/www/static/js/dag/details/AuditLog.tsx @@ -29,6 +29,9 @@ import { Input, SimpleGrid, Button, + RadioGroup, + Stack, + Radio, } from "@chakra-ui/react"; import { createColumnHelper } from "@tanstack/react-table"; import { snakeCase } from "lodash"; @@ -74,12 +77,21 @@ const AuditLog = ({ taskId, run }: Props) => { const { tableURLState, setTableURLState } = useTableURLState({ sorting: [{ id: "when", desc: true }], }); - const [includedEvents, setIncludedEvents] = useState( - configIncludedEvents.length ? configIncludedEvents.split(",") : [] - ); - const [excludedEvents, setExcludedEvents] = useState( - configExcludedEvents.length ? configExcludedEvents.split(",") : [] - ); + const includedEvents = configIncludedEvents.length + ? configIncludedEvents.split(",") + : []; + const excludedEvents = configExcludedEvents.length + ? configExcludedEvents.split(",") + : []; + + let defaultEventFilter = "include"; + let defaultEvents = includedEvents; + if (!includedEvents.length && excludedEvents.length) { + defaultEventFilter = "exclude"; + defaultEvents = excludedEvents; + } + const [eventFilter, setEventFilter] = useState(defaultEventFilter); + const [events, setEvents] = useState(defaultEvents); const sort = tableURLState.sorting[0]; const orderBy = sort ? `${sort.desc ? "-" : ""}${snakeCase(sort.id)}` : ""; @@ -94,8 +106,10 @@ const AuditLog = ({ taskId, run }: Props) => { limit: tableURLState.pagination.pageSize, offset: tableURLState.pagination.pageIndex * tableURLState.pagination.pageSize, - includedEvents: includedEvents ? includedEvents.join(",") : undefined, - excludedEvents: excludedEvents ? excludedEvents.join(",") : undefined, + includedEvents: + eventFilter === "include" && events ? events.join(",") : undefined, + excludedEvents: + eventFilter === "exclude" && events ? events.join(",") : undefined, }); const columns = useMemo(() => { @@ -155,31 +169,17 @@ const AuditLog = ({ taskId, run }: Props) => { }), }; - const excludedEventsSelectProps = useChakraSelectProps<Option, true>({ + const eventsSelectProps = useChakraSelectProps<Option, true>({ isMulti: true, + noOptionsMessage: () => "Type to add new event", tagVariant: "solid", - value: excludedEvents.map((e) => ({ + value: events.map((e) => ({ label: e, value: e, })), onChange: (options) => { - setExcludedEvents((options || []).map(({ value }) => value)); + setEvents((options || []).map(({ value }) => value)); }, - placeholder: "Type to filter an event", - chakraStyles, - }); - - const includedEventsSelectProps = useChakraSelectProps<Option, true>({ - isMulti: true, - tagVariant: "solid", - value: includedEvents.map((e) => ({ - label: e, - value: e, - })), - onChange: (options) => { - setIncludedEvents((options || []).map(({ value }) => value)); - }, - placeholder: "Type to filter an event", chakraStyles, }); @@ -246,12 +246,21 @@ const AuditLog = ({ taskId, run }: Props) => { <FormHelperText /> </FormControl> <FormControl> - <FormLabel>Events to exclude</FormLabel> - <CreatableSelect {...excludedEventsSelectProps} /> - </FormControl> - <FormControl> - <FormLabel>Events to include</FormLabel> - <CreatableSelect {...includedEventsSelectProps} /> + <FormLabel display="flex" alignItems="center"> + Events to + <RadioGroup + onChange={setEventFilter} + value={eventFilter} + display="inline-flex" + ml={2} + > + <Stack direction="row"> + <Radio value="include">Include</Radio> + <Radio value="exclude">Exclude</Radio> + </Stack> + </RadioGroup> + </FormLabel> + <CreatableSelect {...eventsSelectProps} /> </FormControl> </SimpleGrid> <NewTable
