ershisan99/coolify
1
0
Fork 0
mirror of https://github.com/ershisan99/coolify.git synced 2026-01-30 05:02:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: previewApplications finalized

Browse Source
This commit is contained in:
Andras Bacsai
2022-09-13 15:50:20 +02:00
parent c40b80436a
commit d9908b3d61
24 changed files with 805 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
apps/ui/src/routes/applications/[id]/logs/build.svelte
View File

@@ -23,34 +23,30 @@
export let application: any;
export let buildCount: any;
import { page } from '$app/stores';
import {addToast} from '$lib/store';
console.log(builds[0].createdAt);
import { addToast } from '$lib/store';
import BuildLog from './_BuildLog.svelte';
import { get, post } from '$lib/api';
import { t } from '$lib/translations';
import { changeQueryParams, dateOptions, errorNotification, asyncSleep } from '$lib/common';
import Tooltip from '$lib/components/Tooltip.svelte';
import { day } from '$lib/dayjs';
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, took } = detail;
const { status } = detail;
if (status !== 'running') {
try {
const data = await get(`/applications/${id}/logs/build?buildId=${buildId}`);
builds = builds.filter((build: any) => {
if (build.id === data.builds[0].id) {
build.status = data.builds[0].status;
build.took = data.builds[0].took;
build.since = data.builds[0].since;
}
return build;
});
@@ -62,7 +58,6 @@ import {addToast} from '$lib/store';
if (build.id === buildId) build.status = status;
return build;
});
buildTook = took;
}
}
async function loadMoreBuilds() {
@@ -84,23 +79,37 @@ import {addToast} from '$lib/store';
buildId = build;
return changeQueryParams(buildId);
}
async function resetQueue() {
const sure = confirm('It will reset all build queues for all applications. If something is queued, it will be canceled automatically. Are you sure? ');
async function resetQueue() {
const sure = confirm(
'It will reset all build queues for all applications. If something is queued, it will be canceled automatically. Are you sure? '
);
if (sure) {
try {
await post(`/internal/resetQueue`, {});
addToast({
try {
await post(`/internal/resetQueue`, {});
addToast({
message: 'Queue reset done.',
type: 'success'
});
await asyncSleep(500)
return window.location.reload()
} catch (error) {
return errorNotification(error);
});
await asyncSleep(500);
return window.location.reload();
} catch (error) {
return errorNotification(error);
}
}
}
}
}
function generateBadgeColors(status: string) {
if (status === 'failed') {
return 'text-red-500';
} else if (status === 'running') {
return 'text-yellow-300';
} else if (status === 'success') {
return 'text-green-500';
} else if (status === 'canceled') {
return 'text-orange-500';
} else {
return 'text-white';
}
}
</script>
<div class="flex items-center space-x-2 p-5 px-6 font-bold">
@@ -156,7 +165,9 @@ import {addToast} from '$lib/store';
</div>
<div class="block flex-row justify-start space-x-2 px-5 pt-6 sm:px-10 md:flex">
<div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 ">
<button class="btn btn-sm text-xs w-full bg-error" on:click={resetQueue}>Reset Build Queue</button>
<button class="btn btn-sm text-xs w-full bg-error" on:click={resetQueue}
>Reset Build Queue</button
>
<div class="top-4 md:sticky">
{#each builds as build, index (build.id)}
<div
@@ -164,8 +175,8 @@ import {addToast} from '$lib/store';
on:click={() => loadBuild(build.id)}
class:rounded-tr={index === 0}
class:rounded-br={index === builds.length - 1}
class="flex cursor-pointer items-center justify-center py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
class:bg-coolgray-400={buildId === build.id}
class="flex cursor-pointer items-center justify-center py-4 no-underline transition-all duration-100 hover:bg-coolgray-300 hover:shadow-xl"
class:bg-coolgray-200={buildId === build.id}
>
<div class="flex-col px-2 text-center min-w-[10rem]">
<div class="text-sm font-bold">
@@ -174,41 +185,46 @@ import {addToast} from '$lib/store';
<div class="text-xs">
{build.type}
</div>
<div class="badge badge-sm text-xs text-white uppercase rounded bg-coolgray-300 border-none font-bold"
class:text-red-500={build.status === 'failed'}
class:text-orange-500={build.status === 'canceled'}
class:text-green-500={build.status === 'success'}
class:text-yellow-500={build.status === 'running'}>{build.status}</div>
<div
class={`badge badge-sm text-xs uppercase rounded bg-coolgray-300 border-none font-bold ${generateBadgeColors(
build.status
)}`}
>
{build.status}
</div>
</div>
<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>
<span class="font-bold text-xl"
>{(day().utc().diff(day(build.createdAt)) / 1000).toFixed(0)}s</span
>
</div>
{:else if build.status === 'queued'}
<div class="font-bold">{$t('application.build.queued')}</div>
{:else}
<div>{build.since}</div>
<div>{day(build.updatedAt).utc().fromNow()}</div>
<div>
{$t('application.build.finished_in')} <span class="font-bold">{build.took}s</span>
{$t('application.build.finished_in')}
<span class="font-bold"
>{day(build.updatedAt).utc().diff(day(build.createdAt)) / 1000}s</span
>
</div>
{/if}
</div>
</div>
<Tooltip triggeredBy={`#building-${build.id}`}
>{new Intl.DateTimeFormat('default', dateOptions).format(new Date(build.createdAt)) +
`\n${build.status}`}</Tooltip
`\n`}</Tooltip
>
{/each}
</div>
{#if !noMoreBuilds}
{#if buildCount > 5}
<div class="flex space-x-2">
<button disabled={noMoreBuilds} class=" btn btn-sm w-full text-xs" on:click={loadMoreBuilds}
>{$t('application.build.load_more')}</button
<button
disabled={noMoreBuilds}
class=" btn btn-sm w-full text-xs"
on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
>
</div>
{/if}