dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: new dashboard

Browse Source
This commit is contained in:
Andras Bacsai
2022-08-12 16:09:52 +02:00
parent edbc34e7e5
commit 1262f6b11b
37 changed files with 718 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/ui/src/routes/services/[id]/_Services.svelte
View File

@@ -1,36 +0,0 @@
<script lang="ts">
export let type: string;
import * as Icons from '$lib/components/svg/services';
</script>
{#if type === 'plausibleanalytics'}
<Icons.PlausibleAnalytics isAbsolute />
{:else if type === 'nocodb'}
<Icons.NocoDb isAbsolute />
{:else if type === 'minio'}
<Icons.MinIo isAbsolute />
{:else if type === 'vscodeserver'}
<Icons.VsCodeServer isAbsolute />
{:else if type === 'wordpress'}
<Icons.Wordpress isAbsolute />
{:else if type === 'vaultwarden'}
<Icons.VaultWarden isAbsolute />
{:else if type === 'languagetool'}
<Icons.LanguageTool isAbsolute />
{:else if type === 'n8n'}
<Icons.N8n isAbsolute />
{:else if type === 'uptimekuma'}
<Icons.UptimeKuma isAbsolute />
{:else if type === 'ghost'}
<Icons.Ghost isAbsolute />
{:else if type === 'meilisearch'}
<Icons.MeiliSearch isAbsolute />
{:else if type === 'umami'}
<Icons.Umami isAbsolute />
{:else if type === 'hasura'}
<Icons.Hasura isAbsolute />
{:else if type === 'fider'}
<Icons.Fider isAbsolute />
{:else if type === 'moodle'}
<Icons.Moodle isAbsolute />
{/if}

4
apps/ui/src/routes/services/[id]/configuration/type.svelte
View File

@@ -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 @@
<div class="p-2">
<form on:submit|preventDefault={() => handleSubmit(type.name)}>
<button type="submit" class="box-selection relative text-xl font-bold hover:bg-pink-600">
<Services type={type.name} />
<ServiceIcons type={type.name} />
{type.fancyName}
</button>
</form>

34
apps/ui/src/routes/services/[id]/index.svelte
View File

@@ -61,29 +61,21 @@
</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="text-center">
<div class="stat w-64">
<div class="stat-title">Used Memory / Memory Limit</div>
<div class="stat-value text-xl">{usage?.MemUsage}</div>
</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="stat w-64">
<div class="stat-title">Used CPU</div>
<div class="stat-value text-xl">{usage?.CPUPerc}</div>
</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 class="stat w-64">
<div class="stat-title">Network IO</div>
<div class="stat-value text-xl">{usage?.NetIO}</div>
</div>
</div>
</div>
<Services bind:service bind:readOnly bind:settings />

36
apps/ui/src/routes/services/index.svelte
View File

@@ -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 @@
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
<button
on:click={newService}
class="btn btn-square btn-sm bg-services"
<button on:click={newService} class="btn btn-square btn-sm bg-services">
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
>
<svg
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/></svg
>
</button>
</button>
</div>
<div class="flex-col justify-center">
@@ -78,7 +74,7 @@
{#each ownServices as service}
<a href="/services/{service.id}" class=" p-2 no-underline">
<div class="box-selection group relative hover:bg-pink-600">
<Services type={service.type} />
<ServiceIcons type={service.type} />
<div class="truncate text-center text-xl font-bold">
{service.name}
</div>