71 lines
4 KiB
HTML
71 lines
4 KiB
HTML
<div id="overview" class="panel cards" hx-get="/api/overview" hx-trigger="every 2s" hx-swap="outerHTML">
|
|
{% macro bar(pct) %}{% if pct is not none %}<div class="bar"><div class="bar-fill{% if pct > 85 %} hot{% elif pct > 65 %} warm{% endif %}" style="width: {{ pct }}%"></div></div>{% endif %}{% endmacro %}
|
|
{% macro barrow(label, pct, cls) %}{% if pct is not none %}<div class="barrow"><span class="barrow-label">{{ label }}</span><div class="bar"><div class="bar-fill{% if cls %} {{ cls }}{% endif %}{% if pct > 85 %} hot{% elif pct > 65 %} warm{% endif %}" style="width: {{ pct }}%"></div></div></div>{% endif %}{% endmacro %}
|
|
<div class="card">
|
|
<div class="card-label">CPU / GPU</div>
|
|
<div class="card-value">{{ (c.cpu | default(0, true)) | round(1) }}%</div>
|
|
{{ barrow("CPU", c.cpu) }}
|
|
{{ barrow("GPU", c.gpu, "gpu") }}
|
|
{% if c.cpu_temp is not none or c.gpu_temp is not none %}
|
|
<div class="card-sub">
|
|
{% if c.cpu_temp is not none %}CPU {{ c.cpu_temp | round(0) | int }}°C{% endif %}
|
|
{% if c.cpu_temp is not none and c.gpu_temp is not none %} ·{% endif %}
|
|
{% if c.gpu_temp is not none %}GPU {{ c.gpu_temp | round(0) | int }}°C{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="card-sub">load {{ (c.load1 | default(0, true)) | round(2) }} · {{ c.cores }} cores</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">Memory</div>
|
|
<div class="card-value">{{ c.mem_used | humanize }} <span class="muted">/ {{ c.mem_total | humanize }} ({{ (c.mem_pct | default(0, true)) | round(0) | int }}%)</span></div>
|
|
{{ bar(c.mem_pct) }}
|
|
<div class="memrow">
|
|
<div class="memrow-text">Swap {% if c.swap_total %}{{ c.swap_used | humanize }} <span class="muted">/ {{ c.swap_total | humanize }} ({{ (c.swap_pct | default(0, true)) | round(0) | int }}%)</span>{% else %}<span class="muted">none</span>{% endif %}</div>
|
|
{{ bar(c.swap_pct if c.swap_total else none) }}
|
|
</div>
|
|
<div class="memrow">
|
|
<div class="memrow-text">VRAM {% if c.vram_total %}{{ c.vram_used | humanize }} <span class="muted">/ {{ c.vram_total | humanize }} ({{ (c.vram_pct | default(0, true)) | round(0) | int }}%)</span>{% else %}<span class="muted">—</span>{% endif %}</div>
|
|
{{ bar(c.vram_pct if c.vram_total else none) }}
|
|
</div>
|
|
</div>
|
|
{% if c.battery is not none %}
|
|
<div class="card">
|
|
<div class="card-label">Battery</div>
|
|
<div class="card-value">{{ c.battery }}%</div>
|
|
<div class="bar"><div class="bar-fill{% if c.battery < 20 %} low{% elif c.battery < 45 %} warm{% endif %}" style="width: {{ c.battery }}%"></div></div>
|
|
{% if c.ac_online is not none %}
|
|
<div class="card-sub">
|
|
{% if c.ac_online %}on AC{% else %}on battery{% endif %}
|
|
{% set st = (c.battery_status or "") | lower %}
|
|
{% if st == "charging" %} · charging{% elif c.ac_online and st in ("full", "not charging") %} · full{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<div class="card">
|
|
<div class="card-label">Network</div>
|
|
{% if c.net_wifi and c.net_wifi.ssid %}
|
|
<div class="card-value">{{ c.net_wifi.ssid }}</div>
|
|
<div class="card-sub">Wi-Fi via {{ c.net_wifi.iface }}</div>
|
|
{% elif c.net_wifi %}
|
|
<div class="card-value muted">Wi-Fi</div>
|
|
<div class="card-sub">{{ c.net_wifi.iface }} · no connection</div>
|
|
{% elif c.net_ifaces %}
|
|
<div class="card-value muted">wired</div>
|
|
{% else %}
|
|
<div class="card-value muted">—</div>
|
|
{% endif %}
|
|
<div class="card-sub">
|
|
{% for i in c.net_ifaces %}
|
|
<div class="mono small">{{ i.name }}: {% if i.ipv4 %}{{ i.ipv4 | join(", ") }}{% else %}<span class="muted">no IPv4</span>{% endif %}</div>
|
|
{% else %}
|
|
<span class="muted">no active interfaces</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">Uptime</div>
|
|
<div class="card-value">{{ c.uptime }}</div>
|
|
<div class="card-sub">{{ c.hostname }}</div>
|
|
</div>
|
|
</div>
|