Hugh Hackman
e0ebd38653
Add 3 SVG mockup screenshots (Overview, GPU Nodes, Metrics) to docs/screenshots/ and wire them into the artifacthub-pkg.yml screenshots section. Resolves the last metadata polish item for v1.0. appVersion 0.35.0 verified current — Intel Device Plugins latest release is v0.35.0 (2026-02-16), no update needed. Closes #16 (screenshots item)
118 lines
7.3 KiB
XML
118 lines
7.3 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="750" viewBox="0 0 1200 750" font-family="Inter, Segoe UI, Arial, sans-serif">
|
|
<!-- Background -->
|
|
<rect width="1200" height="750" fill="#0f1117"/>
|
|
|
|
<!-- Top nav bar -->
|
|
<rect width="1200" height="48" fill="#1a1d27"/>
|
|
<text x="16" y="30" font-size="18" font-weight="700" fill="#ffffff">⚡ Headlamp</text>
|
|
<text x="120" y="30" font-size="14" fill="#8b8fa8">Intel GPU</text>
|
|
<text x="200" y="30" font-size="14" fill="#8b8fa8">/</text>
|
|
<text x="214" y="30" font-size="14" fill="#a78bfa">Metrics</text>
|
|
|
|
<!-- Sidebar -->
|
|
<rect x="0" y="48" width="200" height="702" fill="#13151f"/>
|
|
<text x="16" y="113" font-size="13" fill="#8b8fa8">Overview</text>
|
|
<text x="16" y="153" font-size="13" fill="#8b8fa8">Device Plugins</text>
|
|
<text x="16" y="193" font-size="13" fill="#8b8fa8">GPU Nodes</text>
|
|
<text x="16" y="233" font-size="13" fill="#8b8fa8">GPU Pods</text>
|
|
<rect x="0" y="250" width="200" height="36" fill="#a78bfa22"/>
|
|
<text x="16" y="273" font-size="13" fill="#a78bfa" font-weight="600">Metrics</text>
|
|
|
|
<!-- Page title -->
|
|
<text x="220" y="90" font-size="22" font-weight="700" fill="#ffffff">GPU Metrics</text>
|
|
<text x="220" y="112" font-size="13" fill="#8b8fa8">Real-time GPU power draw from node-exporter i915 hwmon (discrete GPU nodes only)</text>
|
|
|
|
<!-- Time range selector -->
|
|
<rect x="980" y="72" width="200" height="30" rx="6" fill="#1e2130"/>
|
|
<text x="1000" y="92" font-size="13" fill="#8b8fa8">Last 30 min ▾</text>
|
|
|
|
<!-- Summary stat cards -->
|
|
<rect x="220" y="130" width="230" height="80" rx="8" fill="#1e2130"/>
|
|
<text x="240" y="158" font-size="12" fill="#8b8fa8">Peak Power Draw</text>
|
|
<text x="240" y="195" font-size="28" font-weight="700" fill="#f87171">186 W</text>
|
|
<text x="360" y="195" font-size="12" fill="#8b8fa8">gpu-node-03</text>
|
|
|
|
<rect x="466" y="130" width="230" height="80" rx="8" fill="#1e2130"/>
|
|
<text x="486" y="158" font-size="12" fill="#8b8fa8">Avg Power (cluster)</text>
|
|
<text x="486" y="195" font-size="28" font-weight="700" fill="#fb923c">124 W</text>
|
|
<text x="606" y="195" font-size="12" fill="#8b8fa8">3 nodes</text>
|
|
|
|
<rect x="712" y="130" width="230" height="80" rx="8" fill="#1e2130"/>
|
|
<text x="732" y="158" font-size="12" fill="#8b8fa8">Avg TDP Utilization</text>
|
|
<text x="732" y="195" font-size="28" font-weight="700" fill="#a78bfa">68%</text>
|
|
<text x="820" y="195" font-size="12" fill="#8b8fa8">of 250W TDP</text>
|
|
|
|
<rect x="958" y="130" width="210" height="80" rx="8" fill="#1e2130"/>
|
|
<text x="978" y="158" font-size="12" fill="#8b8fa8">Nodes Reporting</text>
|
|
<text x="978" y="195" font-size="28" font-weight="700" fill="#34d399">3</text>
|
|
<text x="1030" y="195" font-size="12" fill="#8b8fa8">/ 4 discrete</text>
|
|
|
|
<!-- Main chart: GPU Power Draw over time -->
|
|
<rect x="220" y="226" width="948" height="300" rx="8" fill="#1e2130"/>
|
|
<text x="240" y="256" font-size="15" font-weight="600" fill="#ffffff">GPU Power Draw (W) — Last 30 Minutes</text>
|
|
<!-- Chart area -->
|
|
<rect x="260" y="270" width="880" height="230" fill="#13151f" rx="4"/>
|
|
<!-- Y axis labels -->
|
|
<text x="250" y="498" font-size="11" fill="#6b7280" text-anchor="end">0</text>
|
|
<text x="250" y="440" font-size="11" fill="#6b7280" text-anchor="end">50</text>
|
|
<text x="250" y="382" font-size="11" fill="#6b7280" text-anchor="end">100</text>
|
|
<text x="250" y="325" font-size="11" fill="#6b7280" text-anchor="end">150</text>
|
|
<text x="250" y="278" font-size="11" fill="#6b7280" text-anchor="end">200</text>
|
|
<!-- Y grid lines -->
|
|
<line x1="260" y1="497" x2="1140" y2="497" stroke="#2d3148" stroke-width="1"/>
|
|
<line x1="260" y1="439" x2="1140" y2="439" stroke="#2d3148" stroke-width="1"/>
|
|
<line x1="260" y1="381" x2="1140" y2="381" stroke="#2d3148" stroke-width="1"/>
|
|
<line x1="260" y1="323" x2="1140" y2="323" stroke="#2d3148" stroke-width="1"/>
|
|
<line x1="260" y1="275" x2="1140" y2="275" stroke="#2d3148" stroke-width="1"/>
|
|
<!-- X axis labels -->
|
|
<text x="260" y="515" font-size="11" fill="#6b7280">-30m</text>
|
|
<text x="480" y="515" font-size="11" fill="#6b7280">-22m</text>
|
|
<text x="700" y="515" font-size="11" fill="#6b7280">-15m</text>
|
|
<text x="920" y="515" font-size="11" fill="#6b7280">-7m</text>
|
|
<text x="1120" y="515" font-size="11" fill="#6b7280">now</text>
|
|
|
|
<!-- Line for gpu-node-01 (purple) — ~186W with some variation -->
|
|
<polyline points="260,323 315,318 370,310 425,315 480,325 535,320 590,312 645,308 700,315 755,322 810,318 865,310 920,305 975,312 1030,320 1085,315 1140,318" fill="none" stroke="#a78bfa" stroke-width="2.5" stroke-linejoin="round"/>
|
|
|
|
<!-- Line for gpu-node-03 (orange) — ~124W workload burst then taper -->
|
|
<polyline points="260,381 315,370 370,355 425,340 480,330 535,328 590,335 645,340 700,345 755,350 810,355 865,345 920,338 975,340 1030,348 1085,355 1140,350" fill="none" stroke="#fb923c" stroke-width="2.5" stroke-linejoin="round"/>
|
|
|
|
<!-- Line for gpu-node-02 (blue) — ~80W relatively steady -->
|
|
<polyline points="260,429 315,427 370,425 425,430 480,432 535,428 590,426 645,422 700,425 755,428 810,430 865,427 920,423 975,428 1030,430 1085,425 1140,427" fill="none" stroke="#60a5fa" stroke-width="2.5" stroke-linejoin="round"/>
|
|
|
|
<!-- Legend -->
|
|
<line x1="240" y1="553" x2="268" y2="553" stroke="#a78bfa" stroke-width="2.5"/>
|
|
<text x="276" y="558" font-size="12" fill="#e2e4f0">gpu-node-01 (i915, 4x GPU, avg 186W)</text>
|
|
<line x1="540" y1="553" x2="568" y2="553" stroke="#fb923c" stroke-width="2.5"/>
|
|
<text x="576" y="558" font-size="12" fill="#e2e4f0">gpu-node-03 (i915, 8x GPU, avg 124W)</text>
|
|
<line x1="860" y1="553" x2="888" y2="553" stroke="#60a5fa" stroke-width="2.5"/>
|
|
<text x="896" y="558" font-size="12" fill="#e2e4f0">gpu-node-02 (Xe, 2x GPU, avg 80W)</text>
|
|
|
|
<!-- TDP bars section -->
|
|
<rect x="220" y="540" width="948" height="180" rx="8" fill="#1e2130"/>
|
|
<text x="240" y="568" font-size="15" font-weight="600" fill="#ffffff">TDP Utilization — Current</text>
|
|
<!-- Node rows -->
|
|
<!-- gpu-node-01 -->
|
|
<text x="240" y="600" font-size="13" fill="#e2e4f0">gpu-node-01</text>
|
|
<text x="440" y="600" font-size="12" fill="#8b8fa8">186W / 250W TDP</text>
|
|
<rect x="600" y="588" width="500" height="16" rx="8" fill="#2d3148"/>
|
|
<rect x="600" y="588" width="372" height="16" rx="8" fill="#a78bfa"/>
|
|
<text x="1110" y="600" font-size="12" fill="#a78bfa">74%</text>
|
|
<!-- gpu-node-03 -->
|
|
<text x="240" y="634" font-size="13" fill="#e2e4f0">gpu-node-03</text>
|
|
<text x="440" y="634" font-size="12" fill="#8b8fa8">124W / 250W TDP</text>
|
|
<rect x="600" y="622" width="500" height="16" rx="8" fill="#2d3148"/>
|
|
<rect x="600" y="622" width="248" height="16" rx="8" fill="#fb923c"/>
|
|
<text x="1110" y="634" font-size="12" fill="#fb923c">50%</text>
|
|
<!-- gpu-node-02 -->
|
|
<text x="240" y="668" font-size="13" fill="#e2e4f0">gpu-node-02</text>
|
|
<text x="440" y="668" font-size="12" fill="#8b8fa8">80W / 150W TDP</text>
|
|
<rect x="600" y="656" width="500" height="16" rx="8" fill="#2d3148"/>
|
|
<rect x="600" y="656" width="267" height="16" rx="8" fill="#60a5fa"/>
|
|
<text x="1110" y="668" font-size="12" fill="#60a5fa">53%</text>
|
|
<!-- No data node -->
|
|
<text x="240" y="702" font-size="13" fill="#6b7280">gpu-node-04</text>
|
|
<text x="440" y="702" font-size="12" fill="#6b7280">No hwmon data — integrated GPU</text>
|
|
<text x="1110" y="702" font-size="12" fill="#6b7280">n/a</text>
|
|
</svg>
|