节点在线、应用在线、配置在线使用令牌查询
大石头 authored at 2021-12-16 19:49:30
21.03 KiB
Stardust
<!DOCTYPE html>
<html lang="zh-CN" data-scope="full">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>节点看板 · NJ-App-02 · 星尘看板设计稿</title>
  <script>
    /* 首屏前应用主题,避免闪白/闪黑 */
    (function () {
      try {
        var m = localStorage.getItem('sd-theme') || 'auto';
        var d = m === 'auto' ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : m;
        document.documentElement.dataset.theme = d;
        document.documentElement.dataset.themeMode = m;
      } catch (e) { document.documentElement.dataset.theme = 'dark'; }
    })();
  </script>
  <link rel="stylesheet" href="assets/tokens.css">
  <link rel="stylesheet" href="assets/dashboard.css">
</head>
<body>
<div class="sd-topband"></div>

<div class="sd-app">
  <aside class="sd-rail">
    <a class="sd-rail__brand" href="index.html" title="看板设计稿总览">✦</a>
    <a class="sd-rail__item" href="system.html" title="系统级看板">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
        <rect x="3" y="3" width="7" height="7" rx="1.6"/><rect x="14" y="3" width="7" height="7" rx="1.6"/>
        <rect x="3" y="14" width="7" height="7" rx="1.6"/><rect x="14" y="14" width="7" height="7" rx="1.6"/>
      </svg>
      <span>系统</span>
    </a>
    <a class="sd-rail__item" href="project.html" title="项目看板">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
        <path d="M12 3l9 4.5-9 4.5-9-4.5z"/><path d="M3 12l9 4.5 9-4.5"/><path d="M3 16.5L12 21l9-4.5"/>
      </svg>
      <span>项目</span>
    </a>
    <a class="sd-rail__item" href="app.html" title="应用看板">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
        <path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M12 12l8-4.5M12 12v9M12 12L4 7.5"/>
      </svg>
      <span>应用</span>
    </a>
    <a class="sd-rail__item is-active" href="node.html" title="节点看板">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
        <rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="14" width="18" height="6" rx="2"/>
        <circle cx="7" cy="7.5" r="1"/><circle cx="7" cy="17" r="1"/>
      </svg>
      <span>节点</span>
    </a>
    <a class="sd-rail__item" href="wallboard.html" title="大屏模式">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
        <rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/>
      </svg>
      <span>大屏</span>
    </a>
    <a class="sd-rail__item" href="index.html" title="设计说明">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
        <path d="M6 4h9l4 4v12H6z"/><path d="M15 4v4h4M9 12h6M9 16h6"/>
      </svg>
      <span>说明</span>
    </a>
  </aside>

  <div class="sd-main">
    <header class="sd-topbar">
      <a class="brand" href="index.html">
        <span class="brand__mark">✦</span>
        <span class="brand__text">星尘 Stardust</span>
      </a>
      <span class="topbar__sep"></span>
      <button class="project-trigger" type="button">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7l8 6 8-6M4 7h16v10H4z"/></svg>
        电商中台
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      <button class="scope-badge" type="button" data-action="toggle-scope" title="点击切换演示:全量 → 受限 → 无授权">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/>
        </svg>
        <span data-scope-label>全部 12 个项目</span>
      </button>
      <div class="topbar__right">
        <div data-theme-switch></div>
        <span class="topbar__clock" data-clock>00:00:00</span>
        <button class="icon-btn" type="button" data-action="refresh" title="刷新">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></svg>
        </button>
        <div class="avatar" title="当前账号:李海(项目负责人)">李</div>
      </div>
    </header>

    <div class="sd-scroll">
      <div class="sd-content">

        <div class="scope-notice">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
            <path d="M12 3l9 4v6c0 4.6-3.4 7.4-9 8-5.6-.6-9-3.4-9-8V7z"/><path d="M12 9v4M12 16h.01"/>
          </svg>
          <span class="notice--limited">当前为受限数据视角:仅统计你被授权的项目,未授权项目的应用、节点与监控数据不会出现在任何卡片中。</span>
          <span class="notice--none">当前账号未授权任何项目:所有统计卡片已隐藏,请联系管理员分配项目权限。</span>
        </div>

        <div class="offline-banner">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
            <path d="M12 9v2m0 4h.01M10.3 3.9L2.4 17.4A2 2 0 0 0 4.1 20.4h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/>
          </svg>
          <span>该节点已离线 <b>3 小时 12 分钟</b>,最后上报时间 <b>11:06:41</b>;以下为最后一次上报的快照数据,实时指标已停止更新。</span>
          <button class="btn" type="button" style="margin-left:auto">重新检测</button>
        </div>

        <section class="scope-empty">
          <div class="scope-empty__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
              <rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/><path d="M12 14v3"/>
            </svg>
          </div>
          <h2>暂无授权项目</h2>
          <p>你的账号还没有被加入任何项目,无法查看节点看板。请联系项目管理员在「项目成员」中授权。</p>
          <a class="btn btn--primary" href="system.html">返回系统看板</a>
        </section>

        <section class="scope-bar">
          <div>
            <div class="crumbs">
              <a href="index.html">看板总览</a><span class="sep">/</span>
              <a href="project.html">电商中台</a><span class="sep">/</span>
              <span>节点 NJ-App-02</span>
            </div>
          </div>
          <div class="toolbar">
            <div class="segment" role="group" aria-label="时间范围">
              <button type="button">1 小时</button>
              <button type="button" class="is-active">24 小时</button>
              <button type="button">7 天</button>
            </div>
            <button class="btn" type="button" data-action="refresh">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></svg>
              自动刷新
            </button>
            <button class="btn" type="button">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M8 9l-4 3 4 3M16 9l4 3-4 3M13 5l-2 14"/></svg>
              远程命令
            </button>
            <button class="btn btn--primary" type="button">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12M7 10l5 5 5-5"/><path d="M4 19h16"/></svg>
              升级 Agent
            </button>
          </div>
        </section>

        <!-- 节点实体头 -->
        <section class="entity-head">
          <div class="entity-head__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
              <rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="14" width="18" height="6" rx="2"/>
              <circle cx="7" cy="7.5" r="1"/><circle cx="7" cy="17" r="1"/>
            </svg>
          </div>
          <div class="entity-head__main">
            <div class="entity-head__title">
              NJ-App-02
              <span class="entity-head__code">10.0.2.12</span>
              <span class="pill pill--online pill--live" id="nodeStatus"><span class="dot"></span>在线</span>
              <span class="badge">Linux · x64</span>
            </div>
            <div class="entity-head__meta">
              <span class="kv">所属项目 <b><a href="project.html" style="color:var(--sd-link);text-decoration:none">电商中台</a></b></span><span class="split"></span>
              <span class="kv">系统 <b>Ubuntu 22.04 LTS</b></span><span class="split"></span>
              <span class="kv">机房 <b>南京 · 江宁 A2-14</b></span><span class="split"></span>
              <span class="kv">运行 <b>128 天</b></span><span class="split"></span>
              <span class="kv">Agent <b>1.21.4</b></span>
            </div>
          </div>
          <div class="entity-head__actions">
            <button class="btn" type="button">进程管理</button>
            <button class="btn" type="button">防火墙</button>
            <button class="btn" type="button">重启 Agent</button>
            <button class="btn btn--primary" type="button">执行命令</button>
          </div>
        </section>

        <!-- KPI -->
        <section class="kpi-row">
          <div class="sd-kpi sd-kpi--accent">
            <div class="sd-kpi__label">CPU 使用率</div>
            <div class="sd-kpi__value">42<span class="sd-kpi__unit">%</span></div>
            <div class="sd-kpi__foot"><span class="delta delta--flat">8 核</span><span>负载 1.82</span></div>
            <div class="sd-kpi__spark" data-spark="nodeSpark"></div>
          </div>
          <div class="sd-kpi">
            <div class="sd-kpi__label">内存使用率</div>
            <div class="sd-kpi__value">68<span class="sd-kpi__unit">%</span></div>
            <div class="sd-kpi__foot"><span>10.9 GB / 16 GB</span></div>
            <div class="sd-kpi__spark" data-spark="nodeSpark" data-spark-color="var(--sd-color-accent)"></div>
          </div>
          <div class="sd-kpi">
            <div class="sd-kpi__label">磁盘使用率</div>
            <div class="sd-kpi__value">55<span class="sd-kpi__unit">%</span></div>
            <div class="sd-kpi__foot"><span>/data 分区 72%</span></div>
          </div>
          <div class="sd-kpi">
            <div class="sd-kpi__label">系统负载</div>
            <div class="sd-kpi__value">1.82</div>
            <div class="sd-kpi__foot"><span class="delta delta--good">低于 8 核阈值</span></div>
          </div>
          <div class="sd-kpi sd-kpi--alert">
            <div class="sd-kpi__label">温度</div>
            <div class="sd-kpi__value">47<span class="sd-kpi__unit">°C</span></div>
            <div class="sd-kpi__foot"><span class="delta delta--good">正常范围</span><span>阈值 75°C</span></div>
          </div>
          <div class="sd-kpi sd-kpi--online">
            <div class="sd-kpi__label">网络吞吐</div>
            <div class="sd-kpi__value">12.4<span class="sd-kpi__unit">MB/s</span></div>
            <div class="sd-kpi__foot"><span>上行 8.6 · TCP 1,284</span></div>
            <div class="sd-kpi__spark" data-spark="systemSpark" data-spark-color="var(--sd-color-online)"></div>
          </div>
        </section>

        <section class="sd-grid">

          <!-- 资源时序 -->
          <div class="sd-card col-16">
            <div class="sd-card__head">
              <h2 class="sd-card__title">资源时序</h2>
              <div class="legend">
                <span><i class="l-brand"></i>CPU</span>
                <span><i class="l-accent"></i>内存</span>
                <span><i class="l-warn"></i>磁盘</span>
              </div>
            </div>
            <div id="nodeTrend" class="chart chart-lg"></div>
          </div>

          <!-- 健康评分 -->
          <div class="sd-card col-8">
            <div class="sd-card__head">
              <h2 class="sd-card__title">健康评分</h2>
              <span class="sd-card__hint">综合 89 分 · 良好</span>
            </div>
            <div id="nodeRadar" class="chart chart-lg"></div>
          </div>

          <!-- 网络质量 -->
          <div class="sd-card col-8">
            <div class="sd-card__head">
              <h2 class="sd-card__title">网络质量</h2>
              <span class="sd-card__hint">近 15 分钟均值</span>
            </div>
            <div class="gauge-pair">
              <div id="gaugeIntranet" style="height:118px"></div>
              <div id="gaugeInternet" style="height:118px"></div>
            </div>
            <div class="code-list" style="margin-top:2px">
              <div class="code-row"><span class="grow">网关延迟 / 丢包</span><b style="color:var(--sd-text-regular);font-weight:500">1.2 ms · 0%</b></div>
              <div class="code-row"><span class="grow">DNS 延迟 / 丢包</span><b style="color:var(--sd-text-regular);font-weight:500">8 ms · 0.2%</b></div>
              <div class="code-row"><span class="grow">服务器延迟 / 丢包</span><b style="color:var(--sd-text-regular);font-weight:500">24 ms · 0.5%</b></div>
            </div>
          </div>

          <!-- 磁盘分区 -->
          <div class="sd-card col-8">
            <div class="sd-card__head">
              <h2 class="sd-card__title">磁盘分区</h2>
              <span class="sd-card__hint">/data 预计 12 天写满</span>
            </div>
            <div style="display:flex;flex-direction:column;gap:16px;margin-top:8px">
              <div>
                <div class="meter-row" style="grid-template-columns:64px 1fr 76px"><span>/data</span><div class="meter meter--warn"><i style="width:72%"></i></div><b>72%</b></div>
                <div class="muted" style="font-size:10.5px;color:var(--sd-text-secondary);margin-top:5px">360 GB / 500 GB · ext4</div>
              </div>
              <div>
                <div class="meter-row" style="grid-template-columns:64px 1fr 76px"><span>/</span><div class="meter meter--ok"><i style="width:55%"></i></div><b>55%</b></div>
                <div class="muted" style="font-size:10.5px;color:var(--sd-text-secondary);margin-top:5px">42 GB / 80 GB · ext4</div>
              </div>
              <div>
                <div class="meter-row" style="grid-template-columns:64px 1fr 76px"><span>/var/log</span><div class="meter meter--ok"><i style="width:38%"></i></div><b>38%</b></div>
                <div class="muted" style="font-size:10.5px;color:var(--sd-text-secondary);margin-top:5px">7.6 GB / 20 GB · ext4</div>
              </div>
            </div>
          </div>

          <!-- 进程 Top -->
          <div class="sd-card col-8">
            <div class="sd-card__head">
              <h2 class="sd-card__title">进程 Top</h2>
              <span class="sd-card__hint">按 CPU 排序</span>
            </div>
            <div id="processChart" class="chart chart-md"></div>
          </div>

          <!-- 已部署应用 -->
          <div class="sd-card col-12">
            <div class="sd-card__head">
              <h2 class="sd-card__title">已部署应用</h2>
              <a class="link" href="app.html">应用看板</a>
            </div>
            <div class="table-wrap">
              <table class="sd-table">
                <thead>
                  <tr><th>应用</th><th>版本</th><th>部署时间</th><th class="num">实例端口</th><th>状态</th></tr>
                </thead>
                <tbody>
                  <tr class="row-link" onclick="location.href='app.html'">
                    <td class="strong">StarServer 服务端</td><td class="mono">v3.4.2</td><td class="muted">2026-10-27 20:18</td><td class="num">6600</td>
                    <td><span class="pill pill--online"><span class="dot"></span>运行中</span></td>
                  </tr>
                  <tr class="row-link" onclick="location.href='app.html'">
                    <td class="strong">订单服务</td><td class="mono">v2.8.1</td><td class="muted">2026-10-30 12:32</td><td class="num">5001</td>
                    <td><span class="pill pill--online"><span class="dot"></span>运行中</span></td>
                  </tr>
                  <tr>
                    <td class="strong">网关集群</td><td class="mono">v1.9.0</td><td class="muted">2026-10-06 09:40</td><td class="num">—</td>
                    <td><span class="pill pill--muted">已停止</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="legend" style="margin-top:10px">
              <span>磁盘 I/O:读取 42 MB/s · 写入 18 MB/s</span>
              <span>IOPS:640</span>
              <span>TCP:ESTABLISHED 1,284 · TIME_WAIT 86</span>
            </div>
          </div>

          <!-- 操作历史 -->
          <div class="sd-card col-6">
            <div class="sd-card__head">
              <h2 class="sd-card__title">操作历史</h2>
              <a class="link" href="#">指令记录</a>
            </div>
            <ul class="timeline">
              <li class="is-ok"><div class="tl-title">远程命令 df -h 执行成功</div><div class="tl-meta">操作人 陈星 · 输出已归档 · 3 小时前</div></li>
              <li class="is-warn"><div class="tl-title">CPU 峰值 92% 告警</div><div class="tl-meta">持续 4 分钟 · 已自动恢复 · 1 天前</div></li>
              <li><div class="tl-title">StarAgent 升级至 1.21.4</div><div class="tl-meta">灰度批次 batch-02 · 2 天前</div></li>
              <li class="is-ok"><div class="tl-title">重启 StarAgent 服务</div><div class="tl-meta">操作人 李海 · 耗时 6 秒 · 5 天前</div></li>
            </ul>
          </div>

          <!-- 节点告警 -->
          <div class="sd-card col-6">
            <div class="sd-card__head">
              <h2 class="sd-card__title">节点告警</h2>
              <a class="link" href="#">全部告警</a>
            </div>
            <div class="event-list event-list--wrap" style="max-height:214px">
              <div class="event event--warn">
                <div class="event__bar"></div>
                <div><div class="event__title"><b>磁盘 /data 使用率 72%</b></div><div class="event__meta">超过阈值 70% · 未确认</div></div>
                <div class="event__time">3 小时前</div>
              </div>
              <div class="event event--warn">
                <div class="event__bar"></div>
                <div><div class="event__title"><b>CPU 使用率峰值 92%</b></div><div class="event__meta">持续 4 分钟 · 已恢复</div></div>
                <div class="event__time">1 天前</div>
              </div>
              <div class="event event--bad">
                <div class="event__bar"></div>
                <div><div class="event__title"><b>心跳抖动 2 次</b></div><div class="event__meta">上报间隔 &gt; 120s · 已自动重连</div></div>
                <div class="event__time">昨天</div>
              </div>
            </div>
          </div>

        </section>

        <footer class="page-foot">
          <span>数据来源:Nodes/Node · Nodes/NodeOnline · Nodes/NodeStat · Nodes/NodeData · Deployment/AppDeployNode · Monitors/AlarmRecord</span>
          <span>节点看板设计稿 · <a href="node.html?state=offline">查看离线态</a></span>
        </footer>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script src="assets/theme.js"></script>
