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

lots of changes

Browse Source
This commit is contained in:
Andras Bacsai
2022-10-18 11:32:38 +02:00
parent 9afb713df1
commit a6f457749b
13 changed files with 256 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ui/src/lib/components/Setting.svelte
View File

@@ -8,7 +8,7 @@
export let setting: any;
export let title: any;
export let isBeta: any = false;
export let description: any;
export let description: any = null;
export let isCenter = true;
export let disabled = false;
export let dataTooltip: any = null;

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

@@ -59,18 +59,33 @@
}
</script>
<div class="w-full grid gap-2">
<div class="flex flex-col pb-2">
<div class="flex flex-col lg:flex-row lg:space-y-0 space-y-2">
<div class="w-full lg:px-0 px-4">
<div class="grid grid-col-1 lg:grid-cols-3 lg:space-x-4" class:pt-8={isNew}>
{#if storage.id}
<div class="flex flex-col">
<label for="name" class="pb-2 uppercase font-bold">Volume name</label>
<input
disabled
readonly
class="w-full lg:w-64"
value="{storage.id}{storage.path.replace(/\//gi, '-')}"
/>
</div>
{/if}
<div class="flex flex-col">
<label for="name" class="pb-2 uppercase font-bold">{isNew ? 'New Path' : 'Path'}</label>
<input
class="w-full lg:w-64"
bind:value={storage.path}
required
placeholder="eg: /sqlite.db"
/>
</div>
<div class="pt-8">
{#if isNew}
<div class="flex items-center justify-center w-full lg:w-64">
<button class="btn btn-sm btn-primary" on:click={() => saveStorage(true)}
<button class="btn btn-sm btn-primary w-full" on:click={() => saveStorage(true)}
>{$t('forms.add')}</button
>
</div>

2
apps/ui/src/routes/applications/[id]/storages.svelte
View File

@@ -42,7 +42,7 @@
/>
</div>
</div>
<label for="name" class="pb-2 uppercase font-bold">name</label>
{#each persistentStorages as storage}
{#key storage.id}
<Storage on:refresh={refreshStorage} {storage} />

97
apps/ui/src/routes/services/[id]/_Storage.svelte
View File

@@ -59,35 +59,76 @@
}
</script>
<div class="w-fullgrid gap-2">
<div class="flex flex-col pb-2">
<div class="flex flex-col lg:flex-row lg:space-y-0 space-y-2">
<input
class="w-full lg:w-64"
bind:value={storage.path}
required
placeholder="eg: /sqlite.db"
/>
{#if isNew}
<div class="flex items-center justify-center w-full lg:w-64">
<button class="btn btn-sm btn-primary" on:click={() => saveStorage(true)}
>{$t('forms.add')}</button
>
</div>
{:else}
<div class="flex flex-row items-center justify-center space-x-2 w-full lg:w-64">
<div class="flex items-center justify-center">
<button class="btn btn-sm btn-primary" on:click={() => saveStorage(false)}
>{$t('forms.set')}</button
>
</div>
<div class="flex justify-center">
<button class="btn btn-sm btn-error" on:click={removeStorage}
>{$t('forms.remove')}</button
>
</div>
<div class="w-full lg:px-0 px-4">
{#if storage.predefined}
<div class="grid grid-col-1 lg:grid-cols-2 pt-2">
<div>
<input
id={storage.id}
disabled
readonly
class="w-full"
value={`${storage.id}${storage.path.replace(/\//gi, '-')}:${storage.path}`}
/>
</div>
<div class="lg:px-2">
<input
id={storage.containerId}
disabled
readonly
class="w-full"
value={`${storage.containerId}`}
/>
</div>
</div>
{:else}
<div class="grid grid-col-1 lg:grid-cols-3 lg:space-x-4" class:pt-8={isNew}>
{#if storage.id}
<div class="flex flex-col">
<input
disabled
readonly
class="w-full"
value="{storage.id}{storage.path.replace(/\//gi, '-')}"
/>
</div>
{/if}
<div class="flex flex-col">
{#if isNew}
<label for="name" class="pb-2 uppercase font-bold">Path</label>
{/if}
<input
disabled={storage.predefined}
readonly={storage.predefined}
class="w-full lg:w-64"
bind:value={storage.path}
required
placeholder="eg: /sqlite.db"
/>
</div>
<div class:pt-8={isNew} class:pt-2={!isNew}>
{#if isNew}
<div class="flex items-center justify-center w-full lg:w-64">
<button class="btn btn-sm btn-primary w-full" on:click={() => saveStorage(true)}
>{$t('forms.add')}</button
>
</div>
{:else}
<div class="flex flex-row items-center justify-center space-x-2 w-full lg:w-64">
<div class="flex items-center justify-center">
<button class="btn btn-sm btn-primary" on:click={() => saveStorage(false)}
>{$t('forms.set')}</button
>
</div>
<div class="flex justify-center">
<button class="btn btn-sm btn-error" on:click={removeStorage}
>{$t('forms.remove')}</button
>
</div>
</div>
{/if}
</div>
</div>
</div>
{/if}
</div>

42
apps/ui/src/routes/services/[id]/__layout.svelte
View File

@@ -252,27 +252,6 @@
Loading...
</button>
{:else if $status.service.overallStatus === 'healthy'}
<button
on:click={stopService}
type="submit"
disabled={!$isDeploymentEnabled}
class="btn btn-sm btn-error gap-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" />
<rect x="6" y="5" width="4" height="14" rx="1" />
<rect x="14" y="5" width="4" height="14" rx="1" />
</svg> Stop
</button>
<button
disabled={!$isDeploymentEnabled}
class="btn btn-sm gap-2"
@@ -297,6 +276,27 @@
Force Redeploy
</button>
<button
on:click={stopService}
type="submit"
disabled={!$isDeploymentEnabled}
class="btn btn-sm btn-error gap-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" />
<rect x="5" y="5" width="14" height="14" rx="2" />
</svg>
Stop
</button>
{:else if $status.service.overallStatus === 'degraded'}
<button
on:click={stopService}

49
apps/ui/src/routes/services/[id]/index.svelte
View File

@@ -19,6 +19,7 @@
import { get, post } from '$lib/api';
import { errorNotification, getDomain } from '$lib/common';
import { t } from '$lib/translations';
import Select from 'svelte-select';
import {
appSession,
status,
@@ -29,18 +30,18 @@
} from '$lib/store';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import Setting from '$lib/components/Setting.svelte';
// import * as Services from '$lib/components/Services';
import DocLink from '$lib/components/DocLink.svelte';
import Explainer from '$lib/components/Explainer.svelte';
import ServiceStatus from '$lib/components/ServiceStatus.svelte';
const { id } = $page.params;
// let serviceName: any = service.type && service.type[0].toUpperCase() + service.type.substring(1);
$: isDisabled =
!$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading;
!$appSession.isAdmin ||
$status.service.overallStatus === 'degraded' ||
$status.service.overallStatus === 'healthy' ||
$status.service.initialLoading;
let newConfiguration = null;
let forceSave = false;
let loading = {
save: false,
@@ -73,12 +74,13 @@
const formData = new FormData(e.target);
for (let field of formData) {
const [key, value] = field;
for (const setting of service.serviceSetting) {
if (setting.name === key && setting.value !== value) {
service.serviceSetting = service.serviceSetting.map((setting: any) => {
if (setting.name === key) {
setting.changed = true;
setting.value = value;
}
}
return setting;
});
}
if (loading.save) return;
loading.save = true;
@@ -203,7 +205,7 @@
</script>
<div class="w-full">
<form on:submit|preventDefault={handleSubmit}>
<form id="saveForm" on:submit|preventDefault={handleSubmit}>
<div class="mx-auto w-full">
<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
<div class="title font-bold pb-3 ">General</div>
@@ -425,16 +427,20 @@
<div />
<div>
{#each Object.keys(template) as oneService}
<div class="flex flex-row border-b border-coolgray-500 my-6 space-x-2">
<div
class="flex flex-row my-6 space-x-2"
class:border-b={template[oneService].environment.length > 0}
class:border-coolgray-500={template[oneService].environment.length > 0}
>
<div class="title font-bold pb-3">{template[oneService].name}</div>
<ServiceStatus id={template[oneService]} />
<ServiceStatus id={oneService} />
</div>
<div class="grid grid-flow-row gap-2 px-4">
{#if template[oneService].environment.length > 0}
{#each template[oneService].environment as variable}
<div class="grid grid-cols-2 items-center">
<label for={variable.name}>{variable.label}</label>
<div class="grid grid-cols-2 items-center gap-2">
<label class="h-10" for={variable.name}>{variable.label}</label>
{#if variable.defaultValue === '$$generate_fqdn'}
<input
class="w-full"
@@ -444,9 +450,24 @@
id={variable.name}
value={service.fqdn}
/>
{:else if variable.defaultValue === 'true' || variable.defaultValue === 'false'}
<select
class="w-full font-normal"
readonly={isDisabled}
disabled={isDisabled}
id={variable.name}
name={variable.name}
bind:value={variable.value}
form="saveForm"
>
<option value="true">true</option>
<option value="false"> false</option>
</select>
{:else}
<input
class="w-full"
<CopyPasswordField
isPasswordField={variable.defaultValue === '$$generate_password'}
readonly={isDisabled}
disabled={isDisabled}
name={variable.name}
id={variable.name}
value={variable.value}

12
apps/ui/src/routes/services/[id]/storages.svelte
View File

@@ -42,8 +42,16 @@
/>
</div>
</div>
<label for="name" class="pb-2 uppercase font-bold">name</label>
{#each persistentStorages as storage}
{#if persistentStorages.filter((s) => s.predefined).length > 0}
<div class="text-base font-bold">Predefined Persistent Volumes</div>
{/if}
{#each persistentStorages.filter((s) => s.predefined) as storage}
{#key storage.id}
<Storage on:refresh={refreshStorage} {storage} />
{/key}
{/each}
<div class="text-base font-bold" class:pt-10={persistentStorages.filter((s) => s.predefined).length > 0}>User Defined Persistent Volumes</div>
{#each persistentStorages.filter((s) => !s.predefined) as storage}
{#key storage.id}
<Storage on:refresh={refreshStorage} {storage} />
{/key}