fix: show fan telemetry with CPU and space action rows
This commit is contained in:
+7
-5
@@ -13,6 +13,7 @@
|
||||
.header-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}.preference{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.preference select{height:35px;border:1px solid var(--line);border-radius:7px;background:#0d151e;color:var(--text);padding:7px 30px 7px 10px}.theme-preference select{min-width:138px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header-actions .live{height:35px}.service-list{scrollbar-width:none}.service-list:hover{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.service-list::-webkit-scrollbar{width:0}.service-list:hover::-webkit-scrollbar{width:7px}.service-list::-webkit-scrollbar-track{background:transparent}.service-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}[data-theme="light"]{color-scheme:light;--bg:#eef3f8;--panel:#fff;--panel2:#f6f9fc;--line:#c8d4e0;--text:#172333;--muted:#5d7085;--good:#168653;--bad:#c93d3d;--blue:#176fc1}[data-theme="light"] body{background:radial-gradient(circle at top right,#d9e9f8 0,#eef3f8 45%)}[data-theme="light"] nav{background:#eef3f8e8}[data-theme="light"] button{background:#e7eef6}[data-theme="light"] button:hover,[data-theme="light"] button.active{background:#d9e9f8}[data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] .service-form input,[data-theme="light"] .service-search,[data-theme="light"] .toolbar input,[data-theme="light"] .log-filter-top input,[data-theme="light"] .log-filter-bottom select,[data-theme="light"] .preference select{background:#fff}[data-theme="light"] .badge{background:#e5edf5;color:#31465c}[data-theme="light"] .badge.good{background:#d9f3e5;color:#087444}[data-theme="light"] .badge.bad{background:#fde5e5;color:#b72f2f}[data-theme="light"] .savebar{background:#f7fafcef;box-shadow:0 8px 25px #3453}[data-theme="light"] .log-table th{background:#e7eef6}[data-theme="light"] .row,[data-theme="light"] .log-table th,[data-theme="light"] .log-table td,[data-theme="light"] .log,[data-theme="light"] .service-list{border-color:#d6e0ea}@media(max-width:470px){.header-actions{justify-content:flex-start}}.host-panel{margin-top:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.host-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:12px}.device-details{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:5px}.host-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.metric{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:12px}.metric .value{font-size:20px}.progress{height:7px;background:color-mix(in srgb,var(--line) 70%,transparent);border-radius:999px;overflow:hidden;margin:8px 0}.progress span{display:block;height:100%;background:var(--blue);border-radius:inherit}.host-select{display:grid;gap:4px;color:var(--muted);font-size:12px}.host-select select{min-width:210px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--text);padding:9px}.config-target-toolbar{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);align-items:end}.token-control{display:flex;gap:8px;align-items:center}.token-control input{min-width:0;margin:0}.token-control button{white-space:nowrap}.bulk-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.bulk-section{padding:12px}.bulk-section-title{display:flex;align-items:center;gap:8px;font-weight:700}.bulk-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:10px 0 0 24px}.bulk-item{display:flex;align-items:flex-start;gap:7px}.bulk-item span{min-width:0}.bulk-value{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bulk-target{display:grid;grid-template-columns:auto minmax(120px,.5fr) minmax(220px,1fr);gap:10px;align-items:center}.bulk-target input[type="password"],.bulk-target input[type="text"]{width:100%;border:1px solid var(--line);border-radius:7px;background:#0d151e;color:var(--text);padding:8px}.host-checks{display:flex;gap:12px;flex-wrap:wrap}.host-checks label{display:flex;gap:6px;align-items:center}.offline-card{border-color:var(--bad)}@media(hover:hover) and (pointer:fine){.host-panel:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));box-shadow:0 16px 34px #0006}[data-theme="light"] .host-panel:hover{box-shadow:0 14px 30px #3454}}@media(max-width:900px){.host-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.config-target-toolbar{grid-template-columns:1fr}.bulk-items{grid-template-columns:1fr}.bulk-target{grid-template-columns:auto 1fr}.bulk-target input{grid-column:1/span 2}}@media(max-width:550px){.host-grid{grid-template-columns:1fr}.host-head{flex-direction:column}}
|
||||
.plugin-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
|
||||
#mainSavebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
|
||||
.action-row,.savebar,.plugin-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.action-row>button{flex-shrink:0}.bulk-tools{column-gap:16px}.group-head{column-gap:16px}
|
||||
</style>
|
||||
</head>
|
||||
<body><main>
|
||||
@@ -63,8 +64,9 @@ const ownerNames={NORMAL_HOME:'正常主页',ROOT_READONLY:'根文件系统只
|
||||
function ownerName(id){const [type,suffix]=String(id||'').split('|',2),name=ownerNames[type]||type;return tr(name)+(suffix?` · ${suffix}`:'')}function rgbName(mode){if(rgbNames[mode])return tr(rgbNames[mode]);const p=String(mode||'').split('_'),groups={CPU:'处理器',POWER:'供电',MEMORY:'内存',STORAGE:'存储',NETWORK:'网络',SERVICE:'服务'},levels={WARNING:'普通告警',CRITICAL:'严重告警',EMERGENCY:'紧急告警'};return`${tr(groups[p[0]]||p[0])} · ${tr(levels[p[1]]||p[1])}${p[2]==='BREATHE'?(LANG==='zh'?'呼吸':' breathing'):(LANG==='zh'?'闪烁':' flash')}`}function eventName(id){return tr(eventNames[id]||(LANG==='zh'?`未知事件（${id}）`:String(id).toLowerCase().replaceAll('_',' ')))}
|
||||
function field(section,key,value,extra=''){const id=`${section}.${key}`,opts=options[id],rule=numberRules[id],label=tr(labels[id]||key),help=tr(hints[id]||''),unit=tr(units[id]||'');let control;if(opts)control=`<select data-section="${esc(section)}" data-key="${esc(key)}">${opts.map(([v,l])=>`<option value="${v}" ${String(value)===v?'selected':''}>${tr(l)}</option>`).join('')}</select>`;else{const input=`<input ${rule?'type="number"':''} ${rule?`min="${rule[0]}" max="${rule[1]}" step="${rule[2]}"`:''} data-section="${esc(section)}" data-key="${esc(key)}" value="${esc(value)}">`;control=unit?`<div class="input-unit">${input}<span class="unit">${unit}</span></div>`:input}return`<div class="field ${extra}"><label>${esc(label)}${control}</label>${help?`<div class="hint">${esc(help)}</div>`:''}</div>`}
|
||||
function pluginText(zh,en){return LANG==='zh'?zh:en}
|
||||
function renderPlugins(){return `<div class="group"><p>${pluginText('仅发现插件不会接管插件的设备能力。接入后发送监控状态；暂停或断开联动不会停止插件的本地功能。','Discovery does not take control of plugin device capabilities. Connecting sends monitoring state; pausing or disconnecting the link does not stop the plugin’s local functions.')}</p><button type="button" id="refreshPlugins" onclick="loadPlugins()">${tr('刷新列表')}</button> <span id="pluginRefreshState" class="hint" role="status" aria-live="polite"></span><div id="pluginList"></div></div><div id="pluginEditor"></div>`}
|
||||
function pluginSummary(plugins,host){if(!Object.keys(plugins).length)return `<div class="group"><strong>${pluginText('风扇与硬件插件','Fan and hardware plugins')}</strong><p class="muted">${pluginText('尚未接入硬件插件，风扇状态不可用。独立安装并启动插件后，可在插件管理中接入。','No hardware plugin connected; fan status is unavailable. Install and start a plugin independently, then connect it in plugin management.')}</p><button type="button" data-manage-plugin-host="${esc(host)}">${pluginText('管理插件','Manage plugin')}</button></div>`;return Object.entries(plugins).map(([id,p])=>{const st=p.status||{},cap=p.capabilities||{},details=[];if(p.online){if(cap.fan)details.push(pluginText('风扇设置','Fan setting')+' '+esc(st.fan_name||'—'));if(cap.display)details.push('OLED '+esc(ownerName(st.oled_page||'')));if(cap.rgb)details.push('RGB '+esc(rgbName(st.rgb_mode||'')))}return `<div class="group"><strong>${esc(p.name||id)}</strong> · ${p.online?tr('在线'):tr('离线')} ${details.join(' · ')} <button type="button" data-manage-plugin-host="${esc(host)}">${pluginText('管理插件','Manage plugin')}</button></div>`}).join('')}
|
||||
function renderPlugins(){return `<div class="group"><p>${pluginText('仅发现插件不会接管插件的设备能力。接入后发送监控状态；暂停或断开联动不会停止插件的本地功能。','Discovery does not take control of plugin device capabilities. Connecting sends monitoring state; pausing or disconnecting the link does not stop the plugin’s local functions.')}</p><div class="action-row"><button type="button" id="refreshPlugins" onclick="loadPlugins()">${tr('刷新列表')}</button> <span id="pluginRefreshState" class="hint" role="status" aria-live="polite"></span></div><div id="pluginList"></div></div><div id="pluginEditor"></div>`}
|
||||
function fanMetric(plugins){const fans=Object.entries(plugins).filter(([,p])=>p.online&&p.capabilities?.fan&&p.status?.available!==false).map(([id,p])=>{const st=p.status;let value='';if(p.capabilities.fan.rpm&&typeof st.fan_rpm==='number'&&Number.isFinite(st.fan_rpm)&&st.fan_rpm>=0)value=st.fan_rpm+' RPM';else if(st.fan_name&&st.fan_name!=='UNAVAILABLE')value=pluginText('档位 ','level ')+(st.fan_name==='OFF'?pluginText('关闭','Off'):st.fan_name);return value?{name:p.name||id,value}:null}).filter(Boolean);return fans.length?`<div class="muted">${fans.map(f=>esc(pluginText('风扇','Fan')+(fans.length>1?' '+f.name:'')+' · '+f.value)).join('<br>')}</div>`:''}
|
||||
function pluginSummary(plugins,host){if(!Object.keys(plugins).length)return `<div class="group"><strong>${pluginText('风扇与硬件插件','Fan and hardware plugins')}</strong><p class="muted">${pluginText('尚未接入硬件插件，风扇状态不可用。独立安装并启动插件后，可在插件管理中接入。','No hardware plugin connected; fan status is unavailable. Install and start a plugin independently, then connect it in plugin management.')}</p><button type="button" data-manage-plugin-host="${esc(host)}">${pluginText('管理插件','Manage plugin')}</button></div>`;return Object.entries(plugins).map(([id,p])=>{const st=p.status||{},cap=p.capabilities||{},details=[];if(p.online){if(cap.display)details.push('OLED '+esc(ownerName(st.oled_page||'')));if(cap.rgb)details.push('RGB '+esc(rgbName(st.rgb_mode||'')))}return `<div class="group action-row"><span><strong>${esc(p.name||id)}</strong> · ${p.online?tr('在线'):tr('离线')} ${details.join(' · ')}</span><button type="button" data-manage-plugin-host="${esc(host)}">${pluginText('管理插件','Manage plugin')}</button></div>`}).join('')}
|
||||
|
||||
let pluginRows=[],pluginDraft=null,pluginSelected='';
|
||||
async function loadPlugins(){const list=$('pluginList');if(!list)return;const button=$('refreshPlugins'),feedback=$('pluginRefreshState');if(button?.disabled)return;if(button)button.disabled=true;if(feedback)feedback.textContent=pluginText('正在刷新…','Refreshing…');list.textContent=pluginText('正在发现本机插件…','Discovering local plugins…');try{const data=await get('/api/v1/plugins?host='+encodeURIComponent(currentConfigHost));pluginRows=data.plugins;if(feedback)feedback.textContent=pluginText('刷新完成，发现 '+pluginRows.length+' 个插件 · ','Refreshed, '+pluginRows.length+' plugins found · ')+new Date().toLocaleTimeString();list.innerHTML=pluginRows.map(p=>`<div class="group"><h3>${esc(p.descriptor?.name||p.id)}</h3><div class="hint">${esc(p.socket)} · ${p.online?tr('在线'):tr('离线')} · ${p.linked?(p.paused?pluginText('联动已暂停','Link paused'):pluginText('已接入','Connected')):pluginText('尚未接入','Not connected')}</div>${p.error?`<p class="error">${esc(p.error)}</p>`:''}${p.status?.errors&&Object.keys(p.status.errors).length?`<p class="error">${esc(JSON.stringify(p.status.errors))}</p>`:''}<p>${Object.keys(p.descriptor?.capabilities||{}).map(k=>esc(({fan:pluginText('风扇','Fan'),display:pluginText('屏幕','Display'),rgb:pluginText('灯光','Lighting')})[k]||k)).join(' · ')}</p><div class="toolbar">${p.linked?`<button data-plugin-op="${p.paused?'resume':'pause'}" data-plugin-id="${esc(p.id)}">${p.paused?pluginText('恢复告警联动','Resume alert link'):pluginText('暂停告警联动','Pause alert link')}</button><button data-plugin-op="unlink" data-plugin-id="${esc(p.id)}">${pluginText('断开接入','Disconnect')}</button>`:`<button data-plugin-op="link" data-plugin-id="${esc(p.id)}" ${p.online?'':'disabled'}>${pluginText('接入插件','Connect plugin')}</button>`}<button data-plugin-edit="${esc(p.id)}" ${p.online?'':'disabled'}>${pluginText('插件配置','Plugin settings')}</button></div></div>`).join('')||`<p class="muted">${pluginText('未发现正在运行的硬件插件。刷新只查询插件，不会安装或启动服务。若已安装，请先在目标机器启动插件，再刷新并接入；未接入不影响监控。','No running hardware plugins found. Refresh only queries plugins; it does not install or start services. Start the installed plugin on the target host, then refresh and connect. Monitoring works independently.')}</p>`;list.querySelectorAll('[data-plugin-op]').forEach(b=>b.onclick=()=>pluginAction(b.dataset.pluginId,b.dataset.pluginOp));list.querySelectorAll('[data-plugin-edit]').forEach(b=>b.onclick=()=>editPlugin(b.dataset.pluginEdit))}catch(e){list.textContent=e.message;if(feedback)feedback.textContent=pluginText('刷新失败','Refresh failed')}finally{if(button)button.disabled=false}}
|
||||
@@ -85,8 +87,8 @@ async function loadMachines(){try{const registry=await get('/api/v1/hosts');flee
|
||||
async function loadMachineBulk(){const source=bulkSource;$('machineBulk').textContent=pluginText('正在读取配置…','Loading configuration…');try{const d=await get('/api/v1/config?host='+encodeURIComponent(source));if(source!==bulkSource)return;bulkOriginal=d.config;$('machineBulk').innerHTML=renderBulkSync();bindBulkSync()}catch(e){$('machineBulk').textContent=e.message}}
|
||||
|
||||
function renderGeneral(s,v){if(s==='device')return renderDevice(v);const [t,d]=sectionMeta[s]||[s,''];return`<div class="group"><div class="group-head"><div><h3>${tr(t)}</h3><div class="hint">${tr(d)}</div></div></div><div class="fields">${Object.entries(v).map(([k,x])=>field(s,k,x)).join('')||'<div class="muted">暂无配置项</div>'}</div></div>`}
|
||||
function renderServices(){return`<div class="group"><div class="group-head"><div><h3>当前系统服务</h3><div class="hint">点击“加入监控”会自动填写下方表单；也可以手动输入尚未安装的未来服务。</div></div><button id="refreshServices">刷新列表</button></div><input class="service-search" id="serviceSearch" placeholder="搜索服务名称或说明"><div class="service-list rows" id="systemServices"><div class="muted">正在读取 systemd 服务…</div></div></div><div class="group"><h3>已监控服务</h3><div class="hint">“暂停监控”只停止状态检查，不影响服务运行；“停止服务”才会操作 systemd。</div><div class="rows" id="monitoredServices"></div></div><div class="group"><h3 id="serviceFormTitle">新建服务监控</h3><div class="service-form"><label>OLED 显示名称<input id="monitorName" maxlength="64" placeholder="例如：DOCKER"></label><label>systemd 服务名称<input id="monitorTarget" maxlength="128" placeholder="例如：docker.service"></label><label class="full">备注说明<input id="monitorNote" maxlength="120" placeholder="例如：家庭相册容器服务"></label><div class="full"><button id="saveMonitor">保存监控</button> <button id="resetMonitor">清空</button> <span id="serviceMessage" class="muted"></span></div></div></div>`}
|
||||
function renderHosts(v){const entries=Object.entries(v||{});return`<div class="group"><h3>已登记机器</h3><div class="rows">${entries.map(([id,url])=>`<div class="row"><span><b>${esc(id)}</b><br><span class="muted">${esc(url)}</span></span><button class="danger" data-delete-host="${esc(id)}">删除</button></div>`).join('')||'<div class="muted">尚未登记其他机器</div>'}</div></div><div class="group"><h3>添加或更新机器</h3><div class="service-form"><label>机器标识<input id="hostId" maxlength="64" placeholder="例如：living-room"></label><label>节点地址<input id="hostUrl" maxlength="200" placeholder="例如：http://192.168.1.20:6001"></label><div class="full"><button id="saveHost">保存机器</button> <span id="hostMessage" class="muted"></span></div></div></div>`}
|
||||
function renderServices(){return`<div class="group"><div class="group-head"><div><h3>当前系统服务</h3><div class="hint">点击“加入监控”会自动填写下方表单；也可以手动输入尚未安装的未来服务。</div></div><button id="refreshServices">刷新列表</button></div><input class="service-search" id="serviceSearch" placeholder="搜索服务名称或说明"><div class="service-list rows" id="systemServices"><div class="muted">正在读取 systemd 服务…</div></div></div><div class="group"><h3>已监控服务</h3><div class="hint">“暂停监控”只停止状态检查，不影响服务运行；“停止服务”才会操作 systemd。</div><div class="rows" id="monitoredServices"></div></div><div class="group"><h3 id="serviceFormTitle">新建服务监控</h3><div class="service-form"><label>OLED 显示名称<input id="monitorName" maxlength="64" placeholder="例如：DOCKER"></label><label>systemd 服务名称<input id="monitorTarget" maxlength="128" placeholder="例如：docker.service"></label><label class="full">备注说明<input id="monitorNote" maxlength="120" placeholder="例如：家庭相册容器服务"></label><div class="full action-row"><button id="saveMonitor">保存监控</button> <button id="resetMonitor">清空</button> <span id="serviceMessage" class="muted"></span></div></div></div>`}
|
||||
function renderHosts(v){const entries=Object.entries(v||{});return`<div class="group"><h3>已登记机器</h3><div class="rows">${entries.map(([id,url])=>`<div class="row"><span><b>${esc(id)}</b><br><span class="muted">${esc(url)}</span></span><button class="danger" data-delete-host="${esc(id)}">删除</button></div>`).join('')||'<div class="muted">尚未登记其他机器</div>'}</div></div><div class="group"><h3>添加或更新机器</h3><div class="service-form"><label>机器标识<input id="hostId" maxlength="64" placeholder="例如：living-room"></label><label>节点地址<input id="hostUrl" maxlength="200" placeholder="例如：http://192.168.1.20:6001"></label><div class="full action-row"><button id="saveHost">保存机器</button> <span id="hostMessage" class="muted"></span></div></div></div>`}
|
||||
function renderBulkTargets(){const targets=fleetHosts.filter(h=>h.id!==bulkSource);return`<div class="group"><h3>${tr('目标机器')}</h3><div class="hint">${tr('机器标识和机器列表不会参与同步。')}</div><div class="rows">${targets.map(h=>`<label class="bulk-target"><input type="checkbox" data-bulk-target="${esc(h.id)}"><b>${esc(h.name||h.id)}</b><input type="password" data-bulk-token="${esc(h.id)}" value="${esc(hostToken(h.id))}" placeholder="${tr('目标机器令牌')}"></label>`).join('')||`<div class="muted">${tr('尚未登记其他机器')}</div>`}</div></div>`}
|
||||
function bulkValue(section,key,value){const item=options[`${section}.${key}`]?.find(([v])=>v===String(value));return item?tr(item[1]):value}
|
||||
function renderBulkSync(){const groups=bulkSections.filter(s=>bulkOriginal[s]&&Object.keys(bulkOriginal[s]).length).map(s=>`<div class="group bulk-section"><label class="bulk-section-title"><input type="checkbox" data-bulk-section="${esc(s)}">${tr(sectionMeta[s]?.[0]||s)}</label><div class="bulk-items">${Object.entries(bulkOriginal[s]).map(([k,v])=>`<label class="bulk-item"><input type="checkbox" data-bulk-item="${esc(s)}.${esc(k)}"><span>${esc(tr(labels[`${s}.${k}`]||k))}<small class="bulk-value">${esc(bulkValue(s,k,v))}</small></span></label>`).join('')}</div></div>`).join('');return`<div class="group"><h3>${tr('来源机器')}</h3><div>${esc(fleetHosts.find(h=>h.id===bulkSource)?.name||bulkSource)} · ${esc(bulkSource)}</div></div>${renderBulkTargets()}<div class="bulk-tools"><button id="bulkAll">${tr('全部选择')}</button><button id="bulkNone">${tr('全部取消')}</button><button id="bulkInvert">${tr('反选')}</button><span class="muted" id="bulkCount"></span></div><div><h3>${tr('配置项')}</h3>${groups}</div><div class="savebar"><button id="bulkApply">${tr('开始批量同步')}</button> <span id="bulkState" class="muted"></span></div>`}
|
||||
@@ -107,7 +109,7 @@ async function monitorAction(unit,action){const s=serviceCache.find(x=>x.unit===
|
||||
async function serviceAction(unit,action){if(!confirm(LANG==='zh'?`确定${action==='start'?'启动服务':'停止服务'} ${unit} 吗？\n这会直接执行 systemctl ${action}。`:`${action==='start'?'Start':'Stop'} ${unit}?\nThis runs systemctl ${action} directly.`))return;try{await get('/api/v1/services/control',{method:'PUT',headers:tokenHeaders(),body:JSON.stringify({unit,action})});setTimeout(loadServices,700)}catch(e){alert(e.message)}}
|
||||
function bytes(value){const n=Number(value||0);if(!n)return'--';const units=['B','KB','MB','GB','TB'];let x=n,i=0;while(x>=1024&&i<units.length-1){x/=1024;i++}return`${x>=100||i===0?x.toFixed(0):x.toFixed(1)} ${units[i]}`}
|
||||
function meter(percent){const p=Math.max(0,Math.min(100,Number(percent||0)));return`<div class="progress"><span style="width:${p}%"></span></div>`}
|
||||
function hostCard(entry){const h=entry.host;if(!entry.online)return`<article class="panel host-panel offline-card"><div class="host-head"><div><h2>${esc(h.name||h.id)}</h2><div class="device-details"><span>ID ${esc(h.id)}</span><span>${esc(h.url||tr('本机'))}</span></div></div><span class="badge bad">${tr('离线')}</span></div><div class="error">${esc(entry.error||tr('连接失败'))}</div></article>`;const s=entry.status,y=s.system||{},n=s.network||{},d=s.display||{},v=s.device||{},m=s.machine||h,signal=n.signal_percent,memUsed=y.memory_used_bytes,memTotal=y.memory_total_bytes,diskUsed=y.disk_used_bytes,diskTotal=y.disk_total_bytes;return`<article class="panel host-panel"><div class="host-head"><div><h2>${esc(m.name||h.name||m.id)}</h2><div class="device-details"><span>ID ${esc(m.id||h.id)}</span><span>${LANG==='zh'?'主机名':'Hostname'} ${esc(m.hostname||v.hostname||'--')}</span><span>${esc(v.manufacturer||'')} ${esc(v.model||'--')}</span><span>${LANG==='zh'?'序列号':'Serial'} ${esc(v.serial||'--')}</span><span>${LANG==='zh'?'硬件版本':'Revision'} ${esc(v.revision||'--')}</span><span>${esc(v.os||'--')}</span><span>${LANG==='zh'?'内核':'Kernel'} ${esc(v.kernel||'--')}</span><span>${esc(v.architecture||'--')} · CPU ${esc(v.cpu_count||'--')}</span><span>${LANG==='zh'?'程序版本':'Agent'} ${esc(s.version||'--')}</span></div></div><span class="badge good">${tr('在线')}</span></div><div class="host-grid"><div class="metric"><div class="muted">${tr('处理器负载')}</div><div class="value">${esc(y.cpu_percent)}%</div>${meter(y.cpu_percent)}<div class="muted">${LANG==='zh'?'频率':'Frequency'} ${esc(y.cpu_freq_mhz)} MHz · ${esc(y.temperature_c)}°C</div></div><div class="metric"><div class="muted">${tr('内存占用')}</div><div class="value">${esc(y.memory_percent)}%</div>${meter(y.memory_percent)}<div class="muted">${bytes(memUsed)} / ${bytes(memTotal)} · ${LANG==='zh'?'可用':'Available'} ${bytes(y.memory_available_bytes)}</div></div><div class="metric"><div class="muted">${tr('磁盘占用')}</div><div class="value">${esc(y.disk_percent)}%</div>${meter(y.disk_percent)}<div class="muted">${bytes(diskUsed)} / ${bytes(diskTotal)} · ${LANG==='zh'?'剩余':'Free'} ${bytes(y.disk_free_bytes)}</div></div><div class="metric"><div class="muted">${tr('主网络')}</div><div class="value">${n.kind==='WIF'&&signal!==null&&signal!==undefined?`${esc(signal)}%`:esc(n.kind||'--')}</div>${n.kind==='WIF'?meter(signal):''}<div class="muted">${esc(n.interface||'--')} · ${n.kind==='WIF'?`${esc(n.metric)} dBm · `:''}${esc(n.ip_label)} ${esc(n.ip)} · ${n.internet?(LANG==='zh'?'互联网正常':'Internet online'):(LANG==='zh'?'互联网断开':'Internet down')}</div></div><div class="metric"><div class="muted">${tr('显示状态')}</div><div class="value">${esc(ownerName(d.owner))}</div><div class="muted">${LANG==='zh'?'告警状态独立于硬件插件':'Alert state is independent of hardware plugins'}</div></div><div class="metric"><div class="muted">${tr('当前告警')}</div><div class="value">${(d.alerts||[]).length}</div><div class="muted">${(d.alerts||[]).map(a=>esc(ownerName(a.id))).join(' · ')||tr('无告警')}</div></div></div>${pluginSummary(s.plugins||{},m.id||h.id)}<div class="group"><h3>${tr('服务与进程监控')}</h3><div class="rows">${(s.watches||[]).map(w=>`<div class="row"><span>${esc(w.name)} · ${esc(w.target)}</span><span class="badge ${w.up?'good':'bad'}">${tr(w.up?'正常':'停止')}</span></div>`).join('')||`<div class="muted">${tr('暂无数据')}</div>`}</div></div></article>`}
|
||||
function hostCard(entry){const h=entry.host;if(!entry.online)return`<article class="panel host-panel offline-card"><div class="host-head"><div><h2>${esc(h.name||h.id)}</h2><div class="device-details"><span>ID ${esc(h.id)}</span><span>${esc(h.url||tr('本机'))}</span></div></div><span class="badge bad">${tr('离线')}</span></div><div class="error">${esc(entry.error||tr('连接失败'))}</div></article>`;const s=entry.status,y=s.system||{},n=s.network||{},d=s.display||{},v=s.device||{},m=s.machine||h,signal=n.signal_percent,memUsed=y.memory_used_bytes,memTotal=y.memory_total_bytes,diskUsed=y.disk_used_bytes,diskTotal=y.disk_total_bytes;return`<article class="panel host-panel"><div class="host-head"><div><h2>${esc(m.name||h.name||m.id)}</h2><div class="device-details"><span>ID ${esc(m.id||h.id)}</span><span>${LANG==='zh'?'主机名':'Hostname'} ${esc(m.hostname||v.hostname||'--')}</span><span>${esc(v.manufacturer||'')} ${esc(v.model||'--')}</span><span>${LANG==='zh'?'序列号':'Serial'} ${esc(v.serial||'--')}</span><span>${LANG==='zh'?'硬件版本':'Revision'} ${esc(v.revision||'--')}</span><span>${esc(v.os||'--')}</span><span>${LANG==='zh'?'内核':'Kernel'} ${esc(v.kernel||'--')}</span><span>${esc(v.architecture||'--')} · CPU ${esc(v.cpu_count||'--')}</span><span>${LANG==='zh'?'程序版本':'Agent'} ${esc(s.version||'--')}</span></div></div><span class="badge good">${tr('在线')}</span></div><div class="host-grid"><div class="metric"><div class="muted">${tr('处理器负载')}</div><div class="value">${esc(y.cpu_percent)}%</div>${meter(y.cpu_percent)}<div class="muted">${LANG==='zh'?'频率':'Frequency'} ${esc(y.cpu_freq_mhz)} MHz · ${esc(y.temperature_c)}°C</div>${fanMetric(s.plugins||{})}</div><div class="metric"><div class="muted">${tr('内存占用')}</div><div class="value">${esc(y.memory_percent)}%</div>${meter(y.memory_percent)}<div class="muted">${bytes(memUsed)} / ${bytes(memTotal)} · ${LANG==='zh'?'可用':'Available'} ${bytes(y.memory_available_bytes)}</div></div><div class="metric"><div class="muted">${tr('磁盘占用')}</div><div class="value">${esc(y.disk_percent)}%</div>${meter(y.disk_percent)}<div class="muted">${bytes(diskUsed)} / ${bytes(diskTotal)} · ${LANG==='zh'?'剩余':'Free'} ${bytes(y.disk_free_bytes)}</div></div><div class="metric"><div class="muted">${tr('主网络')}</div><div class="value">${n.kind==='WIF'&&signal!==null&&signal!==undefined?`${esc(signal)}%`:esc(n.kind||'--')}</div>${n.kind==='WIF'?meter(signal):''}<div class="muted">${esc(n.interface||'--')} · ${n.kind==='WIF'?`${esc(n.metric)} dBm · `:''}${esc(n.ip_label)} ${esc(n.ip)} · ${n.internet?(LANG==='zh'?'互联网正常':'Internet online'):(LANG==='zh'?'互联网断开':'Internet down')}</div></div><div class="metric"><div class="muted">${tr('显示状态')}</div><div class="value">${esc(ownerName(d.owner))}</div><div class="muted">${LANG==='zh'?'告警状态独立于硬件插件':'Alert state is independent of hardware plugins'}</div></div><div class="metric"><div class="muted">${tr('当前告警')}</div><div class="value">${(d.alerts||[]).length}</div><div class="muted">${(d.alerts||[]).map(a=>esc(ownerName(a.id))).join(' · ')||tr('无告警')}</div></div></div>${pluginSummary(s.plugins||{},m.id||h.id)}<div class="group"><h3>${tr('服务与进程监控')}</h3><div class="rows">${(s.watches||[]).map(w=>`<div class="row"><span>${esc(w.name)} · ${esc(w.target)}</span><span class="badge ${w.up?'good':'bad'}">${tr(w.up?'正常':'停止')}</span></div>`).join('')||`<div class="muted">${tr('暂无数据')}</div>`}</div></div></article>`}
|
||||
function renderHostCards(entries){const root=$('hostCards'),seen=new Set;entries.forEach((entry,index)=>{const id=String(entry.host.id),template=document.createElement('template');template.innerHTML=hostCard(entry);const next=template.content.firstElementChild;next.dataset.hostId=id;let current=[...root.children].find(x=>x.dataset.hostId===id);if(current){current.className=next.className;current.innerHTML=next.innerHTML;if(root.children[index]!==current)root.insertBefore(current,root.children[index]||null)}else root.insertBefore(next,root.children[index]||null);seen.add(id)});[...root.children].forEach(x=>{if(!seen.has(x.dataset.hostId))x.remove()})}
|
||||
async function loadStatus(){try{const fleet=await get('/api/v1/fleet/status'),online=fleet.hosts.filter(x=>x.online);$('dot').classList.toggle('ok',online.length>0);$('liveText').textContent=LANG==='zh'?`${online.length}/${fleet.hosts.length} 在线`:`${online.length}/${fleet.hosts.length} online`;$('identity').textContent=LANG==='zh'?`多机监控 · ${fleet.hosts.length} 台设备 · ${new Date(fleet.timestamp*1000).toLocaleTimeString()}`:`Fleet monitoring · ${fleet.hosts.length} hosts · ${new Date(fleet.timestamp*1000).toLocaleTimeString()}`;renderHostCards(fleet.hosts);fleetHosts=fleet.hosts.map(x=>x.host);refreshHostSelectors()}catch(e){$('dot').classList.remove('ok');$('liveText').textContent=tr('离线');$('identity').textContent=e.message}}
|
||||
const severityNames={DEBUG:'调试',INFO:'信息',NOTICE:'注意',WARN:'警告',ERROR:'错误',CRITICAL:'严重',ALERT:'紧急',EMERGENCY:'紧急'};let logState={sort:'timestamp',order:'desc',offset:0,limit:100,total:0};
|
||||
|
||||
Reference in New Issue
Block a user