mirror of
https://github.com/Part-DB/Part-DB-server.git
synced 2026-05-10 15:12:12 +00:00
236 lines
14 KiB
Twig
236 lines
14 KiB
Twig
|
{% extends "main_card.html.twig" %}
|
||
|
|
|
||
|
|
{% block title %}{% trans %}update_manager.docker.progress_title{% endtrans %}{% endblock %}
|
||
|
|
|
||
|
|
{% block card_title %}
|
||
|
|
<i class="fab fa-docker" data-docker-update-progress-target="titleIcon"></i>
|
||
|
|
{% trans %}update_manager.docker.progress_title{% endtrans %}
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block card_content %}
|
||
|
|
<style nonce="{{ csp_nonce('style') }}">
|
||
|
|
.docker-whale {
|
||
|
|
display: inline-block;
|
||
|
|
animation: whale-bob 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
.docker-whale svg {
|
||
|
|
fill: #2496ED;
|
||
|
|
}
|
||
|
|
.docker-whale.success {
|
||
|
|
animation: whale-arrive 0.6s ease-out forwards;
|
||
|
|
}
|
||
|
|
.docker-whale.success svg { fill: #198754; }
|
||
|
|
.docker-whale.timeout { animation: none; }
|
||
|
|
.docker-whale.timeout svg { fill: #ffc107; }
|
||
|
|
.docker-whale.failed { animation: none; }
|
||
|
|
.docker-whale.failed svg { fill: #dc3545; }
|
||
|
|
@keyframes whale-bob {
|
||
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||
|
|
25% { transform: translateY(-8px) rotate(-2deg); }
|
||
|
|
75% { transform: translateY(4px) rotate(1deg); }
|
||
|
|
}
|
||
|
|
@keyframes whale-arrive {
|
||
|
|
0% { transform: scale(1); }
|
||
|
|
50% { transform: scale(1.2); }
|
||
|
|
100% { transform: scale(1); }
|
||
|
|
}
|
||
|
|
.whale-waves {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 0.5rem;
|
||
|
|
color: #2496ED66;
|
||
|
|
animation: wave-flow 3s linear infinite;
|
||
|
|
letter-spacing: -1px;
|
||
|
|
margin-top: -4px;
|
||
|
|
}
|
||
|
|
.docker-whale.success + .whale-waves,
|
||
|
|
.docker-whale.timeout + .whale-waves,
|
||
|
|
.docker-whale.failed + .whale-waves { animation: none; }
|
||
|
|
@keyframes wave-flow {
|
||
|
|
0% { opacity: 0.3; }
|
||
|
|
50% { opacity: 0.7; }
|
||
|
|
100% { opacity: 0.3; }
|
||
|
|
}
|
||
|
|
.step-timestamp { min-width: 60px; text-align: right; }
|
||
|
|
/* Progress bar widths - CSS classes to avoid CSP inline style violations */
|
||
|
|
.docker-progress { height: 25px; }
|
||
|
|
.progress-w-0 { width: 0%; }
|
||
|
|
.progress-w-15 { width: 15%; }
|
||
|
|
.progress-w-30 { width: 30%; }
|
||
|
|
.progress-w-50 { width: 50%; }
|
||
|
|
.progress-w-65 { width: 65%; }
|
||
|
|
.progress-w-80 { width: 80%; }
|
||
|
|
.progress-w-100 { width: 100%; }
|
||
|
|
</style>
|
||
|
|
<div data-controller="docker-update-progress"
|
||
|
|
data-docker-update-progress-health-url-value="{{ path('admin_update_manager_health') }}"
|
||
|
|
data-docker-update-progress-previous-version-value="{{ previous_version }}"
|
||
|
|
data-docker-update-progress-text-pulling-value="{% trans %}update_manager.docker.waiting_for_watchtower{% endtrans %}"
|
||
|
|
data-docker-update-progress-text-pulling-detail-value="{% trans %}update_manager.docker.step_pull_desc{% endtrans %}"
|
||
|
|
data-docker-update-progress-text-restarting-value="{% trans %}update_manager.docker.restarting_title{% endtrans %}"
|
||
|
|
data-docker-update-progress-text-restarting-detail-value="{% trans %}update_manager.docker.step_restart_desc{% endtrans %}"
|
||
|
|
data-docker-update-progress-text-success-value="{% trans %}update_manager.docker.success_title{% endtrans %}"
|
||
|
|
data-docker-update-progress-text-success-detail-value="{% trans %}update_manager.docker.success_message{% endtrans %}"
|
||
|
|
data-docker-update-progress-text-timeout-value="{% trans %}update_manager.docker.timeout_title{% endtrans %}"
|
||
|
|
data-docker-update-progress-text-timeout-detail-value="{% trans %}update_manager.docker.timeout_message{% endtrans %}"
|
||
|
|
data-docker-update-progress-text-step-pull-value="{% trans %}update_manager.docker.step_pull{% endtrans %}"
|
||
|
|
data-docker-update-progress-text-step-restart-value="{% trans %}update_manager.docker.step_restart{% endtrans %}">
|
||
|
|
|
||
|
|
{# Progress Header #}
|
||
|
|
<div class="text-center mb-4">
|
||
|
|
<div class="mb-3">
|
||
|
|
<div class="docker-whale-container">
|
||
|
|
<div class="docker-whale" data-docker-update-progress-target="headerWhale">
|
||
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="80" height="64">
|
||
|
|
<path d="M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="whale-waves">~ ~ ~ ~ ~</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h4 data-docker-update-progress-target="statusText">
|
||
|
|
{% trans %}update_manager.docker.updating{% endtrans %}
|
||
|
|
</h4>
|
||
|
|
<p class="text-muted" data-docker-update-progress-target="statusSubtext">
|
||
|
|
{% trans %}update_manager.docker.updating_via_watchtower{% endtrans %}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Progress Bar #}
|
||
|
|
<div class="progress mb-4 docker-progress">
|
||
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated progress-w-15"
|
||
|
|
role="progressbar"
|
||
|
|
aria-valuenow="15"
|
||
|
|
aria-valuemin="0"
|
||
|
|
aria-valuemax="100"
|
||
|
|
data-docker-update-progress-target="progressBar">
|
||
|
|
15%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Current Step Info #}
|
||
|
|
<div class="alert alert-info mb-4" data-docker-update-progress-target="stepAlert">
|
||
|
|
<strong data-docker-update-progress-target="stepName">{% trans %}update_manager.docker.step_trigger{% endtrans %}</strong>:
|
||
|
|
<span data-docker-update-progress-target="stepMessage">{% trans %}update_manager.docker.step_trigger_desc{% endtrans %}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Success Message #}
|
||
|
|
<div class="alert alert-success mb-4 d-none" data-docker-update-progress-target="successAlert">
|
||
|
|
<i class="fas fa-check-circle me-2"></i>
|
||
|
|
{% trans %}update_manager.docker.success_message{% endtrans %}
|
||
|
|
<br>
|
||
|
|
<strong>{% trans %}update_manager.docker.previous_version{% endtrans %}:</strong>
|
||
|
|
<span data-docker-update-progress-target="previousVersion">{{ previous_version }}</span>
|
||
|
|
→
|
||
|
|
<strong>{% trans %}update_manager.docker.new_version{% endtrans %}:</strong>
|
||
|
|
<span class="badge bg-success" data-docker-update-progress-target="newVersion">...</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Timeout Message #}
|
||
|
|
<div class="alert alert-warning mb-4 d-none" data-docker-update-progress-target="timeoutAlert">
|
||
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
||
|
|
{% trans %}update_manager.docker.timeout_message{% endtrans %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Error Message #}
|
||
|
|
<div class="alert alert-danger mb-4 d-none" data-docker-update-progress-target="errorAlert">
|
||
|
|
<i class="fas fa-times-circle me-2"></i>
|
||
|
|
<strong>{% trans %}update_manager.progress.error{% endtrans %}:</strong>
|
||
|
|
<span data-docker-update-progress-target="errorMessage"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Steps Timeline - matches git progress style #}
|
||
|
|
<div class="card mb-4">
|
||
|
|
<div class="card-header">
|
||
|
|
<i class="fas fa-list-ol me-2"></i>{% trans %}update_manager.docker.steps{% endtrans %}
|
||
|
|
</div>
|
||
|
|
<div class="card-body p-0">
|
||
|
|
<ul class="list-group list-group-flush">
|
||
|
|
{# Step 1: Trigger Watchtower #}
|
||
|
|
<li class="list-group-item d-flex align-items-center" data-docker-update-progress-target="stepRow" data-step="trigger">
|
||
|
|
<i class="fas fa-check-circle text-success me-3" data-docker-update-progress-target="stepIcon"></i>
|
||
|
|
<div class="flex-grow-1">
|
||
|
|
<strong>{% trans %}update_manager.docker.step_trigger{% endtrans %}</strong>
|
||
|
|
<br><small class="text-muted" data-docker-update-progress-target="stepDetail">{% trans %}update_manager.docker.step_trigger_desc{% endtrans %}</small>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted step-timestamp" data-docker-update-progress-target="stepTime"></small>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
{# Step 2: Pull Image #}
|
||
|
|
<li class="list-group-item d-flex align-items-center" data-docker-update-progress-target="stepRow" data-step="pull">
|
||
|
|
<i class="fas fa-spinner fa-spin text-primary me-3" data-docker-update-progress-target="stepIcon"></i>
|
||
|
|
<div class="flex-grow-1">
|
||
|
|
<strong>{% trans %}update_manager.docker.step_pull{% endtrans %}</strong>
|
||
|
|
<br><small class="text-muted" data-docker-update-progress-target="stepDetail">{% trans %}update_manager.docker.step_pull_desc{% endtrans %}</small>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted step-timestamp" data-docker-update-progress-target="stepTime"></small>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
{# Step 3: Stop Container #}
|
||
|
|
<li class="list-group-item d-flex align-items-center text-muted" data-docker-update-progress-target="stepRow" data-step="stop">
|
||
|
|
<i class="fas fa-circle me-3" data-docker-update-progress-target="stepIcon"></i>
|
||
|
|
<div class="flex-grow-1">
|
||
|
|
<strong>{% trans %}update_manager.docker.step_stop{% endtrans %}</strong>
|
||
|
|
<br><small class="text-muted" data-docker-update-progress-target="stepDetail">{% trans %}update_manager.docker.step_stop_desc{% endtrans %}</small>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted step-timestamp" data-docker-update-progress-target="stepTime"></small>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
{# Step 4: Restart Container #}
|
||
|
|
<li class="list-group-item d-flex align-items-center text-muted" data-docker-update-progress-target="stepRow" data-step="restart">
|
||
|
|
<i class="fas fa-circle me-3" data-docker-update-progress-target="stepIcon"></i>
|
||
|
|
<div class="flex-grow-1">
|
||
|
|
<strong>{% trans %}update_manager.docker.step_restart{% endtrans %}</strong>
|
||
|
|
<br><small class="text-muted" data-docker-update-progress-target="stepDetail">{% trans %}update_manager.docker.step_restart_desc{% endtrans %}</small>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted step-timestamp" data-docker-update-progress-target="stepTime"></small>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
{# Step 5: Health Check #}
|
||
|
|
<li class="list-group-item d-flex align-items-center text-muted" data-docker-update-progress-target="stepRow" data-step="health">
|
||
|
|
<i class="fas fa-circle me-3" data-docker-update-progress-target="stepIcon"></i>
|
||
|
|
<div class="flex-grow-1">
|
||
|
|
<strong>{% trans %}update_manager.docker.step_health{% endtrans %}</strong>
|
||
|
|
<br><small class="text-muted" data-docker-update-progress-target="stepDetail">{% trans %}update_manager.docker.step_health_desc{% endtrans %}</small>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted step-timestamp" data-docker-update-progress-target="stepTime"></small>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
{# Step 6: Verify Version #}
|
||
|
|
<li class="list-group-item d-flex align-items-center text-muted" data-docker-update-progress-target="stepRow" data-step="verify">
|
||
|
|
<i class="fas fa-circle me-3" data-docker-update-progress-target="stepIcon"></i>
|
||
|
|
<div class="flex-grow-1">
|
||
|
|
<strong>{% trans %}update_manager.docker.step_verify{% endtrans %}</strong>
|
||
|
|
<br><small class="text-muted" data-docker-update-progress-target="stepDetail">{% trans %}update_manager.docker.step_verify_desc{% endtrans %}</small>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted step-timestamp" data-docker-update-progress-target="stepTime"></small>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Elapsed Time #}
|
||
|
|
<div class="text-center text-muted small mb-3">
|
||
|
|
<i class="fas fa-clock me-1"></i>
|
||
|
|
{% trans %}update_manager.docker.elapsed{% endtrans %}:
|
||
|
|
<span data-docker-update-progress-target="elapsedTime">0s</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Actions - shown after completion or timeout #}
|
||
|
|
<div class="text-center d-none" data-docker-update-progress-target="actions">
|
||
|
|
<a href="{{ path('admin_update_manager') }}" class="btn btn-secondary me-2">
|
||
|
|
<i class="fas fa-arrow-left me-1"></i> {% trans %}update_manager.progress.back{% endtrans %}
|
||
|
|
</a>
|
||
|
|
<a href="/" class="btn btn-primary">
|
||
|
|
<i class="fas fa-home me-1"></i> {% trans %}update_manager.docker.go_to_homepage{% endtrans %}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{# Warning Notice #}
|
||
|
|
<div class="alert alert-warning mt-4" data-docker-update-progress-target="warningAlert">
|
||
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
||
|
|
<strong>{% trans %}update_manager.docker.warning{% endtrans %}:</strong>
|
||
|
|
{% trans %}update_manager.docker.do_not_close{% endtrans %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|