neuvector · rushk014 · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025
diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/ScanButton.vue
@@ -55,7 +55,7 @@ export default {
             } finally {
                 setTimeout(() => {
                     this.reloadFn(true);
-                }, 1000);
+                }, 2000);
             }
         });
     },

diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/common/TextWithPopedDetail.vue b/pkg/sbombastic-image-vulnerability-scanner/components/common/TextWithPopedDetail.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="text-with-pop" ref="trigger" @mouseenter="checkPosition">
+    <span style="margin-left: 8px;">{{ value }}</span>
+    <div class="message-hover-overlay" :class="{ 'show-top': showOnTop }">
+        <div class="title">{{ detail.title }}</div>
+        <div class="message-wrap">
+            <div v-if="getStatusDotClass" :class="getStatusDotClass"></div>
+            <div class="message">{{ detail.message }}</div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'TextWithPopedDetail',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    detail: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showOnTop: false
+    }
+  },
+  methods: {
+    checkPosition() {
+      const trigger = this.$refs.trigger.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      this.showOnTop = (viewportHeight - trigger.bottom < 300);
+    }
+  },
+  computed: {
+    getStatusDotClass() {
+        if (this.detail.type === 'error') {
+            return 'dot failed';
+        } else {
+            return '';
+        }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+   .message-hover-overlay {
+        position: absolute;
+        top: calc(100% + 10px);
+        right: 10px;
+        background: white;
+        border: 1px solid #eee;
+        padding: 16px;
+        z-index: 100;
+        width: 360px;
+        word-wrap: break-word;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        .title {
+            font-weight: bold;
+            font-size: 16px;
+            color: var(--text-primary);
+            margin-bottom: 12px;
+        }
+        .message {
+            color: var(--text-secondary);
+            font-size: 14px;
+
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
+    }
+    .message-hover-overlay.show-top {
+        top: auto;
+        bottom: calc(100% + 10px);
+        margin-bottom: 8px;
+    }
+    .text-with-pop {
+      color: var(--text-error);
+      cursor: pointer;
+      position: relative;
+      display: inline-block;
+      &:hover .message-hover-overlay {
+        display: block;
+      }
+      .message-hover-overlay {
+        display: none;
+      }
+      text-decoration: underline;
+    }
+    .message-wrap {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        .dot {
+            width: 8px;
+            height: 8px;
+            margin-top: 4px;
+            min-width: 8px;
+            border-radius: 50%;
+            border-width: 1px;
+            border-style: solid;
+            &.pending {
+                background-color: var(--status-pending);
+                border-color: var(--status-pending);
+            }
+            &.scheduled {
+                background-color: var(--status-scheduled);
+                border-color: var(--status-scheduled);
+            }
+            &.inprogress {
+                background-color: var(--status-inprogress);
+                border-color: var(--status-inprogress);
+            }
+            &.complete {
+                background-color: var(--status-complete);
+                border-color: var(--status-complete);
+            }
+            &.failed {
+                background-color: var(--status-failed);
+                border-color: var(--status-failed);
+            }
+            &.none {
+                background-color: var(--status-none);
+                border-color: #DCDEE4;
+            }
+
+            --status-pending: #DCDEE7;
+            --status-scheduled: #0FCFF0;
+            --status-inprogress: #3D98D3;
+            --status-complete: #5BB04F;
+            --status-failed: #DE2136;
+            --status-none: #FFFFFF;
+        }
+        .message {
+            color: var(--text-secondary);
+            font-size: 14px;
+            word-break: break-word;
+        }   
+    }
+
+</style>
diff --git a/pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts b/pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts
@@ -78,13 +78,12 @@ export function init($plugin: IPlugin, store: any) {
     },
   });
 
-    basicType([
-        PAGE.IMAGE_OVERVIEW,
-        PAGE.VULNERABILITY_OVERVIEW,
-        PAGE.VEX_MANAGEMENT,
-        //"demo"
-    ]);
-
-  basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT], 'Advanced');
+  basicType([
+      PAGE.IMAGE_OVERVIEW,
+      PAGE.VULNERABILITY_OVERVIEW,
+      //"demo"
+  ]);
+  // Prepend spaces on group name, as Rancher 2.12 render group name algin with sidemenu
+  basicType([PAGE.REGISTRIES, PAGE.VEX_MANAGEMENT], '&nbsp;&nbsp;&nbsp;&nbsp;Advanced');
 
 }
diff --git a/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue b/pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue
@@ -49,6 +49,8 @@ export default {
     return {
       inStore: this.$store.getters['currentProduct'].inStore,
       errors: null,
+      PAGE,
+      PRODUCT_NAME,
     };
   },
 
@@ -76,6 +78,9 @@ export default {
     REGISTRY_TYPE_OPTIONS: function() {
       return REGISTRY_TYPE_OPTIONS;
     },
+    doneLocationOverride() {
+      return `/c/${this.$route.params.cluster}/${ this.PRODUCT_NAME }/${this.PAGE.REGISTRIES}`;
+    },
   },
 
   methods: {
@@ -99,17 +104,6 @@ export default {
         });
     },
 
