From 877354a6af9644e727ae007390526b045d9c66ad Mon Sep 17 00:00:00 2001
From: Nick Chung <nick.chung@suse.com>
Date: Wed, 27 Aug 2025 19:08:37 +0800
Subject: [PATCH] feat: image details with mockdata

---
 .../components/ImageDetails.vue               | 842 ++++++++++++++++++
 .../config/table-headers.ts                   |  64 ++
 .../formatters/CveIdCell.vue                  |  25 +
 .../formatters/ExploitabilityCell.vue         |  22 +
 .../formatters/FixAvailableCell.vue           |  31 +
 .../formatters/ImageNameCell.vue              |   2 +-
 .../formatters/ScoreCell.vue                  |  45 +
 .../formatters/SeverityBadgeCell.vue          |  14 +
 .../l10n/en-us.yaml                           |  47 +
 ...stic-image-vulnerability-scanner-routes.ts |   7 +-
 10 files changed, 1097 insertions(+), 2 deletions(-)
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/formatters/CveIdCell.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/formatters/ExploitabilityCell.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/formatters/FixAvailableCell.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/formatters/ScoreCell.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/formatters/SeverityBadgeCell.vue

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue
new file mode 100644
index 0000000..a0583a7
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue
@@ -0,0 +1,842 @@
+<template>
+  <div class="page">
+    <!-- Header Section -->
+    <div class="header-section">
+      <div class="title">
+        Image: {{ imageName }}
+        <BadgeState 
+          :color="getSeverityColor(overallSeverity)" 
+          :label="t(`imageScanner.enum.cve.${overallSeverity}`)"
+          class="severity-badge"
+        />
+      </div>
+      <div class="header-actions">
+                <button
+          class="btn role-primary"
+          aria-label="Download full report"
+          type="button"
+          @click="downloadFullReport">
+          <i class="icon icon-download"></i>
+          {{ t('imageScanner.images.downloadReport') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Image Information Section -->
+    <div class="image-info-section">
+      <div class="info-grid">
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.status') }}:</span>
+          <span class="value">{{ imageDetails.status }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.vulnerabilities') }}:</span>
+          <span class="value">{{ totalVulnerabilities.toLocaleString() }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.repository') }}:</span>
+          <span class="value">{{ imageDetails.repository }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.registry') }}:</span>
+          <span class="value">{{ imageDetails.registry }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.architecture') }}:</span>
+          <span class="value">{{ imageDetails.architecture }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.operatingSystem') }}:</span>
+          <span class="value">{{ imageDetails.operatingSystem }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.size') }}:</span>
+          <span class="value">{{ imageDetails.size }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.author') }}:</span>
+          <span class="value">{{ imageDetails.author }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.dockerVersion') }}:</span>
+          <span class="value">{{ imageDetails.dockerVersion }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">{{ t('imageScanner.imageDetails.created') }}:</span>
+          <span class="value">{{ imageDetails.created }}</span>
+        </div>
+        <div class="info-item show-properties-link">
+          <a href="#" @click.prevent="showAllProperties = !showAllProperties">
+            {{ showAllProperties ? t('imageScanner.imageDetails.showLessProperties') : t('imageScanner.imageDetails.showAllProperties') }}
+          </a>
+        </div>
+        <div class="info-item" v-if="showAllProperties">
+          <span class="label">{{ t('imageScanner.imageDetails.imageId') }}:</span>
+          <span class="value">{{ imageDetails.imageId || 'sha256:abc123...' }}</span>
+        </div>
+        <div class="info-item" v-if="showAllProperties">
+          <span class="label">{{ t('imageScanner.imageDetails.layers') }}:</span>
+          <span class="value">{{ imageDetails.layers || '12' }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Summary Section -->
+    <div class="summary-section">
+      <!-- Most Severe Vulnerabilities Section -->
+      <div class="vulnerabilities-section">
+        <div class="title">
+          {{ t('imageScanner.imageDetails.mostSevereVulnerabilities') }}
+          <i class="icon icon-question-mark"></i>
+        </div>
+        <div class="vulnerabilities-list">
+          <div 
+            v-for="vuln in mostSevereVulnerabilities" 
+            :key="vuln.cveId"
+            class="row"
+          >
+            <div class="col span-4">
+              <RouterLink>
+                {{ vuln.cveId }}
+              </RouterLink>
+            </div>
+            <div class="col span-3">
+              <ScoreBadge 
+                :score="parseFloat(vuln.score.split(' ')[0])" 
+                :scoreType="vuln.score.split(' ')[1].replace(/[()]/g, '')"
+              />
+            </div>
+            <div class="col span-4">{{ vuln.package }}</div>
+            <div class="col span-1">
+              <i 
+                :class="vuln.fixAvailable ? 'icon icon-confirmation-alt' : 'icon icon-notify-error'" 
+                :style="{ 
+                  color: vuln.fixAvailable ? '#007cba' : '#E2E3EB',
+                  fontSize: '1.5rem'
+                }"
+              ></i>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Severity Distribution Section -->
+      <div class="severity-section">
+        <div class="title">
+          {{ t('imageScanner.imageDetails.severityDistribution') }}
+          <i class="icon icon-question-mark"></i>
+        </div>
+        <BarChart 
+          :chartData="severityDistribution" 
+          :description="t('imageScanner.imageDetails.vulnerabilitiesInTotal')"
+          colorPrefix="cve"
+        />
+      </div>
+    </div>
+
+    <!-- Search Filters - Disabled for MVP version -->
+    <!-- <div class="search-filters">
+      <div class="filter-row">
+        <div class="filter-item">
+          <label>CVE</label>
+          <div class="filter-input-wrapper">
+            <input 
+              v-model="filters.cveSearch" 
+              type="text" 
+              placeholder="Search by ID"
+              class="filter-input"
+            />
+            <i class="icon icon-search" style="color: #6C6C76; margin-left: 8px;"></i>
+          </div>
+        </div>
+        <div class="filter-item">
+          <label>{{ t('imageScanner.imageDetails.score') }}</label>
+          <div class="filter-input-wrapper">
+            <input 
+              v-model="filters.score" 
+              type="text" 
+              placeholder="0 - 9.9"
+              class="filter-input score-input"
+            />
+            <i class="icon icon-filter" style="color: #6C6C76; margin-left: 8px;"></i>
+          </div>
+        </div>
+        <div class="filter-item">
+          <label>{{ t('imageScanner.imageDetails.searchByName') }}</label>
+          <div class="filter-input-wrapper">
+            <input 
+              v-model="filters.packageSearch" 
+              type="text" 
+              :placeholder="t('imageScanner.imageDetails.searchByNamePlaceholder')"
+              class="filter-input"
+            />
+            <i class="icon icon-search" style="color: #6C6C76; margin-left: 8px;"></i>
+          </div>
+        </div>
+        <div class="filter-item">
+          <label>{{ t('imageScanner.imageDetails.fixAvailable') }}</label>
+          <select v-model="filters.fixAvailable" class="filter-select">
+            <option value="any">{{ t('imageScanner.imageDetails.any') }}</option>
+            <option value="available">{{ t('imageScanner.imageDetails.available') }}</option>
+            <option value="not-available">{{ t('imageScanner.imageDetails.notAvailable') }}</option>
+          </select>
+        </div>
+        <div class="filter-item">
+          <label>{{ t('imageScanner.imageDetails.severity') }}</label>
+          <select v-model="filters.severity" class="filter-select">
+            <option value="any">{{ t('imageScanner.imageDetails.any') }}</option>
+            <option value="critical">{{ t('imageScanner.enum.cve.critical') }}</option>
+            <option value="high">{{ t('imageScanner.enum.cve.high') }}</option>
+            <option value="medium">{{ t('imageScanner.enum.cve.medium') }}</option>
+            <option value="low">{{ t('imageScanner.enum.cve.low') }}</option>
+            <option value="none">{{ t('imageScanner.enum.cve.none') }}</option>
+          </select>
+        </div>
+        <div class="filter-item">
+          <label>{{ t('imageScanner.imageDetails.exploitability') }}</label>
+          <select v-model="filters.exploitability" class="filter-select">
+            <option value="any">{{ t('imageScanner.imageDetails.any') }}</option>
+            <option value="affected">{{ t('imageScanner.imageDetails.affected') }}</option>
+            <option value="not-affected">{{ t('imageScanner.imageDetails.not-affected') }}</option>
+            <option value="investigating">{{ t('imageScanner.imageDetails.investigating') }}</option>
+            <option value="fixed">{{ t('imageScanner.imageDetails.fixed') }}</option>
+            <option value="no-vex-data">{{ t('imageScanner.imageDetails.noVexData') }}</option>
+          </select>
+        </div>
+      </div>
+    </div> -->
+
+    <!-- Vulnerability Table -->
+    <SortableTable
+      :rows="filteredVulnerabilities"
+      :headers="VULNERABILITY_DETAILS_TABLE"
+      :has-advanced-filtering="false"
+      :namespaced="false"
+      :row-actions="false"
+      :search="true"
+      @selection="onSelectionChange"
+    >
+      <template #header-left>
+        <div class="table-header-actions">
+          <button
+            class="btn role-primary"
+            :disabled="!selectedVulnerabilities.length"
+            @click="downloadCustomReport">
+            <i class="icon icon-download"></i>
+            {{ t('imageScanner.images.buttons.downloadCustomReport') }}
+          </button>
+          <span v-if="selectedVulnerabilities.length > 0" class="selected-count">
+            {{ selectedVulnerabilities.length }} {{ t('imageScanner.imageDetails.selected') }}
+          </span>
+        </div>
+      </template>
+      <template #search>
+        <!-- Disable search -->
+      </template>
+    </SortableTable>
+  </div>
+</template>
+
+<script>
+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";
+
+export default {
+  name: 'ImageDetails',
+  components: {
+    SortableTable,
+    BadgeState,
+    Checkbox,
+    ScoreBadge,
+    BarChart,
+  },
+  data() {
+    return {
+      imageName: '',
+      imageDetails: {},
+      mostSevereVulnerabilities: [],
+      severityDistribution: {},
+      vulnerabilityDetails: [],
+      selectedVulnerabilities: [],
+      showAllProperties: false,
+      filters: {
+        cveSearch: '',
+        score: '',
+        packageSearch: '',
+        fixAvailable: 'any',
+        severity: 'any',
+        exploitability: 'any',
+        groupByLayer: false,
+      },
+      VULNERABILITY_DETAILS_TABLE,
+    }
+  },
+
+  async fetch() {
+    // Get image name from route params
+    this.imageName = this.$route.params.id || 'imagemagick4.8.5613';
+    
+    // Find the image from the existing data
+    const image = images.find(img => img.metadata.name === this.imageName);
+    if (image) {
+      this.imageDetails = {
+        status: 'Affected',
+        repository: image.spec.repository,
+        registry: image.spec.registry,
+        architecture: 'amd64',
+        operatingSystem: 'Linux',
+        size: '584.12 Mb',
+        author: 'n/a',
+        dockerVersion: '1.13.0',
+        created: 'Oct 19, 2024 4:37 AM'
+      };
+      this.severityDistribution = image.spec.scanResult;
+    }
+    
+    // Load mock vulnerability details
+    this.vulnerabilityDetails = this.getMockVulnerabilityDetails();
+    
+    // Calculate derived data
+    this.calculateMostSevereVulnerabilities();
+  },
+
+  computed: {
+    totalVulnerabilities() {
+      return Object.values(this.severityDistribution).reduce((sum, count) => sum + count, 0);
+    },
+
+    overallSeverity() {
+      const severities = ['critical', 'high', 'medium', 'low', 'none'];
+      for (const severity of severities) {
+        if (this.severityDistribution[severity] > 0) {
+          return severity;
+        }
+      }
+      return 'none';
+    },
+
+    severityDistributionWithPercentages() {
+      const total = this.totalVulnerabilities;
+      const distribution = {};
+      
+      Object.keys(this.severityDistribution).forEach(severity => {
+        const count = this.severityDistribution[severity];
+        distribution[severity] = {
+          count,
+          percentage: total > 0 ? ((count / total) * 100).toFixed(1) : 0
+        };
+      });
+      
+      return distribution;
+    },
+
+    filteredVulnerabilities() {
+      let filtered = [...this.vulnerabilityDetails];
+
+      if (this.filters.cveSearch) {
+        filtered = filtered.filter(v => 
+          v.cveId.toLowerCase().includes(this.filters.cveSearch.toLowerCase())
+        );
+      }
+
+      if (this.filters.score) {
+        const score = parseFloat(this.filters.score);
+        filtered = filtered.filter(v => {
+          const vulnScore = parseFloat(v.score.split(' ')[0]);
+          return vulnScore >= score;
+        });
+      }
+
+      if (this.filters.packageSearch) {
+        filtered = filtered.filter(v => 
+          v.package.toLowerCase().includes(this.filters.packageSearch.toLowerCase())
+        );
+      }
+
+      if (this.filters.fixAvailable !== 'any') {
+        const hasFix = this.filters.fixAvailable === 'available';
+        filtered = filtered.filter(v => v.fixAvailable === hasFix);
+      }
+
+      if (this.filters.severity !== 'any') {
+        filtered = filtered.filter(v => v.severity === this.filters.severity);
+      }
+
+      if (this.filters.exploitability !== 'any') {
+        filtered = filtered.filter(v => v.exploitability === this.filters.exploitability);
+      }
+
+      return filtered;
+    },
+  },
+
+  methods: {
+    getSeverityColor(severity) {
+      const colors = {
+        critical: 'critical-severity',
+        high: 'bg-error',
+        medium: 'bg-warning',
+        low: 'bg-warning',
+        none: 'bg-info'
+      };
+      return colors[severity] || colors.none;
+    },
+
+    getSeverityBarColor(severity) {
+      const colors = {
+        critical: '#850917',
+        high: '#DE2136',
+        medium: '#FF8533',
+        low: '#FDD835',
+        none: '#E0E0E0'
+      };
+      return colors[severity] || colors.none;
+    },
+
+    getMockVulnerabilityDetails() {
+      return [
+        {
+          cveId: 'CVE-2017-5337',
+          score: '9.9 (v3)',
+          package: 'tomcat-embed-jasper-9.1',
+          fixAvailable: true,
+          fixVersion: '7.28.1.3',
+          severity: 'critical',
+          exploitability: 'affected',
+          packageVersion: '7.26.0.1+weezy20',
+          packagePath: '/usr/local/bin/'
+        },
+        {
+          cveId: 'CVE-2018-1000007',
+          score: '9.6 (v3)',
+          package: 'libxml2',
+          fixAvailable: false,
+          fixVersion: null,
+          severity: 'critical',
+          exploitability: 'not-affected',
+          packageVersion: '2.8.0+dfsg+17+weezy9',
+          packagePath: '/usr/local/bin/'
+        },
+        {
+          cveId: 'CVE-2019-10989',
+          score: '8.8 (v2)',
+          package: 'python2.7',
+          fixAvailable: false,
+          fixVersion: null,
+          severity: 'critical',
+          exploitability: 'investigating',
+          packageVersion: '2.7.3.6+deb7u3',
+          packagePath: '/'
+        },
+        {
+          cveId: 'CVE-2020-0601',
+          score: '8.8 (v3)',
+          package: 'tomcat-api-el-9.0',
+          fixAvailable: true,
+          fixVersion: '10.1.39+deb',
+          severity: 'critical',
+          exploitability: 'investigating',
+          packageVersion: '10.1.34.11.0.2.9.0.28',
+          packagePath: '/'
+        },
+        {
+          cveId: 'CVE-2021-22918',
+          score: '8.8 (v3)',
+          package: 'imagemagick',
+          fixAvailable: false,
+          fixVersion: null,
+          severity: 'critical',
+          exploitability: 'no-vex-data',
+          packageVersion: '4.8.5613+deb7u9',
+          packagePath: '/usr/bin/'
+        },
+        {
+          cveId: 'CVE-2016-7925',
+          score: '9.3 (v3)',
+          package: 'tomcat-api-el-9.0',
+          fixAvailable: true,
+          fixVersion: '8.21.6',
+          severity: 'high',
+          exploitability: 'affected',
+          packageVersion: '7.26.0.1+weezy20',
+          packagePath: '/home/klipper-helm/.l...'
+        },
+        {
+          cveId: 'CVE-2015-1635',
+          score: '7.8 (v3)',
+          package: 'imagemagick',
+          fixAvailable: false,
+          fixVersion: null,
+          severity: 'medium',
+          exploitability: 'fixed',
+          packageVersion: '4.8.5613+deb7u9',
+          packagePath: '/usr/bin/'
+        },
+        {
+          cveId: 'CVE-2020-14386',
+          score: '5.5 (v3)',
+          package: 'python2.7',
+          fixAvailable: false,
+          fixVersion: null,
+          severity: 'low',
+          exploitability: 'not-affected',
+          packageVersion: '2.7.3.6+deb7u3',
+          packagePath: '/'
+        },
+        {
+          cveId: 'CVE-2021-22986',
+          score: '',
+          package: 'tomcat-embed-jasper-9.1',
+          fixAvailable: true,
+          fixVersion: '10.1',
+          severity: 'none',
+          exploitability: 'fixed',
+          packageVersion: '7.26.0.1+weezy20',
+          packagePath: '/usr/bin/'
+        }
+      ];
+    },
+
+    calculateMostSevereVulnerabilities() {
+      const sorted = [...this.vulnerabilityDetails]
+        .sort((a, b) => {
+          const scoreA = parseFloat(a.score.split(' ')[0]) || 0;
+          const scoreB = parseFloat(b.score.split(' ')[0]) || 0;
+          return scoreB - scoreA;
+        })
+        .slice(0, 5);
+      
+      this.mostSevereVulnerabilities = sorted;
+    },
+
+    onSelectionChange(selected) {
+      this.selectedVulnerabilities = selected || [];
+    },
+
+    downloadFullReport() {
+      console.log('Downloading full report for:', this.imageName);
+      // Implementation for downloading full report
+    },
+
+    downloadCustomReport() {
+      console.log('Downloading custom report with filters:', this.filters);
+      // Implementation for downloading custom report
+    },
+  },
+}
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  min-height: 100%;
+  gap: 16px;
+}
+
+.header-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 16px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 24px;
+  font-weight: 600;
+  color: #141419;
+}
+
+.severity-badge {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.critical-severity {
+  background-color: #850917 !important;
+  color: white !important;
+}
+
+.image-info-section {
+  padding: 0;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px 32px;
+}
+
+.info-item {
+  display: flex;
+  justify-content: flex-start;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+
+.label {
+  color: #6C6C76;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.value {
+  color: #141419;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.show-properties-link {
+  margin-top: 0;
+  padding-top: 0;
+  justify-content: flex-start !important;
+  grid-column: 3;
+  grid-row: 4;
+}
+
+.show-properties-link a {
+  color: #007cba;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.show-properties-link a:hover {
+  text-decoration: underline;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  color: #6C6C76;
+}
+
+.breadcrumb-item {
+  color: #007cba;
+  cursor: pointer;
+}
+
+.breadcrumb-item:hover {
+  text-decoration: underline;
+}
+
+.breadcrumb-separator {
+  color: #6C6C76;
+}
+
+.image-info-section {
+  padding: 0;
+  margin-bottom: 24px;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px 32px;
+}
+
+.summary-section {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #DCDEE7;
+  background: #FFF;
+  margin: 24px 0;
+}
+
+.vulnerabilities-section,
+.severity-section {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.vulnerabilities-section {
+  border-right: 1px solid #DCDEE7;
+}
+
+.title {
+  color: #141419;
+  font-family: Lato;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 21px;
+  margin-bottom: 8px;
+}
+
+.vulnerabilities-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.vulnerabilities-list .row {
+  width: 100%;
+  margin: 0;
+}
+
+.vulnerabilities-list .col {
+  padding: 8px 16px;
+  min-height: 32px;
+}
+
+.cve-id {
+  font-weight: 700;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+}
+
+.cve-link {
+  color: #007cba;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.cve-link:hover {
+  text-decoration: underline;
+}
+
+.score-badge {
+  display: flex;
+  align-items: center;
+}
+
+.score {
+  color: #6C6C76;
+  font-size: 13px;
+  font-weight: 500;
+  background: #E9ECEF;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.package {
+  color: #141419;
+  font-weight: 500;
+}
+
+.fix-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-filters {
+  margin-bottom: 24px;
+}
+
+.filter-row {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+.filter-item label {
+  font-weight: 400;
+  color: #6C6C76;
+  font-size: 14px;
+}
+
+.filter-input-wrapper {
+  display: flex;
+  align-items: center;
+  border: 1px solid #DCDEE7;
+  border-radius: 6px;
+  padding: 0 12px;
+  background: #FFF;
+}
+
+.filter-input {
+  flex: 1;
+  padding: 10px 0;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  background: transparent;
+}
+
+.score-input {
+  color: #BEC1D2;
+}
+
+.score-input::placeholder {
+  color: #BEC1D2;
+}
+
+.filter-input:focus {
+  outline: none;
+}
+
+.filter-input-wrapper:focus-within {
+  border-color: #007cba;
+  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1);
+}
+
+.filter-select {
+  padding: 10px 14px;
+  border: 1px solid #DCDEE7;
+  border-radius: 6px;
+  font-size: 14px;
+  background: #FFF;
+  outline: none;
+}
+
+.filter-select:focus {
+  border-color: #007cba;
+  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1);
+}
+
+.filter-actions {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #DCDEE7;
+}
+
+.selected-count {
+  font-weight: 500;
+  color: #6C6C76;
+}
+
+
+
+.table-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.table-top-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+</style>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
index d594999..2441f1f 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
+++ b/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,
+  },
+];
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/CveIdCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/CveIdCell.vue
new file mode 100644
index 0000000..4564288
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ExploitabilityCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ExploitabilityCell.vue
new file mode 100644
index 0000000..34f58d2
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/FixAvailableCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/FixAvailableCell.vue
new file mode 100644
index 0000000..66c400d
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue
index af029f0..da8621c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue
+++ b/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>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ScoreCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ScoreCell.vue
new file mode 100644
index 0000000..9b33251
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/SeverityBadgeCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/SeverityBadgeCell.vue
new file mode 100644
index 0000000..f13798a
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
index 8008825..e25ad67 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
+++ b/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:
diff --git a/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts b/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
index 8c4781d..df18528 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/routes/sbombastic-image-vulnerability-scanner-routes.ts
+++ b/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}`,