TSK-355: now displaying taskStatusReport in taskana monitor

monitor/src/app/app.module.ts

@@ -11,12 +11,19 @@ import { AngularSvgIconModule } from 'angular-svg-icon';
 import { AppComponent } from './app.component';
 import { TasksComponent } from './tasks/tasks.component';
 import { WorkbasketComponent } from './workbasket/workbasket.component';
+import { Report } from "./report/report.component";
+import { MapToIterable } from "./pipes/mapToIterable";
+import { OrderBy } from "./pipes/orderBy";
 
 @NgModule({
   declarations: [
     AppComponent,
     TasksComponent,
     WorkbasketComponent,
+    Report,
+    MapToIterable,
+    OrderBy
+
   ],
   imports: [
     BrowserModule,
@@ -31,4 +38,5 @@ import { WorkbasketComponent } from './workbasket/workbasket.component';
   providers: [HttpClientModule],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

monitor/src/app/model/report-meta.ts

@@ -0,0 +1,7 @@
+export class ReportMeta {
+  name: string;
+  date: string;
+  header: Array<string>;
+  rowDesc: string;
+  totalDesc: string;
+}

monitor/src/app/model/report.ts

@@ -0,0 +1,11 @@
+import { ReportMeta } from "./report-meta";
+
+export class ReportModel {
+  meta: ReportMeta;
+  // The keys of the rows object are unknown. They represent the name of that specific row.
+  // Each row (value of rows Object) has two keys: 'cells:Object' and 'total:number'.
+  // The keys of 'cells' are the same as 'meta.header:number'.
+  // This also applies to sumRow.
+  rows: Object;
+  sumRow: Object;
+}

monitor/src/app/pipes/mapToIterable.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'mapToIterable'
+})
+export class MapToIterable implements PipeTransform {
+  transform(dict: Object) {
+    let a = [];
+    for (let key in dict) {
+      if (dict.hasOwnProperty(key)) {
+        a.push({key: key, val: dict[key]});
+      }
+    }
+    return a;
+  }
+}

monitor/src/app/pipes/orderBy.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({name: 'orderBy'})
+
+export class OrderBy implements PipeTransform {
+  transform(records: Array<Object>, sortKeys?: string[]): any {
+    return records.sort(function (a, b) {
+      for (let i = 0; i < sortKeys.length; i++) {
+        let sortKey = sortKeys[i];
+        let direction = 1;
+        if (sortKey.charAt(0) == "-") {
+          direction = -1;
+          sortKey = sortKey.substr(1);
+        }
+
+        if (a[sortKey] < b[sortKey]) {
+          return -1 * direction;
+        } else if (a[sortKey] > b[sortKey]) {
+          return direction;
+        }
+      }
+      return 0;
+    });
+  };
+}

monitor/src/app/report/report.component.html

@@ -0,0 +1,22 @@
+<div class="row" *ngIf="model">
+  <div class="col-sm-12" style="margin-bottom: 10px">
+    <h4>{{model.meta.name}} ({{model.meta.date | date : 'dd.MM.yyyy HH:mm:ss'}})</h4>
+    <table class="table table-responsive table-condensed">
+      <tr>
+        <th>{{model.meta.rowDesc}}</th>
+        <th *ngFor="let header of model.meta.header">{{header}}</th>
+        <th>{{model.meta.totalDesc}}</th>
+      </tr>
+      <tr *ngFor="let row of model.rows | mapToIterable | orderBy:['key']">
+        <td>{{row.key}}</td>
+        <td *ngFor="let header of model.meta.header">{{row.val.cells[header]}}</td>
+        <th>{{row.val.total}}</th>
+      </tr>
+      <tr>
+        <th>{{model.meta.totalDesc}}</th>
+        <th *ngFor="let header of model.meta.header">{{model.sumRow.cells[header]}}</th>
+        <th>{{model.sumRow.total}}</th>
+      </tr>
+    </table>
+  </div>
+</div>

monitor/src/app/report/report.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { ReportModel } from "../model/report";
+
+@Component({
+  selector: 'report',
+  templateUrl: './report.component.html'
+})
+export class Report implements OnInit {
+
+  @Input()
+  model: ReportModel;
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+
+  }
+
+
+}

monitor/src/app/service/rest-connector.service.ts

@@ -1,14 +1,16 @@
 import { Injectable } from '@angular/core';
-import { RequestOptions, Headers, Http, Response } from '@angular/http';
+import { Headers, Http, RequestOptions } from '@angular/http';
 import { environment } from '../../environments/environment';
 import { Observable } from 'rxjs/Observable';
 import { State } from '../model/state';
 import { WorkbasketCounter } from '../model/workbasket-counter';
+import { ReportModel } from "../model/report";
 
 @Injectable()
 export class RestConnectorService {
 
-  constructor(private http: Http) { }
+  constructor(private http: Http) {
+  }
 
   getTaskStatistics(): Observable<State[]> {
     return this.http.get(environment.taskanaRestUrl + "/v1/monitor/countByState?states=READY,CLAIMED,COMPLETED", this.createAuthorizationHeader())
@@ -21,6 +23,11 @@ export class RestConnectorService {
       .map(res => res.json());
   }
 
+  getTaskStatusReport(): Observable<ReportModel> {
+    return this.http.get(environment.taskanaRestUrl + "/v1/monitor/taskStatusReport", this.createAuthorizationHeader())
+      .map(res => res.json());
+  }
+
   private createAuthorizationHeader() {
     let headers: Headers = new Headers();
     headers.append("Authorization", "Basic dXNlcl8xXzE6dXNlcl8xXzE=");

monitor/src/app/tasks/tasks.component.html

@@ -1,3 +1,4 @@
 <div style="display: block" *ngIf="isDataAvailable">
   <canvas baseChart [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType"></canvas>
 </div>
+<report *ngIf="isDataAvailable" [model]="taskStatusReport"></report>

monitor/src/app/tasks/tasks.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { RestConnectorService } from '../service/rest-connector.service';
-import { State } from '../model/state';
+import { Report } from "../report/report.component";
+import { ReportModel } from "../model/report";
 
 @Component({
   selector: 'tasks',
@@ -15,8 +16,11 @@ export class TasksComponent implements OnInit {
   pieChartData: number[] = [];
   pieChartType: string = 'pie';
   isDataAvailable: boolean = false;
+  report: Report;
+  taskStatusReport: ReportModel;
 
-  constructor(private restConnectorService: RestConnectorService) { }
+  constructor(private restConnectorService: RestConnectorService) {
+  }
 
   ngOnInit() {
     this.restConnectorService.getTaskStatistics().subscribe(data => {
@@ -35,7 +39,10 @@ export class TasksComponent implements OnInit {
       } else {
         this.pieChartData.push(0);
       }
-      this.isDataAvailable = true;
     });
+    this.restConnectorService.getTaskStatusReport().subscribe(report => {
+      this.taskStatusReport = report;
+      this.isDataAvailable = true;
+    })
   }
 }