demo / frontend /src /components /LogDisplay.jsx
tfrere's picture
first commit
970eef1
raw
history blame
2.06 kB
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;