@jheavenknows/bluerouter 5.3.27 → 5.3.28

package/app/.next-cli-build/static/chunks/app/(dashboard)/dashboard/resource-monitor/{page-51e7c0ded4453f6f.js → page-d75f2e5c5698c084.js}

@@ -1 +1 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1205],{86243:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>H});var a=s(95155),r=s(12115),l=s(1728),n=s(90639),i=s(28408),o=s(32539),d=s(59656),c=s(65671),x=s(34122),m=s(16746),u=s(96647),h=s(29010),p=s(56061),g=s(92542),b=s(11910),f=s(81127),j=s(98);let v={name:"",host:"",sshPort:"22",sshUser:"",sshPassword:"",useSudo:!0,sudoPassword:"",agentPort:"19998",installAgent:!0};function y(e){return{name:e?.name||"",host:e?.host||"",sshPort:String(e?.sshPort||22),sshUser:e?.sshUser||"",sshPassword:"",useSudo:e?.useSudo!==!1,sudoPassword:"",agentPort:String(e?.agentPort||19998),installAgent:!0}}function N(e){var t;let s;return!!e?.lastStatus&&(!e.lastError||Date.now()-(Number.isFinite(s=(t=e?.lastStatusAt)?new Date(t).getTime():0)?s:0)<=3e4)}function w(e){return Math.max(0,Math.min(100,Number(e)||0))}function k(e,t=1){let s=Number(e)||0;if(!s)return"0 B";let a=["B","KB","MB","GB","TB","PB"],r=Math.min(a.length-1,Math.floor(Math.log(s)/Math.log(1024)));return`${(s/1024**r).toFixed(r>2?t:0)} ${a[r]}`}function S(e){return e?new Date(e).toLocaleTimeString("vi-VN",{hour12:!1}):"--:--:--"}function P({value:e,label:t,detail:s,color:r="var(--color-brand-500)",icon:l}){let n=w(e),i=2*Math.PI*49;return(0,a.jsxs)("div",{className:"flex min-w-0 flex-col items-center",children:[(0,a.jsxs)("div",{className:"relative h-36 w-36",children:[(0,a.jsxs)("svg",{className:"h-full w-full -rotate-90",viewBox:"0 0 120 120","aria-hidden":"true",children:[(0,a.jsx)("circle",{cx:"60",cy:"60",r:49,fill:"none",stroke:"var(--color-surface-2)",strokeWidth:"8"}),(0,a.jsx)("circle",{cx:"60",cy:"60",r:49,fill:"none",stroke:r,strokeWidth:"8",strokeLinecap:"round",strokeDasharray:i,strokeDashoffset:i*(1-n/100),className:"transition-all duration-700"})]}),(0,a.jsxs)("div",{className:"absolute inset-0 flex flex-col items-center justify-center text-center",children:[l?(0,a.jsx)("span",{className:"material-symbols-outlined mb-0.5 text-[19px] text-text-muted",children:l}):null,(0,a.jsxs)("strong",{className:"text-2xl font-semibold tracking-tight text-text-main",children:[n.toFixed(+(n<10)),"%"]}),(0,a.jsx)("span",{className:"mt-0.5 text-xs font-medium text-text-muted",children:t})]})]}),(0,a.jsx)("div",{className:"mt-2 max-w-full truncate text-center text-xs text-text-subtle",title:s,children:s})]})}function C({online:e}){return(0,a.jsx)("span",{className:`h-2.5 w-2.5 shrink-0 rounded-full ${e?"bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,.12)]":"bg-red-400 shadow-[0_0_0_4px_rgba(248,113,113,.12)]"}`})}function $({servers:e,selectedId:t,onSelect:s}){return(0,a.jsx)("div",{className:"flex gap-3 overflow-x-auto pb-1 scroll-thin-x",children:e.map(e=>{let r=e.id===t,l=N(e);return(0,a.jsxs)("button",{type:"button",onClick:()=>s(e.id),className:`min-w-[280px] rounded-2xl border p-5 text-left transition ${r?"border-primary bg-primary/5 shadow-[var(--shadow-warm)]":"border-border bg-surface hover:border-primary/40"}`,children:[(0,a.jsxs)("div",{className:"flex items-start justify-between gap-3",children:[(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(C,{online:l}),(0,a.jsx)("div",{className:"truncate text-base font-semibold text-text-main",children:e.name})]}),(0,a.jsxs)("div",{className:"mt-1.5 truncate font-mono text-sm text-text-muted",children:[e.host,":",e.agentPort]})]}),(0,a.jsx)("span",{className:"material-symbols-outlined text-[22px] text-text-subtle",children:"dns"})]}),(0,a.jsxs)("div",{className:"mt-3 flex items-center justify-between text-sm text-text-muted",children:[(0,a.jsx)("span",{children:l?"Đang hoạt động":"Mất kết nối"}),(0,a.jsx)("span",{children:S(e.lastStatusAt)})]})]},e.id)})})}function U({icon:e,label:t,value:s,sublabel:r,colorClass:l="text-primary",children:n}){return(0,a.jsxs)("div",{className:"rounded-2xl border border-border bg-surface p-4 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"flex items-center gap-3",children:[(0,a.jsx)("div",{className:`flex h-10 w-10 items-center justify-center rounded-xl bg-surface-2 ${l}`,children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[22px]",children:e})}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsx)("div",{className:"text-xs font-medium uppercase tracking-wider text-text-muted",children:t}),(0,a.jsx)("div",{className:"mt-0.5 truncate text-lg font-semibold text-text-main",children:s})]})]}),r?(0,a.jsx)("div",{className:"mt-3 truncate text-xs text-text-subtle",children:r}):null,n]})}function M({data:e,dataKey:t,label:s,color:r,unit:m="%"}){return(0,a.jsxs)("div",{className:"rounded-2xl border border-border bg-surface p-5 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,a.jsx)("h3",{className:"font-semibold text-text-main",children:s}),(0,a.jsx)("span",{className:"text-xs text-text-muted",children:"60 mẫu gần nhất"})]}),(0,a.jsx)("div",{className:"h-44",children:(0,a.jsx)(l.u,{width:"100%",height:"100%",children:(0,a.jsxs)(n.Q,{data:e,margin:{top:6,right:4,left:-22,bottom:0},children:[(0,a.jsx)("defs",{children:(0,a.jsxs)("linearGradient",{id:`fill-${t}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,a.jsx)("stop",{offset:"0%",stopColor:r,stopOpacity:.3}),(0,a.jsx)("stop",{offset:"100%",stopColor:r,stopOpacity:.02})]})}),(0,a.jsx)(i.d,{stroke:"var(--color-border-subtle)",strokeDasharray:"4 4",vertical:!1}),(0,a.jsx)(o.W,{dataKey:"time",hide:!0}),(0,a.jsx)(d.h,{domain:[0,"auto"],tick:{fill:"var(--color-text-subtle)",fontSize:11},axisLine:!1,tickLine:!1}),(0,a.jsx)(c.m,{contentStyle:{background:"var(--color-surface)",border:"1px solid var(--color-border)",borderRadius:12,fontSize:12},formatter:e=>[`${Number(e).toFixed(1)}${m}`,s]}),(0,a.jsx)(x.Gk,{type:"monotone",dataKey:t,stroke:r,fill:`url(#fill-${t})`,strokeWidth:2.2,dot:!1,isAnimationActive:!1})]})})})]})}let T=["#10b981","#06b6d4","#8b5cf6","#f59e0b","#ef4444","#3b82f6","#ec4899","#84cc16"];function A(e){return e?.uuid||`index-${e?.index??0}`}function I({data:e,gpus:t}){let s=(t||[]).map((e,t)=>({id:A(e),dataKey:`gpu${t}`,name:`GPU ${e.index} \xb7 ${e.name}`,color:T[t%T.length]})),r=e.map(e=>{let t={time:e.time};return s.forEach(s=>{let a=e.gpus?.find(e=>e.id===s.id);t[s.dataKey]=a?.usagePercent??null}),t});return(0,a.jsxs)("div",{className:"mb-5 rounded-2xl border border-border bg-surface p-5 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"mb-4 flex flex-wrap items-start justify-between gap-2",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("h4",{className:"font-semibold text-text-main",children:"GPU usage history"}),(0,a.jsx)("p",{className:"mt-1 text-xs text-text-muted",children:"Mỗi đường biểu diễn mức tải realtime của một NVIDIA GPU."})]}),(0,a.jsx)("span",{className:"rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-600 dark:text-emerald-400",children:"60 mẫu gần nhất"})]}),(0,a.jsx)("div",{className:"h-64",children:(0,a.jsx)(l.u,{width:"100%",height:"100%",children:(0,a.jsxs)(m.b,{data:r,margin:{top:8,right:12,left:-16,bottom:2},children:[(0,a.jsx)(i.d,{stroke:"var(--color-border-subtle)",strokeDasharray:"4 4",vertical:!1}),(0,a.jsx)(o.W,{dataKey:"time",tickFormatter:S,minTickGap:36,tick:{fill:"var(--color-text-subtle)",fontSize:11},axisLine:!1,tickLine:!1}),(0,a.jsx)(d.h,{domain:[0,100],ticks:[0,25,50,75,100],tickFormatter:e=>`${e}%`,tick:{fill:"var(--color-text-subtle)",fontSize:11},axisLine:!1,tickLine:!1}),(0,a.jsx)(c.m,{contentStyle:{background:"var(--color-surface)",border:"1px solid var(--color-border)",borderRadius:12,fontSize:12},labelFormatter:e=>`Thời gian ${S(e)}`,formatter:(e,t)=>[`${Number(e).toFixed(1)}%`,t]}),(0,a.jsx)(u.s,{iconType:"circle",iconSize:8,wrapperStyle:{fontSize:12,paddingTop:12},formatter:e=>(0,a.jsx)("span",{className:"text-text-muted",children:e})}),s.map(e=>(0,a.jsx)(h.N1,{type:"monotone",dataKey:e.dataKey,name:e.name,stroke:e.color,strokeWidth:2.4,dot:!1,connectNulls:!1,isAnimationActive:!1},e.id))]})})})]})}let D=[{value:"1h",label:"1 giờ"},{value:"6h",label:"6 giờ"},{value:"24h",label:"24 giờ"},{value:"7d",label:"7 ng\xe0y"},{value:"30d",label:"30 ng\xe0y"}];function _(e){return e?new Date(e).toLocaleString("vi-VN",{day:"2-digit",month:"2-digit",hour:"2-digit",minute:"2-digit",hour12:!1}):"—"}function L({title:e,description:t,data:s,series:r,domain:n=[0,100],valueFormatter:x=e=>`${Number(e).toFixed(1)}%`,axisFormatter:p=e=>`${e}%`}){return(0,a.jsxs)("div",{className:"rounded-2xl border border-border bg-surface p-5 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"mb-4",children:[(0,a.jsx)("h4",{className:"font-semibold text-text-main",children:e}),t?(0,a.jsx)("p",{className:"mt-1 text-xs text-text-muted",children:t}):null]}),(0,a.jsx)("div",{className:"h-64",children:(0,a.jsx)(l.u,{width:"100%",height:"100%",children:(0,a.jsxs)(m.b,{data:s,margin:{top:8,right:12,left:-8,bottom:2},children:[(0,a.jsx)(i.d,{stroke:"var(--color-border-subtle)",strokeDasharray:"4 4",vertical:!1}),(0,a.jsx)(o.W,{dataKey:"time",tickFormatter:_,minTickGap:48,tick:{fill:"var(--color-text-subtle)",fontSize:10},axisLine:!1,tickLine:!1}),(0,a.jsx)(d.h,{domain:n,tickFormatter:p,width:58,tick:{fill:"var(--color-text-subtle)",fontSize:10},axisLine:!1,tickLine:!1}),(0,a.jsx)(c.m,{contentStyle:{background:"var(--color-surface)",border:"1px solid var(--color-border)",borderRadius:12,fontSize:12},labelFormatter:e=>_(e),formatter:(e,t)=>[x(e),t]}),(0,a.jsx)(u.s,{iconType:"circle",iconSize:8,wrapperStyle:{fontSize:12,paddingTop:12},formatter:e=>(0,a.jsx)("span",{className:"text-text-muted",children:e})}),r.map(e=>(0,a.jsx)(h.N1,{type:"monotone",dataKey:e.key,name:e.name,stroke:e.color,strokeWidth:2.2,dot:!1,connectNulls:!1,isAnimationActive:!1},e.key))]})})})]})}function K({server:e,data:t,meta:s,period:l,onPeriodChange:n,loading:i,error:o}){let d=(0,r.useMemo)(()=>{let e=new Map;return t.forEach(t=>{(t.gpus||[]).forEach(t=>{e.has(t.id)||e.set(t.id,t)})}),[...e.values()].map((e,t)=>({id:e.id,key:`gpu${t}`,name:`GPU ${e.index} \xb7 ${e.name}`,color:T[t%T.length]}))},[t]),c=(0,r.useCallback)(e=>t.map(t=>{let s={time:t.time};return d.forEach(a=>{let r=t.gpus?.find(e=>e.id===a.id);s[a.key]=r?.[e]??null}),s}),[t,d]);return(0,a.jsxs)("section",{className:"overflow-hidden rounded-3xl border border-border bg-surface shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center justify-between gap-4 border-b border-border px-6 py-5",children:[(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-4",children:[(0,a.jsx)("div",{className:"flex h-12 w-12 items-center justify-center rounded-2xl bg-violet-500/10 text-violet-500",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[27px]",children:"monitoring"})}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("h3",{className:"truncate text-lg font-semibold text-text-main",children:["Lịch sử \xb7 ",e.name]}),(0,a.jsxs)("p",{className:"mt-1 text-xs text-text-muted",children:["Sample mỗi ph\xfat \xb7 lưu tối đa ",s?.retentionDays||30," ng\xe0y"]})]})]}),(0,a.jsx)("div",{className:"flex flex-wrap gap-1 rounded-xl bg-surface-2 p-1",children:D.map(e=>(0,a.jsx)("button",{type:"button",onClick:()=>n(e.value),className:`rounded-lg px-3 py-2 text-xs font-semibold transition ${l===e.value?"bg-surface text-primary shadow-sm":"text-text-muted hover:text-text-main"}`,children:e.label},e.value))})]}),i?(0,a.jsxs)("div",{className:"flex min-h-[420px] items-center justify-center text-sm text-text-muted",children:[(0,a.jsx)("span",{className:"material-symbols-outlined mr-2 animate-spin",children:"progress_activity"}),"Đang tải dữ liệu lịch sử..."]}):o?(0,a.jsx)("div",{className:"m-6 rounded-2xl border border-red-500/20 bg-red-500/10 p-5 text-sm text-red-600 dark:text-red-300",children:o}):t.length?(0,a.jsxs)("div",{className:"space-y-5 p-6",children:[(0,a.jsxs)("div",{className:"grid gap-4 sm:grid-cols-3",children:[(0,a.jsx)(U,{icon:"database",label:"Số điểm hiển thị",value:t.length.toLocaleString("vi-VN"),sublabel:`Bucket ${s?.bucketMinutes||1} ph\xfat`,colorClass:"text-violet-500"}),(0,a.jsx)(U,{icon:"date_range",label:"Từ thời điểm",value:_(t[0]?.time),sublabel:"Điểm đầu ti\xean trong khoảng đ\xe3 chọn",colorClass:"text-cyan-500"}),(0,a.jsx)(U,{icon:"memory",label:"NVIDIA GPU",value:`${d.length} card`,sublabel:"Theo d\xf5i ri\xeang bằng GPU UUID",colorClass:"text-emerald-500"})]}),(0,a.jsxs)("div",{className:"grid gap-5 xl:grid-cols-2",children:[(0,a.jsx)(L,{title:"CPU, RAM & Disk usage",description:"Tỷ lệ sử dụng t\xe0i nguy\xean hệ thống theo thời gian.",data:t,series:[{key:"cpu",name:"CPU",color:"#3b9dec"},{key:"memory",name:"RAM",color:"#8b5cf6"},{key:"disk",name:"Disk",color:"#f59e0b"}]}),(0,a.jsx)(L,{title:"Network throughput",description:"Tốc độ nhận v\xe0 gửi trung b\xecnh trong mỗi bucket.",data:t,domain:[0,"auto"],series:[{key:"networkRxBps",name:"Download",color:"#06b6d4"},{key:"networkTxBps",name:"Upload",color:"#ec4899"}],valueFormatter:e=>`${k(e)}/s`,axisFormatter:e=>k(e)})]}),d.length?(0,a.jsxs)("div",{className:"grid gap-5 xl:grid-cols-2",children:[(0,a.jsx)(L,{title:"NVIDIA GPU usage",description:"Mức tải của từng GPU, ph\xe2n biệt theo UUID.",data:c("usagePercent"),series:d}),(0,a.jsx)(L,{title:"GPU VRAM usage",description:"Phần trăm VRAM đ\xe3 sử dụng tr\xean từng card.",data:c("memoryUsagePercent"),series:d}),(0,a.jsx)(L,{title:"GPU temperature",description:"Nhiệt độ trung b\xecnh của từng card trong mỗi bucket.",data:c("temperatureC"),domain:[0,"auto"],series:d,valueFormatter:e=>`${Number(e).toFixed(1)}\xb0C`,axisFormatter:e=>`${e}\xb0`}),(0,a.jsx)(L,{title:"GPU power draw",description:"C\xf4ng suất ti\xeau thụ trung b\xecnh của từng card.",data:c("powerDrawW"),domain:[0,"auto"],series:d,valueFormatter:e=>`${Number(e).toFixed(1)} W`,axisFormatter:e=>`${e}W`})]}):null]}):(0,a.jsxs)("div",{className:"flex min-h-[420px] flex-col items-center justify-center px-6 text-center",children:[(0,a.jsx)("div",{className:"flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-500/10 text-violet-500",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[34px]",children:"hourglass_empty"})}),(0,a.jsx)("h4",{className:"mt-5 font-semibold text-text-main",children:"Chưa c\xf3 dữ liệu lịch sử"}),(0,a.jsx)("p",{className:"mt-2 max-w-md text-sm leading-6 text-text-muted",children:"Collector đ\xe3 được bật v\xe0 sẽ ghi mẫu đầu ti\xean trong v\xf2ng một ph\xfat. Dữ liệu vẫn tiếp tục được thu thập khi kh\xf4ng mở dashboard."})]})]})}function E({gpu:e}){let t=w(e.memoryUsagePercent);return(0,a.jsxs)("div",{className:"overflow-hidden rounded-2xl border border-border bg-surface shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"flex items-center justify-between border-b border-border-subtle bg-gradient-to-r from-emerald-500/8 to-cyan-500/5 px-5 py-4",children:[(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-3",children:[(0,a.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-500",children:(0,a.jsx)("span",{className:"material-symbols-outlined",children:"memory"})}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("div",{className:"truncate font-semibold text-text-main",children:["GPU ",e.index," \xb7 ",e.name]}),(0,a.jsxs)("div",{className:"mt-0.5 text-xs text-text-muted",children:["NVIDIA Driver ",e.driverVersion||"—"]})]})]}),(0,a.jsx)("span",{className:"rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-400",children:"NVIDIA"})]}),(0,a.jsxs)("div",{className:"grid gap-5 p-5 sm:grid-cols-[150px_1fr]",children:[(0,a.jsx)(P,{value:e.usagePercent,label:"GPU Load",detail:`${e.temperatureC??"—"}\xb0C`,color:"#10b981"}),(0,a.jsxs)("div",{className:"space-y-5",children:[(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-2 flex items-center justify-between text-sm",children:[(0,a.jsx)("span",{className:"text-text-muted",children:"VRAM"}),(0,a.jsxs)("span",{className:"font-semibold text-text-main",children:[k(1048576*(e.memoryUsedMb||0))," /"," ",k(1048576*(e.memoryTotalMb||0))]})]}),(0,a.jsx)("div",{className:"h-2.5 overflow-hidden rounded-full bg-surface-2",children:(0,a.jsx)("div",{className:"h-full rounded-full bg-emerald-500 transition-all duration-700",style:{width:`${t}%`}})}),(0,a.jsxs)("div",{className:"mt-1.5 text-right text-xs text-text-subtle",children:[t.toFixed(1),"% đ\xe3 d\xf9ng"]})]}),(0,a.jsxs)("div",{className:"grid grid-cols-2 gap-3",children:[(0,a.jsxs)("div",{className:"rounded-xl bg-surface-2 p-3",children:[(0,a.jsx)("div",{className:"text-xs text-text-muted",children:"Nhiệt độ"}),(0,a.jsxs)("div",{className:"mt-1 text-lg font-semibold text-text-main",children:[e.temperatureC??"—","\xb0C"]})]}),(0,a.jsxs)("div",{className:"rounded-xl bg-surface-2 p-3",children:[(0,a.jsx)("div",{className:"text-xs text-text-muted",children:"C\xf4ng suất"}),(0,a.jsxs)("div",{className:"mt-1 text-lg font-semibold text-text-main",children:[e.powerDrawW??"—",(0,a.jsxs)("span",{className:"text-xs font-normal text-text-muted",children:[" ","/ ",e.powerLimitW??"—"," W"]})]})]})]})]})]})]})}function F({open:e,onClose:t,onCreated:s}){let[l,n]=(0,r.useState)(v),[i,o]=(0,r.useState)(!1),[d,c]=(0,r.useState)(""),x=(e,t)=>n(s=>({...s,[e]:t}));(0,r.useEffect)(()=>{e&&(n(v),c(""))},[e]);let m=async e=>{e.preventDefault(),o(!0),c("");try{let e=await fetch("/api/resource-monitor",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(l)}),a=await e.json().catch(()=>({}));if(!e.ok)throw Error(a.error||"Kh\xf4ng thể th\xeam server");await s(a.server,a.install),t()}catch(e){c(e?.message||"Kh\xf4ng thể th\xeam server")}finally{o(!1)}};return(0,a.jsx)(f.default,{isOpen:e,onClose:t,title:"Th\xeam Linux server",size:"xl",busy:i,footer:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(g.default,{variant:"ghost",onClick:t,disabled:i,children:"Hủy"}),(0,a.jsx)(g.default,{onClick:m,loading:i,icon:"rocket_launch",children:"C\xe0i agent & th\xeam server"})]}),children:(0,a.jsxs)("form",{onSubmit:m,className:"space-y-5",children:[(0,a.jsx)("div",{className:"rounded-xl border border-primary/20 bg-primary/5 p-4 text-sm text-text-muted",children:(0,a.jsxs)("div",{className:"flex gap-3",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-primary",children:"auto_fix_high"}),(0,a.jsx)("p",{children:"BlueRouter sẽ SSH v\xe0o m\xe1y, d\xf9ng quyền sudo để c\xe0i Python agent dưới dạng systemd service. Sau lần n\xe0y bạn kh\xf4ng cần thao t\xe1c th\xeam tr\xean Linux."})]})}),(0,a.jsxs)("div",{className:"grid gap-4 sm:grid-cols-2",children:[(0,a.jsx)(b.default,{label:"T\xean hiển thị",value:l.name,onChange:e=>x("name",e.target.value),placeholder:"GPU Worker 01",icon:"dns"}),(0,a.jsx)(b.default,{required:!0,label:"Hostname / IP",value:l.host,onChange:e=>x("host",e.target.value),placeholder:"192.168.1.50",icon:"lan"}),(0,a.jsx)(b.default,{required:!0,label:"SSH user",value:l.sshUser,onChange:e=>x("sshUser",e.target.value),placeholder:"ubuntu",icon:"person"}),(0,a.jsx)(b.default,{label:"SSH port",type:"number",value:l.sshPort,onChange:e=>x("sshPort",e.target.value)}),(0,a.jsx)(b.default,{label:"SSH password",type:"password",value:l.sshPassword,onChange:e=>x("sshPassword",e.target.value),placeholder:"Để trống nếu d\xf9ng SSH key",hint:"Chỉ d\xf9ng trong l\xfac c\xe0i, kh\xf4ng lưu v\xe0o database."}),(0,a.jsx)(b.default,{label:"Agent port",type:"number",value:l.agentPort,onChange:e=>x("agentPort",e.target.value),hint:"Mặc định 19998; dashboard server phải truy cập được port n\xe0y."})]}),(0,a.jsxs)("label",{className:"flex cursor-pointer items-start gap-3 rounded-xl border border-border bg-surface-2/60 p-4",children:[(0,a.jsx)("input",{type:"checkbox",checked:l.useSudo,onChange:e=>x("useSudo",e.target.checked),className:"mt-1 h-4 w-4"}),(0,a.jsxs)("span",{children:[(0,a.jsx)("span",{className:"block text-sm font-semibold text-text-main",children:"User cần sudo để c\xe0i service"}),(0,a.jsx)("span",{className:"mt-1 block text-xs text-text-muted",children:"Tắt nếu đăng nhập trực tiếp bằng root."})]})]}),l.useSudo?(0,a.jsx)(b.default,{label:"Sudo password",type:"password",value:l.sudoPassword,onChange:e=>x("sudoPassword",e.target.value),placeholder:"Mặc định d\xf9ng c\xf9ng SSH password"}):null,d?(0,a.jsx)("div",{className:"rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-300",children:d}):null]})})}function G({open:e,server:t,onClose:s,onUpdated:l}){let[n,i]=(0,r.useState)(y(t)),[o,d]=(0,r.useState)(!1),[c,x]=(0,r.useState)(""),m=(e,t)=>i(s=>({...s,[e]:t}));(0,r.useEffect)(()=>{e&&(i(y(t)),x(""))},[e,t]);let u=async e=>{if(e.preventDefault(),t?.id){d(!0),x("");try{let e=await fetch(`/api/resource-monitor/${t.id}`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:n.name,host:n.host,sshPort:n.sshPort,sshUser:n.sshUser,useSudo:n.useSudo,agentPort:n.agentPort})}),a=await e.json().catch(()=>({}));if(!e.ok)throw Error(a.error||"Kh\xf4ng thể lưu server");let r=null;if(n.installAgent){let e=await fetch(`/api/resource-monitor/${t.id}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({sshPassword:n.sshPassword,sudoPassword:n.sudoPassword})}),s=await e.json().catch(()=>({}));r={ok:e.ok&&!1!==s.ok,log:s.log,error:s.error}}await l(a.server,r),s()}catch(e){x(e?.message||"Kh\xf4ng thể cập nhật server")}finally{d(!1)}}};return(0,a.jsx)(f.default,{isOpen:e,onClose:s,title:"Sửa Linux server",size:"xl",busy:o,footer:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(g.default,{variant:"ghost",onClick:s,disabled:o,children:"Hủy"}),(0,a.jsx)(g.default,{onClick:u,loading:o,icon:"save",children:"Lưu & c\xe0i lại agent"})]}),children:(0,a.jsxs)("form",{onSubmit:u,className:"space-y-5",children:[(0,a.jsxs)("div",{className:"grid gap-4 sm:grid-cols-2",children:[(0,a.jsx)(b.default,{label:"T\xean hiển thị",value:n.name,onChange:e=>m("name",e.target.value),placeholder:"GPU Worker 01",icon:"dns"}),(0,a.jsx)(b.default,{required:!0,label:"Hostname / IP",value:n.host,onChange:e=>m("host",e.target.value),placeholder:"192.168.1.50",icon:"lan"}),(0,a.jsx)(b.default,{required:!0,label:"SSH user",value:n.sshUser,onChange:e=>m("sshUser",e.target.value),placeholder:"ubuntu",icon:"person"}),(0,a.jsx)(b.default,{label:"SSH port",type:"number",value:n.sshPort,onChange:e=>m("sshPort",e.target.value)}),(0,a.jsx)(b.default,{label:"SSH password",type:"password",value:n.sshPassword,onChange:e=>m("sshPassword",e.target.value),placeholder:"Nhập lại nếu trước đ\xf3 sai",hint:"Chỉ d\xf9ng để c\xe0i lại agent, kh\xf4ng lưu v\xe0o database."}),(0,a.jsx)(b.default,{label:"Agent port",type:"number",value:n.agentPort,onChange:e=>m("agentPort",e.target.value)})]}),(0,a.jsxs)("label",{className:"flex cursor-pointer items-start gap-3 rounded-xl border border-border bg-surface-2/60 p-4",children:[(0,a.jsx)("input",{type:"checkbox",checked:n.useSudo,onChange:e=>m("useSudo",e.target.checked),className:"mt-1 h-4 w-4"}),(0,a.jsxs)("span",{children:[(0,a.jsx)("span",{className:"block text-sm font-semibold text-text-main",children:"User cần sudo để c\xe0i service"}),(0,a.jsx)("span",{className:"mt-1 block text-xs text-text-muted",children:"Tắt nếu đăng nhập trực tiếp bằng root."})]})]}),n.useSudo?(0,a.jsx)(b.default,{label:"Sudo password",type:"password",value:n.sudoPassword,onChange:e=>m("sudoPassword",e.target.value),placeholder:"Mặc định d\xf9ng c\xf9ng SSH password"}):null,(0,a.jsxs)("label",{className:"flex cursor-pointer items-start gap-3 rounded-xl border border-border bg-surface-2/60 p-4",children:[(0,a.jsx)("input",{type:"checkbox",checked:n.installAgent,onChange:e=>m("installAgent",e.target.checked),className:"mt-1 h-4 w-4"}),(0,a.jsxs)("span",{children:[(0,a.jsx)("span",{className:"block text-sm font-semibold text-text-main",children:"C\xe0i lại agent sau khi lưu"}),(0,a.jsx)("span",{className:"mt-1 block text-xs text-text-muted",children:"Bật mục n\xe0y khi cần nhập lại account/password SSH hoặc đổi port."})]})]}),c?(0,a.jsx)("div",{className:"rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-300",children:c}):null]})})}let B={normal:{variant:"success",label:"B\xecnh thường"},warning:{variant:"warning",label:"Cảnh b\xe1o"},critical:{variant:"error",label:"Qu\xe1 tải"},unknown:{variant:"default",label:"Kh\xf4ng r\xf5"}};function R({modelOptions:e,selectedModel:t,onSelectModel:s,analysis:r,loading:l,error:n,onAnalyze:i,standby:o}){return(0,a.jsxs)("section",{className:"overflow-hidden rounded-3xl border border-border bg-surface shadow-[var(--shadow-soft)]",children:[(0,a.jsx)("div",{className:"flex flex-wrap items-center justify-between gap-4 border-b border-border px-6 py-5",children:(0,a.jsxs)("div",{className:"flex items-center gap-4",children:[(0,a.jsx)("div",{className:"flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[27px]",children:"neurology"})}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h3",{className:"text-lg font-semibold text-text-main",children:"Đ\xe1nh gi\xe1 AI t\xecnh trạng server"}),(0,a.jsx)("p",{className:"mt-0.5 text-xs text-text-muted",children:"Ph\xe2n t\xedch giờ l\xe0m việc h\xf4m nay (8:00 - 18:00) tr\xean to\xe0n bộ Linux server."})]})]})}),(0,a.jsxs)("div",{className:"space-y-5 p-6",children:[o?(0,a.jsx)("div",{className:"rounded-xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-300",children:"Standby mode: kết quả ph\xe2n t\xedch được đồng bộ tự động từ Master. Node n\xe0y kh\xf4ng tự chạy ph\xe2n t\xedch AI."}):null,(0,a.jsxs)("div",{className:"flex flex-wrap items-end gap-3",children:[(0,a.jsx)(j.default,{className:"min-w-[280px] flex-1",label:"AI model d\xf9ng để ph\xe2n t\xedch",options:e,value:t,onChange:e=>s(e.target.value),placeholder:e.length?"Chọn model":"Chưa c\xf3 kết nối AI n\xe0o đang hoạt động",disabled:!e.length||o}),(0,a.jsx)(g.default,{icon:"auto_awesome",onClick:i,loading:l,disabled:!t||o,children:"Ph\xe2n t\xedch lại"})]}),n?(0,a.jsx)("div",{className:"rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-300",children:n}):null,r?(0,a.jsxs)("div",{className:"space-y-5",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center justify-between gap-2 text-xs text-text-muted",children:[(0,a.jsxs)("span",{children:["Model: ",(0,a.jsx)("span",{className:"font-semibold",children:r.modelLabel})]}),(0,a.jsxs)("span",{children:["Cập nhật l\xfac ",S(r.generatedAt)]})]}),(0,a.jsx)("div",{className:"whitespace-pre-wrap rounded-2xl border border-border bg-surface-2/40 p-5 text-sm leading-6 text-text-main",children:r.summary}),r.servers?.length?(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-3 flex items-center gap-2",children:[(0,a.jsx)("span",{className:"h-5 w-1 rounded-full bg-primary"}),(0,a.jsx)("h4",{className:"font-semibold text-text-main",children:"Trạng th\xe1i từng server"})]}),(0,a.jsx)("div",{className:"grid gap-3 sm:grid-cols-2 xl:grid-cols-3",children:r.servers.map(e=>{let t=B[e.status]||B.unknown;return(0,a.jsxs)("div",{className:"flex items-center justify-between rounded-xl border border-border bg-surface px-4 py-3",children:[(0,a.jsx)("span",{className:"truncate text-sm font-medium text-text-main",children:e.name}),(0,a.jsx)(p.default,{variant:t.variant,dot:!0,children:t.label})]},e.serverId)})})]}):null]}):l?null:(0,a.jsx)("div",{className:"rounded-2xl border border-dashed border-border bg-surface-2/40 py-10 text-center text-sm text-text-muted",children:'Chưa c\xf3 ph\xe2n t\xedch n\xe0o — bấm "Ph\xe2n t\xedch lại" để bắt đầu.'})]})]})}function H(){let e,t,s,l,[n,i]=(0,r.useState)("realtime"),[o,d]=(0,r.useState)([]),[c,x]=(0,r.useState)(""),[m,u]=(0,r.useState)({}),[h,p]=(0,r.useState)(!0),[b,j]=(0,r.useState)(!1),[v,y]=(0,r.useState)(!1),[T,D]=(0,r.useState)(!1),[_,L]=(0,r.useState)(null),[B,H]=(0,r.useState)(!1),[O,z]=(0,r.useState)(null),[V,W]=(0,r.useState)("24h"),[q,J]=(0,r.useState)([]),[X,Q]=(0,r.useState)(null),[Y,Z]=(0,r.useState)(!1),[ee,et]=(0,r.useState)(""),[es,ea]=(0,r.useState)(!1),[er,el]=(0,r.useState)([]),[en,ei]=(0,r.useState)(""),[eo,ed]=(0,r.useState)(null),[ec,ex]=(0,r.useState)(!1),[em,eu]=(0,r.useState)(""),eh=(0,r.useRef)(0),ep=(0,r.useCallback)(async({quiet:e=!1}={})=>{e||j(!0);try{let e=await fetch("/api/resource-monitor",{cache:"no-store"}),t=await e.json().catch(()=>({}));if(!e.ok)throw Error(t.error||"Kh\xf4ng tải được server");let s=t.servers||[];ea(!0===t.standby),d(s),x(e=>e&&s.some(t=>t.id===e)?e:s[0]?.id||""),u(e=>{let t={...e};return s.forEach(e=>{if(!N(e))return;let s=e.lastStatus,a={time:s.updatedAt||new Date().toISOString(),cpu:s.cpu?.usagePercent||0,memory:s.memory?.usagePercent||0,disk:s.disks?.[0]?.usagePercent||0,gpu:s.gpus?.length?Math.max(...s.gpus.map(e=>e.usagePercent||0)):0,gpus:(s.gpus||[]).map(e=>({id:A(e),usagePercent:w(e.usagePercent)}))},r=t[e.id]||[];t[e.id]=r.at(-1)?.time===a.time?r:[...r,a].slice(-60)}),t})}catch(t){e||z({type:"error",text:t?.message||"Kh\xf4ng tải được server"})}finally{p(!1),e||j(!1)}},[]),eg=(0,r.useCallback)(async()=>{if(!c)return;let e=++eh.current;Z(!0),et("");try{let t=await fetch(`/api/resource-monitor/history?serverId=${encodeURIComponent(c)}&period=${encodeURIComponent(V)}`,{cache:"no-store"}),s=await t.json().catch(()=>({}));if(!t.ok)throw Error(s.error||"Kh\xf4ng tải được lịch sử t\xe0i nguy\xean");if(eh.current!==e)return;J(s.points||[]),Q(s)}catch(t){if(eh.current!==e)return;et(t?.message||"Kh\xf4ng tải được lịch sử t\xe0i nguy\xean"),J([])}finally{eh.current===e&&Z(!1)}},[V,c]);(0,r.useEffect)(()=>{let e,t=!1;ep();let s=async()=>{await ep({quiet:!0}),t||(e=setTimeout(s,4e3))};return e=setTimeout(s,4e3),()=>{t=!0,clearTimeout(e)}},[ep]),(0,r.useEffect)(()=>{if("history"!==n||!c)return;eg();let e=setInterval(eg,6e4);return()=>clearInterval(e)},[n,eg,c]),(0,r.useEffect)(()=>{let e=localStorage.getItem("blueRouterResourceMonitorTab");e&&i(e)},[]),(0,r.useEffect)(()=>{localStorage.setItem("blueRouterResourceMonitorTab",n)},[n]);let eb=(0,r.useCallback)(e=>{ei(e),fetch("/api/resource-monitor/analyze",{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({model:e})}).catch(()=>{})},[]),ef=(0,r.useCallback)(async()=>{if(!en)return;let e=en.indexOf("::"),t=en.slice(0,e),s=en.slice(e+2);ex(!0),eu("");try{let e=await fetch("/api/resource-monitor/analyze",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({connectionId:t,model:s})}),a=await e.json().catch(()=>({}));if(!e.ok)throw Error(a.error||"Kh\xf4ng thể ph\xe2n t\xedch t\xe0i nguy\xean");ed(a.analysis)}catch(e){eu(e?.message||"Kh\xf4ng thể ph\xe2n t\xedch t\xe0i nguy\xean")}finally{ex(!1)}},[en]);(0,r.useEffect)(()=>{"ai"===n&&(async()=>{let e="";try{let t=await fetch("/api/resource-monitor/analyze",{cache:"no-store"}),s=await t.json().catch(()=>({}));t.ok&&(ed(s.analysis||null),e=s.selectedModel||"")}catch{}try{let t=await fetch("/api/resource-monitor/ai-models",{cache:"no-store"}),s=(await t.json().catch(()=>({}))).options||[];el(s),ei(t=>{let a=t||e;return a&&s.some(e=>e.value===a)?a:s[0]?.value||""})}catch{el([])}})()},[n]);let ej=(0,r.useMemo)(()=>o.find(e=>e.id===c)||null,[o,c]),ev=ej?.lastStatus,ey=N(ej),eN=ev?.disks?.[0],ew=m[c]||[],ek=async()=>{if(_){H(!0);try{if(!(await fetch(`/api/resource-monitor/${_.id}`,{method:"DELETE"})).ok)throw Error("Kh\xf4ng thể x\xf3a server");L(null),await ep()}catch(e){z({type:"error",text:e.message})}finally{H(!1)}}};return h?(0,a.jsxs)("div",{className:"flex min-h-[50vh] items-center justify-center text-text-muted",children:[(0,a.jsx)("span",{className:"material-symbols-outlined mr-2 animate-spin",children:"progress_activity"}),"Đang tải t\xe0i nguy\xean server..."]}):(0,a.jsxs)("div",{className:"space-y-6",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center justify-between gap-4",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("h2",{className:"text-xl font-semibold text-text-main",children:"Linux Resource Monitor"}),(0,a.jsx)("p",{className:"mt-1 text-sm text-text-muted",children:"Theo d\xf5i realtime CPU, RAM, disk, network v\xe0 to\xe0n bộ NVIDIA GPU."})]}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(g.default,{variant:"secondary",icon:"refresh",onClick:()=>"history"===n?eg():ep(),loading:"history"===n?Y:b,children:"L\xe0m mới"}),(0,a.jsx)(g.default,{icon:"add",onClick:()=>y(!0),disabled:es,children:"Th\xeam server"})]})]}),es?(0,a.jsx)("div",{className:"rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm text-blue-700 dark:text-blue-300",children:"Standby mode: Resource Monitor chỉ hiển thị snapshot từ Master. Node n\xe0y kh\xf4ng polling agent v\xe0 kh\xf4ng cho sửa danh s\xe1ch server."}):null,(0,a.jsxs)("div",{className:"flex w-fit rounded-xl border border-border bg-surface p-1 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("button",{type:"button",onClick:()=>i("realtime"),className:`flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition ${"realtime"===n?"bg-primary text-white shadow-sm":"text-text-muted hover:bg-surface-2 hover:text-text-main"}`,children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[19px]",children:"monitor_heart"}),"Realtime Monitor"]}),(0,a.jsxs)("button",{type:"button",onClick:()=>i("history"),className:`flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition ${"history"===n?"bg-primary text-white shadow-sm":"text-text-muted hover:bg-surface-2 hover:text-text-main"}`,children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[19px]",children:"query_stats"}),"History"]}),(0,a.jsxs)("button",{type:"button",onClick:()=>i("ai"),className:`flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition ${"ai"===n?"bg-primary text-white shadow-sm":"text-text-muted hover:bg-surface-2 hover:text-text-main"}`,children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[19px]",children:"neurology"}),"Đ\xe1nh gi\xe1 AI"]})]}),O?(0,a.jsxs)("div",{className:`flex items-center justify-between rounded-xl border px-4 py-3 text-sm ${"error"===O.type?"border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-300":"border-amber-500/20 bg-amber-500/10 text-amber-700 dark:text-amber-300"}`,children:[(0,a.jsx)("span",{children:O.text}),(0,a.jsx)("button",{onClick:()=>z(null),children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"close"})})]}):null,o.length?(0,a.jsxs)(a.Fragment,{children:["ai"!==n?(0,a.jsx)($,{servers:o,selectedId:c,onSelect:x}):null,"ai"===n?(0,a.jsx)(R,{modelOptions:er,selectedModel:en,onSelectModel:eb,analysis:eo,loading:ec,error:em,onAnalyze:ef,standby:es}):ej?"realtime"===n?(0,a.jsxs)("section",{className:"overflow-hidden rounded-3xl border border-border bg-surface shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-start justify-between gap-4 border-b border-border px-6 py-5",children:[(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-4",children:[(0,a.jsx)("div",{className:"flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[27px]",children:"dns"})}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(C,{online:ey}),(0,a.jsx)("h3",{className:"truncate text-lg font-semibold text-text-main",children:ej.name})]}),(0,a.jsxs)("div",{className:"mt-1 flex flex-wrap gap-x-3 text-xs text-text-muted",children:[(0,a.jsx)("span",{className:"font-mono",children:ej.host}),ev?.os?(0,a.jsx)("span",{children:ev.os}):null,ev?.uptimeSeconds?(0,a.jsxs)("span",{children:["Uptime ",(t=Math.floor((e=Number(ev.uptimeSeconds)||0)/86400),s=Math.floor(e%86400/3600),l=Math.floor(e%3600/60),t?`${t} ng\xe0y ${s} giờ`:s?`${s} giờ ${l} ph\xfat`:`${l} ph\xfat`)]}):null]})]})]}),(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("span",{className:`rounded-full px-3 py-1.5 text-xs font-semibold ${ey?"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400":"bg-red-500/10 text-red-600 dark:text-red-300"}`,children:ey?"Online":"Offline"}),es?null:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("button",{type:"button",onClick:()=>D(!0),className:"rounded-xl p-2 text-text-muted hover:bg-primary/10 hover:text-primary",title:"Sửa server v\xe0 c\xe0i lại agent",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[20px]",children:"edit"})}),(0,a.jsx)("button",{type:"button",onClick:()=>L(ej),className:"rounded-xl p-2 text-text-muted hover:bg-red-500/10 hover:text-red-500",title:"X\xf3a khỏi dashboard",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[20px]",children:"delete"})})]})]})]}),ey?null:(0,a.jsx)("div",{className:"m-6 rounded-2xl border border-amber-500/20 bg-amber-500/8 p-5",children:(0,a.jsxs)("div",{className:"flex gap-3",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-amber-500",children:"cloud_off"}),(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:"font-semibold text-text-main",children:"Kh\xf4ng kết nối được agent"}),(0,a.jsx)("p",{className:"mt-1 text-sm text-text-muted",children:ej.lastError||"Agent chưa gửi dữ liệu. Kiểm tra firewall v\xe0 agent port."}),ej.lastInstallLog?(0,a.jsxs)("details",{className:"mt-3",children:[(0,a.jsx)("summary",{className:"cursor-pointer text-xs font-semibold text-amber-600",children:"Xem log c\xe0i đặt"}),(0,a.jsx)("pre",{className:"mt-2 max-h-48 overflow-auto whitespace-pre-wrap rounded-xl bg-black/80 p-3 text-xs text-white",children:ej.lastInstallLog})]}):null]})]})}),ev?(0,a.jsxs)("div",{className:"space-y-7 p-6",children:[(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-5 flex items-center gap-2",children:[(0,a.jsx)("span",{className:"h-5 w-1 rounded-full bg-primary"}),(0,a.jsx)("h3",{className:"font-semibold text-text-main",children:"Tổng quan t\xe0i nguy\xean"}),(0,a.jsxs)("span",{className:"ml-auto text-xs text-text-muted",children:["Cập nhật ",S(ej.lastStatusAt)]})]}),(0,a.jsxs)("div",{className:"grid gap-5 sm:grid-cols-2 xl:grid-cols-4",children:[(0,a.jsx)(P,{value:ev.cpu?.usagePercent,label:"CPU",detail:`${ev.cpu?.cores||0} cores \xb7 Load ${ev.cpu?.load1??0}`,icon:"developer_board"}),(0,a.jsx)(P,{value:ev.memory?.usagePercent,label:"RAM",detail:`${k(ev.memory?.usedBytes)} / ${k(ev.memory?.totalBytes)}`,icon:"memory_alt"}),(0,a.jsx)(P,{value:eN?.usagePercent,label:"Disk /",detail:`${k(eN?.usedBytes)} / ${k(eN?.totalBytes)}`,icon:"hard_drive"}),(0,a.jsx)(P,{value:ev.gpus?.length?Math.max(...ev.gpus.map(e=>e.usagePercent||0)):0,label:ev.gpus?.length?`${ev.gpus.length} NVIDIA GPU`:"GPU",detail:ev.gpus?.length?`${ev.gpus.length} card được ph\xe1t hiện`:"Kh\xf4ng c\xf3 NVIDIA GPU",color:"#10b981",icon:"memory"})]})]}),(0,a.jsxs)("div",{className:"grid gap-4 sm:grid-cols-2 xl:grid-cols-4",children:[(0,a.jsx)(U,{icon:"developer_board",label:"CPU",value:ev.cpu?.model||`${ev.cpu?.cores||0} cores`,sublabel:`Load average ${ev.cpu?.load1??0} / ${ev.cpu?.load5??0} / ${ev.cpu?.load15??0}`}),(0,a.jsx)(U,{icon:"swap_vert",label:"Network realtime",value:`↓ ${k(ev.network?.rxBytesPerSecond)}/s`,sublabel:`↑ ${k(ev.network?.txBytesPerSecond)}/s`,colorClass:"text-cyan-500"}),(0,a.jsx)(U,{icon:"hard_drive",label:"Disk root",value:`${k(eN?.freeBytes)} trống`,sublabel:`${eN?.device||"root"} \xb7 ${eN?.filesystem||"filesystem"}`,colorClass:"text-violet-500"}),(0,a.jsx)(U,{icon:"memory",label:"Swap",value:k(ev.memory?.swapUsedBytes),sublabel:`Tổng ${k(ev.memory?.swapTotalBytes)}`,colorClass:"text-amber-500"})]}),(0,a.jsxs)("div",{className:"grid gap-5 xl:grid-cols-2",children:[(0,a.jsx)(M,{data:ew,dataKey:"cpu",label:"CPU usage",color:"#3b9dec"}),(0,a.jsx)(M,{data:ew,dataKey:"memory",label:"RAM usage",color:"#8b5cf6"})]}),(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-4 flex items-center gap-2",children:[(0,a.jsx)("span",{className:"h-5 w-1 rounded-full bg-emerald-500"}),(0,a.jsxs)("h3",{className:"font-semibold text-text-main",children:["NVIDIA GPU (",ev.gpus?.length||0,")"]})]}),ev.gpus?.length?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(I,{data:ew,gpus:ev.gpus}),(0,a.jsx)("div",{className:"grid gap-5 xl:grid-cols-2",children:ev.gpus.map(e=>(0,a.jsx)(E,{gpu:e},e.uuid||e.index))})]}):(0,a.jsxs)("div",{className:"rounded-2xl border border-dashed border-border bg-surface-2/40 py-10 text-center text-sm text-text-muted",children:["Kh\xf4ng ph\xe1t hiện NVIDIA GPU hoặc"," ",(0,a.jsx)("span",{className:"font-mono",children:"nvidia-smi"})," chưa sẵn s\xe0ng."]})]})]}):null]}):(0,a.jsx)(K,{server:ej,data:q,meta:X,period:V,onPeriodChange:W,loading:Y,error:ee}):null]}):(0,a.jsxs)("div",{className:"flex min-h-[460px] flex-col items-center justify-center rounded-3xl border border-dashed border-border bg-surface px-6 text-center",children:[(0,a.jsx)("div",{className:"flex h-20 w-20 items-center justify-center rounded-3xl bg-primary/10 text-primary",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[42px]",children:"monitor_heart"})}),(0,a.jsx)("h3",{className:"mt-6 text-xl font-semibold text-text-main",children:"Chưa c\xf3 Linux server"}),(0,a.jsx)("p",{className:"mt-2 max-w-lg text-sm leading-6 text-text-muted",children:"Th\xeam server bằng t\xe0i khoản SSH c\xf3 quyền sudo. BlueRouter sẽ tự c\xe0i agent systemd v\xe0 bắt đầu hiển thị t\xe0i nguy\xean ngay tại đ\xe2y."}),es?null:(0,a.jsx)(g.default,{className:"mt-6",icon:"add",onClick:()=>y(!0),children:"Th\xeam server đầu ti\xean"})]}),(0,a.jsx)(F,{open:v&&!es,onClose:()=>y(!1),onCreated:async(e,t)=>{t&&!t.ok&&z({type:"warning",text:"Đ\xe3 lưu server nhưng c\xe0i agent chưa th\xe0nh c\xf4ng. Mở server để xem log."}),await ep()}}),(0,a.jsx)(G,{open:T&&!es,server:ej,onClose:()=>D(!1),onUpdated:async(e,t)=>{t&&!t.ok&&z({type:"warning",text:"Đ\xe3 lưu server nhưng c\xe0i lại agent chưa th\xe0nh c\xf4ng. Mở server để xem log."}),await ep()}}),(0,a.jsx)(f.ConfirmModal,{isOpen:!!_,onClose:()=>L(null),onConfirm:ek,loading:B,variant:"danger",title:"X\xf3a server khỏi dashboard?",confirmText:"X\xf3a server",cancelText:"Hủy",message:"Server sẽ ngừng được theo d\xf5i. Agent systemd tr\xean Linux kh\xf4ng bị gỡ tự động."})]})}},96413:(e,t,s)=>{Promise.resolve().then(s.bind(s,86243))}},e=>{e.O(0,[506,6483,7033,8441,3794,7358],()=>e(e.s=96413)),_N_E=e.O()}]);
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1205],{86243:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>H});var a=s(95155),r=s(12115),l=s(1728),n=s(90639),i=s(28408),o=s(32539),d=s(59656),c=s(65671),x=s(34122),m=s(16746),u=s(96647),h=s(29010),p=s(56061),g=s(92542),b=s(11910),f=s(81127),j=s(98);let v={name:"",host:"",sshPort:"22",sshUser:"",sshPassword:"",useSudo:!0,sudoPassword:"",agentPort:"19998",installAgent:!0};function y(e){return{name:e?.name||"",host:e?.host||"",sshPort:String(e?.sshPort||22),sshUser:e?.sshUser||"",sshPassword:"",useSudo:e?.useSudo!==!1,sudoPassword:"",agentPort:String(e?.agentPort||19998),installAgent:!0}}function N(e){var t;let s;return!!e?.lastStatus&&(!e.lastError||Date.now()-(Number.isFinite(s=(t=e?.lastStatusAt)?new Date(t).getTime():0)?s:0)<=3e4)}function w(e){return Math.max(0,Math.min(100,Number(e)||0))}function k(e,t=1){let s=Number(e)||0;if(!s)return"0 B";let a=["B","KB","MB","GB","TB","PB"],r=Math.min(a.length-1,Math.floor(Math.log(s)/Math.log(1024)));return`${(s/1024**r).toFixed(r>2?t:0)} ${a[r]}`}function S(e){return e?new Date(e).toLocaleTimeString("vi-VN",{hour12:!1}):"--:--:--"}function P({value:e,label:t,detail:s,color:r="var(--color-brand-500)",icon:l}){let n=w(e),i=2*Math.PI*49;return(0,a.jsxs)("div",{className:"flex min-w-0 flex-col items-center",children:[(0,a.jsxs)("div",{className:"relative h-36 w-36",children:[(0,a.jsxs)("svg",{className:"h-full w-full -rotate-90",viewBox:"0 0 120 120","aria-hidden":"true",children:[(0,a.jsx)("circle",{cx:"60",cy:"60",r:49,fill:"none",stroke:"var(--color-surface-2)",strokeWidth:"8"}),(0,a.jsx)("circle",{cx:"60",cy:"60",r:49,fill:"none",stroke:r,strokeWidth:"8",strokeLinecap:"round",strokeDasharray:i,strokeDashoffset:i*(1-n/100),className:"transition-all duration-700"})]}),(0,a.jsxs)("div",{className:"absolute inset-0 flex flex-col items-center justify-center text-center",children:[l?(0,a.jsx)("span",{className:"material-symbols-outlined mb-0.5 text-[19px] text-text-muted",children:l}):null,(0,a.jsxs)("strong",{className:"text-2xl font-semibold tracking-tight text-text-main",children:[n.toFixed(+(n<10)),"%"]}),(0,a.jsx)("span",{className:"mt-0.5 text-xs font-medium text-text-muted",children:t})]})]}),(0,a.jsx)("div",{className:"mt-2 max-w-full truncate text-center text-xs text-text-subtle",title:s,children:s})]})}function C({online:e}){return(0,a.jsx)("span",{className:`h-2.5 w-2.5 shrink-0 rounded-full ${e?"bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,.12)]":"bg-red-400 shadow-[0_0_0_4px_rgba(248,113,113,.12)]"}`})}function $({servers:e,selectedId:t,onSelect:s}){return(0,a.jsx)("div",{className:"flex gap-3 overflow-x-auto pb-1 scroll-thin-x",children:e.map(e=>{let r=e.id===t,l=N(e);return(0,a.jsxs)("button",{type:"button",onClick:()=>s(e.id),className:`min-w-[420px] rounded-2xl border p-5 text-left transition ${r?"border-primary bg-primary/5 shadow-[var(--shadow-warm)]":"border-border bg-surface hover:border-primary/40"}`,children:[(0,a.jsxs)("div",{className:"flex items-start justify-between gap-3",children:[(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(C,{online:l}),(0,a.jsx)("div",{className:"truncate text-base font-semibold text-text-main",children:e.name})]}),(0,a.jsxs)("div",{className:"mt-1.5 truncate font-mono text-sm text-text-muted",children:[e.host,":",e.agentPort]})]}),(0,a.jsx)("span",{className:"material-symbols-outlined text-[22px] text-text-subtle",children:"dns"})]}),(0,a.jsxs)("div",{className:"mt-3 flex items-center justify-between text-sm text-text-muted",children:[(0,a.jsx)("span",{children:l?"Đang hoạt động":"Mất kết nối"}),(0,a.jsx)("span",{children:S(e.lastStatusAt)})]})]},e.id)})})}function U({icon:e,label:t,value:s,sublabel:r,colorClass:l="text-primary",children:n}){return(0,a.jsxs)("div",{className:"rounded-2xl border border-border bg-surface p-4 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"flex items-center gap-3",children:[(0,a.jsx)("div",{className:`flex h-10 w-10 items-center justify-center rounded-xl bg-surface-2 ${l}`,children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[22px]",children:e})}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsx)("div",{className:"text-xs font-medium uppercase tracking-wider text-text-muted",children:t}),(0,a.jsx)("div",{className:"mt-0.5 truncate text-lg font-semibold text-text-main",children:s})]})]}),r?(0,a.jsx)("div",{className:"mt-3 truncate text-xs text-text-subtle",children:r}):null,n]})}function M({data:e,dataKey:t,label:s,color:r,unit:m="%"}){return(0,a.jsxs)("div",{className:"rounded-2xl border border-border bg-surface p-5 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,a.jsx)("h3",{className:"font-semibold text-text-main",children:s}),(0,a.jsx)("span",{className:"text-xs text-text-muted",children:"60 mẫu gần nhất"})]}),(0,a.jsx)("div",{className:"h-44",children:(0,a.jsx)(l.u,{width:"100%",height:"100%",children:(0,a.jsxs)(n.Q,{data:e,margin:{top:6,right:4,left:-22,bottom:0},children:[(0,a.jsx)("defs",{children:(0,a.jsxs)("linearGradient",{id:`fill-${t}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,a.jsx)("stop",{offset:"0%",stopColor:r,stopOpacity:.3}),(0,a.jsx)("stop",{offset:"100%",stopColor:r,stopOpacity:.02})]})}),(0,a.jsx)(i.d,{stroke:"var(--color-border-subtle)",strokeDasharray:"4 4",vertical:!1}),(0,a.jsx)(o.W,{dataKey:"time",hide:!0}),(0,a.jsx)(d.h,{domain:[0,"auto"],tick:{fill:"var(--color-text-subtle)",fontSize:11},axisLine:!1,tickLine:!1}),(0,a.jsx)(c.m,{contentStyle:{background:"var(--color-surface)",border:"1px solid var(--color-border)",borderRadius:12,fontSize:12},formatter:e=>[`${Number(e).toFixed(1)}${m}`,s]}),(0,a.jsx)(x.Gk,{type:"monotone",dataKey:t,stroke:r,fill:`url(#fill-${t})`,strokeWidth:2.2,dot:!1,isAnimationActive:!1})]})})})]})}let T=["#10b981","#06b6d4","#8b5cf6","#f59e0b","#ef4444","#3b82f6","#ec4899","#84cc16"];function A(e){return e?.uuid||`index-${e?.index??0}`}function I({data:e,gpus:t}){let s=(t||[]).map((e,t)=>({id:A(e),dataKey:`gpu${t}`,name:`GPU ${e.index} \xb7 ${e.name}`,color:T[t%T.length]})),r=e.map(e=>{let t={time:e.time};return s.forEach(s=>{let a=e.gpus?.find(e=>e.id===s.id);t[s.dataKey]=a?.usagePercent??null}),t});return(0,a.jsxs)("div",{className:"mb-5 rounded-2xl border border-border bg-surface p-5 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"mb-4 flex flex-wrap items-start justify-between gap-2",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("h4",{className:"font-semibold text-text-main",children:"GPU usage history"}),(0,a.jsx)("p",{className:"mt-1 text-xs text-text-muted",children:"Mỗi đường biểu diễn mức tải realtime của một NVIDIA GPU."})]}),(0,a.jsx)("span",{className:"rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-600 dark:text-emerald-400",children:"60 mẫu gần nhất"})]}),(0,a.jsx)("div",{className:"h-64",children:(0,a.jsx)(l.u,{width:"100%",height:"100%",children:(0,a.jsxs)(m.b,{data:r,margin:{top:8,right:12,left:-16,bottom:2},children:[(0,a.jsx)(i.d,{stroke:"var(--color-border-subtle)",strokeDasharray:"4 4",vertical:!1}),(0,a.jsx)(o.W,{dataKey:"time",tickFormatter:S,minTickGap:36,tick:{fill:"var(--color-text-subtle)",fontSize:11},axisLine:!1,tickLine:!1}),(0,a.jsx)(d.h,{domain:[0,100],ticks:[0,25,50,75,100],tickFormatter:e=>`${e}%`,tick:{fill:"var(--color-text-subtle)",fontSize:11},axisLine:!1,tickLine:!1}),(0,a.jsx)(c.m,{contentStyle:{background:"var(--color-surface)",border:"1px solid var(--color-border)",borderRadius:12,fontSize:12},labelFormatter:e=>`Thời gian ${S(e)}`,formatter:(e,t)=>[`${Number(e).toFixed(1)}%`,t]}),(0,a.jsx)(u.s,{iconType:"circle",iconSize:8,wrapperStyle:{fontSize:12,paddingTop:12},formatter:e=>(0,a.jsx)("span",{className:"text-text-muted",children:e})}),s.map(e=>(0,a.jsx)(h.N1,{type:"monotone",dataKey:e.dataKey,name:e.name,stroke:e.color,strokeWidth:2.4,dot:!1,connectNulls:!1,isAnimationActive:!1},e.id))]})})})]})}let D=[{value:"1h",label:"1 giờ"},{value:"6h",label:"6 giờ"},{value:"24h",label:"24 giờ"},{value:"7d",label:"7 ng\xe0y"},{value:"30d",label:"30 ng\xe0y"}];function _(e){return e?new Date(e).toLocaleString("vi-VN",{day:"2-digit",month:"2-digit",hour:"2-digit",minute:"2-digit",hour12:!1}):"—"}function L({title:e,description:t,data:s,series:r,domain:n=[0,100],valueFormatter:x=e=>`${Number(e).toFixed(1)}%`,axisFormatter:p=e=>`${e}%`}){return(0,a.jsxs)("div",{className:"rounded-2xl border border-border bg-surface p-5 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"mb-4",children:[(0,a.jsx)("h4",{className:"font-semibold text-text-main",children:e}),t?(0,a.jsx)("p",{className:"mt-1 text-xs text-text-muted",children:t}):null]}),(0,a.jsx)("div",{className:"h-64",children:(0,a.jsx)(l.u,{width:"100%",height:"100%",children:(0,a.jsxs)(m.b,{data:s,margin:{top:8,right:12,left:-8,bottom:2},children:[(0,a.jsx)(i.d,{stroke:"var(--color-border-subtle)",strokeDasharray:"4 4",vertical:!1}),(0,a.jsx)(o.W,{dataKey:"time",tickFormatter:_,minTickGap:48,tick:{fill:"var(--color-text-subtle)",fontSize:10},axisLine:!1,tickLine:!1}),(0,a.jsx)(d.h,{domain:n,tickFormatter:p,width:58,tick:{fill:"var(--color-text-subtle)",fontSize:10},axisLine:!1,tickLine:!1}),(0,a.jsx)(c.m,{contentStyle:{background:"var(--color-surface)",border:"1px solid var(--color-border)",borderRadius:12,fontSize:12},labelFormatter:e=>_(e),formatter:(e,t)=>[x(e),t]}),(0,a.jsx)(u.s,{iconType:"circle",iconSize:8,wrapperStyle:{fontSize:12,paddingTop:12},formatter:e=>(0,a.jsx)("span",{className:"text-text-muted",children:e})}),r.map(e=>(0,a.jsx)(h.N1,{type:"monotone",dataKey:e.key,name:e.name,stroke:e.color,strokeWidth:2.2,dot:!1,connectNulls:!1,isAnimationActive:!1},e.key))]})})})]})}function K({server:e,data:t,meta:s,period:l,onPeriodChange:n,loading:i,error:o}){let d=(0,r.useMemo)(()=>{let e=new Map;return t.forEach(t=>{(t.gpus||[]).forEach(t=>{e.has(t.id)||e.set(t.id,t)})}),[...e.values()].map((e,t)=>({id:e.id,key:`gpu${t}`,name:`GPU ${e.index} \xb7 ${e.name}`,color:T[t%T.length]}))},[t]),c=(0,r.useCallback)(e=>t.map(t=>{let s={time:t.time};return d.forEach(a=>{let r=t.gpus?.find(e=>e.id===a.id);s[a.key]=r?.[e]??null}),s}),[t,d]);return(0,a.jsxs)("section",{className:"overflow-hidden rounded-3xl border border-border bg-surface shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center justify-between gap-4 border-b border-border px-6 py-5",children:[(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-4",children:[(0,a.jsx)("div",{className:"flex h-12 w-12 items-center justify-center rounded-2xl bg-violet-500/10 text-violet-500",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[27px]",children:"monitoring"})}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("h3",{className:"truncate text-lg font-semibold text-text-main",children:["Lịch sử \xb7 ",e.name]}),(0,a.jsxs)("p",{className:"mt-1 text-xs text-text-muted",children:["Sample mỗi ph\xfat \xb7 lưu tối đa ",s?.retentionDays||30," ng\xe0y"]})]})]}),(0,a.jsx)("div",{className:"flex flex-wrap gap-1 rounded-xl bg-surface-2 p-1",children:D.map(e=>(0,a.jsx)("button",{type:"button",onClick:()=>n(e.value),className:`rounded-lg px-3 py-2 text-xs font-semibold transition ${l===e.value?"bg-surface text-primary shadow-sm":"text-text-muted hover:text-text-main"}`,children:e.label},e.value))})]}),i?(0,a.jsxs)("div",{className:"flex min-h-[420px] items-center justify-center text-sm text-text-muted",children:[(0,a.jsx)("span",{className:"material-symbols-outlined mr-2 animate-spin",children:"progress_activity"}),"Đang tải dữ liệu lịch sử..."]}):o?(0,a.jsx)("div",{className:"m-6 rounded-2xl border border-red-500/20 bg-red-500/10 p-5 text-sm text-red-600 dark:text-red-300",children:o}):t.length?(0,a.jsxs)("div",{className:"space-y-5 p-6",children:[(0,a.jsxs)("div",{className:"grid gap-4 sm:grid-cols-3",children:[(0,a.jsx)(U,{icon:"database",label:"Số điểm hiển thị",value:t.length.toLocaleString("vi-VN"),sublabel:`Bucket ${s?.bucketMinutes||1} ph\xfat`,colorClass:"text-violet-500"}),(0,a.jsx)(U,{icon:"date_range",label:"Từ thời điểm",value:_(t[0]?.time),sublabel:"Điểm đầu ti\xean trong khoảng đ\xe3 chọn",colorClass:"text-cyan-500"}),(0,a.jsx)(U,{icon:"memory",label:"NVIDIA GPU",value:`${d.length} card`,sublabel:"Theo d\xf5i ri\xeang bằng GPU UUID",colorClass:"text-emerald-500"})]}),(0,a.jsxs)("div",{className:"grid gap-5 xl:grid-cols-2",children:[(0,a.jsx)(L,{title:"CPU, RAM & Disk usage",description:"Tỷ lệ sử dụng t\xe0i nguy\xean hệ thống theo thời gian.",data:t,series:[{key:"cpu",name:"CPU",color:"#3b9dec"},{key:"memory",name:"RAM",color:"#8b5cf6"},{key:"disk",name:"Disk",color:"#f59e0b"}]}),(0,a.jsx)(L,{title:"Network throughput",description:"Tốc độ nhận v\xe0 gửi trung b\xecnh trong mỗi bucket.",data:t,domain:[0,"auto"],series:[{key:"networkRxBps",name:"Download",color:"#06b6d4"},{key:"networkTxBps",name:"Upload",color:"#ec4899"}],valueFormatter:e=>`${k(e)}/s`,axisFormatter:e=>k(e)})]}),d.length?(0,a.jsxs)("div",{className:"grid gap-5 xl:grid-cols-2",children:[(0,a.jsx)(L,{title:"NVIDIA GPU usage",description:"Mức tải của từng GPU, ph\xe2n biệt theo UUID.",data:c("usagePercent"),series:d}),(0,a.jsx)(L,{title:"GPU VRAM usage",description:"Phần trăm VRAM đ\xe3 sử dụng tr\xean từng card.",data:c("memoryUsagePercent"),series:d}),(0,a.jsx)(L,{title:"GPU temperature",description:"Nhiệt độ trung b\xecnh của từng card trong mỗi bucket.",data:c("temperatureC"),domain:[0,"auto"],series:d,valueFormatter:e=>`${Number(e).toFixed(1)}\xb0C`,axisFormatter:e=>`${e}\xb0`}),(0,a.jsx)(L,{title:"GPU power draw",description:"C\xf4ng suất ti\xeau thụ trung b\xecnh của từng card.",data:c("powerDrawW"),domain:[0,"auto"],series:d,valueFormatter:e=>`${Number(e).toFixed(1)} W`,axisFormatter:e=>`${e}W`})]}):null]}):(0,a.jsxs)("div",{className:"flex min-h-[420px] flex-col items-center justify-center px-6 text-center",children:[(0,a.jsx)("div",{className:"flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-500/10 text-violet-500",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[34px]",children:"hourglass_empty"})}),(0,a.jsx)("h4",{className:"mt-5 font-semibold text-text-main",children:"Chưa c\xf3 dữ liệu lịch sử"}),(0,a.jsx)("p",{className:"mt-2 max-w-md text-sm leading-6 text-text-muted",children:"Collector đ\xe3 được bật v\xe0 sẽ ghi mẫu đầu ti\xean trong v\xf2ng một ph\xfat. Dữ liệu vẫn tiếp tục được thu thập khi kh\xf4ng mở dashboard."})]})]})}function E({gpu:e}){let t=w(e.memoryUsagePercent);return(0,a.jsxs)("div",{className:"overflow-hidden rounded-2xl border border-border bg-surface shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"flex items-center justify-between border-b border-border-subtle bg-gradient-to-r from-emerald-500/8 to-cyan-500/5 px-5 py-4",children:[(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-3",children:[(0,a.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-500",children:(0,a.jsx)("span",{className:"material-symbols-outlined",children:"memory"})}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("div",{className:"truncate font-semibold text-text-main",children:["GPU ",e.index," \xb7 ",e.name]}),(0,a.jsxs)("div",{className:"mt-0.5 text-xs text-text-muted",children:["NVIDIA Driver ",e.driverVersion||"—"]})]})]}),(0,a.jsx)("span",{className:"rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-400",children:"NVIDIA"})]}),(0,a.jsxs)("div",{className:"grid gap-5 p-5 sm:grid-cols-[150px_1fr]",children:[(0,a.jsx)(P,{value:e.usagePercent,label:"GPU Load",detail:`${e.temperatureC??"—"}\xb0C`,color:"#10b981"}),(0,a.jsxs)("div",{className:"space-y-5",children:[(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-2 flex items-center justify-between text-sm",children:[(0,a.jsx)("span",{className:"text-text-muted",children:"VRAM"}),(0,a.jsxs)("span",{className:"font-semibold text-text-main",children:[k(1048576*(e.memoryUsedMb||0))," /"," ",k(1048576*(e.memoryTotalMb||0))]})]}),(0,a.jsx)("div",{className:"h-2.5 overflow-hidden rounded-full bg-surface-2",children:(0,a.jsx)("div",{className:"h-full rounded-full bg-emerald-500 transition-all duration-700",style:{width:`${t}%`}})}),(0,a.jsxs)("div",{className:"mt-1.5 text-right text-xs text-text-subtle",children:[t.toFixed(1),"% đ\xe3 d\xf9ng"]})]}),(0,a.jsxs)("div",{className:"grid grid-cols-2 gap-3",children:[(0,a.jsxs)("div",{className:"rounded-xl bg-surface-2 p-3",children:[(0,a.jsx)("div",{className:"text-xs text-text-muted",children:"Nhiệt độ"}),(0,a.jsxs)("div",{className:"mt-1 text-lg font-semibold text-text-main",children:[e.temperatureC??"—","\xb0C"]})]}),(0,a.jsxs)("div",{className:"rounded-xl bg-surface-2 p-3",children:[(0,a.jsx)("div",{className:"text-xs text-text-muted",children:"C\xf4ng suất"}),(0,a.jsxs)("div",{className:"mt-1 text-lg font-semibold text-text-main",children:[e.powerDrawW??"—",(0,a.jsxs)("span",{className:"text-xs font-normal text-text-muted",children:[" ","/ ",e.powerLimitW??"—"," W"]})]})]})]})]})]})]})}function F({open:e,onClose:t,onCreated:s}){let[l,n]=(0,r.useState)(v),[i,o]=(0,r.useState)(!1),[d,c]=(0,r.useState)(""),x=(e,t)=>n(s=>({...s,[e]:t}));(0,r.useEffect)(()=>{e&&(n(v),c(""))},[e]);let m=async e=>{e.preventDefault(),o(!0),c("");try{let e=await fetch("/api/resource-monitor",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(l)}),a=await e.json().catch(()=>({}));if(!e.ok)throw Error(a.error||"Kh\xf4ng thể th\xeam server");await s(a.server,a.install),t()}catch(e){c(e?.message||"Kh\xf4ng thể th\xeam server")}finally{o(!1)}};return(0,a.jsx)(f.default,{isOpen:e,onClose:t,title:"Th\xeam Linux server",size:"xl",busy:i,footer:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(g.default,{variant:"ghost",onClick:t,disabled:i,children:"Hủy"}),(0,a.jsx)(g.default,{onClick:m,loading:i,icon:"rocket_launch",children:"C\xe0i agent & th\xeam server"})]}),children:(0,a.jsxs)("form",{onSubmit:m,className:"space-y-5",children:[(0,a.jsx)("div",{className:"rounded-xl border border-primary/20 bg-primary/5 p-4 text-sm text-text-muted",children:(0,a.jsxs)("div",{className:"flex gap-3",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-primary",children:"auto_fix_high"}),(0,a.jsx)("p",{children:"BlueRouter sẽ SSH v\xe0o m\xe1y, d\xf9ng quyền sudo để c\xe0i Python agent dưới dạng systemd service. Sau lần n\xe0y bạn kh\xf4ng cần thao t\xe1c th\xeam tr\xean Linux."})]})}),(0,a.jsxs)("div",{className:"grid gap-4 sm:grid-cols-2",children:[(0,a.jsx)(b.default,{label:"T\xean hiển thị",value:l.name,onChange:e=>x("name",e.target.value),placeholder:"GPU Worker 01",icon:"dns"}),(0,a.jsx)(b.default,{required:!0,label:"Hostname / IP",value:l.host,onChange:e=>x("host",e.target.value),placeholder:"192.168.1.50",icon:"lan"}),(0,a.jsx)(b.default,{required:!0,label:"SSH user",value:l.sshUser,onChange:e=>x("sshUser",e.target.value),placeholder:"ubuntu",icon:"person"}),(0,a.jsx)(b.default,{label:"SSH port",type:"number",value:l.sshPort,onChange:e=>x("sshPort",e.target.value)}),(0,a.jsx)(b.default,{label:"SSH password",type:"password",value:l.sshPassword,onChange:e=>x("sshPassword",e.target.value),placeholder:"Để trống nếu d\xf9ng SSH key",hint:"Chỉ d\xf9ng trong l\xfac c\xe0i, kh\xf4ng lưu v\xe0o database."}),(0,a.jsx)(b.default,{label:"Agent port",type:"number",value:l.agentPort,onChange:e=>x("agentPort",e.target.value),hint:"Mặc định 19998; dashboard server phải truy cập được port n\xe0y."})]}),(0,a.jsxs)("label",{className:"flex cursor-pointer items-start gap-3 rounded-xl border border-border bg-surface-2/60 p-4",children:[(0,a.jsx)("input",{type:"checkbox",checked:l.useSudo,onChange:e=>x("useSudo",e.target.checked),className:"mt-1 h-4 w-4"}),(0,a.jsxs)("span",{children:[(0,a.jsx)("span",{className:"block text-sm font-semibold text-text-main",children:"User cần sudo để c\xe0i service"}),(0,a.jsx)("span",{className:"mt-1 block text-xs text-text-muted",children:"Tắt nếu đăng nhập trực tiếp bằng root."})]})]}),l.useSudo?(0,a.jsx)(b.default,{label:"Sudo password",type:"password",value:l.sudoPassword,onChange:e=>x("sudoPassword",e.target.value),placeholder:"Mặc định d\xf9ng c\xf9ng SSH password"}):null,d?(0,a.jsx)("div",{className:"rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-300",children:d}):null]})})}function G({open:e,server:t,onClose:s,onUpdated:l}){let[n,i]=(0,r.useState)(y(t)),[o,d]=(0,r.useState)(!1),[c,x]=(0,r.useState)(""),m=(e,t)=>i(s=>({...s,[e]:t}));(0,r.useEffect)(()=>{e&&(i(y(t)),x(""))},[e,t]);let u=async e=>{if(e.preventDefault(),t?.id){d(!0),x("");try{let e=await fetch(`/api/resource-monitor/${t.id}`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:n.name,host:n.host,sshPort:n.sshPort,sshUser:n.sshUser,useSudo:n.useSudo,agentPort:n.agentPort})}),a=await e.json().catch(()=>({}));if(!e.ok)throw Error(a.error||"Kh\xf4ng thể lưu server");let r=null;if(n.installAgent){let e=await fetch(`/api/resource-monitor/${t.id}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({sshPassword:n.sshPassword,sudoPassword:n.sudoPassword})}),s=await e.json().catch(()=>({}));r={ok:e.ok&&!1!==s.ok,log:s.log,error:s.error}}await l(a.server,r),s()}catch(e){x(e?.message||"Kh\xf4ng thể cập nhật server")}finally{d(!1)}}};return(0,a.jsx)(f.default,{isOpen:e,onClose:s,title:"Sửa Linux server",size:"xl",busy:o,footer:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(g.default,{variant:"ghost",onClick:s,disabled:o,children:"Hủy"}),(0,a.jsx)(g.default,{onClick:u,loading:o,icon:"save",children:"Lưu & c\xe0i lại agent"})]}),children:(0,a.jsxs)("form",{onSubmit:u,className:"space-y-5",children:[(0,a.jsxs)("div",{className:"grid gap-4 sm:grid-cols-2",children:[(0,a.jsx)(b.default,{label:"T\xean hiển thị",value:n.name,onChange:e=>m("name",e.target.value),placeholder:"GPU Worker 01",icon:"dns"}),(0,a.jsx)(b.default,{required:!0,label:"Hostname / IP",value:n.host,onChange:e=>m("host",e.target.value),placeholder:"192.168.1.50",icon:"lan"}),(0,a.jsx)(b.default,{required:!0,label:"SSH user",value:n.sshUser,onChange:e=>m("sshUser",e.target.value),placeholder:"ubuntu",icon:"person"}),(0,a.jsx)(b.default,{label:"SSH port",type:"number",value:n.sshPort,onChange:e=>m("sshPort",e.target.value)}),(0,a.jsx)(b.default,{label:"SSH password",type:"password",value:n.sshPassword,onChange:e=>m("sshPassword",e.target.value),placeholder:"Nhập lại nếu trước đ\xf3 sai",hint:"Chỉ d\xf9ng để c\xe0i lại agent, kh\xf4ng lưu v\xe0o database."}),(0,a.jsx)(b.default,{label:"Agent port",type:"number",value:n.agentPort,onChange:e=>m("agentPort",e.target.value)})]}),(0,a.jsxs)("label",{className:"flex cursor-pointer items-start gap-3 rounded-xl border border-border bg-surface-2/60 p-4",children:[(0,a.jsx)("input",{type:"checkbox",checked:n.useSudo,onChange:e=>m("useSudo",e.target.checked),className:"mt-1 h-4 w-4"}),(0,a.jsxs)("span",{children:[(0,a.jsx)("span",{className:"block text-sm font-semibold text-text-main",children:"User cần sudo để c\xe0i service"}),(0,a.jsx)("span",{className:"mt-1 block text-xs text-text-muted",children:"Tắt nếu đăng nhập trực tiếp bằng root."})]})]}),n.useSudo?(0,a.jsx)(b.default,{label:"Sudo password",type:"password",value:n.sudoPassword,onChange:e=>m("sudoPassword",e.target.value),placeholder:"Mặc định d\xf9ng c\xf9ng SSH password"}):null,(0,a.jsxs)("label",{className:"flex cursor-pointer items-start gap-3 rounded-xl border border-border bg-surface-2/60 p-4",children:[(0,a.jsx)("input",{type:"checkbox",checked:n.installAgent,onChange:e=>m("installAgent",e.target.checked),className:"mt-1 h-4 w-4"}),(0,a.jsxs)("span",{children:[(0,a.jsx)("span",{className:"block text-sm font-semibold text-text-main",children:"C\xe0i lại agent sau khi lưu"}),(0,a.jsx)("span",{className:"mt-1 block text-xs text-text-muted",children:"Bật mục n\xe0y khi cần nhập lại account/password SSH hoặc đổi port."})]})]}),c?(0,a.jsx)("div",{className:"rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-300",children:c}):null]})})}let B={normal:{variant:"success",label:"B\xecnh thường"},warning:{variant:"warning",label:"Cảnh b\xe1o"},critical:{variant:"error",label:"Qu\xe1 tải"},unknown:{variant:"default",label:"Kh\xf4ng r\xf5"}};function R({modelOptions:e,selectedModel:t,onSelectModel:s,analysis:r,loading:l,error:n,onAnalyze:i,standby:o}){return(0,a.jsxs)("section",{className:"overflow-hidden rounded-3xl border border-border bg-surface shadow-[var(--shadow-soft)]",children:[(0,a.jsx)("div",{className:"flex flex-wrap items-center justify-between gap-4 border-b border-border px-6 py-5",children:(0,a.jsxs)("div",{className:"flex items-center gap-4",children:[(0,a.jsx)("div",{className:"flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[27px]",children:"neurology"})}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h3",{className:"text-lg font-semibold text-text-main",children:"Đ\xe1nh gi\xe1 AI t\xecnh trạng server"}),(0,a.jsx)("p",{className:"mt-0.5 text-xs text-text-muted",children:"Ph\xe2n t\xedch giờ l\xe0m việc h\xf4m nay (8:00 - 18:00) tr\xean to\xe0n bộ Linux server."})]})]})}),(0,a.jsxs)("div",{className:"space-y-5 p-6",children:[o?(0,a.jsx)("div",{className:"rounded-xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-700 dark:text-amber-300",children:"Standby mode: kết quả ph\xe2n t\xedch được đồng bộ tự động từ Master. Node n\xe0y kh\xf4ng tự chạy ph\xe2n t\xedch AI."}):null,(0,a.jsxs)("div",{className:"flex flex-wrap items-end gap-3",children:[(0,a.jsx)(j.default,{className:"min-w-[280px] flex-1",label:"AI model d\xf9ng để ph\xe2n t\xedch",options:e,value:t,onChange:e=>s(e.target.value),placeholder:e.length?"Chọn model":"Chưa c\xf3 kết nối AI n\xe0o đang hoạt động",disabled:!e.length||o}),(0,a.jsx)(g.default,{icon:"auto_awesome",onClick:i,loading:l,disabled:!t||o,children:"Ph\xe2n t\xedch lại"})]}),n?(0,a.jsx)("div",{className:"rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-300",children:n}):null,r?(0,a.jsxs)("div",{className:"space-y-5",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center justify-between gap-2 text-xs text-text-muted",children:[(0,a.jsxs)("span",{children:["Model: ",(0,a.jsx)("span",{className:"font-semibold",children:r.modelLabel})]}),(0,a.jsxs)("span",{children:["Cập nhật l\xfac ",S(r.generatedAt)]})]}),(0,a.jsx)("div",{className:"whitespace-pre-wrap rounded-2xl border border-border bg-surface-2/40 p-5 text-sm leading-6 text-text-main",children:r.summary}),r.servers?.length?(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-3 flex items-center gap-2",children:[(0,a.jsx)("span",{className:"h-5 w-1 rounded-full bg-primary"}),(0,a.jsx)("h4",{className:"font-semibold text-text-main",children:"Trạng th\xe1i từng server"})]}),(0,a.jsx)("div",{className:"grid gap-3 sm:grid-cols-2 xl:grid-cols-3",children:r.servers.map(e=>{let t=B[e.status]||B.unknown;return(0,a.jsxs)("div",{className:"flex items-center justify-between rounded-xl border border-border bg-surface px-4 py-3",children:[(0,a.jsx)("span",{className:"truncate text-sm font-medium text-text-main",children:e.name}),(0,a.jsx)(p.default,{variant:t.variant,dot:!0,children:t.label})]},e.serverId)})})]}):null]}):l?null:(0,a.jsx)("div",{className:"rounded-2xl border border-dashed border-border bg-surface-2/40 py-10 text-center text-sm text-text-muted",children:'Chưa c\xf3 ph\xe2n t\xedch n\xe0o — bấm "Ph\xe2n t\xedch lại" để bắt đầu.'})]})]})}function H(){let e,t,s,l,[n,i]=(0,r.useState)("realtime"),[o,d]=(0,r.useState)([]),[c,x]=(0,r.useState)(""),[m,u]=(0,r.useState)({}),[h,p]=(0,r.useState)(!0),[b,j]=(0,r.useState)(!1),[v,y]=(0,r.useState)(!1),[T,D]=(0,r.useState)(!1),[_,L]=(0,r.useState)(null),[B,H]=(0,r.useState)(!1),[O,z]=(0,r.useState)(null),[V,W]=(0,r.useState)("24h"),[q,J]=(0,r.useState)([]),[X,Q]=(0,r.useState)(null),[Y,Z]=(0,r.useState)(!1),[ee,et]=(0,r.useState)(""),[es,ea]=(0,r.useState)(!1),[er,el]=(0,r.useState)([]),[en,ei]=(0,r.useState)(""),[eo,ed]=(0,r.useState)(null),[ec,ex]=(0,r.useState)(!1),[em,eu]=(0,r.useState)(""),eh=(0,r.useRef)(0),ep=(0,r.useCallback)(async({quiet:e=!1}={})=>{e||j(!0);try{let e=await fetch("/api/resource-monitor",{cache:"no-store"}),t=await e.json().catch(()=>({}));if(!e.ok)throw Error(t.error||"Kh\xf4ng tải được server");let s=t.servers||[];ea(!0===t.standby),d(s),x(e=>e&&s.some(t=>t.id===e)?e:s[0]?.id||""),u(e=>{let t={...e};return s.forEach(e=>{if(!N(e))return;let s=e.lastStatus,a={time:s.updatedAt||new Date().toISOString(),cpu:s.cpu?.usagePercent||0,memory:s.memory?.usagePercent||0,disk:s.disks?.[0]?.usagePercent||0,gpu:s.gpus?.length?Math.max(...s.gpus.map(e=>e.usagePercent||0)):0,gpus:(s.gpus||[]).map(e=>({id:A(e),usagePercent:w(e.usagePercent)}))},r=t[e.id]||[];t[e.id]=r.at(-1)?.time===a.time?r:[...r,a].slice(-60)}),t})}catch(t){e||z({type:"error",text:t?.message||"Kh\xf4ng tải được server"})}finally{p(!1),e||j(!1)}},[]),eg=(0,r.useCallback)(async()=>{if(!c)return;let e=++eh.current;Z(!0),et("");try{let t=await fetch(`/api/resource-monitor/history?serverId=${encodeURIComponent(c)}&period=${encodeURIComponent(V)}`,{cache:"no-store"}),s=await t.json().catch(()=>({}));if(!t.ok)throw Error(s.error||"Kh\xf4ng tải được lịch sử t\xe0i nguy\xean");if(eh.current!==e)return;J(s.points||[]),Q(s)}catch(t){if(eh.current!==e)return;et(t?.message||"Kh\xf4ng tải được lịch sử t\xe0i nguy\xean"),J([])}finally{eh.current===e&&Z(!1)}},[V,c]);(0,r.useEffect)(()=>{let e,t=!1;ep();let s=async()=>{await ep({quiet:!0}),t||(e=setTimeout(s,4e3))};return e=setTimeout(s,4e3),()=>{t=!0,clearTimeout(e)}},[ep]),(0,r.useEffect)(()=>{if("history"!==n||!c)return;eg();let e=setInterval(eg,6e4);return()=>clearInterval(e)},[n,eg,c]),(0,r.useEffect)(()=>{let e=localStorage.getItem("blueRouterResourceMonitorTab");e&&i(e)},[]),(0,r.useEffect)(()=>{localStorage.setItem("blueRouterResourceMonitorTab",n)},[n]);let eb=(0,r.useCallback)(e=>{ei(e),fetch("/api/resource-monitor/analyze",{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({model:e})}).catch(()=>{})},[]),ef=(0,r.useCallback)(async()=>{if(!en)return;let e=en.indexOf("::"),t=en.slice(0,e),s=en.slice(e+2);ex(!0),eu("");try{let e=await fetch("/api/resource-monitor/analyze",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({connectionId:t,model:s})}),a=await e.json().catch(()=>({}));if(!e.ok)throw Error(a.error||"Kh\xf4ng thể ph\xe2n t\xedch t\xe0i nguy\xean");ed(a.analysis)}catch(e){eu(e?.message||"Kh\xf4ng thể ph\xe2n t\xedch t\xe0i nguy\xean")}finally{ex(!1)}},[en]);(0,r.useEffect)(()=>{"ai"===n&&(async()=>{let e="";try{let t=await fetch("/api/resource-monitor/analyze",{cache:"no-store"}),s=await t.json().catch(()=>({}));t.ok&&(ed(s.analysis||null),e=s.selectedModel||"")}catch{}try{let t=await fetch("/api/resource-monitor/ai-models",{cache:"no-store"}),s=(await t.json().catch(()=>({}))).options||[];el(s),ei(t=>{let a=t||e;return a&&s.some(e=>e.value===a)?a:s[0]?.value||""})}catch{el([])}})()},[n]);let ej=(0,r.useMemo)(()=>o.find(e=>e.id===c)||null,[o,c]),ev=ej?.lastStatus,ey=N(ej),eN=ev?.disks?.[0],ew=m[c]||[],ek=async()=>{if(_){H(!0);try{if(!(await fetch(`/api/resource-monitor/${_.id}`,{method:"DELETE"})).ok)throw Error("Kh\xf4ng thể x\xf3a server");L(null),await ep()}catch(e){z({type:"error",text:e.message})}finally{H(!1)}}};return h?(0,a.jsxs)("div",{className:"flex min-h-[50vh] items-center justify-center text-text-muted",children:[(0,a.jsx)("span",{className:"material-symbols-outlined mr-2 animate-spin",children:"progress_activity"}),"Đang tải t\xe0i nguy\xean server..."]}):(0,a.jsxs)("div",{className:"space-y-6",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center justify-between gap-4",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("h2",{className:"text-xl font-semibold text-text-main",children:"Linux Resource Monitor"}),(0,a.jsx)("p",{className:"mt-1 text-sm text-text-muted",children:"Theo d\xf5i realtime CPU, RAM, disk, network v\xe0 to\xe0n bộ NVIDIA GPU."})]}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(g.default,{variant:"secondary",icon:"refresh",onClick:()=>"history"===n?eg():ep(),loading:"history"===n?Y:b,children:"L\xe0m mới"}),(0,a.jsx)(g.default,{icon:"add",onClick:()=>y(!0),disabled:es,children:"Th\xeam server"})]})]}),es?(0,a.jsx)("div",{className:"rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm text-blue-700 dark:text-blue-300",children:"Standby mode: Resource Monitor chỉ hiển thị snapshot từ Master. Node n\xe0y kh\xf4ng polling agent v\xe0 kh\xf4ng cho sửa danh s\xe1ch server."}):null,(0,a.jsxs)("div",{className:"flex w-fit rounded-xl border border-border bg-surface p-1 shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("button",{type:"button",onClick:()=>i("realtime"),className:`flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition ${"realtime"===n?"bg-primary text-white shadow-sm":"text-text-muted hover:bg-surface-2 hover:text-text-main"}`,children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[19px]",children:"monitor_heart"}),"Realtime Monitor"]}),(0,a.jsxs)("button",{type:"button",onClick:()=>i("history"),className:`flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition ${"history"===n?"bg-primary text-white shadow-sm":"text-text-muted hover:bg-surface-2 hover:text-text-main"}`,children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[19px]",children:"query_stats"}),"History"]}),(0,a.jsxs)("button",{type:"button",onClick:()=>i("ai"),className:`flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold transition ${"ai"===n?"bg-primary text-white shadow-sm":"text-text-muted hover:bg-surface-2 hover:text-text-main"}`,children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[19px]",children:"neurology"}),"Đ\xe1nh gi\xe1 AI"]})]}),O?(0,a.jsxs)("div",{className:`flex items-center justify-between rounded-xl border px-4 py-3 text-sm ${"error"===O.type?"border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-300":"border-amber-500/20 bg-amber-500/10 text-amber-700 dark:text-amber-300"}`,children:[(0,a.jsx)("span",{children:O.text}),(0,a.jsx)("button",{onClick:()=>z(null),children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"close"})})]}):null,o.length?(0,a.jsxs)(a.Fragment,{children:["ai"!==n?(0,a.jsx)($,{servers:o,selectedId:c,onSelect:x}):null,"ai"===n?(0,a.jsx)(R,{modelOptions:er,selectedModel:en,onSelectModel:eb,analysis:eo,loading:ec,error:em,onAnalyze:ef,standby:es}):ej?"realtime"===n?(0,a.jsxs)("section",{className:"overflow-hidden rounded-3xl border border-border bg-surface shadow-[var(--shadow-soft)]",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-start justify-between gap-4 border-b border-border px-6 py-5",children:[(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-4",children:[(0,a.jsx)("div",{className:"flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[27px]",children:"dns"})}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(C,{online:ey}),(0,a.jsx)("h3",{className:"truncate text-lg font-semibold text-text-main",children:ej.name})]}),(0,a.jsxs)("div",{className:"mt-1 flex flex-wrap gap-x-3 text-xs text-text-muted",children:[(0,a.jsx)("span",{className:"font-mono",children:ej.host}),ev?.os?(0,a.jsx)("span",{children:ev.os}):null,ev?.uptimeSeconds?(0,a.jsxs)("span",{children:["Uptime ",(t=Math.floor((e=Number(ev.uptimeSeconds)||0)/86400),s=Math.floor(e%86400/3600),l=Math.floor(e%3600/60),t?`${t} ng\xe0y ${s} giờ`:s?`${s} giờ ${l} ph\xfat`:`${l} ph\xfat`)]}):null]})]})]}),(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("span",{className:`rounded-full px-3 py-1.5 text-xs font-semibold ${ey?"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400":"bg-red-500/10 text-red-600 dark:text-red-300"}`,children:ey?"Online":"Offline"}),es?null:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("button",{type:"button",onClick:()=>D(!0),className:"rounded-xl p-2 text-text-muted hover:bg-primary/10 hover:text-primary",title:"Sửa server v\xe0 c\xe0i lại agent",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[20px]",children:"edit"})}),(0,a.jsx)("button",{type:"button",onClick:()=>L(ej),className:"rounded-xl p-2 text-text-muted hover:bg-red-500/10 hover:text-red-500",title:"X\xf3a khỏi dashboard",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[20px]",children:"delete"})})]})]})]}),ey?null:(0,a.jsx)("div",{className:"m-6 rounded-2xl border border-amber-500/20 bg-amber-500/8 p-5",children:(0,a.jsxs)("div",{className:"flex gap-3",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-amber-500",children:"cloud_off"}),(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:"font-semibold text-text-main",children:"Kh\xf4ng kết nối được agent"}),(0,a.jsx)("p",{className:"mt-1 text-sm text-text-muted",children:ej.lastError||"Agent chưa gửi dữ liệu. Kiểm tra firewall v\xe0 agent port."}),ej.lastInstallLog?(0,a.jsxs)("details",{className:"mt-3",children:[(0,a.jsx)("summary",{className:"cursor-pointer text-xs font-semibold text-amber-600",children:"Xem log c\xe0i đặt"}),(0,a.jsx)("pre",{className:"mt-2 max-h-48 overflow-auto whitespace-pre-wrap rounded-xl bg-black/80 p-3 text-xs text-white",children:ej.lastInstallLog})]}):null]})]})}),ev?(0,a.jsxs)("div",{className:"space-y-7 p-6",children:[(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-5 flex items-center gap-2",children:[(0,a.jsx)("span",{className:"h-5 w-1 rounded-full bg-primary"}),(0,a.jsx)("h3",{className:"font-semibold text-text-main",children:"Tổng quan t\xe0i nguy\xean"}),(0,a.jsxs)("span",{className:"ml-auto text-xs text-text-muted",children:["Cập nhật ",S(ej.lastStatusAt)]})]}),(0,a.jsxs)("div",{className:"grid gap-5 sm:grid-cols-2 xl:grid-cols-4",children:[(0,a.jsx)(P,{value:ev.cpu?.usagePercent,label:"CPU",detail:`${ev.cpu?.cores||0} cores \xb7 Load ${ev.cpu?.load1??0}`,icon:"developer_board"}),(0,a.jsx)(P,{value:ev.memory?.usagePercent,label:"RAM",detail:`${k(ev.memory?.usedBytes)} / ${k(ev.memory?.totalBytes)}`,icon:"memory_alt"}),(0,a.jsx)(P,{value:eN?.usagePercent,label:"Disk /",detail:`${k(eN?.usedBytes)} / ${k(eN?.totalBytes)}`,icon:"hard_drive"}),(0,a.jsx)(P,{value:ev.gpus?.length?Math.max(...ev.gpus.map(e=>e.usagePercent||0)):0,label:ev.gpus?.length?`${ev.gpus.length} NVIDIA GPU`:"GPU",detail:ev.gpus?.length?`${ev.gpus.length} card được ph\xe1t hiện`:"Kh\xf4ng c\xf3 NVIDIA GPU",color:"#10b981",icon:"memory"})]})]}),(0,a.jsxs)("div",{className:"grid gap-4 sm:grid-cols-2 xl:grid-cols-4",children:[(0,a.jsx)(U,{icon:"developer_board",label:"CPU",value:ev.cpu?.model||`${ev.cpu?.cores||0} cores`,sublabel:`Load average ${ev.cpu?.load1??0} / ${ev.cpu?.load5??0} / ${ev.cpu?.load15??0}`}),(0,a.jsx)(U,{icon:"swap_vert",label:"Network realtime",value:`↓ ${k(ev.network?.rxBytesPerSecond)}/s`,sublabel:`↑ ${k(ev.network?.txBytesPerSecond)}/s`,colorClass:"text-cyan-500"}),(0,a.jsx)(U,{icon:"hard_drive",label:"Disk root",value:`${k(eN?.freeBytes)} trống`,sublabel:`${eN?.device||"root"} \xb7 ${eN?.filesystem||"filesystem"}`,colorClass:"text-violet-500"}),(0,a.jsx)(U,{icon:"memory",label:"Swap",value:k(ev.memory?.swapUsedBytes),sublabel:`Tổng ${k(ev.memory?.swapTotalBytes)}`,colorClass:"text-amber-500"})]}),(0,a.jsxs)("div",{className:"grid gap-5 xl:grid-cols-2",children:[(0,a.jsx)(M,{data:ew,dataKey:"cpu",label:"CPU usage",color:"#3b9dec"}),(0,a.jsx)(M,{data:ew,dataKey:"memory",label:"RAM usage",color:"#8b5cf6"})]}),(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"mb-4 flex items-center gap-2",children:[(0,a.jsx)("span",{className:"h-5 w-1 rounded-full bg-emerald-500"}),(0,a.jsxs)("h3",{className:"font-semibold text-text-main",children:["NVIDIA GPU (",ev.gpus?.length||0,")"]})]}),ev.gpus?.length?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(I,{data:ew,gpus:ev.gpus}),(0,a.jsx)("div",{className:"grid gap-5 xl:grid-cols-2",children:ev.gpus.map(e=>(0,a.jsx)(E,{gpu:e},e.uuid||e.index))})]}):(0,a.jsxs)("div",{className:"rounded-2xl border border-dashed border-border bg-surface-2/40 py-10 text-center text-sm text-text-muted",children:["Kh\xf4ng ph\xe1t hiện NVIDIA GPU hoặc"," ",(0,a.jsx)("span",{className:"font-mono",children:"nvidia-smi"})," chưa sẵn s\xe0ng."]})]})]}):null]}):(0,a.jsx)(K,{server:ej,data:q,meta:X,period:V,onPeriodChange:W,loading:Y,error:ee}):null]}):(0,a.jsxs)("div",{className:"flex min-h-[460px] flex-col items-center justify-center rounded-3xl border border-dashed border-border bg-surface px-6 text-center",children:[(0,a.jsx)("div",{className:"flex h-20 w-20 items-center justify-center rounded-3xl bg-primary/10 text-primary",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[42px]",children:"monitor_heart"})}),(0,a.jsx)("h3",{className:"mt-6 text-xl font-semibold text-text-main",children:"Chưa c\xf3 Linux server"}),(0,a.jsx)("p",{className:"mt-2 max-w-lg text-sm leading-6 text-text-muted",children:"Th\xeam server bằng t\xe0i khoản SSH c\xf3 quyền sudo. BlueRouter sẽ tự c\xe0i agent systemd v\xe0 bắt đầu hiển thị t\xe0i nguy\xean ngay tại đ\xe2y."}),es?null:(0,a.jsx)(g.default,{className:"mt-6",icon:"add",onClick:()=>y(!0),children:"Th\xeam server đầu ti\xean"})]}),(0,a.jsx)(F,{open:v&&!es,onClose:()=>y(!1),onCreated:async(e,t)=>{t&&!t.ok&&z({type:"warning",text:"Đ\xe3 lưu server nhưng c\xe0i agent chưa th\xe0nh c\xf4ng. Mở server để xem log."}),await ep()}}),(0,a.jsx)(G,{open:T&&!es,server:ej,onClose:()=>D(!1),onUpdated:async(e,t)=>{t&&!t.ok&&z({type:"warning",text:"Đ\xe3 lưu server nhưng c\xe0i lại agent chưa th\xe0nh c\xf4ng. Mở server để xem log."}),await ep()}}),(0,a.jsx)(f.ConfirmModal,{isOpen:!!_,onClose:()=>L(null),onConfirm:ek,loading:B,variant:"danger",title:"X\xf3a server khỏi dashboard?",confirmText:"X\xf3a server",cancelText:"Hủy",message:"Server sẽ ngừng được theo d\xf5i. Agent systemd tr\xean Linux kh\xf4ng bị gỡ tự động."})]})}},96413:(e,t,s)=>{Promise.resolve().then(s.bind(s,86243))}},e=>{e.O(0,[506,6483,7033,8441,3794,7358],()=>e(e.s=96413)),_N_E=e.O()}]);

package/app/.next-cli-build/static/chunks/app/(dashboard)/dashboard/resource-monitor/{template-ad7c5f7bdb0dfe45.js → template-d6c81c3c190cb2f9.js}

@@ -117,15 +117,15 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
     </div>
   `,r.insertAdjacentElement("afterend",o)}()},b=async()=>{try{let o=await fetch("/api/resource-monitor?snapshot=1",{cache:"no-store"}),a=await o.json().catch(()=>({}));if(!o.ok||e)return;let n=Array.isArray(a.servers)?a.servers:[];r.current=n;let i=Date.now(),s=new Set;for(let e of n){let r=String(e?.id||"");r&&(s.add(r),(Number(e?.lastStatus?.vllm?.summary?.waitingCapacity)||0)>0?t.current.has(r)||t.current.set(r,i):t.current.delete(r))}for(let e of t.current.keys())s.has(e)||t.current.delete(e);x()}catch{}},h=new MutationObserver(()=>{a&&window.clearTimeout(a),a=window.setTimeout(x,80)});h.observe(document.body,{childList:!0,subtree:!0}),o=window.setInterval(b,4e3);let f=window.setTimeout(b,500);return()=>{e=!0,h.disconnect(),window.clearInterval(o),window.clearTimeout(f),a&&window.clearTimeout(a),v(),document.querySelectorAll(`.${s}`).forEach(e=>e.remove())}},[]),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("style",{children:`
         .resource-monitor-sortable-host {
-          min-width: 360px !important;
+          min-width: 420px !important;
           overflow: hidden;
         }
         .resource-monitor-live-metrics {
           display: grid;
-          gap: 10px;
-          margin-top: 12px;
+          gap: 12px;
+          margin-top: 14px;
           border-top: 1px solid var(--color-border-subtle);
-          padding-top: 10px;
+          padding-top: 12px;
           padding-right: 2px;
           pointer-events: none;
           text-align: left;
@@ -133,9 +133,9 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
         .resource-live-section {
           min-width: 0;
           border: 1px solid var(--color-border-subtle);
-          border-radius: 12px;
+          border-radius: 14px;
           background: color-mix(in srgb, var(--color-surface-2) 62%, var(--color-surface));
-          padding: 10px 11px;
+          padding: 13px 14px;
         }
         .resource-live-section-head {
           display: flex;
@@ -143,25 +143,25 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
           align-items: center;
           justify-content: space-between;
           gap: 8px;
-          margin-bottom: 8px;
+          margin-bottom: 10px;
         }
         .resource-live-section-title {
           display: inline-flex;
           min-width: 0;
           align-items: center;
-          gap: 6px;
+          gap: 7px;
           color: var(--color-text-main);
-          font-size: 12px;
+          font-size: 14px;
           font-weight: 750;
           letter-spacing: .01em;
         }
         .resource-live-section-icon {
           color: #10b981;
-          font-size: 16px;
+          font-size: 18px;
         }
         .resource-live-state-dot {
-          width: 7px;
-          height: 7px;
+          width: 8px;
+          height: 8px;
           flex: 0 0 auto;
           border-radius: 999px;
           background: #10b981;
@@ -186,28 +186,28 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
           flex: 0 0 auto;
           border-radius: 999px;
           background: var(--color-surface);
-          padding: 2px 7px;
+          padding: 3px 9px;
           color: var(--color-text-muted);
-          font-size: 10.5px;
+          font-size: 12px;
           font-weight: 700;
         }
         .resource-live-muted {
           min-width: 0;
           overflow: hidden;
           color: var(--color-text-subtle);
-          font-size: 10.5px;
+          font-size: 12px;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
         .resource-vllm-summary-grid {
           display: flex;
           flex-wrap: wrap;
-          gap: 5px 8px;
-          margin-bottom: 8px;
+          gap: 6px 10px;
+          margin-bottom: 10px;
           color: var(--color-text-muted);
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-          font-size: 10.5px;
-          line-height: 1.4;
+          font-size: 12.5px;
+          line-height: 1.45;
         }
         .resource-vllm-summary-grid span {
           white-space: nowrap;
@@ -228,20 +228,20 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
           color: #c4b5fd !important;
         }
         .resource-live-caption {
-          margin-top: 7px;
+          margin-top: 9px;
           color: var(--color-text-subtle);
-          font-size: 10px;
-          line-height: 1.4;
+          font-size: 11.5px;
+          line-height: 1.45;
         }
         .resource-vllm-instances {
           display: grid;
-          gap: 6px;
-          margin-top: 8px;
+          gap: 8px;
+          margin-top: 10px;
         }
         .resource-vllm-instance {
           min-width: 0;
           border-top: 1px dashed var(--color-border-subtle);
-          padding-top: 7px;
+          padding-top: 9px;
         }
         .resource-vllm-instance:first-child {
           border-top: 0;
@@ -252,14 +252,14 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
           min-width: 0;
           align-items: center;
           justify-content: space-between;
-          gap: 7px;
+          gap: 8px;
         }
         .resource-vllm-instance-title {
           min-width: 0;
           overflow: hidden;
           color: var(--color-text-main);
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-          font-size: 10.5px;
+          font-size: 12.5px;
           font-weight: 700;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -269,19 +269,19 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
           overflow: hidden;
           border-radius: 999px;
           background: color-mix(in srgb, var(--color-brand-500) 8%, transparent);
-          padding: 2px 6px;
+          padding: 3px 8px;
           color: var(--color-primary);
-          font-size: 9.5px;
+          font-size: 11px;
           font-weight: 650;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
         .resource-vllm-instance-sub {
-          margin-top: 3px;
+          margin-top: 4px;
           overflow: hidden;
           color: var(--color-text-subtle);
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-          font-size: 9.5px;
+          font-size: 11.5px;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
@@ -291,12 +291,12 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
           flex-wrap: nowrap;
           align-items: center;
           justify-content: space-between;
-          gap: 5px;
-          margin-top: 5px;
+          gap: 6px;
+          margin-top: 6px;
           overflow: hidden;
           color: var(--color-text-muted);
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-          font-size: 9.5px;
+          font-size: 11.5px;
           white-space: nowrap;
         }
         .resource-vllm-instance-stats span {
@@ -310,7 +310,7 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
           color: var(--color-text-subtle);
         }
         .resource-live-bar + .resource-live-bar {
-          margin-top: 7px;
+          margin-top: 9px;
         }
         .resource-live-bar-head,
         .resource-live-value-row {
@@ -318,10 +318,10 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
           align-items: center;
           justify-content: space-between;
           gap: 8px;
-          margin-bottom: 4px;
+          margin-bottom: 5px;
           color: var(--color-text-muted);
-          font-size: 10px;
-          line-height: 1.25;
+          font-size: 12px;
+          line-height: 1.3;
         }
         .resource-live-bar-head strong,
         .resource-live-value-row strong {
@@ -330,7 +330,7 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
           white-space: nowrap;
         }
         .resource-live-bar-track {
-          height: 4px;
+          height: 5px;
           overflow: hidden;
           border-radius: 999px;
           background: color-mix(in srgb, var(--color-border) 58%, transparent);
@@ -350,40 +350,40 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
         .resource-live-bar-warning { --resource-bar-color: #f59e0b; }
         .resource-gpu-list {
           display: grid;
-          gap: 9px;
+          gap: 11px;
         }
         .resource-gpu-row {
           min-width: 0;
         }
         .resource-gpu-row + .resource-gpu-row {
           border-top: 1px dashed var(--color-border-subtle);
-          padding-top: 9px;
+          padding-top: 11px;
         }
         .resource-gpu-head {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 8px;
-          margin-bottom: 7px;
+          margin-bottom: 8px;
         }
         .resource-gpu-name {
           color: var(--color-text-main);
-          font-size: 10.5px;
+          font-size: 13px;
           font-weight: 750;
         }
         .resource-gpu-temp {
           display: inline-flex;
           align-items: center;
-          gap: 2px;
+          gap: 3px;
           border-radius: 999px;
           background: color-mix(in srgb, #f59e0b 8%, transparent);
-          padding: 2px 6px;
+          padding: 3px 8px;
           color: #b45309;
-          font-size: 10px;
+          font-size: 12px;
           font-weight: 700;
         }
         .resource-gpu-temp .material-symbols-outlined {
-          font-size: 13px;
+          font-size: 15px;
         }
         .resource-vllm-metric-guide {
           margin-top: 10px;
@@ -483,7 +483,7 @@ KV ${null===h?"—":`${h.toFixed(1)}%`} \xb7 Preempt ${l(x)} \xb7 Output ${d(b)}
         }
         @media (max-width: 760px) {
           .resource-monitor-sortable-host {
-            min-width: min(340px, calc(100vw - 48px)) !important;
+            min-width: min(380px, calc(100vw - 48px)) !important;
           }
           .resource-vllm-guide-grid {
             grid-template-columns: repeat(2, minmax(0, 1fr));