[grid] Enhance UI with theme integration and improved status indicators (#16512)

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

Author: VietND96

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

@@ -20,6 +20,7 @@ import RFB from '@novnc/novnc/lib/rfb'
 import PasswordDialog from './PasswordDialog'
 import MuiAlert, { AlertProps } from '@mui/material/Alert'
 import Snackbar from '@mui/material/Snackbar'
+import { useTheme } from '@mui/material/styles'
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert (
   props,
@@ -30,6 +31,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert (
 
 const LiveView = forwardRef((props, ref) => {
   let canvas: any = null
+  const theme = useTheme()
 
   const [open, setOpen] = useState(false)
   const [message, setMessage] = useState('')
@@ -62,7 +64,7 @@ const LiveView = forwardRef((props, ref) => {
 
     const newRfb = new RFB.default(canvas, props.url, {})
     newRfb.scaleViewport = props.scaleViewport
-    newRfb.background = 'rgb(247,248,248)'
+    newRfb.background = theme.palette.background.default
     newRfb.addEventListener('credentialsrequired', handleCredentials)
     newRfb.addEventListener('securityfailure', securityFailed)
     newRfb.addEventListener('connect', connectedToServer)

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

@@ -101,12 +101,33 @@ function Node (props) {
     }
     setLiveViewSessionId('')
   }
-  const getCardStyle = (status: string) => ({
-    height: '100%',
-    flexGrow: 1,
-    opacity: status === 'DOWN' ? 0.25 : 1,
-    bgcolor: (status === 'DOWN' || status === 'DRAINING') ? 'grey.A100' : ''
-  })
+  const getCardStyle = (status: string) => {
+    const baseStyle = {
+      height: '100%',
+      flexGrow: 1
+    }
+    
+    if (status === 'DOWN') {
+      return {
+        ...baseStyle,
+        opacity: 0.6,
+        border: '2px solid',
+        borderColor: 'error.main',
+        bgcolor: 'action.disabledBackground'
+      }
+    }
+    
+    if (status === 'DRAINING') {
+      return {
+        ...baseStyle,
+        border: '2px solid',
+        borderColor: 'warning.main',
+        bgcolor: 'action.hover'
+      }
+    }
+    
+    return baseStyle
+  }
 
   return (
     <>
@@ -172,7 +193,7 @@ function Node (props) {
             {node.uri}
           </Typography>
         </DialogTitle>
-        <DialogContent dividers sx={{ height: '600px' }}>
+        <DialogContent dividers sx={{ height: '600px', bgcolor: 'background.default', p: 0 }}>
           <LiveView
             ref={liveViewRef as any}
             url={getVncUrl(vncSession, origin)}

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

@@ -18,6 +18,7 @@
 import {
   Box,
   Button,
+  Chip,
   Dialog,
   DialogActions,
   DialogContent,
@@ -35,6 +36,12 @@ function NodeDetailsDialog (props) {
   const { node } = props
   const nodeInfo: NodeInfo = node
 
+  const getStatusColor = (status: string) => {
+    if (status === 'DOWN') return 'error'
+    if (status === 'DRAINING') return 'warning'
+    return 'success'
+  }
+
   return (
     <Box component='span'>
       <IconButton
@@ -50,16 +57,27 @@ function NodeDetailsDialog (props) {
         aria-labelledby='node-info-dialog' open={open}
       >
         <DialogTitle id='node-info-dialog'>
-          <OsLogo osName={nodeInfo.osInfo.name} />
-          <Box fontWeight='fontWeightBold' mr={1} display='inline'>
-            URI:
+          <Box display='flex' alignItems='center' gap={1} flexWrap='wrap'>
+            <OsLogo osName={nodeInfo.osInfo.name} />
+            <Box fontWeight='fontWeightBold' display='inline'>
+              URI:
+            </Box>
+            <Box display='inline'>{nodeInfo.uri}</Box>
+            <Chip 
+              label={nodeInfo.status} 
+              color={getStatusColor(nodeInfo.status)}
+              size='small'
+              sx={{ ml: 'auto' }}
+            />
           </Box>
-          {nodeInfo.uri}
         </DialogTitle>
         <DialogContent dividers>
           <Typography gutterBottom>
             Node Id: {nodeInfo.id}
           </Typography>
+          <Typography gutterBottom>
+            Status: {nodeInfo.status}
+          </Typography>
           <Typography gutterBottom>
             OS Arch: {nodeInfo.osInfo.arch}
           </Typography>

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

@@ -548,7 +548,7 @@ function RunningSessions (props) {
                                     </DialogTitle>
                                     <DialogContent
                                       dividers
-                                      sx={{ height: '600px' }}
+                                      sx={{ height: '600px', bgcolor: 'background.default', p: 0 }}
                                     >
                                       <LiveView
                                         ref={liveViewRef}

javascript/grid-ui/src/theme/themes.tsx

@@ -30,6 +30,9 @@ export const lightTheme: Theme = createTheme({
     error: {
       main: '#FF1744'
     },
+    warning: {
+      main: '#FF9800'
+    },
     background: {
       default: '#F7F8F8'
     }
@@ -49,6 +52,9 @@ export const darkTheme: Theme = createTheme({
     error: {
       main: '#F04747'
     },
+    warning: {
+      main: '#FFA726'
+    },
     background: {
       default: '#0c1117',
       paper: '#161B22'