Merge pull request #7844 from jwangyangls/http_to_httpClient

Change http to httpClient of all Api in harbor

src/portal/lib/src/app.module.ts

@@ -2,7 +2,6 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
 import { ClarityModule } from '@clr/angular';
 import { HarborLibraryModule } from './harbor-library.module';
 
@@ -12,7 +11,6 @@ import { HarborLibraryModule } from './harbor-library.module';
         BrowserAnimationsModule,
         BrowserModule,
         FormsModule,
-        HttpModule,
         ClarityModule,
         HarborLibraryModule.forRoot()
     ],

src/portal/lib/src/config/gc/gc.api.repository.ts

@@ -1,6 +1,6 @@
 
 import { Injectable, Inject } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { throwError as observableThrowError, Observable } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { SERVICE_CONFIG, IServiceConfig } from "../../service.config";
@@ -24,7 +24,7 @@ export abstract class GcApiRepository {
 @Injectable()
 export class GcApiDefaultRepository extends GcApiRepository {
     constructor(
-        private http: Http,
+        private http: HttpClient,
         @Inject(SERVICE_CONFIG) private config: IServiceConfig
     ) {
         super();
@@ -42,8 +42,7 @@ export class GcApiDefaultRepository extends GcApiRepository {
 
     public getSchedule(): Observable<any> {
         return this.http.get(`${this.config.gcEndpoint}/schedule`)
-            .pipe(catchError(error => observableThrowError(error)))
+            .pipe(catchError(error => observableThrowError(error)));
-            .pipe(map(response => response.json()));
     }
 
     public getLog(id): Observable<any> {
@@ -53,14 +52,12 @@ export class GcApiDefaultRepository extends GcApiRepository {
 
     public getStatus(id): Observable<any> {
         return this.http.get(`${this.config.gcEndpoint}/id`)
-            .pipe(catchError(error => observableThrowError(error)))
+            .pipe(catchError(error => observableThrowError(error)));
-            .pipe(map(response => response.json()));
     }
 
     public getJobs(): Observable<any> {
         return this.http.get(`${this.config.gcEndpoint}`)
-            .pipe(catchError(error => observableThrowError(error)))
+            .pipe(catchError(error => observableThrowError(error)));
-            .pipe(map(response => response.json()));
     }
 
     public getLogLink(id) {

src/portal/lib/src/config/gc/gc.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
 import { Observable, Subscription, Subject, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { GcApiRepository } from './gc.api.repository';
@@ -10,7 +9,7 @@ import { GcJobData } from './gcLog';
 @Injectable()
 export class GcRepoService {
 
-    constructor(private http: Http,
+    constructor(
         private gcApiRepository: GcApiRepository,
         private errorHandler: ErrorHandler) {
     }

src/portal/lib/src/config/vulnerability/scanAll.api.repository.ts

@@ -1,6 +1,6 @@
 
 import { Injectable, Inject } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { throwError as observableThrowError, Observable } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { SERVICE_CONFIG, IServiceConfig } from "../../service.config";
@@ -17,7 +17,7 @@ export abstract class ScanApiRepository {
 @Injectable()
 export class ScanApiDefaultRepository extends ScanApiRepository {
     constructor(
-        private http: Http,
+        private http: HttpClient,
         @Inject(SERVICE_CONFIG) private config: IServiceConfig
     ) {
         super();
@@ -35,8 +35,7 @@ export class ScanApiDefaultRepository extends ScanApiRepository {
 
     public getSchedule(): Observable<any> {
         return this.http.get(`${this.config.ScanAllEndpoint}/schedule`)
-            .pipe(catchError(error => observableThrowError(error)))
+            .pipe(catchError(error => observableThrowError(error)));
-            .pipe(map(response => response.json()));
     }
 
 }

src/portal/lib/src/config/vulnerability/scanAll.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
 import { Observable } from 'rxjs';
 import { ScanApiRepository } from './scanAll.api.repository';
 import { ErrorHandler } from '../../error-handler/index';
@@ -8,7 +7,7 @@ import { ErrorHandler } from '../../error-handler/index';
 @Injectable()
 export class ScanAllRepoService {
 
-    constructor(private http: Http,
+    constructor(
         private scanApiRepository: ScanApiRepository,
         private errorHandler: ErrorHandler) {
     }

src/portal/lib/src/log/recent-log.component.ts

@@ -119,11 +119,9 @@ export class RecentLogComponent implements OnInit {
         let pageNumber: number = calculatePage(state);
         if (pageNumber !== this.currentPagePvt) {
             // load data
-            let params: RequestQueryParams = new RequestQueryParams();
+            let params: RequestQueryParams = new RequestQueryParams().set("page", '' + pageNumber).set("page_size", '' + this.pageSize);
-            params.set("page", '' + pageNumber);
-            params.set("page_size", '' + this.pageSize);
             if (this.currentTerm && this.currentTerm !== "") {
-                params.set(this.defaultFilter, this.currentTerm);
+                params = params.set(this.defaultFilter, this.currentTerm);
             }
 
             this.loading = true;

src/portal/lib/src/replication/replication-tasks/replication-tasks.component.ts

@@ -140,7 +140,7 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
       this.loading = true;
       let params: RequestQueryParams = new RequestQueryParams();
       if (this.searchTask && this.searchTask !== "") {
-        params.set(this.defaultFilter, this.searchTask);
+        params = params.set(this.defaultFilter, this.searchTask);
       }
       this.replicationService.getReplicationTasks(this.executionId, params)
       .pipe(finalize(() => (this.loading = false)))

src/portal/lib/src/replication/replication.component.ts

@@ -201,13 +201,10 @@ export class ReplicationComponent implements OnInit, OnDestroy {
       pageNumber = 1;
     }
 
-    let params: RequestQueryParams = new RequestQueryParams();
+    let params: RequestQueryParams = new RequestQueryParams().set("page", "" + pageNumber).set("page_size", "" + this.pageSize);
-    // Pagination
-    params.set("page", "" + pageNumber);
-    params.set("page_size", "" + this.pageSize);
 
     if (this.currentTerm && this.currentTerm !== "") {
-      params.set(this.defaultFilter, this.currentTerm);
+      params = params.set(this.defaultFilter, this.currentTerm);
     }
 
     this.jobsLoading = true;

src/portal/lib/src/repository-gridview/repository-gridview.component.ts

@@ -348,9 +348,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
     loadNextPage() {
         this.currentPage = this.currentPage + 1;
         // Pagination
-        let params: RequestQueryParams = new RequestQueryParams();
+        let params: RequestQueryParams = new RequestQueryParams().set("page", "" + this.currentPage).set("page_size", "" + this.pageSize);
-        params.set("page", "" + this.currentPage);
-        params.set("page_size", "" + this.pageSize);
 
         this.loading = true;
         this.repositoryService.getRepositories(
@@ -395,9 +393,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
         }
 
         // Pagination
-        let params: RequestQueryParams = new RequestQueryParams();
+        let params: RequestQueryParams = new RequestQueryParams().set("page", "" + pageNumber).set("page_size", "" + this.pageSize);
-        params.set("page", "" + pageNumber);
-        params.set("page_size", "" + this.pageSize);
 
         this.loading = true;
 

src/portal/lib/src/service/RequestQueryParams.ts

@@ -1,4 +1,4 @@
-import { URLSearchParams } from "@angular/http";
+import { HttpParams } from "@angular/common/http";
 
 /**
  * Wrap the class 'URLSearchParams' for future extending requirements.
@@ -8,7 +8,7 @@ import { URLSearchParams } from "@angular/http";
  * class RequestQueryParams
  * extends {URLSearchParams}
  */
-export class RequestQueryParams extends URLSearchParams {
+export class RequestQueryParams extends HttpParams {
   constructor() {
     super();
   }

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

@@ -3,8 +3,8 @@ import { RequestQueryParams } from "./RequestQueryParams";
 import { AccessLog, AccessLogItem } from "./interface";
 import { Injectable, Inject } from "@angular/core";
 import { SERVICE_CONFIG, IServiceConfig } from "../service.config";
-import { Http } from "@angular/http";
+import { HttpClient, HttpResponse } from "@angular/common/http";
-import { buildHttpRequestOptions, HTTP_GET_OPTIONS } from "../utils";
+import { buildHttpRequestOptionsWithObserveResponse, HTTP_GET_OPTIONS_OBSERVE_RESPONSE } from "../utils";
 import { map, catchError } from "rxjs/operators";
 
 /**
@@ -57,7 +57,7 @@ export abstract class AccessLogService {
 @Injectable()
 export class AccessLogDefaultService extends AccessLogService {
   constructor(
-    private http: Http,
+    private http: HttpClient,
     @Inject(SERVICE_CONFIG) private config: IServiceConfig
   ) {
     super();
@@ -81,9 +81,9 @@ export class AccessLogDefaultService extends AccessLogService {
     }
 
     return this.http
-      .get(
+      .get<HttpResponse<AccessLogItem[]>>(
         url,
-        queryParams ? buildHttpRequestOptions(queryParams) : HTTP_GET_OPTIONS
+        queryParams ? buildHttpRequestOptionsWithObserveResponse(queryParams) : HTTP_GET_OPTIONS_OBSERVE_RESPONSE
       )
       .pipe(map(response => {
         let result: AccessLog = {
@@ -100,7 +100,7 @@ export class AccessLogDefaultService extends AccessLogService {
         if (result && result.metadata) {
           result.metadata.xTotalCount = parseInt(xHeader ? xHeader : "0", 0);
           if (result.metadata.xTotalCount > 0) {
-            result.data = response.json() as AccessLogItem[];
+            result.data = response.body as AccessLogItem[];
           }
         }
 

src/portal/lib/src/service/configuration.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, Inject } from "@angular/core";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
@@ -44,7 +44,7 @@ export class ConfigurationDefaultService extends ConfigurationService {
   _baseUrl: string;
 
   constructor(
-    private http: Http,
+    private http: HttpClient,
     @Inject(SERVICE_CONFIG) private config: IServiceConfig
   ) {
     super();
@@ -59,7 +59,7 @@ export class ConfigurationDefaultService extends ConfigurationService {
     | Observable<Configuration> {
     return this.http
       .get(this._baseUrl, HTTP_GET_OPTIONS)
-      .pipe(map(response => response.json() as Configuration)
+      .pipe(map(response => response as Configuration)
       , catchError(error => observableThrowError(error)));
   }
 

src/portal/lib/src/service/endpoint.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, Inject } from "@angular/core";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
 import { IServiceConfig, SERVICE_CONFIG } from "../service.config";
@@ -140,7 +140,7 @@ export class EndpointDefaultService extends EndpointService {
 
   constructor(
     @Inject(SERVICE_CONFIG) config: IServiceConfig,
-    private http: Http
+    private http: HttpClient
   ) {
     super();
     this._endpointUrl = config.targetBaseEndpoint
@@ -156,12 +156,12 @@ export class EndpointDefaultService extends EndpointService {
       queryParams = new RequestQueryParams();
     }
     if (endpointName) {
-      queryParams.set("name", endpointName);
+      queryParams = queryParams.set("name", endpointName);
     }
     let requestUrl: string = `${this._endpointUrl}`;
     return this.http
       .get(requestUrl, buildHttpRequestOptions(queryParams))
-      .pipe(map(response => response.json())
+      .pipe(map(response => response as Endpoint[])
       , catchError(error => observableThrowError(error)));
   }
 
@@ -174,15 +174,14 @@ export class EndpointDefaultService extends EndpointService {
     let requestUrl: string = `${this._endpointUrl}/${endpointId}`;
     return this.http
       .get(requestUrl, HTTP_GET_OPTIONS)
-      .pipe(map(response => response.json() as Endpoint)
+      .pipe(map(response => response as Endpoint)
       , catchError(error => observableThrowError(error)));
   }
 
   public getAdapters(): Observable<any> {
     return this.http
     .get(`/api/replication/adapters`)
-    .pipe(map(response => response.json())
+    .pipe(catchError(error => observableThrowError(error)));
-    , catchError(error => observableThrowError(error)));
 }
 
   public createEndpoint(
@@ -193,9 +192,8 @@ export class EndpointDefaultService extends EndpointService {
     }
     let requestUrl: string = `${this._endpointUrl}`;
     return this.http
-      .post(requestUrl, JSON.stringify(endpoint), HTTP_JSON_OPTIONS)
+      .post<any>(requestUrl, JSON.stringify(endpoint), HTTP_JSON_OPTIONS)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   public updateEndpoint(
@@ -210,9 +208,8 @@ export class EndpointDefaultService extends EndpointService {
     }
     let requestUrl: string = `${this._endpointUrl}/${endpointId}`;
     return this.http
-      .put(requestUrl, JSON.stringify(endpoint), HTTP_JSON_OPTIONS)
+      .put<any>(requestUrl, JSON.stringify(endpoint), HTTP_JSON_OPTIONS)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   public deleteEndpoint(
@@ -223,9 +220,8 @@ export class EndpointDefaultService extends EndpointService {
     }
     let requestUrl: string = `${this._endpointUrl}/${endpointId}`;
     return this.http
-      .delete(requestUrl)
+      .delete<any>(requestUrl)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   public pingEndpoint(
@@ -236,9 +232,8 @@ export class EndpointDefaultService extends EndpointService {
     }
     let requestUrl: string = `${this._endpointUrl}/ping`;
     return this.http
-      .post(requestUrl, endpoint, HTTP_JSON_OPTIONS)
+      .post<any>(requestUrl, endpoint, HTTP_JSON_OPTIONS)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   public getEndpointWithReplicationRules(
@@ -250,7 +245,7 @@ export class EndpointDefaultService extends EndpointService {
     let requestUrl: string = `${this._endpointUrl}/${endpointId}/policies`;
     return this.http
       .get(requestUrl, HTTP_GET_OPTIONS)
-      .pipe(map(response => response.json() as ReplicationRule[])
+      .pipe(map(response => response as ReplicationRule[])
       , catchError(error => observableThrowError(error)));
   }
 }

src/portal/lib/src/service/interface.ts

@@ -1,6 +1,7 @@
 import { Project } from "../project-policy-config/project";
 import { Observable } from 'rxjs';
 import { ClrModal } from '@clr/angular';
+import { HttpHeaders, HttpParams } from '@angular/common/http';
 
 /**
  * The base interface contains the general properties
@@ -407,3 +408,29 @@ export class OriginCron {
   cron: string;
 }
 
+export interface  HttpOptionInterface {
+  headers?: HttpHeaders | {
+      [header: string]: string | string[];
+  };
+  observe?: 'body';
+  params?: HttpParams | {
+      [param: string]: string | string[];
+  };
+  reportProgress?: boolean;
+  responseType: 'json';
+  withCredentials?: boolean;
+}
+
+export interface  HttpOptionTextInterface {
+  headers?: HttpHeaders | {
+      [header: string]: string | string[];
+  };
+  observe?: 'body';
+  params?: HttpParams | {
+      [param: string]: string | string[];
+  };
+  reportProgress?: boolean;
+  responseType: 'text';
+  withCredentials?: boolean;
+}
+

src/portal/lib/src/service/job-log.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, Inject } from "@angular/core";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { SERVICE_CONFIG, IServiceConfig } from "../service.config";
-import { HTTP_GET_OPTIONS } from "../utils";
+import { HTTP_GET_OPTIONS, HTTP_GET_OPTIONS_TEXT } from "../utils";
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 /**
@@ -43,7 +43,7 @@ export class JobLogDefaultService extends JobLogService {
   _supportedJobTypes: string[];
 
   constructor(
-    private http: Http,
+    private http: HttpClient,
     @Inject(SERVICE_CONFIG) config: IServiceConfig
   ) {
     super();
@@ -58,8 +58,8 @@ export class JobLogDefaultService extends JobLogService {
 
   _getJobLog(logUrl: string): Observable<string> {
     return this.http
-      .get(logUrl, HTTP_GET_OPTIONS)
+      .get(logUrl, HTTP_GET_OPTIONS_TEXT)
-      .pipe(map(response => response.text())
+      .pipe(map(response => response)
       , catchError(error => observableThrowError(error)));
   }
 

src/portal/lib/src/service/label.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from "@angular/core";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { map, catchError} from "rxjs/operators";
 
 import { RequestQueryParams } from "./RequestQueryParams";
@@ -7,7 +7,6 @@ import { Label } from "./interface";
 
 import { IServiceConfig, SERVICE_CONFIG } from "../service.config";
 import { buildHttpRequestOptions, HTTP_JSON_OPTIONS } from "../utils";
-import { extractJson } from "../shared/shared.utils";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
 export abstract class LabelService {
@@ -76,7 +75,7 @@ export class LabelDefaultService extends LabelService {
 
   constructor(
     @Inject(SERVICE_CONFIG) config: IServiceConfig,
-    private http: Http
+    private http: HttpClient
   ) {
     super();
     this.labelUrl = config.labelEndpoint ? config.labelEndpoint : "/api/labels";
@@ -91,15 +90,14 @@ export class LabelDefaultService extends LabelService {
     if (!queryParams) {
       queryParams = new RequestQueryParams();
     }
-    queryParams.set("scope", "g");
+    queryParams = queryParams.set("scope", "g");
 
     if (name) {
-      queryParams.set("name", "" + name);
+      queryParams = queryParams.set("name", "" + name);
     }
     return this.http
-      .get(this.labelUrl, buildHttpRequestOptions(queryParams))
+      .get<Label[]>(this.labelUrl, buildHttpRequestOptions(queryParams))
-      .pipe(map(response => response.json())
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   getPLabels(
@@ -110,17 +108,16 @@ export class LabelDefaultService extends LabelService {
     if (!queryParams) {
       queryParams = new RequestQueryParams();
     }
-    queryParams.set("scope", "p");
+    queryParams = queryParams.set("scope", "p");
     if (projectId) {
-      queryParams.set("project_id", "" + projectId);
+      queryParams = queryParams.set("project_id", "" + projectId);
     }
     if (name) {
-      queryParams.set("name", "" + name);
+      queryParams = queryParams.set("name", "" + name);
     }
     return this.http
-      .get(this.labelUrl, buildHttpRequestOptions(queryParams))
+      .get<Label[]>(this.labelUrl, buildHttpRequestOptions(queryParams))
-      .pipe(map(response => response.json())
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   getProjectLabels(
@@ -131,15 +128,14 @@ export class LabelDefaultService extends LabelService {
     if (!queryParams) {
       queryParams = new RequestQueryParams();
     }
-    queryParams.set("scope", "p");
+    queryParams = queryParams.set("scope", "p");
     if (projectId) {
-      queryParams.set("project_id", "" + projectId);
+      queryParams = queryParams.set("project_id", "" + projectId);
     }
     if (name) {
-      queryParams.set("name", "" + name);
+      queryParams = queryParams.set("name", "" + name);
     }
-    return this.http.get(this.labelUrl, buildHttpRequestOptions(queryParams))
+    return this.http.get<Label[]>(this.labelUrl, buildHttpRequestOptions(queryParams));
-    .pipe(map( res => extractJson(res)));
   }
 
   getLabels(
@@ -149,20 +145,19 @@ export class LabelDefaultService extends LabelService {
     queryParams?: RequestQueryParams
   ): Observable<Label[]> {
     if (!queryParams) {
-      queryParams = new RequestQueryParams();
+      queryParams = queryParams = new RequestQueryParams();
     }
     if (scope) {
-      queryParams.set("scope", scope);
+      queryParams = queryParams.set("scope", scope);
     }
     if (projectId) {
-      queryParams.set("project_id", "" + projectId);
+      queryParams = queryParams.set("project_id", "" + projectId);
     }
     if (name) {
-      queryParams.set("name", "" + name);
+      queryParams = queryParams.set("name", "" + name);
     }
     return this.http
-      .get(this.labelUrl, buildHttpRequestOptions(queryParams))
+      .get<Label[]>(this.labelUrl, buildHttpRequestOptions(queryParams))
-      .pipe(map(response => response.json()))
       .pipe(catchError(error => observableThrowError(error)));
   }
 
@@ -171,9 +166,8 @@ export class LabelDefaultService extends LabelService {
       return observableThrowError("Invalid label.");
     }
     return this.http
-      .post(this.labelUrl, JSON.stringify(label), HTTP_JSON_OPTIONS)
+      .post<any>(this.labelUrl, JSON.stringify(label), HTTP_JSON_OPTIONS)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   getLabel(id: number): Observable<Label> {
@@ -182,9 +176,8 @@ export class LabelDefaultService extends LabelService {
     }
     let reqUrl = `${this.labelUrl}/${id}`;
     return this.http
-      .get(reqUrl, HTTP_JSON_OPTIONS)
+      .get<Label>(reqUrl, HTTP_JSON_OPTIONS)
-      .pipe(map(response => response.json())
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   updateLabel(id: number, label: Label): Observable<any> {
@@ -196,9 +189,8 @@ export class LabelDefaultService extends LabelService {
     }
     let reqUrl = `${this.labelUrl}/${id}`;
     return this.http
-      .put(reqUrl, JSON.stringify(label), HTTP_JSON_OPTIONS)
+      .put<any>(reqUrl, JSON.stringify(label), HTTP_JSON_OPTIONS)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   deleteLabel(id: number): Observable<any> {
@@ -207,9 +199,8 @@ export class LabelDefaultService extends LabelService {
     }
     let reqUrl = `${this.labelUrl}/${id}`;
     return this.http
-      .delete(reqUrl)
+      .delete<any>(reqUrl)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   getChartVersionLabels(
@@ -217,8 +208,7 @@ export class LabelDefaultService extends LabelService {
     chartName: string,
     version: string
   ): Observable<Label[]> {
-    return this.http.get(`${this.chartUrl}/${projectName}/charts/${chartName}/${version}/labels`)
+    return this.http.get<Label[]>(`${this.chartUrl}/${projectName}/charts/${chartName}/${version}/labels`);
-    .pipe(map(res => extractJson(res)));
   }
 
   markChartLabel(
@@ -228,8 +218,7 @@ export class LabelDefaultService extends LabelService {
     label: Label,
   ): Observable<any> {
     return this.http.post(`${this.chartUrl}/${projectName}/charts/${chartName}/${version}/labels`,
-    JSON.stringify(label), HTTP_JSON_OPTIONS)
+    JSON.stringify(label), HTTP_JSON_OPTIONS);
-    .pipe(map(res => extractJson(res)));
   }
 
   unmarkChartLabel(
@@ -238,8 +227,7 @@ export class LabelDefaultService extends LabelService {
     version: string,
     label: Label,
   ): Observable<any> {
-    return this.http.delete(`${this.chartUrl}/${projectName}/charts/${chartName}/${version}/labels/${label.id}`, HTTP_JSON_OPTIONS)
+    return this.http.delete(`${this.chartUrl}/${projectName}/charts/${chartName}/${version}/labels/${label.id}`, HTTP_JSON_OPTIONS);
-    .pipe(map(res => extractJson(res)));
   }
 
 }

src/portal/lib/src/service/project.service.ts

@@ -1,7 +1,7 @@
 
 import {throwError as observableThrowError,  Observable } from "rxjs";
 import { Injectable, Inject } from "@angular/core";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { map ,  catchError } from "rxjs/operators";
 
 import { SERVICE_CONFIG, IServiceConfig } from "../service.config";
@@ -80,7 +80,7 @@ export abstract class ProjectService {
 @Injectable()
 export class ProjectDefaultService extends ProjectService {
   constructor(
-    private http: Http,
+    private http: HttpClient,
     @Inject(SERVICE_CONFIG) private config: IServiceConfig
   ) {
     super();
@@ -96,8 +96,7 @@ export class ProjectDefaultService extends ProjectService {
       ? this.config.projectBaseEndpoint
       : "/api/projects";
     return this.http
-      .get(`${baseUrl}/${projectId}`, HTTP_GET_OPTIONS)
+      .get<Project>(`${baseUrl}/${projectId}`, HTTP_GET_OPTIONS)
-      .pipe(map(response => response.json()))
       .pipe(catchError(error => observableThrowError(error)));
   }
 
@@ -112,20 +111,18 @@ export class ProjectDefaultService extends ProjectService {
       : "/api/projects";
     let params = new RequestQueryParams();
     if (page && pageSize) {
-      params.set("page", page + "");
+      params = params.set("page", page + "").set("page_size", pageSize + "");
-      params.set("page_size", pageSize + "");
     }
     if (name && name.trim() !== "") {
-      params.set("name", name);
+      params = params.set("name", name);
     }
     if (isPublic !== undefined) {
-      params.set("public", "" + isPublic);
+      params = params.set("public", "" + isPublic);
     }
 
     // let options = new RequestOptions({ headers: this.getHeaders, search: params });
     return this.http
-      .get(baseUrl, buildHttpRequestOptions(params))
+      .get<Project[]>(baseUrl, buildHttpRequestOptions(params))
-      .pipe(map(response => response.json()))
       .pipe(catchError(error => observableThrowError(error)));
   }
 
@@ -137,7 +134,7 @@ export class ProjectDefaultService extends ProjectService {
       ? this.config.projectBaseEndpoint
       : "/api/projects";
     return this.http
-      .put(
+      .put<any>(
         `${baseUrl}/${projectId}`,
         {
           metadata: {
@@ -150,7 +147,6 @@ export class ProjectDefaultService extends ProjectService {
         },
         HTTP_JSON_OPTIONS
       )
-      .pipe(map(response => response.status))
       .pipe(catchError(error => observableThrowError(error)));
   }
 }

src/portal/lib/src/service/replication.service.ts

@@ -1,10 +1,12 @@
-import { Http } from "@angular/http";
+import { HttpClient, HttpResponse } from "@angular/common/http";
 import { Injectable, Inject } from "@angular/core";
 import { SERVICE_CONFIG, IServiceConfig } from "../service.config";
 import {
   buildHttpRequestOptions,
   HTTP_JSON_OPTIONS,
-  HTTP_GET_OPTIONS
+  HTTP_GET_OPTIONS,
+  buildHttpRequestOptionsWithObserveResponse,
+  HTTP_GET_OPTIONS_OBSERVE_RESPONSE
 } from "../utils";
 import {
   ReplicationJob,
@@ -211,7 +213,7 @@ export class ReplicationDefaultService extends ReplicationService {
   _baseUrl: string;
 
   constructor(
-    private http: Http,
+    private http: HttpClient,
     @Inject(SERVICE_CONFIG) config: IServiceConfig
   ) {
     super();
@@ -240,8 +242,7 @@ export class ReplicationDefaultService extends ReplicationService {
     let requestUrl: string = `${this._baseUrl}/registries/${id}/info`;
     return this.http
       .get(requestUrl)
-      .pipe(map(response => response.json())
+      .pipe(catchError(error => observableThrowError(error)));
-        , catchError(error => observableThrowError(error)));
   }
 
   public getJobBaseUrl() {
@@ -255,20 +256,20 @@ export class ReplicationDefaultService extends ReplicationService {
   ):
     | Observable<ReplicationRule[]> {
     if (!queryParams) {
-      queryParams = new RequestQueryParams();
+      queryParams = queryParams = new RequestQueryParams();
     }
 
     if (projectId) {
-      queryParams.set("project_id", "" + projectId);
+      queryParams = queryParams.set("project_id", "" + projectId);
     }
 
     if (ruleName) {
-      queryParams.set("name", ruleName);
+      queryParams = queryParams.set("name", ruleName);
     }
 
     return this.http
       .get(this._ruleBaseUrl, buildHttpRequestOptions(queryParams))
-      .pipe(map(response => response.json() as ReplicationRule[])
+      .pipe(map(response => response as ReplicationRule[])
         , catchError(error => observableThrowError(error)));
   }
 
@@ -282,7 +283,7 @@ export class ReplicationDefaultService extends ReplicationService {
     let url: string = `${this._ruleBaseUrl}/${ruleId}`;
     return this.http
       .get(url, HTTP_GET_OPTIONS)
-      .pipe(map(response => response.json() as ReplicationRule)
+      .pipe(map(response => response as ReplicationRule)
         , catchError(error => observableThrowError(error)));
   }
 
@@ -297,7 +298,7 @@ export class ReplicationDefaultService extends ReplicationService {
     return this.http
       .get(url,
         queryParams ? buildHttpRequestOptions(queryParams) : HTTP_GET_OPTIONS)
-      .pipe(map(response => response.json() as ReplicationTasks)
+      .pipe(map(response => response as ReplicationTasks)
         , catchError(error => observableThrowError(error)));
   }
 
@@ -402,9 +403,9 @@ export class ReplicationDefaultService extends ReplicationService {
       queryParams = new RequestQueryParams();
     }
     let url: string = `${this._replicateUrl}/executions`;
-    queryParams.set("policy_id", "" + ruleId);
+    queryParams = queryParams.set("policy_id", "" + ruleId);
     return this.http
-      .get(url, buildHttpRequestOptions(queryParams))
+      .get<HttpResponse<ReplicationJobItem[]>>(url, buildHttpRequestOptionsWithObserveResponse(queryParams))
       .pipe(map(response => {
         let result: ReplicationJob = {
           metadata: {
@@ -419,7 +420,7 @@ export class ReplicationDefaultService extends ReplicationService {
             result.metadata.xTotalCount = parseInt(xHeader, 0);
           }
         }
-        result.data = response.json() as ReplicationJobItem[];
+        result.data = response.body as ReplicationJobItem[];
         if (result.metadata.xTotalCount === 0) {
           if (result.data && result.data.length > 0) {
             result.metadata.xTotalCount = result.data.length;
@@ -439,7 +440,7 @@ export class ReplicationDefaultService extends ReplicationService {
     }
     let requestUrl: string = `${this._replicateUrl}/executions/${executionId}`;
     return this.http
-      .get(requestUrl, HTTP_GET_OPTIONS)
+      .get<HttpResponse<ReplicationJobItem[]>>(requestUrl, HTTP_GET_OPTIONS_OBSERVE_RESPONSE)
       .pipe(map(response => {
         let result: ReplicationJob = {
           metadata: {
@@ -454,7 +455,7 @@ export class ReplicationDefaultService extends ReplicationService {
             result.metadata.xTotalCount = parseInt(xHeader, 0);
           }
         }
-        result.data = response.json() as ReplicationJobItem[];
+        result.data = response.body as ReplicationJobItem[];
         if (result.metadata.xTotalCount === 0) {
           if (result.data && result.data.length > 0) {
             result.metadata.xTotalCount = result.data.length;
@@ -475,9 +476,8 @@ export class ReplicationDefaultService extends ReplicationService {
 
     let logUrl = `${this._replicateUrl}/${jobId}/log`;
     return this.http
-      .get(logUrl, HTTP_GET_OPTIONS)
+      .get<string>(logUrl, HTTP_GET_OPTIONS)
-      .pipe(map(response => response.text())
+      .pipe(catchError(error => observableThrowError(error)));
-        , catchError(error => observableThrowError(error)));
   }
 
   public stopJobs(

src/portal/lib/src/service/repository.service.ts

@@ -2,9 +2,9 @@ import { RequestQueryParams } from './RequestQueryParams';
 import { Repository, RepositoryItem } from './interface';
 import { Injectable, Inject } from '@angular/core';
 
-import { Http } from '@angular/http';
+import { HttpClient, HttpResponse } from '@angular/common/http';
 import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
-import { buildHttpRequestOptions, HTTP_JSON_OPTIONS } from '../utils';
+import { buildHttpRequestOptions, buildHttpRequestOptionsWithObserveResponse, HTTP_JSON_OPTIONS } from '../utils';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
@@ -33,7 +33,7 @@ export abstract class RepositoryService {
      * @memberOf RepositoryService
      */
     abstract getRepositories(projectId: number | string, repositoryName?: string, queryParams?: RequestQueryParams):
-    Observable<Repository>;
+        Observable<Repository>;
 
     /**
      * Update description of specified repository.
@@ -69,14 +69,13 @@ export abstract class RepositoryService {
 @Injectable()
 export class RepositoryDefaultService extends RepositoryService {
     constructor(
-        private http: Http,
+        private http: HttpClient,
         @Inject(SERVICE_CONFIG) private config: IServiceConfig
     ) {
         super();
     }
-
     public getRepositories(projectId: number | string, repositoryName?: string, queryParams?: RequestQueryParams):
-    Observable<Repository> {
+        Observable<Repository> {
         if (!projectId) {
             return observableThrowError('Bad argument');
         }
@@ -85,13 +84,12 @@ export class RepositoryDefaultService extends RepositoryService {
             queryParams = new RequestQueryParams();
         }
 
-        queryParams.set('project_id', '' + projectId);
+        queryParams = queryParams.set('project_id', '' + projectId);
         if (repositoryName && repositoryName.trim() !== '') {
-            queryParams.set('q', repositoryName);
+            queryParams = queryParams.set('q', repositoryName);
         }
-
         let url: string = this.config.repositoryBaseEndpoint ? this.config.repositoryBaseEndpoint : '/api/repositories';
-        return this.http.get(url, buildHttpRequestOptions(queryParams))
+        return this.http.get<HttpResponse<RepositoryItem[]>>(url, buildHttpRequestOptionsWithObserveResponse(queryParams))
             .pipe(map(response => {
                 let result: Repository = {
                     metadata: { xTotalCount: 0 },
@@ -105,7 +103,7 @@ export class RepositoryDefaultService extends RepositoryService {
                     }
                 }
 
-                result.data = response.json() as RepositoryItem[];
+                result.data = response.body as RepositoryItem[];
 
                 if (result.metadata.xTotalCount === 0) {
                     if (result.data && result.data.length > 0) {
@@ -115,11 +113,13 @@ export class RepositoryDefaultService extends RepositoryService {
 
                 return result;
             })
-            , catchError(error => observableThrowError(error)));
+                , catchError(error => {
+                    return observableThrowError(error);
+                }));
     }
 
     public updateRepositoryDescription(repositoryName: string, description: string,
-         queryParams?: RequestQueryParams): Observable<any> {
+        queryParams?: RequestQueryParams): Observable<any> {
 
         if (!queryParams) {
             queryParams = new RequestQueryParams();
@@ -127,10 +127,10 @@ export class RepositoryDefaultService extends RepositoryService {
 
         let baseUrl: string = this.config.repositoryBaseEndpoint ? this.config.repositoryBaseEndpoint : '/api/repositories';
         let url = `${baseUrl}/${repositoryName}`;
-        return this.http.put(url, {'description': description }, HTTP_JSON_OPTIONS)
+        return this.http.put(url, { 'description': description }, HTTP_JSON_OPTIONS)
-        .pipe(map(response => response)
+            .pipe(map(response => response)
-        , catchError(error => observableThrowError(error)));
+                , catchError(error => observableThrowError(error)));
-      }
+    }
 
     public deleteRepository(repositoryName: string): Observable<any> {
         if (!repositoryName) {
@@ -141,6 +141,6 @@ export class RepositoryDefaultService extends RepositoryService {
 
         return this.http.delete(url, HTTP_JSON_OPTIONS)
             .pipe(map(response => response)
-            , catchError(error => observableThrowError(error)));
+                , catchError(error => observableThrowError(error)));
     }
 }

src/portal/lib/src/service/resource-label.service.ts

@@ -1,6 +1,6 @@
 import { Label } from "./interface";
 import { Inject, Injectable } from "@angular/core";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { IServiceConfig, SERVICE_CONFIG } from "../service.config";
 import { buildHttpRequestOptions, HTTP_JSON_OPTIONS } from "../utils";
 import { RequestQueryParams } from "./RequestQueryParams";
@@ -35,7 +35,7 @@ export class LabelDefaultService extends LabelService {
 
   constructor(
     @Inject(SERVICE_CONFIG) config: IServiceConfig,
-    private http: Http
+    private http: HttpClient
   ) {
     super();
     this._labelUrl = config.labelEndpoint
@@ -53,18 +53,17 @@ export class LabelDefaultService extends LabelService {
       queryParams = new RequestQueryParams();
     }
     if (scope) {
-      queryParams.set("scope", scope);
+      queryParams = queryParams.set("scope", scope);
     }
     if (projectId) {
-      queryParams.set("project_id", "" + projectId);
+      queryParams = queryParams.set("project_id", "" + projectId);
     }
     if (name) {
-      queryParams.set("name", "" + name);
+      queryParams = queryParams.set("name", "" + name);
     }
     return this.http
-      .get(this._labelUrl, buildHttpRequestOptions(queryParams))
+      .get<Label[]>(this._labelUrl, buildHttpRequestOptions(queryParams))
-      .pipe(map(response => response.json())
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   getGLabels(
@@ -74,15 +73,14 @@ export class LabelDefaultService extends LabelService {
     if (!queryParams) {
       queryParams = new RequestQueryParams();
     }
-    queryParams.set("scope", "g");
+    queryParams = queryParams.set("scope", "g");
 
     if (name) {
-      queryParams.set("name", "" + name);
+      queryParams = queryParams.set("name", "" + name);
     }
     return this.http
-      .get(this._labelUrl, buildHttpRequestOptions(queryParams))
+      .get<Label[]>(this._labelUrl, buildHttpRequestOptions(queryParams))
-      .pipe(map(response => response.json())
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   getPLabels(
@@ -93,17 +91,16 @@ export class LabelDefaultService extends LabelService {
     if (!queryParams) {
       queryParams = new RequestQueryParams();
     }
-    queryParams.set("scope", "p");
+    queryParams = queryParams.set("scope", "p");
     if (projectId) {
-      queryParams.set("project_id", "" + projectId);
+      queryParams = queryParams.set("project_id", "" + projectId);
     }
     if (name) {
-      queryParams.set("name", "" + name);
+      queryParams = queryParams.set("name", "" + name);
     }
     return this.http
-      .get(this._labelUrl, buildHttpRequestOptions(queryParams))
+      .get<Label[]>(this._labelUrl, buildHttpRequestOptions(queryParams))
-      .pipe(map(response => response.json())
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   createLabel(label: Label): Observable<any> {
@@ -112,8 +109,7 @@ export class LabelDefaultService extends LabelService {
     }
     return this.http
       .post(this._labelUrl, JSON.stringify(label), HTTP_JSON_OPTIONS)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   getLabel(id: number): Observable<Label> {
@@ -122,9 +118,8 @@ export class LabelDefaultService extends LabelService {
     }
     let reqUrl = `${this._labelUrl}/${id}`;
     return this.http
-      .get(reqUrl)
+      .get<any>(reqUrl)
-      .pipe(map(response => response.json())
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   updateLabel(id: number, label: Label): Observable<any> {
@@ -137,8 +132,7 @@ export class LabelDefaultService extends LabelService {
     let reqUrl = `${this._labelUrl}/${id}`;
     return this.http
       .put(reqUrl, JSON.stringify(label), HTTP_JSON_OPTIONS)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
   deleteLabel(id: number): Observable<any> {
     if (!id || id <= 0) {
@@ -147,7 +141,6 @@ export class LabelDefaultService extends LabelService {
     let reqUrl = `${this._labelUrl}/${id}`;
     return this.http
       .delete(reqUrl)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 }

src/portal/lib/src/service/retag.service.ts

@@ -1,5 +1,5 @@
 import { Observable } from "rxjs";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { Injectable, Inject } from "@angular/core";
 import { RetagRequest } from "./interface";
 import { HTTP_JSON_OPTIONS } from "../utils";
@@ -37,7 +37,7 @@ export abstract class RetagService {
 @Injectable()
 export class RetagDefaultService extends RetagService {
     constructor(
-        private http: Http,
+        private http: HttpClient,
         @Inject(SERVICE_CONFIG) private config: IServiceConfig
     ) {
         super();

src/portal/lib/src/service/scanning.service.ts

@@ -1,4 +1,4 @@
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { Injectable, Inject } from "@angular/core";
 
 import { SERVICE_CONFIG, IServiceConfig } from "../service.config";
@@ -79,7 +79,7 @@ export class ScanningResultDefaultService extends ScanningResultService {
   _baseUrl: string = "/api/repositories";
 
   constructor(
-    private http: Http,
+    private http: HttpClient,
     @Inject(SERVICE_CONFIG) private config: IServiceConfig
   ) {
     super();
@@ -116,7 +116,7 @@ export class ScanningResultDefaultService extends ScanningResultService {
         `${this._baseUrl}/${repoName}/tags/${tagId}/vulnerability/details`,
         buildHttpRequestOptions(queryParams)
       )
-      .pipe(map(response => response.json() as VulnerabilityItem[])
+      .pipe(map(response => response as VulnerabilityItem[])
       , catchError(error => observableThrowError(error)));
   }
 

src/portal/lib/src/service/system-info.service.ts

@@ -1,10 +1,10 @@
 import { Inject, Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 import { SystemInfo } from './interface';
 import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
-import {HTTP_GET_OPTIONS} from "../utils";
+import { HTTP_GET_OPTIONS } from "../utils";
 
 /**
  * Get System information about current backend server.
@@ -24,13 +24,13 @@ export abstract class SystemInfoService {
 export class SystemInfoDefaultService extends SystemInfoService {
   constructor(
     @Inject(SERVICE_CONFIG) private config: IServiceConfig,
-    private http: Http) {
+    private http: HttpClient) {
     super();
   }
   getSystemInfo(): Observable<SystemInfo> {
     let url = this.config.systemInfoEndpoint ? this.config.systemInfoEndpoint : '/api/systeminfo';
     return this.http.get(url, HTTP_GET_OPTIONS)
-      .pipe(map(systemInfo => systemInfo.json() as SystemInfo)
+      .pipe(map(systemInfo => systemInfo as SystemInfo)
       , catchError(error => observableThrowError(error)));
   }
 }

src/portal/lib/src/service/tag.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, Inject } from "@angular/core";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 
 import { SERVICE_CONFIG, IServiceConfig } from "../service.config";
 import {
@@ -118,7 +118,7 @@ export class TagDefaultService extends TagService {
   _baseUrl: string;
   _labelUrl: string;
   constructor(
-    private http: Http,
+    private http: HttpClient,
     @Inject(SERVICE_CONFIG) private config: IServiceConfig
   ) {
     super();
@@ -137,15 +137,15 @@ export class TagDefaultService extends TagService {
     queryParams?: RequestQueryParams
   ): Observable<Tag[]> {
     if (!queryParams) {
-      queryParams = new RequestQueryParams();
+      queryParams = queryParams = new RequestQueryParams();
     }
 
-    queryParams.set("detail", "1");
+    queryParams = queryParams.set("detail", "1");
     let url: string = `${this._baseUrl}/${repositoryName}/tags`;
 
     return this.http
       .get(url, buildHttpRequestOptions(queryParams))
-      .pipe(map(response => response.json() as Tag[])
+      .pipe(map(response => response as Tag[])
       , catchError(error => observableThrowError(error)));
   }
 
@@ -153,7 +153,7 @@ export class TagDefaultService extends TagService {
     let url: string = `${this._baseUrl}/${repositoryName}/signatures`;
     return this.http
       .get(url, HTTP_GET_OPTIONS)
-      .pipe(map(response => response.json() as VerifiedSignature[])
+      .pipe(map(response => response as VerifiedSignature[])
       , catchError(error => observableThrowError(error)));
   }
 
@@ -194,7 +194,7 @@ export class TagDefaultService extends TagService {
     let url: string = `${this._baseUrl}/${repositoryName}/tags/${tag}`;
     return this.http
       .get(url, HTTP_GET_OPTIONS)
-      .pipe(map(response => response.json() as Tag)
+      .pipe(map(response => response as Tag)
       , catchError(error => observableThrowError(error)));
   }
 
@@ -212,8 +212,7 @@ export class TagDefaultService extends TagService {
     }/${repoName}/tags/${tagName}/labels`;
     return this.http
       .post(_addLabelToImageUrl, { id: labelId }, HTTP_JSON_OPTIONS)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   public deleteLabelToImages(
@@ -230,8 +229,7 @@ export class TagDefaultService extends TagService {
     }/${repoName}/tags/${tagName}/labels/${labelId}`;
     return this.http
       .delete(_addLabelToImageUrl)
-      .pipe(map(response => response.status)
+      .pipe(catchError(error => observableThrowError(error)));
-      , catchError(error => observableThrowError(error)));
   }
 
   public getManifest(
@@ -244,7 +242,7 @@ export class TagDefaultService extends TagService {
     let url: string = `${this._baseUrl}/${repositoryName}/tags/${tag}/manifest`;
     return this.http
       .get(url, HTTP_GET_OPTIONS)
-      .pipe(map(response => response.json() as Manifest)
+      .pipe(map(response => response as Manifest)
       , catchError(error => observableThrowError(error)));
   }
 }

src/portal/lib/src/shared/shared.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HttpModule, Http } from '@angular/http';
 import { HttpClientModule, HttpClient} from '@angular/common/http';
 import { ClarityModule } from '@clr/angular';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -42,7 +41,6 @@ export function GeneralTranslatorLoader(http: HttpClient, config: IServiceConfig
 @NgModule({
     imports: [
         CommonModule,
-        HttpModule,
         HttpClientModule,
         FormsModule,
         ReactiveFormsModule,
@@ -64,7 +62,6 @@ export function GeneralTranslatorLoader(http: HttpClient, config: IServiceConfig
     ],
     exports: [
         CommonModule,
-        HttpModule,
         HttpClientModule,
         FormsModule,
         ReactiveFormsModule,

src/portal/lib/src/shared/shared.utils.ts

@@ -17,17 +17,19 @@
  **
  * returns {string}
  */
-import { Response } from "@angular/http";
 
 export const errorHandler = function (error: any): string {
     if (!error) {
         return "UNKNOWN_ERROR";
     }
     try {
-        return JSON.parse(error._body).message;
+        return JSON.parse(error.error).message;
     } catch (err) { }
-    if (error._body && error._body.message) {
+    if (typeof error.error === "string") {
-        return error._body.message;
+        return error.error;
+    }
+    if (error.error && error.error.message) {
+        return error.error.message;
     }
 
     if (!(error.statusCode || error.status)) {
@@ -54,9 +56,3 @@ export const errorHandler = function (error: any): string {
         }
     }
 };
-export const extractJson = (res: Response) => {
-    if (res.text() === '') {
-        return [];
-    }
-    return (res.json() || []);
-};

src/portal/lib/src/tag/tag.component.ts

@@ -259,8 +259,7 @@ export class TagComponent implements OnInit, AfterViewInit {
 
     // Pagination
     let params: RequestQueryParams = new RequestQueryParams();
-    params.set("page", "" + pageNumber);
+    params = params.set("page", "" + pageNumber).set("page_size", "" + this.pageSize);
-    params.set("page_size", "" + this.pageSize);
 
     this.loading = true;
 

src/portal/lib/src/utils.ts

@@ -1,9 +1,9 @@
 import { Observable } from "rxjs";
 
-import { RequestOptions, Headers } from '@angular/http';
+import { HttpHeaders, HttpParams } from '@angular/common/http';
 import { RequestQueryParams } from './service/RequestQueryParams';
 import { DebugElement } from '@angular/core';
-import { Comparator, State } from './service/interface';
+import { Comparator, State, HttpOptionInterface, HttpOptionTextInterface } from './service/interface';
 
 /**
  * Convert the different async channels to the Promise<T> type.
@@ -41,35 +41,74 @@ export const DEFAULT_SUPPORTING_LANGS = ['en-us', 'zh-cn', 'es-es', 'fr-fr', 'pt
  */
 export const DEFAULT_LANG = 'en-us';
 
-export const HTTP_JSON_OPTIONS: RequestOptions = new RequestOptions({
+
-    headers: new Headers({
+export const HTTP_JSON_OPTIONS: HttpOptionInterface = {
+    headers: new HttpHeaders({
         "Content-Type": 'application/json',
         "Accept": 'application/json'
-    })
+    }),
-});
+    responseType: 'json'
+};
 
-export const HTTP_GET_OPTIONS: RequestOptions = new RequestOptions({
+export const HTTP_GET_OPTIONS: HttpOptionInterface = {
-    headers: new Headers({
+    headers: new HttpHeaders({
         "Content-Type": 'application/json',
         "Accept": 'application/json',
         "Cache-Control": 'no-cache',
         "Pragma": 'no-cache'
-    })
+    }),
+    responseType: 'json'
+};
+export const HTTP_GET_OPTIONS_OBSERVE_RESPONSE: HttpOptionInterface = {
+    headers: new HttpHeaders({
+        "Content-Type": 'application/json',
+        "Accept": 'application/json',
+        "Cache-Control": 'no-cache',
+        "Pragma": 'no-cache'
+    }),
+    observe: 'response' as 'body',
+    responseType: 'json'
+};
+export const HTTP_GET_OPTIONS_TEXT: HttpOptionTextInterface = {
+    headers: new HttpHeaders({
+        "Content-Type": 'application/json',
+        "Accept": 'application/json',
+        "Cache-Control": 'no-cache',
+        "Pragma": 'no-cache'
+    }),
+    responseType: 'text'
+};
+
+export const HTTP_FORM_OPTIONS: HttpOptionInterface = {
+    headers: new HttpHeaders({
+        "Content-Type": 'application/x-www-form-urlencoded'
+    }),
+    responseType: 'json'
+};
+
+export const HTTP_GET_HEADER: HttpHeaders = new HttpHeaders({
+    "Content-Type": 'application/json',
+    "Accept": 'application/json',
+    "Cache-Control": 'no-cache',
+    "Pragma": 'no-cache'
 });
-export const HTTP_GET_OPTIONS_CACHE: RequestOptions = new RequestOptions({
+
-    headers: new Headers({
+export const HTTP_GET_OPTIONS_CACHE: HttpOptionInterface = {
+    headers: new HttpHeaders({
         "Content-Type": 'application/json',
         "Accept": 'application/json',
         "Cache-Control": 'no-cache',
         "Pragma": 'no-cache',
-    })
+    }),
-});
+    responseType: 'json'
+};
 
-export const FILE_UPLOAD_OPTION: RequestOptions = new RequestOptions({
+export const FILE_UPLOAD_OPTION: HttpOptionInterface = {
-    headers: new Headers({
+    headers: new HttpHeaders({
         "Content-Type": 'multipart/form-data',
-    })
+    }),
-});
+    responseType: 'json'
+};
 
 /**
  * Build http request options
@@ -78,22 +117,38 @@ export const FILE_UPLOAD_OPTION: RequestOptions = new RequestOptions({
  *  ** deprecated param {RequestQueryParams} params
  * returns {RequestOptions}
  */
-export function buildHttpRequestOptions(params: RequestQueryParams): RequestOptions {
+export function buildHttpRequestOptions(params: RequestQueryParams): HttpOptionInterface {
-    let reqOptions: RequestOptions = new RequestOptions({
+    let reqOptions: HttpOptionInterface = {
-        headers: new Headers({
+        headers: new HttpHeaders({
             "Content-Type": 'application/json',
             "Accept": 'application/json',
             "Cache-Control": 'no-cache',
             "Pragma": 'no-cache'
-        })
+        }),
-    });
+        responseType: 'json',
-
+    };
     if (params) {
-        reqOptions.search = params;
+        reqOptions.params = params;
     }
 
     return reqOptions;
 }
+export function buildHttpRequestOptionsWithObserveResponse(params: RequestQueryParams): HttpOptionInterface {
+    let reqOptions: HttpOptionInterface = {
+        headers: new HttpHeaders({
+            "Content-Type": 'application/json',
+            "Accept": 'application/json',
+            "Cache-Control": 'no-cache',
+            "Pragma": 'no-cache'
+        }),
+        responseType: 'json',
+        observe: 'response' as 'body'
+    };
+    if (params) {
+        reqOptions.params = params;
+    }
+    return reqOptions;
+}
 
 
 
@@ -335,7 +390,7 @@ export function getChanges(original: any, afterChange: any): { [key: string]: an
                 }
 
                 // Trim string value
-                if (typeof field.value === 'string') {
+                if (typeof field.value === "string") {
                     changes[prop] = ('' + changes[prop]).trim();
                 }
             }

src/portal/src/app/account/account-settings/account-settings-modal-service.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { catchError, map } from 'rxjs/operators';
 import { throwError as observableThrowError, Observable } from 'rxjs';
 
@@ -9,7 +9,7 @@ import { throwError as observableThrowError, Observable } from 'rxjs';
 @Injectable()
 export class AccountSettingsModalService {
 
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
   generateCli(userId): Observable<any> {
     return this.http.post(`/api/users/${userId}/gen_cli_secret`, {}).pipe( map(response => response)
     , catchError(error => observableThrowError(error)));

src/portal/src/app/account/account-settings/account-settings-modal.component.ts

@@ -354,8 +354,7 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
   confirmGenerate(confirmData): void {
     let userId = confirmData.data;
     this.accountSettingsService.generateCli(userId).subscribe(cliSecret => {
-      let secret = JSON.parse(cliSecret._body).secret;
+      this.account.oidc_user_meta.secret = cliSecret.secret;
-      this.account.oidc_user_meta.secret = secret;
       this.inlineAlert.showInlineSuccess({message: 'PROFILE.GENERATE_SUCCESS'});
     }, error => {
       this.inlineAlert.showInlineError({message: 'PROFILE.GENERATE_ERROR'});

src/portal/src/app/account/password-setting/password-setting.component.ts

@@ -178,7 +178,7 @@ export class PasswordSettingComponent implements AfterViewChecked {
                     this.msgHandler.handleError(error);
                 } else {
                     // Special case for 400
-                    let msg = '' + error._body;
+                    let msg = '' + error.error;
                     if (msg && msg.includes('old_password_is_not_correct')) {
                         this.inlineAlert.showInlineError("INCONRRECT_OLD_PWD");
                     } else {

src/portal/src/app/account/password-setting/password-setting.service.ts

@@ -12,13 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http, URLSearchParams } from '@angular/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
 
 import { PasswordSetting } from './password-setting';
-import {HTTP_FORM_OPTIONS, HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS} from "../../shared/shared.utils";
+
+import {HTTP_FORM_OPTIONS, HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS} from "@harbor/ui";
 
 const passwordChangeEndpoint = "/api/users/:user_id/password";
 const sendEmailEndpoint = "/c/sendEmail";
@@ -27,7 +28,7 @@ const resetPasswordEndpoint = "/c/reset";
 @Injectable()
 export class PasswordSettingService {
 
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     changePassword(userId: number, setting: PasswordSetting): Observable<any> {
         if (!setting || setting.new_password.trim() === "" || setting.old_password.trim() === "") {
@@ -56,10 +57,7 @@ export class PasswordSettingService {
             return observableThrowError("Invalid reset uuid or password");
         }
 
-        let body: URLSearchParams = new URLSearchParams();
+        let body: HttpParams = new HttpParams().set("reset_uuid", uuid).set("password", newPassword);
-        body.set("reset_uuid", uuid);
-        body.set("password", newPassword);
-
         return this.http.post(resetPasswordEndpoint, body.toString(), HTTP_FORM_OPTIONS)
             .pipe(map(response => response)
             , catchError(error => observableThrowError(error)));

src/portal/src/app/app-config.service.ts

@@ -12,13 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { CookieService } from 'ngx-cookie';
 
 import { AppConfig } from './app-config';
 import { CookieKeyOfAdmiral, HarborQueryParamKey } from './shared/shared.const';
-import { maintainUrlQueryParmas, HTTP_GET_OPTIONS} from './shared/shared.utils';
+import { maintainUrlQueryParmas } from './shared/shared.utils';
+import {  HTTP_GET_OPTIONS} from '@harbor/ui';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 export const systemInfoEndpoint = "/api/systeminfo";
@@ -36,13 +37,13 @@ export class AppConfigService {
     configurations: AppConfig = new AppConfig();
 
     constructor(
-        private http: Http,
+        private http: HttpClient,
         private cookie: CookieService) { }
 
     public load(): Observable<AppConfig> {
         return this.http.get(systemInfoEndpoint, HTTP_GET_OPTIONS)
             .pipe(map(response => {
-                this.configurations = response.json() as AppConfig;
+                this.configurations = response as AppConfig;
 
                 // Read admiral endpoint from cookie if existing
                 let admiralUrlFromCookie: string = this.cookie.get(CookieKeyOfAdmiral);

src/portal/src/app/base/global-search/global-search.service.ts

@@ -12,12 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
 import { SearchResults } from './search-results';
-import { HTTP_GET_OPTIONS } from "../../shared/shared.utils";
+import { HTTP_GET_OPTIONS } from "@harbor/ui";
 
 const searchEndpoint = "/api/search";
 /**
@@ -30,7 +30,7 @@ const searchEndpoint = "/api/search";
 @Injectable()
 export class GlobalSearchService {
 
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     /**
      * Search related artifacts with the provided keyword
@@ -44,7 +44,7 @@ export class GlobalSearchService {
         let searchUrl = searchEndpoint + "?q=" + term;
 
         return this.http.get(searchUrl, HTTP_GET_OPTIONS)
-            .pipe(map(response => response.json() as SearchResults)
+            .pipe(map(response => response as SearchResults)
             , catchError(error => observableThrowError(error)));
     }
 }

src/portal/src/app/config/auth/config-auth.component.ts

@@ -135,7 +135,7 @@ export class ConfigurationAuthComponent implements OnChanges, OnInit {
                 this.msgHandler.showSuccess('CONFIG.TEST_LDAP_SUCCESS');
             }, error => {
                 this.testingLDAPOnGoing = false;
-                let err = error._body;
+                let err = error.error;
                 if (!err || !err.trim()) {
                     err = 'UNKNOWN';
                 }

src/portal/src/app/config/config.service.ts

@@ -12,13 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
 import { Configuration } from '@harbor/ui';
 
-import {HTTP_GET_OPTIONS, HTTP_JSON_OPTIONS} from "../shared/shared.utils";
+import {HTTP_GET_OPTIONS, HTTP_JSON_OPTIONS} from "@harbor/ui";
 
 const configEndpoint = "/api/configurations";
 const emailEndpoint = "/api/email/ping";
@@ -27,11 +27,11 @@ const ldapEndpoint = "/api/ldap/ping";
 @Injectable()
 export class ConfigurationService {
 
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     public getConfiguration(): Observable<Configuration> {
         return this.http.get(configEndpoint, HTTP_GET_OPTIONS)
-        .pipe(map(response => response.json() as Configuration)
+        .pipe(map(response => response as Configuration)
         , catchError(error => observableThrowError(error)));
     }
 

src/portal/src/app/config/email/config-email.component.ts

@@ -106,7 +106,7 @@ export class ConfigurationEmailComponent implements OnChanges {
                 this.msgHandler.showSuccess('CONFIG.TEST_MAIL_SUCCESS');
             }, error => {
                 this.testingMailOnGoing = false;
-                let err = error._body;
+                let err = error.error;
                 if (!err) {
                     err = 'UNKNOWN';
                 }

src/portal/src/app/core/core.module.ts

@@ -14,7 +14,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ClarityModule } from '@clr/angular';
 import { CookieModule } from 'ngx-cookie';
@@ -24,7 +23,6 @@ import { MarkdownModule } from 'ngx-markdown';
     imports: [
         BrowserModule,
         FormsModule,
-        HttpModule,
         ClarityModule,
         CookieModule.forRoot(),
         MarkdownModule.forRoot(),
@@ -33,7 +31,6 @@ import { MarkdownModule } from 'ngx-markdown';
     exports: [
         BrowserModule,
         FormsModule,
-        HttpModule,
         ClarityModule,
         BrowserAnimationsModule,
         MarkdownModule

src/portal/src/app/dev-center/dev-center.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { throwError as observableThrowError, Observable } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { Title } from '@angular/platform-browser';
@@ -19,7 +19,7 @@ export class DevCenterComponent implements AfterViewInit, OnInit {
   private json: any;
   constructor(
     private el: ElementRef,
-    private http: Http,
+    private http: HttpClient,
     private translate: TranslateService,
     private titleService: Title) {
   }
@@ -38,10 +38,10 @@ export class DevCenterComponent implements AfterViewInit, OnInit {
   ngAfterViewInit() {
     this.http.get("/swagger.json")
     .pipe(catchError(error => observableThrowError(error)))
-    .pipe(map(response => response.json())).subscribe(json => {
+    .subscribe(json => {
-      json.host = window.location.host;
+      json['host'] = window.location.host;
       const protocal = window.location.protocol;
-      json.schemes = [protocal.replace(":", "")];
+      json['schemes'] = [protocal.replace(":", "")];
       let ui = SwaggerUI({
         spec: json,
         domNode: this.el.nativeElement.querySelector('.swagger-container'),

src/portal/src/app/group/group.service.ts

@@ -3,30 +3,26 @@ import {throwError as observableThrowError,  Observable} from "rxjs";
 
 import {catchError, map} from 'rxjs/operators';
 import { Injectable } from "@angular/core";
-import { Http, Response } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { UserGroup } from "./group";
-import { HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS } from "../shared/shared.utils";
+import { HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS } from "@harbor/ui";
 
 const userGroupEndpoint = "/api/usergroups";
 const ldapGroupSearchEndpoint = "/api/ldap/groups/search?groupname=";
 
 @Injectable()
 export class GroupService {
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
 
-  private extractData(res: Response) {
-    if (res.text() === '') {return []; }
-    return res.json() || [];
-  }
   private handleErrorObservable(error: Response | any) {
-    console.error(error.message || error);
+    console.error(error.error || error);
-    return observableThrowError(error.message || error);
+    return observableThrowError(error.error || error);
   }
 
   getUserGroups(): Observable<UserGroup[]> {
-    return this.http.get(userGroupEndpoint, HTTP_GET_OPTIONS).pipe(
+    return this.http.get<UserGroup[]>(userGroupEndpoint, HTTP_GET_OPTIONS).pipe(
     map(response => {
-      return this.extractData(response);
+      return response || [];
     }),
     catchError(error => {
       return this.handleErrorObservable(error);
@@ -37,16 +33,7 @@ export class GroupService {
     return this.http
       .post(userGroupEndpoint, group, HTTP_JSON_OPTIONS).pipe(
       map(response => {
-        return this.extractData(response);
+        return response || [];
-      }),
-      catchError(this.handleErrorObservable), );
-  }
-
-  getGroup(group_id: number): Observable<UserGroup> {
-    return this.http
-      .get(`${userGroupEndpoint}/${group_id}`, HTTP_JSON_OPTIONS).pipe(
-      map(response => {
-        return this.extractData(response);
       }),
       catchError(this.handleErrorObservable), );
   }
@@ -55,7 +42,7 @@ export class GroupService {
     return this.http
     .put(`${userGroupEndpoint}/${group.id}`, group, HTTP_JSON_OPTIONS).pipe(
     map(response => {
-      return this.extractData(response);
+      return response || [];
     }),
     catchError(this.handleErrorObservable), );
   }
@@ -64,16 +51,16 @@ export class GroupService {
     return this.http
     .delete(`${userGroupEndpoint}/${group_id}`).pipe(
     map(response => {
-      return this.extractData(response);
+      return response || [];
     }),
     catchError(this.handleErrorObservable), );
   }
 
   searchGroup(group_name: string): Observable<UserGroup[]> {
     return this.http
-    .get(`${ldapGroupSearchEndpoint}${group_name}`, HTTP_GET_OPTIONS).pipe(
+    .get<UserGroup[]>(`${ldapGroupSearchEndpoint}${group_name}`, HTTP_GET_OPTIONS).pipe(
     map(response => {
-      return this.extractData(response);
+      return response || [];
     }),
     catchError(this.handleErrorObservable), );
   }

src/portal/src/app/log/audit-log.component.ts

@@ -101,7 +101,7 @@ export class AuditLogComponent implements OnInit {
       .subscribe(
         response => {
           this.totalRecordCount = Number.parseInt(response.headers.get('x-total-count'));
-          this.auditLogs = response.json();
+          this.auditLogs = response.body;
         },
         error => {
           this.router.navigate(['/harbor', 'projects']);

src/portal/src/app/log/audit-log.service.ts

@@ -16,50 +16,46 @@ import {map, catchError} from 'rxjs/operators';
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http, URLSearchParams } from '@angular/http';
+import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
 
 import { AuditLog } from './audit-log';
-
+import {RequestQueryParams, buildHttpRequestOptions, buildHttpRequestOptionsWithObserveResponse} from '@harbor/ui';
-
-
-import {buildHttpRequestOptions} from '../shared/shared.utils';
-import {RequestQueryParams} from '@harbor/ui';
 
 export const logEndpoint = '/api/logs';
 
 @Injectable()
 export class AuditLogService {
 
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
 
   listAuditLogs(queryParam: AuditLog): Observable<any> {
-    let params: URLSearchParams = new URLSearchParams(queryParam.keywords);
+    let params: HttpParams = new HttpParams({fromString: queryParam.keywords});
     if (queryParam.begin_timestamp) {
-      params.set('begin_timestamp', <string>queryParam.begin_timestamp);
+      params = params.set('begin_timestamp', <string>queryParam.begin_timestamp);
     }
     if (queryParam.end_timestamp) {
-      params.set('end_timestamp', <string>queryParam.end_timestamp);
+      params = params.set('end_timestamp', <string>queryParam.end_timestamp);
     }
     if (queryParam.username) {
-      params.set('username', queryParam.username);
+      params = params.set('username', queryParam.username);
     }
     if (queryParam.page) {
-      params.set('page', <string>queryParam.page);
+      params = params.set('page', <string>queryParam.page);
     }
     if (queryParam.page_size) {
-      params.set('page_size', <string>queryParam.page_size);
+      params = params.set('page_size', <string>queryParam.page_size);
     }
     return this.http
-      .get(`/api/projects/${queryParam.project_id}/logs`, buildHttpRequestOptions(params)).pipe(
+      .get<HttpResponse<AuditLog[]>>(`/api/projects/${queryParam.project_id}/logs`
-      map(response => response),
+      , buildHttpRequestOptionsWithObserveResponse(params)).pipe(
       catchError(error => observableThrowError(error)), );
   }
 
   getRecentLogs(lines: number): Observable<AuditLog[]> {
     let params: RequestQueryParams = new RequestQueryParams();
-    params.set('page_size', '' + lines);
+    params = params.set('page_size', '' + lines);
     return this.http.get(logEndpoint,  buildHttpRequestOptions(params)).pipe(
-      map(response => response.json() as AuditLog[]),
+      map(response => response as AuditLog[]),
       catchError(error => observableThrowError(error)), );
   }
 }

src/portal/src/app/oidc-onboard/oidc-onboard.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Http, URLSearchParams } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { catchError } from 'rxjs/operators';
 import { throwError as observableThrowError, Observable } from 'rxjs';
 
@@ -9,7 +9,7 @@ export const logEndpoint = "/c/oidc/onboard";
 @Injectable()
 export class OidcOnboardService {
 
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
   oidcSave(param): Observable<any> {
     return this.http.post(logEndpoint, param).pipe(catchError(error => observableThrowError(error)));
   }

src/portal/src/app/project/create-project/create-project.component.ts

@@ -21,7 +21,6 @@ import {
   OnInit,
   OnDestroy
 } from "@angular/core";
-import { Response } from "@angular/http";
 import { NgForm } from "@angular/forms";
 
 import { Subject } from "rxjs";

src/portal/src/app/project/helm-chart/helm-chart.service.ts

@@ -1,7 +1,7 @@
 
 import {throwError as observableThrowError,  Observable } from "rxjs";
 import { Injectable, Inject } from "@angular/core";
-import { Http, Response, ResponseContentType } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { map, catchError } from "rxjs/operators";
 import {HttpErrorResponse} from "@angular/common/http";
 
@@ -98,21 +98,15 @@ export abstract class HelmChartService {
 @Injectable()
 export class HelmChartDefaultService extends HelmChartService {
   constructor(
-    private http: Http,
+    private http: HttpClient,
     @Inject(SERVICE_CONFIG) private config: IServiceConfig
   ) {
     super();
   }
 
-  private extractData(res: Response) {
-    if (res.text() === "") {
-      return [];
-    }
-    return res.json() || [];
-  }
 
   private handleErrorObservable(error: HttpErrorResponse) {
-    return observableThrowError(error.message || error);
+    return observableThrowError(error.error || error);
   }
 
   public getHelmCharts(
@@ -123,11 +117,11 @@ export class HelmChartDefaultService extends HelmChartService {
     }
 
     return this.http
-      .get(`${this.config.helmChartEndpoint}/${projectName}/charts`, HTTP_GET_OPTIONS)
+      .get<HelmChartItem[]>(`${this.config.helmChartEndpoint}/${projectName}/charts`, HTTP_GET_OPTIONS)
       .pipe(
-        map(response => this.extractData(response),
+        map(response => response || []),
         catchError(error => this.handleErrorObservable(error))
-      ));
+      );
   }
 
   public deleteHelmChart(projectId: number | string, chartName: string): Observable<any> {
@@ -138,7 +132,7 @@ export class HelmChartDefaultService extends HelmChartService {
     return this.http
       .delete(`${this.config.helmChartEndpoint}/${projectId}/charts/${chartName}`)
       .pipe(map(response => {
-        return this.extractData(response);
+        return response || [];
       }))
       .pipe(catchError(this.handleErrorObservable));
   }
@@ -147,9 +141,9 @@ export class HelmChartDefaultService extends HelmChartService {
     projectName: string,
     chartName: string,
   ): Observable<HelmChartVersion[]> {
-    return this.http.get(`${this.config.helmChartEndpoint}/${projectName}/charts/${chartName}`, HTTP_GET_OPTIONS)
+    return this.http.get<HelmChartVersion[]>(`${this.config.helmChartEndpoint}/${projectName}/charts/${chartName}`, HTTP_GET_OPTIONS)
     .pipe(
-      map(response => this.extractData(response)),
+      map(response => response || []),
       catchError(this.handleErrorObservable)
     );
   }
@@ -157,7 +151,7 @@ export class HelmChartDefaultService extends HelmChartService {
   public deleteChartVersion(projectName: string, chartName: string, version: string): any {
     return this.http.delete(`${this.config.helmChartEndpoint}/${projectName}/charts/${chartName}/${version}`, HTTP_JSON_OPTIONS)
     .pipe(map(response => {
-      return this.extractData(response);
+      return response || [];
     }))
     .pipe(catchError(this.handleErrorObservable));
   }
@@ -167,10 +161,7 @@ export class HelmChartDefaultService extends HelmChartService {
     chartName: string,
     version: string,
   ): Observable<HelmChartDetail> {
-    return this.http.get(`${this.config.helmChartEndpoint}/${projectName}/charts/${chartName}/${version}`)
+    return this.http.get<HelmChartDetail>(`${this.config.helmChartEndpoint}/${projectName}/charts/${chartName}/${version}`)
-    .pipe(map(response => {
-      return this.extractData(response);
-    }))
     .pipe(catchError(this.handleErrorObservable));
   }
 
@@ -187,12 +178,12 @@ export class HelmChartDefaultService extends HelmChartService {
       url = `${this.config.downloadChartEndpoint}/${projectName}/${filename}`;
     }
     return this.http.get(url, {
-      responseType: ResponseContentType.Blob,
+      responseType: 'blob',
     })
     .pipe(map(response => {
       return {
         filename: filename.split('/')[1],
-        data: response.blob()
+        data: response
       };
     }))
     .pipe(catchError(this.handleErrorObservable));
@@ -216,9 +207,9 @@ export class HelmChartDefaultService extends HelmChartService {
       }
     }
     return this.http.post(uploadURL, formData, {
-      responseType: ResponseContentType.Json
+      responseType: 'json'
     })
-    .pipe(map(response => this.extractData(response)))
+    .pipe(map(response => response || []))
     .pipe(catchError(this.handleErrorObservable));
   }
 }

src/portal/src/app/project/list-project/list-project.component.ts

@@ -179,7 +179,7 @@ export class ListProjectComponent implements OnDestroy {
                     }
                 }
 
-                this.projects = response.json() as Project[];
+                this.projects = response.body as Project[];
                 // Do customising filtering and sorting
                 this.projects = doFiltering<Project>(this.projects, state);
                 this.projects = doSorting<Project>(this.projects, state);

src/portal/src/app/project/member/add-member/add-member.component.ts

@@ -23,7 +23,6 @@ import {
   OnInit,
   OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef
 } from '@angular/core';
-import { Response } from '@angular/http';
 import { NgForm } from '@angular/forms';
 import {ActivatedRoute} from "@angular/router";
 import { Subject, forkJoin } from "rxjs";
@@ -40,7 +39,10 @@ import {User} from "../../../user/user";
 import {Project} from "../../project";
 
 import { Member } from '../member';
+import { errorHandler as errorHandFn } from "../../../shared/shared.utils";
+
 import { MemberService } from '../member.service';
+import { HttpResponseBase } from '@angular/common/http';
 
 
 @Component({
@@ -161,22 +163,12 @@ export class AddMemberComponent implements AfterViewChecked, OnInit, OnDestroy {
         // this.addMemberOpened = false;
       },
       error => {
-        if (error instanceof Response) {
+        if (error instanceof HttpResponseBase) {
-          let errorMessageKey: string;
-          switch (error.status) {
-            case 404:
-              errorMessageKey = 'MEMBER.USERNAME_DOES_NOT_EXISTS';
-              break;
-            case 409:
-              errorMessageKey = 'MEMBER.USERNAME_ALREADY_EXISTS';
-              break;
-            default:
-              errorMessageKey = 'MEMBER.UNKNOWN_ERROR';
-          }
           if (this.messageHandlerService.isAppLevel(error)) {
             this.messageHandlerService.handleError(error);
             // this.addMemberOpened = false;
           } else {
+          let errorMessageKey: string = errorHandFn(error);
             this.translateService
               .get(errorMessageKey)
               .subscribe(errorMessage => this.messageHandlerService.handleError(errorMessage));

src/portal/src/app/project/member/member.service.ts

@@ -16,12 +16,14 @@ import {map, catchError} from 'rxjs/operators';
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 
 
 
-import {HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS} from "../../shared/shared.utils";
+
+import {HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS} from "@harbor/ui";
+// import {HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS} from "../../shared/shared.utils";
 import { User } from '../../user/user';
 import { Member } from './member';
 
@@ -29,12 +31,12 @@ import { Member } from './member';
 @Injectable()
 export class MemberService {
 
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
 
   listMembers(projectId: number, entity_name: string): Observable<Member[]> {
     return this.http
                .get(`/api/projects/${projectId}/members?entityname=${entity_name}`, HTTP_GET_OPTIONS).pipe(
-               map(response => response.json() as Member[]),
+               map(response => response as Member[]),
                catchError(error => observableThrowError(error)), );
   }
 
@@ -54,7 +56,6 @@ export class MemberService {
         member_user: member_user
       },
       HTTP_JSON_OPTIONS).pipe(
-      map(response => response.status),
       catchError(error => observableThrowError(error)), );
   }
 
@@ -63,21 +64,18 @@ export class MemberService {
                .post(`/api/projects/${projectId}/members`,
                { role_id: roleId, member_group: group},
                HTTP_JSON_OPTIONS).pipe(
-               map(response => response.status),
                catchError(error => observableThrowError(error)), );
   }
 
   changeMemberRole(projectId: number, userId: number, roleId: number): Observable<any> {
     return this.http
                .put(`/api/projects/${projectId}/members/${userId}`, { role_id: roleId }, HTTP_JSON_OPTIONS)
-               .pipe(map(response => response.status)
+               .pipe(catchError(error => observableThrowError(error)));
-               , catchError(error => observableThrowError(error)));
   }
 
   deleteMember(projectId: number, memberId: number): Observable<any> {
     return this.http
                .delete(`/api/projects/${projectId}/members/${memberId}`)
-               .pipe(map(response => response.status)
+               .pipe(catchError(error => observableThrowError(error)));
-               , catchError(error => observableThrowError(error)));
   }
 }

src/portal/src/app/project/project.service.ts

@@ -17,39 +17,37 @@ import {catchError, map} from 'rxjs/operators';
 // limitations under the License.
 import { Injectable } from '@angular/core';
 
-import { Http, URLSearchParams } from '@angular/http';
+import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
 
 
 
-import {HTTP_JSON_OPTIONS, buildHttpRequestOptions, HTTP_GET_OPTIONS} from "../shared/shared.utils";
+import {HTTP_JSON_OPTIONS, buildHttpRequestOptions, HTTP_GET_OPTIONS, buildHttpRequestOptionsWithObserveResponse} from "@harbor/ui";
+import { Project } from "./project";
 
 @Injectable()
 export class ProjectService {
 
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
 
   getProject(projectId: number): Observable<any> {
     return this.http
                .get(`/api/projects/${projectId}`, HTTP_GET_OPTIONS).pipe(
-               map(response => response.json()),
                catchError(error => observableThrowError(error)), );
   }
 
-  listProjects(name: string, isPublic?: number, page?: number, pageSize?: number): Observable<any> {
+  listProjects(name: string, isPublic?: number, page?: number, pageSize?: number): Observable<HttpResponse<Project[]>> {
-    let params = new URLSearchParams();
+    let params = new HttpParams();
     if (page && pageSize) {
-      params.set('page', page + '');
+      params = params.set('page', page + '').set('page_size', pageSize + '');
-      params.set('page_size', pageSize + '');
     }
     if (name && name.trim() !== "") {
-      params.set('name', name);
+      params = params.set('name', name);
     }
     if (isPublic !== undefined) {
-      params.set('public', '' + isPublic);
+      params = params.set('public', '' + isPublic);
     }
     return this.http
-               .get(`/api/projects`, buildHttpRequestOptions(params)).pipe(
+               .get<HttpResponse<Project[]>>(`/api/projects`, buildHttpRequestOptionsWithObserveResponse(params)).pipe(
-               map(response => response),
                catchError(error => observableThrowError(error)), );
   }
 
@@ -60,35 +58,30 @@ export class ProjectService {
                   public: metadata.public ? 'true' : 'false',
                 }})
                 , HTTP_JSON_OPTIONS).pipe(
-               map(response => response.status),
                catchError(error => observableThrowError(error)), );
   }
 
   toggleProjectPublic(projectId: number, isPublic: string): Observable<any> {
     return this.http
                .put(`/api/projects/${projectId}`, { 'metadata': {'public': isPublic} }, HTTP_JSON_OPTIONS).pipe(
-               map(response => response.status),
                catchError(error => observableThrowError(error)), );
   }
 
   deleteProject(projectId: number): Observable<any> {
     return this.http
                .delete(`/api/projects/${projectId}`)
-               .pipe(map(response => response.status)
+               .pipe(catchError(error => observableThrowError(error)));
-               , catchError(error => observableThrowError(error)));
   }
 
   checkProjectExists(projectName: string): Observable<any> {
     return this.http
                .head(`/api/projects/?project_name=${projectName}`).pipe(
-               map(response => response.status),
                catchError(error => observableThrowError(error)), );
   }
 
   checkProjectMember(projectId: number): Observable<any> {
     return this.http
                .get(`/api/projects/${projectId}/members`, HTTP_GET_OPTIONS).pipe(
-               map(response => response.json()),
                catchError(error => observableThrowError(error)), );
   }
 }

src/portal/src/app/project/robot-account/robot-account.service.ts

@@ -15,12 +15,12 @@ import { map, catchError } from "rxjs/operators";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from "@angular/core";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { RobotApiRepository } from "./robot.api.repository";
 @Injectable()
 export class RobotService {
   constructor(
-    private http: Http,
+    private http: HttpClient,
     private robotApiRepository: RobotApiRepository
   ) {}
   public addRobotAccount(projecId, name, description, projectName, isPull, isPush): Observable<any> {

src/portal/src/app/project/robot-account/robot.api.repository.ts

@@ -1,18 +1,16 @@
 import { Injectable } from "@angular/core";
-import { Http } from "@angular/http";
+import { HttpClient } from "@angular/common/http";
 import { throwError as observableThrowError, Observable, pipe } from "rxjs";
 import { catchError, map } from "rxjs/operators";
 import { Robot } from './robot';
-import { HTTP_JSON_OPTIONS } from "../../shared/shared.utils";
 
 @Injectable()
 export class RobotApiRepository {
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
 
   public postRobot(projectId, param): Observable<any> {
     return this.http
       .post(`/api/projects/${projectId}/robots`, param)
-      .pipe(map(response => response.json()))
       .pipe(catchError(error => observableThrowError(error)));
   }
 
@@ -25,14 +23,14 @@ export class RobotApiRepository {
   public listRobot(projectId): Observable<Robot[]> {
     return this.http
       .get(`/api/projects/${projectId}/robots`)
-      .pipe(map(response => response.json() as Robot[]))
+      .pipe(map(response => response as Robot[]))
       .pipe(catchError(error => observableThrowError(error)));
   }
 
   public getRobot(projectId, id): Observable<Robot[]> {
     return this.http
       .get(`/api/projects/${projectId}/robots/${id}`)
-      .pipe(map(response => response.json() as Robot[]))
+      .pipe(map(response => response as Robot[]))
       .pipe(catchError(error => observableThrowError(error)));
   }
 

src/portal/src/app/replication/replication-page.component.ts

@@ -44,7 +44,7 @@ export class ReplicationPageComponent implements OnInit, AfterViewInit {
     this.getReplicationPermissions(this.projectIdentify);
     this.proService.listProjects("", undefined)
       .subscribe(response => {
-        let projects = response.json() as Project[];
+        let projects = response.body as Project[];
         if (projects.length) {
           let project = projects.find(data => data.project_id === this.projectIdentify);
           if (project) {

src/portal/src/app/repository/top-repo/top-repository.service.ts

@@ -12,12 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 import { Repository } from '@harbor/ui';
 
-import {HTTP_GET_OPTIONS} from "../../shared/shared.utils";
+import {HTTP_GET_OPTIONS} from "@harbor/ui";
 
 export const topRepoEndpoint = "/api/repositories/top";
 /**
@@ -30,7 +30,7 @@ export const topRepoEndpoint = "/api/repositories/top";
 @Injectable()
 export class TopRepoService {
 
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     /**
      * Get top popular repositories
@@ -42,7 +42,7 @@ export class TopRepoService {
      */
     getTopRepos(): Observable<Repository[]> {
         return this.http.get(topRepoEndpoint, HTTP_GET_OPTIONS)
-            .pipe(map(response => response.json() as Repository[])
+            .pipe(map(response => response as Repository[])
             , catchError(error => observableThrowError(error)));
     }
 }

src/portal/src/app/shared/list-chart-version-ro/list-chart-version-ro.component.ts

@@ -1,4 +1,3 @@
-import { extractJson } from './../shared.utils';
 import { Router } from '@angular/router';
 import { Component, OnInit, Input } from '@angular/core';
 
@@ -56,7 +55,7 @@ export class ListChartVersionRoComponent implements OnInit {
     this.searchTrigger.closeSearch(true);
     let [projectName, chartName] = chartVersion.name.split('/');
     this.projectService.listProjects(projectName).subscribe( res => {
-      let projects = extractJson(res);
+      let projects = res.body || [];
       if (projects || projects.length >= 1) {
         let linkUrl = ['harbor', 'projects', projects[0].project_id, 'helm-charts', chartName, 'versions', chartVersion.version];
         this.router.navigate(linkUrl);

src/portal/src/app/shared/session.service.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http, URLSearchParams } from '@angular/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
@@ -21,7 +21,7 @@ import { Member } from '../project/member/member';
 
 import { SignInCredential } from './sign-in-credential';
 import { enLang } from '../shared/shared.const';
-import { HTTP_FORM_OPTIONS, HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS } from "./shared.utils";
+import { HTTP_FORM_OPTIONS, HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS } from "@harbor/ui";
 
 const signInUrl = '/c/login';
 const currentUserEndpoint = "/api/users/current";
@@ -51,11 +51,11 @@ export class SessionService {
         "Content-Type": 'application/x-www-form-urlencoded'
     });*/
 
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     // Handle the related exceptions
     handleError(error: any): Observable<any> {
-        return observableThrowError(error.message || error);
+        return observableThrowError(error.error || error);
     }
 
     // Clear session
@@ -70,10 +70,10 @@ export class SessionService {
         let queryParam: string = 'principal=' + encodeURIComponent(signInCredential.principal) +
             '&password=' + encodeURIComponent(signInCredential.password);
 
-        // Trigger Http
+        // Trigger HttpClient
         return this.http.post(signInUrl, queryParam, HTTP_FORM_OPTIONS)
             .pipe(map(() => null)
-            , catchError(error => this.handleError(error)));
+            , catchError(error => observableThrowError(error)));
     }
 
     /**
@@ -85,7 +85,7 @@ export class SessionService {
      */
     retrieveUser(): Observable<SessionUser> {
         return this.http.get(currentUserEndpoint, HTTP_GET_OPTIONS)
-            .pipe(map(response => this.currentUser = response.json() as SessionUser)
+            .pipe(map(response => this.currentUser = response as SessionUser)
             , catchError(error => this.handleError(error)));
     }
 
@@ -169,16 +169,13 @@ export class SessionService {
 
     checkUserExisting(target: string, value: string): Observable<boolean> {
         // Build the form package
-        const body = new URLSearchParams();
+        let body = new HttpParams();
-        body.set('target', target);
+        body = body.set('target', target);
-        body.set('value', value);
+        body = body.set('value', value);
 
-        // Trigger Http
+        // Trigger HttpClient
         return this.http.post(userExistsEndpoint, body.toString(), HTTP_FORM_OPTIONS)
-            .pipe(map(response => {
+            .pipe(catchError(error => this.handleError(error)));
-                return response.json();
-            })
-            , catchError(error => this.handleError(error)));
     }
 
     setProjectMembers(projectMembers: Member[]): void {

src/portal/src/app/shared/shared.utils.ts

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { NgForm } from '@angular/forms';
-import { RequestOptions, Headers, Response } from "@angular/http";
 import { Comparator, State } from '../../../lib/src/service/interface';
 import { RequestQueryParams } from "@harbor/ui";
 
@@ -29,15 +28,15 @@ export const errorHandler = function (error: any): string {
     if (!error) {
         return "UNKNOWN_ERROR";
     }
-
     try {
-        return JSON.parse(error._body).message;
+        return JSON.parse(error.error).message;
     } catch (err) { }
-
+    if (typeof error.error === "string") {
-    if (error._body && error._body.message) {
+        return error.error;
-        return error._body.message;
+    }
+    if (error.error && error.error.message) {
+        return error.error.message;
     }
-
     if (!(error.statusCode || error.status)) {
         // treat as string message
         return '' + error;
@@ -185,49 +184,7 @@ export class CustomComparator<T> implements Comparator<T> {
     }
 }
 
-export const HTTP_JSON_OPTIONS: RequestOptions = new RequestOptions({
-    headers: new Headers({
-        "Content-Type": 'application/json',
-        "Accept": 'application/json',
-    })
-});
-export const HTTP_GET_OPTIONS: RequestOptions = new RequestOptions({
-    headers: new Headers({
-        "Content-Type": 'application/json',
-        "Accept": 'application/json',
-        "Cache-Control": 'no-cache',
-        "Pragma": 'no-cache'
-    })
-});
 
-export const HTTP_FORM_OPTIONS: RequestOptions = new RequestOptions({
-    headers: new Headers({
-        "Content-Type": 'application/x-www-form-urlencoded'
-    })
-});
-/**
- * Build http request options
- *
- **
- *  ** deprecated param {RequestQueryParams} params
- * returns {RequestOptions}
- */
-export function buildHttpRequestOptions(params: RequestQueryParams): RequestOptions {
-    let reqOptions: RequestOptions = new RequestOptions({
-        headers: new Headers({
-            "Content-Type": 'application/json',
-            "Accept": 'application/json',
-            "Cache-Control": 'no-cache',
-            "Pragma": 'no-cache'
-        })
-    });
-
-    if (params) {
-        reqOptions.search = params;
-    }
-
-    return reqOptions;
-}
 
 /**
  * Filter columns via RegExp
@@ -309,10 +266,3 @@ export function doSorting<T extends { [key: string]: any | any[] }>(items: T[],
         return comp;
     });
 }
-
-export const extractJson = (res: Response) => {
-    if (res.text() === '') {
-        return [];
-    }
-    return (res.json() || []);
-};

src/portal/src/app/shared/statictics/statistics.service.ts

@@ -12,13 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
 import { Statistics } from './statistics';
 import { Volumes } from './volumes';
-import {HTTP_GET_OPTIONS} from "../shared.utils";
+import {HTTP_GET_OPTIONS} from "@harbor/ui";
 
 const statisticsEndpoint = "/api/statistics";
 const volumesEndpoint = "/api/systeminfo/volumes";
@@ -32,17 +32,17 @@ const volumesEndpoint = "/api/systeminfo/volumes";
 @Injectable()
 export class StatisticsService {
 
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     getStatistics(): Observable<Statistics> {
         return this.http.get(statisticsEndpoint, HTTP_GET_OPTIONS)
-        .pipe(map(response => response.json() as Statistics)
+        .pipe(map(response => response as Statistics)
         , catchError(error => observableThrowError(error)));
     }
 
     getVolumes(): Observable<Volumes> {
         return this.http.get(volumesEndpoint, HTTP_GET_OPTIONS)
-        .pipe(map(response => response.json() as Volumes)
+        .pipe(map(response => response as Volumes)
         , catchError(error => observableThrowError(error)));
     }
 }

src/portal/src/app/sign-in/sign-in.component.ts

@@ -263,8 +263,8 @@ export class SignInComponent implements AfterViewChecked, OnInit {
                 if (this.isOidcLoginMode && error && error.status === 403) {
                     try {
                         let redirect_location = '';
-                        redirect_location = error._body && error._body.redirect_location ?
+                        redirect_location = error.error && error.error.redirect_location ?
-                            error._body.redirect_location : JSON.parse(error._body).redirect_location;
+                            error.error.redirect_location : JSON.parse(error.error).redirect_location;
                         window.location.href = redirect_location;
                         return;
                     } catch (error) { }

src/portal/src/app/sign-in/sign-in.service.ts

@@ -12,11 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http, URLSearchParams } from '@angular/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 // import 'rxjs/add/operator/toPromise';
 
 import { SignInCredential } from '../shared/sign-in-credential';
-import {HTTP_FORM_OPTIONS} from "../shared/shared.utils";
+import {HTTP_FORM_OPTIONS} from "@harbor/ui";
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 const signInUrl = '/c/login';
@@ -30,21 +30,21 @@ const signInUrl = '/c/login';
 @Injectable()
 export class SignInService {
 
-    constructor(private http: Http) {}
+    constructor(private http: HttpClient) {}
 
     // Handle the related exceptions
     handleError(error: any): Observable<any> {
-        return observableThrowError(error.message || error);
+        return observableThrowError(error.error || error);
     }
 
     // Submit signin form to backend (NOT restful service)
     signIn(signInCredential: SignInCredential): Observable<any> {
         // Build the form package
-        const body = new URLSearchParams();
+        let  body = new HttpParams();
-        body.set('principal', signInCredential.principal);
+        body = body.set('principal', signInCredential.principal);
-        body.set('password', signInCredential.password);
+        body = body.set('password', signInCredential.password);
 
-        // Trigger Http
+        // Trigger HttpClient
         return this.http.post(signInUrl, body.toString(), HTTP_FORM_OPTIONS)
         .pipe(map(() => null)
         , catchError(error => observableThrowError(error)));

src/portal/src/app/skinable-config.service.ts

@@ -1,16 +1,16 @@
 
 import {Injectable} from "@angular/core";
-import {Http} from "@angular/http";
+import {HttpClient} from "@angular/common/http";
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 @Injectable()
 export class SkinableConfig {
     customSkinData: {[key: string]: any};
-    constructor(private http: Http) {}
+    constructor(private http: HttpClient) {}
 
     public getCustomFile(): Observable<any> {
        return this.http.get('setting.json')
-           .pipe(map(response => { this.customSkinData = response.json(); return this.customSkinData; })
+           .pipe(map(response => this.customSkinData = response)
            , catchError((error: any) => {
                 console.error('custom skin json file load failed');
                 return observableThrowError(error);

src/portal/src/app/user/user.service.ts

@@ -12,11 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
-import {HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS} from "../shared/shared.utils";
+import {HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS} from "@harbor/ui";
 import { User, LDAPUser } from './user';
 import LDAPUsertoUser from './user';
 
@@ -33,22 +33,22 @@ const ldapUserEndpoint = '/api/ldap/users';
 @Injectable()
 export class UserService {
 
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     // Handle the related exceptions
     handleError(error: any): Observable<any> {
-        return observableThrowError(error.message || error);
+        return observableThrowError(error.error || error);
     }
 
     // Get the user list
     getUsersNameList(name: string, page_size: number): Observable<User[]> {
         return this.http.get(`${userListSearch}page_size=${page_size}&username=${name}`, HTTP_GET_OPTIONS)
-            .pipe(map(response => response.json() as User[])
+            .pipe(map(response => response as User[])
             , catchError(error => this.handleError(error)));
     }
     getUsers(): Observable<User[]> {
         return this.http.get(userMgmtEndpoint, HTTP_GET_OPTIONS)
-            .pipe(map(response => response.json() as User[])
+            .pipe(map(response => response as User[])
             , catchError(error => this.handleError(error)));
     }
 
@@ -102,7 +102,7 @@ export class UserService {
     getLDAPUsers(username: string): Observable<User[]> {
         return this.http.get(`${ldapUserEndpoint}/search?username=${username}`, HTTP_GET_OPTIONS)
         .pipe(map(response => {
-            let ldapUser = response.json() as LDAPUser[] || [];
+            let ldapUser = response as LDAPUser[] || [];
             return ldapUser.map(u => LDAPUsertoUser(u));
         })
         , catchError( error => this.handleError(error)));