61 lines
1.6 KiB
React
61 lines
1.6 KiB
React
|
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>
|
||
|
|
);
|
||
|
|
}
|