https://cloud.resilis.io/assets/database-metrics-panel-Bfmkoo76.js

1import{j as e}from"./ui-vendor-DSsww-Kv.js";import{bi as I,a as U}from"./index-DAt3PBr5.js";import{d as B,u as O,b as W}from"./deployment-metrics-DisX5DNI.js";import{T as A}from"./time-range-selector-DPN_Usxf.js";import{S as z}from"./section-eyebrow-CV8sKsMi.js";import{a as w}from"./react-vendor-NvA41F0Y.js";import{E as H}from"./workspace-primitives-C1dQ4mvy.js";import{p as K,a as G}from"./compute-format-C-d5AUXn.js";import{b as S}from"./format-DYfy5YRO.js";import{R as X}from"./resource-page-skeleton-DeYwRB_q.js";import"./box-Bz_4p_Hp.js";const k=560,_=110;function ue({resource:t}){const[r,n]=w.useState("24h"),{data:s,isLoading:o,isError:h}=I(t.id,{enabled:!!t.id}),g=!o&&(h||!s||B(s.status)),x=!!t.id&&!o&&!g,{data:d,summary:l,error:b,isLoading:u}=O(t.id,r,{enabled:x}),p=K(s?.replicaConfig?.cpuLimit),v=G(s?.replicaConfig?.memoryLimit)*1024**3,c=d.length>=2,f=u?"Collecting metrics":b?"Metrics unavailable":c?void 0:"No metric samples reported",$=p>0?d.map(m=>Math.min(100,m.cpu_usage_avg/p*100)):d.map(m=>m.cpu_usage_avg),y=p>0?"percent":"vcpus",j=l?p>0?`${Math.round(Math.min(100,l.cpu_p95/p*100))}%`:F(l.cpu_p95):"--",D=f||!l?"--":S(l.memory_p95),C=f??(v>0?`p95 of ${S(v)} limit`:"p95 usage"),M=d.map(m=>m.timestamp),a=d.map(m=>m.network_rx_sum),i=d.map(m=>m.network_tx_sum),N=V(u,b,a),E=V(u,b,i);return o||x&&u?e.jsx(X,{kind:"databases",tab:"metrics",variant:"tab"}):g?e.jsxs("div",{className:"space-y-6",children:[e.jsx("div",{className:"overflow-x-auto",children:e.jsx(A,{ariaLabel:"Database metric time range",onChange:m=>n(m),value:r})}),e.jsx(H,{label:W(s?.status)})]}):e.jsxs("div",{className:"space-y-6",children:[e.jsx("div",{className:"overflow-x-auto",children:e.jsx(A,{ariaLabel:"Database metric time range",onChange:m=>n(m),value:r})}),e.jsxs("div",{className:"grid gap-x-8 gap-y-6 lg:grid-cols-2",children:[e.jsx(L,{color:"var(--metric-amber)",detail:f??(p>0?`p95 ${j}`:"p95 usage"),timestamps:M,title:"CPU utilization",unit:y,value:f?"--":j,values:$}),e.jsx(L,{color:"var(--metric-green)",detail:C,timestamps:M,title:"Memory usage",unit:"bytes",value:D,values:d.map(m=>m.memory_avg)}),e.jsx(L,{color:"var(--metric-rose)",detail:N??"received per sample",timestamps:M,title:"Network receive",unit:"bytes",value:N||!l?"--":S(l.total_network_rx),values:a}),e.jsx(L,{color:"var(--metric-blue)",detail:E??"transmitted per sample",timestamps:M,title:"Network transmit",unit:"bytes",value:E||!l?"--":S(l.total_network_tx),values:i})]})]})}function L({color:t,detail:r,timestamps:n,title:s,unit:o,value:h,values:g}){const x=w.useId(),d=w.useRef(null),[l,b]=w.useState(0),[u,p]=w.useState(null),v=g.map((a,i)=>({sample:a,timestamp:n[i]})).filter(a=>typeof a.sample=="number"&&Number.isFinite(a.sample)),c=v.map(a=>a.sample),f=v.map(a=>a.timestamp),$=c.length>=2,y=$?Q(c,l<440?3:5):null,j=ee(v.length,l||k),D=`${x}-instructions`;w.useEffect(()=>{const a=d.current;if(!a)return;const i=new ResizeObserver(([N])=>b(N.contentRect.width));return i.observe(a),()=>i.disconnect()},[]);const C=a=>{const i=a.currentTarget.getBoundingClientRect(),N=Math.round((a.clientX-i.left)/Math.max(i.width,1)*(c.length-1));p(Math.max(0,Math.min(c.length-1,N)))},M=a=>{if(!c.length)return;const i=u??0;if(a.key==="ArrowLeft")p(Math.max(0,i-1));else if(a.key==="ArrowRight")p(Math.min(c.length-1,i+1));else if(a.key==="Home")p(0);else if(a.key==="End")p(c.length-1);else if(a.key==="Escape")p(null);else return;a.preventDefault()};return e.jsxs("section",{"aria-labelledby":`${x}-title`,className:"min-w-0",children:[e.jsxs("div",{className:"flex min-h-11 items-center justify-between gap-4 py-2",children:[e.jsx(z,{muted:!0,children:e.jsx("span",{id:`${x}-title`,children:s})}),e.jsx("span",{className:"font-mono text-[11px] font-medium text-muted-foreground",children:h})]}),e.jsxs("div",{className:"py-3",children:[e.jsx("p",{className:"text-xs font-medium text-muted-foreground",children:r}),$&&y?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"mt-3 grid h-[144px] grid-cols-[minmax(54px,68px)_minmax(0,1fr)] gap-3",children:[e.jsx(q,{ticks:y,unit:o}),e.jsxs("div",{"aria-describedby":D,"aria-label":`${s} chart`,className:"relative cursor-crosshair rounded-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",onKeyDown:M,onPointerDown:C,onPointerLeave:()=>p(null),onPointerMove:C,ref:d,role:"group",style:{touchAction:"pan-y"},tabIndex:0,children:[e.jsx("p",{className:"sr-only",id:D,children:"Use the left and right arrow keys to inspect live samples. Vertical touch swipes continue to scroll the page."}),e.jsx("div",{className:"pointer-events-none absolute inset-0 grid grid-rows-4",children:Array.from({length:4},(a,i)=>e.jsx("span",{className:"border-t border-mist-line"},i))}),e.jsxs("svg",{"aria-hidden":"true",className:"relative h-full w-full overflow-visible",preserveAspectRatio:"none",viewBox:`0 0 ${k} ${_}`,children:[e.jsx("polygon",{fill:t,fillOpacity:"0.2",points:Z(c,y)}),e.jsx("polyline",{fill:"none",points:P(c,y),stroke:t,strokeWidth:"2",vectorEffect:"non-scaling-stroke"}),u!==null?e.jsx("line",{stroke:"var(--primary)",strokeOpacity:"0.4",strokeWidth:"1",vectorEffect:"non-scaling-stroke",x1:u/Math.max(c.length-1,1)*k,x2:u/Math.max(c.length-1,1)*k,y1:"0",y2:_}):null]}),u!==null?e.jsxs("div",{className:"pointer-events-none absolute left-1/2 top-2 z-10 w-[min(210px,calc(100%-8px))] -translate-x-1/2 border border-cool-border bg-surface-primary px-2.5 py-2 font-mono text-[10px]",children:[e.jsx("p",{className:"font-semibold text-foreground",children:R(f[u],f[0])}),e.jsx("p",{className:"mt-1 text-muted-foreground",children:T(c[u],o)})]}):null]})]}),e.jsx("div",{"aria-hidden":"true",className:"ml-[68px] mt-2 grid font-mono text-[10px] text-muted-foreground",style:{gridTemplateColumns:`repeat(${Math.max(j.length,1)}, minmax(0, 1fr))`},children:j.map((a,i)=>e.jsx("span",{className:U("truncate",i===0?"text-left":i===j.length-1?"text-right":"text-center"),children:R(f[a],f[0])},a))})]}):e.jsx("div",{className:"mt-3 flex h-[144px] items-center justify-center border border-dashed border-cool-border px-4 text-center text-sm text-muted-foreground",role:"status",children:"No live metric samples are available for this period."}),e.jsx(J,{timestamps:f,title:s,unit:o,values:c})]})]})}function q({ticks:t,unit:r}){return e.jsx("div",{className:"flex flex-col justify-between text-right font-mono text-[10px] text-muted-foreground",children:[...t.values].reverse().map(n=>e.jsx("span",{children:T(n,r)},n))})}function J({timestamps:t,title:r,unit:n,values:s}){return s.length?e.jsx("div",{className:"sr-only",children:e.jsxs("table",{children:[e.jsxs("caption",{children:[r," metric data"]}),e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{scope:"col",children:"Time"}),e.jsx("th",{scope:"col",children:"Value"})]})}),e.jsx("tbody",{children:s.map((o,h)=>e.jsxs("tr",{children:[e.jsx("td",{children:R(t[h],t[0])}),e.jsx("td",{children:T(o,n)})]},`${t[h]??h}-${o}`))})]})}):null}function V(t,r,n){return t?"Collecting metrics":r?"Metrics unavailable":n.filter(s=>typeof s=="number"&&Number.isFinite(s)).length>=2?void 0:"No metric samples reported"}function Q(t,r){const n=Math.min(...t),s=Math.max(...t),o=n===s?Math.max(Math.abs(s)*.1,1):(s-n)*.08,h=Math.min(0,n-o),g=s+o,x=Y((g-h)/Math.max(r-1,1)),d=Math.floor(h/x)*x,l=Math.ceil(g/x)*x;return{max:l,min:d,values:Array.from({length:r},(b,u)=>d+(l-d)*u/Math.max(r-1,1))}}function Y(t){const r=10**Math.floor(Math.log10(Math.max(t,1))),n=t/r;return(n<=1?1:n<=2?2:n<=5?5:10)*r}function P(t,r){const n=Math.max(r.max-r.min,Number.EPSILON);return t.map((s,o)=>`${(o/Math.max(t.length-1,1)*k).toFixed(1)},${(6+(1-(s-r.min)/n)*(_-12)).toFixed(1)}`).join(" ")}function Z(t,r){return`0,${_} ${P(t,r)} ${k},${_}`}function ee(t,r){const n=Math.min(r<360?3:r<560?4:6,t);return Array.from({length:n},(s,o)=>Math.round(o/Math.max(n-1,1)*Math.max(t-1,0)))}function R(t,r){if(!t||Number.isNaN(Date.parse(t)))return"Sample unavailable";const n=new Date(t),s=r?Math.abs(n.getTime()-new Date(r).getTime())>2160*60*1e3:!1;return new Intl.DateTimeFormat("en-US",s?{day:"numeric",month:"short"}:{hour:"2-digit",minute:"2-digit"}).format(n)}function T(t,r){return r==="bytes"?S(t):r==="percent"?`${Math.round(t)}%`:F(t)}function F(t){return`${t.toFixed(t<1?2:1)} vCPU`}export{ue as DatabaseMetricsPanel};