elysium/qualiteer
elysium/qualiteer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactored frontend

Browse source
This commit is contained in:
Dunemask 2022-07-12 21:48:05 +00:00
parent 37613e4de1
commit 6386294887
24 changed files with 54 additions and 529 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Dashboard.jsx
View file

@ -3,7 +3,7 @@ import { JobProvider } from "./ctx/JobContext.jsx";
import { StoreProvider } from "./ctx/StoreContext.jsx";
import { BrowserRouter } from "react-router-dom";
// Import Views
import Views from "./Views.jsx";
import Views from "./views/Views.jsx";
export default function Dashboard() {
return (

56
src/Views.jsx
View file

@ -1,56 +0,0 @@
import { useContext, useState } from "react";
import StoreContext from "./ctx/StoreContext.jsx";
import JobContext from "./ctx/JobContext.jsx";
import Navbar from "./Navbar.jsx";
import { Routes, Route, Navigate } from "react-router-dom";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import MenuIcon from "@mui/icons-material/Menu";
import Avatar from "@mui/material/Avatar";
import Drawer from "@mui/material/Drawer";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import NotificationsIcon from "@mui/icons-material/Notifications";
import WorkIcon from "@mui/icons-material/Work";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import SettingsIcon from "@mui/icons-material/Settings";
import WarningIcon from "@mui/icons-material/Warning";
import InfoIcon from "@mui/icons-material/Info";
// Import Pages
import Failing from "./views/Failing.jsx";
import Alerting from "./views/Alerting.jsx";
import Jobs from "./views/Jobs.jsx";
import Catalog from "./views/Catalog.jsx";
import Settings from "./views/Settings.jsx";
import About from "./views/About.jsx";
const drawerWidth = 240;
export default function Views() {
const { state: jobState } = useContext(JobContext);
const { state: store } = useContext(StoreContext);
return (
<div className="view">
<Navbar />
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<Toolbar />
<Routes>
<Route exact path="/" element={<Navigate to="/failing" replace />} />
<Route path="/failing" element={<Failing />} />
<Route path="/alerting" element={<Alerting />} />
<Route path="/jobs" element={<Jobs />} />
<Route path="/catalog" element={<Catalog />} />
<Route path="/settings" element={<Settings />} />
<Route path="/about" element={<About />} />
</Routes>
</Box>
</div>
);
}

14
src/runner/JobDisplay.jsx
View file

@ -1,14 +0,0 @@
function jobDisplay({ props }) {
return (
<div className="job">
<h2>Job ID: {props.job.id}</h2>
<h3>Log: </h3>
{props.job.log.map((l, i) => (
<div className="line" key={i}>
{l}
<br />
</div>
))}
</div>
);
}

49
src/runner/JobView.jsx
View file

@ -1,49 +0,0 @@
import { useContext } from "react";
import { Initiator } from "qualiteer/web-clients";
import JobContext, { ACTIONS as jobActions } from "../../ctx/JobContext.jsx";
const cmd = `node other.js`;
export default function Test() {
const { state: jobState, dispatch: jobDispatch } = useContext(JobContext);
function onLog(d) {
const job = jobState.jobs[0];
job.log.push(d);
jobDispatch({ type: jobActions.UPDATE, jobId: jobState.jobs[0].id, job });
console.log(d);
console.log(jobState);
}
async function startJob() {
console.log("Wanting to start");
const url = "https://Qualiteer.elijahparker3.repl.co";
// Create an initiator and make a job request
const primary = new Initiator(url);
const jobRequest = { command: cmd };
const job = await primary.newJob(jobRequest, onLog, () =>
console.log("Primary Job Concluded")
);
jobDispatch({ type: jobActions.CREATE, job: { ...job, log: [] } });
console.log("Started");
}
return (
<div className="Jobs">
<h1>vv Info vv </h1>
<button onClick={startJob}>Start</button>
{jobState.jobs.map((j) =>
j.log.map((l, i) => (
<div className="line" key={i}>
{l}
<br />
</div>
))
)}
</div>
);
/*
}*/
}

119
src/views/Jobs.jsx
View file

@ -1,119 +0,0 @@
import { useState, useContext, useEffect } from "react";
import { useLocation } from "react-router-dom";
import StoreContext from "../ctx/StoreContext.jsx";
import JobContext from "../ctx/JobContext.jsx";
import JobBox from "./components/JobBox.jsx";
import JobTestSelector from "./components/JobTestSelector.jsx";
import JobView from "./components/JobView.jsx";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import Toolbar from "@mui/material/Toolbar";
import DialogTitle from "@mui/material/DialogTitle";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import SpeedDial from "@mui/material/SpeedDial";
import SpeedDialAction from "@mui/material/SpeedDialAction";
import SpeedDialIcon from "@mui/material/SpeedDialIcon";
import PageviewIcon from "@mui/icons-material/Pageview";
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
import ViewCarouselIcon from "@mui/icons-material/ViewCarousel";
export default function Jobs() {
const {
state: jobState,
dispatch: jobDispatch,
jobBuilder,
} = useContext(JobContext);
const location = useLocation();
const { state: store, updateStore } = useContext(StoreContext);
const [quickOpen, setQuickOpen] = useState(false);
const [jobDialogOpen, setJobDialogOpen] = useState(false);
const actions = [
{ name: "Suite", icon: <ViewCarouselIcon /> },
{ name: "Compound", icon: <ViewColumnIcon /> },
{ name: "Manual", icon: <PageviewIcon /> },
];
const quickOpenClick = (e) => {
e.preventDefault();
e.stopPropagation();
if (!store.simplifiedControls) return setQuickOpen(!quickOpen);
setJobDialogOpen(true);
};
const quickOpenClose = () => setQuickOpen(false);
const handleClickOpen = () => setJobDialogOpen(true);
const [queued, setQueued] = useState([]);
useEffect(() => {}, [jobState.jobs, location]);
const handleClose = (confirmed) => () => {
setJobDialogOpen(false);
if (!confirmed) return;
jobBuilder(queued);
};
return (
<div className="jobs">
{location.hash === "" &&
jobState.jobs.map((v, i) => (
<a
key={i}
href={`/jobs#${v.name}`}
style={{ textDecoration: "none" }}
>
<JobBox job={v} />
</a>
))}
{jobState.jobs.find((job) => job.name === location.hash.slice(1)) && (
<JobView
job={jobState.jobs.find((job) => job.name === location.hash.slice(1))}
/>
)}
<Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
<Toolbar />
<DialogTitle>New Job</DialogTitle>
<DialogContent>
<span>Some Selectors</span>
<JobTestSelector
queued={queued}
availableTests={store.catalog}
setQueued={setQueued}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose()}>Cancel</Button>
<Button onClick={handleClose(true)} autoFocus>
Start
</Button>
</DialogActions>
</Dialog>
<ClickAwayListener onClickAway={quickOpenClose}>
<SpeedDial
ariaLabel="New Job"
sx={{ position: "fixed", bottom: 16, right: 16 }}
icon={<SpeedDialIcon />}
onClick={quickOpenClick}
open={quickOpen}
>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
onClick={handleClickOpen}
/>
))}
</SpeedDial>
</ClickAwayListener>
</div>
);
}

