ui: fine-tune
This commit is contained in:
Andras Bacsai
parent
3b95d7278d
commit
0e8b069781
@ -22,9 +22,9 @@
|
||||
usage: false,
|
||||
cleanup: false
|
||||
};
|
||||
import { appSession } from '$lib/store';
|
||||
import { addToast, appSession } from '$lib/store';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { get } from '$lib/api';
|
||||
import { get, post } from '$lib/api';
|
||||
import { errorNotification } from '$lib/common';
|
||||
async function getStatus() {
|
||||
if (loading.usage) return;
|
||||
@ -48,13 +48,36 @@
|
||||
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>
|
||||
|
||||
<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="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-title">Total Memory</div>
|
||||
<div class="stat-value text-2xl">
|
||||
@ -77,7 +100,9 @@
|
||||
</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-title">Total CPUs</div>
|
||||
<div class="stat-value text-2xl">
|
||||
@ -98,7 +123,9 @@
|
||||
</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-title">Total Disk</div>
|
||||
<div class="stat-value text-2xl">
|
||||
@ -115,7 +142,9 @@
|
||||
|
||||
<div class="stat">
|
||||
<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>
|
||||
|
||||
@ -36,10 +36,6 @@
|
||||
import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
|
||||
import { dev } from '$app/env';
|
||||
|
||||
let loading = {
|
||||
cleanup: false
|
||||
};
|
||||
|
||||
let numberOfGetStatus = 0;
|
||||
|
||||
function getRndInteger(min: number, max: number) {
|
||||
@ -75,253 +71,165 @@
|
||||
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>
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<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 class="container lg:mx-auto lg:p-0 p-5">
|
||||
{#if $appSession.teamId === '0'}
|
||||
<Usage />
|
||||
{/if}
|
||||
{#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="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
|
||||
{#each applications as application}
|
||||
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator mb-5">
|
||||
{#await getStatus(application)}
|
||||
<span class="indicator-item badge bg-yellow-500 badge-xs" />
|
||||
{:then status}
|
||||
{#if status === 'Running'}
|
||||
<span class="indicator-item badge bg-success badge-xs" />
|
||||
{:else}
|
||||
<span class="indicator-item badge bg-error badge-xs" />
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="w-full flex flex-row">
|
||||
<ApplicationsIcons {application} isAbsolute={false} />
|
||||
<div class="w-full flex flex-col ml-5">
|
||||
<span>
|
||||
Application
|
||||
{#if application.settings.isBot}
|
||||
| BOT
|
||||
{/if}
|
||||
</span>
|
||||
<h1 class="font-bold text-lg">{application.name}</h1>
|
||||
<div class="divider" />
|
||||
<div class="flex justify-end space-x-2">
|
||||
{#if application.fqdn}
|
||||
<a href={application.fqdn} target="_blank" class="icons">
|
||||
<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"
|
||||
<a class="no-underline mb-5" href={`/applications/${application.id}`}>
|
||||
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator">
|
||||
{#await getStatus(application)}
|
||||
<span class="indicator-item badge bg-yellow-500 badge-xs" />
|
||||
{:then status}
|
||||
{#if status === 'Running'}
|
||||
<span class="indicator-item badge bg-success badge-xs" />
|
||||
{:else}
|
||||
<span class="indicator-item badge bg-error badge-xs" />
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="w-full flex flex-row">
|
||||
<ApplicationsIcons {application} isAbsolute={false} />
|
||||
<div class="w-full flex flex-col ml-5">
|
||||
<span>
|
||||
Application
|
||||
{#if application.settings.isBot}
|
||||
| BOT
|
||||
{/if}
|
||||
</span>
|
||||
<h1 class="font-bold text-lg">{application.name}</h1>
|
||||
<div class="divider" />
|
||||
<div class="flex justify-end space-x-2">
|
||||
{#if application.fqdn}
|
||||
<a href={application.fqdn} target="_blank" class="icons">
|
||||
<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" />
|
||||
<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" />
|
||||
<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"
|
||||
>
|
||||
<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" />
|
||||
<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>
|
||||
<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" />
|
||||
<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}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<h1 class="title text-4xl mt-10">Services</h1>
|
||||
<div class="divider" />
|
||||
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
|
||||
{#each services as service}
|
||||
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator mb-5">
|
||||
{#await getStatus(service)}
|
||||
<span class="indicator-item badge bg-yellow-500 badge-xs" />
|
||||
{:then status}
|
||||
{#if status === 'Running'}1
|
||||
<span class="indicator-item badge bg-success badge-xs" />
|
||||
{:else}
|
||||
<span class="indicator-item badge bg-error badge-xs" />
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="w-full flex flex-row">
|
||||
<ServiceIcons type={service.type} isAbsolute={false} />
|
||||
<div class="w-full flex flex-col ml-5">
|
||||
<span>
|
||||
Service
|
||||
</span>
|
||||
<h1 class="font-bold text-lg">{service.name}</h1>
|
||||
<div class="divider" />
|
||||
<div class="flex justify-end space-x-2">
|
||||
{#if service.fqdn}
|
||||
<a href={service.fqdn} target="_blank" class="icons">
|
||||
<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" />
|
||||
<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={`/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>
|
||||
<a class="no-underline mb-5" href={`/services/${service.id}`}>
|
||||
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator">
|
||||
{#await getStatus(service)}
|
||||
<span class="indicator-item badge bg-yellow-500 badge-xs" />
|
||||
{:then status}
|
||||
{#if status === 'Running'}1
|
||||
<span class="indicator-item badge bg-success badge-xs" />
|
||||
{:else}
|
||||
<span class="indicator-item badge bg-error badge-xs" />
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="w-full flex flex-row">
|
||||
<ServiceIcons type={service.type} isAbsolute={false} />
|
||||
<div class="w-full flex flex-col ml-5">
|
||||
<span> Service </span>
|
||||
<h1 class="font-bold text-lg">{service.name}</h1>
|
||||
<div class="divider" />
|
||||
<div class="flex justify-end space-x-2">
|
||||
{#if service.fqdn}
|
||||
<a href={service.fqdn} target="_blank" class="icons">
|
||||
<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" />
|
||||
<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}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<h1 class="title text-4xl mt-10">Databases</h1>
|
||||
<div class="divider" />
|
||||
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
|
||||
{#each databases as database}
|
||||
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator mb-5">
|
||||
{#await getStatus(database)}
|
||||
<span class="indicator-item badge bg-yellow-500 badge-xs" />
|
||||
{:then status}
|
||||
{#if status === 'Running'}1
|
||||
<span class="indicator-item badge bg-success badge-xs" />
|
||||
{:else}
|
||||
<span class="indicator-item badge bg-error badge-xs" />
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="w-full flex flex-row">
|
||||
<DatabaseIcons type={database.type} isAbsolute={false} />
|
||||
<div class="w-full flex flex-col ml-5">
|
||||
<span>
|
||||
Service
|
||||
</span>
|
||||
<h1 class="font-bold text-lg">{database.name}</h1>
|
||||
<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>
|
||||
<a class="no-underline mb-5" href={`/databases/${database.id}`}>
|
||||
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator">
|
||||
{#await getStatus(database)}
|
||||
<span class="indicator-item badge bg-yellow-500 badge-xs" />
|
||||
{:then status}
|
||||
{#if status === 'Running'}1
|
||||
<span class="indicator-item badge bg-success badge-xs" />
|
||||
{:else}
|
||||
<span class="indicator-item badge bg-error badge-xs" />
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="w-full flex flex-row">
|
||||
<DatabaseIcons type={database.type} isAbsolute={false} />
|
||||
<div class="w-full flex flex-col ml-5">
|
||||
<span> Service </span>
|
||||
<h1 class="font-bold text-lg">{database.name}</h1>
|
||||
<div class="divider" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if $appSession.teamId !== '0'}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user