18bb173c95
Add comprehensive disk monitoring with real-time metrics: - Backend API endpoints for disk/memory metrics (local + remote) - Admin UI page with CSP-compliant DOM rendering - Health status indicators with color-coded thresholds - SSH-based remote metrics collection from OVH VPS - Auto-refresh every 5 minutes Backend: - src/models/DiskMetrics.model.js: Metrics collection model - src/controllers/diskMetrics.controller.js: 3 admin endpoints - src/routes/diskMetrics.routes.js: Admin-authenticated routes - src/routes/index.js: Register disk-metrics routes Frontend: - public/admin/disk-monitoring.html: Admin dashboard page - public/js/admin-disk-monitoring.js: CSP-compliant UI rendering - public/js/components/navbar-admin.js: Add disk monitoring link Documentation: - deployment-quickstart/UPTIME_MONITORING_SETUP.md API endpoints: - GET /api/admin/disk-metrics (all systems) - GET /api/admin/disk-metrics/local (dev system) - GET /api/admin/disk-metrics/remote (production VPS) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
95 lines
4.2 KiB
HTML
95 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Disk Monitoring | Tractatus Admin</title>
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.2">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2">
|
|
<style>
|
|
.metric-card { transition: all 0.3s ease; }
|
|
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
|
|
.health-indicator { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
|
|
.health-healthy { background-color: #10b981; }
|
|
.health-caution { background-color: #f59e0b; }
|
|
.health-warning { background-color: #f97316; }
|
|
.health-critical { background-color: #ef4444; }
|
|
.progress-bar { transition: width 0.5s ease; }
|
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
.loading { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Navigation -->
|
|
<div id="admin-navbar" data-page-title="Disk Monitoring" data-page-icon="server"></div>
|
|
<script src="/js/components/navbar-admin.js?v=0.1.0"></script>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
<!-- Header -->
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">Disk Monitoring</h1>
|
|
<p class="text-gray-600 mt-2">Real-time disk usage metrics for development and production systems</p>
|
|
</div>
|
|
<button id="refresh-btn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
|
</svg>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loading" class="text-center py-12">
|
|
<div class="loading inline-block w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full"></div>
|
|
<p class="text-gray-600 mt-4">Loading metrics...</p>
|
|
</div>
|
|
|
|
<!-- Metrics Container -->
|
|
<div id="metrics-container" class="hidden">
|
|
|
|
<!-- Local Development System -->
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
Local Development
|
|
</h2>
|
|
<div id="local-metrics" class="grid grid-cols-1 md:grid-cols-3 gap-6"></div>
|
|
</div>
|
|
|
|
<!-- Production System (OVH VPS) -->
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
|
|
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
|
</svg>
|
|
Production (OVH VPS)
|
|
</h2>
|
|
<div id="remote-metrics" class="grid grid-cols-1 md:grid-cols-3 gap-6"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div id="error" class="hidden bg-red-50 border-l-4 border-red-500 p-6 rounded">
|
|
<div class="flex">
|
|
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<div class="ml-3">
|
|
<h3 class="text-red-800 font-semibold">Failed to Load Metrics</h3>
|
|
<p id="error-message" class="text-red-700 mt-2"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="/js/admin-disk-monitoring.js?v=0.1.0"></script>
|
|
</body>
|
|
</html>
|