mirror of
https://github.com/ershisan99/coolify.git
synced 2025-12-29 20:59:24 +00:00
v1.0.12 - Sveltekit migration (#44)
Changed the whole tech stack to SvelteKit which means: - Typescript - SSR - No fastify :( - Beta, but it's fine! Other changes: - Tailwind -> Tailwind JIT - A lot more
This commit is contained in:
Andras Bacsai
@@ -0,0 +1,6 @@
|
||||
<script>
|
||||
import Configuration from '$components/Application/Configuration.svelte';
|
||||
|
||||
</script>
|
||||
|
||||
<Configuration />
|
||||
@@ -0,0 +1,83 @@
|
||||
<script>
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import Loading from '$components/Loading.svelte';
|
||||
import { request } from '$lib/api/request';
|
||||
import { page, session } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { browser } from '$app/env';
|
||||
import { application } from '$store';
|
||||
|
||||
let loadLogsInterval;
|
||||
let logs = [];
|
||||
|
||||
onMount(() => {
|
||||
loadLogsInterval = setInterval(() => {
|
||||
loadLogs();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
async function loadLogs() {
|
||||
try {
|
||||
const { events, progress } = await request(
|
||||
`/api/v1/application/deploy/logs/${$page.params.deployId}`,
|
||||
$session
|
||||
);
|
||||
logs = [...events];
|
||||
if (progress === 'done' || progress === 'failed') {
|
||||
clearInterval(loadLogsInterval);
|
||||
}
|
||||
} catch (error) {
|
||||
browser && goto('/dashboard/applications', { replaceState: true });
|
||||
}
|
||||
}
|
||||
onDestroy(() => {
|
||||
clearInterval(loadLogsInterval);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
|
||||
in:fade={{ duration: 100 }}
|
||||
>
|
||||
<div>Deployment log</div>
|
||||
<a
|
||||
target="_blank"
|
||||
class="icon mx-2"
|
||||
href={'https://' + $application.publish.domain + $application.publish.path}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg></a
|
||||
>
|
||||
</div>
|
||||
{#await loadLogs()}
|
||||
<Loading />
|
||||
{:then}
|
||||
<div class="text-center px-6" in:fade={{ duration: 100 }}>
|
||||
<div in:fade={{ duration: 100 }}>
|
||||
<pre
|
||||
class="leading-4 text-left text-sm font-semibold tracking-tighter rounded-lg bg-black p-6 whitespace-pre-wrap">
|
||||
{#if logs.length > 0}
|
||||
{#each logs as log}
|
||||
{log + '\n'}
|
||||
{/each}
|
||||
{:else}
|
||||
It's starting soon.
|
||||
{/if}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
@@ -0,0 +1,135 @@
|
||||
<script>
|
||||
import { application, dateOptions } from '$store';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
|
||||
import Loading from '$components/Loading.svelte';
|
||||
import { request } from '$lib/api/request';
|
||||
import { session } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let loadDeploymentsInterval = null;
|
||||
let loadLogsInterval = null;
|
||||
let deployments = [];
|
||||
let logs = [];
|
||||
let page = 1;
|
||||
|
||||
onMount(async () => {
|
||||
loadApplicationLogs();
|
||||
loadLogsInterval = setInterval(() => {
|
||||
loadApplicationLogs();
|
||||
}, 3000);
|
||||
loadDeploymentsInterval = setInterval(() => {
|
||||
loadDeploymentLogs();
|
||||
}, 1000);
|
||||
});
|
||||
onDestroy(() => {
|
||||
clearInterval(loadDeploymentsInterval);
|
||||
clearInterval(loadLogsInterval);
|
||||
});
|
||||
async function loadMoreDeploymentLogs() {
|
||||
page = page + 1;
|
||||
await loadDeploymentLogs();
|
||||
}
|
||||
async function loadDeploymentLogs() {
|
||||
deployments = (
|
||||
await request(
|
||||
`/api/v1/application/deploy/logs?repoId=${$application.repository.id}&branch=${$application.repository.branch}&page=${page}`,
|
||||
$session
|
||||
)
|
||||
).logs;
|
||||
}
|
||||
async function loadApplicationLogs() {
|
||||
logs = (
|
||||
await request(`/api/v1/application/logs?name=${$application.build.container.name}`, $session)
|
||||
).logs;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
|
||||
in:fade={{ duration: 100 }}
|
||||
>
|
||||
<div>Logs</div>
|
||||
</div>
|
||||
{#await loadDeploymentLogs()}
|
||||
<Loading />
|
||||
{:then}
|
||||
<div class="text-center px-6" in:fade={{ duration: 100 }}>
|
||||
<div class="flex pt-2 space-x-4 w-full">
|
||||
<div class="w-full">
|
||||
<div class="font-bold text-left pb-2 text-xl">Application logs</div>
|
||||
{#if logs.length === 0}
|
||||
<div class="text-xs font-semibold tracking-tighter">Waiting for the logs...</div>
|
||||
{:else}
|
||||
<pre
|
||||
class="leading-4 text-left text-sm font-semibold tracking-tighter rounded-lg bg-black p-6 whitespace-pre-wrap w-full">
|
||||
{#each logs as log}
|
||||
{log + '\n'}
|
||||
{/each}
|
||||
</pre>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold text-left pb-2 text-xl w-300">Deployment logs</div>
|
||||
{#if deployments.length > 0}
|
||||
<div class="space-y-2">
|
||||
{#each deployments as deployment}
|
||||
<div
|
||||
in:fade={{ duration: 100 }}
|
||||
class="flex space-x-4 text-md py-4 hover:shadow mx-auto cursor-pointer transition-all duration-100 border-l-4 border-transparent rounded hover:bg-warmGray-700"
|
||||
class:hover:border-green-500={deployment.progress === 'done'}
|
||||
class:border-yellow-300={deployment.progress !== 'done' &&
|
||||
deployment.progress !== 'failed'}
|
||||
class:bg-warmGray-800={deployment.progress !== 'done' &&
|
||||
deployment.progress !== 'failed'}
|
||||
class:hover:bg-red-200={deployment.progress === 'failed'}
|
||||
class:hover:border-red-500={deployment.progress === 'failed'}
|
||||
on:click={() => goto(`./logs/${deployment.deployId}`)}
|
||||
>
|
||||
<div class="font-bold text-sm px-3 flex justify-center items-center">
|
||||
{deployment.branch}
|
||||
</div>
|
||||
<div class="flex-1" />
|
||||
<div class="px-3 w-48">
|
||||
<div
|
||||
class="text-xs"
|
||||
title={new Intl.DateTimeFormat('default', dateOptions).format(
|
||||
new Date(deployment.createdAt)
|
||||
)}
|
||||
>
|
||||
{deployment.since}
|
||||
</div>
|
||||
{#if deployment.progress === 'done'}
|
||||
<div class="text-xs">
|
||||
Deployed in <span class="font-bold">{deployment.took}s</span>
|
||||
</div>
|
||||
{:else if deployment.progress === 'failed'}
|
||||
<div class="text-xs text-red-500">Failed</div>
|
||||
{:else}
|
||||
<div class="text-xs">Deploying...</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<button
|
||||
class="text-xs bg-green-600 hover:bg-green-500 p-1 rounded text-white px-2 font-medium my-6"
|
||||
on:click={loadMoreDeploymentLogs}>Show more</button
|
||||
>
|
||||
{:else}
|
||||
<div class="text-left text-sm tracking-tight">No deployments found</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:catch}
|
||||
<div class="text-center font-bold tracking-tight text-xl">No logs found</div>
|
||||
{/await}
|
||||
|
||||
<style lang="postcss">
|
||||
.w-300 {
|
||||
width: 300px !important;
|
||||
}
|
||||
</style>
|
||||
127
src/routes/application/__layout.svelte
Normal file
127
src/routes/application/__layout.svelte
Normal file
@@ -0,0 +1,127 @@
|
||||
<script>
|
||||
import { application, initialApplication, initConf, dashboard } from '$store';
|
||||
import { onDestroy } from 'svelte';
|
||||
import Loading from '$components/Loading.svelte';
|
||||
import Navbar from '$components/Application/Navbar.svelte';
|
||||
import { page, session } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { browser } from '$app/env';
|
||||
import { request } from '$lib/api/request';
|
||||
|
||||
$application.repository.organization = $page.params.organization;
|
||||
$application.repository.name = $page.params.name;
|
||||
$application.repository.branch = $page.params.branch;
|
||||
|
||||
async function setConfiguration() {
|
||||
try {
|
||||
const config = await request(`/api/v1/application/config`, $session, {
|
||||
body: {
|
||||
name: $application.repository.name,
|
||||
organization: $application.repository.organization,
|
||||
branch: $application.repository.branch
|
||||
}
|
||||
});
|
||||
$application = { ...config };
|
||||
$initConf = JSON.parse(JSON.stringify($application));
|
||||
} catch (error) {
|
||||
browser && goto('/dashboard/applications');
|
||||
}
|
||||
}
|
||||
async function loadConfiguration() {
|
||||
if ($page.path !== '/application/new') {
|
||||
if (!$dashboard) {
|
||||
await setConfiguration();
|
||||
} else {
|
||||
const found = $dashboard.applications.deployed.find((app) => {
|
||||
const { organization, name, branch } = app.configuration.repository;
|
||||
if (
|
||||
organization === $application.repository.organization &&
|
||||
name === $application.repository.name &&
|
||||
branch === $application.repository.branch
|
||||
) {
|
||||
return app;
|
||||
}
|
||||
});
|
||||
if (found) {
|
||||
$application = { ...found.configuration };
|
||||
$initConf = JSON.parse(JSON.stringify($application));
|
||||
} else {
|
||||
await setConfiguration();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$application = JSON.parse(JSON.stringify(initialApplication));
|
||||
}
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
$application = JSON.parse(JSON.stringify(initialApplication));
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
{#await loadConfiguration()}
|
||||
<Loading />
|
||||
{:then}
|
||||
<Navbar />
|
||||
<div class="text-white">
|
||||
{#if $page.path.endsWith('configuration')}
|
||||
<div class="min-h-full text-white">
|
||||
<div class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center">
|
||||
{$application.publish.domain
|
||||
? `${$application.publish.domain}${
|
||||
$application.publish.path !== '/' ? $application.publish.path : ''
|
||||
}`
|
||||
: 'example.com'}
|
||||
<a
|
||||
target="_blank"
|
||||
class="icon mx-2"
|
||||
href={'https://' + $application.publish.domain + $application.publish.path}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg></a
|
||||
>
|
||||
|
||||
<a
|
||||
target="_blank"
|
||||
class="icon"
|
||||
href={`https://github.com/${$application.repository.organization}/${$application.repository.name}`}
|
||||
>
|
||||
<svg
|
||||
class="w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path
|
||||
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
|
||||
/></svg
|
||||
></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{:else if $page.path === '/application/new'}
|
||||
<div class="min-h-full text-white">
|
||||
<div class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center">
|
||||
New Application
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
{/await}
|
||||
5
src/routes/application/new.svelte
Normal file
5
src/routes/application/new.svelte
Normal file
@@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import Configuration from '$components/Application/Configuration.svelte';
|
||||
</script>
|
||||
|
||||
<Configuration />
|
||||
Reference in New Issue
Block a user