ui: more UI improvements
This commit is contained in:
Andras Bacsai
parent
9066952759
commit
3d6adeffc4
@ -15,7 +15,7 @@
|
||||
export let placeholder = '';
|
||||
export let inputStyle = '';
|
||||
|
||||
let disabledClass = 'bg-coolback disabled:bg-coolblack w-full';
|
||||
let disabledClass = 'bg-coolback disabled:bg-coolblack lg:w-64 w-full';
|
||||
let isHttps = browser && window.location.protocol === 'https:';
|
||||
|
||||
function copyToClipboard() {
|
||||
@ -82,7 +82,7 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="absolute top-0 right-0 m-3 cursor-pointer text-stone-600 hover:text-white">
|
||||
<div class="absolute top-0 right-0 flex justify-center items-center h-full cursor-pointer text-stone-600 hover:text-white mr-3">
|
||||
<div class="flex space-x-2">
|
||||
{#if isPasswordField}
|
||||
<div on:click={() => (showPassword = !showPassword)}>
|
||||
|
||||
@ -1,21 +1,203 @@
|
||||
<script lang="ts">
|
||||
export let application: any;
|
||||
import { status } from '$lib/store';
|
||||
import { page } from '$app/stores';
|
||||
</script>
|
||||
|
||||
<ul class="menu border bg-coolgray-100 border-coolgray-200 rounded-box p-2 space-y-2">
|
||||
<ul class="menu border bg-coolgray-100 border-coolgray-200 rounded-box p-2 space-y-2 sticky top-4">
|
||||
<li class="menu-title">
|
||||
<span>General</span>
|
||||
<span>Configuration</span>
|
||||
</li>
|
||||
<li class="rounded" class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}`}>
|
||||
<a href={`/applications/${$page.params.id}`} class="no-underline w-full">Build & Deploy</a>
|
||||
<a href={`/applications/${$page.params.id}`} class="no-underline w-full"
|
||||
><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 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5"
|
||||
/>
|
||||
</svg>Build & Deploy</a
|
||||
>
|
||||
</li>
|
||||
<li class="menu-title">
|
||||
<span>Other</span>
|
||||
<li
|
||||
class="rounded"
|
||||
class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/secrets`}
|
||||
>
|
||||
<a href={`/applications/${$page.params.id}/secrets`} class="no-underline w-full"
|
||||
><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>Environment Variables (secrets)</a
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
class="rounded"
|
||||
class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/storages`}
|
||||
>
|
||||
<a href={`/applications/${$page.params.id}/storages`} class="no-underline w-full"
|
||||
><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>Peristent Volumes</a
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
class="rounded"
|
||||
class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/features`}
|
||||
>
|
||||
<a href={`/applications/${$page.params.id}/features`} class="no-underline w-full">Features</a>
|
||||
<a href={`/applications/${$page.params.id}/features`} class="no-underline w-full"
|
||||
><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" />
|
||||
<polyline points="13 3 13 10 19 10 11 21 11 14 5 14 13 3" />
|
||||
</svg>Features</a
|
||||
>
|
||||
</li>
|
||||
<li class="menu-title">
|
||||
<span>Logs</span>
|
||||
</li>
|
||||
<li
|
||||
class:text-stone-600={!$status.application.isRunning}
|
||||
class="rounded"
|
||||
class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/logs`}
|
||||
>
|
||||
<a href={$status.application.isRunning ?`/applications/${$page.params.id}/logs` : ''} class="no-underline w-full"
|
||||
><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>Application</a
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
class="rounded"
|
||||
class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/logs/build`}
|
||||
>
|
||||
<a href={`/applications/${$page.params.id}/logs/build`} class="no-underline w-full"
|
||||
><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>Build</a
|
||||
>
|
||||
</li>
|
||||
<li class="menu-title">
|
||||
<span>Advanced</span>
|
||||
</li>
|
||||
{#if !application.settings.isBot}
|
||||
<li
|
||||
class="rounded"
|
||||
class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/previews`}
|
||||
>
|
||||
<a href={`/applications/${$page.params.id}/previews`} class="no-underline w-full"
|
||||
><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="7" cy="18" r="2" />
|
||||
<circle cx="7" cy="6" r="2" />
|
||||
<circle cx="17" cy="12" r="2" />
|
||||
<line x1="7" y1="8" x2="7" y2="16" />
|
||||
<path d="M7 8a4 4 0 0 0 4 4h4" />
|
||||
</svg>Preview Deployments</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
<li
|
||||
class="rounded"
|
||||
class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/danger`}
|
||||
>
|
||||
<a href={`/applications/${$page.params.id}/danger`} class="no-underline w-full"
|
||||
><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 9v2m0 4v.01" />
|
||||
<path
|
||||
d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"
|
||||
/>
|
||||
</svg>Danger Zone</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
export let length = 0;
|
||||
export let name = '';
|
||||
export let value = '';
|
||||
export let isBuildSecret = false;
|
||||
@ -39,13 +40,18 @@
|
||||
async function createSecret(isNew: any) {
|
||||
try {
|
||||
if (isNew) {
|
||||
if (!name || !value) return;
|
||||
if (!name || !value) {
|
||||
return addToast({
|
||||
message: 'Please fill in all fields.',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
if (value === undefined && isPRMRSecret) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
if (value === '' && !isPRMRSecret) {
|
||||
throw new Error('Value is required.')
|
||||
throw new Error('Value is required.');
|
||||
}
|
||||
await saveSecret({
|
||||
isNew,
|
||||
@ -66,9 +72,9 @@
|
||||
});
|
||||
} else {
|
||||
addToast({
|
||||
message: 'Secret updated.',
|
||||
type: 'success'
|
||||
});
|
||||
message: 'Secret updated.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
dispatch('refresh');
|
||||
} catch (error) {
|
||||
@ -98,97 +104,117 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<td>
|
||||
<input
|
||||
style="min-width: 350px !important;"
|
||||
id={isNewSecret ? 'secretName' : 'secretNameNew'}
|
||||
bind:value={name}
|
||||
required
|
||||
placeholder="EXAMPLE_VARIABLE"
|
||||
readonly={!isNewSecret}
|
||||
class:bg-transparent={!isNewSecret}
|
||||
class:cursor-not-allowed={!isNewSecret}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<CopyPasswordField
|
||||
id={isNewSecret ? 'secretValue' : 'secretValueNew'}
|
||||
name={isNewSecret ? 'secretValue' : 'secretValueNew'}
|
||||
isPasswordField={true}
|
||||
bind:value
|
||||
placeholder="J$#@UIO%HO#$U%H"
|
||||
inputStyle="min-width: 350px; !important"
|
||||
/>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<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"
|
||||
class:bg-green-600={isBuildSecret}
|
||||
class:bg-stone-700={!isBuildSecret}
|
||||
class:opacity-50={isPRMRSecret}
|
||||
class:cursor-not-allowed={isPRMRSecret}
|
||||
class:cursor-pointer={!isPRMRSecret}
|
||||
>
|
||||
<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</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={isBuildSecret}
|
||||
class:translate-x-0={!isBuildSecret}
|
||||
<div class="w-full font-bold grid grid-cols-1 lg:grid-cols-4 gap-2">
|
||||
<div class="flex flex-col">
|
||||
<label for="name" class="pb-2 uppercase">{length > 0 && !isNewSecret ? 'name' : ''}</label>
|
||||
{#if isNewSecret}
|
||||
<div class="lg:hidden block pt-10 pb-2">New Secret</div>
|
||||
{/if}
|
||||
<input
|
||||
id={isNewSecret ? 'secretName' : 'secretNameNew'}
|
||||
bind:value={name}
|
||||
required
|
||||
placeholder="EXAMPLE_VARIABLE"
|
||||
readonly={!isNewSecret}
|
||||
class="lg:w-64 w-full"
|
||||
class:bg-coolblack={!isNewSecret}
|
||||
class:border={!isNewSecret}
|
||||
class:border-dashed={!isNewSecret}
|
||||
class:border-coolgray-300={!isNewSecret}
|
||||
class:cursor-not-allowed={!isNewSecret}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="name" class="pb-2 uppercase">{length > 0 && !isNewSecret ? 'value' : ''}</label>
|
||||
<CopyPasswordField
|
||||
id={isNewSecret ? 'secretValue' : 'secretValueNew'}
|
||||
name={isNewSecret ? 'secretValue' : 'secretValueNew'}
|
||||
isPasswordField={true}
|
||||
bind:value
|
||||
placeholder="J$#@UIO%HO#$U%H"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex lg:flex-col flex-row justify-start items-center pt-3 lg:pt-0">
|
||||
<label for="name" class="uppercase"
|
||||
>{length > 0 && !isNewSecret ? 'Need during buildtime?' : ''}</label
|
||||
>
|
||||
<span
|
||||
class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
|
||||
class:opacity-0={isBuildSecret}
|
||||
class:opacity-100={!isBuildSecret}
|
||||
aria-hidden="true"
|
||||
{#if isNewSecret}
|
||||
<label class="lg:hidden uppercase" for="name">Need during buildtime?</label>
|
||||
{/if}
|
||||
<div class="flex justify-center h-full items-center pt-0 lg:pt-3 pl-4 lg:pl-0">
|
||||
<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 "
|
||||
class:bg-green-600={isBuildSecret}
|
||||
class:bg-stone-700={!isBuildSecret}
|
||||
class:opacity-50={isPRMRSecret}
|
||||
class:cursor-not-allowed={isPRMRSecret}
|
||||
class:cursor-pointer={!isPRMRSecret}
|
||||
>
|
||||
<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={isBuildSecret}
|
||||
class:opacity-0={!isBuildSecret}
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
{#if isNewSecret}
|
||||
<div class="flex items-center justify-center">
|
||||
<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="btn bg-application btn-sm" on:click={() => createSecret(false)}
|
||||
>{$t('forms.set')}</button
|
||||
<span class="sr-only">{$t('application.secrets.use_isbuildsecret')}</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={isBuildSecret}
|
||||
class:translate-x-0={!isBuildSecret}
|
||||
>
|
||||
</div>
|
||||
{#if !isPRMRSecret}
|
||||
<div class="flex justify-center items-end">
|
||||
<button class="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeSecret}
|
||||
>{$t('forms.remove')}</button
|
||||
<span
|
||||
class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
|
||||
class:opacity-0={isBuildSecret}
|
||||
class:opacity-100={!isBuildSecret}
|
||||
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={isBuildSecret}
|
||||
class:opacity-0={!isBuildSecret}
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row lg:flex-col lg:items-center items-start">
|
||||
<label for="name" class="lg:block hidden uppercase">{length > 0 && !isNewSecret ? 'Actions' : ''}</label>
|
||||
<div class="flex justify-center h-full items-center pt-3">
|
||||
{#if isNewSecret}
|
||||
<div class="flex items-center justify-center">
|
||||
<button class="btn btn-sm btn-primary" on:click={() => createSecret(true)}
|
||||
>Save New Secret</button
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-row justify-center space-x-2">
|
||||
<div class="flex items-center justify-center">
|
||||
<button class="btn btn-sm btn-primary" on:click={() => createSecret(false)}
|
||||
>Set</button
|
||||
>
|
||||
</div>
|
||||
{#if !isPRMRSecret}
|
||||
<div class="flex justify-center items-end">
|
||||
<button class="btn btn-sm btn-error" on:click={removeSecret}
|
||||
>Remove</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -59,32 +59,39 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<td>
|
||||
<input
|
||||
bind:value={storage.path}
|
||||
required
|
||||
placeholder="eg: /sqlite.db"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
{#if isNew}
|
||||
<div class="flex items-center justify-center">
|
||||
<button class="btn btn-sm bg-applications" on:click={() => saveStorage(true)}
|
||||
>{$t('forms.add')}</button
|
||||
>
|
||||
<div class="w-full font-bold grid gap-2">
|
||||
<div class="flex flex-col">
|
||||
<label for="name" class="pb-2 uppercase">{!isNew ? 'name' : ''}</label>
|
||||
{#if isNew}
|
||||
<div class="lg:hidden block pt-10 pb-2 uppercase">New Persistent Storage</div>
|
||||
{/if}
|
||||
<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>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-row justify-center space-x-2">
|
||||
<div class="flex items-center justify-center">
|
||||
<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="btn btn-sm bg-red-600 hover:bg-red-500" on:click={removeStorage}
|
||||
>{$t('forms.remove')}</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -55,7 +55,6 @@
|
||||
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 { onDestroy, onMount } from 'svelte';
|
||||
@ -100,23 +99,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteApplication(name: string, force: boolean) {
|
||||
const sure = confirm($t('application.confirm_to_delete', { name }));
|
||||
if (sure) {
|
||||
$status.application.initialLoading = true;
|
||||
try {
|
||||
await del(`/applications/${id}`, { id, force });
|
||||
return await window.location.assign(`/`);
|
||||
} 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;
|
||||
@ -192,52 +174,20 @@
|
||||
<div class="mx-auto max-w-screen-2xl px-6 grid grid-cols-1 lg:grid-cols-2">
|
||||
<nav class="header flex flex-row order-2 lg:order-1 px-0 lg:px-4">
|
||||
<div class="title lg:pb-10">
|
||||
{#if $page.url.pathname === `/applications/${id}` || $page.url.pathname === `/applications/${id}/features`}
|
||||
Configurations
|
||||
{:else if $page.url.pathname === `/applications/${id}/secrets`}
|
||||
Secrets
|
||||
{:else if $page.url.pathname === `/applications/${id}/storages`}
|
||||
Persistent Storages
|
||||
{:else if $page.url.pathname === `/applications/${id}/previews`}
|
||||
Preview Deployments
|
||||
{:else if $page.url.pathname === `/applications/${id}/logs`}
|
||||
Application Logs
|
||||
{:else if $page.url.pathname === `/applications/${id}/logs/build`}
|
||||
Build Logs
|
||||
{:else if $page.url.pathname === `/applications/${id}/configuration/source`}
|
||||
{#if $page.url.pathname === `/applications/${id}/configuration/source`}
|
||||
Select a Git Source
|
||||
{:else if $page.url.pathname === `/applications/${id}/configuration/destination`}
|
||||
Select a Destination
|
||||
{:else if $page.url.pathname === `/applications/${id}/configuration/buildpack`}
|
||||
Select a Build Pack
|
||||
{:else}
|
||||
Configurations
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
class="header flex flex-row items-start justify-center lg:justify-end space-x-2 order-1 lg:order-2"
|
||||
>
|
||||
{#if $location}
|
||||
<a id="open" href={$location} target="_blank" class="icons 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"
|
||||
>
|
||||
<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="hidden lg:block border border-coolgray-500 h-8" />
|
||||
{/if}
|
||||
{#if $status.application.isExited || $status.application.isRestarting}
|
||||
<a
|
||||
id="applicationerror"
|
||||
@ -340,7 +290,7 @@
|
||||
id="forceredeploy"
|
||||
type="submit"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent"
|
||||
class="icons bg-transparent "
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@ -358,20 +308,20 @@
|
||||
transform="rotate(-45 12 12)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
<Tooltip triggeredBy="#forceredeploy">Force redeploy (without cache)</Tooltip>
|
||||
</form>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
|
||||
<button
|
||||
id="deploy"
|
||||
type="submit"
|
||||
disabled={!$isDeploymentEnabled}
|
||||
class="icons bg-transparent text-success"
|
||||
class="btn bg-success"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6"
|
||||
class="w-6 h-6 mr-4"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@ -382,61 +332,16 @@
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M7 4v16l13 -8z" />
|
||||
</svg>
|
||||
Build & Deploy
|
||||
</button>
|
||||
<Tooltip triggeredBy="#deploy">Deploy</Tooltip>
|
||||
</form>
|
||||
{/if}
|
||||
<div class="hidden lg:block 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}` ||
|
||||
$page.url.pathname === `/applications/${id}/features`}
|
||||
class:bg-coolgray-500={$page.url.pathname === `/applications/${id}` ||
|
||||
$page.url.pathname === `/applications/${id}/features`}
|
||||
>
|
||||
<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
|
||||
{#if $location && $status.application.isRunning}
|
||||
<a href={$location} target="_blank" class="btn text-sm btn-primary"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6"
|
||||
class="h-6 w-6 mr-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
@ -445,182 +350,19 @@
|
||||
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"
|
||||
<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>Open</a
|
||||
>
|
||||
<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={$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 id="previews" 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" />
|
||||
<circle cx="7" cy="18" r="2" />
|
||||
<circle cx="7" cy="6" r="2" />
|
||||
<circle cx="17" cy="12" r="2" />
|
||||
<line x1="7" y1="8" x2="7" y2="16" />
|
||||
<path d="M7 8a4 4 0 0 0 4 4h4" />
|
||||
</svg></button
|
||||
></a
|
||||
>
|
||||
<Tooltip triggeredBy="#previews">Previews</Tooltip>
|
||||
{/if}
|
||||
<div class="hidden lg:block 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
|
||||
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="hidden lg:block 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" placement="left">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 text-sm"
|
||||
>
|
||||
<DeleteIcon />
|
||||
</button>
|
||||
<Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-screen-2xl px-6 grid grid-cols-1 lg:grid-cols-4">
|
||||
{#if $page.url.pathname === `/applications/${$page.params.id}` || $page.url.pathname === `/applications/${$page.params.id}/features`}
|
||||
<nav class="header flex flex-col lg:pt-0">
|
||||
<Menu />
|
||||
</nav>
|
||||
<div class="pt-0 px-5 col-span-0 lg:col-span-3 pb-24">
|
||||
<slot />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="pt-0 px-5 col-span-0 lg:col-span-4 pb-24">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
<nav class="header flex flex-col lg:pt-0 ">
|
||||
<Menu {application} />
|
||||
</nav>
|
||||
<div class="pt-0 px-5 col-span-0 lg:col-span-3 pb-24">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
80
apps/ui/src/routes/applications/[id]/danger.svelte
Normal file
80
apps/ui/src/routes/applications/[id]/danger.svelte
Normal file
@ -0,0 +1,80 @@
|
||||
<script context="module" lang="ts">
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
export const load: Load = async ({ fetch, params, stuff, url }) => {
|
||||
try {
|
||||
const response = await get(`/applications/${params.id}/secrets`);
|
||||
return {
|
||||
props: {
|
||||
application: stuff.application,
|
||||
...response
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
status: 500,
|
||||
error: new Error(`Could not load ${url}`)
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let application: any;
|
||||
import { page } from '$app/stores';
|
||||
import DeleteIcon from '$lib/components/DeleteIcon.svelte';
|
||||
import { del, get } from '$lib/api';
|
||||
import { t } from '$lib/translations';
|
||||
import { appSession, status } from '$lib/store';
|
||||
import { errorNotification, handlerNotFoundLoad } from '$lib/common';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
const { id } = $page.params;
|
||||
|
||||
let forceDelete = false;
|
||||
async function deleteApplication(name: string, force: boolean) {
|
||||
const sure = confirm($t('application.confirm_to_delete', { name }));
|
||||
if (sure) {
|
||||
$status.application.initialLoading = true;
|
||||
try {
|
||||
await del(`/applications/${id}`, { id, force });
|
||||
return await window.location.assign(`/`);
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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">Danger Zone</div>
|
||||
</div>
|
||||
|
||||
{#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="btn btn-sm btn-error text-sm"
|
||||
>
|
||||
Force Delete Application
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
id="delete"
|
||||
on:click={() => deleteApplication(application.name, false)}
|
||||
type="submit"
|
||||
disabled={!$appSession.isAdmin}
|
||||
class="btn btn-sm btn-error text-sm"
|
||||
>
|
||||
Delete Application
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
@ -297,12 +297,12 @@
|
||||
|
||||
<div class="w-full">
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
<div class="mx-auto w-full ">
|
||||
<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>
|
||||
{#if $appSession.isAdmin}
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
class="btn btn-sm btn-primary"
|
||||
type="submit"
|
||||
class:loading
|
||||
class:bg-orange-600={forceSave}
|
||||
|
||||
@ -104,63 +104,63 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="relative" class:pt-10={currentStatus !== 'running'}>
|
||||
{#if currentStatus === 'running'}
|
||||
<div class="flex justify-start sticky top-0 pb-2 space-x-2">
|
||||
<button
|
||||
on:click={followBuild}
|
||||
class="btn btn-sm bg-coollabs"
|
||||
class:bg-coolgray-300={followingLogs}
|
||||
class:text-applications={followingLogs}
|
||||
<div class="relative">
|
||||
<div class="flex justify-start top-0 pb-2 space-x-2">
|
||||
<button
|
||||
on:click={followBuild}
|
||||
class="btn btn-sm bg-coollabs"
|
||||
disabled={currentStatus !== 'running'}
|
||||
class:bg-coolgray-300={followingLogs || currentStatus !== 'running'}
|
||||
class:text-applications={followingLogs}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 mr-2"
|
||||
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 mr-2"
|
||||
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>
|
||||
<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>
|
||||
|
||||
{followingLogs ? 'Following Logs...' : 'Follow Logs'}
|
||||
</button>
|
||||
{followingLogs ? 'Following Logs...' : 'Follow Logs'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
on:click={cancelBuild}
|
||||
class:animation-spin={cancelInprogress}
|
||||
class="btn btn-sm"
|
||||
class:bg-error={!cancelInprogress}
|
||||
class:bg-coolgray-300={cancelInprogress}
|
||||
class:text-error={cancelInprogress}
|
||||
<button
|
||||
on:click={cancelBuild}
|
||||
class:animation-spin={cancelInprogress}
|
||||
class="btn btn-sm"
|
||||
disabled={currentStatus !== 'running'}
|
||||
class:bg-coolgray-300={cancelInprogress || currentStatus !== 'running'}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 mr-2"
|
||||
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 mr-2"
|
||||
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>
|
||||
{cancelInprogress ? 'Cancelling...' : 'Cancel Build'}
|
||||
</button>
|
||||
<button id="streaming" class="btn btn-sm bg-transparent border-none loading" />
|
||||
<Tooltip triggeredBy="#streaming">Streaming logs</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M10 10l4 4m0 -4l-4 4" />
|
||||
</svg>
|
||||
{cancelInprogress ? 'Cancelling...' : 'Cancel Build'}
|
||||
</button>
|
||||
{#if currentStatus === 'running'}
|
||||
<button id="streaming" class="btn btn-sm bg-transparent border-none loading" />
|
||||
<Tooltip triggeredBy="#streaming">Streaming logs</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
{#if currentStatus === 'queued'}
|
||||
<div
|
||||
class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col whitespace-nowrap scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
|
||||
@ -171,7 +171,7 @@
|
||||
<div
|
||||
bind:this={logsEl}
|
||||
on:scroll={detect}
|
||||
class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
|
||||
class="font-mono w-full bg-coolgray-100 border border-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
|
||||
>
|
||||
{#each logs as log}
|
||||
{#if fromDb}
|
||||
|
||||
@ -45,7 +45,6 @@
|
||||
loadBuildLogsInterval = setInterval(() => {
|
||||
getBuildLogs();
|
||||
}, 2000);
|
||||
|
||||
});
|
||||
onDestroy(() => {
|
||||
clearInterval(loadBuildLogsInterval);
|
||||
@ -54,14 +53,14 @@
|
||||
const response = await get(`/applications/${$page.params.id}/logs/build?skip=${skip}`);
|
||||
builds = response.builds;
|
||||
}
|
||||
|
||||
|
||||
async function loadMoreBuilds() {
|
||||
if (buildCount >= skip) {
|
||||
skip = skip + 5;
|
||||
noMoreBuilds = buildCount <= skip;
|
||||
try {
|
||||
const data = await get(`/applications/${id}/logs/build?skip=${skip}`);
|
||||
builds = data.builds
|
||||
builds = data.builds;
|
||||
return;
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
@ -107,12 +106,35 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="block flex-row justify-start space-x-2 px-5 sm:px-10 md:flex">
|
||||
<div class="mx-auto w-full">
|
||||
<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
|
||||
<div class="flex flex-row">
|
||||
<div class="title font-bold pb-3 pr-3">Build Logs</div>
|
||||
<button class="btn btn-sm bg-error" on:click={resetQueue}>Reset Build Queue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block flex-col justify-start space-x-2 flex flex-col-reverse lg:flex-row">
|
||||
<div class="flex-1 md:w-96">
|
||||
{#if $selectedBuildId}
|
||||
{#key $selectedBuildId}
|
||||
<svelte:component this={BuildLog} />
|
||||
{/key}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 ">
|
||||
<button class="btn btn-sm w-full bg-error" on:click={resetQueue}
|
||||
>Reset Build Queue</button
|
||||
>
|
||||
<div class="top-4 md:sticky">
|
||||
{#if !noMoreBuilds}
|
||||
{#if buildCount > 5}
|
||||
<div class="flex space-x-2 pb-2">
|
||||
<button
|
||||
disabled={noMoreBuilds}
|
||||
class=" btn btn-sm w-full btn-primary"
|
||||
on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{#each builds as build, index (build.id)}
|
||||
<div
|
||||
id={`building-${build.id}`}
|
||||
@ -141,9 +163,7 @@
|
||||
<div class="w-48 text-center text-xs">
|
||||
{#if build.status === 'running'}
|
||||
<div>
|
||||
<span class="font-bold text-xl"
|
||||
>{build.elapsed}s</span
|
||||
>
|
||||
<span class="font-bold text-xl">{build.elapsed}s</span>
|
||||
</div>
|
||||
{:else if build.status !== 'queued'}
|
||||
<div>{day(build.updatedAt).utc().fromNow()}</div>
|
||||
@ -162,24 +182,6 @@
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#if !noMoreBuilds}
|
||||
{#if buildCount > 5}
|
||||
<div class="flex space-x-2 pb-10">
|
||||
<button
|
||||
disabled={noMoreBuilds}
|
||||
class=" btn btn-sm w-full"
|
||||
on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-1 md:w-96">
|
||||
{#if $selectedBuildId}
|
||||
{#key $selectedBuildId}
|
||||
<svelte:component this={BuildLog} />
|
||||
{/key}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if buildCount === 0}
|
||||
|
||||
@ -91,7 +91,12 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row justify-center space-x-2 px-10">
|
||||
<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">Application Logs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row justify-center space-x-2">
|
||||
{#if logs.length === 0}
|
||||
<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>
|
||||
{:else}
|
||||
@ -129,7 +134,7 @@
|
||||
<div
|
||||
bind:this={logsEl}
|
||||
on:scroll={detect}
|
||||
class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
|
||||
class="font-mono w-full bg-coolgray-100 border border-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
|
||||
>
|
||||
{#each logs as log}
|
||||
<p>{log + '\n'}</p>
|
||||
|
||||
@ -177,6 +177,13 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<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">Preview Deployments</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<SimpleExplainer
|
||||
text={applicationSecrets && applicationSecrets.length === 0
|
||||
|
||||
@ -20,14 +20,12 @@
|
||||
|
||||
<script lang="ts">
|
||||
export let secrets: any;
|
||||
export let application: any;
|
||||
import pLimit from 'p-limit';
|
||||
import Secret from './_Secret.svelte';
|
||||
import pLimit from 'p-limit';
|
||||
import { page } from '$app/stores';
|
||||
import { t } from '$lib/translations';
|
||||
import { get } from '$lib/api';
|
||||
import { saveSecret } from './utils';
|
||||
import { addToast } from '$lib/store';
|
||||
import Secret from './_Secret.svelte';
|
||||
|
||||
const limit = pLimit(1);
|
||||
const { id } = $page.params;
|
||||
@ -37,8 +35,8 @@
|
||||
const data = await get(`/applications/${id}/secrets`);
|
||||
secrets = [...data.secrets];
|
||||
}
|
||||
async function getValues(e: any) {
|
||||
e.preventDefault();
|
||||
async function getValues() {
|
||||
if (!batchSecrets) return;
|
||||
const eachValuePair = batchSecrets.split('\n');
|
||||
const batchSecretsPairs = eachValuePair
|
||||
.filter((secret) => !secret.startsWith('#') && secret)
|
||||
@ -67,41 +65,31 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-6xl px-6 pt-4">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="mx-auto border-separate text-left">
|
||||
<thead>
|
||||
<tr class="h-12">
|
||||
<th scope="col">{$t('forms.name')}</th>
|
||||
<th scope="col">{$t('forms.value')}</th>
|
||||
<th scope="col" class="w-64 text-center"
|
||||
>{$t('application.preview.need_during_buildtime')}</th
|
||||
>
|
||||
<th scope="col" class="w-96 text-center">{$t('forms.action')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each secrets as secret}
|
||||
{#key secret.id}
|
||||
<tr>
|
||||
<Secret
|
||||
name={secret.name}
|
||||
value={secret.value}
|
||||
isBuildSecret={secret.isBuildSecret}
|
||||
on:refresh={refreshSecrets}
|
||||
/>
|
||||
</tr>
|
||||
{/key}
|
||||
{/each}
|
||||
<tr>
|
||||
<Secret isNewSecret on:refresh={refreshSecrets} />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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">Secrets</div>
|
||||
</div>
|
||||
<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>
|
||||
{#each secrets as secret}
|
||||
{#key secret.id}
|
||||
<Secret
|
||||
length={secrets.length}
|
||||
name={secret.name}
|
||||
value={secret.value}
|
||||
isBuildSecret={secret.isBuildSecret}
|
||||
on:refresh={refreshSecrets}
|
||||
/>
|
||||
{/key}
|
||||
{/each}
|
||||
<Secret isNewSecret on:refresh={refreshSecrets} />
|
||||
|
||||
</div>
|
||||
<form on:submit|preventDefault={getValues} class="mb-12 w-full">
|
||||
<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2 pt-10">
|
||||
<div class="flex flex-row space-x-2">
|
||||
<div class="title font-bold pb-3 ">Paste <code>.env</code> file</div>
|
||||
<button class="btn btn-sm bg-primary" type="submit">Add Secrets in Batch</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea placeholder={`PORT=1337\nPASSWORD=supersecret`} bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
|
||||
</form>
|
||||
|
||||
@ -32,24 +32,22 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
|
||||
<table class="mx-auto border-separate text-left">
|
||||
<thead>
|
||||
<tr class="h-12">
|
||||
<th scope="col">{$t('forms.path')} <Explainer position="dropdown-bottom" explanation={$t('application.storage.persistent_storage_explainer')} /></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each persistentStorages as storage}
|
||||
{#key storage.id}
|
||||
<tr>
|
||||
<Storage on:refresh={refreshStorage} {storage} />
|
||||
</tr>
|
||||
{/key}
|
||||
{/each}
|
||||
<tr>
|
||||
<Storage on:refresh={refreshStorage} isNew />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="w-full">
|
||||
<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">
|
||||
Persistent Volumes <Explainer
|
||||
position="dropdown-bottom"
|
||||
explanation={$t('application.storage.persistent_storage_explainer')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#each persistentStorages as storage}
|
||||
{#key storage.id}
|
||||
<Storage on:refresh={refreshStorage} {storage} />
|
||||
{/key}
|
||||
{/each}
|
||||
<Storage on:refresh={refreshStorage} isNew />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,6 +17,9 @@ @font-face {
|
||||
url('/poppins-v19-latin-ext_latin_devanagari-500.woff') format('woff');
|
||||
}
|
||||
|
||||
button {
|
||||
@apply text-sm !important;
|
||||
}
|
||||
html {
|
||||
@apply h-full min-h-full overflow-y-scroll;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user