[grid] UI Overview is able to see live preview per Node

Signed-off-by: Viet Nguyen Duc <[email protected]>

Author: VietND96

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

@@ -15,15 +15,92 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { Box, Card, CardContent, Grid, Typography } from '@mui/material'
-import React from 'react'
+import { Box, Card, CardContent, Dialog, DialogActions, DialogContent, DialogTitle, Grid, IconButton, Typography, Button, keyframes, styled } from '@mui/material'
+import React, { useState, useRef } from 'react'
+import { Videocam as VideocamIcon } from '@mui/icons-material'
 import NodeDetailsDialog from './NodeDetailsDialog'
 import NodeLoad from './NodeLoad'
 import Stereotypes from './Stereotypes'
 import OsLogo from '../common/OsLogo'
+import LiveView from '../LiveView/LiveView'
+
+const pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.7);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 0 5px rgba(25, 118, 210, 0);
+    transform: scale(1.05);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
+    transform: scale(1);
+  }
+`
+
+const LiveIconButton = styled(IconButton)(({ theme }) => ({
+  marginLeft: theme.spacing(1),
+  position: 'relative',
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    borderRadius: '50%',
+    animation: `${pulse} 2s infinite`,
+    zIndex: 0
+  }
+}))
+
+function getVncUrl(session, origin) {
+  try {
+    const parsed = JSON.parse(session.capabilities)
+    let vnc = parsed['se:vnc'] ?? ''
+    if (vnc.length > 0) {
+      try {
+        const url = new URL(origin)
+        const vncUrl = new URL(vnc)
+        url.pathname = vncUrl.pathname
+        url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+        return url.href
+      } catch (error) {
+        console.log(error)
+        return ''
+      }
+    }
+    return ''
+  } catch (e) {
+    return ''
+  }
+}
 
 function Node (props) {
-  const { node } = props
+  const { node, sessions = [], origin } = props
+  const [liveViewSessionId, setLiveViewSessionId] = useState('')
+  const liveViewRef = useRef<{ disconnect: () => void }>(null)
+
+  const vncSession = sessions.find(session => {
+    try {
+      const capabilities = JSON.parse(session.capabilities)
+      return capabilities['se:vnc'] !== undefined && capabilities['se:vnc'] !== ''
+    } catch (e) {
+      return false
+    }
+  })
+
+  const handleLiveViewIconClick = () => {
+    if (vncSession) {
+      setLiveViewSessionId(vncSession.id)
+    }
+  }
+
+  const handleDialogClose = () => {
+    if (liveViewRef.current) {
+      liveViewRef.current.disconnect()
+    }
+    setLiveViewSessionId('')
+  }
   const getCardStyle = (status: string) => ({
     height: '100%',
     flexGrow: 1,
@@ -32,6 +109,7 @@ function Node (props) {
   })
 
   return (
+    <>
     <Card sx={getCardStyle(node.status)}>
       <CardContent sx={{ pl: 2, pr: 1 }}>
         <Grid
@@ -62,14 +140,54 @@ function Node (props) {
             </Typography>
           </Grid>
           <Grid item xs={12}>
+            <Box display="flex" alignItems="center">
             <Stereotypes stereotypes={node.slotStereotypes}/>
+              {vncSession && (
+                <LiveIconButton onClick={handleLiveViewIconClick} size='medium' color="primary">
+                  <VideocamIcon data-testid="VideocamIcon" />
+                </LiveIconButton>
+              )}
+            </Box>
           </Grid>
           <Grid item xs={12}>
             <NodeLoad node={node}/>
           </Grid>
         </Grid>
       </CardContent>
     </Card>
+    {vncSession && liveViewSessionId && (
+      <Dialog
+        onClose={handleDialogClose}
+        aria-labelledby='live-view-dialog'
+        open={liveViewSessionId === vncSession.id}
+        fullWidth
+        maxWidth='xl'
+        fullScreen
+      >
+        <DialogTitle id='live-view-dialog'>
+          <Typography gutterBottom component='span' sx={{ paddingX: '10px' }}>
+            <Box fontWeight='fontWeightBold' mr={1} display='inline'>
+              Node Session Live View
+            </Box>
+            {node.uri}
+          </Typography>
+        </DialogTitle>
+        <DialogContent dividers sx={{ height: '600px' }}>
+          <LiveView
+            ref={liveViewRef as any}
+            url={getVncUrl(vncSession, origin)}
+            scaleViewport
+            onClose={handleDialogClose}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleDialogClose} color='primary' variant='contained'>
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    )}
+    </>
   )
 }
 

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

@@ -41,12 +41,18 @@ import browserVersion from '../../util/browser-version'
 import Capabilities from '../../models/capabilities'
 import { GridConfig } from '../../config'
 import { NODES_QUERY } from '../../graphql/nodes'
+import { GRID_SESSIONS_QUERY } from '../../graphql/sessions'
 
 function Overview (): JSX.Element {
   const { loading, error, data } = useQuery(NODES_QUERY, {
     pollInterval: GridConfig.status.xhrPollingIntervalMillis,
     fetchPolicy: 'network-only'
   })
+  
+  const { data: sessionsData } = useQuery(GRID_SESSIONS_QUERY, {
+    pollInterval: GridConfig.status.xhrPollingIntervalMillis,
+    fetchPolicy: 'network-only'
+  })
 
   function compareSlotStereotypes(a: NodeInfo, b: NodeInfo, attribute: string): number {
     const joinA = a.slotStereotypes.length === 1
@@ -217,7 +223,13 @@ function Overview (): JSX.Element {
                 flexDirection: 'column'
               }}
             >
-              <Node node={node}/>
+              <Node 
+                node={node} 
+                sessions={sessionsData?.sessionsInfo?.sessions?.filter(
+                  session => session.nodeId === node.id
+                ) || []}
+                origin={window.location.origin}
+              />
             </Paper>
           </Grid>
         )