#200: Bug: Row selection cannot be deselected in layer by grouped and repository view in Image overview and detail pages

Author: xingzhang-suse

pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue

@@ -266,7 +266,7 @@
     <SortableTable
       v-if="safeTableData && safeTableData.length > 0"
       :key="`table-${isGrouped ? 'grouped' : 'ungrouped'}`"
-      :rows="safeTableData"
+      :rows="isGrouped ? layerData : safeTableData"
       :headers="isGrouped ? LAYER_BASED_TABLE : VULNERABILITY_DETAILS_TABLE"
       :has-advanced-filtering="false"
       :namespaced="false"
@@ -365,6 +365,7 @@ export default {
       loadedSbom:                    null,
       // Cache filtered results to prevent selection issues
       cachedFilteredVulnerabilities: [],
+      layerData:                     [],
       // Download dropdown state
       showDownloadDropdown:          false,
       filters:                       {
@@ -433,8 +434,7 @@ export default {
       const metadata = this.currentImage.imageMetadata;
 
       if (metadata?.registryURI && metadata?.repository && metadata?.tag) {
-        // return `${metadata.registryURI}/${metadata.repository}:${metadata.tag}`;
-        return `${ metadata.repository.split('/')[0] }:${ metadata.tag }`;
+        return `${ metadata.registryURI }/${ metadata.repository }:${ metadata.tag }`;
       }
 
       // Fallback to the hash ID if metadata is not available
@@ -669,7 +669,8 @@ export default {
     // Safe data for SortableTable
     safeTableData() {
       if (this.isGrouped) {
-        const layerData = this.vulnerabilitiesByLayer || [];
+        this.layerData = this.vulnerabilitiesByLayer(this.cachedFilteredVulnerabilities) || [];
+        const layerData = this.vulnerabilitiesByLayer(this.cachedFilteredVulnerabilities) || [];
 
         return layerData.filter((item) => item && typeof item === 'object' && item.id);
       } else {
@@ -684,82 +685,6 @@ export default {
       return this.selectedVulnerabilities ? this.selectedVulnerabilities.length : 0;
     },
 
-    // Group vulnerabilities by layer (diffID) - following ImageOverview pattern
-    vulnerabilitiesByLayer() {
-      if (!this.vulnerabilityDetails || !Array.isArray(this.vulnerabilityDetails) || this.vulnerabilityDetails.length === 0) {
-        return [];
-      }
-
-      try {
-        // Group vulnerabilities by diffID (layer identifier)
-        const layerMap = new Map();
-
-        this.vulnerabilityDetails.forEach((vuln) => {
-          if (!vuln || typeof vuln !== 'object') {
-            return; // Skip invalid vulnerabilities
-          }
-
-          const layerId = vuln.diffID || vuln.packagePath || this.t('imageScanner.general.unknown');
-          const mapKey = layerId;
-
-          if (layerMap.has(mapKey)) {
-            const layer = layerMap.get(mapKey);
-
-            if (layer && layer.vulnerabilities && Array.isArray(layer.vulnerabilities)) {
-              layer.vulnerabilities.push(vuln);
-              // Count severity
-              const severity = vuln.severity?.toLowerCase() || 'none';
-
-              if (layer.severityCounts && layer.severityCounts[severity] !== undefined) {
-                layer.severityCounts[severity]++;
-              }
-            }
-          } else {
-            const severityCounts = {
-              critical: 0, high: 0, medium: 0, low: 0, none: 0
-            };
-            const severity = vuln.severity?.toLowerCase() || 'none';
-
-            if (severityCounts[severity] !== undefined) {
-              severityCounts[severity]++;
-            }
-
-            layerMap.set(mapKey, {
-              id:                mapKey,
-              layerId:           this.decodeLayerId(layerId), // Decode layer ID to show meaningful information
-              vulnerabilities:   this.formatVulnerabilityCounts(severityCounts),
-              updated:           this.getLayerUpdatedTime(layerId),
-              size:              this.getLayerSize(layerId),
-              severityCounts,
-              vulnerabilityList: [vuln]
-            });
-          }
-        });
-
-        // Create severity breakdown and sort
-        const result = Array.from(layerMap.values()).map((layer) => {
-          if (!layer || !layer.severityCounts || !layer.vulnerabilityList || !Array.isArray(layer.vulnerabilityList)) {
-            return null;
-          }
-
-          const counts = layer.severityCounts;
-
-          layer.vulnerabilities = this.formatVulnerabilityCounts(counts);
-          layer.updated = this.getLayerUpdatedTime(layer.id);
-          layer.size = this.getLayerSize(layer.id);
-
-          return layer;
-        }).filter((layer) => layer !== null && layer !== undefined).sort((a, b) => {
-          if (!a || !b) return 0;
-
-          return (b.vulnerabilityList?.length || 0) - (a.vulnerabilityList?.length || 0);
-        });
-
-        return result;
-      } catch (error) {
-        return [];
-      }
-    },
   },
 
   watch: {
@@ -1381,7 +1306,80 @@ export default {
         link.click();
         document.body.removeChild(link);
       }
-    }
+    },
+
+    // Group vulnerabilities by layer (diffID) - following ImageOverview pattern
+    vulnerabilitiesByLayer(vulnerabilityReport) {
+      try {
+        // Group vulnerabilities by diffID (layer identifier)
+        const layerMap = new Map();
+
+        vulnerabilityReport.forEach((vuln) => {
+          if (!vuln || typeof vuln !== 'object') {
+            return; // Skip invalid vulnerabilities
+          }
+
+          const layerId = vuln.diffID || vuln.packagePath || this.t('imageScanner.general.unknown');
+          const mapKey = layerId;
+
+          if (layerMap.has(mapKey)) {
+            const layer = layerMap.get(mapKey);
+
+            if (layer && layer.vulnerabilities && Array.isArray(layer.vulnerabilities)) {
+              layer.vulnerabilities.push(vuln);
+              // Count severity
+              const severity = vuln.severity?.toLowerCase() || 'none';
+
+              if (layer.severityCounts && layer.severityCounts[severity] !== undefined) {
+                layer.severityCounts[severity]++;
+              }
+            }
+          } else {
+            const severityCounts = {
+              critical: 0, high: 0, medium: 0, low: 0, none: 0
+            };
+            const severity = vuln.severity?.toLowerCase() || 'none';
+
+            if (severityCounts[severity] !== undefined) {
+              severityCounts[severity]++;
+            }
+
+            layerMap.set(mapKey, {
+              id:                mapKey,
+              layerId:           this.decodeLayerId(layerId), // Decode layer ID to show meaningful information
+              vulnerabilities:   this.formatVulnerabilityCounts(severityCounts),
+              updated:           this.getLayerUpdatedTime(layerId),
+              size:              this.getLayerSize(layerId),
+              severityCounts,
+              vulnerabilityList: [vuln]
+            });
+          }
+        });
+
+        // Create severity breakdown and sort
+        const result = Array.from(layerMap.values()).map((layer) => {
+          if (!layer || !layer.severityCounts || !layer.vulnerabilityList || !Array.isArray(layer.vulnerabilityList)) {
+            return null;
+          }
+
+          const counts = layer.severityCounts;
+
+          layer.vulnerabilities = this.formatVulnerabilityCounts(counts);
+          layer.updated = this.getLayerUpdatedTime(layer.id);
+          layer.size = this.getLayerSize(layer.id);
+
+          return layer;
+        }).filter((layer) => layer !== null && layer !== undefined).sort((a, b) => {
+          if (!a || !b) return 0;
+
+          return (b.vulnerabilityList?.length || 0) - (a.vulnerabilityList?.length || 0);
+        });
+
+        return result;
+      } catch (error) {
+        return [];
+      }
+    },
   },
 };
 </script>

pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue

@@ -42,7 +42,7 @@ export default {
       };
     }
 
-    if ( this.value.spec.scanInterval == null) {
+    if ( this.value.spec.scanInterval === null) {
       this.value.spec.scanInterval = SCAN_INTERVALS.MANUAL;
     }
 

pkg/sbombastic-image-vulnerability-scanner/models/sbombastic.rancher.io.registry.js

@@ -1,6 +1,5 @@
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { PRODUCT_NAME, PAGE, RESOURCE } from '@pkg/types';
-import _ from 'lodash';
 export default class Registry extends SteveModel {
   get _availableActions() {
     // Remove the default actions we don't want

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue

@@ -304,9 +304,11 @@ export default {
         return imageMatch && severityMatch && repositoryMatch && registryMatch && platformMatch;
       });
 
+      this.rowsByRepo = this.preprocessData(filteredRows);
+
       return {
         rows:       filteredRows,
-        rowsByRepo: this.preprocessData(filteredRows)
+        rowsByRepo: this.rowsByRepo,
       };
     },
     customActions() {