Installation page, image assessment chart and filters, fixed some bugs

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

@@ -241,10 +241,10 @@
 import SortableTable from "@shell/components/SortableTable";
 import { BadgeState } from '@components/BadgeState';
 import Checkbox from '@components/Form/Checkbox';
-import ScoreBadge from '@sbombastic-image-vulnerability-scanner/components/common/ScoreBadge';
-import BarChart from '@sbombastic-image-vulnerability-scanner/components/common/BarChart';
-import { VULNERABILITY_DETAILS_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
-import { images } from "@sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image";
+import ScoreBadge from '@pkg/components/common/ScoreBadge';
+import BarChart from '@pkg/components/common/BarChart';
+import { VULNERABILITY_DETAILS_TABLE } from "@pkg/config/table-headers";
+import { images } from "@pkg/data/sbombastic.rancher.io.image";
 
 export default {
   name: 'ImageDetails',

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

@@ -4,7 +4,7 @@
             {{ t('imageScanner.images.imageRiskAssessment.title') }}
         </div>
         <div class="severity-bar-chart">
-            <BarChart :chartData="chartData" colorPrefix="cve" :description="t('imageScanner.images.imageRiskAssessment.subTitle')" />
+            <BarChart :chartData="chartData" colorPrefix="cve" :filterFn="filterFn" :description="t('imageScanner.images.imageRiskAssessment.subTitle')" />
         </div>
     </div>
 </template>
@@ -21,7 +21,11 @@
         chartData: {
             type: Object,
             required: true
-        }
+        },
+        filterFn: {
+            type: Function,
+            required: false
+        },
     },
     data() {}
   }

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

@@ -4,7 +4,7 @@
             {{ t('imageScanner.registries.StatusDistribution.title') }}
         </div>
         <div class="severity-bar-chart">
-            <BarChart :chartData="chartData" colorPrefix="status" :description="t('imageScanner.registries.StatusDistribution.subTitle')" />
+            <BarChart :filterFn="filterFn" :chartData="chartData" colorPrefix="status" :description="t('imageScanner.registries.StatusDistribution.subTitle')" />
         </div>
     </div>
 </template>
@@ -21,7 +21,11 @@
         chartData: {
             type: Object,
             required: true
-        }
+        },
+        filterFn: {
+            type: Function,
+            required: false
+        },
     },
     data() {}
   }

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/BarChart.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="severity-chart">
       <div v-for="(value, key) in chartData" :key="key" class="severity-item">
-        <div class="severity-item-name">{{ t(`imageScanner.enum.${ colorPrefix }.${ key.toLowerCase() }`) }}</div>
+        <div class="severity-item-name" @click="filterByCategory(key)">{{ t(`imageScanner.enum.${ colorPrefix }.${ key.toLowerCase() }`) }}</div>
         <PercentageBar class="severity-item-bar" :colorStops="{0: `--${ colorPrefix }-${ key.toLowerCase() }`}" :value="percentage(value)" :height="7"/>
         <div class="severity-item-value"> {{ value }}</div>
       </div>
@@ -34,11 +34,18 @@ export default {
     colorPrefix: {
       type: String,
       required: true
-    }
+    },
+    filterFn: {
+      type: Function,
+      required: false
+    },
   },
   methods: {
     percentage(value) {
       return this.total > 0 ? (value / this.total) * 100 : 0;
+    },
+    filterByCategory(category) {
+      this.filterFn && this.filterFn(category);
     }
   },
   computed: {
@@ -102,6 +109,8 @@ export default {
           width: 80px;
           align-items: right;
           gap: 12px;
+          text-decoration: underline;
+          cursor: pointer;
         }
 
         .severity-item-bar {

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

@@ -10,7 +10,7 @@
           <BlockPercentageBar
             class="percentage-bar"
             :percentage="(vulnerability.spec.impactedImages / vulnerability.spec.totalImages) * 100"
-            :eventHandler="eventHandler"
+            :eventHandler="resize"
           />
         </div>
       </div>
@@ -20,6 +20,7 @@
 <script>
   import BlockPercentageBar from './BlockPercentageBar.vue';
   import ScoreBadge from './ScoreBadge.vue';
+  import debounce from 'lodash/debounce';
 
   export default {
     name: 'severeVulnerabilitiesItem',
@@ -32,15 +33,14 @@
         type: Object,
         required: true
       },
-      eventHandler: {
-        type: Function,
-        default: null
-      }
     },
     data() {
       return { };
     },
     methods: {
+      resize(fn) {
+        window.addEventListener('resize', debounce(fn), 500);
+      },
     }
   }
 </script>

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

@@ -1,16 +1,32 @@
-import { IPlugin } from "@shell/core/types";
 import {
   PRODUCT_NAME,
   PAGE,
   RESOURCE
 } from "@pkg/types";
 
-export function init($plugin: IPlugin, store: any) {
-  const { product, virtualType, basicType } = $plugin.DSL(store, PRODUCT_NAME);
+export function init($plugin: any, store: any) {
+  const { product, virtualType, basicType, weightType } = $plugin.DSL(store, PRODUCT_NAME);
 
   product({
-      icon: "pod_security",
-      inStore: "cluster",
+    icon: "pod_security",
+    inStore: "cluster",
+    inExplorer: true,
+    removeable: false,
+    showNamespaceFilter: true
+  });
+
+  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 }
+    },
+    overview: true
   });
 
   virtualType({
@@ -39,19 +55,6 @@ export function init($plugin: IPlugin, 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,
@@ -65,19 +68,6 @@ export function init($plugin: IPlugin, 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",
@@ -91,11 +81,14 @@ export function init($plugin: IPlugin, store: any) {
     },
   });
 
+  weightType(PAGE.DASHBOARD, 98, true);
+  weightType(PAGE.IMAGE_OVERVIEW, 97, true);
+  weightType(PAGE.VULNERABILITY_OVERVIEW, 96, true);
+
   basicType([
       PAGE.DASHBOARD,
-      PAGE.IMAGE_OVERVIEW,
-      PAGE.VULNERABILITY_OVERVIEW,
-      //"demo"
+    PAGE.IMAGE_OVERVIEW,
+    PAGE.VULNERABILITY_OVERVIEW,
   ]);
   // Prepend spaces on group name, as Rancher 2.12 render group name algin with sidemenu
   basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT, RESOURCE.VEX_HUB], '    Advanced');