86 lines
2.9 KiB
JavaScript
86 lines
2.9 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { getAlertEvents } from "../api/alertEvents";
|
|
|
|
export default function AlertHistory() {
|
|
const [alertEvents, setAlertEvents] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
// Fetch alert events on mount
|
|
useEffect(() => {
|
|
async function fetchAlertEvents() {
|
|
try {
|
|
setLoading(true);
|
|
const data = await getAlertEvents();
|
|
setAlertEvents(data);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
console.error("Failed to fetch alert events:", err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchAlertEvents();
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return <div style={{ padding: "2rem" }}>Loading...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div style={{ padding: "2rem", color: "red" }}>Error: {error}</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
|
|
<h1>Recent Alert Events</h1>
|
|
|
|
{alertEvents.length === 0 ? (
|
|
<p style={{ color: "#808080" }}>No alerts yet</p>
|
|
) : (
|
|
<ul style={{ listStyle: "none", padding: 0 }}>
|
|
{alertEvents.map((event) => (
|
|
<li
|
|
key={event.id}
|
|
style={{
|
|
padding: "1rem",
|
|
marginBottom: "0.75rem",
|
|
border: "1px solid #444",
|
|
borderRadius: "4px",
|
|
backgroundColor: "#333",
|
|
}}
|
|
>
|
|
<div style={{ marginBottom: "0.5rem" }}>
|
|
{event.message}
|
|
</div>
|
|
{event.address_label && (
|
|
<div
|
|
style={{
|
|
fontSize: "1.035rem",
|
|
color: "#808080",
|
|
marginBottom: "0.25rem",
|
|
}}
|
|
>
|
|
Address: {event.address_label}
|
|
</div>
|
|
)}
|
|
<small style={{ color: "#b3b3b3" }}>
|
|
{formatTimestamp(event.timestamp)}
|
|
</small>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Helper to format timestamp for display
|
|
function formatTimestamp(timestamp) {
|
|
const date = new Date(timestamp);
|
|
return date.toLocaleString();
|
|
}
|