pms_md 1.0.0

package/node-monitor/examples/public/js/dashboard.js

@@ -0,0 +1,207 @@
+// ===================================
+// DASHBOARD FUNCTIONS
+// ===================================
+
+async function loadDashboard() {
+    try {
+        const response = await fetch('/monitor/status?format=json');
+        const data = await response.json();
+        renderDashboard(data);
+        updateTimestamp();
+    } catch (error) {
+        showError('dashboardContent', error.message);
+    }
+}
+
+function renderDashboard(data) {
+    const isHealthy = data.health?.isHealthy ?? true;
+    
+    // Update status badge
+    const statusBadge = document.getElementById('overallStatus');
+    const statusText = document.getElementById('statusText');
+    
+    if (statusBadge && statusText) {
+        statusBadge.className = `status-badge ${isHealthy ? 'healthy' : 'unhealthy'}`;
+        statusText.textContent = isHealthy ? 'Healthy' : 'Unhealthy';
+    }
+
+    // Render content
+    const content = `
+        <div class="grid">
+            ${renderApplicationCard(data)}
+            ${renderHealthCard(data.health)}
+            ${renderSystemCard(data.system)}
+            ${renderErrorCard(data.errors)}
+        </div>
+    `;
+
+    document.getElementById('dashboardContent').innerHTML = content;
+    
+    // Render stats summary
+    renderStatsSummary(data);
+}
+
+function renderApplicationCard(data) {
+    const uptime = data.health?.uptime || 0;
+    
+    return `
+        <div class="card">
+            <div class="card-header">
+                <span class="card-icon">🚀</span>
+                <h2 class="card-title">Application</h2>
+            </div>
+            <div class="metric">
+                <span class="metric-label">Status</span>
+                <span class="metric-value good">${data.isRunning ? 'Running' : 'Stopped'}</span>
+            </div>
+            <div class="metric">
+                <span class="metric-label">Uptime</span>
+                <span class="metric-value">${formatUptime(uptime)}</span>
+            </div>
+            <div class="metric">
+                <span class="metric-label">Environment</span>
+                <span class="metric-value">${data.environment || 'development'}</span>
+            </div>
+            <div class="metric">
+                <span class="metric-label">Monitoring</span>
+                <span class="metric-value good">Active</span>
+            </div>
+        </div>
+    `;
+}
+
+function renderHealthCard(health) {
+    if (!health) return '';
+    
+    return `
+        <div class="card">
+            <div class="card-header">
+                <span class="card-icon">💚</span>
+                <h2 class="card-title">Health Checks</h2>
+            </div>
+            <div class="metric">
+                <span class="metric-label">Overall Status</span>
+                <span class="metric-value ${health.isHealthy ? 'good' : 'danger'}">
+                    ${health.isHealthy ? '✓ Healthy' : '✗ Unhealthy'}
+                </span>
+            </div>
+            <div class="metric">
+                <span class="metric-label">Registered Checks</span>
+                <span class="metric-value">${health.registeredChecks || 0}</span>
+            </div>
+            <div class="metric">
+                <span class="metric-label">Consecutive Failures</span>
+                <span class="metric-value ${health.consecutiveFailures > 0 ? 'warning' : 'good'}">
+                    ${health.consecutiveFailures || 0}
+                </span>
+            </div>
+        </div>
+    `;
+}
+
+function renderSystemCard(system) {
+    if (!system) return '';
+
+    const cpuPercent = system.cpu?.system || 0;
+    const memoryPercent = system.memory?.system?.usagePercent || 0;
+    
+    return `
+        <div class="card">
+            <div class="card-header">
+                <span class="card-icon">💻</span>
+                <h2 class="card-title">System Resources</h2>
+            </div>
+            <div class="metric">
+                <span class="metric-label">CPU Usage</span>
+                <span class="metric-value ${getCpuClass(cpuPercent)}">${cpuPercent.toFixed(1)}%</span>
+            </div>
+            <div class="progress-bar">
+                <div class="progress-fill ${getCpuClass(cpuPercent)}" style="width: ${cpuPercent}%"></div>
+            </div>
+            <div class="metric" style="margin-top: 15px;">
+                <span class="metric-label">Memory Usage</span>
+                <span class="metric-value ${getMemoryClass(memoryPercent)}">${memoryPercent.toFixed(1)}%</span>
+            </div>
+            <div class="progress-bar">
+                <div class="progress-fill ${getMemoryClass(memoryPercent)}" style="width: ${memoryPercent}%"></div>
+            </div>
+            <div class="metric" style="margin-top: 15px;">
+                <span class="metric-label">Heap Used</span>
+                <span class="metric-value">${formatBytes(system.memory?.heapUsed || 0)}</span>
+            </div>
+        </div>
+    `;
+}
+
+function renderErrorCard(errors) {
+    if (!errors) return '';
+    
+    return `
+        <div class="card">
+            <div class="card-header">
+                <span class="card-icon">⚠️</span>
+                <h2 class="card-title">Error Tracking</h2>
+            </div>
+            <div class="metric">
+                <span class="metric-label">Current Error Rate</span>
+                <span class="metric-value ${errors.currentErrorRate > 10 ? 'danger' : 'good'}">
+                    ${errors.currentErrorRate || 0} /min
+                </span>
+            </div>
+            <div class="metric">
+                <span class="metric-label">Threshold</span>
+                <span class="metric-value">${errors.threshold || 0} /min</span>
+            </div>
+            <div class="metric">
+                <span class="metric-label">API Error Rate</span>
+                <span class="metric-value">${errors.apiErrorRate || 0} /min</span>
+            </div>
+        </div>
+    `;
+}
+
+function renderStatsSummary(data) {
+    const summaryEl = document.getElementById('statsSummary');
+    if (!summaryEl) return;
+
+    const uptime = data.health?.uptime || 0;
+    const cpuPercent = data.system?.cpu?.system || 0;
+    const memoryPercent = data.system?.memory?.system?.usagePercent || 0;
+    
+    summaryEl.innerHTML = `
+        <div class="stats-grid">
+            <div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
+                <div style="text-align: center;">
+                    <div style="font-size: 0.9em; opacity: 0.9;">Uptime</div>
+                    <div style="font-size: 2em; font-weight: bold; margin: 10px 0;">${formatUptime(uptime)}</div>
+                </div>
+            </div>
+            <div class="card" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white;">
+                <div style="text-align: center;">
+                    <div style="font-size: 0.9em; opacity: 0.9;">CPU Usage</div>
+                    <div style="font-size: 2em; font-weight: bold; margin: 10px 0;">${cpuPercent.toFixed(1)}%</div>
+                </div>
+            </div>
+            <div class="card" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;">
+                <div style="text-align: center;">
+                    <div style="font-size: 0.9em; opacity: 0.9;">Memory Usage</div>
+                    <div style="font-size: 2em; font-weight: bold; margin: 10px 0;">${memoryPercent.toFixed(1)}%</div>
+                </div>
+            </div>
+            <div class="card" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white;">
+                <div style="text-align: center;">
+                    <div style="font-size: 0.9em; opacity: 0.9;">Error Rate</div>
+                    <div style="font-size: 2em; font-weight: bold; margin: 10px 0;">${data.errors?.currentErrorRate || 0}/min</div>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+// Load dashboard on page load
+document.addEventListener('DOMContentLoaded', function() {
+    loadDashboard();
+    // Auto-refresh every 30 seconds
+    setInterval(loadDashboard, 30000);
+});
+

package/node-monitor/examples/public/js/health.js

@@ -0,0 +1,114 @@
+// ===================================
+// HEALTH CHECK FUNCTIONS
+// ===================================
+
+async function loadHealth() {
+    try {
+        const response = await fetch('/health?format=json');
+        const data = await response.json();
+        renderHealth(data);
+        updateTimestamp();
+    } catch (error) {
+        showError('healthContent', error.message);
+    }
+}
+
+function renderHealth(data) {
+    const isHealthy = data.status === 'healthy';
+    
+    // Update status indicator
+    const indicator = document.getElementById('statusIndicator');
+    const statusText = document.getElementById('statusText');
+    
+    if (indicator && statusText) {
+        if (isHealthy) {
+            indicator.className = 'status-indicator healthy';
+            statusText.textContent = 'All Systems Operational';
+        } else {
+            indicator.className = 'status-indicator unhealthy';
+            statusText.textContent = 'System Issues Detected';
+        }
+    }
+
+    // Render content
+    const content = `
+        <div class="card">
+            <h2 style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
+                📊 Overview
+            </h2>
+            <div class="stats-grid">
+                <div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
+                    <div style="text-align: center;">
+                        <div style="font-size: 0.9em; opacity: 0.9;">Status</div>
+                        <div style="font-size: 3em; margin: 10px 0;">${isHealthy ? '✓' : '✗'}</div>
+                        <div style="font-size: 1.1em; font-weight: bold;">${data.status}</div>
+                    </div>
+                </div>
+                <div class="card" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white;">
+                    <div style="text-align: center;">
+                        <div style="font-size: 0.9em; opacity: 0.9;">Uptime</div>
+                        <div style="font-size: 2.5em; font-weight: bold; margin: 10px 0;">${formatUptime(data.uptime)}</div>
+                    </div>
+                </div>
+                <div class="card" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;">
+                    <div style="text-align: center;">
+                        <div style="font-size: 0.9em; opacity: 0.9;">Checks</div>
+                        <div style="font-size: 2.5em; font-weight: bold; margin: 10px 0;">${Object.keys(data.checks || {}).length}</div>
+                        <div style="font-size: 0.9em;">registered</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        ${renderChecks(data.checks)}
+    `;
+
+    document.getElementById('healthContent').innerHTML = content;
+}
+
+function renderChecks(checks) {
+    if (!checks || Object.keys(checks).length === 0) {
+        return `
+            <div class="card">
+                <h2 style="display: flex; align-items: center; gap: 10px;">
+                    ✅ Health Checks
+                </h2>
+                <p style="text-align: center; color: #666; padding: 20px;">
+                    No custom health checks registered
+                </p>
+            </div>
+        `;
+    }
+
+    const checkItems = Object.entries(checks).map(([name, check]) => {
+        const isPassing = check.status === 'pass';
+        return `
+            <div class="card" style="border-left: 5px solid ${isPassing ? '#10b981' : '#ef4444'};">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <div>
+                        <h3 style="color: #333; margin-bottom: 5px;">${formatCheckName(name)}</h3>
+                        <p style="color: #666; font-size: 0.9em;">Health check</p>
+                    </div>
+                    <div style="padding: 8px 20px; border-radius: 25px; font-weight: bold; background: ${isPassing ? '#d1fae5' : '#fee2e2'}; color: ${isPassing ? '#065f46' : '#991b1b'};">
+                        ${isPassing ? '✓ Pass' : '✗ Fail'}
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+
+    return `
+        <div>
+            <h2 style="color: white; margin: 30px 0 20px 0; font-size: 1.5em;">✅ Health Checks</h2>
+            ${checkItems}
+        </div>
+    `;
+}
+
+// Load health on page load
+document.addEventListener('DOMContentLoaded', function() {
+    loadHealth();
+    // Auto-refresh every 10 seconds
+    setInterval(loadHealth, 10000);
+});
+

