Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

feat: usage on dashboard

Browse Source
This commit is contained in:
Andras Bacsai 2022-05-09 14:03:07 +02:00
parent 271fb1358d
commit a410fd0776
3 changed files with 55 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/routes/_Trend.svelte Normal file
View File

@ -0,0 +1,39 @@
<script lang="ts">
export let trend;
</script>
{#if trend === 'up'}
<span class="px-2 text-green-500">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8"
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" />
<line x1="17" y1="7" x2="7" y2="17" />
<polyline points="8 7 17 7 17 16" />
</svg></span
>
{:else if trend === 'down'}
<span class="text-red-500 px-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8"
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" />
<line x1="7" y1="7" x2="17" y2="17" />
<polyline points="17 8 17 17 8 17" />
</svg>
</span>
{/if}

6
src/routes/applications/[id]/logs/_Loading.svelte
View File

@ -1,4 +1,8 @@
<div class="lds-ripple absolute left-0"> <script>
export let position = 'absolute';
</script>
<div class="lds-ripple {position} left-0">
<div /> <div />
<div /> <div />
</div> </div>

167
src/routes/index.svelte
View File

@ -24,6 +24,7 @@
import { get } from '$lib/api'; import { get } from '$lib/api';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import Loading from './applications/[id]/logs/_Loading.svelte'; import Loading from './applications/[id]/logs/_Loading.svelte';
import Trend from './_Trend.svelte';
export let applicationsCount: number; export let applicationsCount: number;
export let sourcesCount: number; export let sourcesCount: number;
@ -67,7 +68,6 @@
try { try {
loading.usage = true; loading.usage = true;
const data = await get(`/dashboard.json?usage=true`); const data = await get(`/dashboard.json?usage=true`);
console.log(usage.memory.freeMemPercentage);
if (data.memory.freeMemPercentage === usage.memory.freeMemPercentage) { if (data.memory.freeMemPercentage === usage.memory.freeMemPercentage) {
trends.memory = 'stable'; trends.memory = 'stable';
} else { } else {
@ -135,7 +135,6 @@
<div class="mt-10 pb-12 tracking-tight sm:pb-16"> <div class="mt-10 pb-12 tracking-tight sm:pb-16">
<div class="mx-auto max-w-4xl"> <div class="mx-auto max-w-4xl">
<div class="title font-bold">Server Usage</div> <div class="title font-bold">Server Usage</div>
<dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3"> <dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<Loading /> <Loading />
<div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6"> <div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6">
@ -156,56 +155,8 @@
<dt class="truncate text-sm font-medium text-white">Free Memory</dt> <dt class="truncate text-sm font-medium text-white">Free Memory</dt>
<dd class="mt-1 flex items-center text-3xl font-semibold text-white"> <dd class="mt-1 flex items-center text-3xl font-semibold text-white">
{usage?.memory.freeMemPercentage}% {usage?.memory.freeMemPercentage}%
{#if trends.memory === 'stable' || trends.memory === '' || usage.memory.freeMemPercentage === 0} {#if !memoryWarning}
<span class="px-2 text-yellow-400" <Trend trend={trends.memory} />
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8"
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="M5 9h14m-14 6h14" />
</svg></span
>
{:else if trends.memory === 'up'}
<span class="text-green-500 px-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8"
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" />
<line x1="17" y1="7" x2="7" y2="17" />
<polyline points="8 7 17 7 17 16" />
</svg></span
>
{:else if trends.memory === 'down'}
<span class="text-red-500 px-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8"
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" />
<line x1="7" y1="7" x2="17" y2="17" />
<polyline points="17 8 17 17 8 17" />
</svg>
</span>
{/if} {/if}
</dd> </dd>
</div> </div>
@ -214,69 +165,21 @@
<div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6"> <div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6">
<dt class="truncate text-sm font-medium text-white">Total CPUs</dt> <dt class="truncate text-sm font-medium text-white">Total CPUs</dt>
<dd class="mt-1 text-3xl font-semibold text-white"> <dd class="mt-1 text-3xl font-semibold text-white">
{(usage?.cpu.count).toFixed(0)} {usage?.cpu.count}
</dd> </dd>
</div> </div>
<div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6"> <div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6">
<dt class="truncate text-sm font-medium text-white">Load Average</dt> <dt class="truncate text-sm font-medium text-white">Load Average (5/10/30mins)</dt>
<dd class="mt-1 text-3xl font-semibold text-white"> <dd class="mt-1 text-3xl font-semibold text-white">
{usage?.cpu.load} {usage?.cpu.load.join('/')}
</dd> </dd>
</div> </div>
<div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6" class:bg-red-500={cpuWarning}> <div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6" class:bg-red-500={cpuWarning}>
<dt class="truncate text-sm font-medium text-white">CPU Usage</dt> <dt class="truncate text-sm font-medium text-white">CPU Usage</dt>
<dd class="mt-1 flex items-center text-3xl font-semibold text-white"> <dd class="mt-1 flex items-center text-3xl font-semibold text-white">
{(usage?.cpu.usage).toFixed(0)}% {usage?.cpu.usage}%
{#if trends.cpu === 'stable' || trends.cpu === '' || usage.cpu.usage === 0} {#if !cpuWarning}
<span class="px-2 text-yellow-400" <Trend trend={trends.cpu} />
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8"
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="M5 9h14m-14 6h14" />
</svg></span
>
{:else if trends.cpu === 'up'}
<span class="text-green-500 px-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8"
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" />
<line x1="17" y1="7" x2="7" y2="17" />
<polyline points="8 7 17 7 17 16" />
</svg></span
>
{:else if trends.cpu === 'down'}
<span class="text-red-500 px-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8"
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" />
<line x1="7" y1="7" x2="17" y2="17" />
<polyline points="17 8 17 17 8 17" />
</svg>
</span>
{/if} {/if}
</dd> </dd>
</div> </div>
@ -298,56 +201,8 @@
<dt class="truncate text-sm font-medium text-white">Free Disk</dt> <dt class="truncate text-sm font-medium text-white">Free Disk</dt>
<dd class="mt-1 flex items-center text-3xl font-semibold text-white"> <dd class="mt-1 flex items-center text-3xl font-semibold text-white">
{usage?.disk.freePercentage}% {usage?.disk.freePercentage}%
{#if trends.disk === 'stable' || trends.disk === '' || usage.disk.freePercentage === 0} {#if !diskWarning}
<span class="px-2 text-yellow-400" <Trend trend={trends.disk} />
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8"
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="M5 9h14m-14 6h14" />
</svg></span
>
{:else if trends.disk === 'up'}
<span class="text-green-500 px-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8"
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" />
<line x1="17" y1="7" x2="7" y2="17" />
<polyline points="8 7 17 7 17 16" />
</svg></span
>
{:else if trends.disk === 'down'}
<span class="text-red-500 px-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8"
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" />
<line x1="7" y1="7" x2="17" y2="17" />
<polyline points="17 8 17 17 8 17" />
</svg>
</span>
{/if} {/if}
</dd> </dd>
</div> </div>