b91bfa21b3
- Fix restart_policy in Service config. - Tweaked the upgrade process a bit. - Refactor and cosmetic surgery here and there. - Track Service config changes and allow redeploy if it changes.
217 lines
7.5 KiB
Svelte
217 lines
7.5 KiB
Svelte
<script>
|
|
import { params, goto, redirect, isActive } from "@roxi/routify";
|
|
import { application, fetch, initialApplication, initConf } from "@store";
|
|
import { onDestroy } from "svelte";
|
|
import { fade } from "svelte/transition";
|
|
import Loading from "../../components/Loading.svelte";
|
|
import { toast } from "@zerodevx/svelte-toast";
|
|
|
|
$application.repository.organization = $params.organization;
|
|
$application.repository.name = $params.name;
|
|
$application.repository.branch = $params.branch;
|
|
|
|
async function loadConfiguration() {
|
|
if (!$isActive("/application/new")) {
|
|
try {
|
|
const config = await $fetch(`/api/v1/config`, {
|
|
body: {
|
|
name: $application.repository.name,
|
|
organization: $application.repository.organization,
|
|
branch: $application.repository.branch,
|
|
},
|
|
});
|
|
$application = { ...config };
|
|
$initConf = JSON.parse(JSON.stringify($application));
|
|
} catch (error) {
|
|
toast.push("Configuration not found.");
|
|
$redirect("/dashboard/applications");
|
|
}
|
|
} else {
|
|
$application = JSON.parse(JSON.stringify(initialApplication));
|
|
}
|
|
}
|
|
async function removeApplication() {
|
|
await $fetch(`/api/v1/application/remove`, {
|
|
body: {
|
|
organization: $params.organization,
|
|
name: $params.name,
|
|
branch: $params.branch,
|
|
},
|
|
});
|
|
|
|
toast.push("Application removed.");
|
|
$redirect(`/dashboard/applications`);
|
|
}
|
|
|
|
onDestroy(() => {
|
|
$application = JSON.parse(JSON.stringify(initialApplication));
|
|
});
|
|
|
|
async function deploy() {
|
|
try {
|
|
$application.build.pack = $application.build.pack.replace('.','').toLowerCase()
|
|
toast.push("Checking inputs.");
|
|
await $fetch(`/api/v1/application/check`, {
|
|
body: $application,
|
|
});
|
|
const { nickname, name } = await $fetch(`/api/v1/application/deploy`, {
|
|
body: $application,
|
|
});
|
|
$application.general.nickname = nickname;
|
|
$application.build.container.name = name;
|
|
$initConf = JSON.parse(JSON.stringify($application));
|
|
toast.push("Application deployment queued.");
|
|
$redirect(
|
|
`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/logs`,
|
|
);
|
|
} catch (error) {
|
|
console.log(error);
|
|
toast.push(error.error ? error.error : "Ooops something went wrong.");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#await loadConfiguration()}
|
|
<Loading />
|
|
{:then}
|
|
<nav
|
|
class="flex text-white justify-end items-center m-4 fixed right-0 top-0 space-x-4"
|
|
>
|
|
<button
|
|
title="Deploy"
|
|
disabled="{$application.publish.domain === '' ||
|
|
$application.publish.domain === null}"
|
|
class:cursor-not-allowed="{$application.publish.domain === '' ||
|
|
$application.publish.domain === null}"
|
|
class:hover:text-green-500="{$application.publish.domain}"
|
|
class:hover:bg-warmGray-700="{$application.publish.domain}"
|
|
class:hover:bg-transparent="{$isActive('/application/new')}"
|
|
class:text-warmGray-700="{$application.publish.domain === '' ||
|
|
$application.publish.domain === null}"
|
|
class="icon"
|
|
on:click="{deploy}"
|
|
>
|
|
<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"
|
|
><polyline points="16 16 12 12 8 16"></polyline><line
|
|
x1="12"
|
|
y1="12"
|
|
x2="12"
|
|
y2="21"></line><path
|
|
d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline
|
|
points="16 16 12 12 8 16"></polyline></svg
|
|
>
|
|
</button>
|
|
<button
|
|
title="Delete"
|
|
disabled="{$application.publish.domain === '' ||
|
|
$application.publish.domain === null ||
|
|
$isActive('/application/new')}"
|
|
class:cursor-not-allowed="{$application.publish.domain === '' ||
|
|
$application.publish.domain === null ||
|
|
$isActive('/application/new')}"
|
|
class:hover:text-red-500="{$application.publish.domain &&
|
|
!$isActive('/application/new')}"
|
|
class:hover:bg-warmGray-700="{$application.publish.domain &&
|
|
!$isActive('/application/new')}"
|
|
class:hover:bg-transparent="{$isActive('/application/new')}"
|
|
class:text-warmGray-700="{$application.publish.domain === '' ||
|
|
$application.publish.domain === null ||
|
|
$isActive('/application/new')}"
|
|
class="icon"
|
|
on:click="{removeApplication}"
|
|
>
|
|
<svg
|
|
class="w-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<div class="border border-warmGray-700 h-8"></div>
|
|
<button
|
|
title="Logs"
|
|
class="icon"
|
|
class:text-warmGray-700="{$isActive('/application/new')}"
|
|
disabled="{$isActive('/application/new')}"
|
|
class:hover:text-blue-400="{!$isActive('/application/new')}"
|
|
class:hover:bg-transparent="{$isActive('/application/new')}"
|
|
class:cursor-not-allowed="{$isActive('/application/new')}"
|
|
class:text-blue-400="{$isActive(
|
|
`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/logs`,
|
|
)}"
|
|
class:bg-warmGray-700="{$isActive(
|
|
`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/logs`,
|
|
)}"
|
|
on:click="{() =>
|
|
$goto(
|
|
`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/logs`,
|
|
)}"
|
|
>
|
|
<svg
|
|
class="w-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
title="Configuration"
|
|
class="icon hover:text-yellow-400"
|
|
disabled="{$isActive(`/application/new`)}"
|
|
class:text-yellow-400="{$isActive(
|
|
`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/configuration`,
|
|
) || $isActive(`/application/new`)}"
|
|
class:bg-warmGray-700="{$isActive(
|
|
`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/configuration`,
|
|
) || $isActive(`/application/new`)}"
|
|
on:click="{() =>
|
|
$goto(
|
|
`/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/configuration`,
|
|
)}"
|
|
>
|
|
<svg
|
|
class="w-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="text-white">
|
|
<slot />
|
|
</div>
|
|
{/await}
|