Integrated installation route with dashbaord. Fixed bugs on some components

Author: xingzhang-suse

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

@@ -4,14 +4,19 @@
         Most affected images at risk
     </div>
     <div class="image-record" v-for="image in topRiskyImages">
-        <div class="image-name">{{ image.imageName }}</div>
+        <RouterLink class="image-name" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.IMAGE_DETAIL }/${ image.imageName }`">
+          {{ image.imageName }}
+        </RouterLink>
         <AmountBarBySeverity class="image-cve" :cveAmount="image.cveCnt"/>
     </div>
   </div>
 </template>
 
 <script>
-  import AmountBarBySeverity from "@pkg/components/common/AmountBarBySeverity";
+  import AmountBarBySeverity from "@pkg/components/common/AmountBarBySeverity";import {
+      PRODUCT_NAME,
+      PAGE,
+  } from "@pkg/types";
   export default {
     name: 'amountBarBySeverity',
     components: {
@@ -23,6 +28,12 @@
         default:  () => []
       }
     },
+    data() {
+      return {
+        PRODUCT_NAME,
+        PAGE,
+      };
+    },
   }
 </script>
 

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

@@ -7,7 +7,6 @@
       <SevereVulnerabilitiesItem 
         v-for="vulnerability in topSevereVulnerabilities"
         :vulnerability="vulnerability"
-        :eventHandler="eventHandler"
       />
     </div>
   </div>
@@ -26,10 +25,6 @@
         type: Array,
         required: true
       },
-      eventHandler: {
-        type: Function,
-        default: null
-      }
     },
     data() {}
   }

pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue

@@ -20,6 +20,7 @@
 <script>
   import BlockPercentageBar from './BlockPercentageBar.vue';
   import ScoreBadge from './ScoreBadge.vue';
+  import debounce from 'lodash/debounce';
 
   export default {
     name: 'severeVulnerabilitiesItem',
@@ -38,7 +39,7 @@
     },
     methods: {
       resize(fn) {
-        window.addEventListener('resize', this.debounce(fn), 500);
+        window.addEventListener('resize', debounce(fn), 500);
       },
     }
   }

pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts

@@ -1,4 +1,3 @@
-import { IPlugin } from "@shell/core/types";
 import {
   PRODUCT_NAME,
   PAGE,
@@ -56,19 +55,6 @@ export function init($plugin: any, store: any) {
     }
   });
 
-  virtualType({
-    labelKey: "imageScanner.dashboard.title",
-    name: PAGE.DASHBOARD,
-    namespaced: false,
-    route: {
-      name: `c-cluster-${PRODUCT_NAME}-${PAGE.DASHBOARD}`,
-      params: {
-        product: PRODUCT_NAME,
-      },
-      meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME },
-    },
-  });
-
   virtualType({
     labelKey: "imageScanner.vulnerabilities.title",
     name: PAGE.VULNERABILITY_OVERVIEW,
@@ -82,19 +68,6 @@ export function init($plugin: any, store: any) {
     },
   });
 
-  virtualType({
-    labelKey: "imageScanner.vexManagement.title",
-    name: PAGE.VEX_MANAGEMENT,
-    namespaced: false,
-    route: {
-      name: `c-cluster-${PRODUCT_NAME}-${PAGE.VEX_MANAGEMENT}`,
-      params: {
-        product: PRODUCT_NAME,
-      },
-      meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME },
-    },
-  });
-
   virtualType({
     label: "Components Demo",
     name: "demo",

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

@@ -85,7 +85,6 @@
         <div class="panel-content">
           <TopSevereVulnerabilitiesChart
             :topSevereVulnerabilities="displayedVulnerabilities"
-            :eventHandler="resize"
           />
           <div v-if="shouldShowVulnerabilitiesViewAll" class="view-all-inline">
             <button class="btn-link view-all-left" @click="toggleVulnerabilitiesView()">
@@ -231,16 +230,6 @@ export default {
     }
   },
   methods: {
-    resize(fn) {
-      window.addEventListener('resize', this.debounce(fn), 500);
-    },
-    debounce(func, delay = 300) {
-      let timeout
-      return function (...args) {
-        clearTimeout(timeout)
-        timeout = setTimeout(() => func.apply(this, args), delay)
-      }
-    },
     toggleVulnerabilitiesView() {
       this.showAllVulnerabilities = !this.showAllVulnerabilities;
     },

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

@@ -168,7 +168,7 @@ import { filter } from "lodash";
 
     methods: {
       applyFilters() {
-        let filtered = this.preprocessedDataset.preprocessedImages;
+        let filtered = _.cloneDeep(this.preprocessedImagesBak);
         if (this.selectedImageFilter.value === "excludeBaseImages" || this.selectedImageFilter === "excludeBaseImages") {
           filtered = filtered.filter(image => !image.spec.isBaseImage);
         } else if (this.selectedImageFilter.value === "includeBaseImages" || this.selectedImageFilter === "includeBaseImages") {

pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts

@@ -1,6 +1,4 @@
 import RegistryDetails from "@pkg/components/RegistryDetails.vue";
-import ComponentDemo from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue";
-import Dashboard from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Dashboard.vue";
 import ImageOverview from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue";
 import ImageDetails from "@pkg/components/ImageDetails.vue";
 import RegistriesConfiguration from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue";
@@ -19,11 +17,6 @@ const routes = [
     path:      `/c/:cluster/${ PRODUCT_NAME }/${PAGE.DASHBOARD}`,
     component: Entry,
   },
-  {
-    name: `c-cluster-${PRODUCT_NAME}-${PAGE.DASHBOARD}`,
-    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.DASHBOARD}`,
-    component: Dashboard,
-  },
   {
     name: `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGE_OVERVIEW}`,
     path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.IMAGE_OVERVIEW}`,
@@ -44,11 +37,6 @@ const routes = [
     path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.REGISTRIES}`,
     component: RegistriesConfiguration,
   },
-  {
-    name: `c-cluster-${PRODUCT_NAME}-${PAGE.VEX_MANAGEMENT}`,
-    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.VEX_MANAGEMENT}`,
-    component: VexManagement,
-  },
   {
     name: `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}-id`,
     path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.REGISTRIES}/:ns/:id`,