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

Add Locale URL

Browse Source
This commit is contained in:
Restray
2022-04-02 16:15:00 +02:00
parent 741db1778b
commit d910b21185
187 changed files with 683 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/routes/new/destination/_LocalDocker.svelte
View File

@@ -1,68 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
export let payload;
import { post } from '$lib/api';
import Setting from '$lib/components/Setting.svelte';
import { errorNotification } from '$lib/form';
let loading = false;
async function handleSubmit() {
try {
await post('/new/destination/check.json', { network: payload.network });
const { id } = await post('/new/destination/docker.json', {
...payload
});
return await goto(`/destinations/${id}`);
} catch ({ error }) {
return errorNotification(error);
}
}
</script>
<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">Configuration</div>
<button
type="submit"
class:bg-sky-600={!loading}
class:hover:bg-sky-500={!loading}
disabled={loading}
>{loading
? payload.isCoolifyProxyUsed
? 'Saving and configuring proxy...'
: 'Saving...'
: 'Save'}</button
>
</div>
<div class="mt-2 grid grid-cols-2 items-center px-10">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input required name="name" placeholder="name" bind:value={payload.name} />
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="engine" class="text-base font-bold text-stone-100">Engine</label>
<input
required
name="engine"
placeholder="eg: /var/run/docker.sock"
bind:value={payload.engine}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="network" class="text-base font-bold text-stone-100">Network</label>
<input required name="network" placeholder="default: coolify" bind:value={payload.network} />
</div>
<div class="grid grid-cols-2 items-center">
<Setting
bind:setting={payload.isCoolifyProxyUsed}
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
title="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 (recommended for Docker).<br><br>Databases will have their own proxy."
/>
</div>
</form>
</div>

90
src/routes/new/destination/_RemoteDocker.svelte
View File

@@ -1,90 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
export let payload;
import { post } from '$lib/api';
import Explainer from '$lib/components/Explainer.svelte';
import Setting from '$lib/components/Setting.svelte';
import { errorNotification } from '$lib/form';
let loading = false;
async function handleSubmit() {
try {
const { id } = await post('/new/destination/docker.json', {
...payload
});
return await goto(`/destinations/${id}`);
} catch ({ error }) {
return errorNotification(error);
}
}
</script>
<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">Configuration</div>
<button
type="submit"
class:bg-sky-600={!loading}
class:hover:bg-sky-500={!loading}
disabled={loading}
>{loading
? payload.isCoolifyProxyUsed
? 'Saving and configuring proxy...'
: 'Saving...'
: 'Save'}</button
>
</div>
<div class="mt-2 grid grid-cols-2 items-center px-10">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input required name="name" placeholder="name" bind:value={payload.name} />
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="ipAddress" class="text-base font-bold text-stone-100">IP Address</label>
<input
required
name="ipAddress"
placeholder="eg: 192.168..."
bind:value={payload.ipAddress}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="user" class="text-base font-bold text-stone-100">User</label>
<input required name="user" placeholder="eg: root" bind:value={payload.user} />
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="port" class="text-base font-bold text-stone-100">Port</label>
<input required name="port" placeholder="eg: 22" bind:value={payload.port} />
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="sshPrivateKey" class="text-base font-bold text-stone-100">SSH Private Key</label>
<textarea
rows="10"
class="resize-none"
required
name="sshPrivateKey"
placeholder="eg: -----BEGIN...."
bind:value={payload.sshPrivateKey}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="network" class="text-base font-bold text-stone-100">Network</label>
<input required name="network" placeholder="default: coolify" bind:value={payload.network} />
</div>
<div class="grid grid-cols-2 items-center">
<Setting
bind:setting={payload.isCoolifyProxyUsed}
on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
title="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 (recommended for Docker).<br><br>Databases will have their own proxy."
/>
</div>
</form>
</div>

23
src/routes/new/destination/check.json.ts
View File

@@ -1,23 +0,0 @@
import { getUserDetails } from '$lib/common';
import { isDockerNetworkExists, ErrorHandler } from '$lib/database';
import type { RequestHandler } from '@sveltejs/kit';
export const post: RequestHandler = async (event) => {
const { teamId, status, body } = await getUserDetails(event);
if (status === 401) return { status, body };
const { network } = await event.request.json();
try {
const found = await isDockerNetworkExists({ network });
if (found) {
throw {
error: `Network ${network} already configured for another team!`
};
}
return {
status: 200
};
} catch (error) {
return ErrorHandler(error);
}
};

45
src/routes/new/destination/docker.json.ts
View File

