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

ui: redesign a lot

Browse Source
This commit is contained in:
Andras Bacsai
2022-08-09 15:28:26 +00:00
parent 839e8179fe
commit 4049af6220
46 changed files with 625 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/ui/src/routes/applications/[id]/_Secret.svelte
View File

@@ -12,8 +12,8 @@
import { del } from '$lib/api';
import { errorNotification } from '$lib/common';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import { addToast } from '$lib/store';
import { t } from '$lib/translations';
import { toast } from '@zerodevx/svelte-toast';
import { createEventDispatcher } from 'svelte';
import { saveSecret } from './utils';
@@ -28,7 +28,10 @@
value = '';
isBuildSecret = false;
}
toast.push('Secret removed.');
addToast({
message: 'Secret removed.',
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -36,6 +39,7 @@
async function createSecret(isNew: any) {
try {
if (!name || !value) return
await saveSecret({
isNew,
name,
@@ -51,9 +55,12 @@
isBuildSecret = false;
}
dispatch('refresh');
toast.push('Secret saved.');
addToast({
message: 'Secret removed.',
type: 'success'
});
} catch (error) {
console.log(error)
console.log(error);
return errorNotification(error);
}
}
@@ -71,7 +78,10 @@
isNewSecret,
applicationId: id
});
toast.push('Secret saved.');
addToast({
message: 'Secret removed.',
type: 'success'
});
}
}
}
@@ -100,8 +110,7 @@
/>
</td>
<td class="text-center">
<div
type="button"
<button
on:click={setSecretValue}
aria-pressed="false"
class="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
@@ -146,23 +155,25 @@
</svg>
</span>
</span>
</div>
</button>
</td>
<td>
{#if isNewSecret}
<div class="flex items-center justify-center">
<button class="bg-green-600 hover:bg-green-500" on:click={() => createSecret(true)}
<button class="btn bg-applications btn-sm" on:click={() => createSecret(true)}
>{$t('forms.add')}</button
>
</div>
{:else}
<div class="flex flex-row justify-center space-x-2">
<div class="flex items-center justify-center">
<button class="" on:click={() => createSecret(false)}>{$t('forms.set')}</button>
<button class="btn bg-application btn-sm" on:click={() => createSecret(false)}
>{$t('forms.set')}</button
>
</div>
{#if !isPRMRSecret}
<div class="flex justify-center items-end">
<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}
<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeSecret}
>{$t('forms.remove')}</button
>
</div>

27
apps/ui/src/routes/applications/[id]/_Storage.svelte
View File

@@ -11,6 +11,7 @@
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations';
import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store';
const { id } = $page.params;
const dispatch = createEventDispatcher();
@@ -30,8 +31,17 @@
storage.path = null;
storage.id = null;
}
if (newStorage) toast.push($t('application.storage.storage_saved'));
else toast.push($t('application.storage.storage_updated'));
if (newStorage) {
addToast({
message: $t('application.storage.storage_saved'),
type: 'success'
});
} else {
addToast({
message: $t('application.storage.storage_updated'),
type: 'success'
});
}
} catch (error) {
return errorNotification(error);
}
@@ -40,7 +50,10 @@
try {
await del(`/applications/${id}/storages`, { path: storage.path });
dispatch('refresh');
toast.push($t('application.storage.storage_deleted'));
addToast({
message: $t('application.storage.storage_deleted'),
type: 'success'
});
} catch (error) {
return errorNotification(error);
}
@@ -58,17 +71,19 @@
<td>
{#if isNew}
<div class="flex items-center justify-center">
<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}
<button class="btn btn-sm bg-applications" on:click={() => saveStorage(true)}
>{$t('forms.add')}</button
>
</div>
{:else}
<div class="flex flex-row justify-center space-x-2">
<div class="flex items-center justify-center">
<button class="" on:click={() => saveStorage(false)}>{$t('forms.set')}</button>
<button class="btn btn-sm bg-applications" on:click={() => saveStorage(false)}
>{$t('forms.set')}</button
>
</div>
<div class="flex justify-center items-end">
<button class="bg-red-600 hover:bg-red-500" on:click={removeStorage}
<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeStorage}
>{$t('forms.remove')}</button
>
</div>

7
apps/ui/src/routes/applications/[id]/__layout.svelte
View File

