feat: new dashboard
This commit is contained in:
Andras Bacsai
@@ -139,9 +139,9 @@
|
||||
projectId: application.projectId
|
||||
});
|
||||
return addToast({
|
||||
message: $t('application.settings_saved'),
|
||||
type: 'success'
|
||||
});
|
||||
message: $t('application.settings_saved'),
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
if (name === 'debug') {
|
||||
debug = !debug;
|
||||
@@ -177,7 +177,7 @@
|
||||
forceSave = false;
|
||||
addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
@@ -222,9 +222,9 @@
|
||||
try {
|
||||
await get(`/applications/${id}/check?domain=${domain}`);
|
||||
addToast({
|
||||
message: 'DNS configuration is valid.',
|
||||
type: 'success'
|
||||
});
|
||||
message: 'DNS configuration is valid.',
|
||||
type: 'success'
|
||||
});
|
||||
isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
|
||||
return true;
|
||||
} catch (error) {
|
||||
@@ -289,29 +289,21 @@
|
||||
|
||||
<div class="mx-auto max-w-4xl px-6 py-4">
|
||||
<div class="text-2xl font-bold">Application 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>
|
||||
<div class="mx-auto max-w-4xl px-6">
|
||||
@@ -324,11 +316,10 @@
|
||||
class="btn btn-sm"
|
||||
type="submit"
|
||||
class:bg-applications={!loading}
|
||||
class:loading={loading}
|
||||
class:loading
|
||||
class:bg-orange-600={forceSave}
|
||||
class:hover:bg-orange-400={forceSave}
|
||||
disabled={loading}
|
||||
>{$t('forms.save')}</button
|
||||
disabled={loading}>{$t('forms.save')}</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -26,24 +26,8 @@
|
||||
import { t } from '$lib/translations';
|
||||
import { getDomain } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
|
||||
|
||||
import Rust from '$lib/components/svg/applications/Rust.svelte';
|
||||
import Nodejs from '$lib/components/svg/applications/Nodejs.svelte';
|
||||
import React from '$lib/components/svg/applications/React.svelte';
|
||||
import Svelte from '$lib/components/svg/applications/Svelte.svelte';
|
||||
import Vuejs from '$lib/components/svg/applications/Vuejs.svelte';
|
||||
import PHP from '$lib/components/svg/applications/PHP.svelte';
|
||||
import Python from '$lib/components/svg/applications/Python.svelte';
|
||||
import Static from '$lib/components/svg/applications/Static.svelte';
|
||||
import Nestjs from '$lib/components/svg/applications/Nestjs.svelte';
|
||||
import Nuxtjs from '$lib/components/svg/applications/Nuxtjs.svelte';
|
||||
import Nextjs from '$lib/components/svg/applications/Nextjs.svelte';
|
||||
import Gatsby from '$lib/components/svg/applications/Gatsby.svelte';
|
||||
import Docker from '$lib/components/svg/applications/Docker.svelte';
|
||||
import Astro from '$lib/components/svg/applications/Astro.svelte';
|
||||
import Eleventy from '$lib/components/svg/applications/Eleventy.svelte';
|
||||
import Deno from '$lib/components/svg/applications/Deno.svelte';
|
||||
import Laravel from '$lib/components/svg/applications/Laravel.svelte';
|
||||
ownApplications = applications.filter((application) => {
|
||||
if (application.teams[0].id === $appSession.teamId) {
|
||||
return application;
|
||||
@@ -63,10 +47,7 @@
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl">{$t('index.applications')}</div>
|
||||
{#if $appSession.isAdmin}
|
||||
<button
|
||||
on:click={newApplication}
|
||||
class="btn btn-square btn-sm bg-applications"
|
||||
>
|
||||
<button on:click={newApplication} class="btn btn-square btn-sm bg-applications">
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -96,41 +77,7 @@
|
||||
<a href="/applications/{application.id}" class="p-2 no-underline">
|
||||
<div class="box-selection group relative hover:bg-green-600">
|
||||
{#if application.buildPack}
|
||||
{#if application.buildPack.toLowerCase() === 'rust'}
|
||||
<Rust />
|
||||
{:else if application.buildPack.toLowerCase() === 'node'}
|
||||
<Nodejs />
|
||||
{:else if application.buildPack.toLowerCase() === 'react'}
|
||||
<React />
|
||||
{:else if application.buildPack.toLowerCase() === 'svelte'}
|
||||
<Svelte />
|
||||
{:else if application.buildPack.toLowerCase() === 'vuejs'}
|
||||
<Vuejs />
|
||||
{:else if application.buildPack.toLowerCase() === 'php'}
|
||||
<PHP />
|
||||
{:else if application.buildPack.toLowerCase() === 'python'}
|
||||
<Python />
|
||||
{:else if application.buildPack.toLowerCase() === 'static'}
|
||||
<Static />
|
||||
{:else if application.buildPack.toLowerCase() === 'nestjs'}
|
||||
<Nestjs />
|
||||
{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
|
||||
<Nuxtjs />
|
||||
{:else if application.buildPack.toLowerCase() === 'nextjs'}
|
||||
<Nextjs />
|
||||
{:else if application.buildPack.toLowerCase() === 'gatsby'}
|
||||
<Gatsby />
|
||||
{:else if application.buildPack.toLowerCase() === 'docker'}
|
||||
<Docker />
|
||||
{:else if application.buildPack.toLowerCase() === 'astro'}
|
||||
<Astro />
|
||||
{:else if application.buildPack.toLowerCase() === 'eleventy'}
|
||||
<Eleventy />
|
||||
{:else if application.buildPack.toLowerCase() === 'deno'}
|
||||
<Deno />
|
||||
{:else if application.buildPack.toLowerCase() === 'laravel'}
|
||||
<Laravel />
|
||||
{/if}
|
||||
<ApplicationsIcons {application} />
|
||||
{/if}
|
||||
|
||||
<div class="truncate text-center text-xl font-bold">{application.name}</div>
|
||||
@@ -167,41 +114,7 @@
|
||||
<a href="/applications/{application.id}" class="p-2 no-underline">
|
||||
<div class="box-selection group relative hover:bg-green-600">
|
||||
{#if application.buildPack}
|
||||
{#if application.buildPack.toLowerCase() === 'rust'}
|
||||
<Rust />
|
||||
{:else if application.buildPack.toLowerCase() === 'node'}
|
||||
<Nodejs />
|
||||
{:else if application.buildPack.toLowerCase() === 'react'}
|
||||
<React />
|
||||
{:else if application.buildPack.toLowerCase() === 'svelte'}
|
||||
<Svelte />
|
||||
{:else if application.buildPack.toLowerCase() === 'vuejs'}
|
||||
<Vuejs />
|
||||
{:else if application.buildPack.toLowerCase() === 'php'}
|
||||
<PHP />
|
||||
{:else if application.buildPack.toLowerCase() === 'python'}
|
||||
<Python />
|
||||
{:else if application.buildPack.toLowerCase() === 'static'}
|
||||
<Static />
|
||||
{:else if application.buildPack.toLowerCase() === 'nestjs'}
|
||||
<Nestjs />
|
||||
{:else if application.buildPack.toLowerCase() === 'nuxtjs'}
|
||||
<Nuxtjs />
|
||||
{:else if application.buildPack.toLowerCase() === 'nextjs'}
|
||||
<Nextjs />
|
||||
{:else if application.buildPack.toLowerCase() === 'gatsby'}
|
||||
<Gatsby />
|
||||
{:else if application.buildPack.toLowerCase() === 'docker'}
|
||||
<Docker />
|
||||
{:else if application.buildPack.toLowerCase() === 'astro'}
|
||||
<Astro />
|
||||
{:else if application.buildPack.toLowerCase() === 'eleventy'}
|
||||
<Eleventy />
|
||||
{:else if application.buildPack.toLowerCase() === 'deno'}
|
||||
<Deno />
|
||||
{:else if application.buildPack.toLowerCase() === 'laravel'}
|
||||
<Laravel />
|
||||
{/if}
|
||||
<ApplicationsIcons {application} />
|
||||
{/if}
|
||||
|
||||
<div class="truncate text-center text-xl font-bold">{application.name}</div>
|
||||
|
||||
@@ -31,18 +31,11 @@
|
||||
|
||||
const { id } = $page.params;
|
||||
const from = $page.url.searchParams.get('from');
|
||||
|
||||
import Clickhouse from '$lib/components/svg/databases/Clickhouse.svelte';
|
||||
import CouchDB from '$lib/components/svg/databases/CouchDB.svelte';
|
||||
import MongoDB from '$lib/components/svg/databases/MongoDB.svelte';
|
||||
import MariaDB from '$lib/components/svg/databases/MariaDB.svelte';
|
||||
import MySQL from '$lib/components/svg/databases/MySQL.svelte';
|
||||
import PostgreSQL from '$lib/components/svg/databases/PostgreSQL.svelte';
|
||||
import Redis from '$lib/components/svg/databases/Redis.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { get, post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
|
||||
async function handleSubmit(type: any) {
|
||||
try {
|
||||
await post(`/databases/${id}/configuration/type`, { type });
|
||||
@@ -62,21 +55,8 @@
|
||||
<div class="p-2">
|
||||
<form on:submit|preventDefault={() => handleSubmit(type.name)}>
|
||||
<button type="submit" class="box-selection relative text-xl font-bold hover:bg-purple-700">
|
||||
{#if type.name === 'clickhouse'}
|
||||
<Clickhouse isAbsolute />
|
||||
{:else if type.name === 'couchdb'}
|
||||
<CouchDB isAbsolute />
|
||||
{:else if type.name === 'mongodb'}
|
||||
<MongoDB isAbsolute />
|
||||
{:else if type.name === 'mariadb'}
|
||||
<MariaDB isAbsolute />
|
||||
{:else if type.name === 'mysql'}
|
||||
<MySQL isAbsolute />
|
||||
{:else if type.name === 'postgresql'}
|
||||
<PostgreSQL isAbsolute />
|
||||
{:else if type.name === 'redis'}
|
||||
<Redis isAbsolute />
|
||||
{/if}{type.fancyName}
|
||||
<DatabaseIcons type={type.name} isAbsolute={true} />
|
||||
{type.fancyName}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex items-center space-x-2 p-6 text-2xl font-bold">
|
||||
<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
|
||||
<div class="-mb-5 flex-col">
|
||||
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
|
||||
Configuration
|
||||
@@ -60,29 +60,21 @@
|
||||
|
||||
<div class="mx-auto max-w-4xl px-6 py-4">
|
||||
<div class="text-2xl font-bold">Database 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>
|
||||
<Databases bind:database {privatePort}/>
|
||||
<Databases bind:database {privatePort} />
|
||||
|
||||
@@ -19,17 +19,11 @@
|
||||
|
||||
<script lang="ts">
|
||||
export let databases: any = [];
|
||||
import Clickhouse from '$lib/components/svg/databases/Clickhouse.svelte';
|
||||
import CouchDB from '$lib/components/svg/databases/CouchDB.svelte';
|
||||
import MongoDB from '$lib/components/svg/databases/MongoDB.svelte';
|
||||
import MariaDB from '$lib/components/svg/databases/MariaDB.svelte';
|
||||
import MySQL from '$lib/components/svg/databases/MySQL.svelte';
|
||||
import PostgreSQL from '$lib/components/svg/databases/PostgreSQL.svelte';
|
||||
import Redis from '$lib/components/svg/databases/Redis.svelte';
|
||||
import { get, post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { appSession } from '$lib/store';
|
||||
import { goto } from '$app/navigation';
|
||||
import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
|
||||
|
||||
async function newDatabase() {
|
||||
const { id } = await post('/databases/new', {});
|
||||
@@ -50,24 +44,21 @@
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
|
||||
<button
|
||||
on:click={newDatabase}
|
||||
class="btn btn-square btn-sm bg-databases"
|
||||
<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
|
||||
<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">
|
||||
@@ -82,21 +73,7 @@
|
||||
{#each ownDatabases as database}
|
||||
<a href="/databases/{database.id}" class="p-2 no-underline">
|
||||
<div class="box-selection group relative hover:bg-purple-600">
|
||||
{#if database.type === 'clickhouse'}
|
||||
<Clickhouse isAbsolute />
|
||||
{:else if database.type === 'couchdb'}
|
||||
<CouchDB isAbsolute />
|
||||
{:else if database.type === 'mongodb'}
|
||||
<MongoDB isAbsolute />
|
||||
{:else if database.type === 'mysql'}
|
||||
<MySQL isAbsolute />
|
||||
{:else if database.type === 'mariadb'}
|
||||
<MariaDB isAbsolute />
|
||||
{:else if database.type === 'postgresql'}
|
||||
<PostgreSQL isAbsolute />
|
||||
{:else if database.type === 'redis'}
|
||||
<Redis isAbsolute />
|
||||
{/if}
|
||||
<DatabaseIcons type={database.type} isAbsolute={true} />
|
||||
<div class="truncate text-center text-xl font-bold">
|
||||
{database.name}
|
||||
</div>
|
||||
@@ -121,21 +98,7 @@
|
||||
{#each otherDatabases as database}
|
||||
<a href="/databases/{database.id}" class="p-2 no-underline">
|
||||
<div class="box-selection group relative hover:bg-purple-600">
|
||||
{#if database.type === 'clickhouse'}
|
||||
<Clickhouse isAbsolute />
|
||||
{:else if database.type === 'couchdb'}
|
||||
<CouchDB isAbsolute />
|
||||
{:else if database.type === 'mongodb'}
|
||||
<MongoDB isAbsolute />
|
||||
{:else if database.type === 'mariadb'}
|
||||
<MariaDB isAbsolute />
|
||||
{:else if database.type === 'mysql'}
|
||||
<MySQL isAbsolute />
|
||||
{:else if database.type === 'postgresql'}
|
||||
<PostgreSQL isAbsolute />
|
||||
{:else if database.type === 'redis'}
|
||||
<Redis isAbsolute />
|
||||
{/if}
|
||||
<DatabaseIcons type={database.type} isAbsolute={true} />
|
||||
<div class="truncate text-center text-xl font-bold">
|
||||
{database.name}
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
@@ -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>
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user