ludal
c39364eda4
- Implemented new API endpoints for fetching global services and service tenants details. - Created a new services.html page with a sidebar for navigation and a chart for service costs. - Updated frontend JavaScript to handle service data loading and rendering. - Enhanced the dashboard with provider filtering options for AWS and Azure. - Added a segmented toggle for selecting the date range for service costs. - Improved styling for the sidebar and data tables. - Refactored common utility functions for better reusability across pages.
95 lines
3.1 KiB
HTML
95 lines
3.1 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>
|
|
|
|
<div class="app-shell">
|
|
<aside class="sidebar">
|
|
<p class="sidebar-brand">simple-cost-dashboard</p>
|
|
<nav class="sidebar-nav">
|
|
<a href="/" class="sidebar-link active">Compte</a>
|
|
<a href="/services" class="sidebar-link">Services</a>
|
|
</nav>
|
|
</aside>
|
|
<div class="page">
|
|
|
|
<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 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 class="chart-canvas-wrap">
|
|
<canvas id="monthly-chart"></canvas>
|
|
</div>
|
|
<div class="legend">
|
|
<span class="legend-item" id="legend-aws"><span class="legend-dot" style="background:var(--provider-aws)"></span>AWS</span>
|
|
<span class="legend-item" id="legend-azure"><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>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/common.js"></script>
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|