hobokenchicken/GopherGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: major dashboard overhaul and polish

Browse Source 
- Switched from mock data to real backend APIs.
- Implemented unified ApiClient for consistent frontend data fetching.
- Refactored dashboard structure and styles for a modern SaaS aesthetic.
- Fixed Axum 0.8+ routing and parameter syntax issues.
- Implemented real client creation/deletion and provider health monitoring.
- Synchronized WebSocket event structures between backend and frontend.
This commit is contained in:
Dustin Newkirk
2026-02-26 15:40:12 -05:00
parent 888b0e71c4
commit 686163780c
11 changed files with 963 additions and 3563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

432
static/js/pages/clients.js
View File

@@ -8,9 +8,10 @@ class ClientsPage {
async init() {
// Load data
await this.loadClients();
await this.loadClientUsageChart();
await this.loadRateLimitStatus();
await Promise.all([
this.loadClients(),
this.loadClientUsageChart()
]);
// Setup event listeners
this.setupEventListeners();
@@ -18,20 +19,12 @@ class ClientsPage {
async loadClients() {
try {
// In a real app, this would fetch from /api/clients
this.clients = [
{ id: 'client-1', name: 'Web Application', token: 'sk-*****abc123', created: '2024-01-01', lastUsed: '2024-01-15', requests: 1245, status: 'active' },
{ id: 'client-2', name: 'Mobile App', token: 'sk-*****def456', created: '2024-01-05', lastUsed: '2024-01-15', requests: 890, status: 'active' },
{ id: 'client-3', name: 'API Integration', token: 'sk-*****ghi789', created: '2024-01-08', lastUsed: '2024-01-14', requests: 1560, status: 'active' },
{ id: 'client-4', name: 'Internal Tools', token: 'sk-*****jkl012', created: '2024-01-10', lastUsed: '2024-01-13', requests: 340, status: 'inactive' },
{ id: 'client-5', name: 'Testing Suite', token: 'sk-*****mno345', created: '2024-01-12', lastUsed: '2024-01-12', requests: 120, status: 'active' },
{ id: 'client-6', name: 'Backup Service', token: 'sk-*****pqr678', created: '2024-01-14', lastUsed: null, requests: 0, status: 'pending' }
];
const data = await window.api.get('/clients');
this.clients = data;
this.renderClientsTable();
} catch (error) {
console.error('Error loading clients:', error);
window.authManager.showToast('Failed to load clients', 'error');
}
}
@@ -39,25 +32,26 @@ class ClientsPage {
const tableBody = document.querySelector('#clients-table tbody');
if (!tableBody) return;
if (this.clients.length === 0) {
tableBody.innerHTML = '<tr><td colspan="8" class="text-center">No clients configured</td></tr>';
return;
}
tableBody.innerHTML = this.clients.map(client => {
const statusClass = client.status === 'active' ? 'success' :
client.status === 'inactive' ? 'warning' : 'secondary';
const statusIcon = client.status === 'active' ? 'check-circle' :
client.status === 'inactive' ? 'exclamation-triangle' : 'clock';
const statusClass = client.status === 'active' ? 'success' : 'secondary';
const statusIcon = client.status === 'active' ? 'check-circle' : 'clock';
const created = luxon.DateTime.fromISO(client.created_at).toFormat('MMM dd, yyyy');
return `
<tr>
<td>${client.id}</td>
<td>${client.name}</td>
<td><span class="badge-client">${client.id}</span></td>
<td><strong>${client.name}</strong></td>
<td>
<code class="token-display">${client.token}</code>
<button class="btn-copy-token" data-token="${client.token}" title="Copy token">
<i class="fas fa-copy"></i>
</button>
<code class="token-display">sk-••••${client.id.substring(client.id.length - 4)}</code>
</td>
<td>${client.created}</td>
<td>${client.lastUsed || 'Never'}</td>
<td>${client.requests.toLocaleString()}</td>
<td>${created}</td>
<td>${client.last_used ? window.api.formatTimeAgo(client.last_used) : 'Never'}</td>
<td>${client.requests_count.toLocaleString()}</td>
<td>
<span class="status-badge ${statusClass}">
<i class="fas fa-${statusIcon}"></i>
@@ -66,13 +60,10 @@ class ClientsPage {
</td>
<td>
<div class="action-buttons">
<button class="btn-action" title="Edit" data-action="edit" data-id="${client.id}">
<button class="btn-action" title="Edit" onclick="window.clientsPage.editClient('${client.id}')">
<i class="fas fa-edit"></i>
</button>
<button class="btn-action" title="Rotate Token" data-action="rotate" data-id="${client.id}">
<i class="fas fa-redo"></i>
</button>
<button class="btn-action danger" title="Revoke" data-action="revoke" data-id="${client.id}">
<button class="btn-action danger" title="Delete" onclick="window.clientsPage.deleteClient('${client.id}')">
<i class="fas fa-trash"></i>
</button>
</div>
@@ -80,206 +71,33 @@ class ClientsPage {
</tr>
`;
}).join('');
// Add CSS for action buttons
this.addActionStyles();
}
addActionStyles() {
const style = document.createElement('style');
style.textContent = `
.token-display {
background-color: var(--bg-secondary);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-family: monospace;
font-size: 0.75rem;
margin-right: 0.5rem;
}
.btn-copy-token {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 0.875rem;
padding: 0.25rem;
transition: color 0.2s ease;
}
.btn-copy-token:hover {
color: var(--primary);
}
.action-buttons {
display: flex;
gap: 0.5rem;
}
.btn-action {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 0.875rem;
padding: 0.25rem;
transition: color 0.2s ease;
}
.btn-action:hover {
color: var(--primary);
}
.btn-action.danger:hover {
color: var(--danger);
}
`;
document.head.appendChild(style);
}
async loadClientUsageChart() {
try {
const data = {
labels: ['Web App', 'Mobile App', 'API Integration', 'Internal Tools', 'Testing'],
const data = await window.api.get('/usage/clients');
const chartData = {
labels: data.map(item => item.client_id),
datasets: [{
label: 'Requests',
data: [1245, 890, 1560, 340, 120],
data: data.map(item => item.requests),
color: '#3b82f6'
}]
};
window.chartManager.createHorizontalBarChart('client-usage-chart', data);
window.chartManager.createHorizontalBarChart('client-usage-chart', chartData);
} catch (error) {
console.error('Error loading client usage chart:', error);
}
}
async loadRateLimitStatus() {
const container = document.getElementById('rate-limit-status');
if (!container) return;
const rateLimits = [
{ client: 'Web Application', limit: 1000, used: 645, remaining: 355 },
{ client: 'Mobile App', limit: 500, used: 320, remaining: 180 },
{ client: 'API Integration', limit: 2000, used: 1560, remaining: 440 },
{ client: 'Internal Tools', limit: 100, used: 34, remaining: 66 },
{ client: 'Testing Suite', limit: 200, used: 120, remaining: 80 }
];
container.innerHTML = rateLimits.map(limit => {
const percentage = (limit.used / limit.limit) * 100;
let color = 'success';
if (percentage > 80) color = 'warning';
if (percentage > 95) color = 'danger';
return `
<div class="rate-limit-item">
<div class="rate-limit-header">
<span class="rate-limit-client">${limit.client}</span>
<span class="rate-limit-numbers">${limit.used} / ${limit.limit}</span>
</div>
<div class="progress-bar">
<div class="progress-fill ${color}" style="width: ${percentage}%"></div>
</div>
<div class="rate-limit-footer">
<span class="rate-limit-percentage">${Math.round(percentage)}% used</span>
<span class="rate-limit-remaining">${limit.remaining} remaining</span>
</div>
</div>
`;
}).join('');
// Add CSS for rate limit items
this.addRateLimitStyles();
}
addRateLimitStyles() {
const style = document.createElement('style');
style.textContent = `
.rate-limit-item {
margin-bottom: 1rem;
}
.rate-limit-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.rate-limit-client {
font-size: 0.875rem;
color: var(--text-primary);
}
.rate-limit-numbers {
font-size: 0.875rem;
color: var(--text-secondary);
}
.rate-limit-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.5rem;
font-size: 0.75rem;
}
.rate-limit-percentage {
color: var(--text-secondary);
}
.rate-limit-remaining {
color: var(--success);
font-weight: 500;
}
`;
document.head.appendChild(style);
}
setupEventListeners() {
// Add client button
const addBtn = document.getElementById('add-client');
if (addBtn) {
addBtn.addEventListener('click', () => {
this.showAddClientModal();
});
addBtn.onclick = () => this.showAddClientModal();
}
// Copy token buttons
document.addEventListener('click', (e) => {
if (e.target.closest('.btn-copy-token')) {
const button = e.target.closest('.btn-copy-token');
const token = button.dataset.token;
this.copyToClipboard(token);
if (window.authManager) {
window.authManager.showToast('Token copied to clipboard', 'success');
}
}
});
// Action buttons
document.addEventListener('click', (e) => {
if (e.target.closest('.btn-action')) {
const button = e.target.closest('.btn-action');
const action = button.dataset.action;
const clientId = button.dataset.id;
switch (action) {
case 'edit':
this.editClient(clientId);
break;
case 'rotate':
this.rotateToken(clientId);
break;
case 'revoke':
this.revokeClient(clientId);
break;
}
}
});
}
showAddClientModal() {
@@ -288,184 +106,68 @@ class ClientsPage {
modal.innerHTML = `
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Add New Client</h3>
<button class="modal-close">
<h3 class="modal-title">Create New API Client</h3>
<button class="modal-close" onclick="this.closest('.modal').remove()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<form id="add-client-form">
<div class="form-control">
<label for="client-name">Client Name</label>
<input type="text" id="client-name" placeholder="e.g., Web Application" required>
</div>
<div class="form-control">
<label for="client-description">Description (Optional)</label>
<textarea id="client-description" rows="3" placeholder="Describe what this client will be used for..."></textarea>
</div>
<div class="form-control">
<label for="rate-limit">Rate Limit (requests per hour)</label>
<input type="number" id="rate-limit" value="1000" min="1" max="10000">
</div>
</form>
<div class="form-control">
<label for="new-client-name">Display Name</label>
<input type="text" id="new-client-name" placeholder="e.g. My Coding Assistant" required>
</div>
<div class="form-control">
<label for="new-client-id">Custom ID (Optional)</label>
<input type="text" id="new-client-id" placeholder="e.g. personal-app">
<small>Leave empty to generate automatically</small>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary close-modal">Cancel</button>
<button class="btn btn-primary create-client">Create Client</button>
<button class="btn btn-secondary" onclick="this.closest('.modal').remove()">Cancel</button>
<button class="btn btn-primary" id="confirm-create-client">Create Client</button>
</div>
</div>
`;
document.body.appendChild(modal);
// Setup event listeners
const closeBtn = modal.querySelector('.modal-close');
const closeModalBtn = modal.querySelector('.close-modal');
const createBtn = modal.querySelector('.create-client');
const closeModal = () => {
modal.classList.remove('active');
setTimeout(() => modal.remove(), 300);
};
closeBtn.addEventListener('click', closeModal);
closeModalBtn.addEventListener('click', closeModal);
createBtn.addEventListener('click', () => {
const name = modal.querySelector('#client-name').value;
if (!name.trim()) {
if (window.authManager) {
window.authManager.showToast('Client name is required', 'error');
}
modal.querySelector('#confirm-create-client').onclick = async () => {
const name = modal.querySelector('#new-client-name').value;
const id = modal.querySelector('#new-client-id').value;
if (!name) {
window.authManager.showToast('Name is required', 'error');
return;
}
// In a real app, this would create the client via API
if (window.authManager) {
window.authManager.showToast(`Client "${name}" created successfully`, 'success');
}
// Refresh clients list
this.loadClients();
closeModal();
});
// Close on background click
modal.addEventListener('click', (e) => {
if (e.target === modal) {
closeModal();
}
});
}
editClient(clientId) {
const client = this.clients.find(c => c.id === clientId);
if (!client) return;
// Show edit modal
const modal = document.createElement('div');
modal.className = 'modal active';
modal.innerHTML = `
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Edit Client: ${client.name}</h3>
<button class="modal-close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<p>Client editing would be implemented here.</p>
<p>In a real implementation, this would include forms for updating client settings.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary close-modal">Cancel</button>
<button class="btn btn-primary save-client">Save Changes</button>
</div>
</div>
`;
document.body.appendChild(modal);
// Setup event listeners
const closeBtn = modal.querySelector('.modal-close');
const closeModalBtn = modal.querySelector('.close-modal');
const saveBtn = modal.querySelector('.save-client');
const closeModal = () => {
modal.classList.remove('active');
setTimeout(() => modal.remove(), 300);
try {
await window.api.post('/clients', { name, client_id: id || null });
window.authManager.showToast(`Client "${name}" created`, 'success');
modal.remove();
this.loadClients();
} catch (error) {
window.authManager.showToast(error.message, 'error');
}
};
closeBtn.addEventListener('click', closeModal);
closeModalBtn.addEventListener('click', closeModal);
saveBtn.addEventListener('click', () => {
// In a real app, this would save client changes
if (window.authManager) {
window.authManager.showToast('Client updated successfully', 'success');
}
closeModal();
});
// Close on background click
modal.addEventListener('click', (e) => {
if (e.target === modal) {
closeModal();
}
});
}
rotateToken(clientId) {
const client = this.clients.find(c => c.id === clientId);
if (!client) return;
// Show confirmation modal
if (confirm(`Are you sure you want to rotate the token for "${client.name}"? The old token will be invalidated.`)) {
// In a real app, this would rotate the token via API
if (window.authManager) {
window.authManager.showToast(`Token rotated for "${client.name}"`, 'success');
}
// Refresh clients list
async deleteClient(id) {
if (!confirm(`Are you sure you want to delete client ${id}? This cannot be undone.`)) return;
try {
await window.api.delete(`/clients/${id}`);
window.authManager.showToast('Client deleted', 'success');
this.loadClients();
} catch (error) {
window.authManager.showToast(error.message, 'error');
}
}
revokeClient(clientId) {
const client = this.clients.find(c => c.id === clientId);
if (!client) return;
// Show confirmation modal
if (confirm(`Are you sure you want to revoke client "${client.name}"? This action cannot be undone.`)) {
// In a real app, this would revoke the client via API
if (window.authManager) {
window.authManager.showToast(`Client "${client.name}" revoked`, 'success');
}
// Refresh clients list
this.loadClients();
}
}
copyToClipboard(text) {
navigator.clipboard.writeText(text).catch(err => {
console.error('Failed to copy:', err);
});
}
refresh() {
this.loadClients();
this.loadClientUsageChart();
this.loadRateLimitStatus();
editClient(id) {
window.authManager.showToast('Edit client not implemented yet', 'info');
}
}
// Initialize clients page when needed
window.initClients = async () => {
window.clientsPage = new ClientsPage();
};
// Export for use in other modules
if (typeof module !== 'undefined' && module.exports) {
module.exports = ClientsPage;
}