Skip to content

Commit

Permalink
[grid] Displaying a message when no Sessions or Nodes are present (UI)
Browse files Browse the repository at this point in the history
  • Loading branch information
@diemol
diemol committed Feb 2, 2021
1 parent 57a4ac8 commit 71e6751
Show file tree
Hide file tree
Showing 7 changed files with 217 additions and 121 deletions.
67 changes: 42 additions & 25 deletions javascript/grid-ui/src/components/NavBar/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ import {makeStyles} from '@material-ui/core/styles';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import DashboardIcon from "@material-ui/icons/Dashboard";
import AssessmentIcon from '@material-ui/icons/Assessment';
import HelpIcon from '@material-ui/icons/Help';
import clsx from 'clsx';
import * as React from 'react';
import {Box, CircularProgress, CircularProgressProps, Typography} from "@material-ui/core";
import {useLocation} from "react-router-dom";

const drawerWidth = 240;

Expand Down Expand Up @@ -82,9 +84,15 @@ function CircularProgressWithLabel(props: CircularProgressProps & { value: numbe

export default function NavBar(props) {
const classes = useStyles();
const {open, maxSession, sessionCount} = props;
const {open, maxSession, sessionCount, nodeCount} = props;
const currentLoad = Math.min(((sessionCount / maxSession) * 100), 100);

const location = useLocation();
// Not showing the overall status when the user is on the Overview page and there is only one node, because polling
// is not happening at the same time and it could be confusing for the user. So, displaying it when there is more
// than one node, or when the user is on a different page and there is at least one node registered.
const showOverallConcurrency = nodeCount > 1 || (location.pathname !== "/" && nodeCount > 0);

return (
<Drawer
variant="permanent"
Expand Down Expand Up @@ -113,36 +121,45 @@ export default function NavBar(props) {
</ListItemIcon>
<ListItemText primary="Sessions"/>
</ListItemLink>
<ListItemLink href={"#help"}>
<ListItemIcon>
<HelpIcon/>
</ListItemIcon>
<ListItemText primary="Help"/>
</ListItemLink>
</div>
</List>
<Box flexGrow={1}/>
<Box
p={2}
m={2}
className={classes.concurrencyBackground}
>
<Typography
align="center"
gutterBottom
variant="h4"
>
Concurrency
</Typography>
{showOverallConcurrency && (
<Box
display="flex"
justifyContent="center"
mt={2}
mb={2}
p={2}
m={2}
className={classes.concurrencyBackground}
>
<CircularProgressWithLabel value={currentLoad}/>
<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>
<Typography
align="center"
variant="h4"
>
{sessionCount} / {maxSession}
</Typography>
</Box>

)}
</Drawer>
);
}
Expand Down
52 changes: 52 additions & 0 deletions javascript/grid-ui/src/components/NoData/NoData.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import * as React from 'react';
import {Box, Container, Link, Typography} from "@material-ui/core";
import {makeStyles} from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: theme.palette.secondary.main,
height: '100%',
paddingBottom: theme.spacing(3),
paddingTop: theme.spacing(3),
width: '100%',
justifyContent: "center",
},
}));

