Feat: Only show the vulnerability meta data on Vulnerability details page (github issue #155)

Author: lsongsuse

pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue

@@ -31,7 +31,7 @@ export default {
       PRODUCT_NAME,
       RESOURCE,
       PAGE,
-      cveDetail: cveDetail,
+      cveDetail: null,
       rows: images,
       images_table: VULNERABILITIES_DETAIL_IMAGE_LIST_TABLE,
       group_by_repository_table: VULNERABILITIES_DETAIL_GROUP_BY_REPOSITORY_TABLE,
@@ -49,12 +49,31 @@ export default {
     }
   },
 
-  async fetch() {
-    this.preprocessedDataset = this.preprocessData(this.rows);
-    console.log("this.preprocessedDataset", this.preprocessedDataset);
-  },
 
   methods: {
+    async loadData() {
+      this.preprocessedDataset = this.preprocessData(this.rows);
+      console.log("this.preprocessedDataset", this.preprocessedDataset);
+
+      const vulReport = await this.$store.dispatch('cluster/findAll', {type: "storage.sbombastic.rancher.io.vulnerabilityreport"})
+
+      const cveId = this.$route.params.id;
+
+      this.affectedImages = [];
+
+      const {cveMetaData, affectedImages, totalScanned } = this.getCveMetaData(vulReport, cveId);
+
+      this.affectedImages = affectedImages;
+      this.totalScanned = totalScanned;
+
+      this.cveDetail = {
+        ...cveMetaData,
+        id: cveId,
+        affectedImages: affectedImages.length,
+        totalImages: totalScanned,
+      };
+    },
+
     updateData(event) {
       console.log("isGrouped", this.isGrouped);
     },
@@ -89,7 +108,6 @@ export default {
     },
     showVendorPopup(vendor) {
       this.selectedVendor = vendor;
-      this.showPopup = true;
     },
 
     getSeverityColor(severity) {
@@ -104,7 +122,125 @@ export default {
       return colors[severity] || colors.none;
     },
 
+    getCveMetaData(vulReports, cveId) {
+      let affectedImages = [];
+      let cveMetaData = null;
+
+      vulReports.forEach(report => {
+        const { imageMetadata, report: { results = [] } } = report;
+
+        results.forEach( result => {
+          (result.vulnerabilities || []).forEach( vuln => {
+            if (vuln.cve === cveId) {
+              if(!cveMetaData) {
+                cveMetaData = {
+                  score: this.getNvdV3Score(vuln.cvss),
+                  sources: this.convertCvssToSources(vuln.cvss),
+                  severity: vuln.severity,
+                  cvssScores: this.convertCvss(vuln.cvss),
+                  description: vuln.title,
+                  title: vuln.title,
+                  advisoryVendors: this.groupReferencesByDomain(vuln.references),
+                }
+              }
+              affectedImages.push({
+                image: `${imageMetadata.registryURI}/${imageMetadata.repository}:${imageMetadata.tag}`,
+                repository: imageMetadata.repository,
+                registry: imageMetadata.registry,
+                packageName: vuln.packageName,
+                packageVersion: vuln.installedVersion,
+                fixedVersions: vuln.fixedVersions,
+                severity: vuln.severity,
+                path: result.target,
+                cve: vuln.cve
+              });
+            }
+          })
+        })
+      });
+
+
+      const totalScanned = vulReports.length;
+
+      return {
+        cve: cveId,
+        cveMetaData,
+        affectedImages,
+        totalScanned
+      };
+    },
+
+    groupReferencesByDomain(urls){
+      const vendorMap = new Map();
+      urls.forEach(url => {
+        const { hostname } = new URL(url);
+
+        //extract domain base (drop subdomains)
+        let name = hostname.replace(/^www\./, '');
+        const parts = name.split('.');
+        if (parts.length > 2) {
+          name = parts[parts.length - 2];
+        }else{
+          name = parts[0];
+        }
+
+        //Capitalize first letter
+        name = name.charAt(0).toUpperCase() + name.slice(1);
+        if( !vendorMap.has(name) ){
+          vendorMap.set( name, []);
+        }
+        vendorMap.get(name).push(url);
+      });
+      return Array.from(vendorMap.entries()).map(
+          ([name, references]) => ({
+          name,
+          references,
+          })
+      );
+    },
+
+    convertCvss(cvssObj) {
+      const cvssScores = [];
+      Object.entries(cvssObj).forEach(([source, values]) => {
+        Object.entries(values).forEach(([key, val]) => {
+          if (key.toLowerCase().includes("score")) {
+            cvssScores.push({
+              source: `${source.charAt(0).toUpperCase() + source.slice(1)} ${key}`,
+              score: val
+            });
+          }
+        })
+      });
+
+      return cvssScores;
+    },
+
+    getNvdV3Score(cvss) {
+      if (cvss.nvd && cvss.nvd.v3score) {
+        return `${cvss.nvd.v3score} (v3)`;
+      }
+      return "N/A";
+    },
+
+    convertCvssToSources(cvss){
+      return Object.keys(cvss).map(key => {
+        return {
+          name: key.toUpperCase(),
+          link: ""
+        };
+      });
+    }
+
   },
+
+  watch: {
+    '$route.params.id': {
+      immediate: true,
+      handler() {
+        this.loadData();
+      }
+    }
+  }
 }
 </script>
 <template>
@@ -117,8 +253,8 @@ export default {
           {{ $route.params.id }}
           </span>
           <BadgeState
-              :color="getSeverityColor(cveDetail.severity)"
-              :label="t(`imageScanner.enum.cve.${cveDetail.severity}`)"
+              :color="getSeverityColor(cveDetail.severity.toLowerCase())"
+              :label="t(`imageScanner.enum.cve.${cveDetail.severity.toLowerCase()}`)"
               class="severity-badge"
           />
         </div>
@@ -205,8 +341,8 @@ export default {
                   :key="rIndex"
                   class="ref-item"
               >
-                <a :href="ref.url" target="_blank" class="ref-url">{{ ref.url }}</a>
-                <div class="ref-title">{{ ref.title }}</div>
+                <a :href="ref" target="_blank" class="ref-url">{{ ref }}</a>
+<!--                <div class="ref-title">{{ ref.title }}</div>-->
               </div>
             </div>
           </div>
@@ -224,59 +360,59 @@ export default {
         </div>
       </div>
     </div>
-    <div class="table">
-      <SortableTable
-          :has-advanced-filtering="false"
-          :namespaced="false"
-          :row-actions="false"
-          :table-actions="true"
-          :force-update-live-and-delayed="0"
-          :use-query-params-for-simple-filtering="true"
-          :sub-expandable="isGrouped"
-          :sub-rows="isGrouped"
-          :sub-expand-column="isGrouped"
-          :rows="isGrouped ? preprocessedDataset.rowsByRepo : rows"
-          :headers="isGrouped ? group_by_repository_table : images_table"
-          :key-field="'id'"
-          @selection="onSelectionChange"
-      >
-        <template #header-left>
-          <div class="table-top-left">
-            <DownloadCustomReport
-                class="table-btn"
-                :selectedRows="selectedRows"
-                :buttonName="t('imageScanner.images.buttons.downloadCustomReport')"
-            />
-          </div>
-        </template>
-        <template #header-right>
-          <div class="table-top-right">
-            <Checkbox
-                style="margin-top: 8px; width: 180px;"
-                label-key="imageScanner.images.listTable.checkbox.groupByRepo"
-                v-model:value="isGrouped"
-                @update:value="updateData($event)"
-            />
-          </div>
-        </template>
-        <template v-if="isGrouped" #sub-row="{ row, fullColspan }">
-          <tr
-              class="sub-row"
-          >
-            <td :colspan="fullColspan">
-              <SortableTable
-                  class="sub-table"
-                  :rows="row.images"
-                  :headers="sub_images_table"
-                  :search="false"
-                  :row-actions="false"
-                  :table-actions="false"
-              />
-            </td>
-          </tr>
-        </template>
-      </SortableTable>
-    </div>
+<!--    <div class="table">-->
+<!--      <SortableTable-->
+<!--          :has-advanced-filtering="false"-->
+<!--          :namespaced="false"-->
+<!--          :row-actions="false"-->
+<!--          :table-actions="true"-->
+<!--          :force-update-live-and-delayed="0"-->
+<!--          :use-query-params-for-simple-filtering="true"-->
+<!--          :sub-expandable="isGrouped"-->
+<!--          :sub-rows="isGrouped"-->
+<!--          :sub-expand-column="isGrouped"-->
+<!--          :rows="isGrouped ? preprocessedDataset.rowsByRepo : rows"-->
+<!--          :headers="isGrouped ? group_by_repository_table : images_table"-->
+<!--          :key-field="'id'"-->
+<!--          @selection="onSelectionChange"-->
+<!--      >-->
+<!--        <template #header-left>-->
+<!--          <div class="table-top-left">-->
+<!--            <DownloadCustomReport-->
+<!--                class="table-btn"-->
+<!--                :selectedRows="selectedRows"-->
+<!--                :buttonName="t('imageScanner.images.buttons.downloadCustomReport')"-->
+<!--            />-->
+<!--          </div>-->
+<!--        </template>-->
+<!--        <template #header-right>-->
+<!--          <div class="table-top-right">-->
+<!--            <Checkbox-->
+<!--                style="margin-top: 8px; width: 180px;"-->
+<!--                label-key="imageScanner.images.listTable.checkbox.groupByRepo"-->
+<!--                v-model:value="isGrouped"-->
+<!--                @update:value="updateData($event)"-->
+<!--            />-->
+<!--          </div>-->
+<!--        </template>-->
+<!--        <template v-if="isGrouped" #sub-row="{ row, fullColspan }">-->
+<!--          <tr-->
+<!--              class="sub-row"-->
+<!--          >-->
+<!--            <td :colspan="fullColspan">-->
+<!--              <SortableTable-->
+<!--                  class="sub-table"-->
+<!--                  :rows="row.images"-->
+<!--                  :headers="sub_images_table"-->
+<!--                  :search="false"-->
+<!--                  :row-actions="false"-->
+<!--                  :table-actions="false"-->
+<!--              />-->
+<!--            </td>-->
+<!--          </tr>-->
+<!--        </template>-->
+<!--      </SortableTable>-->
+<!--    </div>-->
   </div>
 </template>
 
@@ -335,10 +471,10 @@ export default {
 .description {
   display: flex;
   max-width: 900px;
-  height: 21px;
+  max-height: calc(21px * 3);
   flex-direction: column;
   justify-content: center;
-  overflow: hidden;
+  overflow-y: auto;
   color: #717179;
   font-family: Lato;
   font-size: 14px;

pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue

@@ -424,7 +424,7 @@ export default {
     getMockVulnerabilityDetails() {
       return [
         {
-          cveId: 'CVE-2017-5337',
+          cveId: 'CVE-2018-25032',
           score: '9.9 (v3)',
           package: 'tomcat-embed-jasper-9.1',
           fixAvailable: true,

pkg/sbombastic-image-vulnerability-scanner/constants/scan-interval-options.ts

@@ -17,13 +17,11 @@ export const SCAN_INTERVAL_OPTIONS = [
 ];
 
 export const REGISTRY_TYPE = {
-  DOCKERHUB: 'dockerhub'
-}
-
-export const REGISTRY_DEFAULT_URI = {
-  DOCKERHUB: "index.docker.io"
+  DOCKERHUB: 'dockerhub',
+  NO_CATALOG: 'noCatalog'
 };
 
 export const REGISTRY_TYPE_OPTIONS: {label: string; value: string }[] = [
-  { label: 'Docker Hub', value: REGISTRY_TYPE.DOCKERHUB }
+  { label: 'Docker Hub', value: REGISTRY_TYPE.DOCKERHUB },
+  { label: 'No Catalog', value: REGISTRY_TYPE.NO_CATALOG }
 ];