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

ui: dashboard fine-tunes

Browse Source
This commit is contained in:
Andras Bacsai
2022-08-26 10:22:50 +02:00
parent 7691706295
commit 3b95d7278d
5 changed files with 47 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,68 +54,68 @@
<h1 class="title text-4xl">Hardware details</h1>
<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">
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-100 rounded">
<div class="stat">
<div class="stat-title">Total Memory</div>
<div class="stat-value">
<div class="stat-value text-2xl">
{(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">
<div class="stat-value text-2xl">
{(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">
<div class="stat-value text-2xl">
{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
</div>
</div>
</div>
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5">
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-100 rounded">
<div class="stat">
<div class="stat-title">Total CPUs</div>
<div class="stat-value">
<div class="stat-value text-2xl">
{usage?.cpu.count}
</div>
</div>
<div class="stat">
<div class="stat-title">CPU Usage</div>
<div class="stat-value">
<div class="stat-value text-2xl">
{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">{usage?.cpu.load}</div>
<div class="stat-value text-2xl">{usage?.cpu.load}</div>
</div>
</div>
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5">
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-100 rounded">
<div class="stat">
<div class="stat-title">Total Disk</div>
<div class="stat-value">
<div class="stat-value text-2xl">
{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">
<div class="stat-value text-2xl">
{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">{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>