Update Http to HttpClient, Ref: #88

src/app/appliance/appliance-list-dialog/appliance-list-dialog.component.ts

@@ -68,9 +68,11 @@ export class ApplianceDatabase {
   }
 
   constructor(private server: Server, private applianceService: ApplianceService) {
-    this.applianceService.list(this.server).subscribe((appliances: Appliance[]) => {
-      this.dataChange.next(appliances);
-    });
+    this.applianceService
+      .list(this.server)
+      .subscribe((appliances) => {
+        this.dataChange.next(appliances);
+      });
   }
 
 };

src/app/appliance/appliance.component.ts

@@ -3,6 +3,7 @@ import {MatDialog} from "@angular/material";
 import {ApplianceListDialogComponent} from "./appliance-list-dialog/appliance-list-dialog.component";
 
 import {Server} from "../shared/models/server";
+import {Appliance} from "../shared/models/appliance";
 
 @Component({
   selector: 'app-appliance',
@@ -26,7 +27,7 @@ export class ApplianceComponent implements OnInit {
       }
     });
 
-    dialogRef.afterClosed().subscribe((appliance: AppendMode) => {
+    dialogRef.afterClosed().subscribe((appliance: Appliance) => {
       if (appliance !== null) {
         this.onNodeCreation.emit(appliance);
       }

src/app/shared/services/appliance.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 
 import 'rxjs/add/operator/map';
 import { Server } from "../models/server";
 import { HttpServer } from "./http-server.service";
 import {Appliance} from "../models/appliance";
+import {Observable} from "rxjs/Observable";
 
 @Injectable()
 export class ApplianceService {
@@ -13,8 +13,7 @@ export class ApplianceService {
 
   list(server: Server): Observable<Appliance[]> {
     return this.httpServer
-                .get(server, '/appliances')
-                .map(response => response.json() as Appliance[]);
+                .get<Appliance[]>(server, '/appliances') as Observable<Appliance[]>;
   }
 
 }

src/app/shared/services/http-server.service.ts

@@ -1,64 +1,111 @@
 import { Injectable } from '@angular/core';
+import {HttpHeaders, HttpClient, HttpParams, HttpResponse} from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import {Headers, Http, RequestOptions, RequestOptionsArgs, Response} from "@angular/http";
+
 import {Server} from "../models/server";
 
+
+/* tslint:disable:interface-over-type-literal */
+export type JsonOptions = {
+  headers?: HttpHeaders | {
+      [header: string]: string | string[];
+  };
+  observe?: 'body';
+  params?: HttpParams | {
+      [param: string]: string | string[];
+  };
+  reportProgress?: boolean;
+  responseType?: 'json';
+  withCredentials?: boolean;
+};
+
+export type TextOptions = {
+  headers?: HttpHeaders | {
+      [header: string]: string | string[];
+  };
+  observe: 'response';
+  params?: HttpParams | {
+      [param: string]: string | string[];
+  };
+  reportProgress?: boolean;
+  responseType: 'text';
+  withCredentials?: boolean;
+};
+
+export type HeadersOptions = {
+    headers?: HttpHeaders | {
+        [header: string]: string | string[];
+    };
+};
+
+/* tslint:enable:interface-over-type-literal */
+
+
 @Injectable()
 export class HttpServer {
 
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
 
-  get(server: Server, url: string, options?: RequestOptionsArgs): Observable<Response> {
-    options = this.getOptionsForServer(server, url, options);
-    return this.http.get(url, options);
+  get<T>(server: Server, url: string, options?: JsonOptions): Observable<T> {
+    const intercepted = this.getOptionsForServer<JsonOptions>(server, url, options);
+    return this.http.get<T>(intercepted.url, intercepted.options as JsonOptions);
+  };
+
+  getText(server: Server, url: string, options?: TextOptions): Observable<HttpResponse<string>> {
+    const intercepted = this.getOptionsForServer<TextOptions>(server, url, options);
+    return this.http.get(intercepted.url, intercepted.options);
   }
 
-  post(server: Server, url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
-    options = this.getOptionsForServer(server, url, options);
-    return this.http.post(url, body, options);
+  post<T>(server: Server, url: string, body: any | null, options?: JsonOptions): Observable<T> {
+    const intercepted = this.getOptionsForServer(server, url, options);
+    return this.http.post<T>(intercepted.url, body, intercepted.options);
   }
 
-  put(server: Server, url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
-    options = this.getOptionsForServer(server, url, options);
-    return this.http.put(url, body, options);
+  put<T>(server: Server, url: string, body: any, options?: JsonOptions): Observable<T> {
+    const intercepted = this.getOptionsForServer(server, url, options);
+    return this.http.put<T>(intercepted.url, body, intercepted.options);
   }
 
-  delete(server: Server, url: string, options?: RequestOptionsArgs): Observable<Response> {
-    options = this.getOptionsForServer(server, url, options);
-    return this.http.delete(url, options);
+  delete<T>(server: Server, url: string, options?: JsonOptions): Observable<T> {
+    const intercepted = this.getOptionsForServer(server, url, options);
+    return this.http.delete<T>(intercepted.url, intercepted.options);
   }
 
-  patch(server: Server, url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
-    options = this.getOptionsForServer(server, url, options);
-    return this.http.patch(url, body, options);
+  patch<T>(server: Server, url: string, body: any, options?: JsonOptions): Observable<T> {
+    const intercepted = this.getOptionsForServer(server, url, options);
+    return this.http.patch<T>(intercepted.url, body, intercepted.options);
   }
 
-  head(server: Server, url: string, options?: RequestOptionsArgs): Observable<Response> {
-    options = this.getOptionsForServer(server, url, options);
-    return this.http.patch(url, options);
+  head<T>(server: Server, url: string, options?: JsonOptions): Observable<T> {
+    const intercepted = this.getOptionsForServer(server, url, options);
+    return this.http.head<T>(intercepted.url, intercepted.options);
   }
 
-  options(server: Server, url: string, options?: RequestOptionsArgs): Observable<Response> {
-    options = this.getOptionsForServer(server, url, options);
-    return this.http.options(url, options);
+  options<T>(server: Server, url: string, options?: JsonOptions): Observable<T> {
+    const intercepted = this.getOptionsForServer(server, url, options);
+    return this.http.options<T>(intercepted.url, intercepted.options);
   }
 
-  private getOptionsForServer(server: Server, url: string, options) {
-    if (options === undefined) {
-      options = new RequestOptions();
+  private getOptionsForServer<T extends HeadersOptions>(server: Server, url: string, options: T) {
+    if (options === null) {
+      options = {} as T;
     }
-    options.url = `http://${server.ip}:${server.port}/v2${url}`;
+
+    url = `http://${server.ip}:${server.port}/v2${url}`;
 
     if (options.headers === null) {
-      options.headers = new Headers();
+      options.headers = new HttpHeaders();
     }
 
     if (server.authorization === "basic") {
       const credentials = btoa(`${server.login}:${server.password}`);
-      options.headers.append('Authorization', `Basic ${credentials}`);
+      options.headers['Authorization'] = `Basic ${credentials}`;
     }
 
-    return options;
+    return {
+      url: url,
+      options: options
+    };
   }
 
 }

src/app/shared/services/link.service.ts

@@ -1,11 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Node } from '../../cartography/shared/models/node';
-import { Observable } from 'rxjs/Observable';
 
 import 'rxjs/add/operator/map';
 import { Server } from "../models/server";
 import { HttpServer } from "./http-server.service";
-import {Response} from "@angular/http";
 import {Port} from "../models/port";
 
 @Injectable()
@@ -15,7 +13,7 @@ export class LinkService {
   constructor(private httpServer: HttpServer) { }
 
   createLink(
-    server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port): Observable<Response> {
+    server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port) {
     return this.httpServer
                 .post(
                   server,

src/app/shared/services/node.service.ts

@@ -7,7 +7,6 @@ import 'rxjs/add/operator/map';
 import { Server } from "../models/server";
 import { HttpServer } from "./http-server.service";
 import {Appliance} from "../models/appliance";
-import {Response} from "@angular/http";
 
 
 @Injectable()
@@ -15,21 +14,19 @@ export class NodeService {
 
   constructor(private httpServer: HttpServer) { }
 
-  start(server: Server, node: Node): Observable<Node> {
+  start(server: Server, node: Node) {
     return this.httpServer
-                .post(server, `/projects/${node.project_id}/nodes/${node.node_id}/start`, {})
-                .map(response => response.json() as Node);
+                .post<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}/start`, {});
   }
 
-  stop(server: Server, node: Node): Observable<Node> {
+  stop(server: Server, node: Node) {
     return this.httpServer
-                .post(server, `/projects/${node.project_id}/nodes/${node.node_id}/stop`, {})
-                .map(response => response.json() as Node);
+                .post<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}/stop`, {});
   }
 
   createFromAppliance(
     server: Server, project: Project, appliance: Appliance,
-    x: number, y: number, compute_id: string): Observable<Response> {
+    x: number, y: number, compute_id: string) {
     return this.httpServer
                 .post(
                   server,
@@ -39,10 +36,9 @@ export class NodeService {
 
   updatePosition(server: Server, node: Node, x: number, y: number): Observable<Node> {
     return this.httpServer
-                .put(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
+                .put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
                   'x': x,
                   'y': y
-                })
-                .map(response => response.json() as Node);
+                });
   }
 }

src/app/shared/services/project.service.ts

@@ -14,40 +14,34 @@ export class ProjectService {
 
   constructor(private httpServer: HttpServer) { }
 
-  get(server: Server, project_id: string): Observable<Project> {
+  get(server: Server, project_id: string) {
     return this.httpServer
-                .get(server, `/projects/${project_id}`)
-                .map(response => response.json() as Project);
+                .get<Project>(server, `/projects/${project_id}`);
   }
 
-  open(server: Server, project_id: string): Observable<Project> {
+  open(server: Server, project_id: string) {
     return this.httpServer
-                .post(server, `/projects/${project_id}/open`, {})
-                .map(response => response.json() as Project);
+                .post<Project>(server, `/projects/${project_id}/open`, {});
   }
 
-  list(server: Server): Observable<Project[]> {
+  list(server: Server) {
     return this.httpServer
-                .get(server, '/projects')
-                .map(response => response.json() as Project[]);
+                .get<Project[]>(server, '/projects');
   }
 
-  nodes(server: Server, project_id: string): Observable<Node[]> {
+  nodes(server: Server, project_id: string) {
     return this.httpServer
-                .get(server, `/projects/${project_id}/nodes`)
-                .map(response => response.json() as Node[]);
+                .get<Node[]>(server, `/projects/${project_id}/nodes`);
   }
 
-  links(server: Server, project_id: string): Observable<Link[]> {
+  links(server: Server, project_id: string) {
     return this.httpServer
-                .get(server, `/projects/${project_id}/links`)
-                .map(response => response.json() as Link[]);
+                .get<Link[]>(server, `/projects/${project_id}/links`);
   }
 
-  drawings(server: Server, project_id: string): Observable<Drawing[]> {
+  drawings(server: Server, project_id: string) {
     return this.httpServer
-                .get(server, `/projects/${project_id}/drawings`)
-                .map(response => response.json() as Drawing[]);
+                .get<Drawing[]>(server, `/projects/${project_id}/drawings`);
   }
 
   delete(server: Server, project_id: string): Observable<any> {

src/app/shared/services/snapshot.service.ts

@@ -10,16 +10,14 @@ export class SnapshotService {
 
   constructor(private httpServer: HttpServer) { }
 
-  create(server: Server, project_id: string, snapshot: Snapshot): Observable<Snapshot> {
+  create(server: Server, project_id: string, snapshot: Snapshot) {
     return this.httpServer
-                .post(server, `/projects/${project_id}/snapshots`, snapshot)
-                .map(response => response.json() as Snapshot);
+                .post<Snapshot>(server, `/projects/${project_id}/snapshots`, snapshot);
   }
 
-  list(server: Server, project_id: string): Observable<Snapshot[]> {
+  list(server: Server, project_id: string) {
     return this.httpServer
-                .get(server, `/projects/${project_id}/snapshots`)
-                .map(response => response.json() as Snapshot[]);
+                .get<Snapshot[]>(server, `/projects/${project_id}/snapshots`);
   }
 
 }

src/app/shared/services/symbol.service.ts

@@ -26,9 +26,9 @@ export class SymbolService {
   load(server: Server): Observable<Symbol[]> {
     this.list(server).subscribe((symbols: Symbol[]) => {
       const streams = symbols.map(symbol => this.raw(server, symbol.symbol_id));
-      Observable.forkJoin(streams).subscribe((results: string[]) => {
+      Observable.forkJoin(streams).subscribe((results) => {
         symbols.forEach((symbol: Symbol, i: number) => {
-          symbol.raw = results[i];
+          symbol.raw = results[i].body;
         });
         this.symbols.next(symbols);
       });
@@ -36,16 +36,14 @@ export class SymbolService {
     return this.symbols.asObservable();
   }
 
-  list(server: Server): Observable<Symbol[]> {
+  list(server: Server) {
     return this.httpServer
-                .get(server, '/symbols')
-                .map(response => response.json() as Symbol[]);
+                .get<Symbol[]>(server, '/symbols');
   }
 
-  raw(server: Server, symbol_id: string): Observable<string> {
+  raw(server: Server, symbol_id: string) {
     const encoded_uri = encodeURI(symbol_id);
     return this.httpServer
-                .get(server, `/symbols/${encoded_uri}/raw`)
-                .map(response => response.text() as string);
+                .getText(server, `/symbols/${encoded_uri}/raw`);
   }
 }

src/app/shared/services/version.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 
 import 'rxjs/add/operator/map';
 
@@ -13,9 +12,8 @@ export class VersionService {
 
   constructor(private httpServer: HttpServer) { }
 
-  get(server: Server): Observable<Version> {
+  get(server: Server) {
     return this.httpServer
-                .get(server, '/version')
-                .map(response => response.json() as Version);
+                .get<Version>(server, '/version');
   }
 }