60e12cc4dd
- 3 nouvelles pages HTML servies sous /dashboard/consumption* - Proxy routes /api/v1/consumption/* -> port 8784 (consumption-tracker) - Proxy routes /api/v1/ai/usage* -> port 8783 (AI Router) - consumption_dashboard.html: KPI cards, Chart.js tokens/cost/provider/calls charts, period selector 24h/7j/30j, auto-refresh 30s, alertes visuelles temps reel - consumption_history.html: Tableau pagine, filtres provider/status/date range, tri colonnes, export CSV - consumption_alerts.html: CRUD alertes, toggle actif/inactif, seuils visuels badges, modal creation/edition Co-Authored-By: Paperclip <noreply@paperclip.ing>
336 lines
16 KiB
HTML
336 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Consommation IA — Alertes</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--green: #00c853; --green-d: #009624; --blue: #1e88e5;
|
|
--gold: #ffd600; --orange: #ff6d00;
|
|
--dark: #0d1117; --dark2: #161b22; --dark3: #21262d;
|
|
--text: #e6edf3; --muted: #8b949e; --border: #30363d;
|
|
--radius: 10px; --error: #f85149; --purple: #7c3aed;
|
|
}
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--dark); color: var(--text); min-height: 100vh; }
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid var(--border); background: var(--dark); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; gap: 10px; }
|
|
.topbar-title { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
|
|
.topbar-title a { color: var(--muted); font-weight: 400; font-size: .9rem; }
|
|
.topbar-title a:hover { color: var(--text); }
|
|
.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; border: none; transition: all .2s; }
|
|
.btn-primary { background: var(--green); color: #000; }
|
|
.btn-primary:hover { background: var(--green-d); }
|
|
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
|
|
.btn-ghost:hover { border-color: var(--muted); }
|
|
.btn-danger { background: rgba(248,81,73,.15); color: var(--error); border: 1px solid rgba(248,81,73,.3); }
|
|
.btn-danger:hover { background: rgba(248,81,73,.25); }
|
|
.btn-sm { padding: 5px 12px; font-size: .8rem; }
|
|
|
|
.content { padding: 28px; max-width: 1000px; margin: 0 auto; }
|
|
|
|
.section-title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
|
|
|
|
.alert-card { background: var(--dark2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
|
|
.alert-card.inactive { opacity: .6; }
|
|
.alert-icon { font-size: 1.3rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--dark3); border-radius: 8px; flex-shrink: 0; }
|
|
.alert-info { flex: 1; min-width: 200px; }
|
|
.alert-info .alert-name { font-weight: 700; font-size: .93rem; }
|
|
.alert-info .alert-desc { font-size: .82rem; color: var(--muted); margin-top: 2px; }
|
|
.alert-actions { display: flex; gap: 8px; flex-shrink: 0; }
|
|
.toggle-switch { width: 40px; height: 22px; border-radius: 11px; background: var(--border); cursor: pointer; position: relative; transition: background .2s; flex-shrink: 0; }
|
|
.toggle-switch.active { background: var(--green); }
|
|
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
|
|
.toggle-switch.active::after { transform: translateX(18px); }
|
|
|
|
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
|
|
.empty-state .icon { font-size: 2.5rem; margin-bottom: 12px; }
|
|
.empty-state p { font-size: .9rem; margin-bottom: 16px; }
|
|
|
|
.loading { text-align: center; padding: 60px 20px; color: var(--muted); }
|
|
.loading .spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 12px; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.home-btn{position:fixed;top:10px;left:10px;z-index:9999;background:linear-gradient(135deg,#00d9ff,#7b2cbf);color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:14px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,217,255,0.3);transition:all 0.3s;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.home-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,217,255,0.5)}
|
|
|
|
.modal-overlay {
|
|
display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,.6); z-index: 1000;
|
|
align-items: center; justify-content: center;
|
|
}
|
|
.modal-overlay.show { display: flex; }
|
|
.modal {
|
|
background: var(--dark2); border: 1px solid var(--border); border-radius: var(--radius);
|
|
padding: 24px; width: 90%; max-width: 480px; max-height: 90vh; overflow-y: auto;
|
|
}
|
|
.modal h3 { font-size: 1.05rem; margin-bottom: 20px; }
|
|
.form-group { margin-bottom: 16px; }
|
|
.form-group label { display: block; font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
|
|
.form-group input, .form-group select {
|
|
width: 100%; background: var(--dark3); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: 9px 12px; color: var(--text); font-size: .88rem;
|
|
outline: none; transition: border-color .2s; font-family: inherit;
|
|
}
|
|
.form-group input:focus, .form-group select:focus { border-color: var(--green); }
|
|
.form-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
|
|
|
|
.toast {
|
|
position: fixed; bottom: 20px; right: 20px; z-index: 9999;
|
|
background: var(--dark2); border: 1px solid var(--border); border-radius: var(--radius);
|
|
padding: 14px 20px; font-size: .88rem; box-shadow: 0 8px 24px rgba(0,0,0,.4);
|
|
display: none; max-width: 400px;
|
|
}
|
|
.toast.show { display: block; animation: slideIn .3s ease; }
|
|
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
|
.toast-success { border-color: var(--green); }
|
|
.toast-error { border-color: var(--error); }
|
|
|
|
.threshold-badge { padding: 3px 10px; border-radius: 12px; font-size: .72rem; font-weight: 700; }
|
|
.threshold-info { background: rgba(30,136,229,.15); color: var(--blue); }
|
|
.threshold-warn { background: rgba(255,214,0,.15); color: var(--gold); }
|
|
.threshold-danger { background: rgba(248,81,73,.15); color: var(--error); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="/" class="home-btn" title="Retour au portail"><span style="font-size:18px">🏠</span><span>Accueil</span></a>
|
|
|
|
<div class="topbar">
|
|
<div class="topbar-title">
|
|
<span>🔔 Gestion des Alertes</span>
|
|
<a href="/dashboard/consumption">← Dashboard</a>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<button class="btn btn-primary btn-sm" onclick="openCreateModal()">+ Nouvelle alerte</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="section-title">
|
|
<span>Règles d'alerte consommation</span>
|
|
</div>
|
|
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
<div>Chargement des alertes...</div>
|
|
</div>
|
|
|
|
<div id="alerts-container"></div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="modal">
|
|
<div class="modal">
|
|
<h3 id="modal-title">Nouvelle alerte</h3>
|
|
<input type="hidden" id="edit-id">
|
|
<div class="form-group">
|
|
<label>Type de seuil</label>
|
|
<select id="form-type">
|
|
<option value="tokens">Tokens</option>
|
|
<option value="cost">Coût (cents)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Valeur du seuil</label>
|
|
<input type="number" id="form-value" min="1" step="0.01" placeholder="1000">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Période</label>
|
|
<select id="form-period">
|
|
<option value="daily">Journalier</option>
|
|
<option value="monthly">Mensuel</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Email notification (optionnel)</label>
|
|
<input type="email" id="form-email" placeholder="admin@example.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Webhook notification (optionnel)</label>
|
|
<input type="url" id="form-webhook" placeholder="https://hooks.example.com/alert">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button class="btn btn-ghost" onclick="closeModal()">Annuler</button>
|
|
<button class="btn btn-primary" onclick="saveAlert()">Enregistrer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
function showToast(msg, type) {
|
|
var t = document.getElementById('toast');
|
|
t.textContent = msg;
|
|
t.className = 'toast show toast-' + type;
|
|
setTimeout(function() { t.classList.remove('show'); }, 4000);
|
|
}
|
|
|
|
function openModal() {
|
|
document.getElementById('modal').classList.add('show');
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('modal').classList.remove('show');
|
|
document.getElementById('edit-id').value = '';
|
|
document.getElementById('modal-title').textContent = 'Nouvelle alerte';
|
|
document.getElementById('form-type').value = 'tokens';
|
|
document.getElementById('form-value').value = '';
|
|
document.getElementById('form-period').value = 'daily';
|
|
document.getElementById('form-email').value = '';
|
|
document.getElementById('form-webhook').value = '';
|
|
}
|
|
|
|
function openCreateModal() {
|
|
closeModal();
|
|
openModal();
|
|
}
|
|
|
|
function getThresholdClass(value, type) {
|
|
if (type === 'tokens') {
|
|
if (value >= 100000) return 'threshold-danger';
|
|
if (value >= 50000) return 'threshold-warn';
|
|
return 'threshold-info';
|
|
}
|
|
if (type === 'cost') {
|
|
if (value >= 10000) return 'threshold-danger';
|
|
if (value >= 5000) return 'threshold-warn';
|
|
return 'threshold-info';
|
|
}
|
|
return 'threshold-info';
|
|
}
|
|
|
|
function formatThreshold(value, type) {
|
|
if (type === 'tokens') {
|
|
if (value >= 1000000) return (value/1000000).toFixed(1) + 'M tokens';
|
|
if (value >= 1000) return (value/1000).toFixed(1) + 'k tokens';
|
|
return value + ' tokens';
|
|
}
|
|
if (type === 'cost') {
|
|
return (value / 100).toFixed(2) + '€';
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function renderAlerts(alerts) {
|
|
var container = document.getElementById('alerts-container');
|
|
if (!alerts || alerts.length === 0) {
|
|
container.innerHTML = '<div class="empty-state"><div class="icon">🔔</div><p>Aucune alerte configurée</p><button class="btn btn-primary" onclick="openCreateModal()">+ Créer une alerte</button></div>';
|
|
return;
|
|
}
|
|
var html = '';
|
|
alerts.forEach(function(a) {
|
|
var activeClass = a.is_active ? '' : 'inactive';
|
|
var toggleClass = a.is_active ? 'active' : '';
|
|
var thresholdClass = getThresholdClass(a.threshold_value, a.threshold_type);
|
|
html += '<div class="alert-card ' + activeClass + '" data-id="' + a.id + '">' +
|
|
'<div class="alert-icon">' + (a.threshold_type === 'tokens' ? '🔷' : '💰') + '</div>' +
|
|
'<div class="alert-info">' +
|
|
'<div class="alert-name">' + (a.threshold_type === 'tokens' ? 'Seuil tokens' : 'Seuil coût') + ' <span class="threshold-badge ' + thresholdClass + '">' + formatThreshold(a.threshold_value, a.threshold_type) + '</span></div>' +
|
|
'<div class="alert-desc">Période: ' + (a.period === 'daily' ? 'Journalier' : 'Mensuel') + (a.notify_email ? ' · 📧 ' + a.notify_email : '') + (a.notify_webhook ? ' · 🔗 webhook' : '') + '</div>' +
|
|
'</div>' +
|
|
'<div class="alert-actions">' +
|
|
'<div class="toggle-switch ' + toggleClass + '" onclick="toggleAlert(' + a.id + ', ' + !a.is_active + ')"></div>' +
|
|
'<button class="btn btn-ghost btn-sm" onclick="editAlert(' + a.id + ')">✏️</button>' +
|
|
'<button class="btn btn-danger btn-sm" onclick="deleteAlert(' + a.id + ')">🗑️</button>' +
|
|
'</div>' +
|
|
'</div>';
|
|
});
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
async function loadAlerts() {
|
|
document.getElementById('loading').style.display = '';
|
|
try {
|
|
var r = await fetch('/api/v1/consumption/alerts');
|
|
var data = await r.json();
|
|
document.getElementById('loading').style.display = 'none';
|
|
renderAlerts(data.alerts || []);
|
|
} catch (e) {
|
|
document.getElementById('loading').innerHTML = '<div style="color:var(--error);padding:40px">❌ Erreur: ' + e.message + '</div>';
|
|
}
|
|
}
|
|
|
|
async function toggleAlert(id, newState) {
|
|
try {
|
|
var r = await fetch('/api/v1/consumption/alerts/' + id, {
|
|
method: 'PUT',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ is_active: newState })
|
|
});
|
|
if (!r.ok) { showToast('Erreur lors de la modification', 'error'); return; }
|
|
showToast('Alerte ' + (newState ? 'activée' : 'désactivée'), 'success');
|
|
loadAlerts();
|
|
} catch (e) {
|
|
showToast('Erreur: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
function editAlert(id) {
|
|
var card = document.querySelector('.alert-card[data-id="' + id + '"]');
|
|
if (!card) return;
|
|
// Re-fetch from API to get full data
|
|
fetch('/api/v1/consumption/alerts/' + id)
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(a) {
|
|
document.getElementById('edit-id').value = a.id;
|
|
document.getElementById('modal-title').textContent = 'Modifier l\'alerte #' + a.id;
|
|
document.getElementById('form-type').value = a.threshold_type;
|
|
document.getElementById('form-value').value = a.threshold_value;
|
|
document.getElementById('form-period').value = a.period;
|
|
document.getElementById('form-email').value = a.notify_email || '';
|
|
document.getElementById('form-webhook').value = a.notify_webhook || '';
|
|
openModal();
|
|
})
|
|
.catch(function(e) { showToast('Erreur: ' + e.message, 'error'); });
|
|
}
|
|
|
|
async function saveAlert() {
|
|
var id = document.getElementById('edit-id').value;
|
|
var data = {
|
|
client_id: 'internal',
|
|
threshold_type: document.getElementById('form-type').value,
|
|
threshold_value: parseFloat(document.getElementById('form-value').value),
|
|
period: document.getElementById('form-period').value,
|
|
notify_email: document.getElementById('form-email').value || null,
|
|
notify_webhook: document.getElementById('form-webhook').value || null,
|
|
};
|
|
if (!data.threshold_value || data.threshold_value <= 0) {
|
|
showToast('Veuillez entrer une valeur de seuil valide', 'error');
|
|
return;
|
|
}
|
|
try {
|
|
var url = id ? '/api/v1/consumption/alerts/' + id : '/api/v1/consumption/alerts';
|
|
var method = id ? 'PUT' : 'POST';
|
|
var r = await fetch(url, {
|
|
method: method,
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(data)
|
|
});
|
|
if (!r.ok) { showToast('Erreur lors de l\'enregistrement', 'error'); return; }
|
|
showToast(id ? 'Alerte modifiée' : 'Alerte créée', 'success');
|
|
closeModal();
|
|
loadAlerts();
|
|
} catch (e) {
|
|
showToast('Erreur: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteAlert(id) {
|
|
if (!confirm('Supprimer cette alerte ?')) return;
|
|
try {
|
|
var r = await fetch('/api/v1/consumption/alerts/' + id, { method: 'DELETE' });
|
|
if (!r.ok) { showToast('Erreur lors de la suppression', 'error'); return; }
|
|
showToast('Alerte supprimée', 'success');
|
|
loadAlerts();
|
|
} catch (e) {
|
|
showToast('Erreur: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
loadAlerts();
|
|
</script>
|
|
</body>
|
|
</html>
|