feat(output): display base image info on HTML output

internal/output/helpers_test.go

@@ -1027,6 +1027,21 @@ func testOutputWithVulnerabilities(t *testing.T, run outputTestRunner) {
 	}
 }
 
+// func testOutputWithVulnerabilitiesContainer(t *testing.T, run outputTestRunner) {
+// 	t.Helper()
+
+// 	tests := []outputTestCase{
+// 		{
+// 		}
+// 	for _, tt := range tests {
+// 		t.Run(tt.name, func(t *testing.T) {
+// 			t.Parallel()
+
+// 			run(t, tt.args)
+// 		})
+// 	}
+// }
+
 func testOutputWithLicenseViolations(t *testing.T, run outputTestRunner) {
 	t.Helper()
 

internal/output/html.go

@@ -45,6 +45,7 @@ func PrintHTMLResults(vulnResult *models.VulnerabilityResults, outputWriter io.W
 			return a + b
 		},
 		"getFilteredVulnReasons": getFilteredVulnReasons,
+		"getBaseImageNames":      getBaseImageNames,
 	}
 
 	tmpl := template.Must(template.New("").Funcs(funcMap).ParseFS(templates, TemplateDir))

internal/output/html/base_image_template.gohtml

@@ -0,0 +1,56 @@
+
+<div id="base-image-section">
+  <table id="base-image-table">
+    <tr>
+      <th></th>
+      <th class="base-image-title">OS version:</th>
+      <th>{{ .ImageInfo.OS }}</th>
+    </tr>
+    {{ $totalVuln := .VulnTypeSummary.All }}
+    {{ range .ImageInfo.AllBaseImages}}
+
+    <tr {{ if gt .Count.AnalysisCount.Regular 0}}
+      id="base-image-summary-{{ .Index }}"
+      class="base-image-summary"
+      onclick="showBaseImageLayer('{{ .Index }}')"
+      {{ end }}>
+      <td class="icon-td">
+      {{ if gt .Count.AnalysisCount.Regular 0}}
+        <div class="expand-icon">
+          <i class="material-icons">play_arrow</i>
+        </div>
+      {{ end }}
+      </td>
+      <td class="base-image-title">
+      {{ if eq .Index 0}}
+      Your image:
+      {{ else }}
+      Base image {{ .Index }}:
+      {{ end }}
+      </td>
+      <td>
+        {{ getBaseImageNames . }}<span class="base-image-title"> ({{ .Count.AnalysisCount.Regular }}/{{ $totalVuln }} vulnerabilities)</span>
+      </td>
+    </tr>
+
+    <tr>
+      <td></td>
+      <td colspan="100%">
+        <div id="base-image-details-{{ .Index }}" class="base-image-details">
+          {{ range .AllLayers }}
+          <div title="{{ .LayerDiffID}}" class="layer-entry" >
+            <p><span class="base-image-title">{{ .Index }}</span> {{ .LayerCommand }}</p>
+            {{ if gt .Count.AnalysisCount.Regular 0 }}
+            {{ template "severity_summary_template.gohtml".Count.SeverityCount }}
+            {{ end }}
+          </div>
+          {{ end }}
+        </div>
+      </td>
+    </tr>
+
+    {{ end }}
+
+  </table>
+
+</div>

internal/output/html/filter_template.gohtml

@@ -15,12 +15,15 @@
           <p>All layers ({{ .VulnCount.AnalysisCount.Regular }})</p>
           {{ template "severity_summary_template.gohtml" .VulnCount.SeverityCount }}
         </div>
-        {{ range .AllLayers }}
-        <div title="{{ .LayerID}}" class="filter-option layer-filter-option">
-          <p>{{ .Index }} {{ .LayerCommand }}</p>
+        {{ range .ImageInfo.AllLayers }}
+        {{ if gt .Count.AnalysisCount.Regular 0 }}
+        <div title="{{ .LayerDiffID}}" class="filter-option layer-filter-option">
+          <p>
+          {{ .Index }} {{ .LayerCommand }}</p>
           {{ template "severity_summary_template.gohtml".Count.SeverityCount }}
         </div>
         {{ end }}
+        {{ end }}
       </div>
     </div>
     {{ end }}

internal/output/html/package_table_template.gohtml

@@ -21,7 +21,7 @@
   {{ range $rowIndex, $element := . }}
   {{ $index := uniqueID }}
   <tr class="table-tr package-tr {{if $element.LayerDetail }}has-layer-info"
-    data-layer="{{ $element.LayerDetail.LayerID }}{{ end }}" id="table-tr-{{ $index }}" onclick="showPackageDetails('{{ $index }}')">
+    data-layer="{{ $element.LayerDetail.LayerDiffID }}{{ end }}" id="table-tr-{{ $index }}" onclick="showPackageDetails('{{ $index }}')">
     <td class="icon-td">
       <div class="expand-icon">
         <i class="material-icons">play_arrow</i>
