ui: major UX polish and bug fixes for dashboard

- Added global loading spinner and page transitions. - Improved sidebar with tooltips and persistent collapsed state. - Fixed chart memory leaks by properly destroying instances on page change. - Unified WebSocket event handling and status indicators. - Refined stat cards, tables, and modal interactions. - Added real backend integration for logout and session management.
2026-02-26 15:48:01 -05:00
parent b52e0e3af0
commit 2c5a6a596b
6 changed files with 202 additions and 51 deletions
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -403,6 +403,121 @@ body {
    border: 1px solid rgba(255, 255, 255, 0.1);
 }

-.ws-dot.connected { background: var(--success); box-shadow: 0 0 8px var(--success); }
-.ws-dot.disconnected { background: var(--danger); }
-.ws-dot.error { background: var(--warning); }
+/* Loading Spinner */
+.spinner-container {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2000;
+}
+
+.loading .spinner-container {
+    display: block;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(99, 102, 241, 0.1);
+    border-radius: 50%;
+    border-top-color: var(--primary);
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Page Content Transition */
+.page-content {
+    padding: 2rem;
+    animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(5px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Sidebar Tooltips (for collapsed state) */
+.sidebar.collapsed .menu-item {
+    position: relative;
+}
+
+.sidebar.collapsed .menu-item::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 100%;
+    margin-left: 10px;
+    background: #1e293b;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    white-space: nowrap;
+    z-index: 1001;
+}
+
+.sidebar.collapsed .menu-item:hover::after {
+    opacity: 1;
+}
+
+/* Card Header Polish */
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.25rem;
+}
+
+.card-title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Table Polish */
+.table {
+    width: 100%;
+    border-spacing: 0;
+}
+
+.table th {
+    background: #f8fafc;
+    text-align: left;
+    padding: 0.75rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #64748b;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.table td {
+    padding: 1rem;
+    border-bottom: 1px solid #f1f5f9;
+}
+
+.table tr:last-child td {
+    border-bottom: none;
+}
+
+/* Stat Card Hover */
+.stat-card {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.stat-card:hover {
+    border-color: var(--primary-light);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
--- a/static/index.html
+++ b/static/index.html
@@ -54,7 +54,7 @@
        <nav class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
-                    <i class="fas fa-robot"></i>
+                    <i class="fas fa-shield-alt"></i>
                    <span>LLM Proxy</span>
                </div>
                <button class="sidebar-toggle" id="sidebar-toggle">
@@ -65,15 +65,15 @@
            <div class="sidebar-menu">
                <div class="menu-section">
                    <h3 class="menu-title">MAIN</h3>
-                    <a href="#overview" class="menu-item active" data-page="overview">
-                        <i class="fas fa-tachometer-alt"></i>
+                    <a href="#overview" class="menu-item active" data-page="overview" data-tooltip="Dashboard Overview">
+                        <i class="fas fa-th-large"></i>
                        <span>Overview</span>
                    </a>
-                    <a href="#analytics" class="menu-item" data-page="analytics">
+                    <a href="#analytics" class="menu-item" data-page="analytics" data-tooltip="Usage Analytics">
                        <i class="fas fa-chart-line"></i>
                        <span>Analytics</span>
                    </a>
-                    <a href="#costs" class="menu-item" data-page="costs">
+                    <a href="#costs" class="menu-item" data-page="costs" data-tooltip="Cost Tracking">
                        <i class="fas fa-dollar-sign"></i>
                        <span>Cost Management</span>
                    </a>
@@ -81,15 +81,15 @@
                
                <div class="menu-section">
                    <h3 class="menu-title">MANAGEMENT</h3>
-                    <a href="#clients" class="menu-item" data-page="clients">
+                    <a href="#clients" class="menu-item" data-page="clients" data-tooltip="API Clients">
                        <i class="fas fa-users"></i>
                        <span>Client Management</span>
                    </a>
-                    <a href="#providers" class="menu-item" data-page="providers">
+                    <a href="#providers" class="menu-item" data-page="providers" data-tooltip="Model Providers">
                        <i class="fas fa-server"></i>
                        <span>Providers</span>
                    </a>
-                    <a href="#monitoring" class="menu-item" data-page="monitoring">
+                    <a href="#monitoring" class="menu-item" data-page="monitoring" data-tooltip="Live Monitoring">
                        <i class="fas fa-heartbeat"></i>
                        <span>Real-time Monitoring</span>
                    </a>
@@ -97,12 +97,12 @@
                
                <div class="menu-section">
                    <h3 class="menu-title">SYSTEM</h3>
-                    <a href="#settings" class="menu-item" data-page="settings">
+                    <a href="#settings" class="menu-item" data-page="settings" data-tooltip="System Settings">
                        <i class="fas fa-cog"></i>
                        <span>Settings</span>
                    </a>
-                    <a href="#logs" class="menu-item" data-page="logs">
-                        <i class="fas fa-file-alt"></i>
+                    <a href="#logs" class="menu-item" data-page="logs" data-tooltip="System Logs">
+                        <i class="fas fa-list-alt"></i>
                        <span>System Logs</span>
                    </a>
                </div>
@@ -118,7 +118,7 @@
                        <span class="user-role">Super Admin</span>
                    </div>
                </div>
-                <button class="logout-btn" id="logout-btn">
+                <button class="logout-btn" id="logout-btn" title="Logout">
                    <i class="fas fa-sign-out-alt"></i>
                </button>
            </div>
@@ -132,11 +132,11 @@
                    <h1 class="page-title" id="page-title">Dashboard Overview</h1>
                </div>
                <div class="nav-right">
-                    <div class="nav-item">
-                        <i class="fas fa-bell"></i>
-                        <span class="badge">3</span>
+                    <div class="nav-item" id="ws-status-nav" title="WebSocket Connection Status">
+                        <div class="ws-dot"></div>
+                        <span class="ws-text">Connecting...</span>
                    </div>
-                    <div class="nav-item">
+                    <div class="nav-item" title="Refresh Current Page">
                        <i class="fas fa-sync-alt" id="refresh-btn"></i>
                    </div>
                    <div class="nav-item">
@@ -147,15 +147,14 @@

            <!-- Page Content -->
            <div class="page-content" id="page-content">
-                <!-- Overview page will be loaded here -->
-            </div>
-        </main>
+                <!-- Dynamic content container -->
            </div>
            
-    <!-- WebSocket Status Indicator -->
-    <div class="ws-status" id="ws-status">
-        <span class="ws-dot"></span>
-        <span class="ws-text">Connecting...</span>
+            <!-- Global Spinner -->
+            <div class="spinner-container">
+                <div class="spinner"></div>
+            </div>
+        </main>
    </div>

    <!-- Scripts -->
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -44,6 +44,7 @@ class Dashboard {
    setupSidebar() {
        const toggleBtn = document.getElementById('sidebar-toggle');
        const sidebar = document.querySelector('.sidebar');
+        const logoutBtn = document.getElementById('logout-btn');
        
        if (toggleBtn && sidebar) {
            toggleBtn.onclick = () => {
@@ -55,6 +56,12 @@ class Dashboard {
                sidebar.classList.add('collapsed');
            }
        }
+
+        if (logoutBtn) {
+            logoutBtn.onclick = () => {
+                window.authManager.logout();
+            };
+        }
    }

    setupRefresh() {
@@ -72,8 +79,13 @@ class Dashboard {
    }

    async loadPage(page) {
+        if (window.chartManager) {
+            window.chartManager.destroyAllCharts();
+        }
+        
        this.currentPage = page;
        window.location.hash = page;
+        window.scrollTo(0, 0);
        
        // Update menu active state
        document.querySelectorAll('.menu-item').forEach(item => {
--- a/static/js/pages/clients.js
+++ b/static/js/pages/clients.js
@@ -77,12 +77,18 @@ class ClientsPage {
        try {
            const data = await window.api.get('/usage/clients');
            
+            if (!data || data.length === 0) {
+                const canvas = document.getElementById('client-usage-chart');
+                if (canvas) canvas.closest('.chart-container').style.display = 'none';
+                return;
+            }
+
            const chartData = {
                labels: data.map(item => item.client_id),
                datasets: [{
                    label: 'Requests',
                    data: data.map(item => item.requests),
-                    color: '#3b82f6'
+                    color: '#6366f1'
                }]
            };
            
--- a/static/js/pages/overview.js
+++ b/static/js/pages/overview.js
@@ -255,10 +255,44 @@ class OverviewPage {
        window.wsManager.subscribe('requests', (event) => {
            // Hot-reload stats and table when a new request comes in
            this.loadStats();
-            this.loadRecentRequests();
+            this.addToRecentRequests(event);
        });
    }

+    addToRecentRequests(request) {
+        const tableBody = document.querySelector('#recent-requests tbody');
+        if (!tableBody) return;
+        
+        // Remove empty message if present
+        if (tableBody.querySelector('.text-center')) {
+            tableBody.innerHTML = '';
+        }
+
+        const time = luxon.DateTime.fromISO(request.timestamp || new Date().toISOString()).toFormat('HH:mm:ss');
+        const statusClass = request.status === 'success' ? 'success' : 'danger';
+        const statusIcon = request.status === 'success' ? 'check-circle' : 'exclamation-circle';
+        
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${time}</td>
+            <td><span class="badge-client">${request.client_id}</span></td>
+            <td>${request.provider}</td>
+            <td><code class="code-sm">${request.model}</code></td>
+            <td>${(request.total_tokens || request.tokens || 0).toLocaleString()}</td>
+            <td>
+                <span class="status-badge ${statusClass}">
+                    <i class="fas fa-${statusIcon}"></i>
+                    ${request.status}
+                </span>
+            </td>
+        `;
+        
+        tableBody.insertBefore(row, tableBody.firstChild);
+        if (tableBody.children.length > 10) {
+            tableBody.lastElementChild.remove();
+        }
+    }
+
    showError(message) {
        const container = document.getElementById('overview-stats');
        if (container) {
--- a/static/js/websocket.js
+++ b/static/js/websocket.js
@@ -88,37 +88,22 @@ class WebSocketManager {
    }

    handleMessage(data) {
-        const { type, channel, payload } = data;
+        // Handle global events
+        if (data.type === 'request' || data.type === 'request') {
+            this.notify('requests', data.payload);
+        }
        
-        // Notify channel subscribers
+        // Notify specific channel subscribers
+        const channel = data.channel || data.type;
        if (channel && this.subscribers.has(channel)) {
            this.subscribers.get(channel).forEach(callback => {
                try {
-                    callback(payload);
+                    callback(data.payload);
                } catch (error) {
                    console.error('Error in WebSocket callback:', error);
                }
            });
        }
-        
-        // Handle specific message types
-        switch (type) {
-            case 'request':
-                this.handleRequest(payload);
-                break;
-            case 'metric':
-                this.handleMetric(payload);
-                break;
-            case 'log':
-                this.handleLog(payload);
-                break;
-            case 'system':
-                this.handleSystem(payload);
-                break;
-            case 'error':
-                this.handleError(payload);
-                break;
-        }
    }

    handleRequest(request) {
@@ -263,7 +248,7 @@ class WebSocketManager {
    }

    updateStatus(status) {
-        const statusElement = document.getElementById('ws-status');
+        const statusElement = document.getElementById('ws-status-nav');
        if (!statusElement) return;
        
        const dot = statusElement.querySelector('.ws-dot');