39 lines
1.8 KiB
JavaScript
39 lines
1.8 KiB
JavaScript
import Table from 'react-bootstrap/Table';
|
|
|
|
const MetricsTable = ({ metrics = [] }) => {
|
|
return (
|
|
<div style={{ overflowX: "auto", maxHeight: "450px", overflowY: "auto", position: "relative", borderTop: "1px solid #444", backgroundColor: "#1e1e1e" }}>
|
|
<Table striped bordered hover responsive variant='dark' style={{ fontFamily: 'Poppins, sans-serif', minWidth: "900px", backgroundColor: "#1e1e1e", color: "#ffffff" }}>
|
|
<thead>
|
|
<tr style={{ backgroundColor: "#333333", color: "#ffffff" }}>
|
|
<th className="py-3 text-center align-middle">Monitor Name</th>
|
|
<th className="py-3 text-center align-middle">URL</th>
|
|
<th className="py-3 text-center align-middle">Response Time (ms)</th>
|
|
<th className="py-3 text-center align-middle">Status</th>
|
|
<th className="py-3 text-center align-middle">Certificate Valid</th>
|
|
<th className="py-3 text-center align-middle">Cert Days Remaining</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{metrics.map((item, index) => (
|
|
<tr key={index} style={{ backgroundColor: "#222222", color: "#ffffff" }}>
|
|
<td>{item.monitor_name}</td>
|
|
<td><a href={item.monitor_url} target="_blank" rel="noopener noreferrer" style={{ color: "#4CAF50" }}>{item.monitor_url}</a></td>
|
|
<td>{item.response_time} ms</td>
|
|
<td>
|
|
{item.status === 1 ? 'UP' :
|
|
item.status === 0 ? 'DOWN' :
|
|
item.status === 2 ? 'PENDING' : 'MAINTENANCE'}
|
|
</td>
|
|
<td>{item.cert_valid === 1 ? 'Yes' : 'No'}</td>
|
|
<td>{item.cert_days_remaining}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MetricsTable;
|