Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-23 02:35:17 +01:00
Code Issues Projects Releases Wiki Activity

Add UI for metadata description

Browse Source
This commit is contained in:
Deng, Qian 2017-12-08 15:05:52 +08:00
parent 5de872486c
commit b15acdf151
34 changed files with 1134 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui_ng/lib/package.json
View File

@ -1,6 +1,6 @@
{
"name": "harbor-ui",
"version": "0.5.0",
"version": "0.5.24",
"description": "Harbor shared UI components based on Clarity and Angular4",
"scripts": {
"start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json",

6
src/ui_ng/lib/src/harbor-library.module.ts
View File

@ -6,7 +6,7 @@ import { ENDPOINT_DIRECTIVES } from './endpoint/index';
import { REPOSITORY_DIRECTIVES } from './repository/index';
import { REPOSITORY_STACKVIEW_DIRECTIVES } from './repository-stackview/index';
import { LIST_REPOSITORY_DIRECTIVES } from './list-repository/index';
import { REPOSITORY_LISTVIEW_DIRECTIVES } from './repository-listview/index';
import { TAG_DIRECTIVES } from './tag/index';
import { REPLICATION_DIRECTIVES } from './replication/index';
@ -157,7 +157,7 @@ export function initConfig(translateInitializer: TranslateServiceInitializer, co
ENDPOINT_DIRECTIVES,
REPOSITORY_DIRECTIVES,
REPOSITORY_STACKVIEW_DIRECTIVES,
LIST_REPOSITORY_DIRECTIVES,
REPOSITORY_LISTVIEW_DIRECTIVES,
TAG_DIRECTIVES,
CREATE_EDIT_ENDPOINT_DIRECTIVES,
CONFIRMATION_DIALOG_DIRECTIVES,
@ -178,7 +178,7 @@ export function initConfig(translateInitializer: TranslateServiceInitializer, co
ENDPOINT_DIRECTIVES,
REPOSITORY_DIRECTIVES,
REPOSITORY_STACKVIEW_DIRECTIVES,
LIST_REPOSITORY_DIRECTIVES,
REPOSITORY_LISTVIEW_DIRECTIVES,
TAG_DIRECTIVES,
CREATE_EDIT_ENDPOINT_DIRECTIVES,
CONFIRMATION_DIALOG_DIRECTIVES,

7
src/ui_ng/lib/src/list-repository/index.ts
View File

@ -1,7 +0,0 @@
import { Type } from '@angular/core';
import { ListRepositoryComponent } from './list-repository.component';
export const LIST_REPOSITORY_DIRECTIVES: Type<any>[] = [
ListRepositoryComponent
];

1
src/ui_ng/lib/src/list-repository/list-repository.component.css.ts
View File

@ -1 +0,0 @@
export const LIST_REPOSITORY_STYLE = ``;

20
src/ui_ng/lib/src/list-repository/list-repository.component.html.ts
View File

@ -1,20 +0,0 @@
export const LIST_REPOSITORY_TEMPLATE = `
<clr-datagrid (clrDgRefresh)="refresh($event)">
<clr-dg-column [clrDgField]="'name'">{{'REPOSITORY.NAME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="tagsCountComparator">{{'REPOSITORY.TAGS_COUNT' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="pullCountComparator">{{'REPOSITORY.PULL_COUNT' | translate}}</clr-dg-column>
<clr-dg-placeholder>{{'REPOSITORY.PLACEHOLDER' | translate }}</clr-dg-placeholder>
<clr-dg-row *clrDgItems="let r of repositories" [clrDgItem]='r'>
<clr-dg-action-overflow [hidden]="!hasProjectAdminRole">
<button class="action-item" (click)="deleteRepo(r.name)">{{'REPOSITORY.DELETE' | translate}}</button>
</clr-dg-action-overflow>
<clr-dg-cell><a href="javascript:void(0)" (click)="gotoLink(projectId || r.project_id, r.name || r.repository_name)">{{r.name}}</a></clr-dg-cell>
<clr-dg-cell>{{r.tags_count}}</clr-dg-cell>
<clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
<span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}}</span>
{{pagination.totalItems}}{{'REPOSITORY.ITEMS' | translate}}
<clr-dg-pagination #pagination [clrDgPageSize]="15"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>`;

78
src/ui_ng/lib/src/list-repository/list-repository.component.spec.ts
View File

@ -1,78 +0,0 @@
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { Router } from '@angular/router';
import { SharedModule } from '../shared/shared.module';
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
import { ListRepositoryComponent } from './list-repository.component';
import { Repository, RepositoryItem } from '../service/interface';
import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
class RouterStub {
navigateByUrl(url: string) { return url; }
}
describe('ListRepositoryComponent (inline template)', () => {
let comp: ListRepositoryComponent;
let fixture: ComponentFixture<ListRepositoryComponent>;
let mockData: RepositoryItem[] = [
{
"id": 11,
"name": "library/busybox",
"project_id": 1,
"description": "",
"pull_count": 0,
"star_count": 0,
"tags_count": 1
},
{
"id": 12,
"name": "library/nginx",
"project_id": 1,
"description": "",
"pull_count": 0,
"star_count": 0,
"tags_count": 1
}
];
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
SharedModule
],
declarations: [
ListRepositoryComponent,
ConfirmationDialogComponent
],
providers: [
{ provide: Router, useClass: RouterStub },
{ provide: SERVICE_CONFIG, useValue: {} }
]
});
}));
beforeEach(() => {
fixture = TestBed.createComponent(ListRepositoryComponent);
comp = fixture.componentInstance;
});
it('should load and render data', async(() => {
fixture.detectChanges();
comp.repositories = mockData;
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(comp.repositories).toBeTruthy();
let de: DebugElement = fixture.debugElement.query(By.css('datagrid-cell'));
fixture.detectChanges();
expect(de).toBeTruthy();
let el: HTMLElement = de.nativeElement;
expect(el).toBeTruthy();
expect(el.textContent).toEqual('library/busybox');
});
}));
});

56
src/ui_ng/lib/src/list-repository/list-repository.component.ts
View File

