Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,055 Bytes
970eef1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
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;
|