From 1f25bc411fd37cd8460dd559c869f1da372036bc Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 19 May 2022 16:43:17 +0200
Subject: [PATCH] feat: database + service usage

---
 src/routes/applications/[id]/index.svelte     |  2 +-
 src/routes/databases/[id]/index.svelte        | 57 +++++++++++++++++++
 .../[id]/usage.json.ts                        | 11 ++--
 .../services/[id]/_Services/_Services.svelte  |  2 +-
 src/routes/services/[id]/index.svelte         | 57 +++++++++++++++++++
 src/routes/services/[id]/usage.json.ts        | 30 ++++++++++
 6 files changed, 151 insertions(+), 8 deletions(-)
 rename src/routes/{applications => databases}/[id]/usage.json.ts (55%)
 create mode 100644 src/routes/services/[id]/usage.json.ts

diff --git a/src/routes/applications/[id]/index.svelte b/src/routes/applications/[id]/index.svelte
index a00f08d2f..78fa72dff 100644
--- a/src/routes/applications/[id]/index.svelte
+++ b/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();
diff --git a/src/routes/databases/[id]/index.svelte b/src/routes/databases/[id]/index.svelte
index 3ead53529..c9eb7a4ff 100644
--- a/src/routes/databases/[id]/index.svelte
+++ b/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} />
diff --git a/src/routes/applications/[id]/usage.json.ts b/src/routes/databases/[id]/usage.json.ts
similarity index 55%
rename from src/routes/applications/[id]/usage.json.ts
rename to src/routes/databases/[id]/usage.json.ts
index 2ff28e6ae..9ec987310 100644
--- a/src/routes/applications/[id]/usage.json.ts
+++ b/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,
diff --git a/src/routes/services/[id]/_Services/_Services.svelte b/src/routes/services/[id]/_Services/_Services.svelte
index 826a3bdc8..d1d638bb4 100644
--- a/src/routes/services/[id]/_Services/_Services.svelte
+++ b/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>
diff --git a/src/routes/services/[id]/index.svelte b/src/routes/services/[id]/index.svelte
index 2a3bc0d26..4d231a8fb 100644
--- a/src/routes/services/[id]/index.svelte
+++ b/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} />
diff --git a/src/routes/services/[id]/usage.json.ts b/src/routes/services/[id]/usage.json.ts
new file mode 100644
index 000000000..24e27b1c4
--- /dev/null
+++ b/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);
+	}
+};