Improve Report UI

[nprail]

The report UI doesn't look super great and could be better. Let's improve it.

To-Do

• Improve Report UI

[davityavryan]

Hi @nprail,

I have a suggestions for you:

1. Would be good to have an option for CLI to enable/disable showing unique vulnerabilities. For example if you have installed imagemin-webpack-plugin@2.3.0 then you will have 6 vulnerabilities, because of tunnel-agent@0.4.3 but they are same vulnerabilities.
2. Also as you can see here I have added collapsable for "Reasons" section (which makes sense if point 1 is a case). Note that it is CSS only solution, mainly because these kind of reports are used in CI-s where you don't want to (or can't) have JS.

[giocodes]

Is someone still interested in working on this? I landed here because I was looking for a way to filter a table of just the high risk vulnerabilities.

[AdrianoCahete]

Is someone still interested in working on this?

To be honest, is in my ToDo list in a while, but I didn't have time to see it yet. Feel free to open a PR, because i'm not part of the team. :P

[nprail]

@giocodes I am planning on working on this at some point soon. But like @AdrianoCahete said, PRs are welcome!

Are you looking for filtering after the report was generated or during? For example, you could achieve filtering by doing this:

npm audit --json --audit-level=high | npm-audit-html

[nprail]

Okay, so turns out that --json outputs everything regardless of the other flags like --audit-level or --only (although, --production does affect the JSON output). So filtering does have to be done by npm-audit-html.

[giocodes]

Aw too bad the flag does not work.

Yeah, I'll be happy to help. 😃What do you all have in mind for the new UI to look like?

I want to suggest a table where vulnerabilities can be sorted and users can choose the columns (information) they want to see. Similar to what Jira has for the issues view:

For npm-audit-html it would be a lot simpler, no sidebar or tabs. Just the filters on top and the sortable table. Let me know what you think @nprail @SAIGlobal

[nprail]

@giocodes Actually, determining what the improved look should be is most of why I haven't done it yet. So feedback like this is great! 👏👏👏

I like the idea of a sortable/filterable table that you can open collapses (or modals) to see more details for each vulnerability.

@AdrianoCahete @giocodes
What primary information do you think should be visible/sortable? My thoughts are name, severity, and vulnerable module name at least. Maybe a date published and/or link to the advisory as well?

[AdrianoCahete]

What primary information do you think should be visible/sortable? My thoughts are name, severity, and vulnerable module name at least. Maybe a date published and/or link to the advisory as well?

If possible, everything (why not give the user that degree of customization?). But the most important ones are severity, CVE, name and module name, I think.

About the UI, my first idea was design an UI for this, but I'm with a lack of time this months. :(

[nprail]

@AdrianoCahete Sure, giving the option to add any sortable columns to the table would be best. I just meant, what should the default columns be.

The trouble with CVE is that it is an array of CVEs. There can be more than one. Would it make sense to group them all into one column?

Example:

Name	Severity	Module	CVEs
Arbitrary File Overwrite	High	fstream	CWE-59, CVE-2019-13173

[nprail]

I've started to work on the new design!

What do you think about a dark theme?

Here's a preview of the new layout:

[nprail]

DARK MODE!
🎉🎉🎉

Feedback is much appreciated.

[giocodes]

Is the palette easy to change? On my screen the green colors don't seem to have enough contrast.
Maybe you could try the color palette from https://material.io/design/color/dark-theme.html#anatomy

[nprail]

Yep, totally. I think I'll add a CLI option for dark or light mode.

I'll definitely be making adjustments to the color palette too.

[nikhilgeo]

Hope this will roll out soon. I have a small suggestion, It would be great if there is a breakdown of total no of issues based on the severity also.

[nprail]

@nikhilgeo I'll be working on finishing this up and hopefully releasing a new version with it tomorrow!

I'm probably going to make dark mode an option but not the default.

[nprail]

I've improved the dark theme a lot (borrowed some styles from VS Code) and also added code highlighting with highlight.js.

If you want dark mode, you will have to add --theme dark as a CLI option. 2.0 will probably switch to dark mode by default.

Dark mode

Light mode

[nikhilgeo]

Awesome, thank you for the new looks. Looking forward for the new release.

[nprail]

🎉 This issue has been resolved in version 1.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