dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

ui: responsive!

Browse Source
This commit is contained in:
Andras Bacsai
2022-09-19 12:05:47 +02:00
parent 051629fad3
commit 6fc99524f0
68 changed files with 1270 additions and 1544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/ui/src/routes/databases/[id]/_Databases/_CouchDb.svelte
View File

@@ -7,11 +7,9 @@
<div class="flex space-x-1 py-5 font-bold">
<h1 class="title">CouchDB</h1>
</div>
<div class="space-y-2 lg:px-10">
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100"
>{$t('database.default_database')}</label
>
<label for="defaultDatabase">{$t('database.default_database')}</label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
@@ -23,7 +21,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
<label for="dbUser">{$t('forms.user')}</label>
<CopyPasswordField
readonly
disabled
@@ -34,9 +32,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100"
>{$t('forms.password')}</label
>
<label for="dbUserPassword">{$t('forms.password')}</label>
<CopyPasswordField
readonly
disabled
@@ -48,7 +44,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
<label for="rootUser">{$t('forms.root_user')}</label>
<CopyPasswordField
readonly
disabled
@@ -59,9 +55,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword" class="text-base font-bold text-stone-100"
>{$t('forms.roots_password')}</label
>
<label for="rootUserPassword">{$t('forms.roots_password')}</label>
<CopyPasswordField
readonly
disabled

34
apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
View File

