From 4a6fbadf69b037b6a74c6482fa28214c9d5c79f9 Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Tue, 22 Feb 2022 19:40:38 +0100 Subject: [PATCH] F #5637: Fix minor on datatables (#1797) (cherry picked from commit 221204c0ce82885aed6498562283b9cd7f7b7f57) --- .../src/client/components/Tables/Hosts/row.js | 7 ++--- .../src/client/components/Tables/Vms/index.js | 31 +++++++++++++++---- .../src/client/components/Tables/Vms/row.js | 7 ++--- .../src/client/components/Tabs/Vm/index.js | 4 ++- .../src/client/features/OneApi/socket.js | 2 +- src/fireedge/src/client/features/OneApi/vm.js | 2 +- 6 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/fireedge/src/client/components/Tables/Hosts/row.js b/src/fireedge/src/client/components/Tables/Hosts/row.js index 617ed5f549..dc3f652ce9 100644 --- a/src/fireedge/src/client/components/Tables/Hosts/row.js +++ b/src/fireedge/src/client/components/Tables/Hosts/row.js @@ -20,12 +20,11 @@ import { HostCard } from 'client/components/Cards' const Row = memo( ({ original, ...props }) => { - const state = hostApi.endpoints.getHosts.useQueryState(undefined, { - selectFromResult: ({ data = [] }) => - data.find((host) => +host.ID === +original.ID), + const detail = hostApi.endpoints.getHost.useQueryState(original.ID, { + selectFromResult: ({ data }) => data, }) - return + return }, (prev, next) => prev.className === next.className ) diff --git a/src/fireedge/src/client/components/Tables/Vms/index.js b/src/fireedge/src/client/components/Tables/Vms/index.js index a87b2d95bf..3ad39e8939 100644 --- a/src/fireedge/src/client/components/Tables/Vms/index.js +++ b/src/fireedge/src/client/components/Tables/Vms/index.js @@ -39,14 +39,24 @@ const DEFAULT_DATA_CY = 'vms' * @returns {ReactElement} Virtual Machines table */ const VmsTable = (props) => { - const { rootProps = {}, searchProps = {}, ...rest } = props ?? {} + const { + rootProps = {}, + searchProps = {}, + initialState = {}, + ...rest + } = props ?? {} + rootProps['data-cy'] ??= DEFAULT_DATA_CY searchProps['data-cy'] ??= `search-${DEFAULT_DATA_CY}` + initialState.filters = useMemo( + () => initialState.filters ?? [], + [initialState.filters] + ) const { view, getResourceView } = useViews() const [totalData, setTotalData] = useState(() => []) const [args, setArgs] = useState(() => INITIAL_ARGS) - const { data, isSuccess, isFetching } = useGetVmsQuery(args, { + const { data, isSuccess, refetch, isFetching } = useGetVmsQuery(args, { refetchOnMountOrArgChange: true, }) @@ -69,7 +79,8 @@ const VmsTable = (props) => { }, [isFetching]) useEffect(() => { - data && + isSuccess && + data && setTotalData((prev) => { const notDuplicatedData = data.filter( ({ ID }) => !prev.find((vm) => vm.ID === ID) @@ -77,18 +88,26 @@ const VmsTable = (props) => { return prev.concat(notDuplicatedData).sort((a, b) => b.ID - a.ID) }) - }, [data]) + }, [isSuccess]) return ( totalData, [totalData])} + data={useMemo( + () => totalData?.filter(({ STATE }) => STATE !== '6'), + [totalData] + )} rootProps={rootProps} searchProps={searchProps} - refetch={() => setArgs(INITIAL_ARGS)} + refetch={() => { + totalData?.length >= +INTERVAL_ON_FIRST_RENDER + ? setArgs(INITIAL_ARGS) + : refetch() + }} isLoading={isFetching} getRowId={(row) => String(row.ID)} RowComponent={VmRow} + initialState={initialState} {...rest} /> ) diff --git a/src/fireedge/src/client/components/Tables/Vms/row.js b/src/fireedge/src/client/components/Tables/Vms/row.js index 0ee5f50fe4..792a660b20 100644 --- a/src/fireedge/src/client/components/Tables/Vms/row.js +++ b/src/fireedge/src/client/components/Tables/Vms/row.js @@ -20,12 +20,11 @@ import { VirtualMachineCard } from 'client/components/Cards' const Row = memo( ({ original, ...props }) => { - const state = vmApi.endpoints.getVms.useQueryState(undefined, { - selectFromResult: ({ data = [] }) => - data.find((vm) => +vm.ID === +original.ID), + const detail = vmApi.endpoints.getVm.useQueryState(original.ID, { + selectFromResult: ({ data }) => data, }) - return + return }, (prev, next) => prev.className === next.className ) diff --git a/src/fireedge/src/client/components/Tabs/Vm/index.js b/src/fireedge/src/client/components/Tabs/Vm/index.js index 2a53db92a3..42a7a4f9e6 100644 --- a/src/fireedge/src/client/components/Tabs/Vm/index.js +++ b/src/fireedge/src/client/components/Tabs/Vm/index.js @@ -46,7 +46,9 @@ const getTabComponent = (tabName) => const VmTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading } = useGetVmQuery(id) + const { isLoading } = useGetVmQuery(id, { + refetchOnMountOrArgChange: 10, + }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.VM diff --git a/src/fireedge/src/client/features/OneApi/socket.js b/src/fireedge/src/client/features/OneApi/socket.js index 0a0226194b..eca6f0160b 100644 --- a/src/fireedge/src/client/features/OneApi/socket.js +++ b/src/fireedge/src/client/features/OneApi/socket.js @@ -99,7 +99,7 @@ const UpdateFromSocket = dispatch( updateQueryData((draft) => { const index = draft.findIndex(({ ID }) => +ID === +id) - index !== -1 && (draft[index] = value) + index !== -1 ? (draft[index] = value) : draft.push(value) }) ) diff --git a/src/fireedge/src/client/features/OneApi/vm.js b/src/fireedge/src/client/features/OneApi/vm.js index 53eb79e24c..68e387cb9e 100644 --- a/src/fireedge/src/client/features/OneApi/vm.js +++ b/src/fireedge/src/client/features/OneApi/vm.js @@ -72,7 +72,7 @@ const vmApi = oneApi.injectEndpoints({ transformResponse: (data) => [data?.VM_POOL?.VM ?? []].flat(), providesTags: (vms) => vms - ? [vms.map(({ ID }) => ({ type: VM_POOL, id: `${ID}` })), VM_POOL] + ? [...vms.map(({ ID }) => ({ type: VM_POOL, id: `${ID}` })), VM_POOL] : [VM_POOL], }), getVm: builder.query({