nordabiz/templates/admin/health_dashboard.html
Maciej Pienczyn 110d971dca
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
feat: migrate prod docs to OVH VPS + UTC→Warsaw timezone in all templates
Production moved from on-prem VM 249 (10.22.68.249) to OVH VPS
(57.128.200.27, inpi-vps-waw01). Updated ALL documentation, slash
commands, memory files, architecture docs, and deploy procedures.

Added |local_time Jinja filter (UTC→Europe/Warsaw) and converted
155 .strftime() calls across 71 templates so timestamps display
in Polish timezone regardless of server timezone.

Also includes: created_by_id tracking, abort import fix, ICS
calendar fix for missing end times, Pros Poland data cleanup.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 13:41:53 +02:00

524 lines
15 KiB
HTML

{% extends "base.html" %}
{% block title %}Health Check - Panel Admina{% endblock %}
{% block extra_css %}
<style>
.health-container {
max-width: 1400px;
margin: 0 auto;
}
.health-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-xl);
flex-wrap: wrap;
gap: var(--spacing-lg);
}
.health-title h1 {
font-size: var(--font-size-2xl);
margin-bottom: var(--spacing-xs);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.health-meta {
display: flex;
gap: var(--spacing-lg);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
/* Overall Status Banner */
.status-banner {
padding: var(--spacing-lg) var(--spacing-xl);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-xl);
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.status-banner.ok {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
border: 2px solid #22c55e;
}
.status-banner.degraded {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid #f59e0b;
}
.status-banner.critical {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
border: 2px solid #ef4444;
}
.status-icon {
font-size: 3rem;
}
.status-info h2 {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-xs);
}
.status-info p {
color: var(--text-secondary);
margin: 0;
}
.status-stats {
margin-left: auto;
display: flex;
gap: var(--spacing-xl);
text-align: center;
}
.stat-item {
display: flex;
flex-direction: column;
}
.stat-value {
font-size: var(--font-size-2xl);
font-weight: 700;
}
.stat-value.ok { color: #22c55e; }
.stat-value.warning { color: #f59e0b; }
.stat-value.error { color: #ef4444; }
.stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
/* Category Grid */
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--spacing-lg);
}
.category-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.category-header {
padding: var(--spacing-md) var(--spacing-lg);
background: var(--background);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.category-header h3 {
font-size: var(--font-size-base);
font-weight: 600;
margin: 0;
}
.category-count {
margin-left: auto;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
/* Endpoint Items */
.endpoints-list {
padding: var(--spacing-sm);
}
.endpoint-item {
display: flex;
align-items: center;
padding: var(--spacing-md);
border-radius: var(--radius);
margin-bottom: var(--spacing-xs);
transition: var(--transition);
}
.endpoint-item:last-child {
margin-bottom: 0;
}
.endpoint-item:hover {
background: var(--background);
}
.endpoint-item.ok {
border-left: 4px solid #22c55e;
}
.endpoint-item.warning {
border-left: 4px solid #f59e0b;
background: #fffbeb;
}
.endpoint-item.error, .endpoint-item.not_found {
border-left: 4px solid #ef4444;
background: #fef2f2;
}
.endpoint-status {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
margin-right: var(--spacing-md);
flex-shrink: 0;
}
.endpoint-status.ok {
background: #dcfce7;
}
.endpoint-status.warning {
background: #fef3c7;
}
.endpoint-status.error, .endpoint-status.not_found {
background: #fee2e2;
}
.endpoint-info {
flex: 1;
min-width: 0;
}
.endpoint-name {
font-weight: 500;
color: var(--text-primary);
margin-bottom: 2px;
}
.endpoint-path {
font-size: var(--font-size-xs);
color: var(--text-secondary);
font-family: monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.endpoint-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.endpoint-code {
font-size: var(--font-size-sm);
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius);
}
.endpoint-code.ok {
background: #dcfce7;
color: #166534;
}
.endpoint-code.warning {
background: #fef3c7;
color: #92400e;
}
.endpoint-code.error {
background: #fee2e2;
color: #991b1b;
}
.endpoint-time {
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
/* Auto-refresh controls */
.refresh-controls {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--background);
border-radius: var(--radius);
}
.refresh-btn {
padding: var(--spacing-sm) var(--spacing-md);
background: var(--primary);
color: white;
border: none;
border-radius: var(--radius);
cursor: pointer;
font-size: var(--font-size-sm);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.refresh-btn:hover {
background: var(--primary-dark);
}
.refresh-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.countdown {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
/* Back link */
.back-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--text-secondary);
text-decoration: none;
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-lg);
}
.back-link:hover {
color: var(--primary);
}
/* Response time colors */
.time-fast { color: #22c55e; }
.time-medium { color: #f59e0b; }
.time-slow { color: #ef4444; }
/* Spinning animation for refresh */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinning {
animation: spin 1s linear infinite;
}
/* Responsive */
@media (max-width: 768px) {
.categories-grid {
grid-template-columns: 1fr;
}
.status-banner {
flex-direction: column;
text-align: center;
}
.status-stats {
margin-left: 0;
width: 100%;
justify-content: center;
}
.health-header {
flex-direction: column;
}
}
</style>
{% endblock %}
{% block content %}
<div class="health-container">
<a href="{{ url_for('admin.admin_status') }}" class="back-link">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
Powrót do Status systemu
</a>
<div class="health-header">
<div class="health-title">
<h1>
<span style="font-size: 1.5em;">🏥</span>
Health Check Dashboard
</h1>
<div class="health-meta">
<span>Ostatnia aktualizacja: <strong id="last-update">{{ generated_at|local_time('%H:%M:%S') }}</strong></span>
<span>Auto-refresh: <strong id="countdown">2:00</strong></span>
</div>
</div>
<div class="refresh-controls">
<button class="refresh-btn" onclick="refreshNow()" id="refresh-btn">
<span id="refresh-icon">🔄</span>
Odśwież teraz
</button>
</div>
</div>
<!-- Overall Status Banner -->
<div class="status-banner {{ summary.overall_status }}" id="status-banner">
<div class="status-icon">
{% if summary.overall_status == 'ok' %}
{% elif summary.overall_status == 'degraded' %}
⚠️
{% else %}
🚨
{% endif %}
</div>
<div class="status-info">
<h2>
{% if summary.overall_status == 'ok' %}
Wszystkie systemy działają poprawnie
{% elif summary.overall_status == 'degraded' %}
System działa z ograniczeniami
{% else %}
Wykryto krytyczne problemy!
{% endif %}
</h2>
<p>{{ summary.health_percent }}% endpointów odpowiada poprawnie | Średni czas odpowiedzi: {{ summary.avg_response_time }}ms</p>
</div>
<div class="status-stats">
<div class="stat-item">
<span class="stat-value ok" id="stat-ok">{{ summary.ok }}</span>
<span class="stat-label">OK</span>
</div>
<div class="stat-item">
<span class="stat-value warning" id="stat-warning">{{ summary.warning }}</span>
<span class="stat-label">Ostrzeżenia</span>
</div>
<div class="stat-item">
<span class="stat-value error" id="stat-error">{{ summary.error }}</span>
<span class="stat-label">Błędy</span>
</div>
</div>
</div>
<!-- Categories Grid -->
<div class="categories-grid">
{% for cat_id, category in categories.items() %}
{% if category.endpoints %}
<div class="category-card">
<div class="category-header">
<span style="font-size: 1.3em;">{{ category.icon }}</span>
<h3>{{ category.name }}</h3>
<span class="category-count">{{ category.endpoints|length }} endpoint{{ 'ów' if category.endpoints|length > 1 else '' }}</span>
</div>
<div class="endpoints-list">
{% for ep in category.endpoints %}
<div class="endpoint-item {{ ep.status }}">
<div class="endpoint-status {{ ep.status }}">
{% if ep.status == 'ok' %}✓{% elif ep.status == 'warning' %}!{% else %}✗{% endif %}
</div>
<div class="endpoint-info">
<div class="endpoint-name">{{ ep.name }}</div>
<div class="endpoint-path">{{ ep.path }}</div>
</div>
<div class="endpoint-meta">
<span class="endpoint-code {{ 'ok' if ep.status == 'ok' else ('warning' if ep.status == 'warning' else 'error') }}">
{{ ep.status_code }}
</span>
{% if ep.response_time %}
<span class="endpoint-time {% if ep.response_time < 100 %}time-fast{% elif ep.response_time < 500 %}time-medium{% else %}time-slow{% endif %}">
{{ ep.response_time }}ms
</span>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
<!-- Legend -->
<div style="margin-top: var(--spacing-xl); padding: var(--spacing-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);">
<h4 style="margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); color: var(--text-secondary);">Legenda kodów HTTP:</h4>
<div style="display: flex; gap: var(--spacing-xl); flex-wrap: wrap; font-size: var(--font-size-sm);">
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<span class="endpoint-code ok">200</span>
<span>OK - strona działa</span>
</div>
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<span class="endpoint-code ok">302</span>
<span>Redirect - przekierowanie (np. do logowania)</span>
</div>
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<span class="endpoint-code ok">429</span>
<span>Rate Limited - ochrona przed botami (działa!)</span>
</div>
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<span class="endpoint-code warning">403</span>
<span>Forbidden - brak uprawnień</span>
</div>
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<span class="endpoint-code error">404</span>
<span>Not Found - strona nie istnieje</span>
</div>
<div style="display: flex; align-items: center; gap: var(--spacing-xs);">
<span class="endpoint-code error">500</span>
<span>Server Error - błąd serwera</span>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
// Auto-refresh every 2 minutes
let countdownSeconds = 120;
let isRefreshing = false;
function updateCountdown() {
if (isRefreshing) return;
const minutes = Math.floor(countdownSeconds / 60);
const seconds = countdownSeconds % 60;
document.getElementById('countdown').textContent =
`${minutes}:${seconds.toString().padStart(2, '0')}`;
countdownSeconds--;
if (countdownSeconds < 0) {
refreshNow();
countdownSeconds = 120;
}
}
async function refreshNow() {
if (isRefreshing) return;
isRefreshing = true;
const btn = document.getElementById('refresh-btn');
const icon = document.getElementById('refresh-icon');
btn.disabled = true;
icon.classList.add('spinning');
try {
// Just reload the page for simplicity - the full check takes some time anyway
window.location.reload();
} catch (error) {
console.error('Refresh failed:', error);
isRefreshing = false;
btn.disabled = false;
icon.classList.remove('spinning');
}
}
// Start countdown
setInterval(updateCountdown, 1000);
{% endblock %}