diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss
index b90fad67719e..23c95498d4b3 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.scss
@@ -161,6 +161,10 @@
width: 11rem !important;
}
+.sbom-column {
+ width: 6rem !important;
+}
+
.annotations-column {
width: 5rem !important;
}
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts
index 9eef1097e613..27010f0656d3 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts
@@ -13,7 +13,7 @@ import {
ScanningResultDefaultService,
ScanningResultService,
} from '../../../../../../../shared/services';
-import { ArtifactFront as Artifact } from '../../../artifact';
+import { ArtifactFront as Artifact, ArtifactFront } from '../../../artifact';
import { ErrorHandler } from '../../../../../../../shared/units/error-handler';
import { OperationService } from '../../../../../../../shared/components/operation/operation.service';
import { ArtifactService as NewArtifactService } from '../../../../../../../../../ng-swagger-gen/services/artifact.service';
@@ -24,6 +24,10 @@ import { ArtifactListPageService } from '../../artifact-list-page.service';
import { ClrLoadingState } from '@clr/angular';
import { Accessory } from 'ng-swagger-gen/models/accessory';
import { ArtifactModule } from '../../../artifact.module';
+import {
+ SBOM_SCAN_STATUS,
+ VULNERABILITY_SCAN_STATUS,
+} from 'src/app/shared/units/utils';
describe('ArtifactListTabComponent', () => {
let comp: ArtifactListTabComponent;
@@ -171,6 +175,16 @@ describe('ArtifactListTabComponent', () => {
pull_time: '0001-01-01T00:00:00Z',
},
];
+ const mockAccessory =
{
+ id: 1,
+ artifact_id: 2,
+ subject_artifact_id: 3,
+ subject_artifact_digest: 'fakeDigest',
+ subject_artifact_repo: 'test',
+ size: 120,
+ digest: 'fakeDigest',
+ type: 'test',
+ };
const mockErrorHandler = {
error: () => {},
};
@@ -236,9 +250,18 @@ describe('ArtifactListTabComponent', () => {
getScanBtnState(): ClrLoadingState {
return ClrLoadingState.DEFAULT;
},
+ getSbomBtnState(): ClrLoadingState {
+ return ClrLoadingState.DEFAULT;
+ },
hasEnabledScanner(): boolean {
return true;
},
+ hasSbomPermission(): boolean {
+ return true;
+ },
+ hasScannerSupportSBOM(): boolean {
+ return true;
+ },
hasAddLabelImagePermission(): boolean {
return true;
},
@@ -353,6 +376,27 @@ describe('ArtifactListTabComponent', () => {
fixture.nativeElement.querySelector('.confirmation-title')
).toBeTruthy();
});
+ it('Generate SBOM button should be disabled', async () => {
+ await fixture.whenStable();
+ comp.selectedRow = [mockArtifacts[1]];
+ await stepOpenAction(fixture, comp);
+ const generatedButton =
+ fixture.nativeElement.querySelector('#generate-sbom-btn');
+ fixture.detectChanges();
+ await fixture.whenStable();
+ expect(generatedButton.disabled).toBeTruthy();
+ });
+ it('Stop SBOM button should be disabled', async () => {
+ await fixture.whenStable();
+ comp.selectedRow = [mockArtifacts[1]];
+ await stepOpenAction(fixture, comp);
+ const stopButton =
+ fixture.nativeElement.querySelector('#stop-sbom-btn');
+ fixture.detectChanges();
+ await fixture.whenStable().then(() => {
+ expect(stopButton.disabled).toBeTruthy();
+ });
+ });
it('the length of hide array should equal to the number of column', async () => {
comp.loading = false;
fixture.detectChanges();
@@ -360,6 +404,93 @@ describe('ArtifactListTabComponent', () => {
const cols = fixture.nativeElement.querySelectorAll('.datagrid-column');
expect(cols.length).toEqual(comp.hiddenArray.length);
});
+
+ it('Test isEllipsisActive', async () => {
+ fixture = TestBed.createComponent(ArtifactListTabComponent);
+ comp = fixture.componentInstance;
+ fixture.detectChanges();
+ await fixture.whenStable().then(() => {
+ expect(
+ comp.isEllipsisActive(document.createElement('span'))
+ ).toBeFalsy();
+ });
+ });
+ it('Test deleteAccessory', async () => {
+ fixture = TestBed.createComponent(ArtifactListTabComponent);
+ comp = fixture.componentInstance;
+ fixture.detectChanges();
+ comp.deleteAccessory(mockAccessory);
+ fixture.detectChanges();
+ await fixture.whenStable().then(() => {
+ expect(
+ fixture.nativeElement.querySelector('.confirmation-content')
+ ).toBeTruthy();
+ });
+ });
+ it('Test scanNow', async () => {
+ fixture = TestBed.createComponent(ArtifactListTabComponent);
+ comp = fixture.componentInstance;
+ fixture.detectChanges();
+ comp.selectedRow = mockArtifacts.slice(0, 1);
+ comp.scanNow();
+ expect(comp.onScanArtifactsLength).toBe(1);
+ });
+ it('Test stopNow', async () => {
+ fixture = TestBed.createComponent(ArtifactListTabComponent);
+ comp = fixture.componentInstance;
+ fixture.detectChanges();
+ comp.selectedRow = mockArtifacts.slice(0, 1);
+ comp.stopNow();
+ expect(comp.onStopScanArtifactsLength).toBe(1);
+ });
+ it('Test stopSbom', async () => {
+ fixture = TestBed.createComponent(ArtifactListTabComponent);
+ comp = fixture.componentInstance;
+ fixture.detectChanges();
+ comp.selectedRow = mockArtifacts.slice(0, 1);
+ comp.stopSbom();
+ expect(comp.onStopSbomArtifactsLength).toBe(1);
+ });
+ it('Test tagsString and isRunningState and canStopSbom and canStopScan', async () => {
+ fixture = TestBed.createComponent(ArtifactListTabComponent);
+ comp = fixture.componentInstance;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ expect(comp.tagsString([])).toBeNull();
+ expect(
+ comp.isRunningState(VULNERABILITY_SCAN_STATUS.RUNNING)
+ ).toBeTruthy();
+ expect(
+ comp.isRunningState(VULNERABILITY_SCAN_STATUS.ERROR)
+ ).toBeFalsy();
+ expect(comp.canStopSbom()).toBeFalsy();
+ expect(comp.canStopScan()).toBeFalsy();
+ });
+ it('Test status and handleScanOverview', async () => {
+ fixture = TestBed.createComponent(ArtifactListTabComponent);
+ comp = fixture.componentInstance;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ expect(comp.scanStatus(mockArtifacts[0])).toBe(
+ VULNERABILITY_SCAN_STATUS.ERROR
+ );
+ expect(comp.sbomStatus(null)).toBe(SBOM_SCAN_STATUS.NOT_GENERATED_SBOM);
+ expect(comp.sbomStatus(mockArtifacts[0])).toBe(
+ SBOM_SCAN_STATUS.NOT_GENERATED_SBOM
+ );
+ expect(comp.handleScanOverview(mockArtifacts[0])).not.toBeNull();
+ });
+ it('Test utils', async () => {
+ fixture = TestBed.createComponent(ArtifactListTabComponent);
+ comp = fixture.componentInstance;
+ fixture.detectChanges();
+ await fixture.whenStable();
+ expect(comp.selectedRowHasSbom()).toBeFalsy();
+ expect(comp.selectedRowHasVul()).toBeFalsy();
+ expect(comp.canScanNow()).toBeFalsy();
+ expect(comp.hasEnabledSbom()).toBeTruthy();
+ expect(comp.canAddLabel()).toBeFalsy();
+ });
});
async function stepOpenAction(fixture, comp) {
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
index 5d4ffad46958..2c20f6660f9c 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts
@@ -37,6 +37,7 @@ import {
setHiddenArrayToLocalStorage,
setPageSizeToLocalStorage,
VULNERABILITY_SCAN_STATUS,
+ SBOM_SCAN_STATUS,
} from '../../../../../../../shared/units/utils';
import { ErrorHandler } from '../../../../../../../shared/units/error-handler';
import { ArtifactService } from '../../../artifact.service';
@@ -141,28 +142,60 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
get hasScanImagePermission(): boolean {
return this.artifactListPageService.hasScanImagePermission();
}
+ get hasSbomPermission(): boolean {
+ return this.artifactListPageService.hasSbomPermission();
+ }
get hasEnabledScanner(): boolean {
return this.artifactListPageService.hasEnabledScanner();
}
+ get hasScannerSupportVulnerability(): boolean {
+ return this.artifactListPageService.hasScannerSupportVulnerability();
+ }
+ get hasScannerSupportSBOM(): boolean {
+ return this.artifactListPageService.hasScannerSupportSBOM();
+ }
get scanBtnState(): ClrLoadingState {
return this.artifactListPageService.getScanBtnState();
}
+ get generateSbomBtnState(): ClrLoadingState {
+ return this.artifactListPageService.getSbomBtnState();
+ }
onSendingScanCommand: boolean;
onSendingStopScanCommand: boolean = false;
onStopScanArtifactsLength: number = 0;
scanStoppedArtifactLength: number = 0;
+
+ onSendingSbomCommand: boolean;
+ onSendingStopSbomCommand: boolean = false;
+ onStopSbomArtifactsLength: number = 0;
+ sbomStoppedArtifactLength: number = 0;
+
artifactDigest: string;
depth: string;
// could Pagination filter
filters: string[];
scanFinishedArtifactLength: number = 0;
onScanArtifactsLength: number = 0;
+ sbomFinishedArtifactLength: number = 0;
+ onSbomArtifactsLength: number = 0;
stopBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
updateArtifactSub: Subscription;
hiddenArray: boolean[] = getHiddenArrayFromLocalStorage(
PageSizeMapKeys.ARTIFACT_LIST_TAB_COMPONENT,
- [false, false, false, false, false, false, true, false, false, false]
+ [
+ false,
+ false,
+ false,
+ false,
+ false,
+ false,
+ true,
+ true,
+ false,
+ false,
+ false,
+ ]
);
deleteAccessorySub: Subscription;
copyDigestSub: Subscription;
@@ -203,7 +236,8 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
}
}
ngOnInit() {
- this.registryUrl = this.appConfigService.getConfig().registry_url;
+ const appConfig = this.appConfigService.getConfig();
+ this.registryUrl = appConfig.registry_url;
this.initRouterData();
if (!this.updateArtifactSub) {
this.updateArtifactSub = this.eventService.subscribe(
@@ -250,7 +284,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
this.copyDigestSub.unsubscribe();
this.copyDigestSub = null;
}
- this.datagrid['columnsService']?.columns?.forEach((item, index) => {
+ this.datagrid?.['columnsService']?.columns?.forEach((item, index) => {
if (this.depth) {
this.hiddenArray[index] = !!item?._value?.hidden;
} else {
@@ -326,6 +360,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
withImmutableStatus: true,
withLabel: true,
withScanOverview: true,
+ // withSbomOverview: true,
withTag: false,
XAcceptVulnerabilities: DEFAULT_SUPPORTED_MIME_TYPES,
withAccessory: false,
@@ -350,6 +385,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
withImmutableStatus: true,
withLabel: true,
withScanOverview: true,
+ // withSbomOverview: true,
withTag: false,
XAcceptVulnerabilities:
DEFAULT_SUPPORTED_MIME_TYPES,
@@ -381,7 +417,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
});
this.getArtifactTagsAsync(this.artifactList);
this.getAccessoriesAsync(this.artifactList);
- this.checkCosignAsync(this.artifactList);
+ this.checkCosignAndSbomAsync(this.artifactList);
this.getIconsFromBackEnd();
},
error => {
@@ -420,7 +456,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
this.artifactList = res.body;
this.getArtifactTagsAsync(this.artifactList);
this.getAccessoriesAsync(this.artifactList);
- this.checkCosignAsync(this.artifactList);
+ this.checkCosignAndSbomAsync(this.artifactList);
this.getIconsFromBackEnd();
},
error => {
@@ -519,6 +555,14 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
return formatSize(tagSize);
}
+ hasEnabledSbom(): boolean {
+ return (
+ this.hasScannerSupportSBOM &&
+ this.hasEnabledScanner &&
+ this.hasSbomPermission
+ );
+ }
+
retag() {
if (this.selectedRow && this.selectedRow.length && !this.depth) {
this.copyArtifactComponent.retag(this.selectedRow[0].digest);
@@ -714,6 +758,17 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
}
}
+ // Get sbom status
+ sbomStatus(artifact: Artifact): string {
+ if (artifact) {
+ let so = (artifact).sbom_overview;
+ if (so && so.scan_status) {
+ return so.scan_status;
+ }
+ }
+ return SBOM_SCAN_STATUS.NOT_GENERATED_SBOM;
+ }
+
// Get vulnerability scanning status
scanStatus(artifact: Artifact): string {
if (artifact) {
@@ -771,6 +826,10 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
);
}
+ selectedRowHasSbom(): boolean {
+ return !!(this.selectedRow && this.selectedRow[0]);
+ }
+
hasVul(artifact: Artifact): boolean {
return !!(
artifact &&
@@ -779,6 +838,14 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
);
}
+ hasSbom(artifact: Artifact): boolean {
+ return !!(
+ artifact &&
+ artifact.addition_links &&
+ artifact.addition_links[ADDITIONS.SBOMS]
+ );
+ }
+
submitFinish(e: boolean) {
this.scanFinishedArtifactLength += 1;
// all selected scan action has started
@@ -794,9 +861,27 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
this.onSendingScanCommand = e;
}
}
+
+ submitSbomFinish(e: boolean) {
+ this.sbomFinishedArtifactLength += 1;
+ // all selected scan action has started
+ if (this.sbomFinishedArtifactLength === this.onSbomArtifactsLength) {
+ this.onSendingSbomCommand = e;
+ }
+ }
+
+ submitSbomStopFinish(e: boolean) {
+ this.sbomStoppedArtifactLength += 1;
+ // all selected scan action has stopped
+ if (this.sbomStoppedArtifactLength === this.onStopSbomArtifactsLength) {
+ this.onSendingSbomCommand = e;
+ }
+ }
+
handleScanOverview(scanOverview: any): any {
if (scanOverview) {
- return Object.values(scanOverview)[0];
+ const keys = Object.keys(scanOverview) ?? [];
+ return keys.length > 0 ? scanOverview[keys[0]] : null;
}
return null;
}
@@ -857,6 +942,11 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
}
}
+ // when finished, remove it from selectedRow
+ sbomFinished(artifact: Artifact) {
+ this.scanFinished(artifact);
+ }
+
getIconsFromBackEnd() {
if (this.artifactList && this.artifactList.length) {
this.artifactService.getIconsFromBackEnd(this.artifactList);
@@ -929,11 +1019,18 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
});
}
}
- checkCosignAsync(artifacts: ArtifactFront[]) {
+
+ checkCosignAndSbomAsync(artifacts: ArtifactFront[]) {
if (artifacts) {
if (artifacts.length) {
artifacts.forEach(item => {
item.signed = CHECKING;
+ // const sbomOverview = item?.sbom_overview;
+ // item.sbomDigest = sbomOverview?.sbom_digest;
+ // let queryTypes = `${AccessoryType.COSIGN} ${AccessoryType.NOTATION}`;
+ // if (!item.sbomDigest) {
+ // queryTypes = `${queryTypes} ${AccessoryType.SBOM}`;
+ // }
this.newArtifactService
.listAccessories({
projectName: this.projectName,
@@ -979,6 +1076,24 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
return false;
}
+ // return true if all selected rows are in "running" state
+ canStopSbom(): boolean {
+ if (this.onSendingStopSbomCommand) {
+ return false;
+ }
+ if (this.selectedRow && this.selectedRow.length) {
+ let flag: boolean = true;
+ this.selectedRow.forEach(item => {
+ const st: string = this.sbomStatus(item);
+ if (!this.isRunningState(st)) {
+ flag = false;
+ }
+ });
+ return flag;
+ }
+ return false;
+ }
+
isRunningState(state: string): boolean {
return (
state === VULNERABILITY_SCAN_STATUS.RUNNING ||
@@ -1001,6 +1116,22 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
});
}
}
+
+ stopSbom() {
+ if (this.selectedRow && this.selectedRow.length) {
+ this.sbomStoppedArtifactLength = 0;
+ this.onStopSbomArtifactsLength = this.selectedRow.length;
+ this.onSendingStopSbomCommand = true;
+ this.selectedRow.forEach((data: any) => {
+ let digest = data.digest;
+ this.eventService.publish(
+ HarborEvent.STOP_SBOM_ARTIFACT,
+ this.repoName + '/' + digest
+ );
+ });
+ }
+ }
+
tagsString(tags: Tag[]): string {
if (tags?.length) {
const arr: string[] = [];
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact.module.ts b/src/portal/src/app/base/project/repository/artifact/artifact.module.ts
index bd4f49961b2c..4ff6da2d4836 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact.module.ts
+++ b/src/portal/src/app/base/project/repository/artifact/artifact.module.ts
@@ -15,6 +15,7 @@ import { ArtifactVulnerabilitiesComponent } from './artifact-additions/artifact-
import { ArtifactDefaultService, ArtifactService } from './artifact.service';
import { ArtifactDetailRoutingResolverService } from '../../../../services/routing-resolvers/artifact-detail-routing-resolver.service';
import { ResultBarChartComponent } from './vulnerability-scanning/result-bar-chart.component';
+import { ResultSbomComponent } from './sbom-scanning/sbom-scan.component';
import { ResultTipHistogramComponent } from './vulnerability-scanning/result-tip-histogram/result-tip-histogram.component';
import { HistogramChartComponent } from './vulnerability-scanning/histogram-chart/histogram-chart.component';
import { ArtifactInfoComponent } from './artifact-list-page/artifact-list/artifact-info/artifact-info.component';
@@ -24,6 +25,7 @@ import { CopyArtifactComponent } from './artifact-list-page/artifact-list/artifa
import { CopyDigestComponent } from './artifact-list-page/artifact-list/artifact-list-tab/copy-digest/copy-digest.component';
import { ArtifactFilterComponent } from './artifact-list-page/artifact-list/artifact-list-tab/artifact-filter/artifact-filter.component';
import { PullCommandComponent } from './artifact-list-page/artifact-list/artifact-list-tab/pull-command/pull-command.component';
+import { SbomTipHistogramComponent } from './sbom-scanning/sbom-tip-histogram/sbom-tip-histogram.component';
const routes: Routes = [
{
@@ -80,6 +82,8 @@ const routes: Routes = [
BuildHistoryComponent,
ArtifactVulnerabilitiesComponent,
ResultBarChartComponent,
+ ResultSbomComponent,
+ SbomTipHistogramComponent,
ResultTipHistogramComponent,
HistogramChartComponent,
ArtifactInfoComponent,
diff --git a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-overview.ts b/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-overview.ts
new file mode 100644
index 000000000000..753a32a206bc
--- /dev/null
+++ b/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-overview.ts
@@ -0,0 +1,39 @@
+/* tslint:disable */
+
+import { Scanner } from 'ng-swagger-gen/models';
+
+/**
+ * The generate SBOM overview information
+ */
+export interface SBOMOverview {
+ /**
+ * id of the native sbom report
+ */
+ report_id?: string;
+
+ /**
+ * The start time of the scan process that generating report
+ */
+ start_time?: string;
+
+ /**
+ * The end time of the scan process that generating report
+ */
+ end_time?: string;
+
+ /**
+ * The status of the generate SBOM process
+ */
+ scan_status?: string;
+
+ /**
+ * The digest of the generated SBOM accessory
+ */
+ sbom_digest?: string;
+
+ /**
+ * The seconds spent for generating the report
+ */
+ duration?: number;
+ scanner?: Scanner;
+}
diff --git a/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan-component.html b/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan-component.html
new file mode 100644
index 000000000000..1b537edd5691
--- /dev/null
+++ b/src/portal/src/app/base/project/repository/artifact/sbom-scanning/sbom-scan-component.html
@@ -0,0 +1,38 @@
+
+
+ {{
+ 'SBOM.STATE.QUEUED' | translate
+ }}
+
+
+
+
{{ 'SBOM.STATE.SCANNING' | translate }}
+
+
+
+
+
+
+ {{
+ 'SBOM.STATE.STOPPED' | translate
+ }}
+
+
+ {{
+ 'SBOM.STATE.OTHER_STATUS' | translate
+ }}
+
+
+
+
+
+
+ {{ 'SBOM.NO_SBOM' | translate }}
+
+
+
+ {{
+ 'SCANNER.SCANNED_BY' | translate
+ }}
+ {{ getScannerInfo() }}
+
+
+ {{
+ 'SCANNER.DURATION' | translate
+ }}
+ {{ duration() }}
+
+
+ {{ 'SBOM.CHART.SCANNING_TIME' | translate }}
+
+ {{ completeTimestamp | harborDatetime : 'short' }}
+
+
+
+
+
+
+
+
+
+ {{ 'SBOM.CHART.SCANNING_PERCENT' | translate }}
+
+ {{ completePercent }}
+
+
+ {{
+ 'SBOM.CHART.SCANNING_PERCENT_EXPLAIN' | translate
+ }}
+
+
+
+