From 23e48bd5fd8ea2dad3713cd027670a600a94b961 Mon Sep 17 00:00:00 2001 From: Emil Hemdal Date: Tue, 28 Jan 2025 16:49:39 +0100 Subject: [PATCH 1/2] [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 --- javascript/grid-ui/src/App.tsx | 1 + .../RunningSessions/RunningSessions.tsx | 27 ++++++++++++++----- .../grid-ui/src/screens/Sessions/Sessions.tsx | 16 ++++++++++- 3 files changed, 37 insertions(+), 7 deletions(-) diff --git a/javascript/grid-ui/src/App.tsx b/javascript/grid-ui/src/App.tsx index 662aea86797b0..57037d354bc43 100644 --- a/javascript/grid-ui/src/App.tsx +++ b/javascript/grid-ui/src/App.tsx @@ -104,6 +104,7 @@ function App () { } /> + } /> } /> } /> } /> diff --git a/javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx b/javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx index 43fd2c1138f83..5b8cfb8522cf6 100644 --- a/javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx +++ b/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 (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, @@ -247,7 +249,7 @@ function RunningSessions (props) { const displayLiveView = (id: string): JSX.Element => { const handleLiveViewIconClick = (): void => { - setRowLiveViewOpen(id) + navigate(`/session/${id}`) } return ( { 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 ( {rows.length > 0 && ( @@ -354,7 +369,7 @@ function RunningSessions (props) { { (row.vnc as string).length > 0 && 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")} /> diff --git a/javascript/grid-ui/src/screens/Sessions/Sessions.tsx b/javascript/grid-ui/src/screens/Sessions/Sessions.tsx index abf98e225a5b5..dea748309ebdd 100644 --- a/javascript/grid-ui/src/screens/Sessions/Sessions.tsx +++ b/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 !== undefined || 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 { Date: Thu, 30 Jan 2025 12:19:37 +0100 Subject: [PATCH 2/2] Simplify sessionId check logic --- javascript/grid-ui/src/screens/Sessions/Sessions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/grid-ui/src/screens/Sessions/Sessions.tsx b/javascript/grid-ui/src/screens/Sessions/Sessions.tsx index dea748309ebdd..da555bcc7f1a7 100644 --- a/javascript/grid-ui/src/screens/Sessions/Sessions.tsx +++ b/javascript/grid-ui/src/screens/Sessions/Sessions.tsx @@ -41,7 +41,7 @@ function Sessions (): JSX.Element { if (data === undefined || data.sessionsInfo === undefined || data.sessionsInfo.sessions === undefined) { return } - if ((sessionId !== undefined || sessionId === '') && data.sessionsInfo.sessions.length === 0) { + if (sessionId && data.sessionsInfo.sessions.length === 0) { navigate("/sessions") } }, [data, sessionId])