diff --git a/apps/api/src/routes/api/v1/handlers.ts b/apps/api/src/routes/api/v1/handlers.ts index b55f8e8b4..6d3112e97 100644 --- a/apps/api/src/routes/api/v1/handlers.ts +++ b/apps/api/src/routes/api/v1/handlers.ts @@ -31,7 +31,7 @@ export async function checkUpdate(request: FastifyRequest) { const { data: versions } = await axios.get( `https://get.coollabs.io/versions.json?appId=${process.env['COOLIFY_APP_ID']}&version=${currentVersion}` ); - const latestVersion = versions['coolify'].main.version + const latestVersion = versions['coolify'].main.version const isUpdateAvailable = compare(latestVersion, currentVersion); if (isStaging) { return { @@ -96,34 +96,19 @@ export async function showDashboard(request: FastifyRequest) { try { const userId = request.user.userId; const teamId = request.user.teamId; - const applicationsCount = await prisma.application.count({ + const applications = await prisma.application.findMany({ where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } } }); - const sourcesCount = await prisma.gitSource.count({ + const databases = await prisma.database.findMany({ where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } } }); - const destinationsCount = await prisma.destinationDocker.count({ + const services = await prisma.service.findMany({ where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } } }); - const teamsCount = await prisma.permission.count({ where: { userId } }); - const databasesCount = await prisma.database.count({ - where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } } - }); - const servicesCount = await prisma.service.count({ - where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } } - }); - const teams = await prisma.permission.findMany({ - where: { userId }, - include: { team: { include: { _count: { select: { users: true } } } } } - }); return { - teams, - applicationsCount, - sourcesCount, - destinationsCount, - teamsCount, - databasesCount, - servicesCount, + applications, + databases, + services, }; } catch ({ status, message }) { return errorHandler({ status, message }) diff --git a/apps/ui/src/lib/components/Toast.svelte b/apps/ui/src/lib/components/Toast.svelte index dd5547a46..282bc159f 100644 --- a/apps/ui/src/lib/components/Toast.svelte +++ b/apps/ui/src/lib/components/Toast.svelte @@ -1,10 +1,16 @@
dispatch('pause')} + on:focus={() => dispatch('pause')} + on:mouseout={() => dispatch('resume')} + on:blur={() => dispatch('resume')} class="alert shadow-lg text-white rounded" - class:alert-success={type === 'success'} + class:bg-coollabs={type === 'success'} class:alert-error={type === 'error'} class:alert-info={type === 'info'} > diff --git a/apps/ui/src/lib/components/Toasts.svelte b/apps/ui/src/lib/components/Toasts.svelte index 856b0c261..2e53c6287 100644 --- a/apps/ui/src/lib/components/Toasts.svelte +++ b/apps/ui/src/lib/components/Toasts.svelte @@ -2,14 +2,18 @@ import { fade } from 'svelte/transition'; import Toast from './Toast.svelte'; - import { toasts } from '$lib/store'; + import { pauseToast, resumeToast, toasts } from '$lib/store'; {#if $toasts}
-
@@ -17,6 +21,6 @@ diff --git a/apps/ui/src/lib/components/Usage.svelte b/apps/ui/src/lib/components/Usage.svelte index 79b69662d..a33b6d3cc 100644 --- a/apps/ui/src/lib/components/Usage.svelte +++ b/apps/ui/src/lib/components/Usage.svelte @@ -22,11 +22,10 @@ usage: false, cleanup: false }; - import { addToast, appSession } from '$lib/store'; + import { appSession } from '$lib/store'; import { onDestroy, onMount } from 'svelte'; - import { get, post } from '$lib/api'; + import { get } from '$lib/api'; import { errorNotification } from '$lib/common'; - import Trend from './Trend.svelte'; async function getStatus() { if (loading.usage) return; loading.usage = true; @@ -49,118 +48,68 @@ return errorNotification(error); } }); - - let warning = { - memory: false, - cpu: false, - disk: false - }; - let trends = { - memory: 'stable', - cpu: 'stable', - disk: 'stable' - }; - async function manuallyCleanupStorage() { - try { - loading.cleanup = true - await post('/internal/cleanup', {}); - return addToast({ - message: "Cleanup done.", - type:"success" - }) - } catch(error) { - return errorNotification(error); - } finally { - loading.cleanup = false - } - } {#if $appSession.teamId === '0'} -
Server Usage
-
-
-
Total Memory
-
- {(usage?.memory.totalMemMb).toFixed(0)}MB -
+
+
Hardware Details
+
+
+
+
Total Memory
+
+ {(usage?.memory.totalMemMb).toFixed(0)}MB +
+
+
+
Used Memory
+
+ {(usage?.memory.usedMemMb).toFixed(0)}MB +
+
+
+
Free Memory
+
+ {usage?.memory.freeMemPercentage}% +
+
+
+
+
+
Total CPUs
+
+ {usage?.cpu.count} +
+
+
+
CPU Usage
+
+ {usage?.cpu.usage}% +
+
+
+
Load Average (5,10,30mins)
+
{usage?.cpu.load}
+
+
+
+
+
Total Disk
+
+ {usage?.disk.totalGb}GB +
+
+
+
Used Disk
+
+ {usage?.disk.usedGb}GB +
+
+
+
Free Disk
+
{usage?.disk.freePercentage}%
+
+
- -
-
Used Memory
-
- {(usage?.memory.usedMemMb).toFixed(0)}MB -
-
- -
-
Free Memory
-
- {usage?.memory.freeMemPercentage}% - {#if !warning.memory} - - {/if} -
-
-
-
-
-
Total CPUs
-
- {usage?.cpu.count} -
-
-
-
CPU Usage
-
- {usage?.cpu.usage}% - {#if !warning.cpu} - - {/if} -
-
-
-
Load Average (5/10/30mins)
-
- {usage?.cpu.load.join('/')} -
-
-
-
-
-
Total Disk
-
- {usage?.disk.totalGb}GB -
-
-
-
Used Disk
-
- {usage?.disk.usedGb}GB -
- -
-
-
Free Disk
-
- {usage?.disk.freePercentage}% - {#if !warning.disk} - - {/if} -
-
-
- -
Resources
+
{/if} diff --git a/apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte b/apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte new file mode 100644 index 000000000..a633375b7 --- /dev/null +++ b/apps/ui/src/lib/components/svg/applications/ApplicationIcons.svelte @@ -0,0 +1,41 @@ + + +{#if application.buildPack.toLowerCase() === 'rust'} + +{:else if application.buildPack.toLowerCase() === 'node'} + +{:else if application.buildPack.toLowerCase() === 'react'} + +{:else if application.buildPack.toLowerCase() === 'svelte'} + +{:else if application.buildPack.toLowerCase() === 'vuejs'} + +{:else if application.buildPack.toLowerCase() === 'php'} + +{:else if application.buildPack.toLowerCase() === 'python'} + +{:else if application.buildPack.toLowerCase() === 'static'} + +{:else if application.buildPack.toLowerCase() === 'nestjs'} + +{:else if application.buildPack.toLowerCase() === 'nuxtjs'} + +{:else if application.buildPack.toLowerCase() === 'nextjs'} + +{:else if application.buildPack.toLowerCase() === 'gatsby'} + +{:else if application.buildPack.toLowerCase() === 'docker'} + +{:else if application.buildPack.toLowerCase() === 'astro'} + +{:else if application.buildPack.toLowerCase() === 'eleventy'} + +{:else if application.buildPack.toLowerCase() === 'deno'} + +{:else if application.buildPack.toLowerCase() === 'laravel'} + +{/if} diff --git a/apps/ui/src/lib/components/svg/applications/Astro.svelte b/apps/ui/src/lib/components/svg/applications/Astro.svelte index df8d0804f..2344372ab 100644 --- a/apps/ui/src/lib/components/svg/applications/Astro.svelte +++ b/apps/ui/src/lib/components/svg/applications/Astro.svelte @@ -1,5 +1,9 @@ + + + export let isAbsolute = true; + +
Application Usage
-
-
-
-
Used Memory / Memory Limit
-
- {usage?.MemUsage} -
-
+
+
+
Used Memory / Memory Limit
+
{usage?.MemUsage}
+
-
-
Used CPU
-
- {usage?.CPUPerc} -
-
+
+
Used CPU
+
{usage?.CPUPerc}
+
-
-
Network IO
-
- {usage?.NetIO} -
-
-
+
+
Network IO
+
{usage?.NetIO}
+
@@ -324,11 +316,10 @@ class="btn btn-sm" type="submit" class:bg-applications={!loading} - class:loading={loading} + class:loading class:bg-orange-600={forceSave} class:hover:bg-orange-400={forceSave} - disabled={loading} - >{$t('forms.save')}{$t('forms.save')} {/if}
diff --git a/apps/ui/src/routes/applications/index.svelte b/apps/ui/src/routes/applications/index.svelte index c321b267c..8c7b8fe73 100644 --- a/apps/ui/src/routes/applications/index.svelte +++ b/apps/ui/src/routes/applications/index.svelte @@ -26,24 +26,8 @@ import { t } from '$lib/translations'; import { getDomain } from '$lib/common'; import { appSession } from '$lib/store'; + import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte'; - import Rust from '$lib/components/svg/applications/Rust.svelte'; - import Nodejs from '$lib/components/svg/applications/Nodejs.svelte'; - import React from '$lib/components/svg/applications/React.svelte'; - import Svelte from '$lib/components/svg/applications/Svelte.svelte'; - import Vuejs from '$lib/components/svg/applications/Vuejs.svelte'; - import PHP from '$lib/components/svg/applications/PHP.svelte'; - import Python from '$lib/components/svg/applications/Python.svelte'; - import Static from '$lib/components/svg/applications/Static.svelte'; - import Nestjs from '$lib/components/svg/applications/Nestjs.svelte'; - import Nuxtjs from '$lib/components/svg/applications/Nuxtjs.svelte'; - import Nextjs from '$lib/components/svg/applications/Nextjs.svelte'; - import Gatsby from '$lib/components/svg/applications/Gatsby.svelte'; - import Docker from '$lib/components/svg/applications/Docker.svelte'; - import Astro from '$lib/components/svg/applications/Astro.svelte'; - import Eleventy from '$lib/components/svg/applications/Eleventy.svelte'; - import Deno from '$lib/components/svg/applications/Deno.svelte'; - import Laravel from '$lib/components/svg/applications/Laravel.svelte'; ownApplications = applications.filter((application) => { if (application.teams[0].id === $appSession.teamId) { return application; @@ -63,10 +47,7 @@
{$t('index.applications')}
{#if $appSession.isAdmin} -
diff --git a/apps/ui/src/routes/databases/[id]/index.svelte b/apps/ui/src/routes/databases/[id]/index.svelte index 8faa8ccc4..cb70d1eb9 100644 --- a/apps/ui/src/routes/databases/[id]/index.svelte +++ b/apps/ui/src/routes/databases/[id]/index.svelte @@ -48,7 +48,7 @@ }); -
+
Configuration @@ -60,29 +60,21 @@
Database Usage
-
-
-
-
Used Memory / Memory Limit
-
- {usage?.MemUsage} -
-
+
+
+
Used Memory / Memory Limit
+
{usage?.MemUsage}
+
-
-
Used CPU
-
- {usage?.CPUPerc} -
-
+
+
Used CPU
+
{usage?.CPUPerc}
+
-
-
Network IO
-
- {usage?.NetIO} -
-
-
+
+
Network IO
+
{usage?.NetIO}
+
- + diff --git a/apps/ui/src/routes/databases/index.svelte b/apps/ui/src/routes/databases/index.svelte index 9cd404138..c14c9c3f3 100644 --- a/apps/ui/src/routes/databases/index.svelte +++ b/apps/ui/src/routes/databases/index.svelte @@ -19,17 +19,11 @@
{$t('index.dashboard')}
+
-
- -
- -
{$t('index.applications')}
-
- {applicationsCount} -
- - -
{$t('index.destinations')}
-
- {destinationsCount} -
- +
+
+
+
Resources
+
+ + + {#each applications as application} + + + + + + + {/each} - -
{$t('index.git_sources')}
-
- {sourcesCount} -
- - -
- -
{$t('index.databases')}
-
- {databasesCount} -
- + {#each services as service} +
+ + + - -
{$t('index.services')}
-
- {servicesCount} -
- - - -
{$t('index.teams')}
-
- {teamsCount} -
- - + + + {/each} + {#each databases as database} + + + + + + + {/each} + +
+ {#await getStatus(application)} +
+ {:then status} + {#if status === 'Running'} +
+ {:else} +
+ {/if} + {/await} +
{application.name}
+
+ + +
+ Application +
+ {#if application.fqdn} + + + + + + + {/if} + + + + + + + + + + + + + + +
+ {#await getStatus(service)} +
+ {:then status} + {#if status === 'Running'} +
+ {:else} +
+ {/if} + {/await} +
{service.name}
+
+ +
+ Service +
+ 		+ {#if service.fqdn} + + + + + + + {/if} + + + + + + + + + + + + + + +
+ {#await getStatus(database)} +
+ {:then status} + {#if status === 'Running'} +
+ {:else} +
+ {/if} + {/await} +
{database.name}
+
+ + +
+ Database +
+ 		+ + + + + + + + + + + + + + +
+
+
+ +
diff --git a/apps/ui/src/routes/services/[id]/configuration/type.svelte b/apps/ui/src/routes/services/[id]/configuration/type.svelte index 6764eaa08..ef3d0fad3 100644 --- a/apps/ui/src/routes/services/[id]/configuration/type.svelte +++ b/apps/ui/src/routes/services/[id]/configuration/type.svelte @@ -32,7 +32,7 @@ import { get, post } from '$lib/api'; import { t } from '$lib/translations'; import { errorNotification } from '$lib/common'; - import Services from '../_Services.svelte'; + import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte'; const { id } = $page.params; const from = $page.url.searchParams.get('from'); @@ -56,7 +56,7 @@
handleSubmit(type.name)}>
diff --git a/apps/ui/src/routes/services/[id]/index.svelte b/apps/ui/src/routes/services/[id]/index.svelte index c503e3552..f2ed2852f 100644 --- a/apps/ui/src/routes/services/[id]/index.svelte +++ b/apps/ui/src/routes/services/[id]/index.svelte @@ -61,29 +61,21 @@
Service Usage
-
-
-
-
Used Memory / Memory Limit
-
- {usage?.MemUsage} -
-
+
+
+
Used Memory / Memory Limit
+
{usage?.MemUsage}
+
-
-
Used CPU
-
- {usage?.CPUPerc} -
-
+
+
Used CPU
+
{usage?.CPUPerc}
+
-
-
Network IO
-
- {usage?.NetIO} -
-
-
+
+
Network IO
+
{usage?.NetIO}
+
diff --git a/apps/ui/src/routes/services/index.svelte b/apps/ui/src/routes/services/index.svelte index be784b453..cb9f4ad55 100644 --- a/apps/ui/src/routes/services/index.svelte +++ b/apps/ui/src/routes/services/index.svelte @@ -24,9 +24,8 @@ import { t } from '$lib/translations'; import { appSession } from '$lib/store'; - import * as Icons from '$lib/components/svg/services'; import { getDomain } from '$lib/common'; - import Services from './[id]/_Services.svelte'; + import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte'; async function newService() { const { id } = await post('/services/new', {}); @@ -46,24 +45,21 @@
{$t('index.services')}
- +
@@ -78,7 +74,7 @@ {#each ownServices as service}
- +
{service.name}
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css index 66dcfd1b2..ebc6b69d6 100644 --- a/apps/ui/src/tailwind.css +++ b/apps/ui/src/tailwind.css @@ -192,4 +192,13 @@ a { .sub-menu-active { @apply bg-coolgray-500 text-white; +} + +.table tbody td, +.table tbody th, +.table thead th{ + background-color: transparent; +} +.table *{ + border: none; } \ No newline at end of file