Fix-20459 Wrong sbom status displayed in UI (#20460)

Signed-off-by: xuelichao <xuel@vmware.com>

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -182,6 +182,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
     onSbomArtifactsLength: number = 0;
     stopBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
     updateArtifactSub: Subscription;
+    updateArtifactSbomSub: Subscription;
 
     hiddenArray: boolean[] = getHiddenArrayFromLocalStorage(
         PageSizeMapKeys.ARTIFACT_LIST_TAB_COMPONENT,
@@ -255,6 +256,20 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
                 }
             );
         }
+        if (!this.updateArtifactSbomSub) {
+            this.updateArtifactSbomSub = this.eventService.subscribe(
+                HarborEvent.UPDATE_SBOM_INFO,
+                (artifact: Artifact) => {
+                    if (this.artifactList && this.artifactList.length) {
+                        this.artifactList.forEach(item => {
+                            if (item.digest === artifact.digest) {
+                                this.updateArtifact(artifact, item);
+                            }
+                        });
+                    }
+                }
+            );
+        }
         if (!this.deleteAccessorySub) {
             this.deleteAccessorySub = this.eventService.subscribe(
                 HarborEvent.DELETE_ACCESSORY,
@@ -984,22 +999,28 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
         }
         this.refresh();
     }
+
+    updateArtifact(from: Artifact, to: Artifact) {
+        if (from.scan_overview) {
+            to.scan_overview = from.scan_overview;
+        }
+        if (from.sbom_overview) {
+            to.sbom_overview = from.sbom_overview;
+        }
+        if (from.sbom_overview.sbom_digest) {
+            to.sbomDigest = from.sbom_overview.sbom_digest;
+        }
+        if (from.accessories !== undefined && from.accessories.length > 0) {
+            to.accessories = from.accessories;
+        }
+    }
+
     // when finished, remove it from selectedRow
     scanFinished(artifact: Artifact) {
         if (this.selectedRow && this.selectedRow.length) {
             for (let i = 0; i < this.selectedRow.length; i++) {
                 if (artifact.digest === this.selectedRow[i].digest) {
-                    if (artifact.sbom_overview) {
-                        this.selectedRow[i].sbom_overview =
-                            artifact.sbom_overview;
-                    }
-                    if (artifact.sbom_overview.sbom_digest) {
-                        this.selectedRow[i].sbomDigest =
-                            artifact.sbom_overview.sbom_digest;
-                    }
-                    if (artifact.accessories !== undefined) {
-                        this.selectedRow[i].accessories = artifact.accessories;
-                    }
+                    this.updateArtifact(artifact, this.selectedRow[i]);
                     this.selectedRow.splice(i, 1);
                     break;
                 }

src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan.component.spec.ts

@@ -173,19 +173,22 @@ describe('ResultSbomComponent (inline template)', () => {
     });
 
     it('should show summary bar chart if status is COMPLETED', () => {
+        component.sbomOverview = { ...mockedSbomOverview };
         component.sbomOverview.scan_status = SBOM_SCAN_STATUS.SUCCESS;
+        component.sbomOverview.sbom_digest = mockedSbomDigest;
         component.artifactDigest = mockedSbomDigest;
         component.sbomDigest = mockedSbomDigest;
         component.accessories = mockedAccessories;
         fixture.whenStable().then(() => {
+            fixture.detectChanges();
             const el: HTMLElement =
                 fixture.nativeElement.querySelector('.tip-block');
             expect(el).not.toBeNull();
-            const textContent = el.textContent;
+            const textContent = el?.textContent;
             expect(component.sbomOverview.scan_status).toBe(
                 SBOM_SCAN_STATUS.SUCCESS
             );
-            expect(textContent).toBe('SBOM Detail');
+            expect(textContent?.trim()).toBe('SBOM.Details');
         });
     });
     it('Test ResultSbomComponent getScanner', () => {

src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan.component.ts

@@ -221,6 +221,7 @@ export class ResultSbomComponent implements OnInit, OnDestroy {
                 repositoryName: dbEncodeURIComponent(this.repoName),
                 reference: this.artifactDigest,
                 withSbomOverview: true,
+                withAccessory: true,
                 XAcceptVulnerabilities: DEFAULT_SUPPORTED_MIME_TYPES,
             })
             .subscribe(

src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.html

@@ -1,24 +1,24 @@
-<div class="tip-wrapper width-215">
+<div class="tip-wrapper width-120">
     <clr-tooltip>
         <div clrTooltipTrigger class="tip-block">
             <div *ngIf="showSbomDetailLink()" class="circle-block">
                 <a
                     href="javascript:void(0)"
-                    class="digest margin-left-5"
+                    class="digest"
                     (click)="goIntoArtifactSbomSummaryPage()"
                     title="{{ 'SBOM.Details' | translate }">
                     {{ 'SBOM.Details' | translate }}</a
                 >
             </div>
             <div
                 *ngIf="showNoSbom()"
-                class="pl-1 margin-left-5 tip-wrapper bar-block-none shadow-none width-150">
+                class="tip-wrapper bar-block-none shadow-none width-120">
                 {{ 'SBOM.NO_SBOM' | translate }}
             </div>
             <div
                 *ngIf="!showSbomDetailLink() && !showNoSbom()"
-                class="pl-1 margin-left-5 tip-wrapper bar-block-none shadow-none width-150">
-                {{ 'SBOM.COMPLETED,' | translate }}
+                class="tip-wrapper width-120">
+                {{ 'SBOM.COMPLETED' | translate }}
             </div>
         </div>
         <clr-tooltip-content

src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.scss

@@ -1,9 +1,8 @@
 .tip-wrapper {
     display: flex;
-    align-items: center;
-    color: #fff;
-    text-align: center;
-    font-size: 10px;
+    align-items: left;
+    text-align: left;
+    font-size: .65rem;
     height: 15px;
     line-height: 15px;
 }
@@ -33,12 +32,8 @@ hr {
     margin-left: 5px;
 }
 
-.width-215 {
-    width: 215px;
-}
-
-.width-150 {
-    width: 150px;
+.width-120 {
+    width: 120px;
 }
 
 .level-border>div{

src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component.ts

@@ -79,11 +79,11 @@ export class SbomTipHistogramComponent {
     }
 
     showSbomDetailLink(): boolean {
-        return this.sbomDigest && this.getSbomAccessories.length > 0;
+        return this.sbomDigest && this.getSbomAccessories().length > 0;
     }
 
     showNoSbom(): boolean {
-        return !this.sbomDigest && this.getSbomAccessories.length === 0;
+        return !this.sbomDigest && this.getSbomAccessories().length === 0;
     }
 
     isThemeLight() {