@@ -55,19 +55,19 @@
   <tr>
     <td colspan="100%">
       <div id="table-tr-{{ $index }}-details" class="package-details">
-        {{ if and $element.LayerDetail (not (eq $element.LayerDetail.LayerID "")) }}
+        {{ if and $element.LayerDetail (not (eq $element.LayerDetail.LayerDiffID "")) }}
         <div class="layer-command-container">
           <span class="package-detail-title">Layer introduced in:</span>
-          {{ if ne $element.LayerDetail.LayerCommandDetailed "" }}
-          <div class="tooltip">{{ $element.LayerDetail.LayerCommand }}
-            <span class="tooltiptext">{{ $element.LayerDetail.LayerCommandDetailed }}</span>
+          {{ if ne $element.LayerDetail.LayerInfo.LayerCommandDetailed "" }}
+          <div class="tooltip">{{ $element.LayerDetail.LayerInfo.LayerCommand }}
+            <span class="tooltiptext">{{ $element.LayerDetail.LayerInfo.LayerCommandDetailed }}</span>
           </div>
           {{ else }}
-          <div>{{ $element.LayerDetail.LayerCommand }}</div>
+          <div>{{ $element.LayerDetail.LayerInfo.LayerCommand }}</div>
           {{ end }}
         </div>
-        <p><span class="package-detail-title">Layer ID:</span> {{ $element.LayerDetail.LayerID }}</p>
-        <p><span class="package-detail-title">In base image:</span> {{ $element.LayerDetail.InBaseImage }}</p>
+        <p><span class="package-detail-title">Layer ID:</span> {{ $element.LayerDetail.LayerInfo.LayerDiffID }}</p>
+        <p><span class="package-detail-title">In base image:</span> {{ if eq $element.LayerDetail.LayerInfo.BaseImageIndex 0}} False {{ else }} True ({{ getBaseImageNames $element.LayerDetail.BaseImageInfo }}){{ end }}</p>
         {{ end }}
         {{ template "vuln_table_template.gohtml" $element }}
       </div>

internal/output/html/report_template.gohtml

@@ -34,6 +34,10 @@
       <div id="summary-tab" class="tab">
         {{ template "filter_template.gohtml" .}}
 
+        {{ if .IsContainerScanning }}
+        {{ template "base_image_template.gohtml" .}}
+        {{end}}
+
         <div class="search-box">
           <div class="search-icon">
             <i class="material-icons">search</i>

internal/output/html/script.html

@@ -1,4 +1,22 @@
 <script>
+  function showBaseImageLayer(imageID) {
+    var detailElementID = "base-image-details-" + imageID
+    var detailsElement = document.getElementById(detailElementID);
+
+    const icon = document.querySelector(
+      `#base-image-summary-${imageID} .material-icons`
+    ); // Select the icon within the row
+    if (detailsElement.style.display !== "block") {
+      detailsElement.style.display = "block";
+      icon.style.transform = "rotate(90deg)"; // Rotate 90 degrees
+      icon.style.transition = "transform 0.2s ease"; // Add smooth transition
+    } else {
+      detailsElement.style.display = "none";
+      icon.style.transform = "rotate(0deg)"; // Rotate back to 0 degrees
+      icon.style.transition = "transform 0.2s ease"; // Add smooth transition
+    }
+  }
+
   function showPackageDetails(detailsId) {
     var detailsElement = document.getElementById(
       "table-tr-" + detailsId + "-details"

internal/output/html/style.html

@@ -45,14 +45,6 @@
     margin-top: 20px;
   }
 
-  details summary {
-    cursor: pointer;
-  }
-
-  details p {
-    margin-left: 10px;
-  }
-
   header {
     display: flex;
     align-items: center;
@@ -521,4 +513,54 @@
   .flex-box {
     display: flex;
   }
+
+  /* new added */
+  .base-icon .tooltiptext {
+    margin-left: 0px;
+    background-color: #292929;
+  }
+
+  div.title {
+    visibility: hidden;
+  }
+
+  #base-image-section {
+    margin-top: 30px;
+    border: 1px solid #fff;
+    border-radius: 8px;
+    padding: 10px 20px;
+    max-height: 400px;
+    overflow-y: visible;
+    overflow-x: hidden;
+  }
+
+  #base-image-table {
+    width: 100%;
+  }
+
+  #base-image-table th {
+    text-align: left;
+    height: 30px;
+  }
+
+  .layer-entry {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 10px;
+    border-bottom: 1px dotted #666666;
+  }
+
+  .base-image-summary {
+    cursor: pointer;
+  }
+
+  .base-image-details {
+    display: none;
+  }
+
+  .base-image-title {
+    width: 150px;
+    color: #9aa0a6;
+    height: 20px;
+  }
 </style>