| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LogFlow Dashboard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: '#3b82f6', |
| secondary: '#6366f1', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .log-entry:hover { |
| background-color: rgba(59, 130, 246, 0.1); |
| } |
| .log-entry.error { |
| border-left: 4px solid #ef4444; |
| } |
| .log-entry.warning { |
| border-left: 4px solid #f59e0b; |
| } |
| .log-entry.info { |
| border-left: 4px solid #3b82f6; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-200 min-h-screen"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-gray-800 w-64 flex-shrink-0 border-r border-gray-700 flex flex-col"> |
| <div class="p-4 border-b border-gray-700 flex items-center space-x-2"> |
| <i data-feather="activity" class="text-primary w-6 h-6"></i> |
| <span class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">LogFlow</span> |
| </div> |
| <div class="p-4 flex-1 overflow-y-auto"> |
| <div class="mb-6"> |
| <h3 class="text-gray-400 uppercase text-xs font-semibold mb-3">Dashboard</h3> |
| <ul class="space-y-1"> |
| <li> |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md bg-gray-700 text-white"> |
| <i data-feather="home" class="w-4 h-4"></i> |
| <span>Overview</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-700 transition text-gray-300"> |
| <i data-feather="activity" class="w-4 h-4"></i> |
| <span>Analytics</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-700 transition text-gray-300"> |
| <i data-feather="alert-circle" class="w-4 h-4"></i> |
| <span>Alerts</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div class="mb-6"> |
| <h3 class="text-gray-400 uppercase text-xs font-semibold mb-3">Log Management</h3> |
| <ul class="space-y-1"> |
| <li> |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-700 transition text-gray-300"> |
| <i data-feather="search" class="w-4 h-4"></i> |
| <span>Log Explorer</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-700 transition text-gray-300"> |
| <i data-feather="filter" class="w-4 h-4"></i> |
| <span>Saved Queries</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-700 transition text-gray-300"> |
| <i data-feather="archive" class="w-4 h-4"></i> |
| <span>Archives</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div class="mb-6"> |
| <h3 class="text-gray-400 uppercase text-xs font-semibold mb-3">Configuration</h3> |
| <ul class="space-y-1"> |
| <li> |
| <a href="api.html" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-700 transition text-gray-300"> |
| <i data-feather="settings" class="w-4 h-4"></i> |
| <span>Sources</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-700 transition text-gray-300"> |
| <i data-feather="send" class="w-4 h-4"></i> |
| <span>Destinations</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-700 transition text-gray-300"> |
| <i data-feather="users" class="w-4 h-4"></i> |
| <span>Users</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| <div class="p-4 border-t border-gray-700"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center"> |
| <i data-feather="user" class="text-primary"></i> |
| </div> |
| <div> |
| <div class="font-medium">Admin User</div> |
| <div class="text-xs text-gray-400">admin@example.com</div> |
| </div> |
| </div> |
| <button class="mt-4 w-full flex items-center space-x-2 text-gray-300 hover:text-white transition"> |
| <i data-feather="log-out" class="w-4 h-4"></i> |
| <span>Sign Out</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 flex flex-col overflow-hidden"> |
| |
| <header class="bg-gray-800 border-b border-gray-700 py-4 px-6 flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <button id="sidebar-toggle" class="md:hidden p-2 rounded-md hover:bg-gray-700"> |
| <i data-feather="menu" class="w-5 h-5"></i> |
| </button> |
| <h1 class="text-xl font-semibold">Dashboard Overview</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <button class="p-2 rounded-md hover:bg-gray-700"> |
| <i data-feather="bell" class="w-5 h-5"></i> |
| <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span> |
| </button> |
| </div> |
| <button id="theme-toggle" class="p-2 rounded-md hover:bg-gray-700"> |
| <i data-feather="moon" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 overflow-y-auto p-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-gray-800 rounded-lg p-6 border border-gray-700"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-400 text-sm">Logs Collected</p> |
| <h3 class="text-2xl font-bold mt-1">24,568</h3> |
| <p class="text-green-400 text-sm mt-2"> |
| <i data-feather="trending-up" class="w-4 h-4 inline mr-1"></i> |
| <span>12% from yesterday</span> |
| </p> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> |
| <i data-feather="download" class="text-primary"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-6 border border-gray-700"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-400 text-sm">Error Logs</p> |
| <h3 class="text-2xl font-bold mt-1">1,245</h3> |
| <p class="text-red-400 text-sm mt-2"> |
| <i data-feather="trending-up" class="w-4 h-4 inline mr-1"></i> |
| <span>8% from yesterday</span> |
| </p> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-red-500 bg-opacity-10 flex items-center justify-center"> |
| <i data-feather="alert-circle" class="text-red-500"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-6 border border-gray-700"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-400 text-sm">Warning Logs</p> |
| <h3 class="text-2xl font-bold mt-1">876</h3> |
| <p class="text-yellow-400 text-sm mt-2"> |
| <i data-feather="trending-down" class="w-4 h-4 inline mr-1"></i> |
| <span>3% from yesterday</span> |
| </p> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-yellow-500 bg-opacity-10 flex items-center justify-center"> |
| <i data-feather="alert-triangle" class="text-yellow-500"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-6 border border-gray-700"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-400 text-sm">Active Sources</p> |
| <h3 class="text-2xl font-bold mt-1">19</h3> |
| <p class="text-blue-400 text-sm mt-2"> |
| <i data-feather="trending-up" class="w-4 h-4 inline mr-1"></i> |
| <span>2 new today</span> |
| </p> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-indigo-500 bg-opacity-10 flex items-center justify-center"> |
| <i data-feather="server" class="text-indigo-500"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
| <div class="bg-gray-800 rounded-lg p-6 border border-gray-700"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-lg font-semibold">Log Volume</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-xs rounded bg-gray-700 text-gray-300">24h</button> |
| <button class="px-3 py-1 text-xs rounded hover:bg-gray-700 text-gray-300">7d</button> |
| <button class="px-3 py-1 text-xs rounded hover:bg-gray-700 text-gray-300">30d</button> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="logVolumeChart"></canvas> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-6 border border-gray-700"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-lg font-semibold">Log Sources</h2> |
| <button class="text-sm text-primary hover:underline">View All</button> |
| </div> |
| <div class="h-64"> |
| <canvas id="logSourcesChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden"> |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> |
| <h2 class="text-lg font-semibold">Recent Log Entries</h2> |
| <div class="flex space-x-2"> |
| <div class="relative"> |
| <input type="text" placeholder="Search logs..." class="bg-gray-900 text-sm rounded-md pl-10 pr-4 py-2 w-64 focus:outline-none focus:ring-1 focus:ring-primary"> |
| <i data-feather="search" class="absolute left-3 top-2.5 w-4 h-4 text-gray-500"></i> |
| </div> |
| <select class="bg-gray-900 text-sm rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-primary"> |
| <option>All Severity</option> |
| <option>Error</option> |
| <option>Warning</option> |
| <option>Info</option> |
| </select> |
| </div> |
| </div> |
| <div class="divide-y divide-gray-700 max-h-96 overflow-y-auto"> |
| |
| <div class="log-entry error p-4 hover:bg-gray-750 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-red-500 bg-opacity-10 flex items-center justify-center"> |
| <i data-feather="alert-circle" class="text-red-500 w-4 h-4"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex items-center justify-between"> |
| <p class="text-sm font-medium text-red-400">ERROR</p> |
| <p class="text-xs text-gray-500">2 minutes ago</p> |
| </div> |
| <p class="text-sm mt-1">Database connection failed: Connection timed out</p> |
| <div class="mt-2 flex flex-wrap gap-2"> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">web-server-1</span> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">postgres</span> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">high-priority</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="log-entry warning p-4 hover:bg-gray-750 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-yellow-500 bg-opacity-10 flex items-center justify-center"> |
| <i data-feather="alert-triangle" class="text-yellow-500 w-4 h-4"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex items-center justify-between"> |
| <p class="text-sm font-medium text-yellow-400">WARNING</p> |
| <p class="text-xs text-gray-500">15 minutes ago</p> |
| </div> |
| <p class="text-sm mt-1">Disk space at 85% capacity on /var partition</p> |
| <div class="mt-2 flex flex-wrap gap-2"> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">db-server-2</span> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">storage</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="log-entry info p-4 hover:bg-gray-750 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 bg-opacity-10 flex items-center justify-center"> |
| <i data-feather="info" class="text-blue-500 w-4 h-4"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex items-center justify-between"> |
| <p class="text-sm font-medium text-blue-400">INFO</p> |
| <p class="text-xs text-gray-500">1 hour ago</p> |
| </div> |
| <p class="text-sm mt-1">User authentication successful for admin@example.com</p> |
| <div class="mt-2 flex flex-wrap gap-2"> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">auth-service</span> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">security</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="log-entry error p-4 hover:bg-gray-750 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-red-500 bg-opacity-10 flex items-center justify-center"> |
| <i data-feather="alert-circle" class="text-red-500 w-4 h-4"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex items-center justify-between"> |
| <p class="text-sm font-medium text-red-400">ERROR</p> |
| <p class="text-xs text-gray-500">2 hours ago</p> |
| </div> |
| <p class="text-sm mt-1">API request failed with 500 status code</p> |
| <div class="mt-2 flex flex-wrap gap-2"> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">api-gateway</span> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">high-priority</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="log-entry info p-4 hover:bg-gray-750 cursor-pointer"> |
| <div class="flex items-start space-x-3"> |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 bg-opacity-10 flex items-center justify-center"> |
| <i data-feather="info" class="text-blue-500 w-4 h-4"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex items-center justify-between"> |
| <p class="text-sm font-medium text-blue-400">INFO</p> |
| <p class="text-xs text-gray-500">3 hours ago</p> |
| </div> |
| <p class="text-sm mt-1">Backup completed successfully for database 'production'</p> |
| <div class="mt-2 flex flex-wrap gap-2"> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">backup-service</span> |
| <span class="px-2 py-0.5 text-xs rounded bg-gray-700">database</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 border-t border-gray-700 flex items-center justify-between"> |
| <button class="text-sm text-primary hover:underline">View All Logs</button> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-xs rounded bg-gray-700 text-gray-300">1</button> |
| <button class="px-3 py-1 text-xs rounded hover:bg-gray-700 text-gray-300">2</button> |
| <button class="px-3 py-1 text-xs rounded hover:bg-gray-700 text-gray-300">3</button> |
| <button class="px-3 py-1 text-xs rounded hover:bg-gray-700 text-gray-300">Next</button> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const html = document.documentElement; |
| |
| themeToggle.addEventListener('click', () => { |
| html.classList.toggle('dark'); |
| const icon = themeToggle.querySelector('i'); |
| if (html.classList.contains('dark')) { |
| feather.icons['moon'].replace(icon); |
| } else { |
| feather.icons['sun'].replace(icon); |
| } |
| }); |
| |
| |
| const sidebarToggle = document.getElementById('sidebar-toggle'); |
| const sidebar = document.querySelector('.sidebar'); |
| |
| sidebarToggle.addEventListener('click', () => { |
| sidebar.classList.toggle('hidden'); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const logVolumeCtx = document.getElementById('logVolumeChart').getContext('2d'); |
| const logVolumeChart = new Chart(logVolumeCtx, { |
| type: 'line', |
| data: { |
| labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'], |
| datasets: [{ |
| label: 'Logs per hour', |
| data: [1200, 1900, 3000, 2500, 2800, 2100, 1500], |
| borderColor: '#3b82f6', |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', |
| borderWidth: 2, |
| fill: true, |
| tension: 0.4 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| color: 'rgba(255, 255, 255, 0.05)' |
| }, |
| ticks: { |
| color: '#9CA3AF' |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| }, |
| ticks: { |
| color: '#9CA3AF' |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| display: false |
| } |
| } |
| } |
| }); |
| |
| |
| const logSourcesCtx = document.getElementById('logSourcesChart').getContext('2d'); |
| const logSourcesChart = new Chart(logSourcesCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Web Servers', 'Databases', 'Applications', 'Services', 'Others'], |
| datasets: [{ |
| data: [35, 25, 20, 15, 5], |
| backgroundColor: [ |
| '#3b82f6', |
| '#6366f1', |
| '#8b5cf6', |
| '#ec4899', |
| '#6b7280' |
| ], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'right', |
| labels: { |
| color: '#9CA3AF' |
| } |
| } |
| }, |
| cutout: '70%' |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
