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

ui: fixes

Browse Source 
feat: restart coolify button
This commit is contained in:
Andras Bacsai
2022-08-26 12:46:20 +02:00
parent 05ee35b6bc
commit 7528ca18d8
4 changed files with 92 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,8 @@
let usageInterval: any;
let loading = {
usage: false,
cleanup: false
cleanup: false,
restart: false
};
import { addToast, appSession } from '$lib/store';
import { onDestroy, onMount } from 'svelte';
@@ -33,6 +34,25 @@
usage = data.usage;
loading.usage = false;
}
async function restartCoolify() {
const sure = confirm(
'Are you sure you would like to restart Coolify? Currently running deployments will be stopped and restarted.'
);
if (sure) {
loading.restart = true;
try {
await post(`/internal/restart`, {});
addToast({
type: 'success',
message: 'Coolify restarted successfully. It will take a moment.'
});
} catch (error) {
return errorNotification(error);
} finally {
loading.restart = false;
}
}
}
onDestroy(() => {
clearInterval(usageInterval);
});
@@ -67,51 +87,56 @@
<div class="w-full">
<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 class="flex space-x-4">
{#if $appSession.teamId === '0'}
<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
>Cleanup Storage</button
>
<button
on:click={restartCoolify}
class:loading={loading.restart}
class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</button
>
{/if}
</div>
</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-200 rounded"
>
<div class="stats stats-vertical lg:stats-horizontal w-full mb-5 bg-transparent rounded">
<div class="font-bold flex lg:justify-center">Memory</div>
<div class="stat">
<div class="stat-title">Total Memory</div>
<div class="stat-title">Total</div>
<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-title">Used</div>
<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-title">Free</div>
<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 bg-coolgray-200 rounded"
>
<div class="stats stats-vertical lg:stats-horizontal w-full mb-5 bg-transparent rounded">
<div class="font-bold flex lg:justify-center">CPU</div>
<div class="stat">
<div class="stat-title">Total CPUs</div>
<div class="stat-title">Total</div>
<div class="stat-value text-2xl">
{usage?.cpu.count}
</div>
</div>
<div class="stat">
<div class="stat-title">CPU Usage</div>
<div class="stat-title">Usage</div>
<div class="stat-value text-2xl">
{usage?.cpu.usage}<span class="text-sm">%</span>
</div>
@@ -122,26 +147,24 @@
<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 bg-coolgray-200 rounded"
>
<div class="stats stats-vertical lg:stats-horizontal w-full mb-5 bg-transparent rounded">
<div class="font-bold flex lg:justify-center">Disk</div>
<div class="stat">
<div class="stat-title">Total Disk</div>
<div class="stat-title">Total</div>
<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-title">Used</div>
<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-title">Free</div>
<div class="stat-value text-2xl">
{usage?.disk.freePercentage}<span class="text-sm">%</span>
</div>