Skip to content

Commit 406ce8a

Browse files
diemoldiemol
committed
[grid] Sessions refactoring and adding Queue items (UI)
1 parent de1adc0 commit 406ce8a

7 files changed

Lines changed: 144 additions & 166 deletions

File tree

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@ import {ApolloClient, ApolloProvider, InMemoryCache} from "@apollo/client";
22
import {HashRouter as Router, Route, Switch} from "react-router-dom";
33
import React from "react";
44
import ReactModal from "react-modal";
5-
// css import order is important
6-
/* 1 */
7-
// import "./css/theme.css";
8-
/* 2 */
9-
// import "./css/theme-selenium.css";
105
import {GridConfig} from "./config";
116
import NodeType from "./models/node";
127
import TopBar from "./components/TopBar/TopBar";

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

Lines changed: 26 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,12 @@ import {
1414
Typography
1515
} from '@material-ui/core';
1616
import * as React from 'react';
17-
import chromeLogo from "../../assets/browsers/chrome.svg";
18-
import edgeLogo from "../../assets/browsers/edge.svg";
19-
import operaLogo from "../../assets/browsers/opera.svg";
20-
import firefoxLogo from "../../assets/browsers/firefox.svg";
21-
import internetExplorerLogo from "../../assets/browsers/internet-explorer.svg";
22-
import safariLogo from "../../assets/browsers/safari.svg";
23-
import safariTechnologyPreviewLogo from "../../assets/browsers/safari-technology-preview.png";
24-
import unknownBrowserLogo from "../../assets/browsers/unknown.svg";
25-
import macLogo from "../../assets/operating-systems/mac.svg";
26-
import windowsLogo from "../../assets/operating-systems/windows.svg";
27-
import linuxLogo from "../../assets/operating-systems/linux.svg";
28-
import unknownOsLogo from "../../assets/operating-systems/unknown.svg";
2917
import InfoIcon from '@material-ui/icons/Info';
3018
import NodeType from "../../models/node";
3119
import LinearProgress, {LinearProgressProps} from '@material-ui/core/LinearProgress';
20+
import browserLogo from "../../util/browser-logo";
21+
import osLogo from "../../util/os-logo";
22+
import browserVersion from "../../util/browser-version";
3223

