SVIP-ui v1.2.1-alpha Pre-Release

doc/changelog.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [v1.2.1] - (11/29/23)
+### Added
+- Support for XML CDX SBOM's in Convert and Generate added 
+
+## [v1.2.0] - (11/10/23)
+### Added
+ - Repair Button shows Repair Modal for fixing issues
+
+## [v1.1.1] - (11/10/23)
+- Change name from SVIP to SBOM-in-a-Box to better represent the platform
+
 ## [v1.1.0] - (9/28/23)
 ### Added
 - Can download `vex` and `metrics` reports

readme.md

@@ -1,18 +1,23 @@
-# SBOM Visualization and Integration Platform GUI
-
-> The SBOM Visualization and Integration Platform (**SVIP**) is a unified platform to promote the
+# SBOM-in-a-Box GUI
+> The **SBOM-in-a-Box** is a unified platform to promote the
 > production, consumption, and utilization of Software Bills of Materials.
+> This includes conversion between schemas, generation, comparision and evaluation of quality.
+
+# Purpose of SBOM-in-a-Box
+> SBOM-in-a-box has unique features including generation of SBOMs using multiple tools that allow for a more a complete SBOM to be created. There is also a feature within metrics, where the tool provides suggestions if there is a potential better way to showcase the attributes. There is also the ability to convert between SPDX and CycloneDX SBOM schemas, and to gain insight into vulnerabilities of software through SBOMs. These features allow for developers to create an SBOM that is the most relevant and suits their needs.
 
+# SBOM-in-a-Box GUI 
+This serves as the front-end and human interaction with our software.
 
-### Latest Release: [[v1.1.0] - (9/28/23)](doc/changelog.md)
+### Latest Release: [[v1.2.1] - (11/30/23)](doc/changelog.md)
 
 ### System Requirements
 
 - Requires Node >= 18.12.1
 
 ### Quick Start
 
-1. Follow the [SVIP API](https://github.com/SoftwareDesignLab/SVIP/tree/main#quick-start) quick start to launch the backend
+1. Follow the [SBOM-in-a-Box API](https://github.com/SoftwareDesignLab/SVIP/tree/main#quick-start) quick start to launch the backend
 2. `npm ci`
 3. `npm start`
 

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div id="main-wrapper">
-  <app-navbar />
+  <app-navbar/>
   <div class="body flex" style="overflow-y: auto;">
     <app-upload/>
     <app-view *ngIf="routing.GetPage() === 1"/>

src/app/features/metrics/metrics/metrics.component.html

@@ -25,7 +25,7 @@
   <ng-template #metadata>
     <div class="list">
       <!-- Test results -->
-      <ng-container *ngFor="let testResult of getTestResults('metadata')">
+      <ng-container *ngFor="let testResult of getTestResults('0')">
         <app-accordion *ngIf="isFiltered(testResult)">
           <div title class="test-result">
             <span>
@@ -54,7 +54,7 @@
           </div>
           <span body class="flex error-result">
             {{ testResult.details }}
-            <app-button style="margin-left: auto;" text="Repair" (click)="openRepairModal(testResult.details)" *ngIf="testResult.status === 'FAIL'" icon="build"></app-button>
+            <app-button style="margin-left: auto;" (click)="openRepairModal(testResult, '0')" *ngIf="testResult.status === 'FAIL' && testResult.fixes.length > 0" icon="build"></app-button>
           </span>
         </app-accordion>
       </ng-container>
@@ -67,11 +67,11 @@
         <app-accordion
           *ngIf="
             component &&
-            component.key !== 'metadata' &&
+            component.key !== '0' &&
             getTestResults(component.key).length
           "
         >
-          <div title class="component-title">{{ component.key }}</div>
+          <div title class="component-title">{{ this.qa.hashCodeMapping[component.key] }}</div>
           <div body>
             <!-- Test results -->
             <ng-container
@@ -107,7 +107,7 @@
                 </div>
                 <span body class="flex error-result">
                   {{ testResult.details }}
-                  <app-button style="margin-left: auto;" text="Repair" (click)="openRepairModal(testResult.details)" *ngIf="testResult.status === 'FAIL'" icon="build"></app-button>
+                  <app-button style="margin-left: auto;" (click)="openRepairModal(testResult, component.key)" *ngIf="testResult.status === 'FAIL' && testResult.fixes.length > 0" icon="build"></app-button>
                 </span>
               </app-accordion>
             </ng-container>
@@ -137,4 +137,4 @@
   </ng-template>
 </app-viewer>
 
-<app-repair-modal [selectedErrorMessage]="returnMessage()" [opened] = "repairModal" (close)="repairModal = false"/>
+<app-repair-modal [sbomID]="sbomID" [error]="selectedError" [opened] = "repairModal" (close)="repairModal = false"/>

src/app/features/metrics/metrics/metrics.component.ts

@@ -16,8 +16,9 @@ export class MetricsComponent implements OnInit {
   components: { [componentName: string]: testResult[] } = {};
   attributes: filter = {};
   name: string = '';
+  sbomID: number = 0;
   palettes = palettes;
-  selectedErrorMessage: string = '';
+  selectedError: any = {};
   public repairModal: boolean = false;
   private _palette = PALETTE.DEFAULT;
   get palette() {
@@ -61,6 +62,7 @@ export class MetricsComponent implements OnInit {
         const sbom = data;
 
         this.name = data.fileName;
+        this.sbomID = sbom.id;
         SVIP.gradeSBOM(sbom.id).subscribe((qa) => {
           if (qa) {
             this.qa = qa;
@@ -75,23 +77,18 @@ export class MetricsComponent implements OnInit {
 
   getKeys() {
     // Components
-    Object.keys(this.qa.components).forEach((component) => {
+    Object.keys(this.qa.results).forEach((component) => {
       this.components[component] = [];
-      const componentTestNames = Object.keys(this.qa.components[component]);
-      const tests = componentTestNames;
-      // Component tests
-      tests.forEach((test: any) => {
-        // test results
-        this.qa.components[component][test].forEach((testResult: any) => {
-          this.components[component].push(testResult);
-          if (testResult.status !== 'ERROR') {
-            const processors = testResult.attributes as string[];
-            // Processors/Attributes
-            processors.forEach((processor: string) => {
-              this.attributes[processor] = { shown: true, color: '' };
-            });
-          }
-        });
+
+      this.qa.results[component].forEach((testResult: any) => {
+        this.components[component].push(testResult);
+        if (testResult.status !== 'ERROR') {
+          const processors = testResult.attributes as string[];
+          // Processors/Attributes
+          processors.forEach((processor: string) => {
+            this.attributes[processor] = { shown: true, color: '' };
+          });
+        }
       });
     });
     this.setColor();
@@ -132,14 +129,14 @@ export class MetricsComponent implements OnInit {
     this.downloadService.Download(fileName, new Blob([reportJson], { type: 'application/json' }));
   }
 
-  openRepairModal(errorMessage: string) {
-    console.log('Error Message:', errorMessage);
-    this.selectedErrorMessage = errorMessage;
+  openRepairModal(test: any, id: string) {
+    this.selectedError = test;
+    this.selectedError.id = id;
     this.repairModal = true;
   }
 
-  returnMessage(){
-    return this.selectedErrorMessage;
+  selectedTest(){
+    return this.selectedError;
   }
 }
 
@@ -149,4 +146,11 @@ interface testResult {
   message: string;
   details: string;
   status: string;
+  fixes: fix<Object>[];
+}
+
+interface fix<T> {
+  old: T;
+  new: T;
+  type: any;
 }