Fixed some style and routing issues

Author: xingzhang-suse

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

@@ -112,7 +112,7 @@ export default {
     <div class="about">
       <div class="header-section">
         <div class="title">
-          <RouterLink :to="`/c/${this.$route.params.cluster}/${this.PRODUCT_NAME}/${this.PAGE.VULNERABILITY_OVERVIEW}`">{{ t('imageScanner.vulnerabilities.title') }}:</RouterLink>
+          <RouterLink :to="`/c/${this.$route.params.cluster}/${this.PRODUCT_NAME}/${this.PAGE.VULNERABILITIES}`">{{ t('imageScanner.vulnerabilities.title') }}:</RouterLink>
         {{ $route.params.id }}
           <BadgeState
               :color="getSeverityColor(cveDetail.severity)"

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

@@ -3,7 +3,10 @@
     <!-- Header Section -->
     <div class="header-section">
       <div class="title">
-        Image: {{ imageName }}
+        <span class="resource-header-name">
+          <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.IMAGES}`">{{ t('imageScanner.images.title') }}:</RouterLink>
+          {{ $route.params.id }}
+        </span>
         <BadgeState 
           :color="getSeverityColor(overallSeverity)" 
           :label="t(`imageScanner.enum.cve.${overallSeverity}`)"
@@ -245,6 +248,7 @@ 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";
+import { PRODUCT_NAME, RESOURCE, PAGE } from '@pkg/types';
 
 export default {
   name: 'ImageDetails',
@@ -274,6 +278,9 @@ export default {
         groupByLayer: false,
       },
       VULNERABILITY_DETAILS_TABLE,
+      PRODUCT_NAME,
+      RESOURCE,
+      PAGE,
     }
   },
 
@@ -554,6 +561,13 @@ export default {
   font-size: 24px;
   font-weight: 600;
   color: #141419;
+  .resource-header-name {
+    font-family: Lato;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 32px; /* 133.333% */
+  }
 }
 
 .severity-badge {

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

@@ -43,7 +43,7 @@
     padding: 16px;
     flex-direction: column;
     align-items: flex-start;
-    gap: 12px;
+    gap: 8px;
     flex: 1 0 0;
     border-right: 1px solid #DCDEE7;
     .title {

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

@@ -73,7 +73,7 @@
       font-size: 13px;
       font-style: normal;
       font-weight: 500;
-      line-height: 20px; /* 153.846% */
+      line-height: 24px; /* 153.846% */
       &.na {
         color: #717179;
       }

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

@@ -1,7 +1,7 @@
 <template>
     <div class="vulnerability-record">
       <div class="cve">
-        {{ vulnerability.metadata.name }}
+        <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.VULNERABILITIES}/${vulnerability.metadata.name}`">{{ vulnerability.metadata.name }}</RouterLink>
       </div>
       <ScoreBadge :score="vulnerability.spec.scoreV3" scoreType="v3" />
       <div class="impacted-container">
@@ -21,6 +21,10 @@
   import BlockPercentageBar from './BlockPercentageBar.vue';
   import ScoreBadge from './ScoreBadge.vue';
   import debounce from 'lodash/debounce';
+  import {
+    PRODUCT_NAME,
+    PAGE,
+} from "@pkg/types";
 
   export default {
     name: 'severeVulnerabilitiesItem',
@@ -35,7 +39,10 @@
       },
     },
     data() {
-      return { };
+      return { 
+        PRODUCT_NAME,
+        PAGE,
+      };
     },
     methods: {
       resize(fn) {

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

@@ -10,9 +10,6 @@ export function init($plugin: any, store: any) {
   product({
     icon: "pod_security",
     inStore: "cluster",
-    inExplorer: true,
-    removeable: false,
-    showNamespaceFilter: true
   });
 
   virtualType({
@@ -23,8 +20,8 @@ export function init($plugin: any, store: any) {
       name: `c-cluster-${PRODUCT_NAME}-${PAGE.DASHBOARD}`,
       params: {
         product: PRODUCT_NAME
-        },
-        meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
+      },
+      meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
     },
     overview: true
   });
@@ -81,19 +78,6 @@ export function init($plugin: any, store: any) {
     },
   });
 
-  virtualType({
-    label: "Components Demo",
-    name: "demo",
-    namespaced: false,
-    route: {
-      name: `c-cluster-${PRODUCT_NAME}-demo`,
-      params: {
-        product: PRODUCT_NAME,
-      },
-      meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME },
-    },
-  });
-
   weightType(PAGE.DASHBOARD, 98, true);
   weightType(PAGE.IMAGES, 97, true);
   weightType(PAGE.VULNERABILITIES, 96, true);

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

