gh-408 Refactor and port Analytics Dashboard tab

* Add `app-counter-header` directive
* Add Bar Chart

Fixed Code review comments on merge.
Identified and fixed a couple of bugs as well.

Author: ghillert

ui/src/app/analytics/analytics.module.ts

@@ -7,11 +7,19 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 
 import { AnalyticsService } from './analytics.service';
 import { AnalyticsRoutingModule } from './analytics-routing.module';
+import { BarChartComponent } from './charts/bar-chart/bar-chart.component';
 import { GraphChartComponent } from './charts/graph-chart/graph-chart.component';
+import { CounterHeaderComponent } from './components/counter-header.component';
 
 @NgModule({
   imports:      [ AnalyticsRoutingModule, SharedModule ],
-  declarations: [ AnalyticsComponent, CountersComponent, DashboardComponent, GraphChartComponent ],
+  declarations: [
+    AnalyticsComponent,
+    BarChartComponent,
+    CountersComponent,
+    CounterHeaderComponent,
+    DashboardComponent,
+    GraphChartComponent ],
   providers:    [ AnalyticsService ]
 })
 export class AnalyticsModule { }

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

@@ -7,7 +7,10 @@ import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
 
 import { ErrorHandler, Page } from '../shared/model';
-import { Counter } from './counters/model/counter.model';
+import { Counter } from './model/counter.model';
+import { DashboardItem } from './model/dashboard-item.model';
+import { MetricType } from './model/metric-type.model';
+
 import { HttpUtils } from '../shared/support/http.utils';
 import { ToastyService } from 'ng2-toasty';
 /**
@@ -22,6 +25,11 @@ export class AnalyticsService {
   public _counterInterval = 2;
   public counterPoller: Subscription;
 
+  public metricTypes: MetricType[] = MetricType.getMetricTypes();
+
+  private rowId = 1; // For Dashboard
+  public dashboardItems: DashboardItem[];
+
   constructor(
     private http: Http,
     private errorHandler: ErrorHandler,
@@ -89,10 +97,11 @@ export class AnalyticsService {
    *
    * @param detailed If true will request additional counter values from the REST endpoint
    */
-  public getAllCounters(detailed = false): Observable<Page<Counter>> {
+  private  getAllCounters(detailed = false): Observable<Page<Counter>> {
 
       if (!this.counters) {
         this.counters = new Page<Counter>();
+        this.counters.pageSize = 50;
       }
 
       const params = HttpUtils.getPaginationParams(this.counters.pageNumber, this.counters.pageSize);
@@ -104,28 +113,38 @@ export class AnalyticsService {
 
       requestOptionsArgs.search = params;
       return this.http.get(this.metricsCountersUrl, requestOptionsArgs)
-                      .map(this.extractData.bind(this))
+                      .map(response => this.extractData(response, detailed))
                       .catch(this.errorHandler.handleError);
   }
 
-  private extractData(response: Response): Page<Counter> {
+  private extractData(response: Response, handleRates: boolean): Page<Counter> {
     const body = response.json();
     const items: Counter[] = [];
     const cache: Counter[] = [];
-    for (const oldCounter of this.counters.items) {
-      cache[oldCounter.name] = oldCounter;
-    }
-    if (body._embedded && body._embedded.counterResourceList) {
-      for (const counterResourceListItems of body._embedded.counterResourceList) {
-        const counter = new Counter().deserialize(counterResourceListItems);
-
-        if (cache[counter.name]) {
-          const cached = cache[counter.name];
-          counter.rates = cached.rates;
-          counter.rates.push((counter.value - cached.value) / this.counterInterval);
-          counter.rates.splice(0, counter.rates.length - this.totalCacheSize());
+
+    if (handleRates) {
+      for (const oldCounter of this.counters.items) {
+        cache[oldCounter.name] = oldCounter;
+      }
+      if (body._embedded && body._embedded.counterResourceList) {
+        for (const counterResourceListItems of body._embedded.counterResourceList) {
+          const counter = new Counter().deserialize(counterResourceListItems);
+
+          if (cache[counter.name]) {
+            const cached = cache[counter.name];
+            counter.rates = cached.rates;
+            counter.rates.push((counter.value - cached.value) / this.counterInterval);
+            counter.rates.splice(0, counter.rates.length - this.totalCacheSize());
+          }
+          items.push(counter);
+        }
+      }
+    } else {
+      if (body._embedded && body._embedded.metricResourceList) {
+        for (const metricResourceListItems of body._embedded.metricResourceList) {
+          const counter = new Counter().deserialize(metricResourceListItems);
+          items.push(counter);
         }
-        items.push(counter);
       }
     }
 
@@ -138,4 +157,129 @@ export class AnalyticsService {
     this.counters.update(page);
     return page;
   }
+
+  /**
+   * Adds a new empty dashboard item to the dashboardItems array.
+   * @param {number} index the location it should be added.
+   * @returns {DashboardItem} the new instance of the {DashboardItem}.
+   */
+  addNewDashboardItem(index?: number): DashboardItem {
+    if (!this.dashboardItems) {
+      this.dashboardItems = [];
+    }
+    const dashboardItem = new DashboardItem();
+    dashboardItem.id = this.rowId++;
+    dashboardItem.refreshRate = 2;
+    dashboardItem.visualization = '';
+
+    if (index) {
+      this.dashboardItems.splice(index, 0, dashboardItem);
+    } else {
+      this.dashboardItems.push(dashboardItem);
+    }
+    return dashboardItem;
+  }
+
+  /**
+   * Remove dashboard item from dashboardItems array and splice the array.
+   * @param {number} index the offset of the dashboard item to remove.
+   */
+  removeDashboardItem(index: number): void {
+    if (!this.dashboardItems || this.dashboardItems.length === 0) {
+      return;
+    }
+    this.dashboardItems.splice(index, 1);
+  }
+
+  /**
+   * Retrieve a list of all dashboardItems.
+   * @returns {Observable<DashboardItem>} observable of dashboard items.
+   */
+  getAllDashboardItems(): Observable<DashboardItem> {
+    if (!this.dashboardItems) {
+      this.addNewDashboardItem();
+    }
+    return Observable.from(this.dashboardItems);
+  }
+
+  /**
+   * Retrieve all metrics for a specific type.
+   * @param {MetricType} metricType the specific metric type to retrieve.
+   * @returns {Observable<Page<Counter>>} Page containing the metrics.
+   */
+  getStreamsForMetricType(metricType: MetricType) {
+    if (MetricType.COUNTER === metricType) {
+      return this.getAllCounters();
+    } else {
+      this.toastyService.error(`Metric type ${metricType.name} is not supported.`);
+    }
+  }
+
+  resetDashboard() {
+    this.dashboardItems.length = 0;
+    this.addNewDashboardItem();
+  }
+
+    /**
+   * Starts the polling process for a single counters. Method
+   * will check if the poller is already running and will
+   * start the poller only if the poller is undefined or
+   * stopped. The subscription is store on the {@link DashboardItem}.
+   */
+  public startPollingForSingleDashboardItem(dashboardItem: DashboardItem) {
+    console.log(dashboardItem);
+    if (!dashboardItem.counterPoller || dashboardItem.counterPoller.closed) {
+      dashboardItem.counterPoller = Observable.interval(dashboardItem.refreshRate * 1000)
+        .switchMap(() => this.getSingleCounter(dashboardItem.counter.name)).subscribe(
+          result => {
+            dashboardItem.counter.rates.push((result.value - dashboardItem.counter.value) / dashboardItem.refreshRate);
+            dashboardItem.counter.rates.splice(0, dashboardItem.counter.rates.length - this.totalCacheSize());
+            dashboardItem.counter.value = result.value;
+          },
+          error => {
+            console.log('error', error);
+            this.toastyService.error(error);
+          });
+    }
+  }
+
+  /**
+   * Stops the polling process for counters if the poller
+   * is running and is defined.
+   */
+  public stopPollingOfSingleDashboardItem(dashboardItem: DashboardItem) {
+    if (dashboardItem.counterPoller && !dashboardItem.counterPoller.closed) {
+      dashboardItem.counterPoller.unsubscribe();
+    }
+  }
+
+  /**
+   * Restarts the polling process for counters if the poller
+   * is running and is defined. Will stop the poller first and restart
+   * the counter with the {@link DashboardItem}s refresh rate.
+   *
+   * Will NOT restart the poller if the refresh rate is zero.
+   */
+  public restartPollingOfSingleDashboardItem(dashboardItem: DashboardItem) {
+    this.stopPollingOfSingleDashboardItem(dashboardItem);
+    if (dashboardItem.refreshRate > 0 ) {
+      this.startPollingForSingleDashboardItem(dashboardItem);
+    }
+  }
+
+  /**
+   * Retrieves all counters. Will take pagination into account.
+   *
+   * @param detailed If true will request additional counter values from the REST endpoint
+   */
+  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();
+                            console.log('body', body);
+                            return new Counter().deserialize(body);
+                          })
+                          .catch(this.errorHandler.handleError);
+      }
 }

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

@@ -0,0 +1 @@
+<div class="d3-chart" #chart></div>

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

@@ -0,0 +1,11 @@
+@import '~pivotal-ui-git-clone/src/css/pui-variables';
+
+.d3-chart {
+  .bar {
+    fill: $blue-1;
+
+    &:hover {
+      fill: $blue-3;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BarChartComponent } from './bar-chart.component';
+
+describe('BarChartComponent', () => {
+  let component: BarChartComponent;
+  let fixture: ComponentFixture<BarChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BarChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BarChartComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});