389 lines
14 KiB
JavaScript
389 lines
14 KiB
JavaScript
// src/js/auditTrailRenderer.js
|
|
|
|
import { auditService } from '../../src/utils/auditService.js';
|
|
|
|
export class AuditTrailRenderer {
|
|
constructor(containerId, options = {}) {
|
|
this.containerId = containerId;
|
|
this.options = {
|
|
title: options.title || 'KI-Entscheidungspfad',
|
|
collapsible: options.collapsible !== false,
|
|
defaultExpanded: options.defaultExpanded || false,
|
|
...options
|
|
};
|
|
this.componentId = `audit-trail-${Date.now()}-${Math.random().toString(36).substr(2, 6)}`;
|
|
}
|
|
|
|
/**
|
|
* Render audit trail from raw audit data
|
|
* FIXED: Proper Promise handling
|
|
*/
|
|
render(rawAuditTrail) {
|
|
const container = document.getElementById(this.containerId);
|
|
if (!container) {
|
|
console.error(`[AUDIT RENDERER] Container ${this.containerId} not found`);
|
|
return;
|
|
}
|
|
|
|
if (!rawAuditTrail || !Array.isArray(rawAuditTrail) || rawAuditTrail.length === 0) {
|
|
this.renderEmpty();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
console.log('[AUDIT RENDERER] Processing audit trail...', rawAuditTrail.length, 'entries');
|
|
|
|
// Process audit trail using the centralized service (synchronous)
|
|
const processedAudit = auditService.processAuditTrail(rawAuditTrail);
|
|
|
|
console.log('[AUDIT RENDERER] Processed audit:', processedAudit);
|
|
|
|
if (processedAudit && processedAudit.phases && processedAudit.phases.length > 0) {
|
|
this.renderProcessed(processedAudit);
|
|
// Attach event handlers after DOM is updated
|
|
setTimeout(() => this.attachEventHandlers(), 0);
|
|
} else {
|
|
console.warn('[AUDIT RENDERER] No processed audit data');
|
|
this.renderEmpty();
|
|
}
|
|
} catch (error) {
|
|
console.error('[AUDIT RENDERER] Failed to render audit trail:', error);
|
|
this.renderError(error);
|
|
}
|
|
}
|
|
/**
|
|
* Render processed audit trail
|
|
*/
|
|
renderProcessed(processedAudit) {
|
|
const container = document.getElementById(this.containerId);
|
|
if (!container) return;
|
|
|
|
const detailsId = `${this.componentId}-details`;
|
|
|
|
console.log('[AUDIT RENDERER] Rendering processed audit with', processedAudit.phases.length, 'phases');
|
|
|
|
container.innerHTML = `
|
|
<div class="audit-trail-container">
|
|
<div class="audit-trail-header ${this.options.collapsible ? 'clickable' : ''}"
|
|
${this.options.collapsible ? `data-target="${detailsId}"` : ''}>
|
|
<div class="audit-trail-title">
|
|
<div class="audit-icon">
|
|
<div class="audit-icon-gradient">✓</div>
|
|
<h4>${this.options.title}</h4>
|
|
</div>
|
|
|
|
<div class="audit-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-dot stat-time"></div>
|
|
<span>${auditService.formatDuration(processedAudit.totalTime)}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-dot" style="background-color: ${auditService.getConfidenceColor(processedAudit.avgConfidence)}"></div>
|
|
<span>${processedAudit.avgConfidence}% Vertrauen</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span>${processedAudit.stepCount} Schritte</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
${this.options.collapsible ? `
|
|
<div class="toggle-icon">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="6 9 12 15 18 9"/>
|
|
</svg>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
|
|
<div id="${detailsId}" class="audit-trail-details ${this.options.collapsible && !this.options.defaultExpanded ? 'collapsed' : ''}">
|
|
${this.renderSummary(processedAudit)}
|
|
${this.renderProcessFlow(processedAudit)}
|
|
${this.renderTechnicalDetails(processedAudit)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
console.log('[AUDIT RENDERER] HTML rendered successfully');
|
|
}
|
|
|
|
/**
|
|
* Render audit summary section
|
|
*/
|
|
renderSummary(audit) {
|
|
return `
|
|
<div class="audit-summary">
|
|
<div class="summary-header">📊 Analyse-Qualität</div>
|
|
<div class="summary-grid">
|
|
<div class="summary-stat">
|
|
<div class="summary-value success">${audit.highConfidenceSteps}</div>
|
|
<div class="summary-label">Hohe Sicherheit</div>
|
|
</div>
|
|
<div class="summary-stat">
|
|
<div class="summary-value ${audit.lowConfidenceSteps > 0 ? 'warning' : 'success'}">
|
|
${audit.lowConfidenceSteps}
|
|
</div>
|
|
<div class="summary-label">Unsichere Schritte</div>
|
|
</div>
|
|
<div class="summary-stat">
|
|
<div class="summary-value">${auditService.formatDuration(audit.totalTime)}</div>
|
|
<div class="summary-label">Verarbeitungszeit</div>
|
|
</div>
|
|
</div>
|
|
|
|
${audit.summary.keyInsights && audit.summary.keyInsights.length > 0 ? `
|
|
<div class="insights-section">
|
|
<div class="insights-header success">✓ Erkenntnisse:</div>
|
|
<ul class="insights-list">
|
|
${audit.summary.keyInsights.map(insight => `<li>${this.escapeHtml(insight)}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
` : ''}
|
|
|
|
${audit.summary.potentialIssues && audit.summary.potentialIssues.length > 0 ? `
|
|
<div class="insights-section">
|
|
<div class="insights-header warning">⚠ Hinweise:</div>
|
|
<ul class="insights-list">
|
|
${audit.summary.potentialIssues.map(issue => `<li>${this.escapeHtml(issue)}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Render process flow section
|
|
*/
|
|
renderProcessFlow(audit) {
|
|
if (!audit.phases || audit.phases.length === 0) {
|
|
return '<div class="audit-process-flow"><p>Keine Phasen verfügbar</p></div>';
|
|
}
|
|
|
|
return `
|
|
<div class="audit-process-flow">
|
|
${audit.phases.map((phase, index) => `
|
|
<div class="phase-group ${index === audit.phases.length - 1 ? 'last-phase' : ''}">
|
|
<div class="phase-header">
|
|
<div class="phase-info">
|
|
<span class="phase-icon">${phase.icon || '📋'}</span>
|
|
<span class="phase-name">${phase.displayName || phase.name}</span>
|
|
</div>
|
|
<div class="phase-divider"></div>
|
|
<div class="phase-stats">
|
|
<div class="confidence-bar">
|
|
<div class="confidence-fill"
|
|
style="width: ${phase.avgConfidence || 0}%; background-color: ${auditService.getConfidenceColor(phase.avgConfidence || 0)}">
|
|
</div>
|
|
</div>
|
|
<span class="confidence-text">${phase.avgConfidence || 0}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="phase-entries">
|
|
${(phase.entries || []).map(entry => `
|
|
<div class="audit-entry">
|
|
<div class="entry-main">
|
|
<span class="entry-action">${auditService.getActionDisplayName(entry.action)}</span>
|
|
<div class="entry-meta">
|
|
<div class="confidence-indicator"
|
|
style="background-color: ${auditService.getConfidenceColor(entry.confidence || 0)}">
|
|
</div>
|
|
<span class="confidence-value">${entry.confidence || 0}%</span>
|
|
<span class="processing-time">${entry.processingTimeMs || 0}ms</span>
|
|
</div>
|
|
</div>
|
|
|
|
${(entry.inputSummary && entry.inputSummary !== 'null') || (entry.outputSummary && entry.outputSummary !== 'null') ? `
|
|
<div class="entry-details">
|
|
${entry.inputSummary && entry.inputSummary !== 'null' ? `
|
|
<div class="detail-item"><strong>Input:</strong> ${this.escapeHtml(entry.inputSummary)}</div>
|
|
` : ''}
|
|
${entry.outputSummary && entry.outputSummary !== 'null' ? `
|
|
<div class="detail-item"><strong>Output:</strong> ${this.escapeHtml(entry.outputSummary)}</div>
|
|
` : ''}
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Render technical details section
|
|
*/
|
|
renderTechnicalDetails(audit) {
|
|
const technicalId = `${this.componentId}-technical`;
|
|
|
|
return `
|
|
<div class="technical-toggle">
|
|
<button class="technical-toggle-btn" data-target="${technicalId}">
|
|
🔧 Technische Details anzeigen
|
|
</button>
|
|
<div id="${technicalId}" class="technical-details collapsed">
|
|
${(audit.phases || []).map(phase =>
|
|
(phase.entries || []).map(entry => `
|
|
<div class="technical-entry">
|
|
<div class="technical-header">
|
|
<span class="technical-phase">${entry.phase}/${entry.action}</span>
|
|
<span class="technical-time">
|
|
${new Date(entry.timestamp).toLocaleTimeString('de-DE', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
})} • ${entry.processingTimeMs || 0}ms
|
|
</span>
|
|
</div>
|
|
<div class="technical-content">
|
|
<div class="technical-row">
|
|
<strong>Confidence:</strong> ${entry.confidence || 0}%
|
|
</div>
|
|
${entry.metadata && Object.keys(entry.metadata).length > 0 ? `
|
|
<div class="technical-row">
|
|
<strong>Metadata:</strong> ${this.escapeHtml(JSON.stringify(entry.metadata))}
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
`).join('')
|
|
).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Attach event handlers for interactions
|
|
*/
|
|
attachEventHandlers() {
|
|
console.log('[AUDIT RENDERER] Attaching event handlers...');
|
|
|
|
// Handle collapsible header
|
|
if (this.options.collapsible) {
|
|
const header = document.querySelector(`[data-target="${this.componentId}-details"]`);
|
|
const details = document.getElementById(`${this.componentId}-details`);
|
|
const toggleIcon = header?.querySelector('.toggle-icon svg');
|
|
|
|
if (header && details && toggleIcon) {
|
|
// Remove existing listeners
|
|
header.replaceWith(header.cloneNode(true));
|
|
const newHeader = document.querySelector(`[data-target="${this.componentId}-details"]`);
|
|
const newToggleIcon = newHeader?.querySelector('.toggle-icon svg');
|
|
|
|
if (newHeader && newToggleIcon) {
|
|
newHeader.addEventListener('click', () => {
|
|
const isCollapsed = details.classList.contains('collapsed');
|
|
|
|
if (isCollapsed) {
|
|
details.classList.remove('collapsed');
|
|
newToggleIcon.style.transform = 'rotate(180deg)';
|
|
} else {
|
|
details.classList.add('collapsed');
|
|
newToggleIcon.style.transform = 'rotate(0deg)';
|
|
}
|
|
});
|
|
console.log('[AUDIT RENDERER] Collapsible header handler attached');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle technical details toggle
|
|
const technicalBtn = document.querySelector(`[data-target="${this.componentId}-technical"]`);
|
|
const technicalDetails = document.getElementById(`${this.componentId}-technical`);
|
|
|
|
if (technicalBtn && technicalDetails) {
|
|
// Remove existing listener
|
|
technicalBtn.replaceWith(technicalBtn.cloneNode(true));
|
|
const newTechnicalBtn = document.querySelector(`[data-target="${this.componentId}-technical"]`);
|
|
|
|
if (newTechnicalBtn) {
|
|
newTechnicalBtn.addEventListener('click', () => {
|
|
const isCollapsed = technicalDetails.classList.contains('collapsed');
|
|
|
|
if (isCollapsed) {
|
|
technicalDetails.classList.remove('collapsed');
|
|
newTechnicalBtn.textContent = '🔧 Technische Details ausblenden';
|
|
} else {
|
|
technicalDetails.classList.add('collapsed');
|
|
newTechnicalBtn.textContent = '🔧 Technische Details anzeigen';
|
|
}
|
|
});
|
|
console.log('[AUDIT RENDERER] Technical details handler attached');
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Render empty state
|
|
*/
|
|
renderEmpty() {
|
|
const container = document.getElementById(this.containerId);
|
|
if (container) {
|
|
container.innerHTML = `
|
|
<div class="audit-trail-container">
|
|
<div class="audit-trail-header">
|
|
<div class="audit-icon">
|
|
<div class="audit-icon-gradient">ⓘ</div>
|
|
<h4>Kein Audit-Trail verfügbar</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Render error state
|
|
*/
|
|
renderError(error) {
|
|
const container = document.getElementById(this.containerId);
|
|
if (container) {
|
|
container.innerHTML = `
|
|
<div class="audit-trail-container">
|
|
<div class="audit-trail-header">
|
|
<div class="audit-icon">
|
|
<div class="audit-icon-gradient" style="background: var(--color-error);">✗</div>
|
|
<h4>Audit-Trail Fehler</h4>
|
|
</div>
|
|
</div>
|
|
<div class="audit-summary">
|
|
<p style="color: var(--color-error);">
|
|
Fehler beim Laden der Audit-Informationen: ${this.escapeHtml(error.message)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Utility method to escape HTML
|
|
*/
|
|
escapeHtml(text) {
|
|
if (typeof text !== 'string') return String(text);
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
/**
|
|
* Clear the audit trail display
|
|
*/
|
|
clear() {
|
|
const container = document.getElementById(this.containerId);
|
|
if (container) {
|
|
container.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get container element
|
|
*/
|
|
getContainer() {
|
|
return document.getElementById(this.containerId);
|
|
}
|
|
} |