Skip to content
Permalink
Browse files

Merge branch 'develop' into feature/distributionResultSelection

  • Loading branch information...
j0weiss authored and BennyLi committed Sep 10, 2019
2 parents 0c3e23e + ca863a2 commit bf5b8064f1110c7e3ccffc358e327db06e11ead7
Showing with 587 additions and 184 deletions.
  1. +3 −0 frontend/src/app/modules/aggregation/aggregation.component.ts
  2. +8 −2 frontend/src/app/modules/aggregation/services/aggregation-chart-data.service.spec.ts
  3. +46 −16 frontend/src/app/modules/aggregation/services/aggregation-chart-data.service.ts
  4. +7 −3 frontend/src/app/modules/result-selection/components/application/application.component.ts
  5. +41 −3 frontend/src/app/modules/result-selection/components/measurands/measurands.component.ts
  6. +11 −1 ...result-selection/components/page-location-connectivity/selection-data/selection-data.component.ts
  7. +10 −0 frontend/src/app/modules/result-selection/components/time-frame/time-frame-in-seconds.enum.ts
  8. +105 −68 frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.spec.ts
  9. +93 −45 frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.ts
  10. +1 −1 frontend/src/app/modules/result-selection/result-selection.module.ts
  11. +1 −1 frontend/src/app/modules/result-selection/services/result-selection.service.ts
  12. +3 −1 frontend/src/app/modules/result-selection/services/result-selection.store.spec.ts
  13. +95 −6 frontend/src/app/modules/result-selection/services/result-selection.store.ts
  14. +1 −1 ...modules/{result-selection → shared}/components/chart-switch-menu/chart-switch-menu.component.html
  15. 0 ...modules/{result-selection → shared}/components/chart-switch-menu/chart-switch-menu.component.scss
  16. 0 ...ules/{result-selection → shared}/components/chart-switch-menu/chart-switch-menu.component.spec.ts
  17. +9 −3 ...p/modules/{result-selection → shared}/components/chart-switch-menu/chart-switch-menu.component.ts
  18. +5 −3 ...c/app/modules/time-series/components/time-series-line-chart/time-series-line-chart.component.html
  19. +25 −0 ...c/app/modules/time-series/components/time-series-line-chart/time-series-line-chart.component.scss
  20. +3 −1 ...src/app/modules/time-series/components/time-series-line-chart/time-series-line-chart.component.ts
  21. +116 −28 frontend/src/app/modules/time-series/services/line-chart.service.ts
  22. +1 −1 grails-app/assets/javascripts/chartSwitch.js
  23. +1 −0 grails-app/i18n/messages.properties
  24. +1 −0 grails-app/i18n/messages_de.properties
  25. +1 −0 grails-app/views/_common/_jsGlobals.gsp
