ryanv/jenkins-docker-deploy-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
ryanv
2026-03-07 03:43:50 +00:00
parent 365cb6692e
commit 17d9033152
17 changed files with 1349 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
templates/report.html Normal file
View File

@@ -0,0 +1,177 @@
{% extends "base.html" %}
{% block title %}{{ service.name }} - Report{% endblock %}
{% block content %}
<h2>{{ service.name }}</h2>
<p>
<code>{{ service.protocol | upper }}: {{ service.target }}</code>
<a href="{{ url_for('edit_service', service_id=service.id) }}" style="margin-left: 1rem;">Edit</a>
</p>
<div class="period-section">
<h3>Uptime by Period</h3>
<div class="preset-buttons">
<a href="{{ url_for('report', service_id=service.id) }}" class="preset-btn{% if not preset %} preset-active{% endif %}">All time</a>
<a href="{{ url_for('report', service_id=service.id, preset='24h') }}" class="preset-btn{% if preset == '24h' %} preset-active{% endif %}">Last 24h</a>
<a href="{{ url_for('report', service_id=service.id, preset='7d') }}" class="preset-btn{% if preset == '7d' %} preset-active{% endif %}">Last 7 days</a>
<a href="{{ url_for('report', service_id=service.id, preset='30d') }}" class="preset-btn{% if preset == '30d' %} preset-active{% endif %}">Last 30 days</a>
</div>
{% if period_label %}
<p class="period-label">Showing: {{ period_label }}</p>
{% endif %}
<form method="get" action="{{ url_for('report', service_id=service.id) }}" class="date-range-form">
<label>From</label>
<input type="datetime-local" name="from" value="{{ from_date }}" placeholder="Start (optional)">
<label>To</label>
<input type="datetime-local" name="to" value="{{ to_date }}" placeholder="End (optional)">
<button type="submit">Apply</button>
{% if from_date or to_date %}
<a href="{{ url_for('report', service_id=service.id) }}">Clear</a>
{% endif %}
</form>
</div>
<div class="stats-grid">
<div class="stat-card">
<span class="stat-label">Uptime{% if from_date or to_date %} (period){% endif %}</span>
<span class="stat-value">{{ stats.uptime_pct }}%</span>
</div>
<div class="stat-card">
<span class="stat-label">Checks</span>
<span class="stat-value">{{ stats.total }}</span>
</div>
<div class="stat-card">
<span class="stat-label">Avg Latency</span>
<span class="stat-value">{{ stats.avg_ms or '-' }}{% if stats.avg_ms %} ms{% endif %}</span>
</div>
<div class="stat-card">
<span class="stat-label">Min</span>
<span class="stat-value">{{ (stats.min_ms | round(0) | int) if stats.min_ms is not none else '-' }}{% if stats.min_ms is not none %} ms{% endif %}</span>
</div>
<div class="stat-card">
<span class="stat-label">Max</span>
<span class="stat-value">{{ (stats.max_ms | round(0) | int) if stats.max_ms is not none else '-' }}{% if stats.max_ms is not none %} ms{% endif %}</span>
</div>
</div>
<div class="chart-container">
<h3>Response Time</h3>
{% if chart_checks %}
<div class="chart-wrapper">
<canvas id="response-chart"></canvas>
</div>
{% else %}
<p class="chart-empty">No check data yet. Checks will appear after the first run.</p>
{% endif %}
</div>
<h3>Recent Checks</h3>
<form method="get" action="{{ url_for('report', service_id=service.id) }}" class="checks-filter-form">
<input type="hidden" name="preset" value="{{ preset or '' }}">
<input type="hidden" name="from" value="{{ from_date }}">
<input type="hidden" name="to" value="{{ to_date }}">
<select name="status">
<option value="">All</option>
<option value="ok" {% if status_filter == 'ok' %}selected{% endif %}>OK only</option>
<option value="error" {% if status_filter == 'error' %}selected{% endif %}>Errors only</option>
</select>
<input type="text" name="search" value="{{ search }}" placeholder="Search error message...">
<button type="submit">Filter</button>
</form>
<table class="checks-table">
<thead>
<tr>
<th>Timestamp</th>
<th>Status</th>
<th>Response (ms)</th>
<th>Error / Reason</th>
</tr>
</thead>
<tbody>
{% for c in checks %}
<tr>
<td>{{ c.timestamp[:19] }}</td>
<td>
{% if c.success %}
<span class="badge badge-up">OK</span>
{% else %}
<span class="badge badge-down">ERROR</span>
{% endif %}
</td>
<td>{{ (c.response_time_ms | round(0) | int) if c.response_time_ms is not none else '-' }}</td>
<td class="error-cell" {% if c.error_message %}title="{{ c.error_message | e }}"{% endif %}>{{ c.error_message or '-' }}</td>
</tr>
{% else %}
<tr>
<td colspan="4">No checks yet.{% if status_filter or search %} No matches for filter.{% endif %}</td>
</tr>
{% endfor %}
</tbody>
</table>
<p>
<a href="/">&larr; Back to Dashboard</a>
<span style="margin-left: 1rem;">
<button type="button" class="btn-delete" data-id="{{ service.id }}" data-name="{{ service.name }}">Delete Service</button>
</span>
</p>
{% if chart_checks %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
(function() {
const canvas = document.getElementById('response-chart');
if (!canvas) return;
const chartData = {{ chart_checks | tojson }};
if (chartData.length === 0) return;
const reversed = chartData.slice().reverse();
const labels = reversed.map(c => c.timestamp ? c.timestamp.slice(0, 19).replace('T', ' ') : '');
const values = reversed.map(c => c.response_time_ms != null ? c.response_time_ms : null);
const successColors = reversed.map(c => c.success ? 'rgba(34, 197, 94, 0.8)' : 'rgba(239, 68, 68, 0.8)');
new Chart(canvas, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Response (ms)',
data: values,
borderColor: 'rgba(59, 130, 246, 0.9)',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
fill: true,
tension: 0.2,
pointBackgroundColor: successColors,
pointBorderColor: successColors,
pointRadius: 3
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
x: {
ticks: { maxTicksLimit: 8, maxRotation: 45 },
grid: { color: 'rgba(148, 163, 184, 0.2)' }
},
y: {
beginAtZero: true,
ticks: { callback: v => v + ' ms' },
grid: { color: 'rgba(148, 163, 184, 0.2)' }
}
}
}
});
})();
</script>
{% endif %}
<script>
document.querySelector('.btn-delete')?.addEventListener('click', async () => {
if (!confirm('Delete "{{ service.name }}"?')) return;
const res = await fetch('/api/services/{{ service.id }}', { method: 'DELETE' });
if (res.ok) window.location.href = '/';
else alert('Failed to delete');
});
</script>
{% endblock %}