From da3ebdcdcd16e836393fc95f85afd4dfc29a41f2 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Tue, 7 Mar 2017 17:20:33 +0800 Subject: [PATCH] merge ui_ng --- src/ui_ng/.editorconfig | 20 -- src/ui_ng/.gitignore | 9 - src/ui_ng/.travis.yml | 10 - .../account-settings-modal.component.html | 9 +- .../account-settings-modal.component.ts | 75 +++-- src/ui_ng/src/app/account/account.module.ts | 19 +- .../password/forgot-password.component.html | 32 +++ .../password/forgot-password.component.ts | 74 ++++- .../password/password-setting.component.html | 1 + .../password/password-setting.component.ts | 69 +++-- .../password/password-setting.service.ts | 45 ++- .../account/password/password.component.css | 3 + .../password/reset-password.component.html | 51 ++++ .../password/reset-password.component.ts | 123 ++++++++ .../app/account/sign-in/sign-in.component.css | 8 + .../account/sign-in/sign-in.component.html | 23 +- .../app/account/sign-in/sign-in.component.ts | 52 ++-- .../app/account/sign-in/sign-in.service.ts | 5 +- .../account/sign-up/sign-up.component.html | 13 +- .../app/account/sign-up/sign-up.component.ts | 104 ++++++- src/ui_ng/src/app/app.component.ts | 5 +- src/ui_ng/src/app/app.module.ts | 4 +- src/ui_ng/src/app/base/auth-guard.service.ts | 22 -- .../app/base/base-routing-resolver.service.ts | 24 -- src/ui_ng/src/app/base/base-routing.module.ts | 46 --- src/ui_ng/src/app/base/base.module.ts | 7 +- .../global-search/search-result.component.css | 3 +- .../harbor-shell/harbor-shell.component.html | 12 +- .../harbor-shell/harbor-shell.component.ts | 27 +- src/ui_ng/src/app/base/modal-event.ts | 4 +- src/ui_ng/src/app/base/modal-events.const.ts | 5 +- .../base/navigator/navigator.component.html | 8 +- .../app/base/navigator/navigator.component.ts | 16 +- .../config/auth/config-auth.component.html | 117 ++++++++ .../app/config/auth/config-auth.component.ts | 33 +++ src/ui_ng/src/app/config/config.component.css | 0 .../src/app/config/config.component.html | 54 ++++ src/ui_ng/src/app/config/config.component.ts | 267 ++++++++++++++++++ src/ui_ng/src/app/config/config.module.ts | 22 ++ src/ui_ng/src/app/config/config.service.ts | 33 +++ src/ui_ng/src/app/config/config.ts | 77 +++++ .../config/email/config-email.component.html | 74 +++++ .../config/email/config-email.component.ts | 25 ++ .../app/global-message/message.component.html | 14 +- .../app/global-message/message.component.ts | 113 ++++++-- src/ui_ng/src/app/global-message/message.ts | 1 + src/ui_ng/src/app/harbor-routing.module.ts | 93 +++++- src/ui_ng/src/app/i18n/lang/en-lang.json | 133 --------- src/ui_ng/src/app/i18n/lang/zh-lang.json | 134 --------- .../src/app/i18n/missing-trans.handler.ts | 4 +- .../src/app/log/audit-log.component.html | 3 +- src/ui_ng/src/app/log/audit-log.component.ts | 3 + src/ui_ng/src/app/log/audit-log.service.ts | 35 ++- src/ui_ng/src/app/log/log.module.ts | 16 +- .../src/app/log/recent-log.component.css | 32 +++ .../src/app/log/recent-log.component.html | 36 +++ src/ui_ng/src/app/log/recent-log.component.ts | 96 +++++++ .../action-project.component.html | 11 - .../action-project.component.ts | 40 --- .../create-project.component.html | 22 +- .../create-project.component.ts | 13 +- .../list-project/list-project.component.html | 9 +- .../add-member/add-member.component.html | 17 +- .../member/add-member/add-member.component.ts | 17 +- .../app/project/member/member.component.html | 66 ++--- .../app/project/member/member.component.ts | 87 +++--- .../src/app/project/member/member.service.ts | 10 +- .../src/app/project/project-routing.module.ts | 69 ----- .../src/app/project/project.component.html | 5 +- .../src/app/project/project.component.ts | 59 +++- src/ui_ng/src/app/project/project.css | 3 - src/ui_ng/src/app/project/project.module.ts | 18 +- src/ui_ng/src/app/project/project.service.ts | 12 +- .../create-edit-destination.component.html | 52 ++++ .../create-edit-destination.component.ts | 128 +++++++++ .../create-edit-policy.component.html | 54 ---- .../create-edit-policy.component.ts | 19 -- .../destination/destination.component.html | 30 ++ .../destination/destination.component.ts | 103 +++++++ .../list-policy/custom-highlight.directive.ts | 23 -- .../list-policy/list-policy.component.html | 29 -- .../list-policy/list-policy.component.ts | 21 -- .../replication-management.component.html | 12 + .../replication-management.component.ts | 8 + .../replication-management.css | 32 +++ .../replication/replication.component.html | 54 ++-- .../app/replication/replication.component.ts | 164 +++++++++-- .../src/app/replication/replication.module.ts | 21 +- .../app/replication/replication.service.ts | 150 +++++++++- .../total-replication.component.html | 12 + .../total-replication.component.ts | 71 +++++ .../app/repository/repository.component.html | 7 +- .../about-dialog/about-dialog.component.css | 37 +++ .../about-dialog/about-dialog.component.html | 25 ++ .../about-dialog/about-dialog.component.ts | 20 ++ .../create-edit-policy.component.html | 81 ++++++ .../create-edit-policy.component.ts | 228 +++++++++++++++ .../create-edit-policy/create-edit-policy.ts | 11 + .../deletion-dialog.component.ts | 39 ++- .../deletion-dialog.service.ts | 6 +- .../deletion-dialog/deletion-message.ts | 8 +- .../inline-alert/inline-alert.component.html | 10 + .../inline-alert/inline-alert.component.ts | 71 +++++ .../list-policy/list-policy.component.html | 24 ++ .../list-policy/list-policy.component.ts | 88 ++++++ .../new-user-form/new-user-form.component.css | 5 + .../new-user-form.component.html | 51 ++-- .../new-user-form}/new-user-form.component.ts | 25 +- .../shared/not-found/not-found.component.css | 33 +++ .../shared/not-found/not-found.component.html | 10 + .../shared/not-found/not-found.component.ts | 35 +++ src/ui_ng/src/app/shared/port.directive.ts | 37 +++ .../route/base-routing-resolver.service.ts | 37 +++ .../route/system-admin-activate.service.ts | 29 ++ src/ui_ng/src/app/shared/session.service.ts | 71 +++-- src/ui_ng/src/app/shared/shared.const.ts | 18 +- src/ui_ng/src/app/shared/shared.module.ts | 33 ++- src/ui_ng/src/app/shared/shared.utils.ts | 62 ++++ .../app/user/new-user-modal.component.html | 11 +- .../src/app/user/new-user-modal.component.ts | 85 ++++-- src/ui_ng/src/app/user/user.component.ts | 58 +++- src/ui_ng/src/app/user/user.module.ts | 9 +- src/ui_ng/src/app/user/user.ts | 1 + src/ui_ng/src/ng/i18n/lang/en-lang.json | 228 +++++++++++++++ src/ui_ng/src/ng/i18n/lang/zh-lang.json | 230 +++++++++++++++ 125 files changed, 4345 insertions(+), 1162 deletions(-) delete mode 100644 src/ui_ng/.editorconfig delete mode 100644 src/ui_ng/.gitignore delete mode 100644 src/ui_ng/.travis.yml create mode 100644 src/ui_ng/src/app/account/password/password.component.css create mode 100644 src/ui_ng/src/app/account/password/reset-password.component.html create mode 100644 src/ui_ng/src/app/account/password/reset-password.component.ts delete mode 100644 src/ui_ng/src/app/base/auth-guard.service.ts delete mode 100644 src/ui_ng/src/app/base/base-routing-resolver.service.ts delete mode 100644 src/ui_ng/src/app/base/base-routing.module.ts create mode 100644 src/ui_ng/src/app/config/auth/config-auth.component.html create mode 100644 src/ui_ng/src/app/config/auth/config-auth.component.ts create mode 100644 src/ui_ng/src/app/config/config.component.css create mode 100644 src/ui_ng/src/app/config/config.component.html create mode 100644 src/ui_ng/src/app/config/config.component.ts create mode 100644 src/ui_ng/src/app/config/config.module.ts create mode 100644 src/ui_ng/src/app/config/config.service.ts create mode 100644 src/ui_ng/src/app/config/config.ts create mode 100644 src/ui_ng/src/app/config/email/config-email.component.html create mode 100644 src/ui_ng/src/app/config/email/config-email.component.ts delete mode 100644 src/ui_ng/src/app/i18n/lang/en-lang.json delete mode 100644 src/ui_ng/src/app/i18n/lang/zh-lang.json create mode 100644 src/ui_ng/src/app/log/recent-log.component.css create mode 100644 src/ui_ng/src/app/log/recent-log.component.html create mode 100644 src/ui_ng/src/app/log/recent-log.component.ts delete mode 100644 src/ui_ng/src/app/project/action-project/action-project.component.html delete mode 100644 src/ui_ng/src/app/project/action-project/action-project.component.ts delete mode 100644 src/ui_ng/src/app/project/project-routing.module.ts create mode 100644 src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html create mode 100644 src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts delete mode 100644 src/ui_ng/src/app/replication/create-edit-policy/create-edit-policy.component.html delete mode 100644 src/ui_ng/src/app/replication/create-edit-policy/create-edit-policy.component.ts create mode 100644 src/ui_ng/src/app/replication/destination/destination.component.html create mode 100644 src/ui_ng/src/app/replication/destination/destination.component.ts delete mode 100644 src/ui_ng/src/app/replication/list-policy/custom-highlight.directive.ts delete mode 100644 src/ui_ng/src/app/replication/list-policy/list-policy.component.html delete mode 100644 src/ui_ng/src/app/replication/list-policy/list-policy.component.ts create mode 100644 src/ui_ng/src/app/replication/replication-management/replication-management.component.html create mode 100644 src/ui_ng/src/app/replication/replication-management/replication-management.component.ts create mode 100644 src/ui_ng/src/app/replication/replication-management/replication-management.css create mode 100644 src/ui_ng/src/app/replication/total-replication/total-replication.component.html create mode 100644 src/ui_ng/src/app/replication/total-replication/total-replication.component.ts create mode 100644 src/ui_ng/src/app/shared/about-dialog/about-dialog.component.css create mode 100644 src/ui_ng/src/app/shared/about-dialog/about-dialog.component.html create mode 100644 src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts create mode 100644 src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html create mode 100644 src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts create mode 100644 src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.ts create mode 100644 src/ui_ng/src/app/shared/inline-alert/inline-alert.component.html create mode 100644 src/ui_ng/src/app/shared/inline-alert/inline-alert.component.ts create mode 100644 src/ui_ng/src/app/shared/list-policy/list-policy.component.html create mode 100644 src/ui_ng/src/app/shared/list-policy/list-policy.component.ts create mode 100644 src/ui_ng/src/app/shared/new-user-form/new-user-form.component.css rename src/ui_ng/src/app/{user => shared/new-user-form}/new-user-form.component.html (63%) rename src/ui_ng/src/app/{user => shared/new-user-form}/new-user-form.component.ts (64%) create mode 100644 src/ui_ng/src/app/shared/not-found/not-found.component.css create mode 100644 src/ui_ng/src/app/shared/not-found/not-found.component.html create mode 100644 src/ui_ng/src/app/shared/not-found/not-found.component.ts create mode 100644 src/ui_ng/src/app/shared/port.directive.ts create mode 100644 src/ui_ng/src/app/shared/route/base-routing-resolver.service.ts create mode 100644 src/ui_ng/src/app/shared/route/system-admin-activate.service.ts create mode 100644 src/ui_ng/src/app/shared/shared.utils.ts create mode 100644 src/ui_ng/src/ng/i18n/lang/en-lang.json create mode 100644 src/ui_ng/src/ng/i18n/lang/zh-lang.json diff --git a/src/ui_ng/.editorconfig b/src/ui_ng/.editorconfig deleted file mode 100644 index 2fef24f1d..000000000 --- a/src/ui_ng/.editorconfig +++ /dev/null @@ -1,20 +0,0 @@ -# http://editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 4 -end_of_line = lf -insert_final_newline = true -trim_trailing_whitespace = true - - -[*.md] -max_line_length = 0 -trim_trailing_whitespace = true - -# Indentation override -#[lib/**.js] -#[{package.json,.travis.yml}] -#[**/**.js] diff --git a/src/ui_ng/.gitignore b/src/ui_ng/.gitignore deleted file mode 100644 index 5d90f1648..000000000 --- a/src/ui_ng/.gitignore +++ /dev/null @@ -1,9 +0,0 @@ -coverage/ -dist/ -html-report/ -node_modules/ -typings/ -**/*npm-debug.log.* -**/*yarn-error.log.* -.idea/ -.DS_Store diff --git a/src/ui_ng/.travis.yml b/src/ui_ng/.travis.yml deleted file mode 100644 index 6e54af80b..000000000 --- a/src/ui_ng/.travis.yml +++ /dev/null @@ -1,10 +0,0 @@ -language: node_js -node_js: - - "6.9" - -addons: - apt: - sources: - - ubuntu-toolchain-r-test - packages: - - g++-4.8 diff --git a/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.html b/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.html index f8562bcf0..4e7be441d 100644 --- a/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.html +++ b/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.html @@ -38,14 +38,7 @@ -
- -
- - {{errorMessage}} - -
- +
diff --git a/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts b/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts index cc2ce9d65..bb81493dc 100644 --- a/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts +++ b/src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts @@ -3,6 +3,10 @@ import { NgForm } from '@angular/forms'; import { SessionUser } from '../../shared/session-user'; import { SessionService } from '../../shared/session.service'; +import { MessageService } from '../../global-message/message.service'; +import { AlertType, httpStatusCode } from '../../shared/shared.const'; +import { errorHandler, accessErrorHandler } from '../../shared/shared.utils'; +import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component'; @Component({ selector: "account-settings-modal", @@ -13,43 +17,52 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked { opened: boolean = false; staticBackdrop: boolean = true; account: SessionUser; - error: any; - alertClose: boolean = true; + error: any = null; + originalStaticData: SessionUser; private isOnCalling: boolean = false; private formValueChanged: boolean = false; accountFormRef: NgForm; @ViewChild("accountSettingsFrom") accountForm: NgForm; + @ViewChild(InlineAlertComponent) + private inlineAlert: InlineAlertComponent; - constructor(private session: SessionService) { } + constructor( + private session: SessionService, + private msgService: MessageService) { } ngOnInit(): void { //Value copy this.account = Object.assign({}, this.session.getCurrentUser()); } + private isUserDataChange(): boolean { + if (!this.originalStaticData || !this.account) { + return false; + } + + for (var prop in this.originalStaticData) { + if (this.originalStaticData[prop]) { + if (this.account[prop]) { + if (this.originalStaticData[prop] != this.account[prop]) { + return true; + } + } + } + } + + return false; + } + public get isValid(): boolean { - return this.accountForm && this.accountForm.valid; + return this.accountForm && this.accountForm.valid && this.error === null; } public get showProgress(): boolean { return this.isOnCalling; } - public get errorMessage(): string { - if(this.error){ - if(this.error.message){ - return this.error.message; - }else{ - if(this.error._body){ - return this.error._body; - } - } - } - return ""; - } - ngAfterViewChecked(): void { if (this.accountFormRef != this.accountForm) { this.accountFormRef = this.accountForm; @@ -59,12 +72,15 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked { this.error = null; } this.formValueChanged = true; + this.inlineAlert.close(); }); } } } open() { + //Keep the initial data for future diff + this.originalStaticData = Object.assign({}, this.session.getCurrentUser()); this.account = Object.assign({}, this.session.getCurrentUser()); this.formValueChanged = false; @@ -72,7 +88,18 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked { } close() { - this.opened = false; + if (this.formValueChanged) { + if (!this.isUserDataChange()) { + this.opened = false; + } else { + //Need user confirmation + this.inlineAlert.showInlineConfirmation({ + message: "ALERT.FORM_CHANGE_CONFIRMATION" + }); + } + } else { + this.opened = false; + } } submit() { @@ -92,12 +119,22 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked { .then(() => { this.isOnCalling = false; this.close(); + this.msgService.announceMessage(200, "PROFILE.SAVE_SUCCESS", AlertType.SUCCESS); }) .catch(error => { this.isOnCalling = false; this.error = error; - this.alertClose = false; + if(accessErrorHandler(error, this.msgService)){ + this.opened = false; + }else{ + this.inlineAlert.showInlineError(error); + } }); } + confirmCancel(): void { + this.inlineAlert.close(); + this.opened = false; + } + } \ No newline at end of file diff --git a/src/ui_ng/src/app/account/account.module.ts b/src/ui_ng/src/app/account/account.module.ts index f6816b44d..0c95bf14e 100644 --- a/src/ui_ng/src/app/account/account.module.ts +++ b/src/ui_ng/src/app/account/account.module.ts @@ -6,6 +6,9 @@ import { SignInComponent } from './sign-in/sign-in.component'; import { PasswordSettingComponent } from './password/password-setting.component'; import { AccountSettingsModalComponent } from './account-settings/account-settings-modal.component'; import { SharedModule } from '../shared/shared.module'; +import { SignUpComponent } from './sign-up/sign-up.component'; +import { ForgotPasswordComponent } from './password/forgot-password.component'; +import { ResetPasswordComponent } from './password/reset-password.component'; import { PasswordSettingService } from './password/password-setting.service'; @@ -15,9 +18,19 @@ import { PasswordSettingService } from './password/password-setting.service'; RouterModule, SharedModule ], - declarations: [SignInComponent, PasswordSettingComponent, AccountSettingsModalComponent], - exports: [SignInComponent, PasswordSettingComponent, AccountSettingsModalComponent], - + declarations: [ + SignInComponent, + PasswordSettingComponent, + AccountSettingsModalComponent, + SignUpComponent, + ForgotPasswordComponent, + ResetPasswordComponent], + exports: [ + SignInComponent, + PasswordSettingComponent, + AccountSettingsModalComponent, + ResetPasswordComponent], + providers: [PasswordSettingService] }) export class AccountModule { } \ No newline at end of file diff --git a/src/ui_ng/src/app/account/password/forgot-password.component.html b/src/ui_ng/src/app/account/password/forgot-password.component.html index e69de29bb..c9bb505fb 100644 --- a/src/ui_ng/src/app/account/password/forgot-password.component.html +++ b/src/ui_ng/src/app/account/password/forgot-password.component.html @@ -0,0 +1,32 @@ + +

{{'RESET_PWD.TITLE' | translate}}

+ +
+
+
+
+ + +
+
+
+ +
+
+
+ + + +
+ \ No newline at end of file diff --git a/src/ui_ng/src/app/account/password/forgot-password.component.ts b/src/ui_ng/src/app/account/password/forgot-password.component.ts index 307b4ec3e..1a7964751 100644 --- a/src/ui_ng/src/app/account/password/forgot-password.component.ts +++ b/src/ui_ng/src/app/account/password/forgot-password.component.ts @@ -1,10 +1,78 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { Router } from '@angular/router'; +import { NgForm } from '@angular/forms'; + +import { PasswordSettingService } from './password-setting.service'; +import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component'; @Component({ selector: 'forgot-password', - templateUrl: "forgot-password.component.html" + templateUrl: "forgot-password.component.html", + styleUrls: ['password.component.css'] }) export class ForgotPasswordComponent { - // constructor(private router: Router){} + opened: boolean = false; + private onGoing: boolean = false; + private email: string = ""; + private validationState: boolean = true; + private forceValid: boolean = true; + + @ViewChild("forgotPasswordFrom") forgotPwdForm: NgForm; + @ViewChild(InlineAlertComponent) + private inlineAlert: InlineAlertComponent; + + constructor(private pwdService: PasswordSettingService) { } + + public get showProgress(): boolean { + return this.onGoing; + } + + public get isValid(): boolean { + return this.forgotPwdForm && this.forgotPwdForm.valid && this.forceValid; + } + + public open(): void { + this.opened = true; + this.validationState = true; + this.forceValid = true; + this.forgotPwdForm.resetForm(); + } + + public close(): void { + this.opened = false; + } + + public send(): void { + //Double confirm to avoid improper situations + if (!this.email) { + return; + } + + if (!this.isValid) { + return; + } + + this.onGoing = true; + this.pwdService.sendResetPasswordMail(this.email) + .then(response => { + this.onGoing = false; + this.forceValid = false;//diable the send button + this.inlineAlert.showInlineSuccess({ + message: "RESET_PWD.SUCCESS" + }); + }) + .catch(error => { + this.onGoing = false; + this.inlineAlert.showInlineError(error); + }) + + } + + public handleValidation(flag: boolean): void { + if (flag) { + this.validationState = true; + } else { + this.validationState = this.isValid; + } + } } \ No newline at end of file diff --git a/src/ui_ng/src/app/account/password/password-setting.component.html b/src/ui_ng/src/app/account/password/password-setting.component.html index d287db0a5..5d3a461e2 100644 --- a/src/ui_ng/src/app/account/password/password-setting.component.html +++ b/src/ui_ng/src/app/account/password/password-setting.component.html @@ -45,6 +45,7 @@
+
diff --git a/src/ui_ng/src/app/account/password/password-setting.component.ts b/src/ui_ng/src/app/account/password/password-setting.component.ts index 6e221b672..6c8dd8248 100644 --- a/src/ui_ng/src/app/account/password/password-setting.component.ts +++ b/src/ui_ng/src/app/account/password/password-setting.component.ts @@ -4,6 +4,10 @@ import { NgForm } from '@angular/forms'; import { PasswordSettingService } from './password-setting.service'; import { SessionService } from '../../shared/session.service'; +import { AlertType, httpStatusCode } from '../../shared/shared.const'; +import { MessageService } from '../../global-message/message.service'; +import { errorHandler, isEmptyForm, accessErrorHandler } from '../../shared/shared.utils'; +import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component'; @Component({ selector: 'password-setting', @@ -14,19 +18,27 @@ export class PasswordSettingComponent implements AfterViewChecked { oldPwd: string = ""; newPwd: string = ""; reNewPwd: string = ""; + error: any = null; private formValueChanged: boolean = false; private onCalling: boolean = false; pwdFormRef: NgForm; @ViewChild("changepwdForm") pwdForm: NgForm; - constructor(private passwordService: PasswordSettingService, private session: SessionService){} + @ViewChild(InlineAlertComponent) + private inlineAlert: InlineAlertComponent; + + constructor( + private passwordService: PasswordSettingService, + private session: SessionService, + private msgService: MessageService) { } //If form is valid public get isValid(): boolean { if (this.pwdForm && this.pwdForm.form.get("newPassword")) { return this.pwdForm.valid && - this.pwdForm.form.get("newPassword").value === this.pwdForm.form.get("reNewPassword").value; + (this.pwdForm.form.get("newPassword").value === this.pwdForm.form.get("reNewPassword").value) && + this.error === null; } return false; } @@ -45,6 +57,8 @@ export class PasswordSettingComponent implements AfterViewChecked { if (this.pwdFormRef) { this.pwdFormRef.valueChanges.subscribe(data => { this.formValueChanged = true; + this.error = null; + this.inlineAlert.close(); }); } } @@ -54,10 +68,26 @@ export class PasswordSettingComponent implements AfterViewChecked { open(): void { this.opened = true; this.pwdForm.reset(); + this.formValueChanged = false; } //Close the moal dialog close(): void { + if (this.formValueChanged) { + if (isEmptyForm(this.pwdForm)) { + this.opened = false; + } else { + //Need user confirmation + this.inlineAlert.showInlineConfirmation({ + message: "ALERT.FORM_CHANGE_CONFIRMATION" + }); + } + } else { + this.opened = false; + } + } + + confirmCancel(): void { this.opened = false; } @@ -73,26 +103,31 @@ export class PasswordSettingComponent implements AfterViewChecked { //Double confirm session is valid let cUser = this.session.getCurrentUser(); - if(!cUser){ + if (!cUser) { return; } //Call service this.onCalling = true; - this.passwordService.changePassword(cUser.user_id, - { - new_password: this.pwdForm.value.newPassword, - old_password: this.pwdForm.value.oldPassword - }) - .then(() => { - this.onCalling = false; - this.close(); - }) - .catch(error => { - this.onCalling = false; - console.error(error);//TODO: - }); - //TODO:publish the successful message to general messae box + this.passwordService.changePassword(cUser.user_id, + { + new_password: this.pwdForm.value.newPassword, + old_password: this.pwdForm.value.oldPassword + }) + .then(() => { + this.onCalling = false; + this.close(); + this.msgService.announceMessage(200, "CHANGE_PWD.SAVE_SUCCESS", AlertType.SUCCESS); + }) + .catch(error => { + this.onCalling = false; + this.error = error; + if(accessErrorHandler(error, this.msgService)){ + this.opened = false; + }else{ + this.inlineAlert.showInlineError(error); + } + }); } } \ No newline at end of file diff --git a/src/ui_ng/src/app/account/password/password-setting.service.ts b/src/ui_ng/src/app/account/password/password-setting.service.ts index 94b2af793..d5f0db427 100644 --- a/src/ui_ng/src/app/account/password/password-setting.service.ts +++ b/src/ui_ng/src/app/account/password/password-setting.service.ts @@ -5,6 +5,8 @@ import 'rxjs/add/operator/toPromise'; import { PasswordSetting } from './password-setting'; const passwordChangeEndpoint = "/api/users/:user_id/password"; +const sendEmailEndpoint = "/sendEmail"; +const resetPasswordEndpoint = "/reset"; @Injectable() export class PasswordSettingService { @@ -19,17 +21,46 @@ export class PasswordSettingService { constructor(private http: Http) { } changePassword(userId: number, setting: PasswordSetting): Promise { - if(!setting || setting.new_password.trim()==="" || setting.old_password.trim()===""){ + if (!setting || setting.new_password.trim() === "" || setting.old_password.trim() === "") { return Promise.reject("Invalid data"); } - let putUrl = passwordChangeEndpoint.replace(":user_id", userId+""); + let putUrl = passwordChangeEndpoint.replace(":user_id", userId + ""); return this.http.put(putUrl, JSON.stringify(setting), this.options) - .toPromise() - .then(() => null) - .catch(error=>{ - return Promise.reject(error); - }); + .toPromise() + .then(() => null) + .catch(error => { + return Promise.reject(error); + }); + } + + sendResetPasswordMail(email: string): Promise { + if (!email) { + return Promise.reject("Invalid email"); + } + + let getUrl = sendEmailEndpoint + "?email=" + email; + return this.http.get(getUrl, this.options).toPromise() + .then(response => response) + .catch(error => { + return Promise.reject(error); + }) + } + + resetPassword(uuid: string, newPassword: string): Promise { + if (!uuid || !newPassword) { + return Promise.reject("Invalid reset uuid or password"); + } + + return this.http.post(resetPasswordEndpoint, JSON.stringify({ + "reset_uuid": uuid, + "password": newPassword + }), this.options) + .toPromise() + .then(response => response) + .catch(error => { + return Promise.reject(error); + }); } } diff --git a/src/ui_ng/src/app/account/password/password.component.css b/src/ui_ng/src/app/account/password/password.component.css new file mode 100644 index 000000000..3661be1bf --- /dev/null +++ b/src/ui_ng/src/app/account/password/password.component.css @@ -0,0 +1,3 @@ +.reset-modal-title-override { + font-size: 14px !important; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/account/password/reset-password.component.html b/src/ui_ng/src/app/account/password/reset-password.component.html new file mode 100644 index 000000000..90571eab4 --- /dev/null +++ b/src/ui_ng/src/app/account/password/reset-password.component.html @@ -0,0 +1,51 @@ + +

