feat: add Dashboard with mockdata

Author: NickChungSUSE

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

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

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

@@ -10,6 +10,7 @@
           <BlockPercentageBar
             class="percentage-bar"
             :percentage="(vulnerability.spec.impactedImages / vulnerability.spec.totalImages) * 100"
+            :eventHandler="eventHandler"
           />
         </div>
       </div>
@@ -31,6 +32,10 @@
         type: Object,
         required: true
       },
+      eventHandler: {
+        type: Function,
+        default: null
+      }
     },
     data() {
       return { };

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

@@ -39,6 +39,19 @@ 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,
@@ -52,6 +65,19 @@ 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",
@@ -66,11 +92,12 @@ export function init($plugin: IPlugin, store: any) {
   });
 
   basicType([
+      PAGE.DASHBOARD,
       PAGE.IMAGE_OVERVIEW,
       PAGE.VULNERABILITY_OVERVIEW,
       //"demo"
   ]);
   // Prepend spaces on group name, as Rancher 2.12 render group name algin with sidemenu
-  basicType([PAGE.REGISTRIES, RESOURCE.VEX_HUB], '    Advanced');
+  basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT, RESOURCE.VEX_HUB], '    Advanced');
 
 }

pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml

@@ -1,6 +1,35 @@
 product:
   imageScanner: Image Vulnerability Scanner
 imageScanner:
+  dashboard:
+    title: Dashboard
+    description: Main highlights and overview of image vulnerability scanning status
+    lastUpdated: Last updated
+    button:
+      refresh: Refresh
+    registryDropdown:
+      placeholder: All registries
+    vulnerabilityStats:
+      title: Affecting vulnerabilities distribution
+      critical: Critical
+      high: High
+      medium: Medium
+      low: Low
+      total: Total vulnerabilities
+    scanningStatus:
+      title: Scanning stats
+      lastScan: Last scan
+      totalImages: Total images
+      failedScans: Failed scans
+      errors: Errors
+    topVulnerabilities:
+      title: Most severe, affecting vulnerabilities
+      viewAll: View all
+      affectedImages: affected images
+    mostAffectedImages:
+      title: Most affected images at risk
+      viewAll: View all
+      totalVulns: total vulnerabilities
   registries:
     title: Registries configuration
     button: