[grid] Adding an overall Grid status to the UI

Author: diemol

java/server/src/org/openqa/selenium/grid/graphql/Grid.java

@@ -113,8 +113,10 @@ public int getTotalSlots() {
       .sum();
   }
 
-  public int getUsedSlots() {
-    return getSessionCount();
+  public int getMaxSession() {
+    return distributorStatus.get().getNodes().stream()
+      .mapToInt(NodeStatus::getMaxSessionCount)
+      .sum();
   }
 
   public int getSessionQueueSize() {

java/server/src/org/openqa/selenium/grid/graphql/selenium-grid-schema.graphqls

@@ -65,7 +65,7 @@ type GridQuery {
 type Grid {
   uri: Uri!
   totalSlots: Int!
-  usedSlots: Int!
+  maxSession: Int!
   sessionCount: Int!
   version: String!
   sessionQueueSize: Int!

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

@@ -11,6 +11,7 @@ import DashboardIcon from "@material-ui/icons/Dashboard";
 import AssessmentIcon from '@material-ui/icons/Assessment';
 import clsx from 'clsx';
 import * as React from 'react';
+import {Box, CircularProgress, CircularProgressProps, Typography} from "@material-ui/core";
 
 const drawerWidth = 240;
 
@@ -48,15 +49,41 @@ const useStyles = makeStyles((theme) => ({
 			width: theme.spacing(9),
 		},
 	},
+	concurrencyBackground: {
+		backgroundColor: theme.palette.secondary.main,
+	},
 }));
 
 function ListItemLink(props) {
 	return <ListItem button component="a" {...props} />;
 }
 
+function CircularProgressWithLabel(props: CircularProgressProps & { value: number }) {
+	return (
+		<Box position="relative" display="inline-flex">
+			<CircularProgress variant="determinate" size={80} {...props} />
+			<Box
+				top={0}
+				left={0}
+				bottom={0}
+				right={0}
+				position="absolute"
+				display="flex"
+				alignItems="center"
+				justifyContent="center"
+			>
+				<Typography variant="h4" component="div" color="textSecondary">{`${Math.round(
+					props.value,
+				)}%`}</Typography>
+			</Box>
+		</Box>
+	);
+}
+
 export default function NavBar(props) {
 	const classes = useStyles();
-	const open = props.open;
+	const {open, maxSession, sessionCount} = props;
+	const currentLoad = Math.min(((sessionCount / maxSession) * 100), 100);
 
 	return (
 		<Drawer
@@ -88,8 +115,34 @@ export default function NavBar(props) {
 					</ListItemLink>
 				</div>
 			</List>
-			{/*<Divider/>*/}
-			{/*<List>{secondaryListItems}</List>*/}
+			<Box flexGrow={1}/>
+			<Box
+				p={2}
+				m={2}
+				className={classes.concurrencyBackground}
+			>
+				<Typography
+					align="center"
+					gutterBottom
+					variant="h4"
+				>
+					Concurrency
+				</Typography>
+				<Box
+					display="flex"
+					justifyContent="center"
+					mt={2}
+					mb={2}
+				>
+					<CircularProgressWithLabel value={currentLoad}/>
+				</Box>
+				<Typography
+					align="center"
+					variant="h4"
+				>
+					{sessionCount} / {maxSession}
+				</Typography>
+			</Box>
 		</Drawer>
 	);
 }

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

@@ -148,7 +148,7 @@ export default function Node(props) {
                     </Typography>
                   </DialogContent>
                   <DialogActions>
-                    <Button onClick={handleDialogClose} color="primary" variant="outlined">
+                    <Button onClick={handleDialogClose} color="primary" variant="contained">
                       Close
                     </Button>
                   </DialogActions>
@@ -242,7 +242,7 @@ export default function Node(props) {
                 </Grid>
                 <Grid item xs={12}
                 >
-                  <LinearProgressWithLabel value={currentLoad as any}/>
+                  <LinearProgressWithLabel value={currentLoad as number}/>
                 </Grid>
               </Grid>
             </Grid>

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

@@ -71,6 +71,8 @@ export default function TopBar() {
   if (error) return <p>`Error! ${error.message}`</p>;
 
   const gridVersion = data.grid.version;
+  const maxSession = data.grid.maxSession;
+  const sessionCount = data.grid.sessionCount ?? 0;
 
   return (
     <div className={classes.root}>
@@ -121,7 +123,7 @@ export default function TopBar() {
           </Box>
         </Toolbar>
       </AppBar>
-      <NavBar open={open}/>
+      <NavBar open={open} maxSession={maxSession} sessionCount={sessionCount}/>
     </div>
   );
 }

javascript/grid-ui/src/graphql/grid.gql

@@ -2,7 +2,9 @@ query Summary {
 	grid {
 		uri
 		totalSlots
-		usedSlots
+		maxSession
+		sessionCount
+		sessionQueueSize
 		version
 	}
 }