81 lines
2.5 KiB
HTML
81 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Services — simple-cost-dashboard</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="app-shell">
|
|
<aside class="sidebar">
|
|
<p class="sidebar-brand">simple-cost-dashboard</p>
|
|
<nav class="sidebar-nav">
|
|
<a href="/" class="sidebar-link">Compte</a>
|
|
<a href="/services" class="sidebar-link active">Services</a>
|
|
<a href="/collecte" class="sidebar-link">Collecte<span class="nav-alert-dot" id="nav-collecte-alert" hidden></span></a>
|
|
</nav>
|
|
</aside>
|
|
<div class="page">
|
|
|
|
<header class="topbar">
|
|
<div class="topbar-title">
|
|
<h1>Services</h1>
|
|
<span class="breadcrumb">coûts par service, tous tenants confondus</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
|
|
<div id="error-banner"></div>
|
|
|
|
<p class="section-title">Répartition par service</p>
|
|
<div class="card chart-card">
|
|
<div class="chart-card-header">
|
|
<div>
|
|
<h2 id="services-period-title">30 derniers jours</h2>
|
|
<p class="chart-card-sub">EUR, converti au taux du jour de collecte</p>
|
|
</div>
|
|
<div class="segmented-toggle" id="range-toggle">
|
|
<button data-range="1">Aujourd'hui</button>
|
|
<button data-range="7">7 jours</button>
|
|
<button data-range="30" class="active">30 jours</button>
|
|
<button data-range="365">1 an</button>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin: -4px 0 12px;">
|
|
<p class="chart-card-sub" style="margin:0;">Clique un service pour voir le détail par tenant.</p>
|
|
<div class="segmented-toggle" id="provider-toggle">
|
|
<button data-provider="all" class="active">Tous</button>
|
|
<button data-provider="aws">AWS</button>
|
|
<button data-provider="azure">Azure</button>
|
|
</div>
|
|
</div>
|
|
<div id="services-table-wrap">
|
|
<div class="skeleton">Chargement…</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="drawer-backdrop" id="drawer-backdrop"></div>
|
|
<aside class="drawer" id="tenant-drawer" aria-hidden="true">
|
|
<div class="drawer-header">
|
|
<div>
|
|
<h3 id="drawer-title">Service</h3>
|
|
<p id="drawer-sub"> </p>
|
|
</div>
|
|
<button class="drawer-close" id="drawer-close" aria-label="Fermer">×</button>
|
|
</div>
|
|
<div class="drawer-body" id="drawer-body"></div>
|
|
</aside>
|
|
|
|
<script src="/static/common.js"></script>
|
|
<script src="/static/services.js"></script>
|
|
</body>
|
|
</html>
|