Merge branch 'next' into edge-db
This commit is contained in:
Andras Bacsai
@@ -65,11 +65,14 @@
|
||||
|
||||
<script lang="ts">
|
||||
export let baseSettings: any;
|
||||
export let supportedServiceTypesAndVersions: any;
|
||||
$appSession.registrationEnabled = baseSettings.registrationEnabled;
|
||||
$appSession.ipv4 = baseSettings.ipv4;
|
||||
$appSession.ipv6 = baseSettings.ipv6;
|
||||
$appSession.version = baseSettings.version;
|
||||
$appSession.whiteLabeled = baseSettings.whiteLabeled;
|
||||
$appSession.whiteLabeledDetails.icon = baseSettings.whiteLabeledIcon;
|
||||
$appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions;
|
||||
|
||||
export let userId: string;
|
||||
export let teamId: string;
|
||||
@@ -78,7 +81,6 @@
|
||||
import '../tailwind.css';
|
||||
import Cookies from 'js-cookie';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { SvelteToast } from '@zerodevx/svelte-toast';
|
||||
import { navigating, page } from '$app/stores';
|
||||
|
||||
import { get } from '$lib/api';
|
||||
@@ -86,6 +88,8 @@
|
||||
import PageLoader from '$lib/components/PageLoader.svelte';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import Toasts from '$lib/components/Toasts.svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
|
||||
if (userId) $appSession.userId = userId;
|
||||
if (teamId) $appSession.teamId = teamId;
|
||||
@@ -110,7 +114,7 @@
|
||||
<link rel="icon" href={$appSession.whiteLabeledDetails.icon} />
|
||||
{/if}
|
||||
</svelte:head>
|
||||
<SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} />
|
||||
<Toasts />
|
||||
{#if $navigating}
|
||||
<div out:fade={{ delay: 100 }}>
|
||||
<PageLoader />
|
||||
@@ -120,20 +124,26 @@
|
||||
<nav class="nav-main">
|
||||
<div class="flex h-screen w-full flex-col items-center transition-all duration-100">
|
||||
{#if !$appSession.whiteLabeled}
|
||||
<div class="my-4 h-10 w-10"><img src="/favicon.png" alt="coolLabs logo" /></div>
|
||||
<div class="mb-2 mt-4 h-10 w-10">
|
||||
<img src="/favicon.png" alt="coolLabs logo" />
|
||||
</div>
|
||||
{:else if $appSession.whiteLabeledDetails.icon}
|
||||
<div class="mb-2 mt-4 h-10 w-10">
|
||||
<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
|
||||
<a
|
||||
id="dashboard"
|
||||
sveltekit:prefetch
|
||||
href="/"
|
||||
class="icons tooltip-right bg-coolgray-200 hover:text-white"
|
||||
class="icons bg-coolgray-200 hover:text-white"
|
||||
class:text-white={$page.url.pathname === '/'}
|
||||
class:bg-coolgray-500={$page.url.pathname === '/'}
|
||||
data-tooltip="Dashboard"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8"
|
||||
class="h-9 w-9"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@@ -148,21 +158,22 @@
|
||||
<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="border-t border-stone-700" />
|
||||
|
||||
<div class="border-t border-stone-700" />
|
||||
<a
|
||||
id="applications"
|
||||
sveltekit:prefetch
|
||||
href="/applications"
|
||||
class="icons tooltip-green-500 tooltip-right bg-coolgray-200 hover:text-green-500"
|
||||
class:text-green-500={$page.url.pathname.startsWith('/applications') ||
|
||||
class="icons bg-coolgray-200"
|
||||
class:text-applications={$page.url.pathname.startsWith('/applications') ||
|
||||
$page.url.pathname.startsWith('/new/application')}
|
||||
class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
|
||||
$page.url.pathname.startsWith('/new/application')}
|
||||
data-tooltip="Applications"
|
||||
data-tip="Applications"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8"
|
||||
class="h-9 w-9"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentcolor"
|
||||
@@ -178,19 +189,21 @@
|
||||
<line x1="17" y1="4" x2="17" y2="10" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a
|
||||
id="sources"
|
||||
sveltekit:prefetch
|
||||
href="/sources"
|
||||
class="icons tooltip-orange-500 tooltip-right bg-coolgray-200 hover:text-orange-500"
|
||||
class:text-orange-500={$page.url.pathname.startsWith('/sources') ||
|
||||
class="icons bg-coolgray-200"
|
||||
class:text-sources={$page.url.pathname.startsWith('/sources') ||
|
||||
$page.url.pathname.startsWith('/new/source')}
|
||||
class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
|
||||
$page.url.pathname.startsWith('/new/source')}
|
||||
data-tooltip="Git Sources"
|
||||
data-tip="Git Sources"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8"
|
||||
class="h-9 w-9"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@@ -208,18 +221,19 @@
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
id="destinations"
|
||||
sveltekit:prefetch
|
||||
href="/destinations"
|
||||
class="icons tooltip-sky-500 tooltip-right bg-coolgray-200 hover:text-sky-500"
|
||||
class:text-sky-500={$page.url.pathname.startsWith('/destinations') ||
|
||||
class="icons bg-coolgray-200"
|
||||
class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
|
||||
$page.url.pathname.startsWith('/new/destination')}
|
||||
class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
|
||||
$page.url.pathname.startsWith('/new/destination')}
|
||||
data-tooltip="Destinations"
|
||||
data-tip="Destinations"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8"
|
||||
class="h-9 w-9"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@@ -243,18 +257,19 @@
|
||||
</a>
|
||||
<div class="border-t border-stone-700" />
|
||||
<a
|
||||
id="databases"
|
||||
sveltekit:prefetch
|
||||
href="/databases"
|
||||
class="icons tooltip-purple-500 tooltip-right bg-coolgray-200 hover:text-purple-500"
|
||||
class:text-purple-500={$page.url.pathname.startsWith('/databases') ||
|
||||
class="icons bg-coolgray-200"
|
||||
class:text-databases={$page.url.pathname.startsWith('/databases') ||
|
||||
$page.url.pathname.startsWith('/new/database')}
|
||||
class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
|
||||
$page.url.pathname.startsWith('/new/database')}
|
||||
data-tooltip="Databases"
|
||||
data-tip="Databases"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8"
|
||||
class="h-9 w-9"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@@ -269,18 +284,19 @@
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
id="services"
|
||||
sveltekit:prefetch
|
||||
href="/services"
|
||||
class="icons tooltip-pink-500 tooltip-right bg-coolgray-200 hover:text-pink-500"
|
||||
class:text-pink-500={$page.url.pathname.startsWith('/services') ||
|
||||
class="icons bg-coolgray-200"
|
||||
class:text-services={$page.url.pathname.startsWith('/services') ||
|
||||
$page.url.pathname.startsWith('/new/service')}
|
||||
class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
|
||||
$page.url.pathname.startsWith('/new/service')}
|
||||
data-tooltip="Services"
|
||||
data-tip="Services"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8"
|
||||
class="h-9 w-9"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@@ -298,16 +314,16 @@
|
||||
<UpdateAvailable />
|
||||
<div class="flex flex-col space-y-2 py-2">
|
||||
<a
|
||||
id="iam"
|
||||
sveltekit:prefetch
|
||||
href="/iam"
|
||||
class="icons tooltip-fuchsia-500 tooltip-right bg-coolgray-200 hover:text-fuchsia-500"
|
||||
class:text-fuchsia-500={$page.url.pathname.startsWith('/iam')}
|
||||
class="icons bg-coolgray-200"
|
||||
class:text-iam={$page.url.pathname.startsWith('/iam')}
|
||||
class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
|
||||
data-tooltip="IAM"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-9 w-9"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
@@ -322,17 +338,17 @@
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
id="settings"
|
||||
sveltekit:prefetch
|
||||
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
|
||||
class="icons tooltip-yellow-500 tooltip-right bg-coolgray-200 hover:text-yellow-500"
|
||||
class:text-yellow-500={$page.url.pathname.startsWith('/settings')}
|
||||
class="icons bg-coolgray-200"
|
||||
class:text-settings={$page.url.pathname.startsWith('/settings')}
|
||||
class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
|
||||
data-tooltip="Settings"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-9 w-9"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
@@ -348,13 +364,13 @@
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="icons tooltip-red-500 tooltip-right bg-coolgray-200 hover:text-red-500"
|
||||
data-tooltip="Logout"
|
||||
id="logout"
|
||||
class="icons bg-coolgray-200 hover:text-error"
|
||||
on:click={logout}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="ml-1 h-7 w-7"
|
||||
class="ml-1 h-8 w-8"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@@ -388,5 +404,20 @@
|
||||
{/if}
|
||||
{/if}
|
||||
<main>
|
||||
<slot />
|
||||
<div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
|
||||
<Tooltip triggeredBy="#applications" placement="right" color="bg-applications">Applications</Tooltip
|
||||
>
|
||||
<Tooltip triggeredBy="#sources" placement="right" color="bg-sources">Git Sources</Tooltip>
|
||||
<Tooltip triggeredBy="#destinations" placement="right" color="bg-destinations">Destinations</Tooltip
|
||||
>
|
||||
<Tooltip triggeredBy="#databases" placement="right" color="bg-databases">Databases</Tooltip>
|
||||
<Tooltip triggeredBy="#services" placement="right" color="bg-services">Services</Tooltip>
|
||||
<Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
|
||||
<Tooltip triggeredBy="#settings" placement="right" color="bg-settings text-black">Settings</Tooltip
|
||||
>
|
||||
<Tooltip triggeredBy="#logout" placement="right" color="bg-red-600">Logout</Tooltip>
|
||||
|
||||
@@ -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,
|
||||
@@ -49,11 +53,18 @@
|
||||
name = '';
|
||||
value = '';
|
||||
isBuildSecret = false;
|
||||
addToast({
|
||||
message: 'Secret added.',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
addToast({
|
||||
message: 'Secret updated.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
dispatch('refresh');
|
||||
toast.push('Secret saved.');
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
@@ -71,7 +82,10 @@
|
||||
isNewSecret,
|
||||
applicationId: id
|
||||
});
|
||||
toast.push('Secret saved.');
|
||||
addToast({
|
||||
message: 'Secret updated.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -83,7 +97,6 @@
|
||||
bind:value={name}
|
||||
required
|
||||
placeholder="EXAMPLE_VARIABLE"
|
||||
class=" border border-dashed border-coolgray-300"
|
||||
readonly={!isNewSecret}
|
||||
class:bg-transparent={!isNewSecret}
|
||||
class:cursor-not-allowed={!isNewSecret}
|
||||
@@ -100,8 +113,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 +158,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>
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
|
||||
export let setting: any;
|
||||
export let title: any;
|
||||
export let description: any;
|
||||
export let isCenter = true;
|
||||
export let disabled = false;
|
||||
export let dataTooltip: any = null;
|
||||
export let loading = false;
|
||||
</script>
|
||||
|
||||
<div class="flex items-center py-4 pr-8">
|
||||
<div class="flex w-96 flex-col">
|
||||
<div class="text-xs font-bold text-stone-100 md:text-base">{title}</div>
|
||||
<Explainer text={description} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class:tooltip={dataTooltip}
|
||||
class:text-center={isCenter}
|
||||
data-tooltip={dataTooltip}
|
||||
class="flex justify-center"
|
||||
>
|
||||
<div
|
||||
type="button"
|
||||
on:click
|
||||
aria-pressed="false"
|
||||
class="relative mx-20 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
|
||||
class:opacity-50={disabled || loading}
|
||||
class:bg-green-600={!loading && setting}
|
||||
class:bg-stone-700={!loading && !setting}
|
||||
class:bg-yellow-500={loading}
|
||||
>
|
||||
<span class="sr-only">Use setting</span>
|
||||
<span
|
||||
class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
|
||||
class:translate-x-5={setting}
|
||||
class:translate-x-0={!setting}
|
||||
>
|
||||
<span
|
||||
class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
|
||||
class:opacity-0={setting}
|
||||
class:opacity-100={!setting}
|
||||
class:animate-spin={loading}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
|
||||
<path
|
||||
d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
|
||||
aria-hidden="true"
|
||||
class:opacity-100={setting}
|
||||
class:opacity-0={!setting}
|
||||
class:animate-spin={loading}
|
||||
>
|
||||
<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
|
||||
<path
|
||||
d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,9 +8,9 @@
|
||||
import { page } from '$app/stores';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
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 +30,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 +49,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);
|
||||
}
|
||||
@@ -52,23 +64,24 @@
|
||||
bind:value={storage.path}
|
||||
required
|
||||
placeholder="eg: /sqlite.db"
|
||||
class=" border border-dashed border-coolgray-300"
|
||||
/>
|
||||
</td>
|
||||
<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>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
export const load: Load = async ({ fetch, url, params }) => {
|
||||
try {
|
||||
const response = await get(`/applications/${params.id}`);
|
||||
let { application, appId, settings, isQueueActive } = response;
|
||||
let { application, appId, settings } = response;
|
||||
if (!application || Object.entries(application).length === 0) {
|
||||
return {
|
||||
status: 302,
|
||||
@@ -36,7 +36,8 @@
|
||||
|
||||
return {
|
||||
props: {
|
||||
application
|
||||
application,
|
||||
settings
|
||||
},
|
||||
stuff: {
|
||||
application,
|
||||
@@ -52,35 +53,42 @@
|
||||
|
||||
<script lang="ts">
|
||||
export let application: any;
|
||||
|
||||
export let settings: any;
|
||||
import { page } from '$app/stores';
|
||||
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
|
||||
import { del, get, post } from '$lib/api';
|
||||
import { goto } from '$app/navigation';
|
||||
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,
|
||||
status,
|
||||
location,
|
||||
setLocation,
|
||||
addToast,
|
||||
isDeploymentEnabled,
|
||||
checkIfDeploymentEnabledApplications
|
||||
} from '$lib/store';
|
||||
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
|
||||
let loading = false;
|
||||
let statusInterval: any;
|
||||
let isQueueActive= false;
|
||||
$disabledButton =
|
||||
!$appSession.isAdmin ||
|
||||
!application.fqdn ||
|
||||
!application.gitSource ||
|
||||
!application.repository ||
|
||||
!application.destinationDocker ||
|
||||
!application.buildPack;
|
||||
|
||||
let forceDelete = false;
|
||||
const { id } = $page.params;
|
||||
|
||||
async function handleDeploySubmit() {
|
||||
$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
|
||||
|
||||
async function handleDeploySubmit(forceRebuild = false) {
|
||||
if (!$isDeploymentEnabled) return;
|
||||
try {
|
||||
const { buildId } = await post(`/applications/${id}/deploy`, { ...application });
|
||||
toast.push($t('application.deployment_queued'));
|
||||
const { buildId } = await post(`/applications/${id}/deploy`, {
|
||||
...application,
|
||||
forceRebuild
|
||||
});
|
||||
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 {
|
||||
@@ -93,49 +101,82 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteApplication(name: string) {
|
||||
async function deleteApplication(name: string, force: boolean) {
|
||||
const sure = confirm($t('application.confirm_to_delete', { name }));
|
||||
if (sure) {
|
||||
loading = true;
|
||||
$status.application.initialLoading = true;
|
||||
try {
|
||||
await del(`/applications/${id}`, { id });
|
||||
await del(`/applications/${id}`, { id, force });
|
||||
return await goto(`/applications`);
|
||||
} catch (error) {
|
||||
if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
|
||||
forceDelete = true;
|
||||
}
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
$status.application.initialLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
async function restartApplication() {
|
||||
try {
|
||||
$status.application.initialLoading = true;
|
||||
$status.application.loading = true;
|
||||
await post(`/applications/${id}/restart`, {});
|
||||
addToast({
|
||||
type: 'success',
|
||||
message: 'Restart successful.'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
$status.application.initialLoading = false;
|
||||
$status.application.loading = false;
|
||||
await getStatus();
|
||||
}
|
||||
}
|
||||
async function stopApplication() {
|
||||
try {
|
||||
loading = true;
|
||||
$status.application.initialLoading = true;
|
||||
// $status.application.loading = true;
|
||||
await post(`/applications/${id}/stop`, {});
|
||||
return window.location.reload();
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
} finally {
|
||||
$status.application.initialLoading = false;
|
||||
// $status.application.loading = false;
|
||||
await getStatus();
|
||||
}
|
||||
}
|
||||
async function getStatus() {
|
||||
if ($status.application.loading) return;
|
||||
$status.application.loading = true;
|
||||
const data = await get(`/applications/${id}/status`);
|
||||
isQueueActive = data.isQueueActive;
|
||||
$status.application.isRunning = data.isRunning;
|
||||
$status.application.isExited = data.isExited;
|
||||
$status.application.loading = false;
|
||||
$status.application.initialLoading = false;
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
$status.application.initialLoading = true;
|
||||
$location = null;
|
||||
clearInterval(statusInterval);
|
||||
});
|
||||
onMount(async () => {
|
||||
setLocation(application);
|
||||
|
||||
$status.application.isRunning = false;
|
||||
$status.application.isExited = false;
|
||||
$status.application.loading = false;
|
||||
if (application.gitSourceId && application.destinationDockerId && application.fqdn) {
|
||||
$location = null;
|
||||
$isDeploymentEnabled = false;
|
||||
clearInterval(statusInterval);
|
||||
});
|
||||
onMount(async () => {
|
||||
setLocation(application, settings);
|
||||
$status.application.isRunning = false;
|
||||
$status.application.isExited = false;
|
||||
$status.application.loading = false;
|
||||
if (
|
||||
application.gitSourceId &&
|
||||
application.destinationDockerId &&
|
||||
(application.fqdn || application.settings.isBot)
|
||||
) {
|
||||
await getStatus();
|
||||
statusInterval = setInterval(async () => {
|
||||
await getStatus();
|
||||
@@ -147,216 +188,138 @@
|
||||
</script>
|
||||
|
||||
<nav class="nav-side">
|
||||
{#if loading}
|
||||
<Loading fullscreen cover />
|
||||
{:else}
|
||||
{#if $location}
|
||||
<a
|
||||
href={$location}
|
||||
target="_blank"
|
||||
class="icons tooltip-bottom flex items-center bg-transparent text-sm"
|
||||
><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 $location}
|
||||
<a
|
||||
id="open"
|
||||
href={$location}
|
||||
target="_blank"
|
||||
class="icons flex items-center bg-transparent text-sm"
|
||||
><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"
|
||||
>
|
||||
{/if}
|
||||
<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
|
||||
>
|
||||
<Tooltip triggeredBy="#open">Open</Tooltip>
|
||||
|
||||
<div class="border border-coolgray-500 h-8" />
|
||||
{#if $status.application.isExited}
|
||||
<a
|
||||
href={!$disabledButton ? `/applications/${id}/logs` : null}
|
||||
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
|
||||
data-tooltip="Application exited with an error!"
|
||||
sveltekit:prefetch
|
||||
{/if}
|
||||
|
||||
{#if $status.application.isExited}
|
||||
<a
|
||||
id="applicationerror"
|
||||
href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
|
||||
class="icons bg-transparent text-sm flex items-center text-error"
|
||||
sveltekit:prefetch
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentcolor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
|
||||
/>
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
</a>
|
||||
{/if}
|
||||
{#if $status.application.initialLoading}
|
||||
<button
|
||||
class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
|
||||
/>
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
</a>
|
||||
<Tooltip triggeredBy="#applicationerror">Application exited with an error!</Tooltip>
|
||||
{/if}
|
||||
{#if $status.application.initialLoading}
|
||||
<button
|
||||
class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
|
||||
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
|
||||
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
|
||||
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
|
||||
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
|
||||
<line x1="11" y1="19.94" x2="11" y2="19.95" />
|
||||
</svg>
|
||||
</button>
|
||||
{:else if $status.application.isRunning}
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
|
||||
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
|
||||
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
|
||||
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
|
||||
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
|
||||
<line x1="11" y1="19.94" x2="11" y2="19.95" />
|
||||
</svg>
|
||||
</button>
|
||||
{:else if $status.application.isRunning}
|
||||
<button
|
||||
id="stop"
|
||||
on:click={stopApplication}
|
||||
type="submit"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm flex items-center space-x-2 text-error"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="6" y="5" width="4" height="14" rx="1" />
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#stop">Stop</Tooltip>
|
||||
|
||||
<button
|
||||
id="restart"
|
||||
on:click={restartApplication}
|
||||
type="submit"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm flex items-center space-x-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
|
||||
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
|
||||
|
||||
<form on:submit|preventDefault={() => handleDeploySubmit(true)}>
|
||||
<button
|
||||
on:click={stopApplication}
|
||||
title="Stop application"
|
||||
id="forceredeploy"
|
||||
type="submit"
|
||||
disabled={$disabledButton}
|
||||
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('application.stop_application')
|
||||
: $t('application.permission_denied_stop_application')}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="6" y="5" width="4" height="14" rx="1" />
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
<form on:submit|preventDefault={handleDeploySubmit}>
|
||||
<button
|
||||
title="Rebuild application"
|
||||
type="submit"
|
||||
disabled={$disabledButton || !isQueueActive}
|
||||
class:hover:text-green-500={isQueueActive}
|
||||
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? isQueueActive
|
||||
? 'Rebuild application'
|
||||
: 'Autoupdate inprogress. Cannot rebuild application.'
|
||||
: 'You do not have permission to rebuild application.'}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82"
|
||||
transform="rotate(-45 12 12)"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={handleDeploySubmit}>
|
||||
<button
|
||||
title="Build and start application"
|
||||
type="submit"
|
||||
disabled={$disabledButton}
|
||||
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? 'Build and start application'
|
||||
: 'You do not have permission to Build and start application.'}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M7 4v16l13 -8z" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
<div class="border border-coolgray-500 h-8" />
|
||||
<a
|
||||
href={!$disabledButton ? `/applications/${id}` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-yellow-500 rounded"
|
||||
class:text-yellow-500={$page.url.pathname === `/applications/${id}`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}`}
|
||||
>
|
||||
<button
|
||||
title="Configurations"
|
||||
disabled={$disabledButton}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip="Configurations"
|
||||
>
|
||||
<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></button
|
||||
></a
|
||||
>
|
||||
<a
|
||||
href={!$disabledButton ? `/applications/${id}/secrets` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
|
||||
>
|
||||
<button
|
||||
title="Secret"
|
||||
disabled={$disabledButton}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip="Secret"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm flex items-center space-x-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -370,25 +333,20 @@
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
|
||||
d="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82"
|
||||
transform="rotate(-45 12 12)"
|
||||
/>
|
||||
<circle cx="12" cy="11" r="1" />
|
||||
<line x1="12" y1="12" x2="12" y2="14.5" />
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
<a
|
||||
href={!$disabledButton ? `/applications/${id}/storages` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/applications/${id}/storages`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storages`}
|
||||
>
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#forceredeploy">Force redeploy (without cache)</Tooltip>
|
||||
</form>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
|
||||
<button
|
||||
title="Persistent Storages"
|
||||
disabled={$disabledButton}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip="Persistent Storages"
|
||||
id="deploy"
|
||||
type="submit"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm flex items-center space-x-2 text-success"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -401,25 +359,118 @@
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<ellipse cx="12" cy="6" rx="8" ry="3" />
|
||||
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
|
||||
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
|
||||
<path d="M7 4v16l13 -8z" />
|
||||
</svg>
|
||||
</button></a
|
||||
</button>
|
||||
<Tooltip triggeredBy="#deploy">Deploy</Tooltip>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
<div class="border border-coolgray-500 h-8" />
|
||||
<a
|
||||
href={$isDeploymentEnabled ? `/applications/${id}` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-yellow-500 rounded"
|
||||
class:text-yellow-500={$page.url.pathname === `/applications/${id}`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}`}
|
||||
>
|
||||
<button
|
||||
disabled={!$isDeploymentEnabled}
|
||||
id="configurations"
|
||||
class="icons bg-transparent text-sm"
|
||||
>
|
||||
<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></button
|
||||
></a
|
||||
>
|
||||
|
||||
<Tooltip triggeredBy="#configurations">Configurations</Tooltip>
|
||||
<a
|
||||
href={$isDeploymentEnabled ? `/applications/${id}/secrets` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
|
||||
>
|
||||
<button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
|
||||
/>
|
||||
<circle cx="12" cy="11" r="1" />
|
||||
<line x1="12" y1="12" x2="12" y2="14.5" />
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
|
||||
<a
|
||||
href={$isDeploymentEnabled ? `/applications/${id}/storages` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/applications/${id}/storages`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storages`}
|
||||
>
|
||||
<button
|
||||
id="persistentstorages"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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" />
|
||||
<ellipse cx="12" cy="6" rx="8" ry="3" />
|
||||
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
|
||||
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
|
||||
</svg>
|
||||
</button></a
|
||||
>
|
||||
<Tooltip triggeredBy="#persistentstorages">Persistent Storages</Tooltip>
|
||||
{#if !application.settings.isBot}
|
||||
<a
|
||||
href={!$disabledButton ? `/applications/${id}/previews` : null}
|
||||
href={$isDeploymentEnabled ? `/applications/${id}/previews` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-orange-500 rounded"
|
||||
class:text-orange-500={$page.url.pathname === `/applications/${id}/previews`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/previews`}
|
||||
>
|
||||
<button
|
||||
title="Previews"
|
||||
disabled={$disabledButton}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip="Previews"
|
||||
>
|
||||
<button id="previews" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6"
|
||||
@@ -439,89 +490,99 @@
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
<div class="border border-coolgray-500 h-8" />
|
||||
<a
|
||||
href={!$disabledButton && $status.application.isRunning ? `/applications/${id}/logs` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-sky-500 rounded"
|
||||
class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
|
||||
>
|
||||
<button
|
||||
title={$t('application.logs')}
|
||||
disabled={$disabledButton || !$status.application.isRunning}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip={$t('application.logs')}
|
||||
>
|
||||
<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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<line x1="3" y1="6" x2="3" y2="19" />
|
||||
<line x1="12" y1="6" x2="12" y2="19" />
|
||||
<line x1="21" y1="6" x2="21" y2="19" />
|
||||
</svg>
|
||||
</button></a
|
||||
>
|
||||
<a
|
||||
href={!$disabledButton ? `/applications/${id}/logs/build` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-red-500 rounded"
|
||||
class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
|
||||
>
|
||||
<button
|
||||
title="Build Logs"
|
||||
disabled={$disabledButton}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip="Build Logs"
|
||||
>
|
||||
<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" />
|
||||
<circle cx="19" cy="13" r="2" />
|
||||
<circle cx="4" cy="17" r="2" />
|
||||
<circle cx="13" cy="17" r="2" />
|
||||
<line x1="13" y1="19" x2="4" y2="19" />
|
||||
<line x1="4" y1="15" x2="13" y2="15" />
|
||||
<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
|
||||
<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
|
||||
<path d="M19 11v-7l-6 7" />
|
||||
</svg>
|
||||
</button></a
|
||||
>
|
||||
<div class="border border-coolgray-500 h-8" />
|
||||
|
||||
<Tooltip triggeredBy="#previews">Previews</Tooltip>
|
||||
{/if}
|
||||
<div class="border border-coolgray-500 h-8" />
|
||||
<a
|
||||
href={$isDeploymentEnabled && $status.application.isRunning ? `/applications/${id}/logs` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-sky-500 rounded"
|
||||
class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
|
||||
>
|
||||
<button
|
||||
on:click={() => deleteApplication(application.name)}
|
||||
title={$t('application.delete_application')}
|
||||
id="applicationlogs"
|
||||
disabled={!$isDeploymentEnabled || !$status.application.isRunning}
|
||||
class="icons bg-transparent text-sm"
|
||||
>
|
||||
<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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<line x1="3" y1="6" x2="3" y2="19" />
|
||||
<line x1="12" y1="6" x2="12" y2="19" />
|
||||
<line x1="21" y1="6" x2="21" y2="19" />
|
||||
</svg>
|
||||
</button></a
|
||||
>
|
||||
<Tooltip triggeredBy="#applicationlogs">Application Logs</Tooltip>
|
||||
<a
|
||||
href={$isDeploymentEnabled ? `/applications/${id}/logs/build` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-red-500 rounded"
|
||||
class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
|
||||
>
|
||||
<button id="buildlogs" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
|
||||
<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" />
|
||||
<circle cx="19" cy="13" r="2" />
|
||||
<circle cx="4" cy="17" r="2" />
|
||||
<circle cx="13" cy="17" r="2" />
|
||||
<line x1="13" y1="19" x2="4" y2="19" />
|
||||
<line x1="4" y1="15" x2="13" y2="15" />
|
||||
<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
|
||||
<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
|
||||
<path d="M19 11v-7l-6 7" />
|
||||
</svg>
|
||||
</button></a
|
||||
>
|
||||
<Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip>
|
||||
<div class="border border-coolgray-500 h-8" />
|
||||
|
||||
{#if forceDelete}
|
||||
<button
|
||||
id="forcedelete"
|
||||
on:click={() => deleteApplication(application.name, true)}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:bg-red-600={$appSession.isAdmin}
|
||||
class:hover:bg-red-500={$appSession.isAdmin}
|
||||
class="icons bg-transparent text-sm"
|
||||
>
|
||||
Force Delete
|
||||
</button>
|
||||
<Tooltip triggeredBy="#forcedelete">Force Delete</Tooltip>
|
||||
{:else}
|
||||
<button
|
||||
id="delete"
|
||||
on:click={() => deleteApplication(application.name, false)}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:hover:text-red-500={$appSession.isAdmin}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('application.delete_application')
|
||||
: $t('application.permission_denied_delete_application')}
|
||||
class="icons bg-transparent text-sm"
|
||||
>
|
||||
<DeleteIcon />
|
||||
</button>
|
||||
<Tooltip triggeredBy="#delete">Delete</Tooltip>
|
||||
{/if}
|
||||
</nav>
|
||||
<slot />
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
delete tempBuildPack.color;
|
||||
delete tempBuildPack.hoverColor;
|
||||
|
||||
if (foundConfig.buildPack !== name) {
|
||||
if (foundConfig?.buildPack !== name) {
|
||||
await post(`/applications/${id}`, { ...tempBuildPack, buildPack: name });
|
||||
}
|
||||
await post(`/applications/${id}/configuration/buildpack`, { buildPack: name });
|
||||
|
||||
@@ -95,19 +95,19 @@
|
||||
async function isBranchAlreadyUsed(event: any) {
|
||||
selected.branch = event.detail.value;
|
||||
try {
|
||||
const data = await get(
|
||||
`/applications/${id}/configuration/repository?repository=${selected.repository}&branch=${selected.branch}`
|
||||
);
|
||||
if (data.used) {
|
||||
const sure = confirm($t('application.configuration.branch_already_in_use'));
|
||||
if (sure) {
|
||||
selected.autodeploy = false;
|
||||
showSave = true;
|
||||
return true;
|
||||
}
|
||||
showSave = false;
|
||||
return true;
|
||||
}
|
||||
// const data = await get(
|
||||
// `/applications/${id}/configuration/repository?repository=${selected.repository}&branch=${selected.branch}`
|
||||
// );
|
||||
// if (data.used) {
|
||||
// const sure = confirm($t('application.configuration.branch_already_in_use'));
|
||||
// if (sure) {
|
||||
// selected.autodeploy = false;
|
||||
// showSave = true;
|
||||
// return true;
|
||||
// }
|
||||
// showSave = false;
|
||||
// return true;
|
||||
// }
|
||||
showSave = true;
|
||||
} catch (error) {
|
||||
showSave = false;
|
||||
@@ -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>
|
||||
|
||||
@@ -169,10 +169,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
function selectBranch(event: any) {
|
||||
selected.branch = event.detail;
|
||||
isBranchAlreadyUsed();
|
||||
}
|
||||
async function loadBranches(page: number = 1) {
|
||||
let perPage = 100;
|
||||
//@ts-ignore
|
||||
@@ -199,21 +195,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function isBranchAlreadyUsed() {
|
||||
async function isBranchAlreadyUsed(event) {
|
||||
selected.branch = event.detail;
|
||||
try {
|
||||
const data = await get(
|
||||
`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
|
||||
);
|
||||
if (data.used) {
|
||||
const sure = confirm($t('application.configuration.branch_already_in_use'));
|
||||
if (sure) {
|
||||
autodeploy = false;
|
||||
showSave = true;
|
||||
return true;
|
||||
}
|
||||
showSave = false;
|
||||
return true;
|
||||
}
|
||||
// const data = await get(
|
||||
// `/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
|
||||
// );
|
||||
// if (data.used) {
|
||||
// const sure = confirm($t('application.configuration.branch_already_in_use'));
|
||||
// if (sure) {
|
||||
// autodeploy = false;
|
||||
// showSave = true;
|
||||
// return true;
|
||||
// }
|
||||
// showSave = false;
|
||||
// return true;
|
||||
// }
|
||||
showSave = true;
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
@@ -227,9 +224,7 @@
|
||||
}
|
||||
}
|
||||
async function setWebhook(url: any, webhookToken: any) {
|
||||
const host = dev
|
||||
? getWebhookUrl('gitlab')
|
||||
: `${window.location.origin}/webhooks/gitlab/events`;
|
||||
const host = dev ? getWebhookUrl('gitlab') : `${window.location.origin}/webhooks/gitlab/events`;
|
||||
try {
|
||||
await post(
|
||||
url,
|
||||
@@ -294,17 +289,15 @@
|
||||
);
|
||||
await post(updateDeployKeyIdUrl, { deployKeyId: id });
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading.save = false;
|
||||
return errorNotification(error);
|
||||
}
|
||||
|
||||
try {
|
||||
await setWebhook(webhookUrl, webhookToken);
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading.save = false;
|
||||
return errorNotification(error);
|
||||
}
|
||||
|
||||
const url = `/applications/${id}/configuration/repository`;
|
||||
@@ -317,11 +310,11 @@
|
||||
autodeploy,
|
||||
webhookToken
|
||||
});
|
||||
loading.save = false;
|
||||
return await goto(from || `/applications/${id}/configuration/buildpack`);
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading.save = false;
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
async function handleSubmit() {
|
||||
@@ -396,7 +389,7 @@
|
||||
showIndicator={!loading.branches}
|
||||
isWaiting={loading.branches}
|
||||
isDisabled={loading.branches || !selected.project}
|
||||
on:select={selectBranch}
|
||||
on:select={isBranchAlreadyUsed}
|
||||
on:clear={() => {
|
||||
showSave = false;
|
||||
selected.branch = null;
|
||||
@@ -413,11 +406,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}
|
||||
@@ -426,7 +418,7 @@
|
||||
configuration <a href={`/sources/${application.gitSource.id}`}>here.</a>
|
||||
</div>
|
||||
<button
|
||||
class="w-40 bg-green-600"
|
||||
class="btn btn-sm w-40 bg-green-600"
|
||||
on:click|stopPropagation|preventDefault={() => window.location.reload()}
|
||||
>
|
||||
Try again
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
<script lang="ts">
|
||||
import { get, post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import Select from 'svelte-select';
|
||||
import { goto } from '$app/navigation';
|
||||
import { errorNotification } from '$lib/common';
|
||||
|
||||
const { id } = $page.params;
|
||||
|
||||
let publicRepositoryLink: string;
|
||||
let projectId: number;
|
||||
let repositoryName: string;
|
||||
let branchName: string;
|
||||
let ownerName: string;
|
||||
let type: string;
|
||||
let branchSelectOptions: any = [];
|
||||
let loading = {
|
||||
branches: false
|
||||
};
|
||||
async function loadBranches() {
|
||||
try {
|
||||
loading.branches = true;
|
||||
publicRepositoryLink = publicRepositoryLink.trim();
|
||||
const protocol = publicRepositoryLink.split(':')[0];
|
||||
const gitUrl = publicRepositoryLink.replace('http://', '').replace('https://', '');
|
||||
|
||||
let [host, ...path] = gitUrl.split('/');
|
||||
const [owner, repository, ...branch] = path;
|
||||
|
||||
ownerName = owner;
|
||||
repositoryName = repository;
|
||||
|
||||
if (host === 'github.com') {
|
||||
host = 'api.github.com';
|
||||
type = 'github';
|
||||
if (branch[0] === 'tree' && branch[1]) {
|
||||
branchName = branch[1];
|
||||
}
|
||||
}
|
||||
if (host === 'gitlab.com') {
|
||||
host = 'gitlab.com/api/v4';
|
||||
type = 'gitlab';
|
||||
if (branch[1] === 'tree' && branch[2]) {
|
||||
branchName = branch[2];
|
||||
}
|
||||
}
|
||||
const apiUrl = `${protocol}://${host}`;
|
||||
if (type === 'github') {
|
||||
const repositoryDetails = await get(`${apiUrl}/repos/${ownerName}/${repositoryName}`);
|
||||
projectId = repositoryDetails.id.toString();
|
||||
}
|
||||
if (type === 'gitlab') {
|
||||
const repositoryDetails = await get(`${apiUrl}/projects/${ownerName}%2F${repositoryName}`);
|
||||
projectId = repositoryDetails.id.toString();
|
||||
}
|
||||
if (type === 'github' && branchName) {
|
||||
try {
|
||||
await get(`${apiUrl}/repos/${ownerName}/${repositoryName}/branches/${branchName}`);
|
||||
await saveRepository();
|
||||
loading.branches = false;
|
||||
return;
|
||||
} catch (error) {
|
||||
errorNotification(error);
|
||||
}
|
||||
}
|
||||
if (type === 'gitlab' && branchName) {
|
||||
try {
|
||||
await get(
|
||||
`${apiUrl}/projects/${ownerName}%2F${repositoryName}/repository/branches/${branchName}`
|
||||
);
|
||||
await saveRepository();
|
||||
loading.branches = false;
|
||||
return;
|
||||
} catch (error) {
|
||||
errorNotification(error);
|
||||
}
|
||||
}
|
||||
let branches: any[] = [];
|
||||
let page = 1;
|
||||
let branchCount = 0;
|
||||
const loadedBranches = await loadBranchesByPage(
|
||||
apiUrl,
|
||||
ownerName,
|
||||
repositoryName,
|
||||
page,
|
||||
type
|
||||
);
|
||||
branches = branches.concat(loadedBranches);
|
||||
branchCount = branches.length;
|
||||
if (branchCount === 100) {
|
||||
while (branchCount === 100) {
|
||||
page = page + 1;
|
||||
const nextBranches = await loadBranchesByPage(
|
||||
apiUrl,
|
||||
ownerName,
|
||||
repositoryName,
|
||||
page,
|
||||
type
|
||||
);
|
||||
branches = branches.concat(nextBranches);
|
||||
branchCount = nextBranches.length;
|
||||
}
|
||||
}
|
||||
loading.branches = false;
|
||||
branchSelectOptions = branches.map((branch: any) => ({
|
||||
value: branch.name,
|
||||
label: branch.name
|
||||
}));
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading.branches = false;
|
||||
}
|
||||
}
|
||||
async function loadBranchesByPage(
|
||||
apiUrl: string,
|
||||
owner: string,
|
||||
repository: string,
|
||||
page = 1,
|
||||
type: string
|
||||
) {
|
||||
if (type === 'github') {
|
||||
return await get(`${apiUrl}/repos/${owner}/${repository}/branches?per_page=100&page=${page}`);
|
||||
}
|
||||
if (type === 'gitlab') {
|
||||
return await get(
|
||||
`${apiUrl}/projects/${ownerName}%2F${repositoryName}/repository/branches?page=${page}`
|
||||
);
|
||||
}
|
||||
}
|
||||
async function saveRepository(event?: any) {
|
||||
try {
|
||||
if (event?.detail?.value) {
|
||||
branchName = event.detail.value;
|
||||
}
|
||||
await post(`/applications/${id}/configuration/source`, {
|
||||
gitSourceId: null,
|
||||
forPublic: true,
|
||||
type
|
||||
});
|
||||
await post(`/applications/${id}/configuration/repository`, {
|
||||
repository: `${ownerName}/${repositoryName}`,
|
||||
branch: branchName,
|
||||
projectId,
|
||||
autodeploy: false,
|
||||
webhookToken: null,
|
||||
isPublicRepository: true
|
||||
});
|
||||
|
||||
return await goto(`/applications/${id}/configuration/destination`);
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-5xl">
|
||||
<div class="grid grid-flow-row gap-2 px-10">
|
||||
<div class="flex">
|
||||
<form class="flex" on:submit|preventDefault={loadBranches}>
|
||||
<div class="space-y-4">
|
||||
<input
|
||||
placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
|
||||
bind:value={publicRepositoryLink}
|
||||
/>
|
||||
{#if branchSelectOptions.length > 0}
|
||||
<div class="custom-select-wrapper">
|
||||
<Select
|
||||
placeholder={loading.branches
|
||||
? $t('application.configuration.loading_branches')
|
||||
: !publicRepositoryLink
|
||||
? $t('application.configuration.select_a_repository_first')
|
||||
: $t('application.configuration.select_a_branch')}
|
||||
isWaiting={loading.branches}
|
||||
showIndicator={!!publicRepositoryLink && !loading.branches}
|
||||
id="branches"
|
||||
on:select={saveRepository}
|
||||
items={branchSelectOptions}
|
||||
isDisabled={loading.branches || !!!publicRepositoryLink}
|
||||
isClearable={false}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<button class="btn mx-4 bg-orange-600" class:loading={loading.branches} type="submit"
|
||||
>Load Repository</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -30,7 +30,6 @@
|
||||
import { page } from '$app/stores';
|
||||
import { get } from '$lib/api';
|
||||
import { appSession } from '$lib/store';
|
||||
import { browser } from '$app/env';
|
||||
import { t } from '$lib/translations';
|
||||
import { buildPacks, findBuildPack, scanningTemplates } from '$lib/templates';
|
||||
import { errorNotification } from '$lib/common';
|
||||
@@ -48,6 +47,7 @@
|
||||
export let branch: any;
|
||||
export let type: any;
|
||||
export let application: any;
|
||||
export let isPublicRepository: boolean;
|
||||
|
||||
function checkPackageJSONContents({ key, json }: { key: any; json: any }) {
|
||||
return json?.dependencies?.hasOwnProperty(key) || json?.devDependencies?.hasOwnProperty(key);
|
||||
@@ -237,7 +237,7 @@
|
||||
if (error.message === 'Bad credentials') {
|
||||
const { token } = await get(`/applications/${id}/configuration/githubToken`);
|
||||
$appSession.tokens.github = token;
|
||||
return await scanRepository()
|
||||
return await scanRepository();
|
||||
}
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
@@ -246,7 +246,11 @@
|
||||
}
|
||||
}
|
||||
onMount(async () => {
|
||||
await scanRepository();
|
||||
if (!isPublicRepository) {
|
||||
await scanRepository();
|
||||
} else {
|
||||
scanning = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -263,11 +267,25 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="max-w-7xl mx-auto flex flex-wrap justify-center">
|
||||
{#each buildPacks as buildPack}
|
||||
<div class="p-2">
|
||||
<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
|
||||
</div>
|
||||
{/each}
|
||||
<div class="max-w-5xl mx-auto ">
|
||||
<div class="title pb-2">Coolify</div>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true) as buildPack}
|
||||
<div class="p-2">
|
||||
<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-5xl mx-auto ">
|
||||
<div class="title pb-2">Other</div>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
{#each buildPacks.filter((bp) => bp.isHerokuBuildPack === true) as buildPack}
|
||||
<div class="p-2">
|
||||
<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
<script context="module" lang="ts">
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
export const load: Load = async () => {
|
||||
try {
|
||||
const response = await get(`/databases`);
|
||||
return {
|
||||
props: {
|
||||
...response
|
||||
}
|
||||
};
|
||||
} catch (error: any) {
|
||||
return {
|
||||
status: 500,
|
||||
error: new Error(error)
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let databases: any = [];
|
||||
import { get, post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { appSession } from '$lib/store';
|
||||
import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
const from = $page.url.searchParams.get('from');
|
||||
|
||||
let remoteDatabase = {
|
||||
name: null,
|
||||
type: null,
|
||||
host: null,
|
||||
port: null,
|
||||
user: null,
|
||||
password: null,
|
||||
database: null
|
||||
};
|
||||
|
||||
const ownDatabases = databases.filter((database: any) => {
|
||||
if (database.teams[0].id === $appSession.teamId) {
|
||||
return database;
|
||||
}
|
||||
});
|
||||
const otherDatabases = databases.filter((database: any) => {
|
||||
if (database.teams[0].id !== $appSession.teamId) {
|
||||
return database;
|
||||
}
|
||||
});
|
||||
|
||||
async function addCoolifyDatabase(database: any) {
|
||||
try {
|
||||
await post(`/applications/${$page.params.id}/configuration/database`, {
|
||||
databaseId: database.id,
|
||||
type: database.type
|
||||
});
|
||||
return window.location.assign(from || `/applications/${$page.params.id}/`);
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">Select a Database</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
|
||||
{#if !databases || ownDatabases.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if ownDatabases.length > 0 || otherDatabases.length > 0}
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
|
||||
{#each ownDatabases as database}
|
||||
<button on:click={() => addCoolifyDatabase(database)} class="p-2 no-underline">
|
||||
<div class="box-selection group relative hover:bg-purple-600">
|
||||
<DatabaseIcons type={database.type} isAbsolute={true} />
|
||||
<div class="truncate text-center text-xl font-bold">
|
||||
{database.name}
|
||||
</div>
|
||||
{#if $appSession.teamId === '0' && otherDatabases.length > 0}
|
||||
<div class="truncate text-center">{database.teams[0].name}</div>
|
||||
{/if}
|
||||
{#if database.destinationDocker?.name}
|
||||
<div class="truncate text-center">{database.destinationDocker.name}</div>
|
||||
{/if}
|
||||
{#if !database.type}
|
||||
<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
|
||||
{$t('application.configuration.configuration_missing')}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if otherDatabases.length > 0 && $appSession.teamId === '0'}
|
||||
<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Databases</div>
|
||||
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
|
||||
{#each otherDatabases as database}
|
||||
<a href="/databases/{database.id}" class="p-2 no-underline">
|
||||
<div class="box-selection group relative hover:bg-purple-600">
|
||||
<DatabaseIcons type={database.type} isAbsolute={true} />
|
||||
<div class="truncate text-center text-xl font-bold">
|
||||
{database.name}
|
||||
</div>
|
||||
{#if $appSession.teamId === '0'}
|
||||
<div class="truncate text-center">{database.teams[0].name}</div>
|
||||
{/if}
|
||||
{#if !database.type}
|
||||
<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
|
||||
Configuration missing
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-center truncate">{database.type}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mx-auto max-w-4xl p-6">
|
||||
<div class="grid grid-flow-row gap-2 px-10">
|
||||
<div class="font-bold text-xl tracking-tight">Connect a Hosted / Remote Database</div>
|
||||
<div class="mt-2 grid grid-cols-2 items-center px-4">
|
||||
<label for="name" class="text-base font-bold text-stone-100">Name</label>
|
||||
<input name="name" id="name" required bind:value={remoteDatabase.name} />
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-2 items-center px-4">
|
||||
<label for="type" class="text-base font-bold text-stone-100">Type</label>
|
||||
<input name="type" id="type" required bind:value={remoteDatabase.type} />
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-2 items-center px-4">
|
||||
<label for="host" class="text-base font-bold text-stone-100">Host</label>
|
||||
<input name="host" id="host" required bind:value={remoteDatabase.host} />
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-2 items-center px-4">
|
||||
<label for="port" class="text-base font-bold text-stone-100">Port</label>
|
||||
<input name="port" id="port" required bind:value={remoteDatabase.port} />
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-2 items-center px-4">
|
||||
<label for="user" class="text-base font-bold text-stone-100">User</label>
|
||||
<input name="user" id="user" required bind:value={remoteDatabase.user} />
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-2 items-center px-4">
|
||||
<label for="password" class="text-base font-bold text-stone-100">Password</label>
|
||||
<input name="password" id="password" required bind:value={remoteDatabase.password} />
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-2 items-center px-4">
|
||||
<label for="database" class="text-base font-bold text-stone-100">Database Name</label>
|
||||
<input name="database" id="database" required bind:value={remoteDatabase.database} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,6 +31,7 @@
|
||||
import { t } from '$lib/translations';
|
||||
import { appSession } from '$lib/store';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
const from = $page.url.searchParams.get('from');
|
||||
@@ -55,6 +56,11 @@
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
onMount(async () => {
|
||||
if (destinations.length === 1) {
|
||||
await handleSubmit(destinations[0].id);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
@@ -65,7 +71,9 @@
|
||||
<div class="flex flex-col justify-center">
|
||||
{#if !destinations || ownDestinations.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="pb-2 text-center font-bold">{$t('application.configuration.no_configurable_destination')}</div>
|
||||
<div class="pb-2 text-center font-bold">
|
||||
{$t('application.configuration.no_configurable_destination')}
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
|
||||
<svg
|
||||
|
||||
@@ -48,3 +48,4 @@
|
||||
<GitlabRepositories {application} {appId} {settings} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -31,6 +31,8 @@
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import PublicRepository from './_PublicRepository.svelte';
|
||||
import DocLink from '$lib/components/DocLink.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
const from = $page.url.searchParams.get('from');
|
||||
@@ -71,120 +73,128 @@
|
||||
{$t('application.configuration.select_a_git_source')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
{#if !filteredSources || ownSources.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="pb-2 text-center font-bold">
|
||||
{$t('application.configuration.no_configurable_git')}
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<a
|
||||
href="/sources/new?from={$page.url.pathname}"
|
||||
class="add-icon bg-orange-600 hover:bg-orange-500"
|
||||
>
|
||||
<svg
|
||||
class="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
|
||||
<div class="max-w-5xl mx-auto ">
|
||||
<div class="title pb-8">Git App</div>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
{#if !filteredSources || ownSources.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="pb-2 text-center font-bold">
|
||||
{$t('application.configuration.no_configurable_git')}
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<a
|
||||
href="/sources/new?from={$page.url.pathname}"
|
||||
class="add-icon bg-orange-600 hover:bg-orange-500"
|
||||
>
|
||||
</a>
|
||||
<svg
|
||||
class="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
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
|
||||
{#each ownSources as source}
|
||||
<div class="p-2 relative">
|
||||
<div class="absolute -m-4">
|
||||
{#if source?.type === 'gitlab'}
|
||||
<svg viewBox="0 0 128 128" class="w-8">
|
||||
<path
|
||||
fill="#FC6D26"
|
||||
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
|
||||
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
|
||||
fill="#FC6D26"
|
||||
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
|
||||
/><path
|
||||
fill="#FCA326"
|
||||
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
|
||||
/><path
|
||||
fill="#E24329"
|
||||
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
|
||||
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
|
||||
fill="#FCA326"
|
||||
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
|
||||
/><path
|
||||
fill="#E24329"
|
||||
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
|
||||
/>
|
||||
</svg>
|
||||
{:else if source?.type === 'github'}
|
||||
<svg viewBox="0 0 128 128" class="w-8">
|
||||
<g fill="#ffffff"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
|
||||
{:else}
|
||||
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
|
||||
{#each ownSources as source}
|
||||
<div class="p-2 relative">
|
||||
<div class="absolute -m-4">
|
||||
{#if source?.type === 'gitlab'}
|
||||
<svg viewBox="0 0 128 128" class="w-8">
|
||||
<path
|
||||
fill="#FC6D26"
|
||||
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
|
||||
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
|
||||
fill="#FC6D26"
|
||||
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
|
||||
/><path
|
||||
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
|
||||
/></g
|
||||
>
|
||||
</svg>
|
||||
{/if}
|
||||
fill="#FCA326"
|
||||
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
|
||||
/><path
|
||||
fill="#E24329"
|
||||
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
|
||||
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
|
||||
fill="#FCA326"
|
||||
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
|
||||
/><path
|
||||
fill="#E24329"
|
||||
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
|
||||
/>
|
||||
</svg>
|
||||
{:else if source?.type === 'github'}
|
||||
<svg viewBox="0 0 128 128" class="w-8">
|
||||
<g fill="#ffffff"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
|
||||
/><path
|
||||
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
|
||||
/></g
|
||||
>
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
<form on:submit|preventDefault={() => handleSubmit(source.id)}>
|
||||
<button
|
||||
disabled={source.gitlabApp && !source.gitlabAppId}
|
||||
type="submit"
|
||||
class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
|
||||
class:border-red-500={source.gitlabApp && !source.gitlabAppId}
|
||||
class:border-0={source.gitlabApp && !source.gitlabAppId}
|
||||
class:border-l-4={source.gitlabApp && !source.gitlabAppId}
|
||||
>
|
||||
<div class="font-bold text-xl text-center truncate">{source.name}</div>
|
||||
{#if source.gitlabApp && !source.gitlabAppId}
|
||||
<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
|
||||
Configuration missing
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<form on:submit|preventDefault={() => handleSubmit(source.id)}>
|
||||
<button
|
||||
disabled={source.gitlabApp && !source.gitlabAppId}
|
||||
type="submit"
|
||||
class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
|
||||
class:border-red-500={source.gitlabApp && !source.gitlabAppId}
|
||||
class:border-0={source.gitlabApp && !source.gitlabAppId}
|
||||
class:border-l-4={source.gitlabApp && !source.gitlabAppId}
|
||||
>
|
||||
<div class="font-bold text-xl text-center truncate">{source.name}</div>
|
||||
{#if source.gitlabApp && !source.gitlabAppId}
|
||||
<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
|
||||
Configuration missing
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if otherSources.length > 0 && $appSession.teamId === '0'}
|
||||
<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Sources</div>
|
||||
{#if otherSources.length > 0 && $appSession.teamId === '0'}
|
||||
<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Sources</div>
|
||||
{/if}
|
||||
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
|
||||
{#each otherSources as source}
|
||||
<div class="p-2">
|
||||
<form on:submit|preventDefault={() => handleSubmit(source.id)}>
|
||||
<button
|
||||
disabled={source.gitlabApp && !source.gitlabAppId}
|
||||
type="submit"
|
||||
class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
|
||||
class:border-red-500={source.gitlabApp && !source.gitlabAppId}
|
||||
class:border-0={source.gitlabApp && !source.gitlabAppId}
|
||||
class:border-l-4={source.gitlabApp && !source.gitlabAppId}
|
||||
>
|
||||
<div class="font-bold text-xl text-center truncate">{source.name}</div>
|
||||
{#if source.gitlabApp && !source.gitlabAppId}
|
||||
<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
|
||||
{$t('application.configuration.configuration_missing')}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
|
||||
{#each otherSources as source}
|
||||
<div class="p-2">
|
||||
<form on:submit|preventDefault={() => handleSubmit(source.id)}>
|
||||
<button
|
||||
disabled={source.gitlabApp && !source.gitlabAppId}
|
||||
type="submit"
|
||||
class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
|
||||
class:border-red-500={source.gitlabApp && !source.gitlabAppId}
|
||||
class:border-0={source.gitlabApp && !source.gitlabAppId}
|
||||
class:border-l-4={source.gitlabApp && !source.gitlabAppId}
|
||||
>
|
||||
<div class="font-bold text-xl text-center truncate">{source.name}</div>
|
||||
{#if source.gitlabApp && !source.gitlabAppId}
|
||||
<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
|
||||
{$t('application.configuration.configuration_missing')}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="title py-4">Public Repository</div>
|
||||
<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
|
||||
</div>
|
||||
<PublicRepository />
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
if (stuff?.application?.id) {
|
||||
return {
|
||||
props: {
|
||||
application: stuff.application
|
||||
application: stuff.application,
|
||||
settings: stuff.settings
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -26,22 +27,32 @@
|
||||
|
||||
<script lang="ts">
|
||||
export let application: any;
|
||||
export let settings: any;
|
||||
import { page } from '$app/stores';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import Select from 'svelte-select';
|
||||
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
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,
|
||||
checkIfDeploymentEnabledApplications,
|
||||
setLocation,
|
||||
status,
|
||||
isDeploymentEnabled,
|
||||
features
|
||||
} from '$lib/store';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
|
||||
import Setting from './_Setting.svelte';
|
||||
import Setting from '$lib/components/Setting.svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
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;
|
||||
|
||||
@@ -60,7 +71,10 @@
|
||||
let previews = application.settings.previews;
|
||||
let dualCerts = application.settings.dualCerts;
|
||||
let autodeploy = application.settings.autodeploy;
|
||||
let isBot = application.settings.isBot;
|
||||
let isDBBranching = application.settings.isDBBranching;
|
||||
|
||||
let baseDatabaseBranch: any = application?.connectedDatabase?.hostedDatabaseDBName || null;
|
||||
let nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
|
||||
let isNonWWWDomainOK = false;
|
||||
let isWWWDomainOK = false;
|
||||
@@ -80,7 +94,7 @@
|
||||
}
|
||||
];
|
||||
function containerClass() {
|
||||
return 'text-white border border-dashed border-coolgray-300 bg-transparent font-thin px-0';
|
||||
return 'text-white bg-transparent font-thin px-0';
|
||||
}
|
||||
|
||||
async function getUsage() {
|
||||
@@ -99,7 +113,7 @@
|
||||
application.fqdn = `http://${cuid()}.demo.coolify.io`;
|
||||
await handleSubmit();
|
||||
}
|
||||
domainEl.focus();
|
||||
// !isBot && domainEl.focus();
|
||||
await getUsage();
|
||||
usageInterval = setInterval(async () => {
|
||||
await getUsage();
|
||||
@@ -111,10 +125,33 @@
|
||||
buildPack: application.buildPack,
|
||||
deploymentType: application.deploymentType
|
||||
});
|
||||
application = {
|
||||
...application,
|
||||
...data
|
||||
};
|
||||
const baseImageCorrect = data.baseImages.filter(
|
||||
(image: any) => image.value === application.baseImage
|
||||
);
|
||||
if (baseImageCorrect.length === 0) {
|
||||
application.baseImage = data.baseImage;
|
||||
}
|
||||
application.baseImages = data.baseImages;
|
||||
|
||||
const baseBuildImageCorrect = data.baseBuildImages.filter(
|
||||
(image: any) => image.value === application.baseBuildImage
|
||||
);
|
||||
if (baseBuildImageCorrect.length === 0) {
|
||||
application.baseBuildImage = data.baseBuildImage;
|
||||
}
|
||||
application.baseBuildImages = data.baseBuildImages;
|
||||
if (application.deploymentType === 'static' && application.port !== '80') {
|
||||
application.port = data.port;
|
||||
}
|
||||
if (application.deploymentType === 'node' && application.port === '80') {
|
||||
application.port = data.port;
|
||||
}
|
||||
if (application.deploymentType === 'static' && !application.publishDirectory) {
|
||||
application.publishDirectory = data.publishDirectory;
|
||||
}
|
||||
if (application.deploymentType === 'node' && application.publishDirectory === 'out') {
|
||||
application.publishDirectory = data.publishDirectory;
|
||||
}
|
||||
}
|
||||
async function changeSettings(name: any) {
|
||||
if (name === 'debug') {
|
||||
@@ -129,16 +166,30 @@
|
||||
if (name === 'autodeploy') {
|
||||
autodeploy = !autodeploy;
|
||||
}
|
||||
if (name === 'isBot') {
|
||||
if ($status.application.isRunning) return;
|
||||
isBot = !isBot;
|
||||
application.settings.isBot = isBot;
|
||||
setLocation(application, settings);
|
||||
}
|
||||
if (name === 'isDBBranching') {
|
||||
isDBBranching = !isDBBranching;
|
||||
}
|
||||
try {
|
||||
await post(`/applications/${id}/settings`, {
|
||||
previews,
|
||||
debug,
|
||||
dualCerts,
|
||||
isBot,
|
||||
autodeploy,
|
||||
isDBBranching,
|
||||
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;
|
||||
@@ -152,29 +203,43 @@
|
||||
if (name === 'autodeploy') {
|
||||
autodeploy = !autodeploy;
|
||||
}
|
||||
if (name === 'isBot') {
|
||||
isBot = !isBot;
|
||||
}
|
||||
if (name === 'isDBBranching') {
|
||||
isDBBranching = !isDBBranching;
|
||||
}
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
|
||||
}
|
||||
}
|
||||
async function handleSubmit() {
|
||||
if (loading || !application.fqdn) return;
|
||||
if (loading) return;
|
||||
loading = true;
|
||||
try {
|
||||
nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
|
||||
console.log({debug: nonWWWDomain})
|
||||
if (application.deploymentType)
|
||||
application.deploymentType = application.deploymentType.toLowerCase();
|
||||
await post(`/applications/${id}/check`, {
|
||||
fqdn: application.fqdn,
|
||||
forceSave,
|
||||
dualCerts,
|
||||
exposePort: application.exposePort
|
||||
});
|
||||
await post(`/applications/${id}`, { ...application });
|
||||
setLocation(application)
|
||||
$disabledButton = false;
|
||||
!isBot &&
|
||||
(await post(`/applications/${id}/check`, {
|
||||
fqdn: application.fqdn,
|
||||
forceSave,
|
||||
dualCerts,
|
||||
exposePort: application.exposePort
|
||||
}));
|
||||
await post(`/applications/${id}`, { ...application, baseDatabaseBranch });
|
||||
setLocation(application, settings);
|
||||
$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
|
||||
|
||||
forceSave = false;
|
||||
return toast.push('Configurations saved.');
|
||||
|
||||
addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//@ts-ignore
|
||||
if (error?.message.startsWith($t('application.dns_not_set_partial_error'))) {
|
||||
forceSave = true;
|
||||
@@ -215,7 +280,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) {
|
||||
@@ -235,6 +303,7 @@
|
||||
</div>
|
||||
{#if application.gitSource?.htmlUrl && application.repository && application.branch}
|
||||
<a
|
||||
id="git"
|
||||
href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
|
||||
target="_blank"
|
||||
class="w-10"
|
||||
@@ -275,34 +344,27 @@
|
||||
</svg>
|
||||
{/if}
|
||||
</a>
|
||||
<Tooltip triggeredBy="#git">Open on Git</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<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">
|
||||
@@ -312,83 +374,83 @@
|
||||
<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
|
||||
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
|
||||
disabled={loading}>{$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"
|
||||
>{$t('application.git_source')}</label
|
||||
>
|
||||
<a
|
||||
href={!isDisabled
|
||||
? `/applications/${id}/configuration/source?from=/applications/${id}`
|
||||
: ''}
|
||||
class="no-underline"
|
||||
><input
|
||||
{#if isDisabled || application.settings.isPublicRepository}
|
||||
<input
|
||||
disabled={isDisabled || application.settings.isPublicRepository}
|
||||
value={application.gitSource.name}
|
||||
id="gitSource"
|
||||
disabled
|
||||
class="cursor-pointer hover:bg-coolgray-500"
|
||||
/></a
|
||||
>
|
||||
/>
|
||||
{:else}
|
||||
<a
|
||||
href={`/applications/${id}/configuration/source?from=/applications/${id}`}
|
||||
class="no-underline"
|
||||
><input
|
||||
value={application.gitSource.name}
|
||||
id="gitSource"
|
||||
class="cursor-pointer hover:bg-coolgray-500"
|
||||
/></a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="repository" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.git_repository')}</label
|
||||
>
|
||||
<a
|
||||
href={!isDisabled
|
||||
? `/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`
|
||||
: ''}
|
||||
class="no-underline"
|
||||
><input
|
||||
{#if isDisabled || application.settings.isPublicRepository}
|
||||
<input
|
||||
disabled={isDisabled || application.settings.isPublicRepository}
|
||||
value="{application.repository}/{application.branch}"
|
||||
id="repository"
|
||||
disabled
|
||||
class="cursor-pointer hover:bg-coolgray-500"
|
||||
/></a
|
||||
>
|
||||
/>
|
||||
{:else}
|
||||
<a
|
||||
href={`/applications/${id}/configuration/repository?from=/applications/${id}&to=/applications/${id}/configuration/buildpack`}
|
||||
class="no-underline"
|
||||
><input
|
||||
value="{application.repository}/{application.branch}"
|
||||
id="repository"
|
||||
class="cursor-pointer hover:bg-coolgray-500"
|
||||
/></a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="buildPack" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.build_pack')}</label
|
||||
>
|
||||
<a
|
||||
href={!isDisabled
|
||||
? `/applications/${id}/configuration/buildpack?from=/applications/${id}`
|
||||
: ''}
|
||||
class="no-underline "
|
||||
>
|
||||
<input
|
||||
value={application.buildPack}
|
||||
id="buildPack"
|
||||
disabled
|
||||
class="cursor-pointer hover:bg-coolgray-500"
|
||||
/></a
|
||||
>
|
||||
{#if isDisabled}
|
||||
<input class="capitalize" disabled={isDisabled} value={application.buildPack} />
|
||||
{:else}
|
||||
<a
|
||||
href={`/applications/${id}/configuration/buildpack?from=/applications/${id}`}
|
||||
class="no-underline "
|
||||
>
|
||||
<input
|
||||
value={application.buildPack}
|
||||
id="buildPack"
|
||||
class="cursor-pointer hover:bg-coolgray-500 capitalize"
|
||||
/></a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center pb-8">
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="destination" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.destination')}</label
|
||||
>
|
||||
@@ -402,10 +464,15 @@
|
||||
</div>
|
||||
</div>
|
||||
{#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'}
|
||||
<div class="grid grid-cols-2 items-center pb-8">
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="baseBuildImage" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.base_build_image')}</label
|
||||
>
|
||||
>{$t('application.base_build_image')}
|
||||
<Explainer
|
||||
explanation={application.buildPack === 'laravel'
|
||||
? 'For building frontend assets with webpack.'
|
||||
: 'Image that will be used during the build process.'}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="custom-select-wrapper">
|
||||
<Select
|
||||
@@ -419,17 +486,13 @@
|
||||
isClearable={false}
|
||||
/>
|
||||
</div>
|
||||
{#if application.buildPack === 'laravel'}
|
||||
<Explainer text="For building frontend assets with webpack." />
|
||||
{:else}
|
||||
<Explainer text={$t('application.base_build_image_explainer')} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if application.buildPack !== 'docker'}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="baseImage" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.base_image')}</label
|
||||
>{$t('application.base_image')}
|
||||
<Explainer explanation={'Image that will be used for the deployment.'} /></label
|
||||
>
|
||||
<div class="custom-select-wrapper">
|
||||
<Select
|
||||
@@ -443,13 +506,15 @@
|
||||
isClearable={false}
|
||||
/>
|
||||
</div>
|
||||
<Explainer text={$t('application.base_image_explainer')} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')}
|
||||
<div class="grid grid-cols-2 items-center pb-8">
|
||||
<label for="deploymentType" class="text-base font-bold text-stone-100"
|
||||
>Deployment Type</label
|
||||
>Deployment Type
|
||||
<Explainer
|
||||
explanation={"Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."}
|
||||
/></label
|
||||
>
|
||||
<div class="custom-select-wrapper">
|
||||
<Select
|
||||
@@ -463,87 +528,131 @@
|
||||
isClearable={false}
|
||||
/>
|
||||
</div>
|
||||
<Explainer
|
||||
text="Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $features.beta}
|
||||
{#if !application.settings.isBot && !application.settings.isPublicRepository}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="isDBBranching"
|
||||
isCenter={false}
|
||||
bind:setting={isDBBranching}
|
||||
on:click={() => changeSettings('isDBBranching')}
|
||||
title="Enable DB Branching"
|
||||
description="Enable DB Branching"
|
||||
/>
|
||||
</div>
|
||||
{#if isDBBranching}
|
||||
<button
|
||||
on:click|stopPropagation|preventDefault={() =>
|
||||
goto(`/applications/${id}/configuration/database`)}
|
||||
class="btn btn-sm">Configure Connected Database</button
|
||||
>
|
||||
{#if application.connectedDatabase}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="baseImage" class="text-base font-bold text-stone-100"
|
||||
>Base Database
|
||||
<Explainer
|
||||
explanation={'The name of the database that will be used as base when branching.'}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
name="baseDatabaseBranch"
|
||||
required
|
||||
id="baseDatabaseBranch"
|
||||
bind:value={baseDatabaseBranch}
|
||||
/>
|
||||
</div>
|
||||
<div class="text-center bg-green-600 rounded">
|
||||
Connected to {application.connectedDatabase.databaseId}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">{$t('application.application')}</div>
|
||||
</div>
|
||||
<div class="grid grid-flow-row gap-2 px-10">
|
||||
<div class="grid grid-cols-2">
|
||||
<div class="flex-col">
|
||||
<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
|
||||
>{$t('application.url_fqdn')}</label
|
||||
>
|
||||
{#if browser && window.location.hostname === 'demo.coolify.io'}
|
||||
<Explainer
|
||||
text="<span class='text-white font-bold'>You can use the predefined random url name or enter your own domain name.</span>"
|
||||
/>
|
||||
{/if}
|
||||
<Explainer text={$t('application.https_explainer')} />
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
readonly={isDisabled}
|
||||
disabled={isDisabled}
|
||||
bind:this={domainEl}
|
||||
name="fqdn"
|
||||
id="fqdn"
|
||||
required
|
||||
bind:value={application.fqdn}
|
||||
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
|
||||
placeholder="eg: https://coollabs.io"
|
||||
/>
|
||||
{#if forceSave}
|
||||
<div class="flex-col space-y-2 pt-4 text-center">
|
||||
{#if isNonWWWDomainOK}
|
||||
<button
|
||||
class="bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
{/if}
|
||||
{#if dualCerts}
|
||||
{#if isWWWDomainOK}
|
||||
<button
|
||||
class="bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center pb-8">
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="isBot"
|
||||
isCenter={false}
|
||||
bind:setting={isBot}
|
||||
on:click={() => changeSettings('isBot')}
|
||||
title="Is your application a bot?"
|
||||
description="You can deploy applications without domains or make them to listen on the <span class='text-settings font-bold'>Exposed Port</span>.<br></Setting><br>Useful to host <span class='text-settings font-bold'>Twitch bots, regular jobs, or anything that does not require an incoming HTTP connection.</span>"
|
||||
disabled={$status.application.isRunning}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="dualCerts"
|
||||
dataTooltip={$t('forms.must_be_stopped_to_modify')}
|
||||
disabled={$status.application.isRunning}
|
||||
isCenter={false}
|
||||
bind:setting={dualCerts}
|
||||
title={$t('application.ssl_www_and_non_www')}
|
||||
description={$t('application.ssl_explainer')}
|
||||
description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
|
||||
on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
|
||||
/>
|
||||
</div>
|
||||
{#if !isBot}
|
||||
<div class="grid grid-cols-2 items-center pb-8">
|
||||
<label for="fqdn" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.url_fqdn')}
|
||||
<Explainer
|
||||
explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
<input
|
||||
readonly={isDisabled}
|
||||
disabled={isDisabled}
|
||||
name="fqdn"
|
||||
id="fqdn"
|
||||
bind:value={application.fqdn}
|
||||
pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
|
||||
placeholder="eg: https://coollabs.io"
|
||||
/>
|
||||
{#if forceSave}
|
||||
<div class="flex-col space-y-2 pt-4 text-center">
|
||||
{#if isNonWWWDomainOK}
|
||||
<button
|
||||
class="btn btn-sm bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
{/if}
|
||||
{#if dualCerts}
|
||||
{#if isWWWDomainOK}
|
||||
<button
|
||||
class="btn btn-sm bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if application.buildPack === 'python'}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="pythonModule" class="text-base font-bold text-stone-100">WSGI / ASGI</label>
|
||||
@@ -595,7 +704,10 @@
|
||||
{/if}
|
||||
{#if !staticDeployments.includes(application.buildPack)}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="port" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
|
||||
<label for="port" class="text-base font-bold text-stone-100"
|
||||
>{$t('forms.port')}
|
||||
<Explainer explanation={'The port your application listens on.'} /></label
|
||||
>
|
||||
<input
|
||||
disabled={isDisabled}
|
||||
readonly={!$appSession.isAdmin}
|
||||
@@ -606,8 +718,12 @@
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
|
||||
<div class="grid grid-cols-2 items-center pb-8">
|
||||
<label for="exposePort" class="text-base font-bold text-stone-100"
|
||||
>Exposed Port <Explainer
|
||||
explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
readonly={!$appSession.isAdmin && !$status.application.isRunning}
|
||||
disabled={isDisabled}
|
||||
@@ -616,12 +732,9 @@
|
||||
bind:value={application.exposePort}
|
||||
placeholder="12345"
|
||||
/>
|
||||
<Explainer
|
||||
text={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
|
||||
/>
|
||||
</div>
|
||||
{#if !notNodeDeployments.includes(application.buildPack)}
|
||||
<div class="grid grid-cols-2 items-center pt-4">
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="installCommand" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.install_command')}</label
|
||||
>
|
||||
@@ -647,7 +760,7 @@
|
||||
placeholder="{$t('forms.default')}: yarn build"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid grid-cols-2 items-center pb-8">
|
||||
<label for="startCommand" class="text-base font-bold text-stone-100"
|
||||
>{$t('application.start_command')}</label
|
||||
>
|
||||
@@ -664,7 +777,9 @@
|
||||
{#if application.buildPack === 'docker'}
|
||||
<div class="grid grid-cols-2 items-center pt-4">
|
||||
<label for="dockerFileLocation" class="text-base font-bold text-stone-100"
|
||||
>Dockerfile Location</label
|
||||
>Dockerfile Location <Explainer
|
||||
explanation={"Should be absolute path, like <span class='text-settings font-bold'>/data/Dockerfile</span> or <span class='text-settings font-bold'>/Dockerfile.</span>"}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
disabled={isDisabled}
|
||||
@@ -674,9 +789,6 @@
|
||||
bind:value={application.dockerFileLocation}
|
||||
placeholder="default: /Dockerfile"
|
||||
/>
|
||||
<Explainer
|
||||
text="Should be absolute path, like <span class='text-green-500 font-bold'>/data/Dockerfile</span> or <span class='text-green-500 font-bold'>/Dockerfile.</span>"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if application.buildPack === 'deno'}
|
||||
@@ -692,7 +804,11 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="denoOptions" class="text-base font-bold text-stone-100">Arguments</label>
|
||||
<label for="denoOptions" class="text-base font-bold text-stone-100"
|
||||
>Arguments <Explainer
|
||||
explanation={"List of arguments to pass to <span class='text-settings font-bold'>deno run</span> command. Could include permissions, configurations files, etc."}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
disabled={isDisabled}
|
||||
readonly={!$appSession.isAdmin}
|
||||
@@ -701,18 +817,17 @@
|
||||
bind:value={application.denoOptions}
|
||||
placeholder="eg: --allow-net --allow-hrtime --config path/to/file.json"
|
||||
/>
|
||||
<Explainer
|
||||
text="List of arguments to pass to <span class='text-green-500 font-bold'>deno run</span> command. Could include permissions, configurations files, etc."
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if application.buildPack !== 'laravel'}
|
||||
{#if application.buildPack !== 'laravel' && application.buildPack !== 'heroku'}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="flex-col">
|
||||
<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
|
||||
>{$t('forms.base_directory')}</label
|
||||
>{$t('forms.base_directory')}
|
||||
<Explainer
|
||||
explanation={"Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings font-bold'>monorepos</span>."}
|
||||
/></label
|
||||
>
|
||||
<Explainer text={$t('application.directory_to_use_explainer')} />
|
||||
</div>
|
||||
<input
|
||||
disabled={isDisabled}
|
||||
@@ -728,9 +843,11 @@
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="flex-col">
|
||||
<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
|
||||
>{$t('forms.publish_directory')}</label
|
||||
>{$t('forms.publish_directory')}
|
||||
<Explainer
|
||||
explanation={"Directory containing all the assets for deployment. <br> For example: <span class='text-settings font-bold'>dist</span>,<span class='text-settings font-bold'>_site</span> or <span class='text-settings font-bold'>public</span>."}
|
||||
/></label
|
||||
>
|
||||
<Explainer text={$t('application.publish_directory_explainer')} />
|
||||
</div>
|
||||
|
||||
<input
|
||||
@@ -750,26 +867,33 @@
|
||||
<div class="title">{$t('application.features')}</div>
|
||||
</div>
|
||||
<div class="px-10 pb-10">
|
||||
{#if !application.settings.isPublicRepository}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="autodeploy"
|
||||
isCenter={false}
|
||||
bind:setting={autodeploy}
|
||||
on:click={() => changeSettings('autodeploy')}
|
||||
title={$t('application.enable_automatic_deployment')}
|
||||
description={$t('application.enable_auto_deploy_webhooks')}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if !application.settings.isBot && !application.settings.isPublicRepository}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="previews"
|
||||
isCenter={false}
|
||||
bind:setting={previews}
|
||||
on:click={() => changeSettings('previews')}
|
||||
title={$t('application.enable_mr_pr_previews')}
|
||||
description={$t('application.enable_preview_deploy_mr_pr_requests')}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
isCenter={false}
|
||||
bind:setting={autodeploy}
|
||||
on:click={() => changeSettings('autodeploy')}
|
||||
title={$t('application.enable_automatic_deployment')}
|
||||
description={$t('application.enable_auto_deploy_webhooks')}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
isCenter={false}
|
||||
bind:setting={previews}
|
||||
on:click={() => changeSettings('previews')}
|
||||
title={$t('application.enable_mr_pr_previews')}
|
||||
description={$t('application.enable_preview_deploy_mr_pr_requests')}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="debug"
|
||||
isCenter={false}
|
||||
bind:setting={debug}
|
||||
on:click={() => changeSettings('debug')}
|
||||
|
||||
@@ -6,14 +6,13 @@
|
||||
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import { get, post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import LoadingLogs from '$lib/components/LoadingLogs.svelte';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
|
||||
let logs: any = [];
|
||||
let loading = true;
|
||||
let currentStatus: any;
|
||||
let streamInterval: any;
|
||||
let followingBuild: any;
|
||||
@@ -46,7 +45,6 @@
|
||||
logs = logs.concat(
|
||||
responseLogs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
|
||||
);
|
||||
loading = false;
|
||||
streamInterval = setInterval(async () => {
|
||||
if (status !== 'running' && status !== 'queued') {
|
||||
clearInterval(streamInterval);
|
||||
@@ -63,13 +61,12 @@
|
||||
logs = logs.concat(
|
||||
data.logs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
|
||||
);
|
||||
dispatch('updateBuildStatus', { status });
|
||||
dispatch('updateBuildStatus', { status, took: data.took });
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
@@ -82,7 +79,6 @@
|
||||
applicationId: id
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
@@ -96,84 +92,82 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<Loading />
|
||||
{:else}
|
||||
<div class="relative ">
|
||||
{#if currentStatus === 'running'}
|
||||
<LoadingLogs />
|
||||
{/if}
|
||||
{#if currentStatus === 'queued'}
|
||||
<div class="text-center font-bold text-xl">{$t('application.build.queued_waiting_exec')}</div>
|
||||
{:else}
|
||||
<div class="flex justify-end sticky top-0 p-1 mx-1">
|
||||
<div class="relative ">
|
||||
{#if currentStatus === 'running'}
|
||||
<LoadingLogs />
|
||||
{/if}
|
||||
{#if currentStatus === 'queued'}
|
||||
<div class="text-center font-bold text-xl">{$t('application.build.queued_waiting_exec')}</div>
|
||||
{:else}
|
||||
<div class="flex justify-end sticky top-0 p-2 mx-1">
|
||||
<button
|
||||
id="follow"
|
||||
on:click={followBuild}
|
||||
class="bg-transparent btn btn-sm btn-linkhover:text-green-500 hover:bg-coolgray-500"
|
||||
class:text-green-500={followingBuild}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="8" y1="12" x2="12" y2="16" />
|
||||
<line x1="12" y1="8" x2="12" y2="16" />
|
||||
<line x1="16" y1="12" x2="12" y2="16" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
|
||||
{#if currentStatus === 'running'}
|
||||
<button
|
||||
on:click={followBuild}
|
||||
class="bg-transparent hover:text-green-500 hover:bg-coolgray-500"
|
||||
data-tooltip="Follow logs"
|
||||
class:text-green-500={followingBuild}
|
||||
id="cancel"
|
||||
on:click={cancelBuild}
|
||||
class:animation-spin={cancelInprogress}
|
||||
class="bg-transparent btn btn-sm btn-link hover:text-red-500 hover:bg-coolgray-500"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="8" y1="12" x2="12" y2="16" />
|
||||
<line x1="12" y1="8" x2="12" y2="16" />
|
||||
<line x1="16" y1="12" x2="12" y2="16" />
|
||||
</svg>
|
||||
{#if cancelInprogress}
|
||||
Cancelling...
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M10 10l4 4m0 -4l-4 4" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{#if currentStatus === 'running'}
|
||||
<button
|
||||
on:click={cancelBuild}
|
||||
class:animation-spin={cancelInprogress}
|
||||
class="bg-transparent hover:text-red-500 hover:bg-coolgray-500"
|
||||
data-tooltip="Cancel build"
|
||||
>
|
||||
{#if cancelInprogress}
|
||||
Cancelling...
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M10 10l4 4m0 -4l-4 4" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if logs.length > 0}
|
||||
<div
|
||||
class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
|
||||
bind:this={logsEl}
|
||||
>
|
||||
{#each logs as log}
|
||||
<div>{log.line + '\n'}</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
|
||||
>
|
||||
No logs found.
|
||||
</div>
|
||||
<Tooltip triggeredBy="#cancel">Cancel build</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
{#if logs.length > 0}
|
||||
<div
|
||||
class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
|
||||
bind:this={logsEl}
|
||||
>
|
||||
{#each logs as log}
|
||||
<div>{log.line + '\n'}</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
|
||||
>
|
||||
No logs found.
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -28,17 +28,20 @@
|
||||
import { get } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { changeQueryParams, dateOptions, errorNotification } from '$lib/common';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
|
||||
let buildId: any;
|
||||
|
||||
let skip = 0;
|
||||
let noMoreBuilds = buildCount < 5 || buildCount <= skip;
|
||||
|
||||
let buildTook = 0;
|
||||
const { id } = $page.params;
|
||||
let preselectedBuildId = $page.url.searchParams.get('buildId');
|
||||
if (preselectedBuildId) buildId = preselectedBuildId;
|
||||
|
||||
async function updateBuildStatus({ detail }: { detail: any }) {
|
||||
const { status } = detail;
|
||||
const { status, took } = detail;
|
||||
if (status !== 'running') {
|
||||
try {
|
||||
const data = await get(`/applications/${id}/logs/build?buildId=${buildId}`);
|
||||
@@ -58,6 +61,7 @@
|
||||
if (build.id === buildId) build.status = status;
|
||||
return build;
|
||||
});
|
||||
buildTook = took;
|
||||
}
|
||||
}
|
||||
async function loadMoreBuilds() {
|
||||
@@ -137,19 +141,18 @@
|
||||
<div class="top-4 md:sticky">
|
||||
{#each builds as build, index (build.id)}
|
||||
<div
|
||||
data-tooltip={new Intl.DateTimeFormat('default', dateOptions).format(
|
||||
new Date(build.createdAt)
|
||||
) + `\n${build.status}`}
|
||||
id={`building-${build.id}`}
|
||||
on:click={() => loadBuild(build.id)}
|
||||
class:rounded-tr={index === 0}
|
||||
class:rounded-br={index === builds.length - 1}
|
||||
class="tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl "
|
||||
class="flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
|
||||
class:bg-coolgray-400={buildId === build.id}
|
||||
class:border-red-500={build.status === 'failed'}
|
||||
class:border-orange-500={build.status === 'canceled'}
|
||||
class:border-green-500={build.status === 'success'}
|
||||
class:border-yellow-500={build.status === 'running'}
|
||||
>
|
||||
<div class="flex-col px-2">
|
||||
<div class="flex-col px-2 text-center min-w-[10rem]">
|
||||
<div class="text-sm font-bold">
|
||||
{build.branch || application.branch}
|
||||
</div>
|
||||
@@ -157,11 +160,14 @@
|
||||
{build.type}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1" />
|
||||
|
||||
<div class="w-48 text-center text-xs">
|
||||
{#if build.status === 'running'}
|
||||
<div class="font-bold">{$t('application.build.running')}</div>
|
||||
<div>
|
||||
Elapsed
|
||||
<span class="font-bold">{buildTook}s</span>
|
||||
</div>
|
||||
{:else if build.status === 'queued'}
|
||||
<div class="font-bold">{$t('application.build.queued')}</div>
|
||||
{:else}
|
||||
@@ -172,12 +178,16 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<Tooltip triggeredBy={`#building-${build.id}`}
|
||||
>{new Intl.DateTimeFormat('default', dateOptions).format(new Date(build.createdAt)) +
|
||||
`\n${build.status}`}</Tooltip
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#if !noMoreBuilds}
|
||||
{#if buildCount > 5}
|
||||
<div class="flex space-x-2">
|
||||
<button disabled={noMoreBuilds} class="w-full" on:click={loadMoreBuilds}
|
||||
<button disabled={noMoreBuilds} class=" btn btn-sm w-full" on:click={loadMoreBuilds}
|
||||
>{$t('application.build.load_more')}</button
|
||||
>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
import { errorNotification } from '$lib/common';
|
||||
import LoadingLogs from '$lib/components/LoadingLogs.svelte';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
|
||||
let application: any = {};
|
||||
let logsLoading = false;
|
||||
@@ -38,7 +39,6 @@
|
||||
logs = data.logs;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
logsLoading = false;
|
||||
@@ -146,9 +146,9 @@
|
||||
{/if}
|
||||
<div class="flex justify-end sticky top-0 p-1 mx-1">
|
||||
<button
|
||||
id="follow"
|
||||
on:click={followBuild}
|
||||
class="bg-transparent"
|
||||
data-tooltip="Follow logs"
|
||||
class="bg-transparent btn btn-sm btn-link"
|
||||
class:text-green-500={followingLogs}
|
||||
>
|
||||
<svg
|
||||
@@ -168,6 +168,7 @@
|
||||
<line x1="16" y1="12" x2="12" y2="16" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
|
||||
|
||||
@@ -21,13 +21,13 @@
|
||||
import Secret from './_Secret.svelte';
|
||||
import { get, post } from '$lib/api';
|
||||
import { page } from '$app/stores';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { t } from '$lib/translations';
|
||||
import { goto } from '$app/navigation';
|
||||
import { errorNotification, getDomain } from '$lib/common';
|
||||
import { onMount } from 'svelte';
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import { addToast } from '$lib/store';
|
||||
import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
|
||||
@@ -59,7 +59,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 {
|
||||
@@ -142,7 +145,7 @@
|
||||
{:else}
|
||||
<div class="mx-auto max-w-6xl px-6 pt-4">
|
||||
<div class="flex justify-center py-4 text-center">
|
||||
<Explainer
|
||||
<SimpleExplainer
|
||||
customClass="w-full"
|
||||
text={applicationSecrets.length === 0
|
||||
? "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
|
||||
@@ -191,12 +194,14 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex items-center justify-center">
|
||||
<button class="bg-coollabs hover:bg-coollabs-100" on:click={() => redeploy(container)}
|
||||
>{$t('application.preview.redeploy')}</button
|
||||
<button
|
||||
class="btn btn-sm bg-coollabs hover:bg-coollabs-100"
|
||||
on:click={() => redeploy(container)}>{$t('application.preview.redeploy')}</button
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
class:bg-red-600={!loading.removing}
|
||||
class:hover:bg-red-500={!loading.removing}
|
||||
disabled={loading.removing}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
import { t } from '$lib/translations';
|
||||
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;
|
||||
@@ -43,7 +43,8 @@
|
||||
const batchSecretsPairs = eachValuePair
|
||||
.filter((secret) => !secret.startsWith('#') && secret)
|
||||
.map((secret) => {
|
||||
const [name, value] = secret.split('=');
|
||||
const [name, ...rest] = secret.split('=');
|
||||
const value = rest.join('=');
|
||||
const cleanValue = value?.replaceAll('"', '') || '';
|
||||
return {
|
||||
name,
|
||||
@@ -59,7 +60,10 @@
|
||||
);
|
||||
batchSecrets = '';
|
||||
await refreshSecrets();
|
||||
toast.push('Secrets saved.');
|
||||
addToast({
|
||||
message: 'Secrets saved.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -147,9 +151,6 @@
|
||||
<h2 class="title my-6 font-bold">Paste .env file</h2>
|
||||
<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"
|
||||
type="submit">Batch add secrets</button
|
||||
>
|
||||
<button class="btn btn-sm bg-applications" type="submit">Batch add secrets</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
import { page } from '$app/stores';
|
||||
import Storage from './_Storage.svelte';
|
||||
import { get } from '$lib/api';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
|
||||
const { id } = $page.params;
|
||||
@@ -88,7 +88,7 @@
|
||||
|
||||
<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
|
||||
<div class="flex justify-center py-4 text-center">
|
||||
<Explainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
|
||||
<SimpleExplainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
|
||||
</div>
|
||||
<table class="mx-auto border-separate text-left">
|
||||
<thead>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
|
||||
@@ -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;
|
||||
@@ -61,14 +45,11 @@
|
||||
</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"
|
||||
>
|
||||
<button on:click={newApplication} 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"
|
||||
@@ -83,7 +64,7 @@
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-col justify-center">
|
||||
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
|
||||
{#if !applications || ownApplications.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>
|
||||
@@ -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>
|
||||
@@ -140,6 +87,9 @@
|
||||
{#if application.fqdn}
|
||||
<div class="truncate text-center">{getDomain(application.fqdn) || ''}</div>
|
||||
{/if}
|
||||
{#if application.settings.isBot}
|
||||
<div class="truncate text-center">BOT</div>
|
||||
{/if}
|
||||
{#if application.destinationDocker?.name}
|
||||
<div class="truncate text-center">{application.destinationDocker.name}</div>
|
||||
{/if}
|
||||
@@ -151,7 +101,7 @@
|
||||
<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
|
||||
Destination Missing
|
||||
</div>
|
||||
{:else if !application.fqdn}
|
||||
{:else if !application.fqdn && !application.settings.isBot}
|
||||
<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
|
||||
URL Missing
|
||||
</div>
|
||||
@@ -167,41 +117,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>
|
||||
|
||||
@@ -14,10 +14,9 @@
|
||||
import CouchDb from './_CouchDb.svelte';
|
||||
import EdgeDB from './_EdgeDB.svelte';
|
||||
import { post } from '$lib/api';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { appSession, status } from '$lib/store';
|
||||
import { addToast, appSession, status } from '$lib/store';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
@@ -62,7 +61,9 @@
|
||||
}
|
||||
|
||||
async function changeSettings(name: any) {
|
||||
if (publicLoading || !$status.database.isRunning) return;
|
||||
if (name !== 'appendOnly') {
|
||||
if (publicLoading || !$status.database.isRunning) return;
|
||||
}
|
||||
publicLoading = true;
|
||||
let data = {
|
||||
isPublic,
|
||||
@@ -95,7 +96,10 @@
|
||||
loading = true;
|
||||
await post(`/databases/${id}`, { ...database, isRunning: $status.database.isRunning });
|
||||
generateDbDetails();
|
||||
toast.push('Configuration saved.');
|
||||
addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
@@ -111,9 +115,10 @@
|
||||
{#if $appSession.isAdmin}
|
||||
<button
|
||||
type="submit"
|
||||
class:bg-purple-600={!loading}
|
||||
class:hover:bg-purple-500={!loading}
|
||||
disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
|
||||
class="btn btn-sm"
|
||||
class:loading
|
||||
class:bg-databases={!loading}
|
||||
disabled={loading}>{$t('forms.save')}</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -209,13 +214,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}
|
||||
<Explainer
|
||||
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}
|
||||
@@ -236,6 +241,7 @@
|
||||
<div class="px-10 pb-10">
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="isPublic"
|
||||
loading={publicLoading}
|
||||
bind:setting={isPublic}
|
||||
on:click={() => changeSettings('isPublic')}
|
||||
@@ -247,6 +253,8 @@
|
||||
{#if database.type === 'redis'}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="appendOnly"
|
||||
loading={publicLoading}
|
||||
bind:setting={appendOnly}
|
||||
on:click={() => changeSettings('appendOnly')}
|
||||
title={$t('database.change_append_only_mode')}
|
||||
|
||||
@@ -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 Explainer from '$lib/components/Explainer.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')}
|
||||
<Explainer 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')} <Explainer 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>
|
||||
|
||||
@@ -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 Explainer from '$lib/components/Explainer.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')}
|
||||
<Explainer 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>
|
||||
|
||||
@@ -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 Explainer from '$lib/components/Explainer.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')}
|
||||
<Explainer 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,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')}
|
||||
<Explainer explanation="Could be changed while the database is running." /></label
|
||||
>
|
||||
<CopyPasswordField
|
||||
disabled={!$status.database.isRunning}
|
||||
@@ -74,6 +75,5 @@
|
||||
name="rootUserPassword"
|
||||
bind:value={database.rootUserPassword}
|
||||
/>
|
||||
<Explainer text="Could be changed while the database is running." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 Explainer from '$lib/components/Explainer.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 <Explainer
|
||||
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')}
|
||||
<Explainer 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>
|
||||
|
||||
@@ -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 Explainer from '$lib/components/Explainer.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')}
|
||||
<Explainer 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>
|
||||
|
||||
@@ -60,48 +60,56 @@
|
||||
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
|
||||
import { appSession, status, disabledButton } from '$lib/store';
|
||||
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
const { id } = $page.params;
|
||||
|
||||
let loading = false;
|
||||
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) {
|
||||
loading = true;
|
||||
$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);
|
||||
} finally {
|
||||
loading = false;
|
||||
$status.database.initialLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
async function stopDatabase() {
|
||||
const sure = confirm($t('database.confirm_stop', { name: database.name }));
|
||||
if (sure) {
|
||||
loading = true;
|
||||
$status.database.initialLoading = true;
|
||||
$status.database.loading = true;
|
||||
try {
|
||||
await post(`/databases/${database.id}/stop`, {});
|
||||
return window.location.reload();
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
$status.database.initialLoading = false;
|
||||
$status.database.loading = false;
|
||||
await getStatus();
|
||||
}
|
||||
}
|
||||
}
|
||||
async function startDatabase() {
|
||||
loading = true;
|
||||
$status.database.initialLoading = true;
|
||||
$status.database.loading = true;
|
||||
try {
|
||||
await post(`/databases/${database.id}/start`, {});
|
||||
return window.location.reload();
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
$status.database.initialLoading = false;
|
||||
$status.database.loading = false;
|
||||
await getStatus();
|
||||
}
|
||||
}
|
||||
async function getStatus() {
|
||||
@@ -114,6 +122,9 @@
|
||||
}
|
||||
onDestroy(() => {
|
||||
$status.database.initialLoading = true;
|
||||
$status.database.isRunning = false;
|
||||
$status.database.isExited = false;
|
||||
$status.database.loading = false;
|
||||
clearInterval(statusInterval);
|
||||
});
|
||||
onMount(async () => {
|
||||
@@ -137,123 +148,37 @@
|
||||
|
||||
{#if id !== 'new'}
|
||||
<nav class="nav-side">
|
||||
{#if loading}
|
||||
<Loading fullscreen cover />
|
||||
{:else}
|
||||
{#if database.type && database.destinationDockerId && database.version && database.defaultDatabase}
|
||||
{#if $status.database.isExited}
|
||||
<a
|
||||
href={!$disabledButton ? `/databases/${id}/logs` : null}
|
||||
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
|
||||
data-tooltip="Service exited with an error!"
|
||||
sveltekit:prefetch
|
||||
{#if database.type && database.destinationDockerId && database.version && database.defaultDatabase}
|
||||
{#if $status.database.isExited}
|
||||
<a
|
||||
id="exited"
|
||||
href={!$disabledButton ? `/databases/${id}/logs` : null}
|
||||
class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
|
||||
sveltekit:prefetch
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentcolor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
|
||||
/>
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
</a>
|
||||
{/if}
|
||||
{#if $status.database.initialLoading}
|
||||
<button
|
||||
class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
|
||||
>
|
||||
<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="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
|
||||
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
|
||||
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
|
||||
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
|
||||
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
|
||||
<line x1="11" y1="19.94" x2="11" y2="19.95" />
|
||||
</svg>
|
||||
</button>
|
||||
{:else if $status.database.isRunning}
|
||||
<button
|
||||
on:click={stopDatabase}
|
||||
title={$t('database.stop_database')}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('database.stop_database')
|
||||
: $t('database.permission_denied_stop_database')}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="6" y="5" width="4" height="14" rx="1" />
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
on:click={startDatabase}
|
||||
title={$t('database.start_database')}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('database.start_database')
|
||||
: $t('database.permission_denied_start_database')}
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M7 4v16l13 -8z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
|
||||
/>
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
</a>
|
||||
<Tooltip triggeredBy="#exited">{'Service exited with an error!'}</Tooltip>
|
||||
{/if}
|
||||
<div class="border border-stone-700 h-8" />
|
||||
<a
|
||||
href="/databases/{id}"
|
||||
sveltekit:prefetch
|
||||
class="hover:text-yellow-500 rounded"
|
||||
class:text-yellow-500={$page.url.pathname === `/databases/${id}`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/databases/${id}`}
|
||||
>
|
||||
{#if $status.database.initialLoading}
|
||||
<button
|
||||
title={$t('application.configurations')}
|
||||
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
|
||||
data-tooltip={$t('application.configurations')}
|
||||
class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out hover:bg-transparent"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -266,35 +191,25 @@
|
||||
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></button
|
||||
></a
|
||||
>
|
||||
<div class="border border-stone-700 h-8" />
|
||||
<a
|
||||
href={$status.database.isRunning ? `/databases/${id}/logs` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/databases/${id}/logs`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/logs`}
|
||||
>
|
||||
<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
|
||||
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
|
||||
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
|
||||
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
|
||||
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
|
||||
<line x1="11" y1="19.94" x2="11" y2="19.95" />
|
||||
</svg>
|
||||
</button>
|
||||
{:else if $status.database.isRunning}
|
||||
<button
|
||||
title={$t('database.logs')}
|
||||
disabled={!$status.database.isRunning}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip={$t('database.logs')}
|
||||
id="stop"
|
||||
on:click={stopDatabase}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
class="w-6 h-6"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@@ -303,26 +218,120 @@
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<line x1="3" y1="6" x2="3" y2="19" />
|
||||
<line x1="12" y1="6" x2="12" y2="19" />
|
||||
<line x1="21" y1="6" x2="21" y2="19" />
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
<rect x="6" y="5" width="4" height="14" rx="1" />
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#stop">{'Stop'}</Tooltip>
|
||||
{:else}
|
||||
<button
|
||||
id="start"
|
||||
on:click={startDatabase}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M7 4v16l13 -8z" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#start">{'Start'}</Tooltip>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="border border-stone-700 h-8" />
|
||||
<a
|
||||
id="configuration"
|
||||
href="/databases/{id}"
|
||||
sveltekit:prefetch
|
||||
class="hover:text-yellow-500 rounded"
|
||||
class:text-yellow-500={$page.url.pathname === `/databases/${id}`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/databases/${id}`}
|
||||
>
|
||||
<button class="icons bg-transparent m text-sm disabled:text-red-500">
|
||||
<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></button
|
||||
></a
|
||||
>
|
||||
<Tooltip triggeredBy="#configuration">{'Configuration'}</Tooltip>
|
||||
<div class="border border-stone-700 h-8" />
|
||||
<a
|
||||
id="databaselogs"
|
||||
href={$status.database.isRunning ? `/databases/${id}/logs` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/databases/${id}/logs`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/logs`}
|
||||
>
|
||||
<button disabled={!$status.database.isRunning} class="icons bg-transparent text-sm">
|
||||
<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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<line x1="3" y1="6" x2="3" y2="19" />
|
||||
<line x1="12" y1="6" x2="12" y2="19" />
|
||||
<line x1="21" y1="6" x2="21" y2="19" />
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
<Tooltip triggeredBy="#databaselogs">{'Logs'}</Tooltip>
|
||||
{#if forceDelete}
|
||||
<button
|
||||
on:click={deleteDatabase}
|
||||
title={$t('database.delete_database')}
|
||||
on:click={() => deleteDatabase(true)}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:hover:text-red-500={$appSession.isAdmin}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('database.delete_database')
|
||||
: $t('database.permission_denied_delete_database')}><DeleteIcon /></button
|
||||
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}
|
||||
<slot />
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
import { get, post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
const from = $page.url.searchParams.get('from');
|
||||
@@ -45,6 +46,11 @@
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
onMount(async () => {
|
||||
if (destinations.length === 1) {
|
||||
await handleSubmit(destinations[0].id);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
@@ -55,9 +61,11 @@
|
||||
<div class="flex justify-center">
|
||||
{#if !destinations || destinations.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="pb-2 text-center font-bold">{$t('application.configuration.no_configurable_destination')}</div>
|
||||
<div class="pb-2 text-center font-bold">
|
||||
{$t('application.configuration.no_configurable_destination')}
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
|
||||
<a href="/destinations/new" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
|
||||
<svg
|
||||
class="w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -31,19 +31,12 @@
|
||||
|
||||
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 EdgeDb from '$lib/components/svg/databases/EdgeDB.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 });
|
||||
@@ -63,23 +56,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 />
|
||||
{:else if type.name === 'edgedb'}
|
||||
<EdgeDb 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} />
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
import { get } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
|
||||
@@ -17,9 +18,13 @@
|
||||
let logsEl: any;
|
||||
let position = 0;
|
||||
let loadingLogs = false;
|
||||
let database: any = {};
|
||||
let database = {
|
||||
name: null
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
const response = await get(`/databases/${id}`);
|
||||
database = response.database;
|
||||
const { logs: firstLogs } = await get(`/databases/${id}/logs`);
|
||||
logs = firstLogs;
|
||||
loadAllLogs();
|
||||
@@ -40,7 +45,6 @@
|
||||
logs = data.logs;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loadingLogs = false;
|
||||
@@ -94,29 +98,6 @@
|
||||
</div>
|
||||
<span class="text-xs">{database.name}</span>
|
||||
</div>
|
||||
|
||||
{#if database.fqdn}
|
||||
<a
|
||||
href={database.fqdn}
|
||||
target="_blank"
|
||||
class="icons tooltip-bottom flex items-center bg-transparent text-sm"
|
||||
><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}
|
||||
</div>
|
||||
<div class="flex flex-row justify-center space-x-2 px-10 pt-6">
|
||||
{#if logs.length === 0}
|
||||
@@ -129,9 +110,9 @@
|
||||
{/if}
|
||||
<div class="flex justify-end sticky top-0 p-1 mx-1">
|
||||
<button
|
||||
id="follow"
|
||||
on:click={followBuild}
|
||||
class="bg-transparent"
|
||||
data-tooltip="Follow logs"
|
||||
class="bg-transparent btn btn-sm"
|
||||
class:text-green-500={followingLogs}
|
||||
>
|
||||
<svg
|
||||
@@ -151,6 +132,7 @@
|
||||
<line x1="16" y1="12" x2="12" y2="16" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
|
||||
|
||||
@@ -19,18 +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 EdgeDb from '$lib/components/svg/databases/EdgeDB.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', {});
|
||||
@@ -51,9 +44,9 @@
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">{$t('index.databases')}</div>
|
||||
<div on:click={newDatabase} class="add-icon cursor-pointer bg-purple-600 hover:bg-purple-500">
|
||||
<button on:click={newDatabase} class="btn btn-square btn-sm bg-databases">
|
||||
<svg
|
||||
class="w-6"
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -65,10 +58,10 @@
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-col justify-center">
|
||||
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
|
||||
{#if !databases || ownDatabases.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
|
||||
@@ -80,23 +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 />
|
||||
{:else if database.type === 'edgedb'}
|
||||
<EdgeDb isAbsolute />
|
||||
{/if}
|
||||
<DatabaseIcons type={database.type} isAbsolute={true} />
|
||||
<div class="truncate text-center text-xl font-bold">
|
||||
{database.name}
|
||||
</div>
|
||||
@@ -121,23 +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 />
|
||||
{:else if database.type === 'edgedb'}
|
||||
<EdgeDb isAbsolute />
|
||||
{/if}
|
||||
<DatabaseIcons type={database.type} isAbsolute={true} />
|
||||
<div class="truncate text-center text-xl font-bold">
|
||||
{database.name}
|
||||
</div>
|
||||
|
||||
@@ -2,14 +2,13 @@
|
||||
export let destination: any;
|
||||
export let settings: any;
|
||||
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { page } from '$app/stores';
|
||||
import { get, post } from '$lib/api';
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import { addToast, appSession } from '$lib/store';
|
||||
import Setting from '$lib/components/Setting.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
@@ -24,7 +23,10 @@
|
||||
loading.save = true;
|
||||
try {
|
||||
await post(`/destinations/${id}`, { ...destination });
|
||||
toast.push('Configuration saved.');
|
||||
addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
@@ -96,7 +98,10 @@
|
||||
async function stopProxy() {
|
||||
try {
|
||||
await post(`/destinations/${id}/stop`, { engine: destination.engine });
|
||||
return toast.push($t('destination.coolify_proxy_stopped'));
|
||||
return addToast({
|
||||
message: $t('destination.coolify_proxy_stopped'),
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
@@ -104,7 +109,10 @@
|
||||
async function startProxy() {
|
||||
try {
|
||||
await post(`/destinations/${id}/start`, { engine: destination.engine });
|
||||
return toast.push($t('destination.coolify_proxy_started'));
|
||||
return addToast({
|
||||
message: $t('destination.coolify_proxy_started'),
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
@@ -114,7 +122,10 @@
|
||||
if (sure) {
|
||||
try {
|
||||
loading.restart = true;
|
||||
toast.push($t('destination.coolify_proxy_restarting'));
|
||||
addToast({
|
||||
message: $t('destination.coolify_proxy_restarting'),
|
||||
type: 'success'
|
||||
});
|
||||
await post(`/destinations/${id}/restart`, {
|
||||
engine: destination.engine,
|
||||
fqdn: settings.fqdn
|
||||
@@ -131,28 +142,27 @@
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
|
||||
<div class="flex space-x-1 pb-5">
|
||||
<div class="title font-bold">{$t('forms.configuration')}</div>
|
||||
<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5">
|
||||
<div class="title">{$t('forms.configuration')}</div>
|
||||
{#if $appSession.isAdmin}
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-sky-600 hover:bg-sky-500"
|
||||
class:bg-sky-600={!loading.save}
|
||||
class:hover:bg-sky-500={!loading.save}
|
||||
class="btn btn-sm"
|
||||
class:bg-destinations={!loading.save}
|
||||
class:loading={loading.save}
|
||||
disabled={loading.save}
|
||||
>{loading.save ? $t('forms.saving') : $t('forms.save')}
|
||||
>{$t('forms.save')}
|
||||
</button>
|
||||
<button
|
||||
class={loading.restart ? '' : 'bg-red-600 hover:bg-red-500'}
|
||||
class="btn btn-sm"
|
||||
class:loading={loading.restart}
|
||||
class:bg-error={!loading.restart}
|
||||
disabled={loading.restart}
|
||||
on:click|preventDefault={forceRestartProxy}
|
||||
>{loading.restart
|
||||
? $t('destination.restarting_please_wait')
|
||||
: $t('destination.force_restart_proxy')}</button
|
||||
on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10 ">
|
||||
<div class="grid lg:grid-cols-2 items-center px-10 ">
|
||||
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
|
||||
<input
|
||||
name="name"
|
||||
@@ -163,7 +173,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<div class="grid lg:grid-cols-2 items-center px-10">
|
||||
<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
|
||||
<CopyPasswordField
|
||||
id="engine"
|
||||
@@ -174,7 +184,7 @@
|
||||
value={destination.engine}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<div class="grid lg:grid-cols-2 items-center px-10">
|
||||
<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
|
||||
<CopyPasswordField
|
||||
id="network"
|
||||
@@ -186,14 +196,15 @@
|
||||
/>
|
||||
</div>
|
||||
{#if $appSession.teamId === '0'}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid lg:grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
id="changeProxySetting"
|
||||
loading={loading.proxy}
|
||||
disabled={cannotDisable}
|
||||
bind:setting={destination.isCoolifyProxyUsed}
|
||||
on:click={changeProxySetting}
|
||||
title={$t('destination.use_coolify_proxy')}
|
||||
description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
|
||||
description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.${
|
||||
cannotDisable
|
||||
? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
|
||||
: ''
|
||||
|
||||
@@ -40,10 +40,10 @@
|
||||
<div class="flex-col space-y-2 pb-10 text-center">
|
||||
<div class="text-xl font-bold text-white">{$t('destination.new.predefined_destinations')}</div>
|
||||
<div class="flex justify-center space-x-2">
|
||||
<button class="w-32" on:click={() => setPredefined('localDocker')}
|
||||
<button class="btn btn-sm" on:click={() => setPredefined('localDocker')}
|
||||
>{$t('sources.local_docker')}</button
|
||||
>
|
||||
<button class="w-32" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button>
|
||||
<button class="btn btn-sm" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button>
|
||||
<!-- <button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,11 +33,7 @@
|
||||
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
|
||||
<div class="flex items-center space-x-2 pb-5">
|
||||
<div class="title font-bold">{$t('forms.configuration')}</div>
|
||||
<button
|
||||
type="submit"
|
||||
class:bg-sky-600={!loading}
|
||||
class:hover:bg-sky-500={!loading}
|
||||
disabled={loading}
|
||||
<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
|
||||
>{loading
|
||||
? payload.isCoolifyProxyUsed
|
||||
? $t('destination.new.saving_and_configuring_proxy')
|
||||
@@ -69,12 +65,13 @@
|
||||
/>
|
||||
</div>
|
||||
{#if $appSession.teamId === '0'}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
id="changeProxySetting"
|
||||
bind:setting={payload.isCoolifyProxyUsed}
|
||||
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
|
||||
title={$t('destination.use_coolify_proxy')}
|
||||
description={$t('destination.new.install_proxy')}
|
||||
description={'This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.'}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
import { post } from '$lib/api';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
|
||||
import Setting from '$lib/components/Setting.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
|
||||
@@ -29,20 +29,18 @@
|
||||
</script>
|
||||
|
||||
<div class="text-center flex justify-center">
|
||||
<Explainer
|
||||
<SimpleExplainer
|
||||
customClass="max-w-[32rem]"
|
||||
text="Remote Docker Engines are using <span class='text-white font-bold'>SSH connection</span> to initiate connection. You need to setup an <span class='text-white font-bold'>SSH key</span> in advance on the server and install Docker. <br>See <a class='text-white' href='https://docs.coollabs.io'>docs</a> for more details."
|
||||
text="Remote Docker Engines are using <span class='text-white font-bold'>SSH</span> to communicate with the remote docker engine.
|
||||
You need to setup an <span class='text-white font-bold'>SSH key</span> in advance on the server and install Docker.
|
||||
<br>See <a class='text-white' href='https://docs.coollabs.io/coolify/destinations#remote-docker-engine' target='blank'>docs</a> for more details."
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-center px-6 pb-8">
|
||||
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
|
||||
<div class="flex items-center space-x-2 pb-5">
|
||||
<div class="title font-bold">{$t('forms.configuration')}</div>
|
||||
<button
|
||||
type="submit"
|
||||
class:bg-sky-600={!loading}
|
||||
class:hover:bg-sky-500={!loading}
|
||||
disabled={loading}
|
||||
<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
|
||||
>{loading
|
||||
? payload.isCoolifyProxyUsed
|
||||
? $t('destination.new.saving_and_configuring_proxy')
|
||||
@@ -95,12 +93,13 @@
|
||||
bind:value={payload.network}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
id="isCoolifyProxyUsed"
|
||||
bind:setting={payload.isCoolifyProxyUsed}
|
||||
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
|
||||
title={$t('destination.use_coolify_proxy')}
|
||||
description={$t('destination.new.install_proxy')}
|
||||
description={'This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.'}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -2,15 +2,14 @@
|
||||
export let destination: any;
|
||||
export let settings: any;
|
||||
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { page, session } from '$app/stores';
|
||||
import { page } from '$app/stores';
|
||||
import Setting from '$lib/components/Setting.svelte';
|
||||
import { get, post } from '$lib/api';
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import { addToast, appSession } from '$lib/store';
|
||||
|
||||
const { id } = $page.params;
|
||||
|
||||
@@ -28,7 +27,10 @@
|
||||
loading.save = true;
|
||||
try {
|
||||
await post(`/destinations/${id}`, { ...destination });
|
||||
toast.push('Configuration saved.');
|
||||
addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
@@ -36,8 +38,8 @@
|
||||
}
|
||||
}
|
||||
onMount(async () => {
|
||||
loading.proxy = true;
|
||||
if (destination.remoteEngine && destination.remoteVerified) {
|
||||
loading.proxy = true;
|
||||
const { isRunning } = await get(`/destinations/${id}/status`);
|
||||
if (isRunning === false && destination.isCoolifyProxyUsed === true) {
|
||||
destination.isCoolifyProxyUsed = !destination.isCoolifyProxyUsed;
|
||||
@@ -67,6 +69,7 @@
|
||||
loading.proxy = false;
|
||||
});
|
||||
async function changeProxySetting() {
|
||||
if (!destination.remoteVerified) return
|
||||
loading.proxy = true;
|
||||
if (!cannotDisable) {
|
||||
const isProxyActivated = destination.isCoolifyProxyUsed;
|
||||
@@ -103,7 +106,10 @@
|
||||
async function stopProxy() {
|
||||
try {
|
||||
await post(`/destinations/${id}/stop`, { engine: destination.engine });
|
||||
return toast.push($t('destination.coolify_proxy_stopped'));
|
||||
return addToast({
|
||||
message: $t('destination.coolify_proxy_stopped'),
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
@@ -111,7 +117,10 @@
|
||||
async function startProxy() {
|
||||
try {
|
||||
await post(`/destinations/${id}/start`, { engine: destination.engine });
|
||||
return toast.push($t('destination.coolify_proxy_started'));
|
||||
return addToast({
|
||||
message: $t('destination.coolify_proxy_started'),
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
@@ -121,7 +130,10 @@
|
||||
if (sure) {
|
||||
try {
|
||||
loading.restart = true;
|
||||
toast.push($t('destination.coolify_proxy_restarting'));
|
||||
addToast({
|
||||
message: $t('destination.coolify_proxy_restarting'),
|
||||
type: 'success'
|
||||
});
|
||||
await post(`/destinations/${id}/restart`, {
|
||||
engine: destination.engine,
|
||||
fqdn: settings.fqdn
|
||||
@@ -140,8 +152,10 @@
|
||||
loading.verify = true;
|
||||
await post(`/destinations/${id}/verify`, {});
|
||||
destination.remoteVerified = true;
|
||||
toast.push('Remote Docker Engine verified!');
|
||||
return;
|
||||
return addToast({
|
||||
message: 'Remote Docker Engine verified!',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
@@ -156,26 +170,28 @@
|
||||
{#if $appSession.isAdmin}
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-sky-600 hover:bg-sky-500"
|
||||
class:bg-sky-600={!loading.save}
|
||||
class:hover:bg-sky-500={!loading.save}
|
||||
class="btn btn-sm"
|
||||
class:loading={loading.save}
|
||||
class:bg-destinations={!loading.save}
|
||||
disabled={loading.save}
|
||||
>{loading.save ? $t('forms.saving') : $t('forms.save')}
|
||||
>{$t('forms.save')}
|
||||
</button>
|
||||
{#if !destination.remoteVerified}
|
||||
<button
|
||||
disabled={loading.verify}
|
||||
class="btn btn-sm"
|
||||
class:loading={loading.verify}
|
||||
on:click|preventDefault|stopPropagation={verifyRemoteDocker}
|
||||
>{loading.verify ? 'Verifying...' : 'Verify Remote Docker Engine'}</button
|
||||
>Verify Remote Docker Engine</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class={loading.restart ? '' : 'bg-red-600 hover:bg-red-500'}
|
||||
class="btn btn-sm"
|
||||
class:loading={loading.restart}
|
||||
class:bg-error={!loading.restart}
|
||||
disabled={loading.restart}
|
||||
on:click|preventDefault={forceRestartProxy}
|
||||
>{loading.restart
|
||||
? $t('destination.restarting_please_wait')
|
||||
: $t('destination.force_restart_proxy')}</button
|
||||
>{$t('destination.force_restart_proxy')}</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -244,14 +260,15 @@
|
||||
/></a
|
||||
>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
disabled={cannotDisable}
|
||||
id="changeProxySetting"
|
||||
disabled={cannotDisable || !destination.remoteVerified}
|
||||
loading={loading.proxy}
|
||||
bind:setting={destination.isCoolifyProxyUsed}
|
||||
on:click={changeProxySetting}
|
||||
title={$t('destination.use_coolify_proxy')}
|
||||
description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
|
||||
description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.${
|
||||
cannotDisable
|
||||
? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
|
||||
: ''
|
||||
|
||||
@@ -40,7 +40,6 @@
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return handlerNotFoundLoad(error, url);
|
||||
}
|
||||
};
|
||||
@@ -56,10 +55,16 @@
|
||||
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
const isDestinationDeletable =
|
||||
(destination?.application.length === 0 &&
|
||||
destination?.database.length === 0 &&
|
||||
destination?.service.length === 0) ||
|
||||
true;
|
||||
|
||||
async function deleteDestination(destination: any) {
|
||||
if (!isDestinationDeletable) return;
|
||||
const sure = confirm($t('application.confirm_to_delete', { name: destination.name }));
|
||||
if (sure) {
|
||||
try {
|
||||
@@ -70,21 +75,30 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
function deletable() {
|
||||
if (!isDestinationDeletable) {
|
||||
return 'Please delete all resources before deleting this.';
|
||||
}
|
||||
if ($appSession.isAdmin) {
|
||||
return $t('destination.delete_destination');
|
||||
} else {
|
||||
return $t('destination.permission_denied_delete_destination');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if id !== 'new'}
|
||||
{#if $page.params.id !== 'new'}
|
||||
<nav class="nav-side">
|
||||
<button
|
||||
id="delete"
|
||||
on:click={() => deleteDestination(destination)}
|
||||
title={$t('source.delete_git_source')}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:hover:text-red-500={$appSession.isAdmin}
|
||||
class="icons tooltip-bottom bg-transparent text-sm"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('destination.delete_destination')
|
||||
: $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button
|
||||
disabled={!$appSession.isAdmin && isDestinationDeletable}
|
||||
class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
|
||||
class="icons bg-transparent text-sm"
|
||||
class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
|
||||
>
|
||||
</nav>
|
||||
<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
|
||||
{/if}
|
||||
<slot />
|
||||
|
||||
@@ -39,9 +39,9 @@
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">{$t('index.destinations')}</div>
|
||||
{#if $appSession.isAdmin}
|
||||
<a href="/destinations/new" class="add-icon bg-sky-600 hover:bg-sky-500">
|
||||
<a href="/destinations/new" class="btn btn-square btn-sm bg-destinations">
|
||||
<svg
|
||||
class="w-6"
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -56,7 +56,7 @@
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-col justify-center">
|
||||
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
|
||||
{#if !destinations || ownDestinations.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="text-center text-xl font-bold">{$t('destination.no_destination_found')}</div>
|
||||
|
||||
@@ -24,11 +24,9 @@
|
||||
export let ownTeams: any;
|
||||
export let allTeams: any;
|
||||
|
||||
import { page } from '$app/stores';
|
||||
import { del, get, post } from '$lib/api';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import { addToast, appSession } from '$lib/store';
|
||||
import { goto } from '$app/navigation';
|
||||
import Cookies from 'js-cookie';
|
||||
if (accounts.length === 0) {
|
||||
@@ -42,7 +40,10 @@
|
||||
}
|
||||
try {
|
||||
await post(`/iam/user/password`, { id });
|
||||
toast.push('Password reset successfully. Please relogin to reset it.');
|
||||
return addToast({
|
||||
message: 'Password reset successfully. Please relogin to reset it.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
@@ -54,7 +55,10 @@
|
||||
}
|
||||
try {
|
||||
await del(`/iam/user/remove`, { id });
|
||||
toast.push('Account deleted.');
|
||||
addToast({
|
||||
message: 'Account deleted.',
|
||||
type: 'success'
|
||||
});
|
||||
const data = await get('/iam');
|
||||
accounts = data.accounts;
|
||||
} catch (error) {
|
||||
@@ -104,9 +108,9 @@
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
|
||||
<div on:click={newTeam} class="add-icon cursor-pointer bg-fuchsia-600 hover:bg-fuchsia-500">
|
||||
<button on:click={newTeam} class="btn btn-square btn-sm bg-iam">
|
||||
<svg
|
||||
class="w-6"
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -118,7 +122,7 @@
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if invitations.length > 0}
|
||||
@@ -132,11 +136,11 @@
|
||||
<span class="font-bold text-rose-600">{invitation.permission}</span> permission.
|
||||
</div>
|
||||
<button
|
||||
class="hover:bg-green-500"
|
||||
class="btn btn-sm btn-success"
|
||||
on:click={() => acceptInvitation(invitation.id, invitation.teamId)}>Accept</button
|
||||
>
|
||||
<button
|
||||
class="hover:bg-red-600"
|
||||
class="btn btn-sm btn-error"
|
||||
on:click={() => revokeInvitation(invitation.id, invitation.teamId)}>Delete</button
|
||||
>
|
||||
</div>
|
||||
@@ -163,19 +167,16 @@
|
||||
|
||||
<tbody>
|
||||
{#each accounts as account}
|
||||
<tr>
|
||||
<tr class="grid items-center justify-center gap-2 lg:grid-flow-col">
|
||||
<td class="px-2">{account.email}</td>
|
||||
<td class="flex space-x-2">
|
||||
<form on:submit|preventDefault={() => resetPassword(account.id)}>
|
||||
<button
|
||||
class="mx-auto my-4 w-32 bg-fuchsia-600 hover:bg-fuchsia-500 disabled:bg-coolgray-200"
|
||||
>Reset Password</button
|
||||
>
|
||||
<button class="my-4 btn btn-sm bg-iam">Reset Password</button>
|
||||
</form>
|
||||
<form on:submit|preventDefault={() => deleteUser(account.id)}>
|
||||
<button
|
||||
disabled={account.id === $appSession.userId}
|
||||
class="mx-auto my-4 w-32 bg-red-600 hover:bg-red-500 disabled:bg-coolgray-200"
|
||||
class="my-4 btn btn-sm"
|
||||
type="submit">Delete User</button
|
||||
>
|
||||
</form>
|
||||
@@ -205,6 +206,7 @@
|
||||
<div class="flex items-center justify-center pt-3">
|
||||
<button
|
||||
on:click|preventDefault={() => switchTeam(team.id)}
|
||||
class="btn btn-sm"
|
||||
class:bg-fuchsia-600={$appSession.teamId !== team.id}
|
||||
class:hover:bg-fuchsia-500={$appSession.teamId !== team.id}
|
||||
class:bg-transparent={$appSession.teamId === team.id}
|
||||
|
||||
@@ -25,18 +25,39 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let team: any;
|
||||
export let currentTeam: string;
|
||||
export let teams: any;
|
||||
import { page } from '$app/stores';
|
||||
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import { t } from '$lib/translations';
|
||||
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import Cookies from 'js-cookie';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
const { id } = $page.params;
|
||||
|
||||
async function deleteTeam() {
|
||||
const sure = confirm('Are you sure you want to delete this team?');
|
||||
if (sure) {
|
||||
try {
|
||||
await del(`/iam/team/${id}`, { id });
|
||||
if (currentTeam === id) {
|
||||
const switchTeam = teams.find((team: any) => team.id !== id);
|
||||
const payload = await get(`/user?teamId=${switchTeam.id}`);
|
||||
if (payload.token) {
|
||||
Cookies.set('token', payload.token, {
|
||||
path: '/'
|
||||
});
|
||||
$appSession.teamId = payload.teamId;
|
||||
$appSession.userId = payload.userId;
|
||||
$appSession.permission = payload.permission;
|
||||
$appSession.isAdmin = payload.isAdmin;
|
||||
return window.location.assign('/iam');
|
||||
}
|
||||
}
|
||||
|
||||
return await goto('/iam', { replaceState: true });
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
@@ -47,17 +68,17 @@
|
||||
|
||||
{#if id !== 'new'}
|
||||
<nav class="nav-side">
|
||||
<button
|
||||
on:click={deleteTeam}
|
||||
title={$t('source.delete_git_source')}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:hover:text-red-500={$appSession.isAdmin}
|
||||
class="icons tooltip-bottom bg-transparent text-sm"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? 'Delete Team'
|
||||
: $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button
|
||||
>
|
||||
{#if team.id !== '0'}
|
||||
<button
|
||||
id="delete"
|
||||
on:click={deleteTeam}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:hover:text-red-500={$appSession.isAdmin}
|
||||
class="icons bg-transparent text-sm"><DeleteIcon /></button
|
||||
>
|
||||
<Tooltip triggeredBy="#delete">Delete</Tooltip>
|
||||
{/if}
|
||||
</nav>
|
||||
{/if}
|
||||
<slot />
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
export let team: any;
|
||||
export let invitations: any[];
|
||||
import { page } from '$app/stores';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
|
||||
import { post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
@@ -91,14 +91,14 @@
|
||||
<form on:submit|preventDefault={handleSubmit} class=" py-4">
|
||||
<div class="flex space-x-1 pb-5">
|
||||
<div class="title font-bold">{$t('index.settings')}</div>
|
||||
<button class="bg-fuchsia-600 hover:bg-fuchsia-500" type="submit">{$t('forms.save')}</button>
|
||||
<button class="btn btn-sm bg-iam" type="submit">{$t('forms.save')}</button>
|
||||
</div>
|
||||
<div class="grid grid-flow-row gap-2 px-10">
|
||||
<div class="mt-2 grid grid-cols-2">
|
||||
<div class="flex-col">
|
||||
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
|
||||
{#if team.id === '0'}
|
||||
<Explainer customClass="w-full" text={$t('team.root_team_explainer')} />
|
||||
<SimpleExplainer customClass="w-full" text={$t('team.root_team_explainer')} />
|
||||
{/if}
|
||||
</div>
|
||||
<input id="name" name="name" placeholder="name" bind:value={team.name} />
|
||||
@@ -130,11 +130,11 @@
|
||||
{#if $appSession.isAdmin && permission.user.id !== $appSession.userId && permission.permission !== 'owner'}
|
||||
<td class="flex flex-col items-center justify-center space-y-2 py-4 text-center">
|
||||
<button
|
||||
class="w-52 bg-red-600 hover:bg-red-500"
|
||||
class="btn btn-sm btn-error"
|
||||
on:click={() => removeFromTeam(permission.user.id)}>{$t('forms.remove')}</button
|
||||
>
|
||||
<button
|
||||
class="w-52"
|
||||
class="btn btn-sm"
|
||||
on:click={() =>
|
||||
changePermission(permission.user.id, permission.id, permission.permission)}
|
||||
>{$t('team.promote_to', {
|
||||
@@ -157,7 +157,7 @@
|
||||
{#if isAdmin(team.permissions[0].permission)}
|
||||
<td class="flex-col space-y-2 py-4 text-center">
|
||||
<button
|
||||
class="w-52 bg-red-600 hover:bg-red-500"
|
||||
class="btn btn-sm btn-error"
|
||||
on:click={() => revokeInvitation(invitation.id)}
|
||||
>{$t('team.revoke_invitation')}</button
|
||||
>
|
||||
@@ -174,12 +174,12 @@
|
||||
<div class="flex space-x-1">
|
||||
<div class="flex space-x-1">
|
||||
<div class="title font-bold">{$t('team.invite_new_member')}</div>
|
||||
<button class="bg-fuchsia-600 hover:bg-fuchsia-500" type="submit"
|
||||
<button class="btn btn-sm bg-iam" type="submit"
|
||||
>{$t('team.send_invitation')}</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<Explainer text={$t('team.invite_only_register_explainer')} />
|
||||
<SimpleExplainer text={$t('team.invite_only_register_explainer')} />
|
||||
<div class="flex-col space-y-2 px-4 pt-5 sm:px-6">
|
||||
<div class="flex space-x-0">
|
||||
<input
|
||||
@@ -191,14 +191,14 @@
|
||||
<div class="flex-1" />
|
||||
<button
|
||||
on:click={() => (invitation.permission = 'read')}
|
||||
class="rounded-none rounded-l border border-dashed border-transparent"
|
||||
class="px-2 rounded-none rounded-l border border-dashed border-transparent"
|
||||
type="button"
|
||||
class:border-coolgray-300={invitation.permission !== 'read'}
|
||||
class:bg-fuchsia-500={invitation.permission === 'read'}>{$t('team.read')}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => (invitation.permission = 'admin')}
|
||||
class="rounded-none rounded-r border border-dashed border-transparent"
|
||||
class="px-2 rounded-none rounded-r border border-dashed border-transparent"
|
||||
type="button"
|
||||
class:border-coolgray-300={invitation.permission !== 'admin'}
|
||||
class:bg-red-500={invitation.permission === 'admin'}>{$t('team.admin')}</button
|
||||
|
||||
@@ -20,91 +20,268 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { get } from '$lib/api';
|
||||
export let applications: any;
|
||||
export let databases: any;
|
||||
export let services: any;
|
||||
export let settings: any;
|
||||
|
||||
import { get, post } from '$lib/api';
|
||||
import Usage from '$lib/components/Usage.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification, asyncSleep } from '$lib/common';
|
||||
import { addToast, appSession } 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';
|
||||
import { dev } from '$app/env';
|
||||
|
||||
let numberOfGetStatus = 0;
|
||||
|
||||
function getRndInteger(min: number, max: number) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
async function getStatus(resources: any) {
|
||||
while (numberOfGetStatus > 1) {
|
||||
await asyncSleep(getRndInteger(100, 200));
|
||||
}
|
||||
try {
|
||||
numberOfGetStatus++;
|
||||
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';
|
||||
} finally {
|
||||
numberOfGetStatus--;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 pb-12 tracking-tight sm:pb-16">
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<div class="container lg:mx-auto lg:p-0 px-8 p-5">
|
||||
{#if $appSession.teamId === '0'}
|
||||
<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>
|
||||
{/if}
|
||||
<h1 class="title lg:text-3xl mt-10">Applications</h1>
|
||||
<div class="divider" />
|
||||
<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 lg:grid-cols-3 p-4">
|
||||
{#if applications.length > 0}
|
||||
{#each applications as application}
|
||||
<a class="no-underline mb-5" href={`/applications/${application.id}`}>
|
||||
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator">
|
||||
{#await getStatus(application)}
|
||||
<span class="indicator-item badge bg-yellow-500 badge-xs" />
|
||||
{:then status}
|
||||
{#if status === 'Running'}
|
||||
<span class="indicator-item badge bg-success badge-xs" />
|
||||
{:else}
|
||||
<span class="indicator-item badge bg-error badge-xs" />
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="w-full flex flex-row">
|
||||
<ApplicationsIcons {application} isAbsolute={true} />
|
||||
<div class="w-full flex flex-col">
|
||||
<h1 class="font-bold text-lg lg:text-sm truncate">
|
||||
{application.name}
|
||||
{#if application.settings.isBot}
|
||||
<span class="text-xs">BOT</span>
|
||||
{/if}
|
||||
</h1>
|
||||
<div class="h-10">
|
||||
{#if application?.fqdn}
|
||||
<h2>{application?.fqdn.replace('https://', '').replace('http://', '')}</h2>
|
||||
{:else if !application.settings.isBot && !application?.fqdn}
|
||||
<h2 class="text-red-500">Not configured</h2>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex justify-end items-end space-x-2 h-10">
|
||||
{#if application.fqdn}
|
||||
<a href={application.fqdn} target="_blank" class="icons hover:bg-green-500">
|
||||
<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}
|
||||
{#if application.settings.isBot && application.exposePort}
|
||||
<a
|
||||
href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`}
|
||||
target="_blank"
|
||||
class="icons hover:bg-green-500"
|
||||
>
|
||||
<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}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{:else}
|
||||
<h1 class="">Nothing is configured yet.</h1>
|
||||
{/if}
|
||||
</div>
|
||||
<h1 class="title lg:text-3xl mt-10">Services</h1>
|
||||
<div class="divider" />
|
||||
<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 lg:grid-cols-3 p-4">
|
||||
{#if services.length > 0}
|
||||
{#each services as service}
|
||||
<a class="no-underline mb-5" href={`/services/${service.id}`}>
|
||||
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator">
|
||||
{#await getStatus(service)}
|
||||
<span class="indicator-item badge bg-yellow-500 badge-xs" />
|
||||
{:then status}
|
||||
{#if status === 'Running'}
|
||||
<span class="indicator-item badge bg-success badge-xs" />
|
||||
{:else}
|
||||
<span class="indicator-item badge bg-error badge-xs" />
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="w-full flex flex-row">
|
||||
<ServiceIcons type={service.type} isAbsolute={true} />
|
||||
<div class="w-full flex flex-col">
|
||||
<h1 class="font-bold text-lg lg:text-sm truncate">{service.name}</h1>
|
||||
<div class="h-10">
|
||||
{#if service?.fqdn}
|
||||
<h2>{service?.fqdn.replace('https://', '').replace('http://', '')}</h2>
|
||||
{:else}
|
||||
<h2 class="text-red-500">Not configured</h2>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex justify-end items-end space-x-2 h-10">
|
||||
{#if service.fqdn}
|
||||
<a href={service.fqdn} target="_blank" class="icons hover:bg-pink-500">
|
||||
<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}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{:else}
|
||||
<h1 class="">Nothing is configured yet.</h1>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<h1 class="title lg:text-3xl mt-10">Databases</h1>
|
||||
<div class="divider" />
|
||||
<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 lg:grid-cols-3 p-4 mb-32">
|
||||
{#if databases.length > 0}
|
||||
{#each databases as database}
|
||||
<a class="no-underline mb-5" href={`/databases/${database.id}`}>
|
||||
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-purple-500 indicator">
|
||||
{#await getStatus(database)}
|
||||
<span class="indicator-item badge bg-yellow-500 badge-xs" />
|
||||
{:then status}
|
||||
{#if status === 'Running'}
|
||||
<span class="indicator-item badge bg-success badge-xs" />
|
||||
{:else}
|
||||
<span class="indicator-item badge bg-error badge-xs" />
|
||||
{/if}
|
||||
{/await}
|
||||
<div class="w-full flex flex-row">
|
||||
<DatabaseIcons type={database.type} isAbsolute={true} />
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="h-10">
|
||||
<h1 class="font-bold text-lg lg:text-sm truncate">{database.name}</h1>
|
||||
<div class="h-10">
|
||||
{#if database?.version}
|
||||
<h2 class="text-xs">{database?.version}</h2>
|
||||
{:else}
|
||||
<h2 class="text-red-500">Not configured</h2>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end items-end space-x-2 h-10">
|
||||
{#if database.settings.isPublic}
|
||||
<div title="Public">
|
||||
<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" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="3.6" y1="9" x2="20.4" y2="9" />
|
||||
<line x1="3.6" y1="15" x2="20.4" y2="15" />
|
||||
<path d="M11.5 3a17 17 0 0 0 0 18" />
|
||||
<path d="M12.5 3a17 17 0 0 1 0 18" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{:else}
|
||||
<h1 class="">Nothing is configured yet.</h1>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,61 +49,83 @@
|
||||
<title>{$t('login.login')}</title>
|
||||
</svelt:head>
|
||||
|
||||
<div class="flex h-screen flex-col items-center justify-center">
|
||||
<div class="flex justify-center px-4">
|
||||
<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
|
||||
{#if $appSession.whiteLabeledDetails.icon}
|
||||
<img
|
||||
class="w-32 mx-auto pb-8"
|
||||
src={$appSession.whiteLabeledDetails.icon}
|
||||
alt="Icon for white labeled version of Coolify"
|
||||
/>
|
||||
{:else}
|
||||
<div class="text-6xl font-bold border-gradient w-48 mx-auto border-b-4 mb-8">Coolify</div>
|
||||
{/if}
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder={$t('forms.email')}
|
||||
autocomplete="off"
|
||||
required
|
||||
bind:this={emailEl}
|
||||
bind:value={email}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder={$t('forms.password')}
|
||||
bind:value={password}
|
||||
required
|
||||
/>
|
||||
|
||||
<div class="flex space-x-2 h-8 items-center justify-center pt-8">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
class="hover:opacity-90 text-white"
|
||||
class:bg-transparent={loading}
|
||||
class:text-stone-600={loading}
|
||||
class:bg-coollabs={!loading}
|
||||
>{loading ? $t('login.authenticating') : $t('login.login')}</button
|
||||
>
|
||||
|
||||
<button
|
||||
on:click|preventDefault={gotoRegister}
|
||||
class="bg-transparent hover:bg-coolgray-300 text-white ">{$t('register.register')}</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex lg:flex-row flex-col h-screen">
|
||||
<div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
|
||||
<h1 class="title lg:text-6xl mb-5 border-gradient">Coolify</h1>
|
||||
<h3 class="title">Made self-hosting simple.</h3>
|
||||
</div>
|
||||
{#if browser && window.location.host === 'demo.coolify.io'}
|
||||
<div class="pt-5 font-bold">
|
||||
Registration is <span class="text-pink-500">open</span>, just fill in an email (does not need
|
||||
to be live email address for the demo instance) and a password.
|
||||
<div class="flex flex-1 flex-col lg:max-w-2xl">
|
||||
<div class="flex flex-row p-8 items-center space-x-3">
|
||||
{#if $appSession.whiteLabeledDetails.icon}
|
||||
<div class="avatar" style="width: 40px; height: 40px">
|
||||
<img
|
||||
src={$appSession.whiteLabeledDetails.icon}
|
||||
alt="Icon for white labeled version of Coolify"
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div>
|
||||
<div class="avatar" style="width: 40px; height: 40px">
|
||||
<img src="favicon.png" alt="Coolify icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="prose">
|
||||
<h4>Coolify</h4>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="pt-5 font-bold">
|
||||
All users gets an <span class="text-pink-500">own namespace</span>, so you won't be able to
|
||||
access other users data.
|
||||
<div
|
||||
class="w-full md:px-20 lg:px-10 xl:px-20 p-6 flex flex-col h-full justify-center items-center"
|
||||
>
|
||||
<div class="mb-5 w-full prose prose-neutral">
|
||||
<h1 class="m-0 white">Welcome back</h1>
|
||||
<h5>Please login to continue.</h5>
|
||||
</div>
|
||||
<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-3 w-full">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder={$t('forms.email')}
|
||||
autocomplete="off"
|
||||
required
|
||||
bind:this={emailEl}
|
||||
bind:value={email}
|
||||
class="w-full"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder={$t('forms.password')}
|
||||
bind:value={password}
|
||||
required
|
||||
class="w-full"
|
||||
/>
|
||||
|
||||
<div class="flex space-y-3 flex-col pt-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
class="btn"
|
||||
class:loading
|
||||
class:bg-coollabs={!loading}
|
||||
>{loading ? $t('login.authenticating') : $t('login.login')}</button
|
||||
>
|
||||
|
||||
<button on:click|preventDefault={gotoRegister} class="btn btn-ghost"
|
||||
>{$t('register.register')}</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
{#if browser && window.location.host === 'demo.coolify.io'}
|
||||
<div class="pt-5 font-bold">
|
||||
Registration is <span class="text-pink-500">open</span>, just fill in an email (does not
|
||||
need to be live email address for the demo instance) and a password.
|
||||
</div>
|
||||
<div class="pt-5 font-bold">
|
||||
All users gets an <span class="text-pink-500">own namespace</span>, so you won't be able
|
||||
to access other users data.
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -61,38 +61,58 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="icons fixed top-0 left-0 m-3 cursor-pointer" on:click={() => goto('/')}>
|
||||
<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" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<line x1="5" y1="12" x2="11" y2="18" />
|
||||
<line x1="5" y1="12" x2="11" y2="6" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex h-screen flex-col items-center justify-center">
|
||||
{#if $appSession.userId}
|
||||
<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
|
||||
{:else}
|
||||
<div class="flex justify-center px-4">
|
||||
<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
|
||||
<div class="flex lg:flex-row flex-col h-screen">
|
||||
<div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
|
||||
<h1 class="title lg:text-6xl mb-5 border-gradient">Coolify</h1>
|
||||
<h3 class="title">Made self-hosting simple.</h3>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col lg:max-w-2xl">
|
||||
<div class="flex flex-row p-8 items-center space-x-3 justify-between">
|
||||
<div class="icons cursor-pointer" on:click={() => goto('/')}>
|
||||
<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" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<line x1="5" y1="12" x2="11" y2="18" />
|
||||
<line x1="5" y1="12" x2="11" y2="6" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-row items-center space-x-3">
|
||||
{#if $appSession.whiteLabeledDetails.icon}
|
||||
<img
|
||||
class="w-32 mx-auto pb-8"
|
||||
src={$appSession.whiteLabeledDetails.icon}
|
||||
alt="Icon for white labeled version of Coolify"
|
||||
/>
|
||||
<div class="avatar" style="width: 40px; height: 40px">
|
||||
<img
|
||||
src={$appSession.whiteLabeledDetails.icon}
|
||||
alt="Icon for white labeled version of Coolify"
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-6xl font-bold border-gradient w-48 mx-auto border-b-4 mb-8">Coolify</div>
|
||||
<div>
|
||||
<div class="avatar" style="width: 40px; height: 40px">
|
||||
<img src="favicon.png" alt="Coolify icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="prose">
|
||||
<h4>Coolify</h4>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full md:px-20 lg:px-10 xl:px-20 p-6 flex flex-col h-full justify-center items-center"
|
||||
>
|
||||
<div class="mb-5 w-full prose prose-neutral">
|
||||
<h1 class="m-0 white">Get started</h1>
|
||||
<h5>Enter the required fields to complete the registration.</h5>
|
||||
</div>
|
||||
<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-3 w-full">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
@@ -101,6 +121,7 @@
|
||||
required
|
||||
bind:this={emailEl}
|
||||
bind:value={email}
|
||||
class="w-full"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
@@ -109,6 +130,7 @@
|
||||
bind:this={passwordEl}
|
||||
bind:value={password}
|
||||
required
|
||||
class="w-full"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
@@ -116,25 +138,25 @@
|
||||
placeholder={$t('forms.password_again')}
|
||||
bind:value={passwordCheck}
|
||||
required
|
||||
class="w-full"
|
||||
/>
|
||||
|
||||
<div class="flex space-x-2 h-8 items-center justify-center pt-8">
|
||||
<div class="flex space-y-3 flex-col pt-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="text-white"
|
||||
class="btn"
|
||||
disabled={loading}
|
||||
class:hover:bg-coollabs-100={!loading}
|
||||
class:bg-transparent={loading}
|
||||
class:bg-coollabs={!loading}
|
||||
>{loading ? $t('register.registering') : $t('register.register')}</button
|
||||
class:loading>{loading ? $t('register.registering') : $t('register.register')}</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
{#if userCount === 0}
|
||||
<div class="pt-5">
|
||||
{$t('register.first_user')}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if userCount === 0}
|
||||
<div class="pt-5">
|
||||
{$t('register.first_user')}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
export let name = '';
|
||||
export let value = '';
|
||||
export let isNewSecret = false;
|
||||
@@ -7,7 +7,7 @@
|
||||
import { del, post } from '$lib/api';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { addToast } from '$lib/store';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
@@ -25,13 +25,12 @@
|
||||
}
|
||||
}
|
||||
async function saveSecret(isNew = false) {
|
||||
if (!name) return errorNotification('Name is required.');
|
||||
if (!value) return errorNotification('Value is required.');
|
||||
if (!name) return errorNotification({ message: 'Name is required.' });
|
||||
if (!value) return errorNotification({ message: 'Value is required.' });
|
||||
try {
|
||||
await post(`/services/${id}/secrets`, {
|
||||
name,
|
||||
value,
|
||||
|
||||
isNew
|
||||
});
|
||||
dispatch('refresh');
|
||||
@@ -39,7 +38,10 @@
|
||||
name = '';
|
||||
value = '';
|
||||
}
|
||||
toast.push('Secret saved.');
|
||||
addToast({
|
||||
message: 'Secret saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
@@ -52,7 +54,6 @@
|
||||
bind:value={name}
|
||||
required
|
||||
placeholder="EXAMPLE_VARIABLE"
|
||||
class=" border border-dashed border-coolgray-300"
|
||||
readonly={!isNewSecret}
|
||||
class:bg-transparent={!isNewSecret}
|
||||
class:cursor-not-allowed={!isNewSecret}
|
||||
@@ -72,15 +73,15 @@
|
||||
<td>
|
||||
{#if isNewSecret}
|
||||
<div class="flex items-center justify-center">
|
||||
<button class="bg-green-600 hover:bg-green-500" on:click={() => saveSecret(true)}>Add</button>
|
||||
<button class="btn btn-sm bg-success" on:click={() => saveSecret(true)}>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={() => saveSecret(false)}>Set</button>
|
||||
<button class="btn btn-sm bg-success" on:click={() => saveSecret(false)}>Set</button>
|
||||
</div>
|
||||
<div class="flex justify-center items-end">
|
||||
<button class="bg-red-600 hover:bg-red-500" on:click={removeSecret}>Remove</button>
|
||||
<button class="btn btn-sm bg-error" on:click={removeSecret}>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -55,9 +55,24 @@
|
||||
<a href="https://fider.io" target="_blank">
|
||||
<Icons.Fider />
|
||||
</a>
|
||||
{:else if service.type === 'appwrite'}
|
||||
<a href="https://appwrite.io" target="_blank">
|
||||
<Icons.Appwrite />
|
||||
</a>
|
||||
{:else if service.type === 'moodle'}
|
||||
<a href="https://moodle.org" target="_blank">
|
||||
<Icons.Moodle />
|
||||
</a>
|
||||
{:else if service.type === 'glitchTip'}
|
||||
<a href="https://glitchtip.com" target="_blank">
|
||||
<Icons.GlitchTip />
|
||||
</a>
|
||||
{:else if service.type === 'searxng'}
|
||||
<a href="https://searxng.org" target="_blank">
|
||||
<Icons.Searxng />
|
||||
</a>
|
||||
{:else if service.type === 'weblate'}
|
||||
<a href="https://weblate.org" target="_blank">
|
||||
<Icons.Weblate />
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -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}
|
||||
126
apps/ui/src/routes/services/[id]/_Services/_Appwrite.svelte
Normal file
126
apps/ui/src/routes/services/[id]/_Services/_Appwrite.svelte
Normal file
@@ -0,0 +1,126 @@
|
||||
<script lang="ts">
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
import Select from 'svelte-select';
|
||||
export let service: any;
|
||||
export let readOnly: any;
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">Appwrite</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="opensslKeyV1">Encryption Key</label>
|
||||
<CopyPasswordField
|
||||
name="opensslKeyV1"
|
||||
id="opensslKeyV1"
|
||||
isPasswordField
|
||||
value={service.appwrite.opensslKeyV1}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="executorSecret">Executor Secret</label>
|
||||
<CopyPasswordField
|
||||
name="executorSecret"
|
||||
id="executorSecret"
|
||||
isPasswordField
|
||||
value={service.appwrite.executorSecret}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">Redis</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="redisPassword">Password</label>
|
||||
<CopyPasswordField
|
||||
name="redisPassword"
|
||||
id="redisPassword"
|
||||
isPasswordField
|
||||
value={service.appwrite.redisPassword}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">MariaDB</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="mariadbHost">MariaDB Host</label>
|
||||
<CopyPasswordField
|
||||
name="mariadbHost"
|
||||
id="mariadbHost"
|
||||
value={service.appwrite.mariadbHost}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="mariadbPort">MariaDB Port</label>
|
||||
<CopyPasswordField
|
||||
name="mariadbPort"
|
||||
id="mariadbPort"
|
||||
value={service.appwrite.mariadbPort}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div> -->
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="mariadbUser">{$t('forms.username')}</label>
|
||||
<CopyPasswordField
|
||||
name="mariadbUser"
|
||||
id="mariadbUser"
|
||||
value={service.appwrite.mariadbUser}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="mariadbPassword">{$t('forms.password')}</label>
|
||||
<CopyPasswordField
|
||||
id="mariadbPassword"
|
||||
isPasswordField
|
||||
readonly
|
||||
disabled
|
||||
name="mariadbPassword"
|
||||
value={service.appwrite.mariadbPassword}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="mariadbRootUser">Root User</label>
|
||||
<CopyPasswordField
|
||||
name="mariadbRootUser"
|
||||
id="mariadbRootUser"
|
||||
value={service.appwrite.mariadbRootUser}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="mariadbRootUserPassword">Root Password</label>
|
||||
<CopyPasswordField
|
||||
id="mariadbRootUserPassword"
|
||||
isPasswordField
|
||||
readonly
|
||||
disabled
|
||||
name="mariadbRootUserPassword"
|
||||
value={service.appwrite.mariadbRootUserPassword}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="mariadbDatabase">{$t('index.database')}</label>
|
||||
<CopyPasswordField
|
||||
name="mariadbDatabase"
|
||||
id="mariadbDatabase"
|
||||
value={service.appwrite.mariadbDatabase}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
@@ -1,12 +1,15 @@
|
||||
<script lang="ts">
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
export let readOnly: any;
|
||||
export let service: any;
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">Ghost</div>
|
||||
<div class="flex space-x-1 py-5">
|
||||
<div class="title">
|
||||
Ghost <Explainer explanation="You can change these values in the Ghost admin panel." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="email">{$t('forms.default_email_address')}</label>
|
||||
|
||||
244
apps/ui/src/routes/services/[id]/_Services/_GlitchTip.svelte
Normal file
244
apps/ui/src/routes/services/[id]/_Services/_GlitchTip.svelte
Normal file
@@ -0,0 +1,244 @@
|
||||
<script lang="ts">
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import { addToast, status } from '$lib/store';
|
||||
import Setting from '$lib/components/Setting.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
import { post } from '$lib/api';
|
||||
import { page } from '$app/stores';
|
||||
import { errorNotification } from '$lib/common';
|
||||
export let service: any;
|
||||
|
||||
const { id } = $page.params;
|
||||
let loading = false;
|
||||
|
||||
async function changeSettings(name: any) {
|
||||
if (loading || $status.service.isRunning) return;
|
||||
|
||||
let enableOpenUserRegistration = service.glitchTip.enableOpenUserRegistration;
|
||||
let emailSmtpUseSsl = service.glitchTip.emailSmtpUseSsl;
|
||||
let emailSmtpUseTls = service.glitchTip.emailSmtpUseTls;
|
||||
|
||||
loading = true;
|
||||
if (name === 'enableOpenUserRegistration') {
|
||||
enableOpenUserRegistration = !enableOpenUserRegistration;
|
||||
}
|
||||
if (name === 'emailSmtpUseSsl') {
|
||||
emailSmtpUseSsl = !emailSmtpUseSsl;
|
||||
}
|
||||
if (name === 'emailSmtpUseTls') {
|
||||
emailSmtpUseTls = !emailSmtpUseTls;
|
||||
}
|
||||
try {
|
||||
await post(`/services/${id}/glitchtip/settings`, {
|
||||
enableOpenUserRegistration,
|
||||
emailSmtpUseSsl,
|
||||
emailSmtpUseTls
|
||||
});
|
||||
service.glitchTip.emailSmtpUseTls = emailSmtpUseTls;
|
||||
service.glitchTip.emailSmtpUseSsl = emailSmtpUseSsl;
|
||||
service.glitchTip.enableOpenUserRegistration = enableOpenUserRegistration;
|
||||
return addToast({
|
||||
message: 'Settings updated.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">GlitchTip</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
id="enableOpenUserRegistration"
|
||||
bind:setting={service.glitchTip.enableOpenUserRegistration}
|
||||
{loading}
|
||||
disabled={$status.service.isRunning}
|
||||
on:click={() => changeSettings('enableOpenUserRegistration')}
|
||||
title="Enable Open User Registration"
|
||||
description={''}
|
||||
/>
|
||||
<!-- <Setting
|
||||
bind:setting={service.glitchTip.enableOpenUserRegistration}
|
||||
on:click={toggleEnableOpenUserRegistration}
|
||||
title={'Enable Open User Registration'}
|
||||
description={''}
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-1 py-2 font-bold">
|
||||
<div class="subtitle">Email settings</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
id="emailSmtpUseTls"
|
||||
bind:setting={service.glitchTip.emailSmtpUseTls}
|
||||
{loading}
|
||||
disabled={$status.service.isRunning}
|
||||
on:click={() => changeSettings('emailSmtpUseTls')}
|
||||
title="Use TLS for SMTP"
|
||||
description={''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
id="emailSmtpUseSsl"
|
||||
bind:setting={service.glitchTip.emailSmtpUseSsl}
|
||||
{loading}
|
||||
disabled={$status.service.isRunning}
|
||||
on:click={() => changeSettings('emailSmtpUseSsl')}
|
||||
title="Use SSL for SMTP"
|
||||
description={''}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="defaultEmailFrom">Default Email From</label>
|
||||
<CopyPasswordField
|
||||
required
|
||||
name="defaultEmailFrom"
|
||||
id="defaultEmailFrom"
|
||||
bind:value={service.glitchTip.defaultEmailFrom}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="emailSmtpHost">SMTP Host</label>
|
||||
<CopyPasswordField
|
||||
name="emailSmtpHost"
|
||||
id="emailSmtpHost"
|
||||
bind:value={service.glitchTip.emailSmtpHost}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="emailSmtpPort">SMTP Port</label>
|
||||
<CopyPasswordField
|
||||
name="emailSmtpPort"
|
||||
id="emailSmtpPort"
|
||||
bind:value={service.glitchTip.emailSmtpPort}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="emailSmtpUser">SMTP User</label>
|
||||
<CopyPasswordField
|
||||
name="emailSmtpUser"
|
||||
id="emailSmtpUser"
|
||||
bind:value={service.glitchTip.emailSmtpUser}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="emailSmtpPassword">SMTP Password</label>
|
||||
<CopyPasswordField
|
||||
name="emailSmtpPassword"
|
||||
id="emailSmtpPassword"
|
||||
bind:value={service.glitchTip.emailSmtpPassword}
|
||||
isPasswordField
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="emailBackend">Email Backend</label>
|
||||
<CopyPasswordField
|
||||
name="emailBackend"
|
||||
id="emailBackend"
|
||||
bind:value={service.glitchTip.emailBackend}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="mailgunApiKey">Mailgun API Key</label>
|
||||
<CopyPasswordField
|
||||
name="mailgunApiKey"
|
||||
id="mailgunApiKey"
|
||||
bind:value={service.glitchTip.mailgunApiKey}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="sendgridApiKey">SendGrid API Key</label>
|
||||
<CopyPasswordField
|
||||
name="sendgridApiKey"
|
||||
id="sendgridApiKey"
|
||||
bind:value={service.glitchTip.sendgridApiKey}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-1 py-2 font-bold">
|
||||
<div class="subtitle">Default User & Superuser</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="defaultEmail">{$t('forms.email')}</label>
|
||||
<CopyPasswordField
|
||||
name="defaultEmail"
|
||||
id="defaultEmail"
|
||||
bind:value={service.glitchTip.defaultEmail}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="defaultUsername">{$t('forms.username')}</label>
|
||||
<CopyPasswordField
|
||||
name="defaultUsername"
|
||||
id="defaultUsername"
|
||||
bind:value={service.glitchTip.defaultUsername}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="defaultPassword">{$t('forms.password')}</label>
|
||||
<CopyPasswordField
|
||||
name="defaultPassword"
|
||||
id="defaultPassword"
|
||||
bind:value={service.glitchTip.defaultPassword}
|
||||
readonly
|
||||
disabled
|
||||
isPasswordField
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">PostgreSQL</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlUser">{$t('forms.username')}</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlUser"
|
||||
id="postgresqlUser"
|
||||
bind:value={service.glitchTip.postgresqlUser}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlPassword">{$t('forms.password')}</label>
|
||||
<CopyPasswordField
|
||||
id="postgresqlPassword"
|
||||
isPasswordField
|
||||
readonly
|
||||
disabled
|
||||
name="postgresqlPassword"
|
||||
bind:value={service.glitchTip.postgresqlPassword}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlDatabase">{$t('index.database')}</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlDatabase"
|
||||
id="postgresqlDatabase"
|
||||
bind:value={service.glitchTip.postgresqlDatabase}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
@@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
export let service: any;
|
||||
</script>
|
||||
|
||||
@@ -11,7 +11,11 @@
|
||||
<div class="title">Plausible Analytics</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="scriptName">Script Name</label>
|
||||
<label for="scriptName"
|
||||
>Script Name <Explainer
|
||||
explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
name="scriptName"
|
||||
id="scriptName"
|
||||
@@ -21,9 +25,6 @@
|
||||
bind:value={service.plausibleAnalytics.scriptName}
|
||||
required
|
||||
/>
|
||||
<Explainer
|
||||
text="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="email">{$t('forms.email')}</label>
|
||||
|
||||
36
apps/ui/src/routes/services/[id]/_Services/_Searxng.svelte
Normal file
36
apps/ui/src/routes/services/[id]/_Services/_Searxng.svelte
Normal file
@@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
export let service: any;
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">SearXNG</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="secretKey">Secret Key</label>
|
||||
<CopyPasswordField
|
||||
name="secretKey"
|
||||
id="secretKey"
|
||||
isPasswordField
|
||||
value={service.searxng.secretKey}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">Redis</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="redisPassword">{$t('forms.password')}</label>
|
||||
<CopyPasswordField
|
||||
name="redisPassword"
|
||||
id="redisPassword"
|
||||
isPasswordField
|
||||
value={service.searxng.redisPassword}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
@@ -8,18 +8,24 @@
|
||||
|
||||
import { browser } from '$app/env';
|
||||
import { page } from '$app/stores';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
|
||||
import { get, post } from '$lib/api';
|
||||
import { errorNotification, getDomain } from '$lib/common';
|
||||
import { t } from '$lib/translations';
|
||||
import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
|
||||
import {
|
||||
appSession,
|
||||
status,
|
||||
setLocation,
|
||||
addToast,
|
||||
checkIfDeploymentEnabledServices,
|
||||
isDeploymentEnabled
|
||||
} from '$lib/store';
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import Setting from '$lib/components/Setting.svelte';
|
||||
|
||||
import Fider from './_Fider.svelte';
|
||||
import Ghost from './_Ghost.svelte';
|
||||
import GlitchTip from './_GlitchTip.svelte';
|
||||
import Hasura from './_Hasura.svelte';
|
||||
import MeiliSearch from './_MeiliSearch.svelte';
|
||||
import MinIo from './_MinIO.svelte';
|
||||
@@ -27,15 +33,23 @@
|
||||
import Umami from './_Umami.svelte';
|
||||
import VsCodeServer from './_VSCodeServer.svelte';
|
||||
import Wordpress from './_Wordpress.svelte';
|
||||
import Appwrite from './_Appwrite.svelte';
|
||||
import Moodle from './_Moodle.svelte';
|
||||
import Searxng from './_Searxng.svelte';
|
||||
import Weblate from './_Weblate.svelte';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import Taiga from './_Taiga.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
$: isDisabled =
|
||||
!$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading;
|
||||
|
||||
let forceSave = false;
|
||||
let loading = false;
|
||||
let loadingVerification = false;
|
||||
let loading = {
|
||||
save: false,
|
||||
verification: false,
|
||||
cleanup: false
|
||||
};
|
||||
let dualCerts = service.dualCerts;
|
||||
|
||||
let nonWWWDomain = service.fqdn && getDomain(service.fqdn).replace(/^www\./, '');
|
||||
@@ -45,7 +59,10 @@
|
||||
async function isDNSValid(domain: any, isWWW: any) {
|
||||
try {
|
||||
await get(`/services/${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) {
|
||||
@@ -56,8 +73,8 @@
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (loading) return;
|
||||
loading = true;
|
||||
if (loading.save) return;
|
||||
loading.save = true;
|
||||
try {
|
||||
await post(`/services/${id}/check`, {
|
||||
fqdn: service.fqdn,
|
||||
@@ -68,9 +85,12 @@
|
||||
});
|
||||
await post(`/services/${id}`, { ...service });
|
||||
setLocation(service);
|
||||
$disabledButton = false;
|
||||
forceSave = false;
|
||||
toast.push('Configuration saved.');
|
||||
$isDeploymentEnabled = checkIfDeploymentEnabledServices($appSession.isAdmin, service);
|
||||
return addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
//@ts-ignore
|
||||
if (error?.message.startsWith($t('application.dns_not_set_partial_error'))) {
|
||||
@@ -89,18 +109,21 @@
|
||||
}
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
loading.save = false;
|
||||
}
|
||||
}
|
||||
async function setEmailsToVerified() {
|
||||
loadingVerification = true;
|
||||
loading.verification = true;
|
||||
try {
|
||||
await post(`/services/${id}/${service.type}/activate`, { id: service.id });
|
||||
toast.push(t.get('services.all_email_verified'));
|
||||
return addToast({
|
||||
message: t.get('services.all_email_verified'),
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loadingVerification = false;
|
||||
loading.verification = false;
|
||||
}
|
||||
}
|
||||
async function changeSettings(name: any) {
|
||||
@@ -109,11 +132,28 @@
|
||||
dualCerts = !dualCerts;
|
||||
}
|
||||
await post(`/services/${id}/settings`, { dualCerts });
|
||||
return toast.push(t.get('application.settings_saved'));
|
||||
return addToast({
|
||||
message: t.get('application.settings_saved'),
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
async function cleanupLogs() {
|
||||
loading.cleanup = true;
|
||||
try {
|
||||
await post(`/services/${id}/${service.type}/cleanup`, { id: service.id });
|
||||
return addToast({
|
||||
message: 'Cleared DB Logs',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading.cleanup = false;
|
||||
}
|
||||
}
|
||||
onMount(async () => {
|
||||
if (browser && window.location.hostname === 'demo.coolify.io' && !service.fqdn) {
|
||||
service.fqdn = `http://${cuid()}.demo.coolify.io`;
|
||||
@@ -145,24 +185,35 @@
|
||||
{#if $appSession.isAdmin}
|
||||
<button
|
||||
type="submit"
|
||||
class:bg-pink-600={!loading}
|
||||
class="btn btn-sm"
|
||||
class:bg-orange-600={forceSave}
|
||||
class:hover:bg-pink-500={!loading}
|
||||
class:hover:bg-orange-400={forceSave}
|
||||
disabled={loading}
|
||||
>{loading
|
||||
? $t('forms.saving')
|
||||
class:loading={loading.save}
|
||||
class:bg-services={!loading.save}
|
||||
disabled={loading.save}
|
||||
>{loading.save
|
||||
? $t('forms.save')
|
||||
: forceSave
|
||||
? $t('forms.confirm_continue')
|
||||
: $t('forms.save')}</button
|
||||
>
|
||||
{/if}
|
||||
{#if service.type === 'plausibleanalytics' && $status.service.isRunning}
|
||||
<button on:click|preventDefault={setEmailsToVerified} disabled={loadingVerification}
|
||||
>{loadingVerification
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
on:click|preventDefault={setEmailsToVerified}
|
||||
disabled={loading.verification}
|
||||
class:loading={loading.verification}
|
||||
>{loading.verification
|
||||
? $t('forms.verifying')
|
||||
: $t('forms.verify_emails_without_smtp')}</button
|
||||
>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
on:click|preventDefault={cleanupLogs}
|
||||
disabled={loading.cleanup}
|
||||
class:loading={loading.cleanup}>Cleanup Unnecessary Database Logs</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -240,8 +291,9 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-2 px-10">
|
||||
<div class="flex-col ">
|
||||
<label for="apiFqdn" class="pt-2 text-base font-bold text-stone-100">API URL</label>
|
||||
<Explainer text={$t('application.https_explainer')} />
|
||||
<label for="apiFqdn" class="pt-2 text-base font-bold text-stone-100"
|
||||
>API URL <Explainer explanation={$t('application.https_explainer')} /></label
|
||||
>
|
||||
</div>
|
||||
|
||||
<CopyPasswordField
|
||||
@@ -259,9 +311,9 @@
|
||||
<div class="grid grid-cols-2 px-10">
|
||||
<div class="flex-col ">
|
||||
<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
|
||||
>{$t('application.url_fqdn')}</label
|
||||
>
|
||||
<Explainer text={$t('application.https_explainer')} />
|
||||
>{$t('application.url_fqdn')}
|
||||
<Explainer explanation={$t('application.https_explainer')} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<CopyPasswordField
|
||||
@@ -282,13 +334,13 @@
|
||||
<div class="flex-col space-y-2 pt-4 text-center">
|
||||
{#if isNonWWWDomainOK}
|
||||
<button
|
||||
class="bg-green-600 hover:bg-green-500"
|
||||
class="btn btn-sm bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="bg-red-600 hover:bg-red-500"
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
@@ -296,13 +348,13 @@
|
||||
{#if dualCerts}
|
||||
{#if isWWWDomainOK}
|
||||
<button
|
||||
class="bg-green-600 hover:bg-green-500"
|
||||
class="btn btn-sm bg-green-600 hover:bg-green-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="bg-red-600 hover:bg-red-500"
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
@@ -312,6 +364,7 @@
|
||||
{/if}
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
id="dualCerts"
|
||||
disabled={$status.service.isRunning}
|
||||
dataTooltip={$t('forms.must_be_stopped_to_modify')}
|
||||
bind:setting={dualCerts}
|
||||
@@ -321,7 +374,11 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
|
||||
<label for="exposePort" class="text-base font-bold text-stone-100"
|
||||
>Exposed Port <Explainer
|
||||
explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
readonly={!$appSession.isAdmin && !$status.service.isRunning}
|
||||
disabled={!$appSession.isAdmin ||
|
||||
@@ -332,9 +389,6 @@
|
||||
bind:value={service.exposePort}
|
||||
placeholder="12345"
|
||||
/>
|
||||
<Explainer
|
||||
text={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if service.type === 'plausibleanalytics'}
|
||||
@@ -355,8 +409,18 @@
|
||||
<Hasura bind:service />
|
||||
{:else if service.type === 'fider'}
|
||||
<Fider bind:service {readOnly} />
|
||||
{:else if service.type === 'appwrite'}
|
||||
<Appwrite bind:service {readOnly} />
|
||||
{:else if service.type === 'moodle'}
|
||||
<Moodle bind:service {readOnly} />
|
||||
{:else if service.type === 'glitchTip'}
|
||||
<GlitchTip bind:service />
|
||||
{:else if service.type === 'searxng'}
|
||||
<Searxng bind:service />
|
||||
{:else if service.type === 'weblate'}
|
||||
<Weblate bind:service />
|
||||
{:else if service.type === 'taiga'}
|
||||
<Taiga bind:service />
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
118
apps/ui/src/routes/services/[id]/_Services/_Taiga.svelte
Normal file
118
apps/ui/src/routes/services/[id]/_Services/_Taiga.svelte
Normal file
@@ -0,0 +1,118 @@
|
||||
<script lang="ts">
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import { t } from '$lib/translations';
|
||||
export let service: any;
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">Taiga</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="secretKey">Secret Key</label>
|
||||
<CopyPasswordField
|
||||
name="secretKey"
|
||||
id="secretKey"
|
||||
isPasswordField
|
||||
value={service.taiga.secretKey}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">Django</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="djangoAdminUser">Admin User</label>
|
||||
<CopyPasswordField
|
||||
name="djangoAdminUser"
|
||||
id="djangoAdminUser"
|
||||
value={service.taiga.djangoAdminUser}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="djangoAdminPassword">Admin Password</label>
|
||||
<CopyPasswordField
|
||||
name="djangoAdminPassword"
|
||||
id="djangoAdminPassword"
|
||||
isPasswordField
|
||||
value={service.taiga.djangoAdminPassword}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">RabbitMQ</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="rabbitMQUser">User</label>
|
||||
<CopyPasswordField
|
||||
name="rabbitMQUser"
|
||||
id="rabbitMQUser"
|
||||
value={service.taiga.rabbitMQUser}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="rabbitMQPassword">Password</label>
|
||||
<CopyPasswordField
|
||||
name="rabbitMQPassword"
|
||||
id="rabbitMQPassword"
|
||||
isPasswordField
|
||||
value={service.taiga.rabbitMQPassword}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">PostgreSQL</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlHost">PostgreSQL Host</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlHost"
|
||||
id="postgresqlHost"
|
||||
value={service.taiga.postgresqlHost}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlPort">PostgreSQL Port</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlPort"
|
||||
id="postgresqlPort"
|
||||
value={service.taiga.postgresqlPort}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlUser">PostgreSQL User</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlUser"
|
||||
id="postgresqlUser"
|
||||
value={service.taiga.postgresqlUser}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlPassword">PostgreSQL Password</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlPassword"
|
||||
id="postgresqlPassword"
|
||||
isPasswordField
|
||||
value={service.taiga.postgresqlPassword}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
|
||||
export let service: any;
|
||||
</script>
|
||||
|
||||
@@ -13,7 +12,11 @@
|
||||
<input name="adminUser" id="adminUser" placeholder="admin" value="admin" disabled readonly />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="umamiAdminPassword">Initial Admin Password</label>
|
||||
<label for="umamiAdminPassword"
|
||||
>Initial Admin Password <Explainer
|
||||
explanation="It could be changed in Umami. <br>This is just the password set initially after the first start."
|
||||
/></label
|
||||
>
|
||||
<CopyPasswordField
|
||||
isPasswordField
|
||||
name="umamiAdminPassword"
|
||||
@@ -23,7 +26,4 @@
|
||||
disabled
|
||||
readonly
|
||||
/>
|
||||
<Explainer
|
||||
text="It could be changed in Umami. <br>This is just the password set initially after the first start."
|
||||
/>
|
||||
</div>
|
||||
|
||||
66
apps/ui/src/routes/services/[id]/_Services/_Weblate.svelte
Normal file
66
apps/ui/src/routes/services/[id]/_Services/_Weblate.svelte
Normal file
@@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
export let service: any;
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">Weblate</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="adminPassword">Admin password</label>
|
||||
<CopyPasswordField
|
||||
name="adminPassword"
|
||||
id="adminPassword"
|
||||
isPasswordField
|
||||
value={service.weblate.adminPassword}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-1 py-5 font-bold">
|
||||
<div class="title">PostgreSQL</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlHost">PostgreSQL Host</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlHost"
|
||||
id="postgresqlHost"
|
||||
value={service.weblate.postgresqlHost}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlPort">PostgreSQL Port</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlPort"
|
||||
id="postgresqlPort"
|
||||
value={service.weblate.postgresqlPort}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlUser">PostgreSQL User</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlUser"
|
||||
id="postgresqlUser"
|
||||
value={service.weblate.postgresqlUser}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<label for="postgresqlPassword">PostgreSQL Password</label>
|
||||
<CopyPasswordField
|
||||
name="postgresqlPassword"
|
||||
id="postgresqlPassword"
|
||||
isPasswordField
|
||||
value={service.weblate.postgresqlPassword}
|
||||
readonly
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
@@ -12,7 +12,7 @@
|
||||
export let readOnly: any;
|
||||
export let settings: any;
|
||||
const { id } = $page.params;
|
||||
|
||||
const { ipv4, ipv6 } = settings;
|
||||
let ftpUrl = generateUrl(service.wordpress.ftpPublicPort);
|
||||
let ftpUser = service.wordpress.ftpUser;
|
||||
let ftpPassword = service.wordpress.ftpPassword;
|
||||
@@ -22,7 +22,7 @@
|
||||
function generateUrl(publicPort: any) {
|
||||
return browser
|
||||
? `sftp://${
|
||||
settings.fqdn ? getDomain(settings.fqdn) : window.location.hostname
|
||||
settings?.fqdn ? getDomain(settings.fqdn) : ipv4 || ipv6
|
||||
}:${publicPort}`
|
||||
: 'Loading...';
|
||||
}
|
||||
@@ -93,6 +93,7 @@ define('SUBDOMAIN_INSTALL', false);`
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
id="ftpEnabled"
|
||||
bind:setting={service.wordpress.ftpEnabled}
|
||||
loading={ftpLoading}
|
||||
disabled={!$status.service.isRunning}
|
||||
@@ -127,6 +128,7 @@ define('SUBDOMAIN_INSTALL', false);`
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center px-10">
|
||||
<Setting
|
||||
id="ownMysql"
|
||||
dataTooltip={$t('forms.must_be_stopped_to_modify')}
|
||||
bind:setting={service.wordpress.ownMysql}
|
||||
disabled={$status.service.isRunning}
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
import { page } from '$app/stores';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { addToast } from '$lib/store';
|
||||
const { id } = $page.params;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
async function saveStorage(newStorage = false) {
|
||||
try {
|
||||
if (!storage.path) return errorNotification('Path is required.');
|
||||
if (!storage.path) return errorNotification({message: "Path is required!"});
|
||||
storage.path = storage.path.startsWith('/') ? storage.path : `/${storage.path}`;
|
||||
storage.path = storage.path.endsWith('/') ? storage.path.slice(0, -1) : storage.path;
|
||||
storage.path.replace(/\/\//g, '/');
|
||||
@@ -29,8 +29,10 @@
|
||||
storage.path = null;
|
||||
storage.id = null;
|
||||
}
|
||||
if (newStorage) toast.push('Storage saved.');
|
||||
else toast.push('Storage updated.');
|
||||
addToast({
|
||||
message: 'Storage saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
@@ -39,16 +41,19 @@
|
||||
try {
|
||||
await del(`/services/${id}/storages`, { path: storage.path });
|
||||
dispatch('refresh');
|
||||
toast.push('Storage deleted.');
|
||||
return addToast({
|
||||
message: 'Storage deleted.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
}
|
||||
async function handleSubmit() {
|
||||
if (isNew) {
|
||||
await saveStorage(true)
|
||||
await saveStorage(true);
|
||||
} else {
|
||||
await saveStorage(false)
|
||||
await saveStorage(false);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -59,23 +64,22 @@
|
||||
bind:value={storage.path}
|
||||
required
|
||||
placeholder="eg: /data"
|
||||
class=" border border-dashed border-coolgray-300"
|
||||
/>
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
{#if isNew}
|
||||
<div class="flex items-center justify-center">
|
||||
<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}>Add</button
|
||||
<button class="btn btn-sm btn-success" on:click={() => saveStorage(true)}>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)}>Set</button>
|
||||
<button class="btn btn-sm btn-success" on:click={() => saveStorage(false)}>Set</button>
|
||||
</div>
|
||||
<div class="flex justify-center items-end">
|
||||
<button class="bg-red-600 hover:bg-red-500" on:click={removeStorage}>Remove</button>
|
||||
<button class="btn btn-sm btn-error" on:click={removeStorage}>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -47,7 +47,6 @@
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return handlerNotFoundLoad(error, url);
|
||||
}
|
||||
};
|
||||
@@ -56,31 +55,32 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import { del, get, post } from '$lib/api';
|
||||
import { goto } from '$app/navigation';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
|
||||
import { appSession, disabledButton, status, location, setLocation } from '$lib/store';
|
||||
import {
|
||||
appSession,
|
||||
isDeploymentEnabled,
|
||||
status,
|
||||
location,
|
||||
setLocation,
|
||||
checkIfDeploymentEnabledServices
|
||||
} from '$lib/store';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
const { id } = $page.params;
|
||||
|
||||
export let service: any;
|
||||
|
||||
$disabledButton =
|
||||
!$appSession.isAdmin ||
|
||||
!service.fqdn ||
|
||||
!service.destinationDocker ||
|
||||
!service.version ||
|
||||
!service.type;
|
||||
$isDeploymentEnabled = checkIfDeploymentEnabledServices($appSession.isAdmin, service);
|
||||
|
||||
let loading = false;
|
||||
let statusInterval: any;
|
||||
|
||||
async function deleteService() {
|
||||
const sure = confirm($t('application.confirm_to_delete', { name: service.name }));
|
||||
if (sure) {
|
||||
loading = true;
|
||||
$status.service.initialLoading = true;
|
||||
try {
|
||||
if (service.type && $status.service.isRunning)
|
||||
await post(`/services/${service.id}/${service.type}/stop`, {});
|
||||
@@ -89,32 +89,37 @@
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
$status.service.initialLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
async function stopService() {
|
||||
const sure = confirm($t('database.confirm_stop', { name: service.name }));
|
||||
if (sure) {
|
||||
loading = true;
|
||||
$status.service.initialLoading = true;
|
||||
$status.service.loading = true;
|
||||
try {
|
||||
await post(`/services/${service.id}/${service.type}/stop`, {});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
$status.service.initialLoading = false;
|
||||
$status.service.loading = false;
|
||||
await getStatus();
|
||||
}
|
||||
}
|
||||
}
|
||||
async function startService() {
|
||||
loading = true;
|
||||
$status.service.initialLoading = true;
|
||||
$status.service.loading = true;
|
||||
try {
|
||||
await post(`/services/${service.id}/${service.type}/start`, {});
|
||||
return window.location.reload();
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
$status.service.initialLoading = false;
|
||||
$status.service.loading = false;
|
||||
await getStatus();
|
||||
}
|
||||
}
|
||||
async function getStatus() {
|
||||
@@ -128,7 +133,11 @@
|
||||
}
|
||||
onDestroy(() => {
|
||||
$status.service.initialLoading = true;
|
||||
$status.service.isRunning = false;
|
||||
$status.service.isExited = false;
|
||||
$status.service.loading = false;
|
||||
$location = null;
|
||||
$isDeploymentEnabled = false;
|
||||
clearInterval(statusInterval);
|
||||
});
|
||||
onMount(async () => {
|
||||
@@ -147,276 +156,266 @@
|
||||
</script>
|
||||
|
||||
<nav class="nav-side">
|
||||
{#if loading}
|
||||
<Loading fullscreen cover />
|
||||
{:else}
|
||||
{#if service.type && service.destinationDockerId && service.version}
|
||||
{#if $location}
|
||||
<a
|
||||
href={$location}
|
||||
target="_blank"
|
||||
class="icons tooltip-bottom flex items-center bg-transparent text-sm"
|
||||
><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
|
||||
>
|
||||
<div class="border border-stone-700 h-8" />
|
||||
{/if}
|
||||
{#if $status.service.isExited}
|
||||
<a
|
||||
href={!$disabledButton ? `/services/${id}/logs` : null}
|
||||
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500"
|
||||
data-tooltip="Service exited with an error!"
|
||||
sveltekit:prefetch
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
|
||||
/>
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
</a>
|
||||
{/if}
|
||||
{#if $status.service.initialLoading}
|
||||
<button
|
||||
class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
|
||||
>
|
||||
<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="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
|
||||
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
|
||||
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
|
||||
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
|
||||
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
|
||||
<line x1="11" y1="19.94" x2="11" y2="19.95" />
|
||||
</svg>
|
||||
</button>
|
||||
{:else if $status.service.isRunning}
|
||||
<button
|
||||
on:click={stopService}
|
||||
title={$t('service.stop_service')}
|
||||
type="submit"
|
||||
disabled={$disabledButton}
|
||||
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('service.stop_service')
|
||||
: $t('service.permission_denied_stop_service')}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="6" y="5" width="4" height="14" rx="1" />
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
on:click={startService}
|
||||
title={$t('service.start_service')}
|
||||
type="submit"
|
||||
disabled={$disabledButton}
|
||||
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('service.start_service')
|
||||
: $t('service.permission_denied_start_service')}
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M7 4v16l13 -8z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<div class="border border-stone-700 h-8" />
|
||||
{/if}
|
||||
{#if service.type && service.destinationDockerId && service.version}
|
||||
<a
|
||||
href="/services/{id}"
|
||||
sveltekit:prefetch
|
||||
class="hover:text-yellow-500 rounded"
|
||||
class:text-yellow-500={$page.url.pathname === `/services/${id}`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
|
||||
{#if $location}
|
||||
<a
|
||||
id="open"
|
||||
href={$location}
|
||||
target="_blank"
|
||||
class="icons flex items-center bg-transparent text-sm"
|
||||
><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"
|
||||
>
|
||||
<button
|
||||
title={$t('application.configurations')}
|
||||
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
|
||||
data-tooltip={$t('application.configurations')}
|
||||
>
|
||||
<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></button
|
||||
></a
|
||||
>
|
||||
<a
|
||||
href="/services/{id}/secrets"
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/services/${id}/secrets`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
|
||||
>
|
||||
<button
|
||||
title={$t('application.secret')}
|
||||
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
|
||||
data-tooltip={$t('application.secret')}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
|
||||
/>
|
||||
<circle cx="12" cy="11" r="1" />
|
||||
<line x1="12" y1="12" x2="12" y2="14.5" />
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
<a
|
||||
href="/services/{id}/storages"
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/services/${id}/storages`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`}
|
||||
>
|
||||
<button
|
||||
title="Persistent Storage"
|
||||
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500"
|
||||
data-tooltip="Persistent Storage"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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" />
|
||||
<ellipse cx="12" cy="6" rx="8" ry="3" />
|
||||
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
|
||||
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
|
||||
</svg>
|
||||
</button></a
|
||||
>
|
||||
<div class="border border-stone-700 h-8" />
|
||||
<a
|
||||
href={!$disabledButton && $status.service.isRunning ? `/services/${id}/logs` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/services/${id}/logs`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/logs`}
|
||||
>
|
||||
<button
|
||||
title={$t('service.logs')}
|
||||
disabled={!$status.service.isRunning}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip={$t('service.logs')}
|
||||
>
|
||||
<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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<line x1="3" y1="6" x2="3" y2="19" />
|
||||
<line x1="12" y1="6" x2="12" y2="19" />
|
||||
<line x1="21" y1="6" x2="21" y2="19" />
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
{/if}
|
||||
<button
|
||||
on:click={deleteService}
|
||||
title={$t('service.delete_service')}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:hover:text-red-500={$appSession.isAdmin}
|
||||
class="icons bg-transparent tooltip-bottom text-sm"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('service.delete_service')
|
||||
: $t('service.permission_denied_delete_service')}><DeleteIcon /></button
|
||||
<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
|
||||
>
|
||||
<Tooltip triggeredBy="#open">Open</Tooltip>
|
||||
<div class="border border-stone-700 h-8" />
|
||||
{/if}
|
||||
{#if $status.service.isExited}
|
||||
<a
|
||||
id="error"
|
||||
href={$isDeploymentEnabled ? `/services/${id}/logs` : null}
|
||||
class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
|
||||
sveltekit:prefetch
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
|
||||
/>
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
</a>
|
||||
<Tooltip triggeredBy="#error">Service exited with an error!</Tooltip>
|
||||
{/if}
|
||||
{#if $status.service.initialLoading}
|
||||
<button
|
||||
class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
|
||||
>
|
||||
<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="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
|
||||
<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
|
||||
<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
|
||||
<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
|
||||
<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
|
||||
<line x1="11" y1="19.94" x2="11" y2="19.95" />
|
||||
</svg>
|
||||
</button>
|
||||
{:else if $status.service.isRunning}
|
||||
<button
|
||||
id="stop"
|
||||
on:click={stopService}
|
||||
type="submit"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="6" y="5" width="4" height="14" rx="1" />
|
||||
<rect x="14" y="5" width="4" height="14" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#stop">Stop</Tooltip>
|
||||
{:else}
|
||||
<button
|
||||
id="start"
|
||||
on:click={startService}
|
||||
type="submit"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M7 4v16l13 -8z" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#start">Start</Tooltip>
|
||||
{/if}
|
||||
<div class="border border-stone-700 h-8" />
|
||||
{#if service.type && service.destinationDockerId && service.version}
|
||||
<a
|
||||
href="/services/{id}"
|
||||
sveltekit:prefetch
|
||||
class="hover:text-yellow-500 rounded"
|
||||
class:text-yellow-500={$page.url.pathname === `/services/${id}`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
|
||||
>
|
||||
<button
|
||||
id="configuration"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm"
|
||||
>
|
||||
<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></button
|
||||
></a
|
||||
>
|
||||
<Tooltip triggeredBy="#configuration">Configuration</Tooltip>
|
||||
<a
|
||||
href="/services/{id}/secrets"
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/services/${id}/secrets`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
|
||||
>
|
||||
<button
|
||||
id="secrets"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm "
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
|
||||
/>
|
||||
<circle cx="12" cy="11" r="1" />
|
||||
<line x1="12" y1="12" x2="12" y2="14.5" />
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
|
||||
<a
|
||||
href="/services/{id}/storages"
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/services/${id}/storages`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`}
|
||||
>
|
||||
<button
|
||||
id="persistentstorage"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-sm"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-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" />
|
||||
<ellipse cx="12" cy="6" rx="8" ry="3" />
|
||||
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
|
||||
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
|
||||
</svg>
|
||||
</button></a
|
||||
>
|
||||
<Tooltip triggeredBy="#persistentstorage">Persistent Storage</Tooltip>
|
||||
<div class="border border-stone-700 h-8" />
|
||||
<a
|
||||
href={$isDeploymentEnabled && $status.service.isRunning ? `/services/${id}/logs` : null}
|
||||
sveltekit:prefetch
|
||||
class="hover:text-pink-500 rounded"
|
||||
class:text-pink-500={$page.url.pathname === `/services/${id}/logs`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/logs`}
|
||||
>
|
||||
<button id="logs" disabled={!$status.service.isRunning} class="icons bg-transparent text-sm">
|
||||
<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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
|
||||
<line x1="3" y1="6" x2="3" y2="19" />
|
||||
<line x1="12" y1="6" x2="12" y2="19" />
|
||||
<line x1="21" y1="6" x2="21" y2="19" />
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
<Tooltip triggeredBy="#logs">Logs</Tooltip>
|
||||
{/if}
|
||||
<button
|
||||
id="delete"
|
||||
on:click={deleteService}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:hover:text-red-500={$appSession.isAdmin}
|
||||
class="icons bg-transparent text-sm"><DeleteIcon /></button
|
||||
>
|
||||
<Tooltip triggeredBy="#delete">Delete</Tooltip>
|
||||
</nav>
|
||||
<slot />
|
||||
|
||||
@@ -32,10 +32,16 @@
|
||||
import { get, post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
const from = $page.url.searchParams.get('from');
|
||||
|
||||
onMount(async () => {
|
||||
if (destinations.length === 1) {
|
||||
await handleSubmit(destinations[0].id);
|
||||
}
|
||||
});
|
||||
async function handleSubmit(destinationId: any) {
|
||||
try {
|
||||
await post(`/services/${id}/configuration/destination`, { destinationId });
|
||||
@@ -54,7 +60,9 @@
|
||||
<div class="flex justify-center">
|
||||
{#if !destinations || destinations.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="pb-2 text-center font-bold">{$t('application.configuration.no_configurable_destination')}</div>
|
||||
<div class="pb-2 text-center font-bold">
|
||||
{$t('application.configuration.no_configurable_destination')}
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
|
||||
<svg
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -31,14 +31,22 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { get, post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification, supportedServiceTypesAndVersions } from '$lib/common';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { onMount } from 'svelte';
|
||||
import { appSession } from '$lib/store';
|
||||
|
||||
const { id } = $page.params;
|
||||
const from = $page.url.searchParams.get('from');
|
||||
|
||||
let recommendedVersion = supportedServiceTypesAndVersions.find(
|
||||
let recommendedVersion = $appSession.supportedServiceTypesAndVersions.find(
|
||||
({ name }) => name === type
|
||||
)?.recommendedVersion;
|
||||
|
||||
onMount(async () => {
|
||||
if (versions.length === 1) {
|
||||
await handleSubmit(versions[0]);
|
||||
}
|
||||
});
|
||||
|
||||
async function handleSubmit(version: any) {
|
||||
try {
|
||||
await post(`/services/${id}/configuration/version`, { version });
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
|
||||
let service: any = {};
|
||||
let logsLoading = false;
|
||||
@@ -40,7 +41,6 @@
|
||||
logs = data.logs;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
logsLoading = false;
|
||||
@@ -126,9 +126,9 @@
|
||||
{/if}
|
||||
<div class="flex justify-end sticky top-0 p-1 mx-1">
|
||||
<button
|
||||
id="follow"
|
||||
on:click={followBuild}
|
||||
class="bg-transparent"
|
||||
data-tooltip="Follow logs"
|
||||
class="bg-transparent btn btn-sm"
|
||||
class:text-green-500={followingLogs}
|
||||
>
|
||||
<svg
|
||||
@@ -148,6 +148,7 @@
|
||||
<line x1="16" y1="12" x2="12" y2="16" />
|
||||
</svg>
|
||||
</button>
|
||||
<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
|
||||
|
||||
@@ -25,14 +25,47 @@
|
||||
import { page } from '$app/stores';
|
||||
import { get } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import pLimit from 'p-limit';
|
||||
import ServiceLinks from './_ServiceLinks.svelte';
|
||||
import { addToast } from '$lib/store';
|
||||
import { saveSecret } from './utils';
|
||||
const limit = pLimit(1);
|
||||
|
||||
const { id } = $page.params;
|
||||
let batchSecrets = '';
|
||||
|
||||
async function refreshSecrets() {
|
||||
const data = await get(`/services/${id}/secrets`);
|
||||
secrets = [...data.secrets];
|
||||
}
|
||||
async function getValues(e: any) {
|
||||
e.preventDefault();
|
||||
const eachValuePair = batchSecrets.split('\n');
|
||||
const batchSecretsPairs = eachValuePair
|
||||
.filter((secret) => !secret.startsWith('#') && secret)
|
||||
.map((secret) => {
|
||||
const [name, ...rest] = secret.split('=');
|
||||
const value = rest.join('=');
|
||||
const cleanValue = value?.replaceAll('"', '') || '';
|
||||
return {
|
||||
name,
|
||||
value: cleanValue,
|
||||
isNew: !secrets.find((secret: any) => name === secret.name)
|
||||
};
|
||||
});
|
||||
|
||||
await Promise.all(
|
||||
batchSecretsPairs.map(({ name, value, isNew }) =>
|
||||
limit(() => saveSecret({ name, value, serviceId: id, isNew }))
|
||||
)
|
||||
);
|
||||
batchSecrets = '';
|
||||
await refreshSecrets();
|
||||
addToast({
|
||||
message: 'Secrets saved.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -93,4 +126,9 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 class="title my-6 font-bold">Paste .env file</h2>
|
||||
<form on:submit|preventDefault={getValues} class="mb-12 w-full">
|
||||
<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
|
||||
<button class="btn btn-sm bg-applications" type="submit">Batch add secrets</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
import { page } from '$app/stores';
|
||||
import Storage from './_Storage.svelte';
|
||||
import { get } from '$lib/api';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
|
||||
import ServiceLinks from './_ServiceLinks.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
@@ -74,7 +74,7 @@
|
||||
|
||||
<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
|
||||
<div class="flex justify-center py-4 text-center">
|
||||
<Explainer
|
||||
<SimpleExplainer
|
||||
customClass="w-full"
|
||||
text={'You can specify any folder that you want to be persistent across restarts. <br>This is useful for storing data for VSCode server or WordPress.'}
|
||||
/>
|
||||
|
||||
42
apps/ui/src/routes/services/[id]/utils.ts
Normal file
42
apps/ui/src/routes/services/[id]/utils.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { post } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
|
||||
type Props = {
|
||||
isNew: boolean;
|
||||
name: string;
|
||||
value: string;
|
||||
isBuildSecret?: boolean;
|
||||
isPRMRSecret?: boolean;
|
||||
isNewSecret?: boolean;
|
||||
serviceId: string;
|
||||
};
|
||||
|
||||
export async function saveSecret({
|
||||
isNew,
|
||||
name,
|
||||
value,
|
||||
isBuildSecret,
|
||||
isPRMRSecret,
|
||||
isNewSecret,
|
||||
serviceId
|
||||
}: Props): Promise<void> {
|
||||
if (!name) return errorNotification(`${t.get('forms.name')} ${t.get('forms.is_required')}`);
|
||||
if (!value) return errorNotification(`${t.get('forms.value')} ${t.get('forms.is_required')}`);
|
||||
try {
|
||||
await post(`/services/${serviceId}/secrets`, {
|
||||
name,
|
||||
value,
|
||||
isBuildSecret,
|
||||
isPRMRSecret,
|
||||
isNew: isNew || false
|
||||
});
|
||||
if (isNewSecret) {
|
||||
name = '';
|
||||
value = '';
|
||||
isBuildSecret = false;
|
||||
}
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
@@ -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,9 +45,9 @@
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">{$t('index.services')}</div>
|
||||
<div on:click={newService} class="add-icon cursor-pointer bg-pink-600 hover:bg-pink-500">
|
||||
<button on:click={newService} class="btn btn-square btn-sm bg-services">
|
||||
<svg
|
||||
class="w-6"
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -60,10 +59,10 @@
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-col justify-center">
|
||||
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
|
||||
{#if !services || ownServices.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="text-center text-xl font-bold">{$t('service.no_service')}</div>
|
||||
@@ -75,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>
|
||||
@@ -103,7 +102,7 @@
|
||||
{#each otherServices 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>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { appSession } from '$lib/store';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col pt-4 space-y-6 w-96 px-20">
|
||||
<div class="flex flex-col pt-4 space-y-6 px-10">
|
||||
{#if $appSession.teamId === '0'}
|
||||
<a
|
||||
href="/settings/global"
|
||||
|
||||
@@ -19,20 +19,20 @@
|
||||
<script lang="ts">
|
||||
export let settings: any;
|
||||
import Setting from '$lib/components/Setting.svelte';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { del, get, post } from '$lib/api';
|
||||
import { browser } from '$app/env';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { t } from '$lib/translations';
|
||||
import { appSession, features } from '$lib/store';
|
||||
import { errorNotification, getDomain } from '$lib/common';
|
||||
import { addToast, appSession, features } from '$lib/store';
|
||||
import { asyncSleep, errorNotification, getDomain } from '$lib/common';
|
||||
import Menu from './_Menu.svelte';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
|
||||
let isAPIDebuggingEnabled = settings.isAPIDebuggingEnabled;
|
||||
let isRegistrationEnabled = settings.isRegistrationEnabled;
|
||||
let dualCerts = settings.dualCerts;
|
||||
let isAutoUpdateEnabled = settings.isAutoUpdateEnabled;
|
||||
let isDNSCheckEnabled = settings.isDNSCheckEnabled;
|
||||
|
||||
let DNSServers = settings.DNSServers;
|
||||
let minPort = settings.minPort;
|
||||
let maxPort = settings.maxPort;
|
||||
|
||||
@@ -45,7 +45,8 @@
|
||||
let loading = {
|
||||
save: false,
|
||||
remove: false,
|
||||
proxyMigration: false
|
||||
proxyMigration: false,
|
||||
restart: false
|
||||
};
|
||||
|
||||
async function removeFqdn() {
|
||||
@@ -76,14 +77,20 @@
|
||||
if (name === 'isDNSCheckEnabled') {
|
||||
isDNSCheckEnabled = !isDNSCheckEnabled;
|
||||
}
|
||||
|
||||
if (name === 'isAPIDebuggingEnabled') {
|
||||
isAPIDebuggingEnabled = !isAPIDebuggingEnabled;
|
||||
}
|
||||
await post(`/settings`, {
|
||||
isAPIDebuggingEnabled,
|
||||
isRegistrationEnabled,
|
||||
dualCerts,
|
||||
isAutoUpdateEnabled,
|
||||
isDNSCheckEnabled
|
||||
});
|
||||
return toast.push(t.get('application.settings_saved'));
|
||||
return addToast({
|
||||
message: t.get('application.settings_saved'),
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
}
|
||||
@@ -103,9 +110,16 @@
|
||||
settings.minPort = minPort;
|
||||
settings.maxPort = maxPort;
|
||||
}
|
||||
if (DNSServers !== settings.DNSServers) {
|
||||
await post(`/settings`, { DNSServers });
|
||||
settings.DNSServers = DNSServers;
|
||||
}
|
||||
forceSave = false;
|
||||
toast.push('Configuration saved.');
|
||||
} catch (error) {
|
||||
return addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error: any) {
|
||||
if (error.message?.startsWith($t('application.dns_not_set_partial_error'))) {
|
||||
forceSave = true;
|
||||
if (dualCerts) {
|
||||
@@ -120,7 +134,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(error);
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading.save = false;
|
||||
@@ -129,7 +142,10 @@
|
||||
async function isDNSValid(domain: any, isWWW: any) {
|
||||
try {
|
||||
await get(`/settings/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) {
|
||||
@@ -141,6 +157,41 @@
|
||||
function resetView() {
|
||||
forceSave = false;
|
||||
}
|
||||
async function restartCoolify() {
|
||||
const sure = confirm(
|
||||
'Are you sure you would like to restart Coolify? Currently running deployments will be stopped and restarted.'
|
||||
);
|
||||
if (sure) {
|
||||
loading.restart = true;
|
||||
try {
|
||||
await post(`/internal/restart`, {});
|
||||
await asyncSleep(10000);
|
||||
let reachable = false;
|
||||
let tries = 0;
|
||||
do {
|
||||
await asyncSleep(4000);
|
||||
try {
|
||||
await get(`/undead`);
|
||||
reachable = true;
|
||||
} catch (error) {
|
||||
reachable = false;
|
||||
}
|
||||
if (reachable) break;
|
||||
tries++;
|
||||
} while (!reachable || tries < 120);
|
||||
addToast({
|
||||
message: 'New version reachable. Reloading...',
|
||||
type: 'success'
|
||||
});
|
||||
await asyncSleep(3000);
|
||||
return window.location.reload();
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading.restart = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
@@ -154,10 +205,9 @@
|
||||
<div class="flex space-x-1 pb-6">
|
||||
<div class="title font-bold">{$t('index.global_settings')}</div>
|
||||
<button
|
||||
class="btn btn-sm bg-settings text-black"
|
||||
type="submit"
|
||||
class:bg-yellow-500={!loading.save}
|
||||
class:bg-orange-600={forceSave}
|
||||
class:hover:bg-yellow-500={!loading.save}
|
||||
class:hover:bg-orange-400={forceSave}
|
||||
disabled={loading.save}
|
||||
>{loading.save
|
||||
@@ -171,11 +221,15 @@
|
||||
<button
|
||||
on:click|preventDefault={removeFqdn}
|
||||
disabled={loading.remove}
|
||||
class:bg-red-600={!loading.remove}
|
||||
class:hover:bg-red-500={!loading.remove}
|
||||
class="btn btn-sm"
|
||||
>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
|
||||
>
|
||||
{/if}
|
||||
<button
|
||||
on:click={restartCoolify}
|
||||
class:loading={loading.restart}
|
||||
class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</button
|
||||
>
|
||||
</div>
|
||||
<div class="grid grid-flow-row gap-2 px-10">
|
||||
<!-- <Language /> -->
|
||||
@@ -183,8 +237,8 @@
|
||||
<div class="flex-col">
|
||||
<div class="pt-2 text-base font-bold text-stone-100">
|
||||
{$t('application.url_fqdn')}
|
||||
<Explainer explanation={$t('setting.ssl_explainer')} />
|
||||
</div>
|
||||
<Explainer text={$t('setting.ssl_explainer')} />
|
||||
</div>
|
||||
<div class="justify-start text-left">
|
||||
<input
|
||||
@@ -202,13 +256,13 @@
|
||||
<div class="flex-col space-y-2 pt-4 text-center">
|
||||
{#if isNonWWWDomainOK}
|
||||
<button
|
||||
class="bg-green-600 hover:bg-green-500"
|
||||
class="btn btn-sm bg-success"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="bg-red-600 hover:bg-red-500"
|
||||
class="btn btn-sm bg-error"
|
||||
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
|
||||
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
|
||||
>
|
||||
@@ -216,14 +270,14 @@
|
||||
{#if dualCerts}
|
||||
{#if isWWWDomainOK}
|
||||
<button
|
||||
class="bg-green-600 hover:bg-green-500"
|
||||
class="btn btn-sm bg-success"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="bg-red-600 hover:bg-red-500"
|
||||
class="btn btn-sm bg-error"
|
||||
on:click|preventDefault={() =>
|
||||
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
|
||||
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
|
||||
@@ -238,8 +292,8 @@
|
||||
<div class="flex-col">
|
||||
<div class="pt-2 text-base font-bold text-stone-100">
|
||||
{$t('forms.public_port_range')}
|
||||
<Explainer explanation={$t('forms.public_port_range_explainer')} />
|
||||
</div>
|
||||
<Explainer text={$t('forms.public_port_range_explainer')} />
|
||||
</div>
|
||||
<div class="mx-auto flex-row items-center justify-center space-y-2">
|
||||
<input
|
||||
@@ -261,14 +315,27 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="isDNSCheckEnabled"
|
||||
bind:setting={isDNSCheckEnabled}
|
||||
title={$t('setting.is_dns_check_enabled')}
|
||||
description={$t('setting.is_dns_check_enabled_explainer')}
|
||||
on:click={() => changeSettings('isDNSCheckEnabled')}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="text-base font-bold text-stone-100">
|
||||
Custom DNS servers <Explainer
|
||||
explanation="You can specify a custom DNS server to verify your domains all over Coolify.<br><br>By default, the OS defined DNS servers are used."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-row items-center justify-center">
|
||||
<input placeholder="1.1.1.1,8.8.8.8" bind:value={DNSServers} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="dualCerts"
|
||||
dataTooltip={$t('setting.must_remove_domain_before_changing')}
|
||||
disabled={isFqdnSet}
|
||||
bind:setting={dualCerts}
|
||||
@@ -279,22 +346,31 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="isRegistrationEnabled"
|
||||
bind:setting={isRegistrationEnabled}
|
||||
title={$t('setting.registration_allowed')}
|
||||
description={$t('setting.registration_allowed_explainer')}
|
||||
on:click={() => changeSettings('isRegistrationEnabled')}
|
||||
/>
|
||||
</div>
|
||||
{#if browser && $features.beta}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
bind:setting={isAutoUpdateEnabled}
|
||||
title={$t('setting.auto_update_enabled')}
|
||||
description={$t('setting.auto_update_enabled_explainer')}
|
||||
on:click={() => changeSettings('isAutoUpdateEnabled')}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="isAPIDebuggingEnabled"
|
||||
bind:setting={isAPIDebuggingEnabled}
|
||||
title="API Debugging"
|
||||
description="Enable API debugging. This will log all API requests and responses.<br><br>You need to restart the Coolify for this to take effect."
|
||||
on:click={() => changeSettings('isAPIDebuggingEnabled')}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<Setting
|
||||
id="isAutoUpdateEnabled"
|
||||
bind:setting={isAutoUpdateEnabled}
|
||||
title={$t('setting.auto_update_enabled')}
|
||||
description={$t('setting.auto_update_enabled_explainer')}
|
||||
on:click={() => changeSettings('isAutoUpdateEnabled')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
<script lang="ts">
|
||||
export let sshKeys: any;
|
||||
import { del, post } from '$lib/api';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import Menu from './_Menu.svelte';
|
||||
@@ -69,8 +68,7 @@
|
||||
<div class="title font-bold">SSH Keys</div>
|
||||
<button
|
||||
on:click={() => (isModalActive = true)}
|
||||
class:bg-yellow-500={!loading.save}
|
||||
class:hover:bg-yellow-400={!loading.save}
|
||||
class="btn btn-sm bg-settings text-black"
|
||||
disabled={loading.save}>New SSH Key</button
|
||||
>
|
||||
</div>
|
||||
@@ -82,7 +80,9 @@
|
||||
<div class="box-selection group relative">
|
||||
<div class="text-xl font-bold">{key.name}</div>
|
||||
<div class="py-3 text-stone-600">Added on {key.createdAt}</div>
|
||||
<button on:click={() => deleteSSHKey(key.id)} class="bg-red-500">Delete</button>
|
||||
<button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm bg-error"
|
||||
>Delete</button
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
@@ -140,8 +140,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex space-x-4 justify-end">
|
||||
<button type="submit" class="bg-green-600 hover:bg-green-500">Save</button>
|
||||
<button on:click={() => (isModalActive = false)} type="button" class="">Cancel</button>
|
||||
<button type="submit" class="btn btn-sm bg-success">Save</button>
|
||||
<button on:click={() => (isModalActive = false)} type="button" class="btn btn-sm"
|
||||
>Cancel</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -3,12 +3,11 @@
|
||||
export let settings: any;
|
||||
import { page } from '$app/stores';
|
||||
import { getAPIUrl, getWebhookUrl, post } from '$lib/api';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { t } from '$lib/translations';
|
||||
import { dashify, errorNotification, getDomain } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import { addToast, appSession } from '$lib/store';
|
||||
import { dev } from '$app/env';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
|
||||
const { id } = $page.params;
|
||||
|
||||
@@ -24,7 +23,10 @@
|
||||
htmlUrl: source.htmlUrl.replace(/\/$/, ''),
|
||||
apiUrl: source.apiUrl.replace(/\/$/, '')
|
||||
});
|
||||
toast.push('Configuration saved.');
|
||||
return addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
@@ -32,27 +34,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function installRepositories(source: any) {
|
||||
const { htmlUrl } = source;
|
||||
const left = screen.width / 2 - 1020 / 2;
|
||||
const top = screen.height / 2 - 1000 / 2;
|
||||
const newWindow = open(
|
||||
`${htmlUrl}/apps/${source.githubApp.name}/installations/new`,
|
||||
'GitHub',
|
||||
'resizable=1, scrollbars=1, fullscreen=0, height=1000, width=1020,top=' +
|
||||
top +
|
||||
', left=' +
|
||||
left +
|
||||
', toolbar=0, menubar=0, status=0'
|
||||
);
|
||||
const timer = setInterval(() => {
|
||||
if (newWindow?.closed) {
|
||||
clearInterval(timer);
|
||||
window.location.reload();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
async function newGithubApp() {
|
||||
loading = true;
|
||||
try {
|
||||
@@ -65,8 +46,8 @@
|
||||
customPort: source.customPort
|
||||
});
|
||||
const { organization, htmlUrl } = source;
|
||||
const { fqdn } = settings;
|
||||
const host = dev ? getAPIUrl() : fqdn ? fqdn : `http://${window.location.host}` || '';
|
||||
const { fqdn, ipv4, ipv6 } = settings;
|
||||
const host = dev ? getAPIUrl() : fqdn ? fqdn : `http://${ipv4 || ipv6}` || '';
|
||||
const domain = getDomain(fqdn);
|
||||
|
||||
let url = 'settings/apps/new';
|
||||
@@ -112,29 +93,33 @@
|
||||
<div class="mx-auto max-w-4xl px-6">
|
||||
{#if !source.githubAppId}
|
||||
<form on:submit|preventDefault={newGithubApp} class="py-4">
|
||||
<div class="flex space-x-1 pb-7">
|
||||
<div class="grid gap-1 lg:grid-flow-col pb-7">
|
||||
<div class="title">General</div>
|
||||
{#if !source.githubAppId}
|
||||
<button class="bg-orange-600 font-normal" type="submit">Save</button>
|
||||
<button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid grid-flow-row gap-2 px-10">
|
||||
<div class="grid grid-flow-row gap-2">
|
||||
<div class="mt-2 grid grid-cols-2 items-center">
|
||||
<div class="mt-2 grid lg:grid-cols-2 items-center">
|
||||
<label for="name" class="text-base font-bold text-stone-100">Name</label>
|
||||
<input name="name" id="name" required bind:value={source.name} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid lg:grid-cols-2 items-center">
|
||||
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
|
||||
<input name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid lg:grid-cols-2 items-center">
|
||||
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
|
||||
<input name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="customPort" class="text-base font-bold text-stone-100">Custom SSH Port</label>
|
||||
<div class="grid lg:grid-cols-2 items-center">
|
||||
<label for="customPort" class="text-base font-bold text-stone-100"
|
||||
>Custom SSH Port <Explainer
|
||||
explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
name="customPort"
|
||||
id="customPort"
|
||||
@@ -143,18 +128,15 @@
|
||||
required
|
||||
value={source.customPort}
|
||||
/>
|
||||
<Explainer
|
||||
text="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<div class="grid lg:grid-cols-2">
|
||||
<div class="flex flex-col">
|
||||
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
|
||||
>Organization</label
|
||||
>Organization
|
||||
<Explainer
|
||||
explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
|
||||
/></label
|
||||
>
|
||||
<Explainer
|
||||
text="Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
name="organization"
|
||||
@@ -167,30 +149,30 @@
|
||||
</form>
|
||||
{:else if source.githubApp?.installationId}
|
||||
<form on:submit|preventDefault={handleSubmit} class="py-4">
|
||||
<div class="flex space-x-1 pb-5 ">
|
||||
<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5">
|
||||
<div class="title">{$t('general')}</div>
|
||||
|
||||
{#if $appSession.isAdmin}
|
||||
<button
|
||||
type="submit"
|
||||
class:bg-orange-600={!loading}
|
||||
class:hover:bg-orange-500={!loading}
|
||||
disabled={loading}>{loading ? 'Saving...' : 'Save'}</button
|
||||
<button class="btn btn-sm bg-sources" type="submit" disabled={loading}
|
||||
>{loading ? 'Saving...' : 'Save'}</button
|
||||
>
|
||||
<a
|
||||
class="no-underline button justify-center flex items-center"
|
||||
href={`${source.htmlUrl}/apps/${source.githubApp.name}/installations/new`}
|
||||
class="btn btn-sm"
|
||||
href={`${source.htmlUrl}/${
|
||||
source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
|
||||
}/${source.githubApp.name}/installations/new`}
|
||||
>{$t('source.change_app_settings', { name: 'GitHub' })}</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid grid-flow-row gap-2 px-10">
|
||||
<div class="grid grid-flow-row gap-2">
|
||||
<div class="mt-2 grid grid-cols-2 items-center">
|
||||
<div class="mt-2 grid lg: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" required bind:value={source.name} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid lg:grid-cols-2 items-center">
|
||||
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
|
||||
<input
|
||||
name="htmlUrl"
|
||||
@@ -201,7 +183,7 @@
|
||||
bind:value={source.htmlUrl}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid lg:grid-cols-2 items-center">
|
||||
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
|
||||
<input
|
||||
name="apiUrl"
|
||||
@@ -213,9 +195,11 @@
|
||||
/>
|
||||
</div>
|
||||
{#if selfHosted}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="grid lg:grid-cols-2 items-center">
|
||||
<label for="customPort" class="text-base font-bold text-stone-100"
|
||||
>Custom SSH Port</label
|
||||
>Custom SSH Port <Explainer
|
||||
explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
name="customPort"
|
||||
@@ -225,12 +209,9 @@
|
||||
required
|
||||
value={source.customPort}
|
||||
/>
|
||||
<Explainer
|
||||
text="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid grid-cols-2">
|
||||
<div class="grid lg:grid-cols-2">
|
||||
<div class="flex flex-col">
|
||||
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
|
||||
>Organization</label
|
||||
@@ -249,10 +230,12 @@
|
||||
</form>
|
||||
{:else}
|
||||
<div class="text-center">
|
||||
<a href={`${source.htmlUrl}/apps/${source.githubApp.name}/installations/new`}>
|
||||
<button class="box-selection bg-orange-600 hover:bg-orange-500 text-xl"
|
||||
>Install Repositories</button
|
||||
></a
|
||||
<a
|
||||
href={`${source.htmlUrl}/${
|
||||
source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
|
||||
}/${source.githubApp.name}/installations/new`}
|
||||
>
|
||||
<button class="box-selection bg-sources text-xl font-bold">Install Repositories</button></a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
<script lang="ts">
|
||||
export let source: any;
|
||||
export let settings: any;
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { getAPIUrl, post } from '$lib/api';
|
||||
import { dev } from '$app/env';
|
||||
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
|
||||
import { t } from '$lib/translations';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import { appSession } from '$lib/store';
|
||||
import { addToast, appSession } from '$lib/store';
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
const { id } = $page.params;
|
||||
|
||||
let url = settings.fqdn ? settings.fqdn : window.location.origin;
|
||||
@@ -73,7 +72,10 @@
|
||||
apiUrl: source.apiUrl.replace(/\/$/, ''),
|
||||
customPort: source.customPort
|
||||
});
|
||||
toast.push('Configuration saved.');
|
||||
return addToast({
|
||||
message: 'Configuration saved.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
@@ -124,8 +126,10 @@
|
||||
break;
|
||||
case 'group':
|
||||
if (!source.gitlabApp.groupName) {
|
||||
toast.push('Please enter a group name first.');
|
||||
return;
|
||||
return addToast({
|
||||
message: 'Please enter a group name first.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
window.open(
|
||||
`${source.htmlUrl}/groups/${source.gitlabApp.groupName}/-/settings/applications`
|
||||
@@ -144,23 +148,28 @@
|
||||
<div class="flex space-x-1 pb-7">
|
||||
<div class="title">General</div>
|
||||
{#if $appSession.isAdmin}
|
||||
<button
|
||||
type="submit"
|
||||
class:bg-orange-600={!loading}
|
||||
class:hover:bg-orange-500={!loading}
|
||||
disabled={loading}>{loading ? $t('forms.saving') : $t('forms.save')}</button
|
||||
<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
|
||||
>{loading ? $t('forms.saving') : $t('forms.save')}</button
|
||||
>
|
||||
{#if source.gitlabAppId}
|
||||
<button on:click|preventDefault={changeSettings}
|
||||
<button class="btn btn-sm" on:click|preventDefault={changeSettings}
|
||||
>{$t('source.change_app_settings', { name: 'GitLab' })}</button
|
||||
>
|
||||
{:else}
|
||||
<button on:click|preventDefault|stopPropagation={newApp}>Create new GitLab App</button>
|
||||
<button class="btn btn-sm" on:click|preventDefault|stopPropagation={newApp}
|
||||
>Create new GitLab App manually</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="grid grid-flow-row gap-2 px-10">
|
||||
{#if !source.gitlabAppId}
|
||||
<a
|
||||
href="https://docs.coollabs.io/coolify/sources#how-to-integrate-with-gitlab"
|
||||
class="font-bold "
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Documentation and detailed instructions.</a
|
||||
>
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="type" class="text-base font-bold text-stone-100">Application Type</label>
|
||||
<select name="type" id="type" class="w-96" bind:value={applicationType}>
|
||||
@@ -230,7 +239,11 @@
|
||||
</div>
|
||||
{#if selfHosted}
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<label for="customPort" class="text-base font-bold text-stone-100">Custom SSH Port</label>
|
||||
<label for="customPort" class="text-base font-bold text-stone-100"
|
||||
>Custom SSH Port <Explainer
|
||||
explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
name="customPort"
|
||||
id="customPort"
|
||||
@@ -239,19 +252,16 @@
|
||||
required
|
||||
bind:value={source.customPort}
|
||||
/>
|
||||
<Explainer
|
||||
text="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid grid-cols-2 items-start">
|
||||
<div class="flex-col">
|
||||
<label for="oauthId" class="pt-2 text-base font-bold text-stone-100"
|
||||
>{$t('source.oauth_id')}</label
|
||||
>{$t('source.oauth_id')}
|
||||
{#if !source.gitlabAppId}
|
||||
<Explainer explanation={$t('source.oauth_id_explainer')} />
|
||||
{/if}</label
|
||||
>
|
||||
{#if !source.gitlabAppId}
|
||||
<Explainer text={$t('source.oauth_id_explainer')} />
|
||||
{/if}
|
||||
</div>
|
||||
<input
|
||||
disabled={source.gitlabAppId}
|
||||
@@ -295,16 +305,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{#if !source.gitlabAppId}
|
||||
<Explainer
|
||||
customClass="w-full"
|
||||
text="<span class='font-bold text-base text-white'>Scopes required:</span>
|
||||
<br>- <span class='text-orange-500 font-bold'>api</span> (Access the authenticated user's API)
|
||||
<br>- <span class='text-orange-500 font-bold'>read_repository</span> (Allows read-only access to the repository)
|
||||
<br>- <span class='text-orange-500 font-bold'>email</span> (Allows read-only access to the user's primary email address using OpenID Connect)
|
||||
<br>
|
||||
<br>For extra security, you can set <span class='text-orange-500 font-bold'>Expire Access Tokens</span>
|
||||
<br><br>Webhook URL: <span class='text-orange-500 font-bold'>{url}/webhooks/gitlab</span>"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -44,10 +44,10 @@
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="flex-col space-y-2 pb-10 text-center">
|
||||
<div class="text-xl font-bold text-white">Select a provider</div>
|
||||
<div class="text-xl font-bold text-white">Select a git type</div>
|
||||
<div class="flex justify-center space-x-2">
|
||||
<button class="w-32" on:click={() => setPredefined('github')}>GitHub.com</button>
|
||||
<button class="w-32" on:click={() => setPredefined('gitlab')}>GitLab.com</button>
|
||||
<button class="btn btn-sm" on:click={() => setPredefined('github')}>GitHub</button>
|
||||
<button class="btn btn-sm" on:click={() => setPredefined('gitlab')}>GitLab</button>
|
||||
</div>
|
||||
</div>
|
||||
{#if source?.type}
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
import { appSession } from '$lib/store';
|
||||
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
const { id } = $page.params;
|
||||
|
||||
async function deleteSource(name: string) {
|
||||
@@ -55,16 +56,14 @@
|
||||
{#if id !== 'new'}
|
||||
<nav class="nav-side">
|
||||
<button
|
||||
id="delete"
|
||||
on:click={() => deleteSource(source.name)}
|
||||
title={$t('source.delete_git_source')}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class:hover:text-red-500={$appSession.isAdmin}
|
||||
class="icons tooltip-bottom bg-transparent text-sm"
|
||||
data-tooltip={$appSession.isAdmin
|
||||
? $t('source.delete_git_source')
|
||||
: $t('source.permission_denied')}><DeleteIcon /></button
|
||||
class="icons bg-transparent text-sm"><DeleteIcon /></button
|
||||
>
|
||||
</nav>
|
||||
<Tooltip triggeredBy="#delete">Delete</Tooltip>
|
||||
{/if}
|
||||
<slot />
|
||||
|
||||
@@ -39,9 +39,9 @@
|
||||
<div class="flex space-x-1 p-6 font-bold">
|
||||
<div class="mr-4 text-2xl tracking-tight">{$t('index.git_sources')}</div>
|
||||
{#if $appSession.isAdmin}
|
||||
<a href="/sources/new" class="add-icon bg-orange-600 hover:bg-orange-500">
|
||||
<a href="/sources/new" class="btn btn-square btn-sm bg-sources">
|
||||
<svg
|
||||
class="w-6"
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -56,7 +56,7 @@
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-col justify-center">
|
||||
<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
|
||||
{#if !sources || ownSources.length === 0}
|
||||
<div class="flex-col">
|
||||
<div class="text-center text-xl font-bold">{$t('source.no_git_sources_found')}</div>
|
||||
|
||||
Reference in New Issue
Block a user