Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
import React, { useRef, useEffect } from "react"; | |
import { Box, Typography } from "@mui/material"; | |
/** | |
* A reusable component for displaying logs with auto-scrolling and styling | |
* | |
* @param {Object} props - Component props | |
* @param {Array<string>} props.logs - Array of log messages to display | |
* @param {number} props.height - Height of the log container in pixels (default: 300) | |
* @param {Object} props.containerStyle - Additional styles for the container | |
* @returns {JSX.Element} Log display component | |
*/ | |
const LogDisplay = ({ logs = [], height = 300, containerStyle = {} }) => { | |
const logsEndRef = useRef(null); | |
// Auto-scroll logs to bottom when new logs are added | |
useEffect(() => { | |
if (logsEndRef.current) { | |
logsEndRef.current.scrollIntoView({ behavior: "smooth" }); | |
} | |
}, [logs]); | |
return ( | |
<Box | |
sx={{ | |
mt: 3, | |
width: "100%", | |
height: `${height}px`, | |
overflowY: "auto", | |
backgroundColor: "#f9f9f9", | |
p: 2, | |
borderRadius: 1, | |
fontFamily: "monospace", | |
fontSize: "0.85rem", | |
border: "1px solid #e0e0e0", | |
...containerStyle, | |
}} | |
> | |
{logs.length === 0 ? ( | |
<Typography color="text.secondary" variant="body2"> | |
Waiting for logs... | |
</Typography> | |
) : ( | |
logs.map((log, index) => { | |
// Style logs based on content | |
let style = { opacity: 0.7 }; | |
if (log.includes("[ERROR]")) { | |
style = { ...style, color: "#d32f2f" }; // Red for errors | |
} else if (log.includes("[WARN]")) { | |
style = { ...style, color: "#ed6c02" }; // Orange for warnings | |
} else if (log.includes("[SUCCESS]")) { | |
style = { ...style, color: "#2e7d32", opacity: 0.8 }; // Green for success | |
} | |
return ( | |
<div key={index} style={{ ...style, marginBottom: "4px" }}> | |
{log} | |
</div> | |
); | |
}) | |
)} | |
<div ref={logsEndRef} /> | |
</Box> | |
); | |
}; | |
export default LogDisplay; | |