export default function NoData(props) {
const classes = useStyles();
const {message} = props;

// noinspection HtmlUnknownAnchorTarget
return (
<div className={classes.root}>
<Box
display="flex"
flexDirection="column"
height="100%"
justifyContent="center"
>
<Container maxWidth="md">
<Typography
align="center"
color="textPrimary"
variant="h1"
>
{message}
</Typography>
<Typography
align="center"
color="textPrimary"
variant="h4"
>
More information about Selenium Grid can be found at the{' '}
<Link href="#help">
Help
</Link>
{' '}section.
</Typography>
</Container>
</Box>
</div>
);
}
193 changes: 99 additions & 94 deletions javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,58 +268,43 @@ export default function RunningSessions(props) {

return (
<div className={classes.root}>
<Paper className={classes.paper}>
<EnhancedTableToolbar title={"Running"}/>
<TableContainer>
<Table
className={classes.table}
aria-labelledby="tableTitle"
size={dense ? 'small' : 'medium'}
aria-label="enhanced table"
>
<EnhancedTableHead
classes={classes}
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
/>
<TableBody>
{stableSort(rows, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.id as string);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.id as string)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.id}
selected={isItemSelected}
>
<TableCell component="th" id={labelId} scope="row">
{row.id}
</TableCell>
<TableCell align="right">
<img
src={osLogo(row.platformName as string)}
className={classes.logo}
alt="OS Logo"
/>
<img
src={browserLogo(row.browserName as string)}
className={classes.logo}
alt="Browser Logo"
/>
{browserVersion(row.browserVersion as string)}
<IconButton className={classes.buttonMargin} onClick={() => handleDialogOpen(row.id as string)}>
<InfoIcon/>
</IconButton>
<Dialog onClose={handleDialogClose} aria-labelledby="session-info-dialog"
open={rowOpen === row.id}>
<DialogTitle id="session-info-dialog">
{rows.length > 0 && (
<div>
<Paper className={classes.paper}>
<EnhancedTableToolbar title={"Running"}/>
<TableContainer>
<Table
className={classes.table}
aria-labelledby="tableTitle"
size={dense ? 'small' : 'medium'}
aria-label="enhanced table"
>
<EnhancedTableHead
classes={classes}
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
/>
<TableBody>
{stableSort(rows, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
const isItemSelected = isSelected(row.id as string);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover
onClick={(event) => handleClick(event, row.id as string)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.id}
selected={isItemSelected}
>
<TableCell component="th" id={labelId} scope="row">
{row.id}
</TableCell>
<TableCell align="right">
<img
src={osLogo(row.platformName as string)}
className={classes.logo}
Expand All @@ -331,52 +316,72 @@ export default function RunningSessions(props) {
alt="Browser Logo"
/>
{browserVersion(row.browserVersion as string)}
</DialogTitle>
<DialogContent dividers>
<Typography gutterBottom>
Capabilities:
</Typography>
<Typography gutterBottom component={'span'}>
<IconButton className={classes.buttonMargin}
onClick={() => handleDialogOpen(row.id as string)}>
<InfoIcon/>
</IconButton>
<Dialog onClose={handleDialogClose} aria-labelledby="session-info-dialog"
open={rowOpen === row.id}>
<DialogTitle id="session-info-dialog">
<img
src={osLogo(row.platformName as string)}
className={classes.logo}
alt="OS Logo"
/>
<img
src={browserLogo(row.browserName as string)}
className={classes.logo}
alt="Browser Logo"
/>
{browserVersion(row.browserVersion as string)}
</DialogTitle>
<DialogContent dividers>
<Typography gutterBottom>
Capabilities:
</Typography>
<Typography gutterBottom component={'span'}>
<pre>
{JSON.stringify(JSON.parse(row.rawCapabilities as string), null, 2)}
</pre>
</Typography>
</DialogContent>
<DialogActions>
<Button onClick={handleDialogClose} color="primary" variant="outlined">
Close
</Button>
</DialogActions>
</Dialog>
</TableCell>
<TableCell align="right">{row.startTime}</TableCell>
<TableCell align="right">{row.sessionDurationMillis}</TableCell>
<TableCell align="right">{row.nodeUri}</TableCell>
</Typography>
</DialogContent>
<DialogActions>
<Button onClick={handleDialogClose} color="primary" variant="outlined">
Close
</Button>
</DialogActions>
</Dialog>
</TableCell>
<TableCell align="right">{row.startTime}</TableCell>
<TableCell align="right">{row.sessionDurationMillis}</TableCell>
<TableCell align="right">{row.nodeUri}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{height: (dense ? 33 : 53) * emptyRows}}>
<TableCell colSpan={6}/>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{height: (dense ? 33 : 53) * emptyRows}}>
<TableCell colSpan={6}/>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 15]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
<FormControlLabel
control={<Switch checked={dense} onChange={handleChangeDense}/>}
label="Dense padding"
/>
)}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 15]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
<FormControlLabel
control={<Switch checked={dense} onChange={handleChangeDense}/>}
label="Dense padding"
/>
</div>
)}
</div>
);
}
5 changes: 3 additions & 2 deletions javascript/grid-ui/src/components/TopBar/TopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,9 @@ export default function TopBar() {
if (error) return <p>`Error! ${error.message}`</p>;

const gridVersion = data.grid.version;
const maxSession = data.grid.maxSession;
const maxSession = data.grid.maxSession ?? 0;
const sessionCount = data.grid.sessionCount ?? 0;
const nodeCount = data.grid.nodeCount ?? 0;

return (
<div className={classes.root}>
Expand Down Expand Up @@ -123,7 +124,7 @@ export default function TopBar() {
</Box>
</Toolbar>
</AppBar>
<NavBar open={open} maxSession={maxSession} sessionCount={sessionCount}/>
<NavBar open={open} maxSession={maxSession} sessionCount={sessionCount} nodeCount={nodeCount}/>
</div>
);
}
Expand Down
1 change: 1 addition & 0 deletions javascript/grid-ui/src/graphql/grid.gql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ query Summary {
grid {
uri
totalSlots
nodeCount
maxSession
sessionCount
sessionQueueSize
Expand Down
Loading

0 comments on commit 71e6751

Please sign in to comment.