@ -1,56 +0,0 @@
import { Component, Input, Output, EventEmitter, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { Router } from '@angular/router';
import { State, Comparator } from 'clarity-angular';
import { RepositoryItem } from '../service/interface';
import { LIST_REPOSITORY_TEMPLATE } from './list-repository.component.html';
import { CustomComparator } from '../utils';
@Component({
selector: 'hbr-list-repository',
template: LIST_REPOSITORY_TEMPLATE,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListRepositoryComponent {
@Input() urlPrefix: string;
@Input() projectId: number;
@Input() repositories: RepositoryItem[];
@Output() delete = new EventEmitter<string>();
@Output() paginate = new EventEmitter<State>();
@Input() hasProjectAdminRole: boolean;
pageOffset: number = 1;
pullCountComparator: Comparator<RepositoryItem> = new CustomComparator<RepositoryItem>('pull_count', 'number');
tagsCountComparator: Comparator<RepositoryItem> = new CustomComparator<RepositoryItem>('tags_count', 'number');
constructor(
private router: Router,
private ref: ChangeDetectorRef) {
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
ngOnInit() { }
deleteRepo(repoName: string) {
this.delete.emit(repoName);
}
refresh(state: State) {
if (this.repositories) {
this.paginate.emit(state);
}
}
public gotoLink(projectId: number, repoName: string): void {
let linkUrl = [this.urlPrefix, 'tags', projectId, repoName];
this.router.navigate(linkUrl);
}
}

6
src/ui_ng/lib/src/repository-listview/index.ts Normal file
View File

@ -0,0 +1,6 @@
import { Type } from '@angular/core';
import { RepositoryListviewComponent } from './repository-listview.component';
export const REPOSITORY_LISTVIEW_DIRECTIVES: Type<any>[] = [
RepositoryListviewComponent
];

2
src/ui_ng/lib/src/repository-listview/repository-listview.component.css.ts Normal file
View File

@ -0,0 +1,2 @@
export const REPOSITORY_LISTVIEW_STYLE = `
`;

41
src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts Normal file
View File

@ -0,0 +1,41 @@
export const REPOSITORY_LISTVIEW_TEMPLATE = `
<div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row flex-items-xs-right option-right">
<div class="flex-xs-middle">
<hbr-push-image-button style="display: inline-block;" [registryUrl]="registryUrl" [projectName]="projectName"></hbr-push-image-button>
<hbr-filter [withDivider]="true" filterPlaceholder="{{'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate}}" (filter)="doSearchRepoNames($event)" [currentValue]="lastFilteredRepoName"></hbr-filter>
<span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<clr-datagrid (clrDgRefresh)="clrLoad($event)" [clrDgLoading]="loading">
<clr-dg-column [clrDgField]="'name'">{{'REPOSITORY.NAME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="tagsCountComparator">{{'REPOSITORY.TAGS_COUNT' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="pullCountComparator">{{'REPOSITORY.PULL_COUNT' | translate}}</clr-dg-column>
<clr-dg-placeholder>{{'REPOSITORY.PLACEHOLDER' | translate }}</clr-dg-placeholder>
<clr-dg-row *ngFor="let r of repositories">
<clr-dg-action-overflow [hidden]="!hasProjectAdminRole">
<button class="action-item" (click)="deleteRepo(r.name)">{{'REPOSITORY.DELETE' | translate}}</button>
</clr-dg-action-overflow>
<clr-dg-cell><a href="javascript:void(0)" (click)="gotoLink(projectId || r.project_id, r.name || r.repository_name)">{{r.name}}</a></clr-dg-cell>
<clr-dg-cell>{{r.tags_count}}</clr-dg-cell>
<clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
<span *ngIf="showDBStatusWarning" class="db-status-warning">
<clr-icon shape="warning" class="is-warning" size="24"></clr-icon>
{{'CONFIG.SCANNING.DB_NOT_READY' | translate }}
</span>
<span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}}</span>
{{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}}
<clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
</div>
</div>
<confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
</div>
`;

170
src/ui_ng/lib/src/repository-listview/repository-listview.component.spec.ts Normal file
View File

@ -0,0 +1,170 @@
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { SharedModule } from '../shared/shared.module';
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
import { RepositoryListviewComponent } from './repository-listview.component';
import { TagComponent } from '../tag/tag.component';
import { FilterComponent } from '../filter/filter.component';
import { ErrorHandler } from '../error-handler/error-handler';
import { Repository, RepositoryItem, Tag, SystemInfo } from '../service/interface';
import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
import { RepositoryService, RepositoryDefaultService } from '../service/repository.service';
import { TagService, TagDefaultService } from '../service/tag.service';
import { SystemInfoService, SystemInfoDefaultService } from '../service/system-info.service';
import { VULNERABILITY_DIRECTIVES } from '../vulnerability-scanning/index';
import { PUSH_IMAGE_BUTTON_DIRECTIVES } from '../push-image/index';
import { INLINE_ALERT_DIRECTIVES } from '../inline-alert/index';
import { JobLogViewerComponent } from '../job-log-viewer/index';
import { click } from '../utils';
describe('RepositoryComponentListview (inline template)', () => {
let compRepo: RepositoryListviewComponent;
let fixtureRepo: ComponentFixture<RepositoryListviewComponent>;
let repositoryService: RepositoryService;
let tagService: TagService;
let systemInfoService: SystemInfoService;
let spyRepos: jasmine.Spy;
let spySystemInfo: jasmine.Spy;
let mockSystemInfo: SystemInfo = {
"with_notary": true,
"with_admiral": false,
"admiral_endpoint": "NA",
"auth_mode": "db_auth",
"registry_url": "10.112.122.56",
"project_creation_restriction": "everyone",
"self_registration": true,
"has_ca_root": false,
"harbor_version": "v1.1.1-rc1-160-g565110d"
};
let mockRepoData: RepositoryItem[] = [
{
"id": 1,
"name": "library/busybox",
"project_id": 1,
"description": "asdfsadf",
"pull_count": 0,
"star_count": 0,
"tags_count": 1
},
{
"id": 2,
"name": "library/nginx",
"project_id": 1,
"description": "asdf",
"pull_count": 0,
"star_count": 0,
"tags_count": 1
}
];
let mockRepo: Repository = {
metadata: {xTotalCount: 2},
data: mockRepoData
};
let mockTagData: Tag[] = [
{
"digest": "sha256:e5c82328a509aeb7c18c1d7fb36633dc638fcf433f651bdcda59c1cc04d3ee55",
"name": "1.11.5",
"size": "2049",
"architecture": "amd64",
"os": "linux",
"docker_version": "1.12.3",
"author": "NGINX Docker Maintainers \"docker-maint@nginx.com\"",
"created": new Date("2016-11-08T22:41:15.912313785Z"),
"signature": null
}
];
let config: IServiceConfig = {
repositoryBaseEndpoint: '/api/repository/testing',
systemInfoEndpoint: '/api/systeminfo/testing',
targetBaseEndpoint: '/api/tag/testing'
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
SharedModule,
RouterTestingModule
],
declarations: [
RepositoryListviewComponent,
TagComponent,
ConfirmationDialogComponent,
FilterComponent,
VULNERABILITY_DIRECTIVES,
PUSH_IMAGE_BUTTON_DIRECTIVES,
INLINE_ALERT_DIRECTIVES,
JobLogViewerComponent
],
providers: [
ErrorHandler,
{ provide: SERVICE_CONFIG, useValue: config },
{ provide: RepositoryService, useClass: RepositoryDefaultService },
{ provide: TagService, useClass: TagDefaultService },
{ provide: SystemInfoService, useClass: SystemInfoDefaultService }
]
});
}));
beforeEach(() => {
fixtureRepo = TestBed.createComponent(RepositoryListviewComponent);
compRepo = fixtureRepo.componentInstance;
compRepo.projectId = 1;
compRepo.hasProjectAdminRole = true;
repositoryService = fixtureRepo.debugElement.injector.get(RepositoryService);
systemInfoService = fixtureRepo.debugElement.injector.get(SystemInfoService);
spyRepos = spyOn(repositoryService, 'getRepositories').and.returnValues(Promise.resolve(mockRepo));
spySystemInfo = spyOn(systemInfoService, 'getSystemInfo').and.returnValues(Promise.resolve(mockSystemInfo));
fixtureRepo.detectChanges();
});
it('should create', () => {
expect(compRepo).toBeTruthy();
});
it('should load and render data', async(() => {
fixtureRepo.detectChanges();
fixtureRepo.whenStable().then(() => {
fixtureRepo.detectChanges();
let deRepo: DebugElement = fixtureRepo.debugElement.query(By.css('datagrid-cell'));
expect(deRepo).toBeTruthy();
let elRepo: HTMLElement = deRepo.nativeElement;
expect(elRepo).toBeTruthy();
expect(elRepo.textContent).toEqual('library/busybox');
});
}));
it('should filter data by keyword', async(() => {
fixtureRepo.detectChanges();
fixtureRepo.whenStable().then(() => {
fixtureRepo.detectChanges();
compRepo.doSearchRepoNames('nginx');
fixtureRepo.detectChanges();
let de: DebugElement[] = fixtureRepo.debugElement.queryAll(By.css('datagrid-cell'));
expect(de).toBeTruthy();
expect(de.length).toEqual(1);
let el: HTMLElement = de[0].nativeElement;
expect(el).toBeTruthy();
expect(el.textContent).toEqual('library/nginx');
});
}));
});

303
src/ui_ng/lib/src/repository-listview/repository-listview.component.ts Normal file
View File

