268 lines
10 KiB
HTML
Executable File
268 lines
10 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Settings - Linux BenchTools</title>
|
||
<link rel="stylesheet" href="css/main.css">
|
||
<link rel="stylesheet" href="css/components.css">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon/icons8-devices-3d-fluency-32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon/icons8-devices-3d-fluency-16.png">
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<div class="container">
|
||
<h1>🚀 Linux BenchTools</h1>
|
||
<p>Configuration</p>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="nav">
|
||
<a href="index.html" class="nav-link">Dashboard</a>
|
||
<a href="devices.html" class="nav-link">Devices</a>
|
||
<a href="settings.html" class="nav-link active">Settings</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="container">
|
||
<!-- Display Preferences -->
|
||
<div class="card">
|
||
<div class="card-header">🎨 Préférences d'affichage</div>
|
||
<div class="card-body">
|
||
<div class="alert alert-info" style="margin-bottom: 1.5rem;">
|
||
Configurez les unités d'affichage pour les valeurs matérielles
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Unité de mémoire (RAM)</label>
|
||
<select id="memoryUnit" class="form-control">
|
||
<option value="MB">Mégaoctets (MB)</option>
|
||
<option value="GB" selected>Gigaoctets (GB)</option>
|
||
</select>
|
||
<small style="color: var(--text-muted);">Affiche la RAM en MB ou GB dans les sections matérielles</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Unité de stockage (Disques)</label>
|
||
<select id="storageUnit" class="form-control">
|
||
<option value="MB">Mégaoctets (MB)</option>
|
||
<option value="GB" selected>Gigaoctets (GB)</option>
|
||
<option value="TB">Téraoctets (TB)</option>
|
||
</select>
|
||
<small style="color: var(--text-muted);">Affiche la capacité des disques en MB, GB ou TB</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Unité de cache CPU</label>
|
||
<select id="cacheUnit" class="form-control">
|
||
<option value="KB" selected>Kilooctets (KB)</option>
|
||
<option value="MB">Mégaoctets (MB)</option>
|
||
</select>
|
||
<small style="color: var(--text-muted);">Affiche les caches L1/L2/L3 en KB ou MB</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Unité de température</label>
|
||
<select id="temperatureUnit" class="form-control">
|
||
<option value="C" selected>Celsius (°C)</option>
|
||
<option value="F">Fahrenheit (°F)</option>
|
||
</select>
|
||
<small style="color: var(--text-muted);">Affiche la température des composants en Celsius ou Fahrenheit</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Taille des icônes de section</label>
|
||
<select id="sectionIconSize" class="form-control">
|
||
<option value="24">Petite (24px)</option>
|
||
<option value="28">Moyenne (28px)</option>
|
||
<option value="32" selected>Grande (32px)</option>
|
||
<option value="36">Très grande (36px)</option>
|
||
</select>
|
||
<small style="color: var(--text-muted);">Taille des icônes dans les titres de sections</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Taille des icônes de bouton</label>
|
||
<select id="buttonIconSize" class="form-control">
|
||
<option value="18">Petite (18px)</option>
|
||
<option value="22">Moyenne (22px)</option>
|
||
<option value="24" selected>Grande (24px)</option>
|
||
<option value="28">Très grande (28px)</option>
|
||
</select>
|
||
<small style="color: var(--text-muted);">Taille des icônes dans les boutons d'action</small>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" onclick="saveDisplayPreferences()">💾 Enregistrer les préférences</button>
|
||
<button class="btn btn-secondary" onclick="resetDisplayPreferences()" style="margin-left: 0.5rem;">🔄 Réinitialiser</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bench Script Configuration -->
|
||
<div class="card">
|
||
<div class="card-header">⚡ Configuration Benchmark Script</div>
|
||
<div class="card-body">
|
||
<div class="alert alert-info" style="margin-bottom: 1.5rem;">
|
||
Configurez les paramètres par défaut pour la génération de la commande bench.sh
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">URL du backend</label>
|
||
<input
|
||
type="text"
|
||
id="backendUrl"
|
||
class="form-control"
|
||
placeholder="http://votre-serveur:8007"
|
||
value="http://localhost:8007"
|
||
>
|
||
<small style="color: var(--text-muted);">URL de l'API backend (accessible depuis les machines clientes)</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Serveur iperf3 (optionnel)</label>
|
||
<input
|
||
type="text"
|
||
id="iperfServer"
|
||
class="form-control"
|
||
placeholder="10.0.0.10 ou nom-serveur"
|
||
>
|
||
<small style="color: var(--text-muted);">Adresse IP ou hostname du serveur iperf3 pour les tests réseau</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Mode benchmark</label>
|
||
<select id="benchMode" class="form-control">
|
||
<option value="">Complet (tous les tests)</option>
|
||
<option value="--short">Court (tests rapides)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" onclick="generateBenchCommand()">Générer la commande</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Generated Command -->
|
||
<div class="card">
|
||
<div class="card-header">📋 Commande Générée</div>
|
||
<div class="card-body">
|
||
<p style="margin-bottom: 1rem; color: var(--text-secondary);">
|
||
Copiez cette commande et exécutez-la sur vos machines Linux :
|
||
</p>
|
||
<div class="code-block">
|
||
<button class="copy-btn" onclick="copyGeneratedCommand()">Copier</button>
|
||
<code id="generatedCommand">Veuillez configurer les paramètres ci-dessus</code>
|
||
</div>
|
||
|
||
<div style="margin-top: 1rem;">
|
||
<h4 style="color: var(--color-info); margin-bottom: 0.5rem;">Options supplémentaires :</h4>
|
||
<ul style="color: var(--text-secondary); margin-left: 1.5rem;">
|
||
<li><code>--device "nom-machine"</code> : Nom personnalisé du device (par défaut: hostname)</li>
|
||
<li><code>--skip-cpu</code> : Ignorer le test CPU</li>
|
||
<li><code>--skip-memory</code> : Ignorer le test mémoire</li>
|
||
<li><code>--skip-disk</code> : Ignorer le test disque</li>
|
||
<li><code>--skip-network</code> : Ignorer le test réseau</li>
|
||
<li><code>--skip-gpu</code> : Ignorer le test GPU</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API Information -->
|
||
<div class="card">
|
||
<div class="card-header">🔑 Informations API</div>
|
||
<div class="card-body">
|
||
<div class="alert alert-warning">
|
||
⚠️ Le token API est confidentiel. Ne le partagez pas publiquement.
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">API Token</label>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input
|
||
type="password"
|
||
id="apiToken"
|
||
class="form-control"
|
||
readonly
|
||
value="Chargement..."
|
||
>
|
||
<button class="btn btn-secondary" onclick="toggleTokenVisibility()">👁️ Afficher</button>
|
||
<button class="btn btn-secondary" onclick="copyToken()">📋 Copier</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">Endpoint benchmark</label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
readonly
|
||
value="POST /api/benchmark"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- System Information -->
|
||
<div class="card">
|
||
<div class="card-header">ℹ️ Informations Système</div>
|
||
<div class="card-body">
|
||
<div class="grid grid-2">
|
||
<div>
|
||
<strong>Version:</strong> 1.0.0 (MVP)
|
||
</div>
|
||
<div>
|
||
<strong>Backend:</strong> FastAPI + SQLite
|
||
</div>
|
||
<div>
|
||
<strong>Frontend:</strong> Vanilla JS
|
||
</div>
|
||
<div>
|
||
<strong>Script:</strong> bench.sh v1.0.0
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 1.5rem;">
|
||
<a href="https://gitea.maison43.duckdns.org/gilles/linux-benchtools" class="btn btn-secondary" target="_blank">
|
||
📚 Documentation
|
||
</a>
|
||
<a href="https://gitea.maison43.duckdns.org/gilles/linux-benchtools/issues" class="btn btn-secondary" target="_blank" style="margin-left: 0.5rem;">
|
||
🐛 Reporter un bug
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- About -->
|
||
<div class="card">
|
||
<div class="card-header">📖 À propos</div>
|
||
<div class="card-body">
|
||
<p style="color: var(--text-secondary);">
|
||
<strong>Linux BenchTools</strong> est une application self-hosted de benchmarking
|
||
et d'inventaire matériel pour machines Linux.
|
||
</p>
|
||
<p style="color: var(--text-secondary); margin-top: 0.5rem;">
|
||
Elle permet de recenser vos machines (physiques, VM, SBC), collecter automatiquement
|
||
les informations hardware, exécuter des benchmarks standardisés et afficher un
|
||
classement comparatif.
|
||
</p>
|
||
<p style="color: var(--text-muted); margin-top: 1rem; font-size: 0.85rem;">
|
||
Développé avec ❤️ pour l'infrastructure maison43
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<p>© 2025 Linux BenchTools - Self-hosted benchmarking tool</p>
|
||
</footer>
|
||
|
||
<!-- Scripts -->
|
||
<script src="config.js"></script>
|
||
<script src="js/utils.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/settings.js"></script>
|
||
</body>
|
||
</html>
|