Skip to content

Add Docker update support via Watchtower integration #1330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sebbeben wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Docker update support via Watchtower integration #1330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,12 @@ DISABLE_BACKUP_RESTORE=1
# When enabled, users must confirm their password before downloading.
DISABLE_BACKUP_DOWNLOAD=1

# Watchtower integration for Docker-based updates.
# Set these to enable one-click updates via the Update Manager UI.
# See https://containrrr.dev/watchtower/ for Watchtower setup.
WATCHTOWER_API_URL=
WATCHTOWER_API_TOKEN=

###################################################################################
# SAML Single sign on-settings
###################################################################################
Expand Down
377 changes: 377 additions & 0 deletions assets/controllers/docker_update_progress_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,377 @@
/*
* This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
*
* Copyright (C) 2019 - 2026 Jan Böhmer (https://github.com/jbtronics)
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published
* by the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/

import { Controller } from '@hotwired/stimulus';

/**
* Stimulus controller for Docker update progress tracking.
*
* Polls the health check endpoint to detect when the container restarts
* after a Watchtower-triggered update. Drives the step timeline UI
* with timestamps, matching the git update progress style.
*/
export default class extends Controller {
static values = {
healthUrl: String,
previousVersion: { type: String, default: 'unknown' },
pollInterval: { type: Number, default: 5000 },
maxWaitTime: { type: Number, default: 600000 }, // 10 minutes
// Translated UI strings (passed from Twig template)
textPulling: { type: String, default: 'Waiting for Watchtower to pull the new image...' },
textPullingDetail: { type: String, default: 'Watchtower is checking for and downloading the latest Docker image...' },
textRestarting: { type: String, default: 'Container is restarting with the new image...' },
textRestartingDetail: { type: String, default: 'The container is being recreated with the updated image. This may take a moment...' },
textSuccess: { type: String, default: 'Update Complete!' },
textSuccessDetail: { type: String, default: 'Part-DB has been updated successfully via Docker.' },
textTimeout: { type: String, default: 'Update Taking Longer Than Expected' },
textTimeoutDetail: { type: String, default: 'The update may still be in progress. Check your Docker logs for details.' },
textStepPull: { type: String, default: 'Pull Image' },
textStepRestart: { type: String, default: 'Restart Container' },
};

static targets = [
// Header
'headerWhale', 'titleIcon',
'statusText', 'statusSubtext',
'progressBar', 'elapsedTime',
// Alerts
'stepAlert', 'stepName', 'stepMessage',
'successAlert', 'timeoutAlert', 'errorAlert', 'errorMessage', 'warningAlert',
// Step timeline (multi-target arrays)
'stepRow', 'stepIcon', 'stepDetail', 'stepTime',
// Version display
'newVersion', 'previousVersion',
// Actions
'actions',
];

// Step definitions: name -> { index, progress% }
static STEPS = {
trigger: { index: 0, progress: 15 },
pull: { index: 1, progress: 30 },
stop: { index: 2, progress: 50 },
restart: { index: 3, progress: 65 },
health: { index: 4, progress: 80 },
verify: { index: 5, progress: 100 },
};

connect() {
this.serverWentDown = false;
this.serverCameBack = false;
this.startTime = Date.now();
this.timer = null;
this.currentStep = 'pull'; // trigger is already done
this.stepTimestamps = { trigger: this.formatTime(new Date()) };
this.consecutiveSuccessCount = 0;

// Set the trigger step timestamp
this.setStepTimestamp(0, this.stepTimestamps.trigger);

this.poll();
}

disconnect() {
if (this.timer) {
clearTimeout(this.timer);
}
}

createTimeoutSignal(ms) {
if (typeof AbortSignal.timeout === 'function') {
return AbortSignal.timeout(ms);
}
const controller = new AbortController();
setTimeout(() => controller.abort(), ms);
return controller.signal;
}

async poll() {
const elapsed = Date.now() - this.startTime;
this.updateElapsedTime(elapsed);

if (elapsed > this.maxWaitTimeValue) {
this.showTimeout();
return;
}

try {
const response = await fetch(this.healthUrlValue, {
cache: 'no-store',
signal: this.createTimeoutSignal(4000),
});

if (response.ok) {
let data;
try {
data = await response.json();
} catch (parseError) {
this.schedulePoll();
return;
}

if (this.serverWentDown) {
// Server came back! Move through health check -> verify
if (!this.serverCameBack) {
this.serverCameBack = true;
this.advanceToStep('health');
}

this.consecutiveSuccessCount++;

// Wait for 2 consecutive successes to confirm stability
if (this.consecutiveSuccessCount >= 2) {
this.showSuccess(data.version);
return;
}
} else {
// Server still up - Watchtower pulling image
this.showPulling();
}
} else if (response.status === 503) {
// Maintenance mode or shutting down
this.serverWentDown = true;
this.consecutiveSuccessCount = 0;
this.advanceToStep('stop');
} else {
if (this.serverWentDown) {
this.showRestarting();
} else {
this.showPulling();
}
}
} catch (e) {
// Connection refused = container is down
if (!this.serverWentDown) {
this.serverWentDown = true;
this.advanceToStep('stop');
}
this.consecutiveSuccessCount = 0;
this.showRestarting();
}

this.schedulePoll();
}

schedulePoll() {
this.timer = setTimeout(() => this.poll(), this.pollIntervalValue);
}

/**
* Advance the step timeline to a specific step.
* Marks all previous steps as complete with timestamps.
*/
advanceToStep(stepName) {
const steps = this.constructor.STEPS;
const targetIndex = steps[stepName]?.index;
if (targetIndex === undefined) return;

const stepNames = Object.keys(steps);
const now = this.formatTime(new Date());

for (let i = 0; i < stepNames.length; i++) {
const name = stepNames[i];

if (i < targetIndex) {
// Completed step
this.markStepComplete(i, this.stepTimestamps[name] || now);
if (!this.stepTimestamps[name]) {
this.stepTimestamps[name] = now;
}
} else if (i === targetIndex) {
// Current active step
this.markStepActive(i);
this.stepTimestamps[name] = now;
this.setStepTimestamp(i, now);
this.currentStep = name;
}
// Steps after targetIndex remain pending (no change needed)
}

// Update progress bar
this.updateProgressBar(steps[stepName].progress);
}

showPulling() {
if (this.hasStatusTextTarget) {
this.statusTextTarget.textContent = this.textPullingValue;
}
if (this.hasStepNameTarget) {
this.stepNameTarget.textContent = this.textStepPullValue;
}
if (this.hasStepMessageTarget) {
this.stepMessageTarget.textContent = this.textPullingDetailValue;
}
this.updateProgressBar(30);
}

showRestarting() {
// Advance to restart step if we haven't already
if (this.currentStep !== 'restart' && this.currentStep !== 'health' && this.currentStep !== 'verify') {
this.advanceToStep('restart');
}

if (this.hasStatusTextTarget) {
this.statusTextTarget.textContent = this.textRestartingValue;
}
if (this.hasStepNameTarget) {
this.stepNameTarget.textContent = this.textStepRestartValue;
}
if (this.hasStepMessageTarget) {
this.stepMessageTarget.textContent = this.textRestartingDetailValue;
}
}

showSuccess(newVersion) {
// Advance all steps to complete
const steps = this.constructor.STEPS;
const stepNames = Object.keys(steps);
const now = this.formatTime(new Date());

for (let i = 0; i < stepNames.length; i++) {
const name = stepNames[i];
this.markStepComplete(i, this.stepTimestamps[name] || now);
}

this.updateProgressBar(100);

// Update whale animation
if (this.hasHeaderWhaleTarget) {
this.headerWhaleTarget.classList.add('success');
}
if (this.hasTitleIconTarget) {
this.titleIconTarget.className = 'fas fa-check-circle text-success';
}

if (this.hasStatusTextTarget) {
this.statusTextTarget.textContent = this.textSuccessValue;
}
if (this.hasStatusSubtextTarget) {
this.statusSubtextTarget.textContent = this.textSuccessDetailValue;
}

// Hide step alert, show success alert
this.toggleTarget('stepAlert', false);
this.toggleTarget('successAlert', true);
this.toggleTarget('warningAlert', false);
this.toggleTarget('actions', true);

if (this.hasNewVersionTarget) {
this.newVersionTarget.textContent = newVersion || 'latest';
}
if (this.hasPreviousVersionTarget) {
this.previousVersionTarget.textContent = this.previousVersionValue;
}
}

showTimeout() {
this.updateProgressBar(0);

if (this.hasHeaderWhaleTarget) {
this.headerWhaleTarget.classList.add('timeout');
}
if (this.hasTitleIconTarget) {
this.titleIconTarget.className = 'fas fa-exclamation-triangle text-warning';
}

if (this.hasStatusTextTarget) {
this.statusTextTarget.textContent = this.textTimeoutValue;
}
if (this.hasStatusSubtextTarget) {
this.statusSubtextTarget.textContent = this.textTimeoutDetailValue;
}

this.toggleTarget('stepAlert', false);
this.toggleTarget('timeoutAlert', true);
this.toggleTarget('warningAlert', false);
this.toggleTarget('actions', true);
}

// --- Step timeline helpers ---

markStepComplete(index, timestamp) {
if (this.stepIconTargets[index]) {
this.stepIconTargets[index].className = 'fas fa-check-circle text-success me-3';
}
if (this.stepRowTargets[index]) {
this.stepRowTargets[index].classList.remove('text-muted');
}
if (timestamp) {
this.setStepTimestamp(index, timestamp);
}
}

markStepActive(index) {
if (this.stepIconTargets[index]) {
this.stepIconTargets[index].className = 'fas fa-spinner fa-spin text-primary me-3';
}
if (this.stepRowTargets[index]) {
this.stepRowTargets[index].classList.remove('text-muted');
}
}

setStepTimestamp(index, time) {
if (this.stepTimeTargets[index]) {
this.stepTimeTargets[index].textContent = time;
}
}

// --- UI helpers ---

toggleTarget(name, show) {
const hasMethod = 'has' + name.charAt(0).toUpperCase() + name.slice(1) + 'Target';
if (this[hasMethod]) {
this[name + 'Target'].classList.toggle('d-none', !show);
}
}

updateProgressBar(percent) {
if (this.hasProgressBarTarget) {
const bar = this.progressBarTarget;
// Remove all width classes
bar.classList.remove('progress-w-0', 'progress-w-15', 'progress-w-30', 'progress-w-50', 'progress-w-65', 'progress-w-80', 'progress-w-100');
bar.classList.add('progress-w-' + percent);
bar.textContent = percent + '%';
bar.setAttribute('aria-valuenow', percent);

bar.classList.remove('bg-success', 'bg-danger', 'progress-bar-striped', 'progress-bar-animated');
if (percent === 100) {
bar.classList.add('bg-success');
} else if (percent === 0) {
bar.classList.add('bg-danger');
} else {
bar.classList.add('progress-bar-striped', 'progress-bar-animated');
}
}
}

updateElapsedTime(elapsed) {
if (this.hasElapsedTimeTarget) {
const seconds = Math.floor(elapsed / 1000);
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
this.elapsedTimeTarget.textContent = minutes > 0
? `${minutes}m ${remainingSeconds}s`
: `${remainingSeconds}s`;
}
}

formatTime(date) {
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
}
Loading
Loading