bodhi-node-profiler
Version:
A lightweight, zero-configuration performance profiler for Node.js applications with real-time dashboard
53 lines (50 loc) • 2.21 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bodhi Node Profiler Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<header class="mb-8">
<h1 class="text-4xl font-bold text-gray-800">Bodhi Node Profiler</h1>
<p class="text-gray-600">Real-time Performance Monitoring</p>
</header>
<!-- System Metrics -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">CPU Usage</h2>
<canvas id="cpuChart"></canvas>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">Memory Usage</h2>
<canvas id="memoryChart"></canvas>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">Event Loop Delay</h2>
<canvas id="eventLoopChart"></canvas>
</div>
</div>
<!-- API Performance -->
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4">API Response Times</h2>
<div class="overflow-x-auto">
<table class="min-w-full table-auto">
<thead>
<tr class="bg-gray-50">
<th class="px-6 py-3 text-left">Endpoint</th>
<th class="px-6 py-3 text-left">Response Time</th>
<th class="px-6 py-3 text-left">Status</th>
</tr>
</thead>
<tbody id="apiTable"></tbody>
</table>
</div>
</div>
</div>
<script src="/js/dashboard.js"></script>
</body>
</html>