dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: new servers view

Browse Source
This commit is contained in:
Andras Bacsai
2022-09-08 14:42:04 +02:00
parent 372c0ed457
commit 0e13e3bd81
9 changed files with 304 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
apps/ui/src/lib/components/Usage.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
export let server: any;
let usage = {
cpu: {
load: [0, 0, 0],
@@ -29,7 +30,7 @@
async function getStatus() {
if (loading.usage) return;
loading.usage = true;
const data = await get('/usage');
const data = await get(`/servers/usage/${server.id}?remoteEngine=${server.remoteEngine}`);
usage = data.usage;
loading.usage = false;
}
@@ -52,7 +53,7 @@
async function manuallyCleanupStorage() {
try {
loading.cleanup = true;
await post('/internal/cleanup', {});
await post('/internal/cleanup', { serverId: server.id });
return addToast({
message: 'Cleanup done.',
type: 'success'
@@ -65,16 +66,42 @@
}
</script>
<div class="w-full">
<div class="flex lg:flex-row flex-col gap-4">
<h1 class="title lg:text-3xl">Hardware Details</h1>
<div class="flex lg:flex-row flex-col space-x-0 lg:space-x-2 space-y-2 lg:space-y-0">
{#if $appSession.teamId === '0'}
<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
>Cleanup Storage</button
>
{/if}
<div class="w-full relative p-5 ">
{#if loading.usage}
<span class="indicator-item badge bg-yellow-500 badge-sm" />
{:else}
<span class="indicator-item badge bg-success badge-sm" />
{/if}
{#if server.remoteEngine}
<div
class="absolute top-0 right-0 text-xl font-bold uppercase bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 p-1 rounded m-2"
>
BETA
</div>
{/if}
<div class="w-full flex flex-row space-x-4">
<div class="flex flex-col">
<h1 class="font-bold text-lg lg:text-xl truncate">
{server.name}
</h1>
<div class="text-xs ">
{#if server?.remoteIpAddress}
<h2>{server?.remoteIpAddress}</h2>
{:else}
<h2>localhost</h2>
{/if}
</div>
</div>
{#if $appSession.teamId === '0'}
<button
on:click={manuallyCleanupStorage}
class:loading={loading.cleanup}
class="btn btn-sm bg-coollabs">Cleanup Storage</button
>
{/if}
</div>
<div class="flex lg:flex-row flex-col gap-4">
<div class="flex lg:flex-row flex-col space-x-0 lg:space-x-2 space-y-2 lg:space-y-0" />
</div>
<div class="divider" />
<div class="grid grid-flow-col gap-4 grid-rows-3 justify-start lg:justify-center lg:grid-rows-1">
@@ -82,21 +109,21 @@
<div class="stat">
<div class="stat-title">Total Memory</div>
<div class="stat-value text-2xl">
{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
{(usage?.memory?.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
</div>
</div>
<div class="stat">
<div class="stat-title">Used Memory</div>
<div class="stat-value text-2xl">
{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
{(usage?.memory?.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
</div>
</div>
<div class="stat">
<div class="stat-title">Free Memory</div>
<div class="stat-value text-2xl">
{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
{(usage?.memory?.freeMemPercentage).toFixed(0)}<span class="text-sm">%</span>
</div>
</div>
</div>
@@ -105,41 +132,41 @@
<div class="stat">
<div class="stat-title">Total CPU</div>
<div class="stat-value text-2xl">
{usage?.cpu.count}
{usage?.cpu?.count}
</div>
</div>
<div class="stat">
<div class="stat-title">CPU Usage</div>
<div class="stat-value text-2xl">
{usage?.cpu.usage}<span class="text-sm">%</span>
{usage?.cpu?.usage}<span class="text-sm">%</span>
</div>
</div>
<div class="stat">
<div class="stat-title">Load Average (5,10,30mins)</div>
<div class="stat-value text-2xl">{usage?.cpu.load}</div>
<div class="stat-value text-2xl">{usage?.cpu?.load}</div>
</div>
</div>
<div class="stats stats-vertical min-w-[16rem] mb-5 bg-transparent rounded">
<div class="stat">
<div class="stat-title">Total Disk</div>
<div class="stat-value text-2xl">
{usage?.disk.totalGb}<span class="text-sm">GB</span>
{usage?.disk?.totalGb}<span class="text-sm">GB</span>
</div>
</div>
<div class="stat">
<div class="stat-title">Used Disk</div>
<div class="stat-value text-2xl">
{usage?.disk.usedGb}<span class="text-sm">GB</span>
{usage?.disk?.usedGb}<span class="text-sm">GB</span>
</div>
</div>
<div class="stat">
<div class="stat-title">Free Disk</div>
<div class="stat-value text-2xl">
{usage?.disk.freePercentage}<span class="text-sm">%</span>
{usage?.disk?.freePercentage}<span class="text-sm">%</span>
</div>
</div>
</div>