Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

ui: fixes

Browse Source
This commit is contained in:
Andras Bacsai 2022-08-26 13:17:35 +02:00
parent 7528ca18d8
commit cf9e122bd2
2 changed files with 75 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/api/src/routes/api/v1/handlers.ts
View File

@ -118,7 +118,8 @@ export async function showDashboard(request: FastifyRequest) {
include: { settings: true } include: { settings: true }
}); });
const databases = await prisma.database.findMany({ const databases = await prisma.database.findMany({
where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } } where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
include: { settings: true }
}); });
const services = await prisma.service.findMany({ const services = await prisma.service.findMany({
where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } } where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } }

78
apps/ui/src/routes/index.svelte
View File

@ -80,13 +80,13 @@
{#if $appSession.teamId === '0'} {#if $appSession.teamId === '0'}
<Usage /> <Usage />
{/if} {/if}
{#if applications.length > 0}
<h1 class="title text-4xl mt-10">Applications</h1> <h1 class="title text-4xl mt-10">Applications</h1>
<div class="divider" /> <div class="divider" />
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3"> <div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3 p-4">
{#if applications.length > 0}
{#each applications as application} {#each applications as application}
<a class="no-underline mb-5" href={`/applications/${application.id}`}> <a class="no-underline mb-5" href={`/applications/${application.id}`}>
<div class="w-full rounded p-5 bg-coolgray-100 hover:bg-coolgray-300 indicator"> <div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator">
{#await getStatus(application)} {#await getStatus(application)}
<span class="indicator-item badge bg-yellow-500 badge-xs" /> <span class="indicator-item badge bg-yellow-500 badge-xs" />
{:then status} {:then status}
@ -99,18 +99,20 @@
<div class="w-full flex flex-row"> <div class="w-full flex flex-row">
<ApplicationsIcons {application} isAbsolute={false} /> <ApplicationsIcons {application} isAbsolute={false} />
<div class="w-full flex flex-col ml-5"> <div class="w-full flex flex-col ml-5">
<h1 class="font-bold text-lg"> <h1 class="font-bold text-xl truncate">
{application.name} {application.name}
{#if application.settings.isBot} {#if application.settings.isBot}
| BOT <span class="text-xs"> BOT</span>
{/if} {/if}
</h1> </h1>
<div class="h-10">
{#if application?.fqdn} {#if application?.fqdn}
<h2>{application?.fqdn}</h2> <h2>{application?.fqdn}</h2>
{:else if !application.settings.isBot && !application?.fqdn} {:else if !application.settings.isBot && !application?.fqdn}
<h2 class="text-red-500">Not configured</h2> <h2 class="text-red-500">Not configured</h2>
{/if} {/if}
<div class="flex justify-end space-x-2 pt-2"> </div>
<div class="flex justify-end items-end space-x-2 h-10">
{#if application.fqdn} {#if application.fqdn}
<a href={application.fqdn} target="_blank" class="icons"> <a href={application.fqdn} target="_blank" class="icons">
<svg <svg
@ -134,7 +136,7 @@
<a <a
href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`} href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`}
target="_blank" target="_blank"
class="icons" class="icons hover:bg-green-500"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -159,15 +161,17 @@
</div> </div>
</a> </a>
{/each} {/each}
</div> {:else}
<h1 class="">Nothing is configured yet.</h1>
{/if} {/if}
{#if services.length > 0} </div>
<h1 class="title text-4xl mt-10">Services</h1> <h1 class="title text-4xl mt-10">Services</h1>
<div class="divider" /> <div class="divider" />
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3"> <div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3 p-4">
{#if services.length > 0}
{#each services as service} {#each services as service}
<a class="no-underline mb-5" href={`/services/${service.id}`}> <a class="no-underline mb-5" href={`/services/${service.id}`}>
<div class="w-full rounded p-5 bg-coolgray-100 hover:bg-coolgray-300 indicator"> <div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator">
{#await getStatus(service)} {#await getStatus(service)}
<span class="indicator-item badge bg-yellow-500 badge-xs" /> <span class="indicator-item badge bg-yellow-500 badge-xs" />
{:then status} {:then status}
@ -180,15 +184,17 @@
<div class="w-full flex flex-row"> <div class="w-full flex flex-row">
<ServiceIcons type={service.type} isAbsolute={false} /> <ServiceIcons type={service.type} isAbsolute={false} />
<div class="w-full flex flex-col ml-5"> <div class="w-full flex flex-col ml-5">
<h1 class="font-bold text-lg">{service.name}</h1> <h1 class="font-bold text-xl truncate">{service.name}</h1>
<div class="h-10">
{#if service?.fqdn} {#if service?.fqdn}
<h2>{service?.fqdn}</h2> <h2>{service?.fqdn}</h2>
{:else} {:else}
<h2 class="text-red-500">Not configured</h2> <h2 class="text-red-500">Not configured</h2>
{/if} {/if}
<div class="flex justify-end space-x-2 pt-2"> </div>
<div class="flex justify-end items-end space-x-2 h-10">
{#if service.fqdn} {#if service.fqdn}
<a href={service.fqdn} target="_blank" class="icons"> <a href={service.fqdn} target="_blank" class="icons hover:bg-pink-500">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="h-6 w-6"
@ -212,15 +218,18 @@
</div> </div>
</a> </a>
{/each} {/each}
</div> {:else}
<h1 class="">Nothing is configured yet.</h1>
{/if} {/if}
{#if databases.length > 0} </div>
<h1 class="title text-4xl mt-10">Databases</h1> <h1 class="title text-4xl mt-10">Databases</h1>
<div class="divider" /> <div class="divider" />
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3"> <div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3 p-4 mb-32">
{#if databases.length > 0}
{#each databases as database} {#each databases as database}
<a class="no-underline mb-5" href={`/databases/${database.id}`}> <a class="no-underline mb-5" href={`/databases/${database.id}`}>
<div class="w-full rounded p-5 bg-coolgray-100 hover:bg-coolgray-300 indicator"> <div class="w-full rounded p-5 bg-coolgray-200 hover:bg-purple-500 indicator">
{#await getStatus(database)} {#await getStatus(database)}
<span class="indicator-item badge bg-yellow-500 badge-xs" /> <span class="indicator-item badge bg-yellow-500 badge-xs" />
{:then status} {:then status}
@ -233,16 +242,37 @@
<div class="w-full flex flex-row pt-2"> <div class="w-full flex flex-row pt-2">
<DatabaseIcons type={database.type} isAbsolute={false} /> <DatabaseIcons type={database.type} isAbsolute={false} />
<div class="w-full flex flex-col ml-5"> <div class="w-full flex flex-col ml-5">
<h1 class="font-bold text-lg">{database.name}</h1> <div class="h-10">
<h1 class="font-bold text-xl truncate">{database.name}</h1>
</div>
<div class="flex justify-end items-end space-x-2 h-10">
{#if database.settings.isPublic}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="3.6" y1="9" x2="20.4" y2="9" />
<line x1="3.6" y1="15" x2="20.4" y2="15" />
<path d="M11.5 3a17 17 0 0 0 0 18" />
<path d="M12.5 3a17 17 0 0 1 0 18" />
</svg>
{/if}
</div>
</div> </div>
</div> </div>
</div> </div>
</a> </a>
{/each} {/each}
</div> {:else}
{:else if $appSession.teamId !== '0'} <h1 class="">Nothing is configured yet.</h1>
<div class="text-center text-xl font-bold h-screen w-full flex flex-col justify-center">
<h1 class="text-5xl">Nothing is configured yet.</h1>
</div>
{/if} {/if}
</div> </div>
</div>