Setup UI shared components libarary

.gitignore

@@ -30,4 +30,5 @@ src/ui_ng/typings/
 **/ssl/
 **/proxy.config.json
 **/npm*.log
-
+**/*ngsummary.json
+**/*ngfactory.ts

src/ui_ng/lib/AUTHORS

@@ -0,0 +1,3 @@
+# This file lists all individuals having contributed content to the repository.
+
+Steven zou <szou@vmware.com>

src/ui_ng/lib/README.md

@@ -0,0 +1,2 @@
+# harbor-angular
+For publishing Harbor shared UI components.

src/ui_ng/lib/angular-cli.json

@@ -0,0 +1,64 @@
+{
+    "project": {
+        "version": "0.1.0",
+        "name": "harbor-ui"
+    },
+    "apps": [{
+        "root": ".",
+        "outDir": "../dist",
+        "assets": [
+            "images",
+            "favicon.ico"
+        ],
+        "index": "index.html",
+        "main": "index.ts",
+        "test": "test.ts",
+        "tsconfig": "tsconfig.json",
+        "prefix": "",
+        "mobile": false,
+        "styles": [
+            "node_modules/clarity-icons/clarity-icons.min.css",
+            "node_modules/clarity-ui/clarity-ui.min.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": {
+        "protractor": {
+            "config": "./protractor.config.js"
+        }
+    },
+    "test": {
+        "karma": {
+            "config": "./karma.conf.js"
+        }
+    },
+    "defaults": {
+        "styleExt": "scss",
+        "prefixInterfaces": false,
+        "inline": {
+            "style": false,
+            "template": false
+        },
+        "spec": {
+            "class": false,
+            "component": true,
+            "directive": true,
+            "module": false,
+            "pipe": true,
+            "service": true
+        }
+    }
+}

src/ui_ng/lib/index.ts

@@ -0,0 +1 @@
+export * from './src/index';

src/ui_ng/lib/package.json

@@ -0,0 +1,60 @@
+{
+    "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",
+        "pree2e": "webdriver-manager update",
+        "e2e": "protractor",
+        "cleanup": "rimraf dist/bundles dist/src dist/index.d.ts dist/index.metadata.json dist/index.js dist/index.js.map dist/LICENSE dist/AUTHORS",
+        "copy": "copyfiles -f LICENSE AUTHORS pkg/package.json dist",
+        "transpile": "ngc",
+        "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/common": "^4.0.0",
+        "@angular/compiler": "^4.0.0",
+        "@angular/core": "^4.0.0",
+        "@angular/http": "^4.0.0",
+        "clarity-angular": "^0.8.14",
+        "clarity-icons": "^0.8.14",
+        "clarity-ui": "^0.8.14",
+        "core-js": "^2.4.1",
+        "rxjs": "^5.0.1",
+        "ts-helpers": "^1.1.1",
+        "zone.js": "^0.7.2"
+    },
+    "devDependencies": {
+        "@angular/cli": "^1.0.0",
+        "@angular/compiler-cli": "^2.4.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.0.3",
+        "typings": "^1.4.0",
+        "uglify-js": "^2.8.22",
+        "webdriver-manager": "10.2.5",
+        "rimraf": "^2.6.1",
+        "copyfiles": "^1.2.0"
+    }
+}

src/ui_ng/lib/pkg/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "harbor-ui",
+    "version": "0.1.0",
+    "description": "Harbor shared UI components based on Clarity and Angular4",
+    "author": "Harbor",
+    "module": "index.js",
+    "main": "bundles/harborui.umd.min.js",
+    "jsnext:main": "index.js",
+    "typings": "index.d.ts",
+    "keywords": [
+        "Harbor",
+        "Clarity",
+        "Angular4"
+    ],
+    "license": "Apache 2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/vmware/harbor.git"
+    },
+    "homepage": "https://github.com/vmware/harbor#readme",
+    "peerDependencies": {
+        "@angular/common": "^4.0.0",
+        "@angular/compiler": "^4.0.0",
+        "@angular/core": "^4.0.0",
+        "@angular/http": "^4.0.0",
+        "clarity-angular": "^0.8.14",
+        "clarity-icons": "^0.8.14",
+        "clarity-ui": "^0.8.14",
+        "core-js": "^2.4.1",
+        "rxjs": "^5.0.1",
+        "ts-helpers": "^1.1.1",
+        "zone.js": "^0.7.2"
+    }
+}

