| {% extends "base.html" %} |
| {% block title %}{{ _("System stats") }}{% endblock %} |
| {% block content %} |
| <div class="page-header"> |
| <div> |
| <h1>{{ _("System stats") }}</h1> |
| <div class="subtitle">{{ _("Host load and a per-user breakdown of bots and resource footprint.") }}</div> |
| </div> |
| <div style="display: flex; gap: 8px; align-items: center;"> |
| <a href="/api/admin/stats" target="_blank" class="btn btn-sm" |
| style="background: var(--surface-2); color: var(--text-1);">{{ panel_icon('cpu')|safe }} {{ _("JSON API") }}</a> |
| <button type="button" class="btn btn-sm btn-primary" onclick="location.reload();"> |
| 🔄 {{ _("Refresh") }} |
| </button> |
| </div> |
| </div> |
|
|
| <div class="stats-grid"> |
| <div class="stat-card tone-primary"> |
| <div class="stat-label">{{ panel_icon('users')|safe }} {{ _("Users") }}</div> |
| <div class="stat-value">{{ user_count }}</div> |
| <div class="stat-foot">{{ totals.bots }} {{ ngettext("bot", "bots", totals.bots, count=totals.bots) }} {{ _("total") }}</div> |
| </div> |
| <div class="stat-card tone-success"> |
| <div class="stat-label">{{ panel_icon('check')|safe }} {{ _("Running bots") }}</div> |
| <div class="stat-value">{{ totals.running }}</div> |
| <div class="stat-foot">{{ _("out of") }} {{ totals.bots }}</div> |
| </div> |
| <div class="stat-card tone-accent"> |
| <div class="stat-label">{{ panel_icon('cpu')|safe }} {{ _("Host CPU") }}</div> |
| <div class="stat-value">{{ host.cpu_percent }}%</div> |
| <div class="stat-foot">{{ host.cpu_count }} {{ ngettext("core", "cores", host.cpu_count, count=host.cpu_count) }}</div> |
| </div> |
| <div class="stat-card tone-warning"> |
| <div class="stat-label">{{ panel_icon('db')|safe }} {{ _("Host RAM") }}</div> |
| <div class="stat-value">{{ host.ram_percent }}%</div> |
| <div class="stat-foot">{{ host.ram_used_mb }} / {{ host.ram_total_mb }} MB</div> |
| </div> |
| </div> |
|
|
| {# ======================== Bot status breakdown ======================== #} |
| {# Per-status counts across the whole fleet. Always shows every known |
| status (running / building / error / sleeping / pending / stopped / |
| starting) even when the count is 0 — keeps the column order stable |
| for ops monitoring. #} |
| <div class="card" style="margin-top: 22px;"> |
| <div class="card-body form-section"> |
| <div class="form-section-title"> |
| <span class="ico">{{ panel_icon('bot')|safe }}</span> |
| {{ _("Bot fleet by status") }} |
| </div> |
| <div style="display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px;"> |
| {% for key, label, tone in [ |
| ('running', _('Running'), 'tone-success'), |
| ('building', _('Building'), 'tone-accent'), |
| ('starting', _('Starting'), 'tone-accent'), |
| ('sleeping', _('Sleeping'), 'tone-warning'), |
| ('error', _('Error'), 'tone-error'), |
| ('pending', _('Pending'), ''), |
| ('stopped', _('Stopped'), ''), |
| ] %} |
| {% set count = totals.bots_by_status.get(key, 0) %} |
| <div class="stat-card {{ tone }}" style="flex: 1 1 110px; min-width: 110px; max-width: 160px; padding: 12px 14px;"> |
| <div class="stat-label" style="font-size: 12px;">{{ label }}</div> |
| <div class="stat-value" style="font-size: 22px;">{{ count }}</div> |
| </div> |
| {% endfor %} |
| </div> |
| </div> |
| </div> |
|
|
| {# ======================== Host resource bars ======================== #} |
| <div class="card"> |
| <div class="card-body form-section"> |
| <div class="form-section-title"> |
| <span class="ico">{{ panel_icon('cpu')|safe }}</span> |
| {{ _("Host machine load") }} |
| </div> |
| <div style="display: flex; flex-direction: column; gap: 16px; margin-top: 4px;"> |
| <div> |
| <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 4px;"> |
| <span>{{ _("CPU —") }} {{ host.cpu_count }} {{ ngettext("core", "cores", host.cpu_count, count=host.cpu_count) }}</span> |
| <span>{{ host.cpu_percent }}%</span> |
| </div> |
| <div style="height: 8px; border-radius: 4px; background: var(--surface-2, rgba(255,255,255,.08)); overflow: hidden;"> |
| <div style="height: 100%; width: {{ host.cpu_percent }}%; background: var(--primary); border-radius: 4px;"></div> |
| </div> |
| </div> |
| <div> |
| <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 4px;"> |
| <span>{{ _("RAM") }}</span> |
| <span>{{ host.ram_used_mb }} / {{ host.ram_total_mb }} MB ({{ host.ram_percent }}%)</span> |
| </div> |
| <div style="height: 8px; border-radius: 4px; background: var(--surface-2, rgba(255,255,255,.08)); overflow: hidden;"> |
| <div style="height: 100%; width: {{ host.ram_percent }}%; background: var(--warning, #f59e0b); border-radius: 4px;"></div> |
| </div> |
| </div> |
| <div> |
| <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 4px;"> |
| <span>{{ _("Disk") }} ({{ host.disk_total_mb }} MB {{ _("total") }})</span> |
| <span>{{ host.disk_used_mb }} MB ({{ host.disk_percent }}%)</span> |
| </div> |
| <div style="height: 8px; border-radius: 4px; background: var(--surface-2, rgba(255,255,255,.08)); overflow: hidden;"> |
| <div style="height: 100%; width: {{ host.disk_percent }}%; background: var(--accent-2, #06b6d4); border-radius: 4px;"></div> |
| </div> |
| </div> |
| </div> |
| <p class="muted" style="font-size: 11px; margin: 14px 0 0 0;"> |
| {{ _("This is the machine the panel process itself runs on. Bots deployed in") }} <code>legacy_space</code> {{ _("mode run on their own separate HF Space and aren't reflected in this host's CPU/RAM — only in the per-user table below (allocated quota, not live usage). Bots running in") }} <code>multitenant</code> {{ _("mode (subprocess inside this Space) do show live CPU/RAM in the \"live\" columns.") }} |
| </p> |
| </div> |
| </div> |
|
|
| {# ======================== Per-user table ======================== #} |
| <div class="card flush" style="margin-top: 22px;"> |
| <div class="card-header" style="padding: 16px 18px 0 18px;"> |
| <div> |
| <h2>{{ _("Per-user usage") }}</h2> |
| <div class="desc">{{ _("Bot counts and resource footprint by account.") }}</div> |
| </div> |
| </div> |
| <div class="table-wrap" style="border: 0; border-radius: 0;"> |
| <table class="table"> |
| <thead> |
| <tr> |
| <th>{{ _("User") }}</th> |
| <th>{{ _("Bots") }}</th> |
| <th>{{ _("Running") }}</th> |
| <th>{{ _("By status") }}</th> |
| <th>{{ _("Live CPU") }}<span class="muted" style="font-weight:400; font-size:11px;"> {{ _("(multitenant)") }}</span></th> |
| <th>{{ _("Live RAM") }}<span class="muted" style="font-weight:400; font-size:11px;"> {{ _("(multitenant)") }}</span></th> |
| <th>{{ _("Allocated CPU") }}</th> |
| <th>{{ _("Allocated RAM") }}</th> |
| <th>{{ _("Storage used") }}</th> |
| </tr> |
| </thead> |
| <tbody> |
| {% for row in rows %} |
| <tr> |
| <td> |
| <div style="display: flex; align-items: center; gap: 10px;"> |
| <div class="avatar" style="width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent-2)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; flex: 0 0 26px;"> |
| {{ row.user.username[:2]|upper }} |
| </div> |
| <div style="font-weight: 600;">{{ row.user.username }}</div> |
| </div> |
| </td> |
| <td>{{ row.bots_total }}</td> |
| <td> |
| {% if row.bots_running %} |
| <span class="badge status-success"><span class="dot"></span> {{ row.bots_running }}</span> |
| {% else %} |
| <span class="muted">0</span> |
| {% endif %} |
| </td> |
| <td> |
| {# Compact status pills: 🟢3 🔨1 💤2 etc. #} |
| {% if row.bots_by_status %} |
| <div style="display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px;"> |
| {% for key in ['running', 'building', 'starting', 'sleeping', 'error', 'pending', 'stopped'] %} |
| {% set n = row.bots_by_status.get(key, 0) %} |
| {% if n > 0 %} |
| {% set icon = {'running':'🟢','building':'🔨','starting':'⏳','sleeping':'💤','error':'🔴','pending':'⏸','stopped':'⏹'}[key] %} |
| <span title="{{ key }}" style="background: var(--surface-2); padding: 2px 6px; border-radius: 4px;">{{ icon }}{{ n }}</span> |
| {% endif %} |
| {% endfor %} |
| </div> |
| {% else %} |
| <span class="muted">—</span> |
| {% endif %} |
| </td> |
| <td>{{ row.cpu_live_percent }}%</td> |
| <td>{{ row.ram_live_mb }} MB</td> |
| <td class="mono">{{ row.cpu_alloc_cores }} / {{ row.user.cpu_quota_cores }} {{ _("cores") }}</td> |
| <td class="mono">{{ row.ram_alloc_mb }} / {{ row.user.ram_quota_mb }} MB</td> |
| <td class="mono">{{ row.storage_used_mb }} / {{ row.user.storage_quota_mb }} MB</td> |
| </tr> |
| {% else %} |
| <tr><td colspan="9" class="muted" style="text-align:center; padding: 24px;">{{ _("No users yet.") }}</td></tr> |
| {% endfor %} |
| </tbody> |
| </table> |
| </div> |
| </div> |
| {% endblock %} |
|
|
