From 6e789d7d466a7fbf7ca39af2ab7f31542ead726b Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Thu, 15 Jun 2017 23:27:54 +0800 Subject: [PATCH 01/19] Use service in harbor-ui library for i18n support --- .../create-edit-endpoint.component.html.ts | 2 +- .../create-edit-rule.component.html.ts | 2 +- .../lib/src/i18n/translate-init.service.ts | 11 +- .../inline-alert/inline-alert.component.ts | 2 +- .../lib/src/push-image/push-image.html.ts | 2 +- src/ui_ng/package.json | 142 +++++++++--------- src/ui_ng/src/app/app.component.ts | 20 --- src/ui_ng/src/app/app.module.ts | 26 +--- src/ui_ng/src/app/core/core.module.ts | 48 ++++-- .../src/app/i18n/missing-trans.handler.ts | 21 --- 10 files changed, 118 insertions(+), 158 deletions(-) delete mode 100644 src/ui_ng/src/app/i18n/missing-trans.handler.ts diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts index 5ef882d06..fe38b5a9d 100644 --- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts +++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts @@ -1,6 +1,6 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `

{{modalTitle}}

- +
diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts index 5e5b5e9c7..8cc94307d 100644 --- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts +++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts @@ -1,7 +1,7 @@ export const CREATE_EDIT_RULE_TEMPLATE: string = `

{{modalTitle}}

