PageSourceSearch

https://cloud.resilis.io/assets/database-connections-panel-DG_ft-gO.js

js resilis.io collected 2026-10-02 05:52:29 UTC 11,784 bytes, 3 lines download raw bytes

1import{j as e}from"./ui-vendor-Nh__yRYT.js";import{c as X,a2 as Z,bj as ee,aK as se,cz as te,cA as ae,cB as ie,cC as oe,cD as ne,B as h,a3 as z}from"./index-BinsBWQu.js";import{S as T}from"./section-eyebrow-BPze8Wk_.js";import{a as l}from"./react-vendor-NvA41F0Y.js";import{D as le,i as b,j as U,T as g,g as R}from"./workspace-primitives-NfWnrCu4.js";import{d as re,c as ce}from"./resource-detail-surfaces-DbAkUjPl.js";import{R as de}from"./resource-page-skeleton-1KNZyHNw.js";import{I as pe}from"./input-mDdvRMTd.js";import{S as me,a as xe,b as ue,c as he,d as D}from"./select-BRvlUhQt.js";import{S as be}from"./switch-Bhpovbex.js";import{E as ge}from"./eye-off-DEWjTAry.js";import{E as fe}from"./eye-DSWi_tE9.js";import{C as E}from"./copy-BhhTmFpR.js";import{P as je}from"./plus-_n2nHF24.js";import"./box-zbrfzSyp.js";import"./production-action-pending-dialog-CEnJIigo.js";import"./dialog-DUysxSdj.js";import"./format-DYfy5YRO.js";import"./resource-routing-D4y0aruO.js";import"./database-BwSA2v_u.js";import"./hard-drive-BW90_1Zg.js";import"./globe-CBV7s-GX.js";import"./server-Ce0Gr2DT.js";import"./technology-logo-CyR-JLb6.js";import"./external-link-DFSHR2Vg.js";import"./rotate-ccw-D-5Q1kJj.js";import"./chevron-down-DL-cA_A-.js";const ve=[["path",{d:"M5 12h14",key:"1ays0h"}]],$=X("minus",ve);function Ye({resource:r}){const{toast:o}=Z(),{data:d,isLoading:V}=ee(r.id,{enabled:!!r.id}),{data:t,isLoading:q}=se(d?.id||"",!!d?.id),{data:F}=te(r.id),f=ae(),j=ie(),I=oe(),v=ne(),[p,H]=l.useState("internal"),[N,A]=l.useState("transaction"),[c,y]=l.useState(1),[w,M]=l.useState(!1),[m,x]=l.useState([]),[u,G]=l.useState(!1),i=d?.databaseConfig,n=d?.id||"",_=re(t,i,r.name),B=ce(t,i,r.name),K=N!==(t?.poolMode||i?.connectionPooling?.poolMode||"transaction")||c!==(t?.poolerReplicas??1),O=w!==!!t?.publicAccessEnabled||m.join(`
2`)!==(t?.allowedCidrs??i?.allowedCidrs??[]).join(`
3`),C=F?.attached_apps??[];l.useEffect(()=>{A(t?.poolMode||i?.connectionPooling?.poolMode||"transaction"),y(t?.poolerReplicas??1),M(!!t?.publicAccessEnabled),x(t?.allowedCidrs??i?.allowedCidrs??["203.0.113.4/32","198.51.100.0/24"])},[i?.allowedCidrs,i?.connectionPooling?.poolMode,t?.allowedCidrs,t?.poolMode,t?.poolerReplicas,t?.publicAccessEnabled]);const Y=()=>{n&&(f.mutate({id:n,poolMode:N},{onError:s=>o({title:"Failed to update pool mode",description:s.message,variant:"destructive"}),onSuccess:()=>o({title:"Connection pooler updated"})}),j.mutate({id:n,replicas:c}))},J=()=>{if(!n)return;const s=m.map(a=>a.trim()).filter(Boolean);v.mutate({id:n,enabled:w,allowedCidrs:s},{onError:a=>o({title:"Failed to update public access",description:a.message,variant:"destructive"}),onSuccess:()=>o({title:"Public access updated"})})},Q=()=>{n&&I.mutate({id:n},{onError:s=>o({title:"Failed to apply plan limits",description:s.message,variant:"destructive"}),onSuccess:()=>o({title:"Plan limits applied"})})},P=(s,a)=>{if(!navigator.clipboard){o({title:"Copy failed",description:"Clipboard access was not available.",variant:"destructive"});return}navigator.clipboard.writeText(s).then(()=>o({title:`${a} copied`}),()=>o({title:"Copy failed",description:"Clipboard access was not available.",variant:"destructive"}))};return V||q?e.jsx(de,{kind:"databases",tab:"connections",variant:"tab"}):e.jsxs("div",{className:"grid gap-8 lg:grid-cols-[200px_minmax(0,1fr)]",children:[e.jsx(le,{active:p,items:[{id:"internal",label:"Internal"},{id:"pooler",label:"Connection Pooler"},{id:"public",label:"Public Access"}],onChange:H}),p==="internal"?e.jsxs("div",{className:"min-w-0 space-y-6",children:[e.jsx(b,{title:"Connection details",action:e.jsx("span",{className:"font-mono text-[11px] font-medium text-foreground",children:"pg-primary-1"}),children:e.jsx(U,{valueSize:"text-[11px]",rows:[{label:"Host",value:t?.host||"Not available"},{label:"Port",value:t?.port||5432},{label:"Database",value:t?.databaseName||i?.databaseName||r.name},{label:"Username",value:t?.username||i?.username||"Generated"},{label:"Password",value:t?.password?u?t.password:"••••••••":"Not available",action:t?.password?e.jsx(g,{label:u?"Hide password":"Reveal password",onClick:()=>G(s=>!s),pressed:u,children:u?e.jsx(ge,{className:"h-3.5 w-3.5"}):e.jsx(fe,{className:"h-3.5 w-3.5"})}):void 0},{label:"Connection URI",value:_,action:e.jsx(g,{label:"Copy connection URI",onClick:()=>P(_,"Connection URI"),children:e.jsx(E,{className:"h-3.5 w-3.5"})})}]})}),e.jsx(b,{title:"Connection strings",children:e.jsx("div",{className:"divide-y divide-mist-line",children:[["prisma","postgresql://app:••••@pg-pool:5432/appdb"],["django","postgresql://app:••••@pg-pool:5432/appdb"],["rails","postgresql://app:••••@pg-pool:5432/appdb"]].map(([s,a])=>e.jsxs("div",{className:"grid h-12 grid-cols-[120px_minmax(0,1fr)_auto] items-center gap-4 px-5 md:h-10",children:[e.jsx("span",{className:"text-xs font-medium text-foreground",children:s}),e.jsx("span",{className:"truncate font-mono text-xs text-muted-foreground",children:a}),e.jsx(g,{label:`Copy ${s} connection string`,onClick:()=>P(a,`${s} connection string`),children:e.jsx(E,{className:"h-3.5 w-3.5"})})]},s))})}),e.jsx(b,{title:"Attached apps",action:e.jsxs("span",{className:"text-[11px] font-medium text-muted-foreground",children:[C.length," linked apps"]}),children:e.jsx("div",{className:"divide-y divide-mist-line",children:C.length?C.map(s=>e.jsxs("div",{className:"flex h-10 items-center justify-between gap-4 px-5",children:[e.jsx("div",{children:e.jsx("p",{className:"text-xs font-medium text-foreground",children:s.name})}),e.jsxs("span",{className:"font-mono text-[11px] font-medium text-muted-foreground",children:[s.status," · ",s.env_keys.join(", ")
3]})]},s.resource_id)):e.jsx("div",{className:"px-5 py-6 text-xs font-medium text-muted-foreground",children:"No apps are attached through environment bindings yet."})})})]}):null,p==="pooler"?e.jsxs("div",{className:"min-w-0 space-y-6",children:[e.jsxs(b,{title:"Connection pooler",children:[e.jsxs("div",{className:"divide-y divide-mist-line",children:[e.jsxs("div",{className:"flex min-h-14 items-center justify-between gap-4 px-5 py-3",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-semibold text-foreground",children:"PgBouncer"}),e.jsx("p",{className:"mt-1 text-xs font-medium text-muted-foreground",children:"Low-latency pooling for database clients."})]}),e.jsx("span",{className:"border border-accent-strong/30 bg-accent-strong/10 px-2.5 py-1 text-[11px] font-semibold text-accent-strong",children:"Enabled"})]}),e.jsxs("div",{className:"grid min-h-14 gap-3 px-5 py-3 sm:grid-cols-[1fr_220px] sm:items-center",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-semibold text-foreground",children:"Pool Mode"}),e.jsx("p",{className:"mt-1 text-xs font-medium text-muted-foreground",children:"Transaction mode is recommended for web workloads."})]}),e.jsxs(me,{value:N,onValueChange:A,children:[e.jsx(xe,{className:"h-9 rounded-none",children:e.jsx(ue,{})}),e.jsxs(he,{children:[e.jsx(D,{value:"transaction",children:"Transaction"}),e.jsx(D,{value:"session",children:"Session"}),e.jsx(D,{value:"statement",children:"Statement"})]})]})]}),e.jsx("div",{className:"grid gap-3 px-5 py-4 sm:grid-cols-3",children:[["Max client connections",t?.maxClientConn??200],["Pool size",t?.defaultPoolSize??20],["Pooler replicas",c]].map(([s,a])=>e.jsxs("div",{className:"border border-cool-border bg-surface-primary px-4 py-3",children:[e.jsx("p",{className:"text-[11px] font-semibold uppercase tracking-[0.06em] text-muted-foreground",children:s}),e.jsx("p",{className:"mt-2 text-xl font-semibold text-foreground",children:a})]},s))}),e.jsxs("div",{className:"grid min-h-14 gap-3 px-5 py-3 sm:grid-cols-[1fr_auto] sm:items-center",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-semibold text-foreground",children:"Pooler replicas"}),e.jsx("p",{className:"mt-1 text-xs font-medium text-muted-foreground",children:"Increase replicas for regional connection fan-out."})]}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(h,{"aria-label":"Decrease pooler replicas",className:"h-7 w-7",disabled:c<=1,onClick:()=>y(s=>Math.max(1,s-1)),size:"icon",type:"button",variant:"outline",children:e.jsx($,{className:"h-3 w-3"})}),e.jsx("span",{className:"h-7 w-6 text-center font-mono text-[13px] font-normal leading-7 text-foreground",children:c}),e.jsx(h,{"aria-label":"Increase pooler replicas",className:"h-7 w-7",onClick:()=>y(s=>s+1),size:"icon",type:"button",variant:"outline",children:e.jsx(je,{className:"h-3 w-3"})})]})]})]}),e.jsx("div",{className:"flex justify-end border-t border-mist-line px-5 py-3",children:e.jsxs(R,{disabled:!K||f.isPending||j.isPending,onClick:Y,tone:"primary",width:"w-[138px]",children:[f.isPending||j.isPending?e.jsx(z,{className:"h-4 w-4"}):null,"Save Changes"]})})]}),e.jsxs("section",{className:"flex min-h-16 items-center justify-between gap-4 border border-cool-border bg-surface-primary px-5 py-4",children:[e.jsx("p",{className:"text-sm font-medium text-muted-foreground",children:"Your connection limits are below your plan's maximum."}),e.jsx(R,{disabled:I.isPending,onClick:Q,width:"w-[156px]",children:"Apply plan limits"})]})]}):null,p==="public"?e.jsx("div",{className:"min-w-0 space-y-6",children:e.jsxs("section",{className:"border border-cool-border bg-surface-primary",children:[e.jsxs("div",{className:"flex min-h-12 items-start justify-between gap-4 border-b border-mist-line px-5 py-4",children:[e.jsxs("div",{className:"max-w-[420px]",children:[e.jsx("h2",{className:"font-sidebar text-[15px] font-bold text-foreground",children:"Public Access"}),e.jsx("p",{className:"heading-subtitle mt-1",children:"Expose this database on a public host, restricted by IP allow list."})]}),e.jsxs("div",{className:"flex items-center gap-2.5",children:[e.jsx(be,{checked:w,onCheckedChange:M}),e.jsxs("span",{className:"bg-surface-secondary px-2 py-1 text-[11px] font-medium text-muted-foreground",children:[m.length," allowed ranges"]})]})]}),e.jsxs("div",{className:"divide-y divide-mist-line",children:[e.jsxs("div",{children:[e.jsx("div",{className:"flex h-11 items-center border-b border-mist-line px-5",children:e.jsx(T,{muted:!0,children:"Public endpoint"})}),e.jsx(U,{valueSize:"text-[11px]",rows:[{label:"Public host",value:t?.publicHost||"Disabled"},{label:"Public port",value:t?.publicPort||t?.port||5432}
3,{label:"Public DSN",value:B,action:e.jsx(g,{label:"Copy public DSN",onClick:()=>P(B,"Public DSN"),children:e.jsx(E,{className:"h-3.5 w-3.5"})})}]})]}),e.jsxs("div",{children:[e.jsx("div",{className:"flex h-11 items-center border-b border-mist-line px-5",children:e.jsx(T,{muted:!0,children:"IP allow list"})}),e.jsxs("div",{className:"space-y-2 px-5 py-4",children:[m.map((s,a)=>e.jsxs("div",{className:"grid grid-cols-[minmax(0,1fr)_auto] gap-2",children:[e.jsx(pe,{className:"h-9 rounded-none font-mono text-xs",onChange:S=>x(L=>L.map((k,W)=>W===a?S.target.value:k)),value:s}),e.jsx(h,{className:"rounded-none",onClick:()=>x(S=>S.filter((L,k)=>k!==a)),size:"icon",variant:"outline",children:e.jsx($,{className:"h-3.5 w-3.5"})})]},`${s}-${a}`)),e.jsx(h,{className:"h-9 px-0 text-xs",onClick:()=>x(s=>[...s,""]),size:"sm",type:"button",variant:"ghost",children:"+ Add CIDR range"}),e.jsx("p",{className:"border-t border-mist-line pt-3 text-[11px] font-medium text-muted-foreground",children:"Leaving this list empty allows access from any IP when public access is enabled."})]})]})]}),e.jsx("div",{className:"flex justify-end border-t border-mist-line px-5 py-3",children:e.jsxs(R,{disabled:!O||v.isPending,onClick:J,tone:"primary",width:"w-[138px]",children:[v.isPending?e.jsx(z,{className:"h-4 w-4"}):null,"Save Changes"]})})]})}):null]})}export{Ye as ConnectionsPanel};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.