{{'RESET_PWD.TITLE' | translate}}

+ +
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + + +
+ \ No newline at end of file diff --git a/src/ui_ng/src/app/account/password/reset-password.component.ts b/src/ui_ng/src/app/account/password/reset-password.component.ts new file mode 100644 index 000000000..75bd52c92 --- /dev/null +++ b/src/ui_ng/src/app/account/password/reset-password.component.ts @@ -0,0 +1,123 @@ +import { Component, ViewChild, OnInit } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; +import { NgForm } from '@angular/forms'; + +import { PasswordSettingService } from './password-setting.service'; +import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component'; +import { errorHandler, accessErrorHandler } from '../../shared/shared.utils'; +import { AlertType } from '../../shared/shared.const'; +import { MessageService } from '../../global-message/message.service'; + +@Component({ + selector: 'reset-password', + templateUrl: "reset-password.component.html", + styleUrls: ['password.component.css'] +}) +export class ResetPasswordComponent implements OnInit{ + opened: boolean = true; + private onGoing: boolean = false; + private password: string = ""; + private validationState: any = {}; + private resetUuid: string = ""; + private resetOk: boolean = false; + + @ViewChild("resetPwdForm") resetPwdForm: NgForm; + @ViewChild(InlineAlertComponent) + private inlineAlert: InlineAlertComponent; + + constructor( + private pwdService: PasswordSettingService, + private route: ActivatedRoute, + private msgService: MessageService, + private router: Router) { } + + ngOnInit(): void { + this.route.queryParams.subscribe(params => this.resetUuid = params["reset_uuid"] || ""); + } + + public get showProgress(): boolean { + return this.onGoing; + } + + public get isValid(): boolean { + return this.resetPwdForm && this.resetPwdForm.valid && this.samePassword(); + } + + public getValidationState(key: string): boolean { + return this.validationState && this.validationState[key]; + } + + public open(): void { + this.resetOk = false; + this.opened = true; + this.resetPwdForm.resetForm(); + } + + public close(): void { + this.opened = false; + } + + public send(): void { + //If already reset password ok, navigator to sign-in + if(this.resetOk){ + this.router.navigate(['sign-in']); + return; + } + + //Double confirm to avoid improper situations + if (!this.password) { + return; + } + + if (!this.isValid) { + return; + } + + this.onGoing = true; + this.pwdService.resetPassword(this.resetUuid, this.password) + .then(() => { + this.resetOk = true; + this.inlineAlert.showInlineSuccess({message:'RESET_PWD.RESET_OK'}); + }) + .catch(error => { + if(accessErrorHandler(error, this.msgService)){ + this.close(); + }else{ + this.inlineAlert.showInlineError(errorHandler(error)); + } + }); + } + + public handleValidation(key: string, flag: boolean): void { + if (flag) { + if(!this.validationState[key]){ + this.validationState[key] = true; + } + } else { + this.validationState[key] = this.getControlValidationState(key) + } + } + + private getControlValidationState(key: string): boolean { + if (this.resetPwdForm) { + let control = this.resetPwdForm.controls[key]; + if (control) { + return control.valid; + } + } + + return false; + } + + private samePassword(): boolean { + if (this.resetPwdForm) { + let control1 = this.resetPwdForm.controls["newPassword"]; + let control2 = this.resetPwdForm.controls["reNewPassword"]; + if (control1 && control2) { + return control1.value == control2.value; + } + } + + return false; + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/account/sign-in/sign-in.component.css b/src/ui_ng/src/app/account/sign-in/sign-in.component.css index 6004a33f6..cc1bf4187 100644 --- a/src/ui_ng/src/app/account/sign-in/sign-in.component.css +++ b/src/ui_ng/src/app/account/sign-in/sign-in.component.css @@ -4,4 +4,12 @@ .visibility-hidden { visibility: hidden; +} + +.forgot-password-link { + position: relative; + line-height: 36px; + font-size: 14px; + float: right; + top: -5px; } \ No newline at end of file diff --git a/src/ui_ng/src/app/account/sign-in/sign-in.component.html b/src/ui_ng/src/app/account/sign-in/sign-in.component.html index 21c3a3dbe..9aae877b9 100644 --- a/src/ui_ng/src/app/account/sign-in/sign-in.component.html +++ b/src/ui_ng/src/app/account/sign-in/sign-in.component.html @@ -7,30 +7,33 @@
- + + Forgot password
-
- Invalid user name or password +
+ {{ 'SIGN_IN.INVALID_MSG' | translate }}
- - + +
-
\ No newline at end of file + +> + \ No newline at end of file diff --git a/src/ui_ng/src/app/account/sign-in/sign-in.component.ts b/src/ui_ng/src/app/account/sign-in/sign-in.component.ts index 4bc8b51ef..40cd828a1 100644 --- a/src/ui_ng/src/app/account/sign-in/sign-in.component.ts +++ b/src/ui_ng/src/app/account/sign-in/sign-in.component.ts @@ -1,11 +1,15 @@ -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; +import { Component, OnInit } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; import { Input, ViewChild, AfterViewChecked } from '@angular/core'; import { NgForm } from '@angular/forms'; import { SessionService } from '../../shared/session.service'; import { SignInCredential } from '../../shared/sign-in-credential'; +import { SignUpComponent } from '../sign-up/sign-up.component'; +import { harborRootRoute } from '../../shared/shared.const'; +import { ForgotPasswordComponent } from '../password/forgot-password.component'; + //Define status flags for signing in states export const signInStatusNormal = 0; export const signInStatusOnGoing = 1; @@ -17,13 +21,16 @@ export const signInStatusError = -1; styleUrls: ['sign-in.component.css'] }) -export class SignInComponent implements AfterViewChecked { +export class SignInComponent implements AfterViewChecked, OnInit { + private redirectUrl: string = ""; //Form reference signInForm: NgForm; @ViewChild('signInForm') currentForm: NgForm; + @ViewChild('signupDialog') signUpDialog: SignUpComponent; + @ViewChild('forgotPwdDialog') forgotPwdDialog: ForgotPasswordComponent; //Status flag - signInStatus: number = 0; + signInStatus: number = signInStatusNormal; //Initialize sign in credential @Input() signInCredential: SignInCredential = { @@ -33,9 +40,17 @@ export class SignInComponent implements AfterViewChecked { constructor( private router: Router, - private session: SessionService + private session: SessionService, + private route: ActivatedRoute ) { } + ngOnInit(): void { + this.route.queryParams + .subscribe(params => { + this.redirectUrl = params["redirect_url"] || ""; + }); + } + //For template accessing public get isError(): boolean { return this.signInStatus === signInStatusError; @@ -105,25 +120,26 @@ export class SignInComponent implements AfterViewChecked { //Set status this.signInStatus = signInStatusNormal; - //Validate the sign-in session - this.session.retrieveUser() - .then(user => { - //Routing to the right location - let nextRoute = ["/harbor", "projects"]; - this.router.navigate(nextRoute); - }) - .catch(error => { - this.handleError(error); - }); + //Redirect to the right route + if (this.redirectUrl === "") { + //Routing to the default location + this.router.navigateByUrl(harborRootRoute); + }else{ + this.router.navigateByUrl(this.redirectUrl); + } }) .catch(error => { this.handleError(error); }); } - //Help user navigate to the sign up + //Open sign up dialog signUp(): void { - let nextRoute = ["/harbor", "signup"]; - this.router.navigate(nextRoute); + this.signUpDialog.open(); + } + + //Open forgot password dialog + forgotPassword(): void { + this.forgotPwdDialog.open(); } } \ No newline at end of file diff --git a/src/ui_ng/src/app/account/sign-in/sign-in.service.ts b/src/ui_ng/src/app/account/sign-in/sign-in.service.ts index e67e86304..cf4f171ef 100644 --- a/src/ui_ng/src/app/account/sign-in/sign-in.service.ts +++ b/src/ui_ng/src/app/account/sign-in/sign-in.service.ts @@ -2,10 +2,9 @@ import { Injectable } from '@angular/core'; import { Headers, Http, URLSearchParams } from '@angular/http'; import 'rxjs/add/operator/toPromise'; -import { SignInCredential } from './sign-in-credential'; +import { SignInCredential } from '../../shared/sign-in-credential'; -const url_prefix = '/ng'; -const signInUrl = url_prefix + '/login'; +const signInUrl = '/login'; /** * * Define a service to provide sign in methods diff --git a/src/ui_ng/src/app/account/sign-up/sign-up.component.html b/src/ui_ng/src/app/account/sign-up/sign-up.component.html index fae4c1f44..ddd5b5d48 100644 --- a/src/ui_ng/src/app/account/sign-up/sign-up.component.html +++ b/src/ui_ng/src/app/account/sign-up/sign-up.component.html @@ -1 +1,12 @@ -

Placeholder for signup

\ No newline at end of file + +

{{'SIGN_UP.TITLE' | translate}}

