eec158b32c
This change adds a single page application front-end to GARM. It uses a generated REST client, built from the swagger definitions, the websocket interface for live updates of entities and eager loading of everything except runners, as users may have many runners and we don't want to load hundreds of runners in memory. Proper pagination should be implemented in the API, in future commits, to avoid loading lots of elements for no reason. Signed-off-by: Gabriel Adrian Samfira <gsamfira@cloudbasesolutions.com>
1 line
15 KiB
JavaScript
1 line
15 KiB
JavaScript
import"../chunks/DsnmJJEf.js";import{i as Ie}from"../chunks/B3Pzt0F_.js";import{p as Be,E as Ve,o as Le,l as x,s as a,m as s,g as e,y as W,a as Ne,f as T,k as i,j as o,r as n,c as M,t as V,v as se,x as De,u as v,z as Fe,e as $e,d as je,h as Ye,b as Ke,$ as Qe,n as E,q as ue}from"../chunks/D8EpLgQ1.js";import{a as qe,i as Y,s as Ge}from"../chunks/5WA7h8uK.js";import{r as ge,b as Se,h as Xe,c as Ze,g as me}from"../chunks/CiE1LlKV.js";import{b as Ae}from"../chunks/CoIRRsD9.js";import{e as et,i as tt}from"../chunks/u94nIB4-.js";import{b as Ue,a as Re}from"../chunks/C6k1Q4We.js";import{p as at}from"../chunks/D4Caz1gY.js";import{M as rt}from"../chunks/qB7B8uiS.js";import{F as ot}from"../chunks/CNMHKIIK.js";import{e as He,a as Pe}from"../chunks/wyaP0EDu.js";import{U as nt}from"../chunks/CclkODgu.js";import{D as it}from"../chunks/KQ2xQpA3.js";import{P as st}from"../chunks/CO4LUyTP.js";import{t as ie}from"../chunks/BEkVdVE1.js";import{B as lt,k as Ce,g as Oe,l as dt}from"../chunks/BGVHQGl-.js";import{D as ct,A as We,G as ut,a as gt}from"../chunks/C9DJVOi1.js";import{E as mt}from"../chunks/B7ITzBt8.js";import{E as pt}from"../chunks/CGpPw4EW.js";import{S as ft}from"../chunks/BE4wujub.js";var bt=T('<div class="mb-4 rounded-md bg-red-50 dark:bg-red-900 p-4"><p class="text-sm font-medium text-red-800 dark:text-red-200"> </p></div>'),vt=T('<div class="text-center py-4"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Loading...</p></div>'),yt=T("<option> </option>"),ht=T('<input type="password" class="block w-full px-3 py-2 mt-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm" placeholder="Enter webhook secret"/>'),_t=T('<p class="text-sm text-gray-500 dark:text-gray-400">Webhook secret will be automatically generated</p>'),xt=T('<form class="space-y-4"><!> <div><label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Organization Name</label> <input id="name" type="text" required class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm" placeholder="Enter organization name"/></div> <div><label for="credentials" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Credentials</label> <select id="credentials" required class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm"><option>Select credentials...</option><!></select></div> <div><div class="flex items-center mb-1"><label for="pool_balancer_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Pool Balancer Type</label> <div class="ml-2 relative group"><svg class="w-4 h-4 text-gray-400 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-80 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"><div class="mb-2"><strong>Round Robin:</strong> Cycles through pools in turn. Job 1 → Pool 1, Job 2 → Pool 2, etc.</div> <div><strong>Pack:</strong> Uses first available pool until full, then moves to next pool.</div> <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div></div></div></div> <select id="pool_balancer_type" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm"><option>Round Robin</option><option>Pack</option></select></div> <div><div class="flex items-center mb-3"><input id="install-webhook" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"/> <label for="install-webhook" class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Install Webhook</label></div> <div class="space-y-3"><div class="flex items-center"><input id="generate-webhook-secret" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"/> <label for="generate-webhook-secret" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Auto-generate webhook secret</label></div> <!></div></div> <div class="flex justify-end space-x-3 pt-4"><button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 cursor-pointer">Cancel</button> <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"> </button></div></form>'),kt=T('<div class="max-w-2xl w-full p-6"><h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Create Organization</h3> <!> <!></div>');function wt(pe,fe){Be(fe,!1);const[be,ve]=Ge(),p=()=>qe(He,"$eagerCache",be),D=s(),w=s(),z=s(),K=s(),$=Ve();let C=s(!1),f=s(""),y=s("github"),r=s({name:"",credentials_name:"",webhook_secret:"",pool_balancer_type:"roundrobin"}),k=s(!0),b=s(!0);async function I(){if(!p().loaded.credentials&&!p().loading.credentials)try{await Pe.getCredentials()}catch(d){a(f,d instanceof Error?d.message:"Failed to load credentials")}}function B(d){a(y,d.detail),W(r,e(r).credentials_name="")}function c(){if(e(r).credentials_name){const d=e(D).find(L=>L.name===e(r).credentials_name);d&&d.forge_type&&a(y,d.forge_type)}}function ye(){const d=new Uint8Array(32);return crypto.getRandomValues(d),Array.from(d,L=>L.toString(16).padStart(2,"0")).join("")}async function he(){if(!e(r).name?.trim()){a(f,"Organization name is required");return}if(!e(r).credentials_name){a(f,"Please select credentials");return}try{a(C,!0),a(f,"");const d={...e(r),install_webhook:e(k),auto_generate_secret:e(b)};$("submit",d)}catch(d){a(f,d instanceof Error?d.message:"Failed to create organization"),a(C,!1)}}Le(()=>{I()}),x(()=>p(),()=>{a(D,p().credentials)}),x(()=>p(),()=>{a(w,p().loading.credentials)}),x(()=>(e(D),e(y)),()=>{a(z,e(D).filter(d=>e(y)?d.forge_type===e(y):!0))}),x(()=>e(b),()=>{e(b)?W(r,e(r).webhook_secret=ye()):e(b)||W(r,e(r).webhook_secret="")}),x(()=>(e(r),e(b)),()=>{a(K,e(r).name?.trim()!==""&&e(r).credentials_name!==""&&(e(b)||e(r).webhook_secret&&e(r).webhook_secret.trim()!==""))}),Ne(),Ie(),rt(pe,{$$events:{close:()=>$("close")},children:(d,L)=>{var F=kt(),N=i(o(F),2);{var _e=h=>{var _=bt(),S=o(_),A=o(S,!0);n(S),n(_),V(()=>se(A,e(f))),M(h,_)};Y(N,h=>{e(f)&&h(_e)})}var xe=i(N,2);{var ke=h=>{var _=vt();M(h,_)},we=h=>{var _=xt(),S=o(_);ot(S,{get selectedForgeType(){return e(y)},set selectedForgeType(l){a(y,l)},$$events:{select:B},$$legacy:!0});var A=i(S,2),Q=i(o(A),2);ge(Q),n(A);var U=i(A,2),R=i(o(U),2);V(()=>{e(r),De(()=>{e(z)})});var X=o(R);X.value=X.__value="";var le=i(X);et(le,1,()=>e(z),tt,(l,m)=>{var P=yt(),ze=o(P);n(P);var ne={};V(()=>{se(ze,`${e(m),v(()=>e(m).name)??""} (${e(m),v(()=>e(m).endpoint?.name||"Unknown endpoint")??""})`),ne!==(ne=(e(m),v(()=>e(m).name)))&&(P.value=(P.__value=(e(m),v(()=>e(m).name)))??"")}),M(l,P)}),n(R),n(U);var Z=i(U,2),j=i(o(Z),2);V(()=>{e(r),De(()=>{})});var ee=o(j);ee.value=ee.__value="roundrobin";var de=i(ee);de.value=de.__value="pack",n(j),n(Z);var te=i(Z,2),t=o(te),g=o(t);ge(g),Fe(2),n(t);var q=i(t,2),O=o(q),u=o(O);ge(u),Fe(2),n(O);var G=i(O,2);{var ae=l=>{var m=ht();ge(m),Ue(m,()=>e(r).webhook_secret,P=>W(r,e(r).webhook_secret=P)),M(l,m)},re=l=>{var m=_t();M(l,m)};Y(G,l=>{e(b)?l(re,!1):l(ae)})}n(q),n(te);var H=i(te,2),J=o(H),oe=i(J,2),ce=o(oe,!0);n(oe),n(H),n(_),V(()=>{oe.disabled=e(C)||e(w)||!e(K),se(ce,e(C)?"Creating...":"Create Organization")}),Ue(Q,()=>e(r).name,l=>W(r,e(r).name=l)),Se(R,()=>e(r).credentials_name,l=>W(r,e(r).credentials_name=l)),$e("change",R,c),Se(j,()=>e(r).pool_balancer_type,l=>W(r,e(r).pool_balancer_type=l)),Re(g,()=>e(k),l=>a(k,l)),Re(u,()=>e(b),l=>a(b,l)),$e("click",J,()=>$("close")),$e("submit",_,at(he)),M(h,_)};Y(xe,h=>{e(C)?h(ke):h(we,!1)})}n(F),M(d,F)},$$slots:{default:!0}}),je(),ve()}var zt=T('<div class="flex items-center justify-between"><div class="flex-1 min-w-0"><a class="block"><p class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 truncate"> </p> <div class="flex items-center mt-1 space-x-2"><div class="flex items-center text-xs text-gray-500 dark:text-gray-400"><!> <span class="ml-1"> </span></div></div></a></div> <div class="flex items-center space-x-3 ml-4"><!> <div class="flex space-x-2"><!> <!></div></div></div>'),$t=T('<div class="space-y-6"><!> <!></div> <!> <!> <!>',1);function Jt(pe,fe){Be(fe,!1);const[be,ve]=Ge(),p=()=>qe(He,"$eagerCache",be),D=s(),w=s(),z=s(),K=s();let $=s([]),C=s(!0),f=s(""),y=s(""),r=s(1),k=s(25),b=s(!1),I=s(!1),B=s(!1),c=s(null);async function ye(t){try{a(f,"");const g=t.detail,q={name:g.name,credentials_name:g.credentials_name,webhook_secret:g.webhook_secret,pool_balancer_type:g.pool_balancer_type},O=await me.createOrganization(q);if(g.install_webhook&&O.id)try{await me.installOrganizationWebhook(O.id),ie.success("Webhook Installed",`Webhook for organization ${O.name} has been installed successfully.`)}catch(u){console.warn("Organization created but webhook installation failed:",u),ie.error("Webhook Installation Failed",u instanceof Error?u.message:"Failed to install webhook. You can try installing it manually from the organization details page.")}ie.success("Organization Created",`Organization ${O.name} has been created successfully.`),a(b,!1)}catch(g){throw a(f,g instanceof Error?g.message:"Failed to create organization"),g}}async function he(t){if(e(c))try{await me.updateOrganization(e(c).id,t),ie.success("Organization Updated",`Organization ${e(c).name} has been updated successfully.`),a(I,!1),a(c,null)}catch(g){throw g}}async function d(){if(e(c))try{a(f,""),await me.deleteOrganization(e(c).id),ie.success("Organization Deleted",`Organization ${e(c).name} has been deleted successfully.`),a(B,!1),a(c,null)}catch(t){a(f,t instanceof Error?t.message:"Failed to delete organization")}}function L(){a(b,!0)}function F(t){a(c,t),a(I,!0)}function N(t){a(c,t),a(B,!0)}Le(async()=>{try{a(C,!0);const t=await Pe.getOrganizations();t&&Array.isArray(t)&&a($,t)}catch(t){console.error("Failed to load organizations:",t),a(f,t instanceof Error?t.message:"Failed to load organizations")}finally{a(C,!1)}});async function _e(){try{await Pe.retryResource("organizations")}catch(t){console.error("Retry failed:",t)}}const xe=[{key:"name",title:"Name",cellComponent:mt,cellProps:{entityType:"organization"}},{key:"endpoint",title:"Endpoint",cellComponent:pt},{key:"credentials",title:"Credentials",cellComponent:ut,cellProps:{field:"credentials_name"}},{key:"status",title:"Status",cellComponent:ft,cellProps:{statusType:"entity"}},{key:"actions",title:"Actions",align:"right",cellComponent:gt}],ke={entityType:"organization",primaryText:{field:"name",isClickable:!0,href:"/organizations/{id}"},customInfo:[{icon:t=>Oe(t?.endpoint?.endpoint_type||"unknown"),text:t=>t?.endpoint?.name||"Unknown"}],badges:[{type:"custom",value:t=>Ce(t)}],actions:[{type:"edit",handler:t=>F(t)},{type:"delete",handler:t=>N(t)}]};function we(t){a(y,t.detail.term),a(r,1)}function h(t){a(r,t.detail.page)}function _(t){a(k,t.detail.perPage),a(r,1)}function S(t){F(t.detail.item)}function A(t){N(t.detail.item)}x(()=>(e($),p()),()=>{(!e($).length||p().loaded.organizations)&&a($,p().organizations)}),x(()=>p(),()=>{a(C,p().loading.organizations)}),x(()=>p(),()=>{a(D,p().errorMessages.organizations)}),x(()=>(e($),e(y)),()=>{a(w,dt(e($),e(y)))}),x(()=>(e(w),e(k)),()=>{a(z,Math.ceil(e(w).length/e(k)))}),x(()=>(e(r),e(z)),()=>{e(r)>e(z)&&e(z)>0&&a(r,e(z))}),x(()=>(e(w),e(r),e(k)),()=>{a(K,e(w).slice((e(r)-1)*e(k),e(r)*e(k)))}),Ne(),Ie();var Q=$t();Ye(t=>{Qe.title="Organizations - GARM"});var U=Ke(Q),R=o(U);st(R,{title:"Organizations",description:"Manage GitHub and Gitea organizations",actionLabel:"Add Organization",$$events:{action:L}});var X=i(R,2);{let t=ue(()=>e(D)||e(f)),g=ue(()=>!!e(D));ct(X,{get columns(){return xe},get data(){return e(K)},get loading(){return e(C)},get error(){return e(t)},get searchTerm(){return e(y)},searchPlaceholder:"Search organizations...",get currentPage(){return e(r)},get perPage(){return e(k)},get totalPages(){return e(z)},get totalItems(){return e(w),v(()=>e(w).length)},itemName:"organizations",emptyIconType:"building",get showRetry(){return e(g)},get mobileCardConfig(){return ke},$$events:{search:we,pageChange:h,perPageChange:_,retry:_e,edit:S,delete:A},$$slots:{"mobile-card":(q,O)=>{const u=ue(()=>O.item),G=ue(()=>(E(Ce),E(e(u)),v(()=>Ce(e(u)))));var ae=zt(),re=o(ae),H=o(re),J=o(H),oe=o(J,!0);n(J);var ce=i(J,2),l=o(ce),m=o(l);Xe(m,()=>(E(Oe),E(e(u)),v(()=>Oe(e(u).endpoint?.endpoint_type||"unknown"))));var P=i(m,2),ze=o(P,!0);n(P),n(l),n(ce),n(H),n(re);var ne=i(re,2),Ee=o(ne);lt(Ee,{get variant(){return E(e(G)),v(()=>e(G).variant)},get text(){return E(e(G)),v(()=>e(G).text)}});var Me=i(Ee,2),Te=o(Me);We(Te,{action:"edit",size:"sm",title:"Edit organization",ariaLabel:"Edit organization",$$events:{click:()=>F(e(u))}});var Je=i(Te,2);We(Je,{action:"delete",size:"sm",title:"Delete organization",ariaLabel:"Delete organization",$$events:{click:()=>N(e(u))}}),n(Me),n(ne),n(ae),V(()=>{Ze(H,"href",(E(Ae),E(e(u)),v(()=>`${Ae}/organizations/${e(u).id}`))),se(oe,(E(e(u)),v(()=>e(u).name))),se(ze,(E(e(u)),v(()=>e(u).endpoint?.name||"Unknown")))}),M(q,ae)}}})}n(U);var le=i(U,2);{var Z=t=>{wt(t,{$$events:{close:()=>a(b,!1),submit:ye}})};Y(le,t=>{e(b)&&t(Z)})}var j=i(le,2);{var ee=t=>{nt(t,{get entity(){return e(c)},entityType:"organization",$$events:{close:()=>{a(I,!1),a(c,null)},submit:g=>he(g.detail)}})};Y(j,t=>{e(I)&&e(c)&&t(ee)})}var de=i(j,2);{var te=t=>{it(t,{title:"Delete Organization",message:"Are you sure you want to delete this organization? This action cannot be undone.",get itemName(){return e(c),v(()=>e(c).name)},$$events:{close:()=>{a(B,!1),a(c,null)},confirm:d}})};Y(de,t=>{e(B)&&e(c)&&t(te)})}M(pe,Q),je(),ve()}export{Jt as component};
|