3324
const useStyles = makeStyles({
3425
root: {
@@ -55,48 +46,6 @@ const useStyles = makeStyles({
5546
}
5647
});
5748

58-
const browserLogoPath = (browser: string): string => {
59-
switch (browser) {
60-
case "chrome":
61-
return chromeLogo;
62-
case "MicrosoftEdge":
63-
return edgeLogo;
64-
case "operablink":
65-
return operaLogo;
66-
case "opera":
67-
return operaLogo;
68-
case "firefox":
69-
return firefoxLogo;
70-
case "internet explorer":
71-
return internetExplorerLogo;
72-
case "safari":
73-
return safariLogo;
74-
case "Safari Technology Preview":
75-
return safariTechnologyPreviewLogo;
76-
default:
77-
return unknownBrowserLogo;
78-
}
79-
};
80-
81-
const osLogoPath = (os: string): string => {
82-
const osLowerCase: string = os.toLowerCase();
83-
if (osLowerCase.includes("win")) {
84-
return windowsLogo;
85-
}
86-
if (osLowerCase.includes("mac")) {
87-
return macLogo;
88-
}
89-
if (osLowerCase.includes("nix") || osLowerCase.includes("nux") || osLowerCase.includes("aix")) {
90-
return linuxLogo;
91-
}
92-
return unknownOsLogo;
93-
};
94-
95-
const browserVersion = (stereotype: any): string => {
96-
const version = stereotype.browserVersion ?? "";
97-
return version.length > 0 ? " - v." + version : version;
98-
}
99-
10049
function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
10150
return (
10251
<Box display="flex" alignItems="center">
@@ -159,19 +108,19 @@ export default function Node(props) {
159108
variant="h6"
160109
>
161110
<img
162-
src={osLogoPath(nodeInfo.osInfo.name)}
163-
className={classes.osLogo}
164-
alt="OS Logo"
111+
src={osLogo(nodeInfo.osInfo.name)}
112+
className={classes.osLogo}
113+
alt="OS Logo"
165114
/>
166115
<IconButton className={classes.buttonMargin} onClick={handleDialogOpen}>
167116
<InfoIcon/>
168117
</IconButton>
169118
<Dialog onClose={handleDialogClose} aria-labelledby="node-info-dialog" open={open}>
170119
<DialogTitle id="node-info-dialog">
171120
<img
172-
src={osLogoPath(nodeInfo.osInfo.name)}
173-
className={classes.osLogo}
174-
alt="OS Logo"
121+
src={osLogo(nodeInfo.osInfo.name)}
122+
className={classes.osLogo}
123+
alt="OS Logo"
175124
/>
176125
<Box fontWeight="fontWeightBold" mr={1} display='inline'>
177126
URI:
@@ -230,18 +179,23 @@ export default function Node(props) {
230179
.slice(index * 3, Math.min((index * 3) + 3, nodeInfo.slotStereotypes.length))
231180
.map((slotStereotype: any, idx) => {
232181
return (<Typography
233-
color="textPrimary"
234-
variant="h6"
235-
key={idx}
236-
>
237-
<img
238-
src={browserLogoPath(slotStereotype.stereotype.browserName)}
239-
className={classes.browserLogo}
240-
alt="Browser Logo"
241-
/>
242-
{slotStereotype.slots}
243-
{browserVersion(slotStereotype.stereotype)}
244-
</Typography>
182+
color="textPrimary"
183+
variant="h6"
184+
key={idx}
185+
>
186+
<img
187+
src={browserLogo(slotStereotype.stereotype.browserName)}
188+
className={classes.browserLogo}
189+
alt="Browser Logo"
190+
/>
191+
{slotStereotype.slots}
192+
{
193+
browserVersion(
194+
slotStereotype.stereotype.browserVersion ??
195+
slotStereotype.stereotype.version
196+
)
197+
}
198+
</Typography>
245199
)
246200
})}
247201
</Grid>

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

Lines changed: 49 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import {createStyles, lighten, makeStyles, Theme} from '@material-ui/core/styles';
2+
import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
33
import Table from '@material-ui/core/Table';
44
import TableBody from '@material-ui/core/TableBody';
55
import TableCell from '@material-ui/core/TableCell';
@@ -16,20 +16,11 @@ import Switch from '@material-ui/core/Switch';
1616
import {loader} from "graphql.macro";
1717
import {useQuery} from "@apollo/client";
1818
import {GridConfig} from "../../config";
19-
import chromeLogo from "../../assets/browsers/chrome.svg";
20-
import edgeLogo from "../../assets/browsers/edge.svg";
21-
import operaLogo from "../../assets/browsers/opera.svg";
22-
import firefoxLogo from "../../assets/browsers/firefox.svg";
23-
import internetExplorerLogo from "../../assets/browsers/internet-explorer.svg";
24-
import safariLogo from "../../assets/browsers/safari.svg";
25-
import safariTechnologyPreviewLogo from "../../assets/browsers/safari-technology-preview.png";
26-
import unknownBrowserLogo from "../../assets/browsers/unknown.svg";
27-
import macLogo from "../../assets/operating-systems/mac.svg";
28-
import windowsLogo from "../../assets/operating-systems/windows.svg";
29-
import linuxLogo from "../../assets/operating-systems/linux.svg";
30-
import unknownOsLogo from "../../assets/operating-systems/unknown.svg";
31-
import {Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton} from "@material-ui/core";
19+
import {Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, List, ListItem} from "@material-ui/core";
3220
import InfoIcon from "@material-ui/icons/Info";
21+
import browserLogo from "../../util/browser-logo";
22+
import osLogo from "../../util/os-logo";
23+
import browserVersion from "../../util/browser-version";
3324

3425
interface SessionData {
3526
id: string,
@@ -74,47 +65,6 @@ function createSessionData(
7465
};
7566
}
7667

77-
const browserLogoPath = (browser: string): string => {
78-
switch (browser.toLowerCase()) {
79-
case "chrome":
80-
return chromeLogo;
81-
case "microsoftedge":
82-
return edgeLogo;
83-
case "operablink":
84-
return operaLogo;
85-
case "opera":
86-
return operaLogo;
87-
case "firefox":
88-
return firefoxLogo;
89-
case "internet explorer":
90-
return internetExplorerLogo;
91-
case "safari":
92-
return safariLogo;
93-
case "safari technology preview":
94-
return safariTechnologyPreviewLogo;
95-
default:
96-
return unknownBrowserLogo;
97-
}
98-
};
99-
100-
const browserVersion = (version: string): string => {
101-
return version.length > 0 ? " - v." + version : version;
102-
}
103-
104-
const osLogoPath = (os: string): string => {
105-
const osLowerCase: string = os.toLowerCase();
106-
if (osLowerCase.includes("win")) {
107-
return windowsLogo;
108-
}
109-
if (osLowerCase.includes("mac")) {
110-
return macLogo;
111-
}
112-
if (osLowerCase.includes("nix") || osLowerCase.includes("nux") || osLowerCase.includes("aix")) {
113-
return linuxLogo;
114-
}
115-
return unknownOsLogo;
116-
};
117-
11868
function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
11969
if (b[orderBy] < a[orderBy]) {
12070
return -1;
@@ -147,18 +97,17 @@ function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
14797
}
14898

14999
interface HeadCell {
150-
disablePadding: boolean;
151100
id: keyof SessionData;
152101
label: string;
153102
numeric: boolean;
154103
}
155104

156105
const headCells: HeadCell[] = [
157-
{id: 'id', numeric: false, disablePadding: false, label: 'ID'},
158-
{id: 'rawCapabilities', numeric: false, disablePadding: false, label: 'Capabilities'},
159-
{id: 'startTime', numeric: false, disablePadding: false, label: 'Start time'},
160-
{id: 'sessionDurationMillis', numeric: true, disablePadding: false, label: 'Duration'},
161-
{id: 'nodeUri', numeric: false, disablePadding: false, label: 'Node URI'},
106+
{id: 'id', numeric: false, label: 'ID'},
107+
{id: 'rawCapabilities', numeric: false, label: 'Capabilities'},
108+
{id: 'startTime', numeric: false, label: 'Start time'},
109+
{id: 'sessionDurationMillis', numeric: true, label: 'Duration'},
110+
{id: 'nodeUri', numeric: false, label: 'Node URI'},
162111
];
163112

164113
const GRID_SESSIONS_QUERY = loader("../../graphql/sessions.gql");
@@ -183,7 +132,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
183132
<TableCell
184133
key={headCell.id}
185134
align={headCell.numeric ? 'right' : 'left'}
186-
padding={headCell.disablePadding ? 'none' : 'default'}
135+
padding={'default'}
187136
sortDirection={orderBy === headCell.id ? order : false}
188137
>
189138
<TableSortLabel
@@ -211,31 +160,21 @@ const useToolbarStyles = makeStyles((theme: Theme) =>
211160
paddingLeft: theme.spacing(2),
212161
paddingRight: theme.spacing(1),
213162
},
214-
highlight:
215-
theme.palette.type === 'light'
216-
? {
217-
color: theme.palette.secondary.main,
218-
backgroundColor: lighten(theme.palette.secondary.light, 0.85),
219-
}
220-
: {
221-
color: theme.palette.text.primary,
222-
backgroundColor: theme.palette.secondary.dark,
223-
},
224163
title: {
225164
flex: '1 1 100%',
226165
},
227166
}),
228167
);
229168

230-
const EnhancedTableToolbar = () => {
169+
const EnhancedTableToolbar = (props) => {
231170
const classes = useToolbarStyles();
232171

233172
return (
234173
<Toolbar
235174
className={classes.root}
236175
>
237176
<Typography className={classes.title} variant="h3" id="tableTitle" component="div">
238-
Sessions
177+
{props.title}
239178
</Typography>
240179
</Toolbar>
241180
);
@@ -272,7 +211,17 @@ const useStyles = makeStyles((theme: Theme) =>
272211
},
273212
buttonMargin: {
274213
padding: 1,
275-
}
214+
},
215+
queueList: {
216+
minWidth: 750,
217+
backgroundColor: theme.palette.background.paper,
218+
marginBottom: 20,
219+
},
220+
queueListItem: {
221+
borderBottomWidth: 1,
222+
borderBottomStyle: 'solid',
223+
borderBottomColor: '#e0e0e0',
224+
},
276225
}),
277226
);
278227

