feat: database + service usage

src/routes/applications/[id]/index.svelte

@@ -102,7 +102,7 @@
 	onMount(async () => {
 		if (browser && window.location.hostname === 'demo.coolify.io' && !application.fqdn) {
 			application.fqdn = `http://${cuid()}.demo.coolify.io`;
-			await handleSubmit();
+			await post(`/applications/${id}.json`, { ...application });
 		}
 		domainEl.focus();
 		await getUsage();

src/routes/databases/[id]/index.svelte

@@ -33,10 +33,40 @@
 
 <script lang="ts">
 	import DatabaseLinks from '$lib/components/DatabaseLinks.svelte';
+	import { page } from '$app/stores';
+	import { get } from '$lib/api';
+	import { onDestroy, onMount } from 'svelte';
 	export let database;
 	export let settings;
 	export let privatePort;
 	export let isRunning;
+
+	const { id } = $page.params;
+	let usageLoading = false;
+	let usage = {
+		MemUsage: 0,
+		CPUPerc: 0,
+		NetIO: 0
+	};
+	let usageInterval;
+
+	async function getUsage() {
+		if (usageLoading) return;
+		usageLoading = true;
+		const data = await get(`/databases/${id}/usage.json`);
+		usage = data.usage;
+		usageLoading = false;
+	}
+
+	onDestroy(() => {
+		clearInterval(usageInterval);
+	});
+	onMount(async () => {
+		await getUsage();
+		usageInterval = setInterval(async () => {
+			await getUsage();
+		}, 1000);
+	});
 </script>
 
 <div class="flex items-center space-x-2 p-6 text-2xl font-bold">
@@ -49,4 +79,31 @@
 	<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} {isRunning} />

src/routes/databases/[id]/usage.json.ts

@@ -1,9 +1,8 @@
-import { asyncExecShell, getUserDetails } from '$lib/common';
+import { getUserDetails } from '$lib/common';
 import * as db from '$lib/database';
 import { ErrorHandler } from '$lib/database';
-import { checkContainer, getContainerUsage, isContainerExited } from '$lib/haproxy';
+import { getContainerUsage } from '$lib/haproxy';
 import type { RequestHandler } from '@sveltejs/kit';
-import { setDefaultConfiguration } from '$lib/buildPacks/common';
 
 export const get: RequestHandler = async (event) => {
 	const { teamId, status, body } = await getUserDetails(event);
@@ -13,9 +12,9 @@ export const get: RequestHandler = async (event) => {
 
 	let usage = {};
 	try {
-		const application = await db.getApplication({ id, teamId });
-		if (application.destinationDockerId) {
-			[usage] = await Promise.all([getContainerUsage(application.destinationDocker.engine, id)]);
+		const database = await db.getDatabase({ id, teamId });
+		if (database.destinationDockerId) {
+			[usage] = await Promise.all([getContainerUsage(database.destinationDocker.engine, id)]);
 		}
 		return {
 			status: 200,

src/routes/services/[id]/_Services/_Services.svelte

@@ -74,7 +74,7 @@
 	onMount(async () => {
 		if (browser && window.location.hostname === 'demo.coolify.io' && !service.fqdn) {
 			service.fqdn = `http://${cuid()}.demo.coolify.io`;
-			await handleSubmit();
+			await post(`/services/${id}/${service.type}.json`, { ...service });
 		}
 	});
 </script>

src/routes/services/[id]/index.svelte

@@ -32,11 +32,41 @@
 <script lang="ts">
 	import ServiceLinks from '$lib/components/ServiceLinks.svelte';
 	import Services from './_Services/_Services.svelte';
+	import { get } from '$lib/api';
+	import { page } from '$app/stores';
+	import { onDestroy, onMount } from 'svelte';
 
 	export let service;
 	export let isRunning;
 	export let readOnly;
 	export let settings;
+
+	const { id } = $page.params;
+	let usageLoading = false;
+	let usage = {
+		MemUsage: 0,
+		CPUPerc: 0,
+		NetIO: 0
+	};
+	let usageInterval;
+
+	async function getUsage() {
+		if (usageLoading) return;
+		usageLoading = true;
+		const data = await get(`/services/${id}/usage.json`);
+		usage = data.usage;
+		usageLoading = false;
+	}
+
+	onDestroy(() => {
+		clearInterval(usageInterval);
+	});
+	onMount(async () => {
+		await getUsage();
+		usageInterval = setInterval(async () => {
+			await getUsage();
+		}, 1000);
+	});
 </script>
 
 <div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
@@ -46,6 +76,7 @@
 		</div>
 		<span class="text-xs">{service.name}</span>
 	</div>
+
 	{#if service.fqdn}
 		<a
 			href={service.fqdn}
@@ -71,5 +102,31 @@
 
 	<ServiceLinks {service} />
 </div>
+<div class="mx-auto max-w-4xl px-6 py-4">
+	<div class="text-2xl font-bold">Service 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>
 <Services bind:service {isRunning} {readOnly} {settings} />

src/routes/services/[id]/usage.json.ts

@@ -0,0 +1,30 @@
+import { getUserDetails } from '$lib/common';
+import * as db from '$lib/database';
+import { ErrorHandler } from '$lib/database';
+import { getContainerUsage } from '$lib/haproxy';
+import type { RequestHandler } from '@sveltejs/kit';
+
+export const get: RequestHandler = async (event) => {
+	const { teamId, status, body } = await getUserDetails(event);
+	if (status === 401) return { status, body };
+
+	const { id } = event.params;
+
+	let usage = {};
+	try {
+		const service = await db.getService({ id, teamId });
+		if (service.destinationDockerId) {
+			[usage] = await Promise.all([getContainerUsage(service.destinationDocker.engine, id)]);
+		}
+		return {
+			status: 200,
+			body: {
+				usage
+			},
+			headers: {}
+		};
+	} catch (error) {
+		console.log(error);
+		return ErrorHandler(error);
+	}
+};