Merge pull request #215 from iteratec/feature/showPerformanceAspectMetricsInFrontend

nilskuhn · web-flow · commit de655e52faed · 2019-06-13T09:43:31.000+02:00
Feature: shown page metrics are now the added performance aspects.
diff --git a/frontend/src/app/enums/metric.enum.ts b/frontend/src/app/enums/metric.enum.ts
diff --git a/frontend/src/app/enums/performance-aspect-types.enum.ts b/frontend/src/app/enums/performance-aspect-types.enum.ts
@@ -0,0 +1,5 @@
+export enum PerformanceAspectTypes {
+  PAGE_CONSTRUCTION_STARTED = "PAGE_CONSTRUCTION_STARTED",
+  PAGE_SHOWS_USEFUL_CONTENT = "PAGE_SHOWS_USEFUL_CONTENT",
+  PAGE_IS_USABLE = "PAGE_IS_USABLE"
+}
diff --git a/frontend/src/app/models/perfomance-aspect.model.ts b/frontend/src/app/models/perfomance-aspect.model.ts
@@ -17,4 +17,5 @@ export type ExtendedPerformanceAspect = PerformanceAspect & BrowserInfoDto
 export interface PerformanceAspectType {
   name: string
   icon: string
+  unit: string
 }
diff --git a/frontend/src/app/modules/application-dashboard/application-dashboard.component.html b/frontend/src/app/modules/application-dashboard/application-dashboard.component.html
@@ -31,7 +31,7 @@ <h2 class="card">{{ 'frontend.de.iteratec.osm.applicationDashboard.kpi.title' |
                               [selectedApplication]="selectedApplication$ | async"
                               class="card"></osm-application-job-status>
 
-  <osm-page *ngFor="let metric of pages$ | async" [metricsForPage]="metric"
+  <osm-page *ngFor="let metric of pages$ | async" [metricsForPage]="metric" [aspectTypes]="aspectTypes$ | async"
             [lastDateOfResult]="(selectedApplication$ | async)?.dateOfLastResults"
             [application]="selectedApplication$ | async"
             class="card"></osm-page>
diff --git a/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts b/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts
@@ -8,6 +8,8 @@ import {PageMetricsDto} from "./models/page-metrics.model";
 import {ApplicationCsi, ApplicationCsiById} from "../../models/application-csi.model";
 import {Csi} from "../../models/csi.model";
 import {FailingJobStatistic} from "./models/failing-job-statistic.model";
+import {PerformanceAspectService} from "../../services/performance-aspect.service";
+import {PerformanceAspectType} from "../../models/perfomance-aspect.model";
 
 @Component({
   selector: 'osm-application-dashboard',
@@ -24,13 +26,15 @@ export class ApplicationDashboardComponent implements OnDestroy {
   isLoading$: Observable<boolean>;
   failingJobStatistic$: Observable<FailingJobStatistic>;
   selectedApplication$: Observable<Application>;
+  aspectTypes$: Observable<PerformanceAspectType[]>;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private applicationService: ApplicationService
+    private applicationService: ApplicationService,
+    private performanceAspectService: PerformanceAspectService
   ) {
-    this.pages$ = this.applicationService.metrics$;
+    this.pages$ = this.applicationService.aspectMetrics$;
     this.applications$ = applicationService.applications$.pipe(
       filter(response => !response.isLoading && !!response.data),
       map(response => response.data)
@@ -47,6 +51,7 @@ export class ApplicationDashboardComponent implements OnDestroy {
       .subscribe(([navParams, applications]) => this.handleNavigation(navParams.get('applicationId'), applications));
     this.failingJobStatistic$ = this.applicationService.failingJobStatistics$;
     this.selectedApplication$ = this.applicationService.selectedApplication$;
+    this.aspectTypes$ = this.performanceAspectService.aspectTypes$;
   }
 
   private handleNavigation(applicationId: string, applications: Application[]) {
diff --git a/frontend/src/app/modules/application-dashboard/components/page-metric/page-metric.component.html b/frontend/src/app/modules/application-dashboard/components/page-metric/page-metric.component.html
@@ -1,7 +1,8 @@
 <div class="metric"
      title=" {{ isAvailable() ? '' : ('frontend.de.iteratec.osm.applicationDashboard.noMeasuredValue.hint' | translate) }}">
-  <i [ngClass]="metric?.icon" class="metric-icon"></i>
+  <i [ngClass]="metric?.icon" class="metric-icon" title="{{ 'frontend.de.iteratec.osm.performance-aspect.' + metric?.name + '.description' | translate }}"></i>
   <div class="metric-value">{{ isAvailable() ? value : "n/a"}}</div>
-  <div class="metric-unit" *ngIf="isAvailable()">{{ metric?.unit}}</div>
-  <div class="metric-description">{{ metric?.name }}</div>
+  <div class="metric-unit" *ngIf="isAvailable()">{{ determineUnit(metric?.unit) }}</div>
+  <div class="metric-description">{{ 'frontend.de.iteratec.osm.performance-aspect.' + metric?.name + '.user-centric-question' | translate }}</div>
+  <div ></div>
 </div>
diff --git a/frontend/src/app/modules/application-dashboard/components/page-metric/page-metric.component.spec.ts b/frontend/src/app/modules/application-dashboard/components/page-metric/page-metric.component.spec.ts
@@ -5,8 +5,8 @@ import {ApplicationService} from "../../../../services/application.service";
 import {By} from "@angular/platform-browser";
 import {Unit} from "../../../../enums/unit.enum";
 import {DebugElement} from "@angular/core";
-import {Metric} from "../../../../enums/metric.enum";
 import {SharedMocksModule} from "../../../../testing/shared-mocks.module";
+import {PerformanceAspectType} from "../../../../models/perfomance-aspect.model";
 
 describe('PageMetricComponent', () => {
   let component: PageMetricComponent;
@@ -38,7 +38,11 @@ describe('PageMetricComponent', () => {
   });
   it("should show the value if the value is available", () => {
     const value: string = "2.34";
-    const metric: Metric = new Metric("SpeedIndex", Unit.SECONDS, 'far fa-eye');
+    const metric: PerformanceAspectType = {
+      name: 'PAGE_CONSTRUCTION_STARTED',
+      icon: 'fas fa-eye',
+      unit: 'ms'
+    };
     component.value = value;
     component.metric = metric;
 
@@ -52,7 +56,11 @@ describe('PageMetricComponent', () => {
   });
   it("should be 'n/a' and without unit if the value is empty", () => {
     const value: string = "";
-    const metric: Metric = new Metric("SpeedIndex", Unit.SECONDS, 'far fa-eye');
+    const metric: PerformanceAspectType = {
+      name: 'PAGE_CONSTRUCTION_STARTED',
+      icon: 'fas fa-eye',
+      unit: 'ms'
+    };
     component.value = value;
     component.metric = metric;
 
diff --git a/frontend/src/app/modules/application-dashboard/components/page-metric/page-metric.component.ts b/frontend/src/app/modules/application-dashboard/components/page-metric/page-metric.component.ts
@@ -1,5 +1,6 @@
 import {Component, Input} from '@angular/core';
-import {Metric} from "../../../../enums/metric.enum";
+import {Unit} from "../../../../enums/unit.enum";
+import {PerformanceAspectType} from "../../../../models/perfomance-aspect.model";
 
 @Component({
   selector: 'osm-page-metric',
@@ -8,10 +9,18 @@ import {Metric} from "../../../../enums/metric.enum";
 })
 
 export class PageMetricComponent {
-  @Input() metric: Metric;
+  @Input() metric: PerformanceAspectType;
   @Input() value: string;
 
+  Unit: typeof Unit = Unit;
+
   public isAvailable(): boolean {
     return this.value !== '';
   }
+
+  determineUnit(unit: string): string {
+    if (unit === 'ms') {
+      return Unit.SECONDS
+    }
+  }
 }
diff --git a/frontend/src/app/modules/application-dashboard/components/page/page.component.html b/frontend/src/app/modules/application-dashboard/components/page/page.component.html
@@ -7,11 +7,12 @@ <h2>
   <osm-csi-value-medium [csiValue]="pageCsi$ | async" [csiDate]="pageCsiDate$ | async"
                         [showLoading]="isLoading" [lastResultDate]="lastDateOfResult"></osm-csi-value-medium>
   <div class="metric-list">
-    <osm-page-metric [value]="transform(convertMillisecsToSecs(metricsForPage?.speedIndex))"
-                     [metric]="metrics.SPEED_INDEX"></osm-page-metric>
-    <osm-page-metric [value]="transform(convertMillisecsToSecs(metricsForPage?.docCompleteTimeInMillisecs))"
-                     [metric]="metrics.DOCUMENT_COMPLETE"></osm-page-metric>
-    <osm-page-metric [value]="transform(convertToMib(metricsForPage?.fullyLoadedIncomingBytes))"
-                     [metric]="metrics.BYTES_FULLY_LOADED"></osm-page-metric>
+    <osm-page-metric [value]="transform(convertMillisecsToSecs(metricsForPage?.PAGE_CONSTRUCTION_STARTED))"
+                     [metric]="findCorrectPerformanceAspectType(PerformanceAspectTypes.PAGE_CONSTRUCTION_STARTED)"></osm-page-metric>
+    <osm-page-metric [value]="transform(convertMillisecsToSecs(metricsForPage?.PAGE_SHOWS_USEFUL_CONTENT))"
+                     [metric]="findCorrectPerformanceAspectType(PerformanceAspectTypes.PAGE_SHOWS_USEFUL_CONTENT)"></osm-page-metric>
+    <osm-page-metric [value]="transform(convertMillisecsToSecs(metricsForPage?.PAGE_IS_USABLE))"
+                     [metric]="findCorrectPerformanceAspectType(PerformanceAspectTypes.PAGE_IS_USABLE)"></osm-page-metric>
   </div>
+
 </div>
diff --git a/frontend/src/app/modules/application-dashboard/components/page/page.component.spec.ts b/frontend/src/app/modules/application-dashboard/components/page/page.component.spec.ts
@@ -40,13 +40,14 @@ describe('PageComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PageComponent);
     component = fixture.componentInstance;
-    component.application = new Application({name: 'app', id: 1})
+    component.application = new Application({name: 'app', id: 1});
+    component.aspectTypes = [{name: 'aspect-type-name', icon: 'aspect-type-icon', unit: 'aspect-type-unit'}];
     component.metricsForPage = {
       pageId: 1,
       pageName: 'page',
-      speedIndex: 2000,
-      docCompleteTimeInMillisecs: 1800,
-      fullyLoadedIncomingBytes: 3000
+      PAGE_CONSTRUCTION_STARTED: 2000,
+      PAGE_SHOWS_USEFUL_CONTENT: 1800,
+      PAGE_IS_USABLE: 3000
     };
     fixture.detectChanges();
   });
diff --git a/frontend/src/app/modules/application-dashboard/components/page/page.component.ts b/frontend/src/app/modules/application-dashboard/components/page/page.component.ts
@@ -6,8 +6,9 @@ import {map} from "rxjs/operators";
 import {CalculationUtil} from "../../../../utils/calculation.util";
 import {PageCsiDto} from "../../models/page-csi.model";
 import {ResponseWithLoadingState} from "../../../../models/response-with-loading-state.model";
-import {Metrics} from "../../../../enums/metric.enum";
 import {Application} from "../../../../models/application.model";
+import {PerformanceAspectType} from "../../../../models/perfomance-aspect.model";
+import {PerformanceAspectTypes} from "../../../../enums/performance-aspect-types.enum";
 
 @Component({
   selector: 'osm-page',
@@ -18,12 +19,14 @@ export class PageComponent {
   @Input() lastDateOfResult: string;
   @Input() metricsForPage: PageMetricsDto;
   @Input() application: Application;
+  @Input() aspectTypes: PerformanceAspectType[];
   pageCsi$: Observable<number>;
   pageCsiDate$: Observable<string>;
   isLoading: boolean = true;
-  metrics = Metrics;
+  PerformanceAspectTypes: typeof PerformanceAspectTypes = PerformanceAspectTypes;
 
   constructor(private applicationDashboardService: ApplicationService) {
+
     this.pageCsi$ = applicationDashboardService.pageCsis$.pipe(
       map((next: ResponseWithLoadingState<PageCsiDto[]>) => {
         this.isLoading = next.isLoading;
@@ -43,6 +46,9 @@ export class PageComponent {
     );
   }
 
+  findCorrectPerformanceAspectType(performanceAspectType: String): PerformanceAspectType {
+    return this.aspectTypes.find(item => item.name === performanceAspectType);
+  }
 
   transform(value: number): string {
     if (value) {
diff --git a/frontend/src/app/modules/application-dashboard/models/page-metrics.model.ts b/frontend/src/app/modules/application-dashboard/models/page-metrics.model.ts
@@ -1,7 +1,7 @@
 export interface PageMetricsDto {
   pageId: number;
   pageName: string;
-  speedIndex: number;
-  docCompleteTimeInMillisecs: number;
-  fullyLoadedIncomingBytes: number;
+  PAGE_CONSTRUCTION_STARTED: number;
+  PAGE_IS_USABLE: number;
+  PAGE_SHOWS_USEFUL_CONTENT: number;
 }
diff --git a/frontend/src/app/modules/aspect-configuration/components/aspect-metrics/aspect-metrics.component.spec.ts b/frontend/src/app/modules/aspect-configuration/components/aspect-metrics/aspect-metrics.component.spec.ts
@@ -33,7 +33,7 @@ describe('AspectMetricsComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(AspectMetricsComponent);
     component = fixture.componentInstance;
-    component.actualType = {name: 'aspect-type', icon: 'aspect-type-icon'};
+    component.actualType = {name: 'aspect-type', icon: 'aspect-type-icon', unit: 'aspect-type-unit'};
     fixture.detectChanges();
   });
 
@@ -43,8 +43,8 @@ describe('AspectMetricsComponent', () => {
   it('should filter aspects respective asp', inject(
     [AspectMetricsComponent, AspectConfigurationService],
     (component: AspectMetricsComponent, aspectConfService: AspectConfigurationService) => {
-      const type1: PerformanceAspectType = {name: 'PAGE_CONSTRUCTION_STARTED', icon: 'hourglass'};
-      const type2: PerformanceAspectType = {name: 'PAGE_SHOWS_USEFUL_CONTENT', icon: 'hourglass'};
+      const type1: PerformanceAspectType = {name: 'PAGE_CONSTRUCTION_STARTED', icon: 'hourglass', unit: 'ms'};
+      const type2: PerformanceAspectType = {name: 'PAGE_SHOWS_USEFUL_CONTENT', icon: 'hourglass', unit: 'ms'};
       const aspectsOfTwoDifferentTypes: ExtendedPerformanceAspect[] = [
         {
           id: 1,
diff --git a/frontend/src/app/modules/aspect-configuration/services/aspect-configuration.service.spec.ts b/frontend/src/app/modules/aspect-configuration/services/aspect-configuration.service.spec.ts
@@ -110,7 +110,7 @@ describe('AspectConfigurationService', () => {
           applicationId: 1,
           browserId: 1,
           measurand: {id: 'DOC_COMPLETE', name: 'Document complete'},
-          performanceAspectType: {name: 'PAGE_CONSTRUCTION_STARTED', icon: 'hourglass'},
+          performanceAspectType: {name: 'PAGE_CONSTRUCTION_STARTED', icon: 'hourglass', unit: 'ms'},
           persistent: true,
         }];
         const extendedAspects: ExtendedPerformanceAspect[] = service.extendAspects(aspects, []);
@@ -128,7 +128,7 @@ describe('AspectConfigurationService', () => {
             applicationId: 1,
             browserId: idOfExtended,
             measurand: {id: 'DOC_COMPLETE', name: 'Document complete'},
-            performanceAspectType: {name: 'PAGE_CONSTRUCTION_STARTED', icon: 'hourglass'},
+            performanceAspectType: {name: 'PAGE_CONSTRUCTION_STARTED', icon: 'hourglass', unit: 'ms'},
             persistent: true,
           },
           {
@@ -137,7 +137,7 @@ describe('AspectConfigurationService', () => {
             applicationId: 1,
             browserId: idOfNotExtended,
             measurand: {id: 'DOC_COMPLETE', name: 'Document complete'},
-            performanceAspectType: {name: 'PAGE_CONSTRUCTION_STARTED', icon: 'hourglass'},
+            performanceAspectType: {name: 'PAGE_CONSTRUCTION_STARTED', icon: 'hourglass', unit: 'ms'},
             persistent: true,
           }
         ];
diff --git a/frontend/src/app/modules/metric-finder/components/metric-selection/metric-selection.component.spec.ts b/frontend/src/app/modules/metric-finder/components/metric-selection/metric-selection.component.spec.ts
@@ -50,7 +50,7 @@ describe('MetricSelectionComponent', () => {
     expect(component.intersect(lists)).toEqual(expected);
   });
 
-  it('should determine available metrics from results', () => {
+  it('should determine available aspectMetrics from results', () => {
     const metricService: MetricFinderService = TestBed.get(MetricFinderService);
     const now = Date.now();
     component.results = [
diff --git a/frontend/src/app/services/application.service.ts b/frontend/src/app/services/application.service.ts
@@ -10,7 +10,16 @@ import {
   ApplicationCsiDTOById
 } from "../models/application-csi.model";
 import {Application, ApplicationDTO} from "../models/application.model";
-import {catchError, distinctUntilKeyChanged, filter, map, startWith, switchMap, withLatestFrom} from "rxjs/operators";
+import {
+  catchError,
+  distinctUntilKeyChanged,
+  filter,
+  map,
+  startWith,
+  switchMap,
+  tap,
+  withLatestFrom
+} from "rxjs/operators";
 import {ResponseWithLoadingState} from "../models/response-with-loading-state.model";
 import {FailingJobStatistic} from "../modules/application-dashboard/models/failing-job-statistic.model";
 import {GraphiteServer, GraphiteServerDTO} from "../modules/application-dashboard/models/graphite-server.model";
@@ -19,11 +28,10 @@ import {Csi, CsiDTO} from "../models/csi.model";
 
 @Injectable()
 export class ApplicationService {
+  aspectMetrics$: BehaviorSubject<PageMetricsDto[]> = new BehaviorSubject<PageMetricsDto[]>([]);
 
   applications$ = new BehaviorSubject<ResponseWithLoadingState<Application[]>>({isLoading: false, data: null});
   selectedApplication$ = new ReplaySubject<Application>(1);
-
-  metrics$ = new BehaviorSubject<PageMetricsDto[]>([]);
   applicationCsiById$ = new BehaviorSubject<ApplicationCsiById>({isLoading: false});
   pageCsis$ = new ReplaySubject<ResponseWithLoadingState<PageCsiDto[]>>(1);
   failingJobStatistics$ = new ReplaySubject<FailingJobStatistic>(1);
@@ -36,8 +44,8 @@ export class ApplicationService {
     this.loadApplications();
 
     this.selectedApplication$.pipe(
-      switchMap((application: Application) => this.updateMetricsForPages(application))
-    ).subscribe(this.metrics$);
+      switchMap((application: Application) => this.updateAspectMetricsForPages(application))
+    ).subscribe(this.aspectMetrics$);
 
     this.selectedApplication$.pipe(
       switchMap((application: Application) => this.updateCsiForApplication(application)),
@@ -147,11 +155,11 @@ export class ApplicationService {
     );
   }
 
-  private updateMetricsForPages(applicationDto: Application): Observable<PageMetricsDto[]> {
+  private updateAspectMetricsForPages(application: Application): Observable<PageMetricsDto[]> {
     this.pageCsis$.next({data: [], isLoading: true});
-    this.metrics$.next(null);
-    const params = this.createParams(applicationDto.id);
-    return this.http.get<PageMetricsDto[]>('/applicationDashboard/rest/getMetricsForApplication', {params}).pipe(
+    this.aspectMetrics$.next(null);
+    const params = this.createParams(application.id);
+    return this.http.get<PageMetricsDto[]>('/applicationDashboard/rest/getAspectMetricsForApplication', {params}).pipe(
       this.handleError()
     )
   }
diff --git a/grails-app/controllers/de/iteratec/osm/result/ApplicationDashboardController.groovy b/grails-app/controllers/de/iteratec/osm/result/ApplicationDashboardController.groovy
@@ -42,12 +42,11 @@ class ApplicationDashboardController {
         return ControllerUtils.sendObjectAsJSON(response, pageCsiDtos)
     }
 
-    def getMetricsForApplication(DefaultApplicationCommand command) {
+    def getAspectMetricsForApplication(DefaultApplicationCommand command) {
         Long jobGroupId = command.applicationId
 
-        List<Map> activePagesAndMetrics = applicationDashboardService.getAllActivePagesAndMetrics(jobGroupId)
-
-        return ControllerUtils.sendObjectAsJSON(response, activePagesAndMetrics)
+        List<Map> activePagesAndAspectMetrics = applicationDashboardService.getAllActivePagesAndAspectMetrics(jobGroupId)
+        return ControllerUtils.sendObjectAsJSON(response, activePagesAndAspectMetrics)
     }
 
     def getPerformanceAspectsForApplication(PerformanceAspectManagementRequestCommand command) {
diff --git a/grails-app/controllers/de/iteratec/osm/result/AspectConfigurationController.groovy b/grails-app/controllers/de/iteratec/osm/result/AspectConfigurationController.groovy
@@ -30,7 +30,7 @@ class AspectConfigurationController {
     @RestAction
     def getAspectTypes() {
         List<PerformanceAspectTypeDto> types = PerformanceAspectType.values().collect {
-            new PerformanceAspectTypeDto(name: it.toString(), icon: it.icon)
+            new PerformanceAspectTypeDto(name: it.toString(), icon: it.icon, unit: it.unit.label)
         }
         ControllerUtils.sendObjectAsJSON(response, types)
     }
diff --git a/grails-app/services/de/iteratec/osm/result/ApplicationDashboardService.groovy b/grails-app/services/de/iteratec/osm/result/ApplicationDashboardService.groovy
diff --git a/src/main/groovy/de/iteratec/osm/result/PerformanceAspectType.groovy b/src/main/groovy/de/iteratec/osm/result/PerformanceAspectType.groovy
diff --git a/src/main/groovy/de/iteratec/osm/result/dao/PerformanceAspectTypeDto.groovy b/src/main/groovy/de/iteratec/osm/result/dao/PerformanceAspectTypeDto.groovy

Original file line number	Diff line number	Diff line change
`@@ -17,4 +17,5 @@ export type ExtendedPerformanceAspect = PerformanceAspect & BrowserInfoDto`
`17`	`17`	`export interface PerformanceAspectType {`
`18`	`18`	`name: string`
`19`	`19`	`icon: string`
	`20`	`+ unit: string`
`20`	`21`	`}`