[grid] Add feature to go directly to a VNC session (#15179)

* [grid] Add feature to go directly to a VNC session

Users can now go directly to a VNC session if they have the session ID.

This makes it easier to create direct links to a running session which
can make it easier to fault trace a running session.

Fixes #15178

* Simplify sessionId check logic

---------

Co-authored-by: Viet Nguyen Duc <[email protected]>
Co-authored-by: Puja Jagani <[email protected]>

Author: 3 people

javascript/grid-ui/src/App.tsx

@@ -104,6 +104,7 @@ function App () {
           <Container maxWidth={false} sx={{ paddingY: 4 }}>
             <Routes>
               <Route path='/sessions' element={<Sessions />} />
+              <Route path='/session/:sessionId' element={<Sessions />} />
               <Route path='/help' element={<Help />} />
               <Route path='/' element={<Overview />} />
               <Route path='*' element={<Help />} />

javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
@@ -50,6 +50,7 @@ import RunningSessionsSearchBar from './RunningSessionsSearchBar'
 import { Size } from '../../models/size'
 import LiveView from '../LiveView/LiveView'
 import SessionData, { createSessionData } from '../../models/session-data'
+import { useNavigate } from 'react-router-dom'
 
 function descendingComparator<T> (a: T, b: T, orderBy: keyof T): number {
   if (orderBy === 'sessionDurationMillis') {
@@ -181,12 +182,13 @@ function RunningSessions (props) {
   const [searchFilter, setSearchFilter] = useState('')
   const [searchBarHelpOpen, setSearchBarHelpOpen] = useState(false)
   const liveViewRef = useRef(null)
+  const navigate = useNavigate()
 
   const handleDialogClose = () => {
     if (liveViewRef.current) {
       liveViewRef.current.disconnect()
     }
-    setRowLiveViewOpen('')
+    navigate('/sessions')
   }
 
   const handleRequestSort = (event: React.MouseEvent<unknown>,
@@ -247,7 +249,7 @@ function RunningSessions (props) {
 
   const displayLiveView = (id: string): JSX.Element => {
     const handleLiveViewIconClick = (): void => {
-      setRowLiveViewOpen(id)
+      navigate(`/session/${id}`)
     }
     return (
       <IconButton
@@ -260,7 +262,7 @@ function RunningSessions (props) {
     )
   }
 
-  const { sessions, origin } = props
+  const { sessions, origin, sessionId } = props
 
   const rows = sessions.map((session) => {
     return createSessionData(
@@ -277,6 +279,19 @@ function RunningSessions (props) {
   })
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage)
 
+  useEffect(() => {
+    let s = sessionId || ''
+
+    let session_ids = sessions.map((session) => session.id)
+
+    if (!session_ids.includes(s)) {
+      setRowLiveViewOpen('')
+      navigate('/sessions')
+    } else {
+      setRowLiveViewOpen(s)
+    }
+  }, [sessionId, sessions])
+
   return (
     <Box width='100%'>
       {rows.length > 0 && (
@@ -354,7 +369,7 @@ function RunningSessions (props) {
                             {
                                 (row.vnc as string).length > 0 &&
                                   <Dialog
-                                    onClose={() => setRowLiveViewOpen('')}
+                                    onClose={() => navigate("/sessions")}
                                     aria-labelledby='live-view-dialog'
                                     open={rowLiveViewOpen === row.id}
                                     fullWidth
@@ -393,7 +408,7 @@ function RunningSessions (props) {
                                         ref={liveViewRef}
                                         url={row.vnc as string}
                                         scaleViewport
-                                        onClose={() => setRowLiveViewOpen('')}
+                                        onClose={() => navigate("/sessions")}
                                       />
                                     </DialogContent>
                                     <DialogActions>

javascript/grid-ui/src/screens/Sessions/Sessions.tsx

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import RunningSessions from '../../components/RunningSessions/RunningSessions'
 import { useQuery } from '@apollo/client'
 import { loader } from 'graphql.macro'
@@ -26,12 +26,25 @@ import Loading from '../../components/Loading/Loading'
 import Error from '../../components/Error/Error'
 import { GridConfig } from '../../config'
 import {GRID_SESSIONS_QUERY} from "../../graphql/sessions";
+import { useNavigate, useParams } from 'react-router-dom'
 
 function Sessions (): JSX.Element {
   const { loading, error, data } = useQuery(GRID_SESSIONS_QUERY, {
     pollInterval: GridConfig.status.xhrPollingIntervalMillis,
     fetchPolicy: 'network-only'
   })
+  const navigate = useNavigate()
+
+  const { sessionId } = useParams<{ sessionId: string }>()
+
+  useEffect(() => {
+    if (data === undefined || data.sessionsInfo === undefined || data.sessionsInfo.sessions === undefined) {
+      return
+    }
+    if (sessionId && data.sessionsInfo.sessions.length === 0) {
+      navigate("/sessions")
+    }
+  }, [data, sessionId])
 
   if (error !== undefined) {
     const message = 'There has been an error while loading running and ' +
@@ -67,6 +80,7 @@ function Sessions (): JSX.Element {
       <RunningSessions
         sessions={data.sessionsInfo.sessions}
         origin={window.location.origin}
+        sessionId={sessionId}
       />
       <QueuedSessions
         sessionQueueRequests={data.sessionsInfo.sessionQueueRequests}