This commit is contained in:
Andras Bacsai 2023-05-25 15:47:27 +02:00
parent b9057d05a1
commit 62a214920d
9 changed files with 164 additions and 69 deletions

View File

@ -9,7 +9,7 @@ class ForceUpgrade extends Component
{
public function upgrade()
{
dispatch_sync(new InstanceAutoUpdateJob(force: true));
$this->emit('updateInitiated');
dispatch_sync(new InstanceAutoUpdateJob(force: true));
}
}

View File

@ -0,0 +1,15 @@
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Upgrading extends Component
{
public bool $visible = false;
protected $listeners = ['updateInitiated'];
public function updateInitiated()
{
$this->visible = true;
}
}

View File

@ -65,16 +65,8 @@ public function handle(): void
"sleep 10"
], $this->server);
} else {
$cdn = "https://coolify-cdn.b-cdn.net/files";
instant_remote_process([
"curl -fsSL $cdn/docker-compose.yml -o /data/coolify/source/docker-compose.yml",
"curl -fsSL $cdn/docker-compose.prod.yml -o /data/coolify/source/docker-compose.prod.yml",
"curl -fsSL $cdn/.env.production -o /data/coolify/source/.env.production",
"curl -fsSL $cdn/upgrade.sh -o /data/coolify/source/upgrade.sh",
], $this->server);
instant_remote_process([
"docker compose -f /data/coolify/source/docker-compose.yml -f /data/coolify/source/docker-compose.prod.yml pull",
"curl -fsSL https://coolify-cdn.b-cdn.net/files/upgrade.sh -o /data/coolify/source/upgrade.sh",
], $this->server);
remote_process([

View File

@ -97,3 +97,31 @@ .magic-item {
.magic-item-focused {
@apply bg-coolgray-400 text-white;
}
.lds-heart {
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes lds-heart {
0% {
transform: scale(1);
}
5% {
transform: scale(1.2);
}
39% {
transform: scale(0.85);
}
45% {
transform: scale(1);
}
60% {
transform: scale(0.95);
}
100% {
transform: scale(0.9);
}
}
.bg-coollabs-gradient {
@apply text-transparent bg-clip-text bg-gradient-to-r from-coollabs via-pink-500 to-red-500;
}

View File

@ -35,6 +35,7 @@
<main>
{{ $slot }}
</main>
<livewire:upgrading />
<a
class="fixed text-xs cursor-pointer right-2 bottom-1 opacity-60 hover:opacity-100 hover:text-white">v{{ config('version') }}</a>
@auth
@ -47,48 +48,6 @@ class="fixed text-xs cursor-pointer right-2 bottom-1 opacity-60 hover:opacity-10
}
}
})
function checkIfIamDead() {
console.log('Checking server\'s pulse...')
checkIfIamDeadInterval = setInterval(async () => {
try {
const res = await fetch('/api/health');
if (res.ok) {
console.log('I\'m alive. Waiting for server to be dead...');
}
} catch (error) {
console.log('I\'m dead. Charging... Standby... Bzz... Bzz...')
checkHealth();
if (checkIfIamDeadInterval) clearInterval(checkIfIamDeadInterval);
}
return;
}, 2000);
}
function checkHealth() {
console.log('Checking server\'s health...')
checkHealthInterval = setInterval(async () => {
try {
const res = await fetch('/api/health');
if (res.ok) {
console.log('Server is back online. Reloading...')
if (checkHealthInterval) clearInterval(checkHealthInterval);
window.location.reload();
}
} catch (error) {
console.log('Waiting for server to come back from dead...');
}
return;
}, 2000);
}
Livewire.on('updateInitiated', () => {
let checkHealthInterval = null;
let checkIfIamDeadInterval = null;
console.log('Update initiated. Waiting for server to be dead...')
checkIfIamDead();
})
Livewire.on('reloadWindow', () => {
window.location.reload();
})

View File

@ -64,26 +64,44 @@
@endif
</ul>
</nav>
<div class="absolute top-0 right-0 pt-2">
<div class="dropdown dropdown-left">
<label tabindex="0" class="btn btn-ghost no-animation hover:bg-transparent">
<div class="flex items-center justify-center gap-2 avatar placeholder">
<div class="w-10 border rounded-full border-neutral-600 text-warning">
<span class="text-xs">{{ Str::of(auth()->user()->name)->substr(0, 2)->upper() }}</span>
</div>
<x-chevron-down />
<div class="absolute top-0 right-0 p-2">
<div class="dropdown dropdown-left dropdown-hover">
<label tabindex="0" class="btn btn-ghost no-animation hover:bg-transparent hover:text-warning">
<div class="flex items-center justify-center gap-2 placeholder">
<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="M4 6l16 0" />
<path d="M4 12l16 0" />
<path d="M4 18l16 0" />
</svg>
</div>
</label>
<ul tabindex="0"
class="p-2 mt-3 text-white rounded shadow menu menu-compact dropdown-content bg-coolgray-200 w-52">
<li>
<a href="/profile">
Profile
<a class="hover:no-underline hover:bg-coollabs" href="/profile">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" 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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
<path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
<path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
</svg> Profile
</a>
</li>
<li>
<a href="/profile/team">
Team
<a class="hover:no-underline hover:bg-coollabs" href="/profile/team">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" 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="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
<path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path d="M17 10h2a2 2 0 0 1 2 2v1" />
<path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
</svg> Team
</a>
</li>
@if (auth()->user()->isPartOfRootTeam())
@ -94,7 +112,15 @@ class="p-2 mt-3 text-white rounded shadow menu menu-compact dropdown-content bg-
<form action="/logout" method="POST">
<li>
@csrf
<button>Logout</button>
<button class="text-sm hover:bg-coollabs"> <svg xmlns="http://www.w3.org/2000/svg" class="icon"
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="M13 12v.01" />
<path d="M3 21h18" />
<path d="M5 21v-16a2 2 0 0 1 2 -2h7.5m2.5 10.5v7.5" />
<path d="M14 7h7m-3 -3l3 3l-3 3" />
</svg>Logout</button>
</li>
</form>
</ul>

View File

@ -1,3 +1,12 @@
<a href="#" class="justify-between font-normal link link-hover hover:bg-transparent hover:text-white"
wire:click='upgrade'>Force
Upgrade</a>
<button class="link link-hover hover:no-underline hover:bg-coollabs hover:bg-transparent hover:text-white"
wire:click='upgrade'>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" 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="M10 20.777a8.942 8.942 0 0 1 -2.48 -.969" />
<path d="M14 3.223a9.003 9.003 0 0 1 0 17.554" />
<path d="M4.579 17.093a8.961 8.961 0 0 1 -1.227 -2.592" />
<path d="M3.124 10.5c.16 -.95 .468 -1.85 .9 -2.675l.169 -.305" />
<path d="M6.907 4.579a8.954 8.954 0 0 1 3.093 -1.356" />
<path d="M12 9l-2 3h4l-2 3" />
</svg>Force Upgrade</button>

View File

@ -0,0 +1,58 @@
<div x-data="{ visible: @entangle('visible') }" class="fixed text-xs text-white top-2 right-28">
<template x-if="visible">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto lds-heart text-warning" 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</svg> Upgrading...
<script>
function checkHealth() {
console.log('Checking server\'s health...')
checkHealthInterval = setInterval(async () => {
try {
const res = await fetch('/api/health');
if (res.ok) {
console.log('Server is back online. Reloading...')
if (checkHealthInterval) clearInterval(checkHealthInterval);
window.location.reload();
}
} catch (error) {
console.log('Waiting for server to come back from dead...');
}
return;
}, 2000);
}
function checkIfIamDead() {
console.log('Checking server\'s pulse...')
checkIfIamDeadInterval = setInterval(async () => {
try {
const res = await fetch('/api/health');
if (res.ok) {
console.log('I\'m alive. Waiting for server to be dead...');
}
} catch (error) {
console.log('I\'m dead. Charging... Standby... Bzz... Bzz...')
checkHealth();
if (checkIfIamDeadInterval) clearInterval(checkIfIamDeadInterval);
}
return;
}, 2000);
}
let checkHealthInterval = null;
let checkIfIamDeadInterval = null;
console.log('Update initiated. Waiting for server to be dead...')
checkIfIamDead();
</script>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 mx-auto lds-heart" 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="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
<path d="M12 6l-2 4l4 3l-2 4v3" />
</svg>
</template>
</div>

View File

@ -6,5 +6,13 @@
###########
VERSION="1.0.0"
CDN="https://coolify-cdn.b-cdn.net/files"
echo "Downloading required files from CDN..."
curl -fsSL $CDN/docker-compose.yml -o /data/coolify/source/docker-compose.yml
curl -fsSL $CDN/docker-compose.prod.yml -o /data/coolify/source/docker-compose.prod.yml
curl -fsSL $CDN/.env.production -o /data/coolify/source/.env.production
docker compose -f /data/coolify/source/docker-compose.yml -f /data/coolify/source/docker-compose.prod.yml pull
docker run --pull always -v /data/coolify/source:/data/coolify/source -v /var/run/docker.sock:/var/run/docker.sock --rm ghcr.io/coollabsio/coolify-builder bash -c "LATEST_IMAGE=${1:-} docker compose --env-file /data/coolify/source/.env -f /data/coolify/source/docker-compose.yml -f /data/coolify/source/docker-compose.prod.yml up -d --pull always --remove-orphans --force-recreate"