Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix error generating dashboard reports on Firefox #6902

Merged
merged 10 commits into from
Aug 13, 2024

Conversation

Desvelao
Copy link
Member

@Desvelao Desvelao commented Aug 8, 2024

Description

This pull request fixes an error generating the dashboard reports using the Firefox web browser.

Changes:

  • Add an embedded and customized dom-to-image-more (v3.3.1) dependency
  • Replace the library to generate de screenshots of the dashboard
    visualizations
  • Apply a fix related to cropped screenshots on Firefox
  • Remove embedded dom-to-image dependency
  • Change KPIs visualization label color when generating a report on dark mode (platform theme)

Issues Resolved

#6900

Evidence

Firefox

  • Amazon Web Services:
    image
    image
    image

  • Threat Hunting
    image
    image
    image

Google Chrome

  • Amazon Web Services
    image
    image
    image

  • Threat Hunting
    image
    image
    image

Test

IMPORTANT: Test acceptance criteria: test with Google Chrome (or variant), Firefox and Safari.

Legend:
⚫: none
🟢: pass
🟡: warning
🔴: fail
⚪: not applicable

UI

Test Chrome Firefox Safari
Go to the Malware Detection > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the File Integrity Monitoring > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the Threat Hunting > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the MITRE ATT&CK > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the VirusTotal > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the PCI DSS > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the GDPR > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the HIPAA > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the NIST 800-53 > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the TSC > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the Docker > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the Amazon Web Services > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the Google Cloud > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the GitHub > Dashboard and generate a report. It should contain the visualizations with an acceptable render
Go to the Office 365 > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Details

⚫ Go to the Malware Detection > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the File Integrity Monitoring > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the Threat Hunting > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the MITRE ATT&CK > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the VirusTotal > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the PCI DSS > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the GDPR > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the HIPAA > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the NIST 800-53 > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the TSC > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the Docker > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the Amazon Web Services > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the Google Cloud > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the GitHub > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

⚫ Go to the Office 365 > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - ⚫

Safari - ⚫

Check List

  • All tests pass
    • yarn test:jest
  • New functionality includes testing.
  • New functionality has been documented.
  • Update CHANGELOG.md
  • Commits are signed per the DCO using --signoff

- Add dom-to-image-more dependency
- Replace the library to generate de screenshots of the dashboard
  visualizations
- Apply a fix related to cropped screenshots on Firefox
@Desvelao Desvelao self-assigned this Aug 8, 2024
@chantal-kelm
Copy link
Member

chantal-kelm commented Aug 8, 2024

Chrome

Grabacion.de.pantalla.2024-08-08.a.la.s.11.08.10.a.m.mov

Firefox

Grabacion.de.pantalla.2024-08-08.a.la.s.11.04.52.a.m.mov

Dark mode 🔴

Captura de pantalla 2024-08-08 a la(s) 11 20 05 a  m

The table does not look complete, for example in FIM 🔴

Captura de pantalla 2024-08-08 a la(s) 11 19 38 a  m

The table shown in the module is not the same as the table shown in the report 🔴

Captura de pantalla 2024-08-08 a la(s) 11 43 41 a  m Captura de pantalla 2024-08-08 a la(s) 11 43 59 a  m

Safari

Grabacion.de.pantalla.2024-08-08.a.la.s.11.07.06.a.m.mov

@Desvelao
Copy link
Member Author

Desvelao commented Aug 9, 2024

I will try to research what is happening on dark mode, but there is an issue that could be related: #3805

The visualization included on the PDF reports does not include the table of Threat Hunting. The table visible on the report is a summary, that is obtained on the backend side.

The quality of the visualization could be related to taking the screenshot. I initially added some code that scaled the visualization x2 and this had more resolution on the report, but using this approach causes a problem with the visualization related with KPIs. This was seen with @yenienserrano.

…o fix/6900-error-generate-dashboard-reports-on-firefox
@Desvelao
Copy link
Member Author

Desvelao commented Aug 9, 2024

Findings on #6902 (comment)

  • PDF report background displays dark color:
    This could be caused by the browser configuration. Maybe it is inverting the colors.

  • The label of KPIs visualization are displayed with lighter colors when generating the report in dark mode of the platform.
    I will add a fix to solve this problem.

  • The table related to FIM report is cropped
    This could happen with others tables and depends on the row content. This will not be fixed on this pull request and we should open another issue for this topic.

@yenienserrano
Copy link
Member

yenienserrano commented Aug 9, 2024

Test

IMPORTANT: Test acceptance criteria: test with Google Chrome (or variant), Firefox and Safari.

Legend:
⚫: none
🟢: pass
🟡: warning
🔴: fail
⚪: not applicable

UI

Test Chrome Firefox Safari
Go to the Malware Detection > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the File Integrity Monitoring > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the Threat Hunting > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the MITRE ATT&CK > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the VirusTotal > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the PCI DSS > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the GDPR > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the HIPAA > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the NIST 800-53 > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the TSC > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the Docker > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the Amazon Web Services > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟡
Go to the Google Cloud > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the GitHub > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢
Go to the Office 365 > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢 🟢

Details

🟢 Go to the Malware Detection > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the File Integrity Monitoring > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the Threat Hunting > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the MITRE ATT&CK > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the VirusTotal > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the PCI DSS > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the GDPR > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the HIPAA > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the NIST 800-53 > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the TSC > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

image
image

