mirror of
https://github.com/goharbor/harbor.git
synced 2025-02-03 13:31:22 +01:00
Improve repo-tag-stack view
This commit is contained in:
parent
2b3d912f43
commit
71f3480932
@ -21,7 +21,7 @@ export const REPOSITORY_STACKVIEW_TEMPLATE: string = `
|
|||||||
<clr-dg-cell>{{r.name}}</clr-dg-cell>
|
<clr-dg-cell>{{r.name}}</clr-dg-cell>
|
||||||
<clr-dg-cell>{{r.tags_count}}</clr-dg-cell>
|
<clr-dg-cell>{{r.tags_count}}</clr-dg-cell>
|
||||||
<clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
|
<clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
|
||||||
<hbr-tag *clrIfExpanded ngProjectAs="clr-dg-row-detail" class="sub-grid-custom" [repoName]="r.name" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId" [isEmbedded]="true" (refreshRepo)="refresh($event)"></hbr-tag>
|
<hbr-tag *clrIfExpanded ngProjectAs="clr-dg-row-detail" class="sub-grid-custom" [repoName]="r.name" [registryUrl]="registryUrl" [withNotary]="withNotary" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId" [isEmbedded]="true" (refreshRepo)="refresh($event)"></hbr-tag>
|
||||||
</clr-dg-row>
|
</clr-dg-row>
|
||||||
<clr-dg-footer>
|
<clr-dg-footer>
|
||||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}}
|
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}}
|
||||||
|
@ -22,13 +22,10 @@ describe('RepositoryComponentStackview (inline template)', ()=> {
|
|||||||
let compRepo: RepositoryStackviewComponent;
|
let compRepo: RepositoryStackviewComponent;
|
||||||
let fixtureRepo: ComponentFixture<RepositoryStackviewComponent>;
|
let fixtureRepo: ComponentFixture<RepositoryStackviewComponent>;
|
||||||
let repositoryService: RepositoryService;
|
let repositoryService: RepositoryService;
|
||||||
let spyRepos: jasmine.Spy;
|
|
||||||
|
|
||||||
let compTag: TagComponent;
|
|
||||||
let fixtureTag: ComponentFixture<TagComponent>;
|
|
||||||
let tagService: TagService;
|
let tagService: TagService;
|
||||||
let systemInfoService: SystemInfoService;
|
let systemInfoService: SystemInfoService;
|
||||||
|
|
||||||
|
let spyRepos: jasmine.Spy;
|
||||||
let spyTags: jasmine.Spy;
|
let spyTags: jasmine.Spy;
|
||||||
let spySystemInfo: jasmine.Spy;
|
let spySystemInfo: jasmine.Spy;
|
||||||
|
|
||||||
@ -44,7 +41,6 @@ describe('RepositoryComponentStackview (inline template)', ()=> {
|
|||||||
"harbor_version": "v1.1.1-rc1-160-g565110d"
|
"harbor_version": "v1.1.1-rc1-160-g565110d"
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
let mockRepoData: Repository[] = [
|
let mockRepoData: Repository[] = [
|
||||||
{
|
{
|
||||||
"id": 1,
|
"id": 1,
|
||||||
@ -80,7 +76,9 @@ describe('RepositoryComponentStackview (inline template)', ()=> {
|
|||||||
];
|
];
|
||||||
|
|
||||||
let config: IServiceConfig = {
|
let config: IServiceConfig = {
|
||||||
repositoryBaseEndpoint: '/api/repository/testing'
|
repositoryBaseEndpoint: '/api/repository/testing',
|
||||||
|
systemInfoEndpoint: '/api/systeminfo/testing',
|
||||||
|
targetBaseEndpoint: '/api/tag/testing'
|
||||||
};
|
};
|
||||||
|
|
||||||
beforeEach(async(() => {
|
beforeEach(async(() => {
|
||||||
@ -111,62 +109,67 @@ describe('RepositoryComponentStackview (inline template)', ()=> {
|
|||||||
compRepo.hasProjectAdminRole = true;
|
compRepo.hasProjectAdminRole = true;
|
||||||
|
|
||||||
repositoryService = fixtureRepo.debugElement.injector.get(RepositoryService);
|
repositoryService = fixtureRepo.debugElement.injector.get(RepositoryService);
|
||||||
|
systemInfoService = fixtureRepo.debugElement.injector.get(SystemInfoService);
|
||||||
|
|
||||||
spyRepos = spyOn(repositoryService, 'getRepositories').and.returnValues(Promise.resolve(mockRepoData));
|
spyRepos = spyOn(repositoryService, 'getRepositories').and.returnValues(Promise.resolve(mockRepoData));
|
||||||
|
spySystemInfo = spyOn(systemInfoService, 'getSystemInfo').and.returnValues(Promise.resolve(mockSystemInfo));
|
||||||
fixtureRepo.detectChanges();
|
fixtureRepo.detectChanges();
|
||||||
});
|
});
|
||||||
|
|
||||||
beforeEach(()=>{
|
it('should create', () => {
|
||||||
fixtureTag = TestBed.createComponent(TagComponent);
|
expect(compRepo).toBeTruthy();
|
||||||
compTag = fixtureTag.componentInstance;
|
|
||||||
compTag.projectId = compRepo.projectId;
|
|
||||||
compTag.repoName = 'library/busybox';
|
|
||||||
compTag.hasProjectAdminRole = true;
|
|
||||||
compTag.hasSignedIn = true;
|
|
||||||
tagService = fixtureTag.debugElement.injector.get(TagService);
|
|
||||||
systemInfoService = fixtureTag.debugElement.injector.get(SystemInfoService);
|
|
||||||
spyTags = spyOn(tagService, 'getTags').and.returnValues(Promise.resolve(mockTagData));
|
|
||||||
spySystemInfo = spyOn(systemInfoService, 'getSystemInfo').and.returnValues(Promise.resolve(mockSystemInfo));
|
|
||||||
fixtureTag.detectChanges();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should load and render data', async(() => {
|
it('should load and render data', async(() => {
|
||||||
fixtureRepo.detectChanges();
|
fixtureRepo.detectChanges();
|
||||||
|
|
||||||
fixtureRepo.whenStable().then(() => {
|
fixtureRepo.whenStable().then(() => {
|
||||||
fixtureRepo.detectChanges();
|
fixtureRepo.detectChanges();
|
||||||
|
|
||||||
let deRepo: DebugElement = fixtureRepo.debugElement.query(By.css('datagrid-cell'));
|
let deRepo: DebugElement = fixtureRepo.debugElement.query(By.css('datagrid-cell'));
|
||||||
fixtureRepo.detectChanges();
|
|
||||||
expect(deRepo).toBeTruthy();
|
expect(deRepo).toBeTruthy();
|
||||||
let elRepo: HTMLElement = deRepo.nativeElement;
|
let elRepo: HTMLElement = deRepo.nativeElement;
|
||||||
fixtureRepo.detectChanges();
|
|
||||||
expect(elRepo).toBeTruthy();
|
expect(elRepo).toBeTruthy();
|
||||||
fixtureRepo.detectChanges();
|
|
||||||
expect(elRepo.textContent).toEqual('library/busybox');
|
expect(elRepo.textContent).toEqual('library/busybox');
|
||||||
click(deRepo);
|
|
||||||
fixtureTag.detectChanges();
|
|
||||||
let deTag: DebugElement = fixtureTag.debugElement.query(By.css('datagrid-cell'));
|
|
||||||
expect(deTag).toBeTruthy();
|
|
||||||
let elTag: HTMLElement = deTag.nativeElement;
|
|
||||||
expect(elTag).toBeTruthy();
|
|
||||||
expect(elTag.textContent).toEqual('1.12.5');
|
|
||||||
});
|
});
|
||||||
}));
|
}));
|
||||||
|
|
||||||
it('should filter data by keyword', async(() => {
|
it('should filter data by keyword', async(() => {
|
||||||
fixtureRepo.detectChanges();
|
fixtureRepo.detectChanges();
|
||||||
|
|
||||||
fixtureRepo.whenStable().then(() => {
|
fixtureRepo.whenStable().then(() => {
|
||||||
fixtureRepo.detectChanges();
|
fixtureRepo.detectChanges();
|
||||||
|
|
||||||
compRepo.doSearchRepoNames('nginx');
|
compRepo.doSearchRepoNames('nginx');
|
||||||
fixtureRepo.detectChanges();
|
fixtureRepo.detectChanges();
|
||||||
let de: DebugElement[] = fixtureRepo.debugElement.queryAll(By.css('datagrid-cell'));
|
let de: DebugElement[] = fixtureRepo.debugElement.queryAll(By.css('datagrid-cell'));
|
||||||
fixtureRepo.detectChanges();
|
|
||||||
expect(de).toBeTruthy();
|
expect(de).toBeTruthy();
|
||||||
expect(de.length).toEqual(1);
|
expect(de.length).toEqual(1);
|
||||||
let el: HTMLElement = de[0].nativeElement;
|
let el: HTMLElement = de[0].nativeElement;
|
||||||
fixtureRepo.detectChanges();
|
|
||||||
expect(el).toBeTruthy();
|
expect(el).toBeTruthy();
|
||||||
expect(el.textContent).toEqual('library/nginx');
|
expect(el.textContent).toEqual('library/nginx');
|
||||||
});
|
});
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
it('should display embedded tag view when click >', async(() => {
|
||||||
|
fixtureRepo.detectChanges();
|
||||||
|
|
||||||
|
fixtureRepo.whenStable().then(() => {
|
||||||
|
fixtureRepo.detectChanges();
|
||||||
|
|
||||||
|
let el: HTMLElement = fixtureRepo.nativeElement.querySelector('.datagrid-expandable-caret');
|
||||||
|
expect(el).toBeTruthy();
|
||||||
|
let button: HTMLButtonElement = el.querySelector('button');
|
||||||
|
expect(button).toBeTruthy();
|
||||||
|
click(button);
|
||||||
|
|
||||||
|
fixtureRepo.detectChanges();
|
||||||
|
let el2: HTMLElement = fixtureRepo.nativeElement.querySelector('.datagrid-row-detail');
|
||||||
|
expect(el2).toBeTruthy();
|
||||||
|
let el3: Element = el2.querySelector(".datagrid-cell");
|
||||||
|
expect(el3).toBeTruthy();
|
||||||
|
expect(el3.textContent).toEqual('1.11.5');
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
});
|
});
|
@ -5,9 +5,13 @@ import { Comparator } from 'clarity-angular';
|
|||||||
import { REPOSITORY_STACKVIEW_TEMPLATE } from './repository-stackview.component.html';
|
import { REPOSITORY_STACKVIEW_TEMPLATE } from './repository-stackview.component.html';
|
||||||
import { REPOSITORY_STACKVIEW_STYLES } from './repository-stackview.component.css';
|
import { REPOSITORY_STACKVIEW_STYLES } from './repository-stackview.component.css';
|
||||||
|
|
||||||
import { Repository } from '../service/interface';
|
import {
|
||||||
|
Repository,
|
||||||
|
SystemInfo,
|
||||||
|
SystemInfoService,
|
||||||
|
RepositoryService
|
||||||
|
} from '../service/index';
|
||||||
import { ErrorHandler } from '../error-handler/error-handler';
|
import { ErrorHandler } from '../error-handler/error-handler';
|
||||||
import { RepositoryService } from '../service/repository.service';
|
|
||||||
|
|
||||||
import { toPromise, CustomComparator } from '../utils';
|
import { toPromise, CustomComparator } from '../utils';
|
||||||
|
|
||||||
@ -33,6 +37,7 @@ export class RepositoryStackviewComponent implements OnInit {
|
|||||||
|
|
||||||
lastFilteredRepoName: string;
|
lastFilteredRepoName: string;
|
||||||
repositories: Repository[];
|
repositories: Repository[];
|
||||||
|
systemInfo: SystemInfo;
|
||||||
|
|
||||||
@ViewChild('confirmationDialog')
|
@ViewChild('confirmationDialog')
|
||||||
confirmationDialog: ConfirmationDialogComponent;
|
confirmationDialog: ConfirmationDialogComponent;
|
||||||
@ -45,8 +50,17 @@ export class RepositoryStackviewComponent implements OnInit {
|
|||||||
private errorHandler: ErrorHandler,
|
private errorHandler: ErrorHandler,
|
||||||
private translateService: TranslateService,
|
private translateService: TranslateService,
|
||||||
private repositoryService: RepositoryService,
|
private repositoryService: RepositoryService,
|
||||||
|
private systemInfoService: SystemInfoService,
|
||||||
private ref: ChangeDetectorRef) { }
|
private ref: ChangeDetectorRef) { }
|
||||||
|
|
||||||
|
public get registryUrl(): string {
|
||||||
|
return this.systemInfo ? this.systemInfo.registry_url : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
public get withNotary(): boolean {
|
||||||
|
return this.systemInfo ? this.systemInfo.with_notary : false;
|
||||||
|
}
|
||||||
|
|
||||||
confirmDeletion(message: ConfirmationAcknowledgement) {
|
confirmDeletion(message: ConfirmationAcknowledgement) {
|
||||||
if (message &&
|
if (message &&
|
||||||
message.source === ConfirmationTargets.REPOSITORY &&
|
message.source === ConfirmationTargets.REPOSITORY &&
|
||||||
@ -68,6 +82,11 @@ export class RepositoryStackviewComponent implements OnInit {
|
|||||||
this.errorHandler.error('Project ID cannot be unset.');
|
this.errorHandler.error('Project ID cannot be unset.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
//Get system info for tag views
|
||||||
|
toPromise<SystemInfo>(this.systemInfoService.getSystemInfo())
|
||||||
|
.then(systemInfo => this.systemInfo = systemInfo)
|
||||||
|
.catch(error => this.errorHandler.error(error));
|
||||||
|
|
||||||
this.lastFilteredRepoName = '';
|
this.lastFilteredRepoName = '';
|
||||||
this.retrieve();
|
this.retrieve();
|
||||||
}
|
}
|
||||||
|
@ -8,33 +8,16 @@ import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation
|
|||||||
import { TagComponent } from './tag.component';
|
import { TagComponent } from './tag.component';
|
||||||
|
|
||||||
import { ErrorHandler } from '../error-handler/error-handler';
|
import { ErrorHandler } from '../error-handler/error-handler';
|
||||||
import { SystemInfo, Tag } from '../service/interface';
|
import { Tag } from '../service/interface';
|
||||||
import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
|
import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
|
||||||
import { TagService, TagDefaultService } from '../service/tag.service';
|
import { TagService, TagDefaultService } from '../service/tag.service';
|
||||||
import { SystemInfoService, SystemInfoDefaultService } from '../service/system-info.service';
|
|
||||||
|
|
||||||
describe('TagComponent (inline template)', ()=> {
|
describe('TagComponent (inline template)', ()=> {
|
||||||
|
|
||||||
let comp: TagComponent;
|
let comp: TagComponent;
|
||||||
let fixture: ComponentFixture<TagComponent>;
|
let fixture: ComponentFixture<TagComponent>;
|
||||||
let tagService: TagService;
|
let tagService: TagService;
|
||||||
let systemInfoService: SystemInfoService;
|
|
||||||
let spy: jasmine.Spy;
|
let spy: 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 mockTags: Tag[] = [
|
let mockTags: Tag[] = [
|
||||||
{
|
{
|
||||||
"digest": "sha256:e5c82328a509aeb7c18c1d7fb36633dc638fcf433f651bdcda59c1cc04d3ee55",
|
"digest": "sha256:e5c82328a509aeb7c18c1d7fb36633dc638fcf433f651bdcda59c1cc04d3ee55",
|
||||||
@ -64,8 +47,7 @@ describe('TagComponent (inline template)', ()=> {
|
|||||||
providers: [
|
providers: [
|
||||||
ErrorHandler,
|
ErrorHandler,
|
||||||
{ provide: SERVICE_CONFIG, useValue: config },
|
{ provide: SERVICE_CONFIG, useValue: config },
|
||||||
{ provide: TagService, useClass: TagDefaultService },
|
{ provide: TagService, useClass: TagDefaultService }
|
||||||
{ provide: SystemInfoService, useClass: SystemInfoDefaultService }
|
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
}));
|
}));
|
||||||
@ -78,11 +60,11 @@ describe('TagComponent (inline template)', ()=> {
|
|||||||
comp.repoName = 'library/nginx';
|
comp.repoName = 'library/nginx';
|
||||||
comp.hasProjectAdminRole = true;
|
comp.hasProjectAdminRole = true;
|
||||||
comp.hasSignedIn = true;
|
comp.hasSignedIn = true;
|
||||||
|
comp.registryUrl = 'http://registry.testing.com';
|
||||||
|
comp.withNotary = false;
|
||||||
|
|
||||||
tagService = fixture.debugElement.injector.get(TagService);
|
tagService = fixture.debugElement.injector.get(TagService);
|
||||||
systemInfoService = fixture.debugElement.injector.get(SystemInfoService);
|
|
||||||
spy = spyOn(tagService, 'getTags').and.returnValues(Promise.resolve(mockTags));
|
spy = spyOn(tagService, 'getTags').and.returnValues(Promise.resolve(mockTags));
|
||||||
spySystemInfo = spyOn(systemInfoService, 'getSystemInfo').and.returnValues(Promise.resolve(mockSystemInfo));
|
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -14,7 +14,6 @@
|
|||||||
import { Component, OnInit, ViewChild, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
import { Component, OnInit, ViewChild, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
||||||
|
|
||||||
import { TagService } from '../service/tag.service';
|
import { TagService } from '../service/tag.service';
|
||||||
import { SystemInfoService } from '../service/system-info.service';
|
|
||||||
|
|
||||||
import { ErrorHandler } from '../error-handler/error-handler';
|
import { ErrorHandler } from '../error-handler/error-handler';
|
||||||
import { ConfirmationTargets, ConfirmationState, ConfirmationButtons } from '../shared/shared.const';
|
import { ConfirmationTargets, ConfirmationState, ConfirmationButtons } from '../shared/shared.const';
|
||||||
@ -23,7 +22,7 @@ import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation
|
|||||||
import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message';
|
import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message';
|
||||||
import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message';
|
import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message';
|
||||||
|
|
||||||
import { SystemInfo, Tag } from '../service/interface';
|
import { Tag } from '../service/interface';
|
||||||
|
|
||||||
import { TAG_TEMPLATE } from './tag.component.html';
|
import { TAG_TEMPLATE } from './tag.component.html';
|
||||||
import { TAG_STYLE } from './tag.component.css';
|
import { TAG_STYLE } from './tag.component.css';
|
||||||
@ -48,13 +47,13 @@ export class TagComponent implements OnInit {
|
|||||||
|
|
||||||
@Input() hasSignedIn: boolean;
|
@Input() hasSignedIn: boolean;
|
||||||
@Input() hasProjectAdminRole: boolean;
|
@Input() hasProjectAdminRole: boolean;
|
||||||
|
@Input() registryUrl: string;
|
||||||
|
@Input() withNotary: boolean;
|
||||||
|
|
||||||
@Output() refreshRepo = new EventEmitter<boolean>();
|
@Output() refreshRepo = new EventEmitter<boolean>();
|
||||||
|
|
||||||
tags: Tag[];
|
tags: Tag[];
|
||||||
|
|
||||||
registryUrl: string;
|
|
||||||
withNotary: boolean;
|
|
||||||
|
|
||||||
showTagManifestOpened: boolean;
|
showTagManifestOpened: boolean;
|
||||||
manifestInfoTitle: string;
|
manifestInfoTitle: string;
|
||||||
@ -71,7 +70,6 @@ export class TagComponent implements OnInit {
|
|||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private errorHandler: ErrorHandler,
|
private errorHandler: ErrorHandler,
|
||||||
private systemInfoService: SystemInfoService,
|
|
||||||
private tagService: TagService,
|
private tagService: TagService,
|
||||||
private translateService: TranslateService,
|
private translateService: TranslateService,
|
||||||
private ref: ChangeDetectorRef) { }
|
private ref: ChangeDetectorRef) { }
|
||||||
@ -107,14 +105,7 @@ export class TagComponent implements OnInit {
|
|||||||
this.errorHandler.error('Repo name cannot be unset.');
|
this.errorHandler.error('Repo name cannot be unset.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
toPromise<SystemInfo>(this.systemInfoService.getSystemInfo())
|
|
||||||
.then(systemInfo=>{
|
|
||||||
if(systemInfo) {
|
|
||||||
this.registryUrl = systemInfo.registry_url || '';
|
|
||||||
this.withNotary = systemInfo.with_notary || false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error=> this.errorHandler.error(error));
|
|
||||||
this.retrieve();
|
this.retrieve();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user