702be840b4
Add elapsed time tracking and time-aware status messages during updates to inform users about extended downtime. Fix variable scoping issues by properly declaring interval variables in Alpine.js component data, and add error handling for network failures during health checks. Users now see clear, reassuring messages at different stages: update progress, restart phase, and revival with elapsed time. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
186 lines
11 KiB
PHP
186 lines
11 KiB
PHP
<div @if ($isUpgradeAvailable) title="New version available" @else title="No upgrade available" @endif
|
|
x-init="$wire.checkUpdate" x-data="upgradeModal">
|
|
@if ($isUpgradeAvailable)
|
|
<div :class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
|
|
<button class="menu-item" @click="modalOpen=true" x-show="showProgress">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300 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 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>
|
|
In progress
|
|
</button>
|
|
<button class="menu-item cursor-pointer" @click="modalOpen=true" x-show="!showProgress">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300" 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 12h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v3h-6v-3z" />
|
|
<path d="M9 21h6" />
|
|
<path d="M9 18h6" />
|
|
</svg>
|
|
Upgrade
|
|
</button>
|
|
<template x-teleport="body">
|
|
<div x-show="modalOpen"
|
|
class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen" x-cloak>
|
|
<div x-show="modalOpen" x-transition:enter="ease-out duration-100"
|
|
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
|
x-transition:leave="ease-in duration-100" x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
|
|
<div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
|
|
class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-fit bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
|
|
<div class="flex items-center justify-between pb-3">
|
|
<h3 class="text-lg font-semibold">Upgrade confirmation</h3>
|
|
<button x-show="!showProgress" @click="modalOpen=false"
|
|
class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50">
|
|
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="relative w-auto pb-8">
|
|
<p>Are you sure you would like to upgrade your instance to {{ $latestVersion }}?</p>
|
|
<br />
|
|
|
|
<x-callout type="warning" title="Caution">
|
|
<p>Any deployments running during the update process will
|
|
fail. Please ensure no deployments are in progress on any server before continuing.
|
|
</p>
|
|
</x-callout>
|
|
<br />
|
|
<p>You can review the changelogs <a class="font-bold underline dark:text-white"
|
|
href="https://github.com/coollabsio/coolify/releases" target="_blank">here</a>.</p>
|
|
<br />
|
|
<p>If something goes wrong and you cannot upgrade your instance, You can check the following
|
|
<a class="font-bold underline dark:text-white" href="https://coolify.io/docs/upgrade"
|
|
target="_blank">guide</a> on what to do.
|
|
</p>
|
|
<div class="flex flex-col pt-4" x-show="showProgress">
|
|
<h2>Progress <x-loading /></h2>
|
|
<div x-html="currentStatus"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4" x-show="!showProgress">
|
|
<x-forms.button @click="modalOpen=false"
|
|
class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">Cancel
|
|
</x-forms.button>
|
|
<div class="flex-1"></div>
|
|
<x-forms.button @click="confirmed" class="w-24" isHighlighted type="button">Continue
|
|
</x-forms.button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('upgradeModal', () => ({
|
|
modalOpen: false,
|
|
showProgress: false,
|
|
currentStatus: '',
|
|
checkHealthInterval: null,
|
|
checkIfIamDeadInterval: null,
|
|
healthCheckAttempts: 0,
|
|
startTime: null,
|
|
confirmed() {
|
|
this.showProgress = true;
|
|
this.$wire.$call('upgrade')
|
|
this.upgrade();
|
|
window.addEventListener('beforeunload', (event) => {
|
|
event.preventDefault();
|
|
event.returnValue = '';
|
|
});
|
|
},
|
|
getReviveStatusMessage(elapsedMinutes, attempts) {
|
|
if (elapsedMinutes === 0) {
|
|
return `Waiting for Coolify to come back online... (attempt ${attempts})`;
|
|
} else if (elapsedMinutes < 2) {
|
|
return `Waiting for Coolify to come back online... (${elapsedMinutes} minute${elapsedMinutes !== 1 ? 's' : ''} elapsed)`;
|
|
} else if (elapsedMinutes < 5) {
|
|
return `Update in progress, this may take several minutes... (${elapsedMinutes} minutes elapsed)`;
|
|
} else if (elapsedMinutes < 10) {
|
|
return `Large updates can take 10+ minutes. Please be patient... (${elapsedMinutes} minutes elapsed)`;
|
|
} else {
|
|
return `Still updating. If this takes longer than 15 minutes, please check server logs... (${elapsedMinutes} minutes elapsed)`;
|
|
}
|
|
},
|
|
revive() {
|
|
if (this.checkHealthInterval) return true;
|
|
this.healthCheckAttempts = 0;
|
|
this.startTime = Date.now();
|
|
console.log('Checking server\'s health...')
|
|
this.checkHealthInterval = setInterval(() => {
|
|
this.healthCheckAttempts++;
|
|
const elapsedMinutes = Math.floor((Date.now() - this.startTime) / 60000);
|
|
fetch('/api/health')
|
|
.then(response => {
|
|
if (response.ok) {
|
|
this.currentStatus =
|
|
'Coolify is back online. Reloading this page in 5 seconds...';
|
|
if (this.checkHealthInterval) {
|
|
clearInterval(this.checkHealthInterval);
|
|
this.checkHealthInterval = null;
|
|
}
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 5000)
|
|
} else {
|
|
this.currentStatus = this.getReviveStatusMessage(elapsedMinutes, this
|
|
.healthCheckAttempts);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Health check failed:', error);
|
|
this.currentStatus = this.getReviveStatusMessage(elapsedMinutes, this
|
|
.healthCheckAttempts);
|
|
});
|
|
}, 2000);
|
|
},
|
|
upgrade() {
|
|
if (this.checkIfIamDeadInterval || this.$wire.showProgress) return true;
|
|
this.currentStatus = 'Update in progress. Pulling new images and preparing to restart Coolify...';
|
|
this.checkIfIamDeadInterval = setInterval(() => {
|
|
fetch('/api/health')
|
|
.then(response => {
|
|
if (response.ok) {
|
|
this.currentStatus =
|
|
"Update in progress. Pulling new images and preparing to restart Coolify..."
|
|
} else {
|
|
this.currentStatus = "Coolify is restarting with the new version..."
|
|
if (this.checkIfIamDeadInterval) {
|
|
clearInterval(this.checkIfIamDeadInterval);
|
|
this.checkIfIamDeadInterval = null;
|
|
}
|
|
this.revive();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Health check failed:', error);
|
|
this.currentStatus = "Coolify is restarting with the new version..."
|
|
if (this.checkIfIamDeadInterval) {
|
|
clearInterval(this.checkIfIamDeadInterval);
|
|
this.checkIfIamDeadInterval = null;
|
|
}
|
|
this.revive();
|
|
});
|
|
}, 2000);
|
|
}
|
|
|
|
}))
|
|
})
|
|
</script>
|