From 4d5a7300955b804cf3db6b692a43b30c10a99206 Mon Sep 17 00:00:00 2001
From: Rush Kapoor <rush.kapoor@berkeley.edu>
Date: Thu, 31 Jul 2025 13:33:09 -0700
Subject: [PATCH 1/3] Refactor Registry metadata as common component

---
 .../components/RegistryDetails.vue            |  74 ++++++-----
 .../components/common/RancherMeta.vue         |  33 +++++
 .../components/common/RancherMetaProperty.vue | 121 +++++++++++++-----
 .../components/common/RancherMetaTags.vue     |  57 ---------
 .../components/common/RegisterStatusBadge.vue |   1 +
 .../sbombastic-image-vulnerability-scanner.ts |  26 ++--
 6 files changed, 178 insertions(+), 134 deletions(-)
 create mode 100644 pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMeta.vue
 delete mode 100644 pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaTags.vue

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
index 2ac2893..1e977f0 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
@@ -8,7 +8,7 @@
               <RouterLink to="../">{{ t('imageScanner.registries.title') }}:</RouterLink> 
               {{ $route.params.id }}
             </span>
-            <BadgeState color="bg-error" label="Failed"></BadgeState>
+            <RegisterStatusBadge status="failed" />
           </div>
           <span class="resource-header-description">
             Registry configuration description
@@ -25,34 +25,29 @@
           </button>
         </div>
       </div>
-      <div class="rancher-meta">
-        <div class="meta-widget">
-          <RancherMetaProperty :label="t('imageScanner.registries.configuration.meta.registry')" :value="registry.spec.uri"/>
-          <RancherMetaProperty :label="t('imageScanner.registries.configuration.meta.namespace')" :value="registry.metadata.namespace"/>
-        </div>
-        <div class="meta-widget">
-          <RancherMetaProperty :label="t('imageScanner.registries.configuration.meta.repositories')" :value="registry.spec.repositories.length"/>
-          <RancherMetaTags :tags="registry.spec.repositories" />
-        </div>
-        <div class="meta-widget"></div>
-      </div>
+      <RancherMeta :properties="registryMetaProperties" />
     </div>
     Recent scans
+
   </div>
 </template>
 
 <script>
   import { BadgeState } from '@rancher/components';
   import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