src/ui_ng/lib/rollup.config.js

@@ -0,0 +1,18 @@
+export default {
+    entry: 'dist/index.js',
+    dest: 'dist/bundles/harborui.umd.js',
+    sourceMap: false,
+    format: 'umd',
+    moduleName: 'harborui',
+    globals: {
+        '@angular/core': 'ng.core',
+        'rxjs/Observable': 'Rx',
+        'rxjs/ReplaySubject': 'Rx',
+        'rxjs/add/operator/map': 'Rx.Observable.prototype',
+        'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
+        'rxjs/add/operator/catch': 'Rx.Observable.prototype',
+        'rxjs/add/operator/toPromise': 'Rx.Observable.prototype',
+        'rxjs/add/observable/of': 'Rx.Observable',
+        'rxjs/add/observable/throw': 'Rx.Observable'
+    }
+}

src/ui_ng/lib/src/harbor-library.module.ts

@@ -0,0 +1,45 @@
+import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SYSTEMINFO_DIRECTIVES } from './system/index';
+import { SERVICE_CONFIG, IServiceConfig } from './service.config';
+
+export const DefaultServiceConfig: IServiceConfig = {
+  systemInfoEndpoint: "/api/system",
+  repositoryBaseEndpoint: "",
+  logBaseEndpoint: "",
+  targetBaseEndpoint: "",
+  replicationRuleEndpoint:"",
+  replicationJobEndpoint: ""
+};
+
+export interface HarborModuleConfig {
+  config?: Provider
+}
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [SYSTEMINFO_DIRECTIVES],
+  exports: [SYSTEMINFO_DIRECTIVES]
+})
+
+export class HarborLibraryModule {
+  static forRoot(config: HarborModuleConfig = {}): ModuleWithProviders {
+    return {
+      ngModule: HarborLibraryModule,
+      providers: [
+        config.config || { provide: SERVICE_CONFIG, useValue: DefaultServiceConfig }
+      ]
+    };
+  }
+
+  static forChild(config: HarborModuleConfig = {}): ModuleWithProviders {
+    return {
+      ngModule: HarborLibraryModule,
+      providers: [
+        config.config || { provide: SERVICE_CONFIG, useValue: DefaultServiceConfig }
+      ]
+    };
+  }
+}

src/ui_ng/lib/src/index.ts

@@ -0,0 +1,4 @@
+export * from './harbor-library.module';
+export * from './system/index';
+export * from './service.config';
+export * from './service/index';

src/ui_ng/lib/src/service.config.ts

