From 5f45a3a9a2cf79ad441711fd479d53c3e7f3138f Mon Sep 17 00:00:00 2001
From: Steven Zhang <steven.zhang@suse.com>
Date: Sat, 23 Aug 2025 10:09:38 -0700
Subject: [PATCH] Image Overview page with mockdata

---
 .../components/ImageRiskAssessment.vue        |   4 +-
 .../components/TopRiskyImagesChart.vue        |   4 +-
 .../common/DownloadCustomReport.vue           |  34 ++
 .../config/table-headers.ts                   |  85 +++++
 .../data/sbombastic.rancher.io.image.js       | 290 ++++++++++++++++++
 .../formatters/IdentifiedCVEsCell.vue         |  19 ++
 .../IdentifiedCVEsPercentageCell.vue          |  19 ++
 .../formatters/ImageNameCell.vue              |  25 ++
 .../l10n/en-us.yaml                           |  13 +
 .../ImageOverview.vue                         | 251 ++++++++-------
 10 files changed, 628 insertions(+), 116 deletions(-)
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/components/common/DownloadCustomReport.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image.js
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsCell.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsPercentageCell.vue
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue b/pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue
index 42c45b8..b1ea3f5 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="chart-section">
         <div class="title">
-            {{ t('imageScanner.images.imageBySeverityChart.title') }}
+            {{ t('imageScanner.images.imageRiskAssessment.title') }}
         </div>
         <div class="severity-bar-chart">
-            <BarChart :chartData="chartData" colorPrefix="cve" :description="t('imageScanner.images.imageBySeverityChart.subTitle')" />
+            <BarChart :chartData="chartData" colorPrefix="cve" :description="t('imageScanner.images.imageRiskAssessment.subTitle')" />
         </div>
     </div>
 </template>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart.vue b/pkg/sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart.vue
index d820681..cbea8e5 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart.vue
@@ -4,8 +4,8 @@
         Most affected images at risk
     </div>
     <div class="image-record" v-for="image in topRiskyImages">
-        <div class="image-name">{{ image.image_name }}</div>
-        <AmountBarBySeverity class="image-cve" :cveAmount="image.cve_cnt"/>
+        <div class="image-name">{{ image.imageName }}</div>
+        <AmountBarBySeverity class="image-cve" :cveAmount="image.cveCnt"/>
     </div>
   </div>
 </template>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/DownloadCustomReport.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/DownloadCustomReport.vue
new file mode 100644
index 0000000..ace312a
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/DownloadCustomReport.vue
@@ -0,0 +1,34 @@
+<template>
+  <button
+    class="btn role-primary"
+    :disabled="!(selectedRows && selectedRows.length)"
+    @click="downloadFn()"
+>
+    <i class="icon icon-download"></i>
+    {{ buttonName }}
+  </button>
+</template>
+
+<script>
+
+export default {
+  name: 'scanButton',
+  props: {
+    selectedRows: {
+      type: Array,
+      default: () => []
+    },
+    buttonName: {
+      type: String,
+      default: () => []
+    },
+    downloadFn: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  methods: {
+   
+  },
+}
+</script>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
index 2e944e7..0ae0298 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
@@ -145,3 +145,88 @@ export const VEX_MANAGEMENT_TABLE = [
     sort: "metadata.creationTimestamp",
   },
 ];
