straydog-js
Version:
Drop-in API monitoring for any Node.js backend
2 lines (1 loc) • 5.67 kB
JavaScript
import{j as e,c as g,r as l,M as P}from"./index-iadthaTB.js";import{a as U,S as V,b as A,c as B,d as H,e as u}from"./select-CxpLOeqw.js";function j(){let t={loading:!1,error:null,data:null};return{async get(s){t={loading:!0,error:null,data:null};try{return t={loading:!1,error:null,data:(await U.get("",{params:s})).data},t}catch(i){return t={loading:!1,error:i?.response?.data?.message||i.message||"Unknown error",data:null},t}},getState:()=>t}}function S({className:t,...s}){return e.jsx("div",{"data-slot":"card",className:g("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",t),...s})}function I({className:t,...s}){return e.jsx("div",{"data-slot":"card-title",className:g("leading-none font-semibold",t),...s})}function z({className:t,...s}){return e.jsx("div",{"data-slot":"card-description",className:g("text-muted-foreground text-sm",t),...s})}function k({className:t,...s}){return e.jsx("div",{"data-slot":"card-content",className:g("px-6",t),...s})}const w={ok:"from-green-500/10 via-green-400/5 to-green-500/10",error:"from-red-500/10 via-red-400/5 to-red-500/10",warning:"from-yellow-500/10 via-yellow-400/5 to-yellow-500/10"},b={ok:"from-green-400 via-green-300 to-green-400",error:"from-red-400 via-red-300 to-red-400",warning:"from-yellow-400 via-yellow-300 to-yellow-400"},N={ok:"from-gray-900 via-green-950 to-gray-900",error:"from-gray-900 via-red-950 to-gray-900",warning:"from-gray-900 via-yellow-950 to-gray-900"},D=({title:t,value:s,description:i,unit:o,type:d})=>{const f=w[d]||w.ok,c=b[d]||b.ok,p=N[d]||N.ok;return e.jsxs(S,{className:`relative w-[300px] overflow-hidden rounded-2xl border border-gray-200/20 bg-gradient-to-br ${p} shadow-lg transition-transform hover:scale-[1.02] hover:shadow-2xl`,children:[e.jsx("div",{className:`absolute inset-0 bg-gradient-to-tr ${f} opacity-60 pointer-events-none`}),e.jsxs(k,{className:"px-4 pt-0 relative z-10",children:[e.jsx(I,{className:"text-lg font-semibold tracking-tight text-white",children:t}),e.jsx(z,{className:"text-sm text-gray-300",children:i}),e.jsxs("div",{className:"flex items-baseline gap-1",children:[e.jsx("span",{className:`text-xl font-bold bg-gradient-to-r ${c} bg-clip-text text-transparent`,children:s||0}),e.jsx("span",{className:"text-sm font-medium text-gray-400",children:o})]})]})]})},x={averageLatency:{title:"Average Latency",description:"",type:"ok",unit:"ms"},count:{title:"Total Requests",description:"",type:"ok",unit:""},failedCount:{title:"Total Failed Requests",unit:"",type:"error",description:""},failureRate:{title:"Failure Rate",unit:"%",type:"error",description:""},fastestEndpoint:{title:"Fastest Endpoint",unit:"",type:"ok",description:"endpoint"},mostFailedEndpoint:{title:"Most Failed Endpoint",unit:"",type:"error",description:""},mostSuccessfulEndpoint:{title:"Most Success Endpoint",unit:"",type:"ok",description:""},slowestEndpoint:{title:"Slowest Endpoint",unit:"",type:"warning",description:""},successCount:{title:"Total Success Requests",unit:"",type:"ok",description:""},successRate:{title:"Success Rate",unit:"%",type:"ok",description:""},highestTraffic:{title:"Highest Traffic",unit:"",type:"ok",description:"endpoint"}},K=({endpoints:t})=>e.jsx(e.Fragment,{children:t.map(s=>e.jsx(S,{className:`py-0 mb-1 w-full border-0 shadow-none rounded-none ${s.failed>0?"bg-red-600":"unset"}`,children:e.jsxs(k,{className:"py-1 px-2 flex justify-between pe-6",children:[e.jsx("a",{className:"text-white text-sm",children:s.path}),e.jsxs("div",{className:"flex gap-2",children:[s.failed>0?e.jsxs("span",{className:"text-xs mb-0 bg-black px-2 py-0 rounded-full",children:["Failed: ",s.failed]}):null,e.jsxs("span",{className:"text-xs mb-0 px-2 py-0 rounded-full bg-black",children:["total: ",s.total]})]}),e.jsx("span",{className:"font-medium text-sm",children:s.methods[0]})]})}))});function Q(){const t=new URLSearchParams(window.location.search),[s,i]=l.useState([]),[o,d]=l.useState(t.get("days")||"1"),[f,c]=l.useState(!1),[p,E]=l.useState(null),[R,L]=l.useState([]),C=j(),T=j();async function M(){c(m=>!m);const n=[];try{const m=[C.get({method:"getStats",days:o}),T.get({method:"getEndpoints",days:o})],[{data:r},{data:q}]=await Promise.all(m);for(const v in r)if(v in x){const a=v,F=x[a].title;let h="",y=r[a]||"";const G=x[a].unit,$=x[a].type;(a==="fastestEndpoint"||a==="slowestEndpoint")&&typeof r[a]=="object"&&r[a]!==null&&(h=`Average latency is ${r[a].averageLatency} ms`,y=r[a].endpoint),a=="highestTraffic"&&typeof r[a]=="object"&&r[a]!==null&&(h=`Number of requests is ${r[a].count}`,y=r[a].endpoint),n.push({title:F,description:h,value:y,unit:G,type:$})}i(n),c(!1),L(q)}catch{E("Error connecting to server!"),c(!1)}}return l.useEffect(()=>{const n=new URL(window.location.href);n.searchParams.set("days",o),window.history.replaceState({},"",n),M()},[o]),p?e.jsx("div",{children:e.jsx("h3",{children:p})}):f?e.jsx(P,{}):e.jsxs("div",{children:[e.jsx("div",{className:"mb-6",children:e.jsxs(V,{defaultValue:o,onValueChange:n=>d(n),children:[e.jsx(A,{className:"w-[180px]",children:e.jsx(B,{placeholder:"Time Range"})}),e.jsxs(H,{children:[e.jsx(u,{value:"1",children:"Last day"}),e.jsx(u,{value:"3",children:"Last 3 days"}),e.jsx(u,{value:"7",children:"Last week"}),e.jsx(u,{value:"30",children:"Last month"}),e.jsx(u,{value:"90",children:"Last 3 months"})]})]})}),e.jsx("div",{className:"grid grid-cols-4 gap-3",children:s.map(n=>e.jsx(D,{title:n.title,description:n.description,value:n.value,type:n.type,unit:n.unit},n.value))}),e.jsxs("div",{className:"py-4",children:[e.jsx("h2",{className:"text-2xl font-semibold mt-3 mb-4",children:"Endpoint List"}),e.jsx(K,{endpoints:R})]})]})}export{Q as default};