thandClaude Opus 4.7
8cbec8d601
- Overlays: drop the 24/40/54px inset frame on tasks, calendar,
gallery, search, detail, edit modal, bookmarks, email, gitea and
oumta-dashboard so they fill the viewport like the support
overlay does. Removed the shared border-radius + overflow:hidden
rule on their inner containers (only settings + dialog still use
it) so the card's top colour bar isn't clipped.
- Done badge: the corner-triangle variant gets chopped by rounded
card borders. applyDesign now toggles body.rounded-cards whenever
--ui-radius-card > 0, and the CSS swaps the triangle for a 18px
circle pill with the check centred. Triangle stays for square
cards.
- Support plugin: "Close ticket" button is a regular labelled
button now (was a 30×30 icon ghost that clipped the text). Empty
hero state ("select a ticket") matches the board's empty style —
centred in the column with a pixel-font blink-cursor label.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
121 lines
6.7 KiB
HTML
121 lines
6.7 KiB
HTML
<div class="overlay fixed inset-0 z-[75]" style="background:var(--t-overlay)" id="oumta-overlay">
|
|
<div class="bg-t-surface flex flex-col absolute" style="inset:0;">
|
|
|
|
<!-- 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>
|
|
<!-- Workload filter: quick-pick pills by default, a dropdown
|
|
trigger appears only when the pills don't fit. -->
|
|
<div id="oumta-timeline-filters" class="oumta-tl-filters"></div>
|
|
<div id="oumta-timeline-body" class="oumta-timeline-body">
|
|
<div class="oumta-empty">No events.</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|