socks-manager/templates/dashboard.html

{% extends "base.html" %}
{% block title %}仪表盘 · SOCKS Manager{% endblock %}

{% block content %}
<h5 class="mb-3"><i class="bi bi-speedometer2"></i> 仪表盘</h5>

<!-- 系统状态卡片 -->
<div class="row g-3 mb-3">
  <div class="col-md-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-label">CPU 使用率</div>
      <div class="stat-value text-info">{{ "%.1f"|format(s.system.cpu if s.system else 0) }}%</div>
      <div class="stat-sub">实时</div>
    </div>
  </div>
  <div class="col-md-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-label">内存使用</div>
      <div class="stat-value text-warning">{{ s.system.mem_percent if s.system else 0 }}%</div>
      <div class="stat-sub">{{ s.system.mem_used_mb if s.system else 0 }} / {{ s.system.mem_total_mb if s.system else 0 }} MB</div>
    </div>
  </div>
  <div class="col-md-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-label">活跃连接</div>
      <div class="stat-value text-success">{{ s.active_connections }}</div>
      <div class="stat-sub">当前</div>
    </div>
  </div>
  <div class="col-md-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-label">今日日志</div>
      <div class="stat-value">{{ s.today_logs }}</div>
      <div class="stat-sub">条</div>
    </div>
  </div>
</div>

<!-- 业务概览 -->
<div class="row g-3 mb-3">
  <div class="col-md-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-label">代理实例</div>
      <div class="stat-value">{{ s.running_instances }}<span class="text-muted small"> / {{ s.total_instances }}</span></div>
      <div class="stat-sub">运行中 / 总数</div>
    </div>
  </div>
  <div class="col-md-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-label">活跃用户</div>
      <div class="stat-value text-primary">{{ s.active_users }}<span class="text-muted small"> / {{ s.total_users }}</span></div>
      <div class="stat-sub">可用 / 总数</div>
    </div>
  </div>
  <div class="col-md-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-label">入站流量</div>
      <div class="stat-value text-info">{{ "%.1f"|format((s.system.net_bytes_recv or 0) / 1024 / 1024) }} MB</div>
      <div class="stat-sub">累计</div>
    </div>
  </div>
  <div class="col-md-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-label">出站流量</div>
      <div class="stat-value text-info">{{ "%.1f"|format((s.system.net_bytes_sent or 0) / 1024 / 1024) }} MB</div>
      <div class="stat-sub">累计</div>
    </div>
  </div>
</div>

<!-- 实时指标图表 -->
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-graph-up"></i> 实时系统指标（最近 10 分钟）</span>
    <span class="text-muted small">每 10 秒刷新</span>
  </div>
  <div class="card-body">
    <canvas id="metricsChart" height="80"></canvas>
  </div>
</div>

<!-- 最近审计日志 -->
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-journal-text"></i> 最近操作</span>
    <a href="/logs" class="btn btn-sm btn-outline-secondary">查看全部</a>
  </div>
  <div class="card-body p-0">
    <table class="table table-dark table-sm">
      <thead><tr><th>时间</th><th>事件</th><th>用户</th><th>来源IP</th><th>详情</th></tr></thead>
      <tbody>
        {% set logs = namespace(count=0) %}
        {% for _ in range(0) %}{% endfor %}
        <tr><td colspan="5" class="text-center text-muted py-4">
          <a href="/logs">查看审计日志 &rarr;</a></td></tr>
      </tbody>
    </table>
  </div>
</div>

{% endblock %}

{% block extra_script %}
<script>
// 实时指标图表
const ctx = document.getElementById('metricsChart');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [],
    datasets: [
      { label: 'CPU %', data: [], borderColor: '#818cf8', backgroundColor: 'rgba(129,140,248,.1)',
        tension: 0.4, fill: true },
      { label: '内存 %', data: [], borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,.1)',
        tension: 0.4, fill: true },
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { labels: { color: '#94a3b8' } },
    },
    scales: {
      x: { grid: { color: '#1f2335' }, ticks: { color: '#6b7280' } },
      y: { grid: { color: '#1f2335' }, ticks: { color: '#6b7280' }, min: 0, max: 100 },
    },
  }
});

// 每 10 秒刷新
async function refreshMetrics() {
  try {
    const r = await fetch('/api/stats/system');
    const data = await r.json();
    const history = data.history || [];
    if (history.length === 0) return;
    const labels = history.map(h => new Date(h.ts).toLocaleTimeString('zh-CN', {hour:'2-digit',minute:'2-digit',second:'2-digit'}));
    const cpuData = history.map(h => h.cpu);
    const memData = history.map(h => h.mem_percent);
    chart.data.labels = labels;
    chart.data.datasets[0].data = cpuData;
    chart.data.datasets[1].data = memData;
    chart.update('none');

    // 更新 CPU 显示
    const latest = history[history.length-1];
    const cpuEl = document.querySelector('.stat-card .stat-value.text-info');
    if (cpuEl) cpuEl.textContent = latest.cpu.toFixed(1) + '%';
    const memEl = document.querySelectorAll('.stat-card .stat-value.text-warning')[0];
    if (memEl) memEl.textContent = latest.mem_percent + '%';
    const memSub = document.querySelectorAll('.stat-card .stat-sub')[1];
    if (memSub) memSub.textContent = latest.mem_used_mb + ' / ' + latest.mem_total_mb + ' MB';
  } catch(e) {}
}
setInterval(refreshMetrics, 10000);
</script>
{% endblock %}