gh-536 Replace HttpModule with HttpClientModule

* Update Tests (Refactoring of HttpClient mocks)
* Ensure that lint warnings related to Http module are fixed
* Minor fix to make bundle analyzer work: Update `webpack-bundle-analyzer` to `2.13.1`
* Fix RxJS lint warnings due to deprecation
* Start to Remove unused imports
* Fix Lint errors

Author: ghillert

ui/package.json

@@ -82,7 +82,7 @@
     "@types/d3-dsv": "1.0.31",
     "browserstack-local": "1.3.3",
     "napa": "3.0.0",
-    "webpack-bundle-analyzer": "2.9.0",
+    "webpack-bundle-analyzer": "2.13.1",
     "protractor-docker-plugin": "./protractor-docker-plugin"
   },
   "napa-config": {

ui/src/app/about/about.service.spec.ts

@@ -1,7 +1,6 @@
 import { AboutService } from './about.service';
 import { Observable } from 'rxjs/Observable';
 import { ErrorHandler } from '../shared/model/error-handler';
-import { Response, ResponseOptions } from '@angular/http';
 import { SharedAboutService } from '../shared/services/shared-about.service';
 import { BusyService } from '../shared/services/busy.service';
 
@@ -102,19 +101,22 @@ describe('AboutService', () => {
     };
 
   beforeEach(() => {
-    this.mockHttp = jasmine.createSpyObj('mockHttp', ['get']);
-    const mockResponse = new Response(new ResponseOptions({
-      body: JSON.stringify(jsonData)
-    }));
-    this.mockHttp.get.and.returnValue(Observable.of(mockResponse));
+    this.mockHttp = {
+        get: jasmine.createSpy('get'),
+      };
+    this.mockHttp.get.and.returnValue(Observable.of(jsonData));
     const errorHandler = new ErrorHandler();
     this.sharedAboutService = new SharedAboutService(new BusyService(), this.mockHttp, errorHandler);
-    this.aboutService = new AboutService(this.sharedAboutService, this.mockHttp, errorHandler);
+    this.aboutService = new AboutService(this.sharedAboutService);
   });
 
   it('should call the about service with the right url', () => {
     this.aboutService.getAboutInfo(true);
-    expect(this.mockHttp.get).toHaveBeenCalledWith('/about');
+
+    const httpUri = this.mockHttp.get.calls.mostRecent().args[0];
+    const headerArgs = this.mockHttp.get.calls.mostRecent().args[1];
+    expect(httpUri).toEqual('/about');
+    expect(headerArgs).toBeUndefined();
   });
 
   it('should return the correct json data', () => {

ui/src/app/about/about.service.ts

@@ -1,11 +1,9 @@
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
-import { ErrorHandler } from '../shared/model/error-handler';
 
 import { SharedAboutService } from '../shared/services/shared-about.service';
 import { FeatureInfo } from '../shared/model/about/feature-info.model';
@@ -18,12 +16,8 @@ export class AboutService {
    * Constructor
    *
    * @param {SharedAboutService} sharedAboutService
-   * @param {Http} http
-   * @param {ErrorHandler} errorHandler
    */
-  constructor(private sharedAboutService: SharedAboutService,
-              private http: Http,
-              private errorHandler: ErrorHandler) {
+  constructor(private sharedAboutService: SharedAboutService) {
   }
 
   /**

ui/src/app/about/about/about.component.ts

@@ -31,10 +31,8 @@ export class AboutComponent implements OnInit {
    * Constructor
    *
    * @param {AboutService} aboutService
-   * @param {Router} router
    */
-  constructor(private aboutService: AboutService,
-              private router: Router) {
+  constructor(private aboutService: AboutService) {
   }
 
   /**

ui/src/app/analytics/analytics.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Http, Response, RequestOptionsArgs, URLSearchParams } from '@angular/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/catch';
@@ -43,7 +43,7 @@ export class AnalyticsService {
   private rowId = 1; // For Dashboard
   public dashboardItems: DashboardItem[];
 
-  constructor(private http: Http,
+  constructor(private httpClient: HttpClient,
               private errorHandler: ErrorHandler,
               private loggerService: LoggerService,
               private notificationService: NotificationService) {
@@ -119,14 +119,16 @@ export class AnalyticsService {
     }
 
     const params = HttpUtils.getPaginationParams(this.counters.pageNumber, this.counters.pageSize);
-    const requestOptionsArgs: RequestOptionsArgs = HttpUtils.getDefaultRequestOptions();
+    const httpHeaders = HttpUtils.getDefaultHttpHeaders();
 
     if (detailed) {
       params.append('detailed', detailed.toString());
     }
 
-    requestOptionsArgs.search = params;
-    return this.http.get(this.metricsCountersUrl, requestOptionsArgs)
+    return this.httpClient.get<any>(this.metricsCountersUrl, {
+      headers: httpHeaders,
+      params: params
+    })
       .map(response => this.extractData(response, detailed))
       .catch(this.errorHandler.handleError) as Observable<Page<Counter>>;
   }
@@ -136,10 +138,12 @@ export class AnalyticsService {
    */
   private getAllFieldValueCounters(): Observable<Page<FieldValueCounter>> {
     const params = HttpUtils.getPaginationParams(0, 100);
-    const requestOptionsArgs: RequestOptionsArgs = HttpUtils.getDefaultRequestOptions();
+    const httpHeaders = HttpUtils.getDefaultHttpHeaders();
 
-    requestOptionsArgs.search = params;
-    return this.http.get(this.metricsFieldValueCountersUrl, requestOptionsArgs)
+    return this.httpClient.get<any>(this.metricsFieldValueCountersUrl, {
+      params: params,
+      headers: httpHeaders
+    })
       .map(response => this.extractData(response, false))
       .catch(this.errorHandler.handleError) as Observable<Page<FieldValueCounter>>;
   }
@@ -149,16 +153,17 @@ export class AnalyticsService {
    */
   private getAllAggregateCounters(): Observable<Page<AggregateCounter>> {
     const params = HttpUtils.getPaginationParams(0, 100);
-    const requestOptionsArgs: RequestOptionsArgs = HttpUtils.getDefaultRequestOptions();
+    const httpHeaders = HttpUtils.getDefaultHttpHeaders();
 
-    requestOptionsArgs.search = params;
-    return this.http.get(this.metricsAggregateCountersUrl, requestOptionsArgs)
+    return this.httpClient.get<any>(this.metricsAggregateCountersUrl, {
+      params: params,
+      headers: httpHeaders
+    })
       .map(response => this.extractData(response, false))
       .catch(this.errorHandler.handleError) as Observable<Page<AggregateCounter>>;
   }
 
-  private extractData(response: Response, handleRates: boolean): Page<BaseCounter> {
-    const body = response.json();
+  private extractData(body, handleRates: boolean): Page<BaseCounter> {
     const items: BaseCounter[] = [];
     const cache: BaseCounter[] = [];
 
@@ -374,10 +379,11 @@ export class AnalyticsService {
    * @param counterName Name of the counter for which to retrieve details
    */
   private getSingleCounter(counterName: string): Observable<Counter> {
-    const requestOptionsArgs: RequestOptionsArgs = HttpUtils.getDefaultRequestOptions();
-    return this.http.get(this.metricsCountersUrl + '/' + counterName, requestOptionsArgs)
-      .map(response => {
-        const body = response.json();
+    const httpHeaders = HttpUtils.getDefaultHttpHeaders();
+    return this.httpClient.get<any>(this.metricsCountersUrl + '/' + counterName, {
+      headers: httpHeaders
+    })
+      .map(body => {
         this.loggerService.log('body', body);
         return new Counter().deserialize(body);
       })
@@ -390,10 +396,11 @@ export class AnalyticsService {
    * @param counterName Name of the counter for which to retrieve details
    */
   private getSingleFieldValueCounter(counterName: string): Observable<FieldValueCounter> {
-    const requestOptionsArgs: RequestOptionsArgs = HttpUtils.getDefaultRequestOptions();
-    return this.http.get(this.metricsFieldValueCountersUrl + '/' + counterName, requestOptionsArgs)
-      .map(response => {
-        const body = response.json();
+    const httpHeaders = HttpUtils.getDefaultHttpHeaders();
+    return this.httpClient.get<any>(this.metricsFieldValueCountersUrl + '/' + counterName, {
+      headers: httpHeaders
+    })
+      .map(body => {
         return new FieldValueCounter().deserialize(body);
       })
       .catch(this.errorHandler.handleError);
@@ -405,16 +412,16 @@ export class AnalyticsService {
    * @param counterName Name of the counter for which to retrieve details
    */
   private getSingleAggregateCounter(counter: AggregateCounter): Observable<AggregateCounter> {
-    const requestOptionsArgs: RequestOptionsArgs = HttpUtils.getDefaultRequestOptions();
-    const params = new URLSearchParams();
-
-    requestOptionsArgs.params = params;
+    const httpHeaders = HttpUtils.getDefaultHttpHeaders();
+    const params = new HttpParams();
 
     params.append('resolution', counter.resolutionType.name.toLowerCase());
 
-    return this.http.get(this.metricsAggregateCountersUrl + '/' + counter.name, requestOptionsArgs)
-      .map(response => {
-        const body = response.json();
+    return this.httpClient.get<any>(this.metricsAggregateCountersUrl + '/' + counter.name, {
+      headers: httpHeaders,
+      params: params
+    })
+      .map(body => {
         return new AggregateCounter().deserialize(body);
       })
       .catch(this.errorHandler.handleError);

ui/src/app/analytics/charts/bar-chart/bar-chart.component.ts

@@ -1,5 +1,5 @@
 import {
-  OnChanges, ChangeDetectionStrategy, Component,
+  OnChanges, Component,
   OnInit, HostListener, ViewChild,
   ElementRef, Input, ViewEncapsulation } from '@angular/core';
 import * as d3 from 'd3';

ui/src/app/analytics/charts/bubble-chart/bubble-chart.component.ts

@@ -1,6 +1,6 @@
 import {
-  OnChanges, ChangeDetectionStrategy, Component,
-  OnInit, DoCheck, HostListener, ViewChild, ElementRef,
+  OnChanges, Component,
+  OnInit, HostListener, ViewChild, ElementRef,
   Input, ViewEncapsulation } from '@angular/core';
 
 import * as d3 from 'd3';
@@ -32,9 +32,6 @@ export class BubbleChartComponent implements OnInit, OnChanges {
     private chartDataToUse: FieldValueCounterValue[];
 
     private chart: any;
-    private xScale: any;
-    private yScale: any;
-    private xAxis: any;
 
     /**
      * Initialize the component and trigger the rendering of the chart.
@@ -129,8 +126,6 @@ export class BubbleChartComponent implements OnInit, OnChanges {
 
       const localThis = this;
 
-      const radius = Math.min(widthToUse, heightToUse) / 2;
-
       if (!localThis.chartDataToUse) {
         return;
       } else {
@@ -182,6 +177,4 @@ export class BubbleChartComponent implements OnInit, OnChanges {
           });
     }
 
-    private updateChart() {
-    }
 }

ui/src/app/analytics/charts/graph-chart/graph-chart.component.ts

@@ -197,25 +197,6 @@ export class GraphChartComponent implements OnInit, DoCheck {
         })
       .curve(d3.curveBasis);
 
-      const xAxisGroup = svg
-      .append('g')
-      .attr('class', 'x axis')
-      .attr('transform', 'translate(0,' + (height - margin.bottom) + ')')
-      .attr('fill', 'none')
-      .attr('stroke', '#777')
-      .attr('opacity', 1.0)
-      .attr('shape-rendering', 'crispEdges')
-      .call(xAxis);
-
-      const yAxisGroup = svg.append('g')
-      .attr('class', 'y axis')
-      .attr('transform', 'translate(' + (margin.left) + ',0)')
-      .attr('fill', 'none')
-      .attr('stroke', '#777')
-      .attr('opacity', 1.0)
-      .attr('shape-rendering', 'crispEdges')
-      .call(yAxis);
-
       svg.append('path')
         .datum(dataItemsToUse)
         .attr('d', lineGen)

ui/src/app/analytics/charts/pie-chart/pie-chart.component.ts

@@ -1,6 +1,6 @@
 import {
-  OnChanges, ChangeDetectionStrategy, Component,
-  OnInit, DoCheck, HostListener, ViewChild,
+  OnChanges, Component,
+  OnInit, HostListener, ViewChild,
   ElementRef, Input, ViewEncapsulation } from '@angular/core';
 
 import * as d3 from 'd3';
@@ -252,8 +252,4 @@ export class PieChartComponent implements OnInit, OnChanges {
         return localThis.chartDataToUse[i].key;
       });
   }
-
-  private updateChart() {
-    const localThis = this;
-  }
 }

ui/src/app/analytics/counters/counters.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { AnalyticsService } from '../analytics.service';
-import { Counter } from '../model/counter.model';
 import { LoggerService } from '../../shared/services/logger.service';
 
 /**

ui/src/app/analytics/dashboard/dashboard.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { AnalyticsService } from '../analytics.service';
-import { AggregateCounter, AggregateCounterResolutionType, DashboardItem, MetricType } from '../model';
+import { AggregateCounterResolutionType, DashboardItem, MetricType } from '../model';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs/Subject';
 import { NotificationService } from '../../shared/services/notification.service';

ui/src/app/analytics/model/aggregate-counter-resolution-type.model.ts

@@ -1,5 +1,3 @@
-import { Serializable } from '../../shared/model';
-
 /**
  * Mimics the corresponding AggregateCounterResolution class from the
  * server-side. Represents a time-resolution supported by the

ui/src/app/analytics/model/aggregate-counter.model.spec.ts

@@ -68,10 +68,6 @@ describe('AggregateCounter', () => {
       const values = counter.getValues();
 
       expect(values.length).toBe(4);
-
-      const expectedTime0: Moment = moment('2017-09-27T00:03:58.378Z');
-      const expectedTime1: Moment = moment('2017-09-27T00:04:58.378Z');
-
       expect(values[0]).toBe(654);
       expect(values[1]).toBe(861);
     });

ui/src/app/app.module.ts

@@ -1,7 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, APP_INITIALIZER } from '@angular/core';
-import { RequestOptions } from '@angular/http';
-import { SecurityAwareRequestOptions } from './auth/support/security-aware-request-options';
 
 /* Feature Modules */
 import { AboutModule } from './about/about.module';
@@ -67,10 +65,6 @@ export function init(authService: AuthService, sharedAboutService: SharedAboutSe
       'useFactory': init,
       'deps': [ AuthService, SharedAboutService ],
       'multi': true
-    },
-    {
-      'provide': RequestOptions,
-      'useClass': SecurityAwareRequestOptions
     }
   ],
   bootstrap: [ AppComponent ]

ui/src/app/apps/app-details/app-details.component.ts

@@ -1,15 +1,14 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
 import { AppsService } from '../apps.service';
 import { ApplicationType, DetailedAppRegistration } from '../../shared/model';
-import { Subscription } from 'rxjs/Subscription';
 import { SharedAboutService } from '../../shared/services/shared-about.service';
 import { AppRegistration } from '../../shared/model/app-registration.model';
 import { FeatureInfo } from '../../shared/model/about/feature-info.model';
 import { AppVersionsComponent } from '../app-versions/app-versions.component';
 import { BsModalService } from 'ngx-bootstrap';
 import { SortParams } from '../../shared/components/shared.interface';
-import { combineLatest } from 'rxjs/operators/combineLatest';
+import { combineLatest } from 'rxjs';
 import { Subject } from 'rxjs/Subject';
 import { takeUntil } from 'rxjs/operators';
 import { BusyService } from '../../shared/services/busy.service';
@@ -97,8 +96,9 @@ export class AppDetailsComponent implements OnInit, OnDestroy {
    */
   ngOnInit() {
     this.loggerService.log('App Service Details');
-    this.sharedAboutService.getFeatureInfo()
-      .pipe(combineLatest(this.route.params))
+    const featureInfo$ = this.sharedAboutService.getFeatureInfo();
+
+    combineLatest(featureInfo$, this.route.params)
       .subscribe((data: any[]) => {
         const featureInfo = data[0] as FeatureInfo;
         const params = data[1] as Params;

ui/src/app/apps/apps-bulk-import/apps-bulk-import.validator.ts

@@ -1,5 +1,4 @@
 import {FormControl, FormGroup} from '@angular/forms';
-import {AppsBulkImportComponent} from './apps-bulk-import.component';
 
 /**
  * Validators for Bulk Import Form