F OpenNebula/one#5422: Add socket to vm detail

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
       }

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 = <span style={{ writingMode: 'vertical-rl' }}>{'>'}</span>
 
 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 <LinearProgress color='secondary' style={{ width: '100%' }} />
   }
 

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