Maciej Pienczyn
61a32d9bfa
Przeniesiono 9 tras do blueprints/admin/routes_status.py: - admin_status, api_admin_status - admin_health, api_admin_health - debug_panel - api_get_logs, api_logs_stream, api_clear_logs, api_test_log Zaktualizowano szablony na pełne nazwy blueprintów: - base.html: admin.admin_status, admin.admin_health - health_dashboard.html: admin.admin_status Dodano aliasy dla kompatybilności wstecznej. Stare trasy w app.py oznaczone jako _old_* (do usunięcia po weryfikacji). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
524 lines
15 KiB
HTML
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.strftime('%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 %}
|