F #5637: Fix minor on datatables (#1797)

(cherry picked from commit 221204c0ce82885aed6498562283b9cd7f7b7f57)

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 <HostCard host={state ?? original} rootProps={props} />
+    return <HostCard host={detail ?? original} rootProps={props} />
   },
   (prev, next) => prev.className === next.className
 )

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 (
     <EnhancedTable
       columns={columns}
-      data={useMemo(() => 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}
     />
   )

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 <VirtualMachineCard vm={state ?? original} rootProps={props} />
+    return <VirtualMachineCard vm={detail ?? original} rootProps={props} />
   },
   (prev, next) => prev.className === next.className
 )

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

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)
           })
         )
 

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({