Job navigation and PipelineTracks

This commit is contained in:
Dunemask 2022-08-06 12:25:56 +00:00
parent 8ad5b7876c
commit 59fe1eda7f
14 changed files with 270 additions and 126 deletions

View file

@ -8,13 +8,12 @@ import Views from "./views/Views.jsx";
export default function Dashboard() {
return (
<div className="qualiteer">
<StoreProvider>
<JobProvider>
<BrowserRouter>
<JobProvider>
<BrowserRouter>
<Views />
</BrowserRouter>
</JobProvider>
</BrowserRouter>
</JobProvider>
</StoreProvider>
</div>
);

View file

@ -69,6 +69,7 @@ export const JobProvider = ({ children }) => {
function retryAll(failing) {
// Query Full Locator
console.log("Would retry all failing tests!");
return jobFactory({ testNames: ["single"] });
}
function jobBuilder(tests) {
@ -77,9 +78,7 @@ export const JobProvider = ({ children }) => {
return jobFactory({ testNames: ["single"] });
}
function pipelineFactory(builderCache) {
}
function pipelineFactory(builderCache) {}
function jobFactory(builderCache) {
// Find test
@ -132,7 +131,6 @@ export const JobProvider = ({ children }) => {
function retrySingle(test) {
console.log("Would retry test", test);
return jobFactory({ testNames: ["single"] });
}
const context = {

View file

@ -6,10 +6,11 @@ const ACTIONS = {
UPDATE: "u",
};
const pipelineMappingsMock = [["primary", "secondary1","tertiary1"],
["primary", "secondary1", "tertiary2"],
["primary", "secondary2", "tertiary3"]];
const pipelineMappingsMock = [
["primary", "secondary1", "tertiary1"],
["primary", "secondary1", "tertiary2"],
["primary", "secondary2", "tertiary3"],
];
const silencedMock = new Array(10).fill(0).map((v, i) => ({
name: `Test${i + 1}`,
@ -60,12 +61,12 @@ const failingMock = new Array(12).fill(0).map((v, i) => ({
})(),
}));
const localStorage = {setItem: ()=>{}, getItem: ()=>{}};
const localStorage = { setItem: () => {}, getItem: () => {} };
const localSettings = localStorage.getItem("settings");
const defaultSettings = {
focusJob: true,
simplifiedControls: true,
simplifiedControls: false,
logAppDetails: true,
defaultRegion: "us",
defaultPage: "failing",

View file

@ -1,5 +1,5 @@
import React, { useState, useContext } from "react";
import {useNavigate} from "react-router-dom";
import { useNavigate } from "react-router-dom";
import StoreContext from "../../ctx/StoreContext.jsx";
import JobContext from "../../ctx/JobContext.jsx";
@ -16,7 +16,7 @@ import Stack from "@mui/material/Stack";
export default function CatalogBox(props) {
const { catalogTest } = props;
const {
name: testName,
class: testClass,
@ -26,7 +26,7 @@ export default function CatalogBox(props) {
} = catalogTest;
const navigate = useNavigate();
const { state: store, updateStore } = useContext(StoreContext);
const { state: jobState, jobBuilder } = useContext(JobContext);
@ -39,7 +39,7 @@ export default function CatalogBox(props) {
e.preventDefault();
e.stopPropagation();
const jobId = jobBuilder([catalogTest]);
if(store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
};
function Actions() {

View file

@ -1,4 +1,5 @@
import { useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import StoreContext from "../../ctx/StoreContext.jsx";
import JobContext from "../../ctx/JobContext.jsx";
import SilenceDialog from "../alerting/SilenceDialog.jsx";
@ -19,7 +20,7 @@ import ReplayIcon from "@mui/icons-material/Replay";
export default function Failing() {
const { state: jobState, retryAll } = useContext(JobContext);
const navigate = useNavigate();
const {
state: store,
updateStore,
@ -47,7 +48,10 @@ export default function Failing() {
const handleClose = (confirmed) => () => {
retryAllClick();
if (!confirmed) return;
retryAll(store.failing);
const jobId = retryAll(store.failing);
if (!store.focusJob) return;
navigate(`/qualiteer/jobs#${jobId}`);
};
return (

View file

@ -1,5 +1,5 @@
import React, { useState, useContext } from "react";
import {useNavigate} from "react-router-dom";
import { useNavigate } from "react-router-dom";
import StoreContext from "../../ctx/StoreContext.jsx";
import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
@ -76,10 +76,10 @@ export default function FailingBox(props) {
return "error";
}
const retryTest = () => {
const retryTest = () => {
const jobId = retrySingle(failingTest);
if(store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
}
if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
};
const jobOnClick = () => {
switch (testJobStatus) {

View file

@ -9,16 +9,16 @@ function GroupConfirm(props) {
return (
<React.Fragment>
<DialogContent>
<h3>Confirm group?</h3>
{JSON.stringify(cache)}
</DialogContent>
<h3>Confirm group?</h3>
{JSON.stringify(cache)}
</DialogContent>
<DialogActions>
<Button onClick={back}>Back</Button>
<Button onClick={start} autoFocus>
Start
</Button>
<Button onClick={back}>Back</Button>
<Button onClick={start} autoFocus>
Start
</Button>
</DialogActions>
</React.Fragment>
</React.Fragment>
);
}

View file

@ -14,16 +14,16 @@ function GroupSelector(props) {
return (
<React.Fragment>
<DialogContent>
{JSON.stringify(cache)}
<button onClick={makeReq}>Clickme</button>
</DialogContent>
{JSON.stringify(cache)}
<button onClick={makeReq}>Clickme</button>
</DialogContent>
<DialogActions>
<Button onClick={cancel}>Cancel</Button>
<Button onClick={next} autoFocus>
Next
</Button>
<Button onClick={cancel}>Cancel</Button>
<Button onClick={next} autoFocus>
Next
</Button>
</DialogActions>
</React.Fragment>
</React.Fragment>
);
}

View file

@ -10,15 +10,15 @@ function IndividualConfirm(props) {
<React.Fragment>
<DialogContent>
<h3>Individual Confirm?</h3>
{JSON.stringify(cache)}
</DialogContent>
{JSON.stringify(cache)}
</DialogContent>
<DialogActions>
<Button onClick={back}>Back</Button>
<Button onClick={start} autoFocus>
Start
</Button>
<Button onClick={back}>Back</Button>
<Button onClick={start} autoFocus>
Start
</Button>
</DialogActions>
</React.Fragment>
</React.Fragment>
);
}

View file

@ -9,22 +9,21 @@ function IndividualSelector(props) {
setCache({
testNames: ["failing"],
});
}
return (
<React.Fragment>
<DialogContent>
{JSON.stringify(cache)}
<button onClick={makeReq}>Clickme</button>
</DialogContent>
{JSON.stringify(cache)}
<button onClick={makeReq}>Clickme</button>
</DialogContent>
<DialogActions>
<Button onClick={cancel}>Cancel</Button>
<Button onClick={next} autoFocus>
Next
</Button>
<Button onClick={cancel}>Cancel</Button>
<Button onClick={next} autoFocus>
Next
</Button>
</DialogActions>
</React.Fragment>
</React.Fragment>
);
}

View file

@ -1,5 +1,5 @@
import React, { useContext, useState, useEffect } from "react";
import {useNavigate} from "react-router-dom";
import { useNavigate } from "react-router-dom";
import StoreContext from "../../../ctx/StoreContext.jsx";
import JobContext from "../../../ctx/JobContext.jsx";
@ -26,8 +26,6 @@ import PipelineSelector from "./PipelineSelector.jsx";
import PipelineTrackSelector from "./PipelineTrackSelector.jsx";
import PipelineConfirm from "./PipelineConfirm.jsx";
export default function JobBuilder() {
const navigate = useNavigate();
const { state: store } = useContext(StoreContext);
@ -44,10 +42,10 @@ export default function JobBuilder() {
};
const quickOpenClose = () => setQuickOpen(false);
const handleClickOpen = (page)=> () =>{
const handleClickOpen = (page) => () => {
setBuilderPage(page);
setJobDialogOpen(true);
}
};
const [builderPage, setBuilderPage] = useState();
const [cache, setCache] = useState({});
@ -55,8 +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) navigate(`/qualiteer/jobs#${jobId}`);
};
// Pull info from url if possible?
@ -69,14 +66,62 @@ export default function JobBuilder() {
const changePage = (page) => () => setBuilderPage(page);
const pages = {
individualSelect: <IndividualSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("individualConfirm")}/>,
individualConfirm: <IndividualConfirm cache={cache} setCache={setCache} back={changePage("individualSelect")} start={handleClose(true)}/>,
groupSelect: <GroupSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("groupConfirm")}/>,
groupConfirm: <GroupConfirm cache={cache} setCache={setCache} back={changePage("groupSelect")} start={handleClose(true)}/>,
pipelineSelect: <PipelineSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("pipelineTrackSelect")}/>,
pipelineTrackSelect: <PipelineTrackSelector cache={cache} setCache={setCache} back={changePage("pipelineSelect")} next={changePage("pipelineConfirm")}/>,
pipelineConfirm: <PipelineConfirm cache={cache} back={changePage("pipelineTrackSelect")} next={handleClose(true)}/>
}
individualSelect: (
<IndividualSelector
cache={cache}
setCache={setCache}
cancel={handleClose()}
next={changePage("individualConfirm")}
/>
),
individualConfirm: (
<IndividualConfirm
cache={cache}
setCache={setCache}
back={changePage("individualSelect")}
start={handleClose(true)}
/>
),
groupSelect: (
<GroupSelector
cache={cache}
setCache={setCache}
cancel={handleClose()}
next={changePage("groupConfirm")}
/>
),
groupConfirm: (
<GroupConfirm
cache={cache}
setCache={setCache}
back={changePage("groupSelect")}
start={handleClose(true)}
/>
),
pipelineSelect: (
<PipelineSelector
cache={cache}
setCache={setCache}
cancel={handleClose()}
next={changePage("pipelineTrackSelect")}
/>
),
pipelineTrackSelect: (
<PipelineTrackSelector
cache={cache}
setCache={setCache}
back={changePage("pipelineSelect")}
next={changePage("pipelineConfirm")}
/>
),
pipelineConfirm: (
<PipelineConfirm
cache={cache}
back={changePage("pipelineTrackSelect")}
start={handleClose(true)}
/>
),
};
return (
<React.Fragment>

View file

@ -10,16 +10,15 @@ function PipelineConfirm(props) {
<React.Fragment>
<DialogContent>
<h3>Pipeline Confirm</h3>
{JSON.stringify(cache)}
</DialogContent>
{JSON.stringify(cache)}
</DialogContent>
<DialogActions>
<Button onClick={back}>Back</Button>
<Button onClick={start} autoFocus>
Start
</Button>
<Button onClick={back}>Back</Button>
<Button onClick={start} autoFocus>
Start
</Button>
</DialogActions>
</React.Fragment>
</React.Fragment>
);
}

View file

@ -1,4 +1,4 @@
import React, {useContext} from "react";
import React, { useContext } from "react";
import StoreContext from "../../../ctx/StoreContext.jsx";
import Button from "@mui/material/Button";
@ -6,55 +6,60 @@ import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
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 Stack from "@mui/material/Stack";
function PipelineSelector(props){
const {cache, setCache, cancel, next} = props;
const {state: store} = useContext(StoreContext);
function PipelineSelector(props) {
const { cache, setCache, cancel, next } = props;
const { state: store } = useContext(StoreContext);
const { pipelineMappings } = store;
const primaryMappings = {};
for(var pm of pipelineMappings){
if(!(pm[0] in primaryMappings)) primaryMappings[pm[0]] = [];
for (var pm of pipelineMappings) {
if (!(pm[0] in primaryMappings)) primaryMappings[pm[0]] = [];
primaryMappings[pm[0]].push(pm);
}
const selectPrimary = (primarySelectedMappings) => ()=>{
setCache({primarySelectedMappings});
const selectPrimary = (primarySelectedMappings) => () => {
setCache({ primarySelectedMappings });
};
return( <React.Fragment>
return (
<React.Fragment>
<DialogContent>
{Object.keys(primaryMappings).map((k, i)=>( <Accordion expanded={false} disableGutters={true} square key={i} onClick={selectPrimary(primaryMappings[k])}>
<AccordionSummary
style={{
backgroundColor: "rgba(0, 0, 0, .03)",
flexWrap: "wrap",
}}
>
<Typography
component={"span"}
style={{ wordBreak: "break-word", margin: "auto 0" }}
>
{k}
</Typography>
<Stack sx={{ ml: "auto" }}>
{primaryMappings[k].length}
</Stack>
</AccordionSummary>
</Accordion>))}
{Object.keys(primaryMappings).map((k, i) => (
<Accordion
expanded={false}
disableGutters={true}
square
key={i}
onClick={selectPrimary(primaryMappings[k])}
>
<AccordionSummary
style={{
backgroundColor: "rgba(0, 0, 0, .03)",
flexWrap: "wrap",
}}
>
<Typography
component={"span"}
style={{ wordBreak: "break-word", margin: "auto 0" }}
>
{k}
</Typography>
<Stack sx={{ ml: "auto" }}>{primaryMappings[k].length}</Stack>
</AccordionSummary>
</Accordion>
))}
</DialogContent>
<DialogActions>
<Button onClick={cancel}>Cancel</Button>
<Button onClick={next} autoFocus>
Next
</Button>
<Button onClick={cancel}>Cancel</Button>
<Button onClick={next} autoFocus>
Next
</Button>
</DialogActions>
</React.Fragment>)
</React.Fragment>
);
}
export default PipelineSelector;
@ -62,7 +67,7 @@ export default PipelineSelector;
Server -> pipeMappings
[["primary", "secondary1", "tertiary1"], ["primary", "secondary2", "tertiary3"]]
*/
/*
/*
const primaryMappings = pipeMappings.filter((m)=>m[0] === "primary"); // Select Page
const displayTracks = [];
@ -80,12 +85,12 @@ export default PipelineSelector;
})
*/
/* Cache:
/* Cache:
{
testTree: [["primary"],["secondary1", "secondary2"], ["tertiary1", "tertiary3"]]
}
*/
/*
/*
tracks: [["primary", "secondary1", "tertiary1"], ["primary", "secondary2", "tertiary3"]]
*/
/**/
/**/

View file

@ -3,22 +3,116 @@ import Button from "@mui/material/Button";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
function PipelineTrackSelector(props) {
const { cache, setCache, back, next } = props;
const pipelineTracks = [];
for (var track of cache.primarySelectedMappings) {
for (var i in track) {
if (!pipelineTracks[i]) pipelineTracks[i] = [];
if (pipelineTracks[i].includes(track[i])) continue;
pipelineTracks[i].push(track[i]);
}
}
const addTrack = (test) => {
const pipelineMasterTrack = cache.pipelineMasterTrack ?? [];
for (var track of cache.primarySelectedMappings) {
const trackIndex = track.indexOf(test);
if (trackIndex === -1) continue;
const trackSlice = track.slice(0, trackIndex + 1);
trackSlice.forEach((t, i) => {
if (!pipelineMasterTrack[i]) pipelineMasterTrack[i] = [];
if (!pipelineMasterTrack[i].includes(t)) pipelineMasterTrack[i].push(t);
});
break;
}
console.log(pipelineMasterTrack);
setCache({ ...cache, pipelineMasterTrack });
};
const removeTrack = (test) => {
const pipelineMasterTrack = cache.pipelineMasterTrack ?? [];
const toRemove = [];
for (var mapping of cache.primarySelectedMappings) {
const testIndex = mapping.indexOf(test);
if (testIndex === -1) continue;
const removeSlice = mapping.slice(testIndex, mapping.length);
toRemove.push(...removeSlice);
}
for (var i in pipelineMasterTrack) {
pipelineMasterTrack[i] = pipelineMasterTrack[i].filter(
(t) => !toRemove.includes(t)
);
}
setCache({ ...cache, pipelineMasterTrack });
};
const selectTrack = (test) => () => {
const pipelineMasterTrack = cache.pipelineMasterTrack ?? [];
if (![].concat.apply([], pipelineMasterTrack).includes(test))
return addTrack(test);
removeTrack(test);
};
const getColor = (test) => {
return [].concat.apply([], cache.pipelineMasterTrack).includes(test)
? "primary"
: null;
};
return (
<React.Fragment>
<DialogContent>
<h3>Select Track</h3>
{JSON.stringify(cache)}
</DialogContent>
{pipelineTracks.map((track, i) => (
<React.Fragment key={i}>
<Typography variant="h6">{i + 1}</Typography>
<Box>
{track.map((test, j) => (
<Accordion
expanded={false}
disableGutters={true}
square
key={j}
onClick={selectTrack(test)}
>
<AccordionSummary
style={{
backgroundColor: "rgba(0, 0, 0, .03)",
flexWrap: "wrap",
}}
>
<Typography
component={"span"}
style={{ wordBreak: "break-word", margin: "auto 0" }}
color={getColor(test)}
>
{test}
</Typography>
<Stack sx={{ ml: "auto" }}>I</Stack>
</AccordionSummary>
</Accordion>
))}
</Box>
</React.Fragment>
))}
</DialogContent>
<DialogActions>
<Button onClick={back}>Back</Button>
<Button onClick={next} autoFocus>
Next
</Button>
<Button onClick={back}>Back</Button>
<Button onClick={next} autoFocus>
Next
</Button>
</DialogActions>
</React.Fragment>
</React.Fragment>
);
}