feat(output): update HTML output to a new design

[hogo6002]

HTML output added #1258

New design (sample one: https://hogo6002.github.io/scanner-report/):

• Changed the color scheme to match osv.dev.
• Merged the package view and vulnerability view into a single nested table.
• Added a layer view.
• Added a vulnerability type filter (project, OS, and uncalled).
• Added a vulnerability search bar.
• Refined the vulnerability severity count design.
• Integrated the osv.dev vulnerability page into results (allowing users to click to view details).
• Improved the UI.

Future plan:
Use frontend framework to enhance code maintainability and readability

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 70.70707% with 29 lines in your changes missing coverage. Please review.

Project coverage is 68.83%. Comparing base (9a303ec) to head (34b8fc1).

Files with missing lines	Patch %	Lines
internal/output/html.go	70.70%	25 Missing and 4 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1383      +/-   ##
==========================================
- Coverage   69.02%   68.83%   -0.20%     
==========================================
  Files         185      185              
  Lines       17869    17934      +65     
==========================================
+ Hits        12334    12344      +10     
- Misses       4876     4925      +49     
- Partials      659      665       +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[oliverchang]

this is awesome!!!

[G-Rath]

awesome stuff!

I do wonder if it might be worth trying to split this out into at least two PRs as it feels like you're adding a lot of independent stuff, but will leave that for you to decide.

Also, you might already have spotted this but the "overall severity" element isn't responsive:

I know we're not expecting these reports to be viewed on mobile, but I had this occur on my 4k 150%-scaled monitor as I put the report side-by-side (so, half of the resolution) this pr for reviewing

[hogo6002]

I do wonder if it might be worth trying to split this out into at least two PRs as it feels like you're adding a lot of independent stuff, but will leave that for you to decide.

I wanted to split this into separate PRs, but it's a bit challenging. Any code changes would require corresponding changes in other files, and I can't show the outputted HTML without all the features working together. (I can imagine it might be a bit hard to review.)

Also, you might already have spotted this but the "overall severity" element isn't responsive:

Yes, that's by design. Implementing dynamic "overall severity" without a frontend framework needs a bit of effort. I also prefer to avoid writing excessive JS code, as it's difficult to review and maintain. If we adopt a framework in the future, this feature will be much easier to implement. So, I think it's not worth to implement it for now.

I know we're not expecting these reports to be viewed on mobile, but I had this occur on my 4k 150%-scaled monitor as I put the report side-by-side (so, half of the resolution) this pr for reviewing

Good catch! added a min-width setting. It should be good now.

[another-rex]

Quick note, can you target this to v2 rather than the base branch?

[hogo6002]

Quick note, can you target this to v2 rather than the base branch?

There are quite a few conflicts. I will merge this into the main and then create a separate PR to merge from main into v2.

[another-rex]

Added some comments, not looking too closely at the HTML, just going to test the functionality for bugs.

[hogo6002]

Updated (https://hogo6002.github.io/scanner-report/):

UI:

• Renamed filter name from "Types" to "Filters". This is because "uncalled/unimportant" is not a specific type, and it allows for more flexibility in the future if we want to add more filters, such as showing fixable vulns only (I thought about moving "uncalled/unimportant" out as a separate one, but I really like the current layout. Also, "uncalled/unimportant" ones aren't really important, and users should ignore these vulns, so it's not worth giving them a separate, more obvious position).

• Updated the selected filter count when checking or unchecking checkboxes. This also helps show how many items have been filtered out.
  
  

• Ensured rounded corner consistency for elements on each row.

• Added prompt text to indicate uncalled/unimportant ones.

• Made entire package rows be clickable.

Go:

• Renamed some structs to maintain consistency.
• Removed unnecessary global variables.