iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add support for export JSON, CSV, PDF, Text

Browse Source 
## Changes to DebugTab.tsx & EventLogsTab.tsx

### Debug Tab Enhancements
- Added multi-page support for PDF exports
- Implemented proper page breaks and content flow
- Added styled headers, key-value pairs, and horizontal lines
- Added title and timestamp at the top of the PDF
- Improved PDF layout with sections for system info, web app info, and performance metrics
- Added footer with page numbers
- Fixed memory usage calculations with proper null checks
- Added error handling for undefined values

### Event Logs Tab Enhancements
- Added comprehensive PDF export functionality with:
  - Professional header with bolt.diy branding
  - Report summary section
  - Log statistics with color-coded categories
  - Detailed log entries with proper formatting
  - Multi-page support with proper page breaks
  - Footer with page numbers and timestamp
- Added multiple export formats (JSON, CSV, PDF, Text)
- Fixed linter errors and improved type safety
- Enhanced dark mode compatibility
This commit is contained in:
Stijnus
2025-02-02 13:25:04 +01:00
parent fc3dd8c84c
commit 84f45dd041
4 changed files with 1129 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

520
app/components/@settings/tabs/event-logs/EventLogsTab.tsx
View File

@@ -5,6 +5,9 @@ import { logStore, type LogEntry } from '~/lib/stores/logs';
import { useStore } from '@nanostores/react';
import { classNames } from '~/utils/classNames';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { Dialog, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
import { jsPDF } from 'jspdf';
import { toast } from 'react-toastify';
interface SelectOption {
value: string;
@@ -252,6 +255,13 @@ const LogEntryItem = ({ log, isExpanded: forceExpanded, use24Hour, showTimestamp
);
};
interface ExportFormat {
id: string;
label: string;
icon: string;
handler: () => void;
}
export function EventLogsTab() {
const logs = useStore(logStore.logs);
const [selectedLevel, setSelectedLevel] = useState<'all' | string>('all');
@@ -329,51 +339,6 @@ export function EventLogsTab() {
return () => clearTimeout(timeoutId);
}, [searchQuery, filteredLogs.length]);
// Enhanced export logs handler
const handleExportLogs = useCallback(() => {
const startTime = performance.now();
try {
const exportData = {
timestamp: new Date().toISOString(),
logs: filteredLogs,
filters: {
level: selectedLevel,
searchQuery,
},
};
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `bolt-logs-${new Date().toISOString()}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
const duration = performance.now() - startTime;
logStore.logSuccess('Logs exported successfully', {
type: 'export',
message: `Successfully exported ${filteredLogs.length} logs`,
component: 'EventLogsTab',
exportedCount: filteredLogs.length,
filters: {
level: selectedLevel,
searchQuery,
},
duration,
});
} catch (error) {
logStore.logError('Failed to export logs', error, {
type: 'export_error',
message: 'Failed to export logs',
component: 'EventLogsTab',
});
}
}, [filteredLogs, selectedLevel, searchQuery]);
// Enhanced refresh handler
const handleRefresh = useCallback(async () => {
const startTime = performance.now();
@@ -442,6 +407,455 @@ export function EventLogsTab() {
const selectedLevelOption = logLevelOptions.find((opt) => opt.value === selectedLevel);
// Export functions
const exportAsJSON = () => {
try {
const exportData = {
timestamp: new Date().toISOString(),
logs: filteredLogs,
filters: {
level: selectedLevel,
searchQuery,
},
preferences: {
use24Hour,
showTimestamps,
autoExpand,
},
};
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `bolt-event-logs-${new Date().toISOString()}.json`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
toast.success('Event logs exported successfully as JSON');
} catch (error) {
console.error('Failed to export JSON:', error);
toast.error('Failed to export event logs as JSON');
}
};
const exportAsCSV = () => {
try {
// Convert logs to CSV format
const headers = ['Timestamp', 'Level', 'Category', 'Message', 'Details'];
const csvData = [
headers,
...filteredLogs.map((log) => [
new Date(log.timestamp).toISOString(),
log.level,
log.category || '',
log.message,
log.details ? JSON.stringify(log.details) : '',
]),
];
const csvContent = csvData
.map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
.join('\n');
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `bolt-event-logs-${new Date().toISOString()}.csv`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
toast.success('Event logs exported successfully as CSV');
} catch (error) {
console.error('Failed to export CSV:', error);
toast.error('Failed to export event logs as CSV');
}
};
const exportAsPDF = () => {
try {
// Create new PDF document
const doc = new jsPDF();
const lineHeight = 7;
let yPos = 20;
const margin = 20;
const pageWidth = doc.internal.pageSize.getWidth();
const maxLineWidth = pageWidth - 2 * margin;
// Helper function to add section header
const addSectionHeader = (title: string) => {
// Check if we need a new page
if (yPos > doc.internal.pageSize.getHeight() - 30) {
doc.addPage();
yPos = margin;
}
doc.setFillColor('#F3F4F6');
doc.rect(margin - 2, yPos - 5, pageWidth - 2 * (margin - 2), lineHeight + 6, 'F');
doc.setFont('helvetica', 'bold');
doc.setTextColor('#111827');
doc.setFontSize(12);
doc.text(title.toUpperCase(), margin, yPos);
yPos += lineHeight * 2;
};
// Add title and header
doc.setFillColor('#6366F1');
doc.rect(0, 0, pageWidth, 50, 'F');
doc.setTextColor('#FFFFFF');
doc.setFontSize(24);
doc.setFont('helvetica', 'bold');
doc.text('Event Logs Report', margin, 35);
// Add subtitle with bolt.diy
doc.setFontSize(12);
doc.setFont('helvetica', 'normal');
doc.text('bolt.diy - AI Development Platform', margin, 45);
yPos = 70;
// Add report summary section
addSectionHeader('Report Summary');
doc.setFontSize(10);
doc.setFont('helvetica', 'normal');
doc.setTextColor('#374151');
const summaryItems = [
{ label: 'Generated', value: new Date().toLocaleString() },
{ label: 'Total Logs', value: filteredLogs.length.toString() },
{ label: 'Filter Applied', value: selectedLevel === 'all' ? 'All Types' : selectedLevel },
{ label: 'Search Query', value: searchQuery || 'None' },
{ label: 'Time Format', value: use24Hour ? '24-hour' : '12-hour' },
];
summaryItems.forEach((item) => {
doc.setFont('helvetica', 'bold');
doc.text(`${item.label}:`, margin, yPos);
doc.setFont('helvetica', 'normal');
doc.text(item.value, margin + 60, yPos);
yPos += lineHeight;
});
yPos += lineHeight * 2;
// Add statistics section
addSectionHeader('Log Statistics');
// Calculate statistics
const stats = {
error: filteredLogs.filter((log) => log.level === 'error').length,
warning: filteredLogs.filter((log) => log.level === 'warning').length,
info: filteredLogs.filter((log) => log.level === 'info').length,
debug: filteredLogs.filter((log) => log.level === 'debug').length,
provider: filteredLogs.filter((log) => log.category === 'provider').length,
api: filteredLogs.filter((log) => log.category === 'api').length,
};
// Create two columns for statistics
const leftStats = [
{ label: 'Error Logs', value: stats.error, color: '#DC2626' },
{ label: 'Warning Logs', value: stats.warning, color: '#F59E0B' },
{ label: 'Info Logs', value: stats.info, color: '#3B82F6' },
];
const rightStats = [
{ label: 'Debug Logs', value: stats.debug, color: '#6B7280' },
{ label: 'LLM Logs', value: stats.provider, color: '#10B981' },
{ label: 'API Logs', value: stats.api, color: '#3B82F6' },
];
const colWidth = (pageWidth - 2 * margin) / 2;
// Draw statistics in two columns
leftStats.forEach((stat, index) => {
doc.setTextColor(stat.color);
doc.setFont('helvetica', 'bold');
doc.text(stat.value.toString(), margin, yPos);
doc.setTextColor('#374151');
doc.setFont('helvetica', 'normal');
doc.text(stat.label, margin + 20, yPos);
if (rightStats[index]) {
doc.setTextColor(rightStats[index].color);
doc.setFont('helvetica', 'bold');
doc.text(rightStats[index].value.toString(), margin + colWidth, yPos);
doc.setTextColor('#374151');
doc.setFont('helvetica', 'normal');
doc.text(rightStats[index].label, margin + colWidth + 20, yPos);
}
yPos += lineHeight;
});
yPos += lineHeight * 2;
// Add logs section
addSectionHeader('Event Logs');
// Helper function to add a log entry with improved formatting
const addLogEntry = (log: LogEntry) => {
const entryHeight = 20 + (log.details ? 40 : 0); // Estimate entry height
// Check if we need a new page
if (yPos + entryHeight > doc.internal.pageSize.getHeight() - 20) {
doc.addPage();
yPos = margin;
}
// Add timestamp and level
const timestamp = new Date(log.timestamp).toLocaleString(undefined, {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: !use24Hour,
});
// Draw log level badge background
const levelColors: Record<string, string> = {
error: '#FEE2E2',
warning: '#FEF3C7',
info: '#DBEAFE',
debug: '#F3F4F6',
};
const textColors: Record<string, string> = {
error: '#DC2626',
warning: '#F59E0B',
info: '#3B82F6',
debug: '#6B7280',
};
const levelWidth = doc.getTextWidth(log.level.toUpperCase()) + 10;
doc.setFillColor(levelColors[log.level] || '#F3F4F6');
doc.roundedRect(margin, yPos - 4, levelWidth, lineHeight + 4, 1, 1, 'F');
// Add log level text
doc.setTextColor(textColors[log.level] || '#6B7280');
doc.setFont('helvetica', 'bold');
doc.setFontSize(8);
doc.text(log.level.toUpperCase(), margin + 5, yPos);
// Add timestamp
doc.setTextColor('#6B7280');
doc.setFont('helvetica', 'normal');
doc.setFontSize(9);
doc.text(timestamp, margin + levelWidth + 10, yPos);
// Add category if present
if (log.category) {
const categoryX = margin + levelWidth + doc.getTextWidth(timestamp) + 20;
doc.setFillColor('#F3F4F6');
const categoryWidth = doc.getTextWidth(log.category) + 10;
doc.roundedRect(categoryX, yPos - 4, categoryWidth, lineHeight + 4, 2, 2, 'F');
doc.setTextColor('#6B7280');
doc.text(log.category, categoryX + 5, yPos);
}
yPos += lineHeight * 1.5;
// Add message
doc.setTextColor('#111827');
doc.setFontSize(10);
const messageLines = doc.splitTextToSize(log.message, maxLineWidth - 10);
doc.text(messageLines, margin + 5, yPos);
yPos += messageLines.length * lineHeight;
// Add details if present
if (log.details) {
doc.setTextColor('#6B7280');
doc.setFontSize(8);
const detailsStr = JSON.stringify(log.details, null, 2);
const detailsLines = doc.splitTextToSize(detailsStr, maxLineWidth - 15);
// Add details background
doc.setFillColor('#F9FAFB');
doc.roundedRect(margin + 5, yPos - 2, maxLineWidth - 10, detailsLines.length * lineHeight + 8, 1, 1, 'F');
doc.text(detailsLines, margin + 10, yPos + 4);
yPos += detailsLines.length * lineHeight + 10;
}
// Add separator line
doc.setDrawColor('#E5E7EB');
doc.setLineWidth(0.1);
doc.line(margin, yPos, pageWidth - margin, yPos);
yPos += lineHeight * 1.5;
};
// Add all logs
filteredLogs.forEach((log) => {
addLogEntry(log);
});
// Add footer to all pages
const totalPages = doc.internal.pages.length - 1;
for (let i = 1; i <= totalPages; i++) {
doc.setPage(i);
doc.setFontSize(8);
doc.setTextColor('#9CA3AF');
// Add page numbers
doc.text(`Page ${i} of ${totalPages}`, pageWidth / 2, doc.internal.pageSize.getHeight() - 10, {
align: 'center',
});
// Add footer text
doc.text('Generated by bolt.diy', margin, doc.internal.pageSize.getHeight() - 10);
const dateStr = new Date().toLocaleDateString();
doc.text(dateStr, pageWidth - margin, doc.internal.pageSize.getHeight() - 10, { align: 'right' });
}
// Save the PDF
doc.save(`bolt-event-logs-${new Date().toISOString()}.pdf`);
toast.success('Event logs exported successfully as PDF');
} catch (error) {
console.error('Failed to export PDF:', error);
toast.error('Failed to export event logs as PDF');
}
};
const exportAsText = () => {
try {
const textContent = filteredLogs
.map((log) => {
const timestamp = new Date(log.timestamp).toLocaleString();
let content = `[${timestamp}] ${log.level.toUpperCase()}: ${log.message}\n`;
if (log.category) {
content += `Category: ${log.category}\n`;
}
if (log.details) {
content += `Details:\n${JSON.stringify(log.details, null, 2)}\n`;
}
return content + '-'.repeat(80) + '\n';
})
.join('\n');
const blob = new Blob([textContent], { type: 'text/plain' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `bolt-event-logs-${new Date().toISOString()}.txt`;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
toast.success('Event logs exported successfully as text file');
} catch (error) {
console.error('Failed to export text file:', error);
toast.error('Failed to export event logs as text file');
}
};
const exportFormats: ExportFormat[] = [
{
id: 'json',
label: 'Export as JSON',
icon: 'i-ph:file-json',
handler: exportAsJSON,
},
{
id: 'csv',
label: 'Export as CSV',
icon: 'i-ph:file-csv',
handler: exportAsCSV,
},
{
id: 'pdf',
label: 'Export as PDF',
icon: 'i-ph:file-pdf',
handler: exportAsPDF,
},
{
id: 'txt',
label: 'Export as Text',
icon: 'i-ph:file-text',
handler: exportAsText,
},
];
const ExportButton = () => {
const [isOpen, setIsOpen] = useState(false);
const handleOpenChange = useCallback((open: boolean) => {
setIsOpen(open);
}, []);
const handleFormatClick = useCallback((handler: () => void) => {
handler();
setIsOpen(false);
}, []);
return (
<DialogRoot open={isOpen} onOpenChange={handleOpenChange}>
<button
onClick={() => setIsOpen(true)}
className={classNames(
'group flex items-center gap-2',
'rounded-lg px-3 py-1.5',
'text-sm text-gray-900 dark:text-white',
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
'transition-all duration-200',
)}
>
<span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
Export
</button>
<Dialog showCloseButton>
<div className="p-6">
<DialogTitle className="flex items-center gap-2">
<div className="i-ph:download w-5 h-5" />
Export Event Logs
</DialogTitle>
<div className="mt-4 flex flex-col gap-2">
{exportFormats.map((format) => (
<button
key={format.id}
onClick={() => handleFormatClick(format.handler)}
className={classNames(
'flex items-center gap-3 px-4 py-3 text-sm rounded-lg transition-colors w-full text-left',
'bg-white dark:bg-[#0A0A0A]',
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
'hover:border-purple-200 dark:hover:border-purple-900/30',
'text-bolt-elements-textPrimary',
)}
>
<div className={classNames(format.icon, 'w-5 h-5')} />
<div>
<div className="font-medium">{format.label}</div>
<div className="text-xs text-bolt-elements-textSecondary mt-0.5">
{format.id === 'json' && 'Export as a structured JSON file'}
{format.id === 'csv' && 'Export as a CSV spreadsheet'}
{format.id === 'pdf' && 'Export as a formatted PDF document'}
{format.id === 'txt' && 'Export as a formatted text file'}
</div>
</div>
</button>
))}
</div>
</div>
</Dialog>
</DialogRoot>
);
};
return (
<div className="flex h-full flex-col gap-6">
<div className="flex items-center justify-between">
@@ -540,21 +954,7 @@ export function EventLogsTab() {
Refresh
</button>
<button
onClick={handleExportLogs}
className={classNames(
'group flex items-center gap-2',
'rounded-lg px-3 py-1.5',
'text-sm text-gray-900 dark:text-white',
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
'transition-all duration-200',
)}
>
<span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
Export
</button>
<ExportButton />
</div>
</div>