Add host temperature telemetry and history

2026-10-13 23:39:04 -04:00
parent 09396ab584
commit 171f657876
28 changed files with 1466 additions and 32 deletions
@@ -0,0 +1,79 @@
+<script lang="ts">
+    import type { Host } from '$lib/hosts.js';
+    import { cpuTemperature, formatTemperature, temperatureLabel } from '$lib/host-temperatures.js';
+    import { hostReadingsStale } from '$ui/host-overview.js';
+    import { onMount } from 'svelte';
+    let { host }: { host: Host } = $props();
+    let now = $state(Date.now());
+    const stale = $derived(hostReadingsStale(host, now));
+    const sensors = $derived(host.inventory.temperatures ?? []);
+    const cpu = $derived(cpuTemperature(sensors));
+    onMount(() => {
+        const clock = setInterval(() => (now = Date.now()), 15_000);
+        return () => clearInterval(clock);
+    });
+</script>
+
+<div class:stale>
+    {formatTemperature(cpu?.celsius)}{#if stale && cpu}
+        (last reported){/if}
+    {#if cpu}<span class="source">{temperatureLabel(cpu)}</span>{/if}
+    {#if sensors.length}
+        <details>
+            <summary>Temperature sensors</summary>
+            <ul>
+                {#each sensors as sensor (sensor.id)}
+                    <li>
+                        <span
+                            >{temperatureLabel(sensor)}<small
+                                >{sensor.device} · {sensor.label} · {sensor.id.slice(-6)}</small
+                            ></span
+                        ><span>{formatTemperature(sensor.celsius)}</span>
+                    </li>
+                {/each}
+            </ul>
+            {#if stale}<p>Last reported readings; waiting for a fresh host heartbeat.</p>{/if}
+        </details>
+    {:else}<span class="source">No supported temperature sensors reported.</span>{/if}
+</div>
+
+<style>
+    .source,
+    small {
+        display: block;
+        color: var(--text-secondary);
+        font-size: var(--text-xs);
+        margin-top: var(--space-1);
+    }
+    .stale {
+        color: var(--text-secondary);
+    }
+    details {
+        margin-top: var(--space-2);
+    }
+    summary {
+        cursor: pointer;
+        font-size: var(--text-sm);
+    }
+    summary:focus-visible {
+        outline: 2px solid var(--accent-primary);
+        outline-offset: 3px;
+    }
+    ul {
+        padding: 0;
+        list-style: none;
+        margin: var(--space-3) 0;
+        display: grid;
+        gap: var(--space-3);
+    }
+    li {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: var(--space-2);
+        font-variant-numeric: tabular-nums;
+    }
+    p {
+        font-size: var(--text-xs);
+    }
+</style>