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
8.7 KiB
JavaScript
1 line
8.7 KiB
JavaScript
import"./DsnmJJEf.js";import{i as K}from"./B3Pzt0F_.js";import{p as O,f as U,j as e,r as t,k as r,n as m,u as o,z as et,t as q,v as p,c as h,d as Q,E as ct,D as mt,B as Y,b as Z,g as P}from"./D8EpLgQ1.js";import{p as T,i as G,s as ut,a as pt}from"./5WA7h8uK.js";import{c as at,B as gt}from"./CiE1LlKV.js";import{b as R,B as H,e as xt}from"./BGVHQGl-.js";import{b as ft}from"./CoIRRsD9.js";import{e as yt}from"./wyaP0EDu.js";import{D as ht,G as tt}from"./C9DJVOi1.js";import{E as _t}from"./B7ITzBt8.js";import{S as bt}from"./BE4wujub.js";import{e as kt,i as wt}from"./u94nIB4-.js";import{b as Ct}from"./BAg1iRPq.js";var Pt=U('<div class="bg-white dark:bg-gray-800 shadow rounded-lg"><div class="px-4 py-5 sm:p-6"><h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4"> </h2> <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2"><div><dt class="text-sm font-medium text-gray-500 dark:text-gray-400">ID</dt> <dd class="mt-1 text-sm text-gray-900 dark:text-white font-mono"> </dd></div> <div><dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Created At</dt> <dd class="mt-1 text-sm text-gray-900 dark:text-white"> </dd></div> <div><dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Updated At</dt> <dd class="mt-1 text-sm text-gray-900 dark:text-white"> </dd></div> <div><dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Status</dt> <dd class="mt-1"><!></dd></div> <div><dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Pool Balancer Type</dt> <dd class="mt-1 text-sm text-gray-900 dark:text-white"> </dd></div> <div><dt class="text-sm font-medium text-gray-500 dark:text-gray-400"> </dt> <dd class="mt-1 text-sm"><a target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300"> <svg class="inline w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></a></dd></div></dl></div></div>');function Wt(L,v){O(v,!1);let a=T(v,"entity",8),g=T(v,"entityType",8);function N(){return`${g().charAt(0).toUpperCase()+g().slice(1)} Information`}function n(){if(!a().endpoint?.base_url)return"#";switch(g()){case"repository":const d=a();return`${a().endpoint.base_url}/${d.owner}/${a().name}`;case"organization":return`${a().endpoint.base_url}/${a().name}`;case"enterprise":return`${a().endpoint.base_url}/enterprises/${a().name}`;default:return"#"}}function E(){return`${g().charAt(0).toUpperCase()+g().slice(1)} URL`}function V(){const d=a().pool_balancing_type;if(!d||d===""||d==="none")return"Round Robin (default)";switch(d){case"roundrobin":return"Round Robin";case"pack":return"Pack";default:return d}}K();var c=Pt(),x=e(c),_=e(x),I=e(_,!0);t(_);var b=r(_,2),i=e(b),f=r(e(i),2),k=e(f,!0);t(f),t(i);var u=r(i,2),D=r(e(u),2),M=e(D,!0);t(D),t(u);var w=r(u,2),S=r(e(w),2),$=e(S,!0);t(S),t(w);var s=r(w,2),C=r(e(s),2),l=e(C);{var j=d=>{H(d,{variant:"success",text:"Running"})},z=d=>{H(d,{variant:"error",text:"Stopped"})};G(l,d=>{m(a()),o(()=>a().pool_manager_status?.running)?d(j):d(z,!1)})}t(C),t(s);var B=r(s,2),A=r(e(B),2),y=e(A,!0);t(A),t(B);var W=r(B,2),F=e(W),rt=e(F,!0);t(F);var X=r(F,2),J=e(X),st=e(J);et(),t(J),t(X),t(W),t(b),t(x),t(c),q((d,ot,it,dt,nt,lt,vt)=>{p(I,d),p(k,(m(a()),o(()=>a().id))),p(M,ot),p($,it),p(y,dt),p(rt,nt),at(J,"href",lt),p(st,`${vt??""} `)},[()=>o(N),()=>(m(R),m(a()),o(()=>R(a().created_at))),()=>(m(R),m(a()),o(()=>R(a().updated_at))),()=>o(V),()=>o(E),()=>o(n),()=>o(n)]),h(L,c),Q()}var Tt=U('<div class="p-6 text-center"><svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No pools configured</h3> <p class="mt-1 text-sm text-gray-500 dark:text-gray-400"> </p> <div class="mt-4"><!></div></div>'),Et=U('<div class="bg-white dark:bg-gray-800 shadow rounded-lg"><div class="px-4 py-5 sm:p-6"><div class="flex items-center justify-between mb-4"><h2 class="text-lg font-medium text-gray-900 dark:text-white"> </h2> <a class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">View all pools</a></div> <!></div></div>');function qt(L,v){O(v,!1);const[a,g]=ut(),N=()=>pt(yt,"$eagerCache",a);let n=T(v,"pools",8),E=T(v,"entityType",8),V=T(v,"entityId",8,""),c=T(v,"entityName",8,"");const x=ct();function _(){x("addPool",{entityType:E(),entityId:V(),entityName:c()})}const I=[{key:"id",title:"ID",flexible:!0,cellComponent:_t,cellProps:{entityType:"pool",showId:!0,fontMono:!0}},{key:"image",title:"Image",flexible:!0,cellComponent:tt,cellProps:{field:"image",type:"code",showTitle:!0}},{key:"provider",title:"Provider",cellComponent:tt,cellProps:{field:"provider_name"}},{key:"status",title:"Status",cellComponent:bt,cellProps:{statusType:"enabled"}}],b={entityType:"pool",primaryText:{field:"id",isClickable:!0,href:"/pools/{id}",useId:!0,isMonospace:!0},secondaryText:{field:"entity_name",computedValue:s=>xt(s,N())},badges:[{type:"custom",value:s=>({variant:s.enabled?"success":"error",text:s.enabled?"Enabled":"Disabled"})}]};K();var i=Et(),f=e(i),k=e(f),u=e(k),D=e(u);t(u);var M=r(u,2);t(k);var w=r(k,2);{var S=s=>{var C=Tt(),l=r(e(C),4),j=e(l);t(l);var z=r(l,2),B=e(z);gt(B,{variant:"primary",size:"sm",$$events:{click:_},children:(A,y)=>{et();var W=mt("Add Pool");h(A,W)},$$slots:{default:!0}}),t(z),t(C),q(()=>p(j,`No pools configured for this ${E()??""}.`)),h(s,C)},$=s=>{ht(s,{get columns(){return I},get data(){return n()},loading:!1,error:"",searchTerm:"",showSearch:!1,showPagination:!1,currentPage:1,get perPage(){return m(n()),o(()=>n().length)},totalPages:1,get totalItems(){return m(n()),o(()=>n().length)},itemName:"pools",emptyTitle:"No pools configured",get emptyMessage(){return`No pools configured for this ${E()??""}.`},emptyIconType:"cog",get mobileCardConfig(){return b}})};G(w,s=>{m(n()),o(()=>n().length===0)?s(S):s($,!1)})}t(f),t(i),q(()=>{p(D,`Pools (${m(n()),o(()=>n().length)??""})`),at(M,"href",`${ft}/pools`)}),h(L,i),Q(),g()}var It=U('<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg"><div class="flex justify-between items-start"><p class="text-sm text-gray-900 dark:text-white flex-1 mr-4"> </p> <div class="flex items-center space-x-2 flex-shrink-0"><!> <span class="text-xs text-gray-500 dark:text-gray-400"> </span></div></div></div>'),Bt=U('<div class="bg-white dark:bg-gray-800 shadow rounded-lg"><div class="px-4 py-5 sm:p-6"><h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Events</h2> <div class="space-y-3 max-h-96 overflow-y-auto scroll-smooth"></div></div></div>'),Nt=U('<div class="bg-white dark:bg-gray-800 shadow rounded-lg"><div class="px-4 py-5 sm:p-6"><h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Events</h2> <div class="text-center py-8"><svg class="w-12 h-12 text-gray-400 dark:text-gray-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg> <p class="text-sm text-gray-500 dark:text-gray-400">No events available</p></div></div></div>');function Ft(L,v){O(v,!1);let a=T(v,"events",8),g=T(v,"eventsContainer",12,void 0);K();var N=Y(),n=Z(N);{var E=c=>{var x=Bt(),_=e(x),I=r(e(_),2);kt(I,5,a,wt,(b,i)=>{var f=It(),k=e(f),u=e(k),D=e(u,!0);t(u);var M=r(u,2),w=e(M);{var S=l=>{H(l,{variant:"error",text:"Error"})},$=l=>{var j=Y(),z=Z(j);{var B=y=>{H(y,{variant:"warning",text:"Warning"})},A=y=>{H(y,{variant:"info",text:"Info"})};G(z,y=>{P(i),o(()=>(P(i).event_level||"info").toLowerCase()==="warning")?y(B):y(A,!1)},!0)}h(l,j)};G(w,l=>{P(i),o(()=>(P(i).event_level||"info").toLowerCase()==="error")?l(S):l($,!1)})}var s=r(w,2),C=e(s,!0);t(s),t(M),t(k),t(f),q(l=>{p(D,(P(i),o(()=>P(i).message))),p(C,l)},[()=>(m(R),P(i),o(()=>R(P(i).created_at)))]),h(b,f)}),t(I),Ct(I,b=>g(b),()=>g()),t(_),t(x),h(c,x)},V=c=>{var x=Nt();h(c,x)};G(n,c=>{m(a()),o(()=>a()&&a().length>0)?c(E):c(V,!1)})}h(L,N),Q()}export{Wt as E,qt as P,Ft as a};
|