2 lines
14 KiB
JavaScript
2 lines
14 KiB
JavaScript
import{d as J,w as ot,o as X,O as q,c as _,r as S,q as g,y as at,a as t,D as n,E as l,h as P,F as U,P as R,G as V,J as H,j as w,B as $,f as B,n as it}from"./index-DnbYEqLr.js";const lt=["width","height"],D=J({__name:"LineChart",props:{datasets:{},labels:{},width:{default:400},height:{default:180},yMax:{},yLabel:{},showGrid:{type:Boolean,default:!0}},setup(T){const s=T,u=S(null);function h(){const c=u.value;if(!c)return;const a=c.getContext("2d");if(!a)return;const b=window.devicePixelRatio||1;c.width=s.width*b,c.height=s.height*b,c.style.width=`${s.width}px`,c.style.height=`${s.height}px`,a.scale(b,b);const y=s.width,k=s.height,d={top:10,right:12,bottom:24,left:44},M=y-d.left-d.right,C=k-d.top-d.bottom;if(a.clearRect(0,0,y,k),!s.datasets.length||!s.datasets[0]?.data.length){a.fillStyle="rgba(255,255,255,0.3)",a.font="12px system-ui",a.textAlign="center",a.fillText("No data yet",y/2,k/2);return}let x=s.yMax??0;if(!x){for(const m of s.datasets)for(const r of m.data)r>x&&(x=r);x=x*1.1||1}const A=Math.max(...s.datasets.map(m=>m.data.length));if(s.showGrid){a.strokeStyle="rgba(255,255,255,0.06)",a.lineWidth=1;const m=4;for(let r=0;r<=m;r++){const p=d.top+C/m*r;a.beginPath(),a.moveTo(d.left,p),a.lineTo(d.left+M,p),a.stroke()}a.fillStyle="rgba(255,255,255,0.4)",a.font="10px system-ui",a.textAlign="right";for(let r=0;r<=m;r++){const p=d.top+C/m*r,F=x-x/m*r;a.fillText(L(F),d.left-6,p+3)}}for(const m of s.datasets)if(m.data.length){a.strokeStyle=m.color,a.lineWidth=1.5,a.lineJoin="round",a.lineCap="round",a.beginPath();for(let r=0;r<m.data.length;r++){const p=d.left+r/Math.max(A-1,1)*M,F=d.top+C-m.data[r]/x*C;r===0?a.moveTo(p,F):a.lineTo(p,F)}a.stroke(),a.globalAlpha=.08,a.fillStyle=m.color,a.lineTo(d.left+(m.data.length-1)/Math.max(A-1,1)*M,d.top+C),a.lineTo(d.left,d.top+C),a.closePath(),a.fill(),a.globalAlpha=1}if(s.labels&&s.labels.length>0){a.fillStyle="rgba(255,255,255,0.4)",a.font="10px system-ui",a.textAlign="center";const m=[0,Math.floor(s.labels.length/2),s.labels.length-1];for(const r of m)if(r>=0&&r<s.labels.length){const p=d.left+r/Math.max(s.labels.length-1,1)*M;a.fillText(s.labels[r],(d.left+M+d.right>y,p),k-6)}}}function L(c){return c>=1e9?`${(c/1e9).toFixed(1)}G`:c>=1e6?`${(c/1e6).toFixed(1)}M`:c>=1e3?`${(c/1e3).toFixed(1)}K`:c.toFixed(c<10?1:0)}return ot(()=>[s.datasets,s.labels,s.width,s.height],()=>h(),{deep:!0}),X(()=>{h(),window.addEventListener("resize",h)}),q(()=>{window.removeEventListener("resize",h)}),(c,a)=>(g(),_("canvas",{ref_key:"canvasRef",ref:u,class:"monitoring-chart",width:T.width,height:T.height},null,8,lt))}}),rt={class:"pb-6"},ct={class:"hidden md:block mb-8"},dt={class:"flex items-center justify-between"},mt={class:"text-3xl font-bold text-white mb-2"},ut={class:"text-white/70"},ht={class:"flex gap-2"},_t={class:"grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6"},gt={class:"monitoring-stat-card"},xt={class:"text-xs text-white/50 uppercase tracking-wide"},pt={class:"text-2xl font-bold text-white"},ft={class:"text-xs text-white/40"},yt={class:"monitoring-stat-card"},bt={class:"text-xs text-white/50 uppercase tracking-wide"},vt={class:"text-2xl font-bold text-white"},wt={class:"text-xs text-white/40"},kt={class:"monitoring-stat-card"},Ct={class:"text-xs text-white/50 uppercase tracking-wide"},$t={class:"text-2xl font-bold text-white"},St={class:"text-xs text-white/40"},Mt={class:"monitoring-stat-card"},Ft={class:"text-xs text-white/50 uppercase tracking-wide"},Lt={class:"text-2xl font-bold text-white"},Tt={class:"text-xs text-white/40"},At={class:"grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"},Pt={class:"glass-card p-5"},Ut={class:"text-sm font-medium text-white/80 mb-3"},Rt={class:"glass-card p-5"},Bt={class:"text-sm font-medium text-white/80 mb-3"},Dt={class:"glass-card p-5"},Nt={class:"text-sm font-medium text-white/80 mb-3"},jt={class:"glass-card p-5"},Et={class:"text-sm font-medium text-white/80 mb-3"},zt={class:"glass-card p-5 mb-6"},Ht={class:"flex items-center justify-between mb-4"},It={class:"text-sm font-medium text-white/80"},Ot={key:0,class:"mb-4 space-y-2"},Wt={class:"monitoring-alert-toggle"},Gt=["checked","onChange"],Vt={class:"flex-1 min-w-0"},Jt={class:"text-sm text-white"},Xt={class:"text-xs text-white/40"},qt={class:"flex items-center gap-2"},Kt=["value","onChange"],Qt={class:"text-xs text-white/40"},Yt={key:1,class:"text-white/40 text-sm py-4 text-center"},Zt={key:2,class:"space-y-2 max-h-64 overflow-y-auto"},te={class:"flex-1 min-w-0"},ee={class:"text-sm text-white"},se={class:"text-xs text-white/40"},ne=["onClick"],oe={class:"glass-card p-5 mb-6"},ae={class:"text-sm font-medium text-white/80 mb-4"},ie={key:0,class:"text-white/40 text-sm py-4 text-center"},le={key:1,class:"space-y-3"},re={class:"min-w-0 flex-1"},ce={class:"text-sm font-medium text-white truncate"},de={class:"flex gap-4 mt-1 text-xs text-white/50"},me={class:"monitoring-bar-container"},ue={class:"glass-card p-5"},he={class:"flex items-center justify-between mb-4"},_e={class:"text-sm font-medium text-white/80"},ge={class:"flex items-center gap-2 text-xs text-white/40"},xe={class:"flex gap-0.5 h-6"},pe=["title"],fe={class:"flex justify-between mt-1 text-xs text-white/30"},ye={class:"text-xs text-white/30 mt-4 text-center"},ve=J({__name:"Monitoring",setup(T){const{t:s}=at(),u=S(null),h=S([]),L=S([]),c=S([]),a=S([]),b=S(!1),y=S(380);let k=null;const d=w(()=>u.value?.system.mem_total_bytes?(u.value.system.mem_used_bytes/u.value.system.mem_total_bytes*100).toFixed(1):"--"),M=w(()=>u.value?.system.disk_total_bytes?(u.value.system.disk_used_bytes/u.value.system.disk_total_bytes*100).toFixed(1):"--"),C=w(()=>h.value.length||60),x=w(()=>h.value.length?h.value.map(e=>{const i=new Date(e.timestamp*1e3);return`${i.getHours().toString().padStart(2,"0")}:${i.getMinutes().toString().padStart(2,"0")}`}):[]),A=w(()=>[{label:"CPU",data:h.value.map(e=>e.system.cpu_percent),color:"#fb923c"}]),m=w(()=>[{label:"Memory",data:h.value.map(e=>e.system.mem_total_bytes>0?e.system.mem_used_bytes/e.system.mem_total_bytes*100:0),color:"#3b82f6"}]),r=w(()=>[{label:"RX",data:h.value.map(e=>e.system.net_rx_bytes),color:"#4ade80"},{label:"TX",data:h.value.map(e=>e.system.net_tx_bytes),color:"#f59e0b"}]),p=w(()=>[{label:"Latency",data:h.value.map(e=>e.rpc_latency_ms),color:"#a78bfa"}]),F=w(()=>h.value.length?h.value.map(e=>{const i=e.system.mem_total_bytes>0?e.system.mem_used_bytes/e.system.mem_total_bytes*100:0,o=new Date(e.timestamp*1e3),f=`${o.getHours().toString().padStart(2,"0")}:${o.getMinutes().toString().padStart(2,"0")}`;return{cpu:e.system.cpu_percent,mem:i,label:`${f} — CPU: ${e.system.cpu_percent.toFixed(1)}%, Mem: ${i.toFixed(1)}%`}}):Array.from({length:60},()=>({cpu:0,mem:0,label:"No data"})));function K(e){return e.cpu>90||e.mem>90?"bg-red-400/60":e.cpu>70||e.mem>70?"bg-orange-400/40":"bg-green-400/30"}function v(e){return e>=1073741824?`${(e/1073741824).toFixed(1)} GB`:e>=1048576?`${(e/1048576).toFixed(1)} MB`:e>=1024?`${(e/1024).toFixed(0)} KB`:`${e} B`}function Q(e){return{disk_usage:s("monitoring.diskUsage"),ram_usage:s("monitoring.ramUsage"),container_crash:s("monitoring.containerCrash"),backend_error_spike:s("monitoring.rpcLatencySpike"),ssl_cert_expiry:s("monitoring.sslCertExpiry")}[e]??e}function Y(e){return{disk_usage:"%",ram_usage:"%",container_crash:"",backend_error_spike:"ms",ssl_cert_expiry:"days"}[e]??""}function Z(e){return e==="container_crash"||e==="ssl_cert_expiry"?"bg-red-400":e==="disk_usage"||e==="ram_usage"?"bg-orange-400":"bg-yellow-400"}function tt(e){return new Date(e*1e3).toLocaleString()}async function I(e){try{const i=await $.call({method:"monitoring.export",params:{format:e,resolution:"minute",count:1440}});let o,f;e==="csv"&&i?.csv?(o=new Blob([i.csv],{type:"text/csv"}),f=`archipelago-metrics-${new Date().toISOString().slice(0,10)}.csv`):(o=new Blob([JSON.stringify(i?.data??[],null,2)],{type:"application/json"}),f=`archipelago-metrics-${new Date().toISOString().slice(0,10)}.json`);const G=URL.createObjectURL(o),z=document.createElement("a");z.href=G,z.download=f,z.click(),URL.revokeObjectURL(G)}catch{}}async function O(){try{const e=await $.call({method:"monitoring.current"});e&&"system"in e&&(u.value=e,L.value=e.containers??[])}catch{}}async function W(){try{const e=await $.call({method:"monitoring.history",params:{resolution:"minute",count:60}});e?.data&&(h.value=e.data)}catch{}}async function N(){try{const e=await $.call({method:"monitoring.alerts",params:{count:50}});e?.alerts&&(c.value=e.alerts.reverse())}catch{}}async function j(){try{const e=await $.call({method:"monitoring.alert-rules"});e?.rules&&(a.value=e.rules)}catch{}}async function et(e,i){try{await $.call({method:"monitoring.configure-alert",params:{kind:e,enabled:i}}),await j()}catch{}}async function st(e,i){const o=parseFloat(i);if(!(isNaN(o)||o<=0))try{await $.call({method:"monitoring.configure-alert",params:{kind:e,threshold:o}}),await j()}catch{}}async function nt(e){try{await $.call({method:"monitoring.acknowledge-alert",params:{id:e}}),await N()}catch{}}function E(){const e=document.querySelector(".glass-card");e&&(y.value=Math.max(e.clientWidth-40,200))}return X(async()=>{E(),window.addEventListener("resize",E),await Promise.all([O(),W(),N(),j()]),k=setInterval(async()=>{try{await Promise.all([O(),W(),N()])}catch{}},5e3)}),q(()=>{k&&clearInterval(k),window.removeEventListener("resize",E)}),(e,i)=>(g(),_("div",rt,[t("div",ct,[t("div",dt,[t("div",null,[t("h1",mt,n(l(s)("monitoring.title")),1),t("p",ut,n(l(s)("monitoring.subtitle")),1)]),t("div",ht,[t("button",{class:"glass-button text-sm px-4 py-2",onClick:i[0]||(i[0]=o=>I("csv"))},n(l(s)("monitoring.exportCsv")),1),t("button",{class:"glass-button text-sm px-4 py-2",onClick:i[1]||(i[1]=o=>I("json"))},n(l(s)("monitoring.exportJson")),1)])])]),t("div",_t,[t("div",gt,[t("p",xt,n(l(s)("monitoring.cpu")),1),t("p",pt,n(u.value?.system.cpu_percent.toFixed(1)??"--")+"%",1),t("p",ft,n(l(s)("monitoring.load"))+" "+n(u.value?.system.load_avg_1.toFixed(2)??"--"),1)]),t("div",yt,[t("p",bt,n(l(s)("monitoring.memory")),1),t("p",vt,n(d.value)+"%",1),t("p",wt,n(v(u.value?.system.mem_used_bytes??0))+" / "+n(v(u.value?.system.mem_total_bytes??0)),1)]),t("div",kt,[t("p",Ct,n(l(s)("monitoring.diskUsage")),1),t("p",$t,n(M.value)+"%",1),t("p",St,n(v(u.value?.system.disk_used_bytes??0))+" / "+n(v(u.value?.system.disk_total_bytes??0)),1)]),t("div",Mt,[t("p",Ft,n(l(s)("monitoring.network")),1),t("p",Lt,n(v(u.value?.system.net_rx_bytes??0)),1),t("p",Tt,"TX: "+n(v(u.value?.system.net_tx_bytes??0)),1)])]),t("div",At,[t("div",Pt,[t("h3",Ut,n(l(s)("monitoring.cpuUsage")),1),P(D,{datasets:A.value,labels:x.value,width:y.value,height:180,"y-max":100},null,8,["datasets","labels","width"])]),t("div",Rt,[t("h3",Bt,n(l(s)("monitoring.memoryUsage")),1),P(D,{datasets:m.value,labels:x.value,width:y.value,height:180,"y-max":100},null,8,["datasets","labels","width"])]),t("div",Dt,[t("h3",Nt,n(l(s)("monitoring.networkIo")),1),P(D,{datasets:r.value,labels:x.value,width:y.value,height:180},null,8,["datasets","labels","width"])]),t("div",jt,[t("h3",Et,n(l(s)("monitoring.rpcLatency")),1),P(D,{datasets:p.value,labels:x.value,width:y.value,height:180},null,8,["datasets","labels","width"])])]),t("div",zt,[t("div",Ht,[t("h3",It,n(l(s)("monitoring.alertHistory")),1),t("button",{class:"glass-button text-xs px-3 py-1",onClick:i[2]||(i[2]=o=>b.value=!b.value)},n(b.value?l(s)("monitoring.hideConfig"):l(s)("common.configure")),1)]),b.value?(g(),_("div",Ot,[(g(!0),_(U,null,R(a.value,o=>(g(),_("div",{key:o.kind,class:"flex items-center gap-3 p-3 bg-white/5 rounded-lg"},[t("label",Wt,[t("input",{type:"checkbox",checked:o.enabled,onChange:f=>et(o.kind,!o.enabled)},null,40,Gt),i[3]||(i[3]=t("span",{class:"monitoring-alert-toggle-slider"},null,-1))]),t("div",Vt,[t("p",Jt,n(Q(o.kind)),1),t("p",Xt,n(o.description),1)]),t("div",qt,[t("input",{type:"number",value:o.threshold,class:"monitoring-threshold-input",onChange:f=>st(o.kind,f.target.value)},null,40,Kt),t("span",Qt,n(Y(o.kind)),1)])]))),128))])):V("",!0),c.value.length?(g(),_("div",Zt,[(g(!0),_(U,null,R(c.value,o=>(g(),_("div",{key:o.id,class:B(["flex items-start gap-3 p-3 bg-white/5 rounded-lg",{"opacity-50":o.acknowledged}])},[t("span",{class:B(["inline-block w-2 h-2 rounded-full mt-1.5 flex-shrink-0",Z(o.kind)])},null,2),t("div",te,[t("p",ee,n(o.message),1),t("p",se,n(tt(o.timestamp)),1)]),o.acknowledged?V("",!0):(g(),_("button",{key:0,class:"text-xs text-white/40 hover:text-white/70 flex-shrink-0",onClick:f=>nt(o.id)},n(l(s)("common.dismiss")),9,ne))],2))),128))])):(g(),_("div",Yt,n(l(s)("monitoring.noAlerts")),1))]),t("div",oe,[t("h3",ae,n(l(s)("monitoring.containerResources")),1),L.value.length?(g(),_("div",le,[(g(!0),_(U,null,R(L.value,o=>(g(),_("div",{key:o.name,class:"flex items-center gap-4 p-3 bg-white/5 rounded-lg"},[t("div",re,[t("p",ce,n(o.name),1),t("div",de,[t("span",null,"CPU: "+n(o.cpu_percent.toFixed(1))+"%",1),t("span",null,"Mem: "+n(v(o.mem_used_bytes)),1),t("span",null,"Net: "+n(v(o.net_rx_bytes))+" / "+n(v(o.net_tx_bytes)),1)])]),t("div",me,[t("div",{class:B(["monitoring-bar-fill",o.cpu_percent>80?"monitoring-bar-danger":o.cpu_percent>50?"monitoring-bar-warn":"monitoring-bar-ok"]),style:it({width:Math.min(o.cpu_percent,100)+"%"})},null,6)])]))),128))])):(g(),_("div",ie,n(l(s)("monitoring.noContainerMetrics")),1))]),t("div",ue,[t("div",he,[t("h3",_e,n(l(s)("monitoring.systemHealth")),1),t("div",ge,[i[4]||(i[4]=t("span",{class:"inline-block w-2 h-2 rounded-full bg-green-400"},null,-1)),H(" "+n(l(s)("common.healthy"))+" ",1),i[5]||(i[5]=t("span",{class:"inline-block w-2 h-2 rounded-full bg-orange-400 ml-2"},null,-1)),H(" "+n(l(s)("common.elevated"))+" ",1),i[6]||(i[6]=t("span",{class:"inline-block w-2 h-2 rounded-full bg-red-400 ml-2"},null,-1)),H(" "+n(l(s)("common.critical")),1)])]),t("div",xe,[(g(!0),_(U,null,R(F.value,(o,f)=>(g(),_("div",{key:f,class:B(["flex-1 rounded-sm transition-colors",K(o)]),title:o.label},null,10,pe))),128))]),t("div",fe,[t("span",null,n(C.value)+"m ago",1),i[7]||(i[7]=t("span",null,"Now",-1))])]),t("p",ye,n(l(s)("monitoring.refreshFooter"))+" · "+n(l(s)("monitoring.wsConnections",{count:u.value?.ws_connections??0})),1)]))}});export{ve as default};
|