From ff8fe68f14562549efbbc70f87d10c7363be4aae Mon Sep 17 00:00:00 2001 From: Kaname <56084970+kaname-png@users.noreply.github.com> Date: Fri, 26 Aug 2022 01:40:46 +0000 Subject: [PATCH] feat(ui): rework home UI and with responsive design --- apps/ui/package.json | 1 + apps/ui/src/lib/components/Usage.svelte | 39 +- apps/ui/src/routes/index.svelte | 480 ++++++++++++------------ apps/ui/tailwind.config.cjs | 2 +- pnpm-lock.yaml | 28 +- 5 files changed, 281 insertions(+), 269 deletions(-) diff --git a/apps/ui/package.json b/apps/ui/package.json index 0a64124f0..2d2787fb9 100644 --- a/apps/ui/package.json +++ b/apps/ui/package.json @@ -38,6 +38,7 @@ "type": "module", "dependencies": { "@sveltejs/adapter-static": "1.0.0-next.39", + "@tailwindcss/typography": "^0.5.4", "cuid": "2.1.8", "daisyui": "2.22.0", "js-cookie": "3.0.1", diff --git a/apps/ui/src/lib/components/Usage.svelte b/apps/ui/src/lib/components/Usage.svelte index 6868322ad..46854145e 100644 --- a/apps/ui/src/lib/components/Usage.svelte +++ b/apps/ui/src/lib/components/Usage.svelte @@ -50,61 +50,70 @@ }); -
-
Hardware Details
-
-
-
+
+

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}%
diff --git a/apps/ui/src/routes/index.svelte b/apps/ui/src/routes/index.svelte index d6cecacfd..896c029b8 100644 --- a/apps/ui/src/routes/index.svelte +++ b/apps/ui/src/routes/index.svelte @@ -99,256 +99,240 @@ > {/if}
-
-
-
- {#if applications.length > 0} -
-
Resources
-
- - - {#each applications as application} - - - - + {#if $appSession.teamId === '0'} + + {/if} + {#if applications.length > 0} +

Resources

+
+
+ {#each applications as application} +
+ {#await getStatus(application)} + + {:then status} + {#if status === 'Running'}1 + + {:else} + + {/if} + {/await} +
+ +
+ + Application + {#if application.settings.isBot} + | BOT + {/if} + +

{application.name}

+
+
+ {#if application.fqdn} + + - - {#if application.fqdn} - - - - - - - {/if} - {#if application.settings.isBot && application.exposePort} - - - - - - - {/if} - - - - - - - - - - - - - - - -
- {/each} - - {#each services as service} - - - - - - - - {/each} - {#each databases as database} - - - - - - - {/each} - -
- {#await getStatus(application)} -
- {:then status} - {#if status === 'Running'} -
- {:else} -
- {/if} - {/await} -
{application.name}
-
- - -
- Application - {#if application.settings.isBot} - | BOT - {/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 -
- 		- - - - - - - - - - - - - - -
+ + + + + + Website + + {/if} + {#if application.settings.isBot && application.exposePort} + + + + + + + + Server + + {/if} + + + + + + + + + + + + + + Manage + +
+
- {:else if $appSession.teamId !== '0'} -
Nothing is configured yet.
- {/if} - {#if $appSession.teamId === '0'} - - {/if} + {/each}
-
+

Services

+
+
+ {#each services as service} +
+ {#await getStatus(service)} + + {:then status} + {#if status === 'Running'}1 + + {:else} + + {/if} + {/await} +
+ +
+ + Service + +

{service.name}

+
+
+ {#if service.fqdn} + + + + + + + + Website + + {/if} + + + + + + + + + + + + + + Manage + +
+
+
+
+ {/each} +
+

Databases

+
+
+ {#each databases as database} +
+ {#await getStatus(database)} + + {:then status} + {#if status === 'Running'}1 + + {:else} + + {/if} + {/await} +
+ +
+ + Service + +

{database.name}

+
+
+ + + + + + + + + + + + + + Manage + +
+
+
+
+ {/each} +
+ {:else if $appSession.teamId !== '0'} +
+

Nothing is configured yet.

+
+ {/if}
diff --git a/apps/ui/tailwind.config.cjs b/apps/ui/tailwind.config.cjs index 91cab4bf1..cc36c7115 100644 --- a/apps/ui/tailwind.config.cjs +++ b/apps/ui/tailwind.config.cjs @@ -62,5 +62,5 @@ module.exports = { scrollbar: ['dark'], extend: {} }, - plugins: [require('tailwindcss-scrollbar'), require('daisyui')] + plugins: [require('tailwindcss-scrollbar'), require('daisyui'), require("@tailwindcss/typography")] }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 45e590081..570aad819 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -118,6 +118,7 @@ importers: '@playwright/test': 1.24.2 '@sveltejs/adapter-static': 1.0.0-next.39 '@sveltejs/kit': 1.0.0-next.405 + '@tailwindcss/typography': ^0.5.4 '@types/js-cookie': 3.0.2 '@typescript-eslint/eslint-plugin': 5.33.0 '@typescript-eslint/parser': 5.33.0 @@ -144,6 +145,7 @@ importers: vite: 3.0.5 dependencies: '@sveltejs/adapter-static': 1.0.0-next.39 + '@tailwindcss/typography': 0.5.4_tailwindcss@3.1.8 cuid: 2.1.8 daisyui: 2.22.0_25hquoklqeoqwmt7fwvvcyxm5e js-cookie: 3.0.1 @@ -166,7 +168,7 @@ importers: svelte: 3.49.0 svelte-check: 2.8.0_vylzxgme5yisu3bsyvcau4hjtq svelte-preprocess: 4.10.7_fje22ktja5v2dh6nbkissncqme - tailwindcss: 3.1.8 + tailwindcss: 3.1.8_postcss@8.4.16 tailwindcss-scrollbar: 0.1.0_tailwindcss@3.1.8 tslib: 2.4.0 typescript: 4.7.4 @@ -513,6 +515,17 @@ packages: defer-to-connect: 2.0.1 dev: false + /@tailwindcss/typography/0.5.4_tailwindcss@3.1.8: + resolution: {integrity: sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + dependencies: + lodash.castarray: 4.4.0 + lodash.isplainobject: 4.0.6 + lodash.merge: 4.6.2 + tailwindcss: 3.1.8_postcss@8.4.16 + dev: false + /@tsconfig/node10/1.0.8: resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==} dev: false @@ -2235,7 +2248,7 @@ packages: css-selector-tokenizer: 0.8.0 postcss: 8.4.16 postcss-js: 4.0.0_postcss@8.4.16 - tailwindcss: 3.1.8 + tailwindcss: 3.1.8_postcss@8.4.16 transitivePeerDependencies: - ts-node dev: false @@ -4254,6 +4267,10 @@ packages: lodash._basetostring: 4.12.0 dev: false + /lodash.castarray/4.4.0: + resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==} + dev: false + /lodash.includes/4.3.0: resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==} dev: false @@ -4280,7 +4297,6 @@ packages: /lodash.merge/4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} - dev: true /lodash.omit/4.5.0: resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==} @@ -5863,13 +5879,15 @@ packages: peerDependencies: tailwindcss: '>= 2.x.x' dependencies: - tailwindcss: 3.1.8 + tailwindcss: 3.1.8_postcss@8.4.16 dev: true - /tailwindcss/3.1.8: + /tailwindcss/3.1.8_postcss@8.4.16: resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==} engines: {node: '>=12.13.0'} hasBin: true + peerDependencies: + postcss: ^8.0.9 dependencies: arg: 5.0.2 chokidar: 3.5.3