236 lines
9.8 KiB
HTML
236 lines
9.8 KiB
HTML
{% extends "base.html" %}
|
|
{% set active_page = 'jobs' %}
|
|
{% block title %}Backup Jobs — vSphere Backup Manager{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.jobs-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
}
|
|
.jobs-summary {
|
|
display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;
|
|
}
|
|
.jobs-stat {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 12px 20px;
|
|
text-align: center;
|
|
min-width: 100px;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.jobs-stat-val { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
|
|
.jobs-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
|
|
.jobs-table-wrap {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.status-icon { font-size: 16px; }
|
|
|
|
.job-actions { display: flex; gap: 8px; }
|
|
|
|
.empty-state {
|
|
text-align: center; padding: 64px; color: var(--text-secondary);
|
|
}
|
|
.empty-icon { font-size: 52px; margin-bottom: 16px; opacity: .4; }
|
|
|
|
.running-pulse {
|
|
animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: .6; transform: scale(0.98); }
|
|
}
|
|
|
|
.schedule-tag {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
background: rgba(6, 182, 212, 0.08);
|
|
border: 1px solid rgba(6, 182, 212, 0.2);
|
|
color: var(--accent-2);
|
|
font-size: 11px; padding: 3px 10px; border-radius: 100px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="topbar">
|
|
<div>
|
|
<div class="topbar-title">Backup Jobs</div>
|
|
<div class="topbar-subtitle">All scheduled and completed backup jobs</div>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<a href="/jobs/create" class="btn btn-primary btn-sm">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Create Job
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- Summary chips -->
|
|
<div class="jobs-summary">
|
|
<div class="jobs-stat">
|
|
<div class="jobs-stat-val">{{ jobs|length }}</div>
|
|
<div class="jobs-stat-lbl">Total</div>
|
|
</div>
|
|
<div class="jobs-stat">
|
|
<div class="jobs-stat-val" style="color:var(--accent)">{{ jobs|selectattr('status','equalto','running')|list|length }}</div>
|
|
<div class="jobs-stat-lbl">Running</div>
|
|
</div>
|
|
<div class="jobs-stat">
|
|
<div class="jobs-stat-val" style="color:var(--success)">{{ jobs|selectattr('status','equalto','finished')|list|length }}</div>
|
|
<div class="jobs-stat-lbl">Finished</div>
|
|
</div>
|
|
<div class="jobs-stat">
|
|
<div class="jobs-stat-val" style="color:var(--warning)">{{ jobs|selectattr('status','equalto','queued')|list|length }}</div>
|
|
<div class="jobs-stat-lbl">Queued</div>
|
|
</div>
|
|
<div class="jobs-stat">
|
|
<div class="jobs-stat-val" style="color:var(--danger)">{% set fcnt = namespace(n=0) %}{% for j in jobs %}{% if j.status.startswith('failed') %}{% set fcnt.n = fcnt.n + 1 %}{% endif %}{% endfor %}{{ fcnt.n }}</div>
|
|
<div class="jobs-stat-lbl">Failed</div>
|
|
</div>
|
|
<div class="jobs-stat">
|
|
<div class="jobs-stat-val" style="color:var(--accent-2)">{{ scheduled_count }}</div>
|
|
<div class="jobs-stat-lbl">Scheduled</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if jobs %}
|
|
<div class="jobs-table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Job</th>
|
|
<th>VM</th>
|
|
<th>Status</th>
|
|
<th>Schedule</th>
|
|
<th>Started</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for job in jobs %}
|
|
<tr>
|
|
<td>
|
|
<div style="font-weight:600;font-size:13px;">
|
|
{{ job.label or ('Job #' + job.id[:8]) }}
|
|
</div>
|
|
<div class="text-small text-muted mono">{{ job.id[:12] }}…</div>
|
|
</td>
|
|
<td>
|
|
<span style="font-weight:500;">{{ job.vm_name }}</span>
|
|
</td>
|
|
<td>
|
|
{% if job.status == 'running' %}
|
|
<span class="badge badge-purple running-pulse">Running</span>
|
|
{% elif job.status == 'finished' %}
|
|
<span class="badge badge-green">Finished</span>
|
|
{% elif job.status == 'queued' %}
|
|
<span class="badge badge-yellow">Queued</span>
|
|
{% elif job.status.startswith('failed') %}
|
|
<span class="badge badge-red" title="{{ job.status }}">Failed</span>
|
|
{% else %}
|
|
<span class="badge badge-gray">{{ job.status }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if job.schedule_type and job.schedule_type != 'now' %}
|
|
<span class="schedule-tag" style="margin-bottom: 4px;">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;"><path d="M23 4v6h-6"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
|
|
{{ job.schedule_type|capitalize }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-muted text-small" style="display: block; margin-bottom: 4px;">One-time</span>
|
|
{% endif %}
|
|
<div class="text-muted" style="font-size:11px; margin-top: 2px;">
|
|
{% if job.retention_type == 'keep_count' %}
|
|
Keep: {{ job.retention_value }} backups
|
|
{% elif job.retention_type == 'keep_days' %}
|
|
Keep: {{ job.retention_value }} days
|
|
{% else %}
|
|
Keep: All
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td class="text-small text-muted">
|
|
{{ job.started_fmt }}
|
|
</td>
|
|
<td>
|
|
<div class="job-actions" style="display: flex; gap: 8px;">
|
|
<a href="/job/{{ job.id }}" class="btn btn-ghost btn-sm">View</a>
|
|
{% if job.status != 'running' and job.status != 'queued' %}
|
|
<form method="post" action="/job/{{ job.id }}/run" style="margin: 0;">
|
|
<button class="btn btn-primary btn-sm" type="submit">Run Now</button>
|
|
</form>
|
|
{% endif %}
|
|
{% if job.status == 'running' or job.status == 'queued' %}
|
|
<form method="post" action="/job/{{ job.id }}/stop"
|
|
style="margin: 0;"
|
|
onsubmit="return confirm('Are you sure you want to stop this running backup?')">
|
|
<button class="btn btn-danger btn-sm" type="submit">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
|
|
Force Stop
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
{% if job.schedule_id %}
|
|
<form method="post" action="/job/{{ job.id }}/cancel-schedule"
|
|
style="margin: 0;"
|
|
onsubmit="return confirm('Cancel this schedule?')">
|
|
<button class="btn btn-secondary btn-sm" type="submit">Cancel Schedule</button>
|
|
</form>
|
|
{% endif %}
|
|
{% if job.status != 'running' and job.status != 'queued' %}
|
|
<form method="post" action="/job/{{ job.id }}/delete"
|
|
style="margin: 0;"
|
|
onsubmit="return confirm('Are you sure you want to delete this job? This will cancel any active schedule and delete the job logs.')">
|
|
<button class="btn btn-danger btn-sm" type="submit">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
|
|
Delete
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<div class="empty-icon" style="display: flex; justify-content: center; margin-bottom: 16px;">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--text-muted);"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>
|
|
</div>
|
|
<p>No backup jobs yet.</p>
|
|
<a href="/jobs/create" class="btn btn-primary" style="margin-top:16px;">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Create your first job
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Auto-refresh jobs page every 8 seconds if any jobs are running
|
|
const hasRunning = {{ 'true' if jobs|selectattr('status','equalto','running')|list|length > 0 else 'false' }};
|
|
if (hasRunning) {
|
|
setTimeout(() => location.reload(), 8000);
|
|
}
|
|
</script>
|
|
{% endblock %}
|