bodhi-node-profiler
Version:
A lightweight, zero-configuration performance profiler for Node.js applications with real-time dashboard
147 lines (135 loc) • 6.48 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</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6;
}
.metric-card {
transition: all 0.3s ease;
}
.metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.chart-container {
position: relative;
height: 250px;
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="min-h-screen bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Header -->
<header class="mb-8 text-center">
<h1 class="text-5xl font-bold gradient-text mb-2">Bodhi Node Profiler</h1>
<p class="text-gray-600 text-lg">Real-time Performance Monitoring Dashboard</p>
</header>
<!-- Current Metrics Overview -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<!-- CPU Usage -->
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex justify-between items-center mb-2">
<h3 class="text-lg font-semibold">CPU Usage</h3>
<span id="cpu-status" class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">Good</span>
</div>
<p id="cpu-usage" class="text-3xl font-bold mb-1">0.0%</p>
<p class="text-gray-500 text-sm collecting-data">Collecting data...</p>
</div>
<!-- Memory Usage -->
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex justify-between items-center mb-2">
<h3 class="text-lg font-semibold">Memory Usage</h3>
<span id="memory-status" class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">Good</span>
</div>
<p id="memory-usage" class="text-3xl font-bold mb-1">0.0%</p>
<p class="text-gray-500 text-sm collecting-data">Collecting data...</p>
</div>
<!-- Event Loop -->
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex justify-between items-center mb-2">
<h3 class="text-lg font-semibold">Event Loop Delay</h3>
<span id="event-loop-status" class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">Good</span>
</div>
<p id="event-loop-delay" class="text-3xl font-bold mb-1">0.0 ms</p>
<p class="text-gray-500 text-sm collecting-data">Collecting data...</p>
</div>
<!-- API Response -->
<div class="bg-white p-4 rounded-lg shadow">
<div class="flex justify-between items-center mb-2">
<h3 class="text-lg font-semibold">API Response</h3>
<span id="api-status" class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">Good</span>
</div>
<p id="api-response" class="text-3xl font-bold mb-1">0.0 ms</p>
<p class="text-gray-500 text-sm collecting-data">Collecting data...</p>
</div>
</div>
<!-- Charts -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<!-- CPU Chart -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">CPU Utilization</h3>
<div class="chart-container">
<canvas id="cpuChart"></canvas>
</div>
</div>
<!-- Memory Chart -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Memory Usage</h3>
<div class="chart-container">
<canvas id="memoryChart"></canvas>
</div>
</div>
<!-- Event Loop Chart -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">Event Loop Delay</h3>
<div class="chart-container">
<canvas id="eventLoopChart"></canvas>
</div>
</div>
<!-- API Response Chart -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">API Response Time</h3>
<div class="chart-container">
<canvas id="apiChart"></canvas>
</div>
</div>
</div>
<!-- System Info -->
<div class="bg-white p-4 rounded-lg shadow mb-8">
<h3 class="text-lg font-semibold mb-4">System Information</h3>
<div class="grid grid-cols-3 gap-4" id="systemInfo">
<div>
<p class="text-gray-600">Total Memory</p>
<p id="total-memory" class="text-xl font-semibold">0 MB</p>
</div>
<div>
<p class="text-gray-600">Uptime</p>
<p id="uptime" class="text-xl font-semibold">0s</p>
</div>
<div>
<p class="text-gray-600">Last Updated</p>
<p id="last-updated" class="text-xl font-semibold">-</p>
</div>
</div>
</div>
<footer class="text-center text-gray-600 text-sm">
<p>Powered by Bodhi Node Profiler • <span id="version">v1.0.3</span></p>
</footer>
</div>
<script src="/profiler/dashboard.js"></script>
</body>
</html>