Function refreshDetail

web/js/app.js:431–478

()

}
function findServer(key){ return S.servers.find(s => s._key === key); }
function refreshDetail(){
  const s = findServer(S.openDetailKey);
  if(!s){ closeDetail(); return; }
  const m = metrics(s);
  const title = $('detailTitle');
  title.innerHTML = `${esc(s.name || '-')} 详情${s.os ? `<span class="os-chip${osClass(s.os)}">${esc(osLabel(s.os))}</span>` : ''}`;
  const modalBox = document.querySelector('#detailModal .modal-box');
  if(modalBox){
    modalBox.classList.remove('high-load');
    modalBox.classList.toggle('alert-critical', m.rowLevel === 'critical');
    modalBox.classList.toggle('alert-warning', m.rowLevel === 'warning');
  }
  const loadSeries = [
    { data: S.loadHist[s._key]?.l1 || [], color:'#8b5cf6', label:'load1' },
    { data: S.loadHist[s._key]?.l5 || [], color:'#10b981', label:'load5' },
    { data: S.loadHist[s._key]?.l15 || [], color:'#f59e0b', label:'load15' }
  ];
  const latencySeries = [
    { data: S.hist[s._key]?.cu || [], color:'#3b82f6', label:'联通' },
    { data: S.hist[s._key]?.ct || [], color:'#10b981', label:'电信' },
    { data: S.hist[s._key]?.cm || [], color:'#f59e0b', label:'移动' }
  ];
  $('detailContent').innerHTML = `
    <div class="detail-grid">
      <section class="detail-section"><h4>身份</h4>
        <div class="kv"><span>节点 / 位置</span><span class="mono">${esc(s.name || '-')} / ${esc(s.location || '-')}</span></div>
        <div class="kv"><span>虚拟化 / 主机</span><span class="mono">${esc(s.type || '-')} / ${esc(s.host || '-')}</span></div>
        <div class="kv"><span>协议 / 在线</span><span class="detail-inline">${protoPill(s)}<span class="mono">${esc(s.uptime || '-')}</span></span></div>
      </section>
      <section class="detail-section resource-section"><h4>资源</h4>
        ${detailResourceHTML(s, m)}
      </section>
      <section class="detail-section"><h4>网络</h4>
        <div class="kv"><span>当前 ↓|↑</span><span class="mono">${humanMinKBFromB(s.network_rx)} | ${humanMinKBFromB(s.network_tx)}</span></div>
        <div class="kv"><span>总流量 ↓|↑</span><span class="mono">${humanMinMBFromB(s.network_in)} | ${humanMinMBFromB(s.network_out)}</span></div>
        <div class="kv"><span>本月 ↓|↑</span><span>${trafficCaps(s, true)}</span></div>
      </section>
      <section class="detail-section"><h4>连接</h4>
        <div class="kv"><span>TCP / UDP</span><span class="mono">${num(s.tcp_count)} / ${num(s.udp_count)}</span></div>
        <div class="kv"><span>进程 / 线程</span><span class="mono">${num(s.process_count)} / ${num(s.thread_count)}</span></div>
        <div class="kv"><span>联通|电信|移动</span><span class="mono">${packetLossLine(s)}</span></div>
      </section>
    </div>
    <section class="detail-section chart-section"><div class="chart-head"><h4>负载趋势</h4>${chartLegend(loadSeries)}</div><canvas id="loadChart" class="detail-chart" height="130"></canvas></section>
    <section class="detail-section chart-section"><div class="chart-head"><h4>三网延迟</h4>${chartLegend(latencySeries)}</div><canvas id="latChart" class="detail-chart" height="150"></canvas></section>`;
  drawLineChart('loadChart', loadSeries, '暂无负载数据');
  drawLineChart('latChart', latencySeries, '暂无延迟数据', 'ms');
}
function closeDetail(){
  $('detailModal').style.display = 'none';
  S.openDetailKey = null;