107 lines
3.4 KiB
JavaScript
107 lines
3.4 KiB
JavaScript
import React, { useContext, useEffect } from "react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
|
|
import JobContext from "@qltr/jobctx";
|
|
import JobBox from "./JobBox.jsx";
|
|
import JobPipelineBox from "./pipeline/JobPipelineBox.jsx";
|
|
import JobView from "./JobView.jsx";
|
|
import JobPipelineDisplay from "./pipeline/JobPipelineDisplay.jsx";
|
|
import JobBuilder from "./builder/JobBuilder.jsx";
|
|
import Typography from "@mui/material/Typography";
|
|
import Box from "@mui/material/Box";
|
|
|
|
export default function Jobs() {
|
|
const { state: jobState } = useContext(JobContext);
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const jobViewPrefix = "#job-";
|
|
const pipelineViewPrefix = "#pipeline-";
|
|
const cachePrefix = "#cache-";
|
|
|
|
function jobHashLoader() {
|
|
const { hash } = location;
|
|
if (!hash) return { hash };
|
|
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, hash };
|
|
}
|
|
|
|
const jobHash = jobHashLoader();
|
|
|
|
useEffect(() => {
|
|
const { job, pipeline, builderCache, hash } = jobHash;
|
|
console.log(jobState.jobs.filter((j) => !j.isPipeline));
|
|
if (!hash) return;
|
|
if (!job && !pipeline && !builderCache) navigate("/qualiteer/jobs");
|
|
});
|
|
|
|
return (
|
|
<div className="jobs">
|
|
{jobState.jobs.length === 0 ? (
|
|
<React.Fragment>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
sx={{ flexFlow: "wrap" }}
|
|
>
|
|
<Typography variant="h4" sx={{ textAlign: "center" }}>
|
|
No jobs found!
|
|
</Typography>
|
|
</Box>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
sx={{ flexFlow: "wrap" }}
|
|
>
|
|
<Typography variant="h5" sx={{ textAlign: "center" }}>
|
|
Click the '+' to start a new one!
|
|
</Typography>
|
|
</Box>
|
|
</React.Fragment>
|
|
) : null}
|
|
|
|
<JobBuilder />
|
|
|
|
{location.hash === "" && (
|
|
<React.Fragment>
|
|
{jobState.jobs
|
|
.filter((j) => !j.isPipeline)
|
|
.map((v, i) => (
|
|
<a
|
|
key={i}
|
|
href={`/qualiteer/jobs#job-${v.jobId}`}
|
|
style={{ textDecoration: "none" }}
|
|
>
|
|
<JobBox job={v} />
|
|
</a>
|
|
))}
|
|
{jobState.pipelines.map((p, i) => (
|
|
<a
|
|
key={i}
|
|
style={{ textDecoration: "none" }}
|
|
href={`/qualiteer/jobs#pipeline-${p.id}`}
|
|
>
|
|
<JobPipelineBox pipeline={p} />
|
|
</a>
|
|
))}
|
|
</React.Fragment>
|
|
)}
|
|
|
|
{jobHash.pipeline && <JobPipelineDisplay pipeline={jobHash.pipeline} />}
|
|
{jobHash.job && <JobView job={jobHash.job} />}
|
|
</div>
|
|
);
|
|
}
|