Gecko [ sacpinlaptop.com ]

Name	Size	Permission	Date
json	[ DIR ]	drwxr-xr-x	2026-07-26 09:09
check.sh	38.53 KB	-rwxr-xr-x	2026-07-26 09:09
disks.html	58.16 KB	-rw-r--r--	2026-07-26 09:09
history.db	5 KB	-rw-r--r--	2026-07-26 09:09
storcli.log	1.2 MB	-rw-r--r--	2026-08-07 02:04
storcli64	8.18 MB	-rwxr-xr-x	2026-07-26 08:56

Rename

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>checkdisk2 · Disk Fleet Dashboard</title>
<style>
:root{
  --bg:#10131c; --panel:#171b28; --panel2:#1d2334; --line:#262d42;
  --txt:#e8ebf4; --dim:#8b93ad; --faint:#5a627e;
  --ok:#39d0c3; --warn:#ffb454; --crit:#ff5470; --err:#9aa0b5;
  --ok-bg:rgba(57,208,195,.10); --warn-bg:rgba(255,180,84,.12); --crit-bg:rgba(255,84,112,.12);
  --mono:ui-monospace,'Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:#333c58 var(--bg)}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:14px;line-height:1.5;min-height:100vh}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--ok);outline-offset:2px;border-radius:4px}

/* ===== Topbar ===== */
.topbar{position:sticky;top:0;z-index:20;background:rgba(16,19,28,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:14px 22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font-size:17px;font-weight:700;letter-spacing:.4px}
.brand h1 em{font-style:normal;color:var(--ok)}
.brand .gen{font-family:var(--mono);font-size:11px;color:var(--faint)}
.spacer{flex:1}
.search{background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--txt);
  padding:7px 12px;font-family:var(--mono);font-size:12.5px;width:250px}
.search::placeholder{color:var(--faint)}
.fchip{padding:6px 13px;border-radius:20px;border:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.fchip.on{color:var(--txt);border-color:currentColor}
.fchip.on.f-crit{color:var(--crit);background:var(--crit-bg)}
.fchip.on.f-warn{color:var(--warn);background:var(--warn-bg)}
.fchip.on.f-all{color:var(--ok);background:var(--ok-bg)}

/* ===== Stats ===== */
.wrap{max-width:1280px;margin:0 auto;padding:22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat .n{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1.1}
.stat .l{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;margin-top:3px}
.stat.s-crit .n{color:var(--crit)} .stat.s-warn .n{color:var(--warn)} .stat.s-ok .n{color:var(--ok)}
.stat.s-err .n{color:var(--err)}

/* ===== Problem strip ===== */
.problems{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-left:3px solid var(--crit);border-radius:12px;padding:14px 18px;margin-bottom:24px}
.problems h2{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.pitem{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;padding:7px 10px;margin:0 -10px;
  border-radius:8px;width:calc(100% + 20px);text-align:left}
.pitem:hover{background:rgba(255,255,255,.04)}
.pitem .st{font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:4px}
.st.CRITICAL{color:var(--crit);background:var(--crit-bg)} .st.WARNING{color:var(--warn);background:var(--warn-bg)}
.st.OK{color:var(--ok);background:var(--ok-bg)}
.pitem .h{font-family:var(--mono);font-weight:600}
.pitem .d{font-family:var(--mono);color:var(--ok)}
.pitem .w{color:var(--dim);font-size:12.5px}
.allok{border-left-color:var(--ok);color:var(--dim)}
.allok b{color:var(--ok)}

/* ===== Server cards + drive bays (signature) ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px}
.server{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .15s}
.server:hover{border-color:#354063}
.shead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),transparent)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.OK{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.WARNING{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.dot.CRITICAL{background:var(--crit);box-shadow:0 0 9px var(--crit)}
.shead .ip{font-family:var(--mono);font-size:14.5px;font-weight:700}
.shead .meta{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint);text-align:right}
.bays{display:flex;flex-wrap:wrap;gap:9px;padding:15px 16px}
/* Mỗi ổ = 1 "khay" như mặt trước máy chủ */
.bay{width:104px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:9px 9px 7px;text-align:left;position:relative;transition:transform .12s,border-color .12s}
.bay:hover{transform:translateY(-2px)}
.bay.OK{border-bottom:3px solid var(--ok)}
.bay.WARNING{border-bottom:3px solid var(--warn);background:linear-gradient(180deg,var(--panel2),rgba(255,180,84,.05))}
.bay.CRITICAL{border-bottom:3px solid var(--crit);background:linear-gradient(180deg,var(--panel2),rgba(255,84,112,.07))}
.bay .led{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%}
.bay.OK .led{background:var(--ok)}
.bay.WARNING .led{background:var(--warn)}
.bay.CRITICAL .led{background:var(--crit);animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.bay .led{animation:none!important}.bay:hover{transform:none}}
.bay svg{width:20px;height:20px;display:block;margin-bottom:5px;color:var(--dim)}
.bay.WARNING svg{color:var(--warn)} .bay.CRITICAL svg{color:var(--crit)}
.bay .dv{font-family:var(--mono);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bay .cap{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.bay .mnt{font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.bay.hide{display:none}
.server.hide{display:none}
.host-errs{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--err);
  border-radius:12px;padding:14px 18px}
.host-errs h2{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.host-errs div{font-family:var(--mono);font-size:12.5px;color:var(--dim);padding:3px 0}
.host-errs b{color:var(--txt)}
.empty{color:var(--faint);text-align:center;padding:60px 0;font-family:var(--mono)}

/* ===== Modal ===== */
.overlay{position:fixed;inset:0;background:rgba(8,10,16,.72);backdrop-filter:blur(3px);z-index:50;
  display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto}
.overlay.open{display:flex}
.modal{background:var(--panel);border:1px solid #313a58;border-radius:16px;max-width:860px;width:100%;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.mhead{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.mhead svg{width:26px;height:26px;color:var(--dim);flex:none}
.mhead .t{font-family:var(--mono);font-size:16px;font-weight:700}
.mhead .s{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.mclose{margin-left:auto;font-size:22px;color:var(--dim);padding:2px 10px;border-radius:8px}
.mclose:hover{color:var(--txt);background:var(--panel2)}
.mbody{padding:18px 20px 22px}
.msec{margin-bottom:18px}
.msec h3{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:9px;
  padding-bottom:5px;border-bottom:1px dashed var(--line)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 20px}
.kv .row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0}
.kv .k{color:var(--dim)}
.kv .v{font-family:var(--mono);text-align:right;word-break:break-all}
.kv .v.bad{color:var(--crit);font-weight:700}
.kv .v.warnv{color:var(--warn);font-weight:700}
.wlist li{list-style:none;font-size:13px;color:var(--warn);padding:4px 0 4px 20px;position:relative}
.wlist li::before{content:"⚠";position:absolute;left:0}
.wlist li.crit{color:var(--crit)}
details.raw{background:var(--bg);border:1px solid var(--line);border-radius:10px}
details.raw summary{cursor:pointer;padding:10px 14px;font-family:var(--mono);font-size:12px;color:var(--dim)}
details.raw pre{padding:0 14px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.55;
  color:#b9c2dd;overflow-x:auto;max-height:420px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}
/* ===== Charts (lich su theo thoi gian) ===== */
.mchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mchip{padding:4px 11px;border-radius:14px;border:1px solid var(--line);font-family:var(--mono);
  font-size:11px;color:var(--dim)}
.mchip:hover{border-color:#3a4568}
.mchip.on{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.chartbox{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 8px 4px}
.chartbox canvas{width:100%;height:220px;display:block}
.chartnote{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--dim);
  padding:8px 6px 4px}
.chartnote b{color:var(--txt)}
.nohist{color:var(--faint);font-size:12.5px;padding:8px 2px}
@media(max-width:640px){.grid{grid-template-columns:1fr}.search{width:100%}.topbar{padding:12px 14px}.wrap{padding:14px}}
</style>
</head>
<body>
<div class="topbar">
  <div class="brand">
    <h1>checkdisk<em>2</em> · Disk Fleet</h1>
    <span class="gen">build 2026-07-26 16:01:12</span>
  </div>
  <div class="spacer"></div>
  <input id="q" class="search" type="search" placeholder="tìm host / device / model / serial…" aria-label="Tìm kiếm">
  <button class="fchip f-all on"  data-f="ALL">Tất cả</button>
  <button class="fchip f-warn" data-f="WARNING">Warning</button>
  <button class="fchip f-crit" data-f="CRITICAL">Critical</button>
</div>

<div class="wrap">
  <div class="stats" id="stats"></div>
  <div id="problems"></div>
  <div class="grid" id="grid"></div>
  <div id="hostErrs"></div>
  <div class="empty" id="empty" style="display:none">— không có ổ nào khớp bộ lọc —</div>
</div>

/* ---------- icons: HDD / SSD / NVMe ---------- */
var ICONS = {
  HDD: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.2"/><path d="M12 8.8V3.2M17.6 17.4l3 3"/></svg>',
  SSD: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3.5" y="6" width="17" height="12" rx="2"/><path d="M7 18v2.5M12 18v2.5M17 18v2.5M7 9.5h6M7 12.5h10"/></svg>',
  NVMe:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="2.5" y="8" width="19" height="8" rx="1.5"/><path d="M5.5 16v2M8.5 16v2M11.5 16v2M14.5 16v2M17.5 16v2"/><path d="M13 10l-2.2 2.2h2.6L11 14.6" stroke-width="1.4"/></svg>'
};
function iconFor(d){ return ICONS[d.type] || ICONS.HDD; }
function esc(s){ return String(s==null?'—':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

/* ---------- stats ---------- */
(function(){
  var t = DATA.totals;
  var el = document.getElementById('stats');
  var cells = [
    ['s-plain', t.hosts,   'Server'],
    ['s-plain', t.disks,   'Tổng ổ đĩa'],
    ['s-crit',  t.critical,'Critical'],
    ['s-warn',  t.warning, 'Warning'],
    ['s-ok',    t.ok,      'Khoẻ mạnh'],
    ['s-err',   t.host_errors, 'Node lỗi thu thập']
  ];
  el.innerHTML = cells.map(function(c){
    return '<div class="stat '+c[0]+'"><div class="n">'+c[1]+'</div><div class="l">'+c[2]+'</div></div>';
  }).join('');
})();

/* ---------- problem strip ---------- */
(function(){
  var el = document.getElementById('problems');
  if (!DATA.problems.length){
    el.innerHTML = '<div class="problems allok"><b>✓ Toàn bộ ổ đĩa khoẻ mạnh.</b> Không có cảnh báo nào trên '+DATA.totals.hosts+' server.</div>';
    return;
  }
  var rows = DATA.problems.map(function(p, i){
    return '<button class="pitem" data-open="'+esc(p.host)+'|'+esc(p.serial)+'">'
      + '<span class="st '+p.status+'">'+p.status+'</span>'
      + '<span class="h">'+esc(p.host)+'</span>'
      + '<span class="d">'+esc(p.device)+'</span>'
      + '<span class="w">'+esc(p.model)+' · '+esc((p.mounts||[]).join(', ')||'không mount')+' — '+esc(p.warnings.join('; '))+'</span>'
      + '</button>';
  }).join('');
  el.innerHTML = '<div class="problems"><h2>⚠ Cần chú ý — '+DATA.problems.length+' ổ có vấn đề</h2>'+rows+'</div>';
})();

/* ---------- server grid ---------- */
(function(){
  var g = document.getElementById('grid');
  g.innerHTML = DATA.hosts.map(function(h, hi){
    var bays = h.disks.map(function(d, di){
      var mounts = (d.mountpoints||[]).join(',');
      var hay = [h.host, d.device_name, d.model_name, d.serial_number, mounts, d.slot].join(' ').toLowerCase();
      return '<button class="bay '+(d.status||'OK')+'" data-h="'+hi+'" data-d="'+di+'" data-st="'+(d.status||'OK')+'"'
        + ' data-hay="'+esc(hay)+'" title="'+esc(d.model_name)+'">'
        + '<span class="led"></span>' + iconFor(d)
        + '<div class="dv">'+esc(d.device_name || ('slot '+d.slot))+'</div>'
        + '<div class="cap">'+esc(d.capacity_human || '—')+' · '+esc(d.type||'?')+'</div>'
        + '<div class="mnt">'+esc(mounts || '· không mount')+'</div>'
        + '</button>';
    }).join('');
    var c = h.counts;
    return '<div class="server" data-worst="'+h.worst+'">'
      + '<div class="shead"><span class="dot '+h.worst+'"></span>'
      + '<span class="ip">'+esc(h.host)+'</span>'
      + '<span class="meta">'+h.disks.length+' ổ · '+(c.CRITICAL?c.CRITICAL+' crit · ':'')+(c.WARNING?c.WARNING+' warn':'ok')
      + (h.updated_at?'<br>cập nhật '+h.updated_at:'')+'</span></div>'
      + '<div class="bays">'+bays+'</div></div>';
  }).join('');
})();

/* ---------- host errors ---------- */
(function(){
  if (!DATA.host_errors.length) return;
  document.getElementById('hostErrs').innerHTML =
    '<div class="host-errs"><h2>⛔ Node không thu thập được dữ liệu</h2>'
    + DATA.host_errors.map(function(e){ return '<div><b>'+esc(e.host)+'</b> — '+esc(e.reason)+'</div>'; }).join('')
    + '</div>';
})();

/* ---------- modal ---------- */
var overlay = document.getElementById('overlay'), modal = document.getElementById('modal');
function kvRow(k, v, cls){ return '<div class="row"><span class="k">'+esc(k)+'</span><span class="v '+(cls||'')+'">'+esc(v)+'</span></div>'; }
function openDisk(h, d){
  var warnKeys = {};
  (d.warnings||[]).forEach(function(w){ var m = w.match(/^([a-z_]+)/); if(m) warnKeys[m[1]] = 1; });
  var basic = ''
    + kvRow('Server', h.host)
    + kvRow('Device', d.device_name)
    + kvRow('Slot', d.slot)
    + kvRow('Mountpoints', (d.mountpoints||[]).join(', ') || '—')
    + kvRow('Model', d.model_name)
    + kvRow('Serial', d.serial_number)
    + kvRow('Loại', (d.protocol||'')+' / '+(d.type||''))
    + kvRow('Dung lượng', d.capacity_human)
    + kvRow('Nhiệt độ', d.temperature_c!=null ? d.temperature_c+' °C' : '—', (d.temperature_c>=60?'warnv':''))
    + kvRow('Power-on hours', d.power_on_hours!=null ? Number(d.power_on_hours).toLocaleString()+' h (~'+(d.power_on_hours/8760).toFixed(1)+' năm)' : '—')
    + kvRow('RAID member', d.is_raid_member ? 'có' : 'không')
    + kvRow('SMART overall', d.smart_overall_passed===true?'PASSED':(d.smart_overall_passed===false?'FAILED':'—'), d.smart_overall_passed===false?'bad':'');
  var health = Object.keys(d.health||{}).map(function(k){
    var v = d.health[k];
    var cls = warnKeys[k] ? (d.status==='CRITICAL'?'bad':'warnv') : '';
    return kvRow(k, v===null?'—':v, cls);
  }).join('') || '<div class="row"><span class="k">—</span></div>';
  var warns = (d.warnings&&d.warnings.length)
    ? '<ul class="wlist">'+d.warnings.map(function(w){ return '<li class="'+(d.status==='CRITICAL'?'crit':'')+'">'+esc(w)+'</li>'; }).join('')+'</ul>'
    : '<div style="color:var(--ok);font-size:13px">✓ Không có cảnh báo</div>';
  var raw = d.smartctl_full
    ? '<details class="raw"><summary>▸ Full smartctl JSON'+(d.smartctl_parse_mode?' (parse từ text — smartctl cũ)':'')+'</summary><pre>'+esc(JSON.stringify(d.smartctl_full,null,2))+'</pre></details>'
    : '<div style="color:var(--faint);font-size:12.5px">Không có dữ liệu full trong file JSON của node này.</div>';
  var rawTxt = d.smartctl_text_raw
    ? '<details class="raw" style="margin-top:8px"><summary>▸ Nguyên văn output smartctl (text)</summary><pre>'+esc(d.smartctl_text_raw)+'</pre></details>' : '';

/* ----- Bieu do lich su ----- */
  var chartSec;
  var hist = d.history || [];
  if (hist.length >= 2) {
    var metrics = chartMetrics(d);
    chartSec = '<div class="msec"><h3>Biểu đồ theo thời gian · '+hist.length+' lần đo</h3>'
      + '<div class="mchips">'
      + metrics.map(function(m,i){ return '<button class="mchip'+(i===0?' on':'')+'" data-m="'+m[0]+'">'+esc(m[1])+'</button>'; }).join('')
      + '</div><div class="chartbox"><canvas id="chart"></canvas>'
      + '<div class="chartnote" id="chartnote"></div></div></div>';
  } else {
    chartSec = '<div class="msec"><h3>Biểu đồ theo thời gian</h3>'
      + '<div class="nohist">Chưa đủ dữ liệu lịch sử (cần ≥ 2 lần build có SQLite). Hiện có: '+hist.length+' điểm.</div></div>';
  }

modal.innerHTML = ''
    + '<div class="mhead">'+iconFor(d)
    + '<div><div class="t">'+esc(d.device_name||('slot '+d.slot))+' <span class="st '+(d.status||'OK')+'">'+(d.status||'OK')+'</span></div>'
    + '<div class="s">'+esc(h.host)+' · '+esc(d.model_name)+'</div></div>'
    + '<button class="mclose" aria-label="Đóng" onclick="closeModal()">×</button></div>'
    + '<div class="mbody">'
    + '<div class="msec"><h3>Thông tin cơ bản</h3><div class="kv">'+basic+'</div></div>'
    + '<div class="msec"><h3>Chỉ số sức khoẻ ('+esc(d.protocol||'')+')</h3><div class="kv">'+health+'</div></div>'
    + chartSec
    + '<div class="msec"><h3>Cảnh báo</h3>'+warns+'</div>'
    + '<div class="msec"><h3>Dữ liệu gốc</h3>'+raw+rawTxt+'</div>'
    + '</div>';
  overlay.classList.add('open');
  document.body.style.overflow='hidden';

if (hist.length >= 2) {
    var curMetric = chartMetrics(d)[0][0];
    drawMetric(d, curMetric);
    modal.querySelectorAll('.mchip').forEach(function(c){
      c.addEventListener('click', function(){
        modal.querySelectorAll('.mchip').forEach(function(x){ x.classList.remove('on'); });
        c.classList.add('on');
        drawMetric(d, c.dataset.m);
      });
    });
  }
}

/* ---------- chart engine (canvas thuan, khong CDN) ---------- */
var METRIC_LABELS = {
  temperature:'Nhiệt độ (°C)', power_on_hours:'Power-on hours',
  reallocated_sector_ct:'Reallocated sectors', current_pending_sector:'Pending sectors',
  offline_uncorrectable:'Offline uncorrectable', udma_crc_error_count:'UDMA CRC errors',
  wear_leveling_count:'Wear leveling', ssd_life_left_pct:'SSD life left (%)',
  spin_retry_count:'Spin retry', reported_uncorrect:'Reported uncorrect',
  grown_defect_list:'Grown defects', uncorrected_errors_total:'Uncorrected errors (total)',
  uncorrected_errors_read:'Uncorrected read', uncorrected_errors_write:'Uncorrected write',
  non_medium_error_count:'Non-medium errors',
  percentage_used:'% tuổi thọ đã dùng', available_spare:'Available spare (%)',
  media_errors:'Media errors', unsafe_shutdowns:'Unsafe shutdowns', num_err_log_entries:'Error log entries',
  critical_warning:'Critical warning'
};
function metricSeries(d, key){
  return (d.history||[]).map(function(s){
    var v = key==='temperature' ? s.temp : (key==='power_on_hours' ? s.poh : (s.h||{})[key]);
    return {t:s.t, v:(typeof v==='number' && isFinite(v)) ? v : null};
  }).filter(function(p){ return p.v !== null; });
}
function chartMetrics(d){
  var keys = ['temperature'];
  var seen = {};
  (d.history||[]).forEach(function(s){ Object.keys(s.h||{}).forEach(function(k){ seen[k]=1; }); });
  Object.keys(seen).forEach(function(k){ keys.push(k); });
  keys.push('power_on_hours');
  // Chi giu metric thuc su co so lieu
  return keys.filter(function(k){ return metricSeries(d,k).length >= 2; })
             .map(function(k){ return [k, METRIC_LABELS[k]||k]; });
}
function fmtDate(ts){ var x=new Date(ts*1000); return (x.getDate())+'/'+(x.getMonth()+1); }
function fmtDateFull(ts){ var x=new Date(ts*1000); return x.getDate()+'/'+(x.getMonth()+1)+' '+String(x.getHours()).padStart(2,'0')+':'+String(x.getMinutes()).padStart(2,'0'); }
function drawMetric(d, key){
  var pts = metricSeries(d, key);
  var cv = document.getElementById('chart'); if (!cv) return;
  var dpr = window.devicePixelRatio || 1;
  var W = cv.clientWidth, H = 220;
  cv.width = W*dpr; cv.height = H*dpr;
  var ctx = cv.getContext('2d'); ctx.scale(dpr, dpr);
  ctx.clearRect(0,0,W,H);
  var css = getComputedStyle(document.documentElement);
  var C_LINE = css.getPropertyValue('--ok').trim(), C_GRID = 'rgba(139,147,173,.15)',
      C_TXT = css.getPropertyValue('--dim').trim(), C_WARN = css.getPropertyValue('--warn').trim(),
      C_CRIT = css.getPropertyValue('--crit').trim();
  // Metric loi (counter): tang = xau -> to mau duong theo trang thai cuoi
  var isCounter = ['reallocated_sector_ct','current_pending_sector','offline_uncorrectable','udma_crc_error_count',
    'grown_defect_list','uncorrected_errors_total','uncorrected_errors_read','uncorrected_errors_write',
    'media_errors','spin_retry_count','reported_uncorrect','critical_warning','unsafe_shutdowns'].indexOf(key)!==-1;
  var last = pts[pts.length-1].v, first = pts[0].v;
  var rising = last > first;
  if (isCounter && rising) C_LINE = (last>0 ? C_CRIT : C_WARN);
  else if (isCounter && last>0) C_LINE = C_WARN;

/* ---------- filter ---------- */
var filter = 'ALL', query = '';
function applyFilter(){
  var shown = 0;
  document.querySelectorAll('.server').forEach(function(sv){
    var visible = 0;
    sv.querySelectorAll('.bay').forEach(function(b){
      var okStatus = (filter==='ALL') || (b.dataset.st===filter) || (filter==='WARNING' && b.dataset.st==='CRITICAL');
      var okQuery = !query || b.dataset.hay.indexOf(query) !== -1;
      var show = okStatus && okQuery;
      b.classList.toggle('hide', !show);
      if (show) visible++;
    });
    sv.classList.toggle('hide', visible===0);
    shown += visible;
  });
  document.getElementById('empty').style.display = shown ? 'none' : 'block';
}
document.querySelectorAll('.fchip').forEach(function(c){
  c.addEventListener('click', function(){
    document.querySelectorAll('.fchip').forEach(function(x){ x.classList.remove('on'); });
    c.classList.add('on'); filter = c.dataset.f; applyFilter();
  });
});
document.getElementById('q').addEventListener('input', function(e){
  query = e.target.value.trim().toLowerCase(); applyFilter();
});
</script>
</body>
</html>