@ -0,0 +1,303 @@
import {
Component,
Input,
Output,
OnInit,
ViewChild,
ChangeDetectionStrategy,
ChangeDetectorRef,
EventEmitter, OnChanges, SimpleChanges
} from '@angular/core';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Comparator } from 'clarity-angular';
import { REPOSITORY_LISTVIEW_TEMPLATE } from './repository-listview.component.html';
import { REPOSITORY_LISTVIEW_STYLE } from './repository-listview.component.css';
import {
Repository,
SystemInfo,
SystemInfoService,
RepositoryService,
RequestQueryParams,
RepositoryItem,
TagService
} from '../service/index';
import { ErrorHandler } from '../error-handler/error-handler';
import { toPromise, CustomComparator } from '../utils';
import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const';
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message';
import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message';
import { Subscription } from 'rxjs/Subscription';
import { Tag, TagClickEvent } from '../service/interface';
import { State } from "clarity-angular";
import {
DEFAULT_PAGE_SIZE,
calculatePage,
doFiltering,
doSorting
} from '../utils';
@Component({
selector: 'hbr-repository-listview',
template: REPOSITORY_LISTVIEW_TEMPLATE,
styles: [REPOSITORY_LISTVIEW_STYLE],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RepositoryListviewComponent implements OnChanges, OnInit {
signedCon: {[key: string]: any | string[]} = {};
@Input() projectId: number;
@Input() projectName = 'unknown';
@Input() urlPrefix: string;
@Input() hasSignedIn: boolean;
@Input() hasProjectAdminRole: boolean;
@Output() tagClickEvent = new EventEmitter<TagClickEvent>();
lastFilteredRepoName: string;
repositories: RepositoryItem[];
systemInfo: SystemInfo;
loading = true;
@ViewChild('confirmationDialog')
confirmationDialog: ConfirmationDialogComponent;
pullCountComparator: Comparator<RepositoryItem> = new CustomComparator<RepositoryItem>('pull_count', 'number');
tagsCountComparator: Comparator<RepositoryItem> = new CustomComparator<RepositoryItem>('tags_count', 'number');
pageSize: number = DEFAULT_PAGE_SIZE;
currentPage = 1;
totalCount = 0;
currentState: State;
constructor(
private errorHandler: ErrorHandler,
private translateService: TranslateService,
private repositoryService: RepositoryService,
private systemInfoService: SystemInfoService,
private translate: TranslateService,
private tagService: TagService,
private ref: ChangeDetectorRef,
private router: Router) { }
public get registryUrl(): string {
return this.systemInfo ? this.systemInfo.registry_url : '';
}
public get withNotary(): boolean {
return this.systemInfo ? this.systemInfo.with_notary : false;
}
public get withClair(): boolean {
return this.systemInfo ? this.systemInfo.with_clair : false;
}
public get isClairDBReady(): boolean {
return this.systemInfo &&
this.systemInfo.clair_vulnerability_status &&
this.systemInfo.clair_vulnerability_status.overall_last_update > 0;
}
public get showDBStatusWarning(): boolean {
return this.withClair && !this.isClairDBReady;
}
confirmDeletion(message: ConfirmationAcknowledgement) {
if (message &&
message.source === ConfirmationTargets.REPOSITORY &&
message.state === ConfirmationState.CONFIRMED) {
let repoName = message.data;
toPromise<number>(this.repositoryService
.deleteRepository(repoName))
.then(
response => {
this.refresh();
let st: State = this.getStateAfterDeletion();
if (!st) {
this.refresh();
} else {
this.clrLoad(st);
}
this.translateService.get('REPOSITORY.DELETED_REPO_SUCCESS')
.subscribe(res => this.errorHandler.info(res));
}).catch(error => {
if (error.status === '412') {
this.translateService.get('REPOSITORY.TAGS_SIGNED')
.subscribe(res => this.errorHandler.info(res));
return;
}
this.errorHandler.error(error);
});
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['projectId'] && changes['projectId'].currentValue) {
this.refresh();
}
}
ngOnInit(): void {
// Get system info for tag views
toPromise<SystemInfo>(this.systemInfoService.getSystemInfo())
.then(systemInfo => this.systemInfo = systemInfo)
.catch(error => this.errorHandler.error(error));
this.lastFilteredRepoName = '';
}
doSearchRepoNames(repoName: string) {
this.lastFilteredRepoName = repoName;
this.currentPage = 1;
let st: State = this.currentState;
if (!st) {
st = { page: {} };
}
st.page.size = this.pageSize;
st.page.from = 0;
st.page.to = this.pageSize - 1;
this.clrLoad(st);
}
saveSignatures(event: {[key: string]: string[]}): void {
Object.assign(this.signedCon, event);
}
deleteRepo(repoName: string) {
if (this.signedCon[repoName]) {
this.signedDataSet(repoName);
} else {
this.getTagInfo(repoName).then(() => {
this.signedDataSet(repoName);
});
}
}
getTagInfo(repoName: string): Promise<void> {
// this.signedNameArr = [];
this.signedCon[repoName] = [];
return toPromise<Tag[]>(this.tagService
.getTags(repoName))
.then(items => {
items.forEach((t: Tag) => {
if (t.signature !== null) {
this.signedCon[repoName].push(t.name);
}
});
})
.catch(error => this.errorHandler.error(error));
}
signedDataSet(repoName: string): void {
let signature = '';
if (this.signedCon[repoName].length === 0) {
this.confirmationDialogSet('REPOSITORY.DELETION_TITLE_REPO', signature, repoName, 'REPOSITORY.DELETION_SUMMARY_REPO', ConfirmationButtons.DELETE_CANCEL);
return;
}
signature = this.signedCon[repoName].join(',');
this.confirmationDialogSet('REPOSITORY.DELETION_TITLE_REPO_SIGNED', signature, repoName, 'REPOSITORY.DELETION_SUMMARY_REPO_SIGNED', ConfirmationButtons.CLOSE);
}
confirmationDialogSet(summaryTitle: string, signature: string, repoName: string, summaryKey: string, button: ConfirmationButtons): void {
this.translate.get(summaryKey,
{
repoName: repoName,
signedImages: signature,
})
.subscribe((res: string) => {
summaryKey = res;
let message = new ConfirmationMessage(
summaryTitle,
summaryKey,
repoName,
repoName,
ConfirmationTargets.REPOSITORY,
button);
this.confirmationDialog.open(message);
let hnd = setInterval(() => this.ref.markForCheck(), 100);
setTimeout(() => clearInterval(hnd), 5000);
});
}
refresh() {
this.doSearchRepoNames('');
}
watchTagClickEvt(tagClickEvt: TagClickEvent): void {
this.tagClickEvent.emit(tagClickEvt);
}
clrLoad(state: State): void {
//Keep it for future filtering and sorting
this.currentState = state;
let pageNumber: number = calculatePage(state);
if (pageNumber <= 0) { pageNumber = 1; }
//Pagination
let params: RequestQueryParams = new RequestQueryParams();
params.set("page", '' + pageNumber);
params.set("page_size", '' + this.pageSize);
this.loading = true;
toPromise<Repository>(this.repositoryService.getRepositories(
this.projectId,
this.lastFilteredRepoName,
params))
.then((repo: Repository) => {
this.totalCount = repo.metadata.xTotalCount;
this.repositories = repo.data;
this.signedCon = {};
//Do filtering and sorting
this.repositories = doFiltering<RepositoryItem>(this.repositories, state);
this.repositories = doSorting<RepositoryItem>(this.repositories, state);
this.loading = false;
})
.catch(error => {
this.loading = false;
this.errorHandler.error(error);
});
//Force refresh view
let hnd = setInterval(() => this.ref.markForCheck(), 100);
setTimeout(() => clearInterval(hnd), 5000);
}
getStateAfterDeletion(): State {
let total: number = this.totalCount - 1;
if (total <= 0) { return null; }
let totalPages: number = Math.ceil(total / this.pageSize);
let targetPageNumber: number = this.currentPage;
if (this.currentPage > totalPages) {
targetPageNumber = totalPages;//Should == currentPage -1
}
let st: State = this.currentState;
if (!st) {
st = { page: {} };
}
st.page.size = this.pageSize;
st.page.from = (targetPageNumber - 1) * this.pageSize;
st.page.to = targetPageNumber * this.pageSize - 1;
return st;
}
public gotoLink(projectId: number, repoName: string): void {
let linkUrl = [this.router.url, repoName];
this.router.navigate(linkUrl);
}
}

1
src/ui_ng/lib/src/repository/index.ts
View File

@ -1,7 +1,6 @@
import { Type } from '@angular/core';
import { RepositoryComponent } from './repository.component';
export const REPOSITORY_DIRECTIVES: Type<any>[] = [
RepositoryComponent
];

44
src/ui_ng/lib/src/repository/repository.component.css.ts
View File

@ -1,4 +1,46 @@
export const REPOSITORY_STYLE = `.option-right {
padding-right: 16px;
margin-bottom: 12px;
}`;
}
.arrow-back {
cursor: pointer;
}
.arrow-block {
border-right: 2px solid #cccccc;
margin-right: 6px;
display: inline-flex;
padding: 6px 6px 6px 12px;
}
.title-block {
display: inline-block;
}
.title-wrapper {
padding-top: 12px;
}
.tag-name {
font-weight: 300;
font-size: 32px;
}
pre {
white-space: pre-wrap;
}
#info-edit-button {
margin-top: 0px;
margin-bottom: 12px;
}
#images-container {
margin-top: 12px;
}
harbor-tag {
position: relative;
top: 24px;
}
`;

51
src/ui_ng/lib/src/repository/repository.component.html.ts
View File

@ -1,15 +1,48 @@
export const REPOSITORY_TEMPLATE = `
<confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
<div class="row">
<section class="overview-section">
<div class="title-wrapper">
<div class="title-block arrow-block">
<clr-icon class="rotate-90 arrow-back" shape="arrow" size="36" (click)="goBack()"></clr-icon>
</div>
<div class="title-block">
<h2 sub-header-title>{{repoName}}</h2>
</div>
</div>
</section>
<section class="detail-section">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row flex-items-xs-right option-right">
<div class="flex-xs-middle">
<hbr-filter filterPlaceholder="{{'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate}}" (filter)="doSearchRepoNames($event)"></hbr-filter>
<a href="javascript:void(0)" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></a>
<span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
<ul id="configTabs" class="nav" role="tablist">
<li role="presentation" class="nav-item">
<button id="repo-info" class="btn btn-link nav-link" aria-controls="info" [class.active]='isCurrentTabLink("repo-info")' type="button" (click)='tabLinkClick("repo-info")'>{{'REPOSITORY.INFO' | translate}}</button>
</li>
<li role="presentation" class="nav-item">
<button id="repo-image" class="btn btn-link nav-link active" aria-controls="image" [class.active]='isCurrentTabLink("repo-image")' type="button" (click)='tabLinkClick("repo-image")'>{{'REPOSITORY.IMAGE' | translate}}</button>
</li>
</ul>
<section id="info" role="tabpanel" aria-labelledby="repo-info" [hidden]='!isCurrentTabContent("info")'>
<form #repoInfoForm="ngForm">
<div id="info-edit-button">
<button class="btn btn-sm" [disabled]="editing" (click)="editInfo()" >{{'BUTTON.EDIT' | translate}}</button>
</div>
<div>
<h3 *ngIf="!editing && !hasInfo()" >{{'REPOSITORY.NO_INFO' | translate }}</h3>
<pre *ngIf="!editing && hasInfo()" ><code>{{ imageInfo }}</code></pre>
<textarea *ngIf="editing" name="info-edit-textarea" [(ngModel)]="imageInfo"></textarea>
</div>
<div class="btn-sm" *ngIf="editing">
<button class="btn btn-primary" [disabled]="!hasChanges()" (click)="saveInfo()" >{{'BUTTON.SAVE' | translate}}</button>
<button class="btn" (click)="cancelInfo()" >{{'BUTTON.CANCEL' | translate}}</button>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<hbr-list-repository [urlPrefix]="urlPrefix" [projectId]="projectId" [repositories]="changedRepositories" (delete)="deleteRepo($event)" [hasProjectAdminRole]="hasProjectAdminRole" (paginate)="retrieve($event)"></hbr-list-repository>
<confirmation-dialog #confirmationDialog (confirmAction)="confirmCancel($event)"></confirmation-dialog>
</form>
</section>
<section id="image" role="tabpanel" aria-labelledby="repo-image" [hidden]='!isCurrentTabContent("image")'>
<div id=images-container>
<hbr-tag ngProjectAs="clr-dg-row-detail" (tagClickEvent)="watchTagClickEvt($event)" (signatureOutput)="saveSignatures($event)" class="sub-grid-custom" [repoName]="repoName" [registryUrl]="registryUrl" [withNotary]="withNotary" [withClair]="withClair" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId"></hbr-tag>
</div>
</div>`;
</section>
</div>
</section>
`;

