feat: new dashboard
This commit is contained in:
Andras Bacsai
@@ -20,91 +20,284 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { get } from '$lib/api';
|
||||
import { get, post } from '$lib/api';
|
||||
import Usage from '$lib/components/Usage.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { addToast } from '$lib/store';
|
||||
|
||||
export let applicationsCount: number = 0;
|
||||
export let sourcesCount: number = 0;
|
||||
export let destinationsCount: number = 0;
|
||||
export let teamsCount: number = 0;
|
||||
export let databasesCount: number = 0;
|
||||
export let servicesCount: number = 0;
|
||||
import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
|
||||
import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
|
||||
import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
|
||||
|
||||
let loading = {
|
||||
cleanup: false
|
||||
};
|
||||
|
||||
export let applications: any;
|
||||
export let databases: any;
|
||||
export let services: any;
|
||||
async function getStatus(resources: any) {
|
||||
try {
|
||||
const { id, buildPack, dualCerts } = resources;
|
||||
let isRunning = false;
|
||||
if (buildPack) {
|
||||
const response = await get(`/applications/${id}/status`);
|
||||
isRunning = response.isRunning;
|
||||
} else if (typeof dualCerts !== 'undefined') {
|
||||
const response = await get(`/services/${id}/status`);
|
||||
isRunning = response.isRunning;
|
||||
} else {
|
||||
const response = await get(`/databases/${id}/status`);
|
||||
isRunning = response.isRunning;
|
||||
}
|
||||
if (isRunning) {
|
||||
return 'Running';
|
||||
} else {
|
||||
return 'Stopped';
|
||||
}
|
||||
} catch (error) {
|
||||
return 'Error';
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div>
|
||||
<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
|
||||
>Cleanup Storage</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 pb-12 tracking-tight sm:pb-16">
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<Usage />
|
||||
<dl class="mt-5 grid grid-cols-1 gap-5 px-2 sm:grid-cols-3">
|
||||
<a
|
||||
href="/applications"
|
||||
sveltekit:prefetch
|
||||
class="overflow-hidden rounded px-4 py-5 text-center text-green-500 no-underline transition-all duration-100 hover:bg-green-500 hover:text-white sm:p-6 sm:text-left"
|
||||
>
|
||||
<dt class="truncate text-sm font-medium text-white">{$t('index.applications')}</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold ">
|
||||
{applicationsCount}
|
||||
</dd>
|
||||
</a>
|
||||
<a
|
||||
href="/destinations"
|
||||
sveltekit:prefetch
|
||||
class="overflow-hidden rounded px-4 py-5 text-center text-sky-500 no-underline transition-all duration-100 hover:bg-sky-500 hover:text-white sm:p-6 sm:text-left"
|
||||
>
|
||||
<dt class="truncate text-sm font-medium text-white">{$t('index.destinations')}</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold ">
|
||||
{destinationsCount}
|
||||
</dd>
|
||||
</a>
|
||||
<div class="mx-auto px-10">
|
||||
<div class="flex flex-col justify-center xl:flex-row">
|
||||
<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
|
||||
</div></td
|
||||
>
|
||||
<td>
|
||||
{#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}
|
||||
<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}
|
||||
|
||||
<a
|
||||
href="/sources"
|
||||
sveltekit:prefetch
|
||||
class="overflow-hidden rounded px-4 py-5 text-center text-orange-500 no-underline transition-all duration-100 hover:bg-orange-500 hover:text-white sm:p-6 sm:text-left"
|
||||
>
|
||||
<dt class="truncate text-sm font-medium text-white">{$t('index.git_sources')}</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold">
|
||||
{sourcesCount}
|
||||
</dd>
|
||||
</a>
|
||||
</dl>
|
||||
<dl class="mt-5 grid grid-cols-1 gap-5 px-2 sm:grid-cols-3">
|
||||
<a
|
||||
href="/databases"
|
||||
sveltekit:prefetch
|
||||
class="overflow-hidden rounded px-4 py-5 text-center text-purple-500 no-underline transition-all duration-100 hover:bg-purple-500 hover:text-white sm:p-6 sm:text-left"
|
||||
>
|
||||
<dt class="truncate text-sm font-medium text-white">{$t('index.databases')}</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold ">
|
||||
{databasesCount}
|
||||
</dd>
|
||||
</a>
|
||||
{#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>
|
||||
|
||||
<a
|
||||
href="/services"
|
||||
sveltekit:prefetch
|
||||
class="overflow-hidden rounded px-4 py-5 text-center text-pink-500 no-underline transition-all duration-100 hover:bg-pink-500 hover:text-white sm:p-6 sm:text-left"
|
||||
>
|
||||
<dt class="truncate text-sm font-medium text-white">{$t('index.services')}</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold ">
|
||||
{servicesCount}
|
||||
</dd>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/iam"
|
||||
sveltekit:prefetch
|
||||
class="overflow-hidden rounded px-4 py-5 text-center text-cyan-500 no-underline transition-all duration-100 hover:bg-cyan-500 hover:text-white sm:p-6 sm:text-left"
|
||||
>
|
||||
<dt class="truncate text-sm font-medium text-white">{$t('index.teams')}</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold ">
|
||||
{teamsCount}
|
||||
</dd>
|
||||
</a>
|
||||
</dl>
|
||||
<td>
|
||||
{#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>
|
||||
<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>
|
||||
<Usage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user