Sync from main server - 2026-04-18 18:47:38

platform/templates/pages/dashboard.html

@@ -0,0 +1,108 @@
+{% extends "base.html" %}
+{% block content %}
+{% macro ctr_actions(name) %}
+<button class="ctr-action-btn restart" title="Restart" onclick="ctrAction('{{ name }}','restart',this)">
+  <i class="fas fa-rotate-right"></i>
+</button>
+<button class="ctr-action-btn stop" title="Stop" onclick="ctrAction('{{ name }}','stop',this)">
+  <i class="fas fa-stop"></i>
+</button>
+<button class="ctr-action-btn start" title="Start" onclick="ctrAction('{{ name }}','start',this)">
+  <i class="fas fa-play"></i>
+</button>
+{% endmacro %}
+
+<div class="metrics-row">
+  <div class="metric-card cpu">
+    <div class="metric-label">CPU USAGE</div>
+    <div class="metric-value" id="m-cpu">{{ system.cpu_pct }}<span>%</span></div>
+    <div class="gauge-bar"><div class="gauge-fill" id="g-cpu" style="width:{{ system.cpu_pct }}%"></div></div>
+  </div>
+  <div class="metric-card mem">
+    <div class="metric-label">MEMORY</div>
+    <div class="metric-value" id="m-mem" style="font-size:16px;">{{ system.memory }}</div>
+    <div class="gauge-bar"><div class="gauge-fill" id="g-mem" style="width:{{ system.mem_pct }}%"></div></div>
+  </div>
+  <div class="metric-card disk">
+    <div class="metric-label">DISK /</div>
+    <div class="metric-value" id="m-disk" style="font-size:16px;">{{ system.disk }}</div>
+    <div class="gauge-bar"><div class="gauge-fill" id="g-disk" style="width:{{ system.disk_pct }}%"></div></div>
+  </div>
+  <div class="metric-card load">
+    <div class="metric-label">LOAD AVG</div>
+    <div class="metric-value" id="m-load" style="font-size:16px;">{{ system.load }}</div>
+    <div class="gauge-bar"><div class="gauge-fill" id="g-load" style="width:10%"></div></div>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <div class="card-title"><i class="fas fa-chart-line"></i> Overview</div>
+    <span class="card-meta">Docker {{ system.docker_v }} · {{ main_server }}</span>
+  </div>
+  <div class="stat-row">
+    <div class="stat-card"><div class="stat-number" id="stat-total">{{ containers|length }}</div><div class="stat-label">App Containers</div></div>
+    <div class="stat-card"><div class="stat-number" id="stat-running">{{ running_count }}</div><div class="stat-label">Running</div></div>
+    <div class="stat-card"><div class="stat-number" id="stat-users">{{ users|length }}</div><div class="stat-label">Linux Users</div></div>
+    <div class="stat-card"><div class="stat-number" id="stat-local-bk">{{ backups|length }}</div><div class="stat-label">Local Backups</div></div>
+    <div class="stat-card"><div class="stat-number" id="stat-vm-bk">{{ vm_backups|length }}</div><div class="stat-label">VM Backups</div></div>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <div class="card-title"><i class="fas fa-cubes"></i> App Containers</div>
+    <div style="display:flex;align-items:center;gap:10px;">
+      <span class="card-meta">Auto-refresh 15s</span>
+      <button class="btn btn-ghost btn-sm" onclick="toggleExtraColumns('app')" id="app-toggle-btn">
+        <i class="fas fa-eye"></i> Show more
+      </button>
+    </div>
+  </div>
+  <div style="overflow-x:auto;">
+    <table class="ct-table" id="app-containers-table">
+      <thead>
+        <tr>
+          <th>NAME</th>
+          <th>STATUS</th>
+          <th>CPU</th>
+          <th>MEMORY</th>
+          <th>NET I/O</th>
+          <th class="col-extra app-extra" style="display:none;">DISK I/O</th>
+          <th class="col-extra app-extra" style="display:none;">IMAGE</th>
+          <th class="col-extra app-extra" style="display:none;">PORTS</th>
+          <th>ACTIONS</th>
+        </tr>
+      </thead>
+      <tbody id="app-containers-body">
+        {% for c in containers %}
+        <tr data-ctr="{{ c.name }}">
+          <td class="ct-name">{{ c.name }}</td>
+          <td class="ctr-status-cell" data-ctr="{{ c.name }}">
+            {% if 'Up' in c.status %}
+              <span class="badge badge-run">Running</span>
+            {% else %}
+              <span class="badge badge-stop">Stopped</span>
+            {% endif %}
+          </td>
+          <td><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="cpu">—</span></td>
+          <td>
+            <div class="stat-bar-wrap">
+              <div class="stat-bar-bg"><div class="stat-bar-fill" data-ctr="{{ c.name }}" data-stat="mem_bar" style="width:0%"></div></div>
+              <span class="stat-pct" data-ctr="{{ c.name }}" data-stat="mem_pct">—</span>
+            </div>
+          </td>
+          <td><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="net" style="color:var(--cyan)">—</span></td>
+          <td class="col-extra app-extra" style="display:none;"><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="block" style="color:var(--yellow)">—</span></td>
+          <td class="col-extra app-extra ct-image" style="display:none;">{{ c.image }}</td>
+          <td class="col-extra app-extra ct-ports" style="display:none;">{{ c.ports or '—' }}</td>
+          <td><div class="action-btns">{{ ctr_actions(c.name) }}</div></td>
+        </tr>
+        {% else %}
+        <tr><td colspan="9"><div class="empty-state"><i class="fas fa-inbox"></i>No containers</div></td></tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+{% endblock %}