diff options
Diffstat (limited to 'frontend/src/routes/(admin)')
| -rw-r--r-- | frontend/src/routes/(admin)/admin/+page.svelte | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/frontend/src/routes/(admin)/admin/+page.svelte b/frontend/src/routes/(admin)/admin/+page.svelte index 5be9154..7fa361d 100644 --- a/frontend/src/routes/(admin)/admin/+page.svelte +++ b/frontend/src/routes/(admin)/admin/+page.svelte @@ -14,6 +14,7 @@ services = data.services ?? []; initialized = true; fetchMaintenances(); + fetchServerStats(); } }); let editingSvc: any = $state(null); @@ -29,6 +30,26 @@ let mtnSaving = $state(false); let mtnFormError = $state(''); + // server health state + let serverStats: { cpu_percent: number; memory_percent: number; disk_percent: number } | null = $state(null); + let serverStatsLoading = $state(true); + let serverStatsError = $state(''); + + async function fetchServerStats() { + serverStatsLoading = true; + serverStatsError = ''; + try { + const res = await fetch(`${API}/admin/server-stats`, { headers: { Authorization: `Bearer ${token}` } }); + if (await handleUnauthorized(res)) return; + if (!res.ok) throw new Error('Erro ao carregar'); + serverStats = await res.json(); + } catch { + serverStatsError = 'Falha ao carregar métricas do servidor'; + } finally { + serverStatsLoading = false; + } + } + function apiHeaders() { return { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }; } @@ -265,6 +286,52 @@ </a> </div> +<!-- Saúde do Sistema --> +<div class="mb-8"> + <h2 class="mb-4 text-xs font-semibold uppercase tracking-wider text-[var(--text-secondary)]"> + Saúde do Sistema + </h2> + {#if serverStatsLoading} + <div class="grid grid-cols-3 gap-4"> + {#each ['CPU', 'RAM', 'Disco'] as label} + <div class="rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-4"> + <p class="text-[10px] font-medium uppercase tracking-wider text-[var(--text-muted)]">{label}</p> + <div class="mt-3 h-2 rounded-full bg-[var(--border-color)]"><div class="h-full w-1/3 rounded-full bg-[var(--border-color)]"></div></div> + <p class="mt-2 text-right font-mono text-xs text-[var(--text-muted)]">…</p> + </div> + {/each} + </div> + {:else if serverStats} + <div class="grid grid-cols-3 gap-4"> + {#each [ + { label: 'CPU', pct: serverStats.cpu_percent }, + { label: 'RAM', pct: serverStats.memory_percent }, + { label: 'Disco', pct: serverStats.disk_percent }, + ] as item} + {@const color = item.pct >= 90 ? 'var(--red)' : item.pct >= 70 ? 'var(--amber)' : 'var(--green)'} + <div class="rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-4"> + <div class="flex items-center justify-between"> + <p class="text-[10px] font-medium uppercase tracking-wider text-[var(--text-muted)]">{item.label}</p> + <span class="font-mono text-lg font-bold tabular-nums" style="color: {color}"> + {item.pct.toFixed(1)}<span class="text-xs font-normal text-[var(--text-muted)]">%</span> + </span> + </div> + <div class="mt-3 h-2 overflow-hidden rounded-full bg-[var(--border-color)]"> + <div + class="h-full rounded-full transition-all duration-500" + style="width: {Math.min(item.pct, 100)}%; background-color: {color};" + ></div> + </div> + </div> + {/each} + </div> + {:else if serverStatsError} + <div class="rounded-xl border border-[var(--red)]/20 bg-[var(--red)]/5 p-4 text-center"> + <p class="text-xs text-[var(--text-muted)]">{serverStatsError}</p> + </div> + {/if} +</div> + <div class="mb-8"> <button onclick={openCreate} |