@@ -310,6 +259,10 @@ export default function Sessions() {
310259
);
311260
});
312261

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

355308
return (
356309
<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+
)}
357326
<Paper className={classes.paper}>
358-
<EnhancedTableToolbar/>
327+
<EnhancedTableToolbar title={"Sessions"}/>
359328
<TableContainer>
360329
<Table
361330
className={classes.table}
@@ -390,12 +359,12 @@ export default function Sessions() {
390359
</TableCell>
391360
<TableCell align="right">
392361
<img
393-
src={osLogoPath(row.platformName as string)}
362+
src={osLogo(row.platformName as string)}
394363
className={classes.logo}
395364
alt="OS Logo"
396365
/>
397366
<img
398-
src={browserLogoPath(row.browserName as string)}
367+
src={browserLogo(row.browserName as string)}
399368
className={classes.logo}
400369
alt="Browser Logo"
401370
/>
@@ -407,12 +376,12 @@ export default function Sessions() {
407376
open={rowOpen === row.id}>
408377
<DialogTitle id="session-info-dialog">
409378
<img
410-
src={osLogoPath(row.platformName as string)}
379+
src={osLogo(row.platformName as string)}
411380
className={classes.logo}
412381
alt="OS Logo"
413382
/>
414383
<img
415-
src={browserLogoPath(row.browserName as string)}
384+
src={browserLogo(row.browserName as string)}
416385
className={classes.logo}
417386
alt="Browser Logo"
418387
/>

0 commit comments

Comments
 (0)