This commit is contained in:
Andras Bacsai
2021-06-17 20:47:09 +02:00
committed by GitHub
parent dae91267e8
commit d43cd663d2
23 changed files with 1142 additions and 1742 deletions

View File

@@ -8,6 +8,8 @@
import Loading from '$components/Loading.svelte';
import Plausible from '$components/Service/Plausible.svelte';
import { browser } from '$app/env';
import CodeServer from '$components/Service/CodeServer.svelte';
import MinIo from '$components/Service/MinIO.svelte';
let service = {};
async function loadServiceConfig() {
if ($page.params.name) {
@@ -33,6 +35,10 @@
<div>Plausible Analytics</div>
{:else if $page.params.name === 'nocodb'}
<div>NocoDB</div>
{:else if $page.params.name === 'code-server'}
<div>VSCode Server</div>
{:else if $page.params.name === 'minio'}
<div>MinIO</div>
{/if}
<div class="px-4">
@@ -48,6 +54,28 @@
class="w-8 mx-auto"
src="https://cdn.coollabs.io/assets/coolify/services/nocodb/nocodb.png"
/>
{:else if $page.params.name === 'code-server'}
<svg class="w-8 mx-auto" viewBox="0 0 128 128">
<path
d="M3.656 45.043s-3.027-2.191.61-5.113l8.468-7.594s2.426-2.559 4.989-.328l78.175 59.328v28.45s-.039 4.468-5.757 3.976zm0 0"
fill="#2489ca"
/><path
d="M23.809 63.379L3.656 81.742s-2.07 1.543 0 4.305l9.356 8.527s2.222 2.395 5.508-.328l21.359-16.238zm0 0"
fill="#1070b3"
/><path
d="M59.184 63.531l36.953-28.285-.239-28.297S94.32.773 89.055 3.99L39.879 48.851zm0 0"
fill="#0877b9"
/><path
d="M90.14 123.797c2.145 2.203 4.747 1.48 4.747 1.48l28.797-14.222c3.687-2.52 3.171-5.645 3.171-5.645V20.465c0-3.735-3.812-5.024-3.812-5.024L98.082 3.38c-5.453-3.379-9.027.61-9.027.61s4.593-3.317 6.843 2.96v112.317c0 .773-.164 1.53-.492 2.214-.656 1.332-2.086 2.57-5.504 2.051zm0 0"
fill="#3c99d4"
/>
</svg>
{:else if $page.params.name === 'minio'}
<img
alt="minio logo"
class="w-7 mx-auto"
src="https://cdn.coollabs.io/assets/coolify/services/minio/MINIO_Bird.png"
/>
{/if}
</div>
<a target="_blank" class="icon mx-2" href={service.config.baseURL}>
@@ -74,6 +102,10 @@
<Plausible {service} />
{:else if $page.params.name === 'nocodb'}
<div class="font-bold">Nothing to show here. Enjoy using NocoDB!</div>
{:else if $page.params.name === 'code-server'}
<CodeServer {service} />
{:else if $page.params.name === 'minio'}
<MinIo {service} />
{/if}
</div>
</div>

View File

@@ -1,8 +1,6 @@
<script>
import { browser } from '$app/env';
import { goto } from '$app/navigation';
import { page, session } from '$app/stores';
import Loading from '$components/Loading.svelte';
import { request } from '$lib/request';

View File

@@ -21,6 +21,11 @@
$newService.userPassword === null ||
$newService.userPassword.length <= 6 ||
$newService.userPassword !== $newService.userPasswordAgain;
$: deployableNocoDB = $newService.baseURL === '' || $newService.baseURL === null;
$: deployableCodeServer = $newService.baseURL === '' || $newService.baseURL === null;
$: deployableMinIO = $newService.baseURL === '' || $newService.baseURL === null;
let loading = false;
async function deployPlausible() {
try {
@@ -45,7 +50,50 @@
}
}
async function deployNocodb() {
try {
loading = true;
await request(`/api/v1/services/deploy/${$page.params.type}`, $session, {
body: {
baseURL: $newService.baseURL
}
});
if (browser) {
toast.push(
'Service deployment queued.<br><br><br>It could take 2-5 minutes to be ready, be patient and grab a coffee/tea!',
{ duration: 4000 }
);
goto(`/dashboard/services`, { replaceState: true });
}
} catch (error) {
console.log(error);
browser && toast.push('Oops something went wrong. See console.log.');
} finally {
loading = false;
}
}
async function deployCodeServer() {
try {
loading = true;
await request(`/api/v1/services/deploy/${$page.params.type}`, $session, {
body: {
baseURL: $newService.baseURL
}
});
if (browser) {
toast.push(
'Service deployment queued.<br><br><br>It could take 2-5 minutes to be ready, be patient and grab a coffee/tea!',
{ duration: 4000 }
);
goto(`/dashboard/services`, { replaceState: true });
}
} catch (error) {
console.log(error);
browser && toast.push('Oops something went wrong. See console.log.');
} finally {
loading = false;
}
}
async function deployMinIO() {
try {
loading = true;
await request(`/api/v1/services/deploy/${$page.params.type}`, $session, {
@@ -77,6 +125,10 @@
<span class="text-blue-500 px-2 capitalize">Plausible Analytics</span>
{:else if $page.params.type === 'nocodb'}
<span class="text-blue-500 px-2 capitalize">NocoDB</span>
{:else if $page.params.type === 'code-server'}
<span class="text-blue-500 px-2 capitalize">VSCode Server</span>
{:else if $page.params.type === 'minio'}
<span class="text-blue-500 px-2 capitalize">MinIO</span>
{/if}
</div>
</div>
@@ -171,10 +223,79 @@
</div>
<button
disabled={deployableNocoDB}
class:cursor-not-allowed={deployableNocoDB}
class:bg-blue-500={!deployableNocoDB}
class:hover:bg-blue-400={!deployableNocoDB}
class:hover:bg-transparent={deployableNocoDB}
class:text-warmGray-700={deployableNocoDB}
class:text-white={!deployableNocoDB}
class="button p-2 w-64 bg-blue-500 hover:bg-blue-400 text-white"
on:click={deployNocodb}
>
Deploy
</button>
</div>
{:else if $page.params.type === 'code-server'}
<div class="space-y-2 max-w-xl mx-auto px-6 flex-col text-center" in:fade={{ duration: 100 }}>
<div class="grid grid-flow-row pb-5">
<label for="Domain"
>Domain <TooltipInfo
position="right"
label={`You could reach your Code Server instance here.`}
/></label
>
<input
id="Domain"
class:border-red-500={$newService.baseURL == null || $newService.baseURL == ''}
bind:value={$newService.baseURL}
placeholder="code.coollabs.io"
/>
</div>
<button
disabled={deployableCodeServer}
class:cursor-not-allowed={deployableCodeServer}
class:bg-blue-500={!deployableCodeServer}
class:hover:bg-blue-400={!deployableCodeServer}
class:hover:bg-transparent={deployableCodeServer}
class:text-warmGray-700={deployableCodeServer}
class:text-white={!deployableCodeServer}
class="button p-2 w-64 bg-blue-500 hover:bg-blue-400 text-white"
on:click={deployCodeServer}
>
Deploy
</button>
</div>
{:else if $page.params.type === 'minio'}
<div class="space-y-2 max-w-xl mx-auto px-6 flex-col text-center" in:fade={{ duration: 100 }}>
<div class="grid grid-flow-row pb-5">
<label for="Domain"
>Domain <TooltipInfo
position="right"
label={`You could reach your MinIO instance here.`}
/></label
>
<input
id="Domain"
class:border-red-500={$newService.baseURL == null || $newService.baseURL == ''}
bind:value={$newService.baseURL}
placeholder="minio.coollabs.io"
/>
</div>
<button
disabled={deployableMinIO}
class:cursor-not-allowed={deployableMinIO}
class:bg-blue-500={!deployableMinIO}
class:hover:bg-blue-400={!deployableMinIO}
class:hover:bg-transparent={deployableMinIO}
class:text-warmGray-700={deployableMinIO}
class:text-white={!deployableMinIO}
class="button p-2 w-64 bg-blue-500 hover:bg-blue-400 text-white"
on:click={deployMinIO}
>
Deploy
</button>
</div>
{/if}

View File

@@ -2,6 +2,7 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
</script>
<div class="min-h-full text-white">
@@ -13,7 +14,7 @@
{#if $page.path === '/service/new'}
<div class="flex justify-center space-x-4 font-bold pb-6">
<div
class="text-center flex-col items-center cursor-pointer ease-in-out transform hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-blue-500 p-2 rounded bg-warmGray-800 w-48"
class="text-center flex-col items-center cursor-pointer ease-in-out hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-blue-500 p-2 rounded bg-warmGray-800 w-48"
on:click={() => goto('/service/new/plausible')}
>
<img
@@ -24,7 +25,7 @@
<div class="text-white">Plausible Analytics</div>
</div>
<div
class="text-center flex-col items-center cursor-pointer ease-in-out transform hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-white p-2 rounded bg-warmGray-800 w-48"
class="text-center flex-col items-center cursor-pointer ease-in-out hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-white p-2 rounded bg-warmGray-800 w-48"
on:click={() => goto('/service/new/nocodb')}
>
<img
@@ -35,6 +36,40 @@
<div class="flex-1" />
<div class="text-white">NocoDB</div>
</div>
<div
class="text-center flex-col items-center cursor-pointer ease-in-out hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-green-500 p-2 rounded bg-warmGray-800 w-48"
on:click={() => goto('/service/new/code-server')}
>
<svg class="w-14 mx-auto pb-2" viewBox="0 0 128 128">
<path
d="M3.656 45.043s-3.027-2.191.61-5.113l8.468-7.594s2.426-2.559 4.989-.328l78.175 59.328v28.45s-.039 4.468-5.757 3.976zm0 0"
fill="#2489ca"
/><path
d="M23.809 63.379L3.656 81.742s-2.07 1.543 0 4.305l9.356 8.527s2.222 2.395 5.508-.328l21.359-16.238zm0 0"
fill="#1070b3"
/><path
d="M59.184 63.531l36.953-28.285-.239-28.297S94.32.773 89.055 3.99L39.879 48.851zm0 0"
fill="#0877b9"
/><path
d="M90.14 123.797c2.145 2.203 4.747 1.48 4.747 1.48l28.797-14.222c3.687-2.52 3.171-5.645 3.171-5.645V20.465c0-3.735-3.812-5.024-3.812-5.024L98.082 3.38c-5.453-3.379-9.027.61-9.027.61s4.593-3.317 6.843 2.96v112.317c0 .773-.164 1.53-.492 2.214-.656 1.332-2.086 2.57-5.504 2.051zm0 0"
fill="#3c99d4"
/>
</svg>
<div class="flex-1" />
<div class="text-white">VSCode Server</div>
</div>
<div
class="text-center flex-col items-center cursor-pointer ease-in-out hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-red-500 p-2 rounded bg-warmGray-800 w-48"
on:click={() => goto('/service/new/minio')}
>
<img
alt="minio logo"
class="w-7 mx-auto pb-2"
src="https://cdn.coollabs.io/assets/coolify/services/minio/MINIO_Bird.png"
/>
<div class="flex-1" />
<div class="text-white">MinIO</div>
</div>
</div>
{/if}
</div>