@@ -26,6 +26,9 @@ export class AggregationComponent implements OnInit {

ngOnInit() {
this.isHidden = true;
if (this.resultSelectionStore.validQuery) {
this.getBarchartData();
}
}

getBarchartData(): void {
@@ -2,16 +2,22 @@ import {TestBed} from '@angular/core/testing';
import { AggregationChartDataService } from './aggregation-chart-data.service';
import {BarchartDataService} from "./barchart-data.service";
import {HttpClientTestingModule} from "@angular/common/http/testing";
import {RouterTestingModule} from "@angular/router/testing";
import {ResultSelectionStore} from "../../result-selection/services/result-selection.store";
import {ResultSelectionService} from 'src/app/modules/result-selection/services/result-selection.service';

describe('AggregationChartDataService', () => {
beforeEach(() =>
TestBed.configureTestingModule({
providers: [
BarchartDataService,
AggregationChartDataService
ResultSelectionStore,
AggregationChartDataService,
ResultSelectionService
],
imports: [
HttpClientTestingModule
HttpClientTestingModule,
RouterTestingModule
]
}));

@@ -7,6 +7,8 @@ import {ResultSelectionCommand} from "../../result-selection/models/result-selec
import {RemainingResultSelection} from "../../result-selection/models/remaing-result-selection.model";
import {AggregationChartDataByMeasurand} from "../models/aggregation-chart-data.model";
import {AggregationChartSeries} from "../models/aggregation-chart-series.model";
import {ActivatedRoute, Params, Router} from "@angular/router";
import {ResultSelectionStore} from "../../result-selection/services/result-selection.store";

@Injectable({
providedIn: 'root'
@@ -98,10 +100,25 @@ export class AggregationChartDataService {
ascSelected:boolean = true;
descSelected:boolean = false;


constructor(private barchartDataService: BarchartDataService) {}
constructor(private barchartDataService: BarchartDataService, private route: ActivatedRoute, private router: Router, private resultSelectionStore: ResultSelectionStore) {
route.queryParams.subscribe((params: Params) => {
this.selectedFilter = params.selectedFilter ? params.selectedFilter : this.selectedFilter;
this.aggregationType = params.selectedAggregationValue ? params.selectedAggregationValue : this.aggregationType;
this.stackBars = params.stackBars == 1;
this.percentileValue = params.selectedPercentile ? parseInt(params.selectedPercentile) : this.percentileValue;
});
}

getBarchartData(resultSelectionCommand: ResultSelectionCommand,remainingResultSelection: RemainingResultSelection): void {
const additionalParams: Params = {
selectedFilter: this.selectedFilter,
selectedAggregationValue: this.aggregationType,
selectedPercentile: this.percentileValue,
stackBars: this.stackBars ? 1 : 0
};

this.resultSelectionStore.writeQueryParams(additionalParams);

this.barchartDataService.fetchBarchartData<any>(
resultSelectionCommand,
remainingResultSelection,
@@ -196,10 +213,11 @@ export class AggregationChartDataService {
measurandData.hasComparative = this.hasComparativeData;
measurandData.isImprovement = firstSerie.isImprovement;
measurandData.isDeterioration = firstSerie.isDeterioration;

if(measurandData.isImprovement || measurandData.isDeterioration){
let color = this.getColorscaleForTrafficlight()(measurandData.isImprovement ? "good" : "bad");
measurandData.color = color.toString();
}else {
} else {
let unit = measurandData.unit;
let colorScales = {};
colorScales[unit] = colorScales[unit] || this.getColorscaleForMeasurandGroup(unit, this.hasComparativeData);
@@ -258,23 +276,24 @@ export class AggregationChartDataService {
label: "GOOD",
cssClass: "d3chart-good",
end: 1000,
start: undefined
start: 0
},
{
id: "okay",
fill: "#f9dfba",
label: "OK",
cssClass: "d3chart-okay",
end: 3000,
start: undefined
start: 0

},
{
id: "bad",
fill: "#f5d1d0",
label: "BAD",
cssClass: "d3chart-bad",
start: undefined
end: undefined,
start: 0
}
];
let values = [];
@@ -287,7 +306,7 @@ export class AggregationChartDataService {
this.dataForScoreBar.min = minValue;
this.dataForScoreBar.max = maxValue;

let lastBarEnd = 0;
let lastBarEnd: number = 0;
for (let curScoreBar = 0; curScoreBar < availableScoreBars.length; curScoreBar++) {
let bar = availableScoreBars[curScoreBar];
barsToRender.push(bar);
@@ -345,7 +364,7 @@ export class AggregationChartDataService {
}


getColorscaleForMeasurandGroup(measurandUnit: string, skipFirst: boolean){
getColorscaleForMeasurandGroup(measurandUnit: string, skipFirst: boolean) {
let colors = this.measurandGroupColorCombination[measurandUnit].slice(skipFirst ? 1 : 0);
return scaleOrdinal()
.domain(this.createDomain(colors.length))
@@ -354,16 +373,16 @@ export class AggregationChartDataService {

getColorscaleForTrafficlight() {
return scaleOrdinal()
.domain(["good", "ok", "bad"])
.domain(["good", "ok", "bad"] as ReadonlyArray<string>)
.range(this.trafficColors);
}

createDomain(arrayLength: number){
createDomain(arrayLength: number): ReadonlyArray<string> {
var array = [];
for (let i = 0; i < arrayLength; i++) {
array.push(i);
}
return array;
return array as ReadonlyArray<string>;
}

public setComparativeData(series: AggregationChartSeries[]){
@@ -396,15 +415,26 @@ export class AggregationChartDataService {
private setDataForSideLabel(series: AggregationChartSeries[], datum: AggregationChartSeries): string {
let pages = series.map(x => x.page).filter((el, i, a) => i === a.indexOf(el));
let jobGroups = series.map(x => x.jobGroup).filter((el, i, a) => i === a.indexOf(el));
let browsers = series.map(x => x.browser).filter((el, i, a) => i === a.indexOf(el));
let sidelabel: string = "";
if (pages.length > 1 && jobGroups.length > 1) {
return `${datum.page}, ${datum.jobGroup}`;
sidelabel = `${datum.page}, ${datum.jobGroup}`;
} else if (pages.length > 1 && jobGroups.length === 1) {
return datum.page;
sidelabel = datum.page;
} else if (jobGroups.length > 1 && pages.length === 1) {
return datum.jobGroup;
} else if(pages.length ===1&&jobGroups.length===1){
return '';
sidelabel = datum.jobGroup;
} else if(pages.length === 1 && jobGroups.length === 1){
sidelabel = '';
}
if(browsers.length > 1) {
if (sidelabel.length > 0) {
sidelabel = `${sidelabel}, ${datum.browser}`
} else if (sidelabel.length === 0) {
sidelabel = datum.browser
}
}

return sidelabel
}

private getDataForLabels(): any[]{
@@ -3,6 +3,7 @@ import {SelectableApplication} from 'src/app/models/application.model';
import {ResultSelectionStore} from "../../services/result-selection.store";
import {ResultSelectionCommandParameter} from "../../models/result-selection-command.model";
import {UiComponent} from "../../../../enums/ui-component.enum";
import {ActivatedRoute, Params} from "@angular/router";

@Component({
selector: 'osm-result-selection-application',
@@ -19,15 +20,18 @@ export class ApplicationComponent {
selectedTag: string = '';
unfilteredSelectedApplications: number[] = [];

constructor(private resultSelectionStore: ResultSelectionStore) {
constructor(private resultSelectionStore: ResultSelectionStore, private route: ActivatedRoute) {
this.resultSelectionStore.applications$.subscribe(applications => {
this.updateApplicationsAndTags(applications.data);
});
}

ngOnInit() {
this.resultSelectionStore.registerComponent(UiComponent.APPLICATION);
this.resultSelectionStore.reset$.subscribe(() => this.resetResultSelection())
this.resultSelectionStore.reset$.subscribe(() => this.resetResultSelection());
if (this.resultSelectionStore.resultSelectionCommand.jobGroupIds) {
this.selectedApplications = this.resultSelectionStore.resultSelectionCommand.jobGroupIds;
}
}

onSelectionChange() {
@@ -67,7 +71,7 @@ export class ApplicationComponent {
private updateTags(applications: SelectableApplication[]) {
if (applications) {
this.selectableTags = applications.map(value => value.tags).reduce((a, b) =>
a.concat(b), []).filter((v, i, a) =>
a.concat(b), []).filter((v, i, a) =>
a.indexOf(v) === i);
} else {
this.selectableTags = [];
@@ -1,13 +1,14 @@
import {Component, Input, OnInit} from '@angular/core';
import {MeasurandGroup, SelectableMeasurand, Measurand} from "../../../../models/measurand.model";
import {BehaviorSubject, combineLatest, Observable} from "rxjs";
import {BehaviorSubject, combineLatest, interval, Observable, Subject} from "rxjs";
import {ResultSelectionStore} from "../../services/result-selection.store";
import {ResponseWithLoadingState} from "../../../../models/response-with-loading-state.model";
import {map} from 'rxjs/operators';
import {combineAll, map, take, takeUntil, takeWhile, tap, toArray} from 'rxjs/operators';
import {UiComponent} from "../../../../enums/ui-component.enum";
import {PerformanceAspectService} from "../../../../services/performance-aspect.service";
import {PerformanceAspectType} from "../../../../models/perfomance-aspect.model";
import {RemainingResultSelectionParameter} from "../../models/remaing-result-selection.model";
import {PerformanceAspectTypes} from "../../../../enums/performance-aspect-types.enum";

@Component({
selector: 'osm-result-selection-measurands',
@@ -41,7 +42,11 @@ export class MeasurandsComponent implements OnInit {
this.resultSelectionStore.percentages$
]
});
this.setDefaultValue();
if (this.resultSelectionStore.validQuery) {
this.loadResultSelection();
} else {
this.setDefaultValue();
}
}

ngOnInit() {
@@ -97,6 +102,39 @@ export class MeasurandsComponent implements OnInit {
)
}

private loadResultSelection(): void {
let allMeasurands: SelectableMeasurand[];
let performanceAspects: PerformanceAspectType[];
const finishedLoading$: Subject<void> = new Subject<void>();

this.loadingState().pipe(takeUntil(finishedLoading$)).subscribe(loading => {
if (!loading) {
performanceAspects = [...this.aspectTypes$.getValue()];
allMeasurands = [
...this.resultSelectionStore.loadTimes$.getValue().values,
...this.resultSelectionStore.userTimings$.getValue().values,
...this.resultSelectionStore.heroTimings$.getValue().values,
...this.resultSelectionStore.requestCounts$.getValue().values,
...this.resultSelectionStore.requestSizes$.getValue().values,
...this.resultSelectionStore.percentages$.getValue().values
];

const selectedPerformanceAspectTypes = (performanceAspects && this.resultSelectionStore.remainingResultSelection.performanceAspectTypes) ?
[...performanceAspects.filter(aspect => this.resultSelectionStore.remainingResultSelection.performanceAspectTypes.includes(aspect.name))] : [];
const selectedMeasurandsx = (allMeasurands && this.resultSelectionStore.remainingResultSelection.measurands) ?
[...allMeasurands.filter(measurand => this.resultSelectionStore.remainingResultSelection.measurands.includes(measurand.id))] : [];


this.selectedMeasurands = [
...selectedPerformanceAspectTypes,
...selectedMeasurandsx
];

finishedLoading$.next();
}
});
}

private setResultSelection(): void {
this.resultSelectionStore.setRemainingResultSelectionEnums(
this.selectedMeasurands.filter((item: Measurand) => {
@@ -56,7 +56,8 @@ export class SelectionDataComponent implements OnInit {
})
);

this.resultSelectionStore.reset$.subscribe(() => this.resetResultSelection())
this.resultSelectionStore.reset$.subscribe(() => this.resetResultSelection());
this.handleQueryParams();
}

filterSelectableItems(selectedParents: number[]): void {
@@ -105,4 +106,13 @@ export class SelectionDataComponent implements OnInit {
return a.name.localeCompare(b.name);
})
}

private handleQueryParams(): void {
if (this.resultSelectionStore.resultSelectionCommand[this.parentType]) {
this.parentSelection = this.resultSelectionStore.resultSelectionCommand[this.parentType];
if (this.showChildSelection && this.resultSelectionStore.resultSelectionCommand[this.childType]) {
this.childSelection = this.resultSelectionStore.resultSelectionCommand[this.childType];
}
}
}
}
@@ -0,0 +1,10 @@
export enum TIME_FRAME_IN_SECONDS {
MANUAL_SELECTION = -1,
ONE_HOUR = 3600,
TWELVE_HOURS = 43200,
ONE_DAY = 86400,
THREE_DAYS = 259200,
ONE_WEEK = 604800,
TWO_WEEKS = 1209600,
FOUR_WEEKS = 2419200
}

0 comments on commit bf5b806

Please sign in to comment.
You can’t perform that action at this time.