153
src/ui_ng/lib/src/repository/repository.component.spec.ts
View File

@ -1,19 +1,27 @@
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { ComponentFixture, TestBed, async, } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { SharedModule } from '../shared/shared.module';
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
import { RepositoryComponent } from './repository.component';
import { ListRepositoryComponent } from '../list-repository/list-repository.component';
import { RepositoryListviewComponent } from '../repository-listview/repository-listview.component';
import { FilterComponent } from '../filter/filter.component';
import { TagComponent } from '../tag/tag.component';
import { VULNERABILITY_DIRECTIVES } from '../vulnerability-scanning/index';
import { PUSH_IMAGE_BUTTON_DIRECTIVES } from '../push-image/index';
import { INLINE_ALERT_DIRECTIVES } from '../inline-alert/index';
import { JobLogViewerComponent } from '../job-log-viewer/index';
import { ErrorHandler } from '../error-handler/error-handler';
import { Repository, RepositoryItem } from '../service/interface';
import { Repository, RepositoryItem, Tag, SystemInfo } from '../service/interface';
import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
import { RepositoryService, RepositoryDefaultService } from '../service/repository.service';
import { SystemInfoService, SystemInfoDefaultService } from '../service/system-info.service';
import { TagService, TagDefaultService } from '../service/tag.service';
import { ChannelService } from '../channel/index';
class RouterStub {
navigateByUrl(url: string) { return url; }
@ -21,72 +29,123 @@ class RouterStub {
describe('RepositoryComponent (inline template)', () => {
let comp: RepositoryComponent;
let compRepo: RepositoryComponent;
let fixture: ComponentFixture<RepositoryComponent>;
let repositoryService: RepositoryService;
let spy: jasmine.Spy;
let systemInfoService: SystemInfoService;
let tagService: TagService;
let mockData: RepositoryItem[] = [
{
"id": 11,
"name": "library/busybox",
"project_id": 1,
"description": "",
"pull_count": 0,
"star_count": 0,
"tags_count": 1
},
{
"id": 12,
"name": "library/nginx",
"project_id": 1,
"description": "",
"pull_count": 0,
"star_count": 0,
"tags_count": 1
}
];
let mockRepo: Repository = {
metadata: { xTotalCount: 2 },
data: mockData
let spyRepos: jasmine.Spy;
let spyTags: jasmine.Spy;
let spySystemInfo: jasmine.Spy;
let mockSystemInfo: SystemInfo = {
'with_notary': true,
'with_admiral': false,
'admiral_endpoint': 'NA',
'auth_mode': 'db_auth',
'registry_url': '10.112.122.56',
'project_creation_restriction': 'everyone',
'self_registration': true,
'has_ca_root': false,
'harbor_version': 'v1.1.1-rc1-160-g565110d'
};
let mockRepoData: RepositoryItem[] = [
{
'id': 1,
'name': 'library/busybox',
'project_id': 1,
'description': 'asdfsadf',
'pull_count': 0,
'star_count': 0,
'tags_count': 1
},
{
'id': 2,
'name': 'library/nginx',
'project_id': 1,
'description': 'asdf',
'pull_count': 0,
'star_count': 0,
'tags_count': 1
}
];
let mockRepo: Repository = {
metadata: {xTotalCount: 2},
data: mockRepoData
};
let mockTagData: Tag[] = [
{
'digest': 'sha256:e5c82328a509aeb7c18c1d7fb36633dc638fcf433f651bdcda59c1cc04d3ee55',
'name': '1.11.5',
'size': '2049',
'architecture': 'amd64',
'os': 'linux',
'docker_version': '1.12.3',
'author': 'NGINX Docker Maintainers \"docker-maint@nginx.com\"',
'created': new Date('2016-11-08T22:41:15.912313785Z'),
'signature': null
}
];
let config: IServiceConfig = {
repositoryBaseEndpoint: '/api/repository/testing'
repositoryBaseEndpoint: '/api/repository/testing',
systemInfoEndpoint: '/api/systeminfo/testing',
targetBaseEndpoint: '/api/tag/testing'
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
SharedModule
SharedModule,
RouterTestingModule
],
declarations: [
RepositoryComponent,
ListRepositoryComponent,
RepositoryListviewComponent,
ConfirmationDialogComponent,
FilterComponent
FilterComponent,
TagComponent,
VULNERABILITY_DIRECTIVES,
PUSH_IMAGE_BUTTON_DIRECTIVES,
INLINE_ALERT_DIRECTIVES,
JobLogViewerComponent,
],
providers: [
ErrorHandler,
{ provide: SERVICE_CONFIG, useValue: config },
{ provide: RepositoryService, useClass: RepositoryDefaultService },
{ provide: SystemInfoService, useClass: SystemInfoDefaultService },
{ provide: Router, useClass: RouterStub }
{ provide: TagService, useClass: TagDefaultService },
{ provide: ChannelService},
]
});
}));
beforeEach(() => {
fixture = TestBed.createComponent(RepositoryComponent);
comp = fixture.componentInstance;
comp.projectId = 1;
comp.hasProjectAdminRole = true;
compRepo = fixture.componentInstance;
compRepo.projectId = 1;
compRepo.hasProjectAdminRole = true;
compRepo.repoName = 'library/nginx';
repositoryService = fixture.debugElement.injector.get(RepositoryService);
systemInfoService = fixture.debugElement.injector.get(SystemInfoService);
tagService = fixture.debugElement.injector.get(TagService);
spy = spyOn(repositoryService, 'getRepositories').and.returnValues(Promise.resolve(mockRepo));
spyRepos = spyOn(repositoryService, 'getRepositories').and.returnValues(Promise.resolve(mockRepo));
spySystemInfo = spyOn(systemInfoService, 'getSystemInfo').and.returnValues(Promise.resolve(mockSystemInfo));
spyTags = spyOn(tagService, 'getTags').and.returnValues(Promise.resolve(mockTagData));
fixture.detectChanges();
});
it('should create', () => {
expect(compRepo).toBeTruthy();
});
it('should load and render data', async(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
@ -99,22 +158,4 @@ describe('RepositoryComponent (inline template)', () => {
expect(el.textContent).toEqual('library/busybox');
});
}));
it('should filter data by keyword', async(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
comp.doSearchRepoNames('nginx');
fixture.detectChanges();
let de: DebugElement[] = fixture.debugElement.queryAll(By.css('datagrid-cell'));
fixture.detectChanges();
expect(de).toBeTruthy();
expect(de.length).toEqual(1);
let el: HTMLElement = de[0].nativeElement;
fixture.detectChanges();
expect(el).toBeTruthy();
expect(el.textContent).toEqual('library/nginx');
});
}));
});

