From e7132c5252567ebe69f9668c38f84f6727446974 Mon Sep 17 00:00:00 2001 From: kunw Date: Wed, 31 May 2017 18:45:00 +0800 Subject: [PATCH] Add stackview for repo-tags --- src/ui_ng/lib/src/harbor-library.module.ts | 4 + src/ui_ng/lib/src/index.ts | 1 + .../lib/src/repository-stackview/index.ts | 6 + .../repository-stackview.component.css.ts | 17 +++ .../repository-stackview.component.html.ts | 34 ++++++ .../repository-stackview.component.ts | 109 ++++++++++++++++++ src/ui_ng/lib/src/tag/tag.component.css.ts | 17 ++- src/ui_ng/lib/src/tag/tag.component.html.ts | 10 +- src/ui_ng/lib/src/tag/tag.component.ts | 8 +- 9 files changed, 198 insertions(+), 8 deletions(-) create mode 100644 src/ui_ng/lib/src/repository-stackview/index.ts create mode 100644 src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts create mode 100644 src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts create mode 100644 src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts diff --git a/src/ui_ng/lib/src/harbor-library.module.ts b/src/ui_ng/lib/src/harbor-library.module.ts index af21a2aa4..dd6ab902c 100644 --- a/src/ui_ng/lib/src/harbor-library.module.ts +++ b/src/ui_ng/lib/src/harbor-library.module.ts @@ -4,6 +4,8 @@ import { LOG_DIRECTIVES } from './log/index'; import { FILTER_DIRECTIVES } from './filter/index'; 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 { TAG_DIRECTIVES } from './tag/index'; @@ -135,6 +137,7 @@ export function initConfig(translateService: TranslateService, config: IServiceC FILTER_DIRECTIVES, ENDPOINT_DIRECTIVES, REPOSITORY_DIRECTIVES, + REPOSITORY_STACKVIEW_DIRECTIVES, LIST_REPOSITORY_DIRECTIVES, TAG_DIRECTIVES, CREATE_EDIT_ENDPOINT_DIRECTIVES, @@ -151,6 +154,7 @@ export function initConfig(translateService: TranslateService, config: IServiceC FILTER_DIRECTIVES, ENDPOINT_DIRECTIVES, REPOSITORY_DIRECTIVES, + REPOSITORY_STACKVIEW_DIRECTIVES, LIST_REPOSITORY_DIRECTIVES, TAG_DIRECTIVES, CREATE_EDIT_ENDPOINT_DIRECTIVES, diff --git a/src/ui_ng/lib/src/index.ts b/src/ui_ng/lib/src/index.ts index 2a6a85c13..5deef7dea 100644 --- a/src/ui_ng/lib/src/index.ts +++ b/src/ui_ng/lib/src/index.ts @@ -7,6 +7,7 @@ export * from './log/index'; export * from './filter/index'; export * from './endpoint/index'; export * from './repository/index'; +export * from './repository-stackview/index'; export * from './tag/index'; export * from './replication/index'; export * from './vulnerability-scanning/index'; \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository-stackview/index.ts b/src/ui_ng/lib/src/repository-stackview/index.ts new file mode 100644 index 000000000..601a30a5c --- /dev/null +++ b/src/ui_ng/lib/src/repository-stackview/index.ts @@ -0,0 +1,6 @@ +import { Type } from '@angular/core'; +import { RepositoryStackviewComponent } from './repository-stackview.component'; + +export const REPOSITORY_STACKVIEW_DIRECTIVES: Type[] = [ + RepositoryStackviewComponent +]; \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts new file mode 100644 index 000000000..005014852 --- /dev/null +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts @@ -0,0 +1,17 @@ +export const REPOSITORY_STACKVIEW_STYLES: string = ` +.option-right { + padding-right: 16px; + margin-top: 32px; + margin-bottom: 12px; +} + +.sub-grid-custom { + position: relative; + left: 40px; +} + +:host >>> .datagrid .datagrid-body .datagrid-row { + overflow-x: hidden; + overflow-y: hidden; +} +`; diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts new file mode 100644 index 000000000..42088b2a8 --- /dev/null +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts @@ -0,0 +1,34 @@ +export const REPOSITORY_STACKVIEW_TEMPLATE: string = ` + +
+
+
+
+ + +
+
+
+
+ + {{'REPOSITORY.NAME' | translate}} + {{'REPOSITORY.TAGS_COUNT' | translate}} + {{'REPOSITORY.PULL_COUNT' | translate}} + + + + + {{r.name}} + {{r.tags_count}} + {{r.pull_count}} + + + + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}} + {{pagination.totalItems}}{{'REPOSITORY.ITEMS' | translate}} + + + +
+
+`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts new file mode 100644 index 000000000..473b5cab0 --- /dev/null +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts @@ -0,0 +1,109 @@ +import { Component, Input, OnInit, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { State } from 'clarity-angular'; + +import { REPOSITORY_STACKVIEW_TEMPLATE } from './repository-stackview.component.html'; +import { REPOSITORY_STACKVIEW_STYLES } from './repository-stackview.component.css'; + +import { Repository, SessionInfo } from '../service/interface'; +import { ErrorHandler } from '../error-handler/error-handler'; +import { RepositoryService } from '../service/repository.service'; +import { toPromise } 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'; + +@Component({ + selector: 'hbr-repository-stackview', + template: REPOSITORY_STACKVIEW_TEMPLATE, + styles: [ REPOSITORY_STACKVIEW_STYLES ], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class RepositoryStackviewComponent implements OnInit { + + @Input() projectId: number; + @Input() sessionInfo: SessionInfo; + + lastFilteredRepoName: string; + + totalPage: number; + totalRecordCount: number; + + hasProjectAdminRole: boolean; + + repositories: Repository[]; + + @ViewChild('confirmationDialog') + confirmationDialog: ConfirmationDialogComponent; + + constructor( + private errorHandler: ErrorHandler, + private translateService: TranslateService, + private repositoryService: RepositoryService, + private ref: ChangeDetectorRef){} + + confirmDeletion(message: ConfirmationAcknowledgement) { + if (message && + message.source === ConfirmationTargets.REPOSITORY && + message.state === ConfirmationState.CONFIRMED) { + let repoName = message.data; + toPromise(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)); + } + } + + ngOnInit(): void { + if(!this.projectId) { + this.errorHandler.error('Project ID cannot be unset.'); + return; + } + if(!this.sessionInfo) { + this.errorHandler.error('Session info cannot be unset.'); + return; + } + + this.hasProjectAdminRole = this.sessionInfo.hasProjectAdminRole || false; + this.lastFilteredRepoName = ''; + this.retrieve(); + } + + retrieve(state?: State) { + toPromise(this.repositoryService + .getRepositories(this.projectId, this.lastFilteredRepoName)) + .then( + repos => this.repositories = repos, + error => this.errorHandler.error(error)); + let hnd = setInterval(()=>this.ref.markForCheck(), 100); + setTimeout(()=>clearInterval(hnd), 1000); + } + + 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); + } + + refresh() { + this.retrieve(); + } +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag.component.css.ts b/src/ui_ng/lib/src/tag/tag.component.css.ts index 75562a919..4392f8fab 100644 --- a/src/ui_ng/lib/src/tag/tag.component.css.ts +++ b/src/ui_ng/lib/src/tag/tag.component.css.ts @@ -1,4 +1,17 @@ export const TAG_STYLE = ` .sub-header-title { - margin-top: 12px; -}`; \ No newline at end of file + margin: 12px 0; +} +.embeded-datagrid { + width: 98%; +} +.hidden-tag { + display: block; height: 0; +} +:host >>> .datagrid { + margin: 0; +} +:host >>> .datagrid-placeholder { + display: none; +} +`; \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag.component.html.ts b/src/ui_ng/lib/src/tag/tag.component.html.ts index 3288788e6..f714294c5 100644 --- a/src/ui_ng/lib/src/tag/tag.component.html.ts +++ b/src/ui_ng/lib/src/tag/tag.component.html.ts @@ -1,6 +1,6 @@ export const TAG_TEMPLATE = ` - - + +

{{ manifestInfoTitle | translate }}

@@ -11,8 +11,8 @@ export const TAG_TEMPLATE = `
-

{{repoName}}

- +

{{repoName}}

+ {{'REPOSITORY.TAG' | translate}} {{'REPOSITORY.PULL_COMMAND' | translate}} {{'REPOSITORY.SIGNED' | translate}} @@ -43,7 +43,7 @@ export const TAG_TEMPLATE = ` {{t.architecture}} {{t.os}} - + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}} {{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}} diff --git a/src/ui_ng/lib/src/tag/tag.component.ts b/src/ui_ng/lib/src/tag/tag.component.ts index ffa670598..207f4f360 100644 --- a/src/ui_ng/lib/src/tag/tag.component.ts +++ b/src/ui_ng/lib/src/tag/tag.component.ts @@ -11,7 +11,7 @@ // 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, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, ViewChild, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { TagService } from '../service/tag.service'; import { ErrorHandler } from '../error-handler/error-handler'; @@ -43,6 +43,9 @@ export class TagComponent implements OnInit { @Input() projectId: number; @Input() repoName: string; @Input() sessionInfo: SessionInfo; + @Input() isEmbeded: boolean; + + @Output() refreshRepo = new EventEmitter(); hasProjectAdminRole: boolean; @@ -123,6 +126,9 @@ export class TagComponent implements OnInit { .then(items => { this.tags = items; this.loading = false; + if(this.tags && this.tags.length === 0) { + this.refreshRepo.emit(true); + } }) .catch(error => { this.errorHandler.error(error);