@@ -0,0 +1,64 @@
+import { OpaqueToken } from '@angular/core';
+
+export let SERVICE_CONFIG = new OpaqueToken("service.config");
+
+export interface IServiceConfig {
+    systemInfoEndpoint: string;
+
+    /**
+     * The base endpoint of the service used to handle the repositories of registry and/or tags of repository.
+     * The endpoints of repository or tag(s) will be built based on this endpoint.
+     * E.g:
+     *   If the base endpoint is '/api/repositories',
+     *   the repository endpoint will be '/api/repositories/:repo_id',
+     *   the tag(s) endpoint will be '/api/repositories/:repo_id/tags[/:tag_id]'.
+     * 
+     * 
+     * @type {string}
+     * @memberOf IServiceConfig
+     */
+    repositoryBaseEndpoint: string;
+
+    /**
+     * The base endpoint of the service used to handle the recent access logs.
+     * 
+     * @type {string}
+     * @memberOf IServiceConfig
+     */
+    logBaseEndpoint: string;
+
+    /**
+     * The base endpoint of the service used to handle the registry targets.
+     * Registry target related endpoints will be built based on this endpoint.
+     * E.g:
+     *   If the base endpoint is '/api/endpoints',
+     *   the endpoint for registry target will be '/api/endpoints/:endpoint_id',
+     *   the endpoint for pinging registry target will be '/api/endpoints/:endpoint_id/ping'.
+     * 
+     * @type {string}
+     * @memberOf IServiceConfig
+     */
+    targetBaseEndpoint: string;
+
+    /**
+     * The base endpoint of the service used to handle the replication rules.
+     * Replication rule related endpoints will be built based on this endpoint.
+     * E.g:
+     *   If the base endpoint is '/api/replication/rules',
+     *   the endpoint for rule will be '/api/replication/rules/:rule_id'.
+     * 
+     * @type {string}
+     * @memberOf IServiceConfig
+     */
+    replicationRuleEndpoint: string;
+
+
+    /**
+     * The base endpoint of the service used to handle the replication jobs.
+     * 
+     * 
+     * @type {string}
+     * @memberOf IServiceConfig
+     */
+    replicationJobEndpoint: string;
+}

src/ui_ng/lib/src/service/RequestQueryParams.ts

@@ -0,0 +1,14 @@
+import { URLSearchParams } from '@angular/http';
+
+/**
+ * Wrap the class 'URLSearchParams' for future extending requirements.
+ * Currently no extra methods provided.
+ * 
+ * @export
+ * @class RequestQueryParams
+ * @extends {URLSearchParams}
+ */
+export class RequestQueryParams extends URLSearchParams {
+
+    constructor() { super(); }
+}

