67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
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>
|
|
);
|
|
}
|