Fixed gitignore
This commit is contained in:
parent
338000684b
commit
61072ee032
16 changed files with 721 additions and 1 deletions
67
src/views/jobs/JobBox.jsx
Normal file
67
src/views/jobs/JobBox.jsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
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/jobs/JobLogView.jsx
Normal file
67
src/views/jobs/JobLogView.jsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
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/jobs/JobTestSelector.jsx
Normal file
49
src/views/jobs/JobTestSelector.jsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
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/jobs/JobView.jsx
Normal file
69
src/views/jobs/JobView.jsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
119
src/views/jobs/Jobs.jsx
Normal file
119
src/views/jobs/Jobs.jsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
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 "./JobBox.jsx";
|
||||
import JobTestSelector from "./JobTestSelector.jsx";
|
||||
import JobView from "./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={`/qualiteer/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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue