diff --git a/src/views/virtualmachines/list/VirtualMachinesList.tsx b/src/views/virtualmachines/list/VirtualMachinesList.tsx index 69497c11f..27db2cc96 100644 --- a/src/views/virtualmachines/list/VirtualMachinesList.tsx +++ b/src/views/virtualmachines/list/VirtualMachinesList.tsx @@ -39,7 +39,7 @@ import { OBJECTS_FETCHING_LIMIT } from '@virtualmachines/utils'; import { useVMListFilters } from '../utils'; -import VirtualMachineActionButton from './components/VirtualMachineActionButton'; +import VirtualMachineBulkActionButton from './components/VirtualMachineBulkActionButton'; import VirtualMachineEmptyState from './components/VirtualMachineEmptyState/VirtualMachineEmptyState'; import VirtualMachineListSummary from './components/VirtualMachineListSummary/VirtualMachineListSummary'; import VirtualMachineRow from './components/VirtualMachineRow/VirtualMachineRow'; @@ -186,7 +186,7 @@ const VirtualMachinesList: FC = ({ kind, namespace }) - + diff --git a/src/views/virtualmachines/list/components/VirtualMachineActionButton.tsx b/src/views/virtualmachines/list/components/VirtualMachineActionButton.tsx deleted file mode 100644 index 1c5f581c2..000000000 --- a/src/views/virtualmachines/list/components/VirtualMachineActionButton.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { FC } from 'react'; - -import ActionsDropdown from '@kubevirt-utils/components/ActionsDropdown/ActionsDropdown'; -import { t } from '@kubevirt-utils/hooks/useKubevirtTranslation'; -import { isEmpty } from '@kubevirt-utils/utils/utils'; -import useMultipleVirtualMachineActions from '@virtualmachines/actions/hooks/useMultipleVirtualMachineActions'; - -import { selectedVMs } from '../selectedVMs'; - -const VirtualMachineActionButton: FC = () => { - const actions = useMultipleVirtualMachineActions(selectedVMs.value); - - return ( - - ); -}; - -export default VirtualMachineActionButton; diff --git a/src/views/virtualmachines/list/components/VirtualMachineBulkActionButton.tsx b/src/views/virtualmachines/list/components/VirtualMachineBulkActionButton.tsx new file mode 100644 index 000000000..5a0ecf7a4 --- /dev/null +++ b/src/views/virtualmachines/list/components/VirtualMachineBulkActionButton.tsx @@ -0,0 +1,37 @@ +import React, { FC, useMemo } from 'react'; + +import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt'; +import ActionsDropdown from '@kubevirt-utils/components/ActionsDropdown/ActionsDropdown'; +import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; +import { convertResourceArrayToMap } from '@kubevirt-utils/resources/shared'; +import { isEmpty } from '@kubevirt-utils/utils/utils'; +import useMultipleVirtualMachineActions from '@virtualmachines/actions/hooks/useMultipleVirtualMachineActions'; + +import { selectedVMs } from '../selectedVMs'; + +type VirtualMachineBulkActionButtonProps = { + vms: V1VirtualMachine[]; +}; +const VirtualMachineBulkActionButton: FC = ({ vms }) => { + const { t } = useKubevirtTranslation(); + + const selectedVirtualMachines = useMemo(() => { + const vmsMapper = convertResourceArrayToMap(vms, true); + return selectedVMs.value.map( + (selectedVM) => vmsMapper?.[selectedVM.namespace]?.[selectedVM.name], + ); + }, [vms]); + + const actions = useMultipleVirtualMachineActions(selectedVirtualMachines); + + return ( + + ); +}; + +export default VirtualMachineBulkActionButton; diff --git a/src/views/virtualmachines/list/selectedVMs.ts b/src/views/virtualmachines/list/selectedVMs.ts index 0aa31f2f8..eb152386a 100644 --- a/src/views/virtualmachines/list/selectedVMs.ts +++ b/src/views/virtualmachines/list/selectedVMs.ts @@ -3,29 +3,38 @@ import { getName, getNamespace } from '@kubevirt-utils/resources/shared'; import { isEmpty } from '@kubevirt-utils/utils/utils'; import { signal } from '@preact/signals-core'; -export const selectedVMs = signal([]); +export const selectedVMs = signal<{ name: string; namespace: string }[]>([]); export const selectVM = (vm: V1VirtualMachine) => { - if (isEmpty(findVM(vm))) selectedVMs.value = [...selectedVMs.value, vm]; + const vmIdentifier = { name: getName(vm), namespace: getNamespace(vm) }; + if (isEmpty(findVM(vm))) { + selectedVMs.value = [...selectedVMs.value, vmIdentifier]; + } }; export const deselectVM = (vm: V1VirtualMachine) => { + const vmIdentifier = { name: getName(vm), namespace: getNamespace(vm) }; selectedVMs.value = selectedVMs.value.filter( (selectedVM) => - getName(selectedVM) !== getName(vm) || getNamespace(selectedVM) !== getNamespace(vm), + selectedVM.name !== vmIdentifier.name || selectedVM.namespace !== vmIdentifier.namespace, ); }; export const selectAll = (vms: V1VirtualMachine[]) => { - selectedVMs.value = Array.from(new Set([...selectedVMs.value, ...vms])); + const vmIdentifiers = vms.map((vm) => ({ name: getName(vm), namespace: getNamespace(vm) })); + selectedVMs.value = [...vmIdentifiers]; }; -export const deselectAll = () => (selectedVMs.value = []); +export const deselectAll = () => { + selectedVMs.value = []; +}; -export const findVM = (vm: V1VirtualMachine) => - selectedVMs.value.find( +export const findVM = (vm: V1VirtualMachine) => { + const vmIdentifier = { name: getName(vm), namespace: getNamespace(vm) }; + return selectedVMs.value.find( (selectedVM) => - getName(selectedVM) === getName(vm) && getNamespace(selectedVM) === getNamespace(vm), + selectedVM.name === vmIdentifier.name && selectedVM.namespace === vmIdentifier.namespace, ); +}; export const isVMSelected = (vm: V1VirtualMachine): boolean => !isEmpty(findVM(vm));