ZYM/ACMChat-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first version

Browse Source
This commit is contained in:
ZhuangYumin
2025-06-26 14:28:10 +08:00
parent 8e6ac6e0c3
commit a08d1c3287
8 changed files with 992 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
templates/logs.html Normal file
View File

@ -0,0 +1,163 @@
{% extends "base.html" %}
{% block title %}Logs - OpenWebUI Monitor{% endblock %}
{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">API Call Logs</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
<i class="bi bi-arrow-clockwise"></i> Refresh
</button>
</div>
</div>
</div>
{% if logs %}
<!-- Summary Info -->
<div class="row mb-4">
<div class="col-12">
<div class="alert alert-info">
<i class="bi bi-info-circle"></i>
Showing <strong>{{ logs|length }}</strong> most recent API calls.
Logs are ordered by timestamp (newest first).
</div>
</div>
</div>
<!-- Logs Table -->
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-journal-text"></i> Recent API Calls
</h5>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped table-hover mb-0">
<thead class="table-dark">
<tr>
<th scope="col">
<i class="bi bi-calendar"></i> Timestamp
</th>
<th scope="col">
<i class="bi bi-envelope"></i> User Email
</th>
<th scope="col">
<i class="bi bi-cpu"></i> Model
</th>
<th scope="col">
<i class="bi bi-arrow-down"></i> Input Tokens
</th>
<th scope="col">
<i class="bi bi-arrow-up"></i> Output Tokens
</th>
<th scope="col">
<i class="bi bi-plus-circle"></i> Total Tokens
</th>
<th scope="col">
<i class="bi bi-currency-dollar"></i> Cost (USD)
</th>
</tr>
</thead>
<tbody>
{% for log in logs %}
<tr>
<td>
<small class="text-muted">{{ log.datetime }}</small>
</td>
<td>
<span class="badge bg-secondary">{{ log.user_email }}</span>
</td>
<td>
<code>{{ log.model_id }}</code>
</td>
<td>
<span class="badge bg-info">{{ "{:,}".format(log.input_tokens) }}</span>
</td>
<td>
<span class="badge bg-success">{{ "{:,}".format(log.output_tokens) }}</span>
</td>
<td>
<strong>{{ "{:,}".format(log.total_tokens) }}</strong>
</td>
<td>
<span class="badge bg-warning text-dark">${{ log.cost_usd }}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<!-- Statistics Summary -->
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-bar-chart"></i> Current Page Statistics
</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3">
<div class="text-center">
<h4 class="text-primary">{{ logs|length }}</h4>
<small class="text-muted">Total Calls</small>
</div>
</div>
<div class="col-md-3">
<div class="text-center">
<h4 class="text-success">{{ "{:,}".format(logs|sum(attribute='input_tokens')) }}</h4>
<small class="text-muted">Input Tokens</small>
</div>
</div>
<div class="col-md-3">
<div class="text-center">
<h4 class="text-info">{{ "{:,}".format(logs|sum(attribute='output_tokens')) }}</h4>
<small class="text-muted">Output Tokens</small>
</div>
</div>
<div class="col-md-3">
<div class="text-center">
<h4 class="text-warning">${{ "%.4f"|format(logs|sum(attribute='cost_usd')) }}</h4>
<small class="text-muted">Total Cost</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% else %}
<!-- No Data -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body text-center py-5">
<i class="bi bi-journal-x display-1 text-muted"></i>
<h3 class="mt-3">No Logs Available</h3>
<p class="text-muted">No API calls have been recorded yet.</p>
<a href="/dashboard" class="btn btn-primary">
<i class="bi bi-arrow-left"></i> Back to Dashboard
</a>
</div>
</div>
</div>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
// Auto-refresh every 30 seconds
setInterval(() => {
window.location.reload();
}, 30000);
</script>
{% endblock %}