<script src="assets/mock.js"></script>
<script src="assets/charts.js"></script>
<script>
(function () {
  const params = new URLSearchParams(location.search);
  if (params.get('state') === 'offline') {
    document.documentElement.dataset.nodeState = 'offline';
    const pill = document.getElementById('nodeStatus');
    pill.className = 'pill pill--offline';
    pill.innerHTML = '<span class="dot"></span>离线';
  }

  /* 资源时序 */
  SDCharts.multiLine('nodeTrend', {
    categories: SD.hours,
    interval: 3,
    max: 100,
    unit: '%',
    series: [
      { name: 'CPU', data: SD.series.nodeCpu, color: SDCharts.palette.brand, area: true },
      { name: '内存', data: SD.series.nodeMemory, color: SDCharts.palette.accent },
      { name: '磁盘', data: SD.series.nodeDisk, color: SDCharts.palette.alert }
    ]
  });

  /* 健康雷达 */
  SDCharts.radar('nodeRadar', {
    indicators: [
      { name: 'CPU', max: 100 },
      { name: '内存', max: 100 },
      { name: '磁盘', max: 100 },
      { name: '网络', max: 100 },
      { name: '温度', max: 100 },
      { name: '稳定性', max: 100 }
    ],
    value: [82, 72, 65, 88, 90, 95],
    name: '健康评分'
  });

  /* 网络质量仪表 */
  SDCharts.gauge('gaugeIntranet', { value: 92, name: '内网评分', color: SDCharts.palette.online });
  SDCharts.gauge('gaugeInternet', { value: 86, name: '外网评分', color: SDCharts.palette.accent });

  /* 进程 Top */
  SDCharts.barH('processChart', {
    items: SD.nodeProcesses.map(function (p) {
      return { name: p.name, value: p.cpu };
    }),
    unit: '%'
  });
})();
</script>
</body>
</html>