@@ -60,7 +60,7 @@
import { toast } from '@zerodevx/svelte-toast';
import { onDestroy, onMount } from 'svelte';
import { t } from '$lib/translations';
import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
import Loading from '$lib/components/Loading.svelte';
@@ -80,7 +80,10 @@
async function handleDeploySubmit() {
try {
const { buildId } = await post(`/applications/${id}/deploy`, { ...application });
toast.push($t('application.deployment_queued'));
addToast({
message: $t('application.deployment_queued'),
type: 'success'
});
if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
} else {

6
apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
View File

@@ -190,11 +190,11 @@
</div>
<div class="pt-5 flex-col flex justify-center items-center space-y-4">
<button
class="w-40"
class="btn btn-wide"
type="submit"
disabled={!showSave}
class:bg-orange-600={showSave}
class:hover:bg-orange-500={showSave}>{$t('forms.save')}</button
class:bg-applications={showSave}
>{$t('forms.save')}</button
>
</div>
</form>

5
apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
View File

@@ -413,11 +413,10 @@
<div class="flex flex-col items-center justify-center space-y-4 pt-5">
<button
on:click|preventDefault={save}
class="w-40"
class="btn btn-wide"
type="submit"
disabled={!showSave || loading.save}
class:bg-orange-600={showSave && !loading.save}
class:hover:bg-orange-500={showSave && !loading.save}
class:bg-applications={showSave && !loading.save}
>{loading.save ? $t('forms.saving') : $t('forms.save')}</button
>
{#if tryAgain}

40
apps/ui/src/routes/applications/[id]/index.svelte
View File

@@ -35,13 +35,14 @@
import { get, post } from '$lib/api';
import cuid from 'cuid';
import { browser } from '$app/env';
import { appSession, disabledButton, setLocation, status } from '$lib/store';
import { addToast, appSession, disabledButton, setLocation, status } from '$lib/store';
import { t } from '$lib/translations';
import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
import Setting from './_Setting.svelte';
const { id } = $page.params;
$: isDisabled = !$appSession.isAdmin || $status.application.isRunning || $status.application.initialLoading;
$: isDisabled =
!$appSession.isAdmin || $status.application.isRunning || $status.application.initialLoading;
let domainEl: HTMLInputElement;
@@ -138,7 +139,10 @@
branch: application.branch,
projectId: application.projectId
});
return toast.push($t('application.settings_saved'));
return addToast({
message: $t('application.settings_saved'),
type: 'success'
});
} catch (error) {
if (name === 'debug') {
debug = !debug;
@@ -169,10 +173,13 @@
exposePort: application.exposePort
});
await post(`/applications/${id}`, { ...application });
setLocation(application)
setLocation(application);
$disabledButton = false;
forceSave = false;
return toast.push('Configurations saved.');
addToast({
message: 'Configuration saved.',
type: 'success',
});
} catch (error) {
console.log(error);
//@ts-ignore
@@ -215,7 +222,10 @@
async function isDNSValid(domain: any, isWWW: any) {
try {
await get(`/applications/${id}/check?domain=${domain}`);
toast.push('DNS configuration is valid.');
addToast({
message: 'DNS configuration is valid.',
type: 'success'
});
isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
return true;
} catch (error) {
@@ -312,29 +322,21 @@
<div class="title">{$t('general')}</div>
{#if $appSession.isAdmin}
<button
class="btn btn-sm"
type="submit"
class:bg-green-600={!loading}
class:bg-applications={!loading}
class:loading={loading}
class:bg-orange-600={forceSave}
class:hover:bg-green-500={!loading}
class:hover:bg-orange-400={forceSave}
disabled={loading}
>{loading
? $t('forms.saving')
: forceSave
? $t('forms.confirm_continue')
: $t('forms.save')}</button
>{$t('forms.save')}</button
>
{/if}
</div>
<div class="grid grid-flow-row gap-2 px-10">
<div class="mt-2 grid grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<input
name="name"
id="name"
bind:value={application.name}
required
/>
<input name="name" id="name" bind:value={application.name} required />
</div>
<div class="grid grid-cols-2 items-center">
<label for="gitSource" class="text-base font-bold text-stone-100"

6
apps/ui/src/routes/applications/[id]/previews.svelte
View File

@@ -28,6 +28,7 @@
import { errorNotification, getDomain } from '$lib/common';
import { onMount } from 'svelte';
import Loading from '$lib/components/Loading.svelte';
import { addToast } from '$lib/store';
const { id } = $page.params;
@@ -59,7 +60,10 @@
pullmergeRequestId: container.pullmergeRequestId,
branch: container.branch
});
toast.push('Deployment queued');
addToast({
message: 'Deployment queued',
type: 'success'
});
if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
} else {

8
apps/ui/src/routes/applications/[id]/secrets.svelte
View File

@@ -28,6 +28,7 @@
import { get } from '$lib/api';
import { saveSecret } from './utils';
import { toast } from '@zerodevx/svelte-toast';
import { addToast } from '$lib/store';
const limit = pLimit(1);
const { id } = $page.params;
@@ -59,7 +60,10 @@
);
batchSecrets = '';
await refreshSecrets();
toast.push('Secrets saved.');
addToast({
message: 'Secrets saved.',
type: 'success'
});
}
</script>
@@ -148,7 +152,7 @@
<form on:submit|preventDefault={getValues} class="mb-12 w-full">
<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
<button
class="bg-green-600 hover:bg-green-500 disabled:text-white disabled:opacity-40"
class="btn btn-sm bg-applications"
type="submit">Batch add secrets</button
>
</form>

6
apps/ui/src/routes/applications/index.svelte
View File

@@ -61,14 +61,14 @@
</script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl ">{$t('index.applications')}</div>
<div class="mr-4 text-2xl">{$t('index.applications')}</div>
{#if $appSession.isAdmin}
<button
on:click={newApplication}
class="add-icon cursor-pointer bg-green-600 hover:bg-green-500"
class="btn btn-square btn-sm bg-applications"
>
<svg
class="w-6"
class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"