Fixed bugs Registries and Image overview page

Author: xingzhang-suse

pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image.js

@@ -1,5 +1,6 @@
 export const images = [
     {
+        id: "struts-attacher:1.0",
         metadata: {
             name: "struts-attacher:1.0",
         },
@@ -16,6 +17,7 @@ export const images = [
         },
     },
     {
+        id: "imagemagick4.8.5613",
         metadata: {
             name: "imagemagick4.8.5613",
         },
@@ -32,6 +34,7 @@ export const images = [
         },
     },
     {
+        id: "centos7.7.1908",
         metadata: {
             name: "centos7.7.1908",
         },
@@ -48,6 +51,7 @@ export const images = [
         },
     },
     {
+        id: "nginx1.19.10",
         metadata: {
             name: "nginx1.19.10",
         },
@@ -64,6 +68,7 @@ export const images = [
         },
     },
     {
+        id: "docker-compose:1.29.2",
         metadata: {
             name: "docker-compose:1.29.2",
         },
@@ -80,6 +85,7 @@ export const images = [
         },
     },
     {
+        id: "python3.9.7",
         metadata: {
             name: "python3.9.7",
         },
@@ -96,6 +102,7 @@ export const images = [
         },
     },
     {
+        id: "nodejs14.17.3",
         metadata: {
             name: "nodejs14.17.3",
         },
@@ -112,6 +119,7 @@ export const images = [
         },
     },
     {
+        id: "redis5.0.7",
         metadata: {
             name: "redis5.0.7",
         },
@@ -128,6 +136,7 @@ export const images = [
         },
     },
     {
+        id: "mongodb4.4.1",
         metadata: {
             name: "mongodb4.4.1",
         },
@@ -144,6 +153,7 @@ export const images = [
         },
     },
     {
+        id: "golang1.16.5",
         metadata: {
             name: "golang1.16.5",
         },
@@ -160,6 +170,7 @@ export const images = [
         },
     },
     {
+        id: "ruby2.7.3",
         metadata: {
             name: "ruby2.7.3",
         },
@@ -176,6 +187,7 @@ export const images = [
         },
     },
     {
+        id: "elasticsearch7.10.0",
         metadata: {
             name: "elasticsearch7.10.0",
         },
@@ -192,6 +204,7 @@ export const images = [
         },
     },
     {
+        id: "mysql8.0.25",
         metadata: {
             name: "mysql8.0.25",
         },
@@ -208,6 +221,7 @@ export const images = [
         },
     },
     {
+        id: "php8.0.9",
         metadata: {
             name: "php8.0.9",
         },
@@ -224,6 +238,7 @@ export const images = [
         },
     },
     {
+        id: "postgresql13.3",
         metadata: {
             name: "postgresql13.3",
         },
@@ -240,6 +255,7 @@ export const images = [
         },
     },
     {
+        id: "terraform1.0.0",
         metadata: {
             name: "terraform1.0.0",
         },
@@ -256,6 +272,7 @@ export const images = [
         },
     },
     {
+        id: "ansible2.10.5",
         metadata: {
             name: "ansible2.10.5",
         },
@@ -272,6 +289,7 @@ export const images = [
         },
     },
     {
+        id: "kafka2.8.0",
         metadata: {
             name: "kafka2.8.0",
         },

pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js

@@ -4,7 +4,6 @@ import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
 import { _CREATE } from '@shell/config/query-params';
 export default class Registry extends SteveModel {
   get _availableActions() {
-    console.log("Registry _availableActions");
     const out = super._availableActions.filter(action => !['showConfiguration','download','downloadYaml', 'showConfiguration'].includes(action.action));
 
     // In details page, we don't want to show the scan action
@@ -17,11 +16,10 @@ export default class Registry extends SteveModel {
           label:    this.t('imageScanner.registries.button.startScan'),
           icon:     'icon-play',
           enabled:  true,
-          bulkable: false,
+          bulkable: true,
           invoke:   async ({}, res = []) => {
             const target = (res && res.length ? res[0] : r);
             const model = target._model || target;
-            console.log("scanRegistry model", model);
             const scanjobObj = await this.$dispatch('create', {
                 type: RESOURCE.SCAN_JOB,
                 metadata: {

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue

@@ -28,25 +28,28 @@
           type="button"
           :disabled="disabled"
           @click="openAddEditRuleModal()">
+          <i class="icon icon-download"></i>
           {{ t('imageScanner.images.downloadReport') }}
         </button>
       </div>
     </div>
     <div class="summary-section">
-      <TopRiskyImagesChart :topRiskyImages="preprocessedDataset.topRiskyImages"/>
-      <ImageRiskAssessment :chartData="preprocessedDataset.chartData"/>
+      <TopRiskyImagesChart v-if="preprocessedDataset.topRiskyImages" :topRiskyImages="preprocessedDataset.topRiskyImages"/>
+      <ImageRiskAssessment v-if="preprocessedDataset.chartData" :chartData="preprocessedDataset.chartData"/>
     </div>
     <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 ? REPO_BASED_TABLE : IMAGE_LIST_TABLE"
+      :key-field="'id'"
       @selection="onSelectionChange"
     >
       <template #header-left>
@@ -80,7 +83,6 @@
               :search="false"
               :row-actions="false"
               :table-actions="false"
-              key-field="id"
             />
           </td>
         </tr>
@@ -100,6 +102,7 @@
   import { images } from "@sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image";
   import { IMAGE_LIST_TABLE, REPO_BASED_TABLE, REPO_BASED_IMAGE_LIST_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
   import { Checkbox } from '@components/Form/Checkbox';
+  import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types/sbombastic-image-vulnerability-scanner';
   export default {
     name: 'imageOverview',
     components: {

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue

@@ -41,6 +41,7 @@
       :has-advanced-filtering="false"
       :namespaced="false"
       :row-actions="true"
+      :table-actions="true"
       :force-update-live-and-delayed="0"
       :use-query-params-for-simple-filtering="true"
       :rows="rows"
@@ -115,19 +116,17 @@ import { template } from "lodash";
         this.statusSummary = {};
         
         let registriesCRD = this.$store.getters['cluster/all'](RESOURCE.REGISTRY);
-        console.group("registriesCRD", registriesCRD);
 
         //Fetch ScanJob CRD and sort by startTime DESC
         let scanJobCRD = this.$store.getters['cluster/all'](RESOURCE.SCAN_JOB).sort((a, b) => {
-          if (!a.status || !a.status.startTime) {
+          if (!a.status || !a.status.conditions|| !a.status.conditions[0].lastTransitionTime) {
             return 1;
           }
-          if (!b.status || !b.status.startTime) {
+          if (!b.status || !b.status.conditions|| !b.status.conditions[0].lastTransitionTime) {
             return -1;
           }
-          return new Date(b.status.startTime) - new Date(a.status.startTime);
+          return this.getLastTransitionTime(b.status.conditions) - this.getLastTransitionTime(a.status.conditions);
         });
-        console.group("scanJobCRD", scanJobCRD);
 
         const scanJobMap = this.getScanJobMap(scanJobCRD);
         const registryDataset  = this.getRegistryDataset(registriesCRD, scanJobMap);
@@ -163,7 +162,9 @@ import { template } from "lodash";
       getScanJobMap(scanJobCRD) {
         let scanJobMap = {};
         scanJobCRD.forEach((rec) => {
-          if (!rec.status) {
+          // Calculate statusResult
+          
+          if (!rec.status) {// A extreme corner case, the scanner created a job without status object
             rec.status = {
               statusResult: {
                 type: "Pending",
@@ -243,8 +244,6 @@ import { template } from "lodash";
           if (status && statusSummary.hasOwnProperty(status)) {
             statusSummary[status]++;
           }
-          // rec = this.addCustomActions(rec);
-          console.log("rec", rec)
           return rec;
         }); 
         // Sort and limit the registryStatusList to 5 most recent updates
@@ -323,7 +322,14 @@ import { template } from "lodash";
         const availableActions = [scanAction, divider, ...actions];
         const _model = rec;
         return { ...rec, _model, availableActions};
-      }
+      },
+      getLastTransitionTime(conditions) {
+        let lastTransitionTime = 0;
+        conditions.forEach(condition => {
+          lastTransitionTime = Math.max(lastTransitionTime, new Date(condition.lastTransitionTime).getTime())
+        })
+        return lastTransitionTime;
+      },
     },
     computed: {
       schema() {