thandClaude Opus 4.6
39e94b8015
Fullscreen cluster dashboard view consuming the Oumta Go backend. All data currently mocked — see plugin TODO.md for integration plan. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
118 lines
6.5 KiB
HTML
118 lines
6.5 KiB
HTML
<div class="overlay fixed inset-0 z-[75]" style="background:var(--t-overlay)" id="oumta-overlay">
|
|
<div class="bg-t-surface border border-t-border flex flex-col absolute" style="inset:40px;">
|
|
|
|
<!-- Header -->
|
|
<div class="flex items-center gap-3 px-5 py-3 border-b border-t-border shrink-0">
|
|
<i class="ph ph-gauge text-t-accent text-base"></i>
|
|
<h2 class="font-pixel text-xs text-t-accent">oumta_dashboard</h2>
|
|
<span id="oumta-generated-at" class="font-pixel text-[9px] text-t-dim"></span>
|
|
<div class="flex-1"></div>
|
|
<button id="oumta-refresh" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-tip="Refresh now">
|
|
<i class="ph ph-arrows-clockwise text-sm"></i><span class="font-pixel text-[10px]">Refresh</span>
|
|
</button>
|
|
<button id="oumta-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
|
|
<i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">Close</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Namespace tabs -->
|
|
<div id="oumta-ns-tabs" class="flex items-center gap-0 border-b border-t-border shrink-0 px-5"></div>
|
|
|
|
<!-- View tabs (Overview / Workloads / Timeline) -->
|
|
<div class="flex items-center gap-4 border-b border-t-border shrink-0 px-5 py-2 bg-t-bg">
|
|
<button class="oumta-view-tab active" data-view="overview"><i class="ph ph-squares-four text-sm"></i> Overview</button>
|
|
<button class="oumta-view-tab" data-view="workloads"><i class="ph ph-list text-sm"></i> Workloads</button>
|
|
<button class="oumta-view-tab" data-view="timeline"><i class="ph ph-clock-counter-clockwise text-sm"></i> Timeline</button>
|
|
<div class="flex-1"></div>
|
|
<span id="oumta-live-indicator" class="flex items-center gap-1 font-pixel text-[9px] text-t-dim" data-tip="Realtime status">
|
|
<span class="oumta-dot"></span><span id="oumta-live-label">connecting…</span>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="flex-1 overflow-auto" id="oumta-body">
|
|
|
|
<!-- Overview -->
|
|
<section class="oumta-view" data-view="overview">
|
|
<div class="oumta-overview-grid">
|
|
<div class="oumta-card oumta-cluster-status" id="oumta-cluster-card">
|
|
<div class="oumta-card-label">Cluster state</div>
|
|
<div class="oumta-card-value" id="oumta-cluster-state">—</div>
|
|
<div class="oumta-card-sub" id="oumta-cluster-updated">no data</div>
|
|
</div>
|
|
<div class="oumta-card">
|
|
<div class="oumta-card-label">Workloads healthy</div>
|
|
<div class="oumta-card-value" id="oumta-workloads-up">—</div>
|
|
</div>
|
|
<div class="oumta-card">
|
|
<div class="oumta-card-label">Workloads down</div>
|
|
<div class="oumta-card-value oumta-danger" id="oumta-workloads-down">—</div>
|
|
</div>
|
|
<div class="oumta-card">
|
|
<div class="oumta-card-label">Open incidents</div>
|
|
<div class="oumta-card-value" id="oumta-incidents">—</div>
|
|
</div>
|
|
<div class="oumta-card oumta-card-wide">
|
|
<div class="oumta-card-label">Last successful import</div>
|
|
<div class="oumta-card-value oumta-card-value-sm" id="oumta-last-import">—</div>
|
|
</div>
|
|
</div>
|
|
<div class="oumta-section">
|
|
<div class="oumta-section-title">Workloads needing attention</div>
|
|
<div id="oumta-attention-list" class="oumta-attention-list">
|
|
<div class="oumta-empty">Nothing currently flagged.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Workloads -->
|
|
<section class="oumta-view hidden" data-view="workloads">
|
|
<div class="oumta-toolbar">
|
|
<input id="oumta-wl-search" type="text" placeholder="Filter by name…" class="oumta-input">
|
|
<select id="oumta-wl-status" class="oumta-input">
|
|
<option value="">All states</option>
|
|
<option value="healthy">healthy</option>
|
|
<option value="degraded">degraded</option>
|
|
<option value="unavailable">unavailable</option>
|
|
</select>
|
|
<select id="oumta-wl-timerange" class="oumta-input">
|
|
<option value="1h">last 1h</option>
|
|
<option value="24h" selected>last 24h</option>
|
|
<option value="7d">last 7d</option>
|
|
<option value="">all</option>
|
|
</select>
|
|
</div>
|
|
<table class="oumta-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Namespace</th>
|
|
<th>State</th>
|
|
<th>Replicas</th>
|
|
<th>CPU</th>
|
|
<th>Memory</th>
|
|
<th>Image</th>
|
|
<th>Last reason</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="oumta-wl-body">
|
|
<tr><td colspan="8" class="oumta-empty">No workloads.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<!-- Timeline (workload-detail opens here as well) -->
|
|
<section class="oumta-view hidden" data-view="timeline">
|
|
<div class="oumta-timeline-header">
|
|
<button id="oumta-timeline-back" class="hidden oumta-btn-ghost"><i class="ph ph-caret-left text-sm"></i> back to all</button>
|
|
<span id="oumta-timeline-scope" class="font-pixel text-xs text-t-accent">all events</span>
|
|
</div>
|
|
<div id="oumta-timeline-body" class="oumta-timeline-body">
|
|
<div class="oumta-empty">No events.</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|