Merge pull request #563 from kaname-png/rework-home
feat(ui): rework home UI and with responsive design
This commit is contained in:
Andras Bacsai
@@ -38,6 +38,7 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@sveltejs/adapter-static": "1.0.0-next.39",
|
"@sveltejs/adapter-static": "1.0.0-next.39",
|
||||||
|
"@tailwindcss/typography": "^0.5.4",
|
||||||
"cuid": "2.1.8",
|
"cuid": "2.1.8",
|
||||||
"daisyui": "2.24.0",
|
"daisyui": "2.24.0",
|
||||||
"js-cookie": "3.0.1",
|
"js-cookie": "3.0.1",
|
||||||
|
|||||||
@@ -50,61 +50,70 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="pb-4">
|
<div class="w-full">
|
||||||
<div class="title">Hardware Details</div>
|
<h1 class="title text-4xl">Hardware details</h1>
|
||||||
<div class="text-center p-8 ">
|
<div class="divider" />
|
||||||
<div>
|
<div class="grid grid-flow-col gap-4 grid-rows-3 lg:grid-rows-1">
|
||||||
<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 Memory</div>
|
<div class="stat-title">Total Memory</div>
|
||||||
<div class="stat-value">
|
<div class="stat-value">
|
||||||
{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
|
{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat w-64">
|
|
||||||
|
<div class="stat">
|
||||||
<div class="stat-title">Used Memory</div>
|
<div class="stat-title">Used Memory</div>
|
||||||
<div class="stat-value">
|
<div class="stat-value">
|
||||||
{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
|
{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat w-64">
|
|
||||||
|
<div class="stat">
|
||||||
<div class="stat-title">Free Memory</div>
|
<div class="stat-title">Free Memory</div>
|
||||||
<div class="stat-value">
|
<div class="stat-value">
|
||||||
{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
|
{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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-title">Total CPUs</div>
|
||||||
<div class="stat-value">
|
<div class="stat-value">
|
||||||
{usage?.cpu.count}
|
{usage?.cpu.count}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat w-64">
|
|
||||||
|
<div class="stat">
|
||||||
<div class="stat-title">CPU Usage</div>
|
<div class="stat-title">CPU Usage</div>
|
||||||
<div class="stat-value">
|
<div class="stat-value">
|
||||||
{usage?.cpu.usage}<span class="text-sm">%</span>
|
{usage?.cpu.usage}<span class="text-sm">%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat w-64">
|
|
||||||
|
<div class="stat">
|
||||||
<div class="stat-title">Load Average (5,10,30mins)</div>
|
<div class="stat-title">Load Average (5,10,30mins)</div>
|
||||||
<div class="stat-value">{usage?.cpu.load}</div>
|
<div class="stat-value">{usage?.cpu.load}</div>
|
||||||
</div>
|
</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-title">Total Disk</div>
|
||||||
<div class="stat-value">
|
<div class="stat-value">
|
||||||
{usage?.disk.totalGb}<span class="text-sm">GB</span>
|
{usage?.disk.totalGb}<span class="text-sm">GB</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat w-64">
|
|
||||||
|
<div class="stat">
|
||||||
<div class="stat-title">Used Disk</div>
|
<div class="stat-title">Used Disk</div>
|
||||||
<div class="stat-value">
|
<div class="stat-value">
|
||||||
{usage?.disk.usedGb}<span class="text-sm">GB</span>
|
{usage?.disk.usedGb}<span class="text-sm">GB</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat w-64">
|
|
||||||
|
<div class="stat">
|
||||||
<div class="stat-title">Free Disk</div>
|
<div class="stat-title">Free Disk</div>
|
||||||
<div class="stat-value">{usage?.disk.freePercentage}<span class="text-sm">%</span></div>
|
<div class="stat-value">{usage?.disk.freePercentage}<span class="text-sm">%</span></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -99,256 +99,240 @@
|
|||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-10 pb-12 sm:pb-16">
|
<div class="container lg:mx-auto lg:p-0 p-5">
|
||||||
<div class="mx-auto px-10">
|
{#if $appSession.teamId === '0'}
|
||||||
<div class="flex flex-col justify-center xl:flex-row">
|
<Usage />
|
||||||
{#if applications.length > 0}
|
{/if}
|
||||||
<div>
|
{#if applications.length > 0}
|
||||||
<div class="title">Resources</div>
|
<h1 class="title text-4xl mt-10">Resources</h1>
|
||||||
<div class="flex items-start justify-center p-8">
|
<div class="divider" />
|
||||||
<table class="rounded-none text-base">
|
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
|
||||||
<tbody>
|
{#each applications as application}
|
||||||
{#each applications as application}
|
<div class="w-full rounded p-5 bg-neutral indicator mb-5">
|
||||||
<tr>
|
{#await getStatus(application)}
|
||||||
<td class="space-x-2 items-center tracking-tight font-bold">
|
<span class="indicator-item badge bg-yellow-500" />
|
||||||
{#await getStatus(application)}
|
{:then status}
|
||||||
<div class="inline-flex w-2 h-2 bg-yellow-500 rounded-full" />
|
{#if status === 'Running'}1
|
||||||
{:then status}
|
<span class="indicator-item badge bg-success" />
|
||||||
{#if status === 'Running'}
|
{:else}
|
||||||
<div class="inline-flex w-2 h-2 bg-success rounded-full" />
|
<span class="indicator-item badge bg-error" />
|
||||||
{:else}
|
{/if}
|
||||||
<div class="inline-flex w-2 h-2 bg-error rounded-full" />
|
{/await}
|
||||||
{/if}
|
<div class="w-full flex flex-row">
|
||||||
{/await}
|
<ApplicationsIcons {application} isAbsolute={false} />
|
||||||
<div class="inline-flex">{application.name}</div>
|
<div class="w-full flex flex-col ml-5">
|
||||||
</td>
|
<span>
|
||||||
<td class="px-10 inline-flex">
|
Application
|
||||||
<ApplicationsIcons {application} isAbsolute={false} />
|
{#if application.settings.isBot}
|
||||||
</td>
|
| BOT
|
||||||
<td class="px-10">
|
{/if}
|
||||||
<div
|
</span>
|
||||||
class="badge badge-outline text-xs border-applications rounded text-white"
|
<h1 class="font-bold text-lg">{application.name}</h1>
|
||||||
>
|
<div class="divider" />
|
||||||
Application
|
<div class="btn-group justify-end">
|
||||||
{#if application.settings.isBot}
|
{#if application.fqdn}
|
||||||
| BOT
|
<a href={application.fqdn} target="_blank" class="btn btn-sm">
|
||||||
{/if}
|
<svg
|
||||||
</div></td
|
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">
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||||
{#if application.fqdn}
|
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
|
||||||
<a
|
<line x1="10" y1="14" x2="20" y2="4" />
|
||||||
href={application.fqdn}
|
<polyline points="15 4 20 4 20 9" />
|
||||||
target="_blank"
|
</svg>
|
||||||
class="icons bg-transparent text-sm inline-flex"
|
Website
|
||||||
><svg
|
</a>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
{/if}
|
||||||
class="h-6 w-6"
|
{#if application.settings.isBot && application.exposePort}
|
||||||
viewBox="0 0 24 24"
|
<a
|
||||||
stroke-width="1.5"
|
href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`}
|
||||||
stroke="currentColor"
|
target="_blank"
|
||||||
fill="none"
|
class="btn btn-sm"
|
||||||
stroke-linecap="round"
|
>
|
||||||
stroke-linejoin="round"
|
<svg
|
||||||
>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
class="h-6 w-6 mr-2"
|
||||||
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
|
viewBox="0 0 24 24"
|
||||||
<line x1="10" y1="14" x2="20" y2="4" />
|
stroke-width="1.5"
|
||||||
<polyline points="15 4 20 4 20 9" />
|
stroke="currentColor"
|
||||||
</svg></a
|
fill="none"
|
||||||
>
|
stroke-linecap="round"
|
||||||
{/if}
|
stroke-linejoin="round"
|
||||||
{#if application.settings.isBot && application.exposePort}
|
>
|
||||||
<a
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||||
href={`http://${dev ? 'localhost' : settings.ipv4}:${
|
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
|
||||||
application.exposePort
|
<line x1="10" y1="14" x2="20" y2="4" />
|
||||||
}`}
|
<polyline points="15 4 20 4 20 9" />
|
||||||
target="_blank"
|
</svg>
|
||||||
class="icons bg-transparent text-sm inline-flex"
|
Server
|
||||||
><svg
|
</a>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
{/if}
|
||||||
class="h-6 w-6"
|
<a class="btn btn-sm btn-active" href={`/applications/${application.id}`}>
|
||||||
viewBox="0 0 24 24"
|
<svg
|
||||||
stroke-width="1.5"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
stroke="currentColor"
|
class="h-6 w-6 mr-2"
|
||||||
fill="none"
|
viewBox="0 0 24 24"
|
||||||
stroke-linecap="round"
|
stroke-width="1.5"
|
||||||
stroke-linejoin="round"
|
stroke="currentColor"
|
||||||
>
|
fill="none"
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
stroke-linecap="round"
|
||||||
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
|
stroke-linejoin="round"
|
||||||
<line x1="10" y1="14" x2="20" y2="4" />
|
>
|
||||||
<polyline points="15 4 20 4 20 9" />
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||||
</svg></a
|
<rect x="4" y="8" width="4" height="4" />
|
||||||
>
|
<line x1="6" y1="4" x2="6" y2="8" />
|
||||||
{/if}
|
<line x1="6" y1="12" x2="6" y2="20" />
|
||||||
<a
|
<rect x="10" y="14" width="4" height="4" />
|
||||||
href={`/applications/${application.id}`}
|
<line x1="12" y1="4" x2="12" y2="14" />
|
||||||
class="icons bg-transparent text-sm inline-flex"
|
<line x1="12" y1="18" x2="12" y2="20" />
|
||||||
>
|
<rect x="16" y="5" width="4" height="4" />
|
||||||
<svg
|
<line x1="18" y1="4" x2="18" y2="5" />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<line x1="18" y1="9" x2="18" y2="20" />
|
||||||
class="h-6 w-6"
|
</svg>
|
||||||
viewBox="0 0 24 24"
|
Manage
|
||||||
stroke-width="1.5"
|
</a>
|
||||||
stroke="currentColor"
|
</div>
|
||||||
fill="none"
|
</div>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else if $appSession.teamId !== '0'}
|
{/each}
|
||||||
<div class="text-center text-xl font-bold">Nothing is configured yet.</div>
|
|
||||||
{/if}
|
|
||||||
{#if $appSession.teamId === '0'}
|
|
||||||
<Usage />
|
|
||||||
{/if}
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|||||||
@@ -62,5 +62,5 @@ module.exports = {
|
|||||||
scrollbar: ['dark'],
|
scrollbar: ['dark'],
|
||||||
extend: {}
|
extend: {}
|
||||||
},
|
},
|
||||||
plugins: [require('tailwindcss-scrollbar'), require('daisyui')]
|
plugins: [require('tailwindcss-scrollbar'), require('daisyui'), require("@tailwindcss/typography")]
|
||||||
};
|
};
|
||||||
|
|||||||
94
pnpm-lock.yaml
generated
94
pnpm-lock.yaml
generated
@@ -122,6 +122,7 @@ importers:
|
|||||||
'@playwright/test': 1.25.1
|
'@playwright/test': 1.25.1
|
||||||
'@sveltejs/adapter-static': 1.0.0-next.39
|
'@sveltejs/adapter-static': 1.0.0-next.39
|
||||||
'@sveltejs/kit': 1.0.0-next.405
|
'@sveltejs/kit': 1.0.0-next.405
|
||||||
|
'@tailwindcss/typography': ^0.5.4
|
||||||
'@types/js-cookie': 3.0.2
|
'@types/js-cookie': 3.0.2
|
||||||
'@typescript-eslint/eslint-plugin': 5.35.1
|
'@typescript-eslint/eslint-plugin': 5.35.1
|
||||||
'@typescript-eslint/parser': 5.35.1
|
'@typescript-eslint/parser': 5.35.1
|
||||||
@@ -148,6 +149,7 @@ importers:
|
|||||||
vite: 3.0.5
|
vite: 3.0.5
|
||||||
dependencies:
|
dependencies:
|
||||||
'@sveltejs/adapter-static': 1.0.0-next.39
|
'@sveltejs/adapter-static': 1.0.0-next.39
|
||||||
|
'@tailwindcss/typography': 0.5.4_tailwindcss@3.1.8
|
||||||
cuid: 2.1.8
|
cuid: 2.1.8
|
||||||
daisyui: 2.24.0_25hquoklqeoqwmt7fwvvcyxm5e
|
daisyui: 2.24.0_25hquoklqeoqwmt7fwvvcyxm5e
|
||||||
js-cookie: 3.0.1
|
js-cookie: 3.0.1
|
||||||
@@ -170,7 +172,7 @@ importers:
|
|||||||
svelte: 3.49.0
|
svelte: 3.49.0
|
||||||
svelte-check: 2.8.1_vylzxgme5yisu3bsyvcau4hjtq
|
svelte-check: 2.8.1_vylzxgme5yisu3bsyvcau4hjtq
|
||||||
svelte-preprocess: 4.10.7_fje22ktja5v2dh6nbkissncqme
|
svelte-preprocess: 4.10.7_fje22ktja5v2dh6nbkissncqme
|
||||||
tailwindcss: 3.1.8
|
tailwindcss: 3.1.8_postcss@8.4.16_postcss@8.4.16
|
||||||
tailwindcss-scrollbar: 0.1.0_tailwindcss@3.1.8
|
tailwindcss-scrollbar: 0.1.0_tailwindcss@3.1.8
|
||||||
tslib: 2.4.0
|
tslib: 2.4.0
|
||||||
typescript: 4.7.4
|
typescript: 4.7.4
|
||||||
@@ -418,8 +420,8 @@ packages:
|
|||||||
engines: {node: '>=14'}
|
engines: {node: '>=14'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/node': 18.7.13
|
'@types/node': 18.6.5
|
||||||
playwright-core: 1.25.1
|
playwright-core: 1.24.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@prisma/client/3.15.2_prisma@3.15.2:
|
/@prisma/client/3.15.2_prisma@3.15.2:
|
||||||
@@ -525,6 +527,17 @@ packages:
|
|||||||
defer-to-connect: 2.0.1
|
defer-to-connect: 2.0.1
|
||||||
dev: false
|
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:
|
/@tsconfig/node10/1.0.8:
|
||||||
resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==}
|
resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==}
|
||||||
dev: false
|
dev: false
|
||||||
@@ -580,8 +593,16 @@ packages:
|
|||||||
resolution: {integrity: sha512-XwVteWQx/XkfRPyaGkw8dEbrCAkoRZ73pI3XznUYIpzbCfpQB3UnDlR5TnmdhetlT889tUJGF8QWo9xrgTpsiA==}
|
resolution: {integrity: sha512-XwVteWQx/XkfRPyaGkw8dEbrCAkoRZ73pI3XznUYIpzbCfpQB3UnDlR5TnmdhetlT889tUJGF8QWo9xrgTpsiA==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@types/node/18.7.13:
|
/@types/node/18.0.3:
|
||||||
resolution: {integrity: sha512-46yIhxSe5xEaJZXWdIBP7GU4HDTG8/eo0qd9atdiL+lFpA03y8KS+lkTN834TWJj5767GbWv4n/P6efyTFt1Dw==}
|
resolution: {integrity: sha512-HzNRZtp4eepNitP+BD6k2L6DROIDG4Q0fm4x+dwfsr6LGmROENnok75VGw40628xf+iR24WeMFcHuuBDUAzzsQ==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/@types/node/18.6.5:
|
||||||
|
resolution: {integrity: sha512-Xjt5ZGUa5WusGZJ4WJPbOT8QOqp6nDynVFRKcUt32bOgvXEoc6o085WNkYTMO7ifAj2isEfQQ2cseE+wT6jsRw==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/@types/node/18.7.11:
|
||||||
|
resolution: {integrity: sha512-KZhFpSLlmK/sdocfSAjqPETTMd0ug6HIMIAwkwUpU79olnZdQtMxpQP+G1wDzCH7na+FltSIhbaZuKdwZ8RDrw==}
|
||||||
|
|
||||||
/@types/normalize-package-data/2.4.1:
|
/@types/normalize-package-data/2.4.1:
|
||||||
resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
|
resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
|
||||||
@@ -680,19 +701,14 @@ packages:
|
|||||||
/@typescript-eslint/types/5.35.1:
|
/@typescript-eslint/types/5.35.1:
|
||||||
resolution: {integrity: sha512-FDaujtsH07VHzG0gQ6NDkVVhi1+rhq0qEvzHdJAQjysN+LHDCKDKCBRlZFFE0ec0jKxiv0hN63SNfExy0KrbQQ==}
|
resolution: {integrity: sha512-FDaujtsH07VHzG0gQ6NDkVVhi1+rhq0qEvzHdJAQjysN+LHDCKDKCBRlZFFE0ec0jKxiv0hN63SNfExy0KrbQQ==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
dev: true
|
|
||||||
|
|
||||||
/@typescript-eslint/typescript-estree/5.35.1_typescript@4.7.4:
|
|
||||||
resolution: {integrity: sha512-JUqE1+VRTGyoXlDWWjm6MdfpBYVq+hixytrv1oyjYIBEOZhBCwtpp5ZSvBt4wIA1MKWlnaC2UXl2XmYGC3BoQA==}
|
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
typescript: '*'
|
typescript: '*'
|
||||||
peerDependenciesMeta:
|
peerDependenciesMeta:
|
||||||
typescript:
|
typescript:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@typescript-eslint/types': 5.35.1
|
'@typescript-eslint/types': 5.33.0
|
||||||
'@typescript-eslint/visitor-keys': 5.35.1
|
'@typescript-eslint/visitor-keys': 5.33.0
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
globby: 11.1.0
|
globby: 11.1.0
|
||||||
is-glob: 4.0.3
|
is-glob: 4.0.3
|
||||||
@@ -703,16 +719,55 @@ packages:
|
|||||||
- supports-color
|
- supports-color
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@typescript-eslint/utils/5.35.1_4rv7y5c6xz3vfxwhbrcxxi73bq:
|
/@typescript-eslint/typescript-estree/5.34.0_typescript@4.7.4:
|
||||||
resolution: {integrity: sha512-v6F8JNXgeBWI4pzZn36hT2HXXzoBBBJuOYvoQiaQaEEjdi5STzux3Yj8v7ODIpx36i/5s8TdzuQ54TPc5AITQQ==}
|
resolution: {integrity: sha512-mXHAqapJJDVzxauEkfJI96j3D10sd567LlqroyCeJaHnu42sDbjxotGb3XFtGPYKPD9IyLjhsoULML1oI3M86A==}
|
||||||
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
|
peerDependencies:
|
||||||
|
typescript: '*'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
typescript:
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@typescript-eslint/types': 5.34.0
|
||||||
|
'@typescript-eslint/visitor-keys': 5.34.0
|
||||||
|
debug: 4.3.4
|
||||||
|
globby: 11.1.0
|
||||||
|
is-glob: 4.0.3
|
||||||
|
semver: 7.3.7
|
||||||
|
tsutils: 3.21.0_typescript@4.7.4
|
||||||
|
typescript: 4.7.4
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- supports-color
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/@typescript-eslint/utils/5.33.0_qugx7qdu5zevzvxaiqyxfiwquq:
|
||||||
|
resolution: {integrity: sha512-JxOAnXt9oZjXLIiXb5ZIcZXiwVHCkqZgof0O8KPgz7C7y0HS42gi75PdPlqh1Tf109M0fyUw45Ao6JLo7S5AHw==}
|
||||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
|
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
|
||||||
dependencies:
|
dependencies:
|
||||||
'@types/json-schema': 7.0.11
|
'@types/json-schema': 7.0.11
|
||||||
'@typescript-eslint/scope-manager': 5.35.1
|
'@typescript-eslint/scope-manager': 5.33.0
|
||||||
'@typescript-eslint/types': 5.35.1
|
'@typescript-eslint/types': 5.33.0
|
||||||
'@typescript-eslint/typescript-estree': 5.35.1_typescript@4.7.4
|
'@typescript-eslint/typescript-estree': 5.33.0_typescript@4.7.4
|
||||||
|
eslint: 8.21.0
|
||||||
|
eslint-scope: 5.1.1
|
||||||
|
eslint-utils: 3.0.0_eslint@8.21.0
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- supports-color
|
||||||
|
- typescript
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/@typescript-eslint/utils/5.34.0_4rv7y5c6xz3vfxwhbrcxxi73bq:
|
||||||
|
resolution: {integrity: sha512-kWRYybU4Rn++7lm9yu8pbuydRyQsHRoBDIo11k7eqBWTldN4xUdVUMCsHBiE7aoEkFzrUEaZy3iH477vr4xHAQ==}
|
||||||
|
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||||
|
peerDependencies:
|
||||||
|
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
|
||||||
|
dependencies:
|
||||||
|
'@types/json-schema': 7.0.11
|
||||||
|
'@typescript-eslint/scope-manager': 5.34.0
|
||||||
|
'@typescript-eslint/types': 5.34.0
|
||||||
|
'@typescript-eslint/typescript-estree': 5.34.0_typescript@4.7.4
|
||||||
eslint: 8.22.0
|
eslint: 8.22.0
|
||||||
eslint-scope: 5.1.1
|
eslint-scope: 5.1.1
|
||||||
eslint-utils: 3.0.0_eslint@8.22.0
|
eslint-utils: 3.0.0_eslint@8.22.0
|
||||||
@@ -4066,6 +4121,10 @@ packages:
|
|||||||
lodash._basetostring: 4.12.0
|
lodash._basetostring: 4.12.0
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/lodash.castarray/4.4.0:
|
||||||
|
resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/lodash.includes/4.3.0:
|
/lodash.includes/4.3.0:
|
||||||
resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
|
resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
|
||||||
dev: false
|
dev: false
|
||||||
@@ -4092,7 +4151,6 @@ packages:
|
|||||||
|
|
||||||
/lodash.merge/4.6.2:
|
/lodash.merge/4.6.2:
|
||||||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||||
dev: true
|
|
||||||
|
|
||||||
/lodash.omit/4.5.0:
|
/lodash.omit/4.5.0:
|
||||||
resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==}
|
resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==}
|
||||||
|
|||||||
Reference in New Issue
Block a user