@@ -25,5 +25,5 @@ export default {
 </script>
 
 <template>
-  <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.CVE_DETAIL}/${value}`">{{ value }}</RouterLink>
+  <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.VULNERABILITIES}/${value}`">{{ value }}</RouterLink>
 </template>

pkg/sbombastic-image-vulnerability-scanner/models/VexHub.js

@@ -1,4 +1,5 @@
 import SteveModel from '@shell/plugins/steve/steve-class';
+import { PRODUCT_NAME, PAGE } from "@pkg/types";
 
 export default class SbombasticRancherIoVexhub extends SteveModel {
 	get _availableActions() {
@@ -123,4 +124,18 @@ export default class SbombasticRancherIoVexhub extends SteveModel {
 				}
 			};
 	}
+	get listLocation() {
+		// if (this.$rootState.targetRoute.params.resource === "sbombastic.rancher.io.vexhub") {
+		//   return this._listLocation;
+		// }
+		return { name: `c-cluster-${PRODUCT_NAME}-${PAGE.VEX_MANAGEMENT}` };
+	}
+
+	get doneOverride() {
+		return this.listLocation;
+	}
+
+	get parentLocationOverride() {
+		return this.listLocation;
+	}
 } 

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

@@ -82,14 +82,15 @@
             <span class="total-count">CVE ID, Score, Affected images</span>
           </div>
         </div>
-        <div class="panel-content">
+        <div>
           <TopSevereVulnerabilitiesChart
             :topSevereVulnerabilities="displayedVulnerabilities"
           />
           <div v-if="shouldShowVulnerabilitiesViewAll" class="view-all-inline">
-            <button class="btn-link view-all-left" @click="toggleVulnerabilitiesView()">
+            <!-- <button class="btn-link view-all-left" @click="toggleVulnerabilitiesView()">
               {{ showAllVulnerabilities ? 'View less' : 'View all' }}
-            </button>
+            </button> -->
+            <RouterLink style="margin-left: 32px;" class="view-all" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.VULNERABILITIES}`">View all</RouterLink>
           </div>
         </div>
       </div>
@@ -106,9 +107,10 @@
         <div class="panel-content">
           <TopRiskyImagesChart :topRiskyImages="displayedImages" />
           <div v-if="shouldShowImagesViewAll" class="view-all-inline">
-            <button class="btn-link view-all-left" @click="toggleImagesView()">
+            <!-- <button class="btn-link view-all-left" @click="toggleImagesView()">
               {{ showAllImages ? 'View less' : 'View all' }}
-            </button>
+            </button> -->
+            <RouterLink style="margin-left: 16px;" class="view-all" :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.IMAGES}`">View all</RouterLink>
           </div>
         </div>
       </div>
@@ -117,7 +119,7 @@
 </template>
 
 <script>
-import { RESOURCE, PRODUCT_NAME } from "@pkg/types";
+import { RESOURCE, PRODUCT_NAME, PAGE } from "@pkg/types";
 import { severityDistribution, cves } from '@pkg/data/sbombastic.rancher.io.vulnerability';
 import SevereVulnerabilitiesItem from '@pkg/components/common/SevereVulnerabilitiesItem.vue';
 import TopSevereVulnerabilitiesChart from '@pkg/components/TopSevereVulnerabilitiesChart';
@@ -137,6 +139,7 @@ export default {
   data() {
     return {
       PRODUCT_NAME: PRODUCT_NAME,
+      PAGE,
       disabled: false,
       lastUpdatedTime: '',
       selectedRegistry: 'all',
@@ -559,7 +562,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    padding: 24px 24px 0 24px;
+    padding: 16px 16px 0 16px;
 
     .header-left {
       display: flex;
@@ -601,14 +604,14 @@ export default {
 
   .panel-content {
     flex: 1;
-    padding: 24px;
+    padding: 16px;
     display: flex;
     flex-direction: column;
   }
 
   .view-all-inline {
-    padding: 12px 0 0 0;
-    margin-top: 8px;
+    margin-top: 9px;
+    margin-bottom: 4px;
     text-align: left;
 
     .btn-link {
@@ -868,6 +871,14 @@ export default {
     }
   }
 
+  .view-all {
+    color: #141419;
+    font-size: 14px;
+    font-weight: 400;
+    text-decoration: underline;
+    cursor: pointer;
+  } 
+
 // Override TopSevereVulnerabilitiesChart styling for Dashboard
 .summary-panel {
   :deep(.chart-section) {
@@ -884,7 +895,7 @@ export default {
 
   :deep(.vulnerability-record) {
     padding: 8px 16px !important;
-    margin-bottom: 4px !important;
+    margin-bottom: 3px !important;
   }
 
   :deep(.cve) {