diff --git a/src/fireedge/src/client/components/Tables/Enhanced/index.js b/src/fireedge/src/client/components/Tables/Enhanced/index.js
index 8d254d6b82..cc5eb59da9 100644
--- a/src/fireedge/src/client/components/Tables/Enhanced/index.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js
@@ -91,7 +91,16 @@ const EnhancedTable = ({
data,
defaultColumn,
getRowId,
+ // When table has update, disable all of the auto resetting
autoResetPage: false,
+ autoResetRowState: false,
+ autoResetSelectedRow: false,
+ autoResetExpanded: false,
+ autoResetGroupBy: false,
+ autoResetSelectedRows: false,
+ autoResetSortBy: false,
+ autoResetFilters: false,
+ // -------------------------------------
initialState: {
pageSize
}
diff --git a/src/fireedge/src/client/components/Tables/Vms/detail.js b/src/fireedge/src/client/components/Tables/Vms/detail.js
index b5266b6970..f7d812f27e 100644
--- a/src/fireedge/src/client/components/Tables/Vms/detail.js
+++ b/src/fireedge/src/client/components/Tables/Vms/detail.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
import { LinearProgress, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core'
import Tabs from 'client/components/Tabs'
@@ -14,33 +14,17 @@ import { prettyBytes } from 'client/utils'
const NavArrowDown = {'>'}
const VmDetail = ({ id }) => {
- const [socket, setSocket] = useState({})
+ const { getHooksSocket } = useSocket()
+ const socket = getHooksSocket({ resource: 'vm', id })
const { getVm } = useVmApi()
- const { getHooksSocketTemporal } = useSocket()
-
- const { data, fetchRequest, loading, error } = useFetch(getVm)
- const isLoading = (!data && !error) || loading
+ const { data, fetchRequest, loading, error } = useFetch(getVm, socket)
useEffect(() => {
fetchRequest(id)
}, [id])
- useEffect(() => {
- if (!isLoading && data) {
- const client = getHooksSocketTemporal({ resource: 'vm', id })
-
- setSocket(client)
-
- client.connect(console.log)
- }
-
- return () => {
- socket?.disconnect()
- }
- }, [isLoading, data])
-
- if (isLoading) {
+ if ((!data && !error) || loading) {
return
}
diff --git a/src/fireedge/src/client/hooks/useSocket.js b/src/fireedge/src/client/hooks/useSocket.js
index c63a3b7b90..7945b7b3e1 100644
--- a/src/fireedge/src/client/hooks/useSocket.js
+++ b/src/fireedge/src/client/hooks/useSocket.js
@@ -1,50 +1,59 @@
-import { useContext, useCallback } from 'react'
+import { useCallback } from 'react'
import socketIO from 'socket.io-client'
+import { useDispatch } from 'react-redux'
-import { APP_URL, SOCKETS } from 'client/constants'
-import { SocketContext } from 'client/providers/socketProvider'
+import { WEBSOCKET_URL, SOCKETS } from 'client/constants'
import { useAuth } from 'client/features/Auth'
import { useGeneral } from 'client/features/General'
+import { eventUpdateResourceState, getResourceFromEventState } from 'client/features/One/socket/actions'
-const createWebsocket = (path, query) => socketIO({ path: `${APP_URL}/${path}`, query })
+const createWebsocket = (path, query) => socketIO({
+ path: `${WEBSOCKET_URL}/${path}`,
+ query,
+ autoConnect: false,
+ timeout: 10_000,
+ reconnectionAttempts: 5
+})
export default function useSocket () {
+ const dispatch = useDispatch()
const { jwt } = useAuth()
const { zone } = useGeneral()
- const { socket, isConnected } = useContext(SocketContext)
-
- const getHooksSocketTemporal = useCallback(({ resource, id }) => {
- const socket = createWebsocket(
- SOCKETS.hooks,
- { token: jwt, zone, resource, id }
- )
+ const getHooksSocket = useCallback(query => {
+ const socket = createWebsocket(SOCKETS.hooks, { token: jwt, zone, ...query })
return {
connect: callback => {
- socket.on(SOCKETS.hooks, callback)
+ socket.on(SOCKETS.hooks, data => {
+ // update the list on redux state
+ dispatch(eventUpdateResourceState(data))
+ // return data from event
+ callback(getResourceFromEventState(data).value)
+ })
+
+ socket.connect()
},
disconnect: () => {
- socket.disconnect()
+ socket.connected && socket.disconnect()
}
}
}, [jwt, zone])
- const getHooksSocket = useCallback(func => ({
- on: () => isConnected && socket.on(SOCKETS.hooks, func),
- off: () => isConnected && socket.off(SOCKETS.hooks, func)
- }), [socket, isConnected])
+ const getProvisionSocket = useCallback(func => {
+ const socket = createWebsocket(SOCKETS.provision, { token: jwt, zone })
- const getProvisionSocket = useCallback(func => ({
- on: () => isConnected && socket.on(SOCKETS.provision, func),
- off: () => isConnected && socket.off(SOCKETS.provision, func)
- }), [socket, isConnected])
+ socket.on(SOCKETS.provision, func)
+
+ return {
+ on: () => socket.connect(),
+ off: () => socket.disconnect()
+ }
+ }, [])
return {
- isConnected,
getHooksSocket,
- getProvisionSocket,
- getHooksSocketTemporal
+ getProvisionSocket
}
}