+
+ + +
+
+ + + +
+ \ No newline at end of file diff --git a/src/ui_ng/src/app/account/sign-up/sign-up.component.ts b/src/ui_ng/src/app/account/sign-up/sign-up.component.ts index 3d97950fa..86cb22ed8 100644 --- a/src/ui_ng/src/app/account/sign-up/sign-up.component.ts +++ b/src/ui_ng/src/app/account/sign-up/sign-up.component.ts @@ -1,10 +1,108 @@ -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; +import { Component, Output, ViewChild } from '@angular/core'; +import { NgForm } from '@angular/forms'; + +import { NewUserFormComponent } from '../../shared/new-user-form/new-user-form.component'; +import { User } from '../../user/user'; + +import { SessionService } from '../../shared/session.service'; +import { UserService } from '../../user/user.service'; +import { errorHandler } from '../../shared/shared.utils'; +import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component'; @Component({ selector: 'sign-up', templateUrl: "sign-up.component.html" }) export class SignUpComponent { - // constructor(private router: Router){} + opened: boolean = false; + staticBackdrop: boolean = true; + private error: any; + private onGoing: boolean = false; + private formValueChanged: boolean = false; + + constructor( + private session: SessionService, + private userService: UserService) { } + + @ViewChild(NewUserFormComponent) + private newUserForm: NewUserFormComponent; + + @ViewChild(InlineAlertComponent) + private inlienAlert: InlineAlertComponent; + + private getNewUser(): User { + return this.newUserForm.getData(); + } + + public get inProgress(): boolean { + return this.onGoing; + } + + public get isValid(): boolean { + return this.newUserForm.isValid && this.error == null; + } + + formValueChange(flag: boolean): void { + if (flag) { + this.formValueChanged = true; + } + if (this.error != null) { + this.error = null;//clear error + } + this.inlienAlert.close();//Close alert if being shown + } + + open(): void { + this.newUserForm.reset();//Reset form + this.formValueChanged = false; + this.opened = true; + } + + close(): void { + if (this.formValueChanged) { + if (this.newUserForm.isEmpty()) { + this.opened = false; + } else { + //Need user confirmation + this.inlienAlert.showInlineConfirmation({ + message: "ALERT.FORM_CHANGE_CONFIRMATION" + }); + } + } else { + this.opened = false; + } + } + + confirmCancel(): void { + this.opened = false; + } + + //Create new user + create(): void { + //Double confirm everything is ok + //Form is valid + if (!this.isValid) { + return; + } + + //We have new user data + let u = this.getNewUser(); + if (!u) { + return; + } + + //Start process + this.onGoing = true; + + this.userService.addUser(u) + .then(() => { + this.onGoing = false; + this.close(); + }) + .catch(error => { + this.onGoing = false; + this.error = error; + this.inlienAlert.showInlineError(error); + }); + } } \ No newline at end of file diff --git a/src/ui_ng/src/app/app.component.ts b/src/ui_ng/src/app/app.component.ts index 78ce6b3fd..d6c331f3c 100644 --- a/src/ui_ng/src/app/app.component.ts +++ b/src/ui_ng/src/app/app.component.ts @@ -24,7 +24,10 @@ export class AppComponent { //Use browser lang langSetting = translate.getBrowserLang(); } - translate.use(this.isLangMatch(langSetting, supportedLangs) ? langSetting : enLang); + + let selectedLang = this.isLangMatch(langSetting, supportedLangs) ? langSetting : enLang; + translate.use(selectedLang); + //this.session.switchLanguage(selectedLang).catch(error => console.error(error)); } private isLangMatch(browserLang: string, supportedLangs: string[]) { diff --git a/src/ui_ng/src/app/app.module.ts b/src/ui_ng/src/app/app.module.ts index bbd77180b..7733d7e6c 100644 --- a/src/ui_ng/src/app/app.module.ts +++ b/src/ui_ng/src/app/app.module.ts @@ -9,6 +9,7 @@ import { BaseModule } from './base/base.module'; import { HarborRoutingModule } from './harbor-routing.module'; import { SharedModule } from './shared/shared.module'; import { AccountModule } from './account/account.module'; +import { ConfigurationModule } from './config/config.module'; import { TranslateModule, TranslateLoader, MissingTranslationHandler } from "@ngx-translate/core"; import { MyMissingTranslationHandler } from './i18n/missing-trans.handler'; @@ -16,7 +17,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { Http } from '@angular/http'; export function HttpLoaderFactory(http: Http) { - return new TranslateHttpLoader(http, 'app/i18n/lang/', '-lang.json'); + return new TranslateHttpLoader(http, 'ng/i18n/lang/', '-lang.json'); } @NgModule({ @@ -28,6 +29,7 @@ export function HttpLoaderFactory(http: Http) { BaseModule, AccountModule, HarborRoutingModule, + ConfigurationModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, diff --git a/src/ui_ng/src/app/base/auth-guard.service.ts b/src/ui_ng/src/app/base/auth-guard.service.ts deleted file mode 100644 index 3fcd1e888..000000000 --- a/src/ui_ng/src/app/base/auth-guard.service.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Injectable } from '@angular/core'; -import { - CanActivate, Router, - ActivatedRouteSnapshot, - RouterStateSnapshot, - CanActivateChild -} from '@angular/router'; -import { SessionService } from '../shared/session.service'; - -@Injectable() -export class AuthGuard implements CanActivate, CanActivateChild { - constructor(private authService: SessionService, private router: Router) {} - - canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { - console.info("canActivate",route, state); - return true; - } - - canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { - return this.canActivate(route, state); - } -} diff --git a/src/ui_ng/src/app/base/base-routing-resolver.service.ts b/src/ui_ng/src/app/base/base-routing-resolver.service.ts deleted file mode 100644 index f47baa3b1..000000000 --- a/src/ui_ng/src/app/base/base-routing-resolver.service.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Injectable } from '@angular/core'; -import { - Router, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot -} from '@angular/router'; - -import { SessionService } from '../shared/session.service'; -import { SessionUser } from '../shared/session-user'; - -@Injectable() -export class BaseRoutingResolver implements Resolve { - - constructor(private session: SessionService, private router: Router) { } - - resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise { - console.info("resolver...."); - return this.session.retrieveUser() - .then(sessionUser => { - return sessionUser; - }) - .catch(error => { - console.info("Anonymous user"); - }); - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/base/base-routing.module.ts b/src/ui_ng/src/app/base/base-routing.module.ts deleted file mode 100644 index 5ad51064a..000000000 --- a/src/ui_ng/src/app/base/base-routing.module.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { HarborShellComponent } from './harbor-shell/harbor-shell.component'; - -import { DashboardComponent } from '../dashboard/dashboard.component'; -import { ProjectComponent } from '../project/project.component'; -import { UserComponent } from '../user/user.component'; - -import { BaseRoutingResolver } from './base-routing-resolver.service'; -import { AuthGuard } from './auth-guard.service'; - -const baseRoutes: Routes = [ - { - path: 'harbor', - component: HarborShellComponent, - resolve: { - rootResolver: BaseRoutingResolver - }, - children: [ - { - path: 'dashboard', - component: DashboardComponent - }, - { - path: 'projects', - component: ProjectComponent - }, - { - path: 'users', - component: UserComponent, - canActivate: [AuthGuard] - } - ] - }]; - -@NgModule({ - imports: [ - RouterModule.forChild(baseRoutes) - ], - exports: [RouterModule], - - providers: [BaseRoutingResolver, AuthGuard] -}) -export class BaseRoutingModule { - -} \ No newline at end of file diff --git a/src/ui_ng/src/app/base/base.module.ts b/src/ui_ng/src/app/base/base.module.ts index 4a34f4558..0a623551d 100644 --- a/src/ui_ng/src/app/base/base.module.ts +++ b/src/ui_ng/src/app/base/base.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; +import { RouterModule } from '@angular/router'; import { DashboardModule } from '../dashboard/dashboard.module'; import { ProjectModule } from '../project/project.module'; @@ -12,16 +13,14 @@ import { FooterComponent } from './footer/footer.component'; import { HarborShellComponent } from './harbor-shell/harbor-shell.component'; import { SearchResultComponent } from './global-search/search-result.component'; -import { BaseRoutingModule } from './base-routing.module'; - @NgModule({ imports: [ SharedModule, DashboardModule, ProjectModule, UserModule, - BaseRoutingModule, - AccountModule + AccountModule, + RouterModule ], declarations: [ NavigatorComponent, diff --git a/src/ui_ng/src/app/base/global-search/search-result.component.css b/src/ui_ng/src/app/base/global-search/search-result.component.css index 8ec5634e1..a02153e93 100644 --- a/src/ui_ng/src/app/base/global-search/search-result.component.css +++ b/src/ui_ng/src/app/base/global-search/search-result.component.css @@ -1,12 +1,13 @@ .search-overlay { display: block; position: absolute; - height: 94%; + height: 100%; width: 97%; /*shoud be lesser than 1000 to aoivd override the popup menu*/ z-index: 999; box-sizing: border-box; background: #fafafa; + top: 0px; } .search-header { diff --git a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html index e6ad6b49c..200e8592f 100644 --- a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html +++ b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html @@ -1,23 +1,24 @@ -
+
-
-
- - - -
\ No newline at end of file diff --git a/src/ui_ng/src/app/base/navigator/navigator.component.ts b/src/ui_ng/src/app/base/navigator/navigator.component.ts index ae069ea82..588ad54b9 100644 --- a/src/ui_ng/src/app/base/navigator/navigator.component.ts +++ b/src/ui_ng/src/app/base/navigator/navigator.component.ts @@ -4,7 +4,7 @@ import { TranslateService } from '@ngx-translate/core'; import { ModalEvent } from '../modal-event'; import { SearchEvent } from '../search-event'; -import { modalAccountSettings, modalPasswordSetting } from '../modal-events.const'; +import { modalEvents } from '../modal-events.const'; import { SessionUser } from '../../shared/session-user'; import { SessionService } from '../../shared/session.service'; @@ -62,7 +62,7 @@ export class NavigatorComponent implements OnInit { //Open the account setting dialog openAccountSettingsModal(): void { this.showAccountSettingsModal.emit({ - modalName: modalAccountSettings, + modalName: modalEvents.USER_PROFILE, modalFlag: true }); } @@ -70,7 +70,15 @@ export class NavigatorComponent implements OnInit { //Open change password dialog openChangePwdModal(): void { this.showPwdChangeModal.emit({ - modalName: modalPasswordSetting, + modalName: modalEvents.CHANGE_PWD, + modalFlag: true + }); + } + + //Open about dialog + openAboutDialog(): void { + this.showPwdChangeModal.emit({ + modalName: modalEvents.ABOUT, modalFlag: true }); } @@ -100,6 +108,8 @@ export class NavigatorComponent implements OnInit { //TODO: console.error('Language '+lang.trim()+' is not suppoted'); } + //Try to switch backend lang + //this.session.switchLanguage(lang).catch(error => console.error(error)); } //Handle the home action diff --git a/src/ui_ng/src/app/config/auth/config-auth.component.html b/src/ui_ng/src/app/config/auth/config-auth.component.html new file mode 100644 index 000000000..707257de8 --- /dev/null +++ b/src/ui_ng/src/app/config/auth/config-auth.component.html @@ -0,0 +1,117 @@ +
+
+
+ +
+ +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+ + + + + {{'CONFIG.SELF_REGISTRATION_TOOLTIP' | translate}} + + +
+
+
\ No newline at end of file diff --git a/src/ui_ng/src/app/config/auth/config-auth.component.ts b/src/ui_ng/src/app/config/auth/config-auth.component.ts new file mode 100644 index 000000000..7c2b3cfac --- /dev/null +++ b/src/ui_ng/src/app/config/auth/config-auth.component.ts @@ -0,0 +1,33 @@ +import { Component, Input, ViewChild } from '@angular/core'; +import { NgForm } from '@angular/forms'; +import { Subscription } from 'rxjs/Subscription'; + +import { Configuration } from '../config'; + +@Component({ + selector: 'config-auth', + templateUrl: "config-auth.component.html", + styleUrls: ['../config.component.css'] +}) +export class ConfigurationAuthComponent { + private changeSub: Subscription; + @Input("ldapConfig") currentConfig: Configuration = new Configuration(); + + @ViewChild("authConfigFrom") authForm: NgForm; + + constructor() { } + + public get showLdap(): boolean { + return this.currentConfig && + this.currentConfig.auth_mode && + this.currentConfig.auth_mode.value === 'ldap'; + } + + private disabled(prop: any): boolean { + return !(prop && prop.editable); + } + + public isValid(): boolean { + return this.authForm && this.authForm.valid; + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/config/config.component.css b/src/ui_ng/src/app/config/config.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/ui_ng/src/app/config/config.component.html b/src/ui_ng/src/app/config/config.component.html new file mode 100644 index 000000000..cffe632bf --- /dev/null +++ b/src/ui_ng/src/app/config/config.component.html @@ -0,0 +1,54 @@ +

{{'CONFIG.TITLE' | translate }}

+ + + {{'CONFIG.AUTH' | translate }} + {{'CONFIG.REPLICATION' | translate }} + {{'CONFIG.EMAIL' | translate }} + {{'CONFIG.SYSTEM' | translate }} + + + + + +
+
+
+ + + + + {{'CONFIG.VERIFY_REMOTE_CERT_TOOLTIP' | translate }} + + +
+
+
+ + + + + +
+
+
+ + +
+
+
+ + +
+ + + +
\ No newline at end of file diff --git a/src/ui_ng/src/app/config/config.component.ts b/src/ui_ng/src/app/config/config.component.ts new file mode 100644 index 000000000..10925359b --- /dev/null +++ b/src/ui_ng/src/app/config/config.component.ts @@ -0,0 +1,267 @@ +import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; +import { Router } from '@angular/router'; +import { NgForm } from '@angular/forms'; + +import { ConfigurationService } from './config.service'; +import { Configuration } from './config'; +import { MessageService } from '../global-message/message.service'; +import { AlertType, DeletionTargets } from '../shared/shared.const'; +import { errorHandler, accessErrorHandler } from '../shared/shared.utils'; +import { StringValueItem } from './config'; +import { DeletionDialogService } from '../shared/deletion-dialog/deletion-dialog.service'; +import { Subscription } from 'rxjs/Subscription'; +import { DeletionMessage } from '../shared/deletion-dialog/deletion-message' + +import { ConfigurationAuthComponent } from './auth/config-auth.component'; +import { ConfigurationEmailComponent } from './email/config-email.component'; + +const fakePass = "fakepassword"; + +@Component({ + selector: 'config', + templateUrl: "config.component.html", + styleUrls: ['config.component.css'] +}) +export class ConfigurationComponent implements OnInit, OnDestroy { + private onGoing: boolean = false; + allConfig: Configuration = new Configuration(); + private currentTabId: string = ""; + private originalCopy: Configuration; + private confirmSub: Subscription; + + @ViewChild("repoConfigFrom") repoConfigForm: NgForm; + @ViewChild("systemConfigFrom") systemConfigForm: NgForm; + @ViewChild(ConfigurationEmailComponent) mailConfig: ConfigurationEmailComponent; + @ViewChild(ConfigurationAuthComponent) authConfig: ConfigurationAuthComponent; + + constructor( + private configService: ConfigurationService, + private msgService: MessageService, + private confirmService: DeletionDialogService) { } + + ngOnInit(): void { + //First load + this.retrieveConfig(); + + this.confirmSub = this.confirmService.deletionConfirm$.subscribe(confirmation => { + this.reset(confirmation.data); + }); + } + + ngOnDestroy(): void { + if (this.confirmSub) { + this.confirmSub.unsubscribe(); + } + } + + public get inProgress(): boolean { + return this.onGoing; + } + + public isValid(): boolean { + return this.repoConfigForm && + this.repoConfigForm.valid && + this.systemConfigForm && + this.systemConfigForm.valid && + this.mailConfig && + this.mailConfig.isValid() && + this.authConfig && + this.authConfig.isValid(); + } + + public hasChanges(): boolean { + return !this.isEmpty(this.getChanges()); + } + + public isMailConfigValid(): boolean { + return this.mailConfig && + this.mailConfig.isValid(); + } + + public get showTestServerBtn(): boolean { + return this.currentTabId === 'config-email'; + } + + public tabLinkChanged(tabLink: any) { + this.currentTabId = tabLink.id; + } + + /** + * + * Save the changed values + * + * @memberOf ConfigurationComponent + */ + public save(): void { + let changes = this.getChanges(); + if (!this.isEmpty(changes)) { + this.onGoing = true; + this.configService.saveConfiguration(changes) + .then(response => { + this.onGoing = false; + //API should return the updated configurations here + //Unfortunately API does not do that + //To refresh the view, we can clone the original data copy + //or force refresh by calling service. + //HERE we choose force way + this.retrieveConfig(); + this.msgService.announceMessage(response.status, "CONFIG.SAVE_SUCCESS", AlertType.SUCCESS); + }) + .catch(error => { + this.onGoing = false; + if (!accessErrorHandler(error, this.msgService)) { + this.msgService.announceMessage(error.status, errorHandler(error), AlertType.DANGER); + } + }); + } else { + //Inprop situation, should not come here + console.error("Save obort becasue nothing changed"); + } + } + + /** + * + * Discard current changes if have and reset + * + * @memberOf ConfigurationComponent + */ + public cancel(): void { + let changes = this.getChanges(); + if (!this.isEmpty(changes)) { + let msg = new DeletionMessage( + "CONFIG.CONFIRM_TITLE", + "CONFIG.CONFIRM_SUMMARY", + "", + changes, + DeletionTargets.EMPTY + ); + this.confirmService.openComfirmDialog(msg); + } else { + //Inprop situation, should not come here + console.error("Nothing changed"); + } + } + + /** + * + * Test the connection of specified mail server + * + * + * @memberOf ConfigurationComponent + */ + public testMailServer(): void { + + } + + private retrieveConfig(): void { + this.onGoing = true; + this.configService.getConfiguration() + .then(configurations => { + this.onGoing = false; + + //Add two password fields + configurations.email_password = new StringValueItem(fakePass, true); + configurations.ldap_search_password = new StringValueItem(fakePass, true); + this.allConfig = configurations; + + //Keep the original copy of the data + this.originalCopy = this.clone(configurations); + }) + .catch(error => { + this.onGoing = false; + if (!accessErrorHandler(error, this.msgService)) { + this.msgService.announceMessage(error.status, errorHandler(error), AlertType.DANGER); + } + }); + } + + /** + * + * Get the changed fields and return a map + * + * @private + * @returns {*} + * + * @memberOf ConfigurationComponent + */ + private getChanges(): any { + let changes = {}; + if (!this.allConfig || !this.originalCopy) { + return changes; + } + + for (let prop in this.allConfig) { + let field = this.originalCopy[prop]; + if (field && field.editable) { + if (field.value != this.allConfig[prop].value) { + changes[prop] = this.allConfig[prop].value; + //Fix boolean issue + if (typeof field.value === "boolean") { + changes[prop] = changes[prop] ? "1" : "0"; + } + } + } + } + + return changes; + } + + /** + * + * Deep clone the configuration object + * + * @private + * @param {Configuration} src + * @returns {Configuration} + * + * @memberOf ConfigurationComponent + */ + private clone(src: Configuration): Configuration { + let dest = new Configuration(); + if (!src) { + return dest;//Empty + } + + for (let prop in src) { + if (src[prop]) { + dest[prop] = Object.assign({}, src[prop]); //Deep copy inner object + } + } + + return dest; + } + + /** + * + * Reset the configuration form + * + * @private + * @param {*} changes + * + * @memberOf ConfigurationComponent + */ + private reset(changes: any): void { + if (!this.isEmpty(changes)) { + for (let prop in changes) { + if (this.originalCopy[prop]) { + this.allConfig[prop] = Object.assign({}, this.originalCopy[prop]); + } + } + } else { + //force reset + this.retrieveConfig(); + } + } + + private isEmpty(obj) { + for (let key in obj) { + if (obj.hasOwnProperty(key)) + return false; + } + return true; + } + + private disabled(prop: any): boolean { + return !(prop && prop.editable); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/config/config.module.ts b/src/ui_ng/src/app/config/config.module.ts new file mode 100644 index 000000000..3b1d216c2 --- /dev/null +++ b/src/ui_ng/src/app/config/config.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CoreModule } from '../core/core.module'; +import { SharedModule } from '../shared/shared.module'; + +import { ConfigurationComponent } from './config.component'; +import { ConfigurationService } from './config.service'; +import { ConfigurationAuthComponent } from './auth/config-auth.component'; +import { ConfigurationEmailComponent } from './email/config-email.component'; + +@NgModule({ + imports: [ + CoreModule, + SharedModule + ], + declarations: [ + ConfigurationComponent, + ConfigurationAuthComponent, + ConfigurationEmailComponent], + exports: [ConfigurationComponent], + providers: [ConfigurationService] +}) +export class ConfigurationModule { } \ No newline at end of file diff --git a/src/ui_ng/src/app/config/config.service.ts b/src/ui_ng/src/app/config/config.service.ts new file mode 100644 index 000000000..36e065610 --- /dev/null +++ b/src/ui_ng/src/app/config/config.service.ts @@ -0,0 +1,33 @@ +import { Injectable } from '@angular/core'; +import { Headers, Http, RequestOptions } from '@angular/http'; +import 'rxjs/add/operator/toPromise'; + +import { Configuration } from './config'; + +const configEndpoint = "/api/configurations"; + +@Injectable() +export class ConfigurationService { + private headers: Headers = new Headers({ + "Accept": 'application/json', + "Content-Type": 'application/json' + }); + private options: RequestOptions = new RequestOptions({ + 'headers': this.headers + }); + + constructor(private http: Http) { } + + public getConfiguration(): Promise { + return this.http.get(configEndpoint, this.options).toPromise() + .then(response => response.json() as Configuration) + .catch(error => Promise.reject(error)); + } + + public saveConfiguration(values: any): Promise { + return this.http.put(configEndpoint, JSON.stringify(values), this.options) + .toPromise() + .then(response => response) + .catch(error => Promise.reject(error)); + } +} diff --git a/src/ui_ng/src/app/config/config.ts b/src/ui_ng/src/app/config/config.ts new file mode 100644 index 000000000..dfaf64d85 --- /dev/null +++ b/src/ui_ng/src/app/config/config.ts @@ -0,0 +1,77 @@ +export class StringValueItem { + value: string; + editable: boolean; + + public constructor(v: string, e: boolean) { + this.value = v; + this.editable = e; + } +} + +export class NumberValueItem { + value: number; + editable: boolean; + + public constructor(v: number, e: boolean) { + this.value = v; + this.editable = e; + } +} + +export class BoolValueItem { + value: boolean; + editable: boolean; + + public constructor(v: boolean, e: boolean) { + this.value = v; + this.editable = e; + } +} + +export class Configuration { + auth_mode: StringValueItem; + project_creation_restriction: StringValueItem; + self_registration: BoolValueItem; + ldap_base_dn: StringValueItem; + ldap_filter?: StringValueItem; + ldap_scope: NumberValueItem; + ldap_search_dn?: StringValueItem; + ldap_search_password?: StringValueItem; + ldap_timeout: NumberValueItem; + ldap_uid: StringValueItem; + ldap_url: StringValueItem; + email_host: StringValueItem; + email_identity: StringValueItem; + email_from: StringValueItem; + email_port: NumberValueItem; + email_ssl: BoolValueItem; + email_username?: StringValueItem; + email_password?: StringValueItem; + verify_remote_cert: BoolValueItem; + token_expiration: NumberValueItem; + cfg_expiration: NumberValueItem; + + public constructor() { + this.auth_mode = new StringValueItem("db_auth", true); + this.project_creation_restriction = new StringValueItem("everyone", true); + this.self_registration = new BoolValueItem(false, true); + this.ldap_base_dn = new StringValueItem("", true); + this.ldap_filter = new StringValueItem("", true); + this.ldap_scope = new NumberValueItem(0, true); + this.ldap_search_dn = new StringValueItem("", true); + this.ldap_search_password = new StringValueItem("", true); + this.ldap_timeout = new NumberValueItem(5, true); + this.ldap_uid = new StringValueItem("", true); + this.ldap_url = new StringValueItem("", true); + this.email_host = new StringValueItem("", true); + this.email_identity = new StringValueItem("", true); + this.email_from = new StringValueItem("", true); + this.email_port = new NumberValueItem(25, true); + this.email_ssl = new BoolValueItem(false, true); + this.email_username = new StringValueItem("", true); + this.email_password = new StringValueItem("", true); + this.token_expiration = new NumberValueItem(5, true); + this.cfg_expiration = new NumberValueItem(30, true); + this.verify_remote_cert = new BoolValueItem(false, true); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/config/email/config-email.component.html b/src/ui_ng/src/app/config/email/config-email.component.html new file mode 100644 index 000000000..f95ef09f4 --- /dev/null +++ b/src/ui_ng/src/app/config/email/config-email.component.html @@ -0,0 +1,74 @@ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + {{'CONFIG.SSL_TOOLTIP' | translate}} + + +
+
+
\ No newline at end of file diff --git a/src/ui_ng/src/app/config/email/config-email.component.ts b/src/ui_ng/src/app/config/email/config-email.component.ts new file mode 100644 index 000000000..34e70592a --- /dev/null +++ b/src/ui_ng/src/app/config/email/config-email.component.ts @@ -0,0 +1,25 @@ +import { Component, Input, ViewChild } from '@angular/core'; +import { NgForm } from '@angular/forms'; + +import { Configuration } from '../config'; + +@Component({ + selector: 'config-email', + templateUrl: "config-email.component.html", + styleUrls: ['../config.component.css'] +}) +export class ConfigurationEmailComponent { + @Input("mailConfig") currentConfig: Configuration = new Configuration(); + + @ViewChild("mailConfigFrom") mailForm: NgForm; + + constructor() { } + + private disabled(prop: any): boolean { + return !(prop && prop.editable); + } + + public isValid(): boolean { + return this.mailForm && this.mailForm.valid; + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/global-message/message.component.html b/src/ui_ng/src/app/global-message/message.component.html index 5762d50db..2859e90a1 100644 --- a/src/ui_ng/src/app/global-message/message.component.html +++ b/src/ui_ng/src/app/global-message/message.component.html @@ -1,8 +1,10 @@ -
- - {{globalMessage.message}} - - Sign In -
+
+ + {{message}} + +
+ +
+
\ No newline at end of file diff --git a/src/ui_ng/src/app/global-message/message.component.ts b/src/ui_ng/src/app/global-message/message.component.ts index 6dbe56494..1b6c7d9d5 100644 --- a/src/ui_ng/src/app/global-message/message.component.ts +++ b/src/ui_ng/src/app/global-message/message.component.ts @@ -1,43 +1,102 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +import { TranslateService } from '@ngx-translate/core'; import { Message } from './message'; import { MessageService } from './message.service'; -import { AlertType, dismissInterval } from '../shared/shared.const'; +import { AlertType, dismissInterval, httpStatusCode } from '../shared/shared.const'; @Component({ selector: 'global-message', templateUrl: 'message.component.html' }) -export class MessageComponent { - +export class MessageComponent implements OnInit { + @Input() isAppLevel: boolean; - globalMessage: Message = new Message(); globalMessageOpened: boolean; - - constructor(messageService: MessageService) { - - messageService.appLevelAnnounced$.subscribe( - message=>{ - this.globalMessageOpened = this.isAppLevel && true; - this.globalMessage = message; - console.log('received app level message:' + message); - } - ) - - messageService.messageAnnounced$.subscribe( - message=>{ - this.globalMessageOpened = !this.isAppLevel && true; - this.globalMessage = message; - console.log('received message:' + message); - } - ); - - // Make the message alert bar dismiss after several intervals. - setInterval(()=>this.onClose(), dismissInterval); + messageText: string = ""; + + constructor( + private messageService: MessageService, + private router: Router, + private translate: TranslateService) { } + + ngOnInit(): void { + //Only subscribe application level message + if (this.isAppLevel) { + this.messageService.appLevelAnnounced$.subscribe( + message => { + this.globalMessageOpened = true; + this.globalMessage = message; + this.messageText = message.message; + + this.translateMessage(message); + } + ) + } else { + //Only subscribe general messages + this.messageService.messageAnnounced$.subscribe( + message => { + this.globalMessageOpened = true; + this.globalMessage = message; + this.messageText = message.message; + + this.translateMessage(message); + + // Make the message alert bar dismiss after several intervals. + //Only for this case + setInterval(() => this.onClose(), dismissInterval); + } + ); + } } - + + //Translate or refactor the message shown to user + translateMessage(msg: Message): void { + if (!msg) { + return; + } + + let key = ""; + if (!msg.message) { + key = "UNKNOWN_ERROR"; + } else { + key = typeof msg.message === "string" ? msg.message.trim() : msg.message; + if (key === "") { + key = "UNKNOWN_ERROR"; + } + } + + //Override key for HTTP 401 and 403 + if (this.globalMessage.statusCode === httpStatusCode.Unauthorized) { + key = "UNAUTHORIZED_ERROR"; + } + + if (this.globalMessage.statusCode === httpStatusCode.Forbidden) { + key = "FORBIDDEN_ERROR"; + } + + this.translate.get(key).subscribe((res: string) => this.messageText = res); + } + + public get needAuth(): boolean { + return this.globalMessage ? + (this.globalMessage.statusCode === httpStatusCode.Unauthorized) || + (this.globalMessage.statusCode === httpStatusCode.Forbidden) : false; + } + + //Show message text + public get message(): string { + return this.messageText; + } + + signIn(): void { + this.router.navigate(['sign-in']); + } + onClose() { this.globalMessageOpened = false; } diff --git a/src/ui_ng/src/app/global-message/message.ts b/src/ui_ng/src/app/global-message/message.ts index 6f6167f1a..0ba400baa 100644 --- a/src/ui_ng/src/app/global-message/message.ts +++ b/src/ui_ng/src/app/global-message/message.ts @@ -4,6 +4,7 @@ export class Message { statusCode: number; message: string; alertType: AlertType; + isAppLevel: boolean = false; get type(): string { switch (this.alertType) { diff --git a/src/ui_ng/src/app/harbor-routing.module.ts b/src/ui_ng/src/app/harbor-routing.module.ts index 1282b5c29..80779aab8 100644 --- a/src/ui_ng/src/app/harbor-routing.module.ts +++ b/src/ui_ng/src/app/harbor-routing.module.ts @@ -4,16 +4,101 @@ import { RouterModule, Routes } from '@angular/router'; import { SignInComponent } from './account/sign-in/sign-in.component'; import { HarborShellComponent } from './base/harbor-shell/harbor-shell.component'; +import { ProjectComponent } from './project/project.component'; +import { UserComponent } from './user/user.component'; +import { ReplicationManagementComponent } from './replication/replication-management/replication-management.component'; -import { BaseRoutingResolver } from './base/base-routing-resolver.service'; +import { TotalReplicationComponent } from './replication/total-replication/total-replication.component'; +import { DestinationComponent } from './replication/destination/destination.component'; + +import { ProjectDetailComponent } from './project/project-detail/project-detail.component'; + +import { RepositoryComponent } from './repository/repository.component'; +import { ReplicationComponent } from './replication/replication.component'; +import { MemberComponent } from './project/member/member.component'; +import { AuditLogComponent } from './log/audit-log.component'; + +import { BaseRoutingResolver } from './shared/route/base-routing-resolver.service'; +import { ProjectRoutingResolver } from './project/project-routing-resolver.service'; +import { SystemAdminGuard } from './shared/route/system-admin-activate.service'; +import { SignUpComponent } from './account/sign-up/sign-up.component'; +import { ResetPasswordComponent } from './account/password/reset-password.component'; +import { RecentLogComponent } from './log/recent-log.component'; +import { ConfigurationComponent } from './config/config.component'; +import { PageNotFoundComponent } from './shared/not-found/not-found.component' const harborRoutes: Routes = [ + { path: '', redirectTo: '/harbor', pathMatch: 'full' }, + { path: 'sign-in', component: SignInComponent }, + { path: 'sign-up', component: SignUpComponent}, + { path: 'reset_password', component: ResetPasswordComponent}, { path: 'harbor', - component: HarborShellComponent + component: HarborShellComponent, + resolve: { + authResolver: BaseRoutingResolver + }, + children: [ + { + path: 'projects', + component: ProjectComponent + }, + { + path: 'logs', + component: RecentLogComponent + }, + { + path: 'users', + component: UserComponent, + canActivate: [SystemAdminGuard] + }, + { + path: 'replications', + component: ReplicationManagementComponent, + canActivate: [SystemAdminGuard], + children: [ + { + path: 'rules', + component: TotalReplicationComponent + }, + { + path: 'endpoints', + component: DestinationComponent + } + ] + }, + { + path: 'projects/:id', + component: ProjectDetailComponent, + resolve: { + projectResolver: ProjectRoutingResolver + }, + children: [ + { + path: 'repository', + component: RepositoryComponent + }, + { + path: 'replication', + component: ReplicationComponent + }, + { + path: 'member', + component: MemberComponent + }, + { + path: 'log', + component: AuditLogComponent + } + ] + }, + { + path: 'configs', + component: ConfigurationComponent + } + ] }, - { path: '', redirectTo: '/harbor', pathMatch: 'full' }, - { path: 'sign-in', component: SignInComponent } + { path: "**", component: PageNotFoundComponent} ]; @NgModule({ diff --git a/src/ui_ng/src/app/i18n/lang/en-lang.json b/src/ui_ng/src/app/i18n/lang/en-lang.json deleted file mode 100644 index 1e6463fc9..000000000 --- a/src/ui_ng/src/app/i18n/lang/en-lang.json +++ /dev/null @@ -1,133 +0,0 @@ -{ - "LOG_IN": "LOG IN", - "SIGN_UP": "Sign up for an account", - "BUTTON": { - "CANCEL": "Cancel", - "OK": "Ok", - "DELETE": "DELETE" - }, - "TOOLTIP": { - "EMAIL": "Email should be a valid email address like name@example.com", - "USER_NAME": "Can not contain \"~#$% and max length should be less than 20", - "FULL_NAME": "Max length should be less than 20", - "COMMENT": "Length of comment should be less than 20", - "CURRENT_PWD": "Current password is Required", - "PASSWORD": "Password should be at least 7 characters with 1 uppercase, 1 lowercase letter and 1 number", - "CONFIRM_PWD": "Password input here should be same with above password" - }, - "PLACEHOLDER": { - "CURRENT_PWD": "Enter current password", - "NEW_PWD": "Enter new password", - "CONFIRM_PWD": "Confirm new password", - "USER_NAME": "Enter username", - "MAIL": "Enter email address", - "FULL_NAME": "Enter full name" - }, - "PROFILE": { - "TITLE": "User Profile", - "USER_NAME": "Username", - "EMAIL": "Email", - "FULL_NAME": "Full name", - "COMMENT": "Comments", - "PASSWORD": "Password" - }, - "CHANGE_PWD": { - "TITLE": "Change Password", - "CURRENT_PWD": "Current Password", - "NEW_PWD": "New Password", - "CONFIRM_PWD": "Confirm Password" - }, - "ACCOUNT_SETTINGS": { - "PROFILE": "User Profile", - "CHANGE_PWD": "Change Password", - "ABOUT": "About", - "LOGOUT": "Log Out" - }, - "GLOBAL_SEARCH": { - "PLACEHOLDER": "Search Harbor..." - }, - "SIDE_NAV": { - "PROJECTS": "Projects", - "SYSTEM_MGMT": { - "NAME": "System Managements", - "USERS": "Users", - "REPLICATIONS": "Replications", - "CONFIGS": "Configurations" - } - }, - "USER": { - "ADD_ACTION": "USER", - "ENABLE_ADMIN_ACTION": "Enable administrator", - "DISABLE_ADMIN_ACTION": "Disable administrator", - "DEL_ACTION": "Delete", - "FILTER_PLACEHOLDER": "Filter users", - "COLUMN_NAME": "Name", - "COLUMN_ADMIN": "Administrator", - "COLUMN_EMAIL": "Email", - "COLUMN_REG_NAME": "Registration time", - "IS_ADMIN": "Yes", - "IS_NOT_ADMIN": "No", - "ADD_USER_TITLE": "Add User" - }, - "PROJECT": { - "PROJECTS": "Projects", - "NAME": "Project Name", - "PUBLIC_OR_PRIVATE": "Public/Private", - "REPO_COUNT": "Repositories Count", - "CREATION_TIME": "Creation Time", - "DESCRIPTION": "Description", - "PUBLIC": "Public", - "PRIVATE": "Private", - "MAKE": "Make", - "NEW_POLICY": "New Policy", - "DELETE": "Delete", - "MY_PROJECTS": "My Projects", - "PUBLIC_PROJECTS": "Public Projects", - "NEW_PROJECT": "New Project", - "NAME_ALREADY_EXISTS": "Project name already exists.", - "NAME_IS_ILLEGAL": "Project name is illegal.", - "UNKNOWN_ERROR": "Unknown error occurred while creating project.", - "ITEMS": "item(s)", - "DELETE_TITLE": "Delete Project", - "DELETE_MESSAGE": "Are you sure to delete the project?", - "FILTER_PLACEHOLDER": "Filter Projects" - }, - "PROJECT_DETAIL": { - "REPOSITORIES": "Repositories", - "REPLICATION": "Replication", - "USERS": "Users", - "LOGS": "Logs" - }, - "MEMBER": { - "NEW_MEMBER": "New Member", - "NAME": "Name", - "ROLE": "Role", - "PROJECT_ADMIN": "Project Admin", - "DEVELOPER": "Developer", - "GUEST": "Guest", - "DELETE": "Delete", - "ITEMS": "item(s)", - "ACTIONS": "Actions", - "USERNAME_DOES_NOT_EXISTS": "Username does not exist.", - "USERNAME_ALREADY_EXISTS": "Username already exists.", - "UNKNOWN_ERROR": "Unknown error occurred while adding member.", - "FILTER_PLACEHOLDER": "Filter Members" - }, - "AUDIT_LOG": { - "USERNAME": "Username", - "REPOSITORY_NAME": "Repository Name", - "TAGS": "Tags", - "OPERATION": "Operation", - "TIMESTAMP": "Timestamp", - "ALL_OPERATIONS": "All Operations", - "PULL": "Pull", - "PUSH": "Push", - "CREATE": "Create", - "DELETE": "Delete", - "OTHERS": "Others", - "ADVANCED": "Advanced", - "SIMPLE": "Simple", - "ITEMS": "item(s)", - "FILTER_PLACEHOLDER": "Filter Logs" - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/i18n/lang/zh-lang.json b/src/ui_ng/src/app/i18n/lang/zh-lang.json deleted file mode 100644 index 7098a8712..000000000 --- a/src/ui_ng/src/app/i18n/lang/zh-lang.json +++ /dev/null @@ -1,134 +0,0 @@ -{ - "LOG_IN": "登录", - "SIGN_UP": "注册账号", - "BUTTON": { - "CANCEL": "取消", - "OK": "确定", - "DELETE": "删除" - }, - "TOOLTIP": { - "EMAIL": "请使用正确的邮箱地址，比如name@example.com", - "USER_NAME": "不能包含\"~#$%特殊字符且长度不能超过20", - "FULL_NAME": "长度不能超过20", - "COMMENT": "长度不能超过20", - "CURRENT_PWD": "当前密码必需", - "PASSWORD": "密码长度至少为7且需包含至少一个大写字符，一个小写字符和一个数字", - "CONFIRM_PWD": "当前密码须与上述输入密码一致" - }, - "PLACEHOLDER": { - "CURRENT_PWD": "输入当前密码", - "NEW_PWD": "输入新密码", - "CONFIRM_PWD": "确认新密码", - "USER_NAME": "输入用户名称", - "MAIL": "输入邮箱地址", - "FULL_NAME": "输入全名" - }, - "PROFILE": { - "TITLE": "用户设置", - "USER_NAME": "用户名", - "EMAIL": "邮箱", - "FULL_NAME": "全名", - "COMMENT": "注释", - "PASSWORD": "密码" - }, - "CHANGE_PWD": { - "TITLE": "修改密码", - "CURRENT_PWD": "当前密码", - "NEW_PWD": "新密码", - "CONFIRM_PWD": "确认密码" - }, - "ACCOUNT_SETTINGS": { - "PROFILE": "用户设置", - "CHANGE_PWD": "修改密码", - "ABOUT": "关于", - "LOGOUT": "退出" - }, - "GLOBAL_SEARCH": { - "PLACEHOLDER": "搜索 Harbor..." - }, - "SIDE_NAV": { - "PROJECTS": "项目", - "SYSTEM_MGMT": { - "NAME": "系统管理", - "USERS": "用户管理", - "REPLICATIONS": "复制管理", - "CONFIGS": "配置管理" - } - }, - "USER": { - "ADD_ACTION": "用户", - "ENABLE_ADMIN_ACTION": "设置为管理员", - "DISABLE_ADMIN_ACTION": "取消管理员", - "DEL_ACTION": "删除", - "FILTER_PLACEHOLDER": "过滤用户", - "COLUMN_NAME": "用户名", - "COLUMN_ADMIN": "管理员", - "COLUMN_EMAIL": "邮件", - "COLUMN_REG_NAME": "注册时间", - "IS_ADMIN": "是", - "IS_NOT_ADMIN": "否", - "ADD_USER_TITLE": "添加用户" - }, - "PROJECT": { - "PROJECTS": "项目", - "NAME": "项目名称", - "PUBLIC_OR_PRIVATE": "公开/私有", - "REPO_COUNT": "镜像仓库数", - "CREATION_TIME": "创建时间", - "DESCRIPTION": "描述", - "PUBLIC": "公开", - "PRIVATE": "私有", - "MAKE": "设为", - "NEW_POLICY": "新建策略", - "DELETE": "删除", - "MY_PROJECTS": "我的项目", - "PUBLIC_PROJECTS": "公开项目", - "NEW_PROJECT": "新建项目", - "NAME_ALREADY_EXISTS": "项目名称已存在。", - "NAME_IS_ILLEGAL": "项目名称非法。", - "UNKNOWN_ERROR": "创建项目时发生未知错误。", - "ITEMS": "条记录", - "DELETE_TITLE": "删除项目", - "DELETE_MESSAGE": "确认删除项目吗？", - "FILTER_PLACEHOLDER": "过滤项目" - }, - "PROJECT_DETAIL": { - "REPOSITORIES": "镜像仓库", - "REPLICATION": "复制", - "USERS": "用户", - "LOGS": "日志" - }, - "MEMBER": { - "NEW_MEMBER": "新增成员", - "NAME": "姓名", - "ROLE": "角色", - "SYS_ADMIN": "系统管理员", - "PROJECT_ADMIN": "项目管理员", - "DEVELOPER": "开发人员", - "GUEST": "访客", - "DELETE": "删除", - "ITEMS": "条记录", - "ACTIONS": "操作", - "USERNAME_DOES_NOT_EXISTS": "用户名不存在", - "USERNAME_ALREADY_EXISTS": "用户名已存在", - "UNKNOWN_ERROR": "添加成员时发生未知错误。", - "FILTER_PLACEHOLDER": "过滤成员" - }, - "AUDIT_LOG": { - "USERNAME": "用户名", - "REPOSITORY_NAME": "镜像名称", - "TAGS": "标签", - "OPERATION": "操作", - "TIMESTAMP": "时间戳", - "ALL_OPERATIONS": "所有操作", - "PULL": "Pull", - "PUSH": "Push", - "CREATE": "Create", - "DELETE": "Delete", - "OTHERS": "其他", - "ADVANCED": "高级检索", - "SIMPLE": "简单检索", - "ITEMS": "条记录", - "FILTER_PLACEHOLDER": "过滤日志" - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/i18n/missing-trans.handler.ts b/src/ui_ng/src/app/i18n/missing-trans.handler.ts index 99600306f..eb7be632a 100644 --- a/src/ui_ng/src/app/i18n/missing-trans.handler.ts +++ b/src/ui_ng/src/app/i18n/missing-trans.handler.ts @@ -1,8 +1,8 @@ -import {MissingTranslationHandler, MissingTranslationHandlerParams} from '@ngx-translate/core'; +import { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core'; export class MyMissingTranslationHandler implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { const missingText = "{Miss Harbor Text}"; - return missingText; + return params.key || missingText; } } \ No newline at end of file diff --git a/src/ui_ng/src/app/log/audit-log.component.html b/src/ui_ng/src/app/log/audit-log.component.html index cb65b61be..046394238 100644 --- a/src/ui_ng/src/app/log/audit-log.component.html +++ b/src/ui_ng/src/app/log/audit-log.component.html @@ -5,7 +5,8 @@
- + +
diff --git a/src/ui_ng/src/app/log/audit-log.component.ts b/src/ui_ng/src/app/log/audit-log.component.ts index cab83e24b..d20de2ada 100644 --- a/src/ui_ng/src/app/log/audit-log.component.ts +++ b/src/ui_ng/src/app/log/audit-log.component.ts @@ -136,4 +136,7 @@ export class AuditLogComponent implements OnInit { } this.doSearchByOptions(); } + refresh(): void { + this.retrieve(this.queryParam); + } } \ No newline at end of file diff --git a/src/ui_ng/src/app/log/audit-log.service.ts b/src/ui_ng/src/app/log/audit-log.service.ts index ce0ac3e7a..ce4002710 100644 --- a/src/ui_ng/src/app/log/audit-log.service.ts +++ b/src/ui_ng/src/app/log/audit-log.service.ts @@ -10,26 +10,39 @@ import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; import 'rxjs/add/observable/throw'; -export const urlPrefix = ''; +export const logEndpoint = "/api/logs"; @Injectable() export class AuditLogService extends BaseService { - + private httpOptions = new RequestOptions({ + headers: new Headers({ + "Content-Type": 'application/json', + "Accept": 'application/json' + }) + }); + constructor(private http: Http) { super(); } listAuditLogs(queryParam: AuditLog): Observable { return this.http - .post(urlPrefix + `/api/projects/${queryParam.project_id}/logs/filter`, { - begin_timestamp: queryParam.begin_timestamp, - end_timestamp: queryParam.end_timestamp, - keywords: queryParam.keywords, - operation: queryParam.operation, - project_id: queryParam.project_id, - username: queryParam.username }) - .map(response=>response.json() as AuditLog[]) - .catch(error=>this.handleError(error)); + .post(`/api/projects/${queryParam.project_id}/logs/filter`, { + begin_timestamp: queryParam.begin_timestamp, + end_timestamp: queryParam.end_timestamp, + keywords: queryParam.keywords, + operation: queryParam.operation, + project_id: queryParam.project_id, + username: queryParam.username + }) + .map(response => response.json() as AuditLog[]) + .catch(error => this.handleError(error)); + } + + getRecentLogs(lines: number): Observable { + return this.http.get(logEndpoint + "?lines=" + lines, this.httpOptions) + .map(response => response.json() as AuditLog[]) + .catch(error => this.handleError(error)); } } \ No newline at end of file diff --git a/src/ui_ng/src/app/log/log.module.ts b/src/ui_ng/src/app/log/log.module.ts index 307df9dea..78a0bdb31 100644 --- a/src/ui_ng/src/app/log/log.module.ts +++ b/src/ui_ng/src/app/log/log.module.ts @@ -2,10 +2,16 @@ import { NgModule } from '@angular/core'; import { AuditLogComponent } from './audit-log.component'; import { SharedModule } from '../shared/shared.module'; import { AuditLogService } from './audit-log.service'; +import { RecentLogComponent } from './recent-log.component'; + @NgModule({ - imports: [ SharedModule ], - declarations: [ AuditLogComponent ], - providers: [ AuditLogService ], - exports: [ AuditLogComponent ] + imports: [SharedModule], + declarations: [ + AuditLogComponent, + RecentLogComponent], + providers: [AuditLogService], + exports: [ + AuditLogComponent, + RecentLogComponent] }) -export class LogModule {} \ No newline at end of file +export class LogModule { } \ No newline at end of file diff --git a/src/ui_ng/src/app/log/recent-log.component.css b/src/ui_ng/src/app/log/recent-log.component.css new file mode 100644 index 000000000..b92cb32ec --- /dev/null +++ b/src/ui_ng/src/app/log/recent-log.component.css @@ -0,0 +1,32 @@ +.h2-log-override { + margin-top: 0px !important; +} + +.filter-log { + float: right; + margin-right: 24px; + position: relative; + top: 8px; +} + +.action-head-pos { + position: relative; + top: 20px; +} + +.refresh-btn { + position: absolute; + right: -4px; + top: 8px; + cursor: pointer; +} + +.custom-lines-button { + padding: 0px !important; + min-width: 25px !important; +} + +.lines-button-toggole { + font-size: 16px; + text-decoration: underline; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/log/recent-log.component.html b/src/ui_ng/src/app/log/recent-log.component.html new file mode 100644 index 000000000..10bfe1963 --- /dev/null +++ b/src/ui_ng/src/app/log/recent-log.component.html @@ -0,0 +1,36 @@ +
+

{{'SIDE_NAV.LOGS' | translate}}

+
+ + + + + + + + + + + + + + +
+
+ + {{'AUDIT_LOG.USERNAME' | translate}} + {{'AUDIT_LOG.REPOSITORY_NAME' | translate}} + {{'AUDIT_LOG.TAGS' | translate}} + {{'AUDIT_LOG.OPERATION' | translate}} + {{'AUDIT_LOG.TIMESTAMP' | translate}} + + {{l.username}} + {{l.repo_name}} + {{l.repo_tag}} + {{l.operation}} + {{formatDateTime(l.op_time)}} + + {{ (recentLogs ? recentLogs.length : 0) }} {{'AUDIT_LOG.ITEMS' | translate}} + +
+
\ No newline at end of file diff --git a/src/ui_ng/src/app/log/recent-log.component.ts b/src/ui_ng/src/app/log/recent-log.component.ts new file mode 100644 index 000000000..b0bbeb474 --- /dev/null +++ b/src/ui_ng/src/app/log/recent-log.component.ts @@ -0,0 +1,96 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +import { AuditLog } from './audit-log'; +import { SessionUser } from '../shared/session-user'; + +import { AuditLogService } from './audit-log.service'; +import { SessionService } from '../shared/session.service'; +import { MessageService } from '../global-message/message.service'; +import { AlertType } from '../shared/shared.const'; +import { errorHandler, accessErrorHandler } from '../shared/shared.utils'; + +@Component({ + selector: 'recent-log', + templateUrl: './recent-log.component.html', + styleUrls: ['recent-log.component.css'] +}) + +export class RecentLogComponent implements OnInit { + private sessionUser: SessionUser = null; + private recentLogs: AuditLog[]; + private logsCache: AuditLog[]; + private onGoing: boolean = false; + private lines: number = 10; //Support 10, 25 and 50 + + constructor( + private session: SessionService, + private msgService: MessageService, + private logService: AuditLogService) { + this.sessionUser = this.session.getCurrentUser();//Initialize session + } + + ngOnInit(): void { + this.retrieveLogs(); + } + + public get inProgress(): boolean { + return this.onGoing; + } + + public setLines(lines: number): void { + this.lines = lines; + if (this.lines < 10) { + this.lines = 10; + } + + this.retrieveLogs(); + } + + public doFilter(terms: string): void { + if (terms.trim() === "") { + this.recentLogs = this.logsCache.filter(log => log.username != ""); + return; + } + + this.recentLogs = this.logsCache.filter(log => this.isMatched(terms, log)); + } + + public refresh(): void { + this.retrieveLogs(); + } + + public formatDateTime(dateTime: string){ + let dt: Date = new Date(dateTime); + return dt.toLocaleString(); + } + + private retrieveLogs(): void { + if (this.lines < 10) { + this.lines = 10; + } + + this.onGoing = true; + this.logService.getRecentLogs(this.lines) + .subscribe( + response => { + this.onGoing = false; + this.logsCache = response; //Keep the data + this.recentLogs = this.logsCache.filter(log => log.username != "");//To display + }, + error => { + this.onGoing = false; + if (!accessErrorHandler(error, this.msgService)) { + this.msgService.announceMessage(error.status, errorHandler(error), AlertType.DANGER); + } + } + ); + } + + private isMatched(terms: string, log: AuditLog): boolean { + let reg = new RegExp('.*' + terms + '.*', 'i'); + return reg.test(log.username) || + reg.test(log.repo_name) || + reg.test(log.operation); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/project/action-project/action-project.component.html b/src/ui_ng/src/app/project/action-project/action-project.component.html deleted file mode 100644 index 1df167df6..000000000 --- a/src/ui_ng/src/app/project/action-project/action-project.component.html +++ /dev/null @@ -1,11 +0,0 @@ - - -
- {{'PROJECT.NEW_POLICY' | translate}} - {{'PROJECT.MAKE' | translate}}{{(project.public === 0 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}} -
- {{'PROJECT.DELETE' | translate}} -
- \ No newline at end of file diff --git a/src/ui_ng/src/app/project/action-project/action-project.component.ts b/src/ui_ng/src/app/project/action-project/action-project.component.ts deleted file mode 100644 index 562192f8a..000000000 --- a/src/ui_ng/src/app/project/action-project/action-project.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { Project } from '../project'; -import { ProjectService } from '../project.service'; - -import { TranslateService } from '@ngx-translate/core'; -import { DeletionDialogService } from '../../shared/deletion-dialog/deletion-dialog.service'; -import { DeletionMessage } from '../../shared/deletion-dialog/deletion-message'; - -@Component({ - selector: 'action-project', - templateUrl: 'action-project.component.html' -}) -export class ActionProjectComponent { - - @Output() togglePublic = new EventEmitter(); - @Output() deleteProject = new EventEmitter(); - - @Input() project: Project; - - constructor(private projectService: ProjectService, - private deletionDialogService: DeletionDialogService, - private translateService: TranslateService) { - deletionDialogService.deletionConfirm$.subscribe(project=>this.deleteProject.emit(project)); - } - - toggle() { - if(this.project) { - this.project.public === 0 ? this.project.public = 1 : this.project.public = 0; - this.togglePublic.emit(this.project); - } - } - - delete() { - // if(this.project) { - // this.deleteProject.emit(this.project); - // } - let deletionMessage = new DeletionMessage('Delete Project', 'Do you confirm to delete project?', this.project); - this.deletionDialogService.openComfirmDialog(deletionMessage); - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/project/create-project/create-project.component.html b/src/ui_ng/src/app/project/create-project/create-project.component.html index 63f0954a8..59bdfd416 100644 --- a/src/ui_ng/src/app/project/create-project/create-project.component.html +++ b/src/ui_ng/src/app/project/create-project/create-project.component.html @@ -1,14 +1,24 @@

{{'PROJECT.NEW_PROJECT' | translate}}

-
+
+ +
+ + {{errorMessage}} + +
+
-
@@ -24,6 +34,6 @@
- +
diff --git a/src/ui_ng/src/app/project/create-project/create-project.component.ts b/src/ui_ng/src/app/project/create-project/create-project.component.ts index 819393bc0..35a0307cb 100644 --- a/src/ui_ng/src/app/project/create-project/create-project.component.ts +++ b/src/ui_ng/src/app/project/create-project/create-project.component.ts @@ -20,8 +20,8 @@ export class CreateProjectComponent { project: Project = new Project(); createProjectOpened: boolean; + errorMessageOpened: boolean; errorMessage: string; - hasError: boolean; @Output() create = new EventEmitter(); @@ -30,7 +30,6 @@ export class CreateProjectComponent { private translateService: TranslateService) {} onSubmit() { - this.hasError = false; this.projectService .createProject(this.project.name, this.project.public ? 1 : 0) .subscribe( @@ -39,7 +38,7 @@ export class CreateProjectComponent { this.createProjectOpened = false; }, error=>{ - this.hasError = true; + this.errorMessageOpened = true; if (error instanceof Response) { switch(error.status) { case 409: @@ -59,9 +58,15 @@ export class CreateProjectComponent { } newProject() { - this.hasError = false; this.project = new Project(); this.createProjectOpened = true; + this.errorMessageOpened = false; + this.errorMessage = ''; + } + + onErrorMessageClose(): void { + this.errorMessageOpened = false; + this.errorMessage = ''; } } diff --git a/src/ui_ng/src/app/project/list-project/list-project.component.html b/src/ui_ng/src/app/project/list-project/list-project.component.html index 5c3d870f3..68ff6382a 100644 --- a/src/ui_ng/src/app/project/list-project/list-project.component.html +++ b/src/ui_ng/src/app/project/list-project/list-project.component.html @@ -15,9 +15,12 @@ {{p.creation_time}} {{p.description}} - - - + + {{'PROJECT.NEW_POLICY' | translate}} + {{'PROJECT.MAKE' | translate}} {{(p.public === 0 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}} +
+ {{'PROJECT.DELETE' | translate}} + {{ (projects ? projects.length : 0) }} {{'PROJECT.ITEMS' | translate}} diff --git a/src/ui_ng/src/app/project/member/add-member/add-member.component.html b/src/ui_ng/src/app/project/member/add-member/add-member.component.html index de11bc85c..389efb505 100644 --- a/src/ui_ng/src/app/project/member/add-member/add-member.component.html +++ b/src/ui_ng/src/app/project/member/add-member/add-member.component.html @@ -1,14 +1,21 @@

{{'MEMBER.NEW_MEMBER' | translate}}

- +
+ +
+ + {{errorMessage}} + +
+
-
diff --git a/src/ui_ng/src/app/project/member/add-member/add-member.component.ts b/src/ui_ng/src/app/project/member/add-member/add-member.component.ts index 94e8bf0fb..6a14dbc83 100644 --- a/src/ui_ng/src/app/project/member/add-member/add-member.component.ts +++ b/src/ui_ng/src/app/project/member/add-member/add-member.component.ts @@ -18,7 +18,9 @@ export class AddMemberComponent { member: Member = new Member(); addMemberOpened: boolean; errorMessage: string; - hasError: boolean; + + errorMessageOpened: boolean; + @Input() projectId: number; @Output() added = new EventEmitter(); @@ -28,7 +30,6 @@ export class AddMemberComponent { private translateService: TranslateService) {} onSubmit(): void { - this.hasError = false; console.log('Adding member:' + JSON.stringify(this.member)); this.memberService .addMember(this.projectId, this.member.username, this.member.role_id) @@ -39,7 +40,7 @@ export class AddMemberComponent { this.addMemberOpened = false; }, error=>{ - this.hasError = true; + this.errorMessageOpened = true; if (error instanceof Response) { switch(error.status){ case 404: @@ -59,13 +60,17 @@ export class AddMemberComponent { console.log('Failed to add member of project:' + this.projectId, ' with error:' + error); } ); - - } openAddMemberModal(): void { - this.hasError = false; + this.errorMessageOpened = false; + this.errorMessage = ''; this.member = new Member(); this.addMemberOpened = true; } + + onErrorMessageClose(): void { + this.errorMessageOpened = false; + this.errorMessage = ''; + } } \ No newline at end of file diff --git a/src/ui_ng/src/app/project/member/member.component.html b/src/ui_ng/src/app/project/member/member.component.html index 82e305bfd..b628a5e77 100644 --- a/src/ui_ng/src/app/project/member/member.component.html +++ b/src/ui_ng/src/app/project/member/member.component.html @@ -1,38 +1,34 @@
-
-
-
- - -
-
- -
-
- - {{'MEMBER.NAME' | translate}} - {{'MEMBER.ROLE' | translate}} - {{'MEMBER.ACTIONS' | translate}} - - {{u.username}} - {{roleInfo[u.role_id] | translate}} - - - -
- {{'MEMBER.PROJECT_ADMIN' | translate}} - {{'MEMBER.DEVELOPER' | translate}} - {{'MEMBER.GUEST' | translate}} -
- {{'MEMBER.DELETE' | translate}} +
+
+
+ +
- - - - {{ (members ? members.length : 0) }} {{'MEMBER.ITEMS' | translate}} - -
+
+ + + + +
+
+ + {{'MEMBER.NAME' | translate}} + {{'MEMBER.ROLE' | translate}} + + {{u.username}} + + {{roleInfo[u.role_id] | translate}} + + {{'MEMBER.PROJECT_ADMIN' | translate}} + {{'MEMBER.DEVELOPER' | translate}} + {{'MEMBER.GUEST' | translate}} +
+ {{'MEMBER.DELETE' | translate}} + + + + {{ (members ? members.length : 0) }} {{'MEMBER.ITEMS' | translate}} + +
\ No newline at end of file diff --git a/src/ui_ng/src/app/project/member/member.component.ts b/src/ui_ng/src/app/project/member/member.component.ts index c2319be27..2b5201868 100644 --- a/src/ui_ng/src/app/project/member/member.component.ts +++ b/src/ui_ng/src/app/project/member/member.component.ts @@ -9,11 +9,11 @@ import { MemberService } from './member.service'; import { AddMemberComponent } from './add-member/add-member.component'; import { MessageService } from '../../global-message/message.service'; -import { AlertType } from '../../shared/shared.const'; +import { AlertType, DeletionTargets } from '../../shared/shared.const'; import { DeletionDialogService } from '../../shared/deletion-dialog/deletion-dialog.service'; import { DeletionMessage } from '../../shared/deletion-dialog/deletion-message'; - +import { SessionService } from '../../shared/session.service'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/switchMap'; @@ -21,13 +21,13 @@ import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; import 'rxjs/add/observable/throw'; -export const roleInfo: {} = { 1: 'MEMBER.PROJECT_ADMIN', 2: 'MEMBER.DEVELOPER', 3: 'MEMBER.GUEST'}; +export const roleInfo: {} = { 1: 'MEMBER.PROJECT_ADMIN', 2: 'MEMBER.DEVELOPER', 3: 'MEMBER.GUEST' }; @Component({ templateUrl: 'member.component.html' }) export class MemberComponent implements OnInit { - + currentUser: SessionUser; members: Member[]; projectId: number; @@ -36,34 +36,37 @@ export class MemberComponent implements OnInit { @ViewChild(AddMemberComponent) addMemberComponent: AddMemberComponent; - constructor(private route: ActivatedRoute, private router: Router, - private memberService: MemberService, private messageService: MessageService, - private deletionDialogService: DeletionDialogService) { + constructor(private route: ActivatedRoute, private router: Router, + private memberService: MemberService, private messageService: MessageService, + private deletionDialogService: DeletionDialogService, + session:SessionService) { //Get current user from registered resolver. - this.route.data.subscribe(data=>this.currentUser = data['memberResolver']); - deletionDialogService.deletionConfirm$.subscribe(userId=>{ - this.memberService - .deleteMember(this.projectId, userId) - .subscribe( - response=>{ - console.log('Successful change role with user ' + userId); + this.currentUser = session.getCurrentUser(); + deletionDialogService.deletionConfirm$.subscribe(message => { + if (message && message.targetId === DeletionTargets.PROJECT_MEMBER) { + this.memberService + .deleteMember(this.projectId, message.data) + .subscribe( + response => { + console.log('Successful change role with user ' + message.data); this.retrieve(this.projectId, ''); }, - error => this.messageService.announceMessage(error.status, 'Failed to change role with user ' + userId, AlertType.DANGER) - ); - }) + error => this.messageService.announceMessage(error.status, 'Failed to change role with user ' + message.data, AlertType.DANGER) + ); + } + }); } - retrieve(projectId:number, username: string) { + retrieve(projectId: number, username: string) { this.memberService - .listMembers(projectId, username) - .subscribe( - response=>this.members = response, - error=>{ - this.router.navigate(['/harbor', 'projects']); - this.messageService.announceMessage(error.status, 'Failed to get project member with project ID:' + projectId, AlertType.DANGER); - } - ); + .listMembers(projectId, username) + .subscribe( + response => this.members = response, + error => { + this.router.navigate(['/harbor', 'projects']); + this.messageService.announceMessage(error.status, 'Failed to get project member with project ID:' + projectId, AlertType.DANGER); + } + ); } ngOnInit() { @@ -77,29 +80,39 @@ export class MemberComponent implements OnInit { openAddMemberModal() { this.addMemberComponent.openAddMemberModal(); } - + addedMember() { this.retrieve(this.projectId, ''); } changeRole(userId: number, roleId: number) { this.memberService - .changeMemberRole(this.projectId, userId, roleId) - .subscribe( - response=>{ - console.log('Successful change role with user ' + userId + ' to roleId ' + roleId); - this.retrieve(this.projectId, ''); - }, - error => this.messageService.announceMessage(error.status, 'Failed to change role with user ' + userId + ' to roleId ' + roleId, AlertType.DANGER) - ); + .changeMemberRole(this.projectId, userId, roleId) + .subscribe( + response => { + console.log('Successful change role with user ' + userId + ' to roleId ' + roleId); + this.retrieve(this.projectId, ''); + }, + error => this.messageService.announceMessage(error.status, 'Failed to change role with user ' + userId + ' to roleId ' + roleId, AlertType.DANGER) + ); } deleteMember(userId: number) { - let deletionMessage: DeletionMessage = new DeletionMessage('Delete Member', 'Confirm to delete this member?', userId); + let deletionMessage: DeletionMessage = new DeletionMessage( + 'MEMBER.DELETION_TITLE', + 'MEMBER.DELETION_SUMMARY', + userId+"", + userId, + DeletionTargets.PROJECT_MEMBER + ); this.deletionDialogService.openComfirmDialog(deletionMessage); } - + doSearch(searchMember) { this.retrieve(this.projectId, searchMember); } + + refresh() { + this.retrieve(this.projectId, ''); + } } \ No newline at end of file diff --git a/src/ui_ng/src/app/project/member/member.service.ts b/src/ui_ng/src/app/project/member/member.service.ts index e4897f23d..5578b1083 100644 --- a/src/ui_ng/src/app/project/member/member.service.ts +++ b/src/ui_ng/src/app/project/member/member.service.ts @@ -9,8 +9,6 @@ import 'rxjs/add/observable/throw'; import { BaseService } from '../../service/base.service'; import { Member } from './member'; -export const urlPrefix = ''; - @Injectable() export class MemberService extends BaseService { @@ -21,7 +19,7 @@ export class MemberService extends BaseService { listMembers(projectId: number, username: string): Observable { console.log('Get member from project_id:' + projectId + ', username:' + username); return this.http - .get(urlPrefix + `/api/projects/${projectId}/members?username=${username}`) + .get(`/api/projects/${projectId}/members?username=${username}`) .map(response=>response.json()) .catch(error=>this.handleError(error)); } @@ -29,7 +27,7 @@ export class MemberService extends BaseService { addMember(projectId: number, username: string, roleId: number): Observable { console.log('Adding member with username:' + username + ', roleId:' + roleId + ' under projectId:' + projectId); return this.http - .post(urlPrefix + `/api/projects/${projectId}/members`, { username: username, roles: [ roleId ] }) + .post(`/api/projects/${projectId}/members`, { username: username, roles: [ roleId ] }) .map(response=>response.status) .catch(error=>Observable.throw(error)); } @@ -37,7 +35,7 @@ export class MemberService extends BaseService { changeMemberRole(projectId: number, userId: number, roleId: number): Observable { console.log('Changing member role with userId:' + ' to roleId:' + roleId + ' under projectId:' + projectId); return this.http - .put(urlPrefix + `/api/projects/${projectId}/members/${userId}`, { roles: [ roleId ]}) + .put(`/api/projects/${projectId}/members/${userId}`, { roles: [ roleId ]}) .map(response=>response.status) .catch(error=>Observable.throw(error)); } @@ -45,7 +43,7 @@ export class MemberService extends BaseService { deleteMember(projectId: number, userId: number): Observable { console.log('Deleting member role with userId:' + userId + ' under projectId:' + projectId); return this.http - .delete(urlPrefix + `/api/projects/${projectId}/members/${userId}`) + .delete(`/api/projects/${projectId}/members/${userId}`) .map(response=>response.status) .catch(error=>Observable.throw(error)); } diff --git a/src/ui_ng/src/app/project/project-routing.module.ts b/src/ui_ng/src/app/project/project-routing.module.ts deleted file mode 100644 index cbb60541c..000000000 --- a/src/ui_ng/src/app/project/project-routing.module.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { HarborShellComponent } from '../base/harbor-shell/harbor-shell.component'; -import { ProjectComponent } from './project.component'; -import { ProjectDetailComponent } from './project-detail/project-detail.component'; - -import { RepositoryComponent } from '../repository/repository.component'; -import { ReplicationComponent } from '../replication/replication.component'; -import { MemberComponent } from './member/member.component'; -import { AuditLogComponent } from '../log/audit-log.component'; - -import { BaseRoutingResolver } from '../base/base-routing-resolver.service'; -import { ProjectRoutingResolver } from './project-routing-resolver.service'; - -const projectRoutes: Routes = [ - { - path: 'harbor', - component: HarborShellComponent, - resolve: { - harborResolver: BaseRoutingResolver - }, - children: [ - { - path: 'projects', - component: ProjectComponent, - resolve: { - projectsResolver: BaseRoutingResolver - } - }, - { - path: 'projects/:id', - component: ProjectDetailComponent, - resolve: { - projectResolver: ProjectRoutingResolver - }, - children: [ - { path: 'repository', component: RepositoryComponent }, - { - path: 'replication', component: ReplicationComponent, - resolve: { - replicationResolver: BaseRoutingResolver - } - }, - { - path: 'member', component: MemberComponent, - resolve: { - memberResolver: BaseRoutingResolver - } - }, - { - path: 'log', component: AuditLogComponent, - resolve: { - auditLogResolver: BaseRoutingResolver - } - } - ] - } - ] - } -]; - -@NgModule({ - imports: [ - RouterModule.forChild(projectRoutes) - ], - exports: [RouterModule] -}) -export class ProjectRoutingModule { } \ No newline at end of file diff --git a/src/ui_ng/src/app/project/project.component.html b/src/ui_ng/src/app/project/project.component.html index 93a3be1e1..0f7b929d6 100644 --- a/src/ui_ng/src/app/project/project.component.html +++ b/src/ui_ng/src/app/project/project.component.html @@ -4,7 +4,7 @@
-
+
- + +
diff --git a/src/ui_ng/src/app/project/project.component.ts b/src/ui_ng/src/app/project/project.component.ts index f3ebee0c5..8565c5f22 100644 --- a/src/ui_ng/src/app/project/project.component.ts +++ b/src/ui_ng/src/app/project/project.component.ts @@ -12,11 +12,18 @@ import { ListProjectComponent } from './list-project/list-project.component'; import { MessageService } from '../global-message/message.service'; import { Message } from '../global-message/message'; -export const types: {} = { 0: 'PROJECT.MY_PROJECTS', 1: 'PROJECT.PUBLIC_PROJECTS'}; - import { AlertType } from '../shared/shared.const'; import { Response } from '@angular/http'; +import { DeletionDialogService } from '../shared/deletion-dialog/deletion-dialog.service'; +import { DeletionMessage } from '../shared/deletion-dialog/deletion-message'; +import { DeletionTargets } from '../shared/shared.const'; + +import { Subscription } from 'rxjs/Subscription'; + + +const types: {} = { 0: 'PROJECT.MY_PROJECTS', 1: 'PROJECT.PUBLIC_PROJECTS'}; + @Component({ selector: 'project', templateUrl: 'project.component.html', @@ -37,7 +44,27 @@ export class ProjectComponent implements OnInit { currentFilteredType: number = 0; lastFilteredType: number = 0; - constructor(private projectService: ProjectService, private messageService: MessageService){} + subscription: Subscription; + + constructor( + private projectService: ProjectService, + private messageService: MessageService, + private deletionDialogService: DeletionDialogService){ + this.subscription = deletionDialogService.deletionConfirm$.subscribe(message => { + if (message && message.targetId === DeletionTargets.PROJECT) { + let projectId = message.data; + this.projectService + .deleteProject(projectId) + .subscribe( + response=>{ + console.log('Successful delete project with ID:' + projectId); + this.retrieve('', this.lastFilteredType); + }, + error=>this.messageService.announceMessage(error.status, error, AlertType.WARNING) + ); + } + }); + } ngOnInit(): void { this.retrieve('', this.lastFilteredType); @@ -75,24 +102,30 @@ export class ProjectComponent implements OnInit { } toggleProject(p: Project) { - this.projectService + if (p) { + p.public === 0 ? p.public = 1 : p.public = 0; + this.projectService .toggleProjectPublic(p.project_id, p.public) .subscribe( response=>console.log('Successful toggled project_id:' + p.project_id), error=>this.messageService.announceMessage(error.status, error, AlertType.WARNING) ); + } } deleteProject(p: Project) { - this.projectService - .deleteProject(p.project_id) - .subscribe( - response=>{ - console.log('Successful delete project_id:' + p.project_id); - this.retrieve('', this.lastFilteredType); - }, - error=>this.messageService.announceMessage(error.status, error, AlertType.WARNING) - ); + let deletionMessage = new DeletionMessage( + 'PROJECT.DELETION_TITLE', + 'PROJECT.DELETION_SUMMARY', + p.name, + p.project_id, + DeletionTargets.PROJECT + ); + this.deletionDialogService.openComfirmDialog(deletionMessage); + } + + refresh(): void { + this.retrieve('', this.lastFilteredType); } } \ No newline at end of file diff --git a/src/ui_ng/src/app/project/project.css b/src/ui_ng/src/app/project/project.css index 2613a0fc3..e69de29bb 100644 --- a/src/ui_ng/src/app/project/project.css +++ b/src/ui_ng/src/app/project/project.css @@ -1,3 +0,0 @@ -.my-project-pull-right { - float: right; -} \ No newline at end of file diff --git a/src/ui_ng/src/app/project/project.module.ts b/src/ui_ng/src/app/project/project.module.ts index 4d4eef544..d23555de6 100644 --- a/src/ui_ng/src/app/project/project.module.ts +++ b/src/ui_ng/src/app/project/project.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { SharedModule } from '../shared/shared.module'; import { RepositoryModule } from '../repository/repository.module'; import { ReplicationModule } from '../replication/replication.module'; @@ -7,40 +8,35 @@ import { LogModule } from '../log/log.module'; import { ProjectComponent } from './project.component'; import { CreateProjectComponent } from './create-project/create-project.component'; -import { ActionProjectComponent } from './action-project/action-project.component'; import { ListProjectComponent } from './list-project/list-project.component'; import { ProjectDetailComponent } from './project-detail/project-detail.component'; - import { MemberComponent } from './member/member.component'; import { AddMemberComponent } from './member/add-member/add-member.component'; -import { ProjectRoutingModule } from './project-routing.module'; - import { ProjectService } from './project.service'; import { MemberService } from './member/member.service'; import { ProjectRoutingResolver } from './project-routing-resolver.service'; @NgModule({ - imports: [ + imports: [ SharedModule, RepositoryModule, ReplicationModule, LogModule, - ProjectRoutingModule + RouterModule ], - declarations: [ + declarations: [ ProjectComponent, CreateProjectComponent, - ActionProjectComponent, ListProjectComponent, ProjectDetailComponent, MemberComponent, AddMemberComponent ], - exports: [ ProjectComponent ], - providers: [ ProjectRoutingResolver, ProjectService, MemberService ] + exports: [ProjectComponent], + providers: [ProjectRoutingResolver, ProjectService, MemberService] }) export class ProjectModule { - + } \ No newline at end of file diff --git a/src/ui_ng/src/app/project/project.service.ts b/src/ui_ng/src/app/project/project.service.ts index b560c096e..77ae7c004 100644 --- a/src/ui_ng/src/app/project/project.service.ts +++ b/src/ui_ng/src/app/project/project.service.ts @@ -12,8 +12,6 @@ import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; import 'rxjs/add/observable/throw'; -const url_prefix = ''; - @Injectable() export class ProjectService { @@ -24,7 +22,7 @@ export class ProjectService { getProject(projectId: number): Promise { return this.http - .get(url_prefix + `/api/projects/${projectId}`) + .get(`/api/projects/${projectId}`) .toPromise() .then(response=>response.json() as Project) .catch(error=>Observable.throw(error)); @@ -32,14 +30,14 @@ export class ProjectService { listProjects(name: string, isPublic: number): Observable{ return this.http - .get(url_prefix + `/api/projects?project_name=${name}&is_public=${isPublic}`, this.options) + .get(`/api/projects?project_name=${name}&is_public=${isPublic}`, this.options) .map(response=>response.json()) .catch(error=>Observable.throw(error)); } createProject(name: string, isPublic: number): Observable { return this.http - .post(url_prefix + `/api/projects`, + .post(`/api/projects`, JSON.stringify({'project_name': name, 'public': isPublic}) , this.options) .map(response=>response.status) @@ -48,14 +46,14 @@ export class ProjectService { toggleProjectPublic(projectId: number, isPublic: number): Observable { return this.http - .put(url_prefix + `/api/projects/${projectId}/publicity`, { 'public': isPublic }, this.options) + .put(`/api/projects/${projectId}/publicity`, { 'public': isPublic }, this.options) .map(response=>response.status) .catch(error=>Observable.throw(error)); } deleteProject(projectId: number): Observable { return this.http - .delete(url_prefix + `/api/projects/${projectId}`) + .delete(`/api/projects/${projectId}`) .map(response=>response.status) .catch(error=>Observable.throw(error)); } diff --git a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html new file mode 100644 index 000000000..79dc56317 --- /dev/null +++ b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html @@ -0,0 +1,52 @@ + +

New Endpoint

+
+ +
+ +
+ + {{errorMessage}} + +
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + {{ pingTestMessage }} +
+
+ +
+
+ + + +
+ \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts new file mode 100644 index 000000000..e68f329cb --- /dev/null +++ b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts @@ -0,0 +1,128 @@ +import { Component, Output, EventEmitter } from '@angular/core'; + +import { ReplicationService } from '../replication.service'; +import { MessageService } from '../../global-message/message.service'; +import { AlertType, ActionType } from '../../shared/shared.const'; + +import { Target } from '../target'; + + +@Component({ + selector: 'create-edit-destination', + templateUrl: './create-edit-destination.component.html' +}) +export class CreateEditDestinationComponent { + + createEditDestinationOpened: boolean; + + errorMessageOpened: boolean; + errorMessage: string; + + testOngoing: boolean; + pingTestMessage: string; + pingStatus: boolean; + + actionType: ActionType; + + target: Target = new Target(); + + @Output() reload = new EventEmitter(); + + constructor( + private replicationService: ReplicationService, + private messageService: MessageService) {} + + openCreateEditTarget(targetId?: number) { + this.target = new Target(); + + this.createEditDestinationOpened = true; + + this.errorMessageOpened = false; + this.errorMessage = ''; + + this.pingTestMessage = ''; + this.pingStatus = true; + this.testOngoing = false; + + if(targetId) { + this.actionType = ActionType.EDIT; + this.replicationService + .getTarget(targetId) + .subscribe( + target=>this.target=target, + error=>this.messageService + .announceMessage(error.status, 'Failed to get target with ID:' + targetId, AlertType.DANGER) + ); + } else { + this.actionType = ActionType.ADD_NEW; + } + } + + testConnection() { + this.pingTestMessage = 'Testing connection...'; + this.pingStatus = true; + this.testOngoing = !this.testOngoing; + this.replicationService + .pingTarget(this.target) + .subscribe( + response=>{ + this.pingStatus = true; + this.pingTestMessage = 'Connection tested successfully.'; + this.testOngoing = !this.testOngoing; + }, + error=>{ + this.pingStatus = false; + this.pingTestMessage = 'Failed to ping target.'; + this.testOngoing = !this.testOngoing; + } + ) + } + + onSubmit() { + this.errorMessage = ''; + this.errorMessageOpened = false; + + switch(this.actionType) { + case ActionType.ADD_NEW: + this.replicationService + .createTarget(this.target) + .subscribe( + response=>{ + console.log('Successful added target.'); + this.createEditDestinationOpened = false; + this.reload.emit(true); + }, + error=>{ + this.errorMessageOpened = true; + this.errorMessage = 'Failed to add target:' + error; + this.messageService + .announceMessage(error.status, this.errorMessage, AlertType.DANGER); + } + ); + break; + case ActionType.EDIT: + this.replicationService + .updateTarget(this.target) + .subscribe( + response=>{ + console.log('Successful updated target.'); + this.createEditDestinationOpened = false; + this.reload.emit(true); + }, + error=>{ + this.errorMessageOpened = true; + this.errorMessage = 'Failed to update target:' + error; + this.messageService + .announceMessage(error.status, this.errorMessage, AlertType.DANGER); + } + ); + break; + } + } + + onErrorMessageClose(): void { + this.errorMessageOpened = false; + this.errorMessage = ''; + } + +} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/create-edit-policy/create-edit-policy.component.html b/src/ui_ng/src/app/replication/create-edit-policy/create-edit-policy.component.html deleted file mode 100644 index 37a54579c..000000000 --- a/src/ui_ng/src/app/replication/create-edit-policy/create-edit-policy.component.html +++ /dev/null @@ -1,54 +0,0 @@ - -

Add Policy

-
-
-
-
- - -
-
- - -
-
- -
- - -
-
-
- -
- -
-
- - -
-
-
- - -
-
- - -
-
- - -
-
-
-
-
- - - -
- \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/create-edit-policy/create-edit-policy.component.ts b/src/ui_ng/src/app/replication/create-edit-policy/create-edit-policy.component.ts deleted file mode 100644 index 3e9ed5dc9..000000000 --- a/src/ui_ng/src/app/replication/create-edit-policy/create-edit-policy.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { ReplicationService } from '../replication.service'; - -@Component({ - selector: 'create-edit-policy', - templateUrl: 'create-edit-policy.component.html' -}) -export class CreateEditPolicyComponent { - - createEditPolicyOpened: boolean; - - constructor(private replicationService: ReplicationService) {} - - openCreateEditPolicy(): void { - console.log('createEditPolicyOpened:' + this.createEditPolicyOpened); - this.createEditPolicyOpened = true; - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/destination/destination.component.html b/src/ui_ng/src/app/replication/destination/destination.component.html new file mode 100644 index 000000000..5a069f971 --- /dev/null +++ b/src/ui_ng/src/app/replication/destination/destination.component.html @@ -0,0 +1,30 @@ +
+
+
+
+ + +
+
+ + +
+
+ + Name + Destination + Creation Time + + {{t.name}} + {{t.endpoint}} + {{t.creation_time}} + + Edit Target + Delete + + + + {{ (targets ? targets.length : 0) }} item(s) + +
+
\ No newline at end of file diff --git a/src/ui_ng/src/app/replication/destination/destination.component.ts b/src/ui_ng/src/app/replication/destination/destination.component.ts new file mode 100644 index 000000000..8078e4dec --- /dev/null +++ b/src/ui_ng/src/app/replication/destination/destination.component.ts @@ -0,0 +1,103 @@ +import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core'; +import { Target } from '../target'; +import { ReplicationService } from '../replication.service'; +import { MessageService } from '../../global-message/message.service'; +import { AlertType } from '../../shared/shared.const'; + +import { DeletionDialogService } from '../../shared/deletion-dialog/deletion-dialog.service'; +import { DeletionMessage } from '../../shared/deletion-dialog/deletion-message'; + +import { DeletionTargets } from '../../shared/shared.const'; + +import { Subscription } from 'rxjs/Subscription'; + +import { CreateEditDestinationComponent } from '../create-edit-destination/create-edit-destination.component'; + +@Component({ + selector: 'destination', + templateUrl: 'destination.component.html' +}) +export class DestinationComponent implements OnInit { + + @ViewChild(CreateEditDestinationComponent) + createEditDestinationComponent: CreateEditDestinationComponent; + + targets: Target[]; + target: Target; + + targetName: string; + subscription : Subscription; + + constructor( + private replicationService: ReplicationService, + private messageService: MessageService, + private deletionDialogService: DeletionDialogService) { + this.subscription = this.deletionDialogService.deletionConfirm$.subscribe(message=>{ + let targetId = message.data; + this.replicationService + .deleteTarget(targetId) + .subscribe( + response=>{ + console.log('Successful deleted target with ID:' + targetId); + this.reload(); + }, + error=>this.messageService + .announceMessage(error.status, + 'Failed to delete target with ID:' + targetId + ', error:' + error, + AlertType.DANGER) + ); + }); + } + + ngOnInit(): void { + this.targetName = ''; + this.retrieve(''); + } + + ngOnDestroy(): void { + if(this.subscription) { + this.subscription.unsubscribe(); + } + } + + retrieve(targetName: string): void { + this.replicationService + .listTargets(targetName) + .subscribe( + targets=>this.targets = targets, + error=>this.messageService.announceMessage(error.status,'Failed to get targets:' + error, AlertType.DANGER) + ); + } + + doSearchTargets(targetName: string) { + this.targetName = targetName; + this.retrieve(targetName); + } + + refreshTargets() { + this.retrieve(''); + } + + reload() { + this.retrieve(this.targetName); + } + + openModal() { + this.createEditDestinationComponent.openCreateEditTarget(); + this.target = new Target(); + } + + editTarget(target: Target) { + if(target) { + this.createEditDestinationComponent.openCreateEditTarget(target.id); + } + } + + deleteTarget(target: Target) { + if(target) { + let targetId = target.id; + let deletionMessage = new DeletionMessage('REPLICATION.DELETION_TITLE_TARGET', 'REPLICATION.DELETION_SUMMARY_TARGET', target.name, target.id, DeletionTargets.TARGET); + this.deletionDialogService.openComfirmDialog(deletionMessage); + } + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/list-policy/custom-highlight.directive.ts b/src/ui_ng/src/app/replication/list-policy/custom-highlight.directive.ts deleted file mode 100644 index 484cf5d5f..000000000 --- a/src/ui_ng/src/app/replication/list-policy/custom-highlight.directive.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Directive, ElementRef, HostListener } from '@angular/core'; - -export const customColor = 'blue'; -export const customFontColor = 'white'; - -@Directive({ - selector: '[custom-highlight]' -}) -export class CustomHighlightDirective { - constructor(private el: ElementRef) {} - - @HostListener('mouseenter') - onMouseEnter(): void { - this.el.nativeElement.style.backgroundColor = customColor; - this.el.nativeElement.style.color = customFontColor; - } - - @HostListener('mouseout') - onMouseOut(): void { - this.el.nativeElement.style.backgroundColor = null; - this.el.nativeElement.style.color = null; - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/list-policy/list-policy.component.html b/src/ui_ng/src/app/replication/list-policy/list-policy.component.html deleted file mode 100644 index 8617f81d3..000000000 --- a/src/ui_ng/src/app/replication/list-policy/list-policy.component.html +++ /dev/null @@ -1,29 +0,0 @@ - - Name - Description - Destination - Last start time - Activation - Action - - {{p.name}} - {{p.description}} - {{p.target_name}} - {{p.start_time}} - {{p.enabled}} - - - -
- Enable - Disable -
- - - - - {{ (policies ? policies.length : 0) }} item(s) - \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/list-policy/list-policy.component.ts b/src/ui_ng/src/app/replication/list-policy/list-policy.component.ts deleted file mode 100644 index 486520803..000000000 --- a/src/ui_ng/src/app/replication/list-policy/list-policy.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; - -import { ReplicationService } from '../replication.service'; -import { Policy } from '../policy'; - -@Component({ - selector: 'list-policy', - templateUrl: 'list-policy.component.html' -}) -export class ListPolicyComponent { - - @Input() policies: Policy[]; - @Output() selectOne = new EventEmitter(); - - constructor(private replicationService: ReplicationService){} - - selectPolicy(policy: Policy): void { - console.log('Select policy ID:' + policy.id); - this.selectOne.emit(policy.id); - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/replication-management/replication-management.component.html b/src/ui_ng/src/app/replication/replication-management/replication-management.component.html new file mode 100644 index 000000000..298a13d2a --- /dev/null +++ b/src/ui_ng/src/app/replication/replication-management/replication-management.component.html @@ -0,0 +1,12 @@ +

Replications

+ + diff --git a/src/ui_ng/src/app/replication/replication-management/replication-management.component.ts b/src/ui_ng/src/app/replication/replication-management/replication-management.component.ts new file mode 100644 index 000000000..78ef2fe57 --- /dev/null +++ b/src/ui_ng/src/app/replication/replication-management/replication-management.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'replication-management', + templateUrl: 'replication-management.component.html', + styleUrls: [ 'replication-management.css' ] +}) +export class ReplicationManagementComponent {} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/replication-management/replication-management.css b/src/ui_ng/src/app/replication/replication-management/replication-management.css new file mode 100644 index 000000000..eb5e65fee --- /dev/null +++ b/src/ui_ng/src/app/replication/replication-management/replication-management.css @@ -0,0 +1,32 @@ +.custom-h2 { + margin-top: 0px !important; +} + +.custom-add-button { + font-size: medium; + margin-left: -12px; +} + +.filter-icon { + position: relative; + right: -12px; +} + +.filter-pos { + float: right; + margin-right: 24px; + position: relative; + top: 8px; +} + +.action-panel-pos { + position: relative; + top: 20px; +} + +.refresh-btn { + position: absolute; + right: -4px; + top: 8px; + cursor: pointer; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/replication.component.html b/src/ui_ng/src/app/replication/replication.component.html index eebb61e40..2c5d8f44d 100644 --- a/src/ui_ng/src/app/replication/replication.component.html +++ b/src/ui_ng/src/app/replication/replication.component.html @@ -2,33 +2,47 @@
- - + +
-
- -
-
- -
-
- Replication Jobs for 'project01/sync_01' -
-
+
-
- Finished - Running - Error - Stopped - Retrying + {{r.description}}
- + + +
+
+ +
+
+ Replication Jobs +
+
+ + + +
+
+
+ + +
+ {{j.description}} +
+ +
+ +
diff --git a/src/ui_ng/src/app/replication/replication.component.ts b/src/ui_ng/src/app/replication/replication.component.ts index ced3b000b..3daae67bb 100644 --- a/src/ui_ng/src/app/replication/replication.component.ts +++ b/src/ui_ng/src/app/replication/replication.component.ts @@ -1,11 +1,13 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { CreateEditPolicyComponent } from './create-edit-policy/create-edit-policy.component'; +import { CreateEditPolicyComponent } from '../shared/create-edit-policy/create-edit-policy.component'; import { MessageService } from '../global-message/message.service'; import { AlertType } from '../shared/shared.const'; +import { SessionService } from '../shared/session.service'; + import { ReplicationService } from './replication.service'; import { SessionUser } from '../shared/session-user'; @@ -13,6 +15,34 @@ import { Policy } from './policy'; import { Job } from './job'; import { Target } from './target'; +const ruleStatus = [ + { 'key': '', 'description': 'All Status'}, + { 'key': '1', 'description': 'Enabled'}, + { 'key': '0', 'description': 'Disabled'} +]; + +const jobStatus = [ + { 'key': '', 'description': 'All' }, + { 'key': 'pending', 'description': 'Pending' }, + { 'key': 'running', 'description': 'Running' }, + { 'key': 'error', 'description': 'Error' }, + { 'key': 'retrying', 'description': 'Retrying' }, + { 'key': 'stopped' , 'description': 'Stopped' }, + { 'key': 'finished', 'description': 'Finished' }, + { 'key': 'canceled', 'description': 'Canceled' } +]; + +const optionalSearch: {} = {0: 'Advanced', 1: 'Simple'}; + +class SearchOption { + policyId: number; + policyName: string = ''; + repoName: string = ''; + status: string = ''; + startTime: string = ''; + endTime: string = ''; +} + @Component({ selector: 'replicaton', templateUrl: 'replication.component.html' @@ -22,34 +52,55 @@ export class ReplicationComponent implements OnInit { currentUser: SessionUser; projectId: number; - policyName: string; - - policy: Policy; - + search: SearchOption; + + ruleStatus = ruleStatus; + currentRuleStatus: {key: string, description: string}; + + jobStatus = jobStatus; + currentJobStatus: {key: string, description: string}; + changedPolicies: Policy[]; changedJobs: Job[]; - @ViewChild(CreateEditPolicyComponent) - createEditPolicyComponent: CreateEditPolicyComponent + policies: Policy[]; + jobs: Job[]; - constructor(private route: ActivatedRoute, private messageService: MessageService, private replicationService: ReplicationService) { - this.route.data.subscribe(data=>this.currentUser = data); + toggleJobSearchOption = optionalSearch; + currentJobSearchOption: number; + + @ViewChild(CreateEditPolicyComponent) + createEditPolicyComponent: CreateEditPolicyComponent; + + constructor( + private sessionService: SessionService, + private messageService: MessageService, + private replicationService: ReplicationService, + private route: ActivatedRoute) { + this.currentUser = this.sessionService.getCurrentUser(); } ngOnInit(): void { this.projectId = +this.route.snapshot.parent.params['id']; console.log('Get projectId from route params snapshot:' + this.projectId); + this.search = new SearchOption(); + this.currentRuleStatus = this.ruleStatus[0]; + this.currentJobStatus = this.jobStatus[0]; + this.currentJobSearchOption = 0; this.retrievePolicies(); } retrievePolicies(): void { this.replicationService - .listPolicies(this.projectId, this.policyName) + .listPolicies(this.search.policyName, this.projectId) .subscribe( response=>{ this.changedPolicies = response; + this.policies = this.changedPolicies; if(this.changedPolicies && this.changedPolicies.length > 0) { this.fetchPolicyJobs(this.changedPolicies[0].id); + } else { + this.changedJobs = []; } }, error=>this.messageService.announceMessage(error.status,'Failed to get policies with project ID:' + this.projectId, AlertType.DANGER) @@ -57,17 +108,98 @@ export class ReplicationComponent implements OnInit { } openModal(): void { + console.log('Open modal to create policy.'); this.createEditPolicyComponent.openCreateEditPolicy(); - console.log('Clicked open create-edit policy.'); } - fetchPolicyJobs(policyId: number) { - console.log('Received policy ID ' + policyId + ' by clicked row.'); + openEditPolicy(policyId: number) { + console.log('Open modal to edit policy ID:' + policyId); + this.createEditPolicyComponent.openCreateEditPolicy(policyId); + } + + fetchPolicyJobs(policyId: number) { + this.search.policyId = policyId; + console.log('Received policy ID ' + this.search.policyId + ' by clicked row.'); this.replicationService - .listJobs(policyId) + .listJobs(this.search.policyId, this.search.status, this.search.repoName, this.search.startTime, this.search.endTime) .subscribe( - response=>this.changedJobs = response, - error=>this.messageService.announceMessage(error.status, 'Failed to fetch jobs with policy ID:' + policyId, AlertType.DANGER) + response=>{ + this.changedJobs = response; + this.jobs = this.changedJobs; + }, + error=>this.messageService.announceMessage(error.status, 'Failed to fetch jobs with policy ID:' + this.search.policyId, AlertType.DANGER) ); } + + selectOne(policy: Policy) { + if(policy) { + this.fetchPolicyJobs(policy.id); + } + } + + doSearchPolicies(policyName: string) { + this.search.policyName = policyName; + this.retrievePolicies(); + } + + doFilterPolicyStatus(status: string) { + console.log('Do filter policies with status:' + status); + this.currentRuleStatus = this.ruleStatus.find(r=>r.key === status); + if(status.trim() === '') { + this.changedPolicies = this.policies; + } else { + this.changedPolicies = this.policies.filter(policy=>policy.enabled === +this.currentRuleStatus.key); + } + } + + doFilterJobStatus(status: string) { + console.log('Do filter jobs with status:' + status); + this.currentJobStatus = this.jobStatus.find(r=>r.key === status); + if(status.trim() === '') { + this.changedJobs = this.jobs; + } else { + this.changedJobs = this.jobs.filter(job=>job.status === status); + } + } + + doSearchJobs(repoName: string) { + this.search.repoName = repoName; + this.fetchPolicyJobs(this.search.policyId); + } + + reloadPolicies(isReady: boolean) { + if(isReady) { + this.retrievePolicies(); + } + } + + refreshPolicies() { + this.retrievePolicies(); + } + + refreshJobs() { + this.fetchPolicyJobs(this.search.policyId); + } + + toggleSearchJobOptionalName(option: number) { + (option === 1) ? this.currentJobSearchOption = 0 : this.currentJobSearchOption = 1; + } + + doJobSearchByTimeRange(strDate: string, target: string) { + if(!strDate || strDate.trim() === '') { + strDate = 0 + ''; + } + let oneDayOffset = 3600 * 24; + switch(target) { + case 'begin': + this.search.startTime = (new Date(strDate).getTime() / 1000) + ''; + break; + case 'end': + this.search.endTime = (new Date(strDate).getTime() / 1000 + oneDayOffset) + ''; + break; + } + console.log('Search jobs filtered by time range, begin: ' + this.search.startTime + ', end:' + this.search.endTime); + this.fetchPolicyJobs(this.search.policyId); + } + } \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/replication.module.ts b/src/ui_ng/src/app/replication/replication.module.ts index 31144d2af..962c74c93 100644 --- a/src/ui_ng/src/app/replication/replication.module.ts +++ b/src/ui_ng/src/app/replication/replication.module.ts @@ -1,23 +1,28 @@ import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { ReplicationManagementComponent } from './replication-management/replication-management.component'; import { ReplicationComponent } from './replication.component'; -import { CreateEditPolicyComponent } from './create-edit-policy/create-edit-policy.component'; -import { ListPolicyComponent } from './list-policy/list-policy.component'; import { ListJobComponent } from './list-job/list-job.component'; - -import { CustomHighlightDirective } from './list-policy/custom-highlight.directive'; +import { TotalReplicationComponent } from './total-replication/total-replication.component'; +import { DestinationComponent } from './destination/destination.component'; +import { CreateEditDestinationComponent } from './create-edit-destination/create-edit-destination.component'; import { SharedModule } from '../shared/shared.module'; import { ReplicationService } from './replication.service'; @NgModule({ - imports: [ SharedModule ], + imports: [ + SharedModule, + RouterModule + ], declarations: [ ReplicationComponent, - CreateEditPolicyComponent, - ListPolicyComponent, + ReplicationManagementComponent, ListJobComponent, - CustomHighlightDirective + TotalReplicationComponent, + DestinationComponent, + CreateEditDestinationComponent ], exports: [ ReplicationComponent ], providers: [ ReplicationService ] diff --git a/src/ui_ng/src/app/replication/replication.service.ts b/src/ui_ng/src/app/replication/replication.service.ts index 39c67f1d0..5cefc34c8 100644 --- a/src/ui_ng/src/app/replication/replication.service.ts +++ b/src/ui_ng/src/app/replication/replication.service.ts @@ -1,17 +1,17 @@ import { Injectable } from '@angular/core'; -import { Http, URLSearchParams } from '@angular/http'; +import { Http, URLSearchParams, Response } from '@angular/http'; import { BaseService } from '../service/base.service'; import { Policy } from './policy'; import { Job } from './job'; +import { Target } from './target'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; import 'rxjs/add/observable/throw'; - -export const urlPrefix = ''; +import 'rxjs/add/operator/mergeMap'; @Injectable() export class ReplicationService extends BaseService { @@ -19,20 +19,154 @@ export class ReplicationService extends BaseService { super(); } - listPolicies(projectId: number, policyName: string): Observable { + listPolicies(policyName: string, projectId?: any): Observable { + if(!projectId) { + projectId = ''; + } console.log('Get policies with project ID:' + projectId + ', policy name:' + policyName); return this.http - .get(urlPrefix + `/api/policies/replication?project_id=${projectId}`) + .get(`/api/policies/replication?project_id=${projectId}&name=${policyName}`) .map(response=>response.json() as Policy[]) .catch(error=>Observable.throw(error)); } - // /api/jobs/replication/?page=1&page_size=20&end_time=&policy_id=1&start_time=&status= - listJobs(policyId: number, status: string = ''): Observable { + getPolicy(policyId: number): Observable { + console.log('Get policy with ID:' + policyId); + return this.http + .get(`/api/policies/replication/${policyId}`) + .map(response=>response.json() as Policy) + .catch(error=>Observable.throw(error)); + } + + createPolicy(policy: Policy): Observable { + console.log('Create policy with project ID:' + policy.project_id + ', policy:' + JSON.stringify(policy)); + return this.http + .post(`/api/policies/replication`, JSON.stringify(policy)) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } + + updatePolicy(policy: Policy): Observable { + if (policy && policy.id) { + return this.http + .put(`/api/policies/replication/${policy.id}`, JSON.stringify(policy)) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } + return Observable.throw(new Error("Policy is nil or has no ID set.")); + } + + createOrUpdatePolicyWithNewTarget(policy: Policy, target: Target): Observable { + return this.http + .post(`/api/targets`, JSON.stringify(target)) + .map(response=>{ + return response.status; + }) + .flatMap((status)=>{ + if(status === 201) { + return this.http + .get(`/api/targets?name=${target.name}`) + .map(res=>res) + .catch(error=>Observable.throw(error)); + } + }) + .flatMap((res: Response) => { + if(res.status === 200) { + let lastAddedTarget= res.json()[0]; + if(lastAddedTarget && lastAddedTarget.id) { + policy.target_id = lastAddedTarget.id; + if(policy.id) { + return this.http + .put(`/api/policies/replication/${policy.id}`, JSON.stringify(policy)) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } else { + return this.http + .post(`/api/policies/replication`, JSON.stringify(policy)) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } + } + } + }) + .catch(error=>Observable.throw(error)); + } + + enablePolicy(policyId: number, enabled: number): Observable { + console.log('Enable or disable policy ID:' + policyId + ' with activation status:' + enabled); + return this.http + .put(`/api/policies/replication/${policyId}/enablement`, {enabled: enabled}) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } + + deletePolicy(policyId: number): Observable { + console.log('Delete policy ID:' + policyId); + return this.http + .delete(`/api/policies/replication/${policyId}`) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } + + // /api/jobs/replication/?page=1&page_size=20&end_time=&policy_id=1&start_time=&status=&repository= + listJobs(policyId: number, status: string = '', repoName: string = '', startTime: string = '', endTime: string = ''): Observable { console.log('Get jobs under policy ID:' + policyId); return this.http - .get(urlPrefix + `/api/jobs/replication?policy_id=${policyId}&status=${status}`) + .get(`/api/jobs/replication?policy_id=${policyId}&status=${status}&repository=${repoName}&start_time=${startTime}&end_time=${endTime}`) .map(response=>response.json() as Job[]) .catch(error=>Observable.throw(error)); } + + listTargets(targetName: string): Observable { + console.log('Get targets.'); + return this.http + .get(`/api/targets?name=${targetName}`) + .map(response=>response.json() as Target[]) + .catch(error=>Observable.throw(error)); + } + + getTarget(targetId: number): Observable { + console.log('Get target by ID:' + targetId); + return this.http + .get(`/api/targets/${targetId}`) + .map(response=>response.json() as Target) + .catch(error=>Observable.throw(error)); + } + + createTarget(target: Target): Observable { + console.log('Create target:' + JSON.stringify(target)); + return this.http + .post(`/api/targets`, JSON.stringify(target)) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } + + pingTarget(target: Target): Observable { + console.log('Ping target.'); + let body = new URLSearchParams(); + body.set('endpoint', target.endpoint); + body.set('username', target.username); + body.set('password', target.password); + return this.http + .post(`/api/targets/ping`, body) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } + + updateTarget(target: Target): Observable { + console.log('Update target with target ID' + target.id); + return this.http + .put(`/api/targets/${target.id}`, JSON.stringify(target)) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } + + deleteTarget(targetId: number): Observable { + console.log('Deleting target with ID:' + targetId); + return this.http + .delete(`/api/targets/${targetId}`) + .map(response=>response.status) + .catch(error=>Observable.throw(error)); + } + } \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/total-replication/total-replication.component.html b/src/ui_ng/src/app/replication/total-replication/total-replication.component.html new file mode 100644 index 000000000..8877c8a68 --- /dev/null +++ b/src/ui_ng/src/app/replication/total-replication/total-replication.component.html @@ -0,0 +1,12 @@ +
+
+
+
+ + +
+
+ + +
+
\ No newline at end of file diff --git a/src/ui_ng/src/app/replication/total-replication/total-replication.component.ts b/src/ui_ng/src/app/replication/total-replication/total-replication.component.ts new file mode 100644 index 000000000..7e5858aa8 --- /dev/null +++ b/src/ui_ng/src/app/replication/total-replication/total-replication.component.ts @@ -0,0 +1,71 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ReplicationService } from '../../replication/replication.service'; + +import { CreateEditPolicyComponent } from '../../shared/create-edit-policy/create-edit-policy.component'; + +import { MessageService } from '../../global-message/message.service'; +import { AlertType } from '../../shared/shared.const'; + +import { Policy } from '../../replication/policy'; + +@Component({ + selector: 'total-replication', + templateUrl: 'total-replication.component.html', + providers: [ ReplicationService ] +}) +export class TotalReplicationComponent implements OnInit { + + changedPolicies: Policy[]; + policies: Policy[]; + policyName: string = ''; + projectId: number; + + @ViewChild(CreateEditPolicyComponent) + createEditPolicyComponent: CreateEditPolicyComponent; + + constructor( + private replicationService: ReplicationService, + private messageService: MessageService) {} + + ngOnInit() { + this.retrievePolicies(); + } + + retrievePolicies(): void { + this.replicationService + .listPolicies(this.policyName) + .subscribe( + response=>{ + this.changedPolicies = response; + this.policies = this.changedPolicies; + }, + error=>this.messageService.announceMessage(error.status,'Failed to get policies.', AlertType.DANGER) + ); + } + + doSearchPolicies(policyName: string) { + this.policyName = policyName; + this.retrievePolicies(); + } + + openEditPolicy(policyId: number) { + console.log('Open modal to edit policy ID:' + policyId); + this.createEditPolicyComponent.openCreateEditPolicy(policyId); + } + + selectPolicy(policy: Policy) { + if(policy) { + this.projectId = policy.project_id; + } + } + + refreshPolicies() { + this.retrievePolicies(); + } + + reloadPolicies(isReady: boolean) { + if(isReady) { + this.retrievePolicies(); + } + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository.component.html b/src/ui_ng/src/app/repository/repository.component.html index bffb836bf..feb83bcf9 100644 --- a/src/ui_ng/src/app/repository/repository.component.html +++ b/src/ui_ng/src/app/repository/repository.component.html @@ -1,7 +1,7 @@
-
-
+
+
+ +
+
diff --git a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.css b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.css new file mode 100644 index 000000000..4a2236d0e --- /dev/null +++ b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.css @@ -0,0 +1,37 @@ +.margin-left-override { + margin-left: 24px !important; +} + +.about-text-link { + font-family: "Proxima Nova Light"; + font-size: 14px; + color: #007CBB; + line-height: 24px; +} + +.about-copyright-text { + font-family: "Proxima Nova Light"; + font-size: 13px; + color: #565656; + line-height: 16px; +} + +.about-product-title { + font-family: "Metropolis Light"; + font-size: 28px; + color: #000000; + line-height: 36px; +} + +.about-version { + font-family: "Metropolis"; + font-size: 14px; + color: #565656; + font-weight: 500; +} + +.about-build { + font-family: "Metropolis"; + font-size: 14px; + color: #565656; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.html b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.html new file mode 100644 index 000000000..2a676ff92 --- /dev/null +++ b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.html @@ -0,0 +1,25 @@ + +

vmware

+
+
Harbor
+
+
+ {{'ABOUT.VERSION' | translate}} {{version}} + | + {{'ABOUT.BUILD' | translate}} {{build}} +
+
+
+

{{'ABOUT.COPYRIGHT' | translate}} http://www.vmware.com/go/patents

+

{{'ABOUT.TRADEMARK' | translate}}

+

+ {{'ABOUT.END_USER_LICENSE' | translate}}
+ {{'ABOUT.OPEN_SOURCE_LICENSE' | translate}} +

+
+
+
+
+ +
+ \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts new file mode 100644 index 000000000..adea99883 --- /dev/null +++ b/src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'about-dialog', + templateUrl: "about-dialog.component.html", + styleUrls: ["about-dialog.component.css"] +}) +export class AboutDialogComponent { + private opened: boolean = false; + private version: string ="0.4.1"; + private build: string ="4276418"; + + public open(): void { + this.opened = true; + } + + public close(): void { + this.opened = false; + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html new file mode 100644 index 000000000..08dad367f --- /dev/null +++ b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html @@ -0,0 +1,81 @@ + +

New Replication Rule

+
+
+
+ +
+ + {{errorMessage}} + +
+ +
+ + +
+
+ + +
+
+ +
+ + +
+
+
+ +
+ +
+ +
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + {{ pingTestMessage }} +
+
+
+
+
+ + + +
+ \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts new file mode 100644 index 000000000..eecf6411b --- /dev/null +++ b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts @@ -0,0 +1,228 @@ +import { Component, Input, Output, EventEmitter, OnInit, HostBinding } from '@angular/core'; + +import { CreateEditPolicy } from './create-edit-policy'; + +import { ReplicationService } from '../../replication/replication.service'; +import { MessageService } from '../../global-message/message.service'; +import { AlertType, ActionType } from '../../shared/shared.const'; + +import { Policy } from '../../replication/policy'; +import { Target } from '../../replication/target'; + +@Component({ + selector: 'create-edit-policy', + templateUrl: 'create-edit-policy.component.html' +}) +export class CreateEditPolicyComponent implements OnInit { + + createEditPolicyOpened: boolean; + createEditPolicy: CreateEditPolicy = new CreateEditPolicy(); + + actionType: ActionType; + + errorMessageOpened: boolean; + errorMessage: string; + + isCreateDestination: boolean; + @Input() projectId: number; + + @Output() reload = new EventEmitter(); + + targets: Target[]; + + pingTestMessage: string; + testOngoing: boolean; + pingStatus: boolean; + + constructor(private replicationService: ReplicationService, + private messageService: MessageService) {} + + prepareTargets(targetId?: number) { + this.replicationService + .listTargets('') + .subscribe( + targets=>{ + this.targets = targets; + if(this.targets && this.targets.length > 0) { + let initialTarget: Target; + (targetId) ? initialTarget = this.targets.find(t=>t.id==targetId) : initialTarget = this.targets[0]; + this.createEditPolicy.targetId = initialTarget.id; + this.createEditPolicy.targetName = initialTarget.name; + this.createEditPolicy.endpointUrl = initialTarget.endpoint; + this.createEditPolicy.username = initialTarget.username; + this.createEditPolicy.password = initialTarget.password; + } + }, + error=>this.messageService.announceMessage(error.status, 'Error occurred while get targets.', AlertType.DANGER) + ); + } + + ngOnInit(): void {} + + openCreateEditPolicy(policyId?: number): void { + this.createEditPolicyOpened = true; + this.createEditPolicy = new CreateEditPolicy(); + this.isCreateDestination = false; + this.errorMessageOpened = false; + this.errorMessage = ''; + + this.pingTestMessage = ''; + this.pingStatus = true; + this.testOngoing = false; + + if(policyId) { + this.actionType = ActionType.EDIT; + this.replicationService + .getPolicy(policyId) + .subscribe( + policy=>{ + this.createEditPolicy.policyId = policyId; + this.createEditPolicy.name = policy.name; + this.createEditPolicy.description = policy.description; + this.createEditPolicy.enable = policy.enabled === 1? true : false; + this.prepareTargets(policy.target_id); + } + ) + } else { + this.actionType = ActionType.ADD_NEW; + this.prepareTargets(); + } + } + + newDestination(checkedAddNew: boolean): void { + console.log('CheckedAddNew:' + checkedAddNew); + this.isCreateDestination = checkedAddNew; + this.createEditPolicy.targetName = ''; + this.createEditPolicy.endpointUrl = ''; + this.createEditPolicy.username = ''; + this.createEditPolicy.password = ''; + } + + selectTarget(): void { + let result = this.targets.find(target=>target.id == this.createEditPolicy.targetId); + if(result) { + this.createEditPolicy.targetId = result.id; + this.createEditPolicy.endpointUrl = result.endpoint; + this.createEditPolicy.username = result.username; + this.createEditPolicy.password = result.password; + } + } + + onErrorMessageClose(): void { + this.errorMessageOpened = false; + this.errorMessage = ''; + } + + getPolicyByForm(): Policy { + let policy = new Policy(); + policy.project_id = this.projectId; + policy.id = this.createEditPolicy.policyId; + policy.name = this.createEditPolicy.name; + policy.description = this.createEditPolicy.description; + policy.enabled = this.createEditPolicy.enable ? 1 : 0; + policy.target_id = this.createEditPolicy.targetId; + return policy; + } + + getTargetByForm(): Target { + let target = new Target(); + target.id = this.createEditPolicy.targetId; + target.name = this.createEditPolicy.targetName; + target.endpoint = this.createEditPolicy.endpointUrl; + target.username = this.createEditPolicy.username; + target.password = this.createEditPolicy.password; + return target; + } + + createPolicy(): void { + console.log('Create policy with existing target in component.'); + this.replicationService + .createPolicy(this.getPolicyByForm()) + .subscribe( + response=>{ + console.log('Successful created policy: ' + response); + this.createEditPolicyOpened = false; + this.reload.emit(true); + }, + error=>{ + this.errorMessageOpened = true; + this.errorMessage = error['_body']; + console.log('Failed to create policy:' + error.status + ', error message:' + JSON.stringify(error['_body'])); + }); + } + + createOrUpdatePolicyAndCreateTarget(): void { + console.log('Creating policy with new created target.'); + this.replicationService + .createOrUpdatePolicyWithNewTarget(this.getPolicyByForm(), this.getTargetByForm()) + .subscribe( + response=>{ + console.log('Successful created policy and target:' + response); + this.createEditPolicyOpened = false; + this.reload.emit(true); + }, + error=>{ + this.errorMessageOpened = true; + this.errorMessage = error['_body']; + console.log('Failed to create policy and target:' + error.status + ', error message:' + JSON.stringify(error['_body'])); + } + ); + } + + updatePolicy(): void { + console.log('Creating policy with existing target.'); + this.replicationService + .updatePolicy(this.getPolicyByForm()) + .subscribe( + response=>{ + console.log('Successful created policy and target:' + response); + this.createEditPolicyOpened = false; + this.reload.emit(true); + }, + error=>{ + this.errorMessageOpened = true; + this.errorMessage = error['_body']; + console.log('Failed to create policy and target:' + error.status + ', error message:' + JSON.stringify(error['_body'])); + } + ); + } + + onSubmit() { + if(this.isCreateDestination) { + this.createOrUpdatePolicyAndCreateTarget(); + } else { + if(this.actionType === ActionType.ADD_NEW) { + this.createPolicy(); + } else if(this.actionType === ActionType.EDIT){ + this.updatePolicy(); + } + } + + this.errorMessageOpened = false; + this.errorMessage = ''; + } + + testConnection() { + this.pingStatus = true; + this.pingTestMessage = 'Testing connection...'; + this.testOngoing = !this.testOngoing; + let pingTarget = new Target(); + pingTarget.endpoint = this.createEditPolicy.endpointUrl; + pingTarget.username = this.createEditPolicy.username; + pingTarget.password = this.createEditPolicy.password; + this.replicationService + .pingTarget(pingTarget) + .subscribe( + response=>{ + this.testOngoing = !this.testOngoing; + this.pingTestMessage = 'Connection tested successfully.'; + this.pingStatus = true; + }, + error=>{ + this.testOngoing = !this.testOngoing; + this.pingTestMessage = 'Failed to ping target.'; + this.pingStatus = false; + } + ); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.ts b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.ts new file mode 100644 index 000000000..7725e7e4f --- /dev/null +++ b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.ts @@ -0,0 +1,11 @@ +export class CreateEditPolicy { + policyId: number; + name: string; + description: string; + enable: boolean; + targetId: number; + targetName: string; + endpointUrl: string; + username: string; + password: string; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/deletion-dialog/deletion-dialog.component.ts b/src/ui_ng/src/app/shared/deletion-dialog/deletion-dialog.component.ts index 6ea70e8f9..052479c55 100644 --- a/src/ui_ng/src/app/shared/deletion-dialog/deletion-dialog.component.ts +++ b/src/ui_ng/src/app/shared/deletion-dialog/deletion-dialog.component.ts @@ -1,6 +1,9 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy } from '@angular/core'; +import { Subscription } from 'rxjs/Subscription'; +import { TranslateService } from '@ngx-translate/core'; import { DeletionDialogService } from './deletion-dialog.service'; +import { DeletionMessage } from './deletion-message'; @Component({ selector: 'deletion-dialog', @@ -8,20 +11,32 @@ import { DeletionDialogService } from './deletion-dialog.service'; styleUrls: ['deletion-dialog.component.css'] }) -export class DeletionDialogComponent{ +export class DeletionDialogComponent implements OnDestroy{ opened: boolean = false; dialogTitle: string = ""; dialogContent: string = ""; - data: any; + message: DeletionMessage; + private annouceSubscription: Subscription; - constructor(private delService: DeletionDialogService){ - delService.deletionAnnouced$.subscribe(msg => { - this.dialogTitle = msg.title; - this.dialogContent = msg.message; - this.data = msg.data; - //Open dialog - this.open(); - }); + constructor( + private delService: DeletionDialogService, + private translate: TranslateService) { + this.annouceSubscription = delService.deletionAnnouced$.subscribe(msg => { + this.dialogTitle = msg.title; + this.dialogContent = msg.message; + this.message = msg; + + this.translate.get(this.dialogTitle).subscribe((res: string) => this.dialogTitle = res); + this.translate.get(this.dialogContent, { 'param': msg.param }).subscribe((res: string) => this.dialogContent = res); + //Open dialog + this.open(); + }); + } + + ngOnDestroy(): void { + if(this.annouceSubscription){ + this.annouceSubscription.unsubscribe(); + } } open(): void { @@ -33,7 +48,7 @@ export class DeletionDialogComponent{ } confirm(): void { - this.delService.confirmDeletion(this.data); + this.delService.confirmDeletion(this.message); this.close(); } } \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/deletion-dialog/deletion-dialog.service.ts b/src/ui_ng/src/app/shared/deletion-dialog/deletion-dialog.service.ts index 8563366c1..ae926cb9b 100644 --- a/src/ui_ng/src/app/shared/deletion-dialog/deletion-dialog.service.ts +++ b/src/ui_ng/src/app/shared/deletion-dialog/deletion-dialog.service.ts @@ -6,13 +6,13 @@ import { DeletionMessage } from './deletion-message'; @Injectable() export class DeletionDialogService { private deletionAnnoucedSource = new Subject(); - private deletionConfirmSource = new Subject(); + private deletionConfirmSource = new Subject(); deletionAnnouced$ = this.deletionAnnoucedSource.asObservable(); deletionConfirm$ = this.deletionConfirmSource.asObservable(); - confirmDeletion(obj: any): void { - this.deletionConfirmSource.next(obj); + confirmDeletion(message: any): void { + this.deletionConfirmSource.next(message); } openComfirmDialog(message: DeletionMessage): void { diff --git a/src/ui_ng/src/app/shared/deletion-dialog/deletion-message.ts b/src/ui_ng/src/app/shared/deletion-dialog/deletion-message.ts index c59cd073b..5545394b3 100644 --- a/src/ui_ng/src/app/shared/deletion-dialog/deletion-message.ts +++ b/src/ui_ng/src/app/shared/deletion-dialog/deletion-message.ts @@ -1,10 +1,16 @@ +import { DeletionTargets } from '../../shared/shared.const'; + export class DeletionMessage { - public constructor(title: string, message: string, data: any){ + public constructor(title: string, message: string, param: string, data: any, targetId: DeletionTargets) { this.title = title; this.message = message; this.data = data; + this.targetId = targetId; + this.param = param; } title: string; message: string; data: any; + targetId: DeletionTargets = DeletionTargets.EMPTY; + param: string; } \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.html b/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.html new file mode 100644 index 000000000..926d70632 --- /dev/null +++ b/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.html @@ -0,0 +1,10 @@ + +
+ + {{errorMessage}} + +
+ +
+
+ \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.ts b/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.ts new file mode 100644 index 000000000..ca9e8a7e3 --- /dev/null +++ b/src/ui_ng/src/app/shared/inline-alert/inline-alert.component.ts @@ -0,0 +1,71 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; + +import { errorHandler } from '../shared.utils'; + +@Component({ + selector: 'inline-alert', + templateUrl: "inline-alert.component.html" +}) +export class InlineAlertComponent { + private inlineAlertType: string = 'alert-danger'; + private inlineAlertClosable: boolean = true; + private alertClose: boolean = true; + private displayedText: string = ""; + private showCancelAction: boolean = false; + private useAppLevelStyle: boolean = false; + + @Output() confirmEvt = new EventEmitter(); + + constructor(private translate: TranslateService){} + + public get errorMessage(): string { + return this.displayedText; + } + + //Show error message inline + public showInlineError(error: any): void { + this.displayedText = errorHandler(error); + + this.inlineAlertType = 'alert-danger'; + this.showCancelAction = false; + this.inlineAlertClosable = true; + this.alertClose = false; + this.useAppLevelStyle = false; + } + + //Show confirmation info with action button + public showInlineConfirmation(warning: any): void { + this.displayedText = ""; + if(warning && warning.message){ + this.translate.get(warning.message).subscribe((res: string) => this.displayedText = res); + } + this.inlineAlertType = 'alert-warning'; + this.showCancelAction = true; + this.inlineAlertClosable = true; + this.alertClose = false; + this.useAppLevelStyle = true; + } + + //Show inline sccess info + public showInlineSuccess(info: any): void { + this.displayedText = ""; + if(info && info.message){ + this.translate.get(info.message).subscribe((res: string) => this.displayedText = res); + } + this.inlineAlertType = 'alert-success'; + this.showCancelAction = false; + this.inlineAlertClosable = true; + this.alertClose = false; + this.useAppLevelStyle = false; + } + + //Close alert + public close(): void { + this.alertClose = true; + } + + private confirmCancel(): void { + this.confirmEvt.emit(true); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/list-policy/list-policy.component.html b/src/ui_ng/src/app/shared/list-policy/list-policy.component.html new file mode 100644 index 000000000..4636de768 --- /dev/null +++ b/src/ui_ng/src/app/shared/list-policy/list-policy.component.html @@ -0,0 +1,24 @@ + + Name + Project + Description + Destination + Last Start Time + Activation + + {{p.name}} + {{p.project_name}} + {{p.description}} + {{p.target_name}} + {{p.start_time}} + + {{p.enabled === 1 ? 'Enabled' : 'Disabled'}} + + Edit Policy + {{ p.enabled === 0 ? 'Enable' : 'Disabled' }} + Delete + + + + {{ (policies ? policies.length : 0) }} item(s) + \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/list-policy/list-policy.component.ts b/src/ui_ng/src/app/shared/list-policy/list-policy.component.ts new file mode 100644 index 000000000..928e8e279 --- /dev/null +++ b/src/ui_ng/src/app/shared/list-policy/list-policy.component.ts @@ -0,0 +1,88 @@ +import { Component, Input, Output, EventEmitter, HostBinding, OnInit, ViewChild, OnDestroy } from '@angular/core'; + +import { ReplicationService } from '../../replication/replication.service'; +import { Policy } from '../../replication/policy'; + +import { DeletionDialogService } from '../../shared/deletion-dialog/deletion-dialog.service'; +import { DeletionMessage } from '../../shared/deletion-dialog/deletion-message'; + +import { DeletionTargets } from '../../shared/shared.const'; + +import { MessageService } from '../../global-message/message.service'; +import { AlertType } from '../../shared/shared.const'; + +import { Subscription } from 'rxjs/Subscription'; + +@Component({ + selector: 'list-policy', + templateUrl: 'list-policy.component.html', +}) +export class ListPolicyComponent implements OnInit, OnDestroy { + + @Input() policies: Policy[]; + @Input() projectless: boolean; + + @Output() reload = new EventEmitter(); + @Output() selectOne = new EventEmitter(); + @Output() editOne = new EventEmitter(); + + selectedId: number; + subscription: Subscription; + + constructor( + private replicationService: ReplicationService, + private deletionDialogService: DeletionDialogService, + private messageService: MessageService) { + + this.subscription = this.subscription = this.deletionDialogService + .deletionConfirm$ + .subscribe( + message=>{ + if(message && message.targetId === DeletionTargets.POLICY) { + this.replicationService + .deletePolicy(message.data) + .subscribe( + response=>{ + console.log('Successful delete policy with ID:' + message.data); + this.reload.emit(true); + }, + error=>this.messageService.announceMessage(error.status, 'Failed to delete policy with ID:' + message.data, AlertType.DANGER) + ); + } + }); + + } + + ngOnInit() { + + } + + ngOnDestroy() { + if(this.subscription) { + this.subscription.unsubscribe(); + } + } + + selectPolicy(policy: Policy): void { + this.selectedId = policy.id; + console.log('Select policy ID:' + policy.id); + this.selectOne.emit(policy); + } + + editPolicy(policy: Policy) { + console.log('Open modal to edit policy.'); + this.editOne.emit(policy.id); + } + + enablePolicy(policy: Policy): void { + console.log('Enable policy ID:' + policy.id + ' with activation status ' + policy.enabled); + policy.enabled = policy.enabled === 0 ? 1 : 0; + this.replicationService.enablePolicy(policy.id, policy.enabled); + } + + deletePolicy(policy: Policy) { + let deletionMessage: DeletionMessage = new DeletionMessage('REPLICATION.DELETION_TITLE', 'REPLICATION.DELETION_SUMMARY', policy.name, policy.id, DeletionTargets.POLICY); + this.deletionDialogService.openComfirmDialog(deletionMessage); + } + +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.css b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.css new file mode 100644 index 000000000..f75fba1e0 --- /dev/null +++ b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.css @@ -0,0 +1,5 @@ +.label-info { + margin: 0px !important; + padding: 0px !important; + margin-top: -5px !important; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/user/new-user-form.component.html b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.html similarity index 63% rename from src/ui_ng/src/app/user/new-user-form.component.html rename to src/ui_ng/src/app/shared/new-user-form/new-user-form.component.html index 9caa705b2..bc753157c 100644 --- a/src/ui_ng/src/app/user/new-user-form.component.html +++ b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.html @@ -3,8 +3,8 @@
-
- +
- +
- +
-
-
-
\ No newline at end of file +
+
\ No newline at end of file diff --git a/src/ui_ng/src/app/user/new-user-form.component.ts b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.ts similarity index 64% rename from src/ui_ng/src/app/user/new-user-form.component.ts rename to src/ui_ng/src/app/shared/new-user-form/new-user-form.component.ts index 1e47d6495..774f3928d 100644 --- a/src/ui_ng/src/app/user/new-user-form.component.ts +++ b/src/ui_ng/src/app/shared/new-user-form/new-user-form.component.ts @@ -1,16 +1,19 @@ -import { Component, ViewChild, AfterViewChecked, Output, EventEmitter } from '@angular/core'; +import { Component, ViewChild, AfterViewChecked, Output, EventEmitter, Input } from '@angular/core'; import { NgForm } from '@angular/forms'; -import { User } from './user'; +import { User } from '../../user/user'; +import { isEmptyForm } from '../../shared/shared.utils'; @Component({ selector: 'new-user-form', - templateUrl: 'new-user-form.component.html' + templateUrl: 'new-user-form.component.html', + styleUrls: ['new-user-form.component.css'] }) export class NewUserFormComponent implements AfterViewChecked { newUser: User = new User(); confirmedPwd: string = ""; + @Input() isSelfRegistration: boolean = false; newUserFormRef: NgForm; @ViewChild("newUserFrom") newUserForm: NgForm; @@ -20,12 +23,12 @@ export class NewUserFormComponent implements AfterViewChecked { public get isValid(): boolean { let pwdEqualStatus = true; - if(this.newUserForm.controls["confirmPassword"] && - this.newUserForm.controls["newPassword"]){ + if (this.newUserForm.controls["confirmPassword"] && + this.newUserForm.controls["newPassword"]) { pwdEqualStatus = this.newUserForm.controls["confirmPassword"].value === this.newUserForm.controls["newPassword"].value; } - return this.newUserForm && - this.newUserForm.valid && pwdEqualStatus; + return this.newUserForm && + this.newUserForm.valid && pwdEqualStatus; } ngAfterViewChecked(): void { @@ -44,9 +47,15 @@ export class NewUserFormComponent implements AfterViewChecked { return this.newUser; } + //Reset form reset(): void { - if(this.newUserForm){ + if (this.newUserForm) { this.newUserForm.reset(); } } + + //To check if form is empty + isEmpty(): boolean { + return isEmptyForm(this.newUserForm); + } } \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/not-found/not-found.component.css b/src/ui_ng/src/app/shared/not-found/not-found.component.css new file mode 100644 index 000000000..9bbdb1397 --- /dev/null +++ b/src/ui_ng/src/app/shared/not-found/not-found.component.css @@ -0,0 +1,33 @@ +.wrapper-back { + position: absolute; + top: 50%; + height: 240px; + margin-top: -120px; + text-align: center; + left: 50%; + margin-left: -300px; +} + +.status-code { + font-weight: bolder; + font-size: 4em; + color: #A32100; + vertical-align: middle; +} + +.status-text { + font-weight: bold; + font-size: 3em; + margin-left: 10px; + vertical-align: middle; +} + +.status-subtitle { + font-size: 18px; +} + +.second-number { + font-weight: bold; + font-size: 2em; + color: #EB8D00; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/not-found/not-found.component.html b/src/ui_ng/src/app/shared/not-found/not-found.component.html new file mode 100644 index 000000000..29e676128 --- /dev/null +++ b/src/ui_ng/src/app/shared/not-found/not-found.component.html @@ -0,0 +1,10 @@ +
+
+ + 404 + {{'PAGE_NOT_FOUND.MAIN_TITLE' | translate}} +
+
+ {{'PAGE_NOT_FOUND.SUB_TITLE' | translate}} {{leftSeconds}} {{'PAGE_NOT_FOUND.UNIT' | translate}} +
+
\ No newline at end of file diff --git a/src/ui_ng/src/app/shared/not-found/not-found.component.ts b/src/ui_ng/src/app/shared/not-found/not-found.component.ts new file mode 100644 index 000000000..6f0ebc930 --- /dev/null +++ b/src/ui_ng/src/app/shared/not-found/not-found.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Router } from '@angular/router'; + +const defaultInterval = 1000; +const defaultLeftTime = 5; + +@Component({ + selector: 'page-not-found', + templateUrl: "not-found.component.html", + styleUrls: ['not-found.component.css'] +}) +export class PageNotFoundComponent implements OnInit, OnDestroy{ + private leftSeconds: number = defaultLeftTime; + private timeInterval: any = null; + + constructor(private router: Router){} + + ngOnInit(): void { + if(!this.timeInterval){ + this.timeInterval = setInterval(interval => { + this.leftSeconds--; + if(this.leftSeconds <= 0){ + this.router.navigate(['harbor']); + clearInterval(this.timeInterval); + } + }, defaultInterval); + } + } + + ngOnDestroy(): void { + if(this.timeInterval){ + clearInterval(this.timeInterval); + } + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/port.directive.ts b/src/ui_ng/src/app/shared/port.directive.ts new file mode 100644 index 000000000..1ec66796a --- /dev/null +++ b/src/ui_ng/src/app/shared/port.directive.ts @@ -0,0 +1,37 @@ +import { Directive } from '@angular/core'; +import { ValidatorFn, AbstractControl, Validator, NG_VALIDATORS, Validators } from '@angular/forms'; + +export const portNumbers = /[\d]+/; + +export function portValidator(): ValidatorFn { + return (control: AbstractControl): { [key: string]: any } => { + const value: string = control.value + if (!value) { + return { 'port': 65535 }; + } + + const regExp = new RegExp(portNumbers, 'i'); + if(!regExp.test(value)){ + return { 'port': 65535 }; + }else{ + const portV = parseInt(value); + if(portV <=0 || portV >65535){ + return { 'port': 65535 }; + } + } + return null; + } +} + +@Directive({ + selector: '[port]', + providers: [{ provide: NG_VALIDATORS, useExisting: PortValidatorDirective, multi: true }] +}) + +export class PortValidatorDirective implements Validator { + private valFn = portValidator(); + + validate(control: AbstractControl): { [key: string]: any } { + return this.valFn(control); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/route/base-routing-resolver.service.ts b/src/ui_ng/src/app/shared/route/base-routing-resolver.service.ts new file mode 100644 index 000000000..ff3ba02c7 --- /dev/null +++ b/src/ui_ng/src/app/shared/route/base-routing-resolver.service.ts @@ -0,0 +1,37 @@ +import { Injectable } from '@angular/core'; +import { + Router, + Resolve, + ActivatedRouteSnapshot, + RouterStateSnapshot, + NavigationExtras +} from '@angular/router'; + +import { SessionService } from '../../shared/session.service'; +import { SessionUser } from '../../shared/session-user'; +import { harborRootRoute } from '../shared.const'; + +@Injectable() +export class BaseRoutingResolver implements Resolve { + + constructor(private session: SessionService, private router: Router) { } + + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise { + //To refresh seesion + return this.session.retrieveUser() + .then(sessionUser => { + return sessionUser; + }) + .catch(error => { + //Session retrieving failed then redirect to sign-in + //no matter what status code is. + //Please pay attention that route 'harborRootRoute' support anonymous user + if (state.url != harborRootRoute) { + let navigatorExtra: NavigationExtras = { + queryParams: {"redirect_url": state.url} + }; + this.router.navigate(['sign-in'], navigatorExtra); + } + }); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/route/system-admin-activate.service.ts b/src/ui_ng/src/app/shared/route/system-admin-activate.service.ts new file mode 100644 index 000000000..e58e14196 --- /dev/null +++ b/src/ui_ng/src/app/shared/route/system-admin-activate.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from '@angular/core'; +import { + CanActivate, Router, + ActivatedRouteSnapshot, + RouterStateSnapshot, + CanActivateChild +} from '@angular/router'; +import { SessionService } from '../../shared/session.service'; +import { harborRootRoute } from '../../shared/shared.const'; + +@Injectable() +export class SystemAdminGuard implements CanActivate, CanActivateChild { + constructor(private authService: SessionService, private router: Router) { } + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { + let sessionUser = this.authService.getCurrentUser(); + + let validation = sessionUser != null && sessionUser.has_admin_role > 0; + if (!validation) { + this.router.navigateByUrl(harborRootRoute); + } + + return validation; + } + + canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { + return this.canActivate(route, state); + } +} diff --git a/src/ui_ng/src/app/shared/session.service.ts b/src/ui_ng/src/app/shared/session.service.ts index 7dacc4533..f20b1e3c2 100644 --- a/src/ui_ng/src/app/shared/session.service.ts +++ b/src/ui_ng/src/app/shared/session.service.ts @@ -4,12 +4,17 @@ import 'rxjs/add/operator/toPromise'; import { SessionUser } from './session-user'; import { SignInCredential } from './sign-in-credential'; +import { enLang } from '../shared/shared.const' -const urlPrefix = ''; -const signInUrl = urlPrefix + '/login'; -const currentUserEndpint = urlPrefix + "/api/users/current"; -const signOffEndpoint = urlPrefix + "/log_out"; -const accountEndpoint = urlPrefix + "/api/users/:id"; +const signInUrl = '/login'; +const currentUserEndpint = "/api/users/current"; +const signOffEndpoint = "/log_out"; +const accountEndpoint = "/api/users/:id"; +const langEndpoint = "/language"; +const langMap = { + "zh": "zh-CN", + "en": "en-US" +}; /** * Define related methods to handle account and session corresponding things @@ -29,15 +34,15 @@ export class SessionService { "Content-Type": 'application/x-www-form-urlencoded' }); - constructor(private http: Http) {} + constructor(private http: Http) { } //Handle the related exceptions - private handleError(error: any): Promise{ + private handleError(error: any): Promise { return Promise.reject(error.message || error); } //Submit signin form to backend (NOT restful service) - signIn(signInCredential: SignInCredential): Promise{ + signIn(signInCredential: SignInCredential): Promise { //Build the form package const body = new URLSearchParams(); body.set('principal', signInCredential.principal); @@ -45,9 +50,9 @@ export class SessionService { //Trigger Http return this.http.post(signInUrl, body.toString(), { headers: this.formHeaders }) - .toPromise() - .then(()=>null) - .catch(error => this.handleError(error)); + .toPromise() + .then(() => null) + .catch(error => this.handleError(error)); } /** @@ -78,11 +83,11 @@ export class SessionService { */ signOff(): Promise { return this.http.get(signOffEndpoint, { headers: this.headers }).toPromise() - .then(() => { - //Destroy current session cache - this.currentUser = null; - }) //Nothing returned - .catch(error => this.handleError(error)) + .then(() => { + //Destroy current session cache + this.currentUser = null; + }) //Nothing returned + .catch(error => this.handleError(error)) } /** @@ -94,17 +99,35 @@ export class SessionService { * * @memberOf SessionService */ - updateAccountSettings(account: SessionUser): Promise{ - if(!account){ + updateAccountSettings(account: SessionUser): Promise { + if (!account) { return Promise.reject("Invalid account settings"); } - console.info(account); - let putUrl = accountEndpoint.replace(":id", account.user_id+""); + let putUrl = accountEndpoint.replace(":id", account.user_id + ""); return this.http.put(putUrl, JSON.stringify(account), { headers: this.headers }).toPromise() - .then(() => { - //Retrieve current session user - return this.retrieveUser(); - }) + .then(() => { + //Retrieve current session user + return this.retrieveUser(); + }) + .catch(error => this.handleError(error)) + } + + /** + * Switch the backend language profile + */ + switchLanguage(lang: string): Promise { + if (!lang) { + return Promise.reject("Invalid language"); + } + + let backendLang = langMap[lang]; + if(!backendLang){ + backendLang = langMap[enLang]; + } + + let getUrl = langEndpoint + "?lang=" + backendLang; + return this.http.get(getUrl).toPromise() + .then(() => null) .catch(error => this.handleError(error)) } } \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/shared.const.ts b/src/ui_ng/src/app/shared/shared.const.ts index 3fef2028d..d7bd16a78 100644 --- a/src/ui_ng/src/app/shared/shared.const.ts +++ b/src/ui_ng/src/app/shared/shared.const.ts @@ -1,11 +1,23 @@ export const supportedLangs = ['en', 'zh']; export const enLang = "en"; export const languageNames = { - "en": "English", - "zh": "中文简体" + "en": "English", + "zh": "中文简体" }; export const enum AlertType { DANGER, WARNING, INFO, SUCCESS }; -export const dismissInterval = 15 * 1000; \ No newline at end of file +export const dismissInterval = 15 * 1000; +export const httpStatusCode = { + "Unauthorized": 401, + "Forbidden": 403 +}; +export const enum DeletionTargets { + EMPTY, PROJECT, PROJECT_MEMBER, USER, POLICY, TARGET +}; +export const harborRootRoute = "/harbor"; + +export const enum ActionType { + ADD_NEW, EDIT +}; \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/shared.module.ts b/src/ui_ng/src/app/shared/shared.module.ts index 6a43d326d..aa51e5190 100644 --- a/src/ui_ng/src/app/shared/shared.module.ts +++ b/src/ui_ng/src/app/shared/shared.module.ts @@ -15,7 +15,18 @@ import { RouterModule } from '@angular/router'; import { DeletionDialogComponent } from './deletion-dialog/deletion-dialog.component'; import { DeletionDialogService } from './deletion-dialog/deletion-dialog.service'; +import { BaseRoutingResolver } from './route/base-routing-resolver.service'; +import { SystemAdminGuard } from './route/system-admin-activate.service'; +import { NewUserFormComponent } from './new-user-form/new-user-form.component'; +import { InlineAlertComponent } from './inline-alert/inline-alert.component'; +import { ListPolicyComponent } from './list-policy/list-policy.component'; +import { CreateEditPolicyComponent } from './create-edit-policy/create-edit-policy.component'; + +import { PortValidatorDirective } from './port.directive'; + +import { PageNotFoundComponent } from './not-found/not-found.component'; +import { AboutDialogComponent } from './about-dialog/about-dialog.component'; @NgModule({ imports: [ @@ -28,7 +39,14 @@ import { DeletionDialogService } from './deletion-dialog/deletion-dialog.service MaxLengthExtValidatorDirective, FilterComponent, HarborActionOverflow, - DeletionDialogComponent + DeletionDialogComponent, + NewUserFormComponent, + InlineAlertComponent, + ListPolicyComponent, + CreateEditPolicyComponent, + PortValidatorDirective, + PageNotFoundComponent, + AboutDialogComponent ], exports: [ CoreModule, @@ -37,13 +55,22 @@ import { DeletionDialogService } from './deletion-dialog/deletion-dialog.service FilterComponent, HarborActionOverflow, TranslateModule, - DeletionDialogComponent + DeletionDialogComponent, + NewUserFormComponent, + InlineAlertComponent, + ListPolicyComponent, + CreateEditPolicyComponent, + PortValidatorDirective, + PageNotFoundComponent, + AboutDialogComponent ], providers: [ SessionService, MessageService, CookieService, - DeletionDialogService] + DeletionDialogService, + BaseRoutingResolver, + SystemAdminGuard] }) export class SharedModule { diff --git a/src/ui_ng/src/app/shared/shared.utils.ts b/src/ui_ng/src/app/shared/shared.utils.ts new file mode 100644 index 000000000..5d6cde0a1 --- /dev/null +++ b/src/ui_ng/src/app/shared/shared.utils.ts @@ -0,0 +1,62 @@ +import { NgForm } from '@angular/forms'; +import { httpStatusCode, AlertType } from './shared.const'; +import { MessageService } from '../global-message/message.service'; +/** + * To handle the error message body + * + * @export + * @returns {string} + */ +export const errorHandler = function (error: any): string { + if (error) { + if (error.message) { + return error.message; + } else if (error._body) { + return error._body; + } else if (error.statusText) { + return error.statusText; + } else { + return error; + } + } + + return "UNKNOWN_ERROR"; +} + +/** + * To check if form is empty + */ +export const isEmptyForm = function (ngForm: NgForm): boolean { + if (ngForm && ngForm.form) { + let values = ngForm.form.value; + if (values) { + for (var key in values) { + if (values[key]) { + return false; + } + } + } + + } + + return true; +} + +/** + * Hanlde the 401 and 403 code + * + * If handled the 401 or 403, then return true otherwise false + */ +export const accessErrorHandler = function (error: any, msgService: MessageService): boolean { + if (error && error.status && msgService) { + if (error.status === httpStatusCode.Unauthorized) { + this.msgService.announceAppLevelMessage(error.status, "UNAUTHORIZED_ERROR", AlertType.DANGER); + return true; + } else if (error.status === httpStatusCode.Forbidden) { + this.msgService.announceAppLevelMessage(error.status, "FORBIDDEN_ERROR", AlertType.DANGER); + return true; + } + } + + return false; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/user/new-user-modal.component.html b/src/ui_ng/src/app/user/new-user-modal.component.html index 2712c5509..23d5a2991 100644 --- a/src/ui_ng/src/app/user/new-user-modal.component.html +++ b/src/ui_ng/src/app/user/new-user-modal.component.html @@ -1,15 +1,8 @@ - +

{{'USER.ADD_USER_TITLE' | translate}}

-
- -
- - {{errorMessage}} - -
- +
diff --git a/src/ui_ng/src/app/user/new-user-modal.component.ts b/src/ui_ng/src/app/user/new-user-modal.component.ts index 51631b1df..5c55e0d6b 100644 --- a/src/ui_ng/src/app/user/new-user-modal.component.ts +++ b/src/ui_ng/src/app/user/new-user-modal.component.ts @@ -1,11 +1,15 @@ -import { Component, ViewChild, Output,EventEmitter } from '@angular/core'; +import { Component, ViewChild, Output, EventEmitter } from '@angular/core'; import { NgForm } from '@angular/forms'; -import { NewUserFormComponent } from './new-user-form.component'; +import { NewUserFormComponent } from '../shared/new-user-form/new-user-form.component'; import { User } from './user'; import { SessionService } from '../shared/session.service'; import { UserService } from './user.service'; +import { errorHandler, accessErrorHandler } from '../shared/shared.utils'; +import { MessageService } from '../global-message/message.service'; +import { AlertType, httpStatusCode } from '../shared/shared.const'; +import { InlineAlertComponent } from '../shared/inline-alert/inline-alert.component'; @Component({ selector: "new-user-modal", @@ -14,17 +18,20 @@ import { UserService } from './user.service'; export class NewUserModalComponent { opened: boolean = false; - alertClose: boolean = true; private error: any; private onGoing: boolean = false; + private formValueChanged: boolean = false; @Output() addNew = new EventEmitter(); constructor(private session: SessionService, - private userService: UserService) { } + private userService: UserService, + private msgService: MessageService) { } @ViewChild(NewUserFormComponent) private newUserForm: NewUserFormComponent; + @ViewChild(InlineAlertComponent) + private inlineAlert: InlineAlertComponent; private getNewUser(): User { return this.newUserForm.getData(); @@ -35,34 +42,44 @@ export class NewUserModalComponent { } public get isValid(): boolean { - return this.newUserForm.isValid; + return this.newUserForm.isValid && this.error == null; } public get errorMessage(): string { - if (this.error) { - if (this.error.message) { - return this.error.message; - } else { - if (this.error._body) { - return this.error._body; - } - } - } - return ""; + return errorHandler(this.error); } formValueChange(flag: boolean): void { - if (!this.alertClose) { - this.alertClose = true;//If alert is shown, then close it + if (this.error != null) { + this.error = null;//clear error } + + this.formValueChanged = true; + this.inlineAlert.close(); } open(): void { this.newUserForm.reset();//Reset form + this.formValueChanged = false; this.opened = true; } close(): void { + if (this.formValueChanged) { + if (this.newUserForm.isEmpty()) { + this.opened = false; + } else { + //Need user confirmation + this.inlineAlert.showInlineConfirmation({ + message: "ALERT.FORM_CHANGE_CONFIRMATION" + }); + } + } else { + this.opened = false; + } + } + + confirmCancel(event: boolean): void { this.opened = false; } @@ -70,19 +87,19 @@ export class NewUserModalComponent { create(): void { //Double confirm everything is ok //Form is valid - if(!this.isValid){ + if (!this.isValid) { return; } //We have new user data let u = this.getNewUser(); - if(!u){ + if (!u) { return; } //Session is ok and role is matched let account = this.session.getCurrentUser(); - if(!account || account.has_admin_role === 0){ + if (!account || account.has_admin_role === 0) { return; } @@ -90,17 +107,23 @@ export class NewUserModalComponent { this.onGoing = true; this.userService.addUser(u) - .then(() => { - this.onGoing = false; - //TODO: - //As no response data returned, can not add it to list directly + .then(() => { + this.onGoing = false; + //TODO: + //As no response data returned, can not add it to list directly - this.addNew.emit(u); - this.close(); - }) - .catch(error => { - this.onGoing = false; - this.error = error; - }); + this.addNew.emit(u); + this.opened = false; + this.msgService.announceMessage(200, "USER.SAVE_SUCCESS", AlertType.SUCCESS); + }) + .catch(error => { + this.onGoing = false; + this.error = error; + if(accessErrorHandler(error, this.msgService)){ + this.opened = false; + }else{ + this.inlineAlert.showInlineError(error); + } + }); } } \ No newline at end of file diff --git a/src/ui_ng/src/app/user/user.component.ts b/src/ui_ng/src/app/user/user.component.ts index f1110ea6c..d7b0fb63c 100644 --- a/src/ui_ng/src/app/user/user.component.ts +++ b/src/ui_ng/src/app/user/user.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core'; import 'rxjs/add/operator/toPromise'; +import { Subscription } from 'rxjs/Subscription'; import { UserService } from './user.service'; import { User } from './user'; @@ -7,6 +8,9 @@ import { NewUserModalComponent } from './new-user-modal.component'; import { TranslateService } from '@ngx-translate/core'; import { DeletionDialogService } from '../shared/deletion-dialog/deletion-dialog.service'; import { DeletionMessage } from '../shared/deletion-dialog/deletion-message'; +import { DeletionTargets, AlertType, httpStatusCode } from '../shared/shared.const' +import { errorHandler, accessErrorHandler } from '../shared/shared.utils'; +import { MessageService } from '../global-message/message.service'; @Component({ selector: 'harbor-user', @@ -16,12 +20,13 @@ import { DeletionMessage } from '../shared/deletion-dialog/deletion-message'; providers: [UserService] }) -export class UserComponent implements OnInit { +export class UserComponent implements OnInit, OnDestroy { users: User[] = []; originalUsers: Promise; private onGoing: boolean = false; private adminMenuText: string = ""; private adminColumn: string = ""; + private deletionSubscription: Subscription; @ViewChild(NewUserModalComponent) private newUserDialog: NewUserModalComponent; @@ -29,18 +34,21 @@ export class UserComponent implements OnInit { constructor( private userService: UserService, private translate: TranslateService, - private deletionDialogService: DeletionDialogService) { - deletionDialogService.deletionConfirm$.subscribe(confirmed => { - this.delUser(confirmed); - }); - } + private deletionDialogService: DeletionDialogService, + private msgService: MessageService) { + this.deletionSubscription = deletionDialogService.deletionConfirm$.subscribe(confirmed => { + if (confirmed && confirmed.targetId === DeletionTargets.USER) { + this.delUser(confirmed.data); + } + }); + } private isMatchFilterTerm(terms: string, testedItem: string): boolean { return testedItem.indexOf(terms) != -1; } isSystemAdmin(u: User): string { - if(!u){ + if (!u) { return "{{MISS}}"; } let key: string = u.has_admin_role ? "USER.IS_ADMIN" : "USER.IS_NOT_ADMIN"; @@ -49,7 +57,7 @@ export class UserComponent implements OnInit { } adminActions(u: User): string { - if(!u){ + if (!u) { return "{{MISS}}"; } let key: string = u.has_admin_role ? "USER.DISABLE_ADMIN_ACTION" : "USER.ENABLE_ADMIN_ACTION"; @@ -65,6 +73,12 @@ export class UserComponent implements OnInit { this.refreshUser(); } + ngOnDestroy(): void { + if(this.deletionSubscription){ + this.deletionSubscription.unsubscribe(); + } + } + //Filter items by keywords doFilter(terms: string): void { this.originalUsers.then(users => { @@ -101,7 +115,11 @@ export class UserComponent implements OnInit { //Change view now user.has_admin_role = updatedUser.has_admin_role; }) - .catch(error => console.error(error))//TODO: + .catch(error => { + if (!accessErrorHandler(error, this.msgService)) { + this.msgService.announceMessage(500, errorHandler(error), AlertType.DANGER); + } + }) } //Delete the specified user @@ -112,9 +130,12 @@ export class UserComponent implements OnInit { //Confirm deletion let msg: DeletionMessage = new DeletionMessage( - "Confirm user deletion", - "Do you want to delete user "+user.username+"?", - user); + "USER.DELETION_TITLE", + "USER.DELETION_SUMMARY", + user.username, + user, + DeletionTargets.USER + ); this.deletionDialogService.openComfirmDialog(msg); } @@ -125,9 +146,14 @@ export class UserComponent implements OnInit { //and then view refreshed this.originalUsers.then(users => { this.users = users.filter(u => u.user_id != user.user_id); + this.msgService.announceMessage(500, "USER.DELETE_SUCCESS", AlertType.SUCCESS); }); }) - .catch(error => console.error(error));//TODO: + .catch(error => { + if (!accessErrorHandler(error, this.msgService)) { + this.msgService.announceMessage(500, errorHandler(error), AlertType.DANGER); + } + }); } //Refresh the user list @@ -144,7 +170,9 @@ export class UserComponent implements OnInit { }) .catch(error => { this.onGoing = false; - console.error(error);//TODO: + if (!accessErrorHandler(error, this.msgService)) { + this.msgService.announceMessage(500, errorHandler(error), AlertType.DANGER); + } }); } diff --git a/src/ui_ng/src/app/user/user.module.ts b/src/ui_ng/src/app/user/user.module.ts index 8bc9ce570..07bddba4d 100644 --- a/src/ui_ng/src/app/user/user.module.ts +++ b/src/ui_ng/src/app/user/user.module.ts @@ -1,8 +1,8 @@ import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; import { UserComponent } from './user.component'; -import { NewUserFormComponent } from './new-user-form.component'; import { NewUserModalComponent } from './new-user-modal.component'; +import { UserService } from './user.service'; @NgModule({ imports: [ @@ -10,13 +10,12 @@ import { NewUserModalComponent } from './new-user-modal.component'; ], declarations: [ UserComponent, - NewUserFormComponent, NewUserModalComponent ], exports: [ - UserComponent, - NewUserFormComponent - ] + UserComponent + ], + providers:[UserService] }) export class UserModule { diff --git a/src/ui_ng/src/app/user/user.ts b/src/ui_ng/src/app/user/user.ts index cc57c8ae7..e58688199 100644 --- a/src/ui_ng/src/app/user/user.ts +++ b/src/ui_ng/src/app/user/user.ts @@ -7,6 +7,7 @@ export class User { user_id: number; username?: string; + realname?: string; email?: string; password?: string; comment?: string; diff --git a/src/ui_ng/src/ng/i18n/lang/en-lang.json b/src/ui_ng/src/ng/i18n/lang/en-lang.json new file mode 100644 index 000000000..2afc28c22 --- /dev/null +++ b/src/ui_ng/src/ng/i18n/lang/en-lang.json @@ -0,0 +1,228 @@ +{ + "SIGN_IN": { + "REMEMBER": "Remember me", + "INVALID_MSG": "Invalid user name or password" + }, + "SIGN_UP": { + "TITLE": "Sign Up" + }, + "BUTTON": { + "CANCEL": "Cancel", + "OK": "Ok", + "DELETE": "DELETE", + "LOG_IN": "LOG IN", + "SIGN_UP_LINK": "Sign up for an account", + "SIGN_UP": "SIGN UP", + "CONFIRM": "Confirm", + "SEND": "SEND", + "SAVE": "SAVE", + "TEST_MAIL": "TEST MAIL SERVER", + "CLOSE": "CLOSE" + }, + "TOOLTIP": { + "EMAIL": "Email should be a valid email address like name@example.com", + "USER_NAME": "Can not contain \"~#$% and max length should be less than 20", + "FULL_NAME": "Max length should be less than 20", + "COMMENT": "Length of comment should be less than 20", + "CURRENT_PWD": "Current password is Required", + "PASSWORD": "Password should be at least 8 characters with 1 uppercase, 1 lower case and 1 number", + "CONFIRM_PWD": "Password input here should be same with above password", + "SIGN_IN_USERNAME": "Username is required", + "SIGN_IN_PWD": "Password is required", + "SIGN_UP_MAIL": "Email is only used for resetting your password", + "SIGN_UP_REAL_NAME": "First name and last name", + "ITEM_REQUIRED": "Field is required", + "NUMBER_REQUIRED": "Filed is required and should be numbers", + "PORT_REQUIRED": "Filed is required and should be valid port number" + }, + "PLACEHOLDER": { + "CURRENT_PWD": "Enter current password", + "NEW_PWD": "Enter new password", + "CONFIRM_PWD": "Confirm new password", + "USER_NAME": "Enter username", + "MAIL": "Enter email address", + "FULL_NAME": "Enter full name", + "SIGN_IN_NAME": "Username", + "SIGN_IN_PWD": "Password" + }, + "PROFILE": { + "TITLE": "User Profile", + "USER_NAME": "Username", + "EMAIL": "Email", + "FULL_NAME": "Full name", + "COMMENT": "Comments", + "PASSWORD": "Password", + "SAVE_SUCCESS": "Save user profile successfully" + }, + "CHANGE_PWD": { + "TITLE": "Change Password", + "CURRENT_PWD": "Current Password", + "NEW_PWD": "New Password", + "CONFIRM_PWD": "Confirm Password", + "SAVE_SUCCESS": "Change user password successfully" + }, + "ACCOUNT_SETTINGS": { + "PROFILE": "User Profile", + "CHANGE_PWD": "Change Password", + "ABOUT": "About", + "LOGOUT": "Log Out" + }, + "GLOBAL_SEARCH": { + "PLACEHOLDER": "Search Harbor..." + }, + "SIDE_NAV": { + "PROJECTS": "Projects", + "SYSTEM_MGMT": { + "NAME": "System Managements", + "USERS": "Users", + "REPLICATIONS": "Replications", + "CONFIGS": "Configurations" + }, + "LOGS": "Logs" + }, + "USER": { + "ADD_ACTION": "USER", + "ENABLE_ADMIN_ACTION": "Enable administrator", + "DISABLE_ADMIN_ACTION": "Disable administrator", + "DEL_ACTION": "Delete", + "FILTER_PLACEHOLDER": "Filter users", + "COLUMN_NAME": "Name", + "COLUMN_ADMIN": "Administrator", + "COLUMN_EMAIL": "Email", + "COLUMN_REG_NAME": "Registration time", + "IS_ADMIN": "Yes", + "IS_NOT_ADMIN": "No", + "ADD_USER_TITLE": "Add User", + "SAVE_SUCCESS": "Add new user successfully", + "DELETION_TITLE": "Confirm user deletion", + "DELETION_SUMMARY": "Do you want to delete user {{param}}?", + "DELETE_SUCCESS": "Delete user successfully" + }, + "PROJECT": { + "PROJECTS": "Projects", + "NAME": "Project Name", + "PUBLIC_OR_PRIVATE": "Public/Private", + "REPO_COUNT": "Repositories Count", + "CREATION_TIME": "Creation Time", + "DESCRIPTION": "Description", + "PUBLIC": "Public", + "PRIVATE": "Private", + "MAKE": "Make", + "NEW_POLICY": "New Policy", + "DELETE": "Delete", + "MY_PROJECTS": "My Projects", + "PUBLIC_PROJECTS": "Public Projects", + "NEW_PROJECT": "New Project", + "NAME_ALREADY_EXISTS": "Project name already exists.", + "NAME_IS_ILLEGAL": "Project name is illegal.", + "UNKNOWN_ERROR": "Unknown error occurred while creating project.", + "ITEMS": "item(s)", + "DELETION_TITLE": "Confirm project deletion", + "DELETION_SUMMARY": "Do you want to delete project {{param}}?", + "FILTER_PLACEHOLDER": "Filter Projects" + }, + "PROJECT_DETAIL": { + "REPOSITORIES": "Repositories", + "REPLICATION": "Replication", + "USERS": "Users", + "LOGS": "Logs" + }, + "MEMBER": { + "NEW_MEMBER": "New Member", + "NAME": "Name", + "ROLE": "Role", + "PROJECT_ADMIN": "Project Admin", + "DEVELOPER": "Developer", + "GUEST": "Guest", + "DELETE": "Delete", + "ITEMS": "item(s)", + "ACTIONS": "Actions", + "USERNAME_DOES_NOT_EXISTS": "Username does not exist.", + "USERNAME_ALREADY_EXISTS": "Username already exists.", + "UNKNOWN_ERROR": "Unknown error occurred while adding member.", + "FILTER_PLACEHOLDER": "Filter Members", + "DELETION_TITLE": "Confirm project member deletion", + "DELETION_SUMMARY": "Do you want to delete project member {{param}}?" + }, + "AUDIT_LOG": { + "USERNAME": "Username", + "REPOSITORY_NAME": "Repository Name", + "TAGS": "Tags", + "OPERATION": "Operation", + "TIMESTAMP": "Timestamp", + "ALL_OPERATIONS": "All Operations", + "PULL": "Pull", + "PUSH": "Push", + "CREATE": "Create", + "DELETE": "Delete", + "OTHERS": "Others", + "ADVANCED": "Advanced", + "SIMPLE": "Simple", + "ITEMS": "item(s)", + "FILTER_PLACEHOLDER": "Filter Logs" + }, + "REPLICATION": { + "FILTER_POLICIES_PLACEHOLDER": "Filter Policies", + "FILTER_JOBS_PLACEHOLDER": "Filter Jobs", + "DELETION_TITLE": "Confirm Policy Deletion", + "DELETION_SUMMARY": "Do you want to delete policy {{param}}?", + "FILTER_TARGETS_PLACEHOLDER": "Filter Targets", + "DELETION_TITLE_TARGET": "Confirm Target Deletion", + "DELETION_SUMMARY_TARGET": "Do you want to delete target {{param}}?" + }, + "ALERT": { + "FORM_CHANGE_CONFIRMATION": "Form value changed, confirm to cancel?" + }, + "RESET_PWD": { + "TITLE": "Reset Password", + "CAPTION": "Enter your email to reset your password", + "EMAIL": "Email", + "SUCCESS": "Mail of resetting password is successfully send to your mail box", + "CAPTION2": "Enter your new password", + "RESET_OK": "Password is successfully reset, click OK button to login with new password" + }, + "RECENT_LOG": { + "SUB_TITLE": "Show recent", + "SUB_TITLE_SUFIX": "logs" + }, + "CONFIG": { + "TITLE": "Configuration", + "AUTH": "Authentication", + "REPLICATION": "Replication", + "EMAIL": "Email", + "SYSTEM": "System Settings", + "CONFIRM_TITLE": "Confirm to cancel", + "CONFIRM_SUMMARY": "Some changes happend, confirm to cancel?", + "SAVE_SUCCESS": "Configurations are successfully saved", + "MAIL_SERVER": "Email Server", + "MAIL_SERVER_PORT": "Email Server Port", + "MAIL_USERNAME": "Email Username", + "MAIL_PASSWORD": "Email Password", + "MAIL_FROM": "Email From", + "MAIL_SSL": "Email SSL", + "SSL_TOOLTIP": "Enable SSL for email server connection", + "VERIFY_REMOTE_CERT": "Verify Remote Certificate", + "VERIFY_REMOTE_CERT_TOOLTIP": "Determine whether the image replication should verify the certificate of a remote Habor registry. Uncheck this box when the remote registry uses a self -signed or untrusted certificate.", + "TOKEN_EXPIRATION": "Token Expiration (Minutes)", + "AUTH_MODE": "Authentication", + "PRO_CREATION_RESTRICTION": "Project Creation Restriction", + "SELF_REGISTRATION": "Self Registration", + "SELF_REGISTRATION_TOOLTIP": "Enable sign up" + }, + "PAGE_NOT_FOUND": { + "MAIN_TITLE": "Page not found", + "SUB_TITLE": "Redirect to harbor home in", + "UNIT": "seconds..." + }, + "ABOUT": { + "VERSION": "Version", + "BUILD": "Build", + "COPYRIGHT": "Copyright 1998-2016 VMware. Inc. All rights reserved. This product is protected by U.S. and international property laws. VMware products are covered by one or more patents listed at", + "TRADEMARK": "Vmware is a registered trademark or trademark of VMware. Inc. in the United States and other jurisdictions. All other marks and names mentioned herein may be trademark of their respective companies.", + "END_USER_LICENSE": "End User License Agreement", + "OPEN_SOURCE_LICENSE": "Open Source/Third Party License" + }, + "UNKNOWN_ERROR": "There are some unknown errors occurred, please try later", + "UNAUTHORIZED_ERROR": "Session is invalid or expired, you need to sign in to continue the operation", + "FORBIDDEN_ERROR": "You are not allowed to trigger the operation" +} \ No newline at end of file diff --git a/src/ui_ng/src/ng/i18n/lang/zh-lang.json b/src/ui_ng/src/ng/i18n/lang/zh-lang.json new file mode 100644 index 000000000..3081e6870 --- /dev/null +++ b/src/ui_ng/src/ng/i18n/lang/zh-lang.json @@ -0,0 +1,230 @@ +{ + "SIGN_IN": { + "REMEMBER": "记住我", + "INVALID_MSG": "用户名或者密码不正确" + }, + "SIGN_UP": { + "TITLE": "注册" + }, + "BUTTON": { + "CANCEL": "取消", + "OK": "确定", + "DELETE": "删除", + "LOG_IN": "登录", + "SIGN_UP_LINK": "注册账号", + "SIGN_UP": "注册", + "CONFIRM": "确定", + "SEND": "发送", + "SAVE": "保存", + "TEST_MAIL": "测试邮件服务器", + "CLOSE": "关闭" + }, + "TOOLTIP": { + "EMAIL": "请使用正确的邮箱地址，比如name@example.com", + "USER_NAME": "不能包含\"~#$%特殊字符且长度不能超过20", + "FULL_NAME": "长度不能超过20", + "COMMENT": "长度不能超过20", + "CURRENT_PWD": "当前密码必需", + "PASSWORD": "密码长度至少为8且需包含至少一个大写字符，一个小写字符和一个数字", + "CONFIRM_PWD": "当前密码须与上述输入密码一致", + "SIGN_IN_USERNAME": "用户名必需", + "SIGN_IN_PWD": "密码必需", + "SIGN_UP_MAIL": "邮件地址仅用来重置您的密码", + "SIGN_UP_REAL_NAME": "全名", + "ITEM_REQUIRED": "此项必需", + "NUMBER_REQUIRED": "此项必需且为数字", + "PORT_REQUIRED": "此项必需且为合理端口号" + }, + "PLACEHOLDER": { + "CURRENT_PWD": "输入当前密码", + "NEW_PWD": "输入新密码", + "CONFIRM_PWD": "确认新密码", + "USER_NAME": "输入用户名称", + "MAIL": "输入邮箱地址", + "FULL_NAME": "输入全名", + "SIGN_IN_NAME": "用户名", + "SIGN_IN_PWD": "密码" + }, + "PROFILE": { + "TITLE": "用户设置", + "USER_NAME": "用户名", + "EMAIL": "邮箱", + "FULL_NAME": "全名", + "COMMENT": "注释", + "PASSWORD": "密码", + "SAVE_SUCCESS": "成功保存用户配置" + }, + "CHANGE_PWD": { + "TITLE": "修改密码", + "CURRENT_PWD": "当前密码", + "NEW_PWD": "新密码", + "CONFIRM_PWD": "确认密码", + "SAVE_SUCCESS": "更改用户密码成功" + }, + "ACCOUNT_SETTINGS": { + "PROFILE": "用户设置", + "CHANGE_PWD": "修改密码", + "ABOUT": "关于", + "LOGOUT": "退出" + }, + "GLOBAL_SEARCH": { + "PLACEHOLDER": "搜索 Harbor..." + }, + "SIDE_NAV": { + "PROJECTS": "项目", + "SYSTEM_MGMT": { + "NAME": "系统管理", + "USERS": "用户管理", + "REPLICATIONS": "复制管理", + "CONFIGS": "配置管理" + }, + "LOGS": "日志" + }, + "USER": { + "ADD_ACTION": "用户", + "ENABLE_ADMIN_ACTION": "设置为管理员", + "DISABLE_ADMIN_ACTION": "取消管理员", + "DEL_ACTION": "删除", + "FILTER_PLACEHOLDER": "过滤用户", + "COLUMN_NAME": "用户名", + "COLUMN_ADMIN": "管理员", + "COLUMN_EMAIL": "邮件", + "COLUMN_REG_NAME": "注册时间", + "IS_ADMIN": "是", + "IS_NOT_ADMIN": "否", + "ADD_USER_TITLE": "添加用户", + "SAVE_SUCCESS": "添加用户成功", + "DELETION_TITLE": "删除用户确认", + "DELETION_SUMMARY": "你确认删除用户 {{param}}?", + "DELETE_SUCCESS": "删除用户成功" + }, + "PROJECT": { + "PROJECTS": "项目", + "NAME": "项目名称", + "PUBLIC_OR_PRIVATE": "公开/私有", + "REPO_COUNT": "镜像仓库数", + "CREATION_TIME": "创建时间", + "DESCRIPTION": "描述", + "PUBLIC": "公开", + "PRIVATE": "私有", + "MAKE": "设为", + "NEW_POLICY": "新建策略", + "DELETE": "删除", + "MY_PROJECTS": "我的项目", + "PUBLIC_PROJECTS": "公开项目", + "NEW_PROJECT": "新建项目", + "NAME_ALREADY_EXISTS": "项目名称已存在。", + "NAME_IS_ILLEGAL": "项目名称非法。", + "UNKNOWN_ERROR": "创建项目时发生未知错误。", + "ITEMS": "条记录", + "DELETION_TITLE": "删除项目确认", + "DELETION_SUMMARY": "你确认删除项目 {{param}}？", + "FILTER_PLACEHOLDER": "过滤项目" + }, + "PROJECT_DETAIL": { + "REPOSITORIES": "镜像仓库", + "REPLICATION": "复制", + "USERS": "用户", + "LOGS": "日志" + }, + "MEMBER": { + "NEW_MEMBER": "新增成员", + "NAME": "姓名", + "ROLE": "角色", + "SYS_ADMIN": "系统管理员", + "PROJECT_ADMIN": "项目管理员", + "DEVELOPER": "开发人员", + "GUEST": "访客", + "DELETE": "删除", + "ITEMS": "条记录", + "ACTIONS": "操作", + "USERNAME_DOES_NOT_EXISTS": "用户名不存在", + "USERNAME_ALREADY_EXISTS": "用户名已存在", + "UNKNOWN_ERROR": "添加成员时发生未知错误。", + "FILTER_PLACEHOLDER": "过滤成员", + "DELETION_TITLE": "删除项目成员确认", + "DELETION_SUMMARY": "你确认删除项目成员 {{param}}?" + }, + "AUDIT_LOG": { + "USERNAME": "用户名", + "REPOSITORY_NAME": "镜像名称", + "TAGS": "标签", + "OPERATION": "操作", + "TIMESTAMP": "时间戳", + "ALL_OPERATIONS": "所有操作", + "PULL": "Pull", + "PUSH": "Push", + "CREATE": "Create", + "DELETE": "Delete", + "OTHERS": "其他", + "ADVANCED": "高级检索", + "SIMPLE": "简单检索", + "ITEMS": "条记录", + "FILTER_PLACEHOLDER": "过滤日志" + }, + "REPLICATION": { + "FILTER_POLICIES_PLACEHOLDER": "过滤策略", + "FILTER_JOBS_PLACEHOLDER": "过滤任务", + "DELETION_TITLE": "删除策略确认", + "DELETION_SUMMARY": "确认删除策略 {{param}}?", + "FILTER_TARGETS_PLACEHOLDER": "过滤目标", + "DELETION_TITLE_TARGET": "删除目标确认", + "DELETION_SUMMARY_TARGET": "确认删除目标 {{param}}?" + + }, + "ALERT": { + "FORM_CHANGE_CONFIRMATION": "表单内容改变，确认取消?" + }, + "RESET_PWD": { + "TITLE": "重置密码", + "CAPTION": "输入用来重置密码的邮箱", + "EMAIL": "邮箱", + "SUCCESS": "重置密码邮件已成功发送", + "CAPTION2": "请输入您的新密码", + "RESET_OK": "密码重置成功,点击确定按钮前往登录页登录" + }, + "RECENT_LOG": { + "SUB_TITLE": "显示最近", + "SUB_TITLE_SUFIX": "条日志记录" + }, + "CONFIG": { + "TITLE": "配置", + "AUTH": "认证", + "REPLICATION": "复制", + "EMAIL": "邮箱", + "SYSTEM": "系统设置", + "CONFIRM_TITLE": "确认取消", + "CONFIRM_SUMMARY": "配置项有改动, 确定取消?", + "SAVE_SUCCESS": "变更的配置项成功保存", + "MAIL_SERVER": "邮件服务器", + "MAIL_SERVER_PORT": "邮件服务器端口", + "MAIL_USERNAME": "用户名", + "MAIL_PASSWORD": "密码", + "MAIL_FROM": "邮件来源", + "MAIL_SSL": "邮件 SSL", + "SSL_TOOLTIP": "应用SSL到邮件服务器连接", + "VERIFY_REMOTE_CERT": "验证远程证书", + "VERIFY_REMOTE_CERT_TOOLTIP": "确定镜像复制是否要验证远程Harbor镜像库的证书。如果远程镜像库使用的是自签或者非信任证书不要勾选此选项。", + "TOKEN_EXPIRATION": "令牌过期时间（分钟）", + "AUTH_MODE": "认证模式", + "PRO_CREATION_RESTRICTION": "项目创建限制", + "SELF_REGISTRATION": "自注册", + "SELF_REGISTRATION_TOOLTIP": "激活注册功能" + }, + "PAGE_NOT_FOUND": { + "MAIN_TITLE": "页面不存在", + "SUB_TITLE": "重定向到harbor主页面在", + "UNIT": "秒后..." + }, + "ABOUT": { + "VERSION": "版本", + "BUILD": "构建", + "COPYRIGHT": "Copyright 1998-2016 VMware. Inc. All rights reserved. This product is protected by U.S. and international property laws. VMware products are covered by one or more patents listed at", + "TRADEMARK": "Vmware is a registered trademark or trademark of VMware. Inc. in the United States and other jurisdictions. All other marks and names mentioned herein may be trademark of their respective companies.", + "END_USER_LICENSE": "终端用户许可协议", + "OPEN_SOURCE_LICENSE": "开源/第三方许可协议" + }, + "UNKNOWN_ERROR": "发生未知错误,请稍后再试", + "UNAUTHORIZED_ERROR": "会话无效或者已经过期, 请重新登录以继续", + "FORBIDDEN_ERROR": "当前操作被禁止，请确认你有合法的权限" +} \ No newline at end of file