feat: monitoring by container

apps/api/src/routes/api/v1/applications/handlers.ts

@@ -677,6 +677,24 @@ export async function getUsage(request) {
         return errorHandler({ status, message })
     }
 }
+
+export async function getUsageByContainer(request) {
+    try {
+        const { id, containerId } = request.params
+        const teamId = request.user?.teamId;
+        let usage = {};
+
+        const application: any = await getApplicationFromDB(id, teamId);
+        if (application.destinationDockerId) {
+            [usage] = await Promise.all([getContainerUsage(application.destinationDocker.id, containerId)]);
+        }
+        return {
+            usage
+        }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
 export async function deployApplication(request: FastifyRequest<DeployApplication>) {
     try {
         const { id } = request.params

apps/api/src/routes/api/v1/applications/index.ts

@@ -1,6 +1,6 @@
 import { FastifyPluginAsync } from 'fastify';
 import { OnlyId } from '../../../../types';
-import { cancelDeployment, checkDNS, checkDomain, checkRepository, cleanupUnconfiguredApplications, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildPack, getBuilds, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getPreviewStatus, getSecrets, getStorages, getUsage, listApplications, loadPreviews, newApplication, restartApplication, restartPreview, saveApplication, saveApplicationSettings, saveApplicationSource, saveBuildPack, saveConnectedDatabase, saveDeployKey, saveDestination, saveGitLabSSHKey,  saveRepository, saveSecret, saveStorage, stopApplication, stopPreviewApplication, updatePreviewSecret, updateSecret } from './handlers';
+import { cancelDeployment, checkDNS, checkDomain, checkRepository, cleanupUnconfiguredApplications, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildPack, getBuilds, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getPreviewStatus, getSecrets, getStorages, getUsage, getUsageByContainer, listApplications, loadPreviews, newApplication, restartApplication, restartPreview, saveApplication, saveApplicationSettings, saveApplicationSource, saveBuildPack, saveConnectedDatabase, saveDeployKey, saveDestination, saveGitLabSSHKey,  saveRepository, saveSecret, saveStorage, stopApplication, stopPreviewApplication, updatePreviewSecret, updateSecret } from './handlers';
 
 import type { CancelDeployment, CheckDNS, CheckDomain, CheckRepository, DeleteApplication, DeleteSecret, DeleteStorage, DeployApplication, GetApplicationLogs, GetBuildIdLogs, GetBuilds, GetImages, RestartPreviewApplication, SaveApplication, SaveApplicationSettings, SaveApplicationSource, SaveDeployKey, SaveDestination, SaveSecret, SaveStorage, StopPreviewApplication } from './types';
 
@@ -51,6 +51,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.get<GetBuildIdLogs>('/:id/logs/build/:buildId', async (request) => await getBuildIdLogs(request));
 
     fastify.get('/:id/usage', async (request) => await getUsage(request))
+    fastify.get('/:id/usage/:containerId', async (request) => await getUsageByContainer(request))
 
     fastify.post<DeployApplication>('/:id/deploy', async (request) => await deployApplication(request))
     fastify.post<CancelDeployment>('/:id/cancel', async (request, reply) => await cancelDeployment(request, reply));

apps/ui/src/routes/applications/[id]/logs/index.svelte

@@ -125,7 +125,7 @@
 				`${application.id}${service.name ? `-${service.name}` : ''}`}
 			class="w-full rounded p-5 hover:bg-primary font-bold"
 		>
-			Container: {application.id}{service.name ? `-${service.name}` : ''}</button
+			{application.id}{service.name ? `-${service.name}` : ''}</button
 		>
 	{/each}
 </div>

apps/ui/src/routes/applications/[id]/usage.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+	export let application: any;
 	import { page } from '$app/stores';
 	import { onDestroy, onMount } from 'svelte';
 	import { get } from '$lib/api';
 	import { status } from '$lib/store';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	const { id } = $page.params;
-
+	let services: any = [];
+	let selectedService: any = null;
 	let usageLoading = false;
 	let usage = {
 		MemUsage: 0,
@@ -16,20 +19,55 @@
 
 	async function getUsage() {
 		if (usageLoading) return;
-		if (!$status.application.isRunning) return;
 		usageLoading = true;
-		const data = await get(`/applications/${id}/usage`);
+		const data = await get(`/applications/${id}/usage/${selectedService}`);
 		usage = data.usage;
 		usageLoading = false;
 	}
+	function normalizeDockerServices(services: any[]) {
+		const tempdockerComposeServices = [];
+		for (const [name, data] of Object.entries(services)) {
+			tempdockerComposeServices.push({
+				name,
+				data
+			});
+		}
+		return tempdockerComposeServices;
+	}
+	async function selectService(service: any, init: boolean = false) {
+		if (services.length === 1 && init) return;
+		if (usageInterval) clearInterval(usageInterval);
+		usageLoading = false;
+		usage = {
+			MemUsage: 0,
+			CPUPerc: 0,
+			NetIO: 0
+		};
+		selectedService = `${application.id}${service.name ? `-${service.name}` : ''}`;
+
+		await getUsage();
+		usageInterval = setInterval(async () => {
+			await getUsage();
+		}, 1000);
+	}
 	onDestroy(() => {
 		clearInterval(usageInterval);
 	});
 	onMount(async () => {
-		await getUsage();
+		const response = await get(`/applications/${id}`);
-		usageInterval = setInterval(async () => {
+		application = response.application;
-			await getUsage();
+		if (response.application.dockerComposeFile) {
-		}, 1000);
+			services = normalizeDockerServices(
+				JSON.parse(response.application.dockerComposeFile).services
+			);
+		} else {
+			services = [
+				{
+					name: ''
+				}
+			];
+			await selectService('');
+		}
 	});
 </script>
 
@@ -38,7 +76,30 @@
 		<div class="title font-bold pb-3">Monitoring</div>
 	</div>
 </div>
-<div class="mx-auto max-w-4xl px-6 py-4">
+<div class="flex gap-2 lg:gap-8 pb-4">
+	{#each services as service}
+		<button
+			on:click={() => selectService(service, true)}
+			class:bg-primary={selectedService ===
+				`${application.id}${service.name ? `-${service.name}` : ''}`}
+			class:bg-coolgray-200={selectedService !==
+				`${application.id}${service.name ? `-${service.name}` : ''}`}
+			class="w-full rounded p-5 hover:bg-primary font-bold"
+		>
+			{application.id}{service.name ? `-${service.name}` : ''}</button
+		>
+	{/each}
+</div>
+{#if selectedService}
+	<div class="mx-auto max-w-4xl px-6 py-4 bg-coolgray-100 border border-coolgray-200 relative">
+		{#if usageLoading}
+			<button
+				id="streaming"
+				class="btn btn-sm bg-transparent border-none loading absolute top-0 left-0 text-xs"
+				>Fetching usage...</button
+			>
+			<Tooltip triggeredBy="#streaming">Streaming logs</Tooltip>
+		{/if}
 		<div class="text-center">
 			<div class="stat w-64">
 				<div class="stat-title">Used Memory / Memory Limit</div>
@@ -56,3 +117,4 @@
 			</div>
 		</div>
 	</div>
+{/if}