585 lines
22 KiB
JavaScript
585 lines
22 KiB
JavaScript
/**
|
||
* Mercedes-Benz MYP Admin Live Dashboard
|
||
* Echtzeit-Updates für das Admin Panel mit echten Daten
|
||
*/
|
||
|
||
class AdminLiveDashboard {
|
||
constructor() {
|
||
this.isLive = false;
|
||
this.updateInterval = null;
|
||
this.retryCount = 0;
|
||
this.maxRetries = 3;
|
||
|
||
// Dynamische API-Base-URL-Erkennung
|
||
this.apiBaseUrl = this.detectApiBaseUrl();
|
||
console.log('🔗 API Base URL erkannt:', this.apiBaseUrl);
|
||
|
||
this.init();
|
||
}
|
||
|
||
detectApiBaseUrl() {
|
||
const currentHost = window.location.hostname;
|
||
const currentProtocol = window.location.protocol;
|
||
const currentPort = window.location.port;
|
||
|
||
console.log('🔍 Live Dashboard API URL Detection:', { currentHost, currentProtocol, currentPort });
|
||
|
||
// Wenn wir bereits auf dem richtigen Port sind, verwende relative URLs
|
||
if (currentPort === '443' || !currentPort) {
|
||
console.log('✅ Verwende relative URLs (HTTPS Port 443)');
|
||
return '';
|
||
}
|
||
|
||
// Für alle anderen Fälle, verwende HTTPS auf Port 443
|
||
const fallbackUrl = `https://${currentHost}`;
|
||
console.log('🔄 Fallback zu HTTPS:443:', fallbackUrl);
|
||
|
||
return fallbackUrl;
|
||
}
|
||
|
||
init() {
|
||
console.log('🚀 Mercedes-Benz MYP Admin Live Dashboard gestartet');
|
||
|
||
// Live-Status anzeigen
|
||
this.updateLiveTime();
|
||
this.startLiveUpdates();
|
||
|
||
// Event Listeners
|
||
this.bindEvents();
|
||
|
||
// Initial Load
|
||
this.loadLiveStats();
|
||
|
||
// Error Monitoring System
|
||
this.initErrorMonitoring();
|
||
}
|
||
|
||
bindEvents() {
|
||
// Quick Action Buttons
|
||
const systemStatusBtn = document.getElementById('system-status-btn');
|
||
const analyticsBtn = document.getElementById('analytics-btn');
|
||
const maintenanceBtn = document.getElementById('maintenance-btn');
|
||
|
||
if (systemStatusBtn) {
|
||
systemStatusBtn.addEventListener('click', () => this.showSystemStatus());
|
||
}
|
||
|
||
if (analyticsBtn) {
|
||
analyticsBtn.addEventListener('click', () => this.showAnalytics());
|
||
}
|
||
|
||
if (maintenanceBtn) {
|
||
maintenanceBtn.addEventListener('click', () => this.showMaintenance());
|
||
}
|
||
|
||
// Page Visibility API für optimierte Updates
|
||
document.addEventListener('visibilitychange', () => {
|
||
if (document.hidden) {
|
||
this.pauseLiveUpdates();
|
||
} else {
|
||
this.resumeLiveUpdates();
|
||
}
|
||
});
|
||
}
|
||
|
||
startLiveUpdates() {
|
||
this.isLive = true;
|
||
this.updateLiveIndicator(true);
|
||
|
||
// Live Stats alle 30 Sekunden aktualisieren
|
||
this.updateInterval = setInterval(() => {
|
||
this.loadLiveStats();
|
||
}, 30000);
|
||
|
||
// Zeit jede Sekunde aktualisieren
|
||
setInterval(() => {
|
||
this.updateLiveTime();
|
||
}, 1000);
|
||
}
|
||
|
||
pauseLiveUpdates() {
|
||
this.isLive = false;
|
||
this.updateLiveIndicator(false);
|
||
if (this.updateInterval) {
|
||
clearInterval(this.updateInterval);
|
||
}
|
||
}
|
||
|
||
resumeLiveUpdates() {
|
||
if (!this.isLive) {
|
||
this.startLiveUpdates();
|
||
this.loadLiveStats(); // Sofortiges Update beim Fortsetzen
|
||
}
|
||
}
|
||
|
||
updateLiveIndicator(isLive) {
|
||
const indicator = document.getElementById('live-indicator');
|
||
if (indicator) {
|
||
if (isLive) {
|
||
indicator.className = 'w-2 h-2 bg-green-400 rounded-full animate-pulse';
|
||
} else {
|
||
indicator.className = 'w-2 h-2 bg-gray-400 rounded-full';
|
||
}
|
||
}
|
||
}
|
||
|
||
updateLiveTime() {
|
||
const timeElement = document.getElementById('live-time');
|
||
if (timeElement) {
|
||
const now = new Date();
|
||
timeElement.textContent = now.toLocaleTimeString('de-DE');
|
||
}
|
||
}
|
||
|
||
async loadLiveStats() {
|
||
try {
|
||
const url = `${this.apiBaseUrl}/api/admin/stats/live`;
|
||
console.log('🔄 Lade Live-Statistiken von:', url);
|
||
|
||
const response = await fetch(url, {
|
||
method: 'GET',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRFToken': this.getCSRFToken()
|
||
}
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||
}
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
this.updateStatsDisplay(data);
|
||
this.retryCount = 0; // Reset retry count on success
|
||
|
||
// Success notification (optional)
|
||
this.showQuietNotification('Live-Daten aktualisiert', 'success');
|
||
} else {
|
||
throw new Error(data.error || 'Unbekannter Fehler beim Laden der Live-Statistiken');
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Fehler beim Laden der Live-Statistiken:', error);
|
||
|
||
this.retryCount++;
|
||
if (this.retryCount <= this.maxRetries) {
|
||
console.log(`Versuche erneut... (${this.retryCount}/${this.maxRetries})`);
|
||
setTimeout(() => this.loadLiveStats(), 5000); // Retry nach 5 Sekunden
|
||
} else {
|
||
this.handleConnectionError();
|
||
}
|
||
}
|
||
}
|
||
|
||
updateStatsDisplay(data) {
|
||
// Benutzer Stats
|
||
this.updateCounter('live-users-count', data.total_users);
|
||
this.updateProgress('users-progress', Math.min((data.total_users / 20) * 100, 100)); // Max 20 users = 100%
|
||
|
||
// Drucker Stats
|
||
this.updateCounter('live-printers-count', data.total_printers);
|
||
this.updateElement('live-printers-online', `${data.online_printers} online`);
|
||
if (data.total_printers > 0) {
|
||
this.updateProgress('printers-progress', (data.online_printers / data.total_printers) * 100);
|
||
}
|
||
|
||
// Jobs Stats
|
||
this.updateCounter('live-jobs-active', data.active_jobs);
|
||
this.updateElement('live-jobs-queued', `${data.queued_jobs} in Warteschlange`);
|
||
this.updateProgress('jobs-progress', Math.min(data.active_jobs * 20, 100)); // Max 5 jobs = 100%
|
||
|
||
// Erfolgsrate Stats
|
||
this.updateCounter('live-success-rate', `${data.success_rate}%`);
|
||
this.updateProgress('success-progress', data.success_rate);
|
||
|
||
// Trend Analysis
|
||
this.updateSuccessTrend(data.success_rate);
|
||
|
||
console.log('📊 Live-Statistiken aktualisiert:', data);
|
||
}
|
||
|
||
updateCounter(elementId, newValue) {
|
||
const element = document.getElementById(elementId);
|
||
if (element) {
|
||
const currentValue = parseInt(element.textContent) || 0;
|
||
if (currentValue !== newValue) {
|
||
this.animateCounter(element, currentValue, newValue);
|
||
}
|
||
}
|
||
}
|
||
|
||
animateCounter(element, from, to) {
|
||
const duration = 1000; // 1 Sekunde
|
||
const increment = (to - from) / (duration / 16); // 60 FPS
|
||
let current = from;
|
||
|
||
const timer = setInterval(() => {
|
||
current += increment;
|
||
if ((increment > 0 && current >= to) || (increment < 0 && current <= to)) {
|
||
current = to;
|
||
clearInterval(timer);
|
||
}
|
||
element.textContent = Math.round(current);
|
||
}, 16);
|
||
}
|
||
|
||
updateElement(elementId, newValue) {
|
||
const element = document.getElementById(elementId);
|
||
if (element && element.textContent !== newValue) {
|
||
element.textContent = newValue;
|
||
}
|
||
}
|
||
|
||
updateProgress(elementId, percentage) {
|
||
const element = document.getElementById(elementId);
|
||
if (element) {
|
||
element.style.width = `${Math.max(0, Math.min(100, percentage))}%`;
|
||
}
|
||
}
|
||
|
||
updateSuccessTrend(successRate) {
|
||
const trendElement = document.getElementById('success-trend');
|
||
if (trendElement) {
|
||
let trendText = 'Stabil';
|
||
let trendClass = 'text-green-500';
|
||
let trendIcon = 'M5 10l7-7m0 0l7 7m-7-7v18'; // Up arrow
|
||
|
||
if (successRate >= 95) {
|
||
trendText = 'Excellent';
|
||
trendClass = 'text-green-600';
|
||
} else if (successRate >= 80) {
|
||
trendText = 'Gut';
|
||
trendClass = 'text-green-500';
|
||
} else if (successRate >= 60) {
|
||
trendText = 'Mittel';
|
||
trendClass = 'text-yellow-500';
|
||
trendIcon = 'M5 12h14'; // Horizontal line
|
||
} else {
|
||
trendText = 'Niedrig';
|
||
trendClass = 'text-red-500';
|
||
trendIcon = 'M19 14l-7 7m0 0l-7-7m7 7V3'; // Down arrow
|
||
}
|
||
|
||
trendElement.className = `text-sm ${trendClass}`;
|
||
trendElement.innerHTML = `
|
||
<span class="inline-flex items-center">
|
||
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${trendIcon}"/>
|
||
</svg>
|
||
${trendText}
|
||
</span>
|
||
`;
|
||
}
|
||
}
|
||
|
||
showSystemStatus() {
|
||
// System Status Modal oder Navigation
|
||
console.log('🔧 System Status angezeigt');
|
||
this.showNotification('System Status wird geladen...', 'info');
|
||
|
||
// Hier könnten weitere System-Details geladen werden
|
||
const url = `${this.apiBaseUrl}/api/admin/system/status`;
|
||
fetch(url)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// System Status anzeigen
|
||
console.log('System Status:', data);
|
||
})
|
||
.catch(error => {
|
||
console.error('Fehler beim Laden des System Status:', error);
|
||
});
|
||
}
|
||
|
||
showAnalytics() {
|
||
console.log('📈 Live Analytics angezeigt');
|
||
this.showNotification('Analytics werden geladen...', 'info');
|
||
|
||
// Analytics Tab aktivieren oder Modal öffnen
|
||
const analyticsTab = document.querySelector('a[href*="tab=system"]');
|
||
if (analyticsTab) {
|
||
analyticsTab.click();
|
||
}
|
||
}
|
||
|
||
showMaintenance() {
|
||
console.log('🛠️ Wartung angezeigt');
|
||
this.showNotification('Wartungsoptionen werden geladen...', 'info');
|
||
|
||
// Wartungs-Tab aktivieren oder Modal öffnen
|
||
const systemTab = document.querySelector('a[href*="tab=system"]');
|
||
if (systemTab) {
|
||
systemTab.click();
|
||
}
|
||
}
|
||
|
||
handleConnectionError() {
|
||
console.error('🔴 Verbindung zu Live-Updates verloren');
|
||
this.updateLiveIndicator(false);
|
||
this.showNotification('Verbindung zu Live-Updates verloren. Versuche erneut...', 'error');
|
||
|
||
// Auto-Recovery nach 30 Sekunden
|
||
setTimeout(() => {
|
||
this.retryCount = 0;
|
||
this.loadLiveStats();
|
||
}, 30000);
|
||
}
|
||
|
||
showNotification(message, type = 'info') {
|
||
// Erstelle oder aktualisiere Notification
|
||
let notification = document.getElementById('live-notification');
|
||
if (!notification) {
|
||
notification = document.createElement('div');
|
||
notification.id = 'live-notification';
|
||
notification.className = 'fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm';
|
||
document.body.appendChild(notification);
|
||
}
|
||
|
||
const colors = {
|
||
success: 'bg-green-500 text-white',
|
||
error: 'bg-red-500 text-white',
|
||
info: 'bg-blue-500 text-white',
|
||
warning: 'bg-yellow-500 text-white'
|
||
};
|
||
|
||
notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm ${colors[type]} transform transition-all duration-300 translate-x-0`;
|
||
notification.textContent = message;
|
||
|
||
// Auto-Hide nach 3 Sekunden
|
||
setTimeout(() => {
|
||
if (notification) {
|
||
notification.style.transform = 'translateX(100%)';
|
||
setTimeout(() => {
|
||
if (notification && notification.parentNode) {
|
||
notification.parentNode.removeChild(notification);
|
||
}
|
||
}, 300);
|
||
}
|
||
}, 3000);
|
||
}
|
||
|
||
showQuietNotification(message, type) {
|
||
// Nur in der Konsole loggen für nicht-störende Updates
|
||
const emoji = type === 'success' ? '✅' : type === 'error' ? '❌' : 'ℹ️';
|
||
console.log(`${emoji} ${message}`);
|
||
}
|
||
|
||
getCSRFToken() {
|
||
const meta = document.querySelector('meta[name="csrf-token"]');
|
||
return meta ? meta.getAttribute('content') : '';
|
||
}
|
||
|
||
// Error Monitoring System
|
||
initErrorMonitoring() {
|
||
// Check system health every 30 seconds
|
||
this.checkSystemHealth();
|
||
setInterval(() => this.checkSystemHealth(), 30000);
|
||
|
||
// Setup error alert event handlers
|
||
this.setupErrorAlertHandlers();
|
||
}
|
||
|
||
async checkSystemHealth() {
|
||
try {
|
||
const response = await fetch('/api/admin/system-health');
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
this.updateHealthDisplay(data);
|
||
this.updateErrorAlerts(data);
|
||
} else {
|
||
console.error('System health check failed:', data.error);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error checking system health:', error);
|
||
}
|
||
}
|
||
|
||
updateHealthDisplay(data) {
|
||
// Update database health status
|
||
const statusIndicator = document.getElementById('db-status-indicator');
|
||
const statusText = document.getElementById('db-status-text');
|
||
const lastMigration = document.getElementById('last-migration');
|
||
const schemaIntegrity = document.getElementById('schema-integrity');
|
||
const recentErrorsCount = document.getElementById('recent-errors-count');
|
||
|
||
if (statusIndicator && statusText) {
|
||
if (data.health_status === 'critical') {
|
||
statusIndicator.className = 'w-3 h-3 bg-red-500 rounded-full animate-pulse';
|
||
statusText.textContent = 'Kritisch';
|
||
statusText.className = 'text-sm font-medium text-red-600 dark:text-red-400';
|
||
} else if (data.health_status === 'warning') {
|
||
statusIndicator.className = 'w-3 h-3 bg-yellow-500 rounded-full animate-pulse';
|
||
statusText.textContent = 'Warnung';
|
||
statusText.className = 'text-sm font-medium text-yellow-600 dark:text-yellow-400';
|
||
} else {
|
||
statusIndicator.className = 'w-3 h-3 bg-green-400 rounded-full animate-pulse';
|
||
statusText.textContent = 'Gesund';
|
||
statusText.className = 'text-sm font-medium text-green-600 dark:text-green-400';
|
||
}
|
||
}
|
||
|
||
if (lastMigration) {
|
||
lastMigration.textContent = data.last_migration || 'Unbekannt';
|
||
}
|
||
|
||
if (schemaIntegrity) {
|
||
schemaIntegrity.textContent = data.schema_integrity || 'Prüfung';
|
||
if (data.schema_integrity === 'FEHLER') {
|
||
schemaIntegrity.className = 'text-lg font-semibold text-red-600 dark:text-red-400';
|
||
} else {
|
||
schemaIntegrity.className = 'text-lg font-semibold text-green-600 dark:text-green-400';
|
||
}
|
||
}
|
||
|
||
if (recentErrorsCount) {
|
||
const errorCount = data.recent_errors_count || 0;
|
||
recentErrorsCount.textContent = errorCount;
|
||
if (errorCount > 0) {
|
||
recentErrorsCount.className = 'text-lg font-semibold text-red-600 dark:text-red-400';
|
||
} else {
|
||
recentErrorsCount.className = 'text-lg font-semibold text-green-600 dark:text-green-400';
|
||
}
|
||
}
|
||
}
|
||
|
||
updateErrorAlerts(data) {
|
||
const alertContainer = document.getElementById('critical-errors-alert');
|
||
const errorList = document.getElementById('error-list');
|
||
|
||
if (!alertContainer || !errorList) return;
|
||
|
||
const allErrors = [...(data.critical_errors || []), ...(data.warnings || [])];
|
||
|
||
if (allErrors.length > 0) {
|
||
// Show alert container
|
||
alertContainer.classList.remove('hidden');
|
||
|
||
// Clear previous errors
|
||
errorList.innerHTML = '';
|
||
|
||
// Add each error
|
||
allErrors.forEach(error => {
|
||
const errorElement = document.createElement('div');
|
||
errorElement.className = `p-3 rounded-lg border-l-4 ${
|
||
error.severity === 'critical' ? 'bg-red-50 dark:bg-red-900/30 border-red-500' :
|
||
error.severity === 'high' ? 'bg-orange-50 dark:bg-orange-900/30 border-orange-500' :
|
||
'bg-yellow-50 dark:bg-yellow-900/30 border-yellow-500'
|
||
}`;
|
||
|
||
errorElement.innerHTML = `
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex-1">
|
||
<h4 class="font-medium ${
|
||
error.severity === 'critical' ? 'text-red-800 dark:text-red-200' :
|
||
error.severity === 'high' ? 'text-orange-800 dark:text-orange-200' :
|
||
'text-yellow-800 dark:text-yellow-200'
|
||
}">${error.message}</h4>
|
||
<p class="text-sm mt-1 ${
|
||
error.severity === 'critical' ? 'text-red-600 dark:text-red-300' :
|
||
error.severity === 'high' ? 'text-orange-600 dark:text-orange-300' :
|
||
'text-yellow-600 dark:text-yellow-300'
|
||
}">💡 ${error.suggested_fix}</p>
|
||
<p class="text-xs mt-1 text-gray-500 dark:text-gray-400">
|
||
📅 ${new Date(error.timestamp).toLocaleString('de-DE')}
|
||
</p>
|
||
</div>
|
||
<span class="ml-2 px-2 py-1 text-xs font-medium rounded-full ${
|
||
error.severity === 'critical' ? 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100' :
|
||
error.severity === 'high' ? 'bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-100' :
|
||
'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100'
|
||
}">
|
||
${error.severity.toUpperCase()}
|
||
</span>
|
||
</div>
|
||
`;
|
||
|
||
errorList.appendChild(errorElement);
|
||
});
|
||
} else {
|
||
// Hide alert container
|
||
alertContainer.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
setupErrorAlertHandlers() {
|
||
// Fix errors button
|
||
const fixErrorsBtn = document.getElementById('fix-errors-btn');
|
||
if (fixErrorsBtn) {
|
||
fixErrorsBtn.addEventListener('click', async () => {
|
||
await this.fixErrors();
|
||
});
|
||
}
|
||
|
||
// Dismiss errors button
|
||
const dismissErrorsBtn = document.getElementById('dismiss-errors-btn');
|
||
if (dismissErrorsBtn) {
|
||
dismissErrorsBtn.addEventListener('click', () => {
|
||
const alertContainer = document.getElementById('critical-errors-alert');
|
||
if (alertContainer) {
|
||
alertContainer.classList.add('hidden');
|
||
}
|
||
});
|
||
}
|
||
|
||
// View details button
|
||
const viewDetailsBtn = document.getElementById('view-error-details-btn');
|
||
if (viewDetailsBtn) {
|
||
viewDetailsBtn.addEventListener('click', () => {
|
||
// Redirect to logs tab
|
||
window.location.href = '/admin-dashboard?tab=logs';
|
||
});
|
||
}
|
||
}
|
||
|
||
async fixErrors() {
|
||
const fixBtn = document.getElementById('fix-errors-btn');
|
||
if (!fixBtn) return;
|
||
|
||
// Show loading state
|
||
const originalText = fixBtn.innerHTML;
|
||
fixBtn.innerHTML = '🔄 Repariere...';
|
||
fixBtn.disabled = true;
|
||
|
||
try {
|
||
const response = await fetch('/api/admin/fix-errors', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
// Show success message
|
||
this.showNotification('✅ Automatische Reparatur erfolgreich durchgeführt!', 'success');
|
||
|
||
// Refresh health check
|
||
setTimeout(() => {
|
||
this.checkSystemHealth();
|
||
}, 2000);
|
||
} else {
|
||
// Show error message
|
||
this.showNotification(`❌ Reparatur fehlgeschlagen: ${data.error}`, 'error');
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Error fixing errors:', error);
|
||
this.showNotification('❌ Fehler bei der automatischen Reparatur', 'error');
|
||
} finally {
|
||
// Restore button
|
||
fixBtn.innerHTML = originalText;
|
||
fixBtn.disabled = false;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Initialize when DOM is ready
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
new AdminLiveDashboard();
|
||
});
|
||
|
||
// Export for global access
|
||
window.AdminLiveDashboard = AdminLiveDashboard;
|