Skip to content

Commit 65b2536

Browse files
diemoldiemol
committed
[grid] Breaking Sessions into Running and Queued (UI)
Plus creating components for each one, and then moving Sessions to be a screen
1 parent 406ce8a commit 65b2536

File tree

5 files changed

+116
-62
lines changed

5 files changed

+116
-62
lines changed

‎javascript/grid-ui/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Overview from "./screens/Overview/Overview";
99
import {Box, Link, makeStyles} from "@material-ui/core";
1010
import Container from "@material-ui/core/Container";
1111
import Typography from "@material-ui/core/Typography";
12-
import Sessions from "./components/Sessions/Sessions";
12+
import Sessions from "./screens/Sessions/Sessions";
1313

1414
export const client = new ApolloClient({
1515
cache: new InMemoryCache(),

‎javascript/grid-ui/src/components/EnhancedTableToolbar.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react';
2+
import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
3+
import Toolbar from '@material-ui/core/Toolbar';
4+
import Typography from '@material-ui/core/Typography';
5+
6+
7+
const useToolbarStyles = makeStyles((theme: Theme) =>
8+
createStyles({
9+
root: {
10+
paddingLeft: theme.spacing(2),
11+
paddingRight: theme.spacing(1),
12+
},
13+
title: {
14+
flex: '1 1 100%',
15+
},
16+
}),
17+
);
18+
19+
export default function EnhancedTableToolbar(props) {
20+
const classes = useToolbarStyles();
21+
const {title} = props;
22+
return (
23+
<Toolbar
24+
className={classes.root}
25+
>
26+
<Typography className={classes.title} variant="h3" id="tableTitle" component="div">
27+
{title}
28+
</Typography>
29+
</Toolbar>
30+
);
31+
}

‎javascript/grid-ui/src/components/QueuedSessions/QueuedSessions.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import * as React from 'react';
2+
import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
3+
import {List, ListItem} from "@material-ui/core";
4+
import EnhancedTableToolbar from "../EnhancedTableToolbar";
5+
6+
7+
const useStyles = makeStyles((theme: Theme) =>
8+
createStyles({
9+
root: {
10+
width: '100%',
11+
},
12+
queueList: {
13+
minWidth: 750,
14+
backgroundColor: theme.palette.background.paper,
15+
marginBottom: 20,
16+
},
17+
queueListItem: {
18+
borderBottomWidth: 1,
19+
borderBottomStyle: 'solid',
20+
borderBottomColor: '#e0e0e0',
21+
},
22+
}),
23+
);
24+
25+
export default function QueuedSessions(props) {
26+
const {sessionQueueRequests} = props;
27+
const classes = useStyles();
28+
29+
const queue = sessionQueueRequests.map((queuedSession) => {
30+
return JSON.stringify(JSON.parse(queuedSession));
31+
});
32+
33+
return (
34+
<div className={classes.root}>
35+
{queue.length > 0 && (
36+
<div className={classes.queueList}>
37+
<EnhancedTableToolbar title={`Queue (${queue.length})`}/>
38+
<List component="nav" aria-label="main mailbox folders">
39+
{queue.map((queueItem, index) => {
40+
return (
41+
<ListItem className={classes.queueListItem} key={index}>
42+
<pre>
43+
{queueItem}
44+
</pre>
45+
</ListItem>
46+
)
47+
})}
48+
</List>
49+
</div>
50+
)}
51+
</div>
52+
);
53+
}

‎javascript/grid-ui/src/components/Sessions/Sessions.tsx renamed to ‎javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx

+6-61
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,16 @@ import TableHead from '@material-ui/core/TableHead';
88
import TablePagination from '@material-ui/core/TablePagination';
99
import TableRow from '@material-ui/core/TableRow';
1010
import TableSortLabel from '@material-ui/core/TableSortLabel';
11-
import Toolbar from '@material-ui/core/Toolbar';
1211
import Typography from '@material-ui/core/Typography';
1312
import Paper from '@material-ui/core/Paper';
1413
import FormControlLabel from '@material-ui/core/FormControlLabel';
1514
import Switch from '@material-ui/core/Switch';
16-
import {loader} from "graphql.macro";
17-
import {useQuery} from "@apollo/client";
18-
import {GridConfig} from "../../config";
19-
import {Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, List, ListItem} from "@material-ui/core";
15+
import {Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton} from "@material-ui/core";
2016
import InfoIcon from "@material-ui/icons/Info";
2117
import browserLogo from "../../util/browser-logo";
2218
import osLogo from "../../util/os-logo";
2319
import browserVersion from "../../util/browser-version";
20+
import EnhancedTableToolbar from "../EnhancedTableToolbar";
2421

2522
interface SessionData {
2623
id: string,
@@ -110,8 +107,6 @@ const headCells: HeadCell[] = [
110107
{id: 'nodeUri', numeric: false, label: 'Node URI'},
111108
];
112109

113-
const GRID_SESSIONS_QUERY = loader("../../graphql/sessions.gql");
114-
115110
interface EnhancedTableProps {
116111
classes: ReturnType<typeof useStyles>;
117112
onRequestSort: (event: React.MouseEvent<unknown>, property: keyof SessionData) => void;
@@ -154,32 +149,6 @@ function EnhancedTableHead(props: EnhancedTableProps) {
154149
);
155150
}
156151

157-
const useToolbarStyles = makeStyles((theme: Theme) =>
158-
createStyles({
159-
root: {
160-
paddingLeft: theme.spacing(2),
161-
paddingRight: theme.spacing(1),
162-
},
163-
title: {
164-
flex: '1 1 100%',
165-
},
166-
}),
167-
);
168-
169-
const EnhancedTableToolbar = (props) => {
170-
const classes = useToolbarStyles();
171-
172-
return (
173-
<Toolbar
174-
className={classes.root}
175-
>
176-
<Typography className={classes.title} variant="h3" id="tableTitle" component="div">
177-
{props.title}
178-
</Typography>
179-
</Toolbar>
180-
);
181-
};
182-
183152
const useStyles = makeStyles((theme: Theme) =>
184153
createStyles({
185154
root: {
@@ -225,7 +194,8 @@ const useStyles = makeStyles((theme: Theme) =>
225194
}),
226195
);
227196

228-
export default function Sessions() {
197+
export default function RunningSessions(props) {
198+
const {sessions} = props;
229199
const classes = useStyles();
230200
const [order, setOrder] = React.useState<Order>('asc');
231201
const [orderBy, setOrderBy] = React.useState<keyof SessionData>('startTime');
@@ -241,12 +211,7 @@ export default function Sessions() {
241211
setRowOpen("");
242212
};
243213

244-
const {loading, error, data} = useQuery(GRID_SESSIONS_QUERY,
245-
{pollInterval: GridConfig.status.xhrPollingIntervalMillis, fetchPolicy: "network-only"});
246-
if (loading) return <p>Loading...</p>;
247-
if (error) return <p>`Error! ${error.message}`</p>;
248-
249-
const rows = data.grid.sessions.map((session) => {
214+
const rows = sessions.map((session) => {
250215
return createSessionData(
251216
session.id,
252217
session.capabilities,
@@ -259,10 +224,6 @@ export default function Sessions() {
259224
);
260225
});
261226

262-
const queue = data.grid.sessionQueueRequests.map((queuedSession) => {
263-
return JSON.stringify(JSON.parse(queuedSession));
264-
});
265-
266227
const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof SessionData) => {
267228
const isAsc = orderBy === property && order === 'asc';
268229
setOrder(isAsc ? 'desc' : 'asc');
@@ -307,24 +268,8 @@ export default function Sessions() {
307268

308269
return (
309270
<div className={classes.root}>
310-
{queue.length > 0 && (
311-
<div className={classes.queueList}>
312-
<EnhancedTableToolbar title={`Queue (${queue.length})`}/>
313-
<List component="nav" aria-label="main mailbox folders">
314-
{queue.map((queueItem, index) => {
315-
return (
316-
<ListItem className={classes.queueListItem} key={index}>
317-
<pre>
318-
{queueItem}
319-
</pre>
320-
</ListItem>
321-
)
322-
})}
323-
</List>
324-
</div>
325-
)}
326271
<Paper className={classes.paper}>
327-
<EnhancedTableToolbar title={"Sessions"}/>
272+
<EnhancedTableToolbar title={"Running"}/>
328273
<TableContainer>
329274
<Table
330275
className={classes.table}

‎javascript/grid-ui/src/screens/Sessions/Sessions.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react';
2+
import RunningSessions from "../../components/RunningSessions/RunningSessions";
3+
import {useQuery} from "@apollo/client";
4+
import {loader} from "graphql.macro";
5+
import {GridConfig} from "../../config";
6+
import Grid from "@material-ui/core/Grid";
7+
import QueuedSessions from "../../components/QueuedSessions/QueuedSessions";
8+
9+
10+
const GRID_SESSIONS_QUERY = loader("../../graphql/sessions.gql");
11+
12+
export default function Sessions() {
13+
14+
const {loading, error, data} = useQuery(GRID_SESSIONS_QUERY,
15+
{pollInterval: GridConfig.status.xhrPollingIntervalMillis, fetchPolicy: "network-only"});
16+
if (loading) return <p>Loading...</p>;
17+
if (error) return <p>`Error! ${error.message}`</p>;
18+
19+
return (
20+
<Grid container spacing={3}>
21+
<QueuedSessions sessionQueueRequests={data.grid.sessionQueueRequests}/>
22+
<RunningSessions sessions={data.grid.sessions}/>
23+
</Grid>
24+
);
25+
}

0 commit comments

Comments
 (0)