+
+export const IMAGE_LIST_TABLE = [
+  {
+    name: "name",
+    labelKey: "imageScanner.images.listTable.headers.imageName",
+    value: "metadata.name",
+    formatter: "ImageNameCell",
+    sort: "metadata.name",
+  },
+  {
+    name: "cves",
+    labelKey: "imageScanner.images.listTable.headers.identifiedCVEs",
+    value: "spec.scanResult",
+    formatter: "IdentifiedCVEsCell",
+    sort: "spec.scanResult",
+    width: 300,
+  },
+  {
+    name: "repository",
+    labelKey: "imageScanner.images.listTable.headers.repository",
+    value: "spec.repository",
+    sort: "spec..repository",
+  },
+  {
+    name: "registry",
+    labelKey: "imageScanner.images.listTable.headers.registry",
+    value: "spec.registry",
+    sort: "spec.registry",
+  }
+];
+
+export const REPO_BASED_TABLE = [
+  {
+    name: "repository",
+    labelKey: "imageScanner.images.listTable.headers.repository",
+    value: "repository",
+    sort: "repository",
+    width: 200,
+  },
+  {
+    name: "cves",
+    labelKey: "imageScanner.images.listTable.headers.vulnerabilities",
+    value: "cveCntByRepo",
+    formatter: "IdentifiedCVEsPercentageCell",
+    sort: "cveCntByRepo",
+    width: 300,
+  },
+  {
+    name: "registry",
+    labelKey: "imageScanner.images.listTable.headers.registry",
+    value: "registry",
+    sort: "registry",
+    width: 450,
+  },
+];
+
+export const REPO_BASED_IMAGE_LIST_TABLE = [
+  {
+    name: "",
+    value: "",
+    sort: "",
+    width: 60,
+  },
+  {
+    name: "image",
+    labelKey: "imageScanner.images.listTable.headers.imageName",
+    formatter: "ImageNameCell",
+    sort: "metadata.name",
+    width: 200,
+  },
+  {
+    name: "cves",
+    labelKey: "imageScanner.images.listTable.headers.identifiedCVEs",
+    value: "scanResult",
+    formatter: "IdentifiedCVEsCell",
+    sort: "imageScanner",
+    width: 310,
+  },
+  {
+    name: "",
+    value: "",
+    sort: "",
+    width: 450,
+  },
+];
diff --git a/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image.js b/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image.js
new file mode 100644
index 0000000..8f899be
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image.js
@@ -0,0 +1,290 @@
+export const images = [
+    {
+        metadata: {
+            name: "struts-attacher:1.0",
+        },
+        spec: {
+            repository: "coredns",
+            registry: "Docker Hub",
+            scanResult: {
+                critical: 128,
+                high: 12,
+                medium: 81,
+                low: 526,
+                none: 126
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "imagemagick4.8.5613",
+        },
+        spec: {
+            repository: "demo-cody-protected",
+            registry: "demo.suse-security-ivs.io",
+            scanResult: {
+                critical: 7,
+                high: 0,
+                medium: 1028,
+                low: 24,
+                none: 18
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "centos7.7.1908",
+        },
+        spec: {
+            repository: "kube-controller-manager",
+            registry: "ecr.ap-southeast-emea.2",
+            scanResult: {
+                critical: 72,
+                high: 0,
+                medium: 164,
+                low: 0,
+                none: 7
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "nginx1.19.10",
+        },
+        spec: {
+            repository: "kube-apiserver",
+            registry: "Docker Hub",
+            scanResult: {
+                critical: 150,
+                high: 5,
+                medium: 850,
+                low: 600,
+                none: 73
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "docker-compose:1.29.2",
+        },
+        spec: {
+            repository: "coredns",
+            registry: "Docker Hub",
+            scanResult: {
+                critical: 35,
+                high: 2,
+                medium: 450,
+                low: 120,
+                none: 9
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "python3.9.7",
+        },
+        spec: {
+            repository: "flask-app",
+            registry: "pypi.org",
+            scanResult: {
+                critical: 80,
+                high: 3,
+                medium: 1100,
+                low: 50,
+                none: 0
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "nodejs14.17.3",
+        },
+        spec: {
+            repository: "web-server",
+            registry: "npmjs.com",
+            scanResult: {
+                critical: 100,
+                high: 0,
+                medium: 2000,
+                low: 300,
+                none: 40
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "redis5.0.7",
+        },
+        spec: {
+            repository: "cache-service",
+            registry: "Docker Hub",
+            scanResult: {
+                critical: 58,
+                high: 0,
+                medium: 700,
+                low: 0,
+                none: 11
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "mongodb4.4.1",
+        },
+        spec: {
+            repository: "data-store",
+            registry: "mongodb.com",
+            scanResult: {
+                critical: 45,
+                high: 2,
+                medium: 900,
+                low: 150,
+                none: 12
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "golang1.16.5",
+        },
+        spec: {
+            repository: "api-gateway",
+            registry: "demo.suse-security-ivs.io",
+            scanResult: {
+                critical: 75,
+                high: 1,
+                medium: 1200,
+                low: 10,
+                none: 18
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "ruby2.7.3",
+        },
+        spec: {
+            repository: "web-application",
+            registry: "rubygems.org",
+            scanResult: {
+                critical: 60,
+                high: 1,
+                medium: 500,
+                low: 80,
+                none: 0
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "elasticsearch7.10.0",
+        },
+        spec: {
+            repository: "search-service",
+            registry: "docker.elastic.co",
+            scanResult: {
+                critical: 90,
+                high: 0,
+                medium: 1800,
+                low: 300,
+                none: 20
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "mysql8.0.25",
+        },
+        spec: {
+            repository: "database-service",
+            registry: "mysql.com",
+            scanResult: {
+                critical: 70,
+                high: 0,
+                medium: 850,
+                low: 0,
+                none: 14
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "php8.0.9",
+        },
+        spec: {
+            repository: "web-backend",
+            registry: "php.net",
+            scanResult: {
+                critical: 55,
+                high: 0,
+                medium: 400,
+                low: 60,
+                none: 5
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "postgresql13.3",
+        },
+        spec: {
+            repository: "data-service",
+            registry: "docker.io",
+            scanResult: {
+                critical: 85,
+                high: 2,
+                medium: 1100,
+                low: 45,
+                none: 12
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "terraform1.0.0",
+        },
+        spec: {
+            repository: "infrastructure-as-code",
+            registry: "demo.suse-security-ivs.io",
+            scanResult: {
+                critical: 40,
+                high: 1,
+                medium: 300,
+                low: 10,
+                none: 0
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "ansible2.10.5",
+        },
+        spec: {
+            repository: "automation-service",
+            registry: "galaxy.ansible.com",
+            scanResult: {
+                critical: 65,
+                high: 0,
+                medium: 600,
+                low: 90,
+                none: 10
+            }
+        },
+    },
+    {
+        metadata: {
+            name: "kafka2.8.0",
+        },
+        spec: {
+            repository: "streaming-service",
+            registry: "confluent.io",
+            scanResult: {
+                critical: 80,
+                high: 0,
+                medium: 1300,
+                low: 0,
+                none: 16
+            }
+        },
+    },
+];
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsCell.vue
new file mode 100644
index 0000000..885485d
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsCell.vue
@@ -0,0 +1,19 @@
+<template>
+  <div style="margin-right: 32px;">
+    <AmountBarBySeverity :cveAmount="value" :isCollapsed="false"/>
+  </div>
+</template>
+<script>
+import AmountBarBySeverity from "@sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity";
+export default {
+  props: {
+    value: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    AmountBarBySeverity,
+  },
+};
+</script>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsPercentageCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsPercentageCell.vue
new file mode 100644
index 0000000..7e8d6ef
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/IdentifiedCVEsPercentageCell.vue
@@ -0,0 +1,19 @@
+<template>
+  <div style="margin-right: 32px;">
+    <AmountBarBySeverity :cveAmount="value" :isCollapsed="true"/>
+  </div>
+</template>
+<script>
+import AmountBarBySeverity from "@sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity";
+export default {
+  props: {
+    value: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    AmountBarBySeverity,
+  },
+};
+</script>
\ 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
new file mode 100644
index 0000000..d58a3e8
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/formatters/ImageNameCell.vue
@@ -0,0 +1,25 @@
+<template>
+  <RouterLink :to="`/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${ this.PAGE.IMAGE_OVERVIEW }/`">
+    {{ row.metadata.name }}
+  </RouterLink>
+</template>
+<script>
+import {
+    PRODUCT_NAME,
+    PAGE,
+} from "@sbombastic-image-vulnerability-scanner/types";
+export default {
+  props: {
+    row: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      PRODUCT_NAME,
+      PAGE,
+    };
+  },
+};
+</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 713de86..dc2ed0f 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
+++ b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
@@ -70,6 +70,8 @@ imageScanner:
     downloadReport: Download full report
     imageBySeverityChart:
       title: Most affected images at risk
+    imageRiskAssessment:
+      title: Image risk assessment
       subTitle: images in total
     filters:
       image:
@@ -84,6 +86,17 @@ imageScanner:
         severity: severity
         repository: repository
         registry: Registry
+    buttons:
+      downloadCustomReport: Download custom report
+    listTable:
+      checkbox:
+        groupByRepo: Group by repository
+      headers:
+        imageName: Image name
+        identifiedCVEs: Identified CVEs
+        repository: Repository
+        registry: Registry
+        vulnerabilities: vulnerabilities
   vulnerabilities:
     title: Vulnerabilities
   vexManagement:
diff --git a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue
index f020706..567f6a1 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue
@@ -33,73 +33,82 @@
       </div>
     </div>
     <div class="summary-section">
-      <TopRiskyImagesChart :topRiskyImages="topRiskyImages"/>
-      <ImageRiskAssessment :chartData="chartData"/>
-    </div>
-    <div class="table-filter-section">
-      <div class="table-filter">
-        <label class="title">
-          {{ t("imageScanner.images.filters.imageList.image") }}
-        </label>
-        <LabeledSelect
-          v-model:value="selectedImage"
-          :options="[]"
-          :close-on-select="true"
-          :multiple="false"
-        />
-      </div>
-      <div class="table-filter">
-        <label class="title">
-          {{ t("imageScanner.images.filters.imageList.severity") }}
-        </label>
-        <LabeledSelect
-          v-model:value="selectedSeverity"
-          :options="[]"
-          :close-on-select="true"
-          :multiple="false"
-        />
-      </div>
-      <div class="table-filter">
-        <label class="title">
-          {{ t("imageScanner.images.filters.imageList.repository") }}
-        </label>
-        <LabeledSelect
-          v-model:value="selectedRepository"
-          :options="[]"
-          :close-on-select="true"
-          :multiple="false"
-        />
-      </div>
-      <div class="table-filter">
-        <label class="title">
-          {{ t("imageScanner.images.filters.imageList.registry") }}
-        </label>
-        <LabeledSelect
-          v-model:value="selectedRegistry"
-          :options="[]"
-          :close-on-select="true"
-          :multiple="false"
-        />
-      </div>
-    </div>
-    <div class="table-area">
-
+      <TopRiskyImagesChart :topRiskyImages="preprocessedDataset.topRiskyImages"/>
+      <ImageRiskAssessment :chartData="preprocessedDataset.chartData"/>
     </div>
+    <SortableTable
+      :has-advanced-filtering="false"
+      :namespaced="false"
+      :row-actions="false"
+      :force-update-live-and-delayed="0"
+      :use-query-params-for-simple-filtering="true"
+      :sub-expandable="isGrouped"
+      :sub-rows="isGrouped"
+      :sub-expand-column="isGrouped"
+      :rows="isGrouped ? preprocessedDataset.rowsByRepo : rows"
+      :headers="isGrouped ? REPO_BASED_TABLE : IMAGE_LIST_TABLE"
+      @selection="onSelectionChange"
+    >
+      <template #header-left>
+        <div class="table-top-left">
+          <DownloadCustomReport
+            class="table-btn" 
+            :selectedRows="selectedRows"
+            :buttonName="t('imageScanner.images.buttons.downloadCustomReport')"
+          />
+        </div>
+      </template>
+      <template #header-right>
+        <div class="table-top-right">
+          <Checkbox 
+            style="margin-top: 8px; width: 180px;"
+            label-key="imageScanner.images.listTable.checkbox.groupByRepo"
+            v-model:value="isGrouped"
+            @update:value="updateData($event)"
+          />
+        </div>
+      </template>
+      <template v-if="isGrouped" #sub-row="{ row, fullColspan }">
+        <tr
+          class="sub-row"
+        >
+          <td :colspan="fullColspan">
+            <SortableTable
+              class="sub-table"
+              :rows="row.images"
+              :headers="REPO_BASED_IMAGE_LIST_TABLE"
+              :search="false"
+              :row-actions="false"
+              :table-actions="false"
+              key-field="id"
+            />
+          </td>
+        </tr>
+      </template>
+    </SortableTable>
   </div>
 
 
 </template>
 
 <script>
+  import SortableTable from "@shell/components/SortableTable";
   import LabeledSelect from "@shell/components/form/LabeledSelect";
+  import DownloadCustomReport from "@sbombastic-image-vulnerability-scanner/components/common/DownloadCustomReport";
   import TopRiskyImagesChart from "@sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart";
   import ImageRiskAssessment from "@sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment"
+  import { images } from "@sbombastic-image-vulnerability-scanner/data/sbombastic.rancher.io.image";
+  import { IMAGE_LIST_TABLE, REPO_BASED_TABLE, REPO_BASED_IMAGE_LIST_TABLE } from "@sbombastic-image-vulnerability-scanner/config/table-headers";
+  import { Checkbox } from '@components/Form/Checkbox';
   export default {
     name: 'imageOverview',
     components: {
       LabeledSelect,
       TopRiskyImagesChart,
       ImageRiskAssessment,
+      SortableTable,
+      DownloadCustomReport,
+      Checkbox,
     },
     data() {
       const filterCveOptions = [
@@ -112,65 +121,13 @@
         this.t('imageScanner.images.filters.image.includeBaseImages')
       ];
       return {
-        topRiskyImages: [
-          {
-            image_name: "struts-attacher:1.0",
-            cve_cnt: {
-              critical: 128,
-              high: 12,
-              medium: 81,
-              low: 256,
-              none: 126,
-            }
-          },
-          {
-            image_name: "imagemagick4.8.5613",
-            cve_cnt: {
-              critical: 7,
-              high: 0,
-              medium: 1028,
-              low: 24,
-              none: 18,
-            }
-          },
-          {
-            image_name: "centos7.7.1908",
-            cve_cnt: {
-              critical: 72,
-              high: 0,
-              medium: 164,
-              low: 0,
-              none: 7,
-            }
-          },
-          {
-            image_name: "nginx1.19.10",
-            cve_cnt: {
-              critical: 150,
-              high: 5,
-              medium: 850,
-              low: 600,
-              none: 73,
-            }
-          },
-          {
-            image_name: "docker-compose:1.29.2",
-            cve_cnt: {
-              critical: 35,
-              high: 2,
-              medium: 450,
-              low: 120,
-              none: 9,
-            }
-          },
-        ],
-        chartData: {
-          critical: 1627,
-          high: 353,
-          medium: 246,
-          low: 1265,
-          none: 293,
-        },
+        rows: images,
+        REPO_BASED_TABLE: REPO_BASED_TABLE,
+        IMAGE_LIST_TABLE: IMAGE_LIST_TABLE,
+        REPO_BASED_IMAGE_LIST_TABLE: REPO_BASED_IMAGE_LIST_TABLE,
+        isGrouped: false,
+        selectedRows: [],
+        preprocessedDataset: {},
         filterCveOptions,
         filterImageOptions,
         selectedCveFilter: filterCveOptions[0],
@@ -183,12 +140,82 @@
     },
 
     async fetch() {
-      
+      this.preprocessedDataset = this.preprocessData(this.rows);
+      console.log("this.preprocessedDataset", this.preprocessedDataset)
     },
 
     methods: {
       changeImageFilter() {},
-      changeCveFilter() {}
+      changeCveFilter() {},
+      onSelectionChange(selected) {
+        console.log("selected", selected)
+        this.selectedRows = selected || [];
+      },
+      preprocessData(images) {
+        const severityKeys = ['critical', 'high', 'medium', 'low', 'none'];
+        const chartData = {};
+        const repoMap = new Map();
+
+        for (const key of severityKeys) {
+          chartData[key] = 0;
+        }
+
+        const topRiskyImages = images.map(image => {
+          let repoRec = {};
+          const mapKey = `${image.spec.repository},${image.spec.registry}`;
+          const currImageScanResult = {};
+          for (const key of severityKeys) {
+            currImageScanResult[key] = image.spec.scanResult[key];
+          }
+          if (repoMap.has(mapKey)) {
+            const currRepo = repoMap.get(mapKey);
+            for (const key of severityKeys) {
+              currRepo.cveCntByRepo[key] += image.spec.scanResult[key];
+            }
+            currRepo.images.push(
+              {
+                metadata: { name: image.metadata.name },
+                scanResult: currImageScanResult,
+              }
+            );
+            repoMap.set(mapKey, currRepo);
+          } else {
+            repoRec = {
+              repository: image.spec.repository,
+              registry: image.spec.registry,
+              cveCntByRepo: currImageScanResult,
+              images: [
+                {
+                  metadata: { name: image.metadata.name} ,
+                  scanResult: currImageScanResult,
+                }
+              ]
+            }
+            repoMap.set(mapKey, repoRec);
+          }
+          for (const key of severityKeys) {
+            chartData[key] += image.spec.scanResult[key];
+          }
+          return {
+            imageName: image.metadata.name,
+            cveCnt: image.spec.scanResult,
+          }
+        }).sort((a, b) => {
+          for (const key of severityKeys) {
+            const diff = (b.cveCnt[key] || 0) - (a.cveCnt[key] || 0);
+            if (diff !== 0) return diff;
+          }
+          return 0;
+        }).slice(0, 5);
+        return {
+          topRiskyImages,
+          chartData,
+          rowsByRepo: Array.from(repoMap.values())
+        };
+      },
+      updateData(event) {
+        console.log("isGrouped", this.isGrouped);
+      },
     },
 
     computed: {