socks-manager/templates/dashboard.html

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

{% block content %}
<div class="page-header">
  <h5><i class="bi bi-speedometer2"></i> 仪表盘</h5>
</div>

<!-- 系统状态卡片 -->
<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" style="height:240px"></canvas>
  </div>
</div>

<!-- 最近审计日志 -->
<div class="card mt-3">
  <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 id="recentLogsBody">
        <tr><td colspan="5" class="text-center text-muted py-4">
          加载中...</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,
    animation: false,
    plugins: {
      legend: { labels: { color: '#cbd5e1' } },
    },
    scales: {
      x: { grid: { color: '#262b3d' }, ticks: { color: '#a3acbf', maxTicksLimit: 10 } },
      y: { grid: { color: '#262b3d' }, ticks: { color: '#a3acbf' }, min: 0, max: 100 },
    },
  }
});
// 工具函数
function fmtTs(s) {
  if (!s) return '-';
  // 把 ISO 格式 "2026-07-16T14:33:38.297700" 转成 "2026-07-16 14:33:38"
  return s.replace('T', ' ').slice(0, 19);
}

// 加载最近日志
async function loadRecentLogs() {
  try {
    const r = await fetch('/api/logs?page=1');
    const data = await r.json();
    const logs = data.logs || [];
    const tbody = document.getElementById('recentLogsBody');
    if (logs.length === 0) {
      tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4">暂无日志</td></tr>';
      return;
    }
    tbody.innerHTML = logs.slice(0, 5).map(l => {
      let badgeClass = 'secondary';
      if (l.event.includes('success')) badgeClass = 'success';
      else if (l.event.includes('fail') || l.event.includes('reject')) badgeClass = 'danger';
      else if (l.event.includes('start') || l.event.includes('stop')) badgeClass = 'warning';
      return `<tr>
        <td><small>${fmtTs(l.timestamp)}</small></td>
        <td><span class="badge badge-${badgeClass}">${l.event}</span></td>
        <td>${l.user || '-'}</td>
        <td><code>${l.src_ip || '-'}</code></td>
        <td><small class="text-muted">${l.detail || '-'}</small></td>
      </tr>`;
    }).join('');
  } catch(e) {
    document.getElementById('recentLogsBody').innerHTML =
      '<tr><td colspan="5" class="text-center text-muted py-4">加载失败</td></tr>';
  }
}

// 每 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');

    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) {}
}

loadRecentLogs();
setInterval(refreshMetrics, 10000);
</script>
{% endblock %}