-  import RancherMetaProperty from './common/RancherMetaProperty.vue';
-  import RancherMetaTags from './common/RancherMetaTags.vue';
+  import RancherMeta from './common/RancherMeta.vue';
+  import RegisterStatusBadge from './common/RegisterStatusBadge.vue';
 
   export default {
     name: 'registryDetails',
     components: {
       BadgeState,
-      RancherMetaProperty,
-      RancherMetaTags
+      RancherMeta,
+      RegisterStatusBadge
+    },
+    data() {
+      return {
+      }
     },
     async fetch() {
       await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${this.$route.params.id}` });
@@ -60,6 +55,37 @@
     computed: {
       registry() {
         return this.$store.getters['cluster/byId'](RESOURCE.REGISTRY, `${this.$route.params.ns}/${this.$route.params.id}`);
+      },
+      registryMetaProperties() {
+        return [
+          {
+            type: 'text',
+            label: this.t('imageScanner.registries.configuration.meta.registry'),
+            value: this.registry.spec.uri
+          },
+          {
+            type: 'text',
+            label: this.t('imageScanner.registries.configuration.meta.repositories'),
+            value: this.registry.spec.repositories.length
+          },
+          {
+            type: 'text',
+            label: this.t('imageScanner.registries.configuration.meta.schedule')
+          },
+          {
+            type: 'text',
+            label: this.t('imageScanner.registries.configuration.meta.namespace'),
+            value: this.registry.metadata.namespace
+          },
+          {
+            type: 'tags',
+            tags: this.registry.spec.repositories || []
+          },
+          {
+            type: 'text',
+            value: this.registry.metadata.schedule || '',
+          }
+        ];
       }
     }
   }
@@ -92,22 +118,6 @@
     /* style */
     border-bottom: 1px dashed #DCDEE7;
 
-    .rancher-meta {
-      display: flex;
-      align-items: flex-start;
-      gap: 24px;
-      align-self: stretch;
-
-      .meta-widget {
-        display: flex;
-        padding-right: 16px;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 4px;
-        flex: 1 0 0;
-      }
-    }
-
     .header {
       /* layout */
       display: flex;
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMeta.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMeta.vue
new file mode 100644
index 0000000..5e26373
--- /dev/null
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMeta.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="rancher-meta">
+    <RancherMetaProperty v-for="property in properties" :property="property"/>
+  </div>
+</template>
+
+<script>
+import RancherMetaProperty from './RancherMetaProperty.vue';
+
+export default {
+  name: 'RancherMeta',
+  components: {
+    RancherMetaProperty
+  },
+  props: {
+    properties: {
+      type: Array,
+      default: () => []
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .rancher-meta {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: flex-start;
+    row-gap: 4px;
+    column-gap: 24px;
+    align-self: stretch;
+  }
+</style>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaProperty.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaProperty.vue
index c580699..f5e35da 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaProperty.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaProperty.vue
@@ -1,59 +1,110 @@
 <template>
   <div class="property">
-    <div class="label">
-      {{ label }}
+    <div v-if="property.type === 'text'" class="text">
+      <div v-if="property.label" class="label">
+        {{ property.label }}
+      </div>
+      <div v-if="property.value" class="value">
+        {{ property.value }}
+      </div>
     </div>
-    <div class="value">
-      {{ value }}
+    <div v-else-if="property.type === 'tags'" class="tags">
+      <div class="tags">
+        <div v-for="tag in property.tags" :key="tag" class="tag">
+          <span class="tag-text">{{ tag }}</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { MetadataProperty } from '@sbombastic-image-vulnerability-scanner/types';
+import { PropType } from 'vue';
+
 export default {
   name: 'RancherMetaProperty',
   props: {
-    label: {
-      type: String,
-      default: ''
-    },
-    value: {
-      type: String,
-      default: ''
+    property: {
+      type: Object as PropType<MetadataProperty>,
+      required: true
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.property {
-  display: flex;
-  align-items: flex-start;
-  align-self: stretch;
-  
-  /* typography */
-  font-family: Lato;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 21px; /* 150% */
-
-  .label {
+  .property {
+    padding-right: 16px;
+    gap: 4px;
+    flex: 1 0 0;
+  }
+
+  .text {
     display: flex;
-    width: 144px;
-    align-items: center;
-    gap: 8px;
+    align-items: flex-start;
+    align-self: stretch;
+    
     /* typography */
-    color: #717179;
+    font-family: Lato;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px; /* 150% */
+
+    .label {
+      display: flex;
+      width: 144px;
+      align-items: center;
+      gap: 8px;
+      /* typography */
+      color: #717179;
+    }
+
+    .value {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1 0 0;
+      /* typography */
+      color: #141419
+    }
   }
 
-  .value {
+  .tags {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    align-content: flex-start;
     gap: 8px;
-    flex: 1 0 0;
-    /* typography */
-    color: #141419
+    align-self: stretch;
+    flex-wrap: wrap;
+    /* style */
+    border-radius: 4px;
+
+    .tag {
+      display: flex;
+      padding: 1px 8px;
+      align-items: center;
+      gap: 8px;
+      /* style */
+      border-radius: 4px;
+      background: #EDEFF3;
+
+      .tag-text {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        line-clamp: 1;
+        /* typography */
+        overflow: hidden;
+        color: #141419;
+        text-overflow: ellipsis;
+        font-family: Lato;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 169.231% */
+      }
+    }
   }
-}
 </style>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaTags.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaTags.vue
deleted file mode 100644
index b6b3f8b..0000000
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/RancherMetaTags.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="tags">
-    <div v-for="tag in tags" :key="tag" class="tag">
-      <span class="tag-text">{{ tag }}</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RancherMetaProperty',
-  props: {
-    tags: {
-      type: Array,
-      default: () => []
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tags {
-  display: flex;
-  align-items: flex-start;
-  align-content: flex-start;
-  gap: 8px;
-  align-self: stretch;
-  flex-wrap: wrap;
-  /* style */
-  border-radius: 4px;
-
-  .tag {
-    display: flex;
-    padding: 1px 8px;
-    align-items: center;
-    gap: 8px;
-    /* style */
-    border-radius: 4px;
-    background: #EDEFF3;
-
-    .tag-text {
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      /* typography */
-      overflow: hidden;
-      color: #141419;
-      text-overflow: ellipsis;
-      font-family: Lato;
-      font-size: 13px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 22px; /* 169.231% */
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue
index 0cdcc0e..e8cfc6a 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/common/RegisterStatusBadge.vue
@@ -74,6 +74,7 @@
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
+      line-clamp: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       font-family: Lato;
diff --git a/pkg/sbombastic-image-vulnerability-scanner/types/sbombastic-image-vulnerability-scanner.ts b/pkg/sbombastic-image-vulnerability-scanner/types/sbombastic-image-vulnerability-scanner.ts
index c223118..35abba8 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/types/sbombastic-image-vulnerability-scanner.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/types/sbombastic-image-vulnerability-scanner.ts
@@ -1,13 +1,19 @@
-export const PRODUCT_NAME = 'imageScanner';
+export const PRODUCT_NAME = "imageScanner";
 export const RESOURCE = {
-    REGISTRY: "sbombastic.rancher.io.registry",
-    SCAN_JOB: "sbombastic.rancher.io.scanjob",
+  REGISTRY: "sbombastic.rancher.io.registry",
+  SCAN_JOB: "sbombastic.rancher.io.scanjob",
 };
 export const PAGE = {
-    DASHBOARD: "dashboard",
-    REGISTRIES: "registries",
-    IMAGE_OVERVIEW: "image_overview",
-    IMAGE_DETAIL: "image_detail",
-    VULNERABILITY_OVERVIEW: "vulnerability_overview",
-    CVE_DETAIL: "cve_detail",
-};
\ No newline at end of file
+  DASHBOARD: "dashboard",
+  REGISTRIES: "registries",
+  IMAGE_OVERVIEW: "image_overview",
+  IMAGE_DETAIL: "image_detail",
+  VULNERABILITY_OVERVIEW: "vulnerability_overview",
+  CVE_DETAIL: "cve_detail",
+};
+export interface MetadataProperty {
+  type: "text" | "tags";
+  label?: string;
+  value?: string;
+  tags?: string[];
+}

From cd458ad6ec2e1eaac6cd7b286735f6f938849ac4 Mon Sep 17 00:00:00 2001
From: Rush Kapoor <rush.kapoor@berkeley.edu>
Date: Mon, 4 Aug 2025 14:41:33 -0700
Subject: [PATCH 2/3] Add Registry details scan history table using mock data

---
 .../components/RegistryDetails.vue            |  41 ++++-
 .../config/table-headers.ts                   | 158 +++++++++++-------
 .../l10n/en-us.yaml                           |   8 +
 3 files changed, 149 insertions(+), 58 deletions(-)

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
index 1e977f0..f3bbc1d 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
@@ -28,25 +28,58 @@
       <RancherMeta :properties="registryMetaProperties" />
     </div>
     Recent scans
-
+    <ResourceTable
+      :headers="headers"
+      :rows="scanHistory"
+      :namespaced="false"
+      :rowActions="false"
+      :search="false"
+      class="table"
+    />
   </div>
 </template>
 
 <script>
   import { BadgeState } from '@rancher/components';
   import { RESOURCE } from '@sbombastic-image-vulnerability-scanner/types';
+  import ResourceTable from "@shell/components/ResourceTable";
   import RancherMeta from './common/RancherMeta.vue';
   import RegisterStatusBadge from './common/RegisterStatusBadge.vue';
+  import { REGISTRY_SCAN_HISTORY_TABLE } from '@sbombastic-image-vulnerability-scanner/config/table-headers';
 
   export default {
     name: 'registryDetails',
     components: {
       BadgeState,
+      ResourceTable,
       RancherMeta,
-      RegisterStatusBadge
+      RegisterStatusBadge,
     },
     data() {
       return {
+        scanHistory: [
+          {
+            status: 'completed',
+            timestamp: '2023-10-01T12:00:00Z',
+            progress: '100',
+            imagesScanned: 50,
+            imagesFound: 45,
+            errors: [],
+          },
+          {
+            status: 'failed',
+            timestamp: '2023-10-02T12:00:00Z',
+            progress: '35',
+            imagesScanned: 1339,
+            imagesFound: 3826,
+            errors: [
+              {
+                message: "Not enough resources to complete the scan. Could not connect to proxyu",
+              }
+            ],
+          },
+        ],
+        headers: REGISTRY_SCAN_HISTORY_TABLE
       }
     },
     async fetch() {
@@ -105,6 +138,10 @@
     gap: 24px;
     flex: 1 0 0;
     align-self: stretch;
+
+    .table {
+      width: 100%;
+    }
   }
 
   .about {
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
index 0bd9940..ace6e2c 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
@@ -1,57 +1,103 @@
 import { elapsedTime } from "@shell/utils/time";
-export const REGISTRY_SCAN_TABLE =[
-    {
-        name:          "scan",
-        labelKey:      "imageScanner.registries.registrytable.header.scan",
-        value:         'metadata.name',
-        formatter:     "ScanNameCell",
-        sort:          "scan",
-    },
-    {
-        name:          "registry",
-        labelKey:      "imageScanner.registries.registrytable.header.registry",
-        value:         "registry.id",
-        sort:          "id",
-    },
-    {
-        name:          "namespace",
-        labelKey:      "imageScanner.registries.registrytable.header.namespace",
-        value:         "metadata.namespace",
-        sort:          "metadata.namespace",
-    },
-    {
-        name:          "repositories",
-        labelKey:      "imageScanner.registries.registrytable.header.repos",
-        value:         "registry.spec.repositories",
-        sort:          "registry.spec.repositories",
-    },
-    {
-        name:          "schedule",
-        labelKey:      "imageScanner.registries.registrytable.header.schedule",
-        value:         "schedule",
-        getValue:      (row: any) => elapsedTime(row.schedule * 3600 * 1000).label,
-        sort:          "schedule",
-    },
-    {
-        name:          "status",
-        labelKey:      "imageScanner.registries.registrytable.header.status",
-        value:         "registry.status.conditions.0.type",
-        formatter:     "RegistryStatusCellBadge",
-        sort:          "registry.status.conditions.0.type",
-    },
-    {
-        name:          "_progress",
-        labelKey:      "imageScanner.registries.registrytable.header.progress",
-        value:         "progress",
-        getValue:      (row: any) => row.progress.toString(),
-        formatter:     "ProgressCell",
-        sort:          "progress",
-    },
-    {
-        name:          "previousScan",
-        labelKey:      "imageScanner.registries.registrytable.header.prevScan",
-        value:         "status.conditions.1.type",
-        formatter:     "PreviousScanCell",
-        sort:          "status.conditions.1.type",
-    },
-];
\ No newline at end of file
+
+export const REGISTRY_SCAN_TABLE = [
+  {
+    name: "scan",
+    labelKey: "imageScanner.registries.registrytable.header.scan",
+    value: "metadata.name",
+    formatter: "ScanNameCell",
+    sort: "scan",
+  },
+  {
+    name: "registry",
+    labelKey: "imageScanner.registries.registrytable.header.registry",
+    value: "registry.id",
+    sort: "id",
+  },
+  {
+    name: "namespace",
+    labelKey: "imageScanner.registries.registrytable.header.namespace",
+    value: "metadata.namespace",
+    sort: "metadata.namespace",
+  },
+  {
+    name: "repositories",
+    labelKey: "imageScanner.registries.registrytable.header.repos",
+    value: "registry.spec.repositories",
+    sort: "registry.spec.repositories",
+  },
+  {
+    name: "schedule",
+    labelKey: "imageScanner.registries.registrytable.header.schedule",
+    value: "schedule",
+    getValue: (row: any) => elapsedTime(row.schedule * 3600 * 1000).label,
+    sort: "schedule",
+  },
+  {
+    name: "status",
+    labelKey: "imageScanner.registries.registrytable.header.status",
+    value: "registry.status.conditions.0.type",
+    formatter: "RegistryStatusCellBadge",
+    sort: "registry.status.conditions.0.type",
+  },
+  {
+    name: "_progress",
+    labelKey: "imageScanner.registries.registrytable.header.progress",
+    value: "progress",
+    getValue: (row: any) => row.progress.toString(),
+    formatter: "ProgressCell",
+    sort: "progress",
+  },
+  {
+    name: "previousScan",
+    labelKey: "imageScanner.registries.registrytable.header.prevScan",
+    value: "status.conditions.1.type",
+    formatter: "PreviousScanCell",
+    sort: "status.conditions.1.type",
+  },
+];
+
+export const REGISTRY_SCAN_HISTORY_TABLE = [
+  {
+    name: "status",
+    labelKey: "imageScanner.registries.configuration.scanTable.header.status",
+    value: "status",
+    formatter: "RegisterStatusCellBadge",
+    sort: "status",
+  },
+  {
+    name: "since",
+    labelKey: "imageScanner.registries.configuration.scanTable.header.since",
+    value: "timestamp",
+    formatter: "Date",
+    sort: "timestamp",
+  },
+  {
+    name: "progress",
+    labelKey: "imageScanner.registries.configuration.scanTable.header.progress",
+    value: "progress",
+    getValue: (row: any) => row.progress.toString(),
+    formatter: "Percentage",
+    sort: "progress",
+  },
+  {
+    name: "imagesScanned",
+    labelKey:
+      "imageScanner.registries.configuration.scanTable.header.imagesScanned",
+    value: "imagesScanned",
+    sort: "imagesScanned",
+  },
+  {
+    name: "imagesFound",
+    labelKey:
+      "imageScanner.registries.configuration.scanTable.header.imagesFound",
+    value: "imagesFound",
+    sort: "imagesFound",
+  },
+  {
+    name: "errors",
+    labelKey: "imageScanner.registries.configuration.scanTable.header.errors",
+    value: "errors",
+    sort: "errors",
+  },
+];
diff --git a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
index d98504c..b981937 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
+++ b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
@@ -26,6 +26,14 @@ imageScanner:
         namespace: Namespace
         repositories: Repositories
         schedule: Schedule
+      scanTable:
+        header:
+          status: Status
+          since: Since
+          progress: Progress
+          imagesScanned: Images scan
+          imagesFound: Images found
+          errors: Error(s)
   images:
     title: Images
     downloadReport: Download full report

From 50e350d4b2cd3c4eceb456d1c7f241b9ab39499b Mon Sep 17 00:00:00 2001
From: Rush Kapoor <rush.kapoor@berkeley.edu>
Date: Mon, 4 Aug 2025 15:18:21 -0700
Subject: [PATCH 3/3] Update Registry details to use ScanJob & Registry CR data

---
 .../components/RegistryDetails.vue            | 113 ++++++++----------
 .../config/table-headers.ts                   |   4 +-
 2 files changed, 54 insertions(+), 63 deletions(-)

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
index f3bbc1d..631435d 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
+++ b/pkg/sbombastic-image-vulnerability-scanner/components/RegistryDetails.vue
@@ -8,7 +8,7 @@
               <RouterLink to="../">{{ t('imageScanner.registries.title') }}:</RouterLink> 
               {{ $route.params.id }}
             </span>
-            <RegisterStatusBadge status="failed" />
+            <RegisterStatusBadge :status="registryStatus" />
           </div>
           <span class="resource-header-description">
             Registry configuration description
@@ -25,7 +25,7 @@
           </button>
         </div>
       </div>
-      <RancherMeta :properties="registryMetaProperties" />
+      <RancherMeta :properties="registryMetadata" />
     </div>
     Recent scans
     <ResourceTable
@@ -57,70 +57,61 @@
     },
     data() {
       return {
-        scanHistory: [
-          {
-            status: 'completed',
-            timestamp: '2023-10-01T12:00:00Z',
-            progress: '100',
-            imagesScanned: 50,
-            imagesFound: 45,
-            errors: [],
-          },
-          {
-            status: 'failed',
-            timestamp: '2023-10-02T12:00:00Z',
-            progress: '35',
-            imagesScanned: 1339,
-            imagesFound: 3826,
-            errors: [
-              {
-                message: "Not enough resources to complete the scan. Could not connect to proxyu",
-              }
-            ],
-          },
-        ],
+        registryStatus: null,
+        registryMetadata: [],
+        scanHistory: [],
         headers: REGISTRY_SCAN_HISTORY_TABLE
       }
     },
     async fetch() {
-      await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${this.$route.params.id}` });
+      await this.$store.dispatch('cluster/find', { type: RESOURCE.SCAN_JOB, id: `${this.$route.params.ns}/${this.$route.params.id}` });
+      let scanJob = this.$store.getters['cluster/byId'](RESOURCE.SCAN_JOB, `${this.$route.params.ns}/${this.$route.params.id}`);
+
+      await this.$store.dispatch('cluster/find', { type: RESOURCE.REGISTRY, id: `${this.$route.params.ns}/${scanJob.spec.registry}` });
+      let registry = this.$store.getters['cluster/byId'](RESOURCE.REGISTRY, `${this.$route.params.ns}/${scanJob.spec.registry}`);
+
+      this.registryStatus = (registry.status.conditions[0].type.toLowerCase() === "discovering" ? "InProgress" : registry.status.conditions[0].type).toLowerCase();
+      this.registryMetadata = [
+        {
+          type: 'text',
+          label: this.t('imageScanner.registries.configuration.meta.registry'),
+          value: registry.spec.uri
+        },
+        {
+          type: 'text',
+          label: this.t('imageScanner.registries.configuration.meta.repositories'),
+          value: registry.spec.repositories.length
+        },
+        {
+          type: 'text',
+          label: this.t('imageScanner.registries.configuration.meta.schedule')
+        },
+        {
+          type: 'text',
+          label: this.t('imageScanner.registries.configuration.meta.namespace'),
+          value: registry.metadata.namespace
+        },
+        {
+          type: 'tags',
+          tags: registry.spec.repositories || []
+        },
+        {
+          type: 'text',
+          value: registry.metadata.schedule || '',
+        }
+      ];
+      
+      this.scanHistory = scanJob.status.conditions.map((rec) => {
+        return {
+          status: rec.type.toLowerCase(),
+          timestamp: rec.lastUpdateTime,
+          progress: rec.progress || 0,
+          imagesScanned: rec.imagesScanned || 0,
+          imagesFound: rec.imagesFound || 0,
+          errors: rec.errors || []
+        };
+      });
     },
