mirror of
https://github.com/ershisan99/coolify.git
synced 2026-01-26 12:34:32 +00:00
90 lines
2.4 KiB
Svelte
90 lines
2.4 KiB
Svelte
<script context="module" lang="ts">
|
|
import type { Load } from '@sveltejs/kit';
|
|
export const load: Load = async ({ stuff }) => {
|
|
return {
|
|
props: { ...stuff }
|
|
};
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { get } from '$lib/api';
|
|
import { onDestroy, onMount } from 'svelte';
|
|
import DatabaseLinks from './_DatabaseLinks.svelte';
|
|
import Databases from './_Databases/_Databases.svelte';
|
|
import { status } from '$lib/store';
|
|
export let database: any;
|
|
export let settings: any;
|
|
export let privatePort: any;
|
|
|
|
const { id } = $page.params;
|
|
let loading = {
|
|
usage: false
|
|
};
|
|
let usage = {
|
|
MemUsage: 0,
|
|
CPUPerc: 0,
|
|
NetIO: 0
|
|
};
|
|
let usageInterval: any;
|
|
|
|
async function getUsage() {
|
|
if (loading.usage) return;
|
|
if (!$status.database.isRunning) return;
|
|
loading.usage = true;
|
|
const data = await get(`/databases/${id}/usage`);
|
|
usage = data.usage;
|
|
loading.usage = false;
|
|
}
|
|
|
|
onDestroy(() => {
|
|
clearInterval(usageInterval);
|
|
});
|
|
onMount(async () => {
|
|
await getUsage();
|
|
usageInterval = setInterval(async () => {
|
|
await getUsage();
|
|
}, 1500);
|
|
});
|
|
</script>
|
|
|
|
<div class="flex items-center space-x-2 p-6 text-2xl font-bold">
|
|
<div class="-mb-5 flex-col">
|
|
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
|
|
Configuration
|
|
</div>
|
|
<span class="text-xs">{database.name}</span>
|
|
</div>
|
|
<DatabaseLinks {database} />
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-4xl px-6 py-4">
|
|
<div class="text-2xl font-bold">Database Usage</div>
|
|
<div class="mx-auto">
|
|
<dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
|
|
<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
|
|
<dt class=" text-sm font-medium text-white">Used Memory / Memory Limit</dt>
|
|
<dd class="mt-1 text-xl font-semibold text-white">
|
|
{usage?.MemUsage}
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
|
|
<dt class="truncate text-sm font-medium text-white">Used CPU</dt>
|
|
<dd class="mt-1 text-xl font-semibold text-white ">
|
|
{usage?.CPUPerc}
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left">
|
|
<dt class="truncate text-sm font-medium text-white">Network IO</dt>
|
|
<dd class="mt-1 text-xl font-semibold text-white ">
|
|
{usage?.NetIO}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<Databases bind:database {privatePort} {settings} />
|