257 Zeilen
8.1 KiB
HTML
257 Zeilen
8.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}System Status{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.service-card {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
border-left: 5px solid #dee2e6;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.service-card.healthy {
|
|
border-left-color: #28a745;
|
|
}
|
|
|
|
.service-card.unhealthy {
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
.service-card.down {
|
|
border-left-color: #dc3545;
|
|
}
|
|
|
|
.status-badge {
|
|
font-size: 0.875rem;
|
|
padding: 5px 15px;
|
|
border-radius: 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-healthy {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-unhealthy {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.status-down {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.response-time {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.service-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.grafana-embed {
|
|
width: 100%;
|
|
height: 400px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.metric-card {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #495057;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h2><i class="bi bi-pc-display"></i> System Status</h2>
|
|
<p class="text-muted">Übersicht über die Gesundheit aller Services</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button class="btn btn-outline-primary" onclick="location.reload()">
|
|
<i class="bi bi-arrow-clockwise"></i> Aktualisieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Status Grid -->
|
|
<div class="row">
|
|
{% for service in services %}
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="service-card {{ service.status }}">
|
|
<div class="text-center">
|
|
{% if service.name == 'License Server' %}
|
|
<i class="bi bi-shield-check service-icon text-primary"></i>
|
|
{% elif service.name == 'PostgreSQL' %}
|
|
<i class="bi bi-database service-icon text-info"></i>
|
|
{% elif service.name == 'Redis' %}
|
|
<i class="bi bi-memory service-icon text-danger"></i>
|
|
{% elif service.name == 'Auth Service' %}
|
|
<i class="bi bi-key service-icon text-warning"></i>
|
|
{% elif service.name == 'Analytics Service' %}
|
|
<i class="bi bi-graph-up service-icon text-success"></i>
|
|
{% else %}
|
|
<i class="bi bi-server service-icon text-secondary"></i>
|
|
{% endif %}
|
|
|
|
<h5>{{ service.name }}</h5>
|
|
|
|
<div class="mb-3">
|
|
{% if service.status == 'healthy' %}
|
|
<span class="status-badge status-healthy">
|
|
<i class="bi bi-check-circle"></i> Healthy
|
|
</span>
|
|
{% elif service.status == 'unhealthy' %}
|
|
<span class="status-badge status-unhealthy">
|
|
<i class="bi bi-exclamation-circle"></i> Unhealthy
|
|
</span>
|
|
{% else %}
|
|
<span class="status-badge status-down">
|
|
<i class="bi bi-x-circle"></i> Down
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if service.response_time %}
|
|
<div class="response-time">
|
|
<i class="bi bi-speedometer2"></i> {{ "%.1f"|format(service.response_time) }}ms
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- System Metrics -->
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="bi bi-cpu"></i> System Metriken</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="cpu-usage">-</div>
|
|
<div class="metric-label">CPU Auslastung</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="memory-usage">-</div>
|
|
<div class="metric-label">RAM Auslastung</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="disk-usage">-</div>
|
|
<div class="metric-label">Festplatte</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="metric-card">
|
|
<div class="metric-value" id="uptime">-</div>
|
|
<div class="metric-label">Uptime</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grafana Dashboard Embed (if available) -->
|
|
{% if prometheus_data %}
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="bi bi-graph-up"></i> Performance Dashboard</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-info">
|
|
<i class="bi bi-info-circle"></i>
|
|
Für detaillierte Metriken besuchen Sie das
|
|
<a href="http://localhost:3000" target="_blank" class="alert-link">Grafana Dashboard</a>
|
|
</div>
|
|
<!-- Optionally embed Grafana dashboard here -->
|
|
<!-- <iframe src="http://localhost:3000/d/license-server-overview?orgId=1&theme=light" class="grafana-embed"></iframe> -->
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="bi bi-lightning"></i> Quick Actions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<button class="btn btn-outline-primary w-100 mb-2" onclick="restartService('license-server')">
|
|
<i class="bi bi-arrow-clockwise"></i> License Server neustarten
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<button class="btn btn-outline-warning w-100 mb-2" onclick="clearCache()">
|
|
<i class="bi bi-trash"></i> Cache leeren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Mock functions for demonstration
|
|
function restartService(service) {
|
|
if (confirm(`Möchten Sie ${service} wirklich neustarten?`)) {
|
|
alert('Service-Neustart wurde initiiert. Dies kann einige Minuten dauern.');
|
|
}
|
|
}
|
|
|
|
function clearCache() {
|
|
if (confirm('Möchten Sie den Cache wirklich leeren?')) {
|
|
alert('Cache wurde geleert.');
|
|
}
|
|
}
|
|
|
|
// Fetch system metrics (mock data for now)
|
|
function updateSystemMetrics() {
|
|
// In production, these would come from actual monitoring endpoints
|
|
document.getElementById('cpu-usage').textContent = Math.floor(Math.random() * 40 + 20) + '%';
|
|
document.getElementById('memory-usage').textContent = Math.floor(Math.random() * 30 + 40) + '%';
|
|
document.getElementById('disk-usage').textContent = Math.floor(Math.random() * 20 + 60) + '%';
|
|
document.getElementById('uptime').textContent = '14 Tage';
|
|
}
|
|
|
|
// Update metrics on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateSystemMetrics();
|
|
|
|
// Auto-refresh every 30 seconds
|
|
setInterval(updateSystemMetrics, 30000);
|
|
});
|
|
</script>
|
|
{% endblock %} |