mirror of
https://github.com/ershisan99/coolify.git
synced 2026-01-29 20:52:10 +00:00
324 lines
9.6 KiB
Svelte
324 lines
9.6 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
|
|
export let data: PageData;
|
|
let application: any = data.application.data;
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
import { asyncSleep, errorNotification, getRndInteger } from '$lib/common';
|
|
import { onDestroy, onMount } from 'svelte';
|
|
import { addToast, appSession, trpc } from '$lib/store';
|
|
import Tooltip from '$lib/components/Tooltip.svelte';
|
|
import * as Icons from '$lib/components/icons';
|
|
|
|
const { id } = $page.params;
|
|
let loadBuildingStatusInterval: any = null;
|
|
let loading = {
|
|
init: true,
|
|
restart: false,
|
|
removing: false
|
|
};
|
|
let numberOfGetStatus = 0;
|
|
let status: any = {};
|
|
|
|
async function removeApplication(preview: any) {
|
|
try {
|
|
loading.removing = true;
|
|
await trpc.applications.stopPreview.mutate({
|
|
id,
|
|
pullmergeRequestId: preview.pullmergeRequestId
|
|
});
|
|
return window.location.reload();
|
|
} catch (error) {
|
|
return errorNotification(error);
|
|
}
|
|
}
|
|
async function redeploy(preview: any) {
|
|
try {
|
|
const { buildId } = await trpc.applications.deploy.mutate({
|
|
id,
|
|
pullmergeRequestId: preview.pullmergeRequestId,
|
|
branch: preview.sourceBranch
|
|
});
|
|
|
|
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 {
|
|
return await goto(`/applications/${id}/logs/build?buildId=${buildId}`, {
|
|
replaceState: true
|
|
});
|
|
}
|
|
} catch (error) {
|
|
return errorNotification(error);
|
|
}
|
|
}
|
|
async function loadPreviewsFromDocker() {
|
|
try {
|
|
const { data } = await trpc.applications.loadPreviews.mutate({ id });
|
|
application.previewApplication = data.previews;
|
|
addToast({
|
|
message: 'Previews loaded.',
|
|
type: 'success'
|
|
});
|
|
} catch (error) {
|
|
return errorNotification(error);
|
|
}
|
|
}
|
|
async function getStatus(resources: any) {
|
|
const { applicationId, pullmergeRequestId, id } = resources;
|
|
if (status[id]) return status[id];
|
|
while (numberOfGetStatus > 1) {
|
|
await asyncSleep(getRndInteger(100, 200));
|
|
}
|
|
try {
|
|
numberOfGetStatus++;
|
|
let isRunning = false;
|
|
let isBuilding = false;
|
|
const { data } = await trpc.applications.getPreviewStatus.query({
|
|
id: applicationId,
|
|
pullmergeRequestId
|
|
});
|
|
|
|
isRunning = data.isRunning;
|
|
isBuilding = data.isBuilding;
|
|
if (isBuilding) {
|
|
status[id] = 'building';
|
|
return 'building';
|
|
} else if (isRunning) {
|
|
status[id] = 'running';
|
|
return 'running';
|
|
} else {
|
|
status[id] = 'stopped';
|
|
return 'stopped';
|
|
}
|
|
} catch (error) {
|
|
status[id] = 'error';
|
|
return 'error';
|
|
} finally {
|
|
numberOfGetStatus--;
|
|
status = status;
|
|
}
|
|
}
|
|
async function restartPreview(preview: any) {
|
|
try {
|
|
loading.restart = true;
|
|
const { pullmergeRequestId } = preview;
|
|
await trpc.applications.restartPreview.mutate({ id, pullmergeRequestId });
|
|
addToast({
|
|
type: 'success',
|
|
message: 'Restart successful.'
|
|
});
|
|
} catch (error) {
|
|
return errorNotification(error);
|
|
} finally {
|
|
await getStatus(preview);
|
|
loading.restart = false;
|
|
}
|
|
}
|
|
onDestroy(() => {
|
|
clearInterval(loadBuildingStatusInterval);
|
|
});
|
|
onMount(async () => {
|
|
loadBuildingStatusInterval = setInterval(() => {
|
|
application.previewApplication.forEach(async (preview: any) => {
|
|
const { applicationId, pullmergeRequestId } = preview;
|
|
if (status[preview.id] === 'building') {
|
|
const { data } = await trpc.applications.getPreviewStatus.query({
|
|
id: applicationId,
|
|
pullmergeRequestId
|
|
});
|
|
if (data.isBuilding) {
|
|
status[preview.id] = 'building';
|
|
} else if (data.isRunning) {
|
|
status[preview.id] = 'running';
|
|
return 'running';
|
|
} else {
|
|
status[preview.id] = 'stopped';
|
|
return 'stopped';
|
|
}
|
|
}
|
|
});
|
|
}, 2000);
|
|
try {
|
|
loading.init = true;
|
|
loading.restart = true;
|
|
} catch (error) {
|
|
return errorNotification(error);
|
|
} finally {
|
|
loading.init = false;
|
|
loading.restart = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="w-full">
|
|
<div class="mx-auto w-full">
|
|
<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
|
|
<div class="title font-bold pb-3">Preview Deployments</div>
|
|
<div class="text-center">
|
|
<button class="btn btn-sm bg-coollabs" on:click={loadPreviewsFromDocker}
|
|
>Load Previews</button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{#if loading.init}
|
|
<div class="px-6 pt-4">
|
|
<div class="flex justify-center py-4 text-center text-xl font-bold">Loading...</div>
|
|
</div>
|
|
{:else if application.previewApplication.length > 0}
|
|
<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-2 px-6">
|
|
{#each application.previewApplication as preview}
|
|
<div class="no-underline mb-5 w-full">
|
|
<div class="w-full rounded p-5 bg-coolgray-200 indicator">
|
|
{#await getStatus(preview)}
|
|
<span class="indicator-item badge bg-yellow-500 badge-sm" />
|
|
{:then}
|
|
{#if status[preview.id] === 'running'}
|
|
<span class="indicator-item badge bg-success badge-sm" />
|
|
{:else}
|
|
<span class="indicator-item badge bg-error badge-sm" />
|
|
{/if}
|
|
{/await}
|
|
<div class="w-full flex flex-row">
|
|
<div class="w-full flex flex-col">
|
|
<h1 class="font-bold text-lg lg:text-xl truncate">
|
|
PR #{preview.pullmergeRequestId}
|
|
{#if status[preview.id] === 'building'}
|
|
<span
|
|
class="badge badge-sm text-xs uppercase rounded bg-coolgray-300 text-green-500 border-none font-bold"
|
|
>
|
|
BUILDING
|
|
</span>
|
|
{/if}
|
|
</h1>
|
|
<div class="h-10 text-xs">
|
|
<h2>{preview.customDomain.replace('https://', '').replace('http://', '')}</h2>
|
|
</div>
|
|
|
|
<div class="flex justify-end items-end space-x-2 h-10">
|
|
{#if preview.customDomain}
|
|
<a
|
|
id="openpreview"
|
|
href={preview.customDomain}
|
|
target="_blank noreferrer"
|
|
class="icons"
|
|
>
|
|
<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}
|
|
<Tooltip triggeredBy="#openpreview">Open Preview</Tooltip>
|
|
{#if loading.restart}
|
|
<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"
|
|
>
|
|
<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}
|
|
<button
|
|
id="restart"
|
|
disabled={!$appSession.isAdmin}
|
|
on:click={() => restartPreview(preview)}
|
|
type="submit"
|
|
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>
|
|
{/if}
|
|
|
|
<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
|
|
<button
|
|
id="forceredeploypreview"
|
|
class="icons"
|
|
disabled={!$appSession.isAdmin}
|
|
on:click={() => redeploy(preview)}
|
|
>
|
|
<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
|
|
>
|
|
<Tooltip triggeredBy="#forceredeploypreview">Force redeploy (without cache)</Tooltip
|
|
>
|
|
<button
|
|
id="deletepreview"
|
|
class="icons"
|
|
class:hover:text-error={!loading.removing}
|
|
disabled={loading.removing || !$appSession.isAdmin}
|
|
on:click={() => removeApplication(preview)}
|
|
><Icons.Delete />
|
|
</button>
|
|
<Tooltip triggeredBy="#deletepreview">Delete Preview</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
No previews found.
|
|
{/if}
|