feat: image details with mockdata

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

@@ -271,3 +271,67 @@ export const VULNERABILITIES_TABLE = [
     width: 300,
   },
 ];
+
+export const VULNERABILITY_DETAILS_TABLE = [
+  {
+    name: "cveId",
+    labelKey: "imageScanner.imageDetails.table.headers.cveId",
+    value: "cveId",
+    formatter: "CveIdCell",
+    sort: "cveId",
+    width: 150,
+  },
+  {
+    name: "score",
+    labelKey: "imageScanner.imageDetails.table.headers.score",
+    value: "score",
+    formatter: "ScoreCell",
+    sort: "score",
+    width: 100,
+  },
+  {
+    name: "package",
+    labelKey: "imageScanner.imageDetails.table.headers.package",
+    value: "package",
+    sort: "package",
+    width: 200,
+  },
+  {
+    name: "fixAvailable",
+    labelKey: "imageScanner.imageDetails.table.headers.fixAvailable",
+    value: "fixAvailable",
+    formatter: "FixAvailableCell",
+    sort: "fixAvailable",
+    width: 120,
+  },
+  {
+    name: "severity",
+    labelKey: "imageScanner.imageDetails.table.headers.severity",
+    value: "severity",
+    formatter: "SeverityBadgeCell",
+    sort: "severity",
+    width: 100,
+  },
+  {
+    name: "exploitability",
+    labelKey: "imageScanner.imageDetails.table.headers.exploitability",
+    value: "exploitability",
+    formatter: "ExploitabilityCell",
+    sort: "exploitability",
+    width: 120,
+  },
+  {
+    name: "packageVersion",
+    labelKey: "imageScanner.imageDetails.table.headers.packageVersion",
+    value: "packageVersion",
+    sort: "packageVersion",
+    width: 150,
+  },
+  {
+    name: "packagePath",
+    labelKey: "imageScanner.imageDetails.table.headers.packagePath",
+    value: "packagePath",
+    sort: "packagePath",
+    width: 200,
+  },
+];

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

@@ -0,0 +1,25 @@
+<template>
+    <RouterLink>
+      {{ row.cveId }}
+    </RouterLink>
+</template>
+
+<script>
+export default {
+  name: 'CveIdCell',
+  props: {
+    row: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.cve-link {
+  color: #007cba;
+  text-decoration: none;
+  font-weight: 500;
+}
+</style> 

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

@@ -0,0 +1,22 @@
+<template>
+  <span class="exploitability-cell">
+    {{ t(`imageScanner.imageDetails.${row.exploitability}`) }}
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    row: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.exploitability-cell {
+  text-transform: capitalize;
+}
+</style> 

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="fix-available-cell">
+    <i 
+      :class="row.fixAvailable ? 'icon icon-confirmation-alt' : 'icon icon-notify-error'" 
+      :style="{ 
+        color: row.fixAvailable ? '#007cba' : '#E2E3EB',
+        fontSize: '1.5rem'
+      }"
+    ></i>
+    <span v-if="row.fixAvailable && row.fixVersion">{{ row.fixVersion }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    row: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fix-available-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+</style> 

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_OVERVIEW }/`">
+  <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.IMAGE_DETAIL }/${ row.metadata.name }`">
     {{ row.metadata.name }}
   </RouterLink>
 </template>

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

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <ScoreBadge 
+      v-if="row.score && row.score.trim()"
+      :score="parseFloat(row.score.split(' ')[0])" 
+      :scoreType="row.score.split(' ')[1].replace(/[()]/g, '')"
+    />
+    <span v-else class="na-badge">n/a</span>
+  </div>
+</template>
+
+<script>
+import ScoreBadge from '../components/common/ScoreBadge.vue';
+
+export default {
+  name: 'ScoreCell',
+  components: {
+    ScoreBadge
+  },
+  props: {
+    row: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.na-badge {
+  display: inline-block;
+  background-color: #F4F5FA;
+  color: #6C6C76;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  width: 100%;
+  height: 24px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style> 

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

@@ -0,0 +1,14 @@
+<template>
+  <span>{{ t(`imageScanner.enum.cve.${row.severity}`) }}</span>
+</template>
+
+<script>
+export default {
+  props: {
+    row: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script> 

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

@@ -97,6 +97,53 @@ imageScanner:
         repository: Repository
         registry: Registry
         vulnerabilities: vulnerabilities
+  imageDetails:
+    status: Status
+    vulnerabilities: Vulnerabilities
+    repository: Repository
+    registry: Registry
+    architecture: Architecture
+    operatingSystem: Operating system
+    size: Size
+    author: Author
+    dockerVersion: Docker version
+    created: Created
+    showAllProperties: Show all image properties
+    showLessProperties: Show less properties
+    imageId: Image ID
+    layers: Layers
+    mostSevereVulnerabilities: Most severe, affecting vulnerabilities
+    fixAvailable: Fix available
+    noFixAvailable: No fix available
+    severityDistribution: Severity distribution
+    vulnerabilitiesInTotal: Vulnerabilities in total
+    searchById: Search by ID
+    searchByIdPlaceholder: Search CVE ID
+    score: Score
+    searchByName: Search by name
+    searchByNamePlaceholder: Search package name
+    any: Any
+    available: Available
+    notAvailable: Not available
+    severity: Severity
+    exploitability: Exploitability
+    affected: Affected
+    not-affected: Not affected
+    investigating: Investigating
+    fixed: Fixed
+    no-vex-data: No VEX data
+    groupByLayer: Group by layer
+    selected: selected
+    table:
+      headers:
+        cveId: CVE ID
+        score: Score
+        package: Package
+        fixAvailable: Fix available
+        severity: Severity
+        exploitability: Exploitability
+        packageVersion: Package version
+        packagePath: Package path
   vulnerabilities:
     title: Vulnerabilities
     vulnerabilitiesBySeverityChart:

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

@@ -1,9 +1,9 @@
 import RegistryDetails from "@pkg/components/RegistryDetails.vue";
 import ComponentDemo from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ComponentDemo.vue";
 import ImageOverview from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue";
+import ImageDetails from "@sbombastic-image-vulnerability-scanner/components/ImageDetails.vue";
 import RegistriesConfiguration from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/RegistriesConfiguration.vue";
 import Vulnerabilities from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/Vulnerabilities.vue";
-import VexManagement from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/VexManagement.vue";
 import CreateResource from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/create.vue";
 import ListResource from "@pkg/pages/c/_cluster/sbombastic-image-vulnerability-scanner/_resource/index.vue";
 import {
@@ -17,6 +17,11 @@ const routes = [
     path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.IMAGE_OVERVIEW}`,
     component: ImageOverview,
   },
+  {
+    name: `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGE_DETAIL}-id`,
+    path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.IMAGE_DETAIL}/:id`,
+    component: ImageDetails,
+  },
   {
     name: `c-cluster-${PRODUCT_NAME}-${PAGE.VULNERABILITY_OVERVIEW}`,
     path: `/c/:cluster/${PRODUCT_NAME}/${PAGE.VULNERABILITY_OVERVIEW}`,