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
13 KiB
JavaScript
1 line
13 KiB
JavaScript
import"./DsnmJJEf.js";import{i as cr}from"./B3Pzt0F_.js";import{p as pr,E as vr,m as u,o as fr,s as n,f as E,j as d,r as t,k as a,g as e,t as _,x as He,u as h,z as mr,n as D,v as k,e as w,c as m,D as yr,d as xr}from"./D8EpLgQ1.js";import{p as _r,i as ge,s as hr,a as kr}from"./5WA7h8uK.js";import{e as wr,i as Er}from"./u94nIB4-.js";import{r as c,b as Ke,c as Rr}from"./CiE1LlKV.js";import{b as p,a as $r}from"./C6k1Q4We.js";import{p as Sr}from"./D4Caz1gY.js";import{M as Tr}from"./qB7B8uiS.js";import{J as Or}from"./DZblzgqm.js";import{e as Pr}from"./wyaP0EDu.js";var Jr=E('<div class="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>'),Mr=E('<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"> <button type="button" class="ml-1 h-4 w-4 rounded-full hover:bg-blue-200 dark:hover:bg-blue-800 flex items-center justify-center cursor-pointer"><svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></span>'),Nr=E('<div class="flex flex-wrap gap-2"></div>'),Ur=E('<div class="flex items-center"><div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div> Updating...</div>'),Ar=E('<div class="max-w-6xl w-full max-h-[90vh] overflow-y-auto"><div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700"><h2 class="text-xl font-semibold text-gray-900 dark:text-white"> </h2></div> <form class="p-6 space-y-6"><!> <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg"><h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pool Information (Read-only)</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm"><div class="flex"><span class="text-gray-500 dark:text-gray-400 w-20 flex-shrink-0">Provider:</span> <span class="text-gray-900 dark:text-white"> </span></div> <div class="flex"><span class="text-gray-500 dark:text-gray-400 w-16 flex-shrink-0">Entity:</span> <span class="text-gray-900 dark:text-white"> </span></div></div></div> <div class="space-y-4"><h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Image & OS Configuration</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div><label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Image</label> <input id="image" type="text" placeholder="e.g., ubuntu:22.04" class="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"/></div> <div><label for="flavor" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Flavor</label> <input id="flavor" type="text" placeholder="e.g., default" class="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"/></div> <div><label for="osType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">OS Type</label> <select id="osType" class="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"><option>Linux</option><option>Windows</option></select></div> <div><label for="osArch" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Architecture</label> <select id="osArch" class="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"><option>AMD64</option><option>ARM64</option></select></div></div></div> <div class="space-y-4"><h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Runner Limits & Timing</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"><div><label for="minIdleRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Min Idle Runners</label> <input id="minIdleRunners" type="number" min="0" placeholder="0" class="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"/></div> <div><label for="maxRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Max Runners</label> <input id="maxRunners" type="number" min="1" placeholder="10" class="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"/></div> <div><label for="bootstrapTimeout" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bootstrap Timeout (min)</label> <input id="bootstrapTimeout" type="number" min="1" placeholder="20" class="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"/></div></div></div> <div class="space-y-4"><h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">Advanced Settings</h3> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"><div><label for="runnerPrefix" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Runner Prefix</label> <input id="runnerPrefix" type="text" placeholder="garm" class="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"/></div> <div><label for="priority" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Priority</label> <input id="priority" type="number" min="1" placeholder="100" class="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"/></div> <div><label for="githubRunnerGroup" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">GitHub Runner Group (optional)</label> <input id="githubRunnerGroup" type="text" placeholder="Default group" class="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"/></div></div> <div><fieldset><legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tags</legend> <div class="space-y-2"><div class="flex"><input type="text" placeholder="Enter a tag" class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-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"/> <button type="button" class="px-3 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer">Add</button></div> <!></div></fieldset></div> <div><fieldset><legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Extra Specs (JSON)</legend> <!></fieldset></div> <div class="flex items-center"><input id="enabled" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"/> <label for="enabled" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Pool enabled</label></div></div> <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200 dark:border-gray-700"><button type="button" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer">Cancel</button> <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"><!></button></div></form></div>');function Wr(We,ce){pr(ce,!1);const[qe,Qe]=hr(),B=()=>kr(Pr,"$eagerCache",qe);let o=_r(ce,"pool",8);const G=vr();let R=u(!1),$=u(""),S=u(o().image||""),T=u(o().flavor||""),O=u(o().max_runners),P=u(o().min_idle_runners),J=u(o().runner_bootstrap_timeout),M=u(o().priority),N=u(o().runner_prefix||""),y=u(o().os_type||"linux"),x=u(o().os_arch||"amd64"),U=u(o()["github-runner-group"]||""),A=u(o().enabled),g=u((o().tags||[]).map(i=>i.name||"").filter(Boolean)),f=u(""),v=u("{}");function Ve(i){if(i.repo_id){const s=B().repositories.find(l=>l.id===i.repo_id);return s?`${s.owner}/${s.name}`:"Unknown Entity"}if(i.org_id){const s=B().organizations.find(l=>l.id===i.org_id);return s&&s.name?s.name:"Unknown Entity"}if(i.enterprise_id){const s=B().enterprises.find(l=>l.id===i.enterprise_id);return s&&s.name?s.name:"Unknown Entity"}return"Unknown Entity"}function Xe(i){return i.repo_id?"Repository":i.org_id?"Organization":i.enterprise_id?"Enterprise":"Unknown"}fr(()=>{if(o().extra_specs)try{if(typeof o().extra_specs=="object")n(v,JSON.stringify(o().extra_specs,null,2));else{const i=JSON.parse(o().extra_specs);n(v,JSON.stringify(i,null,2))}}catch{n(v,o().extra_specs||"{}")}});function pe(){e(f).trim()&&!e(g).includes(e(f).trim())&&(n(g,[...e(g),e(f).trim()]),n(f,""))}function Ye(i){n(g,e(g).filter((s,l)=>l!==i))}function Ze(i){i.key==="Enter"&&(i.preventDefault(),pe())}async function er(){try{n(R,!0),n($,"");let i={};if(e(v).trim())try{i=JSON.parse(e(v))}catch{throw new Error("Invalid JSON in extra specs")}const s={image:e(S)!==o().image?e(S):void 0,flavor:e(T)!==o().flavor?e(T):void 0,max_runners:e(O)!==o().max_runners?e(O):void 0,min_idle_runners:e(P)!==o().min_idle_runners?e(P):void 0,runner_bootstrap_timeout:e(J)!==o().runner_bootstrap_timeout?e(J):void 0,priority:e(M)!==o().priority?e(M):void 0,runner_prefix:e(N)!==o().runner_prefix?e(N):void 0,os_type:e(y)!==o().os_type?e(y):void 0,os_arch:e(x)!==o().os_arch?e(x):void 0,"github-runner-group":e(U)!==o()["github-runner-group"]&&e(U)||void 0,enabled:e(A)!==o().enabled?e(A):void 0,tags:JSON.stringify(e(g))!==JSON.stringify((o().tags||[]).map(l=>l.name||"").filter(Boolean))?e(g):void 0,extra_specs:e(v).trim()!==JSON.stringify(o().extra_specs||{},null,2).trim()?i:void 0};Object.keys(s).forEach(l=>{s[l]===void 0&&delete s[l]}),G("submit",s)}catch(i){n($,i instanceof Error?i.message:"Failed to update pool")}finally{n(R,!1)}}cr(),Tr(We,{$$events:{close:()=>G("close")},children:(i,s)=>{var l=Ar(),z=d(l),ve=d(z),rr=d(ve);t(ve),t(z);var L=a(z,2),fe=d(L);{var tr=r=>{var b=Jr(),j=d(b),C=d(j,!0);t(j),t(b),_(()=>k(C,e($))),m(r,b)};ge(fe,r=>{e($)&&r(tr)})}var F=a(fe,2),me=a(d(F),2),H=d(me),ye=a(d(H),2),ar=d(ye,!0);t(ye),t(H);var xe=a(H,2),_e=a(d(xe),2),dr=d(_e);t(_e),t(xe),t(me),t(F);var K=a(F,2),he=a(d(K),2),W=d(he),ke=a(d(W),2);c(ke),t(W);var q=a(W,2),we=a(d(q),2);c(we),t(q);var Q=a(q,2),V=a(d(Q),2);_(()=>{e(y),He(()=>{})});var X=d(V);X.value=X.__value="linux";var Ee=a(X);Ee.value=Ee.__value="windows",t(V),t(Q);var Re=a(Q,2),Y=a(d(Re),2);_(()=>{e(x),He(()=>{})});var Z=d(Y);Z.value=Z.__value="amd64";var $e=a(Z);$e.value=$e.__value="arm64",t(Y),t(Re),t(he),t(K);var ee=a(K,2),Se=a(d(ee),2),re=d(Se),Te=a(d(re),2);c(Te),t(re);var te=a(re,2),Oe=a(d(te),2);c(Oe),t(te);var Pe=a(te,2),Je=a(d(Pe),2);c(Je),t(Pe),t(Se),t(ee);var ae=a(ee,2),de=a(d(ae),2),oe=d(de),Me=a(d(oe),2);c(Me),t(oe);var ie=a(oe,2),Ne=a(d(ie),2);c(Ne),t(ie);var Ue=a(ie,2),Ae=a(d(Ue),2);c(Ae),t(Ue),t(de);var ne=a(de,2),Ie=d(ne),je=a(d(Ie),2),se=d(je),I=d(se);c(I);var or=a(I,2);t(se);var ir=a(se,2);{var nr=r=>{var b=Nr();wr(b,5,()=>e(g),Er,(j,C,gr)=>{var be=Mr(),Le=d(be),Fe=a(Le);t(be),_(()=>{k(Le,`${e(C)??""} `),Rr(Fe,"aria-label",`Remove tag ${e(C)??""}`)}),w("click",Fe,()=>Ye(gr)),m(j,be)}),t(b),m(r,b)};ge(ir,r=>{e(g),h(()=>e(g).length>0)&&r(nr)})}t(je),t(Ie),t(ne);var le=a(ne,2),Ce=d(le),sr=a(d(Ce),2);Or(sr,{rows:4,placeholder:"{}",get value(){return e(v)},set value(r){n(v,r)},$$legacy:!0}),t(Ce),t(le);var De=a(le,2),Be=d(De);c(Be),mr(2),t(De),t(ae);var Ge=a(ae,2),ze=d(Ge),ue=a(ze,2),lr=d(ue);{var ur=r=>{var b=Ur();m(r,b)},br=r=>{var b=yr("Update Pool");m(r,b)};ge(lr,r=>{e(R)?r(ur):r(br,!1)})}t(ue),t(Ge),t(L),t(l),_((r,b)=>{k(rr,`Update Pool ${D(o()),h(()=>o().id)??""}`),k(ar,(D(o()),h(()=>o().provider_name))),k(dr,`${r??""}: ${b??""}`),ue.disabled=e(R)},[()=>(D(o()),h(()=>Xe(o()))),()=>(D(o()),h(()=>Ve(o())))]),p(ke,()=>e(S),r=>n(S,r)),p(we,()=>e(T),r=>n(T,r)),Ke(V,()=>e(y),r=>n(y,r)),Ke(Y,()=>e(x),r=>n(x,r)),p(Te,()=>e(P),r=>n(P,r)),p(Oe,()=>e(O),r=>n(O,r)),p(Je,()=>e(J),r=>n(J,r)),p(Me,()=>e(N),r=>n(N,r)),p(Ne,()=>e(M),r=>n(M,r)),p(Ae,()=>e(U),r=>n(U,r)),p(I,()=>e(f),r=>n(f,r)),w("keydown",I,Ze),w("click",or,pe),$r(Be,()=>e(A),r=>n(A,r)),w("click",ze,()=>G("close")),w("submit",L,Sr(er)),m(i,l)},$$slots:{default:!0}}),xr(),Qe()}export{Wr as U};
|