184
src/ui_ng/lib/src/repository/repository.component.ts
View File

@ -11,20 +11,21 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { RepositoryService } from '../service/repository.service';
import { Repository, RepositoryItem } from '../service/interface';
import { Repository, RepositoryItem, Tag, TagClickEvent,
SystemInfo, SystemInfoService, TagService } from '../service/index';
import { TranslateService } from '@ngx-translate/core';
import { ErrorHandler } from '../error-handler/error-handler';
import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const';
import { ConfirmationState, ConfirmationTargets } from '../shared/shared.const';
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message';
import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message';
import { Subscription } from 'rxjs/Subscription';
import { State } from 'clarity-angular';
@ -33,81 +34,172 @@ import { toPromise } from '../utils';
import { REPOSITORY_TEMPLATE } from './repository.component.html';
import { REPOSITORY_STYLE } from './repository.component.css';
const TabLinkContentMap: {[index: string]: string} = {
'repo-info': 'info',
'repo-image': 'image'
};
@Component({
selector: 'hbr-repository',
template: REPOSITORY_TEMPLATE,
styles: [REPOSITORY_STYLE]
})
export class RepositoryComponent implements OnInit {
changedRepositories: RepositoryItem[];
signedCon: {[key: string]: any | string[]} = {};
@Input() projectId: number;
@Input() urlPrefix: string;
@Input() projectName: string;
@Input() repoName: string;
@Input() hasSignedIn: boolean;
@Input() hasProjectAdminRole: boolean;
lastFilteredRepoName: string;
@Output() tagClickEvent = new EventEmitter<TagClickEvent>();
@Output() backEvt: EventEmitter<any> = new EventEmitter<any>();
onGoing = false;
withNotary = false;
withClair = true;
editing = false;
inProgress = true;
currentTabID = 'repo-image';
changedRepositories: RepositoryItem[];
systemInfo: SystemInfo;
imageInfo: string;
orgImageInfo: string;
timerHandler: any;
@ViewChild('confirmationDialog')
confirmationDialog: ConfirmationDialogComponent;
confirmationDlg: ConfirmationDialogComponent;
constructor(
private errorHandler: ErrorHandler,
private repositoryService: RepositoryService,
private translateService: TranslateService
) {}
private systemInfoService: SystemInfoService,
private tagService: TagService,
private translate: TranslateService,
) { }
confirmDeletion(message: ConfirmationAcknowledgement) {
if (message &&
message.source === ConfirmationTargets.REPOSITORY &&
message.state === ConfirmationState.CONFIRMED) {
let repoName = message.data;
toPromise<number>(this.repositoryService
.deleteRepository(repoName))
.then(
response => {
this.refresh();
this.translateService.get('REPOSITORY.DELETED_REPO_SUCCESS')
.subscribe(res=>this.errorHandler.info(res));
}).catch(error => this.errorHandler.error(error));
}
public get registryUrl(): string {
return this.systemInfo ? this.systemInfo.registry_url : '';
}
ngOnInit(): void {
if(!this.projectId) {
if (!this.projectId) {
this.errorHandler.error('Project ID cannot be unset.');
return;
}
this.lastFilteredRepoName = '';
this.retrieve();
this.inProgress = false;
}
retrieve(state?: State) {
toPromise<Repository>(this.repositoryService
.getRepositories(this.projectId, this.lastFilteredRepoName))
toPromise<Repository>(this.repositoryService.getRepositories(this.projectId, this.repoName))
.then(
response => {
this.changedRepositories = response.data;
},
error => this.errorHandler.error(error));
if (response.metadata.xTotalCount > 0) {
this.orgImageInfo = response.data[0].description;
this.imageInfo = response.data[0].description;
}
})
.catch(error => this.errorHandler.error(error));
}
doSearchRepoNames(repoName: string) {
this.lastFilteredRepoName = repoName;
this.retrieve();
}
deleteRepo(repoName: string) {
let message = new ConfirmationMessage(
'REPOSITORY.DELETION_TITLE_REPO',
'REPOSITORY.DELETION_SUMMARY_REPO',
repoName,
repoName,
ConfirmationTargets.REPOSITORY,
ConfirmationButtons.DELETE_CANCEL);
this.confirmationDialog.open(message);
saveSignatures(event: {[key: string]: string[]}): void {
Object.assign(this.signedCon, event);
}
refresh() {
this.retrieve();
}
watchTagClickEvt(tagClickEvt: TagClickEvent): void {
this.tagClickEvent.emit(tagClickEvt);
}
isCurrentTabLink(tabID: string): boolean {
return this.currentTabID === tabID;
}
isCurrentTabContent(ContentID: string): boolean {
return TabLinkContentMap[this.currentTabID] === ContentID;
}
tabLinkClick(tabID: string) {
this.currentTabID = tabID;
}
getTagInfo(repoName: string): Promise<void> {
// this.signedNameArr = [];
this.signedCon[repoName] = [];
return toPromise<Tag[]>(this.tagService
.getTags(repoName))
.then(items => {
items.forEach((t: Tag) => {
if (t.signature !== null) {
this.signedCon[repoName].push(t.name);
}
});
})
.catch(error => this.errorHandler.error(error));
}
goBack() {
this.backEvt.emit(this.projectId);
}
hasChanges() {
return this.imageInfo !== this.orgImageInfo;
}
reset(): void {
this.imageInfo = this.orgImageInfo;
}
hasInfo() {
return this.imageInfo && this.imageInfo.length > 0;
}
editInfo() {
this.editing = true;
}
saveInfo() {
if (!this.hasChanges()) {
return;
}
this.onGoing = true;
toPromise<any>(this.repositoryService.updateRepositoryDescription(this.repoName, this.imageInfo))
.then(() => {
this.onGoing = false;
this.translate.get('CONFIG.SAVE_SUCCESS').subscribe((res: string) => {
this.errorHandler.info(res);
});
this.editing = false;
this.refresh();
})
.catch(error => {
this.onGoing = false;
this.errorHandler.error(error);
});
}
cancelInfo() {
let msg = new ConfirmationMessage(
'CONFIG.CONFIRM_TITLE',
'CONFIG.CONFIRM_SUMMARY',
'',
{},
ConfirmationTargets.CONFIG
);
this.confirmationDlg.open(msg);
}
confirmCancel(ack: ConfirmationAcknowledgement): void {
this.editing = false;
if (ack && ack.source === ConfirmationTargets.CONFIG &&
ack.state === ConfirmationState.CONFIRMED) {
this.reset();
}
}
}

44
src/ui_ng/lib/src/service/repository.service.ts
View File

