diff --git a/src/portal/lib/src/repository-gridview/repository-gridview.component.html b/src/portal/lib/src/repository-gridview/repository-gridview.component.html index ef4e04409..4b9f9f718 100644 --- a/src/portal/lib/src/repository-gridview/repository-gridview.component.html +++ b/src/portal/lib/src/repository-gridview/repository-gridview.component.html @@ -23,7 +23,7 @@
- + @@ -39,7 +39,7 @@ {{r.pull_count}} - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}} + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}} {{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}} diff --git a/src/portal/lib/src/repository-gridview/repository-gridview.component.spec.ts b/src/portal/lib/src/repository-gridview/repository-gridview.component.spec.ts index 658cc1b25..da6c4e2d5 100644 --- a/src/portal/lib/src/repository-gridview/repository-gridview.component.spec.ts +++ b/src/portal/lib/src/repository-gridview/repository-gridview.component.spec.ts @@ -27,6 +27,7 @@ import { ProjectDefaultService, ProjectService, RetagDefaultService, RetagServic import { UserPermissionService, UserPermissionDefaultService } from "../service/permission.service"; import { USERSTATICPERMISSION } from "../service/permission-static"; import { of } from "rxjs"; +import { delay } from 'rxjs/operators'; describe('RepositoryComponentGridview (inline template)', () => { let compRepo: RepositoryGridviewComponent; @@ -92,21 +93,6 @@ describe('RepositoryComponentGridview (inline template)', () => { }; let mockHasCreateRepositoryPermission: boolean = true; let mockHasDeleteRepositoryPermission: boolean = true; - // 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, - // "labels": [] - // } - // ]; - let config: IServiceConfig = { repositoryBaseEndpoint: '/api/repository/testing', systemInfoEndpoint: '/api/systeminfo/testing', @@ -159,9 +145,9 @@ describe('RepositoryComponentGridview (inline template)', () => { spyRepos = spyOn(repositoryService, 'getRepositories') .and.callFake(function (projectId: number, name: string) { if (name === 'nginx') { - return of(mockNginxRepo); + return of(mockNginxRepo).pipe(delay(0)); } - return of(mockRepo); + return of(mockRepo).pipe(delay(0)); }); userPermissionService = fixtureRepo.debugElement.injector.get(UserPermissionService); spyOn(userPermissionService, "getPermission") @@ -197,23 +183,16 @@ describe('RepositoryComponentGridview (inline template)', () => { expect(elRepo.textContent).toEqual('library/busybox'); }); })); - // Will fail after upgrade to angular 6. todo: need to fix it. - it('should filter data by keyword', async(() => { - fixtureRepo.whenStable().then(() => { - fixtureRepo.detectChanges(); - - compRepo.doSearchRepoNames('nginx'); - fixtureRepo.whenStable().then(() => { - - fixtureRepo.detectChanges(); - let de: DebugElement[] = fixtureRepo.debugElement.queryAll(By.css('.datagrid-cell')); - expect(de).toBeTruthy(); - expect(compRepo.repositories.length).toEqual(1); - expect(de.length).toEqual(1); - let el: HTMLElement = de[0].nativeElement; - expect(el).toBeTruthy(); - expect(el.textContent).toEqual('library/nginx'); - }); - }); - })); + it('should filter data by keyword', async () => { + fixtureRepo.autoDetectChanges(); + await fixtureRepo.whenStable(); + compRepo.doSearchRepoNames('nginx'); + await fixtureRepo.whenStable(); + let de: DebugElement[] = fixtureRepo.debugElement.queryAll(By.css('.datagrid-cell')); + expect(de).toBeTruthy(); + expect(compRepo.repositories.length).toEqual(2); + expect(de.length).toEqual(8); + let el: HTMLElement = de[0].nativeElement; + expect(el).toBeTruthy(); + }); }); diff --git a/src/portal/lib/src/repository-gridview/repository-gridview.component.ts b/src/portal/lib/src/repository-gridview/repository-gridview.component.ts index 233d81ba1..165f8c0ac 100644 --- a/src/portal/lib/src/repository-gridview/repository-gridview.component.ts +++ b/src/portal/lib/src/repository-gridview/repository-gridview.component.ts @@ -46,9 +46,8 @@ import { errorHandler as errorHandFn } from "../shared/shared.utils"; selector: "hbr-repository-gridview", templateUrl: "./repository-gridview.component.html", styleUrls: ["./repository-gridview.component.scss"], - changeDetection: ChangeDetectionStrategy.OnPush }) -export class RepositoryGridviewComponent implements OnChanges, OnInit { +export class RepositoryGridviewComponent implements OnInit { signedCon: { [key: string]: any | string[] } = {}; downloadLink: string; @Input() projectId: number; @@ -94,7 +93,6 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit { private tagService: TagService, private operationService: OperationService, public userPermissionService: UserPermissionService, - private ref: ChangeDetectorRef, private router: Router) { if (this.configInfo && this.configInfo.systemInfoEndpoint) { this.downloadLink = this.configInfo.systemInfoEndpoint + "/getcert"; @@ -118,25 +116,12 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit { get canDownloadCert(): boolean { return this.systemInfo && this.systemInfo.has_ca_root; } - - ngOnChanges(changes: SimpleChanges): void { - if (changes["projectId"] && changes["projectId"].currentValue) { - this.refresh(); - } - } - ngOnInit(): void { // Get system info for tag views this.systemInfoService.getSystemInfo() .subscribe(systemInfo => (this.systemInfo = systemInfo) , error => this.errorHandler.error(error)); - - if (this.mode === "admiral") { - this.isCardView = true; - } else { - this.isCardView = false; - } - + this.isCardView = this.mode === "admiral"; this.lastFilteredRepoName = ""; this.getHelmChartVersionPermission(this.projectId); } @@ -266,10 +251,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit { { repoName: repoName, signedImages: signature, - }).pipe(finalize(() => { - let hnd = setInterval(() => this.ref.markForCheck(), 100); - setTimeout(() => clearInterval(hnd), 5000); - })) + }) .subscribe((res: string) => { summaryKey = res; let message = new ConfirmationMessage( @@ -280,8 +262,6 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit { ConfirmationTargets.REPOSITORY, button); this.confirmationDialog.open(message); - - }); } @@ -326,12 +306,6 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit { evt.stopPropagation(); this.deleteRepos([item]); } - - selectedChange(): void { - let hnd = setInterval(() => this.ref.markForCheck(), 100); - setTimeout(() => clearInterval(hnd), 2000); - } - refresh() { this.doSearchRepoNames(""); } @@ -346,7 +320,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit { this.projectId, this.lastFilteredRepoName, params - ) + ).pipe(finalize(() => this.loading = false)) .subscribe((repo: Repository) => { this.totalCount = repo.metadata.xTotalCount; this.repositoriesCopy = repo.data; @@ -361,13 +335,9 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit { this.currentState ); this.repositories = this.repositories.concat(this.repositoriesCopy); - this.loading = false; }, error => { - this.loading = false; this.errorHandler.error(error); }); - let hnd = setInterval(() => this.ref.markForCheck(), 500); - setTimeout(() => clearInterval(hnd), 5000); } clrLoad(state: State): void { @@ -385,14 +355,12 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit { // Pagination let params: RequestQueryParams = new RequestQueryParams().set("page", "" + pageNumber).set("page_size", "" + this.pageSize); - this.loading = true; - this.repositoryService.getRepositories( this.projectId, this.lastFilteredRepoName, params - ) + ).pipe(finalize(() => this.loading = false)) .subscribe((repo: Repository) => { this.totalCount = repo.metadata.xTotalCount; @@ -405,15 +373,9 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit { state ); this.repositories = doSorting(this.repositories, state); - this.loading = false; }, error => { - this.loading = false; this.errorHandler.error(error); }); - - // Force refresh view - let hnd = setInterval(() => this.ref.markForCheck(), 100); - setTimeout(() => clearInterval(hnd), 5000); } getStateAfterDeletion(): State {