diff --git a/graylog2-web-interface/src/components/event-definitions/event-definitions/EventDefinitionsContainer.tsx b/graylog2-web-interface/src/components/event-definitions/event-definitions/EventDefinitionsContainer.tsx index b437189e16c1..2daf2630c90c 100644 --- a/graylog2-web-interface/src/components/event-definitions/event-definitions/EventDefinitionsContainer.tsx +++ b/graylog2-web-interface/src/components/event-definitions/event-definitions/EventDefinitionsContainer.tsx @@ -27,6 +27,7 @@ import Routes from 'routing/Routes'; import type { ColumnRenderers } from 'components/common/EntityDataTable'; import FilterValueRenderers from 'components/streams/StreamsOverview/FilterValueRenderers'; import { keyFn, fetchEventDefinitions } from 'components/event-definitions/hooks/useEventDefinitions'; +import useTableComponents from 'components/event-definitions/event-definitions/useTableComponents'; import EventDefinitionActions from './EventDefinitionActions'; import SchedulingCell from './SchedulingCell'; @@ -71,6 +72,8 @@ const EventDefinitionsContainer = () => { ), []); + const { bulkSelection } = useTableComponents(); + return ( humanName="event definitions" columnsOrder={COLUMNS_ORDER} @@ -82,7 +85,8 @@ const EventDefinitionsContainer = () => { keyFn={keyFn} entityAttributesAreCamelCase={false} filterValueRenderers={FilterValueRenderers} - columnRenderers={columnRenderers} /> + columnRenderers={columnRenderers} + bulkSelection={bulkSelection} /> ); }; diff --git a/graylog2-web-interface/src/components/event-definitions/event-definitions/useTableComponents.tsx b/graylog2-web-interface/src/components/event-definitions/event-definitions/useTableComponents.tsx new file mode 100644 index 000000000000..350f8883787d --- /dev/null +++ b/graylog2-web-interface/src/components/event-definitions/event-definitions/useTableComponents.tsx @@ -0,0 +1,45 @@ +/* + * Copyright (C) 2020 Graylog, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the Server Side Public License, version 1, + * as published by MongoDB, Inc. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * Server Side Public License for more details. + * + * You should have received a copy of the Server Side Public License + * along with this program. If not, see + * . + */ +import * as React from 'react'; +import { useMemo, useState } from 'react'; + +import type { EventDefinition } from 'components/event-definitions/event-definitions-types'; + +import BulkActions from './BulkActions'; + +const useTableElements = () => { + const [selectedEntitiesData, setSelectedEntitiesData] = useState<{[eventDefinitionId: string]: EventDefinition}>({}); + const bulkSelection = useMemo(() => ({ + onChangeSelection: (selectedItemsIds: Array, list: Array) => { + setSelectedEntitiesData((cur) => { + const uniqueSelectedIds = [...new Set(selectedItemsIds)]; + const eventDefinitionsMap = Object.fromEntries(list.map((event) => [event.id, event])); + + return Object.fromEntries(uniqueSelectedIds.map((selectedItemId) => [selectedItemId, cur[selectedItemId] ?? eventDefinitionsMap[selectedItemId]])); + }); + }, + actions: , + + }), [selectedEntitiesData]); + + return { + bulkActions: , + bulkSelection, + }; +}; + +export default useTableElements;