ui: fine-tune

This commit is contained in:
Andras Bacsai 2022-08-26 10:29:45 +02:00
parent 3b95d7278d
commit 0e8b069781
2 changed files with 160 additions and 223 deletions

View File

@ -22,9 +22,9 @@
usage: false, usage: false,
cleanup: false cleanup: false
}; };
import { appSession } from '$lib/store'; import { addToast, appSession } from '$lib/store';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import { get } from '$lib/api'; import { get, post } from '$lib/api';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';
async function getStatus() { async function getStatus() {
if (loading.usage) return; if (loading.usage) return;
@ -48,13 +48,36 @@
return errorNotification(error); return errorNotification(error);
} }
}); });
async function manuallyCleanupStorage() {
try {
loading.cleanup = true;
await post('/internal/cleanup', {});
return addToast({
message: 'Cleanup done.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
loading.cleanup = false;
}
}
</script> </script>
<div class="w-full"> <div class="w-full">
<h1 class="title text-4xl">Hardware details</h1> <div class="flex items-center">
<h1 class="title text-4xl">Hardware Details</h1>
{#if $appSession.teamId === '0'}
<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
>Cleanup Storage</button
>
{/if}
</div>
<div class="divider" /> <div class="divider" />
<div class="grid grid-flow-col gap-4 grid-rows-3 lg:grid-rows-1"> <div class="grid grid-flow-col gap-4 grid-rows-3 lg:grid-rows-1">
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-100 rounded"> <div
class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-200 rounded"
>
<div class="stat"> <div class="stat">
<div class="stat-title">Total Memory</div> <div class="stat-title">Total Memory</div>
<div class="stat-value text-2xl"> <div class="stat-value text-2xl">
@ -77,7 +100,9 @@
</div> </div>
</div> </div>
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-100 rounded"> <div
class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-200 rounded"
>
<div class="stat"> <div class="stat">
<div class="stat-title">Total CPUs</div> <div class="stat-title">Total CPUs</div>
<div class="stat-value text-2xl"> <div class="stat-value text-2xl">
@ -98,7 +123,9 @@
</div> </div>
</div> </div>
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-100 rounded"> <div
class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-200 rounded"
>
<div class="stat"> <div class="stat">
<div class="stat-title">Total Disk</div> <div class="stat-title">Total Disk</div>
<div class="stat-value text-2xl"> <div class="stat-value text-2xl">
@ -115,7 +142,9 @@
<div class="stat"> <div class="stat">
<div class="stat-title">Free Disk</div> <div class="stat-title">Free Disk</div>
<div class="stat-value text-2xl">{usage?.disk.freePercentage}<span class="text-sm">%</span></div> <div class="stat-value text-2xl">
{usage?.disk.freePercentage}<span class="text-sm">%</span>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -36,10 +36,6 @@
import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte'; import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
import { dev } from '$app/env'; import { dev } from '$app/env';
let loading = {
cleanup: false
};
let numberOfGetStatus = 0; let numberOfGetStatus = 0;
function getRndInteger(min: number, max: number) { function getRndInteger(min: number, max: number) {
@ -75,253 +71,165 @@
numberOfGetStatus--; numberOfGetStatus--;
} }
} }
async function manuallyCleanupStorage() {
try {
loading.cleanup = true;
await post('/internal/cleanup', {});
return addToast({
message: 'Cleanup done.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
} finally {
loading.cleanup = false;
}
}
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div> <div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div>
{#if $appSession.teamId === '0'}
<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
>Cleanup Storage</button
>
{/if}
</div> </div>
<div class="container lg:mx-auto lg:p-0 p-5"> <div class="container lg:mx-auto lg:p-0 p-5">
{#if $appSession.teamId === '0'} {#if $appSession.teamId === '0'}
<Usage /> <Usage />
{/if} {/if}
{#if applications.length > 0} {#if applications.length > 0}
<h1 class="title text-4xl mt-10">Resources</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">
{#each applications as application} {#each applications as application}
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator mb-5"> <a class="no-underline mb-5" href={`/applications/${application.id}`}>
{#await getStatus(application)} <div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator">
<span class="indicator-item badge bg-yellow-500 badge-xs" /> {#await getStatus(application)}
{:then status} <span class="indicator-item badge bg-yellow-500 badge-xs" />
{#if status === 'Running'} {:then status}
<span class="indicator-item badge bg-success badge-xs" /> {#if status === 'Running'}
{:else} <span class="indicator-item badge bg-success badge-xs" />
<span class="indicator-item badge bg-error badge-xs" /> {:else}
{/if} <span class="indicator-item badge bg-error badge-xs" />
{/await} {/if}
<div class="w-full flex flex-row"> {/await}
<ApplicationsIcons {application} isAbsolute={false} /> <div class="w-full flex flex-row">
<div class="w-full flex flex-col ml-5"> <ApplicationsIcons {application} isAbsolute={false} />
<span> <div class="w-full flex flex-col ml-5">
Application <span>
{#if application.settings.isBot} Application
| BOT {#if application.settings.isBot}
{/if} | BOT
</span> {/if}
<h1 class="font-bold text-lg">{application.name}</h1> </span>
<div class="divider" /> <h1 class="font-bold text-lg">{application.name}</h1>
<div class="flex justify-end space-x-2"> <div class="divider" />
{#if application.fqdn} <div class="flex justify-end space-x-2">
<a href={application.fqdn} target="_blank" class="icons"> {#if application.fqdn}
<svg <a href={application.fqdn} target="_blank" class="icons">
xmlns="http://www.w3.org/2000/svg" <svg
class="h-6 w-6" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" class="h-6 w-6"
stroke-width="1.5" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5"
fill="none" stroke="currentColor"
stroke-linecap="round" fill="none"
stroke-linejoin="round" stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg>
</a>
{/if}
{#if application.settings.isBot && application.exposePort}
<a
href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`}
target="_blank"
class="icons"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <svg
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /> xmlns="http://www.w3.org/2000/svg"
<line x1="10" y1="14" x2="20" y2="4" /> class="h-6 w-6"
<polyline points="15 4 20 4 20 9" /> viewBox="0 0 24 24"
</svg> stroke-width="1.5"
</a> stroke="currentColor"
{/if} fill="none"
{#if application.settings.isBot && application.exposePort} stroke-linecap="round"
<a stroke-linejoin="round"
href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`} >
target="_blank" <path stroke="none" d="M0 0h24v24H0z" fill="none" />
class="icons" <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
> <line x1="10" y1="14" x2="20" y2="4" />
<svg <polyline points="15 4 20 4 20 9" />
xmlns="http://www.w3.org/2000/svg" </svg>
class="h-6 w-6" </a>
viewBox="0 0 24 24" {/if}
stroke-width="1.5" </div>
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg>
</a>
{/if}
<a class="icons" href={`/applications/${application.id}`}>
<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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </a>
{/each} {/each}
</div> </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">
{#each services as service} {#each services as service}
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator mb-5"> <a class="no-underline mb-5" href={`/services/${service.id}`}>
{#await getStatus(service)} <div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator">
<span class="indicator-item badge bg-yellow-500 badge-xs" /> {#await getStatus(service)}
{:then status} <span class="indicator-item badge bg-yellow-500 badge-xs" />
{#if status === 'Running'}1 {:then status}
<span class="indicator-item badge bg-success badge-xs" /> {#if status === 'Running'}1
{:else} <span class="indicator-item badge bg-success badge-xs" />
<span class="indicator-item badge bg-error badge-xs" /> {:else}
{/if} <span class="indicator-item badge bg-error badge-xs" />
{/await} {/if}
<div class="w-full flex flex-row"> {/await}
<ServiceIcons type={service.type} isAbsolute={false} /> <div class="w-full flex flex-row">
<div class="w-full flex flex-col ml-5"> <ServiceIcons type={service.type} isAbsolute={false} />
<span> <div class="w-full flex flex-col ml-5">
Service <span> Service </span>
</span> <h1 class="font-bold text-lg">{service.name}</h1>
<h1 class="font-bold text-lg">{service.name}</h1> <div class="divider" />
<div class="divider" /> <div class="flex justify-end space-x-2">
<div class="flex justify-end space-x-2"> {#if service.fqdn}
{#if service.fqdn} <a href={service.fqdn} target="_blank" class="icons">
<a href={service.fqdn} target="_blank" class="icons"> <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" viewBox="0 0 24 24"
viewBox="0 0 24 24" stroke-width="1.5"
stroke-width="1.5" stroke="currentColor"
stroke="currentColor" fill="none"
fill="none" stroke-linecap="round"
stroke-linecap="round" stroke-linejoin="round"
stroke-linejoin="round" >
> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /> <line x1="10" y1="14" x2="20" y2="4" />
<line x1="10" y1="14" x2="20" y2="4" /> <polyline points="15 4 20 4 20 9" />
<polyline points="15 4 20 4 20 9" /> </svg>
</svg> </a>
</a> {/if}
{/if} </div>
<a class="icons" href={`/services/${service.id}`}>
<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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </a>
{/each} {/each}
</div> </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">
{#each databases as database} {#each databases as database}
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator mb-5"> <a class="no-underline mb-5" href={`/databases/${database.id}`}>
{#await getStatus(database)} <div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator">
<span class="indicator-item badge bg-yellow-500 badge-xs" /> {#await getStatus(database)}
{:then status} <span class="indicator-item badge bg-yellow-500 badge-xs" />
{#if status === 'Running'}1 {:then status}
<span class="indicator-item badge bg-success badge-xs" /> {#if status === 'Running'}1
{:else} <span class="indicator-item badge bg-success badge-xs" />
<span class="indicator-item badge bg-error badge-xs" /> {:else}
{/if} <span class="indicator-item badge bg-error badge-xs" />
{/await} {/if}
<div class="w-full flex flex-row"> {/await}
<DatabaseIcons type={database.type} isAbsolute={false} /> <div class="w-full flex flex-row">
<div class="w-full flex flex-col ml-5"> <DatabaseIcons type={database.type} isAbsolute={false} />
<span> <div class="w-full flex flex-col ml-5">
Service <span> Service </span>
</span> <h1 class="font-bold text-lg">{database.name}</h1>
<h1 class="font-bold text-lg">{database.name}</h1> <div class="divider" />
<div class="divider" />
<div class="flex justify-end space-x-2">
<a class="icons" href={`/databases/${database.id}`}>
<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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </a>
{/each} {/each}
</div> </div>
{:else if $appSession.teamId !== '0'} {:else if $appSession.teamId !== '0'}