@@ -107,22 +107,22 @@
}
</script>
<div class="mx-auto max-w-4xl p-4">
<div class="mx-auto max-w-6xl p-4">
<form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex flex-col lg:flex-row justify-between lg:space-x-1 space-y-3 pb-5 lg:items-center items-start">
<div class="flex space-x-1 pb-5 items-center">
<h1 class="title">{$t('general')}</h1>
{#if $appSession.isAdmin}
<button
type="submit"
class="btn btn-sm w-full lg:w-auto"
class="btn btn-sm"
class:loading
class:bg-databases={!loading}
disabled={loading}>{$t('forms.save')}</button
>
{/if}
</div>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
<label for="name">{$t('forms.name')}</label>
<input
class="w-full"
readonly={!$appSession.isAdmin}
@@ -131,9 +131,7 @@
bind:value={database.name}
required
/>
<label for="destination" class="text-base font-bold text-stone-100"
>{$t('application.destination')}</label
>
<label for="destination">{$t('application.destination')}</label>
{#if database.destinationDockerId}
<div class="no-underline">
<input
@@ -145,7 +143,7 @@
/>
</div>
{/if}
<label for="version" class="text-base font-bold text-stone-100">Version / Tag</label>
<label for="version">Version / Tag</label>
<a
href={$appSession.isAdmin && !$status.database.isRunning
? `/databases/${id}/configuration/version?from=/databases/${id}`
@@ -160,7 +158,7 @@
class:cursor-pointer={!$status.database.isRunning}
/></a
>
<label for="host" class="text-base font-bold text-stone-100">{$t('forms.host')}</label>
<label for="host">{$t('forms.host')}</label>
<CopyPasswordField
placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField={false}
@@ -170,14 +168,18 @@
name="host"
value={database.id}
/>
<label for="publicPort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
<label for="publicPort">{$t('forms.port')}</label>
<CopyPasswordField
placeholder={$t('database.generated_automatically_after_set_to_public')}
id="publicPort"
readonly
disabled
name="publicPort"
value={publicLoading ? 'Loading...' : $status.database.isPublic ? database.publicPort : privatePort}
value={publicLoading
? 'Loading...'
: $status.database.isPublic
? database.publicPort
: privatePort}
/>
</div>
{#if database.type === 'mysql'}
@@ -195,9 +197,9 @@
{:else if database.type === 'edgedb'}
<EdgeDB {database} />
{/if}
<div class="flex flex-col space-y-3 mt-5">
<div class="flex flex-col space-y-2 mt-5">
<div>
<label for="url" class="text-base font-bold text-stone-100"
<label class="px-2" for="url"
>{$t('database.connection_string')}
{#if !$status.database.isPublic && database.destinationDocker.remoteEngine}
<Explainer
@@ -206,7 +208,7 @@
{/if}</label
>
</div>
<div class="lg:px-10">
<div class="lg:px-10 px-2">
<CopyPasswordField
textarea={true}
placeholder={$t('forms.generated_automatically_after_start')}
@@ -223,7 +225,7 @@
<div class="flex space-x-1 pb-5 font-bold">
<h1 class="title">{$t('application.features')}</h1>
</div>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10">
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
<Setting
id="isPublic"
loading={publicLoading}

10
apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte
View File

@@ -9,11 +9,9 @@
<div class="flex space-x-1 py-5 font-bold">
<div class="title">EdgeDB</div>
</div>
<div class="space-y-2 px-10">
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100"
>{$t('database.default_database')}</label
>
<label for="defaultDatabase">{$t('database.default_database')}</label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
<label for="rootUser">{$t('forms.root_user')}</label>
<CopyPasswordField
readonly
disabled
@@ -36,7 +34,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100"
<label for="rootUser"
>Root Password <Explainer
explanation="Could be changed while the database is running."
/></label

12
apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
View File

@@ -9,9 +9,9 @@
<div class="flex space-x-1 py-5 font-bold">
<h1 class="title">MariaDB</h1>
</div>
<div class="space-y-2 lg:px-10">
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100"
<label for="defaultDatabase"
>{$t('database.default_database')}</label
>
<CopyPasswordField
@@ -25,7 +25,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
<label for="dbUser" >{$t('forms.user')}</label>
<CopyPasswordField
readonly
disabled
@@ -36,7 +36,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100"
<label for="dbUserPassword"
>{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label
>
@@ -51,7 +51,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
<label for="rootUser" >{$t('forms.root_user')}</label>
<CopyPasswordField
readonly
disabled
@@ -62,7 +62,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword" class="text-base font-bold text-stone-100"
<label for="rootUserPassword"
>{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label
>

6
apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
View File

@@ -9,9 +9,9 @@
<div class="flex space-x-1 py-5 font-bold">
<h1 class="title">MongoDB</h1>
</div>
<div class="space-y-2 lg:px-10">
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
<label for="rootUser">{$t('forms.root_user')}</label>
<CopyPasswordField
placeholder={$t('forms.generated_automatically_after_start')}
id="rootUser"
@@ -22,7 +22,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword" class="text-base font-bold text-stone-100"
<label for="rootUserPassword"
>{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label
>

14
apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
View File

@@ -9,11 +9,9 @@
<div class="flex space-x-1 py-5 font-bold">
<h1 class="title">MySQL</h1>
</div>
<div class="space-y-2 lg:px-10">
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100"
>{$t('database.default_database')}</label
>
<label for="defaultDatabase">{$t('database.default_database')}</label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
<label for="dbUser">{$t('forms.user')}</label>
<CopyPasswordField
readonly
disabled
@@ -36,7 +34,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100"
<label for="dbUserPassword"
>{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label
>
@@ -51,7 +49,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
<label for="rootUser">{$t('forms.root_user')}</label>
<CopyPasswordField
readonly
disabled
@@ -62,7 +60,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUserPassword" class="text-base font-bold text-stone-100"
<label for="rootUserPassword"
>{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label
>

12
apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
View File

@@ -9,11 +9,9 @@
<div class="flex space-x-1 py-5 font-bold">
<h1 class="title">PostgreSQL</h1>
</div>
<div class="space-y-2 lg:px-10">
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100"
>{$t('database.default_database')}</label
>
<label for="defaultDatabase">{$t('database.default_database')}</label>
<CopyPasswordField
required
readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100"
<label for="rootUser"
>Postgres User Password <Explainer
explanation="Could be changed while the database is running."
/></label
@@ -41,7 +39,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
<label for="dbUser">{$t('forms.user')}</label>
<CopyPasswordField
readonly
disabled
@@ -52,7 +50,7 @@
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100"
<label for="dbUserPassword"
>{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label
>

4
apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
View File

@@ -9,9 +9,9 @@
<div class="flex space-x-1 py-5 font-bold">
<h1 class="title">Redis</h1>
</div>
<div class="space-y-2 lg:px-10">
<div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100"
<label for="dbUserPassword"
>{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label
>

36
apps/ui/src/routes/databases/[id]/__layout.svelte
View File

@@ -150,25 +150,33 @@
</script>
{#if id !== 'new'}
<nav class="header justify-center lg:justify-between">
<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex">
<div class="flex flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration
<nav class="header lg:flex-row flex-col-reverse">
<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
<div class="flex flex-col items-center justify-center">
<div class="title">
{#if $page.url.pathname === `/databases/${id}`}
Configurations
{:else if $page.url.pathname === `/databases/${id}/logs`}
Database Logs
{:else if $page.url.pathname === `/databases/${id}/configuration/type`}
Select a Database Type
{:else if $page.url.pathname === `/databases/${id}/configuration/version`}
Select a Database Version
{:else if $page.url.pathname === `/databases/${id}/configuration/destination`}
Select a Destination
{/if}
</div>
<span class="text-xs">{database.name}</span>
</div>
<DatabaseLinks {database} />
</div>
<div
class="flex flex-row flex-wrap space-x-4 space-y-3 justify-center lg:justify-start py-2 lg:py-0"
>
<div class="lg:block hidden flex-1" />
<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
{#if database.type && database.destinationDockerId && database.version}
{#if $status.database.isExited}
<a
id="exited"
href={!$status.database.isRunning ? `/databases/${id}/logs` : null}
class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
class="icons bg-transparent text-red-500 tooltip-error"
sveltekit:prefetch
>
<svg
@@ -192,9 +200,7 @@
<Tooltip triggeredBy="#exited">{'Service exited with an error!'}</Tooltip>
{/if}
{#if $status.database.initialLoading}
<button
class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
>
<button class="icons flex animate-spin duration-500 ease-in-out">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
@@ -220,7 +226,7 @@
on:click={stopDatabase}
type="submit"
disabled={!$appSession.isAdmin}
class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500 mt-3"
class="icons bg-transparent text-red-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -346,7 +352,7 @@
>
{/if}
<Tooltip triggeredBy="#delete">{'Delete'}</Tooltip>
<Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
</div>
</nav>
{/if}

5
apps/ui/src/routes/databases/[id]/configuration/destination.svelte
View File

@@ -53,11 +53,6 @@
});
</script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">
{$t('application.configuration.configure_destination')}
</div>
</div>
<div class="flex justify-center">
{#if !destinations || destinations.length === 0}
<div class="flex-col">

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

@@ -47,10 +47,6 @@
}
</script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_type')}</div>
</div>
<div class="flex flex-wrap justify-center">
{#each types as type}
<div class="p-2">

3
apps/ui/src/routes/databases/[id]/configuration/version.svelte
View File

@@ -46,9 +46,6 @@
}
</script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_version')}</div>
</div>
{#if from}
<div class="pb-10 text-center">
Warning: you are about to change the version of this database.<br />This could cause problem

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

@@ -48,33 +48,24 @@
});
</script>
<div class="flex items-center space-x-2 p-5 font-bold lg:hidden">
<div class="flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration
</div>
<span class="text-xs">{database.name}</span>
</div>
<DatabaseLinks {database} />
</div>
{#if $status.database.isRunning}
<div class="mx-auto max-w-6xl p-5">
<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="mx-auto max-w-4xl p-5">
<div class="text-2xl font-bold">Database Usage</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="stat w-64">
<div class="stat-title">Used CPU</div>
<div class="stat-value text-xl">{usage?.CPUPerc}</div>
</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="stat w-64">
<div class="stat-title">Network IO</div>
<div class="stat-value text-xl">{usage?.NetIO}</div>
<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>
{/if}
<Databases bind:database {privatePort} />

8
apps/ui/src/routes/databases/[id]/logs/index.svelte
View File

@@ -91,14 +91,6 @@
}
</script>
<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">
Database Logs
</div>
<span class="text-xs">{database.name}</span>
</div>
</div>
<div class="flex flex-row justify-center space-x-2 px-10 pt-6">
{#if logs.length === 0}
<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>