- +
diff --git a/src/ui_ng/lib/src/i18n/translate-init.service.ts b/src/ui_ng/lib/src/i18n/translate-init.service.ts index f756812fe..63f02455e 100644 --- a/src/ui_ng/lib/src/i18n/translate-init.service.ts +++ b/src/ui_ng/lib/src/i18n/translate-init.service.ts @@ -13,8 +13,9 @@ export class TranslateServiceInitializer { public init(config: i18nConfig = {}): void { let selectedLang: string = config.defaultLang ? config.defaultLang : DEFAULT_LANG; + let supportedLangs: string[] = config.supportedLangs ? config.supportedLangs : DEFAULT_SUPPORTING_LANGS; - this.translateService.addLangs(config.supportedLangs ? config.supportedLangs : DEFAULT_SUPPORTING_LANGS); + this.translateService.addLangs(supportedLangs); this.translateService.setDefaultLang(selectedLang); if (config.enablei18Support) { @@ -25,9 +26,11 @@ export class TranslateServiceInitializer { langSetting = this.translateService.getBrowserCultureLang().toLowerCase(); } - if (config.supportedLangs && config.supportedLangs.length > 0) { - if (config.supportedLangs.find(lang => lang === langSetting)) { - selectedLang = langSetting; + if (langSetting && langSetting.trim() !== "") { + if (supportedLangs && supportedLangs.length > 0) { + if (supportedLangs.find(lang => lang === langSetting)) { + selectedLang = langSetting; + } } } } diff --git a/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts b/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts index db0378d31..dc62f41fe 100644 --- a/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts +++ b/src/ui_ng/lib/src/inline-alert/inline-alert.component.ts @@ -22,7 +22,7 @@ import { INLINE_ALERT_STYLE } from './inline-alert.component.css'; import { INLINE_ALERT_TEMPLATE } from './inline-alert.component.html'; @Component({ - selector: 'inline-alert', + selector: 'hbr-inline-alert', template: INLINE_ALERT_TEMPLATE, styles: [ INLINE_ALERT_STYLE ] }) diff --git a/src/ui_ng/lib/src/push-image/push-image.html.ts b/src/ui_ng/lib/src/push-image/push-image.html.ts index e75112f62..7fe84ed1e 100644 --- a/src/ui_ng/lib/src/push-image/push-image.html.ts +++ b/src/ui_ng/lib/src/push-image/push-image.html.ts @@ -17,7 +17,7 @@ export const PUSH_IMAGE_HTML: string = `
- +
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index 92453d5d0..e6df24cad 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -1,71 +1,73 @@ { - "name": "harbor", - "version": "1.1.0", - "description": "Harbor UI with Clarity", - "angular-cli": {}, - "scripts": { - "start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json", - "lint": "tslint \"src/**/*.ts\"", - "test": "ng test --single-run", - "pree2e": "webdriver-manager update", - "e2e": "protractor", - "build": "ngc -p tsconfig-aot.json" - }, - "private": true, - "dependencies": { - "@angular/animations": "^4.0.1", - "@angular/common": "^4.0.1", - "@angular/compiler": "^4.0.1", - "@angular/compiler-cli": "^4.0.2", - "@angular/core": "^4.0.1", - "@angular/forms": "^4.0.1", - "@angular/http": "^4.0.1", - "@angular/platform-browser": "^4.0.1", - "@angular/platform-browser-dynamic": "^4.0.1", - "@angular/platform-server": "^4.0.2", - "@angular/router": "^4.0.1", - "@ngx-translate/core": "^6.0.0", - "@ngx-translate/http-loader": "0.0.3", - "@types/jquery": "^2.0.41", - "@webcomponents/custom-elements": "1.0.0-alpha.3", - "clarity-angular": "^0.9.0", - "clarity-icons": "^0.9.0", - "clarity-ui": "^0.9.0", - "core-js": "^2.4.1", - "intl": "^1.2.5", - "mutationobserver-shim": "^0.3.2", - "ngx-cookie": "^1.0.0", - "rxjs": "^5.0.1", - "ts-helpers": "^1.1.1", - "web-animations-js": "^2.2.1", - "zone.js": "^0.8.4" - }, - "devDependencies": { - "@angular/cli": "^1.0.0", - "@angular/compiler-cli": "^4.0.1", - "@types/core-js": "^0.9.34", - "@types/jasmine": "~2.2.30", - "@types/node": "^6.0.42", - "bootstrap": "4.0.0-alpha.5", - "codelyzer": "~2.0.0-beta.4", - "enhanced-resolve": "^3.0.0", - "jasmine-core": "2.4.1", - "jasmine-spec-reporter": "2.5.0", - "karma": "1.2.0", - "karma-cli": "^1.0.1", - "karma-jasmine": "^1.0.2", - "karma-mocha-reporter": "^2.2.1", - "karma-phantomjs-launcher": "^1.0.0", - "karma-remap-istanbul": "^0.2.1", - "protractor": "4.0.9", - "rollup": "^0.41.6", - "rollup-plugin-commonjs": "^8.0.2", - "rollup-plugin-node-resolve": "^3.0.0", - "rollup-plugin-uglify": "^1.0.1", - "ts-node": "1.2.1", - "tslint": "^4.1.1", - "typescript": "~2.2.0", - "typings": "^1.4.0", - "webdriver-manager": "10.2.5" - } -} + "name": "harbor", + "version": "1.1.0", + "description": "Harbor UI with Clarity", + "angular-cli": {}, + "scripts": { + "start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json", + "lint": "tslint \"src/**/*.ts\"", + "test": "ng test --single-run", + "pree2e": "webdriver-manager update", + "e2e": "protractor", + "build": "ngc -p tsconfig-aot.json" + }, + "private": true, + "dependencies": { + "@angular/animations": "^4.0.1", + "@angular/common": "^4.0.1", + "@angular/compiler": "^4.0.1", + "@angular/compiler-cli": "^4.0.2", + "@angular/core": "^4.0.1", + "@angular/forms": "^4.0.1", + "@angular/http": "^4.0.1", + "@angular/platform-browser": "^4.0.1", + "@angular/platform-browser-dynamic": "^4.0.1", + "@angular/platform-server": "^4.0.2", + "@angular/router": "^4.0.1", + "@ngx-translate/core": "^6.0.0", + "@ngx-translate/http-loader": "0.0.3", + "@types/jquery": "^2.0.41", + "@webcomponents/custom-elements": "1.0.0-alpha.3", + "clarity-angular": "^0.9.0", + "clarity-icons": "^0.9.0", + "clarity-ui": "^0.9.0", + "core-js": "^2.4.1", + "harbor-ui": "^0.1.67", + "intl": "^1.2.5", + "mutationobserver-shim": "^0.3.2", + "ngx-clipboard": "^8.0.2", + "ngx-cookie": "^1.0.0", + "rxjs": "^5.0.1", + "ts-helpers": "^1.1.1", + "web-animations-js": "^2.2.1", + "zone.js": "^0.8.4" + }, + "devDependencies": { + "@angular/cli": "^1.0.0", + "@angular/compiler-cli": "^4.0.1", + "@types/core-js": "^0.9.34", + "@types/jasmine": "~2.2.30", + "@types/node": "^6.0.42", + "bootstrap": "4.0.0-alpha.5", + "codelyzer": "~2.0.0-beta.4", + "enhanced-resolve": "^3.0.0", + "jasmine-core": "2.4.1", + "jasmine-spec-reporter": "2.5.0", + "karma": "1.2.0", + "karma-cli": "^1.0.1", + "karma-jasmine": "^1.0.2", + "karma-mocha-reporter": "^2.2.1", + "karma-phantomjs-launcher": "^1.0.0", + "karma-remap-istanbul": "^0.2.1", + "protractor": "4.0.9", + "rollup": "^0.41.6", + "rollup-plugin-commonjs": "^8.0.2", + "rollup-plugin-node-resolve": "^3.0.0", + "rollup-plugin-uglify": "^1.0.1", + "ts-node": "1.2.1", + "tslint": "^4.1.1", + "typescript": "~2.2.0", + "typings": "^1.4.0", + "webdriver-manager": "10.2.5" + } +} \ 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 966e97db4..5c4de2279 100644 --- a/src/ui_ng/src/app/app.component.ts +++ b/src/ui_ng/src/app/app.component.ts @@ -31,20 +31,6 @@ export class AppComponent { private session: SessionService, private appConfigService: AppConfigService, private titleService: Title) { - - translate.addLangs(supportedLangs); - translate.setDefaultLang(enLang); - - //If user has selected lang, then directly use it - let langSetting = this.cookie.get("harbor-lang"); - if (!langSetting || langSetting.trim() === "") { - //Use browser lang - langSetting = translate.getBrowserCultureLang().toLowerCase(); - } - - let selectedLang = this.isLangMatch(langSetting, supportedLangs) ? langSetting : enLang; - translate.use(selectedLang); - //Override page title let key: string = "APP_TITLE.HARBOR"; if (this.appConfigService.isIntegrationMode()) { @@ -55,10 +41,4 @@ export class AppComponent { this.titleService.setTitle(res); }); } - - isLangMatch(browserLang: string, supportedLangs: string[]) { - if (supportedLangs && supportedLangs.length > 0) { - return supportedLangs.find(lang => lang === browserLang); - } - } } diff --git a/src/ui_ng/src/app/app.module.ts b/src/ui_ng/src/app/app.module.ts index caa9e47c7..79e14f046 100644 --- a/src/ui_ng/src/app/app.module.ts +++ b/src/ui_ng/src/app/app.module.ts @@ -13,9 +13,6 @@ // limitations under the License. import { BrowserModule } from '@angular/platform-browser'; import { NgModule, APP_INITIALIZER, LOCALE_ID } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; -import { ClarityModule } from 'clarity-angular'; import { AppComponent } from './app.component'; import { BaseModule } from './base/base.module'; @@ -24,17 +21,9 @@ import { SharedModule } from './shared/shared.module'; import { AccountModule } from './account/account.module'; import { ConfigurationModule } from './config/config.module'; -import { TranslateModule, TranslateLoader, TranslateService, MissingTranslationHandler } from "@ngx-translate/core"; -import { MyMissingTranslationHandler } from './i18n/missing-trans.handler'; -import { TranslateHttpLoader } from '@ngx-translate/http-loader'; -import { Http } from '@angular/http'; - +import { TranslateService } from "@ngx-translate/core"; import { AppConfigService } from './app-config.service'; -export function HttpLoaderFactory(http: Http) { - return new TranslateHttpLoader(http, 'i18n/lang/', '-lang.json'); -} - export function initConfig(configService: AppConfigService) { return () => configService.load(); } @@ -52,18 +41,7 @@ export function getCurrentLanguage(translateService: TranslateService) { BaseModule, AccountModule, HarborRoutingModule, - ConfigurationModule, - TranslateModule.forRoot({ - loader: { - provide: TranslateLoader, - useFactory: (HttpLoaderFactory), - deps: [Http] - }, - missingTranslationHandler: { - provide: MissingTranslationHandler, - useClass: MyMissingTranslationHandler - } - }) + ConfigurationModule ], providers: [ AppConfigService, diff --git a/src/ui_ng/src/app/core/core.module.ts b/src/ui_ng/src/app/core/core.module.ts index 04794a393..790ade9dc 100644 --- a/src/ui_ng/src/app/core/core.module.ts +++ b/src/ui_ng/src/app/core/core.module.ts @@ -19,22 +19,40 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ClarityModule } from 'clarity-angular'; import { CookieModule } from 'ngx-cookie'; +import { + IServiceConfig, + SERVICE_CONFIG, + HarborLibraryModule +} from 'harbor-ui'; + +const uiLibConfig: IServiceConfig = { + enablei18Support: true, + langCookieKey: "harbor-lang", + langMessageLoader: "http", + langMessagePathForHttpLoader: "src/i18n/lang/", + langMessageFileSuffixForHttpLoader: "-lang.json", +}; + @NgModule({ - imports: [ - BrowserModule, - FormsModule, - HttpModule, - ClarityModule.forRoot(), - CookieModule.forRoot(), - BrowserAnimationsModule - ], - exports: [ - BrowserModule, - FormsModule, - HttpModule, - ClarityModule, - BrowserAnimationsModule - ] + imports: [ + BrowserModule, + FormsModule, + HttpModule, + ClarityModule.forRoot(), + CookieModule.forRoot(), + BrowserAnimationsModule, + HarborLibraryModule.forRoot({ + config: { provide: SERVICE_CONFIG, useValue: uiLibConfig } + }) + ], + exports: [ + BrowserModule, + FormsModule, + HttpModule, + ClarityModule, + BrowserAnimationsModule, + HarborLibraryModule + ] }) export class CoreModule { } diff --git a/src/ui_ng/src/app/i18n/missing-trans.handler.ts b/src/ui_ng/src/app/i18n/missing-trans.handler.ts deleted file mode 100644 index 73552efa9..000000000 --- a/src/ui_ng/src/app/i18n/missing-trans.handler.ts +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core'; - -export class MyMissingTranslationHandler implements MissingTranslationHandler { - handle(params: MissingTranslationHandlerParams) { - const missingText = "{Miss Harbor Text}"; - return params.key || missingText; - } -} \ No newline at end of file From 7cf6510e842edf1737836d5049d44fcab9800531 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Sat, 17 Jun 2017 00:01:29 +0800 Subject: [PATCH 02/19] Refactor log component with harbor-ui lib --- .../lib/src/log/recent-log.component.spec.ts | 192 ++++++++++++------ src/ui_ng/lib/src/log/recent-log.component.ts | 45 ++-- src/ui_ng/lib/src/log/recent-log.template.ts | 2 +- src/ui_ng/package.json | 4 +- src/ui_ng/src/app/harbor-routing.module.ts | 4 +- src/ui_ng/src/app/log/log-page.component.html | 3 + src/ui_ng/src/app/log/log-page.component.ts | 22 ++ src/ui_ng/src/app/log/log.module.ts | 6 +- .../src/app/log/recent-log.component.css | 42 ---- .../src/app/log/recent-log.component.html | 38 ---- src/ui_ng/src/app/log/recent-log.component.ts | 112 ---------- 11 files changed, 196 insertions(+), 274 deletions(-) create mode 100644 src/ui_ng/src/app/log/log-page.component.html create mode 100644 src/ui_ng/src/app/log/log-page.component.ts delete mode 100644 src/ui_ng/src/app/log/recent-log.component.css delete mode 100644 src/ui_ng/src/app/log/recent-log.component.html delete mode 100644 src/ui_ng/src/app/log/recent-log.component.ts diff --git a/src/ui_ng/lib/src/log/recent-log.component.spec.ts b/src/ui_ng/lib/src/log/recent-log.component.spec.ts index 7a86ef41a..6ca327c88 100644 --- a/src/ui_ng/lib/src/log/recent-log.component.spec.ts +++ b/src/ui_ng/lib/src/log/recent-log.component.spec.ts @@ -12,36 +12,26 @@ import { ErrorHandler } from '../error-handler/index'; import { SharedModule } from '../shared/shared.module'; import { FilterComponent } from '../filter/filter.component'; +import { click } from '../utils'; + describe('RecentLogComponent (inline template)', () => { let component: RecentLogComponent; let fixture: ComponentFixture; let serviceConfig: IServiceConfig; let logService: AccessLogService; let spy: jasmine.Spy; - let mockItems: AccessLogItem[] = [{ - log_id: 23, - user_id: 45, - project_id: 11, - repo_name: "myproject/", - repo_tag: "N/A", - operation: "create", - op_time: "2017-04-11T10:26:22Z", - username: "user91" - }, { - log_id: 18, - user_id: 1, - project_id: 5, - repo_name: "demo2/vmware/harbor-ui", - repo_tag: "0.6", - operation: "push", - op_time: "2017-03-09T02:29:59Z", - username: "admin" - }]; + let mockItems: AccessLogItem[] = []; let mockData: AccessLog = { metadata: { - xTotalCount: 2 + xTotalCount: 18 }, - data: mockItems + data: [] + }; + let mockData2: AccessLog = { + metadata: { + xTotalCount: 1 + }, + data: [] }; let testConfig: IServiceConfig = { logBaseEndpoint: "/api/logs/testing" @@ -68,8 +58,36 @@ describe('RecentLogComponent (inline template)', () => { serviceConfig = TestBed.get(SERVICE_CONFIG); logService = fixture.debugElement.injector.get(AccessLogService); + //Mock data + for (let i = 0; i < 18; i++) { + let item: AccessLogItem = { + log_id: 23 + i, + user_id: 45 + i, + project_id: 11 + i, + repo_name: "myproject/demo" + i, + repo_tag: "N/A", + operation: "create", + op_time: "2017-04-11T10:26:22Z", + username: "user91" + i + }; + mockItems.push(item); + } + mockData2.data = mockItems.slice(0, 1); + mockData.data = mockItems; + spy = spyOn(logService, 'getRecentLogs') - .and.returnValue(Promise.resolve(mockData)); + .and.callFake(function (params: RequestQueryParams) { + if (params && params.get('repository')) { + return Promise.resolve(mockData2); + } else { + if (params.get('page') == '1') { + mockData.data = mockItems.slice(0, 15); + } else { + mockData.data = mockItems.slice(15, 18) + } + return Promise.resolve(mockData); + } + }); fixture.detectChanges(); }); @@ -83,54 +101,17 @@ describe('RecentLogComponent (inline template)', () => { expect(serviceConfig.logBaseEndpoint).toEqual("/api/logs/testing"); }); - it('should inject and call the AccessLogService', () => { + it('should get data from AccessLogService', async(() => { expect(logService).toBeTruthy(); expect(spy.calls.any()).toBe(true, 'getRecentLogs called'); - }); - it('should get data from AccessLogService', async(() => { fixture.detectChanges(); fixture.whenStable().then(() => { // wait for async getRecentLogs fixture.detectChanges(); expect(component.recentLogs).toBeTruthy(); expect(component.logsCache).toBeTruthy(); - expect(component.recentLogs.length).toEqual(2); - }); - })); - - it('should support filtering list by keywords', async(() => { - fixture.detectChanges(); - - fixture.whenStable().then(() => { - fixture.detectChanges(); - - component.doFilter('push'); - fixture.detectChanges(); - expect(component.recentLogs.length).toEqual(1); - let log: AccessLogItem = component.recentLogs[0]; - expect(log).toBeTruthy(); - expect(log.username).toEqual('admin'); - }); - })); - - it('should support refreshing', async(() => { - fixture.detectChanges(); - - fixture.whenStable().then(() => { - fixture.detectChanges(); - - component.doFilter('push'); - fixture.detectChanges(); - expect(component.recentLogs.length).toEqual(1); - }); - - component.refresh(); - fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - - expect(component.recentLogs.length).toEqual(1); + expect(component.recentLogs.length).toEqual(15); }); })); @@ -143,8 +124,95 @@ describe('RecentLogComponent (inline template)', () => { expect(de).toBeTruthy(); let el: HTMLElement = de.nativeElement; expect(el).toBeTruthy(); - expect(el.textContent.trim()).toEqual('user91'); + expect(el.textContent.trim()).toEqual('user910'); }); })); + it('should support pagination', async(() => { + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + + let el: HTMLButtonElement = fixture.nativeElement.querySelector('.pagination-next'); + expect(el).toBeTruthy(); + el.click(); + + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + + let els: HTMLElement[] = fixture.nativeElement.querySelectorAll('.datagrid-row'); + expect(els).toBeTruthy(); + expect(els.length).toEqual(4); + }); + }); + })); + + it('should support filtering list by keywords', async(() => { + fixture.detectChanges(); + + let el: HTMLElement = fixture.nativeElement.querySelector('.search-btn'); + expect(el).toBeTruthy("Not found search icon"); + click(el); + + fixture.detectChanges(); + let el2: HTMLInputElement = fixture.nativeElement.querySelector('input'); + expect(el2).toBeTruthy("Not found input"); + + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + + component.doFilter("demo0"); + + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + let els: HTMLElement[] = fixture.nativeElement.querySelectorAll('.datagrid-row'); + expect(els).toBeTruthy(); + expect(els.length).toEqual(2); + }); + }); + })); + + it('should support refreshing', async(() => { + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + + let el: HTMLButtonElement = fixture.nativeElement.querySelector('.pagination-next'); + expect(el).toBeTruthy(); + el.click(); + + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + + let els: HTMLElement[] = fixture.nativeElement.querySelectorAll('.datagrid-row'); + expect(els).toBeTruthy(); + expect(els.length).toEqual(4) + + let refreshEl: HTMLElement = fixture.nativeElement.querySelector(".refresh-btn"); + expect(refreshEl).toBeTruthy("Not found refresh button"); + refreshEl.click(); + + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + + let els: HTMLElement[] = fixture.nativeElement.querySelectorAll('.datagrid-row'); + expect(els).toBeTruthy(); + expect(els.length).toEqual(16); + }); + + }); + }); + + })); + }); diff --git a/src/ui_ng/lib/src/log/recent-log.component.ts b/src/ui_ng/lib/src/log/recent-log.component.ts index 3e6b411c2..130bc9758 100644 --- a/src/ui_ng/lib/src/log/recent-log.component.ts +++ b/src/ui_ng/lib/src/log/recent-log.component.ts @@ -41,7 +41,9 @@ export class RecentLogComponent implements OnInit { @Input() withTitle: boolean = false; pageSize: number = DEFAULT_PAGE_SIZE; - currentPage: number = 0; + currentPage: number = 1;//Double bound to pagination component + currentPagePvt: number = 0; //Used to confirm whether page is changed + currentState: State; opTimeComparator: Comparator = new CustomComparator('op_time', 'date'); @@ -61,28 +63,45 @@ export class RecentLogComponent implements OnInit { } public doFilter(terms: string): void { - if (terms.trim() === "") { - //Clear search results - this.recentLogs = this.logsCache.data.filter(log => log.username != ""); - return; + this.currentTerm = terms.trim(); + //Trigger data loading and start from first page + this.loading = true; + this.currentPage = 1; + if (this.currentPagePvt === 1) { + //Force reloading + let st: State = this.currentState; + if (!st) { + st = { + page: {} + }; + } + st.page.from = 0; + st.page.to = this.pageSize - 1; + st.page.size = this.pageSize; + + this.currentPagePvt = 0;//Reset pvt + + this.load(st); } - this.currentTerm = terms; - this.recentLogs = this.logsCache.data.filter(log => this.isMatched(terms, log)); } public refresh(): void { - this.currentTerm = ""; - this.currentPage = 0; - this.load({}); + this.doFilter(""); } load(state: State) { + //Keep it for future filter + this.currentState = state; + let pageNumber: number = this._calculatePage(state); - if (pageNumber !== this.currentPage) { + if (pageNumber !== this.currentPagePvt) { //load data let params: RequestQueryParams = new RequestQueryParams(); params.set("page", '' + pageNumber); params.set("page_size", '' + this.pageSize); + if (this.currentTerm && this.currentTerm !== "") { + params.set('repository', this.currentTerm); + } this.loading = true; toPromise(this.logService.getRecentLogs(params)) @@ -96,7 +115,7 @@ export class RecentLogComponent implements OnInit { //Do customized sorting this._doSorting(state); - this.currentPage = pageNumber; + this.currentPagePvt = pageNumber; this.loading = false; }) @@ -105,6 +124,8 @@ export class RecentLogComponent implements OnInit { this.errorHandler.error(error); }); } else { + //Column sorting and filtering + this.recentLogs = this.logsCache.data.filter(log => log.username != "");//Reset data //Do customized filter diff --git a/src/ui_ng/lib/src/log/recent-log.template.ts b/src/ui_ng/lib/src/log/recent-log.template.ts index 9abf1081c..1f787d41e 100644 --- a/src/ui_ng/lib/src/log/recent-log.template.ts +++ b/src/ui_ng/lib/src/log/recent-log.template.ts @@ -33,7 +33,7 @@ export const LOG_TEMPLATE: string = ` {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} {{'AUDIT_LOG.ITEMS' | translate}} - +
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index e6df24cad..8db501d12 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -32,7 +32,7 @@ "clarity-icons": "^0.9.0", "clarity-ui": "^0.9.0", "core-js": "^2.4.1", - "harbor-ui": "^0.1.67", + "harbor-ui": "^0.1.71", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", "ngx-clipboard": "^8.0.2", @@ -70,4 +70,4 @@ "typings": "^1.4.0", "webdriver-manager": "10.2.5" } -} \ No newline at end of file +} diff --git a/src/ui_ng/src/app/harbor-routing.module.ts b/src/ui_ng/src/app/harbor-routing.module.ts index 15b625602..87ed25937 100644 --- a/src/ui_ng/src/app/harbor-routing.module.ts +++ b/src/ui_ng/src/app/harbor-routing.module.ts @@ -36,7 +36,7 @@ import { ProjectRoutingResolver } from './project/project-routing-resolver.servi 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 { LogPageComponent } from './log/log-page.component'; import { ConfigurationComponent } from './config/config.component'; import { PageNotFoundComponent } from './shared/not-found/not-found.component' import { StartPageComponent } from './base/start-page/start.component'; @@ -68,7 +68,7 @@ const harborRoutes: Routes = [ }, { path: 'logs', - component: RecentLogComponent + component: LogPageComponent }, { path: 'users', diff --git a/src/ui_ng/src/app/log/log-page.component.html b/src/ui_ng/src/app/log/log-page.component.html new file mode 100644 index 000000000..e9f925ed6 --- /dev/null +++ b/src/ui_ng/src/app/log/log-page.component.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/ui_ng/src/app/log/log-page.component.ts b/src/ui_ng/src/app/log/log-page.component.ts new file mode 100644 index 000000000..f02bda70a --- /dev/null +++ b/src/ui_ng/src/app/log/log-page.component.ts @@ -0,0 +1,22 @@ +// Copyright (c) 2017 VMware, Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +import { Component } from '@angular/core'; + +@Component({ + selector: 'log-page', + templateUrl: './log-page.component.html' +}) + +export class LogPageComponent { +} \ 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 6200eb09f..7dea3109a 100644 --- a/src/ui_ng/src/app/log/log.module.ts +++ b/src/ui_ng/src/app/log/log.module.ts @@ -15,17 +15,17 @@ 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'; +import { LogPageComponent } from './log-page.component'; @NgModule({ imports: [SharedModule], declarations: [ AuditLogComponent, - RecentLogComponent + LogPageComponent ], providers: [AuditLogService], exports: [ AuditLogComponent, - RecentLogComponent] + LogPageComponent] }) 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 deleted file mode 100644 index 78a60e959..000000000 --- a/src/ui_ng/src/app/log/recent-log.component.css +++ /dev/null @@ -1,42 +0,0 @@ -.h2-log-override { - margin-top: 0px !important; -} - -.action-head-pos { - padding-right: 18px; -} - -.refresh-btn { - cursor: pointer; -} - -.refresh-btn:hover { - color: #00bfff; -} - -.custom-lines-button { - padding: 0px !important; - min-width: 25px !important; -} - -.lines-button-toggole { - font-size: 16px; - text-decoration: underline; -} - -.log-select { - width: 130px; - display: inline-block; - top: 1px; -} - -.item-divider { - height: 24px; - display: inline-block; - width: 1px; - background-color: #ccc; - opacity: 0.55; - margin-left: 12px; - top: 8px; - position: relative; -} \ 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 deleted file mode 100644 index eed51d17f..000000000 --- a/src/ui_ng/src/app/log/recent-log.component.html +++ /dev/null @@ -1,38 +0,0 @@ -
-

{{'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}} - {{l.op_time | date: 'short'}} - - {{ (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 deleted file mode 100644 index f902c19a1..000000000 --- a/src/ui_ng/src/app/log/recent-log.component.ts +++ /dev/null @@ -1,112 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, OnInit } 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 { - sessionUser: SessionUser = null; - recentLogs: AuditLog[]; - logsCache: AuditLog[]; - onGoing: boolean = false; - lines: number = 10; //Support 10, 25 and 50 - currentTerm: string; - - constructor( - private session: SessionService, - private msgService: MessageService, - private logService: AuditLogService) { - this.sessionUser = this.session.getCurrentUser();//Initialize session - } - - ngOnInit(): void { - this.retrieveLogs(); - } - - handleOnchange($event: any) { - this.currentTerm = ''; - if ($event && $event.target && $event.target["value"]) { - this.lines = $event.target["value"]; - if (this.lines < 10) { - this.lines = 10; - } - this.retrieveLogs(); - } - } - - public get logNumber(): number { - return this.recentLogs?this.recentLogs.length:0; - } - - public get inProgress(): boolean { - return this.onGoing; - } - - public doFilter(terms: string): void { - if (terms.trim() === "") { - this.recentLogs = this.logsCache.filter(log => log.username != ""); - return; - } - this.currentTerm = terms; - this.recentLogs = this.logsCache.filter(log => this.isMatched(terms, log)); - } - - public refresh(): void { - this.retrieveLogs(); - } - - 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); - } - } - ); - } - - 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) || - reg.test(log.repo_tag); - } -} \ No newline at end of file From 56570057017925c3896fc0f53cd8cceec4aa5e6c Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Sat, 17 Jun 2017 23:48:55 +0800 Subject: [PATCH 03/19] Refactor endpoints and replication management view with harbor-ui library --- .../create-edit-endpoint.component.html.ts | 1 - .../create-edit-endpoint.component.ts | 191 +++++----- src/ui_ng/package.json | 4 +- src/ui_ng/src/app/core/core.module.ts | 22 +- src/ui_ng/src/app/harbor-routing.module.ts | 12 +- .../create-edit-destination.component.css | 4 - .../create-edit-destination.component.html | 53 --- .../create-edit-destination.component.ts | 279 -------------- .../destination-page.component.html | 3 + .../destination-page.component.ts} | 17 +- .../destination/destination.component.css | 8 - .../destination/destination.component.html | 33 -- .../destination/destination.component.ts | 157 -------- .../list-job/list-job.component.html | 24 -- .../list-job/list-job.component.ts | 44 --- src/ui_ng/src/app/replication/policy.ts | 48 --- .../replication-page.component.html | 3 + ...arget.ts => replication-page.component.ts} | 35 +- .../app/replication/replication.component.css | 17 - .../replication/replication.component.html | 62 ---- .../app/replication/replication.component.ts | 274 -------------- .../src/app/replication/replication.module.ts | 32 +- .../app/replication/replication.service.ts | 179 --------- .../total-replication-page.component.html | 3 + .../total-replication-page.component.ts} | 27 +- .../total-replication.component.html | 15 - .../total-replication.component.ts | 95 ----- .../create-edit-policy.component.css | 4 - .../create-edit-policy.component.html | 82 ----- .../create-edit-policy.component.ts | 343 ------------------ .../list-policy/list-policy.component.html | 34 -- .../list-policy/list-policy.component.ts | 143 -------- .../message-handler.service.ts | 20 +- src/ui_ng/src/app/shared/shared.module.ts | 29 +- src/ui_ng/src/i18n/lang/en-us-lang.json | 2 + src/ui_ng/src/i18n/lang/es-es-lang.json | 2 + src/ui_ng/src/i18n/lang/zh-cn-lang.json | 2 + 37 files changed, 202 insertions(+), 2101 deletions(-) delete mode 100644 src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.css delete mode 100644 src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html delete mode 100644 src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts create mode 100644 src/ui_ng/src/app/replication/destination/destination-page.component.html rename src/ui_ng/src/app/{shared/create-edit-policy/create-edit-policy.ts => replication/destination/destination-page.component.ts} (74%) delete mode 100644 src/ui_ng/src/app/replication/destination/destination.component.css delete mode 100644 src/ui_ng/src/app/replication/destination/destination.component.html delete mode 100644 src/ui_ng/src/app/replication/destination/destination.component.ts delete mode 100644 src/ui_ng/src/app/replication/list-job/list-job.component.html delete mode 100644 src/ui_ng/src/app/replication/list-job/list-job.component.ts delete mode 100644 src/ui_ng/src/app/replication/policy.ts create mode 100644 src/ui_ng/src/app/replication/replication-page.component.html rename src/ui_ng/src/app/replication/{target.ts => replication-page.component.ts} (59%) delete mode 100644 src/ui_ng/src/app/replication/replication.component.css delete mode 100644 src/ui_ng/src/app/replication/replication.component.html delete mode 100644 src/ui_ng/src/app/replication/replication.component.ts delete mode 100644 src/ui_ng/src/app/replication/replication.service.ts create mode 100644 src/ui_ng/src/app/replication/total-replication/total-replication-page.component.html rename src/ui_ng/src/app/replication/{job.ts => total-replication/total-replication-page.component.ts} (59%) delete mode 100644 src/ui_ng/src/app/replication/total-replication/total-replication.component.html delete mode 100644 src/ui_ng/src/app/replication/total-replication/total-replication.component.ts delete mode 100644 src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.css delete mode 100644 src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html delete mode 100644 src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts delete mode 100644 src/ui_ng/src/app/shared/list-policy/list-policy.component.html delete mode 100644 src/ui_ng/src/app/shared/list-policy/list-policy.component.ts diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts index fe38b5a9d..f451b1bba 100644 --- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts +++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts @@ -40,7 +40,6 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = ` - {{ pingTestMessage }}
diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts index 760c305b0..9cd960aea 100644 --- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts +++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts @@ -11,7 +11,15 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -import { Component, Output, EventEmitter, ViewChild, AfterViewChecked } from '@angular/core'; +import { + Component, + Output, + EventEmitter, + ViewChild, + AfterViewChecked, + ChangeDetectionStrategy, + ChangeDetectorRef +} from '@angular/core'; import { NgForm } from '@angular/forms'; import { EndpointService } from '../service/endpoint.service'; @@ -35,22 +43,19 @@ const FAKE_PASSWORD = 'rjGcfuRu'; @Component({ selector: 'create-edit-endpoint', template: CREATE_EDIT_ENDPOINT_TEMPLATE, - styles: [ CREATE_EDIT_ENDPOINT_STYLE ] + styles: [CREATE_EDIT_ENDPOINT_STYLE], + changeDetection: ChangeDetectionStrategy.OnPush }) export class CreateEditEndpointComponent implements AfterViewChecked { modalTitle: string; createEditDestinationOpened: boolean; - editable: boolean; - testOngoing: boolean; - pingTestMessage: string; - pingStatus: boolean; actionType: ActionType; - target: Endpoint = this.initEndpoint; + target: Endpoint = this.initEndpoint; initVal: Endpoint = this.initEndpoint; targetForm: NgForm; @@ -69,7 +74,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked { inlineAlert: InlineAlertComponent; @Output() reload = new EventEmitter(); - + get initEndpoint(): Endpoint { return { @@ -84,10 +89,11 @@ export class CreateEditEndpointComponent implements AfterViewChecked { constructor( private endpointService: EndpointService, private errorHandler: ErrorHandler, - private translateService: TranslateService) {} + private translateService: TranslateService, + private ref: ChangeDetectorRef) { } openCreateEditTarget(editable: boolean, targetId?: number | string) { - + this.target = this.initEndpoint; this.editable = editable; this.createEditDestinationOpened = true; @@ -95,38 +101,32 @@ export class CreateEditEndpointComponent implements AfterViewChecked { this.endpointHasChanged = false; this.targetNameHasChanged = false; - this.pingTestMessage = ''; - this.pingStatus = true; - this.testOngoing = false; + this.testOngoing = false; - if(targetId) { + if (targetId) { this.actionType = ActionType.EDIT; - this.translateService.get('DESTINATION.TITLE_EDIT').subscribe(res=>this.modalTitle=res); + this.translateService.get('DESTINATION.TITLE_EDIT').subscribe(res => this.modalTitle = res); toPromise(this.endpointService - .getEndpoint(targetId)) - .then( - target=>{ - this.target = target; - this.initVal.name = this.target.name; - this.initVal.endpoint = this.target.endpoint; - this.initVal.username = this.target.username; - this.initVal.password = FAKE_PASSWORD; - this.target.password = this.initVal.password; - }) - .catch(error=>this.errorHandler.error(error)); + .getEndpoint(targetId)) + .then( + target => { + this.target = target; + this.initVal.name = this.target.name; + this.initVal.endpoint = this.target.endpoint; + this.initVal.username = this.target.username; + this.initVal.password = FAKE_PASSWORD; + this.target.password = this.initVal.password; + }) + .catch(error => this.errorHandler.error(error)); } else { this.actionType = ActionType.ADD_NEW; - this.translateService.get('DESTINATION.TITLE_ADD').subscribe(res=>this.modalTitle=res); + this.translateService.get('DESTINATION.TITLE_ADD').subscribe(res => this.modalTitle = res); } } testConnection() { - this.translateService.get('DESTINATION.TESTING_CONNECTION').subscribe(res=>this.pingTestMessage=res); - this.pingStatus = true; - this.testOngoing = !this.testOngoing; - let payload: Endpoint = this.initEndpoint; - if(this.endpointHasChanged) { + if (this.endpointHasChanged) { payload.endpoint = this.target.endpoint; payload.username = this.target.username; payload.password = this.target.password; @@ -134,42 +134,41 @@ export class CreateEditEndpointComponent implements AfterViewChecked { payload.id = this.target.id; } + this.testOngoing = true; toPromise(this.endpointService .pingEndpoint(payload)) .then( - response=>{ - this.pingStatus = true; - this.translateService.get('DESTINATION.TEST_CONNECTION_SUCCESS').subscribe(res=>this.pingTestMessage=res); - this.testOngoing = !this.testOngoing; - }).catch( - error=>{ - this.pingStatus = false; - this.translateService.get('DESTINATION.TEST_CONNECTION_FAILURE').subscribe(res=>this.pingTestMessage=res); - this.testOngoing = !this.testOngoing; - }); + response => { + this.testOngoing = false; + this.inlineAlert.showInlineSuccess({ message: "DESTINATION.TEST_CONNECTION_SUCCESS" }); + }).catch( + error => { + this.testOngoing = false; + this.inlineAlert.showInlineError('DESTINATION.TEST_CONNECTION_FAILURE'); + }); } changedTargetName($event: any) { - if(this.editable) { + if (this.editable) { this.targetNameHasChanged = true; } } clearPassword($event: any) { - if(this.editable) { + if (this.editable) { this.target.password = ''; this.endpointHasChanged = true; } } onSubmit() { - switch(this.actionType) { - case ActionType.ADD_NEW: - this.addEndpoint(); - break; - case ActionType.EDIT: - this.updateEndpoint(); - break; + switch (this.actionType) { + case ActionType.ADD_NEW: + this.addEndpoint(); + break; + case ActionType.EDIT: + this.updateEndpoint(); + break; } } @@ -177,31 +176,31 @@ export class CreateEditEndpointComponent implements AfterViewChecked { toPromise(this.endpointService .createEndpoint(this.target)) .then( - response=>{ - this.translateService.get('DESTINATION.CREATED_SUCCESS') - .subscribe(res=>this.errorHandler.info(res)); - this.createEditDestinationOpened = false; - this.reload.emit(true); - }) + response => { + this.translateService.get('DESTINATION.CREATED_SUCCESS') + .subscribe(res => this.errorHandler.info(res)); + this.createEditDestinationOpened = false; + this.reload.emit(true); + }) .catch( - error=>{ - let errorMessageKey = this.handleErrorMessageKey(error.status); - this.translateService - .get(errorMessageKey) - .subscribe(res=>{ - this.errorHandler.error(res); - }); - } + error => { + let errorMessageKey = this.handleErrorMessageKey(error.status); + this.translateService + .get(errorMessageKey) + .subscribe(res => { + this.inlineAlert.showInlineError(res); + }); + } ); } updateEndpoint() { - if(!(this.targetNameHasChanged || this.endpointHasChanged)) { + if (!(this.targetNameHasChanged || this.endpointHasChanged)) { this.createEditDestinationOpened = false; return; - } + } let payload: Endpoint = this.initEndpoint; - if(this.targetNameHasChanged) { + if (this.targetNameHasChanged) { payload.name = this.target.name; delete payload.endpoint; } @@ -210,47 +209,47 @@ export class CreateEditEndpointComponent implements AfterViewChecked { payload.username = this.target.username; payload.password = this.target.password; delete payload.name; - } + } - if(!this.target.id) { return; } + if (!this.target.id) { return; } toPromise(this.endpointService .updateEndpoint(this.target.id, payload)) .then( - response=>{ - this.translateService.get('DESTINATION.UPDATED_SUCCESS') - .subscribe(res=>this.errorHandler.info(res)); - this.createEditDestinationOpened = false; - this.reload.emit(true); - }) + response => { + this.translateService.get('DESTINATION.UPDATED_SUCCESS') + .subscribe(res => this.errorHandler.info(res)); + this.createEditDestinationOpened = false; + this.reload.emit(true); + }) .catch( - error=>{ - let errorMessageKey = this.handleErrorMessageKey(error.status); - this.translateService - .get(errorMessageKey) - .subscribe(res=>{ - this.errorHandler.error(res); - }); - } + error => { + let errorMessageKey = this.handleErrorMessageKey(error.status); + this.translateService + .get(errorMessageKey) + .subscribe(res => { + this.inlineAlert.showInlineError(res); + }); + } ); } handleErrorMessageKey(status: number): string { - switch(status) { - case 409:this + switch (status) { + case 409: this return 'DESTINATION.CONFLICT_NAME'; case 400: return 'DESTINATION.INVALID_NAME'; default: return 'UNKNOWN_ERROR'; - } + } } onCancel() { - if(this.hasChanged) { - this.inlineAlert.showInlineConfirmation({message: 'ALERT.FORM_CHANGE_CONFIRMATION'}); + if (this.hasChanged) { + this.inlineAlert.showInlineConfirmation({ message: 'ALERT.FORM_CHANGE_CONFIRMATION' }); } else { this.createEditDestinationOpened = false; - if(this.targetForm) + if (this.targetForm) this.targetForm.reset(); } } @@ -262,20 +261,20 @@ export class CreateEditEndpointComponent implements AfterViewChecked { ngAfterViewChecked(): void { this.targetForm = this.currentForm; - if(this.targetForm) { - let comparison: {[key: string]: any} = { + if (this.targetForm) { + let comparison: { [key: string]: any } = { targetName: this.initVal.name, endpointUrl: this.initVal.endpoint, username: this.initVal.username, password: this.initVal.password }; let self: CreateEditEndpointComponent | any = this; - if(self) { - self.targetForm.valueChanges.subscribe((data: any)=>{ - for(let key in data) { + if (self) { + self.targetForm.valueChanges.subscribe((data: any) => { + for (let key in data) { let current = data[key]; let origin: string = comparison[key]; - if(((this.actionType === ActionType.EDIT && this.editable && !current) || current) && + if (((this.actionType === ActionType.EDIT && this.editable && !current) || current) && current !== origin) { this.hasChanged = true; break; diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index 8db501d12..605bf5e29 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -32,7 +32,7 @@ "clarity-icons": "^0.9.0", "clarity-ui": "^0.9.0", "core-js": "^2.4.1", - "harbor-ui": "^0.1.71", + "harbor-ui": "^0.1.83", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", "ngx-clipboard": "^8.0.2", @@ -70,4 +70,4 @@ "typings": "^1.4.0", "webdriver-manager": "10.2.5" } -} +} \ No newline at end of file diff --git a/src/ui_ng/src/app/core/core.module.ts b/src/ui_ng/src/app/core/core.module.ts index 790ade9dc..9377da3da 100644 --- a/src/ui_ng/src/app/core/core.module.ts +++ b/src/ui_ng/src/app/core/core.module.ts @@ -19,20 +19,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ClarityModule } from 'clarity-angular'; import { CookieModule } from 'ngx-cookie'; -import { - IServiceConfig, - SERVICE_CONFIG, - HarborLibraryModule -} from 'harbor-ui'; - -const uiLibConfig: IServiceConfig = { - enablei18Support: true, - langCookieKey: "harbor-lang", - langMessageLoader: "http", - langMessagePathForHttpLoader: "src/i18n/lang/", - langMessageFileSuffixForHttpLoader: "-lang.json", -}; - @NgModule({ imports: [ BrowserModule, @@ -40,18 +26,14 @@ const uiLibConfig: IServiceConfig = { HttpModule, ClarityModule.forRoot(), CookieModule.forRoot(), - BrowserAnimationsModule, - HarborLibraryModule.forRoot({ - config: { provide: SERVICE_CONFIG, useValue: uiLibConfig } - }) + BrowserAnimationsModule ], exports: [ BrowserModule, FormsModule, HttpModule, ClarityModule, - BrowserAnimationsModule, - HarborLibraryModule + BrowserAnimationsModule ] }) export class CoreModule { diff --git a/src/ui_ng/src/app/harbor-routing.module.ts b/src/ui_ng/src/app/harbor-routing.module.ts index 87ed25937..e72318824 100644 --- a/src/ui_ng/src/app/harbor-routing.module.ts +++ b/src/ui_ng/src/app/harbor-routing.module.ts @@ -21,14 +21,14 @@ import { ProjectComponent } from './project/project.component'; import { UserComponent } from './user/user.component'; import { ReplicationManagementComponent } from './replication/replication-management/replication-management.component'; -import { TotalReplicationComponent } from './replication/total-replication/total-replication.component'; -import { DestinationComponent } from './replication/destination/destination.component'; +import { TotalReplicationPageComponent } from './replication/total-replication/total-replication-page.component'; +import { DestinationPageComponent } from './replication/destination/destination-page.component'; import { ProjectDetailComponent } from './project/project-detail/project-detail.component'; import { RepositoryComponent } from './repository/repository.component'; import { TagRepositoryComponent } from './repository/tag-repository/tag-repository.component'; -import { ReplicationComponent } from './replication/replication.component'; +import { ReplicationPageComponent } from './replication/replication-page.component'; import { MemberComponent } from './project/member/member.component'; import { AuditLogComponent } from './log/audit-log.component'; @@ -83,11 +83,11 @@ const harborRoutes: Routes = [ children: [ { path: 'rules', - component: TotalReplicationComponent + component: TotalReplicationPageComponent }, { path: 'endpoints', - component: DestinationComponent + component: DestinationPageComponent } ] }, @@ -113,7 +113,7 @@ const harborRoutes: Routes = [ }, { path: 'replication', - component: ReplicationComponent, + component: ReplicationPageComponent, canActivate: [SystemAdminGuard] }, { diff --git a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.css b/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.css deleted file mode 100644 index 0bcac82e9..000000000 --- a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.css +++ /dev/null @@ -1,4 +0,0 @@ -.form-group-label-override { - font-size: 14px; - font-weight: 400; -} \ No newline at end of file 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 deleted file mode 100644 index 1d9572c7d..000000000 --- a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.html +++ /dev/null @@ -1,53 +0,0 @@ - -

{{modalTitle}}

- -
-
-
- - {{'DESTINATION.CANNOT_EDIT' | translate}} - -
-
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - - {{ 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 deleted file mode 100644 index d4fd50fd2..000000000 --- a/src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts +++ /dev/null @@ -1,279 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, Output, EventEmitter, ViewChild, AfterViewChecked } from '@angular/core'; -import { NgForm } from '@angular/forms'; - -import { ReplicationService } from '../replication.service'; -import { MessageHandlerService } from '../../shared/message-handler/message-handler.service'; -import { ActionType } from '../../shared/shared.const'; - -import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component'; - -import { Target } from '../target'; - -import { TranslateService } from '@ngx-translate/core'; - -const FAKE_PASSWORD = 'rjGcfuRu'; - -@Component({ - selector: 'create-edit-destination', - templateUrl: './create-edit-destination.component.html', - styleUrls: [ 'create-edit-destination.component.css' ] -}) -export class CreateEditDestinationComponent implements AfterViewChecked { - - modalTitle: string; - createEditDestinationOpened: boolean; - - editable: boolean; - - testOngoing: boolean; - pingTestMessage: string; - pingStatus: boolean; - - actionType: ActionType; - - target: Target = new Target(); - initVal: Target = new Target(); - - targetForm: NgForm; - - staticBackdrop: boolean = true; - closable: boolean = false; - - @ViewChild('targetForm') - currentForm: NgForm; - - hasChanged: boolean; - - endpointHasChanged: boolean; - targetNameHasChanged: boolean; - - @ViewChild(InlineAlertComponent) - inlineAlert: InlineAlertComponent; - - @Output() reload = new EventEmitter(); - - constructor( - private replicationService: ReplicationService, - private messageHandlerService: MessageHandlerService, - private translateService: TranslateService) {} - - openCreateEditTarget(editable: boolean, targetId?: number) { - - this.target = new Target(); - this.createEditDestinationOpened = true; - this.editable = editable; - - this.hasChanged = false; - this.endpointHasChanged = false; - this.targetNameHasChanged = false; - - this.pingTestMessage = ''; - this.pingStatus = true; - this.testOngoing = false; - - if(targetId) { - this.actionType = ActionType.EDIT; - this.translateService.get('DESTINATION.TITLE_EDIT').subscribe(res=>this.modalTitle=res); - this.replicationService - .getTarget(targetId) - .subscribe( - target=>{ - this.target = target; - this.initVal.name = this.target.name; - this.initVal.endpoint = this.target.endpoint; - this.initVal.username = this.target.username; - this.initVal.password = FAKE_PASSWORD; - this.target.password = this.initVal.password; - }, - error=>this.messageHandlerService.handleError(error) - ); - } else { - this.actionType = ActionType.ADD_NEW; - this.translateService.get('DESTINATION.TITLE_ADD').subscribe(res=>this.modalTitle=res); - } - } - - testConnection() { - this.translateService.get('DESTINATION.TESTING_CONNECTION').subscribe(res=>this.pingTestMessage=res); - this.pingStatus = true; - this.testOngoing = !this.testOngoing; - - let payload: Target = new Target(); - if(this.endpointHasChanged) { - payload.endpoint = this.target.endpoint; - payload.username = this.target.username; - payload.password = this.target.password; - } else { - payload.id = this.target.id; - } - - this.replicationService - .pingTarget(payload) - .subscribe( - response=>{ - this.pingStatus = true; - this.translateService.get('DESTINATION.TEST_CONNECTION_SUCCESS').subscribe(res=>this.pingTestMessage=res); - this.testOngoing = !this.testOngoing; - }, - error=>{ - this.pingStatus = false; - this.translateService.get('DESTINATION.TEST_CONNECTION_FAILURE').subscribe(res=>this.pingTestMessage=res); - this.testOngoing = !this.testOngoing; - } - ) - } - - changedTargetName($event: any) { - if(this.editable) { - this.targetNameHasChanged = true; - } - } - - clearPassword($event: any) { - if(this.editable) { - this.target.password = ''; - this.endpointHasChanged = true; - } - } - - onSubmit() { - switch(this.actionType) { - case ActionType.ADD_NEW: - this.replicationService - .createTarget(this.target) - .subscribe( - response=>{ - this.messageHandlerService.showSuccess('DESTINATION.CREATED_SUCCESS'); - this.createEditDestinationOpened = false; - this.reload.emit(true); - }, - error=>{ - let errorMessageKey = ''; - switch(error.status) { - case 409: - errorMessageKey = 'DESTINATION.CONFLICT_NAME'; - break; - case 400: - errorMessageKey = 'DESTINATION.INVALID_NAME'; - break; - default: - errorMessageKey = 'UNKNOWN_ERROR'; - } - - this.translateService - .get(errorMessageKey) - .subscribe(res=>{ - if(this.messageHandlerService.isAppLevel(error)) { - this.messageHandlerService.handleError(error); - this.createEditDestinationOpened = false; - } else { - this.inlineAlert.showInlineError(res); - } - }); - } - ); - break; - case ActionType.EDIT: - if(!(this.targetNameHasChanged || this.endpointHasChanged)) { - this.createEditDestinationOpened = false; - return; - } - let payload: Target = new Target(); - if(this.targetNameHasChanged) { - payload.name = this.target.name; - } - if (this.endpointHasChanged) { - payload.endpoint = this.target.endpoint; - payload.username = this.target.username; - payload.password = this.target.password; - } - this.replicationService - .updateTarget(payload, this.target.id) - .subscribe( - response=>{ - this.messageHandlerService.showSuccess('DESTINATION.UPDATED_SUCCESS'); - this.createEditDestinationOpened = false; - this.reload.emit(true); - }, - error=>{ - let errorMessageKey = ''; - switch(error.status) { - case 409: - errorMessageKey = 'DESTINATION.CONFLICT_NAME'; - break; - case 400: - errorMessageKey = 'DESTINATION.INVALID_NAME'; - break; - default: - errorMessageKey = 'UNKNOWN_ERROR'; - } - this.translateService - .get(errorMessageKey) - .subscribe(res=>{ - if(this.messageHandlerService.isAppLevel(error)) { - this.messageHandlerService.handleError(error); - this.createEditDestinationOpened = false; - } else { - this.inlineAlert.showInlineError(res); - } - }); - } - ); - break; - } - } - - onCancel() { - if(this.hasChanged) { - this.inlineAlert.showInlineConfirmation({message: 'ALERT.FORM_CHANGE_CONFIRMATION'}); - } else { - this.createEditDestinationOpened = false; - this.targetForm.reset(); - } - } - - confirmCancel(confirmed: boolean) { - this.createEditDestinationOpened = false; - this.inlineAlert.close(); - } - - mappedName: {} = { - 'targetName': 'name', - 'endpointUrl': 'endpoint', - 'username': 'username', - 'password': 'password' - }; - - ngAfterViewChecked(): void { - this.targetForm = this.currentForm; - if(this.targetForm) { - this.targetForm.valueChanges.subscribe(data=>{ - for(let i in data) { - let current = data[i]; - let origin = this.initVal[this.mappedName[i]]; - if(((this.actionType === ActionType.EDIT && this.editable && !current) || current) && current !== origin) { - this.hasChanged = true; - break; - } else { - this.hasChanged = false; - this.inlineAlert.close(); - } - } - }); - } - } - -} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/destination/destination-page.component.html b/src/ui_ng/src/app/replication/destination/destination-page.component.html new file mode 100644 index 000000000..3d0c138d2 --- /dev/null +++ b/src/ui_ng/src/app/replication/destination/destination-page.component.html @@ -0,0 +1,3 @@ +
+ +
\ 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/replication/destination/destination-page.component.ts similarity index 74% rename from src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.ts rename to src/ui_ng/src/app/replication/destination/destination-page.component.ts index 9b43a994d..ef0b465d1 100644 --- a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.ts +++ b/src/ui_ng/src/app/replication/destination/destination-page.component.ts @@ -11,14 +11,11 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -export class CreateEditPolicy { - policyId: number; - name: string; - description: string; - enable: boolean; - targetId: number; - targetName: string; - endpointUrl: string; - username: string; - password: string; +import { Component } from '@angular/core'; + +@Component({ + selector: 'destination-page', + templateUrl: 'destination-page.component.html' +}) +export class DestinationPageComponent { } \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/destination/destination.component.css b/src/ui_ng/src/app/replication/destination/destination.component.css deleted file mode 100644 index c9617ab29..000000000 --- a/src/ui_ng/src/app/replication/destination/destination.component.css +++ /dev/null @@ -1,8 +0,0 @@ -.option-left { - padding-left: 16px; - margin-top: 24px; -} -.option-right { - padding-right: 16px; - margin-top: 36px; -} diff --git a/src/ui_ng/src/app/replication/destination/destination.component.html b/src/ui_ng/src/app/replication/destination/destination.component.html deleted file mode 100644 index e8994c609..000000000 --- a/src/ui_ng/src/app/replication/destination/destination.component.html +++ /dev/null @@ -1,33 +0,0 @@ -
-
-
-
- - -
-
- - - - -
-
-
-
- - {{'DESTINATION.NAME' | translate}} - {{'DESTINATION.URL' | translate}} - {{'DESTINATION.CREATION_TIME' | translate}} - - - - - - {{t.name}} - {{t.endpoint}} - {{t.creation_time | date: 'short'}} - - {{ (targets ? targets.length : 0) }} {{'DESTINATION.ITEMS' | translate}} - -
-
\ 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 deleted file mode 100644 index 37f049471..000000000 --- a/src/ui_ng/src/app/replication/destination/destination.component.ts +++ /dev/null @@ -1,157 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; -import { Target } from '../target'; -import { ReplicationService } from '../replication.service'; -import { MessageHandlerService } from '../../shared/message-handler/message-handler.service'; - -import { ConfirmationDialogService } from '../../shared/confirmation-dialog/confirmation-dialog.service'; -import { ConfirmationMessage } from '../../shared/confirmation-dialog/confirmation-message'; - -import { ConfirmationTargets, ConfirmationState, ConfirmationButtons } 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', - styleUrls: ['./destination.component.css'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class DestinationComponent implements OnInit { - - @ViewChild(CreateEditDestinationComponent) - createEditDestinationComponent: CreateEditDestinationComponent; - - targets: Target[]; - target: Target; - - targetName: string; - subscription: Subscription; - - constructor( - private replicationService: ReplicationService, - private messageHandlerService: MessageHandlerService, - private deletionDialogService: ConfirmationDialogService, - private ref: ChangeDetectorRef) { - this.subscription = this.deletionDialogService.confirmationConfirm$.subscribe(message => { - if (message && - message.source === ConfirmationTargets.TARGET && - message.state === ConfirmationState.CONFIRMED) { - let targetId = message.data; - this.replicationService - .deleteTarget(targetId) - .subscribe( - response => { - this.messageHandlerService.showSuccess('DESTINATION.DELETED_SUCCESS'); - this.reload(true); - }, - error => { - if(error && error.status === 412) { - this.messageHandlerService.showError('DESTINATION.FAILED_TO_DELETE_TARGET_IN_USED', ''); - } else { - this.messageHandlerService.handleError(error); - } - }); - } - }); - let hnd = setInterval(()=>ref.markForCheck(), 100); - setTimeout(()=>clearInterval(hnd), 1000); - } - - 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 || []; - let hnd = setInterval(()=>this.ref.markForCheck(), 100); - setTimeout(()=>clearInterval(hnd), 1000); - }, - error => this.messageHandlerService.handleError(error) - ); - } - - doSearchTargets(targetName: string) { - this.targetName = targetName; - this.retrieve(targetName); - } - - refreshTargets() { - this.retrieve(''); - } - - reload($event: any) { - this.targetName = ''; - this.retrieve(''); - } - - openModal() { - this.createEditDestinationComponent.openCreateEditTarget(true); - this.target = new Target(); - } - - editTarget(target: Target) { - if (target) { - let editable = true; - this.replicationService - .listTargetPolicies(target.id) - .subscribe( - policies=>{ - if(policies && policies.length > 0) { - for(let i = 0; i < policies.length; i++){ - let p = policies[i]; - if(p.enabled === 1) { - editable = false; - break; - } - } - } - this.createEditDestinationComponent.openCreateEditTarget(editable, target.id); - let hnd = setInterval(()=>this.ref.markForCheck(), 100); - setTimeout(()=>clearInterval(hnd), 1000); - }, - error=>this.messageHandlerService.handleError(error) - ); - - } - } - - deleteTarget(target: Target) { - if (target) { - let targetId = target.id; - let deletionMessage = new ConfirmationMessage( - 'REPLICATION.DELETION_TITLE_TARGET', - 'REPLICATION.DELETION_SUMMARY_TARGET', - target.name, - target.id, - ConfirmationTargets.TARGET, - ConfirmationButtons.DELETE_CANCEL); - this.deletionDialogService.openComfirmDialog(deletionMessage); - } - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/list-job/list-job.component.html b/src/ui_ng/src/app/replication/list-job/list-job.component.html deleted file mode 100644 index 04c3ae24f..000000000 --- a/src/ui_ng/src/app/replication/list-job/list-job.component.html +++ /dev/null @@ -1,24 +0,0 @@ - - {{'REPLICATION.NAME' | translate}} - {{'REPLICATION.STATUS' | translate}} - {{'REPLICATION.OPERATION' | translate}} - {{'REPLICATION.CREATION_TIME' | translate}} - {{'REPLICATION.END_TIME' | translate}} - {{'REPLICATION.LOGS' | translate}} - - {{j.repository}} - {{j.status}} - {{j.operation}} - {{j.creation_time | date: 'short'}} - {{j.update_time | date: 'short'}} - - - - - - - - {{ totalRecordCount }} {{'REPLICATION.ITEMS' | translate}} - - - \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/list-job/list-job.component.ts b/src/ui_ng/src/app/replication/list-job/list-job.component.ts deleted file mode 100644 index f39dfc591..000000000 --- a/src/ui_ng/src/app/replication/list-job/list-job.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; -import { Job } from '../job'; -import { State } from 'clarity-angular'; -import { MessageHandlerService } from '../../shared/message-handler/message-handler.service'; - -@Component({ - selector: 'list-job', - templateUrl: 'list-job.component.html', - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ListJobComponent { - @Input() jobs: Job[]; - @Input() totalRecordCount: number; - @Input() totalPage: number; - @Output() paginate = new EventEmitter(); - - constructor( - private messageHandlerService: MessageHandlerService, - private ref: ChangeDetectorRef) { - let hnd = setInterval(()=>ref.markForCheck(), 100); - setTimeout(()=>clearInterval(hnd), 1000); - } - - pageOffset: number = 1; - - refresh(state: State) { - if(this.jobs) { - this.paginate.emit(state); - } - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/policy.ts b/src/ui_ng/src/app/replication/policy.ts deleted file mode 100644 index f0aebd5af..000000000 --- a/src/ui_ng/src/app/replication/policy.ts +++ /dev/null @@ -1,48 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -/* - { - "id": 1, - "project_id": 1, - "project_name": "library", - "target_id": 1, - "target_name": "target_01", - "name": "sync_01", - "enabled": 0, - "description": "sync_01 desc.", - "cron_str": "", - "start_time": "0001-01-01T00:00:00Z", - "creation_time": "2017-02-24T06:41:52Z", - "update_time": "2017-02-24T06:41:52Z", - "error_job_count": 0, - "deleted": 0 - } -*/ - -export class Policy { - id: number; - project_id: number; - project_name: string; - target_id: number; - target_name: string; - name: string; - enabled: number; - description: string; - cron_str: string; - start_time: Date; - creation_time: Date; - update_time: Date; - error_job_count: number; - deleted: number; -} \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/replication-page.component.html b/src/ui_ng/src/app/replication/replication-page.component.html new file mode 100644 index 000000000..413a9c44c --- /dev/null +++ b/src/ui_ng/src/app/replication/replication-page.component.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/ui_ng/src/app/replication/target.ts b/src/ui_ng/src/app/replication/replication-page.component.ts similarity index 59% rename from src/ui_ng/src/app/replication/target.ts rename to src/ui_ng/src/app/replication/replication-page.component.ts index 47e5bff8d..eb7b2d2ce 100644 --- a/src/ui_ng/src/app/replication/target.ts +++ b/src/ui_ng/src/app/replication/replication-page.component.ts @@ -11,26 +11,19 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -/* - { - "id": 1, - "endpoint": "http://10.117.4.151", - "name": "target_01", - "username": "admin", - "password": "Harbor12345", - "type": 0, - "creation_time": "2017-02-24T06:41:52Z", - "update_time": "2017-02-24T06:41:52Z" - } -*/ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; -export class Target { - id: number; - endpoint: string; - name: string; - username: string; - password: string; - type: number; - creation_time: Date; - update_time: Date; +@Component({ + selector: 'replicaton', + templateUrl: 'replication-page.component.html' +}) +export class ReplicationPageComponent implements OnInit { + projectIdentify: string | number; + + constructor(private route: ActivatedRoute) { } + + ngOnInit(): void { + this.projectIdentify = +this.route.snapshot.parent.params['id']; + } } \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/replication.component.css b/src/ui_ng/src/app/replication/replication.component.css deleted file mode 100644 index 6adb08c62..000000000 --- a/src/ui_ng/src/app/replication/replication.component.css +++ /dev/null @@ -1,17 +0,0 @@ -.option-left { - padding-left: 16px; - margin-top: 24px; -} -.option-right { - padding-right: 16px; - margin-top: 18px; -} - -.option-left-down { - margin-top: 36px; -} - -.option-right-down { - padding-right: 16px; - margin-top: 24px; -} \ 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 deleted file mode 100644 index 2f28a0c00..000000000 --- a/src/ui_ng/src/app/replication/replication.component.html +++ /dev/null @@ -1,62 +0,0 @@ -
-
-
-
- - -
-
-
- -
- - - - -
-
-
-
- -
-
-
-
{{'REPLICATION.REPLICATION_JOBS' | translate}}
-
- - - - - -
-
-
-
- -
-
- - - - -
-
-
-
- -
-
\ No newline at end of file diff --git a/src/ui_ng/src/app/replication/replication.component.ts b/src/ui_ng/src/app/replication/replication.component.ts deleted file mode 100644 index 9bbeffaa3..000000000 --- a/src/ui_ng/src/app/replication/replication.component.ts +++ /dev/null @@ -1,274 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, OnInit, ViewChild } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { NgModel } from '@angular/forms'; - -import { CreateEditPolicyComponent } from '../shared/create-edit-policy/create-edit-policy.component'; - -import { MessageHandlerService } from '../shared/message-handler/message-handler.service'; - -import { ReplicationService } from './replication.service'; - -import { SessionUser } from '../shared/session-user'; -import { Policy } from './policy'; -import { Job } from './job'; -import { Target } from './target'; - -import { State } from 'clarity-angular'; - -const ruleStatus = [ - { 'key': 'all', 'description': 'REPLICATION.ALL_STATUS'}, - { 'key': '1', 'description': 'REPLICATION.ENABLED'}, - { 'key': '0', 'description': 'REPLICATION.DISABLED'} -]; - -const jobStatus = [ - { 'key': 'all', 'description': 'REPLICATION.ALL' }, - { 'key': 'pending', 'description': 'REPLICATION.PENDING' }, - { 'key': 'running', 'description': 'REPLICATION.RUNNING' }, - { 'key': 'error', 'description': 'REPLICATION.ERROR' }, - { 'key': 'retrying', 'description': 'REPLICATION.RETRYING' }, - { 'key': 'stopped' , 'description': 'REPLICATION.STOPPED' }, - { 'key': 'finished', 'description': 'REPLICATION.FINISHED' }, - { 'key': 'canceled', 'description': 'REPLICATION.CANCELED' } -]; - -const optionalSearch: {} = {0: 'REPLICATION.ADVANCED', 1: 'REPLICATION.SIMPLE'}; - -class SearchOption { - policyId: number; - policyName: string = ''; - repoName: string = ''; - status: string = ''; - startTime: string = ''; - startTimestamp: string = ''; - endTime: string = ''; - endTimestamp: string = ''; - page: number = 1; - pageSize: number = 5; -} - -@Component({ - selector: 'replicaton', - templateUrl: 'replication.component.html', - styleUrls: ['./replication.component.css'] -}) -export class ReplicationComponent implements OnInit { - - projectId: number; - - search: SearchOption = new SearchOption(); - - ruleStatus = ruleStatus; - currentRuleStatus: {key: string, description: string}; - - jobStatus = jobStatus; - currentJobStatus: {key: string, description: string}; - - changedPolicies: Policy[]; - changedJobs: Job[]; - initSelectedId: number; - - policies: Policy[]; - jobs: Job[]; - - jobsTotalRecordCount: number; - jobsTotalPage: number; - - toggleJobSearchOption = optionalSearch; - currentJobSearchOption: number; - - @ViewChild(CreateEditPolicyComponent) - createEditPolicyComponent: CreateEditPolicyComponent; - - @ViewChild('fromTime') fromTimeInput: NgModel; - @ViewChild('toTime') toTimeInput: NgModel; - - get fromTimeInvalid(): boolean { - return this.fromTimeInput.errors && this.fromTimeInput.errors.dateValidator && (this.fromTimeInput.dirty || this.fromTimeInput.touched); - } - - get toTimeInvalid(): boolean { - return this.toTimeInput.errors && this.toTimeInput.errors.dateValidator && (this.toTimeInput.dirty || this.toTimeInput.touched); - } - - constructor( - private messageHandlerService: MessageHandlerService, - private replicationService: ReplicationService, - private route: ActivatedRoute) { - } - - ngOnInit(): void { - this.projectId = +this.route.snapshot.parent.params['id']; - this.currentRuleStatus = this.ruleStatus[0]; - this.currentJobStatus = this.jobStatus[0]; - this.currentJobSearchOption = 0; - this.retrievePolicies(); - - let isCreate = this.route.snapshot.parent.queryParams['is_create']; - if (isCreate && isCreate) { - this.openModal(); - } - } - - retrievePolicies(): void { - this.replicationService - .listPolicies(this.search.policyName, this.projectId) - .subscribe( - response=>{ - this.changedPolicies = response || []; - if(this.changedPolicies && this.changedPolicies.length > 0) { - this.initSelectedId = this.changedPolicies[0].id; - } - this.policies = this.changedPolicies; - if(this.changedPolicies && this.changedPolicies.length > 0) { - this.search.policyId = this.changedPolicies[0].id; - this.fetchPolicyJobs(); - } - }, - error=>this.messageHandlerService.handleError(error) - ); - } - - openModal(): void { - this.createEditPolicyComponent.openCreateEditPolicy(true); - } - - openEditPolicy(policy: Policy) { - if(policy) { - let editable = true; - if(policy.enabled === 1) { - editable = false; - } - this.createEditPolicyComponent.openCreateEditPolicy(editable, policy.id); - } - } - - fetchPolicyJobs(state?: State) { - if(state) { - this.search.page = state.page.to + 1; - } - this.replicationService - .listJobs(this.search.policyId, this.search.status, this.search.repoName, - this.search.startTimestamp, this.search.endTimestamp, this.search.page, this.search.pageSize) - .subscribe( - response=>{ - this.jobsTotalRecordCount = response.headers.get('x-total-count'); - this.jobsTotalPage = Math.ceil(this.jobsTotalRecordCount / this.search.pageSize); - this.changedJobs = response.json(); - this.jobs = this.changedJobs; - for(let i = 0; i < this.jobs.length; i++) { - let j = this.jobs[i]; - if(j.status == 'retrying' || j.status == 'error') { - this.messageHandlerService.showError('REPLICATION.FOUND_ERROR_IN_JOBS', ''); - break; - } - } - }, - error=>this.messageHandlerService.handleError(error) - ); - } - - selectOnePolicy(policy: Policy) { - if(policy) { - this.search.policyId = policy.id; - this.search.repoName = ''; - this.search.status = ''; - this.currentJobSearchOption = 0; - this.currentJobStatus = { 'key': 'all', 'description': 'REPLICATION.ALL' }; - this.fetchPolicyJobs(); - } - } - - doSearchPolicies(policyName: string) { - this.search.policyName = policyName; - this.retrievePolicies(); - } - - doFilterPolicyStatus($event: any) { - if ($event && $event.target && $event.target["value"]) { - let status = $event.target["value"]; - this.currentRuleStatus = this.ruleStatus.find(r=>r.key === status); - if(this.currentRuleStatus.key === 'all') { - this.changedPolicies = this.policies; - } else { - this.changedPolicies = this.policies.filter(policy=>policy.enabled === +this.currentRuleStatus.key); - } - } - } - - doFilterJobStatus($event: any) { - if ($event && $event.target && $event.target["value"]) { - let status = $event.target["value"]; - this.currentJobStatus = this.jobStatus.find(r=>r.key === status); - if(this.currentJobStatus.key === 'all') { - status = ''; - } - this.search.status = status; - this.doSearchJobs(this.search.repoName); - } - } - - doSearchJobs(repoName: string) { - this.search.repoName = repoName; - this.fetchPolicyJobs(); - } - - reloadPolicies(isReady: boolean) { - if(isReady) { - this.search.policyName = ''; - this.retrievePolicies(); - } - } - - refreshPolicies() { - this.retrievePolicies(); - } - - refreshJobs() { - this.fetchPolicyJobs(); - } - - toggleSearchJobOptionalName(option: number) { - (option === 1) ? this.currentJobSearchOption = 0 : this.currentJobSearchOption = 1; - } - - convertDate(strDate: string): string { - if(/^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/.test(strDate)) { - let parts = strDate.split(/[-\/]/); - strDate = parts[2] /*Year*/ + '-' +parts[1] /*Month*/ + '-' + parts[0] /*Date*/; - } - return strDate; - } - - doJobSearchByStartTime(strDate: string) { - this.search.startTimestamp = ''; - if(this.fromTimeInput.valid && strDate) { - strDate = this.convertDate(strDate); - this.search.startTimestamp = new Date(strDate).getTime() / 1000 + ''; - } - this.fetchPolicyJobs(); - } - - doJobSearchByEndTime(strDate: string) { - this.search.endTimestamp = ''; - if(this.toTimeInput.valid && strDate) { - strDate = this.convertDate(strDate); - let oneDayOffset = 3600 * 24; - this.search.endTimestamp = (new Date(strDate).getTime() / 1000 + oneDayOffset) + ''; - } - this.fetchPolicyJobs(); - } -} \ 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 46f44253c..cd20fada9 100644 --- a/src/ui_ng/src/app/replication/replication.module.ts +++ b/src/ui_ng/src/app/replication/replication.module.ts @@ -13,31 +13,29 @@ // limitations under the License. import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { ReplicationManagementComponent } from './replication-management/replication-management.component'; -import { ReplicationComponent } from './replication.component'; -import { ListJobComponent } from './list-job/list-job.component'; -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 { ReplicationManagementComponent } from './replication-management/replication-management.component'; +import { ReplicationPageComponent } from './replication-page.component'; +import { TotalReplicationPageComponent } from './total-replication/total-replication-page.component'; +import { DestinationPageComponent } from './destination/destination-page.component'; import { SharedModule } from '../shared/shared.module'; -import { ReplicationService } from './replication.service'; @NgModule({ - imports: [ + imports: [ SharedModule, RouterModule ], - declarations: [ - ReplicationComponent, + declarations: [ + ReplicationPageComponent, ReplicationManagementComponent, - ListJobComponent, - TotalReplicationComponent, - DestinationComponent, - CreateEditDestinationComponent + TotalReplicationPageComponent, + DestinationPageComponent ], - exports: [ ReplicationComponent ], - providers: [ ReplicationService ] + exports: [ + ReplicationPageComponent, + DestinationPageComponent, + TotalReplicationPageComponent + ] }) -export class ReplicationModule {} \ No newline at end of file +export class ReplicationModule { } \ No newline at end of file diff --git a/src/ui_ng/src/app/replication/replication.service.ts b/src/ui_ng/src/app/replication/replication.service.ts deleted file mode 100644 index 649db5414..000000000 --- a/src/ui_ng/src/app/replication/replication.service.ts +++ /dev/null @@ -1,179 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Injectable } from '@angular/core'; -import { Http, URLSearchParams, Response } from '@angular/http'; - -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'; -import 'rxjs/add/operator/mergeMap'; - -@Injectable() -export class ReplicationService { - constructor(private http: Http) {} - - listPolicies(policyName: string, projectId?: any): Observable { - if(!projectId) { - projectId = ''; - } - return this.http - .get(`/api/policies/replication?project_id=${projectId}&name=${policyName}`) - .map(response=>response.json() as Policy[]) - .catch(error=>Observable.throw(error)); - } - - getPolicy(policyId: number): Observable { - return this.http - .get(`/api/policies/replication/${policyId}`) - .map(response=>response.json() as Policy) - .catch(error=>Observable.throw(error)); - } - - createPolicy(policy: Policy): Observable { - 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; - }) - .catch(error=>Observable.throw(error)) - .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 { - return this.http - .put(`/api/policies/replication/${policyId}/enablement`, {enabled: enabled}) - .map(response=>response.status) - .catch(error=>Observable.throw(error)); - } - - deletePolicy(policyId: number): Observable { - 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 = '', page: number, pageSize: number): Observable { - return this.http - .get(`/api/jobs/replication?policy_id=${policyId}&status=${status}&repository=${repoName}&start_time=${startTime}&end_time=${endTime}&page=${page}&page_size=${pageSize}`) - .map(response=>response) - .catch(error=>Observable.throw(error)); - } - - listTargets(targetName: string): Observable { - return this.http - .get(`/api/targets?name=${targetName}`) - .map(response=>response.json() as Target[]) - .catch(error=>Observable.throw(error)); - } - - listTargetPolicies(targetId: number): Observable { - return this.http - .get(`/api/targets/${targetId}/policies`) - .map(response=>response.json() as Policy[]) - .catch(error=>Observable.throw(error)); - } - - getTarget(targetId: number): Observable { - return this.http - .get(`/api/targets/${targetId}`) - .map(response=>response.json() as Target) - .catch(error=>Observable.throw(error)); - } - - createTarget(target: Target): Observable { - return this.http - .post(`/api/targets`, JSON.stringify(target)) - .map(response=>response.status) - .catch(error=>Observable.throw(error)); - } - - pingTarget(target: Target): Observable { - if(target.id) { - return this.http - .post(`/api/targets/${target.id}/ping`, {}) - .map(response=>response.status) - .catch(error=>Observable.throw(error)); - } - return this.http - .post(`/api/targets/ping`, target) - .map(response=>response.status) - .catch(error=>Observable.throw(error)); - } - - updateTarget(target: Target, targetId: number): Observable { - return this.http - .put(`/api/targets/${targetId}`, JSON.stringify(target)) - .map(response=>response.status) - .catch(error=>Observable.throw(error)); - } - - deleteTarget(targetId: number): Observable { - 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-page.component.html b/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.html new file mode 100644 index 000000000..e4c28b783 --- /dev/null +++ b/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/ui_ng/src/app/replication/job.ts b/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.ts similarity index 59% rename from src/ui_ng/src/app/replication/job.ts rename to src/ui_ng/src/app/replication/total-replication/total-replication-page.component.ts index cbd84199f..a6662673e 100644 --- a/src/ui_ng/src/app/replication/job.ts +++ b/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.ts @@ -11,26 +11,11 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -/* - { - "id": 1, - "status": "running", - "repository": "library/mysql", - "policy_id": 1, - "operation": "transfer", - "tags": null, - "creation_time": "2017-02-24T06:44:04Z", - "update_time": "2017-02-24T06:44:04Z" - } +import { Component } from '@angular/core'; -*/ -export class Job { - id: number; - status: string; - repository: string; - policy_id: number; - operation: string; - tags: string; - creation_time: Date; - update_time: Date; +@Component({ + selector: 'total-replication', + templateUrl: 'total-replication-page.component.html' +}) +export class TotalReplicationPageComponent { } \ 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 deleted file mode 100644 index 1236b7ecc..000000000 --- a/src/ui_ng/src/app/replication/total-replication/total-replication.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
- - -
- -
- -
-
- -
-
\ 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 deleted file mode 100644 index daa18e1fd..000000000 --- a/src/ui_ng/src/app/replication/total-replication/total-replication.component.ts +++ /dev/null @@ -1,95 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, OnInit, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; -import { ReplicationService } from '../../replication/replication.service'; - -import { CreateEditPolicyComponent } from '../../shared/create-edit-policy/create-edit-policy.component'; - -import { MessageHandlerService } from '../../shared/message-handler/message-handler.service'; - -import { Policy } from '../../replication/policy'; - -@Component({ - selector: 'total-replication', - templateUrl: 'total-replication.component.html', - providers: [ ReplicationService ], - styleUrls: ['./total-replication.component.css'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class TotalReplicationComponent implements OnInit { - - changedPolicies: Policy[]; - policies: Policy[]; - policyName: string = ''; - projectId: number; - - @ViewChild(CreateEditPolicyComponent) - createEditPolicyComponent: CreateEditPolicyComponent; - - constructor( - private replicationService: ReplicationService, - private messageHandlerService: MessageHandlerService, - private ref: ChangeDetectorRef) { - let hnd = setInterval(()=>ref.markForCheck(), 100); - setTimeout(()=>clearInterval(hnd), 1000); - } - - ngOnInit() { - this.retrievePolicies(); - } - - retrievePolicies(): void { - this.replicationService - .listPolicies(this.policyName) - .subscribe( - response=>{ - this.changedPolicies = response; - this.policies = this.changedPolicies; - }, - error=>this.messageHandlerService.handleError(error) - ); - } - - doSearchPolicies(policyName: string) { - this.policyName = policyName; - this.retrievePolicies(); - } - - openEditPolicy(policy: Policy) { - if(policy) { - let editable = true; - if(policy.enabled === 1) { - editable = false; - } - this.createEditPolicyComponent.openCreateEditPolicy(editable, policy.id); - } - } - - selectPolicy(policy: Policy) { - if(policy) { - this.projectId = policy.project_id; - } - } - - refreshPolicies() { - this.retrievePolicies(); - } - - reloadPolicies(isReady: boolean) { - if(isReady) { - this.policyName = ''; - this.retrievePolicies(); - } - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.css b/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.css deleted file mode 100644 index 0bcac82e9..000000000 --- a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.css +++ /dev/null @@ -1,4 +0,0 @@ -.form-group-label-override { - font-size: 14px; - font-weight: 400; -} \ 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 deleted file mode 100644 index abcb82184..000000000 --- a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.html +++ /dev/null @@ -1,82 +0,0 @@ - -

{{modalTitle}}

- -
-
-
-
-
- - {{'REPLICATION.CANNOT_EDIT' | translate}} - -
-
-
- - -
-
- - -
-
- -
- - -
-
-
- -
- -
- -
- - -
-
-
- - -
-
- - -
-
- - -
-
- - - {{ 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 deleted file mode 100644 index 7f8564715..000000000 --- a/src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts +++ /dev/null @@ -1,343 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, Input, Output, EventEmitter, OnInit, ViewChild, AfterViewChecked } from '@angular/core'; - -import { NgForm } from '@angular/forms'; - -import { CreateEditPolicy } from './create-edit-policy'; - -import { ReplicationService } from '../../replication/replication.service'; -import { MessageHandlerService } from '../message-handler/message-handler.service'; -import { ActionType } from '../../shared/shared.const'; - -import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component'; - -import { Policy } from '../../replication/policy'; -import { Target } from '../../replication/target'; - -import { TranslateService } from '@ngx-translate/core'; - -const FAKE_PASSWORD: string = 'ywJZnDTM'; - -@Component({ - selector: 'create-edit-policy', - templateUrl: 'create-edit-policy.component.html', - styleUrls: [ 'create-edit-policy.component.css' ] -}) -export class CreateEditPolicyComponent implements OnInit, AfterViewChecked { - - modalTitle: string; - createEditPolicyOpened: boolean; - createEditPolicy: CreateEditPolicy = new CreateEditPolicy(); - initVal: CreateEditPolicy = new CreateEditPolicy(); - - actionType: ActionType; - - isCreateDestination: boolean; - @Input() projectId: number; - - @Output() reload = new EventEmitter(); - - targets: Target[]; - - pingTestMessage: string; - testOngoing: boolean; - pingStatus: boolean; - - policyForm: NgForm; - - staticBackdrop: boolean = true; - closable: boolean = false; - - @ViewChild('policyForm') - currentForm: NgForm; - - hasChanged: boolean; - - editable: boolean; - - @ViewChild(InlineAlertComponent) - inlineAlert: InlineAlertComponent; - - get readonly(): boolean { - return this.actionType === ActionType.EDIT && this.createEditPolicy.enable; - } - - get untoggleable(): boolean { - return this.actionType === ActionType.EDIT && this.initVal.enable; - } - - get showNewDestination(): boolean { - return this.actionType === ActionType.ADD_NEW || !this.createEditPolicy.enable; - } - - constructor( - private replicationService: ReplicationService, - private messageHandlerService: MessageHandlerService, - private translateService: TranslateService) {} - - 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 = FAKE_PASSWORD; - - this.initVal.targetId = this.createEditPolicy.targetId; - this.initVal.endpointUrl = this.createEditPolicy.endpointUrl; - this.initVal.username = this.createEditPolicy.username; - this.initVal.password = this.createEditPolicy.password; - } - }, - error=>{ - this.messageHandlerService.handleError(error); - this.createEditPolicyOpened = false; - } - ); - } - - ngOnInit(): void {} - - openCreateEditPolicy(editable: boolean, policyId?: number): void { - this.createEditPolicyOpened = true; - this.createEditPolicy = new CreateEditPolicy(); - - this.editable = editable; - - this.isCreateDestination = false; - - this.hasChanged = false; - - this.pingTestMessage = ''; - this.pingStatus = true; - this.testOngoing = false; - - if(policyId) { - this.actionType = ActionType.EDIT; - this.translateService.get('REPLICATION.EDIT_POLICY_TITLE').subscribe(res=>this.modalTitle=res); - 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); - - this.initVal.name = this.createEditPolicy.name; - this.initVal.description = this.createEditPolicy.description; - this.initVal.enable = this.createEditPolicy.enable; - } - ) - } else { - this.actionType = ActionType.ADD_NEW; - this.translateService.get('REPLICATION.ADD_POLICY').subscribe(res=>this.modalTitle=res); - this.prepareTargets(); - } - } - - newDestination(checkedAddNew: boolean): void { - this.isCreateDestination = checkedAddNew; - if(this.isCreateDestination) { - this.createEditPolicy.targetName = ''; - this.createEditPolicy.endpointUrl = ''; - this.createEditPolicy.username = ''; - this.createEditPolicy.password = ''; - } else { - this.prepareTargets(); - } - } - - 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 = FAKE_PASSWORD; - } - } - - 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 { - this.replicationService - .createPolicy(this.getPolicyByForm()) - .subscribe( - response=>{ - this.messageHandlerService.showSuccess('REPLICATION.CREATED_SUCCESS'); - this.createEditPolicyOpened = false; - this.reload.emit(true); - }, - error=>{ - if(this.messageHandlerService.isAppLevel(error)) { - this.messageHandlerService.handleError(error); - this.createEditPolicyOpened = false; - } else if (error.status === 409) { - this.inlineAlert.showInlineError('REPLICATION.POLICY_ALREADY_EXISTS'); - } else { - this.inlineAlert.showInlineError(error); - } - console.error('Failed to create policy:' + error.status + ', error message:' + JSON.stringify(error['_body'])); - }); - } - - createOrUpdatePolicyAndCreateTarget(): void { - this.replicationService - .createOrUpdatePolicyWithNewTarget(this.getPolicyByForm(), this.getTargetByForm()) - .subscribe( - response=>{ - this.messageHandlerService.showSuccess('REPLICATION.CREATED_SUCCESS'); - this.createEditPolicyOpened = false; - this.reload.emit(true); - }, - error=>{ - if(this.messageHandlerService.isAppLevel(error)) { - this.messageHandlerService.handleError(error); - this.createEditPolicyOpened = false; - } else if (error.status === 409) { - this.inlineAlert.showInlineError('REPLICATION.POLICY_ALREADY_EXISTS'); - } else { - this.inlineAlert.showInlineError(error); - } - console.error('Failed to create policy and target:' + error.status + ', error message:' + JSON.stringify(error['_body'])); - } - ); - } - - updatePolicy(): void { - this.replicationService - .updatePolicy(this.getPolicyByForm()) - .subscribe( - response=>{ - this.messageHandlerService.showSuccess('REPLICATION.UPDATED_SUCCESS') - this.createEditPolicyOpened = false; - this.reload.emit(true); - }, - error=>{ - if(this.messageHandlerService.isAppLevel(error)) { - this.messageHandlerService.handleError(error); - this.createEditPolicyOpened = false; - } else if (error.status === 409) { - this.inlineAlert.showInlineError('REPLICATION.POLICY_ALREADY_EXISTS'); - } else { - this.inlineAlert.showInlineError(error); - } - console.error('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(); - } - } - } - - onCancel() { - if(this.hasChanged) { - this.inlineAlert.showInlineConfirmation({message: 'ALERT.FORM_CHANGE_CONFIRMATION'}); - } else { - this.createEditPolicyOpened = false; - this.policyForm.reset(); - } - } - - confirmCancel(confirmed: boolean) { - this.createEditPolicyOpened = false; - this.inlineAlert.close(); - this.policyForm.reset(); - } - - ngAfterViewChecked(): void { - this.policyForm = this.currentForm; - if(this.policyForm) { - this.policyForm.valueChanges.subscribe(data=>{ - for(let i in data) { - let origin = this.initVal[i]; - let current = data[i]; - if(((this.actionType === ActionType.EDIT && !this.readonly && !current ) || current) && current !== origin) { - this.hasChanged = true; - break; - } else { - this.hasChanged = false; - this.inlineAlert.close(); - } - } - }); - } - } - - testConnection() { - this.pingStatus = true; - this.translateService.get('REPLICATION.TESTING_CONNECTION').subscribe(res=>this.pingTestMessage=res); - this.testOngoing = !this.testOngoing; - let pingTarget: Target | any = {}; - if(this.isCreateDestination) { - pingTarget.endpoint = this.createEditPolicy.endpointUrl; - pingTarget.username = this.createEditPolicy.username; - pingTarget.password = this.createEditPolicy.password; - } else { - pingTarget.id = this.createEditPolicy.targetId; - } - this.replicationService - .pingTarget(pingTarget) - .subscribe( - response=>{ - this.testOngoing = !this.testOngoing; - this.translateService.get('REPLICATION.TEST_CONNECTION_SUCCESS').subscribe(res=>this.pingTestMessage=res); - this.pingStatus = true; - }, - error=>{ - this.testOngoing = !this.testOngoing; - this.translateService.get('REPLICATION.TEST_CONNECTION_FAILURE').subscribe(res=>this.pingTestMessage=res); - this.pingStatus = false; - } - ); - } -} \ 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 deleted file mode 100644 index f017f21da..000000000 --- a/src/ui_ng/src/app/shared/list-policy/list-policy.component.html +++ /dev/null @@ -1,34 +0,0 @@ - - {{'REPLICATION.NAME' | translate}} - {{'REPLICATION.PROJECT' | translate}} - {{'REPLICATION.DESCRIPTION' | translate}} - {{'REPLICATION.DESTINATION_NAME' | translate}} - {{'REPLICATION.LAST_START_TIME' | translate}} - {{'REPLICATION.ACTIVATION' | translate}} - - - - - - - - - {{p.name}} - - - {{p.name}} - - - {{p.project_name}} - {{p.description ? p.description : '-'}} - {{p.target_name}} - - - - {{p.start_time | date: 'short'}} - - - {{ (p.enabled === 1 ? 'REPLICATION.ENABLED' : 'REPLICATION.DISABLED') | translate}} - - - {{ (policies ? policies.length : 0) }} {{'REPLICATION.ITEMS' | translate}} - \ 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 deleted file mode 100644 index 3015fa05e..000000000 --- a/src/ui_ng/src/app/shared/list-policy/list-policy.component.ts +++ /dev/null @@ -1,143 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, Input, Output, EventEmitter, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; - -import { ReplicationService } from '../../replication/replication.service'; -import { Policy } from '../../replication/policy'; - -import { ConfirmationDialogService } from '../../shared/confirmation-dialog/confirmation-dialog.service'; -import { ConfirmationMessage } from '../../shared/confirmation-dialog/confirmation-message'; - -import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../../shared/shared.const'; - -import { MessageHandlerService } from '../../shared/message-handler/message-handler.service'; - -import { Subscription } from 'rxjs/Subscription'; - -@Component({ - selector: 'list-policy', - templateUrl: 'list-policy.component.html', - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ListPolicyComponent implements OnDestroy { - - nullTime: string = '0001-01-01T00:00:00Z'; - - @Input() policies: Policy[]; - @Input() projectless: boolean; - @Input() selectedId: number; - - @Output() reload = new EventEmitter(); - @Output() selectOne = new EventEmitter(); - @Output() editOne = new EventEmitter(); - @Output() toggleOne = new EventEmitter(); - - toggleSubscription: Subscription; - subscription: Subscription; - - constructor( - private replicationService: ReplicationService, - private toggleConfirmDialogService: ConfirmationDialogService, - private deletionDialogService: ConfirmationDialogService, - private messageHandlerService: MessageHandlerService, - private ref: ChangeDetectorRef) { - setInterval(()=>ref.markForCheck(), 500); - this.toggleSubscription = this.toggleConfirmDialogService - .confirmationConfirm$ - .subscribe( - message=> { - if(message && - message.source === ConfirmationTargets.TOGGLE_CONFIRM && - message.state === ConfirmationState.CONFIRMED) { - let policy: Policy = message.data; - policy.enabled = policy.enabled === 0 ? 1 : 0; - this.replicationService - .enablePolicy(policy.id, policy.enabled) - .subscribe( - response => { - this.messageHandlerService.showSuccess('REPLICATION.TOGGLED_SUCCESS'); - }, - error => this.messageHandlerService.handleError(error) - ); - } - } - ); - this.subscription = this.deletionDialogService - .confirmationConfirm$ - .subscribe( - message => { - if (message && - message.source === ConfirmationTargets.POLICY && - message.state === ConfirmationState.CONFIRMED) { - this.replicationService - .deletePolicy(message.data) - .subscribe( - response => { - this.messageHandlerService.showSuccess('REPLICATION.DELETED_SUCCESS'); - this.reload.emit(true); - }, - error => { - if(error && error.status === 412) { - this.messageHandlerService.handleError('REPLICATION.FAILED_TO_DELETE_POLICY_ENABLED'); - } else { - this.messageHandlerService.handleError(error); - } - } - ); - } - } - ); - } - - ngOnDestroy() { - if (this.subscription) { - this.subscription.unsubscribe(); - } - if(this.toggleSubscription) { - this.toggleSubscription.unsubscribe(); - } - } - - selectPolicy(policy: Policy): void { - this.selectedId = policy.id; - this.selectOne.emit(policy); - } - - editPolicy(policy: Policy) { - this.editOne.emit(policy); - } - - togglePolicy(policy: Policy) { - let toggleConfirmMessage: ConfirmationMessage = new ConfirmationMessage( - policy.enabled === 1 ? 'REPLICATION.TOGGLE_DISABLE_TITLE' : 'REPLICATION.TOGGLE_ENABLE_TITLE', - policy.enabled === 1 ? 'REPLICATION.CONFIRM_TOGGLE_DISABLE_POLICY': 'REPLICATION.CONFIRM_TOGGLE_ENABLE_POLICY', - policy.name, - policy, - ConfirmationTargets.TOGGLE_CONFIRM - ); - this.toggleConfirmDialogService.openComfirmDialog(toggleConfirmMessage); - } - - deletePolicy(policy: Policy) { - let deletionMessage: ConfirmationMessage = new ConfirmationMessage( - 'REPLICATION.DELETION_TITLE', - 'REPLICATION.DELETION_SUMMARY', - policy.name, - policy.id, - ConfirmationTargets.POLICY, - ConfirmationButtons.DELETE_CANCEL); - this.deletionDialogService.openComfirmDialog(deletionMessage); - } - -} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/message-handler/message-handler.service.ts b/src/ui_ng/src/app/shared/message-handler/message-handler.service.ts index 0be2fe798..010e9011a 100644 --- a/src/ui_ng/src/app/shared/message-handler/message-handler.service.ts +++ b/src/ui_ng/src/app/shared/message-handler/message-handler.service.ts @@ -20,8 +20,10 @@ import { errorHandler } from '../../shared/shared.utils'; import { TranslateService } from '@ngx-translate/core'; import { SessionService } from '../../shared/session.service'; +import { ErrorHandler } from 'harbor-ui'; + @Injectable() -export class MessageHandlerService { +export class MessageHandlerService implements ErrorHandler{ constructor( private msgService: MessageService, @@ -85,4 +87,20 @@ export class MessageHandlerService { public isAppLevel(error: any): boolean { return error && error.statusCode === httpStatusCode.Unauthorized; } + + public error(error: any): void { + this.handleError(error); + } + + public warning(warning: any): void { + this.showWarning(warning); + } + + public info(info: any): void { + this.showSuccess(info); + } + + public log(log: any): void { + this.showInfo(log); + } } \ 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 848cdf974..705f98688 100644 --- a/src/ui_ng/src/app/shared/shared.module.ts +++ b/src/ui_ng/src/app/shared/shared.module.ts @@ -31,9 +31,6 @@ 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'; @@ -56,11 +53,30 @@ import { GaugeComponent } from './gauge/gauge.component'; import { StatisticHandler } from './statictics/statistic-handler.service'; import { DateValidatorDirective } from '../shared/date-validator.directive'; +import { + IServiceConfig, + SERVICE_CONFIG, + ErrorHandler, + HarborLibraryModule +} from 'harbor-ui'; + +const uiLibConfig: IServiceConfig = { + enablei18Support: true, + langCookieKey: "harbor-lang", + langMessageLoader: "http", + langMessagePathForHttpLoader: "src/i18n/lang/", + langMessageFileSuffixForHttpLoader: "-lang.json", +}; + @NgModule({ imports: [ CoreModule, TranslateModule, - RouterModule + RouterModule, + HarborLibraryModule.forRoot({ + config: { provide: SERVICE_CONFIG, useValue: uiLibConfig }, + errorHandler: { provide: ErrorHandler, useClass: MessageHandlerService } + }) ], declarations: [ MessageComponent, @@ -69,8 +85,6 @@ import { DateValidatorDirective } from '../shared/date-validator.directive'; ConfirmationDialogComponent, NewUserFormComponent, InlineAlertComponent, - ListPolicyComponent, - CreateEditPolicyComponent, PortValidatorDirective, PageNotFoundComponent, AboutDialogComponent, @@ -84,6 +98,7 @@ import { DateValidatorDirective } from '../shared/date-validator.directive'; ], exports: [ CoreModule, + HarborLibraryModule, MessageComponent, MaxLengthExtValidatorDirective, FilterComponent, @@ -91,8 +106,6 @@ import { DateValidatorDirective } from '../shared/date-validator.directive'; ConfirmationDialogComponent, NewUserFormComponent, InlineAlertComponent, - ListPolicyComponent, - CreateEditPolicyComponent, PortValidatorDirective, PageNotFoundComponent, AboutDialogComponent, diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json index 3bf74e077..17ec53e54 100644 --- a/src/ui_ng/src/i18n/lang/en-us-lang.json +++ b/src/ui_ng/src/i18n/lang/en-us-lang.json @@ -256,6 +256,7 @@ "CREATION_TIME": "Start Time", "END_TIME": "End Time", "LOGS": "Logs", + "OF": "of", "ITEMS": "item(s)", "TOGGLE_ENABLE_TITLE": "Enable Rule", "CONFIRM_TOGGLE_ENABLE_POLICY": "After enabling the replication rule, all repositories under the project will be replicated to the destination registry. \nPlease confirm to continue.", @@ -294,6 +295,7 @@ "INVALID_NAME": "Invalid endpoint name.", "FAILED_TO_GET_TARGET": "Failed to get endpoint.", "CREATION_TIME": "Creation Time", + "OF": "of", "ITEMS": "item(s)", "CREATED_SUCCESS": "Created endpoint successfully.", "UPDATED_SUCCESS": "Updated endpoint successfully.", diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json index d8ca73816..43febf328 100644 --- a/src/ui_ng/src/i18n/lang/es-es-lang.json +++ b/src/ui_ng/src/i18n/lang/es-es-lang.json @@ -256,6 +256,7 @@ "CREATION_TIME": "Fecha de Inicio", "END_TIME": "Fecha de Finalización", "LOGS": "Logs", + "OF": "of", "ITEMS": "elemento(s)", "TOGGLE_ENABLE_TITLE": "Activar Regla", "CONFIRM_TOGGLE_ENABLE_POLICY": "Después de la activación de esta regla, todos los repositorios de este proyecto serán replicados al registro de destino.\nPor favor, confirme para continuar.", @@ -294,6 +295,7 @@ "INVALID_NAME": "El nombre del endpoint no es válido.", "FAILED_TO_GET_TARGET": "Fallo al obtener el endpoint.", "CREATION_TIME": "Fecha de creación", + "OF": "of", "ITEMS": "elemento(s)", "CREATED_SUCCESS": "Endpoint creado satisfactoriamente.", "UPDATED_SUCCESS": "Endpoint actualizado satisfactoriamente.", diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json index 748ac0f5f..2aaab8142 100644 --- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json +++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json @@ -256,6 +256,7 @@ "CREATION_TIME": "创建时间", "END_TIME": "结束时间", "LOGS": "日志", + "OF": "共计", "ITEMS": "条记录", "TOGGLE_ENABLE_TITLE": "启用规则", "CONFIRM_TOGGLE_ENABLE_POLICY": "启用规则后，该项目下的所有镜像仓库将复制到目标实例。\n请确认继续。", @@ -294,6 +295,7 @@ "INVALID_NAME": "无效的目标名称。", "FAILED_TO_GET_TARGET": "获取目标失败。", "CREATION_TIME": "创建时间", + "OF": "共计", "ITEMS": "条记录", "CREATED_SUCCESS": "成功创建目标。", "UPDATED_SUCCESS": "成功更新目标。", From 8e20e66f8cda0f29e31c91ccc7e9a6b5e8d46021 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Sun, 18 Jun 2017 01:05:10 +0800 Subject: [PATCH 04/19] replace filter with hbr-filter from harbor-ui lib --- .../create-edit-endpoint.component.ts | 10 +- .../replication/replication.component.css.ts | 2 +- .../replication/replication.component.html.ts | 4 +- src/ui_ng/src/app/log/audit-log.component.css | 12 ++- .../src/app/log/audit-log.component.html | 94 ++++++++++--------- .../app/project/member/member.component.css | 15 ++- .../app/project/member/member.component.html | 10 +- .../src/app/project/project.component.css | 10 +- .../src/app/project/project.component.html | 10 +- .../app/repository/repository.component.html | 22 +++-- .../app/shared/filter/filter.component.css | 4 - .../app/shared/filter/filter.component.html | 4 - .../src/app/shared/filter/filter.component.ts | 55 ----------- src/ui_ng/src/app/shared/shared.module.ts | 3 - src/ui_ng/src/app/user/user.component.css | 8 +- src/ui_ng/src/app/user/user.component.html | 2 +- 16 files changed, 111 insertions(+), 154 deletions(-) delete mode 100644 src/ui_ng/src/app/shared/filter/filter.component.css delete mode 100644 src/ui_ng/src/app/shared/filter/filter.component.html delete mode 100644 src/ui_ng/src/app/shared/filter/filter.component.ts diff --git a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts index 9cd960aea..3aa79d8e7 100644 --- a/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts +++ b/src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.ts @@ -16,9 +16,7 @@ import { Output, EventEmitter, ViewChild, - AfterViewChecked, - ChangeDetectionStrategy, - ChangeDetectorRef + AfterViewChecked } from '@angular/core'; import { NgForm } from '@angular/forms'; @@ -43,8 +41,7 @@ const FAKE_PASSWORD = 'rjGcfuRu'; @Component({ selector: 'create-edit-endpoint', template: CREATE_EDIT_ENDPOINT_TEMPLATE, - styles: [CREATE_EDIT_ENDPOINT_STYLE], - changeDetection: ChangeDetectionStrategy.OnPush + styles: [CREATE_EDIT_ENDPOINT_STYLE] }) export class CreateEditEndpointComponent implements AfterViewChecked { @@ -89,8 +86,7 @@ export class CreateEditEndpointComponent implements AfterViewChecked { constructor( private endpointService: EndpointService, private errorHandler: ErrorHandler, - private translateService: TranslateService, - private ref: ChangeDetectorRef) { } + private translateService: TranslateService) { } openCreateEditTarget(editable: boolean, targetId?: number | string) { diff --git a/src/ui_ng/lib/src/replication/replication.component.css.ts b/src/ui_ng/lib/src/replication/replication.component.css.ts index 850dfc259..a85801e1b 100644 --- a/src/ui_ng/lib/src/replication/replication.component.css.ts +++ b/src/ui_ng/lib/src/replication/replication.component.css.ts @@ -9,7 +9,7 @@ export const REPLICATION_STYLE: string = ` .option-left { padding-left: 16px; - margin-top: 12px; + margin-top: 18px; } .option-right { padding-right: 16px; diff --git a/src/ui_ng/lib/src/replication/replication.component.html.ts b/src/ui_ng/lib/src/replication/replication.component.html.ts index 5e89a2843..3bfb48634 100644 --- a/src/ui_ng/lib/src/replication/replication.component.html.ts +++ b/src/ui_ng/lib/src/replication/replication.component.html.ts @@ -1,13 +1,13 @@ export const REPLICATION_TEMPLATE: string = `
-
+
-
+
diff --git a/src/ui_ng/src/app/log/audit-log.component.css b/src/ui_ng/src/app/log/audit-log.component.css index f2ead1afc..7b8ead9d6 100644 --- a/src/ui_ng/src/app/log/audit-log.component.css +++ b/src/ui_ng/src/app/log/audit-log.component.css @@ -1,5 +1,11 @@ .option-right { - padding-right: 16px; - margin-top: 22px; - margin-bottom: 2px; + padding-right: 16px; +} + +.refresh-btn { + cursor: pointer; +} + +.refresh-btn:hover { + color: #007CBB; } \ 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 2d026c4d0..60e9a7d8e 100644 --- a/src/ui_ng/src/app/log/audit-log.component.html +++ b/src/ui_ng/src/app/log/audit-log.component.html @@ -1,62 +1,64 @@
-
-
-
- - - -
-
-
- - + + + + +
+
+
+ + -
- - - - {{f.description | 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}} + {{l.op_time | date: 'short'}} + + + {{totalRecordCount}} {{'AUDIT_LOG.ITEMS' | 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}} - {{l.op_time | date: 'short'}} - - - {{totalRecordCount}} {{'AUDIT_LOG.ITEMS' | translate}} - - - -
\ No newline at end of file diff --git a/src/ui_ng/src/app/project/member/member.component.css b/src/ui_ng/src/app/project/member/member.component.css index ab3bc903f..85cc63fc1 100644 --- a/src/ui_ng/src/app/project/member/member.component.css +++ b/src/ui_ng/src/app/project/member/member.component.css @@ -1,8 +1,15 @@ .option-left { - padding-left: 16px; - margin-top: 24px; + padding-left: 16px; } + .option-right { - padding-right: 16px; - margin-top: 18px; + padding-right: 16px; +} + +.refresh-btn { + cursor: pointer; +} + +.refresh-btn:hover { + color: #007CBB; } \ 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 7f36d7639..5f5388d06 100644 --- a/src/ui_ng/src/app/project/member/member.component.html +++ b/src/ui_ng/src/app/project/member/member.component.html @@ -1,15 +1,15 @@
-
+
-
+
- - + + - +
diff --git a/src/ui_ng/src/app/project/project.component.css b/src/ui_ng/src/app/project/project.component.css index 98fe7dedd..cb24810ec 100644 --- a/src/ui_ng/src/app/project/project.component.css +++ b/src/ui_ng/src/app/project/project.component.css @@ -4,10 +4,16 @@ .option-left { padding-left: 16px; - margin-top: 12px; } .option-right { padding-right: 16px; - margin-top: 18px; +} + +.refresh-btn { + cursor: pointer; +} + +.refresh-btn:hover { + color: #007CBB; } \ 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 6f4048988..44f3cb271 100644 --- a/src/ui_ng/src/app/project/project.component.html +++ b/src/ui_ng/src/app/project/project.component.html @@ -6,23 +6,23 @@
-
+
-
+
- - + + - +
diff --git a/src/ui_ng/src/app/repository/repository.component.html b/src/ui_ng/src/app/repository/repository.component.html index 16973f08a..dc6282985 100644 --- a/src/ui_ng/src/app/repository/repository.component.html +++ b/src/ui_ng/src/app/repository/repository.component.html @@ -1,13 +1,15 @@
-
-
-
- - -
+
+
+
+ + + + +
+
+
+
+
-
-
- -
\ No newline at end of file diff --git a/src/ui_ng/src/app/shared/filter/filter.component.css b/src/ui_ng/src/app/shared/filter/filter.component.css deleted file mode 100644 index 98d8eccf5..000000000 --- a/src/ui_ng/src/app/shared/filter/filter.component.css +++ /dev/null @@ -1,4 +0,0 @@ -.filter-icon { - position: relative; - right: -12px; -} \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/filter/filter.component.html b/src/ui_ng/src/app/shared/filter/filter.component.html deleted file mode 100644 index 302b00362..000000000 --- a/src/ui_ng/src/app/shared/filter/filter.component.html +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/filter/filter.component.ts b/src/ui_ng/src/app/shared/filter/filter.component.ts deleted file mode 100644 index 17c76f41a..000000000 --- a/src/ui_ng/src/app/shared/filter/filter.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'; -import { Subject } from 'rxjs/Subject'; -import { Observable } from 'rxjs/Observable'; - -import 'rxjs/add/operator/debounceTime'; -import 'rxjs/add/operator/distinctUntilChanged'; - - -@Component({ - selector: 'grid-filter', - templateUrl: 'filter.component.html', - styleUrls: ['filter.component.css'] -}) - -export class FilterComponent implements OnInit { - - placeHolder: string = ""; - filterTerms = new Subject(); - - @Output("filter") private filterEvt = new EventEmitter(); - - @Input() currentValue: string; - @Input("filterPlaceholder") - public set flPlaceholder(placeHolder: string) { - this.placeHolder = placeHolder; - } - - ngOnInit(): void { - this.filterTerms - .debounceTime(500) - //.distinctUntilChanged() - .subscribe(terms => { - this.filterEvt.emit(terms); - }); - - } - - valueChange(): void { - //Send out filter terms - this.filterTerms.next(this.currentValue.trim()); - } -} \ 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 705f98688..5e324da48 100644 --- a/src/ui_ng/src/app/shared/shared.module.ts +++ b/src/ui_ng/src/app/shared/shared.module.ts @@ -20,7 +20,6 @@ import { MessageComponent } from '../global-message/message.component'; import { MessageService } from '../global-message/message.service'; import { MaxLengthExtValidatorDirective } from './max-length-ext.directive'; -import { FilterComponent } from './filter/filter.component'; import { TranslateModule } from "@ngx-translate/core"; import { RouterModule } from '@angular/router'; @@ -81,7 +80,6 @@ const uiLibConfig: IServiceConfig = { declarations: [ MessageComponent, MaxLengthExtValidatorDirective, - FilterComponent, ConfirmationDialogComponent, NewUserFormComponent, InlineAlertComponent, @@ -101,7 +99,6 @@ const uiLibConfig: IServiceConfig = { HarborLibraryModule, MessageComponent, MaxLengthExtValidatorDirective, - FilterComponent, TranslateModule, ConfirmationDialogComponent, NewUserFormComponent, diff --git a/src/ui_ng/src/app/user/user.component.css b/src/ui_ng/src/app/user/user.component.css index cbd04a9ad..cb852be18 100644 --- a/src/ui_ng/src/app/user/user.component.css +++ b/src/ui_ng/src/app/user/user.component.css @@ -27,11 +27,15 @@ .refresh-btn { position: absolute; - right: 2px; - top: 12px; + right: 6px; + top: 17px; cursor: pointer; } +.refresh-btn:hover { + color: #007CBB; +} + .hide-create { visibility: hidden !important; } \ No newline at end of file diff --git a/src/ui_ng/src/app/user/user.component.html b/src/ui_ng/src/app/user/user.component.html index 516adf19a..947a712c3 100644 --- a/src/ui_ng/src/app/user/user.component.html +++ b/src/ui_ng/src/app/user/user.component.html @@ -5,7 +5,7 @@ - + From 44e208f027d5217c74fbacd52ebe55fc34b01021 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Sun, 18 Jun 2017 21:59:56 +0800 Subject: [PATCH 05/19] Refactor repo and tag view with components in harbor-ui lib --- .../repository-stackview.component.ts | 8 +- src/ui_ng/lib/src/service/interface.ts | 6 + src/ui_ng/lib/src/tag/tag.component.ts | 11 +- src/ui_ng/package.json | 2 +- .../app/base/global-search/search-results.ts | 2 +- src/ui_ng/src/app/harbor-routing.module.ts | 18 ++- .../list-project/list-project.component.ts | 2 +- .../project-detail.component.html | 28 ++-- .../project-routing-resolver.service.ts | 70 +++++----- .../list-repository.component.html | 17 --- .../list-repository.component.ts | 65 --------- .../repository/repository-page.component.html | 3 + .../repository/repository-page.component.ts | 51 +++++++ .../app/repository/repository.component.css | 5 - .../app/repository/repository.component.html | 15 --- .../app/repository/repository.component.ts | 126 ------------------ .../src/app/repository/repository.module.ts | 20 +-- .../src/app/repository/repository.service.ts | 62 --------- src/ui_ng/src/app/repository/repository.ts | 45 ------- .../tag-detail/tag-detail-page.component.html | 3 + .../tag-detail/tag-detail-page.component.ts | 41 ++++++ .../tag-repository.component.css | 4 +- .../tag-repository.component.html | 50 +------ .../tag-repository.component.ts | 126 ++---------------- src/ui_ng/src/app/repository/tag.ts | 23 ---- .../repository/top-repo/top-repo.component.ts | 2 +- .../top-repo/top-repository.service.ts | 2 +- .../list-repository-ro.component.ts | 2 +- src/ui_ng/src/i18n/lang/en-us-lang.json | 1 + src/ui_ng/src/i18n/lang/es-es-lang.json | 1 + src/ui_ng/src/i18n/lang/zh-cn-lang.json | 1 + 31 files changed, 217 insertions(+), 595 deletions(-) delete mode 100644 src/ui_ng/src/app/repository/list-repository/list-repository.component.html delete mode 100644 src/ui_ng/src/app/repository/list-repository/list-repository.component.ts create mode 100644 src/ui_ng/src/app/repository/repository-page.component.html create mode 100644 src/ui_ng/src/app/repository/repository-page.component.ts delete mode 100644 src/ui_ng/src/app/repository/repository.component.css delete mode 100644 src/ui_ng/src/app/repository/repository.component.html delete mode 100644 src/ui_ng/src/app/repository/repository.component.ts delete mode 100644 src/ui_ng/src/app/repository/repository.service.ts delete mode 100644 src/ui_ng/src/app/repository/repository.ts create mode 100644 src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.html create mode 100644 src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.ts delete mode 100644 src/ui_ng/src/app/repository/tag.ts diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts index 7321a1134..8eb626c2d 100644 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts @@ -30,7 +30,7 @@ import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message'; import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message'; import { Subscription } from 'rxjs/Subscription'; -import { Tag } from '../service/interface'; +import { Tag, TagClickEvent } from '../service/interface'; @Component({ selector: 'hbr-repository-stackview', @@ -44,7 +44,7 @@ export class RepositoryStackviewComponent implements OnInit { @Input() hasSignedIn: boolean; @Input() hasProjectAdminRole: boolean; - @Output() tagClickEvent = new EventEmitter(); + @Output() tagClickEvent = new EventEmitter(); lastFilteredRepoName: string; repositories: Repository[]; @@ -132,7 +132,7 @@ export class RepositoryStackviewComponent implements OnInit { this.retrieve(); } - watchTagClickEvt(tag: Tag): void { - this.tagClickEvent.emit(tag); + watchTagClickEvt(tagClickEvt: TagClickEvent): void { + this.tagClickEvent.emit(tagClickEvt); } } \ No newline at end of file diff --git a/src/ui_ng/lib/src/service/interface.ts b/src/ui_ng/lib/src/service/interface.ts index fe8c1e5f4..82a1404b7 100644 --- a/src/ui_ng/lib/src/service/interface.ts +++ b/src/ui_ng/lib/src/service/interface.ts @@ -182,4 +182,10 @@ export interface VulnerabilitySummary { package_With_low?: number; package_with_unknown?: number; complete_timestamp: Date; +} + +export interface TagClickEvent { + project_id: string | number; + repository_name: string; + tag_name: string; } \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag.component.ts b/src/ui_ng/lib/src/tag/tag.component.ts index a32e57db8..422d0fb24 100644 --- a/src/ui_ng/lib/src/tag/tag.component.ts +++ b/src/ui_ng/lib/src/tag/tag.component.ts @@ -22,7 +22,7 @@ import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message'; import { ConfirmationAcknowledgement } from '../confirmation-dialog/confirmation-state-message'; -import { Tag } from '../service/interface'; +import { Tag, TagClickEvent } from '../service/interface'; import { TAG_TEMPLATE } from './tag.component.html'; import { TAG_STYLE } from './tag.component.css'; @@ -51,7 +51,7 @@ export class TagComponent implements OnInit { @Input() withNotary: boolean; @Output() refreshRepo = new EventEmitter(); - @Output() tagClickEvent = new EventEmitter(); + @Output() tagClickEvent = new EventEmitter(); tags: Tag[]; @@ -169,7 +169,12 @@ export class TagComponent implements OnInit { onTagClick(tag: Tag): void { if (tag) { - this.tagClickEvent.emit(tag); + let evt: TagClickEvent = { + project_id: this.projectId, + repository_name: this.repoName, + tag_name: tag.name + }; + this.tagClickEvent.emit(evt); } } } \ No newline at end of file diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index 605bf5e29..519434b6a 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -32,7 +32,7 @@ "clarity-icons": "^0.9.0", "clarity-ui": "^0.9.0", "core-js": "^2.4.1", - "harbor-ui": "^0.1.83", + "harbor-ui": "^0.1.85", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", "ngx-clipboard": "^8.0.2", diff --git a/src/ui_ng/src/app/base/global-search/search-results.ts b/src/ui_ng/src/app/base/global-search/search-results.ts index a6740e854..6bff0ce70 100644 --- a/src/ui_ng/src/app/base/global-search/search-results.ts +++ b/src/ui_ng/src/app/base/global-search/search-results.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. import { Project } from '../../project/project'; -import { Repository } from '../../repository/repository'; +import { Repository } from 'harbor-ui'; export class SearchResults { constructor(){ diff --git a/src/ui_ng/src/app/harbor-routing.module.ts b/src/ui_ng/src/app/harbor-routing.module.ts index e72318824..75fd020ab 100644 --- a/src/ui_ng/src/app/harbor-routing.module.ts +++ b/src/ui_ng/src/app/harbor-routing.module.ts @@ -26,7 +26,7 @@ import { DestinationPageComponent } from './replication/destination/destination- import { ProjectDetailComponent } from './project/project-detail/project-detail.component'; -import { RepositoryComponent } from './repository/repository.component'; +import { RepositoryPageComponent } from './repository/repository-page.component'; import { TagRepositoryComponent } from './repository/tag-repository/tag-repository.component'; import { ReplicationPageComponent } from './replication/replication-page.component'; import { MemberComponent } from './project/member/member.component'; @@ -48,6 +48,8 @@ import { LeavingConfigRouteDeactivate } from './shared/route/leaving-config-deac import { MemberGuard } from './shared/route/member-guard-activate.service'; +import { TagDetailPageComponent } from './repository/tag-detail/tag-detail-page.component'; + const harborRoutes: Routes = [ { path: '', redirectTo: 'harbor', pathMatch: 'full' }, { path: 'reset_password', component: ResetPasswordComponent }, @@ -108,20 +110,24 @@ const harborRoutes: Routes = [ }, children: [ { - path: 'repository', - component: RepositoryComponent + path: 'repositories', + component: RepositoryPageComponent }, { - path: 'replication', + path: 'repositories/:repo/tags/:tag', + component: TagDetailPageComponent + }, + { + path: 'replications', component: ReplicationPageComponent, canActivate: [SystemAdminGuard] }, { - path: 'member', + path: 'members', component: MemberComponent }, { - path: 'log', + path: 'logs', component: AuditLogComponent } ] diff --git a/src/ui_ng/src/app/project/list-project/list-project.component.ts b/src/ui_ng/src/app/project/list-project/list-project.component.ts index 89f862ba6..b37dedf0b 100644 --- a/src/ui_ng/src/app/project/list-project/list-project.component.ts +++ b/src/ui_ng/src/app/project/list-project/list-project.component.ts @@ -68,7 +68,7 @@ export class ListProjectComponent { goToLink(proId: number): void { this.searchTrigger.closeSearch(true); - let linkUrl = ['harbor', 'projects', proId, 'repository']; + let linkUrl = ['harbor', 'projects', proId, 'repositories']; this.router.navigate(linkUrl); } diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.html b/src/ui_ng/src/app/project/project-detail/project-detail.component.html index ff651917b..fcb18e0af 100644 --- a/src/ui_ng/src/app/project/project-detail/project-detail.component.html +++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.html @@ -3,19 +3,19 @@

{{currentProject.name}} {{roleName | translate}}

\ No newline at end of file diff --git a/src/ui_ng/src/app/project/project-routing-resolver.service.ts b/src/ui_ng/src/app/project/project-routing-resolver.service.ts index 2c9d7bf8f..e0ec9c338 100644 --- a/src/ui_ng/src/app/project/project-routing-resolver.service.ts +++ b/src/ui_ng/src/app/project/project-routing-resolver.service.ts @@ -24,40 +24,44 @@ export class ProjectRoutingResolver implements Resolve{ constructor( private sessionService: SessionService, - private projectService: ProjectService, - private router: Router) {} + private projectService: ProjectService, + private router: Router) { } resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise { - let projectId = route.params['id']; + //Support both parameters and query parameters + let projectId = route.params['id']; + if (!projectId) { + projectId = route.queryParams['project_id']; + } return this.projectService - .getProject(projectId) - .toPromise() - .then((project: Project)=> { - if(project) { - let currentUser = this.sessionService.getCurrentUser(); - if(currentUser) { - let projectMembers = this.sessionService.getProjectMembers(); - if(projectMembers) { - let currentMember = projectMembers.find(m=>m.user_id === currentUser.user_id); - if(currentMember) { - project.is_member = true; - project.has_project_admin_role = (currentMember.role_name === 'projectAdmin'); - project.role_name = currentMember.role_name; - } - } - if(currentUser.has_admin_role === 1) { - project.has_project_admin_role = true; - } - } - return project; - } else { - this.router.navigate(['/harbor', 'projects']); - return null; - } - }).catch(error=>{ - this.router.navigate(['/harbor', 'projects']); - return null; - }); - - } + .getProject(projectId) + .toPromise() + .then((project: Project) => { + if (project) { + let currentUser = this.sessionService.getCurrentUser(); + if (currentUser) { + let projectMembers = this.sessionService.getProjectMembers(); + if (projectMembers) { + let currentMember = projectMembers.find(m => m.user_id === currentUser.user_id); + if (currentMember) { + project.is_member = true; + project.has_project_admin_role = (currentMember.role_name === 'projectAdmin'); + project.role_name = currentMember.role_name; + } + } + if (currentUser.has_admin_role === 1) { + project.has_project_admin_role = true; + } + } + return project; + } else { + this.router.navigate(['/harbor', 'projects']); + return null; + } + }).catch(error => { + this.router.navigate(['/harbor', 'projects']); + return null; + }); + + } } \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/list-repository/list-repository.component.html b/src/ui_ng/src/app/repository/list-repository/list-repository.component.html deleted file mode 100644 index a438028d2..000000000 --- a/src/ui_ng/src/app/repository/list-repository/list-repository.component.html +++ /dev/null @@ -1,17 +0,0 @@ - - {{'REPOSITORY.NAME' | translate}} - {{'REPOSITORY.TAGS_COUNT' | translate}} - {{'REPOSITORY.PULL_COUNT' | translate}} - - - - - {{r.name || r.repository_name}} - {{r.tags_count}} - {{r.pull_count}} - - - {{(repositories ? repositories.length : 0)}} {{'REPOSITORY.ITEMS' | translate}} - - - \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/list-repository/list-repository.component.ts b/src/ui_ng/src/app/repository/list-repository/list-repository.component.ts deleted file mode 100644 index fbc44a80a..000000000 --- a/src/ui_ng/src/app/repository/list-repository/list-repository.component.ts +++ /dev/null @@ -1,65 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; -import { Router } from '@angular/router'; -import { Repository } from '../repository'; -import { State } from 'clarity-angular'; - -import { SearchTriggerService } from '../../base/global-search/search-trigger.service'; - -@Component({ - selector: 'list-repository', - templateUrl: 'list-repository.component.html', - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ListRepositoryComponent implements OnInit { - - @Input() projectId: number; - @Input() repositories: Repository[]; - - @Output() delete = new EventEmitter(); - @Output() paginate = new EventEmitter(); - - @Input() hasProjectAdminRole: boolean; - - pageOffset: number = 1; - - constructor( - private router: Router, - private searchTrigger: SearchTriggerService, - private ref: ChangeDetectorRef) { - let hnd = setInterval(()=>ref.markForCheck(), 100); - setTimeout(()=>clearInterval(hnd), 1000); - } - - ngOnInit() { } - - deleteRepo(repoName: string) { - this.delete.emit(repoName); - } - - refresh(state: State) { - if (this.repositories) { - this.paginate.emit(state); - } - } - - public gotoLink(projectId: number, repoName: string): void { - this.searchTrigger.closeSearch(true); - - let linkUrl = ['harbor', 'tags', projectId, repoName]; - this.router.navigate(linkUrl); - } - -} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository-page.component.html b/src/ui_ng/src/app/repository/repository-page.component.html new file mode 100644 index 000000000..9377458e9 --- /dev/null +++ b/src/ui_ng/src/app/repository/repository-page.component.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository-page.component.ts b/src/ui_ng/src/app/repository/repository-page.component.ts new file mode 100644 index 000000000..ff0241ead --- /dev/null +++ b/src/ui_ng/src/app/repository/repository-page.component.ts @@ -0,0 +1,51 @@ +// Copyright (c) 2017 VMware, Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; + +import { Project } from '../project/project'; +import { SessionService } from '../shared/session.service'; + +import { TagClickEvent } from 'harbor-ui'; + +@Component({ + selector: 'repository', + templateUrl: 'repository-page.component.html' +}) +export class RepositoryPageComponent implements OnInit { + projectId: number; + hasProjectAdminRole: boolean; + hasSignedIn: boolean; + + constructor( + private route: ActivatedRoute, + private session: SessionService, + private router: Router + ) { + } + + ngOnInit(): void { + this.projectId = this.route.snapshot.parent.params['id']; + let resolverData = this.route.snapshot.parent.data; + if (resolverData) { + this.hasProjectAdminRole = (resolverData['projectResolver']).has_project_admin_role; + } + this.hasSignedIn = this.session.getCurrentUser() !== null; + } + + watchTagClickEvent(tagEvt: TagClickEvent): void { + let linkUrl = ['harbor', 'projects', tagEvt.project_id, 'repositories', tagEvt.repository_name, 'tags', tagEvt.tag_name]; + this.router.navigate(linkUrl); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository.component.css b/src/ui_ng/src/app/repository/repository.component.css deleted file mode 100644 index d101ae195..000000000 --- a/src/ui_ng/src/app/repository/repository.component.css +++ /dev/null @@ -1,5 +0,0 @@ -.option-right { - padding-right: 16px; - margin-top: 32px; - margin-bottom: 12px; -} \ 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 deleted file mode 100644 index dc6282985..000000000 --- a/src/ui_ng/src/app/repository/repository.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
- - - - -
-
-
-
- -
-
\ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository.component.ts b/src/ui_ng/src/app/repository/repository.component.ts deleted file mode 100644 index 265cb2ae1..000000000 --- a/src/ui_ng/src/app/repository/repository.component.ts +++ /dev/null @@ -1,126 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -import { RepositoryService } from './repository.service'; -import { Repository } from './repository'; - -import { MessageHandlerService } from '../shared/message-handler/message-handler.service'; -import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const'; - - -import { ConfirmationDialogService } from '../shared/confirmation-dialog/confirmation-dialog.service'; -import { ConfirmationMessage } from '../shared/confirmation-dialog/confirmation-message'; -import { Subscription } from 'rxjs/Subscription'; - -import { State } from 'clarity-angular'; - -import { Project } from '../project/project'; - -@Component({ - selector: 'repository', - templateUrl: 'repository.component.html', - styleUrls: ['./repository.component.css'] -}) -export class RepositoryComponent implements OnInit { - changedRepositories: Repository[]; - - projectId: number; - - lastFilteredRepoName: string; - - totalPage: number; - totalRecordCount: number; - - hasProjectAdminRole: boolean; - - subscription: Subscription; - - constructor( - private route: ActivatedRoute, - private repositoryService: RepositoryService, - private messageHandlerService: MessageHandlerService, - private deletionDialogService: ConfirmationDialogService - ) { - this.subscription = this.deletionDialogService - .confirmationConfirm$ - .subscribe( - message => { - if (message && - message.source === ConfirmationTargets.REPOSITORY && - message.state === ConfirmationState.CONFIRMED) { - let repoName = message.data; - this.repositoryService - .deleteRepository(repoName) - .subscribe( - response => { - this.refresh(); - this.messageHandlerService.showSuccess('REPOSITORY.DELETED_REPO_SUCCESS'); - }, - error => this.messageHandlerService.handleError(error) - ); - } - }); - - } - - ngOnInit(): void { - this.projectId = this.route.snapshot.parent.params['id']; - let resolverData = this.route.snapshot.parent.data; - if(resolverData) { - this.hasProjectAdminRole = (resolverData['projectResolver']).has_project_admin_role; - } - this.lastFilteredRepoName = ''; - this.retrieve(); - } - - ngOnDestroy(): void { - if (this.subscription) { - this.subscription.unsubscribe(); - } - } - - retrieve(state?: State) { - this.repositoryService - .listRepositories(this.projectId, this.lastFilteredRepoName) - .subscribe( - response => { - this.changedRepositories = response.json(); - }, - error => this.messageHandlerService.handleError(error) - ); - } - - doSearchRepoNames(repoName: string) { - this.lastFilteredRepoName = repoName; - this.retrieve(); - - } - - deleteRepo(repoName: string) { - let message = new ConfirmationMessage( - 'REPOSITORY.DELETION_TITLE_REPO', - 'REPOSITORY.DELETION_SUMMARY_REPO', - repoName, - repoName, - ConfirmationTargets.REPOSITORY, - ConfirmationButtons.DELETE_CANCEL); - this.deletionDialogService.openComfirmDialog(message); - } - - refresh() { - this.retrieve(); - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository.module.ts b/src/ui_ng/src/app/repository/repository.module.ts index 362ef58ed..329f86ff7 100644 --- a/src/ui_ng/src/app/repository/repository.module.ts +++ b/src/ui_ng/src/app/repository/repository.module.ts @@ -16,12 +16,10 @@ import { RouterModule } from '@angular/router'; import { SharedModule } from '../shared/shared.module'; -import { RepositoryComponent } from './repository.component'; -import { ListRepositoryComponent } from './list-repository/list-repository.component'; +import { RepositoryPageComponent } from './repository-page.component'; import { TagRepositoryComponent } from './tag-repository/tag-repository.component'; import { TopRepoComponent } from './top-repo/top-repo.component'; - -import { RepositoryService } from './repository.service'; +import { TagDetailPageComponent } from './tag-detail/tag-detail-page.component'; @NgModule({ imports: [ @@ -29,12 +27,16 @@ import { RepositoryService } from './repository.service'; RouterModule ], declarations: [ - RepositoryComponent, - ListRepositoryComponent, + RepositoryPageComponent, TagRepositoryComponent, - TopRepoComponent + TopRepoComponent, + TagDetailPageComponent ], - exports: [RepositoryComponent, ListRepositoryComponent, TopRepoComponent], - providers: [RepositoryService] + exports: [ + RepositoryPageComponent, + TopRepoComponent, + TagDetailPageComponent + ], + providers: [] }) export class RepositoryModule { } \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository.service.ts b/src/ui_ng/src/app/repository/repository.service.ts deleted file mode 100644 index 2ed84eec5..000000000 --- a/src/ui_ng/src/app/repository/repository.service.ts +++ /dev/null @@ -1,62 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -import { Injectable } from '@angular/core'; -import { Http, URLSearchParams, Response } from '@angular/http'; - -import { Repository } from './repository'; -import { Tag } from './tag'; - -import { Observable } from 'rxjs/Observable' -import 'rxjs/add/observable/of'; -import 'rxjs/add/operator/mergeMap'; - -@Injectable() -export class RepositoryService { - - constructor(private http: Http){} - - listRepositories(projectId: number, repoName: string, page?: number, pageSize?: number): Observable { - let params = new URLSearchParams(); - if(page && pageSize) { - params.set('page', page + ''); - params.set('page_size', pageSize + ''); - } - return this.http - .get(`/api/repositories?project_id=${projectId}&q=${repoName}`, {search: params}) - .map(response=>response) - .catch(error=>Observable.throw(error)); - } - - listTags(repoName: string): Observable { - return this.http - .get(`/api/repositories/${repoName}/tags`) - .map(response=>response.json()) - .catch(error=>Observable.throw(error)); - } - - deleteRepository(repoName: string): Observable { - return this.http - .delete(`/api/repositories/${repoName}`) - .map(response=>response.status) - .catch(error=>Observable.throw(error)); - } - - deleteRepoByTag(repoName: string, tag: string): Observable { - return this.http - .delete(`/api/repositories/${repoName}/tags/${tag}`) - .map(response=>response.status) - .catch(error=>Observable.throw(error)); - } - -} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository.ts b/src/ui_ng/src/app/repository/repository.ts deleted file mode 100644 index cc59c4b86..000000000 --- a/src/ui_ng/src/app/repository/repository.ts +++ /dev/null @@ -1,45 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -/* - { - "id": "2", - "name": "library/mysql", - "owner_id": 1, - "project_id": 1, - "description": "", - "pull_count": 0, - "star_count": 0, - "tags_count": 1, - "creation_time": "2017-02-14T09:22:58Z", - "update_time": "0001-01-01T00:00:00Z" - } -*/ - -export class Repository { - id: number; - name: string; - owner_id: number; - project_id: number; - description: string; - pull_count: number; - start_count: number; - tags_count: number; - creation_time: Date; - update_time: Date; - - constructor(name: string, tags_count: number) { - this.name = name; - this.tags_count = tags_count; - } -} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.html b/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.html new file mode 100644 index 000000000..3c047ba42 --- /dev/null +++ b/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.ts b/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.ts new file mode 100644 index 000000000..27b3dd2d5 --- /dev/null +++ b/src/ui_ng/src/app/repository/tag-detail/tag-detail-page.component.ts @@ -0,0 +1,41 @@ +// Copyright (c) 2017 VMware, Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; + +@Component({ + selector: 'repository', + templateUrl: 'tag-detail-page.component.html' +}) +export class TagDetailPageComponent implements OnInit { + tagId: string; + repositoryId: string; + projectId: string | number; + + constructor( + private route: ActivatedRoute, + private router: Router + ) { + } + + ngOnInit(): void { + this.repositoryId = this.route.snapshot.params["repo"]; + this.tagId = this.route.snapshot.params["tag"]; + this.projectId = this.route.snapshot.parent.params["id"]; + } + + goBack(tag: string): void { + this.router.navigate(["harbor", "projects", this.projectId, "repositories"]); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.css b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.css index 6b0ece6bd..23ed1fd3e 100644 --- a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.css +++ b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.css @@ -1,3 +1,3 @@ .sub-header-title { - margin-top: 12px; -} + margin-top: 12px; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html index 89290cee9..0ef68de50 100644 --- a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html +++ b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html @@ -1,45 +1,5 @@ - -< {{'REPOSITORY.REPOSITORIES' | translate}} -< {{'SEARCH.BACK' | translate}} - - -

{{ manifestInfoTitle | translate }}

-
-
- -
-
-
- -
- - -

{{repoName}}

- - {{'REPOSITORY.TAG' | translate}} - {{'REPOSITORY.PULL_COMMAND' | translate}} - {{'REPOSITORY.SIGNED' | translate}} - {{'REPOSITORY.AUTHOR' | translate}} - {{'REPOSITORY.CREATED' | translate}} - {{'REPOSITORY.DOCKER_VERSION' | translate}} - {{'REPOSITORY.ARCHITECTURE' | translate}} - {{'REPOSITORY.OS' | translate}} - - - - - - {{t.name}} - docker pull {{registryUrl}}/{{repoName}}:{{t.name}} - - - - - {{t.author}} - {{t.created | date: 'short'}} - {{t.docker_version}} - {{t.architecture}} - {{t.os}} - - {{tags ? tags.length : 0}} {{'REPOSITORY.ITEMS' | translate}} - \ No newline at end of file + \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts index aef4788e4..c2d4b1eea 100644 --- a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts +++ b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts @@ -11,92 +11,38 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -import { RepositoryService } from '../repository.service'; -import { MessageHandlerService } from '../../shared/message-handler/message-handler.service'; -import { ConfirmationTargets, ConfirmationState, ConfirmationButtons } from '../../shared/shared.const'; - -import { ConfirmationDialogService } from '../../shared/confirmation-dialog/confirmation-dialog.service'; -import { ConfirmationMessage } from '../../shared/confirmation-dialog/confirmation-message'; - -import { Subscription } from 'rxjs/Subscription'; - -import { Tag } from '../tag'; - +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; import { AppConfigService } from '../../app-config.service'; - import { SessionService } from '../../shared/session.service'; - +import { TagClickEvent } from 'harbor-ui'; import { Project } from '../../project/project'; @Component({ selector: 'tag-repository', templateUrl: 'tag-repository.component.html', - styleUrls: ['./tag-repository.component.css'], - changeDetection: ChangeDetectionStrategy.OnPush + styleUrls: ['./tag-repository.component.css'] }) -export class TagRepositoryComponent implements OnInit, OnDestroy { +export class TagRepositoryComponent implements OnInit { projectId: number; repoName: string; - hasProjectAdminRole: boolean = false; - - tags: Tag[]; registryUrl: string; withNotary: boolean; - hasSignedIn: boolean; - showTagManifestOpened: boolean; - manifestInfoTitle: string; - digestId: string; - staticBackdrop: boolean = true; - closable: boolean = false; - - selectAll: boolean = false; - - subscription: Subscription; - constructor( private route: ActivatedRoute, - private messageHandlerService: MessageHandlerService, - private deletionDialogService: ConfirmationDialogService, - private repositoryService: RepositoryService, + private router: Router, private appConfigService: AppConfigService, - private session: SessionService, - private ref: ChangeDetectorRef){ - this.subscription = this.deletionDialogService.confirmationConfirm$.subscribe( - message => { - if (message && - message.source === ConfirmationTargets.TAG - && message.state === ConfirmationState.CONFIRMED) { - let tag = message.data; - if (tag) { - if (tag.signed) { - return; - } else { - this.repositoryService - .deleteRepoByTag(this.repoName, tag.name) - .subscribe( - response => { - this.retrieve(); - this.messageHandlerService.showSuccess('REPOSITORY.DELETED_TAG_SUCCESS'); - }, - error => this.messageHandlerService.handleError(error) - ); - } - } - } - }); + private session: SessionService) { } ngOnInit() { this.hasSignedIn = (this.session.getCurrentUser() !== null); let resolverData = this.route.snapshot.data; - if(resolverData) { + if (resolverData) { this.hasProjectAdminRole = (resolverData['projectResolver']).has_project_admin_role; } this.projectId = this.route.snapshot.params['id']; @@ -104,60 +50,10 @@ export class TagRepositoryComponent implements OnInit, OnDestroy { this.registryUrl = this.appConfigService.getConfig().registry_url; this.withNotary = this.appConfigService.getConfig().with_notary; - this.retrieve(); - } - ngOnDestroy() { - if (this.subscription) { - this.subscription.unsubscribe(); - } - } - - retrieve() { - this.tags = []; - this.repositoryService - .listTags(this.repoName) - .subscribe( - tags => this.tags = tags, - error => this.messageHandlerService.handleError(error)); - let hnd = setInterval(()=>this.ref.markForCheck(), 100); - setTimeout(()=>clearInterval(hnd), 1000); - } - - deleteTag(tag: Tag) { - if (tag) { - let titleKey: string, summaryKey: string, content: string, buttons: ConfirmationButtons; - if (tag.signature) { - titleKey = 'REPOSITORY.DELETION_TITLE_TAG_DENIED'; - summaryKey = 'REPOSITORY.DELETION_SUMMARY_TAG_DENIED'; - buttons = ConfirmationButtons.CLOSE; - content = 'notary -s https://' + this.registryUrl + ':4443 -d ~/.docker/trust remove -p ' + this.registryUrl + '/' + this.repoName + ' ' + tag.name; - } else { - titleKey = 'REPOSITORY.DELETION_TITLE_TAG'; - summaryKey = 'REPOSITORY.DELETION_SUMMARY_TAG'; - buttons = ConfirmationButtons.DELETE_CANCEL; - content = tag.name; - } - let message = new ConfirmationMessage( - titleKey, - summaryKey, - content, - tag, - ConfirmationTargets.TAG, - buttons); - this.deletionDialogService.openComfirmDialog(message); - } - } - - showDigestId(tag: Tag) { - if(tag) { - this.manifestInfoTitle = 'REPOSITORY.COPY_DIGEST_ID'; - this.digestId = tag.digest; - this.showTagManifestOpened = true; - } - } - selectAndCopy($event: any) { - $event.target.select(); + watchTagClickEvt(tagEvt: TagClickEvent): void { + let linkUrl = ['harbor', 'projects', tagEvt.project_id, 'repositories', tagEvt.repository_name, 'tags', tagEvt.tag_name]; + this.router.navigate(linkUrl); } } \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/tag.ts b/src/ui_ng/src/app/repository/tag.ts deleted file mode 100644 index b22fdb9b5..000000000 --- a/src/ui_ng/src/app/repository/tag.ts +++ /dev/null @@ -1,23 +0,0 @@ -// Copyright (c) 2017 VMware, Inc. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -export class Tag { - digest: string; - name: string; - architecture: string; - os: string; - docker_version: string; - author: string; - created: Date; - signature?: {[key: string]: any | any[]} -} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/top-repo/top-repo.component.ts b/src/ui_ng/src/app/repository/top-repo/top-repo.component.ts index 021b19a32..62652aa7f 100644 --- a/src/ui_ng/src/app/repository/top-repo/top-repo.component.ts +++ b/src/ui_ng/src/app/repository/top-repo/top-repo.component.ts @@ -17,7 +17,7 @@ import { errorHandler } from '../../shared/shared.utils'; import { AlertType, ListMode } from '../../shared/shared.const'; import { MessageHandlerService } from '../../shared/message-handler/message-handler.service'; import { TopRepoService } from './top-repository.service'; -import { Repository } from '../repository'; +import { Repository } from 'harbor-ui'; @Component({ selector: 'top-repo', diff --git a/src/ui_ng/src/app/repository/top-repo/top-repository.service.ts b/src/ui_ng/src/app/repository/top-repo/top-repository.service.ts index ce103ef36..684e7ae8c 100644 --- a/src/ui_ng/src/app/repository/top-repo/top-repository.service.ts +++ b/src/ui_ng/src/app/repository/top-repo/top-repository.service.ts @@ -15,7 +15,7 @@ import { Injectable } from '@angular/core'; import { Headers, Http, RequestOptions } from '@angular/http'; import 'rxjs/add/operator/toPromise'; -import { Repository } from '../repository'; +import { Repository } from 'harbor-ui'; export const topRepoEndpoint = "/api/repositories/top"; /** diff --git a/src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.ts b/src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.ts index 3caaf8772..2a714f94c 100644 --- a/src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.ts +++ b/src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.ts @@ -13,7 +13,7 @@ // limitations under the License. import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { Router, NavigationExtras } from '@angular/router'; -import { Repository } from '../../repository/repository'; +import { Repository } from 'harbor-ui'; import { State } from 'clarity-angular'; import { SearchTriggerService } from '../../base/global-search/search-trigger.service'; diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json index 17ec53e54..9e0953ae9 100644 --- a/src/ui_ng/src/i18n/lang/en-us-lang.json +++ b/src/ui_ng/src/i18n/lang/en-us-lang.json @@ -330,6 +330,7 @@ "OS": "OS", "SHOW_DETAILS": "Show Details", "REPOSITORIES": "Repositories", + "OF": "of", "ITEMS": "item(s)", "POP_REPOS": "Popular Repositories", "DELETED_REPO_SUCCESS": "Deleted repository successfully.", diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json index 43febf328..5887d4769 100644 --- a/src/ui_ng/src/i18n/lang/es-es-lang.json +++ b/src/ui_ng/src/i18n/lang/es-es-lang.json @@ -331,6 +331,7 @@ "OS": "SO", "SHOW_DETAILS": "Mostrar Detalles", "REPOSITORIES": "Repositorios", + "OF": "of", "ITEMS": "elemento(s)", "POP_REPOS": "Repositorios Populares", "DELETED_REPO_SUCCESS": "Repositorio eliminado satisfactoriamente.", diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json index 2aaab8142..ef3551f72 100644 --- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json +++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json @@ -330,6 +330,7 @@ "OS": "操作系统", "SHOW_DETAILS": "显示详细", "REPOSITORIES": "镜像仓库", + "OF": "共计", "ITEMS": "条记录", "POP_REPOS": "受欢迎的镜像仓库", "DELETED_REPO_SUCCESS": "成功删除镜像仓库。", From ef4581449f8bb556e4ab7ec275a06c5ff4344931 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Mon, 19 Jun 2017 12:35:56 +0800 Subject: [PATCH 06/19] update related package.json files --- src/ui_ng/lib/package.json | 146 ++++++++++++++++----------------- src/ui_ng/lib/pkg/package.json | 42 +++++----- src/ui_ng/package.json | 143 ++++++++++++++++---------------- 3 files changed, 166 insertions(+), 165 deletions(-) diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json index df516dae1..92fab7b99 100644 --- a/src/ui_ng/lib/package.json +++ b/src/ui_ng/lib/package.json @@ -1,74 +1,74 @@ { - "name": "harbor-ui", - "version": "0.1.0", - "description": "Harbor shared UI components based on Clarity and Angular4", - "scripts": { - "start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json", - "lint": "tslint \"src/**/*.ts\"", - "test": "ng test --single-run", - "test:once": "karma start karma.conf.js --single-run", - "pree2e": "webdriver-manager update", - "e2e": "protractor", - "cleanup": "rimraf dist", - "copy": "copyfiles -f README.md LICENSE AUTHORS pkg/package.json dist", - "transpile": "ngc -p tsconfig.json", - "package": "rollup -c", - "minify": "uglifyjs dist/bundles/harborui.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/harborui.umd.min.js", - "build": "npm run cleanup && npm run transpile && npm run package && npm run minify && npm run copy" - }, - "private": true, - "dependencies": { - "@angular/animations": "^4.1.0", - "@angular/common": "^4.1.0", - "@angular/compiler": "^4.1.0", - "@angular/core": "^4.1.0", - "@angular/forms": "^4.1.0", - "@angular/http": "^4.1.0", - "@angular/platform-browser": "^4.1.0", - "@angular/platform-browser-dynamic": "^4.1.0", - "@angular/router": "^4.1.0", - "@ngx-translate/core": "^6.0.0", - "@ngx-translate/http-loader": "0.0.3", - "@webcomponents/custom-elements": "1.0.0-alpha.3", - "clarity-angular": "^0.9.7", - "clarity-icons": "^0.9.7", - "clarity-ui": "^0.9.7", - "core-js": "^2.4.1", - "intl": "^1.2.5", - "mutationobserver-shim": "^0.3.2", - "ngx-clipboard": "^8.0.2", - "ngx-cookie": "^1.0.0", - "rxjs": "^5.0.1", - "ts-helpers": "^1.1.1", - "web-animations-js": "^2.2.1", - "zone.js": "^0.8.4" - }, - "devDependencies": { - "@angular/cli": "^1.0.0", - "@angular/compiler-cli": "^4.0.1", - "@types/core-js": "^0.9.41", - "@types/jasmine": "~2.2.30", - "@types/node": "^6.0.42", - "bootstrap": "4.0.0-alpha.5", - "codelyzer": "~2.0.0-beta.4", - "enhanced-resolve": "^3.0.0", - "jasmine-core": "2.4.1", - "jasmine-spec-reporter": "2.5.0", - "karma": "1.2.0", - "karma-cli": "^1.0.1", - "karma-jasmine": "^1.0.2", - "karma-mocha-reporter": "^2.2.1", - "karma-phantomjs-launcher": "^1.0.0", - "karma-remap-istanbul": "^0.2.1", - "protractor": "^4.0.9", - "rollup": "^0.41.6", - "ts-node": "1.2.1", - "tslint": "^4.1.1", - "typescript": "~2.2.0", - "typings": "^1.4.0", - "uglify-js": "^2.8.22", - "webdriver-manager": "10.2.5", - "rimraf": "^2.6.1", - "copyfiles": "^1.2.0" - } -} + "name": "harbor-ui", + "version": "0.1.0", + "description": "Harbor shared UI components based on Clarity and Angular4", + "scripts": { + "start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json", + "lint": "tslint \"src/**/*.ts\"", + "test": "ng test --single-run", + "test:once": "karma start karma.conf.js --single-run", + "pree2e": "webdriver-manager update", + "e2e": "protractor", + "cleanup": "rimraf dist", + "copy": "copyfiles -f README.md LICENSE AUTHORS pkg/package.json dist", + "transpile": "ngc -p tsconfig.json", + "package": "rollup -c", + "minify": "uglifyjs dist/bundles/harborui.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/harborui.umd.min.js", + "build": "npm run cleanup && npm run transpile && npm run package && npm run minify && npm run copy" + }, + "private": true, + "dependencies": { + "@angular/animations": "^4.1.3", + "@angular/common": "^4.1.3", + "@angular/compiler": "^4.1.3", + "@angular/core": "^4.1.3", + "@angular/forms": "^4.1.3", + "@angular/http": "^4.1.3", + "@angular/platform-browser": "^4.1.3", + "@angular/platform-browser-dynamic": "^4.1.3", + "@angular/router": "^4.1.3", + "@ngx-translate/core": "^6.0.0", + "@ngx-translate/http-loader": "0.0.3", + "@webcomponents/custom-elements": "1.0.0-alpha.3", + "clarity-angular": "^0.9.7", + "clarity-icons": "^0.9.7", + "clarity-ui": "^0.9.7", + "core-js": "^2.4.1", + "intl": "^1.2.5", + "mutationobserver-shim": "^0.3.2", + "ngx-clipboard": "^8.0.2", + "ngx-cookie": "^1.0.0", + "rxjs": "^5.0.1", + "ts-helpers": "^1.1.1", + "web-animations-js": "^2.2.1", + "zone.js": "^0.8.4" + }, + "devDependencies": { + "@angular/cli": "^1.0.0", + "@angular/compiler-cli": "^4.0.1", + "@types/core-js": "^0.9.41", + "@types/jasmine": "~2.2.30", + "@types/node": "^6.0.42", + "bootstrap": "4.0.0-alpha.5", + "codelyzer": "~2.0.0-beta.4", + "enhanced-resolve": "^3.0.0", + "jasmine-core": "2.4.1", + "jasmine-spec-reporter": "2.5.0", + "karma": "1.2.0", + "karma-cli": "^1.0.1", + "karma-jasmine": "^1.0.2", + "karma-mocha-reporter": "^2.2.1", + "karma-phantomjs-launcher": "^1.0.0", + "karma-remap-istanbul": "^0.2.1", + "protractor": "^4.0.9", + "rollup": "^0.41.6", + "ts-node": "1.2.1", + "tslint": "^4.1.1", + "typescript": "~2.2.0", + "typings": "^1.4.0", + "uglify-js": "^2.8.22", + "webdriver-manager": "10.2.5", + "rimraf": "^2.6.1", + "copyfiles": "^1.2.0" + } +} \ No newline at end of file diff --git a/src/ui_ng/lib/pkg/package.json b/src/ui_ng/lib/pkg/package.json index c947c00f3..b83ce244b 100644 --- a/src/ui_ng/lib/pkg/package.json +++ b/src/ui_ng/lib/pkg/package.json @@ -19,27 +19,29 @@ }, "homepage": "https://github.com/vmware/harbor#readme", "peerDependencies": { - "@angular/animations": "^4.0.1", - "@angular/common": "^4.0.1", - "@angular/compiler": "^4.0.1", - "@angular/core": "^4.0.1", - "@angular/forms": "^4.0.1", - "@angular/http": "^4.0.1", - "@angular/platform-browser": "^4.0.1", - "@angular/platform-browser-dynamic": "^4.0.1", - "@angular/router": "^4.0.1", - "@webcomponents/custom-elements": "1.0.0-alpha.3", - "web-animations-js": "^2.2.1", - "clarity-angular": "^0.9.0", - "clarity-icons": "^0.9.0", - "clarity-ui": "^0.9.0", - "core-js": "^2.4.1", - "rxjs": "^5.0.1", - "ts-helpers": "^1.1.1", - "zone.js": "^0.8.4", - "mutationobserver-shim": "^0.3.2", + "@angular/animations": "^4.1.3", + "@angular/common": "^4.1.3", + "@angular/compiler": "^4.1.3", + "@angular/core": "^4.1.3", + "@angular/forms": "^4.1.3", + "@angular/http": "^4.1.3", + "@angular/platform-browser": "^4.1.3", + "@angular/platform-browser-dynamic": "^4.1.3", + "@angular/router": "^4.1.3", "@ngx-translate/core": "^6.0.0", "@ngx-translate/http-loader": "0.0.3", - "ngx-cookie": "^1.0.0" + "@webcomponents/custom-elements": "1.0.0-alpha.3", + "clarity-angular": "^0.9.7", + "clarity-icons": "^0.9.7", + "clarity-ui": "^0.9.7", + "core-js": "^2.4.1", + "intl": "^1.2.5", + "mutationobserver-shim": "^0.3.2", + "ngx-clipboard": "^8.0.2", + "ngx-cookie": "^1.0.0", + "rxjs": "^5.0.1", + "ts-helpers": "^1.1.1", + "web-animations-js": "^2.2.1", + "zone.js": "^0.8.4" } } \ No newline at end of file diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index 519434b6a..7db5eb22b 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -1,73 +1,72 @@ { - "name": "harbor", - "version": "1.1.0", - "description": "Harbor UI with Clarity", - "angular-cli": {}, - "scripts": { - "start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json", - "lint": "tslint \"src/**/*.ts\"", - "test": "ng test --single-run", - "pree2e": "webdriver-manager update", - "e2e": "protractor", - "build": "ngc -p tsconfig-aot.json" - }, - "private": true, - "dependencies": { - "@angular/animations": "^4.0.1", - "@angular/common": "^4.0.1", - "@angular/compiler": "^4.0.1", - "@angular/compiler-cli": "^4.0.2", - "@angular/core": "^4.0.1", - "@angular/forms": "^4.0.1", - "@angular/http": "^4.0.1", - "@angular/platform-browser": "^4.0.1", - "@angular/platform-browser-dynamic": "^4.0.1", - "@angular/platform-server": "^4.0.2", - "@angular/router": "^4.0.1", - "@ngx-translate/core": "^6.0.0", - "@ngx-translate/http-loader": "0.0.3", - "@types/jquery": "^2.0.41", - "@webcomponents/custom-elements": "1.0.0-alpha.3", - "clarity-angular": "^0.9.0", - "clarity-icons": "^0.9.0", - "clarity-ui": "^0.9.0", - "core-js": "^2.4.1", - "harbor-ui": "^0.1.85", - "intl": "^1.2.5", - "mutationobserver-shim": "^0.3.2", - "ngx-clipboard": "^8.0.2", - "ngx-cookie": "^1.0.0", - "rxjs": "^5.0.1", - "ts-helpers": "^1.1.1", - "web-animations-js": "^2.2.1", - "zone.js": "^0.8.4" - }, - "devDependencies": { - "@angular/cli": "^1.0.0", - "@angular/compiler-cli": "^4.0.1", - "@types/core-js": "^0.9.34", - "@types/jasmine": "~2.2.30", - "@types/node": "^6.0.42", - "bootstrap": "4.0.0-alpha.5", - "codelyzer": "~2.0.0-beta.4", - "enhanced-resolve": "^3.0.0", - "jasmine-core": "2.4.1", - "jasmine-spec-reporter": "2.5.0", - "karma": "1.2.0", - "karma-cli": "^1.0.1", - "karma-jasmine": "^1.0.2", - "karma-mocha-reporter": "^2.2.1", - "karma-phantomjs-launcher": "^1.0.0", - "karma-remap-istanbul": "^0.2.1", - "protractor": "4.0.9", - "rollup": "^0.41.6", - "rollup-plugin-commonjs": "^8.0.2", - "rollup-plugin-node-resolve": "^3.0.0", - "rollup-plugin-uglify": "^1.0.1", - "ts-node": "1.2.1", - "tslint": "^4.1.1", - "typescript": "~2.2.0", - "typings": "^1.4.0", - "webdriver-manager": "10.2.5" - } -} \ No newline at end of file + "name": "harbor", + "version": "1.1.0", + "description": "Harbor UI with Clarity", + "angular-cli": {}, + "scripts": { + "start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json", + "lint": "tslint \"src/**/*.ts\"", + "test": "ng test --single-run", + "pree2e": "webdriver-manager update", + "e2e": "protractor", + "build": "ngc -p tsconfig-aot.json" + }, + "private": true, + "dependencies": { + "@angular/animations": "^4.1.3", + "@angular/common": "^4.1.3", + "@angular/compiler": "^4.1.3", + "@angular/compiler-cli": "^4.0.2", + "@angular/core": "^4.1.3", + "@angular/forms": "^4.1.3", + "@angular/http": "^4.1.3", + "@angular/platform-browser": "^4.1.3", + "@angular/platform-browser-dynamic": "^4.1.3", + "@angular/router": "^4.1.3", + "@ngx-translate/core": "^6.0.0", + "@ngx-translate/http-loader": "0.0.3", + "@types/jquery": "^2.0.41", + "@webcomponents/custom-elements": "1.0.0-alpha.3", + "clarity-angular": "^0.9.7", + "clarity-icons": "^0.9.7", + "clarity-ui": "^0.9.7", + "core-js": "^2.4.1", + "harbor-ui": "^0.1.85", + "intl": "^1.2.5", + "mutationobserver-shim": "^0.3.2", + "ngx-clipboard": "^8.0.2", + "ngx-cookie": "^1.0.0", + "rxjs": "^5.0.1", + "ts-helpers": "^1.1.1", + "web-animations-js": "^2.2.1", + "zone.js": "^0.8.4" + }, + "devDependencies": { + "@angular/cli": "^1.0.0", + "@angular/compiler-cli": "^4.0.2", + "@types/core-js": "^0.9.34", + "@types/jasmine": "~2.2.30", + "@types/node": "^6.0.42", + "bootstrap": "4.0.0-alpha.5", + "codelyzer": "~2.0.0-beta.4", + "enhanced-resolve": "^3.0.0", + "jasmine-core": "2.4.1", + "jasmine-spec-reporter": "2.5.0", + "karma": "1.2.0", + "karma-cli": "^1.0.1", + "karma-jasmine": "^1.0.2", + "karma-mocha-reporter": "^2.2.1", + "karma-phantomjs-launcher": "^1.0.0", + "karma-remap-istanbul": "^0.2.1", + "protractor": "4.0.9", + "rollup": "^0.41.6", + "rollup-plugin-commonjs": "^8.0.2", + "rollup-plugin-node-resolve": "^3.0.0", + "rollup-plugin-uglify": "^1.0.1", + "ts-node": "1.2.1", + "tslint": "^4.1.1", + "typescript": "~2.2.0", + "typings": "^1.4.0", + "webdriver-manager": "10.2.5" + } +} From 4d9eeac43420289c91e8f05dca059dbbc86bcbba Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Mon, 19 Jun 2017 12:43:43 +0800 Subject: [PATCH 07/19] change angualr cli version to 1.2.0 --- make/dev/nodeclarity/angular-cli.json | 66 +++++++++++++-------------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/make/dev/nodeclarity/angular-cli.json b/make/dev/nodeclarity/angular-cli.json index 059a95272..48f8da43b 100644 --- a/make/dev/nodeclarity/angular-cli.json +++ b/make/dev/nodeclarity/angular-cli.json @@ -1,41 +1,39 @@ { "project": { - "version": "1.1.0", + "version": "1.2.0", "name": "Harbor" }, - "apps": [ - { - "root": "src", - "outDir": "dist", - "assets": [ - "images", - "favicon.ico" - ], - "index": "index.html", - "main": "main.ts", - "test": "test.ts", - "tsconfig": "tsconfig.json", - "prefix": "app", - "mobile": false, - "styles": [ - "../node_modules/clarity-icons/clarity-icons.min.css", - "../node_modules/clarity-ui/clarity-ui.min.css", - "styles.css" - ], - "scripts": [ - "../node_modules/core-js/client/shim.min.js", - "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js", - "../node_modules/@webcomponents/custom-elements/custom-elements.min.js", - "../node_modules/clarity-icons/clarity-icons.min.js", - "../node_modules/web-animations-js/web-animations.min.js" - ], - "environmentSource": "environments/environment.ts", - "environments": { - "dev": "environments/environment.ts", - "prod": "environments/environment.prod.ts" - } + "apps": [{ + "root": "src", + "outDir": "dist", + "assets": [ + "images", + "favicon.ico" + ], + "index": "index.html", + "main": "main.ts", + "test": "test.ts", + "tsconfig": "tsconfig.json", + "prefix": "app", + "mobile": false, + "styles": [ + "../node_modules/clarity-icons/clarity-icons.min.css", + "../node_modules/clarity-ui/clarity-ui.min.css", + "styles.css" + ], + "scripts": [ + "../node_modules/core-js/client/shim.min.js", + "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js", + "../node_modules/@webcomponents/custom-elements/custom-elements.min.js", + "../node_modules/clarity-icons/clarity-icons.min.js", + "../node_modules/web-animations-js/web-animations.min.js" + ], + "environmentSource": "environments/environment.ts", + "environments": { + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" } - ], + }], "addons": [], "packages": [], "e2e": { @@ -64,4 +62,4 @@ "service": true } } -} +} \ No newline at end of file From e60e4c12a665f7b70ccebd92d487cfdaa45a6de7 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Tue, 20 Jun 2017 00:51:08 +0800 Subject: [PATCH 08/19] integrate with vulnerability API --- src/ui_ng/lib/README.md | 56 +++++-- src/ui_ng/lib/package.json | 2 +- src/ui_ng/lib/pkg/package.json | 2 +- src/ui_ng/lib/src/harbor-library.module.ts | 1 + .../repository-stackview.component.html.ts | 2 +- .../repository-stackview.component.spec.ts | 4 +- .../repository-stackview.component.ts | 4 + src/ui_ng/lib/src/service/interface.ts | 31 ++-- src/ui_ng/lib/src/service/scanning.service.ts | 47 +++++- .../lib/src/tag/tag-detail.component.html.ts | 8 +- .../lib/src/tag/tag-detail.component.spec.ts | 53 +++++-- src/ui_ng/lib/src/tag/tag-detail.component.ts | 54 +++++-- src/ui_ng/lib/src/tag/tag.component.css.ts | 7 + src/ui_ng/lib/src/tag/tag.component.html.ts | 39 +++-- src/ui_ng/lib/src/tag/tag.component.spec.ts | 33 +++-- src/ui_ng/lib/src/tag/tag.component.ts | 84 ++++++++++- src/ui_ng/lib/src/utils.ts | 72 +++++---- .../lib/src/vulnerability-scanning/index.ts | 1 + .../result-bar-chart.component.spec.ts | 29 +++- .../result-bar-chart.component.ts | 45 +++++- .../result-grid.component.ts | 48 ++++-- .../result-tip.component.spec.ts | 29 +++- .../result-tip.component.ts | 69 +++++++-- .../vulnerability-scanning/scanning.css.ts | 8 +- .../vulnerability-scanning/scanning.html.ts | 26 ++-- src/ui_ng/package.json | 140 +++++++++--------- src/ui_ng/src/i18n/lang/en-us-lang.json | 4 +- src/ui_ng/src/i18n/lang/es-es-lang.json | 4 +- src/ui_ng/src/i18n/lang/zh-cn-lang.json | 4 +- 29 files changed, 644 insertions(+), 262 deletions(-) diff --git a/src/ui_ng/lib/README.md b/src/ui_ng/lib/README.md index b42a7e74c..10ae806ee 100644 --- a/src/ui_ng/lib/README.md +++ b/src/ui_ng/lib/README.md @@ -76,7 +76,7 @@ If **projectId** is set to the id of specified project, then only show the repli ``` -* **Repository and Tag Management View[updating]** +* **Repository and Tag Management View** **projectId** is used to specify which projects the repositories are from. @@ -98,6 +98,19 @@ watchTagClickEvent(tag: Tag): void { ``` +* **Tag detail view** + +This view is linked by the repository stack view only when the Clair is enabled in Harbor. + +**tagId** is an @Input property and used to specify the tag of which details are displayed. + +**repositoryId** is an @Input property and used to specified the repository to which the tag is belonged. + +**backEvt** is an @Output event emitter and used to distribute the click event of the back arrow in the detail page. + +``` + +``` ## Configurations All the related configurations are defined in the **HarborModuleConfig** interface. @@ -111,6 +124,7 @@ export const DefaultServiceConfig: IServiceConfig = { targetBaseEndpoint: "/api/targets", replicationRuleEndpoint: "/api/policies/replication", replicationJobEndpoint: "/api/jobs/replication", + vulnerabilityScanningBaseEndpoint: "/api/repositories", enablei18Support: false, defaultLang: DEFAULT_LANG, //'en-us' langCookieKey: DEFAULT_LANG_COOKIE_KEY, //'harbor-lang' @@ -147,6 +161,8 @@ It supports partially overriding. For the items not overridden, default values w * **replicationJobEndpoint:** The base endpoint of the service used to handle the replication jobs. Default is "/api/jobs/replication". +* **vulnerabilityScanningBaseEndpoint:** The base endpoint of the service used to handle the vulnerability scanning results.Default value is "/api/repositories". + * **langCookieKey:** The cookie key used to store the current used language preference. Default is "harbor-lang". * **supportedLangs:** Declare what languages are supported. Default is ['en-us', 'zh-cn', 'es-es']. @@ -215,11 +231,14 @@ HarborLibraryModule.forRoot({ ... ``` -**3. user session(Ongoing/Discussing)** -Some components may need the user authorization and authentication information to display different views. There might be two alternatives to select: +**3. user session** +Some components may need the user authorization and authentication information to display different views. The following way of handing user session is supported by the library. * Use @Input properties or interface to let top component or page to pass the required user session information in. -* Component retrieves the required information from some API provided by top component or page when necessary. +``` +//In the above repository stack view, the user session informations are passed via @input properties. +[hasSignedIn]="..." [hasProjectAdminRole]="..." +``` **4. services** The library has its own service implementations to communicate with backend APIs and transfer data. If you want to use your own data handling logic, you can implement your own services based on the defined interfaces. @@ -606,9 +625,9 @@ export class MyScanningResultService extends ScanningResultService { * * @memberOf ScanningResultService */ - getVulnerabilityScanningSummary(tagId: string): Observable | Promise | VulnerabilitySummary{ - ... - } + getVulnerabilityScanningSummary(repoName: string, tagId: string, queryParams?: RequestQueryParams): Observable | Promise | VulnerabilitySummary{ + ... + } /** * Get the detailed vulnerabilities scanning results. @@ -619,9 +638,24 @@ export class MyScanningResultService extends ScanningResultService { * * @memberOf ScanningResultService */ - getVulnerabilityScanningResults(tagId: string): Observable | Promise | VulnerabilityItem[]{ - ... - } + getVulnerabilityScanningResults(repoName: string, tagId: string, queryParams?: RequestQueryParams): Observable | Promise | VulnerabilityItem[]{ + ... + } + + + /** + * Start a new vulnerability scanning + * + * @abstract + * @param {string} repoName + * @param {string} tagId + * @returns {(Observable | Promise | any)} + * + * @memberOf ScanningResultService + */ + startVulnerabilityScanning(repoName: string, tagId: string): Observable | Promise | any { + ... + } } ... @@ -656,4 +690,4 @@ HarborLibraryModule.forRoot({ }) ... -``` \ No newline at end of file +``` diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json index 92fab7b99..7db338ddf 100644 --- a/src/ui_ng/lib/package.json +++ b/src/ui_ng/lib/package.json @@ -1,6 +1,6 @@ { "name": "harbor-ui", - "version": "0.1.0", + "version": "0.2.0", "description": "Harbor shared UI components based on Clarity and Angular4", "scripts": { "start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json", diff --git a/src/ui_ng/lib/pkg/package.json b/src/ui_ng/lib/pkg/package.json index b83ce244b..3cd233c18 100644 --- a/src/ui_ng/lib/pkg/package.json +++ b/src/ui_ng/lib/pkg/package.json @@ -1,6 +1,6 @@ { "name": "harbor-ui", - "version": "0.1.42", + "version": "0.2.0", "description": "Harbor shared UI components based on Clarity and Angular4", "author": "VMware", "module": "index.js", diff --git a/src/ui_ng/lib/src/harbor-library.module.ts b/src/ui_ng/lib/src/harbor-library.module.ts index 27a645976..d1cdfded4 100644 --- a/src/ui_ng/lib/src/harbor-library.module.ts +++ b/src/ui_ng/lib/src/harbor-library.module.ts @@ -60,6 +60,7 @@ export const DefaultServiceConfig: IServiceConfig = { targetBaseEndpoint: "/api/targets", replicationRuleEndpoint: "/api/policies/replication", replicationJobEndpoint: "/api/jobs/replication", + vulnerabilityScanningBaseEndpoint: "/api/repositories", enablei18Support: false, defaultLang: DEFAULT_LANG, langCookieKey: DEFAULT_LANG_COOKIE_KEY, diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts index 8ab942517..3d7882e7c 100644 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts @@ -21,7 +21,7 @@ export const REPOSITORY_STACKVIEW_TEMPLATE: string = ` {{r.name}} {{r.tags_count}} {{r.pull_count}} - + {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}} diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts index de680f10d..c04d7639b 100644 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts @@ -14,6 +14,7 @@ import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; import { RepositoryService, RepositoryDefaultService } from '../service/repository.service'; import { TagService, TagDefaultService } from '../service/tag.service'; import { SystemInfoService, SystemInfoDefaultService } from '../service/system-info.service'; +import { VULNERABILITY_DIRECTIVES } from '../vulnerability-scanning/index'; import { click } from '../utils'; @@ -90,7 +91,8 @@ describe('RepositoryComponentStackview (inline template)', () => { RepositoryStackviewComponent, TagComponent, ConfirmationDialogComponent, - FilterComponent + FilterComponent, + VULNERABILITY_DIRECTIVES ], providers: [ ErrorHandler, diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts index 8eb626c2d..97f86af63 100644 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts @@ -72,6 +72,10 @@ export class RepositoryStackviewComponent implements OnInit { return this.systemInfo ? this.systemInfo.with_notary : false; } + public get withClair(): boolean { + return this.systemInfo ? this.systemInfo.with_clair : false; + } + confirmDeletion(message: ConfirmationAcknowledgement) { if (message && message.source === ConfirmationTargets.REPOSITORY && diff --git a/src/ui_ng/lib/src/service/interface.ts b/src/ui_ng/lib/src/service/interface.ts index 82a1404b7..4df7078ae 100644 --- a/src/ui_ng/lib/src/service/interface.ts +++ b/src/ui_ng/lib/src/service/interface.ts @@ -45,7 +45,7 @@ export interface Tag extends Base { author: string; created: Date; signature?: string; - vulnerability?: VulnerabilitySummary; + scan_overview?: VulnerabilitySummary; } /** @@ -145,6 +145,7 @@ export interface AccessLogItem { * */ export interface SystemInfo { + with_clair?: boolean; with_notary?: boolean; with_admiral?: boolean; admiral_endpoint?: string; @@ -156,9 +157,8 @@ export interface SystemInfo { harbor_version?: string; } -//Not finalized yet export enum VulnerabilitySeverity { - NONE, UNKNOWN, LOW, MEDIUM, HIGH + _SEVERITY, NONE, UNKNOWN, LOW, MEDIUM, HIGH } export interface VulnerabilityBase { @@ -170,18 +170,27 @@ export interface VulnerabilityBase { export interface VulnerabilityItem extends VulnerabilityBase { fixedVersion: string; - layer: string; + layer?: string; description: string; } export interface VulnerabilitySummary { - total_package: number; - package_with_none: number; - package_with_high?: number; - package_with_medium?: number; - package_With_low?: number; - package_with_unknown?: number; - complete_timestamp: Date; + image_digest?: string; + scan_status: string; + job_id?: number; + severity: VulnerabilitySeverity; + components: VulnerabilityComponents; + update_time: Date; //Use as complete timestamp +} + +export interface VulnerabilityComponents { + total: number; + summary: VulnerabilitySeverityMetrics[]; +} + +export interface VulnerabilitySeverityMetrics { + severity: VulnerabilitySeverity; + count: number; } export interface TagClickEvent { diff --git a/src/ui_ng/lib/src/service/scanning.service.ts b/src/ui_ng/lib/src/service/scanning.service.ts index 12ae0687c..4f073f9ff 100644 --- a/src/ui_ng/lib/src/service/scanning.service.ts +++ b/src/ui_ng/lib/src/service/scanning.service.ts @@ -3,7 +3,8 @@ import 'rxjs/add/observable/of'; import { Injectable, Inject } from "@angular/core"; import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; import { Http, URLSearchParams } from '@angular/http'; -import { HTTP_JSON_OPTIONS } from '../utils'; +import { buildHttpRequestOptions, HTTP_JSON_OPTIONS } from '../utils'; +import { RequestQueryParams } from './RequestQueryParams'; import { VulnerabilityItem, @@ -27,7 +28,7 @@ export abstract class ScanningResultService { * * @memberOf ScanningResultService */ - abstract getVulnerabilityScanningSummary(tagId: string): Observable | Promise | VulnerabilitySummary; + abstract getVulnerabilityScanningSummary(repoName: string, tagId: string, queryParams?: RequestQueryParams): Observable | Promise | VulnerabilitySummary; /** * Get the detailed vulnerabilities scanning results. @@ -38,30 +39,60 @@ export abstract class ScanningResultService { * * @memberOf ScanningResultService */ - abstract getVulnerabilityScanningResults(tagId: string): Observable | Promise | VulnerabilityItem[]; + abstract getVulnerabilityScanningResults(repoName: string, tagId: string, queryParams?: RequestQueryParams): Observable | Promise | VulnerabilityItem[]; + + + /** + * Start a new vulnerability scanning + * + * @abstract + * @param {string} repoName + * @param {string} tagId + * @returns {(Observable | Promise | any)} + * + * @memberOf ScanningResultService + */ + abstract startVulnerabilityScanning(repoName: string, tagId: string): Observable | Promise | any; } @Injectable() export class ScanningResultDefaultService extends ScanningResultService { + _baseUrl: string = '/api/repositories'; + constructor( private http: Http, @Inject(SERVICE_CONFIG) private config: IServiceConfig) { super(); + if (this.config && this.config.vulnerabilityScanningBaseEndpoint) { + this._baseUrl = this.config.vulnerabilityScanningBaseEndpoint; + } } - getVulnerabilityScanningSummary(tagId: string): Observable | Promise | VulnerabilitySummary { - if (!tagId || tagId.trim() === '') { + getVulnerabilityScanningSummary(repoName: string, tagId: string, queryParams?: RequestQueryParams): Observable | Promise | VulnerabilitySummary { + if (!repoName || repoName.trim() === '' || !tagId || tagId.trim() === '') { return Promise.reject('Bad argument'); } return Observable.of({}); } - getVulnerabilityScanningResults(tagId: string): Observable | Promise | VulnerabilityItem[] { - if (!tagId || tagId.trim() === '') { + getVulnerabilityScanningResults(repoName: string, tagId: string, queryParams?: RequestQueryParams): Observable | Promise | VulnerabilityItem[] { + if (!repoName || repoName.trim() === '' || !tagId || tagId.trim() === '') { return Promise.reject('Bad argument'); } - return Observable.of([]); + return this.http.get(`${this._baseUrl}/${repoName}/tags/${tagId}/vulnerability/details`, buildHttpRequestOptions(queryParams)).toPromise() + .then(response => response.json() as VulnerabilityItem[]) + .catch(error => Promise.reject(error)); + } + + startVulnerabilityScanning(repoName: string, tagId: string): Observable | Promise | any { + if (!repoName || repoName.trim() === '' || !tagId || tagId.trim() === '') { + return Promise.reject('Bad argument'); + } + + return this.http.post(`${this._baseUrl}/${repoName}/tags/${tagId}/scan`, null).toPromise() + .then(() => { return true }) + .catch(error => Promise.reject(error)); } } \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.html.ts b/src/ui_ng/lib/src/tag/tag-detail.component.html.ts index 21df9f81a..5980ba87a 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.html.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.html.ts @@ -7,10 +7,10 @@ export const TAG_DETAIL_HTML: string = `
- {{tagDetails.name}}:v{{tagDetails.docker_version}} + {{tagDetails.name}}
- {{'TAG.CREATION_TIME_PREFIX' | translate }} {{tagDetails.created | date }} {{'TAG.CREATOR_PREFIX' | translate }} {{tagDetails.author}} + {{'TAG.CREATION_TIME_PREFIX' | translate }} {{tagDetails.created | date }} {{'TAG.CREATOR_PREFIX' | translate }} {{author | translate}}
@@ -23,11 +23,13 @@ export const TAG_DETAIL_HTML: string = `
{{'TAG.ARCHITECTURE' | translate }}
{{'TAG.OS' | translate }}
+
{{'TAG.DOCKER_VERSION' | translate }}
{{'TAG.SCAN_COMPLETION_TIME' | translate }}
{{tagDetails.architecture}}
{{tagDetails.os}}
+
{{tagDetails.docker_version}}
{{scanCompletedDatetime | date}}
@@ -67,7 +69,7 @@ export const TAG_DETAIL_HTML: string = `
- +
diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts b/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts index ecdbab517..44bd18979 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts @@ -5,25 +5,40 @@ import { ResultGridComponent } from '../vulnerability-scanning/result-grid.compo import { TagDetailComponent } from './tag-detail.component'; import { ErrorHandler } from '../error-handler/error-handler'; -import { Tag, VulnerabilitySummary } from '../service/interface'; +import { Tag, VulnerabilitySummary, VulnerabilityItem, VulnerabilitySeverity } from '../service/interface'; import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; import { TagService, TagDefaultService, ScanningResultService, ScanningResultDefaultService } from '../service/index'; import { FilterComponent } from '../filter/index'; +import { VULNERABILITY_SCAN_STATUS } from '../utils'; describe('TagDetailComponent (inline template)', () => { let comp: TagDetailComponent; let fixture: ComponentFixture; let tagService: TagService; + let scanningService: ScanningResultService; let spy: jasmine.Spy; + let vulSpy: jasmine.Spy; let mockVulnerability: VulnerabilitySummary = { - total_package: 124, - package_with_none: 92, - package_with_high: 10, - package_with_medium: 6, - package_With_low: 13, - package_with_unknown: 3, - complete_timestamp: new Date() + scan_status: VULNERABILITY_SCAN_STATUS.finished, + severity: 5, + update_time: new Date(), + components: { + total: 124, + summary: [{ + severity: 1, + count: 90 + }, { + severity: 3, + count: 10 + }, { + severity: 4, + count: 10 + }, { + severity: 5, + count: 13 + }] + } }; let mockTag: Tag = { "digest": "sha256:e5c82328a509aeb7c18c1d7fb36633dc638fcf433f651bdcda59c1cc04d3ee55", @@ -34,7 +49,7 @@ describe('TagDetailComponent (inline template)', () => { "author": "steven", "created": new Date("2016-11-08T22:41:15.912313785Z"), "signature": null, - vulnerability: mockVulnerability + scan_overview: mockVulnerability }; let config: IServiceConfig = { @@ -70,6 +85,22 @@ describe('TagDetailComponent (inline template)', () => { tagService = fixture.debugElement.injector.get(TagService); spy = spyOn(tagService, 'getTag').and.returnValues(Promise.resolve(mockTag)); + let mockData: VulnerabilityItem[] = []; + for (let i = 0; i < 30; i++) { + let res: VulnerabilityItem = { + id: "CVE-2016-" + (8859 + i), + severity: i % 2 === 0 ? VulnerabilitySeverity.HIGH : VulnerabilitySeverity.MEDIUM, + package: "package_" + i, + layer: "layer_" + i, + version: '4.' + i + ".0", + fixedVersion: '4.' + i + '.11', + description: "Mock data" + }; + mockData.push(res); + } + scanningService = fixture.debugElement.injector.get(ScanningResultService); + vulSpy = spyOn(scanningService, 'getVulnerabilityScanningResults').and.returnValue(Promise.resolve(mockData)); + fixture.detectChanges(); }); @@ -85,7 +116,7 @@ describe('TagDetailComponent (inline template)', () => { let el: HTMLElement = fixture.nativeElement.querySelector('.tag-name'); expect(el).toBeTruthy(); - expect(el.textContent.trim()).toEqual('nginx:v1.12.3'); + expect(el.textContent.trim()).toEqual('nginx'); }); })); @@ -113,7 +144,7 @@ describe('TagDetailComponent (inline template)', () => { expect(el).toBeTruthy(); let el2: HTMLElement = el.querySelector('div'); expect(el2).toBeTruthy(); - expect(el2.textContent.trim()).toEqual("10 VULNERABILITY.SEVERITY.HIGH VULNERABILITY.PLURAL"); + expect(el2.textContent.trim()).toEqual("13 VULNERABILITY.SEVERITY.HIGH VULNERABILITY.PLURAL"); }); })); diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.ts b/src/ui_ng/lib/src/tag/tag-detail.component.ts index b579d8eb9..daaf2182f 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.ts @@ -3,7 +3,7 @@ import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; import { TAG_DETAIL_STYLES } from './tag-detail.component.css'; import { TAG_DETAIL_HTML } from './tag-detail.component.html'; -import { TagService, Tag } from '../service/index'; +import { TagService, Tag, VulnerabilitySeverity } from '../service/index'; import { toPromise } from '../utils'; import { ErrorHandler } from '../error-handler/index'; @@ -15,6 +15,11 @@ import { ErrorHandler } from '../error-handler/index'; providers: [] }) export class TagDetailComponent implements OnInit { + _highCount: number = 0; + _mediumCount: number = 0; + _lowCount: number = 0; + _unknownCount: number = 0; + @Input() tagId: string; @Input() repositoryId: string; tagDetails: Tag = { @@ -36,7 +41,32 @@ export class TagDetailComponent implements OnInit { ngOnInit(): void { if (this.repositoryId && this.tagId) { toPromise(this.tagService.getTag(this.repositoryId, this.tagId)) - .then(response => this.tagDetails = response) + .then(response => { + this.tagDetails = response; + if (this.tagDetails && + this.tagDetails.scan_overview && + this.tagDetails.scan_overview.components && + this.tagDetails.scan_overview.components.summary) { + this.tagDetails.scan_overview.components.summary.forEach(item => { + switch (item.severity) { + case VulnerabilitySeverity.UNKNOWN: + this._unknownCount += item.count; + break; + case VulnerabilitySeverity.LOW: + this._lowCount += item.count; + break; + case VulnerabilitySeverity.MEDIUM: + this._mediumCount += item.count; + break; + case VulnerabilitySeverity.HIGH: + this._highCount += item.count; + break; + default: + break; + } + }); + } + }) .catch(error => this.errorHandler.error(error)) } } @@ -45,29 +75,29 @@ export class TagDetailComponent implements OnInit { this.backEvt.emit(this.tagId); } + public get author(): string { + return this.tagDetails && this.tagDetails.author? this.tagDetails.author: 'TAG.ANONYMITY'; + } + public get highCount(): number { - return this.tagDetails && this.tagDetails.vulnerability ? - this.tagDetails.vulnerability.package_with_high : 0; + return this._highCount; } public get mediumCount(): number { - return this.tagDetails && this.tagDetails.vulnerability ? - this.tagDetails.vulnerability.package_with_medium : 0; + return this._mediumCount; } public get lowCount(): number { - return this.tagDetails && this.tagDetails.vulnerability ? - this.tagDetails.vulnerability.package_With_low : 0; + return this._lowCount; } public get unknownCount(): number { - return this.tagDetails && this.tagDetails.vulnerability ? - this.tagDetails.vulnerability.package_with_unknown : 0; + return this._unknownCount; } public get scanCompletedDatetime(): Date { - return this.tagDetails && this.tagDetails.vulnerability ? - this.tagDetails.vulnerability.complete_timestamp : new Date(); + return this.tagDetails && this.tagDetails.scan_overview ? + this.tagDetails.scan_overview.update_time : new Date(); } public get suffixForHigh(): string { diff --git a/src/ui_ng/lib/src/tag/tag.component.css.ts b/src/ui_ng/lib/src/tag/tag.component.css.ts index 8f292e5c2..6157b6cc6 100644 --- a/src/ui_ng/lib/src/tag/tag.component.css.ts +++ b/src/ui_ng/lib/src/tag/tag.component.css.ts @@ -30,4 +30,11 @@ export const TAG_STYLE = ` :host >>> .datagrid .datagrid-body .datagrid-row-master { background-color: #eee; } + +.truncated { + display: inline-block; + overflow: hidden; + white-space: nowrap; + text-overflow:ellipsis; +} `; \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag.component.html.ts b/src/ui_ng/lib/src/tag/tag.component.html.ts index 1fb6ba5f0..9a17036b5 100644 --- a/src/ui_ng/lib/src/tag/tag.component.html.ts +++ b/src/ui_ng/lib/src/tag/tag.component.html.ts @@ -14,23 +14,27 @@ export const TAG_TEMPLATE = `

{{repoName}}

- {{'REPOSITORY.TAG' | translate}} - {{'REPOSITORY.PULL_COMMAND' | translate}} - {{'REPOSITORY.SIGNED' | translate}} - {{'REPOSITORY.AUTHOR' | translate}} - {{'REPOSITORY.CREATED' | translate}} - {{'REPOSITORY.DOCKER_VERSION' | translate}} - {{'REPOSITORY.ARCHITECTURE' | translate}} - {{'REPOSITORY.OS' | translate}} + {{'REPOSITORY.TAG' | translate}} + {{'REPOSITORY.PULL_COMMAND' | translate}} + {{'REPOSITORY.SIGNED' | translate}} + {{'VULNERABILITY.SINGULAR' | translate}} + {{'REPOSITORY.AUTHOR' | translate}} + {{'REPOSITORY.CREATED' | translate}} + {{'REPOSITORY.DOCKER_VERSION' | translate}} + {{'REPOSITORY.ARCHITECTURE' | translate}} + {{'REPOSITORY.OS' | translate}} {{'TGA.PLACEHOLDER' | translate }} - {{t.name}} - docker pull {{registryUrl}}/{{repoName}}:{{t.name}} - + + {{t.name}} + {{t.name}} + + docker pull {{registryUrl}}/{{repoName}}:{{t.name}} + @@ -38,11 +42,14 @@ export const TAG_TEMPLATE = ` {{'REPOSITORY.NOTARY_IS_UNDETERMINED' | translate}} - {{t.author}} - {{t.created | date: 'short'}} - {{t.docker_version}} - {{t.architecture}} - {{t.os}} + + + + {{t.author}} + {{t.created | date: 'short'}} + {{t.docker_version}} + {{t.architecture}} + {{t.os}} {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}} diff --git a/src/ui_ng/lib/src/tag/tag.component.spec.ts b/src/ui_ng/lib/src/tag/tag.component.spec.ts index ce5877a85..0f91f9952 100644 --- a/src/ui_ng/lib/src/tag/tag.component.spec.ts +++ b/src/ui_ng/lib/src/tag/tag.component.spec.ts @@ -1,4 +1,4 @@ -import { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing'; +import { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { Router } from '@angular/router'; @@ -10,10 +10,14 @@ import { TagComponent } from './tag.component'; import { ErrorHandler } from '../error-handler/error-handler'; import { Tag } from '../service/interface'; import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; -import { TagService, TagDefaultService } from '../service/tag.service'; +import { TagService, TagDefaultService, ScanningResultService, ScanningResultDefaultService } from '../service/index'; +import { VULNERABILITY_DIRECTIVES } from '../vulnerability-scanning/index'; +import { FILTER_DIRECTIVES } from '../filter/index' + +import { Observable, Subscription } from 'rxjs/Rx'; + +describe('TagComponent (inline template)', () => { -describe('TagComponent (inline template)', ()=> { - let comp: TagComponent; let fixture: ComponentFixture; let tagService: TagService; @@ -32,27 +36,30 @@ describe('TagComponent (inline template)', ()=> { ]; let config: IServiceConfig = { - repositoryBaseEndpoint: '/api/repositories/testing' + repositoryBaseEndpoint: '/api/repositories/testing' }; - beforeEach(async(()=>{ + beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ SharedModule ], declarations: [ TagComponent, - ConfirmationDialogComponent + ConfirmationDialogComponent, + VULNERABILITY_DIRECTIVES, + FILTER_DIRECTIVES ], providers: [ ErrorHandler, { provide: SERVICE_CONFIG, useValue: config }, - { provide: TagService, useClass: TagDefaultService } + { provide: TagService, useClass: TagDefaultService }, + { provide: ScanningResultService, useClass: ScanningResultDefaultService } ] }); })); - beforeEach(()=>{ + beforeEach(() => { fixture = TestBed.createComponent(TagComponent); comp = fixture.componentInstance; @@ -68,15 +75,15 @@ describe('TagComponent (inline template)', ()=> { fixture.detectChanges(); }); - it('should load data', async(()=>{ + it('should load data', async(() => { expect(spy.calls.any).toBeTruthy(); })); - it('should load and render data', async(()=>{ + it('should load and render data', async(() => { fixture.detectChanges(); - fixture.whenStable().then(()=>{ + fixture.whenStable().then(() => { fixture.detectChanges(); - let de: DebugElement = fixture.debugElement.query(del=>del.classes['datagrid-cell']); + let de: DebugElement = fixture.debugElement.query(del => del.classes['datagrid-cell']); fixture.detectChanges(); expect(de).toBeTruthy(); let el: HTMLElement = de.nativeElement; diff --git a/src/ui_ng/lib/src/tag/tag.component.ts b/src/ui_ng/lib/src/tag/tag.component.ts index 422d0fb24..ca009c603 100644 --- a/src/ui_ng/lib/src/tag/tag.component.ts +++ b/src/ui_ng/lib/src/tag/tag.component.ts @@ -11,7 +11,17 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -import { Component, OnInit, ViewChild, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { + Component, + OnInit, + ViewChild, + Input, + Output, + EventEmitter, + ChangeDetectionStrategy, + ChangeDetectorRef, + OnDestroy +} from '@angular/core'; import { TagService } from '../service/tag.service'; @@ -27,19 +37,25 @@ import { Tag, TagClickEvent } from '../service/interface'; import { TAG_TEMPLATE } from './tag.component.html'; import { TAG_STYLE } from './tag.component.css'; -import { toPromise, CustomComparator } from '../utils'; +import { toPromise, CustomComparator, VULNERABILITY_SCAN_STATUS } from '../utils'; import { TranslateService } from '@ngx-translate/core'; import { State, Comparator } from 'clarity-angular'; +import { ScanningResultService } from '../service/index'; + +import { Observable, Subscription } from 'rxjs/Rx'; + +const STATE_CHECK_INTERVAL: number = 2000;//2s + @Component({ selector: 'hbr-tag', template: TAG_TEMPLATE, styles: [TAG_STYLE], changeDetection: ChangeDetectionStrategy.OnPush }) -export class TagComponent implements OnInit { +export class TagComponent implements OnInit, OnDestroy { @Input() projectId: number; @Input() repoName: string; @@ -49,6 +65,7 @@ export class TagComponent implements OnInit { @Input() hasProjectAdminRole: boolean; @Input() registryUrl: string; @Input() withNotary: boolean; + @Input() withClair: boolean; @Output() refreshRepo = new EventEmitter(); @Output() tagClickEvent = new EventEmitter(); @@ -66,6 +83,10 @@ export class TagComponent implements OnInit { loading: boolean = false; + stateCheckTimer: Subscription; + tagsInScanning: { [key: string]: any } = {}; + scanningTagCount: number = 0; + @ViewChild('confirmationDialog') confirmationDialog: ConfirmationDialogComponent; @@ -73,6 +94,7 @@ export class TagComponent implements OnInit { private errorHandler: ErrorHandler, private tagService: TagService, private translateService: TranslateService, + private scanningService: ScanningResultService, private ref: ChangeDetectorRef) { } confirmDeletion(message: ConfirmationAcknowledgement) { @@ -108,11 +130,24 @@ export class TagComponent implements OnInit { } this.retrieve(); + + this.stateCheckTimer = Observable.timer(STATE_CHECK_INTERVAL, STATE_CHECK_INTERVAL).subscribe(() => { + if (this.scanningTagCount > 0) { + this.updateScanningStates(); + } + }); + } + + ngOnDestroy(): void { + if (this.stateCheckTimer) { + this.stateCheckTimer.unsubscribe(); + } } retrieve() { this.tags = []; this.loading = true; + toPromise(this.tagService .getTags(this.repoName)) .then(items => { @@ -177,4 +212,47 @@ export class TagComponent implements OnInit { this.tagClickEvent.emit(evt); } } + + scanTag(tagId: string): void { + //Double check + if (this.tagsInScanning[tagId]) { + return; + } + toPromise(this.scanningService.startVulnerabilityScanning(this.repoName, tagId)) + .then(() => { + //Add to scanning map + this.tagsInScanning[tagId] = tagId; + //Counting + this.scanningTagCount += 1; + }) + .catch(error => this.errorHandler.error(error)); + } + + updateScanningStates(): void { + toPromise(this.tagService + .getTags(this.repoName)) + .then(items => { + console.debug("updateScanningStates called!"); + //Reset the scanning states + this.tagsInScanning = {}; + this.scanningTagCount = 0; + + items.forEach(item => { + if (item.scan_overview) { + if (item.scan_overview.scan_status === VULNERABILITY_SCAN_STATUS.pending || + item.scan_overview.scan_status === VULNERABILITY_SCAN_STATUS.running) { + this.tagsInScanning[item.name] = item.name; + this.scanningTagCount += 1; + } + } + }); + + this.tags = items; + }) + .catch(error => { + this.errorHandler.error(error); + }); + let hnd = setInterval(() => this.ref.markForCheck(), 100); + setTimeout(() => clearInterval(hnd), 1000); + } } \ No newline at end of file diff --git a/src/ui_ng/lib/src/utils.ts b/src/ui_ng/lib/src/utils.ts index cd7c8eb77..26dc00707 100644 --- a/src/ui_ng/lib/src/utils.ts +++ b/src/ui_ng/lib/src/utils.ts @@ -74,18 +74,18 @@ export function buildHttpRequestOptions(params: RequestQueryParams): RequestOpti /** Button events to pass to `DebugElement.triggerEventHandler` for RouterLink event handler */ export const ButtonClickEvents = { - left: { button: 0 }, - right: { button: 2 } + left: { button: 0 }, + right: { button: 2 } }; /** Simulate element click. Defaults to mouse left-button click event. */ export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void { - if (el instanceof HTMLElement) { - el.click(); - } else { - el.triggerEventHandler('click', eventObj); - } + if (el instanceof HTMLElement) { + el.click(); + } else { + el.triggerEventHandler('click', eventObj); + } } /** @@ -94,33 +94,45 @@ export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClic */ export class CustomComparator implements Comparator { - fieldName: string; - type: string; + fieldName: string; + type: string; - constructor(fieldName: string, type: string) { - this.fieldName = fieldName; - this.type = type; - } - - compare(a: {[key: string]: any| any[]}, b: {[key: string]: any| any[]}) { - let comp = 0; - if(a && b) { - let fieldA = a[this.fieldName]; - let fieldB = b[this.fieldName]; - switch(this.type) { - case "number": - comp = fieldB - fieldA; - break; - case "date": - comp = new Date(fieldB).getTime() - new Date(fieldA).getTime(); - break; - } + constructor(fieldName: string, type: string) { + this.fieldName = fieldName; + this.type = type; + } + + compare(a: { [key: string]: any | any[] }, b: { [key: string]: any | any[] }) { + let comp = 0; + if (a && b) { + let fieldA = a[this.fieldName]; + let fieldB = b[this.fieldName]; + switch (this.type) { + case "number": + comp = fieldB - fieldA; + break; + case "date": + comp = new Date(fieldB).getTime() - new Date(fieldA).getTime(); + break; + } + } + return comp; } - return comp; - } } /** * The default page size */ -export const DEFAULT_PAGE_SIZE: number = 15; \ No newline at end of file +export const DEFAULT_PAGE_SIZE: number = 15; + +/** + * The state of vulnerability scanning + */ +export const VULNERABILITY_SCAN_STATUS = { + unknown: "n/a", + pending: "pending", + running: "running", + error: "error", + stopped: "stopped", + finished: "finished" +}; \ No newline at end of file diff --git a/src/ui_ng/lib/src/vulnerability-scanning/index.ts b/src/ui_ng/lib/src/vulnerability-scanning/index.ts index 4b500ad7d..7773965dc 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/index.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/index.ts @@ -3,6 +3,7 @@ import { ResultGridComponent } from './result-grid.component'; import { ResultBarChartComponent } from './result-bar-chart.component'; import { ResultTipComponent } from './result-tip.component'; +export * from './result-tip.component'; export * from "./result-grid.component"; export * from './result-bar-chart.component'; diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.spec.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.spec.ts index e3fbb19ba..e14c859d3 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.spec.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.spec.ts @@ -11,6 +11,7 @@ import { ScanningResultService, ScanningResultDefaultService } from '../service/ import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; import { ErrorHandler } from '../error-handler/index'; import { SharedModule } from '../shared/shared.module'; +import { VULNERABILITY_SCAN_STATUS } from '../utils'; describe('ResultBarChartComponent (inline template)', () => { let component: ResultBarChartComponent; @@ -20,13 +21,25 @@ describe('ResultBarChartComponent (inline template)', () => { vulnerabilityScanningBaseEndpoint: "/api/vulnerability/testing" }; let mockData: VulnerabilitySummary = { - total_package: 124, - package_with_none: 92, - package_with_high: 10, - package_with_medium: 6, - package_With_low: 13, - package_with_unknown: 3, - complete_timestamp: new Date() + scan_status: VULNERABILITY_SCAN_STATUS.finished, + severity: 5, + update_time: new Date(), + components: { + total: 124, + summary: [{ + severity: 1, + count: 90 + }, { + severity: 3, + count: 10 + }, { + severity: 4, + count: 10 + }, { + severity: 5, + count: 13 + }] + } }; beforeEach(async(() => { @@ -115,7 +128,7 @@ describe('ResultBarChartComponent (inline template)', () => { let el: HTMLElement = fixture.nativeElement.querySelector('.bar-block-none'); expect(el).not.toBeNull(); - expect(el.style.width).toEqual("74px"); + expect(el.style.width).toEqual("73px"); }); })); diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.ts index 43bd4fec8..52cb72d94 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-bar-chart.component.ts @@ -2,11 +2,14 @@ import { Component, Input, Output, - EventEmitter + EventEmitter, + OnInit } from '@angular/core'; import { VulnerabilitySummary } from '../service/index'; import { SCANNING_STYLES } from './scanning.css'; import { BAR_CHART_COMPONENT_HTML } from './scanning.html'; +import { VULNERABILITY_SCAN_STATUS } from '../utils'; +import { VulnerabilitySeverity } from '../service/index'; export enum ScanState { COMPLETED, //Scanning work successfully completed @@ -22,18 +25,47 @@ export enum ScanState { styles: [SCANNING_STYLES], template: BAR_CHART_COMPONENT_HTML }) -export class ResultBarChartComponent { +export class ResultBarChartComponent implements OnInit { @Input() tagId: string = ""; - @Input() state: ScanState = ScanState.UNKNOWN; + @Input() state: ScanState = ScanState.PENDING; @Input() summary: VulnerabilitySummary = { - total_package: 0, - package_with_none: 0, - complete_timestamp: new Date() + scan_status: VULNERABILITY_SCAN_STATUS.unknown, + severity: VulnerabilitySeverity.UNKNOWN, + update_time: new Date(), + components: { + total: 0, + summary: [] + } }; @Output() startScanning: EventEmitter = new EventEmitter(); + scanningInProgress: boolean = false; constructor() { } + ngOnInit(): void { + if (this.summary && this.summary.scan_status) { + switch (this.summary.scan_status) { + case VULNERABILITY_SCAN_STATUS.unknown: + this.state = ScanState.UNKNOWN; + break; + case VULNERABILITY_SCAN_STATUS.error: + this.state = ScanState.ERROR; + break; + case VULNERABILITY_SCAN_STATUS.pending: + this.state = ScanState.QUEUED; + break; + case VULNERABILITY_SCAN_STATUS.stopped: + this.state = ScanState.PENDING; + break; + case VULNERABILITY_SCAN_STATUS.finished: + this.state = ScanState.COMPLETED; + break; + default: + break; + } + } + } + public get completed(): boolean { return this.state === ScanState.COMPLETED; } @@ -60,6 +92,7 @@ export class ResultBarChartComponent { scanNow(): void { if (this.tagId && this.tagId !== '') { + this.scanningInProgress = true; this.startScanning.emit(this.tagId); } } diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts index 99e4750f5..12d4f24e2 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit, Input } from '@angular/core'; import { ScanningResultService, - VulnerabilityItem + VulnerabilityItem, + VulnerabilitySeverity } from '../service/index'; import { ErrorHandler } from '../error-handler/index'; @@ -16,7 +17,10 @@ import { SCANNING_STYLES } from './scanning.css'; }) export class ResultGridComponent implements OnInit { scanningResults: VulnerabilityItem[] = []; + dataCache: VulnerabilityItem[] = []; + @Input() tagId: string; + @Input() repositoryId: string; constructor( private scanningService: ScanningResultService, @@ -24,26 +28,48 @@ export class ResultGridComponent implements OnInit { ) { } ngOnInit(): void { - this.loadResults(this.tagId); + this.loadResults(this.repositoryId, this.tagId); } - showDetail(result: VulnerabilityItem): void { - console.log(result.id); - } - - loadResults(tagId: string): void { - toPromise(this.scanningService.getVulnerabilityScanningResults(tagId)) + loadResults(repositoryId: string, tagId: string): void { + toPromise(this.scanningService.getVulnerabilityScanningResults(repositoryId, tagId)) .then((results: VulnerabilityItem[]) => { - this.scanningResults = results; + this.dataCache = results; + this.scanningResults = this.dataCache.filter((item: VulnerabilityItem) => item.id !== ''); }) .catch(error => { this.errorHandler.error(error) }) } + //TODO: Should query from back-end service filterVulnerabilities(terms: string): void { - console.log(terms); + if (terms.trim() === '') { + this.scanningResults = this.dataCache.filter((item: VulnerabilityItem) => item.id !== ''); + } else { + this.scanningResults = this.dataCache.filter((item: VulnerabilityItem) => this._regexpFilter(terms, item.package)); + } } refresh(): void { - this.loadResults(this.tagId); + this.loadResults(this.repositoryId, this.tagId); + } + + severityText(severity: VulnerabilitySeverity): string { + switch (severity) { + case VulnerabilitySeverity.HIGH: + return 'VULNERABILITY.SEVERITY.HIGH'; + case VulnerabilitySeverity.MEDIUM: + return 'VULNERABILITY.SEVERITY.MEDIUM'; + case VulnerabilitySeverity.LOW: + return 'VULNERABILITY.SEVERITY.LOW'; + case VulnerabilitySeverity.UNKNOWN: + return 'VULNERABILITY.SEVERITY.UNKNOWN'; + default: + return 'UNKNOWN'; + } + } + + _regexpFilter(terms: string, testedValue: any): boolean { + let reg = new RegExp('.*' + terms + '.*', 'i'); + return reg.test(testedValue); } } diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.spec.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.spec.ts index 48114db9a..405d1944b 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.spec.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.spec.ts @@ -9,6 +9,7 @@ import { ResultTipComponent } from './result-tip.component'; import { SharedModule } from '../shared/shared.module'; import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; +import { VULNERABILITY_SCAN_STATUS } from '../utils'; describe('ResultTipComponent (inline template)', () => { let component: ResultTipComponent; @@ -16,14 +17,26 @@ describe('ResultTipComponent (inline template)', () => { let testConfig: IServiceConfig = { vulnerabilityScanningBaseEndpoint: "/api/vulnerability/testing" }; - let mockData:VulnerabilitySummary = { - total_package: 124, - package_with_none: 90, - package_with_high: 13, - package_with_medium: 10, - package_With_low: 10, - package_with_unknown: 1, - complete_timestamp: new Date() + let mockData: VulnerabilitySummary = { + scan_status: VULNERABILITY_SCAN_STATUS.finished, + severity: 5, + update_time: new Date(), + components: { + total: 124, + summary: [{ + severity: 1, + count: 90 + }, { + severity: 3, + count: 10 + }, { + severity: 4, + count: 10 + }, { + severity: 5, + count: 13 + }] + } }; beforeEach(async(() => { diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts index f97078ecc..349b343f3 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts @@ -4,6 +4,7 @@ import { TranslateService } from '@ngx-translate/core'; import { SCANNING_STYLES } from './scanning.css'; import { TIP_COMPONENT_HTML } from './scanning.html'; +import { VULNERABILITY_SCAN_STATUS } from '../utils'; export const MIN_TIP_WIDTH = 5; export const MAX_TIP_WIDTH = 100; @@ -15,24 +16,62 @@ export const MAX_TIP_WIDTH = 100; }) export class ResultTipComponent implements OnInit { _tipTitle: string = ""; + _highCount: number = 0; + _mediumCount: number = 0; + _lowCount: number = 0; + _unknownCount: number = 0; + _noneCount: number = 0; + + totalPackages: number = 0; + packagesWithVul: number = 0; @Input() summary: VulnerabilitySummary = { - total_package: 0, - package_with_none: 0, - complete_timestamp: new Date() + scan_status: VULNERABILITY_SCAN_STATUS.unknown, + severity: VulnerabilitySeverity.UNKNOWN, + update_time: new Date(), + components: { + total: 0, + summary: [] + } }; constructor(private translate: TranslateService) { } ngOnInit(): void { + this.totalPackages = this.summary && this.summary.components ? this.summary.components.total : 0; + if (this.summary && this.summary.components && this.summary.components.summary) { + this.summary.components.summary.forEach(item => { + this.packagesWithVul += item.count + + switch (item.severity) { + case VulnerabilitySeverity.UNKNOWN: + this._unknownCount += item.count; + break; + case VulnerabilitySeverity.NONE: + this._noneCount += item.count; + break; + case VulnerabilitySeverity.LOW: + this._lowCount += item.count; + break; + case VulnerabilitySeverity.MEDIUM: + this._mediumCount += item.count; + break; + case VulnerabilitySeverity.HIGH: + this._highCount += item.count; + break; + default: + break; + } + }); + } this.translate.get('VULNERABILITY.CHART.TOOLTIPS_TITLE', - { totalVulnerability: this.totalVulnerabilities, totalPackages: this.summary.total_package }) + { totalVulnerability: this.packagesWithVul, totalPackages: this.totalPackages }) .subscribe((res: string) => this._tipTitle = res); } tipWidth(severity: VulnerabilitySeverity): string { let n: number = 0; - let m: number = this.summary ? this.summary.total_package : 0; + let m: number = this.totalPackages; if (m === 0) { return 0 + 'px'; @@ -59,8 +98,8 @@ export class ResultTipComponent implements OnInit { break; } - let width: number = Math.round((n/m)*MAX_TIP_WIDTH); - if(width < MIN_TIP_WIDTH){ + let width: number = Math.round((n / m) * MAX_TIP_WIDTH); + if (width < MIN_TIP_WIDTH) { width = MIN_TIP_WIDTH; } @@ -76,8 +115,8 @@ export class ResultTipComponent implements OnInit { return "VULNERABILITY.SINGULAR"; } - public get totalVulnerabilities(): number { - return this.summary.total_package - this.summary.package_with_none; + public get completeTimestamp(): Date { + return this.summary && this.summary.update_time ? this.summary.update_time : new Date(); } public get hasHigh(): boolean { @@ -105,22 +144,22 @@ export class ResultTipComponent implements OnInit { } public get highCount(): number { - return this.summary && this.summary.package_with_high ? this.summary.package_with_high : 0; + return this._highCount; } public get mediumCount(): number { - return this.summary && this.summary.package_with_medium ? this.summary.package_with_medium : 0; + return this._mediumCount; } public get lowCount(): number { - return this.summary && this.summary.package_With_low ? this.summary.package_With_low : 0; + return this._lowCount; } public get unknownCount(): number { - return this.summary && this.summary.package_with_unknown ? this.summary.package_with_unknown : 0; + return this._unknownCount; } public get noneCount(): number { - return this.summary && this.summary.package_with_none ? this.summary.package_with_none : 0; + return this._noneCount; } public get highSuffix(): string { @@ -144,6 +183,6 @@ export class ResultTipComponent implements OnInit { } public get maxWidth(): string { - return MAX_TIP_WIDTH+"px"; + return (MAX_TIP_WIDTH + 20) + "px"; } } diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts index 5affed773..76b5f899d 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts @@ -1,6 +1,6 @@ export const SCANNING_STYLES: string = ` .bar-wrapper { - width: 150px; + width: 120px; height: 24px; display: inline-block; } @@ -17,9 +17,9 @@ export const SCANNING_STYLES: string = ` } .tip-wrapper { display: inline-block; - height: 16px; - max-height: 16px; - max-width: 150px; + height: 10px; + max-height: 10px; + max-width: 120px; } .tip-position { margin-left: -4px; diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts index f65de9497..a34c46484 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts @@ -1,11 +1,11 @@ export const TIP_COMPONENT_HTML: string = `
-
-
-
-
-
+
+
+
+
+
{{tipTitle}} @@ -34,7 +34,7 @@ export const TIP_COMPONENT_HTML: string = `
{{'VULNERABILITY.CHART.SCANNING_TIME' | translate}} - {{summary.complete_timestamp | date}} + {{completeTimestamp | date}}
@@ -58,21 +58,17 @@ export const GRID_COMPONENT_HTML: string = ` {{'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate}} {{'VULNERABILITY.GRID.COLUMN_VERSION' | translate}} version {{'VULNERABILITY.GRID.COLUMN_FIXED' | translate}} - {{'VULNERABILITY.GRID.COLUMN_LAYER' | translate}} - Description {{'VULNERABILITY.GRID.PLACEHOLDER' | translate}} - - - {{res.id}} - {{res.severity}} + {{severityText(res.severity) | translate}} {{res.package}} {{res.version}} {{res.fixedVersion}} - {{res.layer}} - {{res.description}} + + {{'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate}}: {{res.description}} + @@ -87,7 +83,7 @@ export const GRID_COMPONENT_HTML: string = ` export const BAR_CHART_COMPONENT_HTML: string = `
- +
{{'VULNERABILITY.STATE.QUEUED' | translate}} diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index 7db5eb22b..63367ddbf 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -1,72 +1,72 @@ { - "name": "harbor", - "version": "1.1.0", - "description": "Harbor UI with Clarity", - "angular-cli": {}, - "scripts": { - "start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json", - "lint": "tslint \"src/**/*.ts\"", - "test": "ng test --single-run", - "pree2e": "webdriver-manager update", - "e2e": "protractor", - "build": "ngc -p tsconfig-aot.json" - }, - "private": true, - "dependencies": { - "@angular/animations": "^4.1.3", - "@angular/common": "^4.1.3", - "@angular/compiler": "^4.1.3", - "@angular/compiler-cli": "^4.0.2", - "@angular/core": "^4.1.3", - "@angular/forms": "^4.1.3", - "@angular/http": "^4.1.3", - "@angular/platform-browser": "^4.1.3", - "@angular/platform-browser-dynamic": "^4.1.3", - "@angular/router": "^4.1.3", - "@ngx-translate/core": "^6.0.0", - "@ngx-translate/http-loader": "0.0.3", - "@types/jquery": "^2.0.41", - "@webcomponents/custom-elements": "1.0.0-alpha.3", - "clarity-angular": "^0.9.7", - "clarity-icons": "^0.9.7", - "clarity-ui": "^0.9.7", - "core-js": "^2.4.1", - "harbor-ui": "^0.1.85", - "intl": "^1.2.5", - "mutationobserver-shim": "^0.3.2", - "ngx-clipboard": "^8.0.2", - "ngx-cookie": "^1.0.0", - "rxjs": "^5.0.1", - "ts-helpers": "^1.1.1", - "web-animations-js": "^2.2.1", - "zone.js": "^0.8.4" - }, - "devDependencies": { - "@angular/cli": "^1.0.0", - "@angular/compiler-cli": "^4.0.2", - "@types/core-js": "^0.9.34", - "@types/jasmine": "~2.2.30", - "@types/node": "^6.0.42", - "bootstrap": "4.0.0-alpha.5", - "codelyzer": "~2.0.0-beta.4", - "enhanced-resolve": "^3.0.0", - "jasmine-core": "2.4.1", - "jasmine-spec-reporter": "2.5.0", - "karma": "1.2.0", - "karma-cli": "^1.0.1", - "karma-jasmine": "^1.0.2", - "karma-mocha-reporter": "^2.2.1", - "karma-phantomjs-launcher": "^1.0.0", - "karma-remap-istanbul": "^0.2.1", - "protractor": "4.0.9", - "rollup": "^0.41.6", - "rollup-plugin-commonjs": "^8.0.2", - "rollup-plugin-node-resolve": "^3.0.0", - "rollup-plugin-uglify": "^1.0.1", - "ts-node": "1.2.1", - "tslint": "^4.1.1", - "typescript": "~2.2.0", - "typings": "^1.4.0", - "webdriver-manager": "10.2.5" - } + "name": "harbor", + "version": "1.1.0", + "description": "Harbor UI with Clarity", + "angular-cli": {}, + "scripts": { + "start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json", + "lint": "tslint \"src/**/*.ts\"", + "test": "ng test --single-run", + "pree2e": "webdriver-manager update", + "e2e": "protractor", + "build": "ngc -p tsconfig-aot.json" + }, + "private": true, + "dependencies": { + "@angular/animations": "^4.1.3", + "@angular/common": "^4.1.3", + "@angular/compiler": "^4.1.3", + "@angular/compiler-cli": "^4.0.2", + "@angular/core": "^4.1.3", + "@angular/forms": "^4.1.3", + "@angular/http": "^4.1.3", + "@angular/platform-browser": "^4.1.3", + "@angular/platform-browser-dynamic": "^4.1.3", + "@angular/router": "^4.1.3", + "@ngx-translate/core": "^6.0.0", + "@ngx-translate/http-loader": "0.0.3", + "@types/jquery": "^2.0.41", + "@webcomponents/custom-elements": "1.0.0-alpha.3", + "clarity-angular": "^0.9.7", + "clarity-icons": "^0.9.7", + "clarity-ui": "^0.9.7", + "core-js": "^2.4.1", + "harbor-ui": "^0.1.99", + "intl": "^1.2.5", + "mutationobserver-shim": "^0.3.2", + "ngx-clipboard": "^8.0.2", + "ngx-cookie": "^1.0.0", + "rxjs": "^5.0.1", + "ts-helpers": "^1.1.1", + "web-animations-js": "^2.2.1", + "zone.js": "^0.8.4" + }, + "devDependencies": { + "@angular/cli": "^1.0.0", + "@angular/compiler-cli": "^4.0.2", + "@types/core-js": "^0.9.34", + "@types/jasmine": "~2.2.30", + "@types/node": "^6.0.42", + "bootstrap": "4.0.0-alpha.5", + "codelyzer": "~2.0.0-beta.4", + "enhanced-resolve": "^3.0.0", + "jasmine-core": "2.4.1", + "jasmine-spec-reporter": "2.5.0", + "karma": "1.2.0", + "karma-cli": "^1.0.1", + "karma-jasmine": "^1.0.2", + "karma-mocha-reporter": "^2.2.1", + "karma-phantomjs-launcher": "^1.0.0", + "karma-remap-istanbul": "^0.2.1", + "protractor": "4.0.9", + "rollup": "^0.41.6", + "rollup-plugin-commonjs": "^8.0.2", + "rollup-plugin-node-resolve": "^3.0.0", + "rollup-plugin-uglify": "^1.0.1", + "ts-node": "1.2.1", + "tslint": "^4.1.1", + "typescript": "~2.2.0", + "typings": "^1.4.0", + "webdriver-manager": "10.2.5" + } } diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json index 9e0953ae9..fd9f9f277 100644 --- a/src/ui_ng/src/i18n/lang/en-us-lang.json +++ b/src/ui_ng/src/i18n/lang/en-us-lang.json @@ -459,7 +459,7 @@ "COLUMN_PACKAGE": "Package", "COLUMN_VERSION": "Current version", "COLUMN_FIXED": "Fixed in version", - "COLUMN_LAYER": "Introduced in layer", + "COLUMN_DESCRIPTION": "Description", "FOOT_ITEMS": "Items", "FOOT_OF": "of" }, @@ -488,7 +488,9 @@ "TAG": { "CREATION_TIME_PREFIX": "Create on", "CREATOR_PREFIX": "by", + "ANONYMITY": "anonymity", "IMAGE_DETAILS": "Image Details", + "DOCKER_VERSION": "Docker Version", "ARCHITECTURE": "Architecture", "OS": "OS", "SCAN_COMPLETION_TIME": "Scan Completed", diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json index 5887d4769..db2c6f1d9 100644 --- a/src/ui_ng/src/i18n/lang/es-es-lang.json +++ b/src/ui_ng/src/i18n/lang/es-es-lang.json @@ -458,7 +458,7 @@ "COLUMN_PACKAGE": "Package", "COLUMN_VERSION": "Current version", "COLUMN_FIXED": "Fixed in version", - "COLUMN_LAYER": "Introduced in layer", + "COLUMN_DESCRIPTION": "Description", "FOOT_ITEMS": "Items", "FOOT_OF": "of" }, @@ -487,7 +487,9 @@ "TAG": { "CREATION_TIME_PREFIX": "Create on", "CREATOR_PREFIX": "by", + "ANONYMITY": "anonymity", "IMAGE_DETAILS": "Image Details", + "DOCKER_VERSION": "Docker Version", "ARCHITECTURE": "Architecture", "OS": "OS", "SCAN_COMPLETION_TIME": "Scan Completed", diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json index ef3551f72..3c229e9ef 100644 --- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json +++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json @@ -459,7 +459,7 @@ "COLUMN_PACKAGE": "组件", "COLUMN_VERSION": "当前版本", "COLUMN_FIXED": "修复版本", - "COLUMN_LAYER": "引入层", + "COLUMN_DESCRIPTION": "简介", "FOOT_ITEMS": "项目", "FOOT_OF": "总共" }, @@ -488,7 +488,9 @@ "TAG": { "CREATION_TIME_PREFIX": "创建时间：", "CREATOR_PREFIX": "创建者：", + "ANONYMITY": "匿名用户", "IMAGE_DETAILS": "镜像详情", + "DOCKER_VERSION": "Docker版本", "ARCHITECTURE": "架构", "OS": "操作系统", "SCAN_COMPLETION_TIME": "扫描完成时间", From 969066f2c7bf3bed24c7dcd3121eadec69183ba6 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Tue, 20 Jun 2017 16:48:42 +0800 Subject: [PATCH 09/19] Improve components and change package.json --- .gitignore | 1 + src/ui_ng/lib/README.md | 4 ++- src/ui_ng/lib/package.json | 33 +++++++++--------- src/ui_ng/lib/pkg/package.json | 24 ++++++------- src/ui_ng/lib/rollup.config.js | 20 ++++++++++- .../lib/src/push-image/push-image.css.ts | 4 +++ .../lib/src/push-image/push-image.html.ts | 12 ++++--- .../repository-stackview.component.html.ts | 3 +- .../repository-stackview.component.spec.ts | 6 +++- .../repository-stackview.component.ts | 1 + .../result-grid.component.ts | 2 ++ .../result-tip.component.ts | 4 ++- .../vulnerability-scanning/scanning.css.ts | 3 -- .../vulnerability-scanning/scanning.html.ts | 8 ++++- src/ui_ng/package.json | 34 +++++++++---------- .../repository/repository-page.component.html | 2 +- .../repository/repository-page.component.ts | 5 ++- src/ui_ng/src/i18n/lang/en-us-lang.json | 3 +- src/ui_ng/src/i18n/lang/es-es-lang.json | 3 +- src/ui_ng/src/i18n/lang/zh-cn-lang.json | 3 +- 20 files changed, 111 insertions(+), 64 deletions(-) diff --git a/.gitignore b/.gitignore index 0412c70ef..b3572fc64 100644 --- a/.gitignore +++ b/.gitignore @@ -44,3 +44,4 @@ src/ui_ng/aot/**/*.json **/*ngfactory.ts **/aot **/dist +**/.bin \ No newline at end of file diff --git a/src/ui_ng/lib/README.md b/src/ui_ng/lib/README.md index 10ae806ee..01d46bac4 100644 --- a/src/ui_ng/lib/README.md +++ b/src/ui_ng/lib/README.md @@ -80,6 +80,8 @@ If **projectId** is set to the id of specified project, then only show the repli **projectId** is used to specify which projects the repositories are from. +**projectName** is used to generate the related commands for pushing images. + **hasSignedIn** is a user session related property to determined whether a valid user signed in session existing. This component supports anonymous user. **hasProjectAdminRole** is a user session related property to determined whether the current user has project administrator role. Some action menus might be disabled based on this property. @@ -87,7 +89,7 @@ If **projectId** is set to the id of specified project, then only show the repli **tagClickEvent** is an @output event emitter for you to catch the tag click events. ``` - + ... diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json index 7db338ddf..c618fd735 100644 --- a/src/ui_ng/lib/package.json +++ b/src/ui_ng/lib/package.json @@ -18,21 +18,21 @@ }, "private": true, "dependencies": { - "@angular/animations": "^4.1.3", - "@angular/common": "^4.1.3", - "@angular/compiler": "^4.1.3", - "@angular/core": "^4.1.3", - "@angular/forms": "^4.1.3", - "@angular/http": "^4.1.3", - "@angular/platform-browser": "^4.1.3", - "@angular/platform-browser-dynamic": "^4.1.3", - "@angular/router": "^4.1.3", + "@angular/animations": "~4.1.3", + "@angular/common": "~4.1.3", + "@angular/compiler": "~4.1.3", + "@angular/core": "~4.1.3", + "@angular/forms": "~4.1.3", + "@angular/http": "~4.1.3", + "@angular/platform-browser": "~4.1.3", + "@angular/platform-browser-dynamic": "~4.1.3", + "@angular/router": "~4.1.3", "@ngx-translate/core": "^6.0.0", "@ngx-translate/http-loader": "0.0.3", "@webcomponents/custom-elements": "1.0.0-alpha.3", - "clarity-angular": "^0.9.7", - "clarity-icons": "^0.9.7", - "clarity-ui": "^0.9.7", + "clarity-angular": "~0.9.8", + "clarity-icons": "~0.9.8", + "clarity-ui": "~0.9.8", "core-js": "^2.4.1", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", @@ -45,12 +45,13 @@ }, "devDependencies": { "@angular/cli": "^1.0.0", - "@angular/compiler-cli": "^4.0.1", + "@angular/compiler-cli": "~4.1.3", "@types/core-js": "^0.9.41", "@types/jasmine": "~2.2.30", "@types/node": "^6.0.42", "bootstrap": "4.0.0-alpha.5", "codelyzer": "~2.0.0-beta.4", + "copyfiles": "^1.2.0", "enhanced-resolve": "^3.0.0", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", @@ -61,14 +62,14 @@ "karma-phantomjs-launcher": "^1.0.0", "karma-remap-istanbul": "^0.2.1", "protractor": "^4.0.9", + "rimraf": "^2.6.1", "rollup": "^0.41.6", + "rollup-plugin-node-resolve": "^3.0.0", "ts-node": "1.2.1", "tslint": "^4.1.1", "typescript": "~2.2.0", "typings": "^1.4.0", "uglify-js": "^2.8.22", - "webdriver-manager": "10.2.5", - "rimraf": "^2.6.1", - "copyfiles": "^1.2.0" + "webdriver-manager": "10.2.5" } } \ No newline at end of file diff --git a/src/ui_ng/lib/pkg/package.json b/src/ui_ng/lib/pkg/package.json index 3cd233c18..34660aa5a 100644 --- a/src/ui_ng/lib/pkg/package.json +++ b/src/ui_ng/lib/pkg/package.json @@ -19,21 +19,21 @@ }, "homepage": "https://github.com/vmware/harbor#readme", "peerDependencies": { - "@angular/animations": "^4.1.3", - "@angular/common": "^4.1.3", - "@angular/compiler": "^4.1.3", - "@angular/core": "^4.1.3", - "@angular/forms": "^4.1.3", - "@angular/http": "^4.1.3", - "@angular/platform-browser": "^4.1.3", - "@angular/platform-browser-dynamic": "^4.1.3", - "@angular/router": "^4.1.3", + "@angular/animations": "~4.1.3", + "@angular/common": "~4.1.3", + "@angular/compiler": "~4.1.3", + "@angular/core": "~4.1.3", + "@angular/forms": "~4.1.3", + "@angular/http": "~4.1.3", + "@angular/platform-browser": "~4.1.3", + "@angular/platform-browser-dynamic": "~4.1.3", + "@angular/router": "~4.1.3", "@ngx-translate/core": "^6.0.0", "@ngx-translate/http-loader": "0.0.3", "@webcomponents/custom-elements": "1.0.0-alpha.3", - "clarity-angular": "^0.9.7", - "clarity-icons": "^0.9.7", - "clarity-ui": "^0.9.7", + "clarity-angular": "~0.9.8", + "clarity-icons": "~0.9.8", + "clarity-ui": "~0.9.8", "core-js": "^2.4.1", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", diff --git a/src/ui_ng/lib/rollup.config.js b/src/ui_ng/lib/rollup.config.js index 97d5f17b1..73785f82f 100644 --- a/src/ui_ng/lib/rollup.config.js +++ b/src/ui_ng/lib/rollup.config.js @@ -1,3 +1,5 @@ +import resolve from 'rollup-plugin-node-resolve'; + export default { entry: 'dist/index.js', dest: 'dist/bundles/harborui.umd.js', @@ -11,10 +13,14 @@ export default { '@angular/forms', '@angular/platform-browser', '@angular/http', + '@angular/router', 'clarity-angular', '@ngx-translate/core', '@ngx-translate/http-loader', + 'ngx-cookie', + 'ngx-clipboard', 'rxjs', + 'rxjs/Rx', 'rxjs/Subject', 'rxjs/Observable', 'rxjs/add/observable/of', @@ -29,8 +35,15 @@ export default { '@angular/forms': 'ng.forms', '@angular/http': 'ng.http', '@angular/platform-browser': 'ng.platformBrowser', + '@angular/router': 'ng.router', + 'ngx-clipboard': 'ngx.clipboard', + 'clarity-angular': 'ng.clarity', + 'ngx-cookie': 'ngx.cookie', + '@ngx-translate/core': 'ngx.translate', + '@ngx-translate/http-loader': 'ngx.translate', 'rxjs': 'rxjs', 'rxjs/Subject': 'rxjs.Subject', + 'rxjs/Rx': 'Rx', 'rxjs/Observable': 'Rx', 'rxjs/ReplaySubject': 'Rx', 'rxjs/add/operator/map': 'Rx.Observable.prototype', @@ -50,5 +63,10 @@ export default { // console.warn everything else console.warn(warning.message); - } + }, + plugins: [resolve({ + customResolveOptions: { + moduleDirectory: 'node_modules' + } + })] } \ No newline at end of file diff --git a/src/ui_ng/lib/src/push-image/push-image.css.ts b/src/ui_ng/lib/src/push-image/push-image.css.ts index 4fdca4ade..78ee359c5 100644 --- a/src/ui_ng/lib/src/push-image/push-image.css.ts +++ b/src/ui_ng/lib/src/push-image/push-image.css.ts @@ -39,4 +39,8 @@ export const PUSH_IMAGE_STYLE: string = ` min-width: 360px; max-width: 720px; } + +.btn-font { + font-size: 14px !important; +} `; \ No newline at end of file diff --git a/src/ui_ng/lib/src/push-image/push-image.html.ts b/src/ui_ng/lib/src/push-image/push-image.html.ts index 7fe84ed1e..998ba5f3e 100644 --- a/src/ui_ng/lib/src/push-image/push-image.html.ts +++ b/src/ui_ng/lib/src/push-image/push-image.html.ts @@ -1,7 +1,7 @@ export const PUSH_IMAGE_HTML: string = `
- @@ -10,10 +10,12 @@ export const PUSH_IMAGE_HTML: string = `
{{ 'PUSH_IMAGE.TITLE' | translate }}
 - - - {{ 'PUSH_IMAGE.TOOLTIP' | translate }} - + + + + {{ 'PUSH_IMAGE.TOOLTIP' | translate }} + +
diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts index 3d7882e7c..533c95583 100644 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts @@ -1,9 +1,10 @@ export const REPOSITORY_STACKVIEW_TEMPLATE: string = `
-
+
+
diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts index c04d7639b..1e7d94b97 100644 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts @@ -15,6 +15,8 @@ import { RepositoryService, RepositoryDefaultService } from '../service/reposito import { TagService, TagDefaultService } from '../service/tag.service'; import { SystemInfoService, SystemInfoDefaultService } from '../service/system-info.service'; import { VULNERABILITY_DIRECTIVES } from '../vulnerability-scanning/index'; +import { PUSH_IMAGE_BUTTON_DIRECTIVES } from '../push-image/index'; +import { INLINE_ALERT_DIRECTIVES } from '../inline-alert/index'; import { click } from '../utils'; @@ -92,7 +94,9 @@ describe('RepositoryComponentStackview (inline template)', () => { TagComponent, ConfirmationDialogComponent, FilterComponent, - VULNERABILITY_DIRECTIVES + VULNERABILITY_DIRECTIVES, + PUSH_IMAGE_BUTTON_DIRECTIVES, + INLINE_ALERT_DIRECTIVES ], providers: [ ErrorHandler, diff --git a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts index 97f86af63..e4dce5660 100644 --- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts +++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts @@ -41,6 +41,7 @@ import { Tag, TagClickEvent } from '../service/interface'; export class RepositoryStackviewComponent implements OnInit { @Input() projectId: number; + @Input() projectName: string = "unknown"; @Input() hasSignedIn: boolean; @Input() hasProjectAdminRole: boolean; diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts index 12d4f24e2..f75045841 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts @@ -61,6 +61,8 @@ export class ResultGridComponent implements OnInit { return 'VULNERABILITY.SEVERITY.MEDIUM'; case VulnerabilitySeverity.LOW: return 'VULNERABILITY.SEVERITY.LOW'; + case VulnerabilitySeverity.NONE: + return 'VULNERABILITY.SEVERITY.NEGLIGIBLE'; case VulnerabilitySeverity.UNKNOWN: return 'VULNERABILITY.SEVERITY.UNKNOWN'; default: diff --git a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts index 349b343f3..ce76bd34b 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts @@ -41,7 +41,9 @@ export class ResultTipComponent implements OnInit { this.totalPackages = this.summary && this.summary.components ? this.summary.components.total : 0; if (this.summary && this.summary.components && this.summary.components.summary) { this.summary.components.summary.forEach(item => { - this.packagesWithVul += item.count + if (item.severity != VulnerabilitySeverity.NONE) { + this.packagesWithVul += item.count + } switch (item.severity) { case VulnerabilitySeverity.UNKNOWN: diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts index 76b5f899d..bc6643101 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts @@ -1,8 +1,6 @@ export const SCANNING_STYLES: string = ` .bar-wrapper { width: 120px; - height: 24px; - display: inline-block; } .bar-state { text-align: center !important; @@ -18,7 +16,6 @@ export const SCANNING_STYLES: string = ` .tip-wrapper { display: inline-block; height: 10px; - max-height: 10px; max-width: 120px; } .tip-position { diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts index a34c46484..b39052ba0 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts @@ -62,7 +62,13 @@ export const GRID_COMPONENT_HTML: string = ` {{'VULNERABILITY.GRID.PLACEHOLDER' | translate}} {{res.id}} - {{severityText(res.severity) | translate}} + + {{severityText(res.severity) | translate}} + {{severityText(res.severity) | translate}} + {{severityText(res.severity) | translate}} + {{severityText(res.severity) | translate}} + {{severityText(res.severity) | translate}} + {{res.package}} {{res.version}} {{res.fixedVersion}} diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index 63367ddbf..afbe66da3 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -1,6 +1,6 @@ { "name": "harbor", - "version": "1.1.0", + "version": "1.2.0", "description": "Harbor UI with Clarity", "angular-cli": {}, "scripts": { @@ -13,25 +13,25 @@ }, "private": true, "dependencies": { - "@angular/animations": "^4.1.3", - "@angular/common": "^4.1.3", - "@angular/compiler": "^4.1.3", - "@angular/compiler-cli": "^4.0.2", - "@angular/core": "^4.1.3", - "@angular/forms": "^4.1.3", - "@angular/http": "^4.1.3", - "@angular/platform-browser": "^4.1.3", - "@angular/platform-browser-dynamic": "^4.1.3", - "@angular/router": "^4.1.3", + "@angular/animations": "~4.1.3", + "@angular/common": "~4.1.3", + "@angular/compiler": "~4.1.3", + "@angular/compiler-cli": "~4.1.3", + "@angular/core": "~4.1.3", + "@angular/forms": "~4.1.3", + "@angular/http": "~4.1.3", + "@angular/platform-browser": "~4.1.3", + "@angular/platform-browser-dynamic": "~4.1.3", + "@angular/router": "~4.1.3", "@ngx-translate/core": "^6.0.0", "@ngx-translate/http-loader": "0.0.3", "@types/jquery": "^2.0.41", "@webcomponents/custom-elements": "1.0.0-alpha.3", - "clarity-angular": "^0.9.7", - "clarity-icons": "^0.9.7", - "clarity-ui": "^0.9.7", + "clarity-angular": "^0.9.8", + "clarity-icons": "^0.9.8", + "clarity-ui": "^0.9.8", "core-js": "^2.4.1", - "harbor-ui": "^0.1.99", + "harbor-ui": "^0.2.12", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", "ngx-clipboard": "^8.0.2", @@ -43,7 +43,7 @@ }, "devDependencies": { "@angular/cli": "^1.0.0", - "@angular/compiler-cli": "^4.0.2", + "@angular/compiler-cli": "~4.1.3", "@types/core-js": "^0.9.34", "@types/jasmine": "~2.2.30", "@types/node": "^6.0.42", @@ -69,4 +69,4 @@ "typings": "^1.4.0", "webdriver-manager": "10.2.5" } -} +} \ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository-page.component.html b/src/ui_ng/src/app/repository/repository-page.component.html index 9377458e9..34e6bd8d0 100644 --- a/src/ui_ng/src/app/repository/repository-page.component.html +++ b/src/ui_ng/src/app/repository/repository-page.component.html @@ -1,3 +1,3 @@
- +
\ No newline at end of file diff --git a/src/ui_ng/src/app/repository/repository-page.component.ts b/src/ui_ng/src/app/repository/repository-page.component.ts index ff0241ead..edd9921b7 100644 --- a/src/ui_ng/src/app/repository/repository-page.component.ts +++ b/src/ui_ng/src/app/repository/repository-page.component.ts @@ -27,6 +27,7 @@ export class RepositoryPageComponent implements OnInit { projectId: number; hasProjectAdminRole: boolean; hasSignedIn: boolean; + projectName: string; constructor( private route: ActivatedRoute, @@ -39,7 +40,9 @@ export class RepositoryPageComponent implements OnInit { this.projectId = this.route.snapshot.parent.params['id']; let resolverData = this.route.snapshot.parent.data; if (resolverData) { - this.hasProjectAdminRole = (resolverData['projectResolver']).has_project_admin_role; + let pro: Project = resolverData['projectResolver']; + this.hasProjectAdminRole = pro.has_project_admin_role; + this.projectName = pro.name; } this.hasSignedIn = this.session.getCurrentUser() !== null; } diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json index fd9f9f277..f3661f901 100644 --- a/src/ui_ng/src/i18n/lang/en-us-lang.json +++ b/src/ui_ng/src/i18n/lang/en-us-lang.json @@ -465,12 +465,13 @@ }, "CHART": { "SCANNING_TIME": "Scan completed", - "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} vulnerabilities across {{totalPackages}} packages." + "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} packages with vulnerabilities across all {{totalPackages}} packages." }, "SEVERITY": { "HIGH": "High level", "MEDIUM": "Medium level", "LOW": "Low level", + "NEGLIGIBLE": "Negligible", "UNKNOWN": "Unknown", "NONE": "None" }, diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json index db2c6f1d9..2c714e4b0 100644 --- a/src/ui_ng/src/i18n/lang/es-es-lang.json +++ b/src/ui_ng/src/i18n/lang/es-es-lang.json @@ -464,12 +464,13 @@ }, "CHART": { "SCANNING_TIME": "Scan completed", - "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} vulnerabilities across {{totalPackages}} packages." + "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} packages with vulnerabilities across all {{totalPackages}} packages." }, "SEVERITY": { "HIGH": "High level", "MEDIUM": "Medium level", "LOW": "Low level", + "NEGLIGIBLE": "Negligible", "UNKNOWN": "Unknown", "NONE": "None" }, diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json index 3c229e9ef..43d22a560 100644 --- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json +++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json @@ -465,12 +465,13 @@ }, "CHART": { "SCANNING_TIME": "扫描完成", - "TOOLTIPS_TITLE": "在此镜像的{{totalPackages}}包中扫描出{{totalVulnerability}}缺陷。" + "TOOLTIPS_TITLE": "在此镜像的{{totalPackages}}包中扫描出{{totalVulnerability}}个有缺陷的包。" }, "SEVERITY": { "HIGH": "严重", "MEDIUM": "中等", "LOW": "一般", + "NEGLIGIBLE": "可忽略", "UNKNOWN": "未知", "NONE": "无" }, From 0623ef460e76a729045005648a031444c84775de Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Wed, 21 Jun 2017 14:49:29 +0800 Subject: [PATCH 10/19] add third party lib --- src/ui_ng/lib/package.json | 1 - src/ui_ng/lib/pkg/package.json | 25 ++-- src/ui_ng/lib/rollup.config.js | 2 - src/ui_ng/lib/src/index.ts | 3 +- src/ui_ng/lib/src/shared/shared.module.ts | 2 +- src/ui_ng/lib/src/third-party/index.ts | 2 + .../ngx-clipboard/clipboard.directive.ts | 49 ++++++++ .../ngx-clipboard/clipboard.service.ts | 110 ++++++++++++++++++ .../src/third-party/ngx-clipboard/index.ts | 15 +++ .../src/third-party/ngx-window-token/index.ts | 1 + .../ngx-window-token/window-token.ts | 16 +++ src/ui_ng/package.json | 4 +- 12 files changed, 210 insertions(+), 20 deletions(-) create mode 100644 src/ui_ng/lib/src/third-party/index.ts create mode 100644 src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.directive.ts create mode 100644 src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.service.ts create mode 100644 src/ui_ng/lib/src/third-party/ngx-clipboard/index.ts create mode 100644 src/ui_ng/lib/src/third-party/ngx-window-token/index.ts create mode 100644 src/ui_ng/lib/src/third-party/ngx-window-token/window-token.ts diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json index c618fd735..e76c15d22 100644 --- a/src/ui_ng/lib/package.json +++ b/src/ui_ng/lib/package.json @@ -36,7 +36,6 @@ "core-js": "^2.4.1", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", - "ngx-clipboard": "^8.0.2", "ngx-cookie": "^1.0.0", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", diff --git a/src/ui_ng/lib/pkg/package.json b/src/ui_ng/lib/pkg/package.json index 34660aa5a..67ff13f07 100644 --- a/src/ui_ng/lib/pkg/package.json +++ b/src/ui_ng/lib/pkg/package.json @@ -19,25 +19,24 @@ }, "homepage": "https://github.com/vmware/harbor#readme", "peerDependencies": { - "@angular/animations": "~4.1.3", - "@angular/common": "~4.1.3", - "@angular/compiler": "~4.1.3", - "@angular/core": "~4.1.3", - "@angular/forms": "~4.1.3", - "@angular/http": "~4.1.3", - "@angular/platform-browser": "~4.1.3", - "@angular/platform-browser-dynamic": "~4.1.3", - "@angular/router": "~4.1.3", + "@angular/animations": "^4.0.1", + "@angular/common": "^4.0.1", + "@angular/compiler": "^4.0.1", + "@angular/core": "^4.0.1", + "@angular/forms": "^4.0.1", + "@angular/http": "^4.0.1", + "@angular/platform-browser": "^4.0.1", + "@angular/platform-browser-dynamic": "^4.0.1", + "@angular/router": "^4.0.1", "@ngx-translate/core": "^6.0.0", "@ngx-translate/http-loader": "0.0.3", "@webcomponents/custom-elements": "1.0.0-alpha.3", - "clarity-angular": "~0.9.8", - "clarity-icons": "~0.9.8", - "clarity-ui": "~0.9.8", + "clarity-angular": "^0.9.8", + "clarity-icons": "^0.9.8", + "clarity-ui": "^0.9.8", "core-js": "^2.4.1", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", - "ngx-clipboard": "^8.0.2", "ngx-cookie": "^1.0.0", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", diff --git a/src/ui_ng/lib/rollup.config.js b/src/ui_ng/lib/rollup.config.js index 73785f82f..a231ff4b4 100644 --- a/src/ui_ng/lib/rollup.config.js +++ b/src/ui_ng/lib/rollup.config.js @@ -18,7 +18,6 @@ export default { '@ngx-translate/core', '@ngx-translate/http-loader', 'ngx-cookie', - 'ngx-clipboard', 'rxjs', 'rxjs/Rx', 'rxjs/Subject', @@ -36,7 +35,6 @@ export default { '@angular/http': 'ng.http', '@angular/platform-browser': 'ng.platformBrowser', '@angular/router': 'ng.router', - 'ngx-clipboard': 'ngx.clipboard', 'clarity-angular': 'ng.clarity', 'ngx-cookie': 'ngx.cookie', '@ngx-translate/core': 'ngx.translate', diff --git a/src/ui_ng/lib/src/index.ts b/src/ui_ng/lib/src/index.ts index 904b3785b..39f5e7126 100644 --- a/src/ui_ng/lib/src/index.ts +++ b/src/ui_ng/lib/src/index.ts @@ -13,4 +13,5 @@ export * from './list-replication-rule/index'; export * from './replication/index'; export * from './vulnerability-scanning/index'; export * from './i18n/index'; -export * from './push-image/index'; \ No newline at end of file +export * from './push-image/index'; +export * from './third-party/index'; \ No newline at end of file diff --git a/src/ui_ng/lib/src/shared/shared.module.ts b/src/ui_ng/lib/src/shared/shared.module.ts index 5e788e186..95a1bd85c 100644 --- a/src/ui_ng/lib/src/shared/shared.module.ts +++ b/src/ui_ng/lib/src/shared/shared.module.ts @@ -9,7 +9,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { TranslatorJsonLoader } from '../i18n/local-json.loader'; import { IServiceConfig, SERVICE_CONFIG } from '../service.config'; import { CookieService, CookieModule } from 'ngx-cookie'; -import { ClipboardModule } from 'ngx-clipboard'; +import { ClipboardModule } from '../third-party/ngx-clipboard/index'; /*export function HttpLoaderFactory(http: Http) { return new TranslateHttpLoader(http, 'i18n/lang/', '-lang.json'); diff --git a/src/ui_ng/lib/src/third-party/index.ts b/src/ui_ng/lib/src/third-party/index.ts new file mode 100644 index 000000000..9f3da2ad6 --- /dev/null +++ b/src/ui_ng/lib/src/third-party/index.ts @@ -0,0 +1,2 @@ +export * from './ngx-window-token/index'; +export * from './ngx-clipboard/index'; \ No newline at end of file diff --git a/src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.directive.ts b/src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.directive.ts new file mode 100644 index 000000000..e9e0f639f --- /dev/null +++ b/src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.directive.ts @@ -0,0 +1,49 @@ +import { ClipboardService } from './clipboard.service'; +import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, Renderer, ElementRef } from '@angular/core'; + +@Directive({ + selector: '[ngxClipboard]' +}) +export class ClipboardDirective implements OnInit, OnDestroy { + @Input('ngxClipboard') public targetElm: HTMLInputElement; + + @Input() public cbContent: string; + + @Output() public cbOnSuccess: EventEmitter = new EventEmitter(); + + @Output() public cbOnError: EventEmitter = new EventEmitter(); + constructor( + private clipboardSrv: ClipboardService, + private renderer: Renderer + + ) { } + + public ngOnInit() { } + + public ngOnDestroy() { + this.clipboardSrv.destroy(); + } + + @HostListener('click', ['$event.target']) private onClick(button: ElementRef) { + if (!this.clipboardSrv.isSupported) { + this.handleResult(false, undefined); + } else if (this.targetElm && this.clipboardSrv.isTargetValid(this.targetElm)) { + this.handleResult(this.clipboardSrv.copyFromInputElement(this.targetElm, this.renderer), + this.targetElm.value); + } else if (this.cbContent) { + this.handleResult(this.clipboardSrv.copyFromContent(this.cbContent, this.renderer), this.cbContent); + } + } + + /** + * Fires an event based on the copy operation result. + * @param {Boolean} succeeded + */ + private handleResult(succeeded: Boolean, copiedContent: string) { + if (succeeded) { + this.cbOnSuccess.emit({ isSuccess: true, content: copiedContent }); + } else { + this.cbOnError.emit({ isSuccess: false }); + } + } +} \ No newline at end of file diff --git a/src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.service.ts b/src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.service.ts new file mode 100644 index 000000000..0fa3a2dde --- /dev/null +++ b/src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.service.ts @@ -0,0 +1,110 @@ +import { Inject, InjectionToken, Injectable, Optional, Renderer, SkipSelf } from '@angular/core'; +import { DOCUMENT } from '@angular/platform-browser'; +import { WINDOW } from "../ngx-window-token/index"; + + +@Injectable() +export class ClipboardService { + private tempTextArea: HTMLTextAreaElement; + constructor( + @Inject(DOCUMENT) private document: any, + @Inject(WINDOW) private window: any, + ) { } + public get isSupported(): boolean { + return !!this.document.queryCommandSupported && !!this.document.queryCommandSupported('copy'); + } + + public isTargetValid(element: HTMLInputElement | HTMLTextAreaElement): boolean { + if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) { + if (element.hasAttribute('disabled')) { + // tslint:disable-next-line:max-line-length + throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute'); + } + return true; + } + throw new Error('Target should be input or textarea'); + } + + /** + * copyFromInputElement + */ + public copyFromInputElement(targetElm: HTMLInputElement | HTMLTextAreaElement, renderer: Renderer): boolean { + try { + this.selectTarget(targetElm, renderer); + const re = this.copyText(); + this.clearSelection(targetElm, this.window); + return re; + } catch (error) { + return false; + } + } + + /** + * Creates a fake textarea element, sets its value from `text` property, + * and makes a selection on it. + */ + public copyFromContent(content: string, renderer: Renderer) { + if (!this.tempTextArea) { + this.tempTextArea = this.createTempTextArea(this.document, this.window); + this.document.body.appendChild(this.tempTextArea); + } + this.tempTextArea.value = content; + return this.copyFromInputElement(this.tempTextArea, renderer); + } + + // remove temporary textarea if any + public destroy() { + if (this.tempTextArea) { + this.document.body.removeChild(this.tempTextArea); + this.tempTextArea = undefined; + } + } + + // select the target html input element + private selectTarget(inputElement: HTMLInputElement | HTMLTextAreaElement, renderer: Renderer): number | undefined { + renderer.invokeElementMethod(inputElement, 'select'); + renderer.invokeElementMethod(inputElement, 'setSelectionRange', [0, inputElement.value.length]); + return inputElement.value.length; + } + + private copyText(): boolean { + return this.document.execCommand('copy'); + } + // Removes current selection and focus from `target` element. + private clearSelection(inputElement: HTMLInputElement | HTMLTextAreaElement, window: Window) { + // tslint:disable-next-line:no-unused-expression + inputElement && inputElement.blur(); + window.getSelection().removeAllRanges(); + } + + // create a fake textarea for copy command + private createTempTextArea(doc: Document, window: Window): HTMLTextAreaElement { + const isRTL = doc.documentElement.getAttribute('dir') === 'rtl'; + let ta: HTMLTextAreaElement; + ta = doc.createElement('textarea'); + // Prevent zooming on iOS + ta.style.fontSize = '12pt'; + // Reset box model + ta.style.border = '0'; + ta.style.padding = '0'; + ta.style.margin = '0'; + // Move element out of screen horizontally + ta.style.position = 'absolute'; + ta.style[isRTL ? 'right' : 'left'] = '-9999px'; + // Move element to the same position vertically + let yPosition = window.pageYOffset || doc.documentElement.scrollTop; + ta.style.top = yPosition + 'px'; + ta.setAttribute('readonly', ''); + return ta; + } +} +// this pattern is mentioned in https://github.com/angular/angular/issues/13854 in #43 +export function CLIPBOARD_SERVICE_PROVIDER_FACTORY(doc: Document, win: Window, parentDispatcher: ClipboardService) { + return parentDispatcher || new ClipboardService(doc, win); +}; + +export const CLIPBOARD_SERVICE_PROVIDER = { + provide: ClipboardService, + deps: [DOCUMENT, WINDOW, [new Optional(), new SkipSelf(), ClipboardService]], + useFactory: CLIPBOARD_SERVICE_PROVIDER_FACTORY +}; \ No newline at end of file diff --git a/src/ui_ng/lib/src/third-party/ngx-clipboard/index.ts b/src/ui_ng/lib/src/third-party/ngx-clipboard/index.ts new file mode 100644 index 000000000..bbaf1ff0a --- /dev/null +++ b/src/ui_ng/lib/src/third-party/ngx-clipboard/index.ts @@ -0,0 +1,15 @@ +import { ClipboardDirective } from './clipboard.directive'; +import { CLIPBOARD_SERVICE_PROVIDER } from './clipboard.service'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { WindowTokenModule } from '../ngx-window-token/index'; +export * from './clipboard.directive'; +export * from './clipboard.service'; + +@NgModule({ + imports: [CommonModule, WindowTokenModule], + declarations: [ClipboardDirective], + exports: [ClipboardDirective], + providers: [CLIPBOARD_SERVICE_PROVIDER] +}) +export class ClipboardModule { } \ No newline at end of file diff --git a/src/ui_ng/lib/src/third-party/ngx-window-token/index.ts b/src/ui_ng/lib/src/third-party/ngx-window-token/index.ts new file mode 100644 index 000000000..5c9583a40 --- /dev/null +++ b/src/ui_ng/lib/src/third-party/ngx-window-token/index.ts @@ -0,0 +1 @@ +export { WindowTokenModule, WINDOW } from './window-token'; \ No newline at end of file diff --git a/src/ui_ng/lib/src/third-party/ngx-window-token/window-token.ts b/src/ui_ng/lib/src/third-party/ngx-window-token/window-token.ts new file mode 100644 index 000000000..80bda0a02 --- /dev/null +++ b/src/ui_ng/lib/src/third-party/ngx-window-token/window-token.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { InjectionToken } from '@angular/core'; + +export const WINDOW = new InjectionToken('WindowToken'); + +export function _window(): Window { + return window; +} + +@NgModule({ + providers: [{ + provide: WINDOW, + useFactory: _window + }] +}) +export class WindowTokenModule { } \ No newline at end of file diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index afbe66da3..42c50dffb 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -31,7 +31,7 @@ "clarity-icons": "^0.9.8", "clarity-ui": "^0.9.8", "core-js": "^2.4.1", - "harbor-ui": "^0.2.12", + "harbor-ui": "^0.2.13", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", "ngx-clipboard": "^8.0.2", @@ -69,4 +69,4 @@ "typings": "^1.4.0", "webdriver-manager": "10.2.5" } -} \ No newline at end of file +} From f2d659aebcedab66e342267ecb93a50111f6526d Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Wed, 21 Jun 2017 14:57:56 +0800 Subject: [PATCH 11/19] remove clipboard dep from package.json --- src/ui_ng/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index 42c50dffb..055a18060 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -34,7 +34,6 @@ "harbor-ui": "^0.2.13", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", - "ngx-clipboard": "^8.0.2", "ngx-cookie": "^1.0.0", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", @@ -69,4 +68,4 @@ "typings": "^1.4.0", "webdriver-manager": "10.2.5" } -} +} \ No newline at end of file From 478b56e6a43d836beaa236f9f9a6c0a2619574c3 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Wed, 21 Jun 2017 16:17:29 +0800 Subject: [PATCH 12/19] Modify travis config --- .travis.yml | 4 ++-- docs/compile_guide.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.travis.yml b/.travis.yml index 589e0aaab..4a3816b8b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -79,7 +79,7 @@ script: - sudo mkdir -p /harbor - sudo mv ./VERSION /harbor/VERSION - sudo service mysql stop - - sudo make run_clarity_ut CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.1.2 + - sudo make run_clarity_ut CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.4 - cat ./src/ui_ng/lib/npm-ut-test-results - sudo ./tests/testprepare.sh - sudo docker-compose -f ./make/docker-compose.test.yml up -d @@ -100,7 +100,7 @@ script: - docker-compose -f make/docker-compose.test.yml down - sudo rm -rf /data/config/* - ls /data/cert - - sudo make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.1.2 NOTARYFLAG=true + - sudo make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.4 NOTARYFLAG=true - docker ps - ./tests/notarytest.sh diff --git a/docs/compile_guide.md b/docs/compile_guide.md index 34e3df554..644fb35cc 100644 --- a/docs/compile_guide.md +++ b/docs/compile_guide.md @@ -50,13 +50,13 @@ You can compile the code by one of the three approaches: * Build, install and bring up Harbor without Notary: ```sh - $ make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.1.2 + $ make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.4 ``` * Build, install and bring up Harbor with Notary: ```sh - $ make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.1.2 NOTARYFLAG=true + $ make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.4 NOTARYFLAG=true ``` #### II. Compile code with your own Golang environment, then build Harbor From 4fe58811211924c50537f21ca00c34b7b0fb19a5 Mon Sep 17 00:00:00 2001 From: Wenkai Yin Date: Wed, 21 Jun 2017 19:24:29 +0800 Subject: [PATCH 13/19] bug fix --- src/common/security/secret/context.go | 9 ++++++++- src/ui/filter/security.go | 4 ++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/common/security/secret/context.go b/src/common/security/secret/context.go index 3b24afa50..39aa1e4d6 100644 --- a/src/common/security/secret/context.go +++ b/src/common/security/secret/context.go @@ -16,6 +16,7 @@ package secret import ( "github.com/vmware/harbor/src/common/secret" + "github.com/vmware/harbor/src/common/utils/log" ) // SecurityContext implements security.Context interface based on secret store @@ -35,9 +36,15 @@ func NewSecurityContext(secret string, store *secret.Store) *SecurityContext { // IsAuthenticated returns true if the secret is valid func (s *SecurityContext) IsAuthenticated() bool { if s.store == nil { + log.Debug("secret store is nil") return false } - return s.store.IsValid(s.secret) + valid := s.store.IsValid(s.secret) + if !valid { + log.Debugf("invalid secret: %s", s.secret) + } + + return valid } // GetUsername returns the corresponding username of the secret diff --git a/src/ui/filter/security.go b/src/ui/filter/security.go index 10e0f720d..8a24eb607 100644 --- a/src/ui/filter/security.go +++ b/src/ui/filter/security.go @@ -50,7 +50,7 @@ func Init() { // integration with admiral if config.WithAdmiral() { reqCtxModifiers = []ReqCtxModifier{ - &secretReqCtxModifier{}, + &secretReqCtxModifier{config.SecretStore}, &tokenReqCtxModifier{}, &unauthorizedReqCtxModifier{}} return @@ -58,7 +58,7 @@ func Init() { // standalone reqCtxModifiers = []ReqCtxModifier{ - &secretReqCtxModifier{}, + &secretReqCtxModifier{config.SecretStore}, &basicAuthReqCtxModifier{}, &sessionReqCtxModifier{}, &unauthorizedReqCtxModifier{}} From bdd49e51d512e706557ad7d06e3c99b46716ae98 Mon Sep 17 00:00:00 2001 From: Wenkai Yin Date: Thu, 22 Jun 2017 14:01:17 +0800 Subject: [PATCH 14/19] call ui API to get project --- docs/swagger.yaml | 24 ++++++++ src/jobservice/replication/transfer.go | 81 +++++++++++++++++++++----- src/ui/api/project.go | 18 ++++-- 3 files changed, 105 insertions(+), 18 deletions(-) diff --git a/docs/swagger.yaml b/docs/swagger.yaml index f77c615f2..462d9242f 100644 --- a/docs/swagger.yaml +++ b/docs/swagger.yaml @@ -1809,6 +1809,18 @@ definitions: type: integer format: int description: The public status of the project. + enable_content_trust: + type: boolean + description: Whether content trust is enabled or not. If it is enabled, user cann't pull unsigned images from this project. + prevent_vulnerable_images_from_running: + type: boolean + description: Whether prevent the vulnerable images from running. + prevent_vulnerable_images_from_running_severity: + type: string + description: If the vulnerability is high than severity defined here, the images cann't be pulled. + automatically_scan_images_on_push: + type: boolean + description: Whether scan images automatically when pushing. Project: type: object properties: @@ -1849,6 +1861,18 @@ definitions: repo_count: type: integer description: The number of the repositories under this project. + enable_content_trust: + type: boolean + description: Whether content trust is enabled or not. If it is enabled, user cann't pull unsigned images from this project. + prevent_vulnerable_images_from_running: + type: boolean + description: Whether prevent the vulnerable images from running. + prevent_vulnerable_images_from_running_severity: + type: string + description: If the vulnerability is high than severity defined here, the images cann't be pulled. + automatically_scan_images_on_push: + type: boolean + description: Whether scan images automatically when pushing. Manifest: type: object properties: diff --git a/src/jobservice/replication/transfer.go b/src/jobservice/replication/transfer.go index 0a438b230..5bd5d9593 100644 --- a/src/jobservice/replication/transfer.go +++ b/src/jobservice/replication/transfer.go @@ -27,7 +27,6 @@ import ( "github.com/docker/distribution" "github.com/docker/distribution/manifest/schema1" "github.com/docker/distribution/manifest/schema2" - "github.com/vmware/harbor/src/common/dao" "github.com/vmware/harbor/src/common/models" comutils "github.com/vmware/harbor/src/common/utils" "github.com/vmware/harbor/src/common/utils/log" @@ -182,13 +181,13 @@ func (c *Checker) Enter() (string, error) { } func (c *Checker) enter() (string, error) { - project, err := dao.GetProjectByName(c.project) + project, err := getProject(c.project) if err != nil { - c.logger.Errorf("an error occurred while getting project %s in DB: %v", c.project, err) - return "", err + c.logger.Infof("failed to get project %s from %s: %v", c.project, c.srcURL, err) + return "", nil } - err = c.createProject(project.Public) + err = c.createProject(project) if err == nil { c.logger.Infof("project %s is created on %s with user %s", c.project, c.dstURL, c.dstUsr) return StatePullManifest, nil @@ -207,16 +206,68 @@ func (c *Checker) enter() (string, error) { return "", err } -func (c *Checker) createProject(public int) error { - project := struct { - ProjectName string `json:"project_name"` - Public int `json:"public"` - }{ - ProjectName: c.project, - Public: public, +func getProject(name string) (*models.Project, error) { + req, err := http.NewRequest(http.MethodGet, buildProjectURL(), nil) + if err != nil { + return nil, err } - data, err := json.Marshal(project) + req.URL.Query().Set("name", name) + req.URL.Query().Encode() + req.AddCookie(&http.Cookie{ + Name: models.UISecretCookie, + Value: config.JobserviceSecret(), + }) + + client := &http.Client{} + resp, err := client.Do(req) + if err != nil { + return nil, err + } + defer resp.Body.Close() + + data, err := ioutil.ReadAll(resp.Body) + if err != nil { + return nil, err + } + + list := []*models.Project{} + if err = json.Unmarshal(data, list); err != nil { + return nil, err + } + + var project *models.Project + for _, p := range list { + if p.Name == name { + project = p + break + } + } + if project == nil { + return nil, fmt.Errorf("project %s not found", name) + } + + return project, nil +} + +func (c *Checker) createProject(project *models.Project) error { + pro := struct { + Name string `json:"project_name"` + Public int `json:"public"` + EnableContentTrust bool `json:"enable_content_trust"` + PreventVulnerableImagesFromRunning bool `json:"prevent_vulnerable_images_from_running"` + PreventVulnerableImagesFromRunningSeverity string `json:"prevent_vulnerable_images_from_running_severity"` + AutomaticallyScanImagesOnPush bool `json:"automatically_scan_images_on_push"` + }{ + Name: project.Name, + Public: project.Public, + EnableContentTrust: project.EnableContentTrust, + PreventVulnerableImagesFromRunning: project.PreventVulnerableImagesFromRunning, + PreventVulnerableImagesFromRunningSeverity: project.PreventVulnerableImagesFromRunningSeverity, + AutomaticallyScanImagesOnPush: project.AutomaticallyScanImagesOnPush, + } + + data, err := json.Marshal(pro) if err != nil { return err } @@ -263,6 +314,10 @@ func (c *Checker) createProject(public int) error { c.project, c.dstURL, c.dstUsr, resp.StatusCode, string(message)) } +func buildProjectURL() string { + return strings.TrimRight(config.LocalUIURL(), "/") + "/api/projects/" +} + // ManifestPuller pulls the manifest of a tag. And if no tag needs to be pulled, // the next state that state machine should enter is "finished". type ManifestPuller struct { diff --git a/src/ui/api/project.go b/src/ui/api/project.go index a06be9e69..bdd29e940 100644 --- a/src/ui/api/project.go +++ b/src/ui/api/project.go @@ -37,8 +37,12 @@ type ProjectAPI struct { } type projectReq struct { - ProjectName string `json:"project_name"` - Public int `json:"public"` + ProjectName string `json:"project_name"` + Public int `json:"public"` + EnableContentTrust bool `json:"enable_content_trust"` + PreventVulnerableImagesFromRunning bool `json:"prevent_vulnerable_images_from_running"` + PreventVulnerableImagesFromRunningSeverity string `json:"prevent_vulnerable_images_from_running_severity"` + AutomaticallyScanImagesOnPush bool `json:"automatically_scan_images_on_push"` } const projectNameMaxLen int = 30 @@ -116,9 +120,13 @@ func (p *ProjectAPI) Post() { } projectID, err := p.ProjectMgr.Create(&models.Project{ - Name: pro.ProjectName, - Public: pro.Public, - OwnerName: p.SecurityCtx.GetUsername(), + Name: pro.ProjectName, + Public: pro.Public, + OwnerName: p.SecurityCtx.GetUsername(), + EnableContentTrust: pro.EnableContentTrust, + PreventVulnerableImagesFromRunning: pro.PreventVulnerableImagesFromRunning, + PreventVulnerableImagesFromRunningSeverity: pro.PreventVulnerableImagesFromRunningSeverity, + AutomaticallyScanImagesOnPush: pro.AutomaticallyScanImagesOnPush, }) if err != nil { log.Errorf("Failed to add project, error: %v", err) From 6fe175550bdbcd69ae36172a2b0f30f94482d76f Mon Sep 17 00:00:00 2001 From: Wenkai Yin Date: Thu, 22 Jun 2017 15:50:24 +0800 Subject: [PATCH 15/19] update --- src/jobservice/replication/transfer.go | 6 +++--- src/ui/router.go | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/jobservice/replication/transfer.go b/src/jobservice/replication/transfer.go index 5bd5d9593..69cdc37c6 100644 --- a/src/jobservice/replication/transfer.go +++ b/src/jobservice/replication/transfer.go @@ -183,8 +183,8 @@ func (c *Checker) Enter() (string, error) { func (c *Checker) enter() (string, error) { project, err := getProject(c.project) if err != nil { - c.logger.Infof("failed to get project %s from %s: %v", c.project, c.srcURL, err) - return "", nil + c.logger.Errorf("failed to get project %s from %s: %v", c.project, c.srcURL, err) + return "", err } err = c.createProject(project) @@ -232,7 +232,7 @@ func getProject(name string) (*models.Project, error) { } list := []*models.Project{} - if err = json.Unmarshal(data, list); err != nil { + if err = json.Unmarshal(data, &list); err != nil { return nil, err } diff --git a/src/ui/router.go b/src/ui/router.go index d4a0e7b6b..6a45e05ef 100644 --- a/src/ui/router.go +++ b/src/ui/router.go @@ -40,10 +40,10 @@ func initRouters() { beego.Router("/harbor/sign-up", &controllers.IndexController{}) beego.Router("/harbor/dashboard", &controllers.IndexController{}) beego.Router("/harbor/projects", &controllers.IndexController{}) - beego.Router("/harbor/projects/:id/repository", &controllers.IndexController{}) - beego.Router("/harbor/projects/:id/replication", &controllers.IndexController{}) - beego.Router("/harbor/projects/:id/member", &controllers.IndexController{}) - beego.Router("/harbor/projects/:id/log", &controllers.IndexController{}) + beego.Router("/harbor/projects/:id/repositories", &controllers.IndexController{}) + beego.Router("/harbor/projects/:id/replications", &controllers.IndexController{}) + beego.Router("/harbor/projects/:id/members", &controllers.IndexController{}) + beego.Router("/harbor/projects/:id/logs", &controllers.IndexController{}) beego.Router("/harbor/tags/:id/*", &controllers.IndexController{}) beego.Router("/harbor/users", &controllers.IndexController{}) From fde171bcb34f871f8540381f3855ed0fcf367d41 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Thu, 22 Jun 2017 16:44:34 +0800 Subject: [PATCH 16/19] Fix UI issues --- .../lib/src/tag/tag-detail.component.html.ts | 8 +++--- .../lib/src/tag/tag-detail.component.spec.ts | 2 +- src/ui_ng/lib/src/tag/tag-detail.component.ts | 6 ++++- src/ui_ng/lib/src/tag/tag.component.css.ts | 5 ++++ src/ui_ng/lib/src/tag/tag.component.html.ts | 7 ++--- src/ui_ng/lib/src/tag/tag.component.ts | 27 +++++++++++++++---- .../vulnerability-scanning/scanning.css.ts | 20 +++++++++++++- .../vulnerability-scanning/scanning.html.ts | 10 +++---- src/ui_ng/package.json | 2 +- .../list-project-ro.component.html | 2 +- .../list-repository-ro.component.html | 2 +- src/ui_ng/src/app/shared/shared.module.ts | 4 +-- src/ui_ng/src/i18n/lang/en-us-lang.json | 10 ++++--- src/ui_ng/src/i18n/lang/es-es-lang.json | 10 ++++--- src/ui_ng/src/i18n/lang/zh-cn-lang.json | 12 ++++++--- 15 files changed, 92 insertions(+), 35 deletions(-) diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.html.ts b/src/ui_ng/lib/src/tag/tag-detail.component.html.ts index 5980ba87a..0f541efbf 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.html.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.html.ts @@ -48,8 +48,8 @@ export const TAG_DETAIL_HTML: string = `
-
{{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{suffixForHigh | translate }}
-
{{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{suffixForMedium | translate }}
+
{{highCount}} {{getPackageText(highCount) | translate}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{suffixForHigh | translate }}
+
{{mediumCount}} {{getPackageText(mediumCount) | translate}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{suffixForMedium | translate }}
@@ -60,8 +60,8 @@ export const TAG_DETAIL_HTML: string = `
-
{{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{suffixForLow | translate }}
-
{{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{suffixForUnknown | translate }}
+
{{lowCount}} {{getPackageText(lowCount) | translate}} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{suffixForLow | translate }}
+
{{unknownCount}} {{getPackageText(unknownCount) | translate}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{suffixForUnknown | translate }}
diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts b/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts index 44bd18979..52654e767 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.spec.ts @@ -144,7 +144,7 @@ describe('TagDetailComponent (inline template)', () => { expect(el).toBeTruthy(); let el2: HTMLElement = el.querySelector('div'); expect(el2).toBeTruthy(); - expect(el2.textContent.trim()).toEqual("13 VULNERABILITY.SEVERITY.HIGH VULNERABILITY.PLURAL"); + expect(el2.textContent.trim()).toEqual("13 VULNERABILITY.PACKAGES VULNERABILITY.SEVERITY.HIGH VULNERABILITY.PLURAL"); }); })); diff --git a/src/ui_ng/lib/src/tag/tag-detail.component.ts b/src/ui_ng/lib/src/tag/tag-detail.component.ts index daaf2182f..5572742e5 100644 --- a/src/ui_ng/lib/src/tag/tag-detail.component.ts +++ b/src/ui_ng/lib/src/tag/tag-detail.component.ts @@ -75,8 +75,12 @@ export class TagDetailComponent implements OnInit { this.backEvt.emit(this.tagId); } + getPackageText(count: number): string { + return count > 1 ? "VULNERABILITY.PACKAGES" : "VULNERABILITY.PACKAGE"; + } + public get author(): string { - return this.tagDetails && this.tagDetails.author? this.tagDetails.author: 'TAG.ANONYMITY'; + return this.tagDetails && this.tagDetails.author ? this.tagDetails.author : 'TAG.ANONYMITY'; } public get highCount(): number { diff --git a/src/ui_ng/lib/src/tag/tag.component.css.ts b/src/ui_ng/lib/src/tag/tag.component.css.ts index 6157b6cc6..eb2e512e5 100644 --- a/src/ui_ng/lib/src/tag/tag.component.css.ts +++ b/src/ui_ng/lib/src/tag/tag.component.css.ts @@ -37,4 +37,9 @@ export const TAG_STYLE = ` white-space: nowrap; text-overflow:ellipsis; } + +.copy-failed { + color: red; + margin-right: 6px; +} `; \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag.component.html.ts b/src/ui_ng/lib/src/tag/tag.component.html.ts index 9a17036b5..edbd1bfd4 100644 --- a/src/ui_ng/lib/src/tag/tag.component.html.ts +++ b/src/ui_ng/lib/src/tag/tag.component.html.ts @@ -4,11 +4,12 @@ export const TAG_TEMPLATE = `

{{ manifestInfoTitle | translate }}

- +
- + {{'TAG.COPY_ERROR' | translate}} +
@@ -54,6 +55,6 @@ export const TAG_TEMPLATE = ` {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}} {{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}}     - + `; \ No newline at end of file diff --git a/src/ui_ng/lib/src/tag/tag.component.ts b/src/ui_ng/lib/src/tag/tag.component.ts index ca009c603..964d4c4b3 100644 --- a/src/ui_ng/lib/src/tag/tag.component.ts +++ b/src/ui_ng/lib/src/tag/tag.component.ts @@ -20,6 +20,7 @@ import { EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, + ElementRef, OnDestroy } from '@angular/core'; @@ -87,9 +88,13 @@ export class TagComponent implements OnInit, OnDestroy { tagsInScanning: { [key: string]: any } = {}; scanningTagCount: number = 0; + copyFailed: boolean = false; + @ViewChild('confirmationDialog') confirmationDialog: ConfirmationDialogComponent; + @ViewChild('digestTarget') textInput: ElementRef; + constructor( private errorHandler: ErrorHandler, private tagService: TagService, @@ -195,13 +200,10 @@ export class TagComponent implements OnInit, OnDestroy { this.manifestInfoTitle = 'REPOSITORY.COPY_DIGEST_ID'; this.digestId = tag.digest; this.showTagManifestOpened = true; + this.copyFailed = false; } } - - selectAndCopy($event: any) { - $event.target.select(); - } - + onTagClick(tag: Tag): void { if (tag) { let evt: TagClickEvent = { @@ -255,4 +257,19 @@ export class TagComponent implements OnInit, OnDestroy { let hnd = setInterval(() => this.ref.markForCheck(), 100); setTimeout(() => clearInterval(hnd), 1000); } + + onSuccess($event: any): void { + this.copyFailed = false; + //Directly close dialog + this.showTagManifestOpened = false; + } + + onError($event: any): void { + //Show error + this.copyFailed = true; + //Select all text + if(this.textInput){ + this.textInput.nativeElement.select(); + } + } } \ No newline at end of file diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts index bc6643101..6a8abb7de 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts @@ -1,16 +1,34 @@ export const SCANNING_STYLES: string = ` .bar-wrapper { width: 120px; + height: 12px; } .bar-state { text-align: center !important; } + +.bar-state-chart { + position: relative; + top: 2px; +} + +.bar-state-error { + position: relative; + top: -3px; +} + +.error-text { + position: relative; + top: 1px; + margin-left: -5px; +} + .scanning-button { height: 24px; margin-top: 0px; margin-bottom: 0px; vertical-align: middle; - top: -6px; + top: -12px; position: relative; } .tip-wrapper { diff --git a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts index b39052ba0..06aa794df 100644 --- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts +++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts @@ -56,7 +56,7 @@ export const GRID_COMPONENT_HTML: string = ` {{'VULNERABILITY.GRID.COLUMN_ID' | translate}} {{'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate}} {{'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate}} - {{'VULNERABILITY.GRID.COLUMN_VERSION' | translate}} version + {{'VULNERABILITY.GRID.COLUMN_VERSION' | translate}} {{'VULNERABILITY.GRID.COLUMN_FIXED' | translate}} {{'VULNERABILITY.GRID.PLACEHOLDER' | translate}} @@ -94,15 +94,15 @@ export const BAR_CHART_COMPONENT_HTML: string = `
{{'VULNERABILITY.STATE.QUEUED' | translate}}
-
+
- {{'VULNERABILITY.STATE.ERROR' | translate}} + {{'VULNERABILITY.STATE.ERROR' | translate}}
-
+
{{'VULNERABILITY.STATE.SCANNING' | translate}}
-
+
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index 055a18060..72ab7d858 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -31,7 +31,7 @@ "clarity-icons": "^0.9.8", "clarity-ui": "^0.9.8", "core-js": "^2.4.1", - "harbor-ui": "^0.2.13", + "harbor-ui": "^0.2.19", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", "ngx-cookie": "^1.0.0", diff --git a/src/ui_ng/src/app/shared/list-project-ro/list-project-ro.component.html b/src/ui_ng/src/app/shared/list-project-ro/list-project-ro.component.html index 2752e67c7..51f59bfea 100644 --- a/src/ui_ng/src/app/shared/list-project-ro/list-project-ro.component.html +++ b/src/ui_ng/src/app/shared/list-project-ro/list-project-ro.component.html @@ -11,6 +11,6 @@ {{(projects ? projects.length : 0)}} {{'PROJECT.ITEMS' | translate}} - + \ No newline at end of file diff --git a/src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.html b/src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.html index f3992075d..e67f32c0b 100644 --- a/src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.html +++ b/src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.html @@ -9,6 +9,6 @@ {{(repositories ? repositories.length : 0)}} {{'REPOSITORY.ITEMS' | translate}} - + \ 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 5e324da48..20b360fcd 100644 --- a/src/ui_ng/src/app/shared/shared.module.ts +++ b/src/ui_ng/src/app/shared/shared.module.ts @@ -63,8 +63,8 @@ const uiLibConfig: IServiceConfig = { enablei18Support: true, langCookieKey: "harbor-lang", langMessageLoader: "http", - langMessagePathForHttpLoader: "src/i18n/lang/", - langMessageFileSuffixForHttpLoader: "-lang.json", + langMessagePathForHttpLoader: "i18n/lang/", + langMessageFileSuffixForHttpLoader: "-lang.json" }; @NgModule({ diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json index f3661f901..a324c4573 100644 --- a/src/ui_ng/src/i18n/lang/en-us-lang.json +++ b/src/ui_ng/src/i18n/lang/en-us-lang.json @@ -31,7 +31,8 @@ "MORE_INFO": "More info...", "YES": "YES", "NO": "NO", - "NEGATIVE": "NEGATIVE" + "NEGATIVE": "NEGATIVE", + "COPY": "COPY" }, "TOOLTIP": { "EMAIL": "Email should be a valid email address like name@example.com.", @@ -477,7 +478,9 @@ }, "SINGULAR": "Vulnerability", "PLURAL": "Vulnerabilities", - "PLACEHOLDER": "Filter Vulnerabilities" + "PLACEHOLDER": "Filter Vulnerabilities", + "PACKAGE": "Package with", + "PACKAGES": "Packages with" }, "PUSH_IMAGE": { "TITLE": "Push Image", @@ -496,7 +499,8 @@ "OS": "OS", "SCAN_COMPLETION_TIME": "Scan Completed", "IMAGE_VULNERABILITIES": "Image Vulnerabilities", - "PLACEHOLDER": "We couldn't find any tags!" + "PLACEHOLDER": "We couldn't find any tags!", + "COPY_ERROR": "Copy failed, please try to manually copy." }, "UNKNOWN_ERROR": "Unknown errors have occurred. Please try again later.", "UNAUTHORIZED_ERROR": "Your session is invalid or has expired. You need to sign in to continue your action.", diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json index 2c714e4b0..9e4100c04 100644 --- a/src/ui_ng/src/i18n/lang/es-es-lang.json +++ b/src/ui_ng/src/i18n/lang/es-es-lang.json @@ -31,7 +31,8 @@ "MORE_INFO": "Más información...", "YES": "SI", "NO": "NO", - "NEGATIVE": "NEGATIVO" + "NEGATIVE": "NEGATIVO", + "COPY": "COPY" }, "TOOLTIP": { "EMAIL": "El email debe ser una dirección válida como nombre@ejemplo.com.", @@ -476,7 +477,9 @@ }, "SINGULAR": "Vulnerability", "PLURAL": "Vulnerabilities", - "PLACEHOLDER": "Filter Vulnerabilities" + "PLACEHOLDER": "Filter Vulnerabilities", + "PACKAGE": "Package with", + "PACKAGES": "Packages with" }, "PUSH_IMAGE": { "TITLE": "Push Image", @@ -495,7 +498,8 @@ "OS": "OS", "SCAN_COMPLETION_TIME": "Scan Completed", "IMAGE_VULNERABILITIES": "Image Vulnerabilities", - "PLACEHOLDER": "We couldn't find any tags!" + "PLACEHOLDER": "We couldn't find any tags!", + "COPY_ERROR": "Copy failed, please try to manually copy." }, "UNKNOWN_ERROR": "Ha ocurrido un error desconocido. Por favor, inténtelo de nuevo más tarde.", "UNAUTHORIZED_ERROR": "La sesión no es válida o ha caducado. Necesita identificarse de nuevo para llevar a cabo esa acción.", diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json index 43d22a560..b61495d73 100644 --- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json +++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json @@ -31,7 +31,8 @@ "MORE_INFO": "更多信息...", "YES": "是", "NO": "否", - "NEGATIVE": "否" + "NEGATIVE": "否", + "COPY": "拷贝" }, "TOOLTIP": { "EMAIL": "请使用正确的邮箱地址，比如name@example.com。", @@ -456,7 +457,7 @@ "PLACEHOLDER": "没有扫描结果！", "COLUMN_ID": "缺陷码", "COLUMN_SEVERITY": "严重度", - "COLUMN_PACKAGE": "组件", + "COLUMN_PACKAGE": "组", "COLUMN_VERSION": "当前版本", "COLUMN_FIXED": "修复版本", "COLUMN_DESCRIPTION": "简介", @@ -477,7 +478,9 @@ }, "SINGULAR": "缺陷", "PLURAL": "缺陷", - "PLACEHOLDER": "过滤缺陷" + "PLACEHOLDER": "过滤缺陷", + "PACKAGE": "个组件有", + "PACKAGES": "个组件有" }, "PUSH_IMAGE": { "TITLE": "推送镜像", @@ -496,7 +499,8 @@ "OS": "操作系统", "SCAN_COMPLETION_TIME": "扫描完成时间", "IMAGE_VULNERABILITIES": "镜像缺陷", - "PLACEHOLDER": "未发现任何标签!" + "PLACEHOLDER": "未发现任何标签!", + "COPY_ERROR": "拷贝失败，请尝试手动拷贝。" }, "UNKNOWN_ERROR": "发生未知错误,请稍后再试。", "UNAUTHORIZED_ERROR": "会话无效或者已经过期, 请重新登录以继续。", From deeb37ac87ab5ee8903ba82f7eb6a6ffef227f45 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Thu, 22 Jun 2017 17:09:53 +0800 Subject: [PATCH 17/19] Update ui building process --- .travis.yml | 1 + make/dev/nodeclarity/entrypoint.sh | 1 + 2 files changed, 2 insertions(+) diff --git a/.travis.yml b/.travis.yml index 4a3816b8b..b842e0ba6 100644 --- a/.travis.yml +++ b/.travis.yml @@ -74,6 +74,7 @@ before_script: - sudo chmod 777 /tmp/registry.db script: + - sudo cp ./src/ui_ng/package.json ./src/ui_ng/src - sudo mkdir -p /etc/ui/ca/ - sudo mv ./tests/ca.crt /etc/ui/ca/ - sudo mkdir -p /harbor diff --git a/make/dev/nodeclarity/entrypoint.sh b/make/dev/nodeclarity/entrypoint.sh index 5b2a23240..3ab9c80ad 100644 --- a/make/dev/nodeclarity/entrypoint.sh +++ b/make/dev/nodeclarity/entrypoint.sh @@ -18,6 +18,7 @@ if [ ! -z "$npm_proxy" -a "$npm_proxy" != " " ]; then npm config set proxy $npm_proxy fi +cp ./src/package.json . npm install ./node_modules/.bin/ngc -p tsconfig-aot.json From d31a25317eecfc6fa9be2f66ea62f54d3c644b17 Mon Sep 17 00:00:00 2001 From: Tan Jiang Date: Thu, 22 Jun 2017 18:26:40 +0800 Subject: [PATCH 18/19] fix nil pointer in vulnerability/details api --- src/ui/api/repository.go | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/ui/api/repository.go b/src/ui/api/repository.go index 91dcf88db..617d37896 100644 --- a/src/ui/api/repository.go +++ b/src/ui/api/repository.go @@ -762,19 +762,23 @@ func (ra *RepositoryAPI) VulnerabilityDetails() { ra.HandleForbidden(ra.SecurityCtx.GetUsername()) return } + res := []*models.VulnerabilityItem{} overview, err := dao.GetImgScanOverview(digest) if err != nil { ra.HandleInternalServerError(fmt.Sprintf("failed to get the scan overview, error: %v", err)) return } - clairClient := clair.NewClient(config.ClairEndpoint(), nil) - log.Debugf("The key for getting details: %s", overview.DetailsKey) - details, err := clairClient.GetResult(overview.DetailsKey) - if err != nil { - ra.HandleInternalServerError(fmt.Sprintf("Failed to get scan details from Clair, error: %v", err)) - return + if overview != nil { + clairClient := clair.NewClient(config.ClairEndpoint(), nil) + log.Debugf("The key for getting details: %s", overview.DetailsKey) + details, err := clairClient.GetResult(overview.DetailsKey) + if err != nil { + ra.HandleInternalServerError(fmt.Sprintf("Failed to get scan details from Clair, error: %v", err)) + return + } + res = transformVulnerabilities(details) } - ra.Data["json"] = transformVulnerabilities(details) + ra.Data["json"] = res ra.ServeJSON() } From 0b55ce6e80d641cffcec8b77dd1e3ba73dcae0a7 Mon Sep 17 00:00:00 2001 From: Wenkai Yin Date: Fri, 23 Jun 2017 16:21:19 +0800 Subject: [PATCH 19/19] add GetAll support in PMS project manager --- src/common/models/project.go | 10 ++ src/jobservice/replication/transfer.go | 9 +- src/ui/api/project.go | 27 ++--- src/ui/projectmanager/pms/pm.go | 57 ++++++----- src/ui/projectmanager/pms/pm_test.go | 131 +++++++++++++++++-------- src/ui/proxy/interceptor_test.go | 2 +- 6 files changed, 147 insertions(+), 89 deletions(-) diff --git a/src/common/models/project.go b/src/common/models/project.go index c5ab7e1e5..8a64b068a 100644 --- a/src/common/models/project.go +++ b/src/common/models/project.go @@ -99,3 +99,13 @@ type BaseProjectCollection struct { Public bool Member string } + +// ProjectRequest holds informations that need for creating project API +type ProjectRequest struct { + Name string `json:"project_name"` + Public int `json:"public"` + EnableContentTrust bool `json:"enable_content_trust"` + PreventVulnerableImagesFromRunning bool `json:"prevent_vulnerable_images_from_running"` + PreventVulnerableImagesFromRunningSeverity string `json:"prevent_vulnerable_images_from_running_severity"` + AutomaticallyScanImagesOnPush bool `json:"automatically_scan_images_on_push"` +} diff --git a/src/jobservice/replication/transfer.go b/src/jobservice/replication/transfer.go index 69cdc37c6..6cabdf48f 100644 --- a/src/jobservice/replication/transfer.go +++ b/src/jobservice/replication/transfer.go @@ -251,14 +251,7 @@ func getProject(name string) (*models.Project, error) { } func (c *Checker) createProject(project *models.Project) error { - pro := struct { - Name string `json:"project_name"` - Public int `json:"public"` - EnableContentTrust bool `json:"enable_content_trust"` - PreventVulnerableImagesFromRunning bool `json:"prevent_vulnerable_images_from_running"` - PreventVulnerableImagesFromRunningSeverity string `json:"prevent_vulnerable_images_from_running_severity"` - AutomaticallyScanImagesOnPush bool `json:"automatically_scan_images_on_push"` - }{ + pro := &models.ProjectRequest{ Name: project.Name, Public: project.Public, EnableContentTrust: project.EnableContentTrust, diff --git a/src/ui/api/project.go b/src/ui/api/project.go index bdd29e940..8561140e2 100644 --- a/src/ui/api/project.go +++ b/src/ui/api/project.go @@ -36,15 +36,6 @@ type ProjectAPI struct { project *models.Project } -type projectReq struct { - ProjectName string `json:"project_name"` - Public int `json:"public"` - EnableContentTrust bool `json:"enable_content_trust"` - PreventVulnerableImagesFromRunning bool `json:"prevent_vulnerable_images_from_running"` - PreventVulnerableImagesFromRunningSeverity string `json:"prevent_vulnerable_images_from_running_severity"` - AutomaticallyScanImagesOnPush bool `json:"automatically_scan_images_on_push"` -} - const projectNameMaxLen int = 30 const projectNameMinLen int = 2 const restrictedNameChars = `[a-z0-9]+(?:[._-][a-z0-9]+)*` @@ -99,7 +90,7 @@ func (p *ProjectAPI) Post() { p.RenderError(http.StatusForbidden, "Only system admin can create project") return } - var pro projectReq + var pro *models.ProjectRequest p.DecodeJSONReq(&pro) err = validateProjectReq(pro) if err != nil { @@ -108,10 +99,10 @@ func (p *ProjectAPI) Post() { return } - exist, err := p.ProjectMgr.Exist(pro.ProjectName) + exist, err := p.ProjectMgr.Exist(pro.Name) if err != nil { p.HandleInternalServerError(fmt.Sprintf("failed to check the existence of project %s: %v", - pro.ProjectName, err)) + pro.Name, err)) return } if exist { @@ -120,7 +111,7 @@ func (p *ProjectAPI) Post() { } projectID, err := p.ProjectMgr.Create(&models.Project{ - Name: pro.ProjectName, + Name: pro.Name, Public: pro.Public, OwnerName: p.SecurityCtx.GetUsername(), EnableContentTrust: pro.EnableContentTrust, @@ -144,7 +135,7 @@ func (p *ProjectAPI) Post() { models.AccessLog{ Username: p.SecurityCtx.GetUsername(), ProjectID: projectID, - RepoName: pro.ProjectName + "/", + RepoName: pro.Name + "/", RepoTag: "N/A", Operation: "create", OpTime: time.Now(), @@ -357,7 +348,7 @@ func (p *ProjectAPI) ToggleProjectPublic() { return } - var req projectReq + var req *models.ProjectRequest p.DecodeJSONReq(&req) if req.Public != 0 && req.Public != 1 { p.HandleBadRequest("public should be 0 or 1") @@ -439,9 +430,9 @@ func (p *ProjectAPI) Logs() { } // TODO move this to package models -func validateProjectReq(req projectReq) error { - pn := req.ProjectName - if isIllegalLength(req.ProjectName, projectNameMinLen, projectNameMaxLen) { +func validateProjectReq(req *models.ProjectRequest) error { + pn := req.Name + if isIllegalLength(req.Name, projectNameMinLen, projectNameMaxLen) { return fmt.Errorf("Project name is illegal in length. (greater than 2 or less than 30)") } validProjectName := regexp.MustCompile(`^` + restrictedNameChars + `$`) diff --git a/src/ui/projectmanager/pms/pm.go b/src/ui/projectmanager/pms/pm.go index e583b40a9..1cd0bc444 100644 --- a/src/ui/projectmanager/pms/pm.go +++ b/src/ui/projectmanager/pms/pm.go @@ -117,6 +117,10 @@ func (p *ProjectManager) filter(m map[string]string) ([]*project, error) { query += fmt.Sprintf("$filter=%s eq '%s'", k, v) } + if len(query) == 0 { + query = "?expand=true" + } + path := "/projects" + query data, err := p.send(http.MethodGet, path, nil) if err != nil { @@ -129,7 +133,6 @@ func (p *ProjectManager) filter(m map[string]string) ([]*project, error) { // parse the response of GET /projects?xxx to project list func parse(b []byte) ([]*project, error) { documents := &struct { - //TotalCount int64 `json:"totalCount"` //DocumentCount int64 `json:"documentCount"` Projects map[string]*project `json:"documents"` }{} @@ -292,25 +295,10 @@ func (p *ProjectManager) getIDbyHarborIDOrName(projectIDOrName interface{}) (str // GetPublic ... func (p *ProjectManager) GetPublic() ([]*models.Project, error) { - m := map[string]string{ - "isPublic": "true", - } - - projects, err := p.filter(m) - if err != nil { - return nil, err - } - - list := []*models.Project{} - for _, p := range projects { - project, err := convert(p) - if err != nil { - return nil, err - } - list = append(list, project) - } - - return list, nil + t := true + return p.GetAll(&models.ProjectQueryParam{ + Public: &t, + }) } // GetByMember ... @@ -375,12 +363,37 @@ func (p *ProjectManager) Update(projectIDOrName interface{}, project *models.Pro // GetAll ... func (p *ProjectManager) GetAll(query *models.ProjectQueryParam, base ...*models.BaseProjectCollection) ([]*models.Project, error) { - return nil, errors.New("get all projects is unsupported") + m := map[string]string{} + if query != nil { + if len(query.Name) > 0 { + m["name"] = query.Name + } + if query.Public != nil { + m["isPublic"] = strconv.FormatBool(*query.Public) + } + } + + projects, err := p.filter(m) + if err != nil { + return nil, err + } + + list := []*models.Project{} + for _, p := range projects { + project, err := convert(p) + if err != nil { + return nil, err + } + list = append(list, project) + } + + return list, nil } // GetTotal ... func (p *ProjectManager) GetTotal(query *models.ProjectQueryParam, base ...*models.BaseProjectCollection) (int64, error) { - return 0, errors.New("get total of projects is unsupported") + projects, err := p.GetAll(query) + return int64(len(projects)), err } // GetHasReadPerm returns all projects that user has read perm to diff --git a/src/ui/projectmanager/pms/pm_test.go b/src/ui/projectmanager/pms/pm_test.go index 3c46dd774..5c052c437 100644 --- a/src/ui/projectmanager/pms/pm_test.go +++ b/src/ui/projectmanager/pms/pm_test.go @@ -183,11 +183,7 @@ func TestGet(t *testing.T) { Name: name, }) require.Nil(t, err) - defer func(id int64) { - if err := pm.Delete(id); err != nil { - require.Nil(t, err) - } - }(id) + defer delete(t, id) // get by invalid input type _, err = pm.Get([]string{}) @@ -234,11 +230,7 @@ func TestIsPublic(t *testing.T) { Public: 1, }) require.Nil(t, err) - defer func(id int64) { - if err := pm.Delete(id); err != nil { - require.Nil(t, err) - } - }(id) + defer delete(t, id) public, err = pm.IsPublic(id) assert.Nil(t, err) @@ -255,11 +247,7 @@ func TestIsPublic(t *testing.T) { Public: 0, }) require.Nil(t, err) - defer func(id int64) { - if err := pm.Delete(id); err != nil { - require.Nil(t, err) - } - }(id) + defer delete(t, id) public, err = pm.IsPublic(id) assert.Nil(t, err) @@ -289,11 +277,7 @@ func TestExist(t *testing.T) { Name: name, }) require.Nil(t, err) - defer func(id int64) { - if err := pm.Delete(id); err != nil { - require.Nil(t, err) - } - }(id) + defer delete(t, id) exist, err = pm.Exist(id) assert.Nil(t, err) @@ -322,11 +306,7 @@ func TestGetRoles(t *testing.T) { Name: name, }) require.Nil(t, err) - defer func(id int64) { - if err := pm.Delete(id); err != nil { - require.Nil(t, err) - } - }(id) + defer delete(t, id) roles, err = pm.GetRoles("user01", id) assert.Nil(t, err) @@ -348,11 +328,7 @@ func TestGetPublic(t *testing.T) { Public: 1, }) require.Nil(t, err) - defer func(id int64) { - if err := pm.Delete(id); err != nil { - require.Nil(t, err) - } - }(id) + defer delete(t, id) projects, err = pm.GetPublic() assert.Nil(t, nil) @@ -386,11 +362,7 @@ func TestCreate(t *testing.T) { AutomaticallyScanImagesOnPush: true, }) require.Nil(t, err) - defer func(id int64) { - if err := pm.Delete(id); err != nil { - require.Nil(t, err) - } - }(id) + defer delete(t, id) project, err := pm.Get(id) assert.Nil(t, err) @@ -402,6 +374,8 @@ func TestCreate(t *testing.T) { assert.True(t, project.AutomaticallyScanImagesOnPush) } +// TODO get the case back after Admiral'API is fixed +/* func TestDelete(t *testing.T) { pm := NewProjectManager(endpoint, token) @@ -427,7 +401,7 @@ func TestDelete(t *testing.T) { err = pm.Delete(name) assert.Nil(t, err) } - +*/ func TestUpdate(t *testing.T) { pm := NewProjectManager(endpoint, token) err := pm.Update(nil, nil) @@ -436,17 +410,94 @@ func TestUpdate(t *testing.T) { func TestGetAll(t *testing.T) { pm := NewProjectManager(endpoint, token) - _, err := pm.GetAll(nil) - assert.NotNil(t, err) + + name1 := "project_for_test_get_all_01" + id1, err := pm.Create(&models.Project{ + Name: name1, + }) + require.Nil(t, err) + defer delete(t, id1) + + name2 := "project_for_test_get_all_02" + id2, err := pm.Create(&models.Project{ + Name: name2, + Public: 1, + }) + require.Nil(t, err) + defer delete(t, id2) + + // no filter + projects, err := pm.GetAll(nil) + require.Nil(t, err) + found1 := false + found2 := false + for _, project := range projects { + if project.ProjectID == id1 { + found1 = true + } + if project.ProjectID == id2 { + found2 = true + } + } + assert.True(t, found1) + assert.True(t, found2) + + // filter by name + projects, err = pm.GetAll(&models.ProjectQueryParam{ + Name: name1, + }) + require.Nil(t, err) + found1 = false + for _, project := range projects { + if project.ProjectID == id1 { + found1 = true + break + } + } + assert.True(t, found1) + + // filter by public + value := true + projects, err = pm.GetAll(&models.ProjectQueryParam{ + Public: &value, + }) + require.Nil(t, err) + found2 = false + for _, project := range projects { + if project.ProjectID == id2 { + found2 = true + break + } + } + assert.True(t, found2) } func TestGetTotal(t *testing.T) { pm := NewProjectManager(endpoint, token) - _, err := pm.GetTotal(nil) - assert.NotNil(t, err) + + total1, err := pm.GetTotal(nil) + require.Nil(t, err) + + name := "project_for_test_get_total" + id, err := pm.Create(&models.Project{ + Name: name, + }) + require.Nil(t, err) + defer delete(t, id) + + total2, err := pm.GetTotal(nil) + require.Nil(t, err) + assert.Equal(t, total1+1, total2) } // TODO add test case func TestGetHasReadPerm(t *testing.T) { } + +func delete(t *testing.T, id int64) { + pm := NewProjectManager(endpoint, token) + if err := pm.Delete(id); err != nil { + t.Logf("failed to delete project %d: %v", id, err) + } +} diff --git a/src/ui/proxy/interceptor_test.go b/src/ui/proxy/interceptor_test.go index 72206aa9a..1544ef4fd 100644 --- a/src/ui/proxy/interceptor_test.go +++ b/src/ui/proxy/interceptor_test.go @@ -111,7 +111,7 @@ func TestPMSPolicyChecker(t *testing.T) { require.Nil(t, err) defer func(id int64) { if err := pm.Delete(id); err != nil { - require.Nil(t, err) + t.Logf("failed to delete project %d: %v", id, err) } }(id) project, err := pm.Get(id)