change file extension name for image detail's SBOM file; Added messages for the successful and failed case of file download in image overview page

Author: xingzhang-suse

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

@@ -880,7 +880,7 @@ export default {
         // Generate SBOM download
         const sbomData = JSON.stringify(this.sbom.spdx, null, 2);
 
-        this.downloadJSON(sbomData, `${ this.imageName }-sbom_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.json`);
+        this.downloadJSON(sbomData, `${ this.imageName }-sbom_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.spdx.json`);
 
         this.$store.dispatch('growl/success', {
           title:   'Success',

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

@@ -376,56 +376,104 @@ export default {
     this.registryCrds = await this.$store.dispatch('cluster/findAll', { type: RESOURCE.REGISTRY });
   },
   methods: {
-    downloadCSVReport(rows) {
-      const imagesData = this.isGrouped ? rows.map((row) => row.images).flat() : rows;
-
-      const imageList = imagesData.map((row) => {
-        return {
-          'IMAGE REFERENCE': this.isGrouped ? `${ row.imageMetadata.registryURI }/${ row.imageMetadata.repository }:${ row.imageMetadata.tag }` : row.imageReference,
-          'CVEs(Critical)':  this.isGrouped ? row.scanResult.critical : row.report.summary.critical,
-          'CVEs(High)':      this.isGrouped ? row.scanResult.high : row.report.summary.high,
-          'CVEs(Medium)':    this.isGrouped ? row.scanResult.medium : row.report.summary.medium,
-          'CVEs(Low)':       this.isGrouped ? row.scanResult.low : row.report.summary.low,
-          'CVEs(None)':      this.isGrouped ? row.scanResult.unknown : row.report.summary.unknown,
-          'IMAGE ID':        row.imageMetadata.digest,
-          REGISTRY:          row.imageMetadata.registry,
-          REPOSITORY:        row.imageMetadata.repository,
-          PLATFORM:          row.imageMetadata.platform,
-        };
-      });
-      const csvBlob = new Blob([Papa.unparse(imageList)], { type: 'text/csv;charset=utf-8' });
-
-      saveAs(csvBlob, `image-scan-report_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.csv`);
+    async downloadCSVReport(rows) {
+      try {
+        const imagesData = this.isGrouped ? rows.map((row) => row.images).flat() : rows;
+
+        const imageList = imagesData.map((row) => {
+          return {
+            'IMAGE REFERENCE': this.isGrouped ? `${ row.imageMetadata.registryURI }/${ row.imageMetadata.repository }:${ row.imageMetadata.tag }` : row.imageReference,
+            'CVEs(Critical)':  this.isGrouped ? row.scanResult.critical : row.report.summary.critical,
+            'CVEs(High)':      this.isGrouped ? row.scanResult.high : row.report.summary.high,
+            'CVEs(Medium)':    this.isGrouped ? row.scanResult.medium : row.report.summary.medium,
+            'CVEs(Low)':       this.isGrouped ? row.scanResult.low : row.report.summary.low,
+            'CVEs(None)':      this.isGrouped ? row.scanResult.unknown : row.report.summary.unknown,
+            'IMAGE ID':        row.imageMetadata.digest,
+            REGISTRY:          row.imageMetadata.registry,
+            REPOSITORY:        row.imageMetadata.repository,
+            PLATFORM:          row.imageMetadata.platform,
+          };
+        });
+        const csvBlob = new Blob([Papa.unparse(imageList)], { type: 'text/csv;charset=utf-8' });
+
+        await saveAs(csvBlob, `image-scan-report_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.csv`);
+        this.$store.dispatch('growl/success', {
+          title:   'Success',
+          message: 'Image scan report downloaded successfully'
+        }, { root: true });
+      } catch (e) {
+        this.$store.dispatch('growl/error', {
+          title:   'Error',
+          message: 'Failed to download image scan report'
+        }, { root: true });
+      }
+      
     },
     async downloadSbom(res) {
-      const target = (res && res.length ? res[0] : null);
-      const sbom = await this.$store.dispatch('cluster/find', { type: RESOURCE.SBOM, id: target.id });
-      const spdxString = JSON.stringify(sbom.spdx, null, 2);
-      const sbomBlob = new Blob([spdxString], { type: 'application/json;charset=utf-8' });
-
-      saveAs(sbomBlob, `${ sbom.metadata.name }-sbom_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.spdx.json`);
+      try {
+        const target = (res && res.length ? res[0] : null);
+        const sbom = await this.$store.dispatch('cluster/find', { type: RESOURCE.SBOM, id: target.id });
+        const spdxString = JSON.stringify(sbom.spdx, null, 2);
+        const sbomBlob = new Blob([spdxString], { type: 'application/json;charset=utf-8' });
+
+        await saveAs(sbomBlob, `${ sbom.metadata.name }-sbom_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.spdx.json`);
+        this.$store.dispatch('growl/success', {
+          title:   'Success',
+          message: 'SBOM downloaded successfully'
+        }, { root: true });
+      } catch (e) {
+        this.$store.dispatch('growl/error', {
+          title:   'Error',
+          message: 'Failed to download SBOM'
+        }, { root: true });
+      }
+     
     },
     async downloadJson(res) {
-      const target = (res && res.length ? res[0] : null);
-      const vulReport = await this.$store.dispatch('cluster/find', { type: RESOURCE.VULNERABILITY_REPORT, id: target.id });
-      const jsonBlob = new Blob([JSON.stringify(vulReport.report, null, 2)], { type: 'application/json;charset=utf-8' });
-
-      saveAs(jsonBlob, `${ target.id }-vulnerabilities-report_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.json`);
+      try {
+        const target = (res && res.length ? res[0] : null);
+        const vulReport = await this.$store.dispatch('cluster/find', { type: RESOURCE.VULNERABILITY_REPORT, id: target.id });
+        const jsonBlob = new Blob([JSON.stringify(vulReport.report, null, 2)], { type: 'application/json;charset=utf-8' });
+
+        await saveAs(jsonBlob, `${ target.id }-vulnerabilities-report_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.json`);
+        this.$store.dispatch('growl/success', {
+          title:   'Success',
+          message: 'Vulnerability report downloaded successfully'
+        }, { root: true });
+      } catch (e) {
+        this.$store.dispatch('growl/error', {
+          title:   'Error',
+          message: 'Failed to download vulnerability report'
+        }, { root: true });
+      }
+      
     },
     async downloadCsv(res) {
-      const target = (res && res.length ? res[0] : null);
-      const vulReport = await this.$store.dispatch('cluster/find', { type: RESOURCE.VULNERABILITY_REPORT, id: target.id });
-      let vulnerabilityList = [];
-
-      vulReport.report.results.forEach((result) => {
-        vulnerabilityList = vulnerabilityList.concat(result.vulnerabilities);
-      });
-      const csv = imageDetailsToCSV(
-        vulnerabilityList
-      );
-      const csvBlob = new Blob([Papa.unparse(csv)], { type: 'text/csv;charset=utf-8' });
+      try {
+        const target = (res && res.length ? res[0] : null);
+        const vulReport = await this.$store.dispatch('cluster/find', { type: RESOURCE.VULNERABILITY_REPORT, id: target.id });
+        let vulnerabilityList = [];
+
+        vulReport.report.results.forEach((result) => {
+          vulnerabilityList = vulnerabilityList.concat(result.vulnerabilities);
+        });
+        const csv = imageDetailsToCSV(
+          vulnerabilityList
+        );
+        const csvBlob = new Blob([Papa.unparse(csv)], { type: 'text/csv;charset=utf-8' });
+
+        await saveAs(csvBlob, `${ target.id }-image-detail-report_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.csv`);
+        this.$store.dispatch('growl/success', {
+          title:   'Success',
+          message: 'Image detail report downloaded successfully'
+        }, { root: true });
+      } catch (e) {
+        this.$store.dispatch('growl/error', {
+          title:   'Error',
+          message: 'Failed to download image detail report'
+        }, { root: true });
+      }
 
-      saveAs(csvBlob, `${ target.id }-image-detail-report_${ day(new Date().getTime()).format('MMDDYYYY_HHmmss') }.csv`);
     },
     // applyFilters() {
     //   let filtered = _.cloneDeep(this.preprocessedImagesBak);