Job navigation rewrite
This commit is contained in:
parent
aced10d083
commit
4097c121e3
10 changed files with 242 additions and 67 deletions
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useContext } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import JobContext, { jobStatus } from "@qltr/jobs";
|
||||
import {
|
||||
selectedPipelineBranches,
|
||||
pipelineJobs,
|
||||
findPipelineJobByTestName,
|
||||
useJobIconState,
|
||||
useJobNav,
|
||||
} from "@qltr/util/JobTools";
|
||||
|
||||
import Box from "@mui/material/Box";
|
||||
|
|
@ -18,11 +18,7 @@ import AccordionSummary from "@mui/material/AccordionSummary";
|
|||
import Stack from "@mui/material/Stack";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
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 Menu from "@mui/material/Menu";
|
||||
|
|
@ -39,7 +35,8 @@ function JobPipelineDisplay(props) {
|
|||
pipelineCancel,
|
||||
pipelineDestroy,
|
||||
} = useContext(JobContext);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const jobNav = useJobNav();
|
||||
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
|
|
@ -53,13 +50,9 @@ function JobPipelineDisplay(props) {
|
|||
const selectJob = (testName) => () => {
|
||||
const job = findPipelineJobByTestName(pipeline, jobState.jobs, testName);
|
||||
if (!job) return;
|
||||
navigate(`/qualiteer/jobs#${job.jobId}`);
|
||||
jobNav.toJob(job.jobId);
|
||||
};
|
||||
|
||||
function navigateToJobs() {
|
||||
navigate(`/qualiteer/jobs`);
|
||||
}
|
||||
|
||||
function cancelPipeline() {
|
||||
pipelineCancel(pipeline.id);
|
||||
}
|
||||
|
|
@ -99,7 +92,7 @@ function JobPipelineDisplay(props) {
|
|||
<Toolbar disableGutters />
|
||||
<Box sx={{ flexGrow: 1, margin: "0 10px" }}>
|
||||
<Toolbar disableGutters>
|
||||
<IconButton onClick={navigateToJobs}>
|
||||
<IconButton onClick={jobNav.toJobs}>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
|
||||
|
|
|
|||
155
src/views/jobs/JobPiplinePendingView.jsx
Normal file
155
src/views/jobs/JobPiplinePendingView.jsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import React, { useContext, useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import JobContext, { jobStatus } from "@qltr/jobs";
|
||||
import StoreContext from "@qltr/store";
|
||||
import Box from "@mui/material/Box";
|
||||
import AppBar from "@mui/material/AppBar";
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
|
||||
import JobLogView from "./JobLogView.jsx";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import ReplayIcon from "@mui/icons-material/Replay";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
import DoNotDisturbIcon from "@mui/icons-material/DoNotDisturb";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
|
||||
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
|
||||
|
||||
export default function JobPipelinePendingView(props) {
|
||||
const navigate = useNavigate();
|
||||
const { job } = props;
|
||||
const { jobFactory, jobCancel, jobDestroy } = useContext(JobContext);
|
||||
const { state: store } = useContext(StoreContext);
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
function download(filename, text) {
|
||||
var element = document.createElement("a");
|
||||
element.setAttribute(
|
||||
"href",
|
||||
"data:text/plain;charset=utf-8," + encodeURIComponent(text)
|
||||
);
|
||||
element.setAttribute("download", filename);
|
||||
element.style.display = "none";
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
|
||||
function retryJob() {
|
||||
const jobId = jobFactory(job.builderCache);
|
||||
if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
|
||||
}
|
||||
|
||||
function downloadLog() {
|
||||
if (job.status === jobStatus.PENDING) return;
|
||||
download(`${job.jobId}.txt`, job.log.join("\n"));
|
||||
}
|
||||
|
||||
function cancelJob() {
|
||||
jobCancel(job.jobId);
|
||||
}
|
||||
|
||||
function deleteJob() {
|
||||
jobDestroy(job.jobId);
|
||||
navigateToJobs();
|
||||
}
|
||||
|
||||
const menuSelect = (cb) => () => {
|
||||
handleClose();
|
||||
cb();
|
||||
};
|
||||
|
||||
function navigateToJobs() {
|
||||
if (job.isPipeline) return navigate(`/qualiteer/jobs#p${job.pipelineId}`);
|
||||
navigate("/qualiteer/jobs");
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "none",
|
||||
color: "black",
|
||||
}}
|
||||
>
|
||||
<Toolbar disableGutters />
|
||||
<Box sx={{ flexGrow: 1, margin: "0 10px" }}>
|
||||
<Toolbar disableGutters>
|
||||
<IconButton onClick={navigateToJobs}>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" component="span" sx={{ ml: "auto" }}>
|
||||
{job.name}
|
||||
</Typography>
|
||||
{job.isPipeline && (
|
||||
<IconButton>
|
||||
<ViewColumnIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
<IconButton onClick={handleClick} sx={{ ml: "auto" }}>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
</Box>
|
||||
</AppBar>
|
||||
<Toolbar disableGutters />
|
||||
<JobLogView log={job.log} status={job.status} />
|
||||
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
|
||||
<MenuItem onClick={menuSelect(downloadLog)}>
|
||||
<ListItemIcon>
|
||||
<DownloadIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>Download Log</ListItemText>
|
||||
</MenuItem>
|
||||
{!job.isPipeline && (
|
||||
<MenuItem onClick={menuSelect(retryJob)}>
|
||||
<ListItemIcon>
|
||||
{job.status === jobStatus.OK || job.status === jobStatus.ERROR ? (
|
||||
<ReplayIcon fontSize="small" />
|
||||
) : (
|
||||
<PlayArrowIcon fontSize="small" />
|
||||
)}
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
{job.status === jobStatus.ERROR ? "Retry" : "Duplicate"}
|
||||
</ListItemText>
|
||||
</MenuItem>
|
||||
)}
|
||||
{job.status === jobStatus.OK ||
|
||||
job.status === jobStatus.ERROR ||
|
||||
job.status === jobStatus.CANCELED ? null : (
|
||||
<MenuItem onClick={menuSelect(cancelJob)}>
|
||||
<ListItemIcon>
|
||||
<DoNotDisturbIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>Cancel</ListItemText>
|
||||
</MenuItem>
|
||||
)}
|
||||
{!job.isPipeline && (
|
||||
<MenuItem onClick={menuSelect(deleteJob)}>
|
||||
<ListItemIcon>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>Delete</ListItemText>
|
||||
</MenuItem>
|
||||
)}
|
||||
</Menu>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -20,6 +20,7 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
|||
import DoNotDisturbIcon from "@mui/icons-material/DoNotDisturb";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
|
||||
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
|
||||
|
||||
export default function JobView(props) {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -93,10 +94,15 @@ export default function JobView(props) {
|
|||
<IconButton onClick={navigateToJobs}>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
|
||||
<Typography variant="h6" component="span" sx={{ ml: "auto" }}>
|
||||
{job.name}
|
||||
</Typography>
|
||||
<IconButton onClick={handleClick}>
|
||||
{job.isPipeline && (
|
||||
<IconButton>
|
||||
<ViewColumnIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
<IconButton onClick={handleClick} sx={{ ml: "auto" }}>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useContext, useEffect } from "react";
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
import JobContext from "@qltr/jobs";
|
||||
|
|
@ -15,14 +15,33 @@ export default function Jobs() {
|
|||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const jobViewPrefix = "#job-";
|
||||
const pipelineViewPrefix = "#pipeline-";
|
||||
const cachePrefix = "#cache-";
|
||||
|
||||
function jobHashLoader() {
|
||||
const { hash } = location;
|
||||
if (!hash) return {};
|
||||
const jobIndex = hash.indexOf(jobViewPrefix);
|
||||
const pipelineIndex = hash.indexOf(pipelineViewPrefix);
|
||||
const cacheIndex = hash.indexOf(cachePrefix);
|
||||
const jobId = jobIndex !== 0 ? null : hash.slice(jobViewPrefix.length);
|
||||
const pipelineId =
|
||||
pipelineIndex !== 0 ? null : hash.slice(pipelineViewPrefix.length);
|
||||
const cacheData = cacheIndex !== 0 ? null : hash.slice(cachePrefix.length);
|
||||
const job = !jobId ? null : jobState.jobs.find((j) => j.jobId === jobId);
|
||||
const pipeline = !pipelineId
|
||||
? null
|
||||
: jobState.pipelines.find((p) => p.id === pipelineId);
|
||||
const builderCache = !cacheData ? null : { fakedata: "yep" };
|
||||
return { job, pipeline, builderCache };
|
||||
}
|
||||
|
||||
const jobHash = jobHashLoader();
|
||||
|
||||
useEffect(() => {
|
||||
const jobName = location.hash.slice(1);
|
||||
const pipelineId = jobName.slice(1);
|
||||
if (!jobName || !pipelineId) return;
|
||||
const hasJob = jobState.pipelines.find((p) => p.id === pipelineId);
|
||||
const hasPipeline = jobState.jobs.find((job) => job.name === jobName);
|
||||
if (hasPipeline || hasJob) return;
|
||||
if (jobName || pipelineId) navigate("/qualiteer/jobs");
|
||||
const { job, pipeline, builderCache } = jobHash;
|
||||
if (!job && !pipeline && !builderCache) navigate("/qualiteer/jobs");
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
@ -59,7 +78,7 @@ export default function Jobs() {
|
|||
.map((v, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={`/qualiteer/jobs#${v.name}`}
|
||||
href={`/qualiteer/jobs#job-${v.jobId}`}
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
<JobBox job={v} />
|
||||
|
|
@ -69,7 +88,7 @@ export default function Jobs() {
|
|||
<a
|
||||
key={i}
|
||||
style={{ textDecoration: "none" }}
|
||||
href={`/qualiteer/jobs#p${p.id}`}
|
||||
href={`/qualiteer/jobs#pipeline-${p.id}`}
|
||||
>
|
||||
<JobPipelineBox pipeline={p} />
|
||||
</a>
|
||||
|
|
@ -77,21 +96,8 @@ export default function Jobs() {
|
|||
</React.Fragment>
|
||||
)}
|
||||
|
||||
{location.hash[1] === "p"
|
||||
? jobState.pipelines.find((p) => p.id === location.hash.slice(2)) && (
|
||||
<JobPipelineDisplay
|
||||
pipeline={jobState.pipelines.find(
|
||||
(p) => p.id === location.hash.slice(2)
|
||||
)}
|
||||
/>
|
||||
)
|
||||
: jobState.jobs.find((job) => job.name === location.hash.slice(1)) && (
|
||||
<JobView
|
||||
job={jobState.jobs.find(
|
||||
(job) => job.name === location.hash.slice(1)
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{jobHash.pipeline && <JobPipelineDisplay pipeline={jobHash.pipeline} />}
|
||||
{jobHash.job && <JobView job={jobHash.job} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useContext, useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import React, { useContext, useState } from "react";
|
||||
import StoreContext from "@qltr/store";
|
||||
import JobContext from "@qltr/jobs";
|
||||
import { useJobNav } from "@qltr/util/JobTools";
|
||||
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
|
|
@ -27,9 +27,9 @@ import PipelineTrackSelector from "./PipelineTrackSelector.jsx";
|
|||
import PipelineConfirm from "./PipelineConfirm.jsx";
|
||||
|
||||
export default function JobBuilder() {
|
||||
const navigate = useNavigate();
|
||||
const { state: store } = useContext(StoreContext);
|
||||
const { jobFactory } = useContext(JobContext);
|
||||
const jobNav = useJobNav();
|
||||
const [quickOpen, setQuickOpen] = useState(false);
|
||||
const [jobDialogOpen, setJobDialogOpen] = useState(false);
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ export default function JobBuilder() {
|
|||
setJobDialogOpen(false);
|
||||
if (!confirmed) return;
|
||||
const jobId = jobFactory(cache);
|
||||
if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
|
||||
if (store.focusJob) jobNav.toJob(jobId);
|
||||
};
|
||||
|
||||
// Pull info from url if possible?
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue