{% extends "layout.html.tera" %}
{% block content %}
<h1 class="text-2xl font-semibold mb-4">{{ title | default(value="Metrics Summary") }}</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
<div class="kpi"><div class="kpi-title">Total</div><div class="kpi-value">{{ stats.total_jobs }}</div></div>
<div class="kpi"><div class="kpi-title">Success</div><div class="kpi-value">{{ stats.success_jobs }}</div></div>
<div class="kpi"><div class="kpi-title">Failed</div><div class="kpi-value">{{ stats.failed_jobs }}</div></div>
<div class="kpi"><div class="kpi-title">Scheduled</div><div class="kpi-value">{{ stats.scheduled_jobs }}</div></div>
<div class="kpi"><div class="kpi-title">Active Workers</div><div class="kpi-value">{{ stats.active_workers }}</div></div>
</div>
<div class="card p-4">
<h2 class="text-sm mb-3 text-slate-600 dark:text-slate-300">Last 7 days</h2>
<canvas id="jobsChart" height="80"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels = {{ chart.labels | json_encode | safe }};
const success = {{ chart.success | json_encode | safe }};
const failed = {{ chart.failed | json_encode | safe }};
const ctx = document.getElementById('jobsChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels,
datasets: [
{ label: 'Success', data: success, tension: .35 },
{ label: 'Failed', data: failed, tension: .35 }
]
},
options: { responsive: true, plugins: { legend: { position: 'top' } } }
});
</script>
{% endblock content %}