src/ui_ng/lib/src/service/access-log.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AccessLogService, AccessLogDefaultService } from './access-log.service';
+
+describe('AccessLogService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [{
+        provide: AccessLogService,
+        useClass: AccessLogDefaultService
+      }]
+    });
+  });
+
+  it('should ...', inject([AccessLogDefaultService], (service: AccessLogService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/ui_ng/lib/src/service/access-log.service.ts

@@ -0,0 +1,58 @@
+import { Observable } from 'rxjs/Observable';
+import { RequestQueryParams } from './RequestQueryParams';
+import { AccessLog } from './interface';
+import { Injectable } from "@angular/core";
+import 'rxjs/add/observable/of';
+
+/**
+ * Define service methods to handle the access log related things.
+ * 
+ * @export
+ * @abstract
+ * @class AccessLogService
+ */
+export abstract class AccessLogService {
+    /**
+     * Get the audit logs for the specified project.
+     * Set query parameters through 'queryParams', support:
+     *  - page
+     *  - pageSize
+     * 
+     * @abstract
+     * @param {(number | string)} projectId
+     * @param {RequestQueryParams} [queryParams]
+     * @returns {(Observable<AccessLog[]> | AccessLog[])}
+     * 
+     * @memberOf AccessLogService
+     */
+    abstract getAuditLogs(projectId: number | string, queryParams?: RequestQueryParams): Observable<AccessLog[]> | AccessLog[];
+
+    /**
+     * Get the recent logs.
+     * 
+     * @abstract
+     * @param {number} lines : Specify how many lines should be returned.
+     * @returns {(Observable<AccessLog[]> | AccessLog[])}
+     * 
+     * @memberOf AccessLogService
+     */
+    abstract getRecentLogs(lines: number): Observable<AccessLog[]> | AccessLog[];
+}
+
+/**
+ * Implement a default service for access log.
+ * 
+ * @export
+ * @class AccessLogDefaultService
+ * @extends {AccessLogService}
+ */
+@Injectable()
+export class AccessLogDefaultService extends AccessLogService {
+    public getAuditLogs(projectId: number | string, queryParams?: RequestQueryParams): Observable<AccessLog[]> | AccessLog[] {
+        return Observable.of([]);
+    }
+
+    public getRecentLogs(lines: number): Observable<AccessLog[]> | AccessLog[] {
+        return Observable.of([]);
+    }
+}

src/ui_ng/lib/src/service/endpoint.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { EndpointService, EndpointDefaultService } from './endpoint.service';
+
+describe('EndpointService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [{
+        provide: EndpointService,
+        useClass: EndpointDefaultService
+      }]
+    });
+  });
+
+  it('should ...', inject([EndpointDefaultService], (service: EndpointService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/ui_ng/lib/src/service/endpoint.service.ts

@@ -0,0 +1,118 @@
+import { Observable } from 'rxjs/Observable';
+import { RequestQueryParams } from './RequestQueryParams';
+import { Endpoint } from './interface';
+import { Injectable } from "@angular/core";
+import 'rxjs/add/observable/of';
+
+/**
+ * Define the service methods to handle the endpoint related things.
+ * 
+ * @export
+ * @abstract
+ * @class EndpointService
+ */
+export abstract class EndpointService {
+    /**
+     * Get all the endpoints.
+     * Set the argument 'endpointName' to return only the endpoints match the name pattern.
+     * 
+     * @abstract
+     * @param {string} [endpointName]
+     * @param {RequestQueryParams} [queryParams]
+     * @returns {(Observable<Endpoint[]> | Endpoint[])}
+     * 
+     * @memberOf EndpointService
+     */
+    abstract getEndpoints(endpointName?: string, queryParams?: RequestQueryParams): Observable<Endpoint[]> | Endpoint[];
+
+    /**
+     * Get the specified endpoint.
+     * 
+     * @abstract
+     * @param {(number | string)} endpointId
+     * @returns {(Observable<Endpoint> | Endpoint)}
+     * 
+     * @memberOf EndpointService
+     */
+    abstract getEndpoint(endpointId: number | string): Observable<Endpoint> | Endpoint;
+
+    /**
+     * Create new endpoint.
+     * 
+     * @abstract
+     * @param {Endpoint} endpoint
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf EndpointService
+     */
+    abstract createEndpoint(endpoint: Endpoint): Observable<any> | any;
+
+    /**
+     * Update the specified endpoint.
+     * 
+     * @abstract
+     * @param {(number | string)} endpointId
+     * @param {Endpoint} endpoint
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf EndpointService
+     */
+    abstract updateEndpoint(endpointId: number | string, endpoint: Endpoint): Observable<any> | any;
+
+    /**
+     * Delete the specified endpoint.
+     * 
+     * @abstract
+     * @param {(number | string)} endpointId
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf EndpointService
+     */
+    abstract deleteEndpoint(endpointId: number | string): Observable<any> | any;
+
+    /**
+     * Ping the specified endpoint.
+     * 
+     * @abstract
+     * @param {Endpoint} endpoint
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf EndpointService
+     */
+    abstract pingEndpoint(endpoint: Endpoint): Observable<any> | any;
+}
+
+/**
+ * Implement default service for endpoint.
+ * 
+ * @export
+ * @class EndpointDefaultService
+ * @extends {EndpointService}
+ */
+@Injectable()
+export class EndpointDefaultService extends EndpointService {
+    public getEndpoints(endpointName?: string, queryParams?: RequestQueryParams): Observable<Endpoint[]> | Endpoint[] {
+        return Observable.of([]);
+    }
+
+    public getEndpoint(endpointId: number | string): Observable<Endpoint> | Endpoint {
+        return Observable.of({});
+    }
+
+    public createEndpoint(endpoint: Endpoint): Observable<any> | any {
+        return Observable.of({});
+    }
+
+    public updateEndpoint(endpointId: number | string, endpoint: Endpoint): Observable<any> | any {
+        return Observable.of({});
+    }
+
+    public deleteEndpoint(endpointId: number | string): Observable<any> | any {
+        return Observable.of({});
+    }
+
+    public pingEndpoint(endpoint: Endpoint): Observable<any> | any {
+        return Observable.of({});
+    }
+}
+

src/ui_ng/lib/src/service/index.ts

@@ -0,0 +1,7 @@
+export * from './interface';
+export * from './access-log.service';
+export * from './endpoint.service';
+export * from './replication.service';
+export * from './repository.service';
+export * from './tag.service';
+export * from './RequestQueryParams';

src/ui_ng/lib/src/service/interface.ts

@@ -0,0 +1,63 @@
+/**
+ * The base interface contains the general properties
+ * 
+ * @export
+ * @interface Base
+ */
+export interface Base {
+    id?: string;
+    name?: string;
+    creation_time?: Date;
+    update_time?: Date;
+}
+
+/**
+ * Interface for Repository
+ * 
+ * @export
+ * @interface Repository
+ * @extends {Base}
+ */
+export interface Repository extends Base { }
+
+/**
+ * Interface for the tag of repository
+ * 
+ * @export
+ * @interface Tag
+ * @extends {Base}
+ */
+export interface Tag extends Base { }
+
+/**
+ * Interface for registry endpoints.
+ * 
+ * @export
+ * @interface Endpoint
+ * @extends {Base}
+ */
+export interface Endpoint extends Base { }
+
+/**
+ * Interface for replication rule.
+ * 
+ * @export
+ * @interface ReplicationRule
+ */
+export interface ReplicationRule { }
+
+/**
+ * Interface for replication job.
+ * 
+ * @export
+ * @interface ReplicationJob
+ */
+export interface ReplicationJob { }
+
+/**
+ * Interface for access log.
+ * 
+ * @export
+ * @interface AccessLog
+ */
+export interface AccessLog { }

src/ui_ng/lib/src/service/replication.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ReplicationService, ReplicationDefaultService } from './replication.service';
+
+describe('ReplicationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [{
+        provide: ReplicationService,
+        useClass: ReplicationDefaultService
+      }]
+    });
+  });
+
+  it('should ...', inject([ReplicationDefaultService], (service: ReplicationService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/ui_ng/lib/src/service/replication.service.ts

@@ -0,0 +1,157 @@
+import { Observable } from 'rxjs/Observable';
+import { RequestQueryParams } from './RequestQueryParams';
+import { ReplicationJob, ReplicationRule } from './interface';
+import { Injectable } from "@angular/core";
+import 'rxjs/add/observable/of';
+
+/**
+ * Define the service methods to handle the replication (rule and job) related things.
+ * 
+ * @export
+ * @abstract
+ * @class ReplicationService
+ */
+export abstract class ReplicationService {
+    /**
+     * Get the replication rules.
+     * Set the argument 'projectId' to limit the data scope to the specified project;
+     * set the argument 'ruleName' to return the rule only match the name pattern;
+     * if pagination needed, use the queryParams to add query parameters.
+     * 
+     * @abstract
+     * @param {(number | string)} [projectId]
+     * @param {string} [ruleName]
+     * @param {RequestQueryParams} [queryParams]
+     * @returns {(Observable<ReplicationRule[]> | ReplicationRule[])}
+     * 
+     * @memberOf ReplicationService
+     */
+    abstract getReplicationRules(projectId?: number | string, ruleName?: string, queryParams?: RequestQueryParams): Observable<ReplicationRule[]> | ReplicationRule[];
+
+    /**
+     * Get the specified replication rule.
+     * 
+     * @abstract
+     * @param {(number | string)} ruleId
+     * @returns {(Observable<ReplicationRule> | ReplicationRule)}
+     * 
+     * @memberOf ReplicationService
+     */
+    abstract getReplicationRule(ruleId: number | string): Observable<ReplicationRule> | ReplicationRule;
+
+    /**
+     * Create new replication rule.
+     * 
+     * @abstract
+     * @param {ReplicationRule} replicationRule
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf ReplicationService
+     */
+    abstract createReplicationRule(replicationRule: ReplicationRule): Observable<any> | any;
+
+    /**
+     * Update the specified replication rule.
+     * 
+     * @abstract
+     * @param {ReplicationRule} replicationRule
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf ReplicationService
+     */
+    abstract updateReplicationRule(replicationRule: ReplicationRule): Observable<any> | any;
+
+    /**
+     * Delete the specified replication rule.
+     * 
+     * @abstract
+     * @param {(number | string)} ruleId
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf ReplicationService
+     */
+    abstract deleteReplicationRule(ruleId: number | string): Observable<any> | any;
+
+    /**
+     * Enable the specified replication rule.
+     * 
+     * @abstract
+     * @param {(number | string)} ruleId
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf ReplicationService
+     */
+    abstract enableReplicationRule(ruleId: number | string): Observable<any> | any;
+
+    /**
+     * Disable the specified replication rule.
+     * 
+     * @abstract
+     * @param {(number | string)} ruleId
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf ReplicationService
+     */
+    abstract disableReplicationRule(ruleId: number | string): Observable<any> | any;
+
+    /**
+     * Get the jobs for the specified replication rule.
+     * Set query parameters through 'queryParams', support:
+     *   - status
+     *   - repository
+     *   - startTime and endTime
+     *   - page
+     *   - pageSize
+     * 
+     * @abstract
+     * @param {(number | string)} ruleId
+     * @param {RequestQueryParams} [queryParams]
+     * @returns {(Observable<ReplicationJob> | ReplicationJob)}
+     * 
+     * @memberOf ReplicationService
+     */
+    abstract getJobs(ruleId: number | string, queryParams?: RequestQueryParams): Observable<ReplicationJob[]> | ReplicationJob[];
+
+}
+
+/**
+ * Implement default service for replication rule and job.
+ * 
+ * @export
+ * @class ReplicationDefaultService
+ * @extends {ReplicationService}
+ */
+@Injectable()
+export class ReplicationDefaultService extends ReplicationService {
+    public getReplicationRules(projectId?: number | string, ruleName?: string, queryParams?: RequestQueryParams): Observable<ReplicationRule[]> | ReplicationRule[] {
+        return Observable.of([]);
+    }
+
+    public getReplicationRule(ruleId: number | string): Observable<ReplicationRule> | ReplicationRule {
+        return Observable.of({});
+    }
+
+    public createReplicationRule(replicationRule: ReplicationRule): Observable<any> | any {
+        return Observable.of({});
+    }
+
+    public updateReplicationRule(replicationRule: ReplicationRule): Observable<any> | any {
+        return Observable.of({});
+    }
+
+    public deleteReplicationRule(ruleId: number | string): Observable<any> | any {
+        return Observable.of({});
+    }
+
+    public enableReplicationRule(ruleId: number | string): Observable<any> | any {
+        return Observable.of({});
+    }
+
+    public disableReplicationRule(ruleId: number | string): Observable<any> | any {
+        return Observable.of({});
+    }
+
+    public getJobs(ruleId: number | string, queryParams?: RequestQueryParams): Observable<ReplicationJob[]> | ReplicationJob[] {
+        return Observable.of([]);
+    }
+}

src/ui_ng/lib/src/service/repository.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ReplicationService, ReplicationDefaultService } from './replication.service';
+
+describe('ReplicationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [{
+        provide: ReplicationService,
+        useClass: ReplicationDefaultService
+      }]
+    });
+  });
+
+  it('should ...', inject([ReplicationDefaultService], (service: ReplicationService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/ui_ng/lib/src/service/repository.service.ts

@@ -0,0 +1,61 @@
+import { Observable } from 'rxjs/Observable';
+import { RequestQueryParams } from './RequestQueryParams';
+import { Repository } from './interface';
+import { Injectable } from "@angular/core";
+import 'rxjs/add/observable/of';
+
+/**
+ * Define service methods for handling the repository related things.
+ * Loose couple with project module.
+ * 
+ * @export
+ * @abstract
+ * @class RepositoryService
+ */
+export abstract class RepositoryService {
+    /**
+     * List all the repositories in the specified project.
+     * Specify the 'repositoryName' to only return the repositories which match the name pattern.
+     * If pagination needed, set the following parameters in queryParams:
+     *   'page': current page,
+     *   'page_size': page size.
+     * 
+     * @abstract
+     * @param {(number | string)} projectId
+     * @param {string} repositoryName
+     * @param {RequestQueryParams} [queryParams]
+     * @returns {(Observable<Repository[]> | Repository[])}
+     * 
+     * @memberOf RepositoryService
+     */
+    abstract getRepositories(projectId: number | string, repositoryName?: string, queryParams?: RequestQueryParams): Observable<Repository[]> | Repository[];
+
+    /**
+     * DELETE the specified repository.
+     * 
+     * @abstract
+     * @param {string} repositoryName
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf RepositoryService
+     */
+    abstract deleteRepository(repositoryName: string): Observable<any> | any;
+}
+
+/**
+ * Implement default service for repository.
+ * 
+ * @export
+ * @class RepositoryDefaultService
+ * @extends {RepositoryService}
+ */
+@Injectable()
+export class RepositoryDefaultService extends RepositoryService {
+    public getRepositories(projectId: number | string, repositoryName?: string, queryParams?: RequestQueryParams): Observable<Repository[]> | Repository[] {
+        return Observable.of([]);
+    }
+
+    public deleteRepository(repositoryName: string): Observable<any> | any {
+        return Observable.of({});
+    }
+}

src/ui_ng/lib/src/service/tag.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { TagService, TagDefaultService } from './tag.service';
+
+describe('TagService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [{
+        provide: TagService,
+        useClass: TagDefaultService
+      }]
+    });
+  });
+
+  it('should ...', inject([TagDefaultService], (service: TagService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/ui_ng/lib/src/service/tag.service.ts

@@ -0,0 +1,57 @@
+import { Observable } from 'rxjs/Observable';
+import { RequestQueryParams } from './RequestQueryParams';
+import { Tag } from './interface';
+import { Injectable } from "@angular/core";
+import 'rxjs/add/observable/of';
+
+/**
+ * Define the service methods to handle the repository tag related things.
+ * 
+ * @export
+ * @abstract
+ * @class TagService
+ */
+export abstract class TagService {
+    /**
+     * Get all the tags under the specified repository.
+     * NOTES: If the Notary is enabled, the signatures should be included in the returned data.
+     * 
+     * @abstract
+     * @param {string} repositoryName
+     * @param {RequestQueryParams} [queryParams]
+     * @returns {(Observable<Tag[]> | Tag[])}
+     * 
+     * @memberOf TagService
+     */
+    abstract getTags(repositoryName: string, queryParams?: RequestQueryParams): Observable<Tag[]> | Tag[];
+
+    /**
+     * Delete the specified tag.
+     * 
+     * @abstract
+     * @param {string} repositoryName
+     * @param {string} tag
+     * @returns {(Observable<any> | any)}
+     * 
+     * @memberOf TagService
+     */
+    abstract deleteTag(repositoryName: string, tag: string): Observable<any> | any;
+}
+
+/**
+ * Implement default service for tag.
+ * 
+ * @export
+ * @class TagDefaultService
+ * @extends {TagService}
+ */
+@Injectable()
+export class TagDefaultService extends TagService {
+    public getTags(repositoryName: string, queryParams?: RequestQueryParams): Observable<Tag[]> | Tag[] {
+        return Observable.of([]);
+    }
+
+    public deleteTag(repositoryName: string, tag: string): Observable<any> | any {
+        return Observable.of({});
+    }
+}

src/ui_ng/lib/src/system/index.ts

@@ -0,0 +1,8 @@
+import {Type} from "@angular/core";
+import { SystemComponent } from './system.component';
+
+export * from "./system.component";
+
+export const SYSTEMINFO_DIRECTIVES: Type<any>[] = [
+    SystemComponent
+];

src/ui_ng/lib/src/system/providers/system-info.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SystemInfoService } from './system-info.service';
+
+describe('SysteninfoService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SystemInfoService]
+    });
+  });
+
+  it('should ...', inject([SystemInfoService], (service: SystemInfoService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/ui_ng/lib/src/system/providers/system-info.service.ts

@@ -0,0 +1,29 @@
+import { Injectable, Inject } from '@angular/core';
+import { Http, RequestOptions, Headers } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+
+import { SERVICE_CONFIG, IServiceConfig } from '../../service.config';
+
+@Injectable()
+export class SystemInfoService {
+  httpOptions = new RequestOptions({
+    headers: new Headers({
+      "Content-Type": 'application/json'
+    })
+  });
+
+  constructor(
+    private http: Http,
+    @Inject(SERVICE_CONFIG) private config: IServiceConfig) { }
+
+  getSystemInfo(): Promise<any> {
+    if(this.config.systemInfoEndpoint.trim() === "") {
+      return Promise.reject("500: Internal error");
+    }
+
+    return this.http.get(this.config.systemInfoEndpoint, this.httpOptions).toPromise()
+    .then(response => response.json())
+    .catch(error => console.error("Get systeminfo error: ", error));
+  }
+
+}

src/ui_ng/lib/src/system/system.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SystemComponent } from './system.component';
+
+describe('SystemComponent', () => {
+  let component: SystemComponent;
+  let fixture: ComponentFixture<SystemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SystemComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SystemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/ui_ng/lib/src/system/system.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { SystemInfoService } from './providers/system-info.service';
+
+@Component({
+  selector: 'hbr-system',
+  template: `
+    <pre>
+      {{info}}
+    </pre>
+  `,
+  styles: [],
+  providers: [SystemInfoService]
+})
+
+export class SystemComponent implements OnInit {
+  _systemInfo: string = "Loading...";
+
+  constructor(private systemService: SystemInfoService) { }
+
+  public get info(): string {
+    return this._systemInfo;
+  }
+
+  ngOnInit() {
+    this.getInfo();
+  }
+
+  getInfo(): void {
+    this.systemService.getSystemInfo()
+    .then((res: any) => this._systemInfo = JSON.stringify(res))
+    .catch(error => console.error("Retrieve system info error: ", error));
+  }
+
+}

src/ui_ng/lib/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "declaration": true,
+        "stripInternal": true,
+        "experimentalDecorators": true,
+        "strictNullChecks": true,
+        "noImplicitAny": true,
+        "module": "es2015",
+        "moduleResolution": "node",
+        "paths": {
+            "@angular/core": ["node_modules/@angular/core"],
+            "rxjs/*": ["node_modules/rxjs/*"]
+        },
+        "rootDir": ".",
+        "outDir": "dist",
+        "sourceMap": true,
+        "inlineSources": true,
+        "target": "es5",
+        "skipLibCheck": true,
+        "lib": [
+            "es2015",
+            "dom"
+        ]
+    },
+    "files": [
+        "index.ts"
+    ],
+    "angularCompilerOptions": {
+        "strictMetadataEmit": true
+    }
+}

src/ui_ng/lib/tslint.json

@@ -0,0 +1,114 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-unused-variable": true,
+    "no-unreachable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector-prefix": [true, "app"],
+    "component-selector-prefix": [true, "app"],
+    "directive-selector-name": [true, "camelCase"],
+    "component-selector-name": [true, "kebab-case"],
+    "directive-selector-type": [true, "attribute"],
+    "component-selector-type": [true, "element"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}

src/ui_ng/lib/typings.json

@@ -0,0 +1,5 @@
+{
+    "globalDependencies": {
+        "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"
+    }
+}