package/node-monitor/examples/public/js/main.js

@@ -0,0 +1,89 @@
+// ===================================
+// UTILITY FUNCTIONS
+// ===================================
+
+function updateTimestamp() {
+    const now = new Date().toLocaleString();
+    const timestampEl = document.getElementById('lastUpdate');
+    if (timestampEl) {
+        timestampEl.textContent = `Last updated: ${now}`;
+    }
+}
+
+function formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+function formatUptime(seconds) {
+    if (!seconds) return '0s';
+    
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    
+    const parts = [];
+    if (days > 0) parts.push(`${days}d`);
+    if (hours > 0) parts.push(`${hours}h`);
+    if (minutes > 0) parts.push(`${minutes}m`);
+    if (secs > 0 || parts.length === 0) parts.push(`${secs}s`);
+    
+    return parts.join(' ');
+}
+
+function getCpuClass(percent) {
+    if (percent > 80) return 'danger';
+    if (percent > 60) return 'warning';
+    return 'good';
+}
+
+function getMemoryClass(percent) {
+    if (percent > 90) return 'danger';
+    if (percent > 75) return 'warning';
+    return 'good';
+}
+
+function formatCheckName(name) {
+    return name
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+
+// ===================================
+// ERROR HANDLING
+// ===================================
+
+function showError(containerId, message) {
+    const container = document.getElementById(containerId);
+    if (container) {
+        container.innerHTML = `
+            <div class="card" style="border-left: 5px solid #ef4444;">
+                <h3 style="color: #ef4444; display: flex; align-items: center; gap: 10px;">
+                    <span>❌</span>
+                    <span>Error Loading Data</span>
+                </h3>
+                <p style="color: #666; margin-top: 10px;">${escapeHtml(message)}</p>
+                <button class="refresh-btn" onclick="location.reload()" style="margin-top: 20px;">
+                    🔄 Reload Page
+                </button>
+            </div>
+        `;
+    }
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Initialize timestamp on page load
+document.addEventListener('DOMContentLoaded', function() {
+    updateTimestamp();
+});
+

package/node-monitor/examples/public/js/metrics.js

@@ -0,0 +1,225 @@
+// ===================================
+// METRICS FUNCTIONS
+// ===================================
+
+let cpuChart = null;
+let memoryChart = null;
+
+async function loadMetrics() {
+    try {
+        const response = await fetch('/monitor/metrics?format=json');
+        const data = await response.json();
+        renderMetrics(data);
+        updateTimestamp();
+    } catch (error) {
+        showError('statsContent', error.message);
+    }
+}
+
+function renderMetrics(data) {
+    renderStats(data);
+    renderCharts(data);
+}
+
+function renderStats(data) {
+    // Get the latest values from the history arrays
+    const cpuHistory = data.history?.cpu || [];
+    const memoryHistory = data.history?.memory || [];
+
+    const latestCpu = cpuHistory.length > 0 ? cpuHistory[cpuHistory.length - 1].value : { process: 0, system: 0 };
+    const latestMemory = memoryHistory.length > 0 ? memoryHistory[memoryHistory.length - 1].value : { system: {}, process: {} };
+
+    const html = `
+        <div class="stats-grid">
+            <div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
+                <div style="text-align: center;">
+                    <div style="font-size: 0.9em; opacity: 0.9;">CPU Usage (Process)</div>
+                    <div style="font-size: 2.5em; font-weight: bold; margin: 10px 0;">${(latestCpu.process || 0).toFixed(1)}%</div>
+                    <div style="font-size: 0.9em; opacity: 0.9;">Current load</div>
+                </div>
+            </div>
+            <div class="card" style="background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); color: white;">
+                <div style="text-align: center;">
+                    <div style="font-size: 0.9em; opacity: 0.9;">CPU Usage (System)</div>
+                    <div style="font-size: 2.5em; font-weight: bold; margin: 10px 0;">${(latestCpu.system || 0).toFixed(1)}%</div>
+                    <div style="font-size: 0.9em; opacity: 0.9;">Overall system</div>
+                </div>
+            </div>
+            <div class="card" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white;">
+                <div style="text-align: center;">
+                    <div style="font-size: 0.9em; opacity: 0.9;">Memory Usage (System)</div>
+                    <div style="font-size: 2.5em; font-weight: bold; margin: 10px 0;">${(latestMemory.system?.usagePercent || 0).toFixed(1)}%</div>
+                    <div style="font-size: 0.9em; opacity: 0.9;">${latestMemory.system?.used || 'N/A'} used</div>
+                </div>
+            </div>
+            <div class="card" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;">
+                <div style="text-align: center;">
+                    <div style="font-size: 0.9em; opacity: 0.9;">Data Points</div>
+                    <div style="font-size: 2.5em; font-weight: bold; margin: 10px 0;">${cpuHistory.length || 0}</div>
+                    <div style="font-size: 0.9em; opacity: 0.9;">Collected samples</div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    document.getElementById('statsContent').innerHTML = html;
+}
+
+function renderCharts(data) {
+    const cpuHistory = data.history?.cpu || [];
+    const memoryHistory = data.history?.memory || [];
+
+    if (cpuHistory.length === 0 && memoryHistory.length === 0) {
+        document.getElementById('chartsContent').innerHTML = `
+            <div class="card">
+                <p style="text-align: center; color: #666;">No metrics history available yet. Data will appear as the system collects metrics.</p>
+            </div>
+        `;
+        return;
+    }
+
+    // Use CPU history for labels (both should have same length)
+    const labels = cpuHistory.map((_, index) => `${index + 1}`);
+    const cpuProcessData = cpuHistory.map(m => m.value?.process || 0);
+    const cpuSystemData = cpuHistory.map(m => m.value?.system || 0);
+    const memoryData = memoryHistory.map(m => m.value?.system?.usagePercent || 0);
+
+    document.getElementById('chartsContent').innerHTML = `
+        <div class="card">
+            <h2 style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
+                💻 CPU Usage Over Time
+            </h2>
+            <div style="position: relative; height: 300px;">
+                <canvas id="cpuChart"></canvas>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2 style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
+                🧠 Memory Usage Over Time
+            </h2>
+            <div style="position: relative; height: 300px;">
+                <canvas id="memoryChart"></canvas>
+            </div>
+        </div>
+    `;
+
+    // Destroy existing charts
+    if (cpuChart) cpuChart.destroy();
+    if (memoryChart) memoryChart.destroy();
+
+    // Create CPU chart
+    const cpuCtx = document.getElementById('cpuChart').getContext('2d');
+    cpuChart = new Chart(cpuCtx, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Process CPU %',
+                    data: cpuProcessData,
+                    borderColor: '#667eea',
+                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
+                    tension: 0.4,
+                    fill: true,
+                    borderWidth: 2
+                },
+                {
+                    label: 'System CPU %',
+                    data: cpuSystemData,
+                    borderColor: '#764ba2',
+                    backgroundColor: 'rgba(118, 75, 162, 0.1)',
+                    tension: 0.4,
+                    fill: true,
+                    borderWidth: 2
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'top'
+                },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    max: 100,
+                    ticks: {
+                        callback: function(value) {
+                            return value + '%';
+                        }
+                    }
+                }
+            },
+            interaction: {
+                mode: 'nearest',
+                axis: 'x',
+                intersect: false
+            }
+        }
+    });
+
+    // Create Memory chart
+    const memoryCtx = document.getElementById('memoryChart').getContext('2d');
+    memoryChart = new Chart(memoryCtx, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Memory Usage %',
+                data: memoryData,
+                borderColor: '#10b981',
+                backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                tension: 0.4,
+                fill: true,
+                borderWidth: 2
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'top'
+                },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    max: 100,
+                    ticks: {
+                        callback: function(value) {
+                            return value + '%';
+                        }
+                    }
+                }
+            },
+            interaction: {
+                mode: 'nearest',
+                axis: 'x',
+                intersect: false
+            }
+        }
+    });
+}
+
+// Load metrics on page load
+document.addEventListener('DOMContentLoaded', function() {
+    loadMetrics();
+    // Auto-refresh every 30 seconds
+    setInterval(loadMetrics, 30000);
+});
+