77 lines
2.6 KiB
HTML
77 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>simple-cost-dashboard</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="topbar">
|
|
<div class="topbar-title">
|
|
<h1>simple-cost-dashboard</h1>
|
|
<span class="breadcrumb">coûts AWS / Azure, tous tenants</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
|
|
<div id="error-banner"></div>
|
|
|
|
<div class="kpi-row" id="kpi-row">
|
|
<div class="card kpi-card">
|
|
<p class="kpi-label">Coûts — mois en cours</p>
|
|
<p class="kpi-value" id="kpi-total">—</p>
|
|
</div>
|
|
<div class="card kpi-card">
|
|
<p class="kpi-label">AWS — mois en cours</p>
|
|
<p class="kpi-value" id="kpi-aws">—</p>
|
|
</div>
|
|
<div class="card kpi-card">
|
|
<p class="kpi-label">Azure — mois en cours</p>
|
|
<p class="kpi-value" id="kpi-azure">—</p>
|
|
</div>
|
|
<div class="card kpi-card">
|
|
<p class="kpi-label">Tenants en échec de collecte</p>
|
|
<p class="kpi-value" id="kpi-errors">—</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="section-title">Évolution mensuelle (12 mois glissants)</p>
|
|
<div class="card chart-card">
|
|
<div class="chart-card-header">
|
|
<div>
|
|
<h2>Coûts par mois</h2>
|
|
<p class="chart-card-sub">Total AWS + Azure, EUR</p>
|
|
</div>
|
|
</div>
|
|
<div class="chart-canvas-wrap">
|
|
<canvas id="monthly-chart"></canvas>
|
|
</div>
|
|
<div class="legend">
|
|
<span class="legend-item"><span class="legend-dot" style="background:var(--provider-aws)"></span>AWS</span>
|
|
<span class="legend-item"><span class="legend-dot" style="background:var(--provider-azure)"></span>Azure</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="section-title">Tenants</p>
|
|
<div class="card" style="padding: 16px 20px 4px;">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 4px; gap: 12px; flex-wrap: wrap;">
|
|
<input type="search" id="tenant-search" class="search-input" placeholder="Rechercher un tenant…">
|
|
<div id="month-selection-note" class="selection-note"></div>
|
|
</div>
|
|
<p class="chart-card-sub" style="margin: 0 0 12px;">Clique un ou plusieurs mois dans le graphe ci-dessus pour filtrer la table sur cette période.</p>
|
|
<div id="tenants-table-wrap">
|
|
<div class="skeleton">Chargement…</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script src="/static/common.js"></script>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|