@@ -1,45 +0,0 @@
import { asyncExecShell, getUserDetails } from '$lib/common';
import * as db from '$lib/database';
import { ErrorHandler } from '$lib/database';
import { dockerInstance } from '$lib/docker';
import type { RequestHandler } from '@sveltejs/kit';
export const post: RequestHandler = async (event) => {
const { teamId, status, body } = await getUserDetails(event);
if (status === 401) return { status, body };
const {
name,
engine,
network,
isCoolifyProxyUsed,
remoteEngine,
ipAddress,
user,
port,
sshPrivateKey
} = await event.request.json();
try {
let id = null;
if (remoteEngine) {
id = await db.newRemoteDestination({
name,
teamId,
engine,
network,
isCoolifyProxyUsed,
remoteEngine,
ipAddress,
user,
port,
sshPrivateKey
});
} else {
id = await db.newLocalDestination({ name, teamId, engine, network, isCoolifyProxyUsed });
}
return { status: 200, body: { id } };
} catch (error) {
return ErrorHandler(error);
}
};

55
src/routes/new/destination/index.svelte
View File

@@ -1,55 +0,0 @@
<script>
import LocalDocker from './_LocalDocker.svelte';
import cuid from 'cuid';
import RemoteDocker from './_RemoteDocker.svelte';
let payload = {};
let selected = 'localDocker';
function setPredefined(type) {
selected = type;
switch (type) {
case 'localDocker':
payload = {
name: 'Local Docker',
engine: '/var/run/docker.sock',
remoteEngine: false,
network: cuid(),
isCoolifyProxyUsed: true
};
break;
case 'remoteDocker':
payload = {
name: 'Remote Docker',
remoteEngine: true,
ipAddress: null,
user: 'root',
port: 22,
sshPrivateKey: null,
network: cuid(),
isCoolifyProxyUsed: true
};
break;
default:
break;
}
}
</script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">Add New Destination</div>
</div>
<div class="flex-col space-y-2 pb-10 text-center">
<div class="text-xl font-bold text-white">Predefined destinations</div>
<div class="flex justify-center space-x-2">
<button class="w-32" on:click={() => setPredefined('localDocker')}>Local Docker</button>
<!-- <button class="w-32" on:click={() => setPredefined('remoteDocker')}>Remote Docker</button> -->
<button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button>
</div>
</div>
{#if selected === 'localDocker'}
<LocalDocker {payload} />
{:else if selected === 'remoteDocker'}
<RemoteDocker {payload} />
{:else}
<div class="text-center font-bold text-4xl py-10">Not implemented yet</div>
{/if}

96
src/routes/new/source/_Github.svelte
View File

@@ -1,96 +0,0 @@
<script lang="ts">
export let gitSource;
import { goto } from '$app/navigation';
import { post } from '$lib/api';
import Explainer from '$lib/components/Explainer.svelte';
import { errorNotification } from '$lib/form';
import { onMount } from 'svelte';
let nameEl;
let organizationEl;
onMount(() => {
nameEl.focus();
});
async function handleSubmit() {
try {
const { id } = await post(`/new/source.json`, { ...gitSource });
return await goto(`/sources/${id}/`);
} catch ({ error }) {
return errorNotification(error);
}
}
</script>
<div class="mx-auto max-w-4xl px-6">
<div class="flex justify-center pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="type" class="text-base font-bold text-stone-100">Type</label>
<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
<option value="github">GitHub</option>
<option value="gitlab">GitLab</option>
<option value="bitbucket">BitBucket</option>
</select>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input
name="name"
id="name"
placeholder="GitHub.com"
required
bind:this={nameEl}
bind:value={gitSource.name}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input
type="url"
name="htmlUrl"
id="htmlUrl"
placeholder="eg: https://github.com"
required
bind:value={gitSource.htmlUrl}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input
name="apiUrl"
type="url"
id="apiUrl"
placeholder="eg: https://api.github.com"
required
bind:value={gitSource.apiUrl}
/>
</div>
<div class="grid grid-cols-2 px-10">
<div class="flex flex-col">
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization</label
>
<Explainer
text="Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."
/>
</div>
<input
name="organization"
id="organization"
placeholder="eg: coollabsio"
bind:value={gitSource.organization}
bind:this={organizationEl}
/>
</div>
</form>
</div>
</div>

73
src/routes/new/source/_Gitlab.svelte
View File

@@ -1,73 +0,0 @@
<script lang="ts">
export let gitSource;
import { goto } from '$app/navigation';
import { post } from '$lib/api';
import { errorNotification } from '$lib/form';
import { onMount } from 'svelte';
let nameEl;
onMount(() => {
nameEl.focus();
});
async function handleSubmit() {
try {
const { id } = await post(`/new/source.json`, { ...gitSource });
return await goto(`/sources/${id}/`);
} catch ({ error }) {
return errorNotification(error);
}
}
</script>
<div class="flex justify-center pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="type" class="text-base font-bold text-stone-100">Type</label>
<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
<option value="github">GitHub</option>
<option value="gitlab">GitLab</option>
<option value="bitbucket">BitBucket</option>
</select>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input
name="name"
id="name"
placeholder="GitHub.com"
required
bind:this={nameEl}
bind:value={gitSource.name}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input
type="url"
name="htmlUrl"
id="htmlUrl"
placeholder="eg: https://github.com"
required
bind:value={gitSource.htmlUrl}
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input
name="apiUrl"
type="url"
id="apiUrl"
placeholder="eg: https://api.github.com"
required
bind:value={gitSource.apiUrl}
/>
</div>
</form>
</div>

17
src/routes/new/source/index.json.ts
View File

@@ -1,17 +0,0 @@
import { getUserDetails } from '$lib/common';
import * as db from '$lib/database';
import { ErrorHandler } from '$lib/database';
import type { RequestHandler } from '@sveltejs/kit';
export const post: RequestHandler = async (event) => {
const { teamId, status, body } = await getUserDetails(event);
if (status === 401) return { status, body };
const { name, type, htmlUrl, apiUrl, organization } = await event.request.json();
try {
const { id } = await db.newSource({ name, teamId, type, htmlUrl, apiUrl, organization });
return { status: 201, body: { id } };
} catch (e) {
return ErrorHandler(e);
}
};

66
src/routes/new/source/index.svelte
View File

@@ -1,66 +0,0 @@
<script lang="ts">
import Github from './_Github.svelte';
import Gitlab from './_Gitlab.svelte';
let gitSource = {
name: undefined,
type: 'github',
htmlUrl: undefined,
apiUrl: undefined,
organization: undefined
};
function setPredefined(type) {
switch (type) {
case 'github':
gitSource = {
name: 'GitHub.com',
type,
htmlUrl: 'https://github.com',
apiUrl: 'https://api.github.com',
organization: undefined
};
break;
case 'gitlab':
gitSource = {
name: 'GitLab.com',
type,
htmlUrl: 'https://gitlab.com',
apiUrl: 'https://gitlab.com/api',
organization: undefined
};
break;
case 'bitbucket':
gitSource = {
name: 'BitBucket.com',
type,
htmlUrl: 'https://bitbucket.com',
apiUrl: 'https://bitbucket.com',
organization: undefined
};
break;
default:
break;
}
}
</script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">Add New Git Source</div>
</div>
<div class="flex-col space-y-2 pb-10 text-center">
<div class="text-xl font-bold text-white">Official providers</div>
<div class="flex justify-center space-x-2">
<button class="w-32" on:click={() => setPredefined('github')}>GitHub.com</button>
<button class="w-32" on:click={() => setPredefined('gitlab')}>GitLab.com</button>
<button class="w-32" on:click={() => setPredefined('bitbucket')}>Bitbucket.com</button>
</div>
</div>
<div class="px-6">
{#if gitSource.type === 'github'}
<Github {gitSource} />
{:else if gitSource.type === 'gitlab'}
<Gitlab {gitSource} />
{:else if gitSource.type === 'bitbucket'}
<div class="text-center font-bold text-4xl py-10">Not implemented yet</div>
{/if}
</div>

18
src/routes/new/team/index.json.ts
View File

@@ -1,18 +0,0 @@
import { getUserDetails, uniqueName } from '$lib/common';
import * as db from '$lib/database';
import { ErrorHandler } from '$lib/database';
import type { RequestHandler } from '@sveltejs/kit';
export const post: RequestHandler = async (event) => {
const { userId, status, body } = await getUserDetails(event);
if (status === 401) return { status, body };
const { name } = await event.request.json();
try {
const { id } = await db.newTeam({ name, userId });
return { status: 201, body: { id } };
} catch (error) {
return ErrorHandler(error);
}
};

56
src/routes/new/team/index.svelte
View File

@@ -1,56 +0,0 @@
<script context="module" lang="ts">
import type { Load } from '@sveltejs/kit';
export const load: Load = async ({ fetch, session }) => {
const url = `/common/getUniqueName.json`;
const res = await fetch(url);
if (res.ok) {
return {
props: {
...(await res.json())
}
};
}
return {
status: res.status,
error: new Error(`Could not load ${url}`)
};
};
</script>
<script lang="ts">
export let name;
import { errorNotification } from '$lib/form';
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { post } from '$lib/api';
let autofocus;
onMount(() => {
autofocus.focus();
});
async function handleSubmit() {
if (name) {
try {
const { id } = await post('/new/team.json', { name });
return await goto(`/teams/${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">Add New Team</div>
</div>
<div class="pt-10">
<form on:submit|preventDefault={handleSubmit}>
<div class="flex flex-col items-center space-y-4">
<input name="name" placeholder="Team name" required bind:this={autofocus} bind:value={name} />
<button type="submit" class="bg-green-600 hover:bg-green-500">Save</button>
</div>
</form>
</div>