-    cancel() {
-      console.log('cancel done');
-      this.done();
-      this.$router.push({
-        name: `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
-        params: {
-          cluster: this.$route.params.cluster,
-          product: PRODUCT_NAME
-        }
-      });
-    },
     doneRoute() {
       console.log('doneRoute');
       return `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`;
@@ -142,7 +136,7 @@ export default {
         :cancel-event="true"
         @error="(e) => (errors = e)"
         @finish="apply"
-        @cancel="cancel"
+        @cancel="done"
     >
       <NameNsDescription
           :value="value"

diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/PreviousScanCell.vue
@@ -1,8 +1,10 @@
 <script>
 import ProgressCell from "@sbombastic-image-vulnerability-scanner/formatters/ProgressCell";
+import TextWithPopedDetail from "@sbombastic-image-vulnerability-scanner/components/common/TextWithPopedDetail";
 export default {
   components: {
-    ProgressCell
+    ProgressCell,
+    TextWithPopedDetail
   },
   name: "PreviousScanCell",
   props: {
@@ -34,10 +36,15 @@ export default {
         <div class="dot" :class="getStatusDotClass(row)"></div>
         <div class="status" :class="getStatusLabelClass(row)">{{ getStatusText(row) }}</div> 
         <div v-if="row.prevProgress">
-          <span>{{ t("imageScanner.general.at") }}</span><ProgressCell style="display: inline-block;" :row="{ progress: row.prevProgress, error: null}" />
+          <span>{{ t("imageScanner.general.at") }}</span><ProgressCell style="display: inline-block;" :row="{ metadata: { name: row.metadata.name }, progress: row.prevProgress, progressDetail: row.prevProgressDetail, error: null}" />
         </div>
         <div v-if="row.prevScanStatus.toLowerCase() === 'failed' && row.PrevError">
-          <span class="error-message">|<span style="margin-left: 8px;">{{ t("imageScanner.general.error") }}</span></span>
+          <span>|
+            <TextWithPopedDetail
+              :value="t('imageScanner.general.error')"
+              :detail="{ title: `${row.metadata.name} - ${t('imageScanner.registries.configuration.scanTable.header.error')}`, message: row.PrevError, type: 'error' }"
+            />
+          </span>
         </div>
     </div>
 </template>

diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/Progress.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/Progress.vue
@@ -0,0 +1,34 @@
+<script>
+export default {
+  props: {
+    row: {
+      type: Object,
+      required: true
+    },
+  },
+  name: 'ProgressCell',
+  computed: {
+    progress() {
+      return this.row.status.scannedImagesCount && this.row.status.imagesCount ? Math.round((this.row.status.scannedImagesCount / this.row.status.imagesCount) * 100) : null;
+    },
+  }
+};
+</script>
+<template>
+  <div class="progress-cell">
+    <span v-if="progress" class="progress-text">{{ progress }}%</span>
+    <span v-else class="progress-text text-muted">n/a</span>
+  </div>
+</template>
+<style lang="scss" scoped>
+.progress-cell {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: var(--text-secondary);
+
+  .progress-text {
+    margin-left: 8px;
+  }
+}
+</style> 
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ProgressCell.vue
@@ -1,22 +1,33 @@
 <script>
+import TextWithPopedDetail from '@sbombastic-image-vulnerability-scanner/components/common/TextWithPopedDetail';
 export default {
   props: {
     row: {
       type: Object,
       required: true
     }
-  }
+  },
+  components: {
+    TextWithPopedDetail
+  },
+  name: 'ProgressCell',
 };
 </script>
 <template>
   <div class="progress-cell">
-    <span v-if="row.progress" class="progress-text">{{ row.progress }}%
+    <span v-if="row.progress">
+      <TextWithPopedDetail
+          :value="`${row.progress}%`"
+          :detail="{ title: `${row.metadata.name} - ${row.progress}%`, message: row.progressDetail, type: 'info' }"
+      />
       <span v-if="row.error">|
-        <span style="margin-left: 4px;">{{ t("imageScanner.general.error") }}</span>
+        <TextWithPopedDetail
+          :value="t('imageScanner.general.error')"
+          :detail="{title: `${row.metadata.name} - ${t('imageScanner.registries.configuration.scanTable.header.error')}`, message: row.error, type: 'error' }"
+        />
       </span>
     </span>
     <span v-else class="progress-text text-muted">n/a</span>
-
   </div>
 </template>
 <style lang="scss" scoped>
@@ -25,9 +36,5 @@ export default {
   align-items: center;
   font-size: 14px;
   color: var(--text-secondary);
-
-  .progress-text {
-    margin-left: 8px;
-  }
 }
 </style> 
diff --git a/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanErrorCell.vue b/pkg/sbombastic-image-vulnerability-scanner/formatters/ScanErrorCell.vue
@@ -33,7 +33,7 @@ export default {
 <style lang="scss" scoped>
     .scan-error-cell {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         gap: 8px;
         color: var(--text-secondary);
         font-size: 14px;
@@ -43,6 +43,8 @@ export default {
         .dot {
             width: 8px;
             height: 8px;
+            min-width: 8px;
+            margin-top: 4px;
             border-radius: 50%;
             border-width: 1px;
             border-style: solid;

diff --git a/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml b/pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml
@@ -4,7 +4,7 @@ imageScanner:
   registries:
     title: Registries configuration
     button:
-      addNew: Add new
+      addNew: Create
       refresh: Refresh data
       startScan: Start scan
       delete: Delete