Merge branch 'next' into edge-db
No files matched your search
@@ -21,4 +21,5 @@ declare namespace App {
|
||||
}
|
||||
|
||||
declare const GITPOD_WORKSPACE_URL: string
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html data-theme="coollabs" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
|
||||
@@ -7,10 +7,12 @@ export function getAPIUrl() {
|
||||
const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '')
|
||||
return newURL
|
||||
}
|
||||
if (CODESANDBOX_HOST) {
|
||||
return `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}`
|
||||
}
|
||||
return dev ? 'http://localhost:3001' : 'http://localhost:3000';
|
||||
}
|
||||
export function getWebhookUrl(type: string) {
|
||||
console.log(GITPOD_WORKSPACE_URL)
|
||||
if (GITPOD_WORKSPACE_URL) {
|
||||
const { href } = new URL(GITPOD_WORKSPACE_URL)
|
||||
const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '')
|
||||
@@ -21,6 +23,15 @@ export function getWebhookUrl(type: string) {
|
||||
return `${newURL}/webhooks/gitlab/events`
|
||||
}
|
||||
}
|
||||
if (CODESANDBOX_HOST) {
|
||||
const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/,'3001')}`
|
||||
if (type === 'github') {
|
||||
return `${newURL}/webhooks/github/events`
|
||||
}
|
||||
if (type === 'gitlab') {
|
||||
return `${newURL}/webhooks/gitlab/events`
|
||||
}
|
||||
}
|
||||
return `https://webhook.site/0e5beb2c-4e9b-40e2-a89e-32295e570c21/events`;
|
||||
}
|
||||
async function send({
|
||||
|
||||
@@ -1,165 +1,4 @@
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
|
||||
export const supportedServiceTypesAndVersions = [
|
||||
{
|
||||
name: 'plausibleanalytics',
|
||||
fancyName: 'Plausible Analytics',
|
||||
baseImage: 'plausible/analytics',
|
||||
images: ['bitnami/postgresql:13.2.0', 'yandex/clickhouse-server:21.3.2.5'],
|
||||
versions: ['latest', 'stable'],
|
||||
recommendedVersion: 'stable',
|
||||
ports: {
|
||||
main: 8000
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'nocodb',
|
||||
fancyName: 'NocoDB',
|
||||
baseImage: 'nocodb/nocodb',
|
||||
versions: ['latest'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 8080
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'minio',
|
||||
fancyName: 'MinIO',
|
||||
baseImage: 'minio/minio',
|
||||
versions: ['latest'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 9001
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'vscodeserver',
|
||||
fancyName: 'VSCode Server',
|
||||
baseImage: 'codercom/code-server',
|
||||
versions: ['latest'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 8080
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'wordpress',
|
||||
fancyName: 'Wordpress',
|
||||
baseImage: 'wordpress',
|
||||
images: ['bitnami/mysql:5.7'],
|
||||
versions: ['latest', 'php8.1', 'php8.0', 'php7.4', 'php7.3'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 80
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'vaultwarden',
|
||||
fancyName: 'Vaultwarden',
|
||||
baseImage: 'vaultwarden/server',
|
||||
versions: ['latest'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 80
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'languagetool',
|
||||
fancyName: 'LanguageTool',
|
||||
baseImage: 'silviof/docker-languagetool',
|
||||
versions: ['latest'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 8010
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'n8n',
|
||||
fancyName: 'n8n',
|
||||
baseImage: 'n8nio/n8n',
|
||||
versions: ['latest'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 5678
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'uptimekuma',
|
||||
fancyName: 'Uptime Kuma',
|
||||
baseImage: 'louislam/uptime-kuma',
|
||||
versions: ['latest'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 3001
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'ghost',
|
||||
fancyName: 'Ghost',
|
||||
baseImage: 'bitnami/ghost',
|
||||
images: ['bitnami/mariadb'],
|
||||
versions: ['latest'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 2368
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'meilisearch',
|
||||
fancyName: 'Meilisearch',
|
||||
baseImage: 'getmeili/meilisearch',
|
||||
images: [],
|
||||
versions: ['latest'],
|
||||
recommendedVersion: 'latest',
|
||||
ports: {
|
||||
main: 7700
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'umami',
|
||||
fancyName: 'Umami',
|
||||
baseImage: 'ghcr.io/mikecao/umami',
|
||||
images: ['postgres:12-alpine'],
|
||||
versions: ['postgresql-latest'],
|
||||
recommendedVersion: 'postgresql-latest',
|
||||
ports: {
|
||||
main: 3000
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'hasura',
|
||||
fancyName: 'Hasura',
|
||||
baseImage: 'hasura/graphql-engine',
|
||||
images: ['postgres:12-alpine'],
|
||||
versions: ['latest', 'v2.5.1'],
|
||||
recommendedVersion: 'v2.5.1',
|
||||
ports: {
|
||||
main: 8080
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'fider',
|
||||
fancyName: 'Fider',
|
||||
baseImage: 'getfider/fider',
|
||||
images: ['postgres:12-alpine'],
|
||||
versions: ['stable'],
|
||||
recommendedVersion: 'stable',
|
||||
ports: {
|
||||
main: 3000
|
||||
}
|
||||
},
|
||||
// {
|
||||
// name: 'moodle',
|
||||
// fancyName: 'Moodle',
|
||||
// baseImage: 'bitnami/moodle',
|
||||
// images: [],
|
||||
// versions: ['latest', 'v4.0.2'],
|
||||
// recommendedVersion: 'latest',
|
||||
// ports: {
|
||||
// main: 8080
|
||||
// }
|
||||
// }
|
||||
];
|
||||
import { addToast } from '$lib/store';
|
||||
|
||||
export const asyncSleep = (delay: number) =>
|
||||
new Promise((resolve) => setTimeout(resolve, delay));
|
||||
@@ -167,12 +6,20 @@ export const asyncSleep = (delay: number) =>
|
||||
export function errorNotification(error: any): void {
|
||||
if (error.message) {
|
||||
if (error.message === 'Cannot read properties of undefined (reading \'postMessage\')') {
|
||||
toast.push('Currently there is background process in progress. Please try again later.');
|
||||
return;
|
||||
return addToast({
|
||||
message: 'Currently there is background process in progress. Please try again later.',
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
toast.push(error.message);
|
||||
addToast({
|
||||
message: error.message,
|
||||
type: 'error',
|
||||
});
|
||||
} else {
|
||||
toast.push('Ooops, something is not okay, are you okay?');
|
||||
addToast({
|
||||
message: 'Ooops, something is not okay, are you okay?',
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
console.error(JSON.stringify(error));
|
||||
}
|
||||
@@ -210,7 +57,7 @@ export const staticDeployments = [
|
||||
'astro',
|
||||
'eleventy'
|
||||
];
|
||||
export const notNodeDeployments = ['php', 'docker', 'rust', 'python', 'deno', 'laravel'];
|
||||
export const notNodeDeployments = ['php', 'docker', 'rust', 'python', 'deno', 'laravel', 'heroku'];
|
||||
|
||||
|
||||
export function generateRemoteEngine(destination: any) {
|
||||
@@ -224,44 +71,6 @@ export function changeQueryParams(buildId: string) {
|
||||
return history.pushState(null, null, '?' + queryParams.toString());
|
||||
}
|
||||
|
||||
export const supportedDatabaseTypesAndVersions = [
|
||||
{
|
||||
name: 'mongodb',
|
||||
fancyName: 'MongoDB',
|
||||
baseImage: 'bitnami/mongodb',
|
||||
versions: ['5.0', '4.4', '4.2']
|
||||
},
|
||||
{ name: 'mysql', fancyName: 'MySQL', baseImage: 'bitnami/mysql', versions: ['8.0', '5.7'] },
|
||||
{
|
||||
name: 'mariadb',
|
||||
fancyName: 'MariaDB',
|
||||
baseImage: 'bitnami/mariadb',
|
||||
versions: ['10.7', '10.6', '10.5', '10.4', '10.3', '10.2']
|
||||
},
|
||||
{
|
||||
name: 'postgresql',
|
||||
fancyName: 'PostgreSQL',
|
||||
baseImage: 'bitnami/postgresql',
|
||||
versions: ['14.2.0', '13.6.0', '12.10.0 ', '11.15.0', '10.20.0']
|
||||
},
|
||||
{
|
||||
name: 'redis',
|
||||
fancyName: 'Redis',
|
||||
baseImage: 'bitnami/redis',
|
||||
versions: ['6.2', '6.0', '5.0']
|
||||
},
|
||||
{ name: 'couchdb', fancyName: 'CouchDB', baseImage: 'bitnami/couchdb', versions: ['3.2.1'] }
|
||||
];
|
||||
|
||||
export const getServiceMainPort = (service: string) => {
|
||||
const serviceType = supportedServiceTypesAndVersions.find((s) => s.name === service);
|
||||
if (serviceType) {
|
||||
return serviceType.ports.main;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
|
||||
export function handlerNotFoundLoad(error: any, url: URL) {
|
||||
if (error?.status === 404) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { browser } from '$app/env';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { addToast } from '$lib/store';
|
||||
let showPassword = false;
|
||||
|
||||
export let value: string;
|
||||
@@ -9,7 +9,7 @@
|
||||
export let readonly = false;
|
||||
export let textarea = false;
|
||||
export let required = false;
|
||||
export let pattern: string|null|undefined = null;
|
||||
export let pattern: string | null | undefined = null;
|
||||
export let id: string;
|
||||
export let name: string;
|
||||
export let placeholder = '';
|
||||
@@ -20,7 +20,10 @@
|
||||
function copyToClipboard() {
|
||||
if (isHttps && navigator.clipboard) {
|
||||
navigator.clipboard.writeText(value);
|
||||
toast.push('Copied to clipboard.');
|
||||
addToast({
|
||||
message: 'Copied to clipboard.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
export let url = 'https://docs.coollabs.io';
|
||||
let id =
|
||||
'cool-' +
|
||||
url
|
||||
.split('')
|
||||
.map((c) => c.charCodeAt(0).toString(16).padStart(2, '0'))
|
||||
.join('')
|
||||
.slice(-16);
|
||||
</script>
|
||||
|
||||
<a {id} href={url} target="_blank" class="icons inline-block text-pink-500 cursor-pointer text-xs">
|
||||
<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="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"
|
||||
/>
|
||||
<line x1="13" y1="8" x2="15" y2="8" />
|
||||
<line x1="13" y1="12" x2="15" y2="12" />
|
||||
</svg>
|
||||
</a>
|
||||
<Tooltip triggeredBy={`#${id}`}>See details in the documentation</Tooltip>
|
||||
@@ -1,6 +1,31 @@
|
||||
<script lang="ts">
|
||||
export let text: string;
|
||||
export let customClass = 'max-w-[24rem]';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
export let explanation = '';
|
||||
let id: any;
|
||||
let self: any;
|
||||
onMount(() => {
|
||||
id = `info-${self.offsetLeft}-${self.offsetTop}`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>
|
||||
<div {id} class="inline-block mx-2 text-pink-500 cursor-pointer" bind:this={self}>
|
||||
<svg
|
||||
fill="none"
|
||||
height="18"
|
||||
shape-rendering="geometricPrecision"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /><path
|
||||
d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
|
||||
/><circle cx="12" cy="17" r=".5" />
|
||||
</svg>
|
||||
</div>
|
||||
{#if id}
|
||||
<Tooltip triggeredBy={`#${id}`}>{@html explanation}</Tooltip>
|
||||
{/if}
|
||||
@@ -1,6 +1,8 @@
|
||||
<script lang="ts">
|
||||
import Explainer from '$lib/components/Explainer.svelte';
|
||||
import Explaner from './Explainer.svelte';
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
|
||||
export let id: any;
|
||||
export let setting: any;
|
||||
export let title: any;
|
||||
export let description: any;
|
||||
@@ -8,22 +10,18 @@
|
||||
export let disabled = false;
|
||||
export let dataTooltip: any = null;
|
||||
export let loading = false;
|
||||
let triggeredBy = `#${id}`;
|
||||
</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 class="text-xs font-bold text-stone-100 md:text-base">
|
||||
{title}<Explaner explanation={description} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class:tooltip={dataTooltip}
|
||||
class:text-center={isCenter}
|
||||
data-tooltip={dataTooltip}
|
||||
class="flex justify-center"
|
||||
>
|
||||
<div class:text-center={isCenter} 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"
|
||||
@@ -31,6 +29,7 @@
|
||||
class:bg-green-600={!loading && setting}
|
||||
class:bg-stone-700={!loading && !setting}
|
||||
class:bg-yellow-500={loading}
|
||||
{id}
|
||||
>
|
||||
<span class="sr-only">Use setting</span>
|
||||
<span
|
||||
@@ -71,3 +70,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if dataTooltip}
|
||||
<Tooltip {triggeredBy} placement="top">{dataTooltip}</Tooltip>
|
||||
{/if}
|
||||
@@ -0,0 +1,6 @@
|
||||
<script lang="ts">
|
||||
export let text: string;
|
||||
export let customClass = 'max-w-[24rem]';
|
||||
</script>
|
||||
|
||||
<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
export let type = 'info';
|
||||
</script>
|
||||
|
||||
<div
|
||||
on:click={() => dispatch('click')}
|
||||
on:mouseover={() => dispatch('pause')}
|
||||
on:focus={() => dispatch('pause')}
|
||||
on:mouseout={() => dispatch('resume')}
|
||||
on:blur={() => dispatch('resume')}
|
||||
class="alert shadow-lg text-white rounded hover:scale-105 transition-all duration-100 cursor-pointer"
|
||||
class:bg-coollabs={type === 'success'}
|
||||
class:alert-error={type === 'error'}
|
||||
class:alert-info={type === 'info'}
|
||||
>
|
||||
{#if type === 'success'}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current flex-shrink-0 h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/></svg
|
||||
>
|
||||
{:else if type === 'error'}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current flex-shrink-0 h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/></svg
|
||||
>
|
||||
{:else if type === 'info'}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="stroke-current flex-shrink-0 w-6 h-6"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/></svg
|
||||
>
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import Toast from './Toast.svelte';
|
||||
|
||||
import { dismissToast, pauseToast, resumeToast, toasts } from '$lib/store';
|
||||
</script>
|
||||
|
||||
{#if $toasts}
|
||||
<section>
|
||||
<article class="toast toast-top toast-end rounded-none" role="alert" transition:fade>
|
||||
{#each $toasts as toast (toast.id)}
|
||||
<Toast
|
||||
type={toast.type}
|
||||
on:resume={() => resumeToast(toast.id)}
|
||||
on:pause={() => pauseToast(toast.id)}
|
||||
on:click={() => dismissToast(toast.id)}>{@html toast.message}</Toast
|
||||
>
|
||||
{/each}
|
||||
</article>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
section {
|
||||
@apply fixed top-0 left-0 right-0 w-full flex flex-col mt-4 justify-center z-[1000];
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { Tooltip } from 'flowbite-svelte';
|
||||
export let placement = 'bottom';
|
||||
export let color = 'bg-coollabs text-left';
|
||||
export let triggeredBy = '#tooltip-default';
|
||||
</script>
|
||||
|
||||
<Tooltip {triggeredBy} {placement} arrow={false} {color} style="custom"><slot /></Tooltip>
|
||||
@@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { dev } from '$app/env';
|
||||
import { get, post } from '$lib/api';
|
||||
import { appSession, features } from '$lib/store';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { addToast, appSession, features } from '$lib/store';
|
||||
import { asyncSleep, errorNotification } from '$lib/common';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
@@ -17,12 +16,15 @@
|
||||
updateStatus.loading = true;
|
||||
try {
|
||||
if (dev) {
|
||||
console.log(`updating to ${latestVersion}`);
|
||||
await asyncSleep(4000);
|
||||
return window.location.reload();
|
||||
} else {
|
||||
await post(`/update`, { type: 'update', latestVersion });
|
||||
toast.push('Update completed.<br><br>Waiting for the new version to start...');
|
||||
addToast({
|
||||
message: 'Update completed.<br><br>Waiting for the new version to start...',
|
||||
type: 'success'
|
||||
});
|
||||
|
||||
let reachable = false;
|
||||
let tries = 0;
|
||||
do {
|
||||
@@ -36,7 +38,10 @@
|
||||
if (reachable) break;
|
||||
tries++;
|
||||
} while (!reachable || tries < 120);
|
||||
toast.push('New version reachable. Reloading...');
|
||||
addToast({
|
||||
message: 'New version reachable. Reloading...',
|
||||
type: 'success'
|
||||
});
|
||||
updateStatus.loading = false;
|
||||
updateStatus.success = true;
|
||||
await asyncSleep(3000);
|
||||
@@ -75,9 +80,9 @@
|
||||
{#if isUpdateAvailable}
|
||||
<button
|
||||
disabled={updateStatus.success === false}
|
||||
title="Update available"
|
||||
on:click={update}
|
||||
class="icons tooltip-right bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
|
||||
class="icons tooltip tooltip-right tooltip-primary bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
|
||||
data-tip="Update Available!"
|
||||
>
|
||||
{#if updateStatus.loading}
|
||||
<svg
|
||||
|
||||
@@ -19,13 +19,13 @@
|
||||
};
|
||||
let usageInterval: any;
|
||||
let loading = {
|
||||
usage: false
|
||||
usage: false,
|
||||
cleanup: false
|
||||
};
|
||||
import { appSession } from '$lib/store';
|
||||
import { addToast, appSession } from '$lib/store';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { get, post } from '$lib/api';
|
||||
import { errorNotification } from '$lib/common';
|
||||
import Trend from './Trend.svelte';
|
||||
async function getStatus() {
|
||||
if (loading.usage) return;
|
||||
loading.usage = true;
|
||||
@@ -33,6 +33,7 @@
|
||||
usage = data.usage;
|
||||
loading.usage = false;
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
clearInterval(usageInterval);
|
||||
});
|
||||
@@ -48,107 +49,99 @@
|
||||
return errorNotification(error);
|
||||
}
|
||||
});
|
||||
|
||||
let warning = {
|
||||
memory: false,
|
||||
cpu: false,
|
||||
disk: false
|
||||
};
|
||||
let trends = {
|
||||
memory: 'stable',
|
||||
cpu: 'stable',
|
||||
disk: 'stable'
|
||||
};
|
||||
async function manuallyCleanupStorage() {
|
||||
return await post('/internal/cleanup', {});
|
||||
try {
|
||||
loading.cleanup = true;
|
||||
await post('/internal/cleanup', {});
|
||||
return addToast({
|
||||
message: 'Cleanup done.',
|
||||
type: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
return errorNotification(error);
|
||||
} finally {
|
||||
loading.cleanup = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $appSession.teamId === '0'}
|
||||
<div class="px-6 text-2xl font-bold">Server Usage</div>
|
||||
<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="truncate text-sm font-medium text-white">Total Memory</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-white">
|
||||
{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
|
||||
</dd>
|
||||
<div class="w-full">
|
||||
<div class="flex lg:flex-row flex-col gap-4">
|
||||
<h1 class="title lg:text-3xl">Hardware Details</h1>
|
||||
<div class="flex lg:flex-row flex-col space-x-0 lg:space-x-2 space-y-2 lg:space-y-0">
|
||||
{#if $appSession.teamId === '0'}
|
||||
<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
|
||||
>Cleanup Storage</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider" />
|
||||
<div class="grid grid-flow-col gap-4 grid-rows-3 justify-start lg:justify-center lg:grid-rows-1">
|
||||
<div class="stats stats-vertical min-w-[16rem] mb-5 rounded bg-transparent">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Total Memory</div>
|
||||
<div class="stat-value text-2xl">
|
||||
{(usage?.memory.totalMemMb).toFixed(0)}<span class="text-sm">MB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">Used Memory</div>
|
||||
<div class="stat-value text-2xl">
|
||||
{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">Free Memory</div>
|
||||
<div class="stat-value text-2xl">
|
||||
{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
|
||||
</div>
|
||||
</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 Memory</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-white ">
|
||||
{(usage?.memory.usedMemMb).toFixed(0)}<span class="text-sm">MB</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="stats stats-vertical min-w-[20rem] mb-5 bg-transparent rounded">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Total CPU</div>
|
||||
<div class="stat-value text-2xl">
|
||||
{usage?.cpu.count}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left"
|
||||
class:bg-red-500={warning.memory}
|
||||
>
|
||||
<dt class="truncate text-sm font-medium text-white">Free Memory</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-white">
|
||||
{usage?.memory.freeMemPercentage}<span class="text-sm">%</span>
|
||||
{#if !warning.memory}
|
||||
<Trend trend={trends.memory} />
|
||||
{/if}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<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="truncate text-sm font-medium text-white">Total CPUs</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-white">
|
||||
{usage?.cpu.count}
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left"
|
||||
class:bg-red-500={warning.cpu}
|
||||
>
|
||||
<dt class="truncate text-sm font-medium text-white">CPU Usage</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-white">
|
||||
{usage?.cpu.usage}<span class="text-sm">%</span>
|
||||
{#if !warning.cpu}
|
||||
<Trend trend={trends.cpu} />
|
||||
{/if}
|
||||
</dd>
|
||||
</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">Load Average (5/10/30mins)</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-white">
|
||||
{usage?.cpu.load.join('/')}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<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="truncate text-sm font-medium text-white">Total Disk</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-white">
|
||||
{usage?.disk.totalGb}<span class="text-sm">GB</span>
|
||||
</dd>
|
||||
</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 Disk</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-white">
|
||||
{usage?.disk.usedGb}<span class="text-sm">GB</span>
|
||||
</dd>
|
||||
<button on:click={manuallyCleanupStorage} class="bg-coollabs hover:bg-coollabs-100"
|
||||
>Cleanup Storage</button
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="overflow-hidden rounded px-4 py-5 text-center sm:p-6 sm:text-left"
|
||||
class:bg-red-500={warning.disk}
|
||||
>
|
||||
<dt class="truncate text-sm font-medium text-white">Free Disk</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-white">
|
||||
{usage?.disk.freePercentage}<span class="text-sm">%</span>
|
||||
{#if !warning.disk}
|
||||
<Trend trend={trends.disk} />
|
||||
{/if}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div class="stat">
|
||||
<div class="stat-title">CPU Usage</div>
|
||||
<div class="stat-value text-2xl">
|
||||
{usage?.cpu.usage}<span class="text-sm">%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 pt-20 text-2xl font-bold">Resources</div>
|
||||
{/if}
|
||||
<div class="stat">
|
||||
<div class="stat-title">Load Average (5,10,30mins)</div>
|
||||
<div class="stat-value text-2xl">{usage?.cpu.load}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats stats-vertical min-w-[16rem] mb-5 bg-transparent rounded">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Total Disk</div>
|
||||
<div class="stat-value text-2xl">
|
||||
{usage?.disk.totalGb}<span class="text-sm">GB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">Used Disk</div>
|
||||
<div class="stat-value text-2xl">
|
||||
{usage?.disk.usedGb}<span class="text-sm">GB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">Free Disk</div>
|
||||
<div class="stat-value text-2xl">
|
||||
{usage?.disk.freePercentage}<span class="text-sm">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
import * as Icons from '$lib/components/svg/applications';
|
||||
export let application: any;
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
{#if application.buildPack?.toLowerCase() === 'rust'}
|
||||
<Icons.Rust {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'node'}
|
||||
<Icons.Nodejs {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'react'}
|
||||
<Icons.React {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'svelte'}
|
||||
<Icons.Svelte {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'vuejs'}
|
||||
<Icons.Vuejs {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'php'}
|
||||
<Icons.Php {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'python'}
|
||||
<Icons.Python {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'static'}
|
||||
<Icons.Static {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'nestjs'}
|
||||
<Icons.Nestjs {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'nuxtjs'}
|
||||
<Icons.Nuxtjs {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'nextjs'}
|
||||
<Icons.Nextjs {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'gatsby'}
|
||||
<Icons.Gatsby {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'docker'}
|
||||
<Icons.Docker {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'astro'}
|
||||
<Icons.Astro {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'eleventy'}
|
||||
<Icons.Eleventy {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'deno'}
|
||||
<Icons.Deno {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'laravel'}
|
||||
<Icons.Laravel {isAbsolute} />
|
||||
{:else if application.buildPack?.toLowerCase() === 'heroku'}
|
||||
<Icons.Heroku {isAbsolute} />
|
||||
{/if}
|
||||
@@ -1,5 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="absolute top-0 left-0 -m-6 h-14 w-14"
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-6 h-14 w-14' : 'mx-auto w-8 h-8'}
|
||||
viewBox="0 0 256 256"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -1,5 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="text-white-500 absolute top-0 left-0 -m-4 h-10 w-10"
|
||||
class={isAbsolute
|
||||
? 'absolute top-0 left-0 -m-4 h-10 w-10 text-white-500'
|
||||
: 'mx-auto w-8 h-8 text-white-500'}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
|
||||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.2 KiB |
@@ -1,73 +1,9 @@
|
||||
<svg viewBox="0 0 128 128" class="absolute top-0 left-0 -m-8 h-16 w-16">
|
||||
<g
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#3A4D54"
|
||||
d="M73.8 50.8h11.3v11.5h5.7c2.6 0 5.3-.5 7.8-1.3 1.2-.4 2.6-1 3.8-1.7-1.6-2.1-2.4-4.7-2.6-7.3-.3-3.5.4-8.1 2.8-10.8l1.2-1.4 1.4 1.1c3.6 2.9 6.5 6.8 7.1 11.4 4.3-1.3 9.3-1 13.1 1.2l1.5.9-.8 1.6c-3.2 6.2-9.9 8.2-16.4 7.8-9.8 24.3-31 35.8-56.8 35.8-13.3 0-25.5-5-32.5-16.8l-.1-.2-1-2.1c-2.4-5.2-3.1-10.9-2.6-16.6l.2-1.7h9.6v-11.4h11.3v-11.2h22.5v-11.3h13.5v22.5z"
|
||||
/><path
|
||||
fill="#00AADA"
|
||||
d="M110.4 55.1c.8-5.9-3.6-10.5-6.4-12.7-3.1 3.6-3.6 13.2 1.3 17.2-2.8 2.4-8.5 4.7-14.5 4.7h-72.2c-.6 6.2.5 11.9 3 16.8l.8 1.5c.5.9 1.1 1.7 1.7 2.6 3 .2 5.7.3 8.2.2 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5 1.1-8.3 1.3h-.6000000000000001c-1.3.1-2.7.1-4.2.1-1.6 0-3.1 0-4.9-.1 6 6.8 15.4 10.8 27.2 10.8 25 0 46.2-11.1 55.5-35.9 6.7.7 13.1-1 16-6.7-4.5-2.7-10.5-1.8-13.9-.1z"
|
||||
/><path
|
||||
fill="#28B8EB"
|
||||
d="M110.4 55.1c.8-5.9-3.6-10.5-6.4-12.7-3.1 3.6-3.6 13.2 1.3 17.2-2.8 2.4-8.5 4.7-14.5 4.7h-68c-.3 9.5 3.2 16.7 9.5 21 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5.2 1.2-8.5 1.4l-.1-.1c8.5 4.4 20.8 4.3 35-1.1 15.8-6.1 30.6-17.7 40.9-30.9-.2.1-.4.1-.5.2z"
|
||||
/><path
|
||||
fill="#028BB8"
|
||||
d="M18.7 71.8c.4 3.3 1.4 6.4 2.9 9.3l.8 1.5c.5.9 1.1 1.7 1.7 2.6 3 .2 5.7.3 8.2.2 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5.2 1.2-8.5 1.4h-.4c-1.3.1-2.7.1-4.1.1-1.6 0-3.2 0-4.9-.1 6 6.8 15.5 10.8 27.3 10.8 21.4 0 40-8.1 50.8-26h-85.1v-.1z"
|
||||
/><path
|
||||
fill="#019BC6"
|
||||
d="M23.5 71.8c1.3 5.8 4.3 10.4 8.8 13.5 4.9-.1 8.9-.7 12-1.7.5-.2.9.1 1.1.5.2.5-.1.9-.5 1.1-.4.1-.8.3-1.3.4-2.4.7-5.2 1.2-8.6 1.4 8.5 4.4 20.8 4.3 34.9-1.1 8.5-3.3 16.8-8.2 24.2-14.1h-70.6z"
|
||||
/><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#00ACD3"
|
||||
d="M28.4 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zM39.6 41.5h9.8v9.8h-9.8v-9.8zm.9.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
|
||||
/><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#23C2EE"
|
||||
d="M39.6 52.7h9.8v9.8h-9.8v-9.8zm.9.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
|
||||
/><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#00ACD3"
|
||||
d="M50.9 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
|
||||
/><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#23C2EE"
|
||||
d="M50.9 41.5h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zM62.2 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
|
||||
/><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#00ACD3"
|
||||
d="M62.2 41.5h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
|
||||
/><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#23C2EE"
|
||||
d="M62.2 30.2h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
|
||||
/><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#00ACD3"
|
||||
d="M73.5 52.7h9.8v9.8h-9.8v-9.8zm.8.8h.8v8.1h-.8v-8.1zm1.4 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1zm1.5 0h.8v8.1h-.8v-8.1z"
|
||||
/><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#D4EEF1"
|
||||
d="M48.8 78.3c1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7"
|
||||
/><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#3A4D54"
|
||||
d="M48.8 79.1c.2 0 .5 0 .7.1-.2.1-.4.4-.4.7 0 .4.4.8.8.8.3 0 .6-.2.7-.4.1.2.1.5.1.7 0 1.1-.9 1.9-1.9 1.9-1.1 0-1.9-.9-1.9-1.9 0-1 .8-1.9 1.9-1.9M1.1 72.8h125.4c-2.7-.7-8.6-1.6-7.7-5.2-5 5.7-16.9 4-20 1.2-3.4 4.9-23 3-24.3-.8-4.2 5-17.3 5-21.5 0-1.4 3.8-21 5.7-24.3.8-3 2.8-15 4.5-20-1.2 1.1 3.5-4.9 4.5-7.6 5.2"
|
||||
/><path
|
||||
fill="#BFDBE0"
|
||||
d="M56 97.8c-6.7-3.2-10.3-7.5-12.4-12.2-2.5.7-5.5 1.2-8.9 1.4-1.3.1-2.7.1-4.1.1-1.7 0-3.4 0-5.2-.1 6 6 13.6 10.7 27.5 10.8h3.1z"
|
||||
/><path
|
||||
fill="#D4EEF1"
|
||||
d="M46.1 89.9c-.9-1.3-1.8-2.8-2.5-4.3-2.5.7-5.5 1.2-8.9 1.4 2.3 1.2 5.7 2.4 11.4 2.9z"
|
||||
/></g
|
||||
>
|
||||
</svg>
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
|
||||
<svg viewBox="0 0 128 128" class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-12 w-12' : 'mx-auto w-10 h-10'}>
|
||||
<path d="M124.8 52.1c-4.3-2.5-10-2.8-14.8-1.4-.6-5.2-4-9.7-8-12.9l-1.6-1.3-1.4 1.6c-2.7 3.1-3.5 8.3-3.1 12.3.3 2.9 1.2 5.9 3 8.3-1.4.8-2.9 1.9-4.3 2.4-2.8 1-5.9 2-8.9 2H79V49H66V24H51v12H26v13H13v14H1.8l-.2 1.5c-.5 6.4.3 12.6 3 18.5l1.1 2.2.1.2c7.9 13.4 21.7 19 36.8 19 29.2 0 53.3-13.1 64.3-40.6 7.4.4 15-1.8 18.6-8.9l.9-1.8-1.6-1zM28 39h10v11H28V39zm13.1 44.2c0 1.7-1.4 3.1-3.1 3.1-1.7 0-3.1-1.4-3.1-3.1 0-1.7 1.4-3.1 3.1-3.1 1.7.1 3.1 1.4 3.1 3.1zM28 52h10v11H28V52zm-13 0h11v11H15V52zm27.7 50.2c-15.8-.1-24.3-5.4-31.3-12.4 2.1.1 4.1.2 5.9.2 1.6 0 3.2 0 4.7-.1 3.9-.2 7.3-.7 10.1-1.5 2.3 5.3 6.5 10.2 14 13.8h-3.4zM51 63H40V52h11v11zm0-13H40V39h11v11zm13 13H53V52h11v11zm0-13H53V39h11v11zm0-13H53V26h11v11zm13 26H66V52h11v11zM38.8 81.2c-.2-.1-.5-.2-.8-.2-1.2 0-2.2 1-2.2 2.2 0 1.2 1 2.2 2.2 2.2s2.2-1 2.2-2.2c0-.3-.1-.6-.2-.8-.2.3-.4.5-.8.5-.5 0-.9-.4-.9-.9.1-.4.3-.7.5-.8z" fill="#019BC6"></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,4 +1,11 @@
|
||||
<svg viewBox="0 0 128 128" class="absolute top-0 left-0 -m-8 h-16 w-16">
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
viewBox="0 0 128 128"
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-8 h-16 w-16' : 'mx-auto w-8 h-8'}
|
||||
>
|
||||
<path fill="transparent" d="M18 0h92v128H18z" /><path
|
||||
d="M55.3 36.3h.4c1.1 0 1.5.9 1.5 2.3v41.8c0 1.8-.4 3-1.6 3l-4.8-.1c-1.2 0-1.6-1-1.6-3V45.5l-2.1.5c-1 0-1.5-.8-1.5-2.2v-3c0-1.2.4-2 1.4-2.2l8.3-2.2zm16 36.1l.1 3 .6 1.3.6.6.8.1h2.2c1 0 1.7.8 1.7 2v1.9c0 1.2-.6 2-1.8 2h-3.2l-2.3-.1c-.7-.2-1.4-.5-2.2-1a5.7 5.7 0 01-2-1.9c-.4-.8-.8-1.9-1-3.2-.4-1.4-.5-3-.5-4.8v-16h-1.5c-1.1 0-1.6-1-1.6-2.4v-1.7c0-1.4.5-2.3 1.6-2.3h1.5v-.1l.6-12.3c0-1.5.5-2.5 1.6-2.5h3.1c1.2 0 1.6 1 1.6 2.5v12.3h3.6c1.1 0 1.6 1 1.6 2.4V54c0 1.4-.5 2.3-1.6 2.3h-3.6v16.2zm9.4 15.7c0-2 .3-3.2 1.5-3.2.2 0 .4 0 1.4.4l1.1.3.2-.1.4-.7c.3-.6.4-1.6.4-3l-.6-3.3L79 52.7v-.9c0-1.2.3-2 1.2-2H84c.5 0 1 .3 1.3.6.3.4.5.9.6 1.6l3.4 18 2.6-17.8c.1-.8.3-1.3.6-1.7.3-.4.8-.6 1.3-.6h2.6c1 0 1.4.8 1.4 2l-.1.8L92 82.2c-.5 2.5-1 4.4-1.5 5.7a6.6 6.6 0 01-2 3c-.9.6-1.9.9-3.1.9h-.3c-2 0-3.3-.6-4.1-1.7-.3-.4-.4-1-.4-2zM31.3 38.8l8.2-2.1h.5c1 0 1.4.8 1.4 2.2v41.9c0 1.8-.4 2.9-1.6 2.9h-4.7c-1.2 0-1.6-1.1-1.6-3v-35l-2 .6c-1.2 0-1.6-.9-1.6-2.2v-3c0-1.2.4-2 1.4-2.3z"
|
||||
fill="#FFF"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -1,4 +1,11 @@
|
||||
<svg class="absolute top-0 left-0 -m-4 h-10 w-10" viewBox="0 0 128 128">
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'}
|
||||
viewBox="0 0 128 128"
|
||||
>
|
||||
<path
|
||||
fill="#64328B"
|
||||
d="M64,0C28.7,0,0,28.7,0,64v0c0,35.3,28.7,64,64,64s64-28.7,64-64v0C128,28.7,99.3,0,64,0z M13.2,64L64,114.8 C35.9,114.8,13.2,92.1,13.2,64z M75.4,113.5l-60.9-61C19.7,30,39.9,13.2,64,13.2c16.6,0,31.3,7.9,40.5,20.2l-7.5,7.2 C89.7,30.2,77.7,23.5,64,23.5c-17.6,0-32.5,11.2-38.1,26.8C33.1,57,75.4,98.8,78.1,102c12.7-4.7,22.3-15.5,25.4-28.9H81.9v-9.4 l33,0.2C114.8,88.2,98,108.4,75.4,113.5z"
|
||||
|
||||
|
Before Width: | Height: | Size: 494 B After Width: | Height: | Size: 593 B |
@@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8 '}
|
||||
viewBox="0 0 72 80"
|
||||
>
|
||||
<path
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="#430098"
|
||||
d="M64.8,0 L7.2,0 C3.224,0 0,3.224 0,7.2 L0,72.8 C0,76.776 3.224,80 7.2,80 L64.8,80 C68.776,80 72,76.776 72,72.8 L72,7.2 C72,3.224 68.776,0 64.8,0 Z M18,68 L18,52 L27,60 L18,68 Z M46,68 L46,44.11 C45.961,42.243 45.062,40 41,40 C32.866,40 23.742,44.091 23.651,44.132 L18,46.692 L18,12 L26,12 L26,34.711 C29.994,33.411 35.577,32 41,32 C45.945,32 48.905,33.944 50.517,35.575 C53.958,39.055 54.005,43.488 54.0002258,44 L54.0002258,68 L46,68 Z M48,25 L40,25 C43.144,20.875 45.118,16.534 46,12 L54,12 C53.46,16.544 51.618,20.9 48,25 Z"
|
||||
/>
|
||||
</svg>
|
||||
@@ -1,5 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="absolute top-0 left-0 -m-4 h-10 w-10"
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'}
|
||||
viewBox="0 0 50 52"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><title>Logomark</title><path
|
||||
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.2 KiB |
@@ -1,4 +1,11 @@
|
||||
<svg class="absolute top-0 left-0 -m-4 h-10 w-10" viewBox="0 0 128 128">
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'}
|
||||
viewBox="0 0 128 128"
|
||||
>
|
||||
<path
|
||||
fill="#DF234F"
|
||||
d="M75.4,0.3c-0.9,0-1.8,0.2-2.6,0.5c1.7,1.1,2.6,2.6,3.1,4.3c0,0.2,0.1,0.4,0.1,0.6c0,0.2,0.1,0.4,0.1,0.6 c0.1,2.9-0.8,3.3-1.4,5c-1,2.2-0.7,4.6,0.5,6.5c0.1,0.2,0.2,0.5,0.4,0.7c-1.3-8.4,5.7-9.6,7-12.2c0.1-2.3-1.8-3.8-3.3-4.9 C77.8,0.5,76.6,0.3,75.4,0.3L75.4,0.3z M85.9,2.1c-0.1,0.8,0,0.6-0.1,1c0,0.3,0,0.6-0.1,0.9c-0.1,0.3-0.1,0.5-0.2,0.8 c-0.1,0.3-0.2,0.5-0.3,0.8C85.1,5.8,85,6,84.9,6.3c-0.1,0.1-0.2,0.3-0.3,0.4c-0.1,0.1-0.1,0.2-0.2,0.3c-0.2,0.2-0.3,0.5-0.5,0.7 c-0.2,0.2-0.4,0.4-0.6,0.6v0c-0.2,0.2-0.4,0.4-0.6,0.5c-0.7,0.5-1.5,0.9-2.2,1.4c-0.2,0.2-0.5,0.3-0.7,0.5 c-0.2,0.2-0.4,0.3-0.6,0.5c-0.2,0.2-0.4,0.4-0.6,0.6c-0.2,0.2-0.4,0.4-0.5,0.7c-0.2,0.2-0.3,0.5-0.5,0.7c-0.1,0.3-0.2,0.5-0.4,0.8 c-0.1,0.3-0.2,0.5-0.3,0.8c-0.1,0.3-0.2,0.6-0.2,0.8c0,0.1,0,0.3-0.1,0.4c0,0.1,0,0.3-0.1,0.4c0,0.3,0,0.6,0,0.8c0,0.2,0,0.4,0,0.6 c0,0.3,0,0.5,0.1,0.8c0,0.3,0.1,0.5,0.2,0.8c0.1,0.3,0.2,0.5,0.3,0.8c0.1,0.2,0.2,0.3,0.2,0.5l-7.6-2.9c-1.3-0.4-2.5-0.7-3.8-1 c-0.7-0.2-1.4-0.3-2.1-0.5c-2-0.4-4-0.7-6-0.9c-0.1,0-0.1,0-0.2,0c-2-0.2-3.9-0.3-5.9-0.3c-1.5,0-2.9,0.1-4.3,0.2 c-2,0.1-4,0.4-6,0.7c-0.5,0.1-1,0.2-1.5,0.3c-1,0.2-2,0.4-3,0.7c-0.5,0.1-1,0.3-1.5,0.4c-0.5,0.2-1,0.4-1.4,0.6 c-0.4,0.2-0.7,0.3-1.1,0.5c-0.1,0-0.1,0-0.2,0.1c-0.3,0.2-0.6,0.3-0.9,0.5c-0.1,0-0.2,0.1-0.2,0.1c-0.4,0.2-0.7,0.4-1,0.5 c-0.2,0.1-0.5,0.2-0.7,0.3c-0.1,0.1-0.2,0.1-0.3,0.2c-0.3,0.2-0.6,0.3-0.9,0.5c-0.3,0.2-0.6,0.3-0.8,0.5c-0.2,0.2-0.5,0.3-0.7,0.5 c0,0-0.1,0-0.1,0.1c-0.2,0.1-0.4,0.3-0.6,0.5c0,0,0,0-0.1,0.1c-0.2,0.1-0.3,0.3-0.5,0.4c-0.1,0-0.1,0.1-0.2,0.1 c-0.2,0.1-0.3,0.3-0.5,0.4c0,0.1-0.1,0.1-0.1,0.1c-0.2,0.2-0.4,0.4-0.6,0.6c0,0,0,0-0.1,0.1c-0.2,0.2-0.4,0.4-0.6,0.6 c0,0,0,0.1-0.1,0.1c-0.2,0.2-0.3,0.3-0.5,0.5c-0.1,0.1-0.2,0.1-0.2,0.2c-0.2,0.2-0.4,0.4-0.6,0.6c0,0.1-0.1,0.1-0.1,0.2 c-0.3,0.3-0.5,0.5-0.8,0.8c0,0-0.1,0.1-0.1,0.1c-0.5,0.6-1.1,1.1-1.7,1.6c-0.6,0.5-1.2,1-1.9,1.5c-0.7,0.5-1.3,0.9-2,1.3 c-0.7,0.4-1.4,0.7-2.1,1c-0.7,0.3-1.4,0.6-2.1,0.8c-1.4,0.3-2.8,0.9-4,1C7.6,33.9,7.3,34,7,34c-0.3,0.1-0.6,0.1-0.8,0.2 c-0.3,0.1-0.5,0.2-0.8,0.3c-0.3,0.1-0.5,0.2-0.8,0.4c-0.2,0.2-0.5,0.3-0.7,0.5c-0.2,0.2-0.5,0.4-0.7,0.6c-0.2,0.2-0.5,0.4-0.7,0.6 c-0.2,0.2-0.4,0.4-0.6,0.7c-0.2,0.3-0.4,0.5-0.5,0.8c-0.2,0.2-0.3,0.5-0.5,0.8c-0.1,0.3-0.3,0.6-0.4,0.9c-0.1,0.3-0.2,0.6-0.3,0.9 c-0.1,0.3-0.1,0.5-0.2,0.8c0,0,0,0.1,0,0.1c-0.1,0.3-0.1,0.7-0.1,0.9C0,42.4,0,42.6,0,42.8c0,0.1,0,0.3,0,0.4 c0,0.2,0.1,0.4,0.1,0.6c0.1,0.2,0.1,0.4,0.2,0.6v0c0.1,0.2,0.2,0.4,0.4,0.6c0.1,0.2,0.3,0.4,0.4,0.6c0.2,0.2,0.4,0.4,0.6,0.5 c0.2,0.2,0.4,0.4,0.6,0.5c0.8,0.7,1,0.9,2,1.5c0.2,0.1,0.3,0.2,0.5,0.3c0,0,0.1,0,0.1,0c0,0.1,0,0.1,0,0.2c0,0.3,0.1,0.5,0.2,0.8 c0.1,0.3,0.2,0.6,0.3,0.8c0.1,0.2,0.2,0.4,0.3,0.6c0,0.1,0.1,0.1,0.1,0.2c0.1,0.3,0.3,0.5,0.4,0.7c0.2,0.2,0.3,0.5,0.5,0.7 c0.2,0.2,0.4,0.4,0.6,0.6c0.2,0.2,0.4,0.4,0.6,0.6c0,0,0,0,0.1,0c0.2,0.2,0.4,0.3,0.6,0.5c0.2,0.2,0.5,0.3,0.7,0.4 c0.2,0.1,0.5,0.3,0.8,0.4c0.2,0.1,0.4,0.2,0.7,0.2c0,0,0.1,0,0.1,0.1c0.1,0,0.3,0.1,0.4,0.1c-0.1,1.8-0.1,3.5,0.1,4.1 c0.3,0.7,1.8-1.4,3.2-3.7c-0.2,2.3-0.3,5,0,5.8c0.4,0.8,2.3-1.8,4.1-4.6c23.4-5.4,44.8,10.8,47.1,33.7C65.4,87,61,85,58.9,85.5 c-1,2.4-2.7,5.6-5.4,7.5c0.2-2.2,0.1-4.4-0.3-6.6c-0.7,3-2.1,5.9-4.1,8.3c-3.1,0.2-6.3-1.3-7.9-3.6c-0.1-0.1-0.2-0.3-0.3-0.4 c-0.1-0.2-0.2-0.5-0.3-0.7c-0.1-0.2-0.2-0.5-0.2-0.7c0-0.2,0-0.5,0-0.7c0-0.2,0-0.3,0-0.5c0-0.2,0.1-0.5,0.2-0.7 c0.1-0.2,0.1-0.5,0.2-0.7c0.1-0.2,0.2-0.5,0.4-0.7c0.6-1.6,0.6-2.9-0.5-3.6c-0.2-0.1-0.4-0.2-0.6-0.3c-0.1,0-0.3-0.1-0.4-0.1 c-0.1,0-0.2-0.1-0.3-0.1c-0.2-0.1-0.5-0.1-0.7-0.2c-0.2-0.1-0.5-0.1-0.7-0.1c-0.2,0-0.5-0.1-0.7-0.1c-0.2,0-0.3,0-0.5,0 c-0.3,0-0.5,0-0.7,0.1c-0.2,0-0.5,0.1-0.7,0.1c-0.2,0.1-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.2-0.7,0.3c-0.2,0.1-0.4,0.2-0.6,0.3 c-7.7,5-3.1,16.8,2.1,20.2c-2,0.4-4,0.8-4.6,1.2c0,0-0.1,0.1-0.1,0.1c1.4,0.9,2.9,1.6,4.5,2.2c2.1,0.7,4.4,1.3,5.4,1.6v0 c2.7,0.6,5.5,0.8,8.3,0.6c14.6-1,26.6-12.2,28.8-26.8c0.1,0.3,0.1,0.6,0.2,0.9c0.1,0.6,0.2,1.2,0.3,1.9v0c0.1,0.3,0.1,0.6,0.1,0.9 v0.1c0,0.3,0.1,0.6,0.1,0.9c0,0.4,0.1,0.7,0.1,1.1v0.5c0,0.2,0,0.4,0,0.5c0,0.2,0,0.4,0,0.6v0.5c0,0.2,0,0.4,0,0.7 c0,0.1,0,0.3,0,0.4c0,0.2,0,0.5,0,0.7c0,0.1,0,0.2,0,0.3c0,0.3-0.1,0.5-0.1,0.8c0,0.1,0,0.2,0,0.3c0,0.3-0.1,0.6-0.1,1v0v0 c-0.1,0.3-0.1,0.6-0.2,0.9v0.1c-0.1,0.3-0.1,0.6-0.2,0.9c0,0,0,0.1,0,0.1c-0.1,0.3-0.1,0.6-0.2,0.9v0.1c-0.1,0.3-0.2,0.6-0.3,0.9 c0,0,0,0.1,0,0.1c-0.1,0.3-0.2,0.7-0.3,1c-0.1,0.3-0.2,0.6-0.4,1c-0.1,0.3-0.2,0.7-0.4,1c-0.1,0.3-0.3,0.6-0.4,1h0 c-0.1,0.3-0.3,0.6-0.4,0.9c0,0.1-0.1,0.2-0.1,0.2c0,0,0,0.1-0.1,0.1c-2.1,4.3-5.3,8.1-9.3,11.1c-0.3,0.2-0.5,0.4-0.8,0.6 c-0.1,0.1-0.2,0.1-0.2,0.2c-0.2,0.2-0.5,0.3-0.7,0.5l0.1,0.2h0c0.5-0.1,0.9-0.1,1.4-0.2h0c0.9-0.1,1.7-0.3,2.6-0.5 c0.2,0,0.5-0.1,0.7-0.2c0.2,0,0.3-0.1,0.5-0.1c0.2,0,0.5-0.1,0.7-0.1c0.2-0.1,0.4-0.1,0.6-0.2c3.3-0.8,6.5-1.9,9.6-3.2 c-5.3,7.2-12.3,13-20.5,16.8c3.8-0.3,7.6-0.9,11.3-2c13.3-3.9,24.5-12.9,31.2-25c-1.4,7.6-4.4,14.9-8.9,21.3 c3.2-2.1,6.1-4.6,8.8-7.3c7.4-7.7,12.3-17.6,13.9-28.1c1.1,5.2,1.5,10.6,1,15.9c23.9-33.3,2-67.8-7.2-76.9c0-0.1-0.1-0.1-0.1-0.2 c0,0,0,0,0,0.1c0,0,0,0,0-0.1c0,0.4,0,0.8-0.1,1.2c-0.1,0.8-0.2,1.5-0.3,2.2c-0.2,0.7-0.Line truncated
|
||||
|
||||
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.2 KiB |
@@ -1,4 +1,13 @@
|
||||
<svg class="absolute top-0 left-0 -m-4 h-10 w-10 fill-current text-blue-500" viewBox="0 0 128 128">
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute
|
||||
? 'absolute top-0 left-0 -m-4 h-10 w-10 fill-current text-blue-500'
|
||||
: 'mx-auto w-8 h-8 fill-current text-blue-500'}
|
||||
viewBox="0 0 128 128"
|
||||
>
|
||||
<path
|
||||
d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64c11.2 0 21.7-2.9 30.8-7.9L48.4 55.3v36.6h-6.8V41.8h6.8l50.5 75.8C116.4 106.2 128 86.5 128 64c0-35.3-28.7-64-64-64zm22.1 84.6l-7.5-11.3V41.8h7.5v42.8z"
|
||||
/>
|
||||
|
||||
|
Before Width: | Height: | Size: 312 B After Width: | Height: | Size: 442 B |
@@ -1,5 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="absolute top-0 left-0 -m-4 h-10 w-10 text-green-500"
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10 text-green-500' : 'mx-auto w-8 h-8 text-green-500'}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
@@ -1,5 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="absolute top-0 left-0 -m-4 h-10 w-10"
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 400 400"
|
||||
>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
@@ -1,4 +1,13 @@
|
||||
<svg viewBox="0 0 128 128" class="absolute top-0 left-0 -m-6 h-14 w-14 text-white">
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
viewBox="0 0 128 128"
|
||||
class={isAbsolute
|
||||
? 'absolute top-0 left-0 -m-6 h-14 w-14 text-white'
|
||||
: 'mx-auto w-8 h-8 text-white'}
|
||||
>
|
||||
<path
|
||||
fill="#6181B6"
|
||||
d="M64 33.039c-33.74 0-61.094 13.862-61.094 30.961s27.354 30.961 61.094 30.961 61.094-13.862 61.094-30.961-27.354-30.961-61.094-30.961zm-15.897 36.993c-1.458 1.364-3.077 1.927-4.86 2.507-1.783.581-4.052.461-6.811.461h-6.253l-1.733 10h-7.301l6.515-34h14.04c4.224 0 7.305 1.215 9.242 3.432 1.937 2.217 2.519 5.364 1.747 9.337-.319 1.637-.856 3.159-1.614 4.515-.759 1.357-1.75 2.624-2.972 3.748zm21.311 2.968l2.881-14.42c.328-1.688.208-2.942-.361-3.555-.57-.614-1.782-1.025-3.635-1.025h-5.79l-3.731 19h-7.244l6.515-33h7.244l-1.732 9h6.453c4.061 0 6.861.815 8.402 2.231s2.003 3.356 1.387 6.528l-3.031 15.241h-7.358zm40.259-11.178c-.318 1.637-.856 3.133-1.613 4.488-.758 1.357-1.748 2.598-2.971 3.722-1.458 1.364-3.078 1.927-4.86 2.507-1.782.581-4.053.461-6.812.461h-6.253l-1.732 10h-7.301l6.514-34h14.041c4.224 0 7.305 1.215 9.241 3.432 1.935 2.217 2.518 5.418 1.746 9.39zM95.919 54h-5.001l-2.727 14h4.442c2.942 0 5.136-.29 6.576-1.4 1.442-1.108 2.413-2.828 2.918-5.421.484-2.491.264-4.434-.66-5.458-.925-1.024-2.774-1.721-5.548-1.721zM38.934 54h-5.002l-2.727 14h4.441c2.943 0 5.136-.29 6.577-1.4 1.441-1.108 2.413-2.828 2.917-5.421.484-2.491.264-4.434-.66-5.458s-2.772-1.721-5.546-1.721z"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
@@ -1,4 +1,11 @@
|
||||
<svg class="absolute top-0 left-0 -m-6 h-14 w-14" viewBox="0 0 128 128">
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-6 h-14 w-14' : 'mx-auto w-8 h-8'}
|
||||
viewBox="0 0 128 128"
|
||||
>
|
||||
<linearGradient
|
||||
id="a"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.3 KiB |
@@ -1,4 +1,13 @@
|
||||
<svg class="absolute top-0 left-0 -m-4 h-10 w-10 text-blue-500" viewBox="0 0 128 128">
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute
|
||||
? 'absolute top-0 left-0 -m-4 h-10 w-10 text-blue-500'
|
||||
: 'mx-auto w-8 h-8 text-blue-500'}
|
||||
viewBox="0 0 128 128"
|
||||
>
|
||||
<g fill="#61DAFB"
|
||||
><circle cx="64" cy="64" r="11.4" /><path
|
||||
d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3-12.5 4.8-19.3 11.4-19.3 18.8s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zm-14.8-30.5c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zm-11.2 59.3c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zm-25.6 27.1c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zm25.6-27.1c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zm-54.5-16.2c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zm-24.7 29c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5-13.8-4-22.1-10-22.1-15.6zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zm60.8-20.3c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"
|
||||
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.5 KiB |
@@ -1,4 +1,11 @@
|
||||
<svg class="absolute top-0 left-0 -m-5 h-12 w-12" viewBox="0 0 128 128">
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-12 w-12' : 'mx-auto w-8 h-8'}
|
||||
viewBox="0 0 128 128"
|
||||
>
|
||||
<path
|
||||
d="M62.271 10.880 C 62.082 10.990,61.289 12.128,60.508 13.409 C 58.548 16.626,58.526 16.628,55.893 13.857 C 54.180 12.055,53.766 11.725,53.214 11.729 C 52.855 11.731,52.402 11.853,52.206 12.000 C 52.011 12.147,51.458 13.317,50.978 14.600 C 49.879 17.539,49.826 17.634,49.217 17.751 C 48.842 17.822,48.120 17.420,46.389 16.177 C 45.111 15.258,43.857 14.507,43.603 14.507 C 42.549 14.507,42.252 15.083,41.750 18.100 C 41.112 21.936,41.134 21.923,37.676 20.352 C 36.280 19.719,34.956 19.200,34.733 19.200 C 34.510 19.200,34.087 19.440,33.794 19.733 C 33.262 20.266,33.261 20.268,33.406 23.201 L 33.552 26.137 32.997 26.434 C 32.505 26.697,32.166 26.665,29.988 26.150 C 27.145 25.479,26.545 25.497,25.969 26.272 L 25.548 26.838 26.113 29.259 C 26.423 30.590,26.722 31.872,26.778 32.107 C 26.833 32.341,26.738 32.716,26.566 32.939 C 26.282 33.306,25.980 33.339,23.349 33.299 C 18.896 33.229,18.643 33.611,20.483 37.627 C 21.068 38.902,21.547 40.060,21.547 40.199 C 21.547 40.933,20.962 41.200,18.449 41.610 C 17.043 41.839,15.821 42.027,15.733 42.027 C 15.645 42.027,15.381 42.219,15.147 42.453 C 14.382 43.218,14.599 43.936,16.334 46.385 C 18.495 49.435,18.491 49.446,14.921 50.812 C 10.861 52.365,10.779 52.748,13.870 55.680 C 16.749 58.410,16.752 58.370,13.493 60.419 C 11.024 61.970,10.986 62.007,10.923 62.848 C 10.847 63.871,10.865 63.889,13.813 65.690 C 16.728 67.470,16.728 67.524,13.867 70.231 C 10.790 73.141,10.885 73.566,14.948 75.099 C 18.498 76.438,18.503 76.454,16.338 79.504 C 15.111 81.233,14.720 81.953,14.720 82.487 C 14.720 83.486,15.240 83.741,18.347 84.263 C 20.964 84.704,21.547 84.963,21.547 85.685 C 21.547 85.833,21.067 87.001,20.480 88.279 C 18.654 92.256,18.862 92.587,23.184 92.587 C 27.209 92.587,27.102 92.464,26.235 96.094 C 25.581 98.830,25.571 99.354,26.163 99.945 C 26.616 100.399,27.470 100.348,30.141 99.709 C 32.181 99.222,32.539 99.188,33.012 99.441 L 33.552 99.730 33.406 102.665 C 33.261 105.599,33.262 105.601,33.794 106.134 C 34.087 106.427,34.516 106.667,34.746 106.667 C 34.976 106.667,36.300 106.151,37.689 105.520 C 41.136 103.955,41.114 103.942,41.750 107.766 C 42.254 110.797,42.548 111.360,43.624 111.360 C 43.891 111.360,45.118 110.640,46.352 109.760 C 48.519 108.214,49.081 107.972,49.658 108.339 C 49.807 108.433,50.385 109.703,50.942 111.161 C 51.761 113.305,52.061 113.863,52.517 114.081 C 53.385 114.497,53.922 114.163,55.962 111.941 C 58.425 109.258,58.526 109.271,60.537 112.530 C 62.758 116.128,63.333 116.120,65.610 112.457 C 67.572 109.301,67.549 109.303,70.201 112.073 C 71.962 113.911,72.337 114.204,72.931 114.204 C 73.310 114.204,73.763 114.062,73.936 113.888 C 74.110 113.714,74.686 112.429,75.216 111.033 C 75.746 109.636,76.295 108.420,76.437 108.330 C 76.998 107.973,77.579 108.224,79.743 109.760 C 81.017 110.665,82.216 111.360,82.501 111.360 C 83.559 111.360,83.941 110.609,84.381 107.657 C 84.757 105.140,84.833 104.899,85.328 104.648 C 85.815 104.401,86.107 104.484,88.391 105.521 C 89.780 106.151,91.104 106.667,91.334 106.667 C 91.564 106.667,92.000 106.420,92.301 106.118 L 92.850 105.570 92.699 102.755 C 92.555 100.067,92.568 99.923,92.997 99.535 C 93.438 99.136,93.483 99.138,95.949 99.701 C 98.935 100.383,99.492 100.401,100.053 99.840 C 100.601 99.292,100.595 99.172,99.845 96.009 C 99.004 92.461,98.891 92.587,102.933 92.587 C 105.688 92.587,105.995 92.548,106.346 92.161 C 106.932 91.513,106.793 90.771,105.614 88.258 C 105.019 86.992,104.536 85.840,104.540 85.698 C 104.560 84.951,105.147 84.696,107.860 84.255 C 109.520 83.986,110.762 83.674,110.987 83.471 C 111.741 82.790,111.464 81.904,109.743 79.491 C 107.586 76.467,107.595 76.438,111.049 75.165 C 115.185 73.641,115.303 73.133,112.208 70.192 C 109.341 67.468,109.340 67.483,112.480 65.555 C 116.276 63.225,116.282 62.700,112.547 60.382 C 109.335 58.389,109.337 58.417,112.216 55.683 C 115.304 52.749,115.220 52.365,111.159 50.812 C 107.575 49.441,107.564 49.407,109.742 46.418 C 111.039 44.638,111.360 44.047,111.360 43.437 C 111.360 42.371,110.882 42.132,107.738 41.624 C 105.111 41.200,104.533 40.942,104.533 40.195 C 104.533 40.053,105.013 38.910,105.600 37.653 C 106.749 35.192,106.910 34.207,106.260 33.618 C 105.911 33.302,105.443 33.257,102.939 33.298 C 100.319 33.342,99.984 33.305,99.621 32.940 C 99.224 32.541,99.228 32.485,99.848 29.898 C 100.608 26.728,100.611 26.651,99.986 26.064 C 99.352 25.468,98.956 25.478,96.045 26.163 C 93.924 26.663,93.573 26.696,93.091 26.438 L 92.544 26.145 92.695 23.219 L 92.847 20.294 92.300 19.747 C 91.999 19.446,91.572 19.200,91.350 19.200 C 91.129 19.200,89.812 19.723,88.424 20.361 C 86.106 21.428,85.857 21.499,85.356 21.237 C 84.856 20.975,84.773 20.717,84.346 18.110 C 83.853 15.094,83.548 14.507,82.477 14.507 C 82.223 14.507,80.964 15.262,79.679 16.185 C 77.569 17.701,77.286 17.844,76.760 17.661 C 76.325 17.509,76.072 17.178,75.763 16.355 C 75.534 15.749,75.096 14.581,74.788 13.760 C 74.166 12.104,73.819 11.733,72.887 11.733 C 72.367 11.733,71.896 12.107,70.208 13.860 C 67.555 16.616,67.545 16.615,65.59Line truncated
|
||||
stroke="none"
|
||||
|
||||
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
@@ -1,5 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="absolute top-0 left-0 -m-4 h-10 w-10 text-white"
|
||||
class={isAbsolute
|
||||
? 'absolute top-0 left-0 -m-4 h-10 w-10 text-white'
|
||||
: 'mx-auto w-8 h-8 text-white'}
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -1,5 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="absolute top-0 left-0 -m-4 h-10 w-10"
|
||||
class={isAbsolute ? 'absolute top-0 left-0 -m-4 h-10 w-10' : 'mx-auto w-8 h-8'}
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.6 KiB |
@@ -1,4 +1,13 @@
|
||||
<svg class="absolute top-0 left-0 -m-4 h-10 w-10 text-green-500" viewBox="0 0 128 128">
|
||||
<script lang="ts">
|
||||
export let isAbsolute = true;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute
|
||||
? 'absolute top-0 left-0 -m-4 h-10 w-10 text-green-500'
|
||||
: 'mx-auto w-8 h-8 text-green-500'}
|
||||
viewBox="0 0 128 128"
|
||||
>
|
||||
<path
|
||||
d="m-2.3125e-8 8.9337 49.854 0.1586 14.167 24.47 14.432-24.47 49.547-0.1577-63.834 110.14zm126.98 0.6374-24.36 0.0207-38.476 66.052-38.453-66.052-24.749-0.0194 63.211 107.89zm-25.149-0.008-22.745 0.16758l-15.053 24.647-14.817-24.647-22.794-0.1679 37.731 64.476zM25.997 9.3929l23.002 0.0087M25.997 9.3929l23.002 0.0087"
|
||||
fill="none"
|
||||
|
||||
|
Before Width: | Height: | Size: 676 B After Width: | Height: | Size: 794 B |
@@ -0,0 +1,19 @@
|
||||
//@ts-nocheck
|
||||
export { default as Rust } from './Rust.svelte';
|
||||
export { default as Nodejs } from './Nodejs.svelte';
|
||||
export { default as React } from './React.svelte';
|
||||
export { default as Svelte } from './Svelte.svelte';
|
||||
export { default as Vuejs } from './Vuejs.svelte';
|
||||
export { default as Php } from './PHP.svelte';
|
||||
export { default as Python } from './Python.svelte';
|
||||
export { default as Static } from './Static.svelte';
|
||||
export { default as Nestjs } from './Nestjs.svelte';
|
||||
export { default as Nuxtjs } from './Nuxtjs.svelte';
|
||||
export { default as Nextjs } from './Nextjs.svelte';
|
||||
export { default as Gatsby } from './Gatsby.svelte';
|
||||
export { default as Docker } from './Docker.svelte';
|
||||
export { default as Astro } from './Astro.svelte';
|
||||
export { default as Eleventy } from './Eleventy.svelte';
|
||||
export { default as Deno } from './Deno.svelte';
|
||||
export { default as Laravel } from './Laravel.svelte';
|
||||
export { default as Heroku } from './Heroku.svelte';
|
||||
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import * as Icons from '$lib/components/svg/databases';
|
||||
export let type: any;
|
||||
export let isAbsolute = false;
|
||||
</script>
|
||||
|
||||
{#if type === 'mysql'}
|
||||
<Icons.MySQL {isAbsolute} />
|
||||
{:else if type === 'postgresql'}
|
||||
<Icons.PostgreSQL {isAbsolute} />
|
||||
{:else if type === 'mongodb'}
|
||||
<Icons.MongoDB {isAbsolute} />
|
||||
{:else if type === 'mariadb'}
|
||||
<Icons.MariaDB {isAbsolute} />
|
||||
{:else if type === 'redis'}
|
||||
<Icons.Redis {isAbsolute} />
|
||||
{:else if type === 'couchdb'}
|
||||
<Icons.CouchDB {isAbsolute} />
|
||||
{/if}
|
||||
@@ -0,0 +1,10 @@
|
||||
//@ts-nocheck
|
||||
export { default as Clickhouse } from './Clickhouse.svelte';
|
||||
export { default as CouchDB } from './CouchDB.svelte';
|
||||
export { default as MariaDB } from './MariaDB.svelte';
|
||||
export { default as MongoDB } from './MongoDB.svelte';
|
||||
export { default as MySQL } from './MySQL.svelte';
|
||||
export { default as PostgreSQL } from './PostgreSQL.svelte';
|
||||
export { default as Redis } from './Redis.svelte';
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = false;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={isAbsolute ? 'w-14 h-14 absolute top-0 left-0 -m-5' : 'w-9 h-9 mx-auto'}
|
||||
viewBox="0 0 384 384"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M245.428 251.188C225.963 251.188 207.717 245.97 192.013 236.856C180.23 243.676 167.137 248.24 153.392 250.162C125.4 254.077 96.9988 246.711 74.4371 229.686C63.2548 221.259 53.8425 210.712 46.738 198.647C39.6336 186.582 34.9763 173.235 33.0322 159.369C31.0882 145.503 31.8956 131.39 35.4082 117.836C38.9208 104.282 45.0698 91.5535 53.5038 80.3772C61.9378 69.2008 72.4915 59.7959 84.5617 52.6999C96.632 45.604 109.982 40.9561 123.85 39.0218C137.717 37.0876 151.829 37.9049 165.381 41.427C174.734 43.8581 183.694 47.545 192.02 52.3718C207.723 43.2611 225.966 38.0443 245.428 38.0443C304.287 38.0443 352 85.7574 352 144.616C352 203.475 304.287 251.188 245.428 251.188ZM174.175 65.3628L174.207 65.3348C159.408 58.6947 142.917 56.2743 126.596 58.5567C103.772 61.7486 83.1498 73.8768 69.2675 92.2732C55.3852 110.67 49.3795 133.827 52.5714 156.652C55.7633 179.476 67.8915 200.098 86.2879 213.98C104.684 227.862 127.842 233.868 150.666 230.676C173.491 227.484 194.113 215.356 207.995 196.96C221.877 178.563 227.883 155.406 224.691 132.581C223.218 122.051 219.844 111.99 214.829 102.843C205.746 86.3437 191.457 73.1128 174.175 65.3628ZM60.2808 291.922C57.5061 289.883 54.1506 288.863 50.2139 288.863C46.6568 288.863 43.5025 289.658 40.7517 291.247C38.0008 292.835 35.8542 295.135 34.3126 298.145C32.771 301.158 32 304.703 32 308.781C32 312.812 32.771 316.333 34.3126 319.346C35.8542 322.359 38.0123 324.672 40.787 326.284C43.5617 327.896 46.704 328.703 50.2139 328.703C54.1506 328.703 57.5061 327.683 60.2808 325.644C63.0555 323.605 64.9634 320.901 66.0049 317.533V328.204H70.917V289.358H66.0049V300.029C64.9634 296.663 63.0555 293.961 60.2808 291.922ZM40.9988 297.434C43.6323 294.659 47.1303 293.272 51.4938 293.272C54.2446 293.272 56.7223 293.912 58.9259 295.192C61.1326 296.475 62.8639 298.29 64.1204 300.638C65.3769 302.983 66.0049 305.697 66.0049 308.781C66.0049 311.865 65.3769 314.58 64.1204 316.928C62.8639 319.276 61.1326 321.09 58.9259 322.37C56.7223 323.65 54.2446 324.289 51.4938 324.289C47.1303 324.289 43.6323 322.902 40.9988 320.128C38.3685 317.353 37.0533 313.571 37.0533 308.781C37.0533 303.991 38.3685 300.209 40.9988 297.434ZM111.929 291.247C109.201 289.658 106.059 288.863 102.502 288.863C98.5181 288.863 95.1507 289.883 92.3998 291.922C89.649 293.961 87.7526 296.663 86.711 300.029V289.358H81.7284V346.559H86.711V317.533C87.7526 320.901 89.649 323.605 92.3998 325.644C95.1507 327.683 98.5181 328.703 102.502 328.703C106.012 328.703 109.143 327.896 111.894 326.284C114.644 324.672 116.791 322.359 118.333 319.346C119.874 316.333 120.645 312.812 120.645 308.781C120.645 304.703 119.874 301.158 118.333 298.145C116.791 295.135 114.656 292.835 111.929 291.247ZM93.715 295.192C95.9217 293.912 98.4007 293.272 101.152 293.272C105.562 293.272 109.072 294.659 111.682 297.434C114.289 300.209 115.592 303.991 115.592 308.781C115.592 313.571 114.289 317.353 111.682 320.128C109.072 322.902 105.562 324.289 101.152 324.289C98.4007 324.289 95.9217 323.65 93.715 322.37C91.5114 321.09 89.7929 319.276 88.5602 316.928C87.3276 314.58 86.711 311.865 86.711 308.781C86.711 305.697 87.3276 302.983 88.5602 300.638C89.7929 298.29 91.5114 296.475 93.715 295.192ZM159.808 291.247C157.081 289.658 153.938 288.863 150.381 288.863C146.397 288.863 143.03 289.883 140.279 291.922C137.528 293.961 135.632 296.663 134.59 300.029V289.358H129.608V346.559H134.59V317.533C135.632 320.901 137.528 323.605 140.279 325.644C143.03 327.683 146.397 328.703 150.381 328.703C153.891 328.703 157.022 327.896 159.773 326.284C162.524 324.672 164.67 322.359 166.212 319.346C167.753 316.333 168.524 312.812 168.524 308.781C168.524 304.703 167.753 301.158 166.212 298.145C164.67 295.135 162.536 292.835 159.808 291.247ZM141.594 295.192C143.801 293.912 146.28 293.272 149.031 293.272C153.441 293.272 156.951 294.659 159.561 297.434C162.168 300.209 163.471 303.991 163.471 308.781C163.471 313.571 162.168 317.353 159.561 320.128C156.951 322.902 153.441 324.289 149.031 324.289C146.28 324.289 143.801 323.65 141.594 322.37C139.391 321.09 137.672 319.276 136.439 316.928C135.207 314.58 134.59 311.865 134.59 308.781C134.59 305.697 135.207 302.983 136.439 300.638C137.672 298.29 139.391 296.475 141.594 295.192ZM233.051 288.793H223.659L217.185 319.241L208.363 288.793H197.762L189.014 319.241L182.611 288.793H172.579L183.109 328.204H194.204L202.886 299.535L211.35 328.204H222.45L233.051 288.793ZM253.893 290.39C251.474 291.838 249.531 293.818 248.063 296.331V288.793H238.031V328.204H248.063V309.209C248.063 302.38 251.737 298.966 259.087 298.966H262.005V288.223C259.018 288.223 256.314 288.946 253.893 290.39ZM268.125 273.531C266.986 274.55 266.417 275.865 266.417 277.477C266.417 279.042 266.986 280.336 268.125 281.356C269.263 282.377 270.757 282.888 272.604 282.888C274.455 282.888 275.95 282.377 277.088 281.356C278.227 280.336 278.796 279.042 278.796 277.477C278.796 275.865 278.227 274.55 277.088 273.531C275.95 272.511 274.455 272 272.604 272C270.757 272 269.263 272.511 268.125 273.531ZM277.587 288.793H267.555V328.204H277.587VLine truncated
|
||||
fill="#F02E65"
|
||||
/>
|
||||
<path
|
||||
d="M141.487 107.744C141.359 108.059 139.73 114.459 137.975 122.05C136.154 129.641 133.268 141.623 131.64 148.712C128.5 161.698 126.618 170.23 126.618 171.36C126.618 171.671 128.564 171.925 130.946 171.925H135.277L137.219 163.265C138.351 158.561 140.861 147.77 142.868 139.301C144.876 130.831 147.321 120.543 148.264 116.401C149.203 112.26 150.144 108.499 150.334 108.059C150.523 107.495 149.454 107.308 146.193 107.308C143.745 107.308 141.61 107.495 141.487 107.744ZM107.796 134.909L102.024 141.184L103.72 143.19C104.658 144.318 107.233 147.143 109.429 149.465L113.444 153.729H124.862L119.468 147.894C116.517 144.761 114.07 141.748 114.07 141.372C114.07 140.933 116.33 138.111 119.091 135.099C121.85 132.027 124.109 129.388 124.109 129.075C124.109 128.824 121.725 128.636 118.84 128.636H113.633L107.796 134.909ZM151.712 129.011C151.712 129.202 152.779 130.392 154.094 131.71C158.991 136.603 162.441 140.746 162.252 141.559C162.128 142 159.742 144.946 156.858 148.021L151.653 153.729H157.485L163.32 153.667L168.65 147.834C171.601 144.574 173.984 141.684 173.984 141.308C173.984 140.997 171.475 138.047 168.337 134.724L162.693 128.636H157.232C154.158 128.636 151.712 128.824 151.712 129.011Z"
|
||||
fill="#F02E65"
|
||||
/>
|
||||
</svg>
|
||||
@@ -5,7 +5,7 @@
|
||||
<svg
|
||||
viewBox="0 0 700 240"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={isAbsolute ? 'w-36 absolute top-0 left-0 -m-3 -mt-5' : 'w-28 mx-auto'}
|
||||
class={isAbsolute ? 'w-36 absolute top-0 left-0 -m-3 -mt-5' : 'w-28 h-28 mx-auto'}
|
||||
><path fill="#FDBC3D" d="m90.694 107.498-.981.39-20.608 8.23 6.332 6.547z" /><path
|
||||
fill="#8EC63F"
|
||||
d="M61.139 77.914 46.632 93 56.9 103.547c8.649-7.169 17.832-10.502 18.653-10.789L61.139 77.914z"
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
|
||||
<img
|
||||
alt="ghost logo"
|
||||
class={isAbsolute ? 'w-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 h-8 mx-auto'}
|
||||
src="/ghost.png"
|
||||
/>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = false;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
style="isolation:isolate"
|
||||
viewBox="0 0 400 400"
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="_clipPath_5kOQy2sGcuF9aeG3NHWmCAGgMEPQrnNW">
|
||||
<rect width="400" height="400" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#_clipPath_5kOQy2sGcuF9aeG3NHWmCAGgMEPQrnNW)">
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d=" M 276.155 367.684 L 337.655 367.684 L 337.655 180.781 L 205.525 180.781 L 205.525 241.801 L 267.987 241.801 L 267.987 258.617 C 267.987 291.29 238.678 308.586 202.162 308.586 C 156.998 308.586 127.689 282.641 127.689 226.906 L 127.689 173.094 C 127.689 117.359 156.998 91.414 202.162 91.414 C 241.08 91.414 261.74 112.554 271.83 138.5 L 331.409 104.386 C 306.424 52.976 261.74 26.55 202.162 26.55 C 111.353 26.55 50.333 88.531 50.333 201.441 C 50.333 313.872 110.873 373.45 187.748 373.45 C 238.197 373.45 268.947 347.985 273.752 314.352 L 276.155 314.352 L 276.155 367.684 Z "
|
||||
fill="rgb(132,24,128)"
|
||||
/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path
|
||||
d=" M 139.701 175.78 L 139.701 173.094 C 139.701 117.359 169.01 91.414 214.174 91.414 C 253.092 91.414 273.752 112.554 283.842 138.5 L 343.421 104.386 C 318.436 52.976 273.752 26.55 214.174 26.55 C 128.962 26.55 69.981 81.125 63.033 181.145 L 139.701 175.78 Z "
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(233,64,86)"
|
||||
/>
|
||||
</g>
|
||||
<g opacity="0.5">
|
||||
<path
|
||||
d=" M 349.667 305.194 L 349.667 247.137 L 279.998 252.019 L 279.998 258.617 C 279.998 291.29 250.69 308.586 214.174 308.586 C 179.697 308.586 154.459 293.467 144.446 261.518 L 70.341 266.711 C 76.285 288.796 85.348 307.563 96.86 322.909 L 349.667 305.194 Z "
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(233,64,86)"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d=" M 337.655 247.03 L 337.655 180.781 L 205.525 180.781 L 205.525 241.801 L 267.987 241.801 L 267.987 251.912 L 337.655 247.03 Z M 132.401 261.413 C 129.319 251.534 127.689 240.048 127.689 226.906 L 127.689 175.099 L 51.069 180.468 C 50.581 187.25 50.333 194.242 50.333 201.441 C 50.333 225.632 53.136 247.376 58.301 266.606 L 132.401 261.413 Z "
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(233,64,86)"
|
||||
/>
|
||||
<path
|
||||
d=" M 337.655 305.862 L 337.655 367.684 L 276.155 367.684 L 276.155 314.352 L 273.752 314.352 C 268.947 347.985 238.197 373.45 187.748 373.45 C 146.712 373.45 110.33 356.473 85.327 323.543 L 337.655 305.862 Z "
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(255,63,42)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
|
||||
viewBox="0 0 81 84"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
|
||||
fill="none"
|
||||
viewBox="0 0 140 140"
|
||||
data-lt-extension-installed="true"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<svg
|
||||
viewBox="0 0 127 74"
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M.825 73.993l23.244-59.47A21.85 21.85 0 0144.42.625h14.014L35.19 60.096a21.85 21.85 0 01-20.352 13.897H.825z"
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
|
||||
<img
|
||||
alt="minio logo"
|
||||
class={isAbsolute ? 'w-7 absolute top-0 left-0 -m-3 -mt-5' : 'w-4 mx-auto'}
|
||||
class={isAbsolute ? 'w-7 h-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-4 h-8 mx-auto'}
|
||||
src="/minio.png"
|
||||
/>
|
||||
@@ -3,6 +3,6 @@
|
||||
</script>
|
||||
<img
|
||||
alt="moodle logo"
|
||||
class={isAbsolute ? 'w-9 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-9 h-9 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 h-8 mx-auto'}
|
||||
src="/moodle.png"
|
||||
/>
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
|
||||
viewBox="0 0 220 105"
|
||||
>
|
||||
<g>
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
|
||||
<img
|
||||
alt="nocodb logo"
|
||||
class={isAbsolute ? 'w-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
|
||||
src="/nocodb.png"
|
||||
/>
|
||||
@@ -4,6 +4,6 @@
|
||||
|
||||
<img
|
||||
alt="plausible logo"
|
||||
class={isAbsolute ? 'w-9 absolute top-0 left-0 -m-4' : 'w-6 mx-auto'}
|
||||
class={isAbsolute ? 'w-9 h-12 absolute top-0 left-0 -m-4' : 'w-6 h-8 mx-auto'}
|
||||
src="/plausible.png"
|
||||
/>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = false;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
id="svg8"
|
||||
version="1.1"
|
||||
viewBox="0 0 92 92"
|
||||
class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 h-8 mx-auto'}
|
||||
>
|
||||
<defs id="defs2" />
|
||||
<metadata id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g transform="translate(-40.921303,-17.416526)" id="layer1">
|
||||
<circle
|
||||
r="0"
|
||||
style="fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
cy="92"
|
||||
cx="75"
|
||||
id="path3713"
|
||||
/>
|
||||
<circle
|
||||
r="30"
|
||||
cy="53.902557"
|
||||
cx="75.921303"
|
||||
id="path834"
|
||||
style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
/>
|
||||
<path
|
||||
d="m 67.514849,37.91524 a 18,18 0 0 1 21.051475,3.312407 18,18 0 0 1 3.137312,21.078282"
|
||||
id="path852"
|
||||
style="fill:none;fill-opacity:1;stroke:#3050ff;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
/>
|
||||
<rect
|
||||
transform="rotate(-46.234709)"
|
||||
ry="1.8669105e-13"
|
||||
y="122.08995"
|
||||
x="3.7063529"
|
||||
height="39.963303"
|
||||
width="18.846331"
|
||||
id="rect912"
|
||||
style="opacity:1;fill:#3050ff;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script lang="ts">
|
||||
export let type: string;
|
||||
export let isAbsolute = true;
|
||||
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 === 'appwrite'}
|
||||
<Icons.Appwrite {isAbsolute} />
|
||||
{:else if type === 'moodle'}
|
||||
<Icons.Moodle {isAbsolute} />
|
||||
{:else if type === 'glitchTip'}
|
||||
<Icons.GlitchTip {isAbsolute} />
|
||||
{:else if type === 'searxng'}
|
||||
<Icons.Searxng {isAbsolute} />
|
||||
{:else if type === 'weblate'}
|
||||
<Icons.Weblate {isAbsolute} />
|
||||
{/if}
|
||||
@@ -7,7 +7,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 856.000000 856.000000"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
|
||||
>
|
||||
<metadata> Created by potrace 1.11, written by Peter Selinger 2001-2013 </metadata>
|
||||
<g
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8mx-auto'}
|
||||
viewBox="0 0 128 128"
|
||||
>
|
||||
<path
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={isAbsolute ? 'w-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'}
|
||||
class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8mx-auto'}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<script lang="ts">
|
||||
export let isAbsolute = false;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class={isAbsolute ? 'w-16 h-16 absolute top-0 left-0 -m-7' : 'w-12 h-12 mx-auto'}
|
||||
version="1.1"
|
||||
viewBox="0 0 300 300"
|
||||
><linearGradient
|
||||
id="a"
|
||||
x1=".3965"
|
||||
x2="98.808"
|
||||
y1="55.253"
|
||||
y2="55.253"
|
||||
gradientTransform="scale(.98308 1.0172)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
><stop stop-color="#00d2e6" offset="0" /><stop
|
||||
stop-color="#2eccaa"
|
||||
offset="1"
|
||||
/></linearGradient
|
||||
><linearGradient
|
||||
id="b"
|
||||
x1="49.017"
|
||||
x2="99.793"
|
||||
y1="137.89"
|
||||
y2="113.96"
|
||||
gradientTransform="scale(1.1631 .8598)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
><stop stop-opacity="0" offset="0" /><stop offset=".51413" /><stop
|
||||
stop-opacity="0"
|
||||
offset="1"
|
||||
/></linearGradient
|
||||
><linearGradient
|
||||
id="c"
|
||||
x1="201.82"
|
||||
x2="103.58"
|
||||
y1="57.649"
|
||||
y2="57.649"
|
||||
gradientTransform="scale(.98308 1.0172)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
><stop stop-color="#1fa385" offset="0" /><stop
|
||||
stop-color="#2eccaa"
|
||||
offset="1"
|
||||
/></linearGradient
|
||||
><g transform="translate(50,76)" fill-rule="evenodd"
|
||||
><path
|
||||
d="m127.25 111.61c-2.8884-0.0145-5.7666-0.6024-8.4797-1.7847-6.1117-2.6626-11.493-7.6912-15.872-14.495 1.2486-2.2193 2.3738-4.5173 3.3784-6.8535 4.4051-10.243 6.5-21.46 6.6607-32.593-0.0233-0.22082-0.0416-0.44244-0.0552-0.66483l-0.0121-0.57132c-0.01-4.3654-0.67459-8.7898-2.1767-12.909-1.7304-4.7458-4.4887-9.4955-8.865-11.348-0.79519-0.33595-1.6316-0.47701-2.4642-0.45737-5.5049-10.289-5.6799-20.149 0-29.537 0.10115 0 0.20619 3.9293e-4 0.30734 0.001179 6.7012 0.07387 13.34 2.1418 19.021 5.7536 15.469 9.835 23.182 29.001 23.352 47.818 2e-3 0.22083-3.9e-4 0.44126-7e-3 0.66169h0.0868c-0.0226 19.887-4.8049 40.054-14.875 56.979zm-34.3 31.216c-14.448 5.9425-31.228 5.6236-45.549-1.025-16.476-7.6476-29.065-22.512-36.818-39.479-13.262-29.022-13.566-63.715-0.98815-93.182 9.4458 3.7788 17.845-2.2397 17.845-2.2397s-0.01945 9.2605 8.9478 13.905c-9.2007 21.556-8.979 47.167 0.2412 68.173 4.4389 10.107 11.22 19.519 20.619 24.842 3.3547 1.8996 7.041 3.126 10.833 3.5862 0.01404 0.0219 0.02808 0.0439 0.04214 0.0658 6.6965 10.449 15.132 19.157 24.828 25.354z"
|
||||
fill="url(#a)"
|
||||
fill-rule="nonzero"
|
||||
/><path
|
||||
d="m127.24 111.61c-2.8869-0.0151-5.7636-0.60296-8.4755-1.7846-6.1127-2.663-11.495-7.6928-15.874-14.498 1.2494-2.2205 2.3754-4.5198 3.3806-6.8572 1.3282-3.0884 2.4463-6.2648 3.3644-9.501 2.128-7.4978 30.382 2.0181 26.072 14.371-2.2239 6.373-5.0394 12.509-8.4675 18.27zm-34.302 31.212c-14.446 5.9396-31.224 5.6198-45.543-1.0278-16.476-7.6476 0.44739-33.303 9.8465-27.981 3.3533 1.8988 7.0378 3.125 10.828 3.5856 0.01567 0.0245 0.03135 0.049 0.04704 0.0735 6.695 10.447 15.128 19.153 24.821 25.349z"
|
||||
fill="url(#b)"
|
||||
opacity=".3"
|
||||
/><path
|
||||
d="m56.762 54.628c-0.0066-0.22043-0.0093-0.44086-7e-3 -0.66169 0.17001-18.817 7.8827-37.983 23.352-47.818 5.6811-3.6118 12.32-5.6798 19.021-5.7536 0.10115-7.8585e-4 0.20619-0.001179 0.30734-0.001179v29.537c-0.83254-0.01965-1.669 0.12141-2.4642 0.45737-4.3763 1.8523-7.1345 6.602-8.865 11.348-1.5021 4.1191-2.1669 8.5434-2.1767 12.909l-0.01206 0.57132c-0.01362 0.2224-0.0319 0.44401-0.05524 0.66483 0.16067 11.134 2.2556 22.35 6.6607 32.593 4.9334 11.472 12.775 22.025 23.847 26.849 8.3526 3.6397 17.612 2.7811 25.182-1.5057 9.3991-5.3226 16.18-14.734 20.619-24.842 9.2202-21.006 9.4419-46.617 0.24121-68.173 8.9673-4.6444 8.9478-13.905 8.9478-13.905s8.3993 6.0185 17.845 2.2397c12.578 29.466 12.274 64.16-0.98815 93.182-7.7535 16.967-20.343 31.831-36.818 39.479-14.667 6.809-31.913 6.9792-46.591 0.58389-13.19-5.7489-23.918-16.106-31.637-28.15-11.179-17.443-16.472-38.678-16.496-59.604z"
|
||||
fill="url(#c)"
|
||||
fill-rule="nonzero"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
@@ -2,7 +2,7 @@
|
||||
export let isAbsolute = false;
|
||||
</script>
|
||||
|
||||
<svg class={isAbsolute ? 'w-10 absolute top-0 left-0 -m-5' : 'w-8 mx-auto'} viewBox="0 0 128 128">
|
||||
<svg class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8mx-auto'} viewBox="0 0 128 128">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
//@ts-nocheck
|
||||
export { default as PlausibleAnalytics } from './PlausibleAnalytics.svelte';
|
||||
export { default as NocoDb } from './NocoDB.svelte';
|
||||
export { default as MinIo } from './MinIO.svelte';
|
||||
export { default as VsCodeServer } from './VSCodeServer.svelte';
|
||||
export { default as Wordpress } from './Wordpress.svelte';
|
||||
export { default as VaultWarden } from './VaultWarden.svelte';
|
||||
export { default as LanguageTool } from './LanguageTool.svelte';
|
||||
export { default as N8n } from './N8n.svelte';
|
||||
export { default as UptimeKuma } from './UptimeKuma.svelte';
|
||||
export { default as Ghost } from './Ghost.svelte';
|
||||
export { default as MeiliSearch } from './MeiliSearch.svelte';
|
||||
export { default as Umami } from './Umami.svelte';
|
||||
export { default as Hasura } from './Hasura.svelte';
|
||||
export { default as Fider } from './Fider.svelte';
|
||||
export { default as Moodle } from './Moodle.svelte';
|
||||
|
||||
export { default as NocoDb } from './NocoDB.svelte';
|
||||
export { default as MinIo } from './MinIO.svelte';
|
||||
export { default as VsCodeServer } from './VSCodeServer.svelte';
|
||||
export { default as Wordpress } from './Wordpress.svelte';
|
||||
export { default as VaultWarden } from './VaultWarden.svelte';
|
||||
export { default as LanguageTool } from './LanguageTool.svelte';
|
||||
export { default as N8n } from './N8n.svelte';
|
||||
export { default as UptimeKuma } from './UptimeKuma.svelte';
|
||||
export { default as Ghost } from './Ghost.svelte';
|
||||
export { default as MeiliSearch } from './MeiliSearch.svelte';
|
||||
export { default as Umami } from './Umami.svelte';
|
||||
export { default as Hasura } from './Hasura.svelte';
|
||||
export { default as Fider } from './Fider.svelte';
|
||||
export { default as Appwrite } from './Appwrite.svelte';
|
||||
export { default as Moodle } from './Moodle.svelte';
|
||||
export { default as GlitchTip } from './GlitchTip.svelte';
|
||||
export { default as Searxng } from './Searxng.svelte';
|
||||
export { default as Weblate } from './Weblate.svelte';
|
||||
@@ -4,7 +4,7 @@
|
||||
"wait_new_version_startup": "Waiting for the new version to start...",
|
||||
"new_version": "New version reachable. Reloading...",
|
||||
"switch_to_a_different_team": "Switch to a different team...",
|
||||
"update_available": "Update available"
|
||||
"update_available": "Update Available"
|
||||
},
|
||||
"error": {
|
||||
"you_can_find_your_way_back": "You can find your way back",
|
||||
@@ -88,7 +88,7 @@
|
||||
"removing": "Removing...",
|
||||
"remove_domain": "Remove domain",
|
||||
"public_port_range": "Public Port Range",
|
||||
"public_port_range_explainer": "Ports used to expose databases/services/internal services.<br> Add them to your firewall (if applicable).<br><br>You can specify a range of ports, eg: <span class='text-yellow-500 font-bold'>9000-9100</span>",
|
||||
"public_port_range_explainer": "Ports used to expose databases/services/internal services.<br> Add them to your firewall (if applicable).<br><br>You can specify a range of ports, eg: <span class='text-settings font-bold'>9000-9100</span>",
|
||||
"no_actions_available": "No actions available",
|
||||
"admin_api_key": "Admin API key"
|
||||
},
|
||||
@@ -159,23 +159,23 @@
|
||||
"storage_saved": "Storage saved.",
|
||||
"storage_updated": "Storage updated.",
|
||||
"storage_deleted": "Storage deleted.",
|
||||
"persistent_storage_explainer": "You can specify any folder that you want to be persistent across deployments. <br>This is useful for storing data such as a database (SQLite) or a cache."
|
||||
"persistent_storage_explainer": "You can specify any folder that you want to be persistent across deployments.<br><span class='text-green-500 font-bold'>/example</span> means it will preserve <span class='text-green-500 font-bold'>/app/example</span> in the container as <span class='text-green-500 font-bold'>/app</span> is <span class='text-green-500 font-bold'>the root directory</span> for your application.<br><br>This is useful for storing data such as a <span class='text-green-500 font-bold'>database (SQLite)</span> or a <span class='text-green-500 font-bold'>cache</span>."
|
||||
},
|
||||
"deployment_queued": "Deployment queued.",
|
||||
"confirm_to_delete": "Are you sure you would like to delete '{{name}}'?",
|
||||
"stop_application": "Stop application",
|
||||
"stop_application": "Stop Application",
|
||||
"permission_denied_stop_application": "You do not have permission to stop the application.",
|
||||
"rebuild_application": "Rebuild application",
|
||||
"rebuild_application": "Rebuild Application",
|
||||
"permission_denied_rebuild_application": "You do not have permission to rebuild application.",
|
||||
"build_and_start_application": "Build and start application",
|
||||
"permission_denied_build_and_start_application": "You do not have permission to Build and start application.",
|
||||
"build_and_start_application": "Deploy",
|
||||
"permission_denied_build_and_start_application": "You do not have permission to deploy application.",
|
||||
"configurations": "Configurations",
|
||||
"secret": "Secrets",
|
||||
"persistent_storage": "Persistent Storage",
|
||||
"previews": "Previews",
|
||||
"logs": "Application Logs",
|
||||
"build_logs": "Build Logs",
|
||||
"delete_application": "Delete application",
|
||||
"delete_application": "Delete",
|
||||
"permission_denied_delete_application": "You do not have permission to delete this application",
|
||||
"domain_already_in_use": "Domain {{domain}} is already used.",
|
||||
"dns_not_set_error": "DNS not set correctly or propogated for {{domain}}.<br><br>Please check your DNS settings.",
|
||||
@@ -209,7 +209,7 @@
|
||||
"expose_a_port": "Expose a port",
|
||||
"enable_preview_deploy_mr_pr_requests": "Enable preview deployments from pull or merge requests.",
|
||||
"debug_logs": "Debug Logs",
|
||||
"enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-red-500 font-bold'>Sensitive information</span> could be visible and saved in logs.",
|
||||
"enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-settings font-bold'>Sensitive information</span> could be visible and saved in logs.",
|
||||
"cant_activate_auto_deploy_without_repo": "Cannot activate automatic deployments until only one application is defined for this repository / branch.",
|
||||
"no_applications_found": "No applications found",
|
||||
"secret__batch_dot_env": "Paste .env file",
|
||||
@@ -227,17 +227,17 @@
|
||||
"select_database_type": "Select a Database type",
|
||||
"select_database_version": "Select a Database version",
|
||||
"confirm_stop": "Are you sure you would like to stop {{name}}?",
|
||||
"stop_database": "Stop database",
|
||||
"stop_database": "Stop",
|
||||
"permission_denied_stop_database": "You do not have permission to stop the database.",
|
||||
"start_database": "Start database",
|
||||
"start_database": "Start",
|
||||
"permission_denied_start_database": "You do not have permission to start the database.",
|
||||
"delete_database": "Delete Database",
|
||||
"delete_database": "Delete",
|
||||
"permission_denied_delete_database": "You do not have permission to delete a Database",
|
||||
"no_databases_found": "No databases found",
|
||||
"logs": "Database Logs"
|
||||
"logs": "Logs"
|
||||
},
|
||||
"destination": {
|
||||
"delete_destination": "Delete Destination",
|
||||
"delete_destination": "Delete",
|
||||
"permission_denied_delete_destination": "You do not have permission to delete this destination",
|
||||
"add_to_coolify": "Add to Coolify",
|
||||
"coolify_proxy_stopped": "Coolify Proxy stopped!",
|
||||
@@ -267,7 +267,7 @@
|
||||
"official_providers": "Official providers"
|
||||
},
|
||||
"no_git_sources_found": "No git sources found",
|
||||
"delete_git_source": "Delete Git Source",
|
||||
"delete_git_source": "Delete",
|
||||
"permission_denied": "You do not have permission to delete a Git Source",
|
||||
"create_new_app": "Create new {{name}} App",
|
||||
"change_app_settings": "Change {{name}} App Settings",
|
||||
@@ -275,7 +275,7 @@
|
||||
"application_id": "Application ID",
|
||||
"group_name": "Group Name",
|
||||
"oauth_id": "OAuth ID",
|
||||
"oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-orange-600' >in the URL</span> of your GitLab OAuth Application.",
|
||||
"oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-settings' >in the URL</span> of your GitLab OAuth Application.",
|
||||
"register_oauth_gitlab": "Register new OAuth application on GitLab",
|
||||
"gitlab": {
|
||||
"self_hosted": "Instance-wide application (self-hosted)",
|
||||
@@ -293,20 +293,20 @@
|
||||
"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-pink-600'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted."
|
||||
},
|
||||
"service": {
|
||||
"stop_service": "Stop Service",
|
||||
"stop_service": "Stop",
|
||||
"permission_denied_stop_service": "You do not have permission to stop the service.",
|
||||
"start_service": "Start Service",
|
||||
"start_service": "Start",
|
||||
"permission_denied_start_service": "You do not have permission to start the service.",
|
||||
"delete_service": "Delete Service",
|
||||
"delete_service": "Delete",
|
||||
"permission_denied_delete_service": "You do not have permission to delete a service.",
|
||||
"no_service": "No services found",
|
||||
"logs": "Service Logs"
|
||||
"logs": "Logs"
|
||||
},
|
||||
"setting": {
|
||||
"change_language": "Change Language",
|
||||
"permission_denied": "You do not have permission to do this. \\nAsk an admin to modify your permissions.",
|
||||
"domain_removed": "Domain removed",
|
||||
"ssl_explainer": "If you specify <span class='text-yellow-500 font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-yellow-500 font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-yellow-500 font-bold'>WARNING:</span> If you change an already set domain, it will brake webhooks and other integrations! You need to manually update them.",
|
||||
"ssl_explainer": "If you specify <span class='text-settings font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings font-bold'>WARNING:</span> If you change an already set domain, it will break webhooks and other integrations! You need to manually update them.",
|
||||
"must_remove_domain_before_changing": "Must remove the domain before you can change this setting.",
|
||||
"registration_allowed": "Registration allowed?",
|
||||
"registration_allowed_explainer": "Allow further registrations to the application. <br>It's turned off after the first registration.",
|
||||
@@ -314,7 +314,7 @@
|
||||
"credential_stat_explainer": "Credentials for <a class=\"text-white font-bold\" href=\"{{link}}\" target=\"_blank\">stats</a> page.",
|
||||
"auto_update_enabled": "Auto update enabled?",
|
||||
"auto_update_enabled_explainer": "Enable automatic updates for Coolify. It will be done automatically behind the scenes, if there is no build process running.",
|
||||
"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-yellow-500'>both DNS entries</span> set in advance.",
|
||||
"generate_www_non_www_ssl": "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.",
|
||||
"is_dns_check_enabled": "DNS check enabled?",
|
||||
"is_dns_check_enabled_explainer": "You can disable DNS check before creating SSL certificates.<br><br>Turning it off is useful when Coolify is behind a reverse proxy or tunnel."
|
||||
},
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
"delete_application": "Supprimer l'application",
|
||||
"deployment_queued": "Déploiement en file d'attente.",
|
||||
"destination": "Destination",
|
||||
"directory_to_use_explainer": "Répertoire à utiliser comme base pour toutes les commandes.<br>Pourrait être utile avec <span class='text-green-500 font-bold'>monorepos</span>.",
|
||||
"directory_to_use_explainer": "Répertoire à utiliser comme base pour toutes les commandes.<br>Pourrait être utile avec <span class='text-applications font-bold'>monorepos</span>.",
|
||||
"dns_not_set_error": "DNS non défini ou propagé pour {{domain}}.<br><br>Veuillez vérifier vos paramètres DNS.",
|
||||
"dns_not_set_partial_error": "DNS non défini",
|
||||
"domain_already_in_use": "Le domaine {{domain}} est déjà utilisé.",
|
||||
@@ -181,7 +181,7 @@
|
||||
"path": "Chemin",
|
||||
"port": "Port",
|
||||
"public_port_range": "Gamme de ports publics",
|
||||
"public_port_range_explainer": "Ports utilisés pour exposer les bases de données/services/services internes.<br> Ajoutez-les à votre pare-feu (le cas échéant).<br><br>Vous pouvez spécifier une plage de ports, par exemple : <span class='text-yellow-500 \nfont-bold'>9000-9100</span>",
|
||||
"public_port_range_explainer": "Ports utilisés pour exposer les bases de données/services/services internes.<br> Ajoutez-les à votre pare-feu (le cas échéant).<br><br>Vous pouvez spécifier une plage de ports, par exemple : <span class='text-settings \nfont-bold'>9000-9100</span>",
|
||||
"publish_directory": "Publier le répertoire",
|
||||
"remove": "Retirer",
|
||||
"remove_domain": "Supprimer le domaine",
|
||||
@@ -266,7 +266,7 @@
|
||||
"permission_denied": "Vous n'avez pas la permission de faire cela. \n\\nDemandez à un administrateur de modifier vos autorisations.",
|
||||
"registration_allowed": "Inscription autorisée ?",
|
||||
"registration_allowed_explainer": "Autoriser d'autres inscriptions à l'application. \n<br>Il est désactivé après la première inscription.",
|
||||
"ssl_explainer": "Si vous spécifiez <span class='text-yellow-500 font-bold'>https</span>, Coolify sera accessible uniquement via https. \nUn certificat SSL sera généré pour vous.<br>Si vous spécifiez <span class='text-yellow-500 font-bold'>www</span>, Coolify sera redirigé (302) à partir de non-www et vice versa."
|
||||
"ssl_explainer": "Si vous spécifiez <span class='text-settings font-bold'>https</span>, Coolify sera accessible uniquement via https. \nUn certificat SSL sera généré pour vous.<br>Si vous spécifiez <span class='text-settings font-bold'>www</span>, Coolify sera redirigé (302) à partir de non-www et vice versa."
|
||||
},
|
||||
"source": {
|
||||
"application_id": "ID d'application",
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { writable, readable, type Writable, type Readable } from 'svelte/store';
|
||||
import { dev } from '$app/env';
|
||||
import cuid from 'cuid';
|
||||
import { writable, readable, type Writable } from 'svelte/store';
|
||||
|
||||
interface AppSession {
|
||||
registrationEnabled: boolean;
|
||||
ipv4: string | null,
|
||||
ipv6: string | null,
|
||||
version: string | null,
|
||||
@@ -15,7 +18,13 @@ interface AppSession {
|
||||
tokens: {
|
||||
github: string | null,
|
||||
gitlab: string | null,
|
||||
}
|
||||
},
|
||||
supportedServiceTypesAndVersions: Array<any>
|
||||
}
|
||||
interface AddToast {
|
||||
type?: "info" | "success" | "error",
|
||||
message: string,
|
||||
timeout?: number | undefined
|
||||
}
|
||||
export const loginEmail: Writable<string | undefined> = writable()
|
||||
export const appSession: Writable<AppSession> = writable({
|
||||
@@ -33,9 +42,30 @@ export const appSession: Writable<AppSession> = writable({
|
||||
tokens: {
|
||||
github: null,
|
||||
gitlab: null
|
||||
}
|
||||
},
|
||||
supportedServiceTypesAndVersions: []
|
||||
});
|
||||
export const disabledButton: Writable<boolean> = writable(false);
|
||||
export const isDeploymentEnabled: Writable<boolean> = writable(false);
|
||||
export function checkIfDeploymentEnabledApplications(isAdmin: boolean, application: any) {
|
||||
return (
|
||||
isAdmin &&
|
||||
(application.fqdn || application.settings.isBot) &&
|
||||
application.gitSource &&
|
||||
application.repository &&
|
||||
application.destinationDocker &&
|
||||
application.buildPack
|
||||
);
|
||||
}
|
||||
export function checkIfDeploymentEnabledServices(isAdmin: boolean, service: any) {
|
||||
return (
|
||||
isAdmin &&
|
||||
service.fqdn &&
|
||||
service.destinationDocker &&
|
||||
service.version &&
|
||||
service.type
|
||||
);
|
||||
}
|
||||
export const status: Writable<any> = writable({
|
||||
application: {
|
||||
isRunning: false,
|
||||
@@ -64,14 +94,61 @@ export const features = readable({
|
||||
});
|
||||
|
||||
export const location: Writable<null | string> = writable(null)
|
||||
export const setLocation = (resource: any) => {
|
||||
export const setLocation = (resource: any, settings?: any) => {
|
||||
if (resource.settings.isBot && resource.exposePort) {
|
||||
disabledButton.set(false);
|
||||
return location.set(`http://${dev ? 'localhost' : settings.ipv4}:${resource.exposePort}`)
|
||||
}
|
||||
if (GITPOD_WORKSPACE_URL && resource.exposePort) {
|
||||
const { href } = new URL(GITPOD_WORKSPACE_URL);
|
||||
const newURL = href
|
||||
.replace('https://', `https://${resource.exposePort}-`)
|
||||
.replace(/\/$/, '');
|
||||
location.set(newURL)
|
||||
} else {
|
||||
location.set(resource.fqdn)
|
||||
return location.set(newURL)
|
||||
} else if (CODESANDBOX_HOST) {
|
||||
const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/, resource.exposePort)}`
|
||||
return location.set(newURL)
|
||||
}
|
||||
if (resource.fqdn) {
|
||||
return location.set(resource.fqdn)
|
||||
} else {
|
||||
location.set(null);
|
||||
disabledButton.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
export const toasts: any = writable([])
|
||||
|
||||
export const dismissToast = (id: string) => {
|
||||
toasts.update((all: any) => all.filter((t: any) => t.id !== id))
|
||||
}
|
||||
export const pauseToast = (id: string) => {
|
||||
toasts.update((all: any) => {
|
||||
const index = all.findIndex((t: any) => t.id === id);
|
||||
if (index > -1) clearTimeout(all[index].timeoutInterval);
|
||||
return all;
|
||||
})
|
||||
}
|
||||
export const resumeToast = (id: string) => {
|
||||
toasts.update((all: any) => {
|
||||
const index = all.findIndex((t: any) => t.id === id);
|
||||
if (index > -1) {
|
||||
all[index].timeoutInterval = setTimeout(() => {
|
||||
dismissToast(id)
|
||||
}, all[index].timeout)
|
||||
}
|
||||
return all;
|
||||
})
|
||||
}
|
||||
|
||||
export const addToast = (toast: AddToast) => {
|
||||
const id = cuid();
|
||||
const defaults = {
|
||||
id,
|
||||
type: 'info',
|
||||
timeout: 2000,
|
||||
}
|
||||
let t: any = { ...defaults, ...toast }
|
||||
if (t.timeout) t.timeoutInterval = setTimeout(() => dismissToast(id), t.timeout)
|
||||
toasts.update((all: any) => [t, ...all])
|
||||
}
|
||||
@@ -170,6 +170,16 @@ export function findBuildPack(pack: string, packageManager = 'npm') {
|
||||
port: 80
|
||||
};
|
||||
}
|
||||
if (pack === 'heroku') {
|
||||
return {
|
||||
...metaData,
|
||||
installCommand: null,
|
||||
buildCommand: null,
|
||||
startCommand: null,
|
||||
publishDirectory: null,
|
||||
port: 5000
|
||||
};
|
||||
}
|
||||
return {
|
||||
name: 'node',
|
||||
fancyName: 'Node.js',
|
||||
@@ -187,112 +197,137 @@ export const buildPacks = [
|
||||
name: 'node',
|
||||
fancyName: 'Node.js',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700'
|
||||
color: 'bg-green-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'static',
|
||||
fancyName: 'Static',
|
||||
hoverColor: 'hover:bg-orange-700',
|
||||
color: 'bg-orange-700'
|
||||
color: 'bg-orange-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'php',
|
||||
fancyName: 'PHP',
|
||||
hoverColor: 'hover:bg-indigo-700',
|
||||
color: 'bg-indigo-700'
|
||||
color: 'bg-indigo-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'laravel',
|
||||
fancyName: 'Laravel',
|
||||
hoverColor: 'hover:bg-indigo-700',
|
||||
color: 'bg-indigo-700'
|
||||
color: 'bg-indigo-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'docker',
|
||||
fancyName: 'Docker',
|
||||
hoverColor: 'hover:bg-sky-700',
|
||||
color: 'bg-sky-700'
|
||||
color: 'bg-sky-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'svelte',
|
||||
fancyName: 'Svelte',
|
||||
hoverColor: 'hover:bg-orange-700',
|
||||
color: 'bg-orange-700'
|
||||
color: 'bg-orange-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'vuejs',
|
||||
fancyName: 'VueJS',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700'
|
||||
color: 'bg-green-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'nuxtjs',
|
||||
fancyName: 'NuxtJS',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700'
|
||||
color: 'bg-green-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'gatsby',
|
||||
fancyName: 'Gatsby',
|
||||
hoverColor: 'hover:bg-blue-700',
|
||||
color: 'bg-blue-700'
|
||||
color: 'bg-blue-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'astro',
|
||||
fancyName: 'Astro',
|
||||
hoverColor: 'hover:bg-pink-700',
|
||||
color: 'bg-pink-700'
|
||||
color: 'bg-pink-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'eleventy',
|
||||
fancyName: 'Eleventy',
|
||||
hoverColor: 'hover:bg-red-700',
|
||||
color: 'bg-red-700'
|
||||
color: 'bg-red-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'react',
|
||||
fancyName: 'React',
|
||||
hoverColor: 'hover:bg-blue-700',
|
||||
color: 'bg-blue-700'
|
||||
color: 'bg-blue-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'preact',
|
||||
fancyName: 'Preact',
|
||||
hoverColor: 'hover:bg-blue-700',
|
||||
color: 'bg-blue-700'
|
||||
color: 'bg-blue-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'nextjs',
|
||||
fancyName: 'NextJS',
|
||||
hoverColor: 'hover:bg-blue-700',
|
||||
color: 'bg-blue-700'
|
||||
color: 'bg-blue-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'nestjs',
|
||||
fancyName: 'NestJS',
|
||||
hoverColor: 'hover:bg-red-700',
|
||||
color: 'bg-red-700'
|
||||
color: 'bg-red-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'rust',
|
||||
fancyName: 'Rust',
|
||||
hoverColor: 'hover:bg-pink-700',
|
||||
color: 'bg-pink-700'
|
||||
color: 'bg-pink-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'python',
|
||||
fancyName: 'Python',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700'
|
||||
color: 'bg-green-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'deno',
|
||||
fancyName: 'Deno',
|
||||
hoverColor: 'hover:bg-green-700',
|
||||
color: 'bg-green-700'
|
||||
}
|
||||
color: 'bg-green-700',
|
||||
isCoolifyBuildPack: true,
|
||||
},
|
||||
{
|
||||
name: 'heroku',
|
||||
fancyName: 'Heroku',
|
||||
hoverColor: 'hover:bg-purple-700',
|
||||
color: 'bg-purple-700',
|
||||
isHerokuBuildPack: true,
|
||||
}
|
||||
];
|
||||
export const scanningTemplates = {
|
||||
'@sveltejs/kit': {
|
||||
|
||||
@@ -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>'
|
||||
: ''
|
||||
|
||||