19
src/Navbar.jsx → src/views/Navbar.jsx
View file

@ -1,13 +1,9 @@
import { useContext, useState } from "react";
import StoreContext from "./ctx/StoreContext.jsx";
import JobContext from "./ctx/JobContext.jsx";
import StoreContext from "../ctx/StoreContext.jsx";
import JobContext from "../ctx/JobContext.jsx";
import {
Routes,
Route,
Link,
BrowserRouter,
Navigate,
useLocation,
} from "react-router-dom";
import AppBar from "@mui/material/AppBar";
@ -30,15 +26,8 @@ import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import SettingsIcon from "@mui/icons-material/Settings";
import WarningIcon from "@mui/icons-material/Warning";
import InfoIcon from "@mui/icons-material/Info";
// Import Pages
import Failing from "./views/Failing.jsx";
import Alerting from "./views/Alerting.jsx";
import Jobs from "./views/Jobs.jsx";
import Catalog from "./views/Catalog.jsx";
import Settings from "./views/Settings.jsx";
import About from "./views/About.jsx";
const drawerWidth = 240;
const drawerWidth = 250;
export default function Navbar(props) {
const { state: jobState } = useContext(JobContext);
@ -112,7 +101,7 @@ export default function Navbar(props) {
sx={{ zIndex: drawerIndex(true) }}
>
<Toolbar />
<Box sx={{ width: 250, overflow: "auto" }} role="presentation">
<Box sx={{ width: drawerWidth, overflow: "auto" }} role="presentation">
<List>
{pages.map((text, index) => (
<ListItemButton

35
src/views/Views.jsx Normal file
View file

@ -0,0 +1,35 @@
import { Routes, Route, Navigate } from "react-router-dom";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
// Import Navbar
import Navbar from "./Navbar.jsx";
// Import Pages
import Failing from "./failing/Failing.jsx";
import Alerting from "./alerting/Alerting.jsx";
import Jobs from "./jobs/Jobs.jsx";
import Catalog from "./catalog/Catalog.jsx";
import Settings from "./settings/Settings.jsx";
import About from "./about/About.jsx";
export default function Views() {
return (
<div className="view">
<Navbar />
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<Toolbar />
<Routes>
<Route exact path="/" element={<Navigate to="/failing" replace />} />
<Route path="/failing" element={<Failing />} />
<Route path="/alerting" element={<Alerting />} />
<Route path="/jobs" element={<Jobs />} />
<Route path="/catalog" element={<Catalog />} />
<Route path="/settings" element={<Settings />} />
<Route path="/about" element={<About />} />
</Routes>
</Box>
</div>
);
}

0
src/views/About.jsx → src/views/about/About.jsx
View file

6
src/views/Alerting.jsx → src/views/alerting/Alerting.jsx
View file

@ -1,7 +1,7 @@
import { useState, useContext } from "react";
import StoreContext from "../ctx/StoreContext.jsx";
import SilencedBox from "./components/SilencedBox.jsx";
import SilenceDialog from "./components/SilenceDialog.jsx";
import StoreContext from "../../ctx/StoreContext.jsx";
import SilencedBox from "./SilencedBox.jsx";
import SilenceDialog from "./SilenceDialog.jsx";
import SpeedDial from "@mui/material/SpeedDial";
import SpeedDialAction from "@mui/material/SpeedDialAction";

0
src/views/components/SilenceDialog.jsx → src/views/alerting/SilenceDialog.jsx
View file

0
src/views/components/SilencedBox.jsx → src/views/alerting/SilencedBox.jsx
View file

50
src/views/alt-comps/JobManualSelector.jsx
View file

@ -1,50 +0,0 @@
import { useState, useEffect } from "react";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import Checkbox from "@mui/material/Checkbox";
export default function JobManualSelector(props) {
const { availableTests } = props;
const [queued, setQueued] = useState([]);
useEffect(() => {}, [availableTests]);
const queueTest = (test) => () => {
const q = [...queued];
const testIndex = q.indexOf(test);
if (testIndex === -1) q.push(test);
else q.splice(testIndex, 1);
setQueued(q);
};
return (
<Box style={{ overflow: "auto", maxHeight: 250 }}>
<List>
{availableTests.map((v, i) => (
<ListItem
key={i}
secondaryAction={
<Checkbox edge="end" checked={queued.includes(v)} />
}
disablePadding
onClick={queueTest(v)}
>
<ListItemButton key={i}>
<ListItemText
primary={
<span>
{v.class}#<strong>{v.name}</strong>
</span>
}
style={{ wordBreak: "break-word" }}
/>
</ListItemButton>
</ListItem>
))}
</List>
</Box>
);
}

23
src/views/alt-comps/JobTestSelector.jsx
View file

@ -1,23 +0,0 @@
import { useState, useEffect } from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
export default function JobTestSelector(props) {
const { jobDialogOpen, handleClose, dialogTitle, testSelector } = props;
return (
<Dialog open={jobDialogOpen} onClose={handleClose} maxWidth="xs">
<DialogTitle>{dialogTitle}</DialogTitle>
<DialogContent>{testSelector}</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose} autoFocus>
Start
</Button>
</DialogActions>
</Dialog>
);
}

9
src/views/Catalog.jsx → src/views/catalog/Catalog.jsx
View file

@ -1,11 +1,12 @@
import { useEffect, useContext } from "react";
import StoreContext from "../ctx/StoreContext.jsx";
import JobContext from "../ctx/JobContext.jsx";
import CatalogBox from "./components/CatalogBox.jsx";
import StoreContext from "../../ctx/StoreContext.jsx";
import JobContext from "../../ctx/JobContext.jsx";
import CatalogBox from "./CatalogBox.jsx";
import CatalogSearch from "./CatalogSearch.jsx";
import TextField from "@mui/material/TextField";
import CatalogSearch from "./components/CatalogSearch.jsx";
export default function Catalog() {
const {

0
src/views/components/CatalogBox.jsx → src/views/catalog/CatalogBox.jsx
View file

0
src/views/components/CatalogSearch.jsx → src/views/catalog/CatalogSearch.jsx
View file

67
src/views/components/JobBox.jsx
View file

@ -1,67 +0,0 @@
import React, { useState, useContext } from "react";
import StoreContext from "../../ctx/StoreContext.jsx";
import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
import Accordion from "@mui/material/Accordion";
import AccordionDetails from "@mui/material/AccordionDetails";
import AccordionSummary from "@mui/material/AccordionSummary";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import CheckIcon from "@mui/icons-material/Check";
import ClearIcon from "@mui/icons-material/Clear";
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
import PendingIcon from "@mui/icons-material/Pending";
import VisibilityIcon from "@mui/icons-material/Visibility";
import DoNotDisturbIcon from "@mui/icons-material/DoNotDisturb";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
export default function JobBox(props) {
const { job } = props;
const { name, status } = job;
function jobIcon() {
switch (status) {
case jobStatus.OK:
return <CheckIcon color="success" />;
case jobStatus.ERROR:
return <ClearIcon color="error" />;
case jobStatus.PENDING:
return <PendingIcon color="info" />;
case jobStatus.ACTIVE:
return <VisibilityIcon color="primary" />;
case jobStatus.CANCELED:
return <DoNotDisturbIcon color="warning" />;
case jobStatus.QUEUED:
return <ViewColumnIcon color="secondary" />;
default:
return <ReplayIcon />;
}
}
return (
<Accordion expanded={false} disableGutters={true} square>
<AccordionSummary
style={{
backgroundColor: "rgba(0, 0, 0, .03)",
flexWrap: "wrap",
}}
>
<Typography
component={"span"}
style={{ wordBreak: "break-word", margin: "auto 0" }}
>
{name}
</Typography>
<Stack sx={{ ml: "auto" }}>
<IconButton aria-label="retry" component="span">
{jobIcon()}
</IconButton>
</Stack>
</AccordionSummary>
</Accordion>
);
}

67
src/views/components/JobLogView.jsx
View file

@ -1,67 +0,0 @@
import { useContext, useState, useEffect } from "react";
import JobContext from "../../ctx/JobContext.jsx";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Skeleton from "@mui/material/Skeleton";
import Stack from "@mui/material/Stack";
export default function JobLogView(props) {
const { log } = props;
const LoadingDot = () => (
<Skeleton
variant="circular"
width={16}
height={16}
sx={{ backgroundColor: "rgb(240,240,240)" }}
/>
);
return (
<Box
style={{
background: "black",
color: "white",
padding: "1rem 0.5rem",
wordBreak: "break-all",
}}
>
{log.map((l, i) => (
<Box className="line" key={i} sx={{ margin: ".25rem 0px" }}>
<Typography
variant="body2"
component="div"
sx={{ display: "flex", overflowWrap: "anywhere" }}
>
<Box
className="line-number"
sx={{
display: "flex",
margin: "0px 0.5rem",
color: "rgb(210,210,210)",
justifyContent: "center",
minWidth: "2rem",
}}
>
{i + 1}
</Box>
<Box
className="line-content"
sx={{ display: "flex", mr: ".5rem", color: "rgb(240,240,240)" }}
>
{" "}
{l}
</Box>
</Typography>
</Box>
))}
<Stack direction="row" spacing={1} sx={{ mt: ".5rem", ml: "0.75rem" }}>
<LoadingDot />
<LoadingDot />
<LoadingDot />
</Stack>
</Box>
);
}

49
src/views/components/JobTestSelector.jsx
View file

@ -1,49 +0,0 @@
import { useState, useEffect } from "react";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";
export default function JobTestSelector(props) {
const { availableTests, queued, setQueued } = props;
useEffect(() => {}, [availableTests]);
const queueTest = (test) => () => {
const q = [...queued];
const testIndex = q.indexOf(test);
if (testIndex === -1) q.push(test);
else q.splice(testIndex, 1);
setQueued(q);
};
return (
<Box style={{ overflow: "auto", maxHeight: 250 }}>
<List>
{availableTests.map((v, i) => (
<ListItem
key={i}
secondaryAction={
<Checkbox edge="end" checked={queued.includes(v)} />
}
disablePadding
onClick={queueTest(v)}
>
<ListItemButton key={i}>
<ListItemText
primary={
<span>
{v.class}#<strong>{v.name}</strong>
</span>
}
style={{ wordBreak: "break-word" }}
/>
</ListItemButton>
</ListItem>
))}
</List>
</Box>
);
}

69
src/views/components/JobView.jsx
View file

@ -1,69 +0,0 @@
import React, { useContext, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import JobContext from "../../ctx/JobContext.jsx";
import Box from "@mui/material/Box";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import JobLogView from "./JobLogView.jsx";
export default function JobView(props) {
const navigate = useNavigate();
const { state: jobState } = useContext(JobContext);
const { job: initJob } = props;
const [job, setJob] = useState({ log: [initJob.name] });
function retryJob() {}
function downloadLog() {}
function navigateToJobs() {
navigate("/jobs");
}
function onLog(d) {
const j = { ...job };
j.log.push(d);
setJob(j);
}
return (
<Box>
<AppBar
position="fixed"
sx={{
backgroundColor: "white",
boxShadow: "none",
color: "black",
}}
>
<Toolbar disableGutters />
<Box sx={{ flexGrow: 1, margin: "0 10px" }}>
<Toolbar disableGutters>
<Button onClick={navigateToJobs}>Back</Button>
<Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
{initJob.name}
</Typography>
<Button onClick={downloadLog}>Log</Button>
<Button onClick={retryJob}>Retry</Button>
</Toolbar>
</Box>
</AppBar>
<Toolbar disableGutters />
<button
onClick={() => {
const itvrl = setInterval(() => {
onLog(Date.now());
}, 100);
setTimeout(() => clearInterval(itvrl), 5000);
}}
>
Hello{" "}
</button>
<JobLogView log={job.log} />
</Box>
);
}

8
src/views/Failing.jsx → src/views/failing/Failing.jsx
View file

@ -1,7 +1,8 @@
import { useState, useContext } from "react";
import StoreContext from "../ctx/StoreContext.jsx";
import JobContext from "../ctx/JobContext.jsx";
import SilenceDialog from "./components/SilenceDialog.jsx";
import StoreContext from "../../ctx/StoreContext.jsx";
import JobContext from "../../ctx/JobContext.jsx";
import SilenceDialog from "../alerting/SilenceDialog.jsx";
import FailingBox from "./FailingBox.jsx";
import SpeedDial from "@mui/material/SpeedDial";
import SpeedDialAction from "@mui/material/SpeedDialAction";
@ -16,7 +17,6 @@ import DialogTitle from "@mui/material/DialogTitle";
import ReplayIcon from "@mui/icons-material/Replay";
import FailingBox from "./components/FailingBox.jsx";
export default function Failing() {
const { state: jobState, retryAll, activeJobStates } = useContext(JobContext);

0
src/views/components/FailingBox.jsx → src/views/failing/FailingBox.jsx
View file

0
src/views/components/MultiOptionDialog.jsx → src/views/settings/MultiOptionDialog.jsx
View file

4
src/views/Settings.jsx → src/views/settings/Settings.jsx
View file

@ -1,7 +1,7 @@
import React, { useContext, useState, useEffect } from "react";
import StoreContext from "../ctx/StoreContext.jsx";
import StoreContext from "../../ctx/StoreContext.jsx";
import MultiOptionDialog from "./components/MultiOptionDialog.jsx";
import MultiOptionDialog from "./MultiOptionDialog.jsx";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";