Type: ${ds.type}

Status: ${ds.status}

Last Updated: ${ds.lastUpdated || 'N/A'}

Latency: ${ds.latency || 'N/A'}

Error Rate: ${ds.errorRate || 'N/A'}

`; dataSourceCardsContainer.appendChild(card); }); } // --- PDF Download Function --- /** * Generates and downloads a PDF of the current dashboard content. */ window.downloadPdf = async function() { if (!dashboardTab) { console.error('Error: Dashboard tab content not found for PDF generation.'); return; } // Temporarily hide elements not needed in PDF const elementsToHide = document.querySelectorAll('.tab-nav, .nav-buttons, #downloadPdfButton'); elementsToHide.forEach(el => el.style.display = 'none'); // Ensure the dashboard tab is active for capture dashboardTab.classList.add('active'); // Use html2canvas to capture the dashboard content const canvas = await html2canvas(dashboardTab, { scale: 2, // Increase scale for better resolution in PDF useCORS: true, // Important for images if any, though not used here logging: false // Disable logging for cleaner console }); // Re-show hidden elements immediately after capture elementsToHide.forEach(el => el.style.display = ''); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'portrait', // Portrait for dashboard cards unit: 'px', format: 'a4' }); const imgWidth = pdf.internal.pageSize.getWidth(); const imgHeight = (canvas.height * imgWidth) / canvas.width; // Add title to PDF pdf.setFontSize(22); pdf.text("Data Source Health Report", imgWidth / 2, 40, { align: 'center' }); // Add current date/time to PDF pdf.setFontSize(10); pdf.text(`Generated on: ${new Date().toLocaleString()}`, imgWidth / 2, 60, { align: 'center' }); // Add the captured image of the dashboard cards pdf.addImage(imgData, 'PNG', 20, 80, imgWidth - 40, imgHeight - 40); // Adjust position and size // Add a section for detailed data source information (tabular format) pdf.addPage(); pdf.setFontSize(18); pdf.text("Detailed Data Source Information", pdf.internal.pageSize.getWidth() / 2, 40, { align: 'center' }); const tableData = dataSources.map(ds => [ ds.id, ds.name, ds.type, ds.status, ds.lastUpdated, ds.latency, ds.errorRate ]); pdf.autoTable({ head: [['ID', 'Name', 'Type', 'Status', 'Last Updated', 'Latency', 'Error Rate']], body: tableData, startY: 60, theme: 'grid', styles: { fontSize: 8, cellPadding: 4 }, headStyles: { fillColor: [242, 242, 242], textColor: [51, 51, 51], fontStyle: 'bold' }, alternateRowStyles: { fillColor: [251, 251, 251] }, margin: { top: 70, left: 10, right: 10 } // Adjust margins for more columns }); pdf.save('data_source_health_report.pdf'); }; // --- Event Listeners and Initial Render --- downloadPdfButton.addEventListener('click', downloadPdf); // Initial setup updateDataSourcesTable(); renderDataSourceCards(); updateNavigationButtons(); // Set initial button states });