)
}
return null
}
export function DiskTemperatureCard({
diskName,
liveTemperature,
diskType,
onOpenDetail,
}: DiskTemperatureCardProps) {
const [data, setData] = useState([])
const [loading, setLoading] = useState(true)
const cancelled = useRef(false)
useEffect(() => {
cancelled.current = false
const fetchHistory = async () => {
setLoading(true)
try {
// 24-h timeframe gives a more useful "is this drive trending
// up over a day" view; the 1-h window was too short to spot
// anything that mattered.
const result = await fetchApi<{ data: TempPoint[] }>(
`/api/disk/${encodeURIComponent(diskName)}/temperature/history?timeframe=day`,
)
if (cancelled.current) return
setData(result?.data || [])
} catch {
if (!cancelled.current) setData([])
} finally {
if (!cancelled.current) setLoading(false)
}
}
fetchHistory()
// Refresh once a minute so the inline chart tracks the collector
// without needing the user to reopen the modal.
const id = setInterval(fetchHistory, 60_000)
return () => {
cancelled.current = true
clearInterval(id)
}
}, [diskName])
const allThresholds = useDiskTempThresholds()
const dt = (() => {
const t = (diskType || "").toUpperCase()
if (t === "HDD") return allThresholds.HDD
if (t === "NVME") return allThresholds.NVMe
if (t === "SAS") return allThresholds.SAS
return allThresholds.SSD
})()
const status = statusFor(liveTemperature, dt)
const lineColor = status.color
const tempDisplay = liveTemperature > 0 ? `${liveTemperature}°C` : "N/A"
const samples = data.length
const interactive = !!onOpenDetail
const Wrapper: any = interactive ? "button" : "div"
return (
Temperature
{tempDisplay}
{status.label}
{loading ? (
) : samples < 2 ? (
Collecting samples — chart populates after ~2 minutes
) : (
{/* Y domain is computed the same way the detail modal
does — floor(min−3) / ceil(max+3), floor at 0 — so
the line shape here matches the bigger chart instead
of recharts' auto-domain collapsing 24 → 29 °C into
a near-flat line that doesn't look like the modal. */}
Math.max(0, Math.floor(dataMin - 3)),
(dataMax: number) => Math.ceil(dataMax + 3),
]}
/>
} cursor={{ stroke: lineColor, strokeOpacity: 0.3, strokeWidth: 1 }} />
)}