feat: new dashboard

apps/ui/src/routes/databases/[id]/configuration/type.svelte

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

apps/ui/src/routes/databases/[id]/index.svelte

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

apps/ui/src/routes/databases/index.svelte

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