🟢 Go to the Docker > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢 :

image
image

image
image

🟢 Go to the Amazon Web Services > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image
image

Safari - 🟡

image
image

image
image

maps without information

🟢 Go to the Google Cloud > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image
image

🟢 Go to the GitHub > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image

🟢 Go to the Office 365 > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - ⚫

Firefox - 🟢

image

Safari - 🟢

image

@yenienserrano yenienserrano self-requested a review August 9, 2024 12:04
yenienserrano
yenienserrano previously approved these changes Aug 9, 2024
Copy link
Member

@yenienserrano yenienserrano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@chantal-kelm
Copy link
Member

chantal-kelm commented Aug 9, 2024

Test Chrome Firefox Safari
Go to the Malware Detection > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the File Integrity Monitoring > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the Threat Hunting > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the MITRE ATT&CK > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the VirusTotal > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the PCI DSS > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the GDPR > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the HIPAA > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟡
Go to the NIST 800-53 > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟡
Go to the TSC > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the Docker > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the Amazon Web Services > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the Google Cloud > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the GitHub > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢
Go to the Office 365 > Dashboard and generate a report. It should contain the visualizations with an acceptable render 🟢

Details

🟢 Go to the Malware Detection > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.08.22.p.m.mov
🟢 Go to the File Integrity Monitoring > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.10.23.p.m.mov
🟢 Go to the Threat Hunting > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.11.46.p.m.mov
🟢 Go to the MITRE ATT&CK > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.14.17.p.m.mov
🟢 Go to the VirusTotal > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.15.12.p.m.mov
🟢 Go to the PCI DSS > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.16.11.p.m.mov
🟢 Go to the GDPR > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.17.36.p.m.mov
🟡 Go to the HIPAA > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟡

Grabacion.de.pantalla.2024-08-09.a.la.s.1.18.52.p.m.mov

The metric text colour is not very visible in dark mode:

Captura de pantalla 2024-08-09 a la(s) 1 20 53 p  m
🟡 Go to the NIST 800-53 > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟡

Grabacion.de.pantalla.2024-08-09.a.la.s.1.26.19.p.m.mov

The metric text colour is not very visible in dark mode:

Captura de pantalla 2024-08-09 a la(s) 1 27 34 p  m Captura de pantalla 2024-08-09 a la(s) 1 27 48 p  m
🟢 Go to the TSC > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.28.18.p.m.mov
🟢 Go to the Docker > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.29.18.p.m.mov
🟢 Go to the Amazon Web Services > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.30.02.p.m.mov
🟢 Go to the Google Cloud > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.30.49.p.m.mov
🟢 Go to the GitHub > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.31.42.p.m.mov
🟢 Go to the Office 365 > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-09.a.la.s.1.44.40.p.m.mov

@Desvelao
Copy link
Member Author

Desvelao commented Aug 12, 2024

Changes

Fixed colors on visualization that caused poorly render on the reports

  • HIPAA
    image
    image

  • NIST 800-53

    • Unpinned agent
      image
      image

    • Pinned agent
      image
      image

  • Remove unused code related to TSC visualization

chantal-kelm
chantal-kelm previously approved these changes Aug 13, 2024
Copy link
Member

@chantal-kelm chantal-kelm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CR: ✅
TEST: ✅

🟢 Go to the HIPAA > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-13.a.la.s.7.15.25.a.m.mov

The metric text colour is not very visible in dark mode:

Captura de pantalla 2024-08-13 a la(s) 7 16 21 a  m
🟢 Go to the NIST 800-53 > Dashboard and generate a report. It should contain the visualizations with an acceptable render

Chrome - 🟢

Grabacion.de.pantalla.2024-08-13.a.la.s.7.16.57.a.m.mov

The metric text colour is not very visible in dark mode:

Captura de pantalla 2024-08-13 a la(s) 7 17 55 a  m Captura de pantalla 2024-08-13 a la(s) 7 18 12 a  m

@Desvelao Desvelao requested a review from yenienserrano August 13, 2024 10:29
yenienserrano
yenienserrano previously approved these changes Aug 13, 2024
@Desvelao Desvelao dismissed stale reviews from yenienserrano and chantal-kelm via 76f43a8 August 13, 2024 11:57
Copy link
Contributor

Wazuh Core plugin code coverage (Jest) test % values
Statements 45.96% ( 399 / 868 )
Branches 41.97% ( 157 / 374 )
Functions 44.01% ( 136 / 309 )
Lines 46.16% ( 397 / 860 )

Copy link
Contributor

Wazuh Check Updates plugin code coverage (Jest) test % values
Statements 76.44% ( 172 / 225 )
Branches 58.65% ( 61 / 104 )
Functions 61.7% ( 29 / 47 )
Lines 76.44% ( 172 / 225 )

@chantal-kelm chantal-kelm self-requested a review August 13, 2024 12:00
Copy link
Contributor

Main plugin code coverage (Jest) test % values
Statements 13.58% ( 4009 / 29518 )
Branches 9.1% ( 1759 / 19323 )
Functions 13.27% ( 944 / 7111 )
Lines 13.75% ( 3907 / 28401 )

@Desvelao Desvelao merged commit 7d47823 into 4.9.0 Aug 13, 2024
5 checks passed
@Desvelao Desvelao deleted the fix/6900-error-generate-dashboard-reports-on-firefox branch August 13, 2024 12:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Generate PDF report button doesn't work in Firefox
3 participants