Phase 5 Complete by Claude Code
This commit is contained in:
@@ -1 +1,272 @@
|
||||
// TODO: Live data, logs, charts
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import api from "../api/client";
|
||||
import useMqttWebSocket from "./useMqttWebSocket";
|
||||
|
||||
export default function MqttDashboard() {
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [brokerConnected, setBrokerConnected] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [hoveredRow, setHoveredRow] = useState(null);
|
||||
const [liveEvents, setLiveEvents] = useState([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const fetchStatus = async () => {
|
||||
try {
|
||||
const data = await api.get("/mqtt/status");
|
||||
setDevices(data.devices || []);
|
||||
setBrokerConnected(data.broker_connected);
|
||||
setError("");
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchStatus();
|
||||
const interval = setInterval(fetchStatus, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleWsMessage = useCallback((data) => {
|
||||
setLiveEvents((prev) => [data, ...prev].slice(0, 50));
|
||||
// Update device status on heartbeat
|
||||
if (data.type === "status/heartbeat") {
|
||||
setDevices((prev) => {
|
||||
const existing = prev.find((d) => d.device_serial === data.device_serial);
|
||||
if (existing) {
|
||||
return prev.map((d) =>
|
||||
d.device_serial === data.device_serial
|
||||
? { ...d, online: true, seconds_since_heartbeat: 0 }
|
||||
: d
|
||||
);
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const { connected: wsConnected } = useMqttWebSocket({
|
||||
enabled: true,
|
||||
onMessage: handleWsMessage,
|
||||
});
|
||||
|
||||
const sendPing = async (serial, e) => {
|
||||
e.stopPropagation();
|
||||
try {
|
||||
await api.post(`/mqtt/command/${serial}`, { cmd: "ping", contents: {} });
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (seconds) => {
|
||||
if (!seconds && seconds !== 0) return "Never";
|
||||
if (seconds < 60) return `${seconds}s ago`;
|
||||
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
|
||||
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
|
||||
return `${Math.floor(seconds / 86400)}d ago`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>
|
||||
MQTT Dashboard
|
||||
</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-2 text-sm" style={{ color: "var(--text-muted)" }}>
|
||||
<span
|
||||
className={`inline-block w-2.5 h-2.5 rounded-full ${brokerConnected ? "bg-green-500" : ""}`}
|
||||
style={!brokerConnected ? { backgroundColor: "var(--danger)" } : undefined}
|
||||
/>
|
||||
Broker {brokerConnected ? "Connected" : "Disconnected"}
|
||||
</span>
|
||||
<span className="flex items-center gap-2 text-sm" style={{ color: "var(--text-muted)" }}>
|
||||
<span
|
||||
className={`inline-block w-2.5 h-2.5 rounded-full ${wsConnected ? "bg-green-500" : ""}`}
|
||||
style={!wsConnected ? { backgroundColor: "var(--border-primary)" } : undefined}
|
||||
/>
|
||||
Live
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="text-sm rounded-md p-3 mb-4 border"
|
||||
style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>
|
||||
) : devices.length === 0 ? (
|
||||
<div
|
||||
className="rounded-lg p-8 text-center text-sm border"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)", color: "var(--text-muted)" }}
|
||||
>
|
||||
No devices have sent heartbeats yet. Devices will appear here once they connect to the MQTT broker.
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="rounded-lg overflow-hidden border mb-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
|
||||
<th className="px-4 py-3 text-left font-medium w-10" style={{ color: "var(--text-secondary)" }}>Status</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Serial</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Device ID</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Firmware</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>IP Address</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Uptime</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Last Seen</th>
|
||||
<th className="px-4 py-3 text-left font-medium w-32" style={{ color: "var(--text-secondary)" }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{devices.map((device, index) => (
|
||||
<tr
|
||||
key={device.device_serial}
|
||||
className="cursor-pointer"
|
||||
style={{
|
||||
borderBottom: index < devices.length - 1 ? "1px solid var(--border-primary)" : "none",
|
||||
backgroundColor: hoveredRow === device.device_serial ? "var(--bg-card-hover)" : "transparent",
|
||||
}}
|
||||
onMouseEnter={() => setHoveredRow(device.device_serial)}
|
||||
onMouseLeave={() => setHoveredRow(null)}
|
||||
onClick={() => navigate(`/mqtt/commands?device=${device.device_serial}`)}
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-block w-2.5 h-2.5 rounded-full ${device.online ? "bg-green-500" : ""}`}
|
||||
style={!device.online ? { backgroundColor: "var(--border-primary)" } : undefined}
|
||||
title={device.online ? "Online" : "Offline"}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs" style={{ color: "var(--text-heading)" }}>
|
||||
{device.device_serial}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
{device.last_heartbeat?.device_id || "-"}
|
||||
</td>
|
||||
<td className="px-4 py-3" style={{ color: "var(--text-primary)" }}>
|
||||
{device.last_heartbeat?.firmware_version ? `v${device.last_heartbeat.firmware_version}` : "-"}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs" style={{ color: "var(--text-primary)" }}>
|
||||
{device.last_heartbeat?.ip_address || "-"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
{device.last_heartbeat?.uptime_display || "-"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
{formatTime(device.seconds_since_heartbeat)}
|
||||
</td>
|
||||
<td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={(e) => sendPing(device.device_serial, e)}
|
||||
className="hover:opacity-80 text-xs cursor-pointer"
|
||||
style={{ color: "var(--text-link)" }}
|
||||
>
|
||||
Ping
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); navigate(`/mqtt/logs?device=${device.device_serial}`); }}
|
||||
className="hover:opacity-80 text-xs cursor-pointer"
|
||||
style={{ color: "var(--text-link)" }}
|
||||
>
|
||||
Logs
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Live Event Feed */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-3" style={{ color: "var(--text-heading)" }}>
|
||||
Live Feed
|
||||
{wsConnected && (
|
||||
<span className="ml-2 text-xs font-normal" style={{ color: "var(--text-muted)" }}>
|
||||
(streaming)
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
<div
|
||||
className="rounded-lg border overflow-hidden"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
{liveEvents.length === 0 ? (
|
||||
<div className="p-6 text-center text-sm" style={{ color: "var(--text-muted)" }}>
|
||||
{wsConnected ? "Waiting for MQTT messages..." : "WebSocket not connected — live events will appear once connected."}
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
|
||||
<th className="px-3 py-2 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Type</th>
|
||||
<th className="px-3 py-2 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Device</th>
|
||||
<th className="px-3 py-2 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Data</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{liveEvents.map((event, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
style={{ borderBottom: "1px solid var(--border-primary)" }}
|
||||
>
|
||||
<td className="px-3 py-2">
|
||||
<span
|
||||
className="px-1.5 py-0.5 rounded text-xs"
|
||||
style={{
|
||||
backgroundColor: event.type === "logs"
|
||||
? "var(--badge-blue-bg)"
|
||||
: event.type === "status/heartbeat"
|
||||
? "var(--success-bg)"
|
||||
: "var(--bg-primary)",
|
||||
color: event.type === "logs"
|
||||
? "var(--badge-blue-text)"
|
||||
: event.type === "status/heartbeat"
|
||||
? "var(--success-text)"
|
||||
: "var(--text-secondary)",
|
||||
}}
|
||||
>
|
||||
{event.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono" style={{ color: "var(--text-muted)" }}>
|
||||
{event.device_serial}
|
||||
</td>
|
||||
<td className="px-3 py-2" style={{ color: "var(--text-primary)" }}>
|
||||
{event.type === "logs"
|
||||
? event.payload?.message || JSON.stringify(event.payload)
|
||||
: event.type === "status/heartbeat"
|
||||
? `Uptime: ${event.payload?.payload?.timestamp || "?"} | IP: ${event.payload?.payload?.ip_address || "?"}`
|
||||
: JSON.stringify(event.payload).substring(0, 120)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user