[grid] UI Liveview disconnect noVNC websocket when closing dialog (#14598)

Author: VietND96

Diff for: javascript/grid-ui/src/components/LiveView/LiveView.tsx

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'react'
 import RFB from '@novnc/novnc/core/rfb'
 import PasswordDialog from './PasswordDialog'
 import MuiAlert, { AlertProps } from '@mui/material/Alert'
@@ -28,7 +28,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert (
   return <MuiAlert elevation={6} ref={ref} variant='filled' {...props} />
 })
 
-function LiveView (props) {
+const LiveView = forwardRef((props, ref) => {
   let canvas: any = null
 
   const [open, setOpen] = useState(false)
@@ -49,6 +49,10 @@ function LiveView (props) {
     setRfb(null)
   }
 
+  useImperativeHandle(ref, () => ({
+    disconnect
+  }))
+
   const connect = () => {
     disconnect()
 
@@ -109,6 +113,7 @@ function LiveView (props) {
   }
 
   const handlePasswordDialogClose = () => {
+    disconnect()
     props.onClose()
   }
 
@@ -132,6 +137,7 @@ function LiveView (props) {
       return
     }
     setOpenErrorAlert(false)
+    disconnect()
     props.onClose()
   }
 
@@ -176,6 +182,6 @@ function LiveView (props) {
       </Snackbar>
     </div>
   )
-}
+})
 
 export default LiveView

Diff for: javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
@@ -177,6 +177,14 @@ function RunningSessions (props) {
   const [rowsPerPage, setRowsPerPage] = useState(10)
   const [searchFilter, setSearchFilter] = useState('')
   const [searchBarHelpOpen, setSearchBarHelpOpen] = useState(false)
+  const liveViewRef = useRef(null)
+
+  const handleDialogClose = () => {
+    if (liveViewRef.current) {
+      liveViewRef.current.disconnect()
+    }
+    setRowLiveViewOpen('')
+  }
 
   const handleRequestSort = (event: React.MouseEvent<unknown>,
     property: keyof SessionData) => {
@@ -379,14 +387,15 @@ function RunningSessions (props) {
                                       sx={{ height: '600px' }}
                                     >
                                       <LiveView
+                                        ref={liveViewRef}
                                         url={row.vnc as string}
                                         scaleViewport
                                         onClose={() => setRowLiveViewOpen('')}
                                       />
                                     </DialogContent>
                                     <DialogActions>
                                       <Button
-                                        onClick={() => setRowLiveViewOpen('')}
+                                        onClick={handleDialogClose}
                                         color='primary'
                                         variant='contained'
                                       >