[grid] Showing the queue size on the left panel, Grid UI

Author: diemol

javascript/grid-ui/src/App.tsx

@@ -15,8 +15,18 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { ApolloClient, ApolloProvider, InMemoryCache, NormalizedCacheObject } from '@apollo/client'
-import { Route, Switch, RouteComponentProps, withRouter } from 'react-router-dom'
+import {
+  ApolloClient,
+  ApolloProvider,
+  InMemoryCache,
+  NormalizedCacheObject
+} from '@apollo/client'
+import {
+  Route,
+  RouteComponentProps,
+  Switch,
+  withRouter
+} from 'react-router-dom'
 import React, { ReactNode } from 'react'
 import ReactModal from 'react-modal'
 import { GridConfig } from './config'
@@ -124,6 +134,8 @@ class App extends React.Component<AppProps, AppState> {
     const maxSession = error !== undefined ? 0 : data?.grid?.maxSession ?? 0
     const sessionCount = error !== undefined ? 0 : data?.grid?.sessionCount ?? 0
     const nodeCount = error !== undefined ? 0 : data?.grid?.nodeCount ?? 0
+    const sessionQueueSize = error !== undefined ? 0
+      : data?.grid?.sessionQueueSize ?? 0
 
     const topBarSubheader = error ?? data?.grid?.version
 
@@ -142,6 +154,7 @@ class App extends React.Component<AppProps, AppState> {
               maxSession={maxSession}
               sessionCount={sessionCount}
               nodeCount={nodeCount}
+              sessionQueueSize={sessionQueueSize}
             />
           )}
           <main className={classes.content}>

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

@@ -32,6 +32,7 @@ import {
   Box,
   createStyles,
   Theme,
+  Typography,
   withStyles
 } from '@material-ui/core'
 import { withRouter } from 'react-router'
@@ -75,7 +76,11 @@ const useStyles = (theme: Theme): StyleRules => createStyles(
       [theme.breakpoints.up('sm')]: {
         width: theme.spacing(9)
       }
+    },
+    queueBackground: {
+      backgroundColor: theme.palette.secondary.main
     }
+
   })
 
 function ListItemLink (props): JSX.Element {
@@ -87,6 +92,7 @@ interface NavBarProps extends RouteComponentProps {
   maxSession: number
   sessionCount: number
   nodeCount: number
+  sessionQueueSize: number
   classes: any
 }
 
@@ -101,6 +107,7 @@ class NavBar extends React.Component<NavBarProps, {}> {
       maxSession,
       sessionCount,
       nodeCount,
+      sessionQueueSize,
       classes,
       location
     } = this.props
@@ -134,24 +141,36 @@ class NavBar extends React.Component<NavBarProps, {}> {
             </ListItemLink>
             <ListItemLink href='#sessions'>
               <ListItemIcon>
-                <AssessmentIcon />
+                <AssessmentIcon/>
               </ListItemIcon>
-              <ListItemText primary='Sessions' />
+              <ListItemText primary='Sessions'/>
             </ListItemLink>
             <ListItemLink href='#help'>
               <ListItemIcon>
-                <HelpIcon />
+                <HelpIcon/>
               </ListItemIcon>
-              <ListItemText primary='Help' />
+              <ListItemText primary='Help'/>
             </ListItemLink>
           </div>
         </List>
-        <Box flexGrow={1} />
+        <Box flexGrow={1}/>
+        {open && (
+          <Box p={3} m={1} className={classes.queueBackground}>
+            <Typography
+              align='center'
+              gutterBottom
+              variant='h4'
+            >
+              Queue size: {sessionQueueSize}
+            </Typography>
+          </Box>
+        )}
         {showOverallConcurrency && open && (
           <OverallConcurrency
             sessionCount={sessionCount}
             maxSession={maxSession}
-          />)}
+          />
+        )}
       </Drawer>
     )
   }