diff --git a/apps/demo/src/migration-wizard/MigrationWizard.tsx b/apps/demo/src/migration-wizard/MigrationWizard.tsx index 5356dd5..a84c225 100644 --- a/apps/demo/src/migration-wizard/MigrationWizard.tsx +++ b/apps/demo/src/migration-wizard/MigrationWizard.tsx @@ -81,7 +81,7 @@ export const MigrationWizard: React.FC = () => { discoverSourcesContext.agentSelected?.status === "up-to-date"; return ( - + { }, [memoizedAgents, hasAgents, discoverySourcesContext, firstAgent]); - - console.log("---------"); - console.log(hasAgents); - console.log("----------"); // Show spinner until all data is loaded if ((isLoading) ) { return ( diff --git a/apps/demo/src/migration-wizard/steps/discovery/DiscoveryStep.tsx b/apps/demo/src/migration-wizard/steps/discovery/DiscoveryStep.tsx index 8e4304a..595ec63 100644 --- a/apps/demo/src/migration-wizard/steps/discovery/DiscoveryStep.tsx +++ b/apps/demo/src/migration-wizard/steps/discovery/DiscoveryStep.tsx @@ -38,7 +38,6 @@ import { ReportPieChart } from "./ReportPieChart"; import DownloadPDFButton from "./DownloadPDFButton"; export const DiscoveryStep: React.FC = () => { - const [forceExpand, setForceExpand] = React.useState(false); const discoverSourcesContext = useDiscoverySources(); const { inventory } = discoverSourcesContext.sourceSelected as Source; const { infra, vms } = inventory!; @@ -333,18 +332,10 @@ export const DiscoveryStep: React.FC = () => { networksViewData, storageViewData, operatingSystemsViewData, - ]; - - // eslint-disable-next-line @typescript-eslint/explicit-function-return-type - const handleForceExpand = async (callback: () => Promise) => { - setForceExpand(true); // Forzar la expansión - await new Promise((resolve) => setTimeout(resolve, 100)); // Espera que React renderice - await callback(); // Llama al callback para generar el PDF - setForceExpand(false); // Restaura el estado - }; + ]; return ( - + @@ -354,7 +345,7 @@ export const DiscoveryStep: React.FC = () => { - handleForceExpand(callback)}/> + @@ -368,7 +359,6 @@ export const DiscoveryStep: React.FC = () => { aria-label="Discovery report" variant="compactNoBackground" data={treeViewData} - allExpanded={forceExpand} /> diff --git a/apps/demo/src/migration-wizard/steps/discovery/DownloadPDFButton.tsx b/apps/demo/src/migration-wizard/steps/discovery/DownloadPDFButton.tsx index 5fdeeca..19adc32 100644 --- a/apps/demo/src/migration-wizard/steps/discovery/DownloadPDFButton.tsx +++ b/apps/demo/src/migration-wizard/steps/discovery/DownloadPDFButton.tsx @@ -1,67 +1,111 @@ -import React from "react"; +import React, { useRef } from "react"; import jsPDF from "jspdf"; import html2canvas from "html2canvas"; -import { Button } from "@patternfly/react-core"; +import { Button, TreeView, TreeViewDataItem } from "@patternfly/react-core"; +import { createRoot } from "react-dom/client"; interface DownloadPDFButtonProps { - elementId: string; - onBeforeDownload: (callback: () => Promise) => void; - } - - const DownloadPDFButton: React.FC = ({ elementId, onBeforeDownload }) => { - // eslint-disable-next-line @typescript-eslint/explicit-function-return-type - const handleDownloadPDF = async () => { + elementId: string; + treeViewData: TreeViewDataItem[]; +} + +const DownloadPDFButton: React.FC = ({ + elementId, + treeViewData, +}) => { + const hiddenContainerRef = useRef(null); + + const assignUniqueIds = ( + data: TreeViewDataItem[], + parentId: string = "download" + ): TreeViewDataItem[] => { + return data.map((item, index) => { + const uniqueId = `${item.id}-${parentId}-${index}`; + return { + ...item, + id: uniqueId, + key: uniqueId, + children: item.children + ? assignUniqueIds(item.children, uniqueId) + : undefined, + }; + }); + }; + // eslint-disable-next-line @typescript-eslint/explicit-function-return-type + const handleDownloadPDF = async () => { + try { + const originalWarn = console.warn; // eslint-disable-next-line @typescript-eslint/explicit-function-return-type - const generatePDF = async () => { - const element = document.getElementById(elementId); - if (!element) return; + console.warn = () => {}; + const hiddenContainer = hiddenContainerRef.current; + + if (!hiddenContainer) return; + hiddenContainer.innerHTML = ""; + const treeClone = ( + + ); - // Hide download button - const button = document.getElementById("download-pdf-button"); - if (button) button.style.display = "none"; - - const canvas = await html2canvas(element); - const imgData = canvas.toDataURL("image/png"); - const pdf = new jsPDF("p", "mm", "a4"); - - const pageWidth = pdf.internal.pageSize.getWidth(); - const pageHeight = pdf.internal.pageSize.getHeight(); - const margin = 10; + const tempDiv = document.createElement("div"); + hiddenContainer.appendChild(tempDiv); + const root = createRoot(tempDiv); + root.render(treeClone); - const contentWidth = pageWidth - margin * 2; - const contentHeight = pageHeight - margin * 2; + + await new Promise((resolve) => setTimeout(resolve, 500)); - const imgWidth = canvas.width; - const imgHeight = canvas.height; - - const scaleFactor = Math.min(contentWidth / imgWidth, contentHeight / imgHeight); + const canvas = await html2canvas(hiddenContainer, { useCORS: true }); + const imgData = canvas.toDataURL("image/png"); + const pdf = new jsPDF("p", "mm", "a4"); - const imgX = margin; - const imgY = margin; - - pdf.addImage( - imgData, - "PNG", - imgX, - imgY, - imgWidth * scaleFactor, - imgHeight * scaleFactor - ); - pdf.save("Discovery_Report.pdf"); + const pageWidth = pdf.internal.pageSize.getWidth(); + const pageHeight = pdf.internal.pageSize.getHeight(); + const margin = 10; - // Show download button - if (button) button.style.display = "block"; - }; - - // Llama al callback para forzar la expansión antes de generar el PDF - onBeforeDownload(generatePDF); - - }; + const contentWidth = pageWidth - margin * 2; + const contentHeight = pageHeight - margin * 2; + + const imgWidth = canvas.width; + const imgHeight = canvas.height; + + const scaleFactor = Math.min( + contentWidth / imgWidth, + contentHeight / imgHeight + ); + + pdf.addImage( + imgData, + "PNG", + margin, + margin, + imgWidth * scaleFactor, + imgHeight * scaleFactor + ); + pdf.save("Discovery_Report.pdf"); + + hiddenContainer.innerHTML = ""; + console.warn = originalWarn; + } catch (error) { + console.error("Error generating PDF:", error); + } + }; return ( - + <> + +
+ ); }; diff --git a/apps/demo/src/migration-wizard/steps/discovery/ReportTable.tsx b/apps/demo/src/migration-wizard/steps/discovery/ReportTable.tsx index 35acaab..48a7191 100644 --- a/apps/demo/src/migration-wizard/steps/discovery/ReportTable.tsx +++ b/apps/demo/src/migration-wizard/steps/discovery/ReportTable.tsx @@ -24,16 +24,16 @@ export function ReportTable( > - {columns.map((name) => ( - {name} + {columns.map((name,index) => ( + {name} ))} {data.map((item, idx) => ( - {fields.map((f) => ( - {item[f] === "" ? "-" : (item[f] as React.ReactNode)} + {fields.map((f,fieldIdx) => ( + {item[f] === "" ? "-" : (item[f] as React.ReactNode)} ))} ))}