quickshell: drop committed superpowers brainstorm scratch
These scratch HTML mockups and .server runtime files were tracked in the source tree and would be applied into ~/.config. Remove them and ignore the directory.
This commit is contained in:
@@ -1 +1,5 @@
|
||||
dot_config/nushell/history.txt
|
||||
|
||||
# Quickshell scratch/runtime artifacts — never manage these
|
||||
.config/quickshell/.superpowers
|
||||
.config/quickshell/.superpowers/**
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{"reason":"idle timeout","timestamp":1776812893183}
|
||||
@@ -1,16 +0,0 @@
|
||||
{"type":"server-started","port":57943,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:57943","screen_dir":"/home/mpuchstein/.local/share/chezmoi/dot_config/quickshell/.superpowers/brainstorm/128159-1776810192"}
|
||||
{"type":"screen-added","file":"/home/mpuchstein/.local/share/chezmoi/dot_config/quickshell/.superpowers/brainstorm/128159-1776810192/pill-options.html"}
|
||||
{"source":"user-event","type":"click","text":"\n 3/3\n \n \n \n B — Icon + node ratio\n Shows ready nodes vs total (e.g. 3/3). Immediately tells you if a node is down.","choice":"b","id":null,"timestamp":1776810288228}
|
||||
{"source":"user-event","type":"click","text":"\n 3/3\n \n \n \n B — Icon + node ratio\n Shows ready nodes vs total (e.g. 3/3). Immediately tells you if a node is down.","choice":"b","id":null,"timestamp":1776810289433}
|
||||
{"source":"user-event","type":"click","text":"\n 3/3\n \n \n \n B — Icon + node ratio\n Shows ready nodes vs total (e.g. 3/3). Immediately tells you if a node is down.","choice":"b","id":null,"timestamp":1776810289627}
|
||||
{"type":"screen-added","file":"/home/mpuchstein/.local/share/chezmoi/dot_config/quickshell/.superpowers/brainstorm/128159-1776810192/pill-combined.html"}
|
||||
{"source":"user-event","type":"click","text":"\n 3/3\n \n \n \n B — Icon + ratio (ratio IS the status)\n Two rows. Ratio color encodes health: green = all ready, yellow = degraded, red = critical. No redundant \"OK\" label.","choice":"b","id":null,"timestamp":1776810328915}
|
||||
{"type":"screen-added","file":"/home/mpuchstein/.local/share/chezmoi/dot_config/quickshell/.superpowers/brainstorm/128159-1776810192/popout-layout.html"}
|
||||
{"type":"screen-added","file":"/home/mpuchstein/.local/share/chezmoi/dot_config/quickshell/.superpowers/brainstorm/128159-1776810192/popout-layout-v2.html"}
|
||||
{"type":"screen-added","file":"/home/mpuchstein/.local/share/chezmoi/dot_config/quickshell/.superpowers/brainstorm/128159-1776810192/popout-layout-v3.html"}
|
||||
{"source":"user-event","type":"click","text":"A\n Bars with actual + % labelsVisual bars, more scannable","choice":"a","id":null,"timestamp":1776810810800}
|
||||
{"type":"screen-added","file":"/home/mpuchstein/.local/share/chezmoi/dot_config/quickshell/.superpowers/brainstorm/128159-1776810192/waiting.html"}
|
||||
{"type":"screen-added","file":"/home/mpuchstein/.local/share/chezmoi/dot_config/quickshell/.superpowers/brainstorm/128159-1776810192/popout-layout-v4.html"}
|
||||
{"source":"user-event","type":"click","text":"✓\n \n This works\n Per-pod table + quota bars with real numbers","choice":"looks-good","id":null,"timestamp":1776811068409}
|
||||
{"type":"screen-added","file":"/home/mpuchstein/.local/share/chezmoi/dot_config/quickshell/.superpowers/brainstorm/128159-1776810192/waiting-2.html"}
|
||||
{"type":"server-stopped","reason":"idle timeout"}
|
||||
@@ -1 +0,0 @@
|
||||
128167
|
||||
@@ -1,33 +0,0 @@
|
||||
<h2>Combined: icon + node ratio + status color</h2>
|
||||
<p class="subtitle">Two variations on how to stack all three elements in the 52px pill.</p>
|
||||
|
||||
<div class="cards">
|
||||
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="display:flex;align-items:center;justify-content:center;padding:28px 0;background:#1e1e2e;border-radius:8px">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:5px;background:#313244;border-radius:14px;padding:10px 14px;width:42px">
|
||||
<span style="font-size:18px;color:#a6e3a1"></span>
|
||||
<span style="font-size:10px;color:#cdd6f4;font-family:monospace;font-weight:bold">3/3</span>
|
||||
<span style="font-size:8px;color:#a6e3a1;font-family:monospace;letter-spacing:0.5px">OK</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A — Icon / ratio / status stacked</h3>
|
||||
<p>Three rows. Icon accent color matches status. Ratio stays neutral text color.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="display:flex;align-items:center;justify-content:center;padding:28px 0;background:#1e1e2e;border-radius:8px">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:5px;background:#313244;border-radius:14px;padding:10px 14px;width:42px">
|
||||
<span style="font-size:18px;color:#a6e3a1"></span>
|
||||
<span style="font-size:9px;color:#a6e3a1;font-family:monospace;font-weight:bold">3/3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B — Icon + ratio (ratio IS the status)</h3>
|
||||
<p>Two rows. Ratio color encodes health: green = all ready, yellow = degraded, red = critical. No redundant "OK" label.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,44 +0,0 @@
|
||||
<h2>What should the bar pill show?</h2>
|
||||
<p class="subtitle">The pill sits in the left sidebar (52px wide). Pick the compact display style you prefer.</p>
|
||||
|
||||
<div class="cards">
|
||||
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="display:flex;align-items:center;justify-content:center;padding:24px 0;background:#1e1e2e;border-radius:8px">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;background:#313244;border-radius:14px;padding:10px 14px;width:42px">
|
||||
<span style="font-size:18px;color:#89b4fa"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A — Icon only</h3>
|
||||
<p>Pill color shifts: green = healthy, yellow = degraded, red = critical. Minimal, like the system pill.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="display:flex;align-items:center;justify-content:center;padding:24px 0;background:#1e1e2e;border-radius:8px">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;background:#313244;border-radius:14px;padding:10px 14px;width:42px">
|
||||
<span style="font-size:18px;color:#89b4fa"></span>
|
||||
<span style="font-size:10px;color:#cdd6f4;font-family:monospace;font-weight:bold">3/3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B — Icon + node ratio</h3>
|
||||
<p>Shows ready nodes vs total (e.g. 3/3). Immediately tells you if a node is down.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="card-image" style="display:flex;align-items:center;justify-content:center;padding:24px 0;background:#1e1e2e;border-radius:8px">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;background:#313244;border-radius:14px;padding:10px 14px;width:42px">
|
||||
<span style="font-size:18px;color:#a6e3a1"></span>
|
||||
<span style="font-size:9px;color:#a6e3a1;font-family:monospace;font-weight:bold">OK</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>C — Icon + status text</h3>
|
||||
<p>Shows OK / WARN / ERR in the pill accent color. Clear at a glance, no counting required.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,94 +0,0 @@
|
||||
<h2>Updated layout — namespace quota instead of cluster metrics</h2>
|
||||
<p class="subtitle">Nodes show status only (no metrics-server needed). Resources show quota consumption from kubectl.</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">K8s — tenant-5</div>
|
||||
<div class="mockup-body" style="background:#1e1e2e;padding:16px;display:flex;flex-direction:column;gap:14px;font-family:monospace">
|
||||
|
||||
<!-- Nodes section -->
|
||||
<div>
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px">Nodes</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;background:#313244;border-radius:8px;padding:7px 10px">
|
||||
<span style="color:#cdd6f4;font-size:12px">node-1</span>
|
||||
<span style="font-size:11px;color:#a6e3a1">● Ready</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;background:#313244;border-radius:8px;padding:7px 10px">
|
||||
<span style="color:#cdd6f4;font-size:12px">node-2</span>
|
||||
<span style="font-size:11px;color:#a6e3a1">● Ready</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;background:#313244;border-radius:8px;padding:7px 10px">
|
||||
<span style="color:#cdd6f4;font-size:12px">node-3</span>
|
||||
<span style="font-size:11px;color:#f38ba8">● NotReady</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pods summary -->
|
||||
<div>
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px">Pods — tenant-5</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<div style="flex:1;background:#313244;border-radius:8px;padding:10px;text-align:center">
|
||||
<div style="font-size:22px;font-weight:bold;color:#a6e3a1">12</div>
|
||||
<div style="font-size:9px;color:#6c7086;margin-top:2px">Running</div>
|
||||
</div>
|
||||
<div style="flex:1;background:#313244;border-radius:8px;padding:10px;text-align:center">
|
||||
<div style="font-size:22px;font-weight:bold;color:#f9e2af">1</div>
|
||||
<div style="font-size:9px;color:#6c7086;margin-top:2px">Pending</div>
|
||||
</div>
|
||||
<div style="flex:1;background:#313244;border-radius:8px;padding:10px;text-align:center">
|
||||
<div style="font-size:22px;font-weight:bold;color:#f38ba8">0</div>
|
||||
<div style="font-size:9px;color:#6c7086;margin-top:2px">Failed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Namespace quota -->
|
||||
<div>
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px">Namespace Quota — tenant-5</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:4px">
|
||||
<span style="font-size:10px;color:#89dceb">CPU requests</span>
|
||||
<span style="font-size:10px;color:#cdd6f4">1.2 / 4 cores</span>
|
||||
</div>
|
||||
<div style="height:6px;background:#313244;border-radius:3px">
|
||||
<div style="height:100%;width:30%;background:#89dceb;border-radius:3px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:4px">
|
||||
<span style="font-size:10px;color:#cba6f7">Memory requests</span>
|
||||
<span style="font-size:10px;color:#cdd6f4">3.4 / 8 GiB</span>
|
||||
</div>
|
||||
<div style="height:6px;background:#313244;border-radius:3px">
|
||||
<div style="height:100%;width:42%;background:#cba6f7;border-radius:3px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:4px">
|
||||
<span style="font-size:10px;color:#f9e2af">Pods</span>
|
||||
<span style="font-size:10px;color:#cdd6f4">13 / 20</span>
|
||||
</div>
|
||||
<div style="height:6px;background:#313244;border-radius:3px">
|
||||
<div style="height:100%;width:65%;background:#f9e2af;border-radius:3px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last updated -->
|
||||
<div style="text-align:right;font-size:9px;color:#45475a">Updated 8s ago</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options" style="margin-top:16px">
|
||||
<div class="option" data-choice="looks-good" onclick="toggleSelect(this)">
|
||||
<div class="letter">✓</div>
|
||||
<div class="content">
|
||||
<h3>This works</h3>
|
||||
<p>Node status, pod counts, namespace quota bars</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-113
@@ -1,113 +0,0 @@
|
||||
<h2>Namespace resources — k9s-style columns</h2>
|
||||
<p class="subtitle">Aggregated across all pods in tenant-5. Two options for how to display the data.</p>
|
||||
|
||||
<div class="split">
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">A — Bar with actual + % labels</div>
|
||||
<div class="mockup-body" style="background:#1e1e2e;padding:14px;display:flex;flex-direction:column;gap:10px;font-family:monospace">
|
||||
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px">Namespace Resources</div>
|
||||
|
||||
<!-- CPU -->
|
||||
<div style="background:#313244;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:baseline">
|
||||
<span style="font-size:10px;color:#89dceb;font-weight:bold">CPU</span>
|
||||
<span style="font-size:11px;color:#cdd6f4">420m</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:3px">
|
||||
<span style="font-size:9px;color:#6c7086">%REQ</span>
|
||||
<span style="font-size:9px;color:#a6e3a1">35%</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#1e1e2e;border-radius:2px">
|
||||
<div style="height:100%;width:35%;background:#a6e3a1;border-radius:2px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:3px">
|
||||
<span style="font-size:9px;color:#6c7086">%LIM</span>
|
||||
<span style="font-size:9px;color:#f9e2af">21%</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#1e1e2e;border-radius:2px">
|
||||
<div style="height:100%;width:21%;background:#f9e2af;border-radius:2px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MEM -->
|
||||
<div style="background:#313244;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:baseline">
|
||||
<span style="font-size:10px;color:#cba6f7;font-weight:bold">MEM</span>
|
||||
<span style="font-size:11px;color:#cdd6f4">2.8 GiB</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:3px">
|
||||
<span style="font-size:9px;color:#6c7086">%REQ</span>
|
||||
<span style="font-size:9px;color:#a6e3a1">58%</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#1e1e2e;border-radius:2px">
|
||||
<div style="height:100%;width:58%;background:#cba6f7;border-radius:2px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:3px">
|
||||
<span style="font-size:9px;color:#6c7086">%LIM</span>
|
||||
<span style="font-size:9px;color:#f9e2af">34%</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#1e1e2e;border-radius:2px">
|
||||
<div style="height:100%;width:34%;background:#cba6f7;border-radius:2px;opacity:0.6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">B — Compact table row</div>
|
||||
<div class="mockup-body" style="background:#1e1e2e;padding:14px;display:flex;flex-direction:column;gap:10px;font-family:monospace">
|
||||
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px">Namespace Resources</div>
|
||||
|
||||
<!-- header row -->
|
||||
<div style="display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr;gap:4px;padding:0 4px">
|
||||
<span style="font-size:8px;color:#45475a"></span>
|
||||
<span style="font-size:8px;color:#45475a;text-align:right">ACTUAL</span>
|
||||
<span style="font-size:8px;color:#45475a;text-align:right">%R</span>
|
||||
<span style="font-size:8px;color:#45475a;text-align:right">%L</span>
|
||||
</div>
|
||||
|
||||
<!-- CPU row -->
|
||||
<div style="display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr;gap:4px;background:#313244;border-radius:8px;padding:8px 10px;align-items:center">
|
||||
<span style="font-size:11px;color:#89dceb;font-weight:bold">CPU</span>
|
||||
<span style="font-size:11px;color:#cdd6f4;text-align:right">420m</span>
|
||||
<span style="font-size:11px;color:#a6e3a1;text-align:right">35%</span>
|
||||
<span style="font-size:11px;color:#f9e2af;text-align:right">21%</span>
|
||||
</div>
|
||||
|
||||
<!-- MEM row -->
|
||||
<div style="display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr;gap:4px;background:#313244;border-radius:8px;padding:8px 10px;align-items:center">
|
||||
<span style="font-size:11px;color:#cba6f7;font-weight:bold">MEM</span>
|
||||
<span style="font-size:11px;color:#cdd6f4;text-align:right">2.8G</span>
|
||||
<span style="font-size:11px;color:#a6e3a1;text-align:right">58%</span>
|
||||
<span style="font-size:11px;color:#f9e2af;text-align:right">34%</span>
|
||||
</div>
|
||||
|
||||
<div style="font-size:9px;color:#45475a;margin-top:2px">%R = % of requests quota · %L = % of limits quota</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="options" style="margin-top:16px">
|
||||
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content"><h3>Bars with actual + % labels</h3><p>Visual bars, more scannable</p></div>
|
||||
</div>
|
||||
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content"><h3>Compact table row</h3><p>Denser, mirrors k9s columns exactly</p></div>
|
||||
</div>
|
||||
</div>
|
||||
-117
@@ -1,117 +0,0 @@
|
||||
<h2>Updated layout — pods replace nodes, per-pod metrics</h2>
|
||||
<p class="subtitle">Based on your real kubectl data. dnddrugs absent from kubectl top → shown as —</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">K8s — tenant-5</div>
|
||||
<div class="mockup-body" style="background:#1e1e2e;padding:16px;display:flex;flex-direction:column;gap:14px;font-family:monospace">
|
||||
|
||||
<!-- Pods section -->
|
||||
<div>
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px">Pods</div>
|
||||
<!-- header -->
|
||||
<div style="display:grid;grid-template-columns:1fr 1.2fr 1.2fr 1fr;gap:4px;padding:0 10px 4px;font-size:8px;color:#45475a">
|
||||
<span></span><span style="text-align:right">CPU</span><span style="text-align:right">MEM</span><span style="text-align:right">STATUS</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:5px">
|
||||
<div style="display:grid;grid-template-columns:1fr 1.2fr 1.2fr 1fr;gap:4px;background:#313244;border-radius:8px;padding:7px 10px;align-items:center">
|
||||
<span style="font-size:11px;color:#cdd6f4">joplin</span>
|
||||
<span style="font-size:11px;color:#89dceb;text-align:right">13m</span>
|
||||
<span style="font-size:11px;color:#cba6f7;text-align:right">343Mi</span>
|
||||
<span style="font-size:10px;color:#a6e3a1;text-align:right">● Ready</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1.2fr 1.2fr 1fr;gap:4px;background:#313244;border-radius:8px;padding:7px 10px;align-items:center">
|
||||
<span style="font-size:11px;color:#cdd6f4">n8n</span>
|
||||
<span style="font-size:11px;color:#89dceb;text-align:right">6m</span>
|
||||
<span style="font-size:11px;color:#cba6f7;text-align:right">427Mi</span>
|
||||
<span style="font-size:10px;color:#a6e3a1;text-align:right">● Ready</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1.2fr 1.2fr 1fr;gap:4px;background:#313244;border-radius:8px;padding:7px 10px;align-items:center">
|
||||
<span style="font-size:11px;color:#cdd6f4">shared-pg</span>
|
||||
<span style="font-size:11px;color:#89dceb;text-align:right">10m</span>
|
||||
<span style="font-size:11px;color:#cba6f7;text-align:right">151Mi</span>
|
||||
<span style="font-size:10px;color:#a6e3a1;text-align:right">● Ready</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1.2fr 1.2fr 1fr;gap:4px;background:#313244;border-radius:8px;padding:7px 10px;align-items:center">
|
||||
<span style="font-size:11px;color:#cdd6f4">dnddrugs</span>
|
||||
<span style="font-size:11px;color:#45475a;text-align:right">—</span>
|
||||
<span style="font-size:11px;color:#45475a;text-align:right">—</span>
|
||||
<span style="font-size:10px;color:#a6e3a1;text-align:right">● Ready</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quota section -->
|
||||
<div>
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px">Quota — tenant-5</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
|
||||
<!-- CPU -->
|
||||
<div style="background:#313244;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px">
|
||||
<div style="display:flex;justify-content:space-between">
|
||||
<span style="font-size:10px;color:#89dceb;font-weight:bold">CPU</span>
|
||||
<span style="font-size:10px;color:#cdd6f4">29m actual</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:3px">
|
||||
<span style="font-size:9px;color:#6c7086">%REQ 78m / 2000m</span>
|
||||
<span style="font-size:9px;color:#a6e3a1">4%</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#1e1e2e;border-radius:2px">
|
||||
<div style="height:100%;width:4%;background:#a6e3a1;border-radius:2px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:3px">
|
||||
<span style="font-size:9px;color:#6c7086">%LIM 1450m / 2000m</span>
|
||||
<span style="font-size:9px;color:#f9e2af">73%</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#1e1e2e;border-radius:2px">
|
||||
<div style="height:100%;width:73%;background:#f9e2af;border-radius:2px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MEM -->
|
||||
<div style="background:#313244;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px">
|
||||
<div style="display:flex;justify-content:space-between">
|
||||
<span style="font-size:10px;color:#cba6f7;font-weight:bold">MEM</span>
|
||||
<span style="font-size:10px;color:#cdd6f4">921Mi actual</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:3px">
|
||||
<span style="font-size:9px;color:#6c7086">%REQ 1.01Gi / 4Gi</span>
|
||||
<span style="font-size:9px;color:#a6e3a1">25%</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#1e1e2e;border-radius:2px">
|
||||
<div style="height:100%;width:25%;background:#cba6f7;border-radius:2px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:3px">
|
||||
<span style="font-size:9px;color:#6c7086">%LIM 2.14Gi / 4Gi</span>
|
||||
<span style="font-size:9px;color:#f9e2af">54%</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#1e1e2e;border-radius:2px">
|
||||
<div style="height:100%;width:54%;background:#cba6f7;border-radius:2px;opacity:0.6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align:right;font-size:9px;color:#45475a">Updated 8s ago</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle" style="margin-top:16px">Pill now shows ready/total pods, e.g. <strong style="color:#a6e3a1">4/4</strong> green → <strong style="color:#f9e2af">3/4</strong> yellow if one goes unready.</p>
|
||||
|
||||
<div class="options" style="margin-top:8px">
|
||||
<div class="option" data-choice="looks-good" onclick="toggleSelect(this)">
|
||||
<div class="letter">✓</div>
|
||||
<div class="content">
|
||||
<h3>This works</h3>
|
||||
<p>Per-pod table + quota bars with real numbers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,97 +0,0 @@
|
||||
<h2>Popout layout — does this cover what you need?</h2>
|
||||
<p class="subtitle">320px wide panel. Click to select if this looks right, or describe what's missing below.</p>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">K8s — tenant-5</div>
|
||||
<div class="mockup-body" style="background:#1e1e2e;padding:16px;display:flex;flex-direction:column;gap:14px;font-family:monospace">
|
||||
|
||||
<!-- Nodes section -->
|
||||
<div>
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px">Nodes</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;background:#313244;border-radius:8px;padding:7px 10px">
|
||||
<span style="color:#cdd6f4;font-size:12px">node-1</span>
|
||||
<div style="display:flex;gap:10px;align-items:center">
|
||||
<span style="font-size:10px;color:#89dceb">CPU <b style="color:#cdd6f4">38%</b></span>
|
||||
<span style="font-size:10px;color:#cba6f7">MEM <b style="color:#cdd6f4">61%</b></span>
|
||||
<span style="font-size:11px;color:#a6e3a1">● Ready</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;background:#313244;border-radius:8px;padding:7px 10px">
|
||||
<span style="color:#cdd6f4;font-size:12px">node-2</span>
|
||||
<div style="display:flex;gap:10px;align-items:center">
|
||||
<span style="font-size:10px;color:#89dceb">CPU <b style="color:#cdd6f4">12%</b></span>
|
||||
<span style="font-size:10px;color:#cba6f7">MEM <b style="color:#cdd6f4">44%</b></span>
|
||||
<span style="font-size:11px;color:#a6e3a1">● Ready</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;background:#313244;border-radius:8px;padding:7px 10px">
|
||||
<span style="color:#cdd6f4;font-size:12px">node-3</span>
|
||||
<div style="display:flex;gap:10px;align-items:center">
|
||||
<span style="font-size:10px;color:#89dceb">CPU <b style="color:#cdd6f4">—</b></span>
|
||||
<span style="font-size:10px;color:#cba6f7">MEM <b style="color:#cdd6f4">—</b></span>
|
||||
<span style="font-size:11px;color:#f38ba8">● NotReady</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pods summary -->
|
||||
<div>
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px">Pods — tenant-5</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<div style="flex:1;background:#313244;border-radius:8px;padding:10px;text-align:center">
|
||||
<div style="font-size:22px;font-weight:bold;color:#a6e3a1">12</div>
|
||||
<div style="font-size:9px;color:#6c7086;margin-top:2px">Running</div>
|
||||
</div>
|
||||
<div style="flex:1;background:#313244;border-radius:8px;padding:10px;text-align:center">
|
||||
<div style="font-size:22px;font-weight:bold;color:#f9e2af">1</div>
|
||||
<div style="font-size:9px;color:#6c7086;margin-top:2px">Pending</div>
|
||||
</div>
|
||||
<div style="flex:1;background:#313244;border-radius:8px;padding:10px;text-align:center">
|
||||
<div style="font-size:22px;font-weight:bold;color:#f38ba8">0</div>
|
||||
<div style="font-size:9px;color:#6c7086;margin-top:2px">Failed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cluster resources -->
|
||||
<div>
|
||||
<div style="font-size:10px;color:#6c7086;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px">Cluster Resources</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:4px">
|
||||
<span style="font-size:10px;color:#89dceb">CPU</span>
|
||||
<span style="font-size:10px;color:#cdd6f4">1.8 / 8 cores</span>
|
||||
</div>
|
||||
<div style="height:6px;background:#313244;border-radius:3px">
|
||||
<div style="height:100%;width:22%;background:#89dceb;border-radius:3px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:4px">
|
||||
<span style="font-size:10px;color:#cba6f7">Memory</span>
|
||||
<span style="font-size:10px;color:#cdd6f4">5.2 / 16 GiB</span>
|
||||
</div>
|
||||
<div style="height:6px;background:#313244;border-radius:3px">
|
||||
<div style="height:100%;width:52%;background:#cba6f7;border-radius:3px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last updated -->
|
||||
<div style="text-align:right;font-size:9px;color:#45475a">Updated 14s ago</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options" style="margin-top:16px">
|
||||
<div class="option" data-choice="looks-good" onclick="toggleSelect(this)">
|
||||
<div class="letter">✓</div>
|
||||
<div class="content">
|
||||
<h3>This covers it</h3>
|
||||
<p>Nodes with per-node CPU/mem/status, pod counts, cluster resource bars</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
Reference in New Issue
Block a user