fix(images): Fix Image name sorting bug in grouped view (#323)

rushk014 · xingzhang-suse · commit cabeb0e964d9 · 2025-11-05T12:29:25.000-08:00
Refactor image name construction into `constructImageName` util. Generate sortable field for grouped table to use
diff --git a/pkg/sbomscanner-ui-ext/components/ImageDetails.vue b/pkg/sbomscanner-ui-ext/components/ImageDetails.vue
@@ -172,6 +172,7 @@ import VulnerabilityTable from './common/VulnerabilityTable';
 import DownloadSBOMBtn from './common/DownloadSBOMBtn';
 import DownloadFullReportBtn from './common/DownloadFullReportBtn.vue';
 import { getHighestScore, getSeverityNum, getScoreNum } from '../utils/report';
+import { constructImageName } from '@pkg/utils/image';
 
 export default {
   name:       'ImageDetails',
@@ -254,14 +255,7 @@ export default {
     displayImageName() {
       if (!this.currentImage) return this.imageName;
 
-      const metadata = this.currentImage.imageMetadata;
-
-      if (metadata?.registryURI && metadata?.repository && metadata?.tag) {
-        return `${ metadata.registryURI }/${ metadata.repository }:${ metadata.tag }`;
-      }
-
-      // Fallback to the hash ID if metadata is not available
-      return this.imageName;
+      return constructImageName(this.currentImage.imageMetadata) || this.imageName;
     },
 
     // Get the vulnerability report for this image
diff --git a/pkg/sbomscanner-ui-ext/config/table-headers.ts b/pkg/sbomscanner-ui-ext/config/table-headers.ts
@@ -232,7 +232,7 @@ export const REPO_BASED_IMAGE_LIST_TABLE = [
     name:      'image',
     labelKey:  'imageScanner.images.listTable.headers.imageName',
     formatter: 'ImageNameCell',
-    sort:      'name',
+    sort:      'imageReference',
     width:     300,
   },
   {
diff --git a/pkg/sbomscanner-ui-ext/formatters/ImageNameCell.vue b/pkg/sbomscanner-ui-ext/formatters/ImageNameCell.vue
@@ -8,6 +8,7 @@ import {
   PRODUCT_NAME,
   PAGE,
 } from '@pkg/types';
+import { constructImageName } from '@pkg/utils/image';
 export default {
   props: {
     row: {
@@ -23,7 +24,7 @@ export default {
   },
   computed: {
     displayName() {
-      return `${ this.row.imageMetadata?.registryURI }/${ this.row.imageMetadata?.repository }:${ this.row.imageMetadata?.tag }`;
+      return this.row.imageReference ? this.row.imageReference : constructImageName(this.row.imageMetadata);
     }
   }
 };
diff --git a/pkg/sbomscanner-ui-ext/formatters/__tests__/ImageNameCell.spec.ts b/pkg/sbomscanner-ui-ext/formatters/__tests__/ImageNameCell.spec.ts
@@ -43,7 +43,7 @@ describe('ImageNameCell.vue', () => {
   it('should handle missing imageMetadata gracefully', () => {
     const mockRow = { metadata: { name: 'my-image-resource-name-2' } };
 
-    const expectedDisplayName = 'undefined/undefined:undefined';
+    const expectedDisplayName = '';
     const expectedUrl = `/c/${ mockClusterId }/mocked-product/mocked-images-page/my-image-resource-name-2`;
 
     const wrapper = mountComponent(mockRow);
diff --git a/pkg/sbomscanner-ui-ext/models/storage.sbomscanner.kubewarden.io.vulnerabilityreport.js b/pkg/sbomscanner-ui-ext/models/storage.sbomscanner.kubewarden.io.vulnerabilityreport.js
@@ -1,5 +1,6 @@
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { PRODUCT_NAME, PAGE } from '@pkg/types';
+import { constructImageName } from '@pkg/utils/image';
 
 export default class VulnerabilityReport extends SteveModel {
   get _availableActions() {
@@ -133,6 +134,6 @@ export default class VulnerabilityReport extends SteveModel {
   }
 
   get imageReference() {
-    return `${ this.imageMetadata.registryURI }/${ this.imageMetadata.repository }:${ this.imageMetadata.tag }`;
+    return constructImageName(this.imageMetadata);
   }
 }
diff --git a/pkg/sbomscanner-ui-ext/pages/c/_cluster/sbomscanner/ImageOverview.vue b/pkg/sbomscanner-ui-ext/pages/c/_cluster/sbomscanner/ImageOverview.vue
@@ -186,6 +186,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import { RESOURCE } from '@pkg/types';
 import { imageDetailsToCSV } from '@pkg/utils/report';
 import { saveAs } from 'file-saver';
+import { constructImageName } from '@pkg/utils/image';
 import Papa from 'papaparse';
 import _ from 'lodash';
 import day from 'dayjs';
@@ -294,7 +295,7 @@ export default {
     filteredRows() {
       const filters = this.debouncedFilters;
       const filteredRows = this.rows.filter((row) => {
-        const imageName = `${ row.imageMetadata.registryURI }/${ row.imageMetadata.repository }:${ row.imageMetadata.tag }`;
+        const imageName = constructImageName(row.imageMetadata);
         const imageMatch = !filters.imageSearch || imageName.toLowerCase().includes(filters.imageSearch.toLowerCase());
         const severityMatch = filters.severitySearch === 'any' || row.report.summary[filters.severitySearch] > 0;
         const repositoryMatch = filters.repositorySearch === 'Any' || row.imageMetadata.repository === filters.repositorySearch;
@@ -376,7 +377,7 @@ export default {
 
         const imageList = imagesData.map((row) => {
           return {
-            'IMAGE REFERENCE': isDataGrouped ? `${ row.imageMetadata.registryURI }/${ row.imageMetadata.repository }:${ row.imageMetadata.tag }` : row.imageReference,
+            'IMAGE REFERENCE': isDataGrouped ? constructImageName(row.imageMetadata) : row.imageReference,
             'CVEs(Critical)':  isDataGrouped ? row.scanResult.critical : row.report.summary.critical,
             'CVEs(High)':      isDataGrouped ? row.scanResult.high : row.report.summary.high,
             'CVEs(Medium)':    isDataGrouped ? row.scanResult.medium : row.report.summary.medium,
@@ -517,10 +518,11 @@ export default {
           }
           currRepo.images.push(
             {
-              id:            report.id,
-              imageMetadata: report.imageMetadata,
-              metadata:      { name: report.metadata.name },
-              scanResult:    currImageScanResult,
+              id:             report.id,
+              imageMetadata:  report.imageMetadata,
+              metadata:       { name: report.metadata.name },
+              imageReference: constructImageName(report.imageMetadata),
+              scanResult:     currImageScanResult,
             }
           );
           repoMap.set(mapKey, currRepo);
@@ -533,10 +535,11 @@ export default {
             cveCntByRepo: { ...currImageScanResult },
             images:       [
               {
-                id:            report.id,
-                imageMetadata: report.imageMetadata,
-                metadata:      { name: report.metadata.name },
-                scanResult:    currImageScanResult,
+                id:             report.id,
+                imageMetadata:  report.imageMetadata,
+                metadata:       { name: report.metadata.name },
+                imageReference: constructImageName(report.imageMetadata),
+                scanResult:     currImageScanResult,
               }
             ]
           };
diff --git a/pkg/sbomscanner-ui-ext/pages/c/_cluster/sbomscanner/__tests__/ImageOverview.spec.ts b/pkg/sbomscanner-ui-ext/pages/c/_cluster/sbomscanner/__tests__/ImageOverview.spec.ts
@@ -168,6 +168,45 @@ describe('ImageOverview.vue', () => {
     expect(repo.cveCntByRepo.high).toBe(3);
   });
 
+  test('preprocessData adds imageReference for sorting in grouped view', () => {
+    const wrapper = mountComponent();
+
+    const vulReports = [
+      {
+        id:            '2',
+        imageMetadata: {
+          repository: 'test-repo', registry: 'my-reg', registryURI: 'my-reg', tag: 'zulu'
+        },
+        metadata: { name: 'img-z', namespace: 'ns' },
+        report:   { summary: { critical: 1 } }
+      },
+      {
+        id:            '1',
+        imageMetadata: {
+          repository: 'test-repo', registry: 'my-reg', registryURI: 'my-reg', tag: 'alpha'
+        },
+        metadata: { name: 'img-a', namespace: 'ns' },
+        report:   { summary: { critical: 1 } }
+      }
+    ];
+
+    const processedData = (wrapper.vm as any).preprocessData(vulReports);
+
+    // Expect one group for 'test-repo'
+    expect(processedData).toHaveLength(1);
+    const repoGroup = processedData[0];
+
+    // Check that imageReference is correctly constructed
+    expect(repoGroup.images[0].imageReference).toBe('my-reg/test-repo:zulu');
+    expect(repoGroup.images[1].imageReference).toBe('my-reg/test-repo:alpha');
+
+    // Simulate SortableTable's sorting on the 'imageReference' field
+    repoGroup.images.sort((a: any, b: any) => a.imageReference.localeCompare(b.imageReference));
+
+    // Verify the sorted order
+    expect(repoGroup.images[0].imageReference).toBe('my-reg/test-repo:alpha');
+  });
+
   test('downloadCSVReport handles grouped rows and saveAs failure', async() => {
     const wrapper = mountComponent();
 
diff --git a/pkg/sbomscanner-ui-ext/utils/image.ts b/pkg/sbomscanner-ui-ext/utils/image.ts
@@ -0,0 +1,14 @@
+interface ImageMetadata {
+  registryURI?: string;
+  repository?: string;
+  tag?: string;
+  [key: string]: any;
+}
+
+export function constructImageName(imageMetadata: ImageMetadata): string {
+  if (imageMetadata?.registryURI && imageMetadata?.repository && imageMetadata?.tag) {
+    return `${ imageMetadata.registryURI }/${ imageMetadata.repository }:${ imageMetadata.tag }`;
+  }
+
+  return '';
+}

Original file line number	Diff line number	Diff line change
`@@ -232,7 +232,7 @@ export const REPO_BASED_IMAGE_LIST_TABLE = [`
`232`	`232`	`name: 'image',`
`233`	`233`	`labelKey: 'imageScanner.images.listTable.headers.imageName',`
`234`	`234`	`formatter: 'ImageNameCell',`
`235`		`- sort: 'name',`
	`235`	`+ sort: 'imageReference',`
`236`	`236`	`width: 300,`
`237`	`237`	`},`
`238`	`238`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`import SteveModel from '@shell/plugins/steve/steve-class';`
`2`	`2`	`import { PRODUCT_NAME, PAGE } from '@pkg/types';`
	`3`	`+import { constructImageName } from '@pkg/utils/image';`
`3`	`4`
`4`	`5`	`export default class VulnerabilityReport extends SteveModel {`
`5`	`6`	`get _availableActions() {`
`@@ -133,6 +134,6 @@ export default class VulnerabilityReport extends SteveModel {`
`133`	`134`	`}`
`134`	`135`
`135`	`136`	`get imageReference() {`
`136`		- return `${ this.imageMetadata.registryURI }/${ this.imageMetadata.repository }:${ this.imageMetadata.tag }`;
	`137`	`+ return constructImageName(this.imageMetadata);`
`137`	`138`	`}`
`138`	`139`	`}`