27 lines
15 KiB
JavaScript
27 lines
15 KiB
JavaScript
import{c as A,d as H,o as c,a as r,F as w,r as M,b as l,n as q,e as C,u as e,f as W,t as n,g as b,h as X,w as u,_ as z,i as ee,j as S,k as v,l as s,m as Q,p as t,T as te,q as le,s as se,v as ae}from"./index-DIqASLVQ.js";import{c as y,t as oe,p as ne,d as ue}from"./format-B6sc_rZ4.js";import{A as ce,_ as de}from"./EventItem.vue_vue_type_script_setup_true_lang--aBz0q7s.js";import{_ as re}from"./PageHeader.vue_vue_type_script_setup_true_lang-CD1KTXEu.js";import{_ as j,a as P,b as Z,c as T}from"./CardTitle.vue_vue_type_script_setup_true_lang-DKXrNKGt.js";import{_ as ie}from"./Skeleton.vue_vue_type_script_setup_true_lang-B_11D5UP.js";import{_ as me,a as pe,b as G}from"./TabsTrigger.vue_vue_type_script_setup_true_lang-RkMkvDd1.js";import"./Badge.vue_vue_type_script_setup_true_lang-DSNeqlXx.js";import"./Collection-CwtwoTtI.js";/**
|
|
* @license lucide-vue-next v0.469.0 - ISC
|
|
*
|
|
* This source code is licensed under the ISC license.
|
|
* See the LICENSE file in the root directory of this source tree.
|
|
*/const fe=A("BanIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m4.9 4.9 14.2 14.2",key:"1m5liu"}]]);/**
|
|
* @license lucide-vue-next v0.469.0 - ISC
|
|
*
|
|
* This source code is licensed under the ISC license.
|
|
* See the LICENSE file in the root directory of this source tree.
|
|
*/const _e=A("ClockIcon",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 16 14",key:"68esgv"}]]);/**
|
|
* @license lucide-vue-next v0.469.0 - ISC
|
|
*
|
|
* This source code is licensed under the ISC license.
|
|
* See the LICENSE file in the root directory of this source tree.
|
|
*/const he=A("CpuIcon",[["rect",{width:"16",height:"16",x:"4",y:"4",rx:"2",key:"14l7u7"}],["rect",{width:"6",height:"6",x:"9",y:"9",rx:"1",key:"5aljv4"}],["path",{d:"M15 2v2",key:"13l42r"}],["path",{d:"M15 20v2",key:"15mkzm"}],["path",{d:"M2 15h2",key:"1gxd5l"}],["path",{d:"M2 9h2",key:"1bbxkp"}],["path",{d:"M20 15h2",key:"19e6y8"}],["path",{d:"M20 9h2",key:"19tzq7"}],["path",{d:"M9 2v2",key:"165o2o"}],["path",{d:"M9 20v2",key:"i2bqo8"}]]);/**
|
|
* @license lucide-vue-next v0.469.0 - ISC
|
|
*
|
|
* This source code is licensed under the ISC license.
|
|
* See the LICENSE file in the root directory of this source tree.
|
|
*/const ve=A("ShieldCheckIcon",[["path",{d:"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z",key:"oel41y"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]]);/**
|
|
* @license lucide-vue-next v0.469.0 - ISC
|
|
*
|
|
* This source code is licensed under the ISC license.
|
|
* See the LICENSE file in the root directory of this source tree.
|
|
*/const J=A("WavesIcon",[["path",{d:"M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"knzxuh"}],["path",{d:"M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"2jd2cc"}],["path",{d:"M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1",key:"rd2r6e"}]]),be={key:0,class:"flex flex-col gap-1"},xe={class:"relative truncate font-mono text-xs sm:text-[13px]"},ke={class:"text-muted-foreground relative shrink-0 text-xs tabular-nums"},ye={key:1,class:"text-muted-foreground py-6 text-center text-xs"},N=H({__name:"BarList",props:{items:{},tone:{default:"primary"},empty:{}},setup(B){const f=B,a=b(()=>Math.max(1,...f.items.map(x=>x.count))),h={primary:"bg-primary/15",block:"bg-block/15",allow:"bg-allow/15"};return(x,I)=>f.items.length?(c(),r("div",be,[(c(!0),r(w,null,M(f.items,k=>(c(),r("div",{key:k.name,class:"relative flex items-center justify-between gap-3 overflow-hidden rounded-md px-2 py-1.5"},[l("div",{class:C(e(W)("absolute inset-y-0 left-0 rounded-md",h[f.tone])),style:q({width:`${Math.max(4,k.count/a.value*100)}%`})},null,6),l("span",xe,n(k.name),1),l("span",ke,n(e(y)(k.count)),1)]))),128))])):(c(),r("p",ye,n(f.empty??"—"),1))}}),ge={class:"flex items-start justify-between gap-2"},$e={class:"text-muted-foreground text-xs font-medium sm:text-sm"},we={class:"mt-1.5 flex items-baseline gap-1.5"},Me={key:0,class:"text-muted-foreground truncate text-xs"},V=H({__name:"StatCard",props:{label:{},value:{},hint:{},icon:{},tone:{}},setup(B){const f=B,a={default:"text-muted-foreground",allow:"text-allow",block:"text-block",drop:"text-drop",modify:"text-modify"};return(h,x)=>(c(),X(e(z),{class:"p-3.5 sm:p-4"},{default:u(()=>[l("div",ge,[l("span",$e,n(f.label),1),f.icon?(c(),X(ee(f.icon),{key:0,class:C(e(W)("size-4 shrink-0",a[f.tone??"default"]))},null,8,["class"])):S("",!0)]),l("div",we,[l("span",{class:C(e(W)("text-xl font-semibold tracking-tight tabular-nums sm:text-2xl",f.tone&&f.tone!=="default"?a[f.tone]:""))},n(f.value),3),f.hint?(c(),r("span",Me,n(f.hint),1)):S("",!0)])]),_:1}))}}),Ce=["viewBox"],ze=["y1","y2"],Be=["d"],je=["d"],Pe=["d"],Te=["x1","x2","y2"],Ve={class:"text-muted-foreground pointer-events-none absolute top-0 left-0 text-[10px] tabular-nums"},De={class:"text-muted-foreground mb-0.5"},Le={class:"flex items-center gap-2 tabular-nums"},Se={class:"ml-auto font-medium"},Ae={class:"flex items-center gap-2 tabular-nums"},Ie={class:"ml-auto font-medium"},Fe={class:"flex items-center gap-2 tabular-nums"},Re={class:"ml-auto font-medium"},qe={key:1,class:"text-muted-foreground absolute inset-0 flex items-center justify-center text-xs"},He={class:"mt-3 flex flex-wrap items-center gap-x-4 gap-y-1"},Ne={class:"text-muted-foreground"},Oe={class:"font-medium tabular-nums"},R=600,K=160,O=8,We=16,Xe=H({__name:"TrafficChart",props:{buckets:{}},setup(B){const f=B,a=Q(null),h=b(()=>f.buckets??[]),x=b(()=>Math.max(1,...h.value.map(d=>d.tcp+d.udp))),I=b(()=>h.value.some(d=>d.tcp+d.udp+d.blocked>0));function k(d){const m=h.value.length;return m<=1?0:d/(m-1)*R}function g(d){const m=K-O-We;return O+m-d/x.value*m}function D(d){if(d.length===0)return"";const m=d.map((L,U)=>`${U===0?"M":"L"}${k(U).toFixed(1)},${g(L).toFixed(1)}`),_=`L${R},${g(0)} L0,${g(0)} Z`;return m.join(" ")+" "+_}function F(d){return d.map((m,_)=>`${_===0?"M":"L"}${k(_).toFixed(1)},${g(m).toFixed(1)}`).join(" ")}const i=b(()=>D(h.value.map(d=>d.tcp+d.udp))),p=b(()=>D(h.value.map(d=>d.tcp))),o=b(()=>F(h.value.map(d=>d.blocked))),$=b(()=>a.value===null?null:h.value[a.value]);function E(d){const m=d.currentTarget.getBoundingClientRect(),_=(d.clientX-m.left)/m.width,L=Math.round(_*(h.value.length-1));a.value=Math.min(h.value.length-1,Math.max(0,L))}const Y=b(()=>{const d=m=>h.value.reduce((_,L)=>_+L[m],0);return[{label:s("dashboard.tcp"),color:"bg-tcp",value:d("tcp")},{label:s("dashboard.udp"),color:"bg-udp",value:d("udp")},{label:s("dashboard.blocked"),color:"bg-block",value:d("blocked")}]});return(d,m)=>(c(),r("div",null,[l("div",{class:"relative touch-pan-y",onPointermove:E,onPointerdown:E,onPointerleave:m[0]||(m[0]=_=>a.value=null)},[(c(),r("svg",{viewBox:`0 0 ${R} ${K}`,preserveAspectRatio:"none",class:"h-36 w-full sm:h-44",role:"img"},[(c(),r(w,null,M([0,.5,1],_=>l("line",{key:_,x1:0,x2:R,y1:g(x.value*_),y2:g(x.value*_),class:"stroke-border","stroke-width":"1","vector-effect":"non-scaling-stroke","stroke-dasharray":"3 4"},null,8,ze)),64)),l("path",{d:i.value,class:"fill-udp/25"},null,8,Be),l("path",{d:p.value,class:"fill-tcp/45"},null,8,je),l("path",{d:o.value,class:"stroke-block",fill:"none","stroke-width":"1.75","stroke-linejoin":"round","vector-effect":"non-scaling-stroke"},null,8,Pe),a.value!==null?(c(),r("line",{key:0,x1:k(a.value),x2:k(a.value),y1:O,y2:g(0),class:"stroke-foreground/40","stroke-width":"1","vector-effect":"non-scaling-stroke"},null,8,Te)):S("",!0)],8,Ce)),l("div",Ve,n(e(y)(x.value)),1),$.value?(c(),r("div",{key:0,class:"bg-popover pointer-events-none absolute top-1 z-10 rounded-md border px-2 py-1.5 text-[11px] shadow-md",style:q({left:`${a.value/Math.max(1,h.value.length-1)*100}%`,transform:a.value/Math.max(1,h.value.length-1)>.6?"translateX(-105%)":"translateX(8px)"})},[l("div",De,n(e(oe)($.value.time)),1),l("div",Le,[m[1]||(m[1]=l("span",{class:"bg-tcp size-2 rounded-full"},null,-1)),v(n(e(s)("dashboard.tcp"))+" ",1),l("span",Se,n($.value.tcp),1)]),l("div",Ae,[m[2]||(m[2]=l("span",{class:"bg-udp size-2 rounded-full"},null,-1)),v(n(e(s)("dashboard.udp"))+" ",1),l("span",Ie,n($.value.udp),1)]),l("div",Fe,[m[3]||(m[3]=l("span",{class:"bg-block size-2 rounded-full"},null,-1)),v(n(e(s)("dashboard.blocked"))+" ",1),l("span",Re,n($.value.blocked),1)])],4)):S("",!0),I.value?S("",!0):(c(),r("div",qe,n(e(s)("dashboard.noTraffic")),1))],32),l("div",He,[(c(!0),r(w,null,M(Y.value,_=>(c(),r("div",{key:_.label,class:"flex items-center gap-1.5 text-xs"},[l("span",{class:C(["size-2 rounded-full",_.color])},null,2),l("span",Ne,n(_.label),1),l("span",Oe,n(e(y)(_.value)),1)]))),128))])]))}}),Ee={key:0,class:"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6"},Ue={class:"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6"},Ze={class:"mt-3 grid gap-3 lg:grid-cols-3"},Ge={class:"min-w-0"},Je={class:"bg-muted flex h-2 overflow-hidden rounded-full"},Ke={class:"mt-2.5 flex flex-col gap-1.5"},Qe={class:"text-muted-foreground"},Ye={class:"ml-auto font-medium tabular-nums"},et={class:"text-muted-foreground mb-2 text-xs font-medium"},tt={class:"bg-muted flex h-2 overflow-hidden rounded-full"},lt={class:"mt-2.5 flex flex-col gap-1.5"},st={class:"text-muted-foreground"},at={class:"ml-auto font-medium tabular-nums"},ot={class:"mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-3"},nt={key:0,class:"flex flex-col"},ut={key:1,class:"text-muted-foreground py-6 text-center text-xs"},vt=H({__name:"DashboardView",setup(B){const f=ae(),{metrics:a,events:h}=le(),x=Q("short"),I=b(()=>{var i,p;return(x.value==="short"?(i=a.value)==null?void 0:i.short:(p=a.value)==null?void 0:p.long)??[]}),k=b(()=>h.value.slice(0,8)),g=b(()=>{var o;const i=(o=a.value)==null?void 0:o.actions;if(!i)return[];const p=i.allow+i.block+i.drop+i.modify||1;return[{key:"allow",label:s("action.allow"),value:i.allow,color:"bg-allow",total:p},{key:"block",label:s("action.block"),value:i.block,color:"bg-block",total:p},{key:"drop",label:s("action.drop"),value:i.drop,color:"bg-drop",total:p},{key:"modify",label:s("action.modify"),value:i.modify,color:"bg-modify",total:p}].filter($=>$.value>0||$.key==="allow"||$.key==="block")}),D=b(()=>{var o;const i=(o=a.value)==null?void 0:o.streams;if(!i)return[];const p=i.total||1;return[{key:"tcp",label:s("dashboard.tcp"),value:i.tcp,color:"bg-tcp",total:p},{key:"udp",label:s("dashboard.udp"),value:i.udp,color:"bg-udp",total:p}]}),F=b(()=>{var p;const i=(p=a.value)==null?void 0:p.actions;return i?i.block+i.drop:0});return(i,p)=>(c(),r("div",null,[t(re,{title:e(s)("dashboard.title"),description:e(s)("dashboard.subtitle")},null,8,["title","description"]),e(a)?(c(),r(w,{key:1},[l("div",Ue,[t(V,{label:e(s)("dashboard.streams"),value:e(y)(e(a).streams.total),hint:`${e(y)(e(a).streams.tcp)} / ${e(y)(e(a).streams.udp)}`,icon:e(J)},null,8,["label","value","hint","icon"]),t(V,{label:e(s)("dashboard.blocked"),value:e(y)(F.value),hint:`${e(ne)(F.value,e(a).streams.total)}%`,icon:e(fe),tone:"block"},null,8,["label","value","hint","icon"]),t(V,{label:e(s)("dashboard.allowed"),value:e(y)(e(a).actions.allow),icon:e(ve),tone:"allow"},null,8,["label","value","icon"]),t(V,{label:e(s)("dashboard.modified"),value:e(y)(e(a).actions.modify),icon:e(J),tone:"modify"},null,8,["label","value","icon"]),t(V,{label:e(s)("dashboard.uptime"),value:e(ue)(e(a).uptimeSeconds),icon:e(_e)},null,8,["label","value","icon"]),t(V,{label:e(a).errors>0?e(s)("dashboard.errors"):e(s)("dashboard.workers"),value:e(a).errors>0?e(y)(e(a).errors):String(e(a).workers),icon:e(a).errors>0?e(te):e(he),tone:e(a).errors>0?"drop":"default"},null,8,["label","value","icon","tone"])]),l("div",Ze,[t(e(z),{class:"lg:col-span-2"},{default:u(()=>[t(e(j),{class:"flex-row items-start justify-between gap-3"},{default:u(()=>[l("div",Ge,[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.traffic")),1)]),_:1}),t(e(Z),null,{default:u(()=>[v(n(e(s)("dashboard.trafficDesc")),1)]),_:1})]),t(e(me),{modelValue:x.value,"onUpdate:modelValue":p[0]||(p[0]=o=>x.value=o),class:"shrink-0"},{default:u(()=>[t(e(pe),{class:"h-8"},{default:u(()=>[t(e(G),{value:"short",class:"text-xs"},{default:u(()=>[v(n(e(s)("dashboard.range10m")),1)]),_:1}),t(e(G),{value:"long",class:"text-xs"},{default:u(()=>[v(n(e(s)("dashboard.range1h")),1)]),_:1})]),_:1})]),_:1},8,["modelValue"])]),_:1}),t(e(T),null,{default:u(()=>[t(Xe,{buckets:I.value},null,8,["buckets"])]),_:1})]),_:1}),t(e(z),null,{default:u(()=>[t(e(j),null,{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.verdicts")),1)]),_:1})]),_:1}),t(e(T),{class:"flex flex-col gap-4"},{default:u(()=>[l("div",null,[l("div",Je,[(c(!0),r(w,null,M(g.value,o=>(c(),r("div",{key:o.key,class:C(o.color),style:q({width:`${o.value/o.total*100}%`})},null,6))),128))]),l("div",Ke,[(c(!0),r(w,null,M(g.value,o=>(c(),r("div",{key:o.key,class:"flex items-center gap-2 text-xs sm:text-[13px]"},[l("span",{class:C(["size-2 rounded-full",o.color])},null,2),l("span",Qe,n(o.label),1),l("span",Ye,n(e(y)(o.value)),1)]))),128))])]),l("div",null,[l("p",et,n(e(s)("dashboard.protocols")),1),l("div",tt,[(c(!0),r(w,null,M(D.value,o=>(c(),r("div",{key:o.key,class:C(o.color),style:q({width:`${o.value/o.total*100}%`})},null,6))),128))]),l("div",lt,[(c(!0),r(w,null,M(D.value,o=>(c(),r("div",{key:o.key,class:"flex items-center gap-2 text-xs sm:text-[13px]"},[l("span",{class:C(["size-2 rounded-full",o.color])},null,2),l("span",st,n(o.label),1),l("span",at,n(e(y)(o.value)),1)]))),128))])])]),_:1})]),_:1})]),l("div",ot,[t(e(z),null,{default:u(()=>[t(e(j),null,{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.topHosts")),1)]),_:1}),t(e(Z),null,{default:u(()=>[v(n(e(s)("dashboard.topHostsDesc")),1)]),_:1})]),_:1}),t(e(T),null,{default:u(()=>[t(N,{items:e(a).topHosts,empty:e(s)("common.empty")},null,8,["items","empty"])]),_:1})]),_:1}),t(e(z),null,{default:u(()=>[t(e(j),null,{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.topBlocked")),1)]),_:1})]),_:1}),t(e(T),null,{default:u(()=>[t(N,{items:e(a).topBlockedIPs,tone:"block",empty:e(s)("common.empty")},null,8,["items","empty"])]),_:1})]),_:1}),t(e(z),{class:"md:col-span-2 xl:col-span-1"},{default:u(()=>[t(e(j),null,{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.topRules")),1)]),_:1})]),_:1}),t(e(T),null,{default:u(()=>[t(N,{items:e(a).topRules,tone:"allow",empty:e(s)("common.empty")},null,8,["items","empty"])]),_:1})]),_:1})]),t(e(z),{class:"mt-3"},{default:u(()=>[t(e(j),{class:"flex-row items-center justify-between"},{default:u(()=>[t(e(P),null,{default:u(()=>[v(n(e(s)("dashboard.recent")),1)]),_:1}),t(e(se),{variant:"ghost",size:"sm",onClick:p[1]||(p[1]=o=>e(f).push("/events"))},{default:u(()=>[v(n(e(s)("dashboard.viewAll"))+" ",1),t(e(ce),{class:"size-3.5"})]),_:1})]),_:1}),t(e(T),{class:"px-1.5 sm:px-2.5"},{default:u(()=>[k.value.length?(c(),r("div",nt,[(c(!0),r(w,null,M(k.value,o=>(c(),X(de,{key:o.seq,event:o,onSelect:p[2]||(p[2]=$=>e(f).push("/events"))},null,8,["event"]))),128))])):(c(),r("p",ut,n(e(s)("events.empty")),1))]),_:1})]),_:1})],64)):(c(),r("div",Ee,[(c(),r(w,null,M(6,o=>t(e(ie),{key:o,class:"h-20"})),64))]))]))}});export{vt as default};
|