-    computed: {
-      registry() {
-        return this.$store.getters['cluster/byId'](RESOURCE.REGISTRY, `${this.$route.params.ns}/${this.$route.params.id}`);
-      },
-      registryMetaProperties() {
-        return [
-          {
-            type: 'text',
-            label: this.t('imageScanner.registries.configuration.meta.registry'),
-            value: this.registry.spec.uri
-          },
-          {
-            type: 'text',
-            label: this.t('imageScanner.registries.configuration.meta.repositories'),
-            value: this.registry.spec.repositories.length
-          },
-          {
-            type: 'text',
-            label: this.t('imageScanner.registries.configuration.meta.schedule')
-          },
-          {
-            type: 'text',
-            label: this.t('imageScanner.registries.configuration.meta.namespace'),
-            value: this.registry.metadata.namespace
-          },
-          {
-            type: 'tags',
-            tags: this.registry.spec.repositories || []
-          },
-          {
-            type: 'text',
-            value: this.registry.metadata.schedule || '',
-          }
-        ];
-      }
-    }
   }
 </script>
 
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
index ace6e2c..3d6eaf0 100644
--- a/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
+++ b/pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts
@@ -62,7 +62,7 @@ export const REGISTRY_SCAN_HISTORY_TABLE = [
     name: "status",
     labelKey: "imageScanner.registries.configuration.scanTable.header.status",
     value: "status",
-    formatter: "RegisterStatusCellBadge",
+    formatter: "RegistryStatusCellBadge",
     sort: "status",
   },
   {
@@ -77,7 +77,7 @@ export const REGISTRY_SCAN_HISTORY_TABLE = [
     labelKey: "imageScanner.registries.configuration.scanTable.header.progress",
     value: "progress",
     getValue: (row: any) => row.progress.toString(),
-    formatter: "Percentage",
+    formatter: "ProgressCell",
     sort: "progress",
   },
   {