117 lines
3.6 KiB
HTML
117 lines
3.6 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Dashboard - Whisper API Admin{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>🎯 Whisper API Dashboard</h1>
|
||
<div class="nav">
|
||
<a href="/admin" class="active">Dashboard</a>
|
||
<a href="/admin/keys">API Keys</a>
|
||
<a href="/admin/logout">Logout</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-value">{{ stats.total_requests }}</div>
|
||
<div class="stat-label">Requests (30 Tage)</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">{{ stats.success_rate }}%</div>
|
||
<div class="stat-label">Success Rate</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">{{ stats.avg_processing_time_ms }}ms</div>
|
||
<div class="stat-label">Ø Processing Time</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value">{{ model }}</div>
|
||
<div class="stat-label">Model</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>📊 Usage Chart (Last 30 Days)</h2>
|
||
<canvas id="usageChart" height="100"></canvas>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>📝 Recent Activity</h2>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Time</th>
|
||
<th>Endpoint</th>
|
||
<th>Duration</th>
|
||
<th>Status</th>
|
||
<th>Processing</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for log in stats.recent_logs[:10] %}
|
||
<tr>
|
||
<td>{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
|
||
<td>{{ log.endpoint }}</td>
|
||
<td>
|
||
{% if log.duration_seconds %}
|
||
{{ "%.1f"|format(log.duration_seconds) }}s
|
||
{% else %}
|
||
-
|
||
{% endif %}
|
||
</td>
|
||
<td>
|
||
<span class="badge badge-{{ 'success' if log.status == 'success' else 'danger' }}">
|
||
{{ log.status }}
|
||
</span>
|
||
</td>
|
||
<td>{{ log.processing_time_ms }}ms</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>ℹ️ System Info</h2>
|
||
<p><strong>Model:</strong> {{ model }}</p>
|
||
<p><strong>Log Retention:</strong> {{ retention_days }} days</p>
|
||
<p><strong>API Version:</strong> v1.0.0</p>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script>
|
||
const ctx = document.getElementById('usageChart').getContext('2d');
|
||
const dailyStats = {{ stats.daily_stats | tojson }};
|
||
|
||
new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: dailyStats.map(s => s.date),
|
||
datasets: [{
|
||
label: 'Requests',
|
||
data: dailyStats.map(s => s.count),
|
||
backgroundColor: 'rgba(102, 126, 234, 0.2)',
|
||
borderColor: 'rgba(102, 126, 234, 1)',
|
||
borderWidth: 2,
|
||
tension: 0.4
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
ticks: {
|
||
stepSize: 1
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
{% endblock %}
|