feat(template): improve html template #2635
Conversation
- Add multi-severity filtering with interactive severity boxes - Implement Excel and PDF export with dynamic filenames and metadata - Add PURL, Related URLs, and package type icons to data display - Improve table responsiveness with dynamic height and inline row details - Add dark mode support and modern search interface - Update core dependencies and refactor JavaScript codebase Signed-off-by: Firas AlShafei <f.alshafei@gmail.com>
|
Hello, this template seems not to work. $ grype version |
|
@Michael-MWI - can you provide an example failure? I just re-ran this with the following example and didn't find any issues ➜ grype git:(develop) ✗ grype registry:alpine -o template --template templates/upstream_html.tmpl --file grype_report.html
✔ Parsed image sha256:aded1e1a5b3705116fa0a92ba074a5e0b0031647d9c315983ccba2ee5428ec8b
✔ Cataloged contents 1c4eef651f65e2f7daee7ee785882ac164b02b78fb74503052a26dc061c90474
├── ✔ Packages [15 packages]
├── ✔ File metadata [82 locations]
├── ✔ File digests [82 files]
└── ✔ Executables [17 executables]
✔ Scanned for vulnerabilities [6 vulnerability matches]
├── by severity: 0 critical, 0 high, 0 medium, 6 low, 0 negligible
└── by status: 0 fixed, 6 not-fixed, 0 ignored
➜ grype git:(develop) ✗ file grype_report.html
grype_report.html: HTML document, ASCII text
➜ grype git:(develop) ✗ ls -l grype_report.html
-rw-r--r--. 1 dev dev 62950 May 12 13:08 grype_report.html
➜ grype git:(develop) ✗ grype --version
grype 0.91.2
➜ grype git:(develop) ✗ grype version
Application: grype
Version: 0.91.2
BuildDate: 2025-04-25T17:20:02Z
GitCommit: 7e6ba817350bdb922f35e4437aa01869cf0a8be0
GitDescription: v0.91.2
Platform: linux/amd64
GoVersion: go1.24.2
Compiler: gc
Syft Version: v1.23.1
Supported DB Schema: 6
|
|
Here it is $ md5sum /usr/local/share/grype/templates/html.tmpl |
|
The template checksum doesn't match what I pulled from github, could be something to do with the packaging step ➜ wget https://raw.githubusercontent.com/anchore/grype/refs/heads/main/templates/html.tmpl
Saving 'html.tmpl'
HTTP response 200 [https://raw.githubusercontent.com/anchore/grype/refs/heads/main/templates/html.tmpl]
html.tmpl 100% [==============================================================================================>] 13.45K --.-KB/s
[Files: 1 Bytes: 13.45K [61.42KB/s] Redirects: 0 Todo: 0 Errors: 0 ]
➜ md5sum html.tmpl
19a9cc4a7ae67ee0a0498460276cbb82 html.tmplUsing the template from github I have no issues generating an html report from the template ➜ grype scalingo/scalingo-22 -o template=scaling.html -t ~/projects/grype/templates/html.tmpl
✔ Loaded image scalingo/scalingo-22:latest
✔ Parsed image sha256:e9277a3579eddb323291cd188e7a48e4f44b9b2cff9fbf3c0920405c4b01743f
✔ Cataloged contents 74a2aa47694b5ae90d38590409d80547354513a3d618e7f38fc60e7dd8f55543
├── ✔ Packages [791 packages]
├── ✔ Executables [2,144 executables]
├── ✔ File metadata [41,145 locations]
└── ✔ File digests [41,145 files]
✔ Scanned for vulnerabilities [1262 vulnerability matches]
├── by severity: 2 critical, 36 high, 2701 medium, 526 low, 41 negligible
└── by status: 1206 fixed, 2100 not-fixed, 2044 ignored
A newer version of grype is available for download: 0.92.0 (installed version is 0.91.2)
➜ echo $?
0
➜ ls -lh scaling.html
-rw-r--r--. 1 dev dev 987K May 16 13:10 scaling.html
Result |
|
It's much simpler, I reviewed our output again and realized you're using grype v0.91.2 and this template was included in the latest 0.92. release from a few days ago I realize now the example I used in my initial response was also using v0.91.2, but i was referencing the template from my fork of the grype repo, not the released one. |
I recently had to update the html template to be more responsive (we display it in a pipeline results iframe and size became an issue). While fixing that, I ended up giving the whole interface a bit of a facelift - added some modern touches, made it more user-friendly, and threw in dark mode for good measure.
The full list of changes is in the summary below, but the main thing is that it should work much better in those pipeline iframes now while also being generally nicer to use.
Summary
Dark Mode Support & Styling:
Support for system dark mode preference was implemented.
General styling improvements were applied for a cleaner look and feel in both light and dark modes.
Enhanced Search Experience: The search input now features a modern, floating label design.
Data Display:
Added PURL & Related URLs: The report now includes columns for Package URL (PURL) and associated Related URLs.
Added Checksum: For image reports, the image checksum (ImageID/Digest) is now displayed in the main report header.
Added Package Icons: Package types are now visually represented with intuitive icons, making it easier to quickly identify different package types at a glance.
Responsiveness & Layout:
The table's height is no longer fixed. It automatically adjusts to utilize the available vertical space in the browser window, showing as many rows as possible without scrolling the page.
Pagination controls remain available and are automatically hidden if all rows fit on a single "page".
Clicking on a row now expands it inline to show detailed information directly beneath the row, including Description and the newly added PURL and Related URLs.
The table layout automatically adjusts to screen size. Less critical columns hide when space is limited (details viewable via inline expansion).
Improved Severity Filtering:
Users can now filter the vulnerability table by multiple severities simultaneously (e.g., show both "Critical" and "High") by clicking the severity summary boxes.
Clicking an active severity box again deselects it.
This replaces the previous single-severity filter limitation.
Improved Data Export:
New Excel Export: An Excel (XLSX) export button was added, providing another format for data extraction, including PURL and Related URLs.
Exported files include key report metadata (Name, Type, Date, Checksum if applicable) in the header.
Filenames for exported reports are dynamically generated based on the report's source name (e.g., image or directory name).
Exports contain the currently filtered data (excluding columns like Description in PDF for brevity, but including most data in Excel).
Added prettier PDF and Excel (XLSX) export buttons to the report interface.
Code Quality:
Core libraries like DataTables and its extensions (Buttons, Responsive) were updated.
The underlying JavaScript was significantly refactored and organized for improved readability, maintainability.