@ -1,7 +1,7 @@
import { Observable } from 'rxjs/Observable';
import { RequestQueryParams } from './RequestQueryParams';
import { Repository, RepositoryItem } from './interface';
import { Injectable, Inject } from "@angular/core";
import { Injectable, Inject } from '@angular/core';
import 'rxjs/add/observable/of';
import { Http } from '@angular/http';
import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
@ -31,7 +31,20 @@ export abstract class RepositoryService {
*
* @memberOf RepositoryService
*/
abstract getRepositories(projectId: number | string, repositoryName?: string, queryParams?: RequestQueryParams): Observable<Repository> | Promise<Repository> | Repository;
abstract getRepositories(projectId: number | string, repositoryName?: string, queryParams?: RequestQueryParams):
Observable<Repository> | Promise<Repository> | Repository;
/**
* Update description of specified repository.
*
* @abstract
* @param {number | string} projectId
* @param {string} repoName
* @returns {(Observable<Repository> | Promise<Repository> | Repository)}
*
* @memberOf RepositoryService
*/
abstract updateRepositoryDescription(repoName: string, description: string): Observable<any> | Promise<any> | any;
/**
* DELETE the specified repository.
@ -61,21 +74,22 @@ export class RepositoryDefaultService extends RepositoryService {
super();
}
public getRepositories(projectId: number | string, repositoryName?: string, queryParams?: RequestQueryParams): Observable<Repository> | Promise<Repository> | Repository {
public getRepositories(projectId: number | string, repositoryName?: string, queryParams?: RequestQueryParams):
Observable<Repository> | Promise<Repository> | Repository {
if (!projectId) {
return Promise.reject("Bad argument");
return Promise.reject('Bad argument');
}
if (!queryParams) {
queryParams = new RequestQueryParams();
}
queryParams.set('project_id', "" + projectId);
queryParams.set('project_id', '' + projectId);
if (repositoryName && repositoryName.trim() !== '') {
queryParams.set('q', repositoryName);
}
let url: string = this.config.repositoryBaseEndpoint ? this.config.repositoryBaseEndpoint : "/api/repositories";
let url: string = this.config.repositoryBaseEndpoint ? this.config.repositoryBaseEndpoint : '/api/repositories';
return this.http.get(url, buildHttpRequestOptions(queryParams)).toPromise()
.then(response => {
let result: Repository = {
@ -84,7 +98,7 @@ export class RepositoryDefaultService extends RepositoryService {
};
if (response && response.headers) {
let xHeader: string = response.headers.get("X-Total-Count");
let xHeader: string = response.headers.get('X-Total-Count');
if (xHeader) {
result.metadata.xTotalCount = parseInt(xHeader, 0);
}
@ -103,6 +117,20 @@ export class RepositoryDefaultService extends RepositoryService {
.catch(error => Promise.reject(error));
}
public updateRepositoryDescription(repositoryName: string, description: string,
queryParams?: RequestQueryParams): Observable<any> | Promise<any> | any {
if (!queryParams) {
queryParams = new RequestQueryParams();
}
let baseUrl: string = this.config.repositoryBaseEndpoint ? this.config.repositoryBaseEndpoint : '/api/repositories';
let url = `${baseUrl}/${repositoryName}`;
return this.http.put(url, {'description': description }, HTTP_JSON_OPTIONS).toPromise()
.then(response => response)
.catch(error => Promise.reject(error));
}
public deleteRepository(repositoryName: string): Observable<any> | Promise<any> | any {
if (!repositoryName) {
return Promise.reject('Bad argument');
@ -112,6 +140,6 @@ export class RepositoryDefaultService extends RepositoryService {
return this.http.delete(url, HTTP_JSON_OPTIONS).toPromise()
.then(response => response)
.catch(error => { Promise.reject(error) });
.catch(error => { Promise.reject(error); });
}
}

5
src/ui_ng/lib/src/shared/shared.const.ts
View File

@ -62,7 +62,8 @@ export const CommonRoutes = {
export const enum ConfirmationState {
NA, CONFIRMED, CANCEL
}
};
export const enum ConfirmationButtons {
CONFIRM_CANCEL, YES_NO, DELETE_CANCEL, CLOSE
}
};

2
src/ui_ng/lib/src/tag/tag-detail.component.html.ts
View File

@ -7,7 +7,7 @@ export const TAG_DETAIL_HTML: string = `
</div>
<div class="title-block">
<div class="tag-name">
{{tagDetails.name}}
<h1>{{tagDetails.name}}</h1>
</div>
<div class="tag-timestamp">
{{'TAG.CREATION_TIME_PREFIX' | translate }} {{tagDetails.created | date }} {{'TAG.CREATOR_PREFIX' | translate }} {{author | translate}}

25
src/ui_ng/lib/src/tag/tag.component.css.ts
View File

@ -1,4 +1,17 @@
export const TAG_STYLE = `
.option-right {
padding-right: 18px;
padding-bottom: 6px;
}
.refresh-btn {
cursor: pointer;
}
.refresh-btn:hover {
color: #007CBB;
}
.sub-header-title {
margin: 12px 0;
}
@ -20,18 +33,6 @@ export const TAG_STYLE = `
display: none;
}
:host >>> .datagrid .datagrid-body {
background-color: #eee;
}
:host >>> .datagrid .datagrid-head .datagrid-row {
background-color: #eee;
}
:host >>> .datagrid .datagrid-body .datagrid-row-master {
background-color: #eee;
}
.truncated {
display: inline-block;
overflow: hidden;

18
src/ui_ng/lib/src/tag/tag.component.html.ts
View File

@ -12,9 +12,17 @@ export const TAG_TEMPLATE = `
<button type="button" class="btn btn-primary" [ngxClipboard]="digestTarget" (cbOnSuccess)="onSuccess($event)" (cbOnError)="onError($event)">{{'BUTTON.COPY' | translate}}</button>
</div>
</clr-modal>
<h2 *ngIf="!isEmbedded" class="sub-header-title">{{repoName}}</h2>
<clr-datagrid [clrDgLoading]="loading" [class.embeded-datagrid]="isEmbedded">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row flex-items-xs-right option-right">
<div class="flex-xs-middle">
<hbr-filter [withDivider]="true" filterPlaceholder="{{'TAG.FILTER_FOR_TAGS' | translate}}" (filter)="doSearchTagNames($event)" [currentValue]="lastFilteredTagName"></hbr-filter>
<span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<clr-datagrid [clrDgLoading]="loading" [class.embeded-datagrid]="isEmbedded">
<clr-dg-column style="min-width: 160px;" [clrDgField]="'name'">{{'REPOSITORY.TAG' | translate}}</clr-dg-column>
<clr-dg-column style="width: 90px;" [clrDgField]="'size'">{{'REPOSITORY.SIZE' | translate}}</clr-dg-column>
<clr-dg-column style="min-width: 120px; max-width:220px;">{{'REPOSITORY.PULL_COMMAND' | translate}}</clr-dg-column>
@ -58,4 +66,6 @@ export const TAG_TEMPLATE = `
{{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}}&nbsp;&nbsp;&nbsp;&nbsp;
<clr-dg-pagination #pagination [clrDgPageSize]="10"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>`;
</clr-datagrid>
</div>
</div>`;

91
src/ui_ng/lib/src/tag/tag.component.ts
View File

@ -23,7 +23,7 @@ import {
ElementRef
} from '@angular/core';
import { TagService, VulnerabilitySeverity } from '../service/index';
import { TagService, VulnerabilitySeverity, RequestQueryParams } from '../service/index';
import { ErrorHandler } from '../error-handler/error-handler';
import { ChannelService } from '../channel/index';
import {
@ -44,13 +44,17 @@ import { TAG_STYLE } from './tag.component.css';
import {
toPromise,
CustomComparator,
VULNERABILITY_SCAN_STATUS
calculatePage,
doFiltering,
doSorting,
VULNERABILITY_SCAN_STATUS,
DEFAULT_PAGE_SIZE
} from '../utils';
import { TranslateService } from '@ngx-translate/core';
import { State, Comparator } from 'clarity-angular';
import {CopyInputComponent} from "../push-image/copy-input.component";
import {CopyInputComponent} from '../push-image/copy-input.component';
@Component({
selector: 'hbr-tag',
@ -60,6 +64,7 @@ import {CopyInputComponent} from "../push-image/copy-input.component";
})
export class TagComponent implements OnInit {
signedCon: {[key: string]: any | string[]} = {};
@Input() projectId: number;
@Input() repoName: string;
@Input() isEmbedded: boolean;
@ -82,6 +87,7 @@ export class TagComponent implements OnInit {
digestId: string;
staticBackdrop: boolean = true;
closable: boolean = false;
lastFilteredTagName: string;
createdComparator: Comparator<Tag> = new CustomComparator<Tag>('created', 'date');
@ -94,6 +100,10 @@ export class TagComponent implements OnInit {
@ViewChild('digestTarget') textInput: ElementRef;
@ViewChild('copyInput') copyInput: CopyInputComponent;
pageSize: number = DEFAULT_PAGE_SIZE;
currentPage = 1;
totalCount = 0;
currentState: State;
constructor(
private errorHandler: ErrorHandler,
@ -136,6 +146,61 @@ export class TagComponent implements OnInit {
}
this.retrieve();
this.lastFilteredTagName = '';
}
doSearchTagNames(tagName: string) {
this.lastFilteredTagName = tagName;
this.currentPage = 1;
let st: State = this.currentState;
if (!st) {
st = { page: {} };
}
st.page.size = this.pageSize;
st.page.from = 0;
st.page.to = this.pageSize - 1;
st.filters = [{property: 'name', value: this.lastFilteredTagName}];
this.clrLoad(st);
}
clrLoad(state: State): void {
// Keep it for future filtering and sorting
this.currentState = state;
let pageNumber: number = calculatePage(state);
if (pageNumber <= 0) { pageNumber = 1; }
// Pagination
let params: RequestQueryParams = new RequestQueryParams();
params.set('page', '' + pageNumber);
params.set('page_size', '' + this.pageSize);
this.loading = true;
toPromise<Tag[]>(this.tagService.getTags(
this.repoName,
params))
.then((tags: Tag[]) => {
this.signedCon = {};
// Do filtering and sorting
this.tags = doFiltering<Tag>(tags, state);
this.tags = doSorting<Tag>(this.tags, state);
this.loading = false;
})
.catch(error => {
this.loading = false;
this.errorHandler.error(error);
});
// Force refresh view
let hnd = setInterval(() => this.ref.markForCheck(), 100);
setTimeout(() => clearInterval(hnd), 5000);
}
refresh() {
this.doSearchTagNames('');
}
retrieve() {
@ -146,7 +211,7 @@ export class TagComponent implements OnInit {
toPromise<Tag[]>(this.tagService
.getTags(this.repoName))
.then(items => {
//To keep easy use for vulnerability bar
// To keep easy use for vulnerability bar
items.forEach((t: Tag) => {
if (!t.scan_overview) {
t.scan_overview = {
@ -163,7 +228,7 @@ export class TagComponent implements OnInit {
signatures.push(t.name);
}
//size
// size
t.size = this.sizeTransform(t.size);
});
this.tags = items;
@ -243,20 +308,20 @@ export class TagComponent implements OnInit {
onSuccess($event: any): void {
this.copyFailed = false;
//Directly close dialog
// Directly close dialog
this.showTagManifestOpened = false;
}
onError($event: any): void {
//Show error
// Show error
this.copyFailed = true;
//Select all text
// Select all text
if (this.textInput) {
this.textInput.nativeElement.select();
}
}
//Get vulnerability scanning status
// Get vulnerability scanning status
scanStatus(t: Tag): string {
if (t && t.scan_overview && t.scan_overview.scan_status) {
return t.scan_overview.scan_status;
@ -272,7 +337,7 @@ export class TagComponent implements OnInit {
t.scan_overview.components.total > 0 ? true : false;
}
//Whether show the 'scan now' menu
// Whether show the 'scan now' menu
canScanNow(t: Tag): boolean {
if (!this.withClair) { return false; }
if (!this.hasProjectAdminRole) { return false; }
@ -282,14 +347,14 @@ export class TagComponent implements OnInit {
st !== VULNERABILITY_SCAN_STATUS.running;
}
//Trigger scan
// Trigger scan
scanNow(tagId: string): void {
if (tagId) {
this.channel.publishScanEvent(this.repoName + "/" + tagId);
this.channel.publishScanEvent(this.repoName + '/' + tagId);
}
}
//pull command
// pull command
onCpError($event: any): void {
this.copyInput.setPullCommendShow();
}

2
src/ui_ng/package.json
View File

@ -31,7 +31,7 @@
"clarity-icons": "^0.9.8",
"clarity-ui": "^0.9.8",
"core-js": "^2.4.1",
"harbor-ui": "0.5.16",
"harbor-ui": "0.5.24",
"intl": "^1.2.5",
"mutationobserver-shim": "^0.3.2",
"ngx-cookie": "^1.0.0",

12
src/ui_ng/src/app/harbor-routing.module.ts
View File

@ -106,6 +106,14 @@ const harborRoutes: Routes = [
projectResolver: ProjectRoutingResolver
}
},
{
path: 'projects/:id/repositories/:repo',
component: TagRepositoryComponent,
canActivate: [MemberGuard],
resolve: {
projectResolver: ProjectRoutingResolver
}
},
{
path: 'projects/:id',
component: ProjectDetailComponent,
@ -118,6 +126,10 @@ const harborRoutes: Routes = [
path: 'repositories',
component: RepositoryPageComponent
},
{
path: 'repositories/:repo/tags',
component: TagRepositoryComponent,
},
{
path: 'repositories/:repo/tags/:tag',
component: TagDetailPageComponent

2
src/ui_ng/src/app/repository/repository-page.component.html
View File

@ -1,3 +1,3 @@
<div style="margin-top: 24px;">
<hbr-repository-stackview [projectId]="projectId" [projectName]="projectName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-stackview>
<hbr-repository-listview [projectId]="projectId" [projectName]="projectName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-listview>
</div>

4
src/ui_ng/src/app/repository/repository-page.component.ts
View File

@ -48,7 +48,7 @@ export class RepositoryPageComponent implements OnInit {
}
watchTagClickEvent(tagEvt: TagClickEvent): void {
let linkUrl = ['harbor', 'projects', tagEvt.project_id, 'repositories', tagEvt.repository_name, 'tags', tagEvt.tag_name];
let linkUrl = ['harbor', 'projects', tagEvt.project_id, 'repositories', tagEvt.repository_name];
this.router.navigate(linkUrl);
}
}
};

4
src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html
View File

@ -1,5 +1,3 @@
<div>
<a *ngIf="hasSignedIn" [routerLink]="['/harbor', 'projects', projectId, 'repositories']">&lt; {{'REPOSITORY.REPOSITORIES' | translate}}</a>
<a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']">&lt; {{'SEARCH.BACK' | translate}}</a>
<hbr-tag (tagClickEvent)="watchTagClickEvt($event)" [repoName]="repoName" [registryUrl]="registryUrl" [withNotary]="withNotary" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId" [isEmbedded]="false" [withClair]="withClair"></hbr-tag>
<hbr-repository (tagClickEvent)="watchTagClickEvt($event)" (backEvt)="goBack($event)" [repoName]="repoName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId"></hbr-repository>
</div>

11
src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts
View File

@ -38,11 +38,16 @@ export class TagRepositoryComponent implements OnInit {
}
ngOnInit() {
this.projectId = this.route.snapshot.params['id'];
if (!this.projectId) {
this.projectId = this.route.snapshot.parent.params['id'];
};
// let resolverData = this.route.snapshot.parent.data;
let resolverData = this.route.snapshot.data;
if (resolverData) {
this.hasProjectAdminRole = (<Project>resolverData['projectResolver']).has_project_admin_role;
}
this.projectId = this.route.snapshot.params['id'];
this.repoName = this.route.snapshot.params['repo'];
this.registryUrl = this.appConfigService.getConfig().registry_url;
@ -64,4 +69,8 @@ export class TagRepositoryComponent implements OnInit {
let linkUrl = ['harbor', 'projects', tagEvt.project_id, 'repositories', tagEvt.repository_name, 'tags', tagEvt.tag_name];
this.router.navigate(linkUrl);
}
goBack(tag: string): void {
this.router.navigate(["harbor", "projects", this.projectId, "repositories"]);
}
}

11
src/ui_ng/src/i18n/lang/en-us-lang.json
View File

@ -32,7 +32,8 @@
"YES": "YES",
"NO": "NO",
"NEGATIVE": "NEGATIVE",
"COPY": "COPY"
"COPY": "COPY",
"EDIT": "EDIT"
},
"TOOLTIP": {
"EMAIL": "Email should be a valid email address like name@example.com.",
@ -364,7 +365,10 @@
"DELETED_TAG_SUCCESS": "Deleted tag successfully.",
"COPY": "Copy",
"NOTARY_IS_UNDETERMINED": "Cannot determine the signature of this tag.",
"PLACEHOLDER": "We couldn't find any repositories!"
"PLACEHOLDER": "We couldn't find any repositories!",
"INFO": "Info",
"NO_INFO": "No description info for this repository",
"IMAGE": "Images"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "Some changes are not saved yet. Do you want to cancel?"
@ -554,7 +558,8 @@
"SCAN_COMPLETION_TIME": "Scan Completed",
"IMAGE_VULNERABILITIES": "Image Vulnerabilities",
"PLACEHOLDER": "We couldn't find any tags!",
"COPY_ERROR": "Copy failed, please try to manually copy."
"COPY_ERROR": "Copy failed, please try to manually copy.",
"FILTER_FOR_TAGS": "Filter Tags"
},
"UNKNOWN_ERROR": "Unknown errors have occurred. Please try again later.",
"UNAUTHORIZED_ERROR": "Your session is invalid or has expired. You need to sign in to continue your action.",

11
src/ui_ng/src/i18n/lang/es-es-lang.json
View File

@ -32,7 +32,8 @@
"YES": "SI",
"NO": "NO",
"NEGATIVE": "NEGATIVO",
"COPY": "COPY"
"COPY": "COPY",
"EDIT": "EDITAR"
},
"TOOLTIP": {
"EMAIL": "El email debe ser una dirección válida como nombre@ejemplo.com.",
@ -365,7 +366,10 @@
"DELETED_TAG_SUCCESS": "Etiqueta eliminada satisfactoriamente.",
"COPY": "Copiar",
"NOTARY_IS_UNDETERMINED": "Cannot determine the signature of this tag.",
"PLACEHOLDER": "We couldn't find any repositories!"
"PLACEHOLDER": "We couldn't find any repositories!",
"INFO": "Información",
"NO_INFO": "Sin información de descripción para este repositorio",
"IMAGE": "Imágenes"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "Algunos cambios no se han guardado aún. ¿Quiere cancelar?"
@ -553,7 +557,8 @@
"SCAN_COMPLETION_TIME": "Scan Completed",
"IMAGE_VULNERABILITIES": "Image Vulnerabilities",
"PLACEHOLDER": "We couldn't find any tags!",
"COPY_ERROR": "Copy failed, please try to manually copy."
"COPY_ERROR": "Copy failed, please try to manually copy.",
"FILTER_FOR_TAGS": "Etiquetas de filtro"
},
"UNKNOWN_ERROR": "Ha ocurrido un error desconocido. Por favor, inténtelo de nuevo más tarde.",
"UNAUTHORIZED_ERROR": "La sesión no es válida o ha caducado. Necesita identificarse de nuevo para llevar a cabo esa acción.",

15
src/ui_ng/src/i18n/lang/zh-cn-lang.json
View File

@ -32,7 +32,8 @@
"YES": "是",
"NO": "否",
"NEGATIVE": "否",
"COPY": "拷贝"
"COPY": "拷贝",
"EDIT": "编辑"
},
"TOOLTIP": {
"EMAIL": "请使用正确的邮箱地址，比如name@example.com。",
@ -364,7 +365,10 @@
"DELETED_TAG_SUCCESS": "成功删除镜像标签。",
"COPY": "复制",
"NOTARY_IS_UNDETERMINED": "无法确定镜像标签签名。",
"PLACEHOLDER": "未发现任何镜像库!"
"PLACEHOLDER": "未发现任何镜像库!",
"INFO": "描述信息",
"NO_INFO": "此镜像仓库没有描述信息",
"IMAGE": "镜像"
},
"ALERT": {
"FORM_CHANGE_CONFIRMATION": "表单内容改变，确认是否取消?"
@ -425,7 +429,7 @@
"TOKEN_EXPIRATION": "由令牌服务创建的令牌的过期时间（分钟），默认为30分钟。",
"PRO_CREATION_RESTRICTION": "用来确定哪些用户有权限创建项目，默认为’所有人‘，设置为’仅管理员‘则只有管理员可以创建项目。",
"ROOT_CERT_DOWNLOAD": "下载镜像库根证书.",
"SCANNING_POLICY": "基于不同需求设置镜像扫描策略。‘无’：不设置任何策略；‘每日定时’：每天在设置的时间定时执行扫描。".
"SCANNING_POLICY": "基于不同需求设置镜像扫描策略。‘无’：不设置任何策略；‘每日定时’：每天在设置的时间定时执行扫描。",
"VERIFY_CERT": "检查来自LDAP服务端的证书"
},
"LDAP": {
@ -521,7 +525,7 @@
"SEVERITY": {
"HIGH": "严重",
"MEDIUM": "中等",
"LOW": "一般",
"LOW": "较低",
"NEGLIGIBLE": "可忽略",
"UNKNOWN": "未知",
"NONE": "无"
@ -554,7 +558,8 @@
"SCAN_COMPLETION_TIME": "扫描完成时间",
"IMAGE_VULNERABILITIES": "镜像缺陷",
"PLACEHOLDER": "未发现任何标签!",
"COPY_ERROR": "拷贝失败，请尝试手动拷贝。"
"COPY_ERROR": "拷贝失败，请尝试手动拷贝。",
"FILTER_FOR_TAGS": "过滤项目"
},
"UNKNOWN_ERROR": "发生未知错误,请稍后再试。",
"UNAUTHORIZED_ERROR": "会话无效或者已经过期, 请重新登录以继续。",

32
tests/resources/Harbor-Pages/Project.robot
View File

@ -169,6 +169,18 @@ Do Log Advanced Search
${rc} = Get Matching Xpath Count //audit-log//clr-dg-row
Should Be Equal As Integers ${rc} 0
Go Into Repo
[Arguments] ${repoName}
Sleep 2
Click Element xpath=//*[@id="search_input"]
Sleep 2
Input Text xpath=//*[@id="search_input"] ${repoName}
Sleep 8
Wait Until Page Contains ${repoName}
Click Element xpath=//*[@id="results"]/list-repository-ro/clr-datagrid/div/div/div/div/div[2]/clr-dg-row/clr-dg-row-master/clr-dg-cell[1]/a
Sleep 2
Capture Page Screenshot gointo_${repoName}.png
Expand Repo
[Arguments] ${projectname}
Click Element //repository//clr-dg-row-master[contains(.,'${projectname}')]//button/clr-icon
@ -180,6 +192,26 @@ Scan Repo
Click Element //hbr-tag//clr-dg-row-master[contains(.,'${tagname}')]//clr-dg-action-overflow//button[contains(.,'Scan')]
Sleep 15
Edit Repo Info
Click Element //*[@id="repo-info"]
Sleep 1
Page Should Contain Element //*[@id="info"]/form/div[2]/h3
# Cancel input
Click Element xpath=//*[@id="info-edit-button"]/button
Input Text xpath=//*[@id="info"]/form/div[2]/textarea test_description_info
Click Element xpath=//*[@id="info"]/form/div[3]/button[2]
Sleep 1
Click Element xpath=//*[@id="info"]/form/confirmation-dialog/clr-modal/div/div[1]/div/div[1]/div/div[3]/button[2]
Sleep 1
Page Should Contain Element //*[@id="info"]/form/div[2]/h3
# Confirm input
Click Element xpath=//*[@id="info-edit-button"]/button
Input Text xpath=//*[@id="info"]/form/div[2]/textarea test_description_info
Click Element xpath=//*[@id="info"]/form/div[3]/button[1]
Sleep 1
Page Should Contain test_description_info
Capture Page Screenshot RepoInfo.png
Summary Chart Should Display
[Arguments] ${tagname}
Page Should Contain Element //clr-dg-row-master[contains(.,'${tagname}')]//hbr-vulnerability-bar//hbr-vulnerability-summary-chart

6
tests/robot-cases/Group0-BAT/BAT.robot
View File

@ -247,15 +247,15 @@ Test Case - Create An Replication Rule New Endpoint
Create An New Rule With New Endpoint policy_name=test_policy_${d} policy_description=test_description destination_name=test_destination_name_${d} destination_url=test_destination_url_${d} destination_username=test_destination_username destination_password=test_destination_password
Close Browser
Test Case - Scan A Tag
Test Case - Scan A Tag In The Repo
Init Chrome Driver
${d}= get current date result_format=%m%s
Create An New Project With New User url=${HARBOR_URL} username=tester${d} email=tester${d}@vmware.com realname=tester${d} newPassword=Test1@34 comment=harbor projectname=project${d} public=false
Push Image ${ip} tester${d} Test1@34 project${d} hello-world
Go Into Project project${d}
Expand Repo project${d}
Go Into Repo project${d}/hello-world
Scan Repo latest
Summary Chart Should Display latest
Edit Repo Info
Close Browser
Test Case - Manage Project Member