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

feat(ui): rework home UI and with responsive design

Browse Source
This commit is contained in:
Kaname
2022-08-26 01:40:46 +00:00
parent 3421de06d5
commit ff8fe68f14
5 changed files with 281 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,61 +50,70 @@
});
</script>
<div class="pb-4">
<div class="title">Hardware Details</div>
<div class="text-center p-8 ">
<div>
<div class="stat w-64">
<div class="w-full">
<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="stat">
<div class="stat-title">Total Memory</div>
<div class="stat-value">
{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Used Memory</div>
<div class="stat-value">
{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Free Memory</div>
<div class="stat-value">
{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
</div>
</div>
</div>
<div class="py-10">
<div class="stat w-64">
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5">
<div class="stat">
<div class="stat-title">Total CPUs</div>
<div class="stat-value">
{usage?.cpu.count}
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">CPU Usage</div>
<div class="stat-value">
{usage?.cpu.usage}<span class="text-sm">%</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Load Average (5,10,30mins)</div>
<div class="stat-value">{usage?.cpu.load}</div>
</div>
</div>
<div>
<div class="stat w-64">
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5">
<div class="stat">
<div class="stat-title">Total Disk</div>
<div class="stat-value">
{usage?.disk.totalGb}<span class="text-sm">GB</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Used Disk</div>
<div class="stat-value">
{usage?.disk.usedGb}<span class="text-sm">GB</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Free Disk</div>
<div class="stat-value">{usage?.disk.freePercentage}<span class="text-sm">%</span></div>
</div>