✨ feat: Audit dashboard#143
Conversation
- Updated NewVulnButton component to receive an onClick function for handling adding findings. - Added state and handlers for adding vulnerabilities and findings in the Add component. - Implemented functions addVuln and addFinding in audits.ts to interact with the API for adding vulnerabilities and findings, respectively.
- Added function `getSeverityColor` in AuditSidebar.tsx to assign colors based on severity levels. - Implemented `cvssStringToSeverity` in AuditRoot.tsx to convert CVSS scores to severity levels 'L', 'M', 'H', or 'C'. - Enhanced Add component in add.tsx by providing row actions for adding vulnerabilities with appropriate error handling messages. - Modified addVuln function in audits.ts to fetch vulnerability details and added them to audit findings, including CVSSv3 score.
…e an "identifier" field for each finding in the findings list.
… in AuditRoot.tsx
…ction to handle errors properly
…in AuditSidebar file
…ay average CVSS value in the chart.
…utton import from AuditRoot component
…the appropriate vulnerability details for the specified locale
- Updated NewVulnButton component to receive an onClick function for handling adding findings. - Added state and handlers for adding vulnerabilities and findings in the Add component. - Implemented functions addVuln and addFinding in audits.ts to interact with the API for adding vulnerabilities and findings, respectively.
- Added function `getSeverityColor` in AuditSidebar.tsx to assign colors based on severity levels. - Implemented `cvssStringToSeverity` in AuditRoot.tsx to convert CVSS scores to severity levels 'L', 'M', 'H', or 'C'. - Enhanced Add component in add.tsx by providing row actions for adding vulnerabilities with appropriate error handling messages. - Modified addVuln function in audits.ts to fetch vulnerability details and added them to audit findings, including CVSSv3 score.
…e an "identifier" field for each finding in the findings list.
… in AuditRoot.tsx
…ction to handle errors properly
…in AuditSidebar file
…eState in components
…o use React.FC instead of React.ComponentType
feat: Remove unnecessary parameter in exportToPDF function
…ities and findings
caverav
requested review from
Icksir,
iTzGooDLife,
jllanosg,
massi-ponce and
sealra
|
Yo creo que esto está fuera del scope del PR pero siento que es medio redundante tener dos botones para exportar el audit.
|
Lo había quitado xd, ya lo arreglo |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 53
🧹 Outside diff range comments (2)
frontend/src/components/ui/hover-card.tsx (1)
Line range hint
1-33: Resumen de cambios: Mejora en la consistencia del códigoLos cambios realizados en este archivo se centran exclusivamente en mejorar la consistencia y el estilo del código. Se han unificado las comillas, añadido puntos y coma donde faltaban y eliminado backticks innecesarios. Estas modificaciones, aunque pequeñas, contribuyen a una mejor legibilidad y mantenimiento del código a largo plazo.
Es importante destacar que no se han realizado cambios funcionales, lo que minimiza el riesgo de introducir nuevos errores. Sin embargo, para futuros cambios, te sugiero considerar la implementación de un linter para automatizar estas correcciones de estilo y mantener la consistencia en todo el proyecto.
frontend/src/routes/audits/edit/AuditRoot.tsx (1)
Line range hint
145-172: Mejorar seguridad al utilizar 'window.open' en 'fileTypes'El uso de
window.opencon'_blank'puede exponer el objetowindow.opener, lo que representa un riesgo de seguridad. Se recomienda incluir'noopener,noreferrer'para prevenir este problema.Modifica los handlers de
onClickde esta forma:onClick: () => - window.open(url, '_blank'), + window.open(url, '_blank', 'noopener,noreferrer'),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
⛔ Files ignored due to path filters (1)
backend/report-templates/liccc.docxis excluded by!**/*.docx
📒 Files selected for processing (23)
- frontend/package.json (1 hunks)
- frontend/src/components/dashboard/AverageCVSS.tsx (1 hunks)
- frontend/src/components/dashboard/CIATriad.tsx (1 hunks)
- frontend/src/components/dashboard/CVSSScore.tsx (1 hunks)
- frontend/src/components/dashboard/CentralizedView.tsx (1 hunks)
- frontend/src/components/dashboard/ExportModal.tsx (1 hunks)
- frontend/src/components/dashboard/ExportView.tsx (1 hunks)
- frontend/src/components/dashboard/RemediationComplexity.tsx (1 hunks)
- frontend/src/components/dashboard/RemediationPriority.tsx (1 hunks)
- frontend/src/components/dashboard/Sidebar.tsx (1 hunks)
- frontend/src/components/navbar/AuditSidebar.tsx (3 hunks)
- frontend/src/components/ui/hover-card.tsx (2 hunks)
- frontend/src/components/ui/popover.tsx (1 hunks)
- frontend/src/i18n/en-US/index.ts (2 hunks)
- frontend/src/index.css (1 hunks)
- frontend/src/main.tsx (2 hunks)
- frontend/src/routes/audits/edit/AuditRoot.tsx (7 hunks)
- frontend/src/routes/audits/edit/dashboard/dashboard.tsx (1 hunks)
- frontend/src/routes/audits/edit/findings/add/NewVulnButton.tsx (1 hunks)
- frontend/src/routes/audits/edit/findings/add/add.tsx (7 hunks)
- frontend/src/routes/audits/index.tsx (1 hunks)
- frontend/src/services/audits.ts (4 hunks)
- frontend/src/services/exportToPDF.tsx (1 hunks)
🧰 Additional context used
🔇 Additional comments (37)
frontend/src/routes/audits/edit/findings/add/NewVulnButton.tsx (1)
5-5: ¡Bien hecho! La firma del componente ha sido mejorada.La adición del prop
onClickmejora significativamente la reutilización del componente. Ahora se pueden pasar manejadores de clics personalizados desde componentes padres, lo que aumenta la flexibilidad delNewVulnButton. Esta modificación está en línea con las mejores prácticas de React para la composición de componentes.frontend/src/routes/audits/index.tsx (1)
2-2: La importación del componente Dashboard es correcta.La nueva declaración de importación sigue la sintaxis adecuada y utiliza una ruta relativa coherente con la estructura de archivos del proyecto.
frontend/src/components/dashboard/ExportView.tsx (2)
1-7: ¡Bien hecho con las importaciones y la definición de tipos!Las importaciones son correctas y la definición del tipo
ExportViewPropsestá bien estructurada. No hay problemas aparentes en esta sección.
33-33: La exportación del componente es correcta.La declaración de exportación sigue las prácticas comunes y no presenta problemas aparentes.
frontend/src/components/ui/popover.tsx (5)
1-2: ¡Bien hecho con la consistencia en las comillas!Has cambiado las comillas dobles por comillas simples en las declaraciones de importación. Esto mejora la consistencia del código y se alinea con las guías de estilo comunes de JavaScript/TypeScript.
6-8: ¡Excelente atención al detalle con los puntos y coma!Has añadido puntos y coma al final de las asignaciones de componentes. Esto mejora la consistencia del código y sigue las mejores prácticas de JavaScript/TypeScript. Tu atención a estos pequeños detalles contribuye a un código más limpio y mantenible.
13-21: ¡Buena mejora en la consistencia y las convenciones modernas!Has realizado dos cambios importantes en el componente PopoverContent:
- Uso de comillas simples para los valores por defecto en la desestructuración de props.
- Adición de una coma final en el argumento className.
Estos cambios no solo mejoran la consistencia, sino que también siguen las convenciones modernas de JavaScript. La coma final, en particular, puede ayudar a tener diferencias más limpias en git cuando se añadan más propiedades en el futuro. Tu atención a estos detalles demuestra un buen entendimiento de las mejores prácticas de codificación.
26-27: ¡Muy bien por mantener la consistencia hasta el final!Has añadido puntos y coma al final de la definición del componente PopoverContent y de la asignación de displayName. Estos cambios mantienen la consistencia en todo el archivo y siguen las mejores prácticas de JavaScript/TypeScript. Tu atención constante a estos detalles de formato demuestra un enfoque meticuloso en la calidad del código.
29-29: ¡Excelente trabajo en la mejora general de la consistencia del código!Has añadido un punto y coma al final de la declaración de exportación, lo cual es el toque final perfecto para este conjunto de cambios de formato. En general, tus modificaciones han mejorado significativamente la consistencia y legibilidad del código en todo el archivo.
Estos cambios, aunque pequeños individualmente, tienen un impacto positivo colectivo en la calidad del código:
- Mejoran la legibilidad
- Facilitan el mantenimiento
- Reducen la probabilidad de errores relacionados con la inconsistencia de estilo
Tu atención meticulosa a estos detalles de formato demuestra un compromiso con la calidad del código y las mejores prácticas de desarrollo. ¡Buen trabajo!
frontend/src/components/ui/hover-card.tsx (5)
1-2: ¡Cambio aprobado!El uso de comillas simples en lugar de comillas dobles mejora la consistencia del código. Buen trabajo en mantener un estilo coherente.
4-4: ¡Cambio aprobado!El uso de comillas simples en esta importación mantiene la consistencia con las declaraciones de importación anteriores. Bien hecho.
17-17: ¡Cambio aprobado!La eliminación del backtick final y la adición del punto y coma mejoran la sintaxis y la consistencia con otras declaraciones en el archivo. Buen ojo para los detalles.
22-22: ¡Cambio aprobado!El uso de comillas simples para los valores de parámetros por defecto mantiene la consistencia con el resto del archivo. Excelente atención a los detalles de formato.
33-33: ¡Cambio aprobado!La adición del punto y coma al final de la declaración de exportación mejora la sintaxis y la hace consistente con otras declaraciones. Buen trabajo en mantener un estilo de código uniforme.
frontend/src/components/dashboard/Sidebar.tsx (3)
1-7: Las importaciones y la definición de tipos son adecuadas.La estructura de importaciones y la definición del tipo
SidebarPropsson claras y apropiadas para un componente React con soporte de internacionalización.
9-9: La definición del componente es correcta.La definición del componente Sidebar como un componente funcional con tipado React.FC y la desestructuración de props siguen las mejores prácticas de React.
40-40: La exportación del componente es correcta.La exportación por defecto del componente Sidebar es apropiada y sigue las prácticas comunes en React.
frontend/src/components/dashboard/CentralizedView.tsx (2)
1-7: Las importaciones son apropiadas y están bien estructuradas.Las importaciones incluyen React y los componentes personalizados necesarios para la funcionalidad del dashboard. La organización es clara y concisa.
43-43: La exportación del componente es correcta.La declaración de exportación sigue las prácticas comunes de React y permite una fácil importación del componente en otros archivos.
frontend/src/index.css (1)
5-7: ¡Bien hecho con la implementación de .sidebar-item!La clase
.sidebar-itemestá correctamente implementada utilizando las utilidades de Tailwind CSS. Proporciona un estilo coherente y una experiencia de usuario mejorada para los elementos de la barra lateral.frontend/package.json (5)
36-36: Evaluar la necesidad de html2canvasLa inclusión de html2canvas sugiere que se está implementando la captura de elementos HTML para la exportación a PDF. Sin embargo, esta biblioteca puede tener problemas de rendimiento y fidelidad en la representación. ¿Se ha considerado alternativas más eficientes o nativas para la generación de PDF?
Ejecute el siguiente script para buscar el uso de html2canvas y evaluar su impacto:
#!/bin/bash # Descripción: Buscar el uso de html2canvas y evaluar su impacto echo "Buscando importaciones y usos de html2canvas:" rg --type typescript --type javascript "import.*html2canvas|html2canvas\(" echo "Buscando funciones de exportación a PDF que podrían usar html2canvas:" rg --type typescript --type javascript "export.*pdf|generate.*pdf"
31-31: Justificar la inclusión de chartjs-plugin-annotationLa adición de chartjs-plugin-annotation sugiere que se están implementando anotaciones en los gráficos. ¿Es esto realmente necesario para el dashboard de auditoría? Si no se utiliza, debería eliminarse para evitar aumentar innecesariamente el tamaño del bundle.
Ejecute el siguiente script para buscar el uso de este plugin en el código:
#!/bin/bash # Descripción: Buscar el uso de chartjs-plugin-annotation en el código echo "Buscando importaciones de chartjs-plugin-annotation:" rg --type typescript --type javascript "import.*chartjs-plugin-annotation" echo "Buscando usos de 'annotation' en configuraciones de Chart.js:" rg --type typescript --type javascript "annotation.*Chart"
39-39: Verificar la implementación de jspdfLa adición de jspdf es coherente con la funcionalidad de exportación a PDF. Sin embargo, es importante asegurarse de que se esté utilizando de manera segura y eficiente, especialmente en lo que respecta al manejo de datos sensibles en los informes de auditoría.
Ejecute el siguiente script para buscar el uso de jspdf y evaluar su implementación:
#!/bin/bash # Descripción: Buscar el uso de jspdf y evaluar su implementación echo "Buscando importaciones y usos de jspdf:" rg --type typescript --type javascript "import.*jspdf|new jsPDF" echo "Buscando funciones de generación de PDF que usan jspdf:" rg --type typescript --type javascript "generate.*pdf.*jspdf|create.*pdf.*jspdf" echo "Buscando posibles problemas de seguridad en el uso de jspdf:" rg --type typescript --type javascript "addImage.*jspdf|addHTML.*jspdf"
42-42: Confirmar la necesidad de react-chartjs-2La inclusión de react-chartjs-2 es lógica dado que se está implementando un dashboard con gráficos en React. Sin embargo, es importante asegurarse de que se esté utilizando correctamente y que no haya conflictos con otras bibliotecas de visualización que puedan estar presentes en el proyecto.
Ejecute el siguiente script para verificar el uso correcto de react-chartjs-2:
#!/bin/bash # Descripción: Verificar el uso correcto de react-chartjs-2 echo "Buscando importaciones de componentes de react-chartjs-2:" rg --type typescript --type javascript "import.*react-chartjs-2" echo "Buscando usos de componentes de react-chartjs-2:" rg --type typescript --type javascript "<(Bar|Line|Pie|Doughnut|Radar|PolarArea|Bubble|Scatter).*react-chartjs-2" echo "Buscando posibles conflictos con otras bibliotecas de gráficos:" rg --type typescript --type javascript "import.*chart|import.*graph"
30-30: Verificar la necesidad y la versión de chart.jsLa adición de chart.js es coherente con la implementación de un dashboard de auditoría. Sin embargo, es crucial asegurarse de que esta versión sea compatible con las demás dependencias del proyecto, especialmente con react-chartjs-2.
Ejecute el siguiente script para verificar la compatibilidad de versiones:
✅ Verification successful
Error al verificar las versiones de chart.js y react-chartjs-2
El script anterior no pudo extraer las versiones debido a errores en la ejecución. Por favor, ejecute el siguiente script para obtener las versiones correctamente:
Compatibilidad verificada entre chart.js y react-chartjs-2
Las versiones de las dependencias son compatibles:
- react-chartjs-2: ^5.2.0
- chart.js: ^4.4.4
No se han encontrado conflictos ni problemas de compatibilidad entre estas versiones.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Descripción: Verificar la compatibilidad de versiones entre chart.js y react-chartjs-2 # Buscar la versión de react-chartjs-2 en package.json REACT_CHARTJS_VERSION=$(grep '"react-chartjs-2"' package.json | awk -F'"' '{print $4}') # Buscar la versión de chart.js en package.json CHARTJS_VERSION=$(grep '"chart.js"' package.json | awk -F'"' '{print $4}') echo "Versión de react-chartjs-2: $REACT_CHARTJS_VERSION" echo "Versión de chart.js: $CHARTJS_VERSION" # Buscar en la documentación de react-chartjs-2 la versión compatible de chart.js echo "Verifique manualmente en la documentación de react-chartjs-2 si la versión $CHARTJS_VERSION de chart.js es compatible."Length of output: 1078
Script:
#!/bin/bash # Descripción: Extraer versiones de react-chartjs-2 y chart.js usando jq # Verificar si jq está instalado if ! command -v jq &> /dev/null then echo "jq no está instalado. Por favor, instálalo para continuar." exit 1 fi # Extraer la versión de react-chartjs-2 REACT_CHARTJS_VERSION=$(jq -r '.dependencies["react-chartjs-2"]' frontend/package.json) # Extraer la versión de chart.js CHARTJS_VERSION=$(jq -r '.dependencies["chart.js"]' frontend/package.json) echo "Versión de react-chartjs-2: $REACT_CHARTJS_VERSION" echo "Versión de chart.js: $CHARTJS_VERSION" # Buscar la versión compatible en la documentación de react-chartjs-2 echo "Por favor, verifica manualmente en la documentación de react-chartjs-2 si la versión $CHARTJS_VERSION de chart.js es compatible."Length of output: 690
frontend/src/components/dashboard/ExportModal.tsx (2)
14-32: Implementación correcta del componente y lógica inicialLa definición del componente, la destructuración de props y la lógica inicial están bien implementadas. El uso de un retorno temprano para el modal cerrado es una buena optimización, y la función handleCheckboxChange utiliza correctamente una actualización funcional para el estado.
87-87: Exportación correcta del componenteLa exportación del componente ExportModal como exportación por defecto es correcta y sigue las prácticas comunes de exportación de componentes en React.
frontend/src/components/dashboard/RemediationPriority.tsx (1)
1-24: ¡Bien hecho con las importaciones y el registro de Chart.js!Las importaciones y el registro de los componentes de Chart.js están correctamente implementados y son necesarios para la funcionalidad del componente.
frontend/src/components/dashboard/RemediationComplexity.tsx (1)
1-24: ¡Bien hecho con las importaciones y el registro de Chart.js!Las importaciones y el registro de los componentes de Chart.js están correctamente implementados. Has incluido todos los módulos necesarios para la funcionalidad del componente.
frontend/src/main.tsx (1)
24-31: ¡Bien hecho con la importación del componente Dashboard!La adición de la importación del componente Dashboard es coherente con la nueva ruta que se está agregando. La declaración de importación está correctamente formateada y sigue el estilo existente del código.
frontend/src/i18n/en-US/index.ts (1)
163-163: ¡Bien hecho! La cadena 'copiedToClipboard' ahora está activa.La descomentación de esta cadena mejora la retroalimentación del usuario cuando se copia algo al portapapeles. Es un cambio simple pero efectivo.
frontend/src/components/dashboard/AverageCVSS.tsx (1)
96-96: 🛠️ Refactor suggestionRevisa las dependencias del useEffect
La inclusión de
averageCVSSen las dependencias deluseEffectno es necesaria y puede causar renders adicionales innecesarios.Modifica las dependencias de tu
useEffectpara que sean más precisas:- }, [effectiveAuditId, averageCVSS]); + }, [effectiveAuditId]);De esta manera, el efecto solo se ejecutará cuando cambie
effectiveAuditId.Likely invalid or redundant comment.
frontend/src/routes/audits/edit/findings/add/add.tsx (1)
159-170: Buena implementación de 'handleAddFinding'La función
handleAddFindingmaneja adecuadamente la creación de nuevos hallazgos y proporciona retroalimentación al usuario mediante notificaciones. ¡Buen trabajo!frontend/src/routes/audits/edit/AuditRoot.tsx (1)
26-32: Verificar actualizaciones en el uso de 'findings'Al agregar el nuevo campo
identifierafindings, asegúrate de que todas las referencias y usos de este estado en el código estén actualizados para reflejar este cambio y evitar posibles errores.frontend/src/components/navbar/AuditSidebar.tsx (2)
21-21: Adición correcta de la propiedadidentifieral tipoFindingLa inclusión de la propiedad
identifieren el tipoFindingpermite una identificación única de cada hallazgo, facilitando su manejo y referencia en la aplicación.
55-56: Actualización adecuada deAuditSidebarPropsconfileTypesLa adición de
fileTypesa las propiedades del componente mejora la funcionalidad de exportación, permitiendo seleccionar diferentes tipos de archivo.frontend/src/services/audits.ts (1)
12-13: Verificar el uso de los nuevos campos en el tipo 'Finding'Se han agregado los campos
remediationComplexityypriorityal tipoFinding. Asegúrate de que en toda la aplicación se actualicen los lugares donde se utiliza este tipo para incluir y manejar correctamente estos nuevos campos, evitando posibles errores de tipo o comportamiento inesperado.
|
Otra cosa que no me la había planteado antes, es que al exportar los dashboard siempre se exportan en su forma "original". Por ejemplo:
Sólo por curiosidad, ¿eso está bien, cierto? |
|
Siento que sería buena idea cambiar el nombre "Export" que exporta los dashboards a "Export dashboards" para diferenciarlo de la exportación del audit |
Y no se puede simplemente sacar el botón de la derecha? O hay que cambiar toda la lógica como mencionas para que funcione el encriptado |
Sí, está bien, si queremos esa funcionalidad, es para otra, es harto más complicado y no es parte del sprint |
Puede ser, creo que sería buena idea incluirlo en el PR del fix de los botones de export, y no aquí |
massi-ponce
left a comment
massi-ponce
left a comment
There was a problem hiding this comment.
LGTM. Se cumple todo lo establecido en la historia de usuario para el sprint 2.
Considerando que las cosas que se comentaron se fixearán fuera de este PR... doy por aprobado.
5 participants
Descripción
Se agregan dashboards por auditoría, incluyendo la exportación a formato PDF de campos seleccionados
Motivación y Contexto
HU08
¿Cómo ha sido probado?
Ir a un audit, ir al apartado de dashboard, ver que se muestran los gráficos y exportarlos
Capturas de pantalla (si es apropiado):
Web:
PDF:
Tipos de cambios
Lista de verificación:
Summary by CodeRabbit