|
import React, { useRef, useEffect } from "react"; |
|
import { Box, Typography } from "@mui/material"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const LogDisplay = ({ logs = [], height = 300, containerStyle = {} }) => { |
|
const logsEndRef = useRef(null); |
|
|
|
|
|
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; |
|
|