thandClaude Opus 4.7
72a7c7c7cc
- relay: raise /api/collab-attachments + /api/attachments/upload POST size limit from 256KB to 15MB, matching /api/attachments. Previous limit silently dropped any collab image >~100KB as 413 (envelope overhead pushes even modest JPEGs past the cap), leaving puller clients with broken <img src="uploads/..."> references. - oumta-dashboard: centre overview tiles, bump value font to 56px, introduce .oumta-fail alarm state that paints the full tile red with white text. Toggled from JS for cluster state=down, workloads down >0, and open incidents >0. Fail colour uses --t-danger so it stays in sync with the "unavailable" workload labels. Co-Authored-By: Claude Opus 4.7 (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" 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>
|