Dinawo
9ff4642a10
All checks were successful
continuous-integration/drone/push Build is passing
Note: We appreciate your feedback and bug reports to continue improving our platform. Thank you for your continued support!
287 lines
10 KiB
Plaintext
287 lines
10 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Statistiques du serveur</title>
|
|
<link rel="icon" href="/public/assets/homelab_logo.png" />
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
body {
|
|
background-image: url('<%= user.wallpaper %>');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
margin: 0;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
|
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 212.7 26.8% 83.9%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1250px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.card {
|
|
background-color: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
padding: 2rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius);
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: hsl(var(--secondary));
|
|
color: hsl(var(--secondary-foreground));
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
#themeSwitcher {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
}
|
|
|
|
.animate {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: hsl(var(--background));
|
|
margin: 15% auto;
|
|
padding: 20px;
|
|
border: 1px solid hsl(var(--border));
|
|
width: 80%;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.close {
|
|
color: hsl(var(--muted-foreground));
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: hsl(var(--foreground));
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="animate">
|
|
<div id="app" class="min-h-screen flex items-center justify-center">
|
|
<div class="container mt-8">
|
|
<h1 class="text-3xl font-semibold mb-6 text-center animate">Statistiques du serveur</h1>
|
|
|
|
<div class="card mb-8">
|
|
<h2 class="text-2xl font-semibold mb-4">Informations générales</h2>
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-left">Paramètre</th>
|
|
<th class="text-left">Valeur</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Temps de fonctionnement</td>
|
|
<td><%= Math.floor(uptime / 86400) %> jours, <%= Math.floor(uptime % 86400 / 3600) %> heures, <%= Math.floor(uptime % 3600 / 60) %> minutes, <%= uptime % 60 %> secondes</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Utilisation de la mémoire</td>
|
|
<td><%= memoryUsage.toFixed(2) %> Mo</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Utilisation du processeur</td>
|
|
<td><%= (cpuUsage * 100).toFixed(2) %> %</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2 class="text-2xl font-semibold mb-4">Journaux</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<% logs && logs.forEach((log, index) => { %>
|
|
<% if (log) { %>
|
|
<button class="btn btn-primary logName" data-index="<%= index %>"><%= log.name %></button>
|
|
<div id="myModal<%= index %>" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" data-index="<%= index %>">×</span>
|
|
<pre class="whitespace-pre-wrap"><%= log.content %></pre>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 flex justify-center">
|
|
<a href="/dpanel/dashboard/admin/" class="btn btn-secondary w-full py-2 mt-4 text-center">
|
|
<i class="fas fa-arrow-left mr-2"></i>
|
|
Retourner au dashboard admin
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="themeSwitcher" class="btn btn-secondary p-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<script>
|
|
const body = document.body;
|
|
const themeSwitcher = document.getElementById('themeSwitcher');
|
|
|
|
function setTheme(theme) {
|
|
if (theme === 'dark') {
|
|
body.classList.add('dark');
|
|
} else {
|
|
body.classList.remove('dark');
|
|
}
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
setTheme(savedTheme);
|
|
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
setTheme('dark');
|
|
}
|
|
|
|
themeSwitcher.addEventListener('click', function() {
|
|
if (body.classList.contains('dark')) {
|
|
setTheme('light');
|
|
} else {
|
|
setTheme('dark');
|
|
}
|
|
});
|
|
|
|
var logNames = document.getElementsByClassName("logName");
|
|
var closeButtons = document.getElementsByClassName("close");
|
|
|
|
for (var i = 0; i < logNames.length; i++) {
|
|
logNames[i].addEventListener("click", function(event) {
|
|
var index = event.target.getAttribute("data-index");
|
|
var modal = document.getElementById("myModal" + index);
|
|
modal.style.display = "block";
|
|
});
|
|
}
|
|
|
|
for (var i = 0; i < closeButtons.length; i++) {
|
|
closeButtons[i].addEventListener("click", function(event) {
|
|
var index = event.target.getAttribute("data-index");
|
|
var modal = document.getElementById("myModal" + index);
|
|
modal.style.display = "none";
|
|
});
|
|
}
|
|
|
|
window.onclick = function(event) {
|
|
if (event.target.className === "modal") {
|
|
event.target.style.display = "none";
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |