forked from wrenn/wrenn
Add per-capsule stats detail page with live CPU/RAM charts
- New detail page at /dashboard/capsules/[id] with Stats and Files tabs - Stats tab shows capsule info card (status, template, CPU, memory, disk, started, idle timeout) and two stacked Chart.js charts with live values - Metrics API client with 10s polling and moving-average smoothing - Capsule ID in list table is now a clickable link to the detail page - Layout breadcrumb header (Capsules > sb-xxx) with back navigation - Fix metrics sampler: use v.PID() directly as Firecracker PID since unshare -m execs (not forks) through the bash/ip-netns-exec/firecracker chain, so all share the same PID. Removes unused findChildPID. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@ -20,6 +20,10 @@ export async function listCapsules(): Promise<ApiResult<Capsule[]>> {
|
||||
return apiFetch('GET', '/api/v1/sandboxes');
|
||||
}
|
||||
|
||||
export async function getCapsule(id: string): Promise<ApiResult<Capsule>> {
|
||||
return apiFetch('GET', `/api/v1/sandboxes/${id}`);
|
||||
}
|
||||
|
||||
export type CreateCapsuleParams = {
|
||||
template?: string;
|
||||
vcpus?: number;
|
||||
|
||||
25
frontend/src/lib/api/metrics.ts
Normal file
25
frontend/src/lib/api/metrics.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { apiFetch, type ApiResult } from '$lib/api/client';
|
||||
|
||||
export type MetricRange = '5m' | '10m' | '1h' | '6h' | '24h';
|
||||
|
||||
export type MetricPoint = {
|
||||
timestamp_unix: number;
|
||||
cpu_pct: number;
|
||||
mem_bytes: number;
|
||||
disk_bytes: number;
|
||||
};
|
||||
|
||||
export type MetricsResponse = {
|
||||
sandbox_id: string;
|
||||
range: MetricRange;
|
||||
points: MetricPoint[];
|
||||
};
|
||||
|
||||
export async function fetchSandboxMetrics(id: string, range: MetricRange): Promise<ApiResult<MetricsResponse>> {
|
||||
return apiFetch('GET', `/api/v1/sandboxes/${id}/metrics?range=${range}`);
|
||||
}
|
||||
|
||||
export const METRIC_RANGES: MetricRange[] = ['5m', '10m', '1h', '6h', '24h'];
|
||||
|
||||
// All ranges poll every 10 seconds.
|
||||
export const METRIC_POLL_INTERVAL = 10_000;
|
||||
@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import Sidebar from '$lib/components/Sidebar.svelte';
|
||||
import { capsuleRunningCount } from '$lib/capsule-store.svelte';
|
||||
|
||||
@ -19,35 +20,54 @@
|
||||
<Sidebar bind:collapsed />
|
||||
|
||||
<div class="flex flex-1 flex-col overflow-hidden">
|
||||
<main class="flex-1 overflow-y-auto bg-[var(--color-bg-0)]">
|
||||
<main class="flex flex-1 flex-col overflow-y-auto bg-[var(--color-bg-0)]">
|
||||
<!-- Header area -->
|
||||
<div class="px-7 pt-8 pb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]">
|
||||
Capsules
|
||||
</h1>
|
||||
<p class="mt-2 text-ui text-[var(--color-text-secondary)]">
|
||||
Isolated VMs. Start cold in under a second — pause, snapshot, or destroy at will.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex items-center gap-2.5 rounded-[var(--radius-card)] border border-[var(--color-accent)]/20 bg-[var(--color-bg-2)] px-3.5 py-2"
|
||||
{#if $page.params.id}
|
||||
<!-- Breadcrumb header for capsule detail (no border-b — tabs provide it) -->
|
||||
<div class="px-7 pt-8">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<a
|
||||
href="/dashboard/capsules"
|
||||
class="font-serif text-page leading-none tracking-[-0.02em] text-[var(--color-text-secondary)] transition-colors duration-150 hover:text-[var(--color-text-bright)]"
|
||||
>
|
||||
<span class="relative flex h-[8px] w-[8px]">
|
||||
<span
|
||||
class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"
|
||||
></span>
|
||||
<span class="relative inline-flex h-[8px] w-[8px] rounded-full bg-[var(--color-accent)]"></span>
|
||||
</span>
|
||||
<span class="font-mono text-body font-semibold text-[var(--color-accent-bright)]">{capsuleRunningCount.value}</span>
|
||||
<span class="text-ui text-[var(--color-text-secondary)]">running now</span>
|
||||
Capsules
|
||||
</a>
|
||||
<span class="text-[var(--color-text-muted)] select-none" style="font-size: 1.1rem">›</span>
|
||||
<span class="font-mono text-[1.1rem] leading-none text-[var(--color-text-bright)]">
|
||||
{$page.params.id}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Default list header -->
|
||||
<div class="px-7 pt-8 pb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]">
|
||||
Capsules
|
||||
</h1>
|
||||
<p class="mt-2 text-ui text-[var(--color-text-secondary)]">
|
||||
Isolated VMs. Start cold in under a second — pause, snapshot, or destroy at will.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex items-center gap-2.5 rounded-[var(--radius-card)] border border-[var(--color-accent)]/20 bg-[var(--color-bg-2)] px-3.5 py-2"
|
||||
>
|
||||
<span class="relative flex h-[8px] w-[8px]">
|
||||
<span
|
||||
class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"
|
||||
></span>
|
||||
<span class="relative inline-flex h-[8px] w-[8px] rounded-full bg-[var(--color-accent)]"></span>
|
||||
</span>
|
||||
<span class="font-mono text-body font-semibold text-[var(--color-accent-bright)]">{capsuleRunningCount.value}</span>
|
||||
<span class="text-ui text-[var(--color-text-secondary)]">running now</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{@render children()}
|
||||
</main>
|
||||
|
||||
@ -443,9 +443,9 @@
|
||||
{/if}
|
||||
{#if searchQuery && capsule.id.toLowerCase().includes(searchQuery.toLowerCase())}
|
||||
{@const matchIdx = capsule.id.toLowerCase().indexOf(searchQuery.toLowerCase())}
|
||||
<span class="font-mono text-ui text-[var(--color-text-bright)]">{capsule.id.slice(0, matchIdx)}<mark class="rounded-[2px] bg-[var(--color-accent-glow-mid)] px-0.5 text-[var(--color-accent-bright)] not-italic">{capsule.id.slice(matchIdx, matchIdx + searchQuery.length)}</mark>{capsule.id.slice(matchIdx + searchQuery.length)}</span>
|
||||
<a href="/dashboard/capsules/{capsule.id}" class="font-mono text-ui text-[var(--color-text-bright)] hover:text-[var(--color-accent-bright)] transition-colors duration-150">{capsule.id.slice(0, matchIdx)}<mark class="rounded-[2px] bg-[var(--color-accent-glow-mid)] px-0.5 text-[var(--color-accent-bright)] not-italic">{capsule.id.slice(matchIdx, matchIdx + searchQuery.length)}</mark>{capsule.id.slice(matchIdx + searchQuery.length)}</a>
|
||||
{:else}
|
||||
<span class="font-mono text-ui text-[var(--color-text-bright)]">{capsule.id}</span>
|
||||
<a href="/dashboard/capsules/{capsule.id}" class="font-mono text-ui text-[var(--color-text-bright)] hover:text-[var(--color-accent-bright)] transition-colors duration-150">{capsule.id}</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
582
frontend/src/routes/dashboard/capsules/[id]/+page.svelte
Normal file
582
frontend/src/routes/dashboard/capsules/[id]/+page.svelte
Normal file
@ -0,0 +1,582 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy, tick } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { getCapsule, type Capsule } from '$lib/api/capsules';
|
||||
import {
|
||||
fetchSandboxMetrics,
|
||||
METRIC_RANGES,
|
||||
METRIC_POLL_INTERVAL,
|
||||
type MetricRange,
|
||||
type MetricPoint
|
||||
} from '$lib/api/metrics';
|
||||
|
||||
const sandboxId: string = $page.params.id ?? '';
|
||||
|
||||
let capsule = $state<Capsule | null>(null);
|
||||
let capsuleLoading = $state(true);
|
||||
let capsuleError = $state<string | null>(null);
|
||||
|
||||
type Tab = 'metrics' | 'files';
|
||||
let activeTab = $state<Tab>('metrics');
|
||||
|
||||
let range = $state<MetricRange>('10m');
|
||||
let points = $state<MetricPoint[]>([]);
|
||||
let metricsLoading = $state(true);
|
||||
let metricsError = $state<string | null>(null);
|
||||
|
||||
let canvasCpu = $state<HTMLCanvasElement | undefined>(undefined);
|
||||
let canvasRam = $state<HTMLCanvasElement | undefined>(undefined);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let chartCpu: any = null;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let chartRam: any = null;
|
||||
let pollInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const metricsAvailable = $derived(
|
||||
capsule?.status === 'running' || capsule?.status === 'paused'
|
||||
);
|
||||
|
||||
// Latest values for live reading display in chart headers
|
||||
const latestCpu = $derived<number | null>(
|
||||
points.length > 0 ? points[points.length - 1].cpu_pct : null
|
||||
);
|
||||
const latestRamMB = $derived<number | null>(
|
||||
points.length > 0 ? points[points.length - 1].mem_bytes / 1_048_576 : null
|
||||
);
|
||||
|
||||
async function loadCapsule() {
|
||||
const result = await getCapsule(sandboxId);
|
||||
if (result.ok) {
|
||||
capsule = result.data;
|
||||
capsuleError = null;
|
||||
} else {
|
||||
capsuleError = result.error;
|
||||
}
|
||||
capsuleLoading = false;
|
||||
}
|
||||
|
||||
async function loadMetrics() {
|
||||
if (!metricsAvailable) return;
|
||||
const result = await fetchSandboxMetrics(sandboxId, range);
|
||||
if (result.ok) {
|
||||
points = result.data.points;
|
||||
metricsError = null;
|
||||
} else {
|
||||
metricsError = result.error;
|
||||
}
|
||||
metricsLoading = false;
|
||||
updateCharts();
|
||||
}
|
||||
|
||||
/** Simple moving average — smooths noisy high-frequency samples. */
|
||||
function smooth(data: number[], window: number): number[] {
|
||||
if (window <= 1) return data;
|
||||
const out: number[] = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const start = Math.max(0, i - Math.floor(window / 2));
|
||||
const end = Math.min(data.length, i + Math.ceil(window / 2));
|
||||
let sum = 0;
|
||||
for (let j = start; j < end; j++) sum += data[j];
|
||||
out.push(+(sum / (end - start)).toFixed(2));
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/** Window size scales with point count — more data = more smoothing. */
|
||||
function smoothWindow(count: number): number {
|
||||
if (count < 60) return 1; // < 60 pts: no smoothing
|
||||
if (count < 200) return 3;
|
||||
if (count < 600) return 5;
|
||||
return 9;
|
||||
}
|
||||
|
||||
function updateCharts() {
|
||||
if (!points.length) return;
|
||||
const labels = formatLabels(Array.from(points), range);
|
||||
const w = smoothWindow(points.length);
|
||||
if (chartCpu) {
|
||||
chartCpu.data.labels = labels;
|
||||
chartCpu.data.datasets[0].data = smooth(
|
||||
Array.from(points.map((p) => +p.cpu_pct.toFixed(2))), w
|
||||
);
|
||||
chartCpu.update();
|
||||
}
|
||||
if (chartRam) {
|
||||
chartRam.data.labels = labels;
|
||||
chartRam.data.datasets[0].data = smooth(
|
||||
Array.from(points.map((p) => +(p.mem_bytes / 1_048_576).toFixed(1))), w
|
||||
);
|
||||
chartRam.update();
|
||||
}
|
||||
}
|
||||
|
||||
function formatLabels(pts: MetricPoint[], r: MetricRange): string[] {
|
||||
return pts.map((p) => {
|
||||
const d = new Date(p.timestamp_unix * 1000);
|
||||
if (r === '5m' || r === '10m') {
|
||||
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
}
|
||||
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
});
|
||||
}
|
||||
|
||||
function setRange(r: MetricRange) {
|
||||
range = r;
|
||||
goto(`?range=${r}`, { replaceState: true, noScroll: true, keepFocus: true });
|
||||
metricsLoading = true;
|
||||
restartPolling();
|
||||
}
|
||||
|
||||
function restartPolling() {
|
||||
if (pollInterval) clearInterval(pollInterval);
|
||||
loadMetrics();
|
||||
pollInterval = setInterval(loadMetrics, METRIC_POLL_INTERVAL);
|
||||
}
|
||||
|
||||
// Chart design tokens (match StatsPanel.svelte)
|
||||
const C_BLUE = '#5a9fd4';
|
||||
const C_BLUE_FILL = 'rgba(90,159,212,0.11)';
|
||||
const C_AMBER = '#d4a73c';
|
||||
const C_AMBER_FILL = 'rgba(212,167,60,0.11)';
|
||||
const C_GRID = 'rgba(255,255,255,0.05)';
|
||||
const C_TICK = '#635f5c';
|
||||
const FONT_MONO = "'JetBrains Mono', monospace";
|
||||
|
||||
const BASE_CHART_OPTIONS = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: false as const,
|
||||
interaction: { mode: 'index' as const, intersect: false },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: '#111412',
|
||||
borderColor: '#1f2321',
|
||||
borderWidth: 1,
|
||||
titleColor: '#454340',
|
||||
bodyColor: '#d4cfc8',
|
||||
titleFont: { family: FONT_MONO, size: 10 },
|
||||
bodyFont: { family: FONT_MONO, size: 11 },
|
||||
padding: 10,
|
||||
caretSize: 4,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { color: C_GRID },
|
||||
ticks: {
|
||||
color: C_TICK,
|
||||
font: { family: FONT_MONO, size: 10 },
|
||||
maxTicksLimit: 8,
|
||||
maxRotation: 0,
|
||||
},
|
||||
border: { color: C_GRID },
|
||||
},
|
||||
y: {
|
||||
grid: { color: C_GRID },
|
||||
ticks: { color: C_TICK, font: { family: FONT_MONO, size: 10 } },
|
||||
border: { color: C_GRID },
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
const urlRange = new URLSearchParams(window.location.search).get('range');
|
||||
if (urlRange && METRIC_RANGES.includes(urlRange as MetricRange)) {
|
||||
range = urlRange as MetricRange;
|
||||
}
|
||||
|
||||
await loadCapsule();
|
||||
|
||||
if (!metricsAvailable) return;
|
||||
|
||||
await tick();
|
||||
|
||||
if (!canvasCpu || !canvasRam) return;
|
||||
|
||||
const { Chart } = await import('chart.js/auto');
|
||||
|
||||
chartCpu = new Chart(canvasCpu, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
data: [],
|
||||
borderColor: C_BLUE,
|
||||
backgroundColor: C_BLUE_FILL,
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: C_BLUE,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
...BASE_CHART_OPTIONS,
|
||||
plugins: {
|
||||
...BASE_CHART_OPTIONS.plugins,
|
||||
tooltip: {
|
||||
...BASE_CHART_OPTIONS.plugins.tooltip,
|
||||
callbacks: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
label: (ctx: any) => ` ${ctx.parsed.y.toFixed(1)}%`,
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
...BASE_CHART_OPTIONS.scales,
|
||||
y: {
|
||||
...BASE_CHART_OPTIONS.scales.y,
|
||||
ticks: {
|
||||
...BASE_CHART_OPTIONS.scales.y.ticks,
|
||||
callback: (v: string | number) => `${+v}%`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
chartRam = new Chart(canvasRam, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
data: [],
|
||||
borderColor: C_AMBER,
|
||||
backgroundColor: C_AMBER_FILL,
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 4,
|
||||
pointHoverBackgroundColor: C_AMBER,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
...BASE_CHART_OPTIONS,
|
||||
plugins: {
|
||||
...BASE_CHART_OPTIONS.plugins,
|
||||
tooltip: {
|
||||
...BASE_CHART_OPTIONS.plugins.tooltip,
|
||||
callbacks: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
label: (ctx: any) => ` ${ctx.parsed.y.toFixed(0)} MB`,
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
...BASE_CHART_OPTIONS.scales,
|
||||
y: {
|
||||
...BASE_CHART_OPTIONS.scales.y,
|
||||
ticks: {
|
||||
...BASE_CHART_OPTIONS.scales.y.ticks,
|
||||
callback: (v: string | number) => `${+v} MB`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
updateCharts();
|
||||
restartPolling();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (pollInterval) clearInterval(pollInterval);
|
||||
chartCpu?.destroy();
|
||||
chartRam?.destroy();
|
||||
});
|
||||
|
||||
function statusColor(status: string): string {
|
||||
switch (status) {
|
||||
case 'running': return 'var(--color-accent)';
|
||||
case 'paused': return 'var(--color-amber)';
|
||||
case 'error': return 'var(--color-red)';
|
||||
default: return 'var(--color-text-muted)';
|
||||
}
|
||||
}
|
||||
|
||||
function statusBg(status: string): string {
|
||||
switch (status) {
|
||||
case 'running': return 'rgba(94,140,88,0.12)';
|
||||
case 'paused': return 'rgba(212,167,60,0.12)';
|
||||
case 'error': return 'rgba(207,129,114,0.12)';
|
||||
default: return 'rgba(255,255,255,0.05)';
|
||||
}
|
||||
}
|
||||
|
||||
function statusBorder(status: string): string {
|
||||
switch (status) {
|
||||
case 'running': return 'rgba(94,140,88,0.3)';
|
||||
case 'paused': return 'rgba(212,167,60,0.3)';
|
||||
case 'error': return 'rgba(207,129,114,0.3)';
|
||||
default: return 'rgba(255,255,255,0.08)';
|
||||
}
|
||||
}
|
||||
|
||||
function fmtDate(iso: string | null | undefined): string {
|
||||
if (!iso) return '—';
|
||||
return new Date(iso).toLocaleString([], {
|
||||
month: 'short', day: 'numeric',
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
function fmtTimeout(sec: number): string {
|
||||
if (!sec) return 'None';
|
||||
if (sec < 60) return `${sec}s`;
|
||||
if (sec < 3600) return `${Math.round(sec / 60)}m`;
|
||||
return `${Math.round(sec / 3600)}h`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Wrenn — {sandboxId}</title>
|
||||
</svelte:head>
|
||||
|
||||
<style>
|
||||
.metric-val {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
@keyframes fadeSlideUp {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.anim-in {
|
||||
animation: fadeSlideUp 0.28s ease both;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if capsuleLoading}
|
||||
<div class="flex items-center justify-center py-24">
|
||||
<div class="flex items-center gap-3 text-ui text-[var(--color-text-secondary)]">
|
||||
<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
|
||||
</svg>
|
||||
Loading capsule...
|
||||
</div>
|
||||
</div>
|
||||
{:else if capsuleError}
|
||||
<div class="px-7 py-8">
|
||||
<div class="flex items-center gap-3 rounded-[var(--radius-card)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/8 px-5 py-4">
|
||||
<svg class="shrink-0 text-[var(--color-red)]" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
<span class="text-ui text-[var(--color-red)]">{capsuleError}</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else if capsule}
|
||||
<div class="flex flex-1 flex-col min-h-0">
|
||||
|
||||
<!-- Tabs (matches Templates page pattern) -->
|
||||
<div class="mt-5 flex gap-0 border-b border-[var(--color-border)] px-7">
|
||||
<button
|
||||
onclick={() => (activeTab = 'metrics')}
|
||||
class="flex items-center gap-2 border-b-2 px-4 py-2.5 text-ui font-medium transition-colors duration-150
|
||||
{activeTab === 'metrics'
|
||||
? 'border-[var(--color-accent)] text-[var(--color-accent-bright)]'
|
||||
: 'border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'}"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
|
||||
</svg>
|
||||
Stats
|
||||
</button>
|
||||
|
||||
<button
|
||||
disabled
|
||||
title="Coming soon"
|
||||
class="flex cursor-not-allowed items-center gap-2 border-b-2 border-transparent px-4 py-2.5 text-ui font-medium opacity-40"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
Files
|
||||
<span class="rounded-[3px] bg-[var(--color-bg-4)] px-1.5 py-0.5 text-badge font-semibold uppercase tracking-[0.06em] text-[var(--color-text-muted)]">
|
||||
Soon
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Stats tab content -->
|
||||
{#if activeTab === 'metrics'}
|
||||
<div
|
||||
class="anim-in flex flex-1 flex-col gap-5 min-h-0 p-8"
|
||||
style="animation-delay: 0.05s"
|
||||
>
|
||||
|
||||
<!-- Controls row -->
|
||||
<div class="flex items-center justify-between">
|
||||
{#if metricsAvailable && !metricsLoading}
|
||||
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-accent)]/25 bg-[var(--color-accent-glow-mid)] px-2 py-1 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-accent-mid)]">
|
||||
<span class="h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]" style="animation: wrenn-glow 2.5s ease-in-out infinite"></span>
|
||||
Live
|
||||
</span>
|
||||
{:else}
|
||||
<div></div>
|
||||
{/if}
|
||||
|
||||
{#if metricsAvailable}
|
||||
<div class="flex overflow-hidden rounded-[var(--radius-button)] border border-[var(--color-border)]">
|
||||
{#each METRIC_RANGES as r, i}
|
||||
<button
|
||||
onclick={() => setRange(r)}
|
||||
class="px-3 py-1.5 font-mono text-label transition-colors duration-150
|
||||
{range === r
|
||||
? 'bg-[var(--color-bg-5)] text-[var(--color-text-bright)]'
|
||||
: 'text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-secondary)]'}
|
||||
{i > 0 ? 'border-l border-[var(--color-border)]' : ''}"
|
||||
>
|
||||
{r}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Info card (StatsPanel style) -->
|
||||
<div class="overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)]">
|
||||
<div class="flex divide-x divide-[var(--color-border)]">
|
||||
|
||||
<!-- Status -->
|
||||
<div class="flex flex-1 flex-col gap-2.5 bg-[var(--color-bg-3)] px-6 py-5" style="box-shadow: inset 5px 0 0 {statusColor(capsule.status)}">
|
||||
<div class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Status</div>
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 self-start rounded-full px-2.5 py-1 text-label font-semibold uppercase tracking-[0.05em]"
|
||||
style="color: {statusColor(capsule.status)}; background: {statusBg(capsule.status)}; border: 1px solid {statusBorder(capsule.status)}"
|
||||
>
|
||||
{#if capsule.status === 'running'}
|
||||
<span class="relative flex h-[5px] w-[5px] shrink-0">
|
||||
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
|
||||
<span class="relative inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
|
||||
</span>
|
||||
{/if}
|
||||
{capsule.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Template -->
|
||||
<div class="flex flex-1 flex-col gap-2.5 bg-[var(--color-bg-3)] px-6 py-5">
|
||||
<div class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Template</div>
|
||||
<span class="font-mono text-ui text-[var(--color-text-bright)]">{capsule.template}</span>
|
||||
</div>
|
||||
|
||||
<!-- CPU -->
|
||||
<div class="flex flex-1 flex-col gap-2.5 bg-[var(--color-bg-3)] px-6 py-5">
|
||||
<div class="text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]">CPU</div>
|
||||
<div class="mt-0.5 flex items-baseline gap-1">
|
||||
<span class="font-serif text-[2.571rem] leading-none tracking-[-0.04em] text-[var(--color-text-bright)]">{capsule.vcpus}</span>
|
||||
<span class="font-mono text-label text-[var(--color-text-muted)]">vCPU{capsule.vcpus !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory -->
|
||||
<div class="flex flex-1 flex-col gap-2.5 bg-[var(--color-bg-3)] px-6 py-5">
|
||||
<div class="text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]">Memory</div>
|
||||
<div class="mt-0.5 flex items-baseline gap-1">
|
||||
<span class="font-serif text-[2.571rem] leading-none tracking-[-0.04em] text-[var(--color-text-bright)]">{capsule.memory_mb}</span>
|
||||
<span class="font-mono text-label text-[var(--color-text-muted)]">MB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Disk -->
|
||||
<div class="flex flex-1 flex-col gap-2.5 bg-[var(--color-bg-3)] px-6 py-5">
|
||||
<div class="text-label font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]">Disk</div>
|
||||
<span class="mt-0.5 font-serif text-[2.571rem] leading-none tracking-[-0.04em] text-[var(--color-text-muted)]">—</span>
|
||||
</div>
|
||||
|
||||
<!-- Started -->
|
||||
<div class="flex flex-1 flex-col gap-2.5 bg-[var(--color-bg-3)] px-6 py-5">
|
||||
<div class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Started</div>
|
||||
<span class="font-mono text-ui text-[var(--color-text-secondary)]">{fmtDate(capsule.started_at)}</span>
|
||||
</div>
|
||||
|
||||
<!-- Idle Timeout -->
|
||||
<div class="flex flex-1 flex-col gap-2.5 bg-[var(--color-bg-3)] px-6 py-5">
|
||||
<div class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Idle Timeout</div>
|
||||
<span class="font-mono text-ui text-[var(--color-text-secondary)]">{fmtTimeout(capsule.timeout_sec)}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if metricsError}
|
||||
<div class="flex items-center gap-3 rounded-[var(--radius-card)] border border-[var(--color-red)]/30 bg-[var(--color-red)]/8 px-4 py-3">
|
||||
<svg class="shrink-0 text-[var(--color-red)]" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
<span class="text-ui text-[var(--color-red)]">Failed to load metrics: {metricsError}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if metricsAvailable}
|
||||
<!-- Charts stacked — grow to fill remaining space -->
|
||||
<div class="flex flex-1 flex-col gap-5 min-h-0">
|
||||
|
||||
<!-- CPU Usage -->
|
||||
<div class="flex flex-1 flex-col rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-bg-2)]">
|
||||
<div class="flex items-center justify-between border-b border-[var(--color-border)] px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 shrink-0 rounded-full" style="background: #5a9fd4"></span>
|
||||
<span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">CPU Usage</span>
|
||||
</div>
|
||||
{#if latestCpu !== null}
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="metric-val font-serif text-[2.571rem] leading-none tracking-[-0.04em] text-[var(--color-text-bright)]">{latestCpu.toFixed(1)}</span>
|
||||
<span class="font-mono text-label text-[var(--color-text-muted)]">%</span>
|
||||
</div>
|
||||
{:else if metricsLoading}
|
||||
<span class="font-serif text-[2.571rem] leading-none text-[var(--color-text-muted)]">—</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="relative flex-1 min-h-[180px] px-5 pb-5 pt-3">
|
||||
<canvas bind:this={canvasCpu}></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RAM Usage -->
|
||||
<div class="flex flex-1 flex-col rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-bg-2)]">
|
||||
<div class="flex items-center justify-between border-b border-[var(--color-border)] px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-2 w-2 shrink-0 rounded-full" style="background: #d4a73c"></span>
|
||||
<span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">RAM Usage</span>
|
||||
</div>
|
||||
{#if latestRamMB !== null}
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="metric-val font-serif text-[2.571rem] leading-none tracking-[-0.04em] text-[var(--color-text-bright)]">{latestRamMB.toFixed(0)}</span>
|
||||
<span class="font-mono text-label text-[var(--color-text-muted)]">MB</span>
|
||||
</div>
|
||||
{:else if metricsLoading}
|
||||
<span class="font-serif text-[2.571rem] leading-none text-[var(--color-text-muted)]">—</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="relative flex-1 min-h-[180px] px-5 pb-5 pt-3">
|
||||
<canvas bind:this={canvasRam}></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Stats unavailable — capsule not running/paused -->
|
||||
<div class="flex items-center gap-3 rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] px-5 py-4">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
|
||||
</svg>
|
||||
<span class="text-ui text-[var(--color-text-tertiary)]">
|
||||
Live stats are only available for running or paused capsules —
|
||||
current status: <span class="font-mono" style="color: {statusColor(capsule.status)}">{capsule.status}</span>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@ -1226,31 +1226,22 @@ func warnErr(msg string, id string, err error) {
|
||||
}
|
||||
}
|
||||
|
||||
// startSampler resolves the Firecracker child PID and starts a background
|
||||
// goroutine that samples CPU/mem/disk at 500ms intervals into the ring buffer.
|
||||
// startSampler resolves the Firecracker PID and starts a background goroutine
|
||||
// that samples CPU/mem/disk at 500ms intervals into the ring buffer.
|
||||
// Must be called after the sandbox is registered in m.boxes.
|
||||
func (m *Manager) startSampler(sb *sandboxState) {
|
||||
// Resolve the Firecracker PID (child of unshare wrapper).
|
||||
v, ok := m.vm.Get(sb.ID)
|
||||
if !ok {
|
||||
slog.Warn("metrics: VM not found, skipping sampler", "id", sb.ID)
|
||||
return
|
||||
}
|
||||
unshPID := v.PID()
|
||||
|
||||
var fcPID int
|
||||
for attempt := 0; attempt < 5; attempt++ {
|
||||
var err error
|
||||
fcPID, err = findChildPID(unshPID)
|
||||
if err == nil {
|
||||
break
|
||||
}
|
||||
if attempt == 4 {
|
||||
slog.Warn("metrics: could not resolve FC PID, skipping sampler", "id", sb.ID, "error", err)
|
||||
return
|
||||
}
|
||||
time.Sleep(50 * time.Millisecond)
|
||||
}
|
||||
// v.PID() is the cmd.Process.Pid of the "unshare -m -- bash -c script"
|
||||
// invocation. Because unshare(2) modifies the current process's namespace
|
||||
// before exec-replacing itself with bash, and bash exec-replaces itself
|
||||
// with ip-netns-exec, which exec-replaces itself with firecracker, the
|
||||
// entire exec chain occupies the same PID. v.PID() IS the Firecracker PID.
|
||||
fcPID := v.PID()
|
||||
|
||||
sb.fcPID = fcPID
|
||||
sb.ring = newMetricsRing()
|
||||
|
||||
@ -8,28 +8,6 @@ import (
|
||||
"syscall"
|
||||
)
|
||||
|
||||
// findChildPID reads the direct child PID of a given parent process.
|
||||
// The Firecracker process is a direct child of the unshare wrapper because
|
||||
// the init script uses `exec ip netns exec ... firecracker`, which replaces
|
||||
// bash with ip-netns-exec, which in turn execs firecracker — same PID,
|
||||
// direct child of unshare.
|
||||
func findChildPID(parentPID int) (int, error) {
|
||||
path := fmt.Sprintf("/proc/%d/task/%d/children", parentPID, parentPID)
|
||||
data, err := os.ReadFile(path)
|
||||
if err != nil {
|
||||
return 0, fmt.Errorf("read children: %w", err)
|
||||
}
|
||||
fields := strings.Fields(string(data))
|
||||
if len(fields) == 0 {
|
||||
return 0, fmt.Errorf("no child processes found for PID %d", parentPID)
|
||||
}
|
||||
pid, err := strconv.Atoi(fields[0])
|
||||
if err != nil {
|
||||
return 0, fmt.Errorf("parse child PID %q: %w", fields[0], err)
|
||||
}
|
||||
return pid, nil
|
||||
}
|
||||
|
||||
// cpuStat holds raw CPU jiffies read from /proc/{pid}/stat.
|
||||
type cpuStat struct {
|
||||
utime uint64
|
||||
|
||||
Reference in New Issue
Block a user