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

fix: UI + refactor

Browse Source
This commit is contained in:
Andras Bacsai
2022-09-01 13:58:44 +02:00
parent 290dbc43cb
commit 44a691ae29
27 changed files with 182 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { addToast, appSession, status } from '$lib/store';
import Explainer from '$lib/components/Explainer.svelte';
import DocLink from '$lib/components/DocLink.svelte';
const { id } = $page.params;
@@ -209,13 +209,13 @@
<div class="grid grid-cols-2 items-center px-10 pb-8">
<div>
<label for="url" class="text-base font-bold text-stone-100"
>{$t('database.connection_string')}</label
>{$t('database.connection_string')}
{#if !isPublic && database.destinationDocker.remoteEngine}
<DocLink
explanation="You can only access the database with this URL if your application is deployed to the same Destination."
/>
{/if}</label
>
{#if !isPublic && database.destinationDocker.remoteEngine}
<Explainer
text="You can only access the database with this URL if your application is deployed to the same Destination."
/>
{/if}
</div>
<CopyPasswordField
textarea={true}

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

@@ -2,8 +2,8 @@
export let database: any;
import { status } from '$lib/store';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import Explainer from '$lib/components/Explainer.svelte';
import { t } from '$lib/translations';
import DocLink from '$lib/components/DocLink.svelte';
</script>
<div class="flex space-x-1 py-5 font-bold">
@@ -37,7 +37,8 @@
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100"
>{$t('forms.password')}</label
>{$t('forms.password')}
<DocLink explanation="Could be changed while the database is running." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
@@ -48,7 +49,6 @@
name="dbUserPassword"
bind:value={database.dbUserPassword}
/>
<Explainer text="Could be changed while the database is running." />
</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>
@@ -63,7 +63,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
>{$t('forms.roots_password')} <DocLink explanation="Could be changed while the database is running." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
@@ -74,6 +74,5 @@
name="rootUserPassword"
bind:value={database.rootUserPassword}
/>
<Explainer text="Could be changed while the database is running." />
</div>
</div>

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

@@ -2,8 +2,8 @@
export let database: any;
import { status } from '$lib/store';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import Explainer from '$lib/components/Explainer.svelte';
import { t } from '$lib/translations';
import DocLink from '$lib/components/DocLink.svelte';
</script>
<div class="flex space-x-1 py-5 font-bold">
@@ -23,7 +23,8 @@
</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
>{$t('forms.roots_password')}
<DocLink explanation="Could be changed while the database is running." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
@@ -34,6 +35,5 @@
name="rootUserPassword"
bind:value={database.rootUserPassword}
/>
<Explainer text="Could be changed while the database is running." />
</div>
</div>

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

@@ -4,6 +4,7 @@
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import Explainer from '$lib/components/Explainer.svelte';
import { t } from '$lib/translations';
import DocLink from '$lib/components/DocLink.svelte';
</script>
<div class="flex space-x-1 py-5 font-bold">
@@ -37,7 +38,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
>{$t('forms.password')} <DocLink explanation="Could be changed while the database is running." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
@@ -48,7 +49,6 @@
name="dbUserPassword"
bind:value={database.dbUserPassword}
/>
<Explainer text="Could be changed while the database is running." />
</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>
@@ -63,7 +63,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
>{$t('forms.roots_password')} <DocLink explanation="Could be changed while the database is running." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
@@ -74,6 +74,5 @@
name="rootUserPassword"
bind:value={database.rootUserPassword}
/>
<Explainer text="Could be changed while the database is running." />
</div>
</div>

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

@@ -2,8 +2,8 @@
export let database: any;
import { status } from '$lib/store';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import Explainer from '$lib/components/Explainer.svelte';
import { t } from '$lib/translations';
import DocLink from '$lib/components/DocLink.svelte';
</script>
<div class="flex space-x-1 py-5 font-bold">
@@ -26,7 +26,9 @@
</div>
<div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100"
>Root (postgres) User Password</label
>Postgres User Password <DocLink
explanation="Could be changed while the database is running."
/></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
@@ -37,7 +39,6 @@
name="rootUserPassword"
bind:value={database.rootUserPassword}
/>
<Explainer text="Could be changed while the database is running." />
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
@@ -52,7 +53,8 @@
</div>
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100"
>{$t('forms.password')}</label
>{$t('forms.password')}
<DocLink explanation="Could be changed while the database is running." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
@@ -63,6 +65,5 @@
name="dbUserPassword"
bind:value={database.dbUserPassword}
/>
<Explainer text="Could be changed while the database is running." />
</div>
</div>

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

@@ -2,8 +2,8 @@
export let database: any;
import { status } from '$lib/store';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import Explainer from '$lib/components/Explainer.svelte';
import { t } from '$lib/translations';
import DocLink from '$lib/components/DocLink.svelte';
</script>
<div class="flex space-x-1 py-5 font-bold">
@@ -12,7 +12,8 @@
<div class="space-y-2 px-10">
<div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100"
>{$t('forms.password')}</label
>{$t('forms.password')}
<DocLink explanation="Could be changed while the database is running." /></label
>
<CopyPasswordField
disabled={!$status.database.isRunning}
@@ -23,6 +24,5 @@
name="dbUserPassword"
bind:value={database.dbUserPassword}
/>
<Explainer text="Could be changed while the database is running." />
</div>
</div>

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

@@ -65,15 +65,16 @@
const { id } = $page.params;
let statusInterval: any = false;
let forceDelete = false;
$disabledButton = !$appSession.isAdmin;
async function deleteDatabase() {
async function deleteDatabase(force: boolean) {
const sure = confirm(`Are you sure you would like to delete '${database.name}'?`);
if (sure) {
$status.database.initialLoading = true;
try {
await del(`/databases/${database.id}`, { id: database.id });
await del(`/databases/${database.id}`, { id: database.id, force });
return await goto('/databases');
} catch (error) {
return errorNotification(error);
@@ -304,14 +305,26 @@
></a
>
<Tooltip triggeredBy="#databaselogs">{'Logs'}</Tooltip>
<button
id="delete"
on:click={deleteDatabase}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"><DeleteIcon /></button
>
{#if forceDelete}
<button
on:click={() => deleteDatabase(true)}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"
>
Force Delete</button
>{:else}
<button
id="delete"
on:click={() => deleteDatabase(false)}
type="submit"
disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"><DeleteIcon /></button
>
{/if}
<Tooltip triggeredBy="#delete">{'Delete'}</Tooltip>
</nav>
{/if}