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

Signed-off-by: xuelichao <xuel@vmware.com>
This commit is contained in:
Lichao Xue 2024-05-21 17:55:46 +08:00 committed by GitHub
parent be839e677c
commit 3875b1ac1d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 50 additions and 30 deletions

View File

@ -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;
}

View File

@ -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', () => {

View File

@ -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(

View File

@ -1,10 +1,10 @@
<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
@ -12,13 +12,13 @@
</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

View File

@ -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{

View File

@ -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() {