137 lines
5.7 KiB
HTML
137 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Firewall Stress Test Report</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3"></script>
|
|
<style>
|
|
body { font-family: 'Helvetica Neue', Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 24px; color: #333; }
|
|
h1 { color: #1a1a2e; border-bottom: 2px solid #16213e; padding-bottom: 8px; }
|
|
h2 { color: #16213e; margin-top: 32px; }
|
|
.meta { color: #666; font-size: 14px; margin-bottom: 24px; }
|
|
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 16px 0; }
|
|
.summary-card { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px; text-align: center; }
|
|
.summary-card .value { font-size: 28px; font-weight: 700; color: #16213e; }
|
|
.summary-card .label { font-size: 12px; color: #666; margin-top: 4px; }
|
|
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
|
|
th { background: #16213e; color: #fff; padding: 8px 12px; text-align: left; }
|
|
td { padding: 6px 12px; border-bottom: 1px solid #dee2e6; }
|
|
tr:nth-child(even) { background: #f8f9fa; }
|
|
.chart-container { position: relative; height: 300px; margin: 16px 0; }
|
|
.event-type { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
|
.event-reboot_start { background: #fce4e4; color: #c0392b; }
|
|
.event-reboot_complete { background: #d4edda; color: #155724; }
|
|
.event-port_down { background: #fff3cd; color: #856404; }
|
|
.event-port_up { background: #d4edda; color: #155724; }
|
|
.event-reset_start, .event-reset_complete, .event-reset_settling { background: #cce5ff; color: #004085; }
|
|
.event-carp_mismatch { background: #fce4e4; color: #c0392b; }
|
|
.event-error { background: #fce4e4; color: #c0392b; }
|
|
@media print {
|
|
body { font-size: 11px; }
|
|
.no-print { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Firewall Stress Test Report</h1>
|
|
<p class="meta">Generated: {{ generated_at }}</p>
|
|
|
|
<h2>Summary</h2>
|
|
<div class="summary-grid">
|
|
<div class="summary-card">
|
|
<div class="value">{{ report.reboot_count }}</div>
|
|
<div class="label">Total Reboots</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="value">{{ report.port_flap_count }}</div>
|
|
<div class="label">Port Flaps</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="value">{{ report.reset_count }}</div>
|
|
<div class="label">State Resets</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="value">{{ report.error_count }}</div>
|
|
<div class="label">Errors</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Bandwidth Statistics</h2>
|
|
<div class="summary-grid">
|
|
<div class="summary-card">
|
|
<div class="value">{{ "{:.1}"|format(report.avg_bandwidth) }}</div>
|
|
<div class="label">Avg Bandwidth (Mbps)</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="value">{{ "{:.1}"|format(report.min_bandwidth) }}</div>
|
|
<div class="label">Min Bandwidth (Mbps)</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="value">{{ "{:.1}"|format(report.max_bandwidth) }}</div>
|
|
<div class="label">Max Bandwidth (Mbps)</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="value">{{ "{:.2}"|format(report.avg_loss) }}</div>
|
|
<div class="label">Avg Packet Loss (%)</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="value">{{ "{:.1}"|format(report.total_transfer / 1073741824.0) }}</div>
|
|
<div class="label">Total Transfer (GB)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Bandwidth Over Time</h2>
|
|
<div class="chart-container">
|
|
<canvas id="bw-chart"></canvas>
|
|
</div>
|
|
|
|
<h2>Event Log ({{ report.events.len() }} events)</h2>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Time</th><th>Type</th><th>Target</th><th>Details</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for event in report.events %}
|
|
<tr>
|
|
<td>{{ event.timestamp.format("%H:%M:%S") }}</td>
|
|
<td><span class="event-type event-{{ event.event_type }}">{{ event.event_type }}</span></td>
|
|
<td>{{ event.target }}</td>
|
|
<td>{{ event.details.as_deref().unwrap_or("") }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
const labels = {{ bandwidth_labels_json }};
|
|
const values = {{ bandwidth_values_json }};
|
|
const ctx = document.getElementById('bw-chart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels.map(l => new Date(l)),
|
|
datasets: [{
|
|
label: 'Bandwidth (Mbps)',
|
|
data: values,
|
|
borderColor: '#16213e',
|
|
backgroundColor: '#16213e22',
|
|
fill: true,
|
|
tension: 0.3,
|
|
pointRadius: 1,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { type: 'time', time: { unit: 'minute' } },
|
|
y: { title: { display: true, text: 'Mbps' } }
|
|
},
|
|
plugins: { legend: { display: false } },
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|