cache_monitor.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KBI Labs - Cache Monitor</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #0a0a0a;
            color: #fff;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            color: #00ff88;
            margin-bottom: 40px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        .stat-card {
            background: #1a1a1a;
            padding: 30px;
            border-radius: 15px;
            border: 1px solid #333;
            text-align: center;
        }
        .stat-value {
            font-size: 3em;
            font-weight: bold;
            color: #00ff88;
            margin-bottom: 10px;
        }
        .stat-label {
            color: #888;
            font-size: 1.1em;
        }
        .performance-chart {
            background: #1a1a1a;
            padding: 30px;
            border-radius: 15px;
            border: 1px solid #333;
            height: 400px;
        }
        #refreshBtn {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #00ff88;
            color: #000;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
        }
        .good { color: #00ff88; }
        .warning { color: #ff8800; }
        .bad { color: #ff4444; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <button id="refreshBtn" onclick="fetchStats()">🔄 Refresh</button>
    
    <div class="container">
        <h1>Redis Cache Performance Monitor</h1>
        
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value" id="hitRate">0%</div>
                <div class="stat-label">Cache Hit Rate</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="totalHits">0</div>
                <div class="stat-label">Total Hits</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="memory">0MB</div>
                <div class="stat-label">Memory Used</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="avgSpeed">0ms</div>
                <div class="stat-label">Avg Response Time</div>
            </div>
        </div>
        
        <div class="performance-chart">
            <canvas id="performanceChart"></canvas>
        </div>
    </div>
    
    <script>
        let chart;
        const maxDataPoints = 20;
        let chartData = {
            labels: [],
            datasets: [{
                label: 'Hit Rate %',
                data: [],
                borderColor: '#00ff88',
                backgroundColor: 'rgba(0, 255, 136, 0.1)',
                tension: 0.4
            }]
        };
        
        async function fetchStats() {
            try {
                const response = await fetch('/api/cache/stats');
                const stats = await response.json();
                
                // Update stats
                const hitRate = stats.hit_rate || 0;
                document.getElementById('hitRate').textContent = hitRate + '%';
                document.getElementById('hitRate').className = 'stat-value ' + 
                    (hitRate > 80 ? 'good' : hitRate > 50 ? 'warning' : 'bad');
                
                document.getElementById('totalHits').textContent = 
                    (stats.keyspace_hits || 0).toLocaleString();
                
                document.getElementById('memory').textContent = 
                    stats.used_memory || '0MB';
                
                // Add to chart
                const now = new Date().toLocaleTimeString();
                chartData.labels.push(now);
                chartData.datasets[0].data.push(hitRate);
                
                // Keep only last N points
                if (chartData.labels.length > maxDataPoints) {
                    chartData.labels.shift();
                    chartData.datasets[0].data.shift();
                }
                
                chart.update();
                
            } catch (error) {
                console.error('Failed to fetch stats:', error);
            }
        }
        
        // Initialize chart
        window.onload = () => {
            const ctx = document.getElementById('performanceChart').getContext('2d');
            chart = new Chart(ctx, {
                type: 'line',
                data: chartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Cache Hit Rate Over Time',
                            color: '#fff',
                            font: { size: 16 }
                        },
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            grid: { color: '#333' },
                            ticks: { color: '#888' }
                        },
                        x: {
                            grid: { color: '#333' },
                            ticks: { color: '#888' }
                        }
                    }
                }
            });
            
            // Initial fetch
            fetchStats();
            
            // Auto-refresh every 5 seconds
            setInterval(fetchStats, 5000);
        };
    </script>
</body>
</html>