Github #276: Bug: Minor display issues before 0.3.0 test

Author: xingzhang-suse

pkg/sbomscanner-ui-ext/components/ImageDetails.vue

@@ -119,7 +119,10 @@
       <div class="vulnerabilities-section">
         <div class="summary-title">
           {{ t('imageScanner.imageDetails.mostSevereVulnerabilities.title') }}
-          <InfoTooltip :tooltip="t('imageScanner.imageDetails.mostSevereVulnerabilities.tooltip')" />
+          <InfoTooltip
+            style="margin-left: 8px;"
+            :tooltip="t('imageScanner.imageDetails.mostSevereVulnerabilities.tooltip')"
+          />
         </div>
         <div class="vulnerabilities-list">
           <div
@@ -262,7 +265,6 @@
 
     <!-- Vulnerability Table -->
     <SortableTable
-      v-if="safeTableData && safeTableData.length > 0"
       :key="`table-${isGrouped ? 'grouped' : 'ungrouped'}`"
       :rows="isGrouped ? layerData : safeTableData"
       :headers="isGrouped ? LAYER_BASED_TABLE : VULNERABILITY_DETAILS_TABLE"
@@ -324,12 +326,6 @@
         <!-- Disable search -->
       </template>
     </SortableTable>
-    <div
-      v-else
-      class="no-data-message"
-    >
-      <p>No vulnerability data available</p>
-    </div>
   </div>
 </template>
 
@@ -548,7 +544,7 @@ export default {
         score:            vuln.cvss?.nvd?.v3score ? `${ vuln.cvss.nvd.v3score } (CVSS v3)` : vuln.cvss?.redhat?.v3score ? `${ vuln.cvss.redhat.v3score } (CVSS v3)` : vuln.cvss?.ghsa?.v3score ? `${ vuln.cvss.ghsa.v3score } (CVSS v3)` : '',
         package:          vuln.packageName,
         packageVersion:   vuln.installedVersion,
-        packagePath:      vuln.purl || vuln.diffID, // Use purl if available, fallback to diffID
+        packagePath:      this.getPackagePath(vuln.purl),
         fixAvailable:     vuln.fixedVersions && vuln.fixedVersions.length > 0,
         fixVersion:       vuln.fixedVersions ? vuln.fixedVersions.join(', ') : '',
         severity:         vuln.severity?.toLowerCase() || this.t('imageScanner.general.unknown'),
@@ -1375,6 +1371,11 @@ export default {
         return [];
       }
     },
+    getPackagePath(purl) {
+      const packagePaths = typeof purl === 'string' ? purl.match(/(?<=:)([^@]+?)(?=@)/) : [];
+
+      return packagePaths && Array.isArray(packagePaths) ? packagePaths[0] : '';
+    },
   },
 };
 </script>

pkg/sbomscanner-ui-ext/components/__tests__/CveDetails.spec.ts

@@ -2,7 +2,7 @@ import { jest } from '@jest/globals';
 import { shallowMount, flushPromises } from '@vue/test-utils';
 import CveDetails from '../CveDetails.vue';
 import { BadgeState } from '@components/BadgeState';
-import { PRODUCT_NAME, RESOURCE, PAGE } from '@pkg/types';
+import { RESOURCE } from '@pkg/types';
 import { NVD_BASE_URL, CVSS_VECTOR_BASE_URL } from '@pkg/constants';
 
 jest.mock('@pkg/types', () => ({

pkg/sbomscanner-ui-ext/components/common/__tests__/AmountBarBySeverity.spec.ts

@@ -10,10 +10,7 @@ const StackedPercentageBar = {
 const factory = (propsData) => {
   return shallowMount(AmountBarBySeverity, {
     propsData,
-    global: {
-      stubs: { StackedPercentageBar, // Stub the child component
-      },
-    },
+    global: { stubs: { StackedPercentageBar } }, // Stub the child component
   });
 };
 

pkg/sbomscanner-ui-ext/components/common/__tests__/BarChart.spec.ts

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { jest } from '@jest/globals';
 import BarChart from '../BarChart.vue';
 
 const PercentageBar = {

pkg/sbomscanner-ui-ext/components/common/__tests__/BlockPercentageBar.spec.ts

@@ -1,5 +1,7 @@
 
-import { jest } from '@jest/globals';
+import {
+  jest, afterAll, beforeAll, beforeEach, afterEach, describe, it, expect
+} from '@jest/globals';
 import { mount } from '@vue/test-utils';
 import BlockPercentageBar from '../BlockPercentageBar.vue';
 

pkg/sbomscanner-ui-ext/pages/c/_cluster/sbomscanner/Dashboard.vue

@@ -53,7 +53,10 @@
         <div class="panel-header">
           <div class="header-left">
             <h3>{{ t('imageScanner.dashboard.scanningStatus.title') }}</h3>
-            <InfoTooltip :tooltip="tooltip" />
+            <InfoTooltip
+              style="margin-left: 8px;"
+              :tooltip="tooltip"
+            />
           </div>
           <div class="header-right">
             <span class="total-count">{{ displayedTotalScannedImageCnt }} {{ t('imageScanner.dashboard.scanningStatus.totalImages') }}</span>