Job View

src/Views.jsx

@@ -6,14 +6,8 @@ import Navbar from "./Navbar.jsx";
 import {
   Routes,
   Route,
-  Link,
-  BrowserRouter,
   Navigate,
-  useLocation,
 } from "react-router-dom";
-import AppBar from "@mui/material/AppBar";
-import Badge from "@mui/material/Badge";
-import { styled } from "@mui/material/styles";
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";

src/views/Jobs.jsx

@@ -1,8 +1,11 @@
 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";
@@ -26,7 +29,7 @@ export default function Jobs() {
     dispatch: jobDispatch,
     jobBuilder,
   } = useContext(JobContext);
-
+  const location = useLocation();
   const { state: store, updateStore } = useContext(StoreContext);
   const [quickOpen, setQuickOpen] = useState(false);
   const [jobDialogOpen, setJobDialogOpen] = useState(false);
@@ -48,7 +51,7 @@ export default function Jobs() {
   const handleClickOpen = () => setJobDialogOpen(true);
 
   const [queued, setQueued] = useState([]);
-  useEffect(() => {}, [jobState.jobs]);
+  useEffect(() => { }, [jobState.jobs, location]);
 
   const handleClose = (confirmed) => () => {
     setJobDialogOpen(false);
@@ -58,9 +61,12 @@ export default function Jobs() {
 
   return (
     <div className="jobs">
-      {jobState.jobs.map((v, i) => (
+      {location.hash === "" && jobState.jobs.map((v, i) => (
-        <JobBox key={i} job={v} />
+        <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 />

src/views/components/JobLogView.jsx

@@ -0,0 +1,60 @@
+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>
+  );
+}

src/views/components/JobView.jsx

@@ -0,0 +1,66 @@
+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: "rgba(0,0,0,0)", 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>
+  );
+}