Modifies routing path for images and vulnerabilities. Added 3rd implementation of installation page

Author: xingzhang-suse

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

@@ -240,7 +240,7 @@
 <script>
 import SortableTable from "@shell/components/SortableTable";
 import { BadgeState } from '@components/BadgeState';
-import Checkbox from '@components/Form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import ScoreBadge from '@pkg/components/common/ScoreBadge';
 import BarChart from '@pkg/components/common/BarChart';
 import { VULNERABILITY_DETAILS_TABLE } from "@pkg/config/table-headers";

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Installation.vue renamed to pkg/sbombastic-image-vulnerability-scanner/components/InstallView2.vue

@@ -134,11 +134,11 @@ export default {
     <div v-if="!install" class="title p-10">
       <div class="logo mt-20 mb-10">
         <img
-          src="../../../../assets/img/neuvector-logo.svg"
+          src="../assets/img/neuvector-logo.svg"
           height="64"
         />
       </div>
-      <h1 class="mb-20" data-testid="nv-install-title">
+      <h1 class="mb-20" data-testid="sb-install-title">
         {{ t("imageScanner.dashboard.appInstall.title") }}
       </h1>
       <div class="description">
@@ -157,7 +157,7 @@ export default {
           </Banner>
         </template>
         <template v-else>
-          <button class="btn role-primary mt-20" data-testid="nv-app-install-button" :disabled="!controllerChart" @click.prevent="chartRoute">
+          <button class="btn role-primary mt-20" data-testid="sb-app-install-button" :disabled="!controllerChart" @click.prevent="chartRoute">
             {{ t("imageScanner.dashboard.appInstall.button") }}
           </button>
         </template>

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

@@ -0,0 +1,64 @@
+<script>
+import InstallHelmCharts from '@shell/components/InstallHelmCharts';
+
+export default {
+  components: {
+    InstallHelmCharts
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else class="container">
+    <div v-if="!install" class="title p-10">
+      <div class="logo mt-20 mb-10">
+        <img
+          src="../assets/img/neuvector-logo.svg"
+          height="64"
+        />
+      </div>
+      <h1 class="mb-20" data-testid="sb-install-title">
+        {{ t("imageScanner.dashboard.appInstall.title") }}
+      </h1>
+      <div class="description">
+        {{ t("imageScanner.dashboard.appInstall.description") }}
+      </div>
+      <InstallHelmCharts
+        style="margin-top: 16px;"
+        chart-name="sbombastic"
+        repo-url="https://github.com/rancher-sandbox/sbombastic.git"
+        repo-name="sbombastic"
+        target-namespace="sbombastic"
+        chart-display-name="sbombastic"
+        repo-display-name="sbombastic"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  & .title {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin: 100px 0;
+  }
+
+  & .description {
+    line-height: 20px;
+  }
+
+  & .chart-route {
+    position: relative;
+  }
+
+  & .airgap-align {
+    justify-content: start;
+  }
+}
+</style>

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

@@ -4,7 +4,7 @@
         Most affected images at risk
     </div>
     <div class="image-record" v-for="image in topRiskyImages">
-        <RouterLink class="image-name" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.IMAGE_DETAIL }/${ image.imageName }`">
+        <RouterLink class="image-name" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.IMAGES }/${ image.imageName }`">
           {{ image.imageName }}
         </RouterLink>
         <AmountBarBySeverity class="image-cve" :cveAmount="image.cveCnt"/>

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

@@ -44,10 +44,10 @@ export function init($plugin: any, store: any) {
 
   virtualType({
     labelKey: 'imageScanner.images.title',
-    name: PAGE.IMAGE_OVERVIEW,
+    name: PAGE.IMAGES,
     namespaced: false,
     route:    {
-        name:   `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGE_OVERVIEW}`,
+        name:   `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGES}`,
         params: {
             product: PRODUCT_NAME
         },
@@ -57,10 +57,10 @@ export function init($plugin: any, store: any) {
 
   virtualType({
     labelKey: "imageScanner.vulnerabilities.title",
-    name: PAGE.VULNERABILITY_OVERVIEW,
+    name: PAGE.VULNERABILITIES,
     namespaced: false,
     route: {
-      name: `c-cluster-${PRODUCT_NAME}-${PAGE.VULNERABILITY_OVERVIEW}`,
+      name: `c-cluster-${PRODUCT_NAME}-${PAGE.VULNERABILITIES}`,
       params: {
         product: PRODUCT_NAME,
       },
@@ -95,14 +95,14 @@ export function init($plugin: any, store: any) {
   });
 
   weightType(PAGE.DASHBOARD, 98, true);
-  weightType(PAGE.IMAGE_OVERVIEW, 97, true);
-  weightType(PAGE.VULNERABILITY_OVERVIEW, 96, true);
+  weightType(PAGE.IMAGES, 97, true);
+  weightType(PAGE.VULNERABILITIES, 96, true);
   weightType(PAGE.VEX_MANAGEMENT, 95, true);
 
   basicType([
-      PAGE.DASHBOARD,
-    PAGE.IMAGE_OVERVIEW,
-    PAGE.VULNERABILITY_OVERVIEW,
+    PAGE.DASHBOARD,
+    PAGE.IMAGES,
+    PAGE.VULNERABILITIES,
   ]);
   // Prepend spaces on group name, as Rancher 2.12 render group name algin with sidemenu
   basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT], '    Advanced');

pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue

@@ -1,5 +1,5 @@
 <template>
-  <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.IMAGE_DETAIL }/${ row.metadata.name }`">
+  <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.IMAGES }/${ row.metadata.name }`">
     {{ row.metadata.name }}
   </RouterLink>
 </template>

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

@@ -1,14 +1,13 @@
 <script>
 import Dashboard from '@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Dashboard';
-import Installation from '@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Installation';
-import InstallView from '@pkg/components/InstallView';
 import { SERVICE, SCHEMA } from '@shell/config/types';
 import { RESOURCE } from '@pkg/types';
+import InstallView3 from '@pkg/components/InstallView3';
 
 export default {
   name: 'Entry',
 
-  components: { Dashboard, Installation, InstallView },
+  components: { Dashboard, InstallView3 },
 
   async fetch() {
     console.log("Entry fetch")
@@ -25,6 +24,7 @@ export default {
       allServices: null,
       allSchemas: null,
       index: -1,
+      store: this.$store,
     }
   },
 
@@ -38,8 +38,8 @@ export default {
 
 <template>
   <div v-if="allSchemas">
-    <!-- <InstallView /> -->
-    <InstallView v-if="!hasSchema" />
+    <!-- <InstallView3 /> -->
+    <InstallView3 v-if="!hasSchema" />
     <Dashboard v-else/>
   </div>
 </template>

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

@@ -20,18 +20,18 @@ const routes = [
     component: Entry,
   },
   {
-    name: `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGE_OVERVIEW}`,
-    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.IMAGE_OVERVIEW}`,
+    name: `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGES}`,
+    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.IMAGES}`,
     component: ImageOverview,
   },
   {
-    name: `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGE_DETAIL}-id`,
-    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.IMAGE_DETAIL}/:id`,
+    name: `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGES}-id`,
+    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.IMAGES}/:id`,
     component: ImageDetails,
   },
   {
-    name: `c-cluster-${PRODUCT_NAME}-${PAGE.VULNERABILITY_OVERVIEW}`,
-    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.VULNERABILITY_OVERVIEW}`,
+    name: `c-cluster-${PRODUCT_NAME}-${PAGE.VULNERABILITIES}`,
+    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.VULNERABILITIES}`,
     component: Vulnerabilities,
   },
   {

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

@@ -18,9 +18,8 @@ export const RESOURCE = {
 export const PAGE = {
   DASHBOARD: "dashboard",
   REGISTRIES: "registries",
-  IMAGE_OVERVIEW: "image_overview",
-  IMAGE_DETAIL: "image_detail",
-  VULNERABILITY_OVERVIEW: "vulnerability_overview",
+  IMAGES: "images",
+  VULNERABILITIES: "vulnerabilities",
   CVE_DETAIL: "cve_detail",
   VEX_MANAGEMENT: "vex_management",
 };

pkg/sbombastic-image-vulnerability-scanner/utils/chart.ts

@@ -84,3 +84,28 @@ export function getLatestVersion(store: any, versions: any[]) {
 
   return semver.rsort(versionMap)[0];
 }
+
+export function getLatestStableVersion(versions: any[]): string | undefined {
+  const allVersions = versions.map(v => v.version);
+  const stableVersions = versions.filter(v => !v.version.includes('b'));
+
+  if ( isEmpty(stableVersions) && !isEmpty(allVersions) ) {
+    return semver.rsort(allVersions)[0];
+  }
+
+  return stableVersions?.sort((a, b) => {
+    const versionA = a.version.split('.').map(Number);
+    const versionB = b.version.split('.').map(Number);
+
+    for ( let i = 0; i < Math.max(versionA.length, versionB.length); i++ ) {
+      if ( versionA[i] === undefined || versionA[i] < versionB[i] ) {
+          return 1;
+      }
+      if ( versionB[i] === undefined || versionA[i] > versionB[i] ) {
+          return -1;
+      }
+    }
+
+    return 0;
+  })[0];
+}