WIP: Notifications and application usage

2022-05-17 10:14:06 +02:00 · 2022-05-17 10:14:06 +02:00 · 35b31dce2b
commit 35b31dce2b
parent 1ec620be4b
15 changed files with 349 additions and 128 deletions
--- a/package.json
+++ b/package.json
@ -30,11 +30,11 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-node": "1.0.0-next.73",
-		"@sveltejs/adapter-static": "1.0.0-next.29",
-		"@sveltejs/kit": "1.0.0-next.326",
+		"@sveltejs/adapter-static": "1.0.0-next.31",
+		"@sveltejs/kit": "1.0.0-next.334",
 		"@types/js-cookie": "3.0.2",
 		"@types/js-yaml": "4.0.5",
-		"@types/node": "17.0.31",
+		"@types/node": "17.0.34",
 		"@types/node-forge": "1.0.2",
 		"@typescript-eslint/eslint-plugin": "4.31.1",
 		"@typescript-eslint/parser": "4.31.1",
@ -50,10 +50,10 @@
 		"postcss": "8.4.13",
 		"prettier": "2.6.2",
 		"prettier-plugin-svelte": "2.7.0",
-		"prettier-plugin-tailwindcss": "0.1.10",
+		"prettier-plugin-tailwindcss": "0.1.11",
 		"prisma": "3.11.1",
 		"svelte": "3.48.0",
-		"svelte-check": "2.7.0",
+		"svelte-check": "2.7.1",
 		"svelte-preprocess": "4.10.6",
 		"svelte-select": "4.4.7",
 		"sveltekit-i18n": "2.2.1",
@ -68,7 +68,7 @@
 		"@prisma/client": "3.11.1",
 		"@sentry/node": "6.19.7",
 		"bcryptjs": "2.4.3",
-		"bullmq": "1.81.4",
+		"bullmq": "1.82.2",
 		"compare-versions": "4.1.3",
 		"cookie": "0.5.0",
 		"cuid": "2.1.8",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -5,18 +5,18 @@ specifiers:
  '@prisma/client': 3.11.1
  '@sentry/node': 6.19.7
  '@sveltejs/adapter-node': 1.0.0-next.73
-  '@sveltejs/adapter-static': 1.0.0-next.29
-  '@sveltejs/kit': 1.0.0-next.326
+  '@sveltejs/adapter-static': 1.0.0-next.31
+  '@sveltejs/kit': 1.0.0-next.334
  '@types/js-cookie': 3.0.2
  '@types/js-yaml': 4.0.5
-  '@types/node': 17.0.31
+  '@types/node': 17.0.34
  '@types/node-forge': 1.0.2
  '@typescript-eslint/eslint-plugin': 4.31.1
  '@typescript-eslint/parser': 4.31.1
  '@zerodevx/svelte-toast': 0.7.1
  autoprefixer: 10.4.7
  bcryptjs: 2.4.3
-  bullmq: 1.81.4
+  bullmq: 1.82.2
  compare-versions: 4.1.3
  cookie: 0.5.0
  cross-env: 7.0.3
@ -44,10 +44,10 @@ specifiers:
  postcss: 8.4.13
  prettier: 2.6.2
  prettier-plugin-svelte: 2.7.0
-  prettier-plugin-tailwindcss: 0.1.10
+  prettier-plugin-tailwindcss: 0.1.11
  prisma: 3.11.1
  svelte: 3.48.0
-  svelte-check: 2.7.0
+  svelte-check: 2.7.1
  svelte-kit-cookie-session: 2.1.4
  svelte-preprocess: 4.10.6
  svelte-select: 4.4.7
@ -64,7 +64,7 @@ dependencies:
  '@prisma/client': 3.11.1_prisma@3.11.1
  '@sentry/node': 6.19.7
  bcryptjs: 2.4.3
-  bullmq: 1.81.4
+  bullmq: 1.82.2
  compare-versions: 4.1.3
  cookie: 0.5.0
  cuid: 2.1.8
@ -88,11 +88,11 @@ dependencies:

 devDependencies:
  '@sveltejs/adapter-node': 1.0.0-next.73
-  '@sveltejs/adapter-static': 1.0.0-next.29
-  '@sveltejs/kit': 1.0.0-next.326_svelte@3.48.0
+  '@sveltejs/adapter-static': 1.0.0-next.31
+  '@sveltejs/kit': 1.0.0-next.334_svelte@3.48.0
  '@types/js-cookie': 3.0.2
  '@types/js-yaml': 4.0.5
-  '@types/node': 17.0.31
+  '@types/node': 17.0.34
  '@types/node-forge': 1.0.2
  '@typescript-eslint/eslint-plugin': 4.31.1_lii63oz3usekbu5ehvrcuwn5jy
  '@typescript-eslint/parser': 4.31.1_e4zyhrvfnqudwdx5bevnvkluy4
@ -108,15 +108,15 @@ devDependencies:
  postcss: 8.4.13
  prettier: 2.6.2
  prettier-plugin-svelte: 2.7.0_kkjbqzpydplecjtkxrgomroeru
-  prettier-plugin-tailwindcss: 0.1.10_prettier@2.6.2
+  prettier-plugin-tailwindcss: 0.1.11_prettier@2.6.2
  prisma: 3.11.1
  svelte: 3.48.0
-  svelte-check: 2.7.0_f2ke6qjyzu5axsjd6yk3u4tn7a
+  svelte-check: 2.7.1_f2ke6qjyzu5axsjd6yk3u4tn7a
  svelte-preprocess: 4.10.6_nq4dx2skq5drra53vttuo4lltu
  svelte-select: 4.4.7
  sveltekit-i18n: 2.2.1_svelte@3.48.0
  tailwindcss: 3.0.24_ts-node@10.7.0
-  ts-node: 10.7.0_l47be6km5p57gglrggidw5gsgm
+  ts-node: 10.7.0_3smuweqyuzdazdnyhhezld6mfa
  tslib: 2.4.0
  typescript: 4.6.4

@ -216,6 +216,31 @@ packages:
      }
    dev: false

+  /@jridgewell/resolve-uri/3.0.7:
+    resolution:
+      {
+        integrity: sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
+      }
+    engines: { node: '>=6.0.0' }
+    dev: true
+
+  /@jridgewell/sourcemap-codec/1.4.13:
+    resolution:
+      {
+        integrity: sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
+      }
+    dev: true
+
+  /@jridgewell/trace-mapping/0.3.13:
+    resolution:
+      {
+        integrity: sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==
+      }
+    dependencies:
+      '@jridgewell/resolve-uri': 3.0.7
+      '@jridgewell/sourcemap-codec': 1.4.13
+    dev: true
+
  /@nodelib/fs.scandir/2.1.5:
    resolution:
      {
@ -382,21 +407,21 @@ packages:
      tiny-glob: 0.2.9
    dev: true

-  /@sveltejs/adapter-static/1.0.0-next.29:
+  /@sveltejs/adapter-static/1.0.0-next.31:
    resolution:
      {
-        integrity: sha512-0hjGnfT3BRyoHnzJ2w0/xL+xICRpKneDTm45ZzggiRrc0r71WJfF6toGeg8N4QUQnj8EJ3Itm453gsS1kt7VUQ==
+        integrity: sha512-d9RNA/de5ljb+gN8mKA3YfmfJoTbYFdH96NYDD8u4Lu9O/ZnseUxOAcAmD4/LKbLXOY/oYhRpt029xT2owyI3Q==
      }
    dependencies:
      tiny-glob: 0.2.9
    dev: true

-  /@sveltejs/kit/1.0.0-next.326_svelte@3.48.0:
+  /@sveltejs/kit/1.0.0-next.334_svelte@3.48.0:
    resolution:
      {
-        integrity: sha512-prJqmXZ2H1wmFfnMw7wDujfbkcA8vuubuqUkpVVmXhfh2+SEzQscPTNwxoE5EJxb5sywtLWEvYx3hv1gPS4Lvg==
+        integrity: sha512-HPMF1oYBfyOG6wfU0Y6F4SID8jphue9yF+PXJqVTDBL5Z2WBG2ogum6MavE8aWhq+g2H6w5y0jNT8+8DO2KTCA==
      }
-    engines: { node: '>=14.13' }
+    engines: { node: '>=16' }
    hasBin: true
    peerDependencies:
      svelte: ^3.44.0
@ -506,7 +531,7 @@ packages:
    dependencies:
      '@types/http-cache-semantics': 4.0.1
      '@types/keyv': 3.1.3
-      '@types/node': 17.0.31
+      '@types/node': 17.0.34
      '@types/responselike': 1.0.0
    dev: false

@ -544,7 +569,7 @@ packages:
        integrity: sha512-FXCJgyyN3ivVgRoml4h94G/p3kY+u/B86La+QptcqJaWtBWtmc6TtkNfS40n9bIvyLteHh7zXOtgbobORKPbDg==
      }
    dependencies:
-      '@types/node': 17.0.31
+      '@types/node': 17.0.34
    dev: false

  /@types/node-forge/1.0.2:
@ -553,13 +578,13 @@ packages:
        integrity: sha512-J1OkeZGaW0y9Y7xD49Ja8O82B9l5nZDeoYuGWqIOYPAf9LR+xF23k9ILdzv8dH+2H033fx3D5oiA0GlmicI+sg==
      }
    dependencies:
-      '@types/node': 17.0.31
+      '@types/node': 17.0.34
    dev: true

-  /@types/node/17.0.31:
+  /@types/node/17.0.34:
    resolution:
      {
-        integrity: sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==
+        integrity: sha512-XImEz7XwTvDBtzlTnm8YvMqGW/ErMWBsKZ+hMTvnDIjGCKxwK5Xpc+c/oQjOauwq8M4OS11hEkpjX8rrI/eEgA==
      }

  /@types/pug/2.0.5:
@ -575,7 +600,7 @@ packages:
        integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==
      }
    dependencies:
-      '@types/node': 17.0.31
+      '@types/node': 17.0.34
    dev: false

  /@types/sass/1.16.1:
@ -584,7 +609,7 @@ packages:
        integrity: sha512-iZUcRrGuz/Tbg3loODpW7vrQJkUtpY2fFSf4ELqqkApcS2TkZ1msk7ie8iZPB86lDOP8QOTTmuvWjc5S0R9OjQ==
      }
    dependencies:
-      '@types/node': 17.0.31
+      '@types/node': 17.0.34
    dev: true

  /@typescript-eslint/eslint-plugin/4.31.1_lii63oz3usekbu5ehvrcuwn5jy:
@ -1700,10 +1725,10 @@ packages:
      ieee754: 1.2.1
    dev: false

-  /bullmq/1.81.4:
+  /bullmq/1.82.2:
    resolution:
      {
-        integrity: sha512-sUEWOMKZnWlh1/XNqYAoSwXW6P8nZN7uJiHKZ8XlZCiIxWlEGjFtlugkkiCZ0lsTI2nNRHdxfpn78x9K3L1utQ==
+        integrity: sha512-pDmMl6HmL/7B41ldBK4lnmGUcobkI/n/a0T3d/volMWC0ULxsaZ6R6fDePk23LwH9Fxu4o9Ny+zurCL3vG7lbg==
      }
    dependencies:
      cron-parser: 4.2.1
@ -4161,7 +4186,7 @@ packages:
    dependencies:
      lilconfig: 2.0.5
      postcss: 8.4.13
-      ts-node: 10.7.0_l47be6km5p57gglrggidw5gsgm
+      ts-node: 10.7.0_3smuweqyuzdazdnyhhezld6mfa
      yaml: 1.10.2
    dev: true

@ -4229,10 +4254,10 @@ packages:
      svelte: 3.48.0
    dev: true

-  /prettier-plugin-tailwindcss/0.1.10_prettier@2.6.2:
+  /prettier-plugin-tailwindcss/0.1.11_prettier@2.6.2:
    resolution:
      {
-        integrity: sha512-ooDGNuXUjgCXfShliVYQ6+0iXqUFXn+zdNInPe0WZN9qINt9srbLGFGY5jeVL4MXtY20/4S8JaBcd8l6N6NfCQ==
+        integrity: sha512-a28+1jvpIZQdZ/W97wOXb6VqI762MKE/TxMMuibMEHhyYsSxQA8Ek30KObd5kJI2HF1ldtSYprFayXJXi3pz8Q==
      }
    engines: { node: '>=12.17.0' }
    peerDependencies:
@ -4719,14 +4744,6 @@ packages:
    engines: { node: '>=0.10.0' }
    dev: true

-  /source-map/0.7.3:
-    resolution:
-      {
-        integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-      }
-    engines: { node: '>= 8' }
-    dev: true
-
  /sourcemap-codec/1.4.8:
    resolution:
      {
@ -4899,21 +4916,21 @@ packages:
    engines: { node: '>= 0.4' }
    dev: true

-  /svelte-check/2.7.0_f2ke6qjyzu5axsjd6yk3u4tn7a:
+  /svelte-check/2.7.1_f2ke6qjyzu5axsjd6yk3u4tn7a:
    resolution:
      {
-        integrity: sha512-GrvG24j0+i8AOm0k0KyJ6Dqc+TAR2yzB7rtS4nljHStunVxCTr/1KYlv4EsOeoqtHLzeWMOd5D2O6nDdP/yw4A==
+        integrity: sha512-vHVu2+SQ6ibt77iTQaq2oiOjBgGL48qqcg0ZdEOsP5pPOjgeyR9QbnaEdzdBs9nsVYBc/42haKtzb2uFqS8GVw==
      }
    hasBin: true
    peerDependencies:
      svelte: ^3.24.0
    dependencies:
+      '@jridgewell/trace-mapping': 0.3.13
      chokidar: 3.5.3
      fast-glob: 3.2.11
      import-fresh: 3.3.0
      picocolors: 1.0.0
      sade: 1.7.4
-      source-map: 0.7.3
      svelte: 3.48.0
      svelte-preprocess: 4.10.6_nq4dx2skq5drra53vttuo4lltu
      typescript: 4.6.4
@ -5154,7 +5171,7 @@ packages:
    engines: { node: '>=0.10.0' }
    dev: true

-  /ts-node/10.7.0_l47be6km5p57gglrggidw5gsgm:
+  /ts-node/10.7.0_3smuweqyuzdazdnyhhezld6mfa:
    resolution:
      {
        integrity: sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==
@ -5176,7 +5193,7 @@ packages:
      '@tsconfig/node12': 1.0.9
      '@tsconfig/node14': 1.0.1
      '@tsconfig/node16': 1.0.2
-      '@types/node': 17.0.31
+      '@types/node': 17.0.34
      acorn: 8.5.0
      acorn-walk: 8.2.0
      arg: 4.1.3
--- a/prisma/migrations/20220517081328_traefik/migration.sql
+++ b/prisma/migrations/20220517081328_traefik/migration.sql
@ -12,7 +12,7 @@ CREATE TABLE "new_Setting" (
    "proxyHash" TEXT,
    "isAutoUpdateEnabled" BOOLEAN NOT NULL DEFAULT false,
    "isDNSCheckEnabled" BOOLEAN NOT NULL DEFAULT true,
-    "isTraefikUsed" BOOLEAN NOT NULL DEFAULT false,
+    "isTraefikUsed" BOOLEAN NOT NULL DEFAULT true,
    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    "updatedAt" DATETIME NOT NULL
 );
--- a/prisma/migrations/20220517081338_notifications/migration.sql
+++ b/prisma/migrations/20220517081338_notifications/migration.sql
@ -0,0 +1,10 @@
+-- CreateTable
+CREATE TABLE "Notification" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "type" TEXT NOT NULL,
+    "message" TEXT NOT NULL,
+    "isRead" BOOLEAN NOT NULL DEFAULT false,
+    "showAtVersion" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@ -20,11 +20,21 @@ model Setting {
  proxyHash             String?
  isAutoUpdateEnabled   Boolean  @default(false)
  isDNSCheckEnabled     Boolean  @default(true)
-  isTraefikUsed         Boolean  @default(false)
+  isTraefikUsed         Boolean  @default(true)
  createdAt             DateTime @default(now())
  updatedAt             DateTime @updatedAt
 }

+model Notification {
+  id            String   @id @default(cuid())
+  type          String
+  message       String
+  isRead        Boolean  @default(false)
+  showAtVersion String
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+}
+
 model User {
  id         String       @id @unique @default(cuid())
  email      String       @unique
--- a/src/lib/haproxy/index.ts
+++ b/src/lib/haproxy/index.ts
@ -421,6 +421,21 @@ export async function checkContainer(
 	return containerFound;
 }

+export async function getContainerUsage(engine: string, container: string): Promise<any> {
+	const host = getEngine(engine);
+	try {
+		const { stdout } = await asyncExecShell(
+			`DOCKER_HOST="${host}" docker container stats ${container} --no-stream --no-trunc --format "{{json .}}"`
+		);
+		return JSON.parse(stdout);
+	} catch (err) {
+		return {
+			MemUsage: 0,
+			CPUPerc: 0,
+			NetIO: 0
+		};
+	}
+}
 export async function stopCoolifyProxy(
 	engine: string
 ): Promise<{ stdout: string; stderr: string } | Error> {
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@ -14,3 +14,12 @@ export const features: Readable<{ latestVersion: string; beta: boolean }> = read
 });

 export const isTraefikUsed: Writable<boolean> = writable(false);
+
+export const status: Writable<any> = writable({
+	application: {
+		isRunning: false,
+		isExited: false,
+		loading: false,
+		initialLoading: true
+	}
+});
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -80,6 +80,9 @@
 				} finally {
 				}
 			}
+			try {
+				const data = await get(`/notifications.json`);
+			} catch (error) {}
 		}
 	});

--- a/src/routes/applications/[id]/__layout.svelte
+++ b/src/routes/applications/[id]/__layout.svelte
@ -17,7 +17,7 @@
 		const endpoint = `/applications/${params.id}.json`;
 		const res = await fetch(endpoint);
 		if (res.ok) {
-			let { application, isRunning, isExited, appId, githubToken, gitlabToken } = await res.json();
+			let { application, appId, githubToken, gitlabToken } = await res.json();
 			if (!application || Object.entries(application).length === 0) {
 				return {
 					status: 302,
@ -45,13 +45,10 @@
 			return {
 				props: {
 					application,
-					isRunning,
-					isExited,
 					githubToken,
 					gitlabToken
 				},
 				stuff: {
-					isRunning,
 					application,
 					appId
 				}
@ -67,8 +64,6 @@

 <script lang="ts">
 	export let application;
-	export let isRunning;
-	export let isExited;
 	export let githubToken;
 	export let gitlabToken;
 	import { page, session } from '$app/stores';
@ -77,7 +72,7 @@
 	import Loading from '$lib/components/Loading.svelte';
 	import { del, get, post } from '$lib/api';
 	import { goto } from '$app/navigation';
-	import { gitTokens } from '$lib/store';
+	import { gitTokens, status } from '$lib/store';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { disabledButton } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
@ -135,17 +130,23 @@
 		}
 	}
 	async function getStatus() {
-		statusInterval = setInterval(async () => {
-			const data = await get(`/applications/${id}.json`);
-			isRunning = data.isRunning;
-			isExited = data.isExited;
-		}, 1000);
+		if ($status.application.loading) return;
+		console.log('getStatus');
+		$status.application.loading = true;
+		const data = await get(`/applications/${id}/status.json`);
+		$status.application.isRunning = data.isRunning;
+		$status.application.isExited = data.isExited;
+		$status.application.loading = false;
+		$status.application.initialLoading = false;
 	}
 	onDestroy(() => {
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {
 		await getStatus();
+		statusInterval = setInterval(async () => {
+			await getStatus();
+		}, 1000);
 	});
 </script>

@ -153,16 +154,16 @@
 	{#if loading}
 		<Loading fullscreen cover />
 	{:else}
-		{#if isExited}
+		{#if $status.application.isExited}
 			<a
 				href={!$disabledButton ? `/applications/${id}/logs` : null}
-				class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
+				class=" icons tooltip-bottom tooltip-red-500 flex items-center bg-transparent text-sm text-red-500"
 				data-tooltip="Application exited with an error!"
 				sveltekit:prefetch
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
+					class="h-6 w-6"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentcolor"
@ -179,20 +180,43 @@
 				</svg>
 			</a>
 		{/if}
-		{#if isRunning}
+		{#if $status.application.initialLoading}
+			<button
+				class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
+					<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
+					<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
+					<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
+					<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
+					<line x1="11" y1="19.94" x2="11" y2="19.95" />
+				</svg>
+			</button>
+		{:else if $status.application.isRunning}
 			<button
 				on:click={stopApplication}
 				title="Stop application"
 				type="submit"
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
+				class="icons tooltip-bottom flex items-center space-x-2 bg-transparent text-sm text-red-500"
 				data-tooltip={$session.isAdmin
 					? $t('application.stop_application')
 					: $t('application.permission_denied_stop_application')}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
+					class="h-6 w-6"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
@ -210,14 +234,14 @@
 					title="Rebuild application"
 					type="submit"
 					disabled={$disabledButton}
-					class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 hover:text-green-500"
+					class="icons tooltip-bottom flex items-center space-x-2 bg-transparent text-sm hover:text-green-500"
 					data-tooltip={$session.isAdmin
 						? 'Rebuild application'
 						: 'You do not have permission to rebuild application.'}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
+						class="h-6 w-6"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@ -239,14 +263,14 @@
 					title="Build and start application"
 					type="submit"
 					disabled={$disabledButton}
-					class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
+					class="icons tooltip-bottom flex items-center space-x-2 bg-transparent text-sm text-green-500"
 					data-tooltip={$session.isAdmin
 						? 'Build and start application'
 						: 'You do not have permission to Build and start application.'}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
+						class="h-6 w-6"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@ -261,18 +285,18 @@
 			</form>
 		{/if}

-		<div class="border border-coolgray-500 h-8" />
+		<div class="h-8 border border-coolgray-500" />
 		<a
 			href={!$disabledButton ? `/applications/${id}` : null}
 			sveltekit:prefetch
-			class="hover:text-yellow-500 rounded"
+			class="rounded hover:text-yellow-500"
 			class:text-yellow-500={$page.url.pathname === `/applications/${id}`}
 			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}`}
 		>
 			<button
 				title="Configurations"
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
+				class="icons tooltip-bottom bg-transparent text-sm"
 				data-tooltip="Configurations"
 			>
 				<svg
@ -301,19 +325,19 @@
 		<a
 			href={!$disabledButton ? `/applications/${id}/secrets` : null}
 			sveltekit:prefetch
-			class="hover:text-pink-500 rounded"
+			class="rounded hover:text-pink-500"
 			class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
 			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
 		>
 			<button
 				title="Secret"
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
+				class="icons tooltip-bottom bg-transparent text-sm"
 				data-tooltip="Secret"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
+					class="h-6 w-6"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
@ -333,19 +357,19 @@
 		<a
 			href={!$disabledButton ? `/applications/${id}/storage` : null}
 			sveltekit:prefetch
-			class="hover:text-pink-500 rounded"
+			class="rounded hover:text-pink-500"
 			class:text-pink-500={$page.url.pathname === `/applications/${id}/storage`}
 			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storage`}
 		>
 			<button
 				title="Persistent Storage"
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
+				class="icons tooltip-bottom bg-transparent text-sm"
 				data-tooltip="Persistent Storage"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
+					class="h-6 w-6"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
@ -363,19 +387,19 @@
 		<a
 			href={!$disabledButton ? `/applications/${id}/previews` : null}
 			sveltekit:prefetch
-			class="hover:text-orange-500 rounded"
+			class="rounded hover:text-orange-500"
 			class:text-orange-500={$page.url.pathname === `/applications/${id}/previews`}
 			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/previews`}
 		>
 			<button
 				title="Previews"
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
+				class="icons tooltip-bottom bg-transparent text-sm"
 				data-tooltip="Previews"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
+					class="h-6 w-6"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
@ -392,18 +416,18 @@
 				</svg></button
 			></a
 		>
-		<div class="border border-coolgray-500 h-8" />
+		<div class="h-8 border border-coolgray-500" />
 		<a
-			href={!$disabledButton && isRunning ? `/applications/${id}/logs` : null}
+			href={!$disabledButton && $status.application.isRunning ? `/applications/${id}/logs` : null}
 			sveltekit:prefetch
-			class="hover:text-sky-500 rounded"
+			class="rounded hover:text-sky-500"
 			class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
 			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
 		>
 			<button
 				title={$t('application.logs')}
-				disabled={$disabledButton || !isRunning}
-				class="icons bg-transparent tooltip-bottom text-sm"
+				disabled={$disabledButton || !$status.application.isRunning}
+				class="icons tooltip-bottom bg-transparent text-sm"
 				data-tooltip={$t('application.logs')}
 			>
 				<svg
@ -428,14 +452,14 @@
 		<a
 			href={!$disabledButton ? `/applications/${id}/logs/build` : null}
 			sveltekit:prefetch
-			class="hover:text-red-500 rounded"
+			class="rounded hover:text-red-500"
 			class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
 			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
 		>
 			<button
 				title="Build Logs"
 				disabled={$disabledButton}
-				class="icons bg-transparent tooltip-bottom text-sm"
+				class="icons tooltip-bottom bg-transparent text-sm"
 				data-tooltip="Build Logs"
 			>
 				<svg
@ -460,7 +484,7 @@
 				</svg>
 			</button></a
 		>
-		<div class="border border-coolgray-500 h-8" />
+		<div class="h-8 border border-coolgray-500" />

 		<button
 			on:click={() => deleteApplication(application.name)}
@ -468,7 +492,7 @@
 			type="submit"
 			disabled={!$session.isAdmin}
 			class:hover:text-red-500={$session.isAdmin}
-			class="icons bg-transparent  tooltip-bottom text-sm"
+			class="icons tooltip-bottom  bg-transparent text-sm"
 			data-tooltip={$session.isAdmin
 				? $t('application.delete_application')
 				: $t('application.permission_denied_delete_application')}
--- a/src/routes/applications/[id]/index.json.ts
+++ b/src/routes/applications/[id]/index.json.ts
@ -1,7 +1,7 @@
-import { getUserDetails } from '$lib/common';
+import { asyncExecShell, getUserDetails } from '$lib/common';
 import * as db from '$lib/database';
 import { ErrorHandler } from '$lib/database';
-import { checkContainer, isContainerExited } from '$lib/haproxy';
+import { checkContainer, getContainerUsage, isContainerExited } from '$lib/haproxy';
 import type { RequestHandler } from '@sveltejs/kit';
 import { setDefaultConfiguration } from '$lib/buildPacks/common';

@ -12,21 +12,14 @@ export const get: RequestHandler = async (event) => {
 	const { id } = event.params;

 	const appId = process.env['COOLIFY_APP_ID'];
-	let isRunning = false;
-	let isExited = false;
 	let githubToken = event.locals.cookies?.githubToken || null;
 	let gitlabToken = event.locals.cookies?.gitlabToken || null;
 	try {
 		const application = await db.getApplication({ id, teamId });
-		if (application.destinationDockerId) {
-			isRunning = await checkContainer(application.destinationDocker.engine, id);
-			isExited = await isContainerExited(application.destinationDocker.engine, id);
-		}
+
 		return {
 			status: 200,
 			body: {
-				isRunning,
-				isExited,
 				application,
 				appId,
 				githubToken,
--- a/src/routes/applications/[id]/index.svelte
+++ b/src/routes/applications/[id]/index.svelte
@ -4,8 +4,7 @@
 		if (stuff?.application?.id) {
 			return {
 				props: {
-					application: stuff.application,
-					isRunning: stuff.isRunning
+					application: stuff.application
 				}
 			};
 		}
@ -36,10 +35,9 @@
 		baseImages: Array<{ value: string; label: string }>;
 		baseBuildImages: Array<{ value: string; label: string }>;
 	};
-	export let isRunning;
 	import { page, session } from '$app/stores';
 	import { errorNotification } from '$lib/form';
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import Select from 'svelte-select';

 	import Explainer from '$lib/components/Explainer.svelte';
@ -50,13 +48,22 @@
 	import { get, post } from '$lib/api';
 	import cuid from 'cuid';
 	import { browser } from '$app/env';
-	import { disabledButton } from '$lib/store';
+	import { disabledButton, status } from '$lib/store';
 	import { t } from '$lib/translations';
 	const { id } = $page.params;

 	let domainEl: HTMLInputElement;

 	let loading = false;
+
+	let usageLoading = false;
+	let usage = {
+		MemUsage: 0,
+		CPUPerc: 0,
+		NetIO: 0
+	};
+	let usageInterval;
+
 	let forceSave = false;
 	let debug = application.settings.debug;
 	let previews = application.settings.previews;
@ -78,15 +85,29 @@
 		}
 	];
 	function containerClass() {
-		if (!$session.isAdmin || isRunning) {
+		if (!$session.isAdmin || $status.application.isRunning) {
 			return 'text-white border border-dashed border-coolgray-300 bg-transparent font-thin px-0';
 		}
 	}
 	if (browser && window.location.hostname === 'demo.coolify.io' && !application.fqdn) {
 		application.fqdn = `http://${cuid()}.demo.coolify.io`;
 	}
-	onMount(() => {
+	async function getUsage() {
+		if (usageLoading) return;
+		usageLoading = true;
+		const data = await get(`/applications/${id}/usage.json`);
+		usage = data.usage;
+		usageLoading = false;
+	}
+	onDestroy(() => {
+		clearInterval(usageInterval);
+	});
+	onMount(async () => {
 		domainEl.focus();
+		await getUsage();
+		usageInterval = setInterval(async () => {
+			await getUsage();
+		}, 1000);
 	});

 	async function changeSettings(name) {
@ -261,6 +282,33 @@
 	</a>
 </div>

+<div class="mx-auto max-w-4xl px-6 py-4">
+	<div class="text-2xl font-bold">Application 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>
 <div class="mx-auto max-w-4xl px-6">
 	<!-- svelte-ignore missing-declaration -->
 	<form on:submit|preventDefault={handleSubmit} class="py-4">
@ -365,10 +413,10 @@
 					>
 					<div class="custom-select-wrapper">
 						<Select
-							isDisabled={!$session.isAdmin || isRunning}
+							isDisabled={!$session.isAdmin || $status.application.isRunning}
 							containerClasses={containerClass()}
 							id="baseImages"
-							showIndicator={!isRunning}
+							showIndicator={!$status.application.isRunning}
 							items={application.baseImages}
 							on:select={selectBaseImage}
 							value={application.baseImage}
@ -386,10 +434,10 @@

 					<div class="custom-select-wrapper">
 						<Select
-							isDisabled={!$session.isAdmin || isRunning}
+							isDisabled={!$session.isAdmin || $status.application.isRunning}
 							containerClasses={containerClass()}
 							id="baseBuildImages"
-							showIndicator={!isRunning}
+							showIndicator={!$status.application.isRunning}
 							items={application.baseBuildImages}
 							on:select={selectBaseBuildImage}
 							value={application.baseBuildImage}
@ -422,8 +470,8 @@
 				</div>
 				<div>
 					<input
-						readonly={!$session.isAdmin || isRunning}
-						disabled={!$session.isAdmin || isRunning}
+						readonly={!$session.isAdmin || $status.application.isRunning}
+						disabled={!$session.isAdmin || $status.application.isRunning}
 						bind:this={domainEl}
 						name="fqdn"
 						id="fqdn"
@ -470,12 +518,12 @@
 			<div class="grid grid-cols-2 items-center pb-8">
 				<Setting
 					dataTooltip={$t('forms.must_be_stopped_to_modify')}
-					disabled={isRunning}
+					disabled={$status.application.isRunning}
 					isCenter={false}
 					bind:setting={dualCerts}
 					title={$t('application.ssl_www_and_non_www')}
 					description={$t('application.ssl_explainer')}
-					on:click={() => !isRunning && changeSettings('dualCerts')}
+					on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
 				/>
 			</div>
 			{#if application.buildPack === 'python'}
@ -527,8 +575,8 @@
 				<div class="grid grid-cols-2 items-center">
 					<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
 					<input
-						readonly={!$session.isAdmin && !isRunning}
-						disabled={!$session.isAdmin || isRunning}
+						readonly={!$session.isAdmin && !$status.application.isRunning}
+						disabled={!$session.isAdmin || $status.application.isRunning}
 						name="exposePort"
 						id="exposePort"
 						bind:value={application.exposePort}
--- a/src/routes/applications/[id]/status.json.ts
+++ b/src/routes/applications/[id]/status.json.ts
@ -0,0 +1,36 @@
+import { asyncExecShell, getUserDetails } from '$lib/common';
+import * as db from '$lib/database';
+import { ErrorHandler } from '$lib/database';
+import { checkContainer, getContainerUsage, isContainerExited } 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);
+	if (status === 401) return { status, body };
+
+	const { id } = event.params;
+
+	let isRunning = false;
+	let isExited = false;
+	try {
+		const application = await db.getApplication({ id, teamId });
+		if (application.destinationDockerId) {
+			[isRunning, isExited] = await Promise.all([
+				checkContainer(application.destinationDocker.engine, id),
+				isContainerExited(application.destinationDocker.engine, id)
+			]);
+		}
+		return {
+			status: 200,
+			body: {
+				isRunning,
+				isExited
+			},
+			headers: {}
+		};
+	} catch (error) {
+		console.log(error);
+		return ErrorHandler(error);
+	}
+};
--- a/src/routes/applications/[id]/usage.json.ts
+++ b/src/routes/applications/[id]/usage.json.ts
@ -0,0 +1,31 @@
+import { asyncExecShell, getUserDetails } from '$lib/common';
+import * as db from '$lib/database';
+import { ErrorHandler } from '$lib/database';
+import { checkContainer, getContainerUsage, isContainerExited } 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);
+	if (status === 401) return { status, body };
+
+	const { id } = event.params;
+
+	let usage = {};
+	try {
+		const application = await db.getApplication({ id, teamId });
+		if (application.destinationDockerId) {
+			[usage] = await Promise.all([getContainerUsage(application.destinationDocker.engine, id)]);
+		}
+		return {
+			status: 200,
+			body: {
+				usage
+			},
+			headers: {}
+		};
+	} catch (error) {
+		console.log(error);
+		return ErrorHandler(error);
+	}
+};
--- a/src/routes/notifications.json.ts
+++ b/src/routes/notifications.json.ts
@ -0,0 +1,30 @@
+import { ErrorHandler } from '$lib/database';
+import { version } from '$lib/common';
+import * as db from '$lib/database';
+import type { RequestHandler } from '@sveltejs/kit';
+
+export const get: RequestHandler = async (request) => {
+	try {
+		const unreadNotifications = await db.prisma.notification.findMany({
+			where: { isRead: false, showAtVersion: version }
+		});
+		return {
+			status: 200,
+			body: {
+				...unreadNotifications
+			}
+		};
+	} catch (error) {
+		console.log(error);
+		return ErrorHandler(error);
+	}
+};
+
+export const post: RequestHandler = async (event) => {
+	const { type, latestVersion } = await event.request.json();
+	const settings = await db.prisma.setting.findFirst();
+
+	return {
+		status: 500
+	};
+};
--- a/src/routes/webhooks/traefik/other.json.ts
+++ b/src/routes/webhooks/traefik/other.json.ts
@ -27,7 +27,7 @@ export const get: RequestHandler = async (event) => {
 						services: {
 							[id]: {
 								loadbalancer: {
-									servers: []
+									servers: [{ address: `${id}:${privatePort}` }]
 								}
 							}
 						}
@ -49,7 +49,7 @@ export const get: RequestHandler = async (event) => {
 							services: {
 								[id]: {
 									loadbalancer: {
-										servers: []
+										servers: [{ url: `http://${id}:${privatePort}` }]
 									}
 								}
 							}
@ -58,11 +58,6 @@ export const get: RequestHandler = async (event) => {
 				}
 			}
 		}
-		if (type === 'tcp') {
-			traefik[type].services[id].loadbalancer.servers.push({ address: `${id}:${privatePort}` });
-		} else if (type === 'http') {
-			traefik[type].services[id].loadbalancer.servers.push({ url: `http://${id}:${privatePort}` });
-		}
 		return {
 			status: 200,
 			body: {