fix: HTML report tinkering (#1561)

Made a series of changes to resolve the issues identified in #1528 Hosted an example here: https://another-rex.github.io/TestPages/Vulnerability%20Scan%20Report.html To make it easier to see the changes, when reviewing, use this link: https://github.com/google/osv-scanner/pull/1561/files/bd8d5211e77612b1a0a68a4b00db1d40535fe400..8223593ef84cda34da84a57aecd12d3258ea1463 which select the diffs **Excluding** the first commit (use shift to select multiple commits). That moves the files around which breaks all of git's diffing. No change other than moving the files and reindenting is done in that first commit. HTML: - Move to actual .js and .css file rather than .html files. - Alias and groupid tooltips now put each ID on a new line. - Can now click on the entire filter box to change it, not just on the text part. CSS: - Remove max-height in the inner tables, this was making it impossible to have tooltips that escape the container (at least I haven't figured out how to have both). - Tooltip box sizing is now dynamic with max-width - Tooltips now display upwards instead of downwards - Highlight source path better - Minor refactor to how the search box is laid out - Remove unused css lines. - Make iframe bg color black instead of white to avoid flash banging people. JS: - Remove all style edits in javascript, state changes are made with classes now. (TIL `classList.toggle()` function) - Basic linter pass (e.g. use const on variables, define all variables...etc) - Run showAllVulns() function at page load.
google · Feb 5, 2025 · 5b166c1 · 5b166c1
1 parent e146bf5
commit 5b166c1
Show file tree

Hide file tree

Showing 12 changed files with 1,223 additions and 1,255 deletions.
diff --git a/internal/output/html.go b/internal/output/html.go
@@ -35,6 +35,18 @@ func formatRating(rating severity.Rating) string {
 	return strings.ToLower(string(rating))
 }
 
+type VulnTableEntryArgument struct {
+	Element  VulnResult
+	IsHidden bool
+}
+
+func buildVulnTableEntryArgument(element VulnResult, isHidden bool) VulnTableEntryArgument {
+	return VulnTableEntryArgument{
+		IsHidden: isHidden,
+		Element:  element,
+	}
+}
+
 func PrintHTMLResults(vulnResult *models.VulnerabilityResults, outputWriter io.Writer) error {
 	// htmlResult := BuildHTMLResults(vulnResult)
 	result := BuildResults(vulnResult)
@@ -48,10 +60,11 @@ func PrintHTMLResults(vulnResult *models.VulnerabilityResults, outputWriter io.W
 		"add": func(a, b int) int {
 			return a + b
 		},
-		"getFilteredVulnReasons": getFilteredVulnReasons,
-		"getBaseImageName":       getBaseImageName,
-		"formatSlice":            formatSlice,
-		"formatLayerCommand":     formatLayerCommand,
+		"getFilteredVulnReasons":      getFilteredVulnReasons,
+		"getBaseImageName":            getBaseImageName,
+		"formatSlice":                 formatSlice,
+		"formatLayerCommand":          formatLayerCommand,
+		"buildVulnTableEntryArgument": buildVulnTableEntryArgument,
 	}
 
 	tmpl := template.Must(template.New("").Funcs(funcMap).ParseFS(templates, TemplateDir))

diff --git a/internal/output/html/base_image_template.gohtml b/internal/output/html/base_image_template.gohtml
@@ -36,7 +36,7 @@
     <tr>
       <td></td>
       <td colspan="100%">
-        <div id="base-image-details-{{ .Index }}" class="base-image-details">
+        <div id="base-image-details-{{ .Index }}" class="base-image-details hide-block">
           {{ range .AllLayers }}
           {{ $index := .Index }}
           {{ $originalCommand := .LayerMetadata.Command }}

diff --git a/internal/output/html/filter_template.gohtml b/internal/output/html/filter_template.gohtml
@@ -9,7 +9,7 @@
           <i class="material-icons">keyboard_arrow_down</i>
         </div>
       </div>
-      <div id="layer-filter-option-container" class="filter-option-container">
+      <div id="layer-filter-option-container" class="filter-option-container hide-block">
         <div data-layer-hash="all" class="filter-option layer-filter-option" id="all-layer-checkbox"
           data-layer-all-count="{{ .VulnCount.AnalysisCount.Regular }}">
           <p>All layers ({{ .VulnCount.AnalysisCount.Regular }})</p>
@@ -24,7 +24,7 @@
         {{ $diffID := .LayerMetadata.DiffID }}
         {{ $longCommand := false }}
         {{ if gt (len $command) 109 }}
-          {{ $longCommand = true }}
+        {{ $longCommand = true }}
         {{ end }}
 
         {{ if gt .Count.AnalysisCount.Regular 0 }}
@@ -34,7 +34,7 @@
             {{ if $longCommand }}
             <span class="tooltiptext layer-tooltiptext">{{ $originalCommand }}</span>
             {{ end }}
-            </div>
+          </div>
           {{ template "severity_summary_template.gohtml".Count.SeverityCount }}
         </div>
         {{ end }}
@@ -54,28 +54,28 @@
           <i class="material-icons">keyboard_arrow_down</i>
         </div>
       </div>
-      <div id="type-filter-option-container" class="filter-option-container">
+      <div id="type-filter-option-container" class="filter-option-container hide-block">
         {{ if .IsContainerScanning }}
-        <div class="filter-option">
+        <label class="filter-option" for="all-type-checkbox">
           <input type="checkbox" checked id="all-type-checkbox" data-type-all-count="{{ .VulnTypeSummary.All }}">
-          <label for="all-type-checkbox">Default ({{ .VulnTypeSummary.All }})</label>
-        </div>
+          Default ({{ .VulnTypeSummary.All }})
+        </label>
         {{ end }}
-        <div class="filter-option">
+        <label class="filter-option" for="project-type-checkbox">
           <input type="checkbox" checked id="project-type-checkbox"
             data-type-project-count="{{ .VulnTypeSummary.Project }}">
-          <label for="project-type-checkbox"> Project Vulnerabilities ({{ .VulnTypeSummary.Project }})</label>
-        </div>
+          Project Vulnerabilities ({{ .VulnTypeSummary.Project }})
+        </label>
         {{ if .IsContainerScanning }}
-        <div class="filter-option">
+        <label class="filter-option" for="os-type-checkbox">
           <input type="checkbox" checked id="os-type-checkbox" data-type-os-count="{{ .VulnTypeSummary.OS }}">
-          <label for="os-type-checkbox"> Operating system vulnerabilities ({{ .VulnTypeSummary.OS }})</label>
-        </div>
+          Operating system vulnerabilities ({{ .VulnTypeSummary.OS }})
+        </label>
         {{ end }}
-        <div class="filter-option">
+        <label class="filter-option" for="uncalled-type-checkbox">
           <input type="checkbox" id="uncalled-type-checkbox" data-type-uncalled-count="{{ .VulnTypeSummary.Hidden }}">
-          <label for="uncalled-type-checkbox">Uncalled/Unimportant ({{ .VulnTypeSummary.Hidden }})</label>
-        </div>
+          Uncalled/Unimportant ({{ .VulnTypeSummary.Hidden }})
+        </label>
       </div>
     </div>
   </div>

diff --git a/internal/output/html/package_table_template.gohtml b/internal/output/html/package_table_template.gohtml
@@ -30,19 +30,21 @@
     <td {{ if eq $element.VulnCount.AnalysisCount.Regular 0 }}class="uncalled-text" {{ end }}>{{ $element.Name }}</td>
     <td {{ if eq $element.VulnCount.AnalysisCount.Regular 0 }}class="uncalled-text" {{ end }}>{{ $element.InstalledVersion }}</td>
     <td>
+      <div class="tooltip no-underline">
       {{ if ne $element.VulnCount.FixableCount.UnFixed 0 }}
-      {{ if eq $element.VulnCount.FixableCount.Fixed 0}}
-      <p class="fixable-tag no-fix">No fix available</p>
-      {{ else }}
-      <div class="tooltip">
-        <p class="fixable-tag has-fix">Partial fixes available</p>
-        <span class="tooltiptext">Upgrading the package will fix {{ $element.VulnCount.FixableCount.Fixed }} out of {{
-          $element.VulnCount.AnalysisCount.Regular }} vulnerabilities</span>
-      </div>
-      {{ end }}
+        {{ if eq $element.VulnCount.FixableCount.Fixed 0}}
+          <p class="fixable-tag no-fix">No fix available</p>
+            <span class="tooltiptext">All {{ $element.VulnCount.AnalysisCount.Regular }} vulnerabilities have no fixed version available.</span>
+          {{ else }}
+          <p class="fixable-tag has-fix">Partial fixes available</p>
+          <span class="tooltiptext">Upgrading the package can fix {{ $element.VulnCount.FixableCount.Fixed }} out of {{
+            $element.VulnCount.AnalysisCount.Regular }} vulnerabilities.</span>
+        {{ end }}
       {{ else }}
-      <p class="fixable-tag has-fix">Fix available</p>
+        <p class="fixable-tag has-fix">Fix available</p>
+        <span class="tooltiptext">Upgrading the package can fix all {{ $element.VulnCount.FixableCount.Fixed }} vulnerabilities.</span>
       {{ end }}
+      </div>
     </td>
     <td>
       {{ if ne $element.VulnCount.AnalysisCount.Regular 0 }}
@@ -52,9 +54,9 @@
       {{ end }}
     </td>
   </tr>
-  <tr>
+  <tr class="table-tr-details">
     <td colspan="100%">
-      <div id="table-tr-{{ $index }}-details" class="package-details">
+      <div id="table-tr-{{ $index }}-details" class="package-details hide-block">
         {{ if and $element.LayerDetail.LayerInfo.LayerMetadata (not (eq $element.LayerDetail.LayerInfo.LayerMetadata.Command "")) }}
         {{ $index := $element.LayerDetail.LayerIndex }}
         {{ $diffID := $element.LayerDetail.LayerInfo.LayerMetadata.DiffID }}
@@ -82,7 +84,7 @@
           <p class="package-detail-title">Introduced in layer #{{ $index }}:&nbsp;</p>
           <div class="tooltip">
             <p class="layer-command">{{ $command }}</p>
-            <span class="tooltiptext">{{ $commandDetail }}</span>
+            <span class="tooltiptext layer-tooltiptext">{{ $commandDetail }}</span>
           </div>
           {{ else }}
           <p class="package-detail-title">Introduced in layer #{{ $index }}:&nbsp;</p>

diff --git a/internal/output/html/package_view_template.gohtml b/internal/output/html/package_view_template.gohtml
@@ -4,7 +4,7 @@
   <div class="ecosystem-sources-container">
     {{ range .Sources }}
     <div class="source-container">
-      <h3 class="source-heading">Source: {{ .Name }}</h3>
+      <h3 class="source-heading">Source: <span class="source-path">{{ .Name }}</span></h3>
       {{ template "package_table_template.gohtml" .Packages }}
     </div>
     {{ end }}

diff --git a/internal/output/html/report_template.gohtml b/internal/output/html/report_template.gohtml
@@ -7,11 +7,12 @@
   <link href='https://fonts.googleapis.com/css?family=Overpass' rel='stylesheet'>
   <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  {{ template "style.html" }}
+  <style>
+  {{ template "style.css" }}
+  </style>
 </head>
 
 <body>
-  {{ template "script.html" }}
   <div class="container">
     <header>
       <div id="header-left">
@@ -57,6 +58,9 @@
     </div>
 
   </div>
+  <script>
+  {{ template "script.js" }}
+  </script>
 </body>
 
 </html>