Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

feat(ui): rework home UI and with responsive design

Browse Source
This commit is contained in:
Kaname 2022-08-26 01:40:46 +00:00
parent 3421de06d5
commit ff8fe68f14
5 changed files with 281 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/ui/package.json
View File

@ -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",

39
apps/ui/src/lib/components/Usage.svelte
View File

@ -50,61 +50,70 @@
});
</script>
<div class="pb-4">
<div class="title">Hardware Details</div>
<div class="text-center p-8 ">
<div>
<div class="stat w-64">
<div class="w-full">
<h1 class="title text-4xl">Hardware details</h1>
<div class="divider" />
<div class="grid grid-flow-col gap-4 grid-rows-3 lg:grid-rows-1">
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5">
<div class="stat">
<div class="stat-title">Total Memory</div>
<div class="stat-value">
{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Used Memory</div>
<div class="stat-value">
{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Free Memory</div>
<div class="stat-value">
{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
</div>
</div>
</div>
<div class="py-10">
<div class="stat w-64">
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5">
<div class="stat">
<div class="stat-title">Total CPUs</div>
<div class="stat-value">
{usage?.cpu.count}
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">CPU Usage</div>
<div class="stat-value">
{usage?.cpu.usage}<span class="text-sm">%</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Load Average (5,10,30mins)</div>
<div class="stat-value">{usage?.cpu.load}</div>
</div>
</div>
<div>
<div class="stat w-64">
<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5">
<div class="stat">
<div class="stat-title">Total Disk</div>
<div class="stat-value">
{usage?.disk.totalGb}<span class="text-sm">GB</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Used Disk</div>
<div class="stat-value">
{usage?.disk.usedGb}<span class="text-sm">GB</span>
</div>
</div>
<div class="stat w-64">
<div class="stat">
<div class="stat-title">Free Disk</div>
<div class="stat-value">{usage?.disk.freePercentage}<span class="text-sm">%</span></div>
</div>

480
apps/ui/src/routes/index.svelte
View File

@ -99,256 +99,240 @@
>
{/if}
</div>
<div class="mt-10 pb-12 sm:pb-16">
<div class="mx-auto px-10">
<div class="flex flex-col justify-center xl:flex-row">
{#if applications.length > 0}
<div>
<div class="title">Resources</div>
<div class="flex items-start justify-center p-8">
<table class="rounded-none text-base">
<tbody>
{#each applications as application}
<tr>
<td class="space-x-2 items-center tracking-tight font-bold">
{#await getStatus(application)}
<div class="inline-flex w-2 h-2 bg-yellow-500 rounded-full" />
{:then status}
{#if status === 'Running'}
<div class="inline-flex w-2 h-2 bg-success rounded-full" />
{:else}
<div class="inline-flex w-2 h-2 bg-error rounded-full" />
{/if}
{/await}
<div class="inline-flex">{application.name}</div>
</td>
<td class="px-10 inline-flex">
<ApplicationsIcons {application} isAbsolute={false} />
</td>
<td class="px-10">
<div
class="badge badge-outline text-xs border-applications rounded text-white"
>
Application
{#if application.settings.isBot}
| BOT
{/if}
</div></td
<div class="container lg:mx-auto lg:p-0 p-5">
{#if $appSession.teamId === '0'}
<Usage />
{/if}
{#if applications.length > 0}
<h1 class="title text-4xl mt-10">Resources</h1>
<div class="divider" />
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
{#each applications as application}
<div class="w-full rounded p-5 bg-neutral indicator mb-5">
{#await getStatus(application)}
<span class="indicator-item badge bg-yellow-500" />
{:then status}
{#if status === 'Running'}1
<span class="indicator-item badge bg-success" />
{:else}
<span class="indicator-item badge bg-error" />
{/if}
{/await}
<div class="w-full flex flex-row">
<ApplicationsIcons {application} isAbsolute={false} />
<div class="w-full flex flex-col ml-5">
<span>
Application
{#if application.settings.isBot}
| BOT
{/if}
</span>
<h1 class="font-bold text-lg">{application.name}</h1>
<div class="divider" />
<div class="btn-group justify-end">
{#if application.fqdn}
<a href={application.fqdn} target="_blank" class="btn btn-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mr-2"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<td class="flex justify-end">
{#if application.fqdn}
<a
href={application.fqdn}
target="_blank"
class="icons bg-transparent text-sm inline-flex"
><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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg></a
>
{/if}
{#if application.settings.isBot && application.exposePort}
<a
href={`http://${dev ? 'localhost' : settings.ipv4}:${
application.exposePort
}`}
target="_blank"
class="icons bg-transparent text-sm inline-flex"
><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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg></a
>
{/if}
<a
href={`/applications/${application.id}`}
class="icons bg-transparent text-sm inline-flex"
>
<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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
</a>
</td>
</tr>
{/each}
{#each services as service}
<tr>
<td class="space-x-2 items-center tracking-tight font-bold">
{#await getStatus(service)}
<div class="inline-flex w-2 h-2 bg-yellow-500 rounded-full" />
{:then status}
{#if status === 'Running'}
<div class="inline-flex w-2 h-2 bg-success rounded-full" />
{:else}
<div class="inline-flex w-2 h-2 bg-error rounded-full" />
{/if}
{/await}
<div class="inline-flex">{service.name}</div>
</td>
<td class="px-10 inline-flex">
<ServiceIcons type={service.type} isAbsolute={false} />
</td>
<td class="px-10"
><div class="badge badge-outline text-xs border-services rounded text-white">
Service
</div>
</td>
<td class="flex justify-end">
{#if service.fqdn}
<a
href={service.fqdn}
target="_blank"
class="icons bg-transparent text-sm inline-flex"
><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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg></a
>
{/if}
<a
href={`/services/${service.id}`}
class="icons bg-transparent text-sm inline-flex"
>
<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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
</a>
</td>
</tr>
{/each}
{#each databases as database}
<tr>
<td class="space-x-2 items-center tracking-tight font-bold">
{#await getStatus(database)}
<div class="inline-flex w-2 h-2 bg-yellow-500 rounded-full" />
{:then status}
{#if status === 'Running'}
<div class="inline-flex w-2 h-2 bg-success rounded-full" />
{:else}
<div class="inline-flex w-2 h-2 bg-error rounded-full" />
{/if}
{/await}
<div class="inline-flex">{database.name}</div>
</td>
<td class="px-10 inline-flex">
<DatabaseIcons type={database.type} />
</td>
<td class="px-10">
<div class="badge badge-outline text-xs border-databases rounded text-white">
Database
</div>
</td>
<td class="flex justify-end">
<a
href={`/databases/${database.id}`}
class="icons bg-transparent text-sm inline-flex ml-11"
>
<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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
</a>
</td>
</tr>
{/each}
</tbody>
</table>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg>
Website
</a>
{/if}
{#if application.settings.isBot && application.exposePort}
<a
href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`}
target="_blank"
class="btn btn-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mr-2"
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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg>
Server
</a>
{/if}
<a class="btn btn-sm btn-active" href={`/applications/${application.id}`}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mr-2"
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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
Manage
</a>
</div>
</div>
</div>
</div>
{:else if $appSession.teamId !== '0'}
<div class="text-center text-xl font-bold">Nothing is configured yet.</div>
{/if}
{#if $appSession.teamId === '0'}
<Usage />
{/if}
{/each}
</div>
</div>
<h1 class="title text-4xl mt-10">Services</h1>
<div class="divider" />
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
{#each services as service}
<div class="w-full rounded p-5 bg-neutral indicator mb-5">
{#await getStatus(service)}
<span class="indicator-item badge bg-yellow-500" />
{:then status}
{#if status === 'Running'}1
<span class="indicator-item badge bg-success" />
{:else}
<span class="indicator-item badge bg-error" />
{/if}
{/await}
<div class="w-full flex flex-row">
<ServiceIcons type={service.type} isAbsolute={false} />
<div class="w-full flex flex-col ml-5">
<span>
Service
</span>
<h1 class="font-bold text-lg">{service.name}</h1>
<div class="divider" />
<div class="btn-group justify-end">
{#if service.fqdn}
<a href={service.fqdn} target="_blank" class="btn btn-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mr-2"
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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg>
Website
</a>
{/if}
<a class="btn btn-sm btn-active" href={`/services/${service.id}`}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mr-2"
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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
Manage
</a>
</div>
</div>
</div>
</div>
{/each}
</div>
<h1 class="title text-4xl mt-10">Databases</h1>
<div class="divider" />
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
{#each databases as database}
<div class="w-full rounded p-5 bg-neutral indicator mb-5">
{#await getStatus(database)}
<span class="indicator-item badge bg-yellow-500" />
{:then status}
{#if status === 'Running'}1
<span class="indicator-item badge bg-success" />
{:else}
<span class="indicator-item badge bg-error" />
{/if}
{/await}
<div class="w-full flex flex-row">
<DatabaseIcons type={database.type} isAbsolute={false} />
<div class="w-full flex flex-col ml-5">
<span>
Service
</span>
<h1 class="font-bold text-lg">{database.name}</h1>
<div class="divider" />
<div class="btn-group justify-end">
<a class="btn btn-sm btn-active" href={`/databases/${database.id}`}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mr-2"
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" />
<rect x="4" y="8" width="4" height="4" />
<line x1="6" y1="4" x2="6" y2="8" />
<line x1="6" y1="12" x2="6" y2="20" />
<rect x="10" y="14" width="4" height="4" />
<line x1="12" y1="4" x2="12" y2="14" />
<line x1="12" y1="18" x2="12" y2="20" />
<rect x="16" y="5" width="4" height="4" />
<line x1="18" y1="4" x2="18" y2="5" />
<line x1="18" y1="9" x2="18" y2="20" />
</svg>
Manage
</a>
</div>
</div>
</div>
</div>
{/each}
</div>
{:else if $appSession.teamId !== '0'}
<div class="text-center text-xl font-bold h-screen w-full flex flex-col justify-center">
<h1 class="text-5xl">Nothing is configured yet.</h1>
</div>
{/if}
</div>

2
apps/ui/tailwind.config.cjs
View File

@ -62,5 +62,5 @@ module.exports = {
scrollbar: ['dark'],
extend: {}
},
plugins: [require('tailwindcss-scrollbar'), require('daisyui')]
plugins: [require('tailwindcss-scrollbar'), require('daisyui'), require("@tailwindcss/typography")]
};

28
pnpm-lock.yaml generated
View File

@ -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