Skip to content
Permalink
Browse files

[IT-2770] Added measurand chart switch and universal url param handling

  • Loading branch information...
finnmartens authored and BennyLi committed Aug 30, 2019
1 parent 38fb401 commit 266584a7cf9271547fb8a0139146b42f8f1f46b4

Some generated files are not rendered by default. Learn more.

@@ -2,20 +2,24 @@ 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";

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

it('should be created', () => {
fit('should be created', () => {
const service: AggregationChartDataService = TestBed.get(AggregationChartDataService);
expect(service).toBeTruthy();
});
@@ -8,6 +8,7 @@ import {RemainingResultSelection} from "../../result-selection/models/remaing-re
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'
@@ -97,7 +98,7 @@ export class AggregationChartDataService {
ascSelected:boolean = true;
descSelected:boolean = false;

constructor(private barchartDataService: BarchartDataService, private route: ActivatedRoute, private router: Router) {
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;
@@ -107,26 +108,14 @@ export class AggregationChartDataService {
}

getBarchartData(resultSelectionCommand: ResultSelectionCommand,remainingResultSelection: RemainingResultSelection): void {
this.router.navigate([], {
queryParams: {
from: resultSelectionCommand.from.toISOString(),
to: resultSelectionCommand.to.toISOString(),
selectedFolder: resultSelectionCommand.jobGroupIds,
selectedPages: resultSelectionCommand.pageIds,
selectedMeasuredEventIds: resultSelectionCommand.measuredEventIds,
selectedBrowsers: resultSelectionCommand.browserIds,
selectedLocations: resultSelectionCommand.locationIds,
selectedConnectivities: resultSelectionCommand.selectedConnectivities,
...(remainingResultSelection.fromComparative && {comparativeFrom: remainingResultSelection.fromComparative.toISOString()}),
...(remainingResultSelection.toComparative && {comparativeTo: remainingResultSelection.toComparative.toISOString()}),
...(remainingResultSelection.measurands && {selectedAggrGroupValuesUnCached: remainingResultSelection.measurands}),
...(remainingResultSelection.performanceAspectTypes && {performanceAspectTypes: remainingResultSelection.performanceAspectTypes}),
selectedFilter: this.selectedFilter,
selectedAggregationValue: this.aggregationType,
selectedPercentile: this.percentileValue,
stackBars: this.stackBars ? 1 : 0
}
});
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,
@@ -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) => {
@@ -74,8 +74,8 @@ describe('TimeFrameComponent', () => {
showComparativeSelection.click();
fixture.detectChanges();

expect(component.timeFrameInSeconds).toEqual(component.selectableTimeFramesInSeconds[4]);
expect(getTimeFrameInMilliseconds(component.selectedComparativeDates)).toEqual(timeInMilliseconds[4]);
expect(component.timeFrameInSeconds).toEqual(component.selectableTimeFramesInSeconds[0]);
expect(getTimeFrameInMilliseconds(component.selectedComparativeDates)).toEqual(timeInMilliseconds[0]);
expect(component.selectedComparativeDates[1] === component.selectedDates[0]);

component.timeFrameInSeconds = component.selectableTimeFramesInSeconds[1];
@@ -14,7 +14,7 @@ import {ResultSelectionStore} from "./services/result-selection.store";
import {PageLocationConnectivityComponent} from "./components/page-location-connectivity/page-location-connectivity.component";
import { ResetComponent } from './components/reset/reset.component';
import { SubmitComponent } from './components/submit/submit.component';
import { ChartSwitchMenuComponent } from './components/chart-switch-menu/chart-switch-menu.component';
import { ChartSwitchMenuComponent } from '../shared/components/chart-switch-menu/chart-switch-menu.component';

export const TIME_FORMAT = {
fullPickerInput: {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'},
@@ -3,6 +3,7 @@ import { TestBed } from '@angular/core/testing';
import { ResultSelectionStore } from './result-selection.store';
import {HttpClientTestingModule} from "@angular/common/http/testing";
import {ResultSelectionService} from "./result-selection.service";
import {RouterTestingModule} from "@angular/router/testing";

describe('ResultSelectionStore', () => {
beforeEach(() => TestBed.configureTestingModule({
@@ -11,7 +12,8 @@ describe('ResultSelectionStore', () => {
ResultSelectionService
],
imports: [
HttpClientTestingModule
HttpClientTestingModule,
RouterTestingModule
]
}));

@@ -15,7 +15,7 @@ import {MeasurandGroup, SelectableMeasurand} from "../../../models/measurand.mod
import {ResultSelectionService} from "./result-selection.service";
import {UiComponent} from "../../../enums/ui-component.enum";
import {RemainingResultSelection, RemainingResultSelectionParameter} from "../models/remaing-result-selection.model";
import {ActivatedRoute, Params} from "@angular/router";
import {ActivatedRoute, Params, Router} from "@angular/router";

@Injectable()
export class ResultSelectionStore {
@@ -52,7 +52,7 @@ export class ResultSelectionStore {
selectedTimeFrameInterval: 'interval'
};

constructor(private resultSelectionService: ResultSelectionService, private route: ActivatedRoute) {
constructor(private resultSelectionService: ResultSelectionService, private route: ActivatedRoute, private router: Router) {
route.queryParams.subscribe((params: Params) => {
if (params) {
params = this.renameParamKeys(this.oldToNewChartKeyMap, params);
@@ -94,6 +94,26 @@ export class ResultSelectionStore {
}
}

writeQueryParams(additionalParams?: Params) {
this.router.navigate([], {
queryParams: {
from: this.resultSelectionCommand.from.toISOString(),
to: this.resultSelectionCommand.to.toISOString(),
selectedFolder: this.resultSelectionCommand.jobGroupIds,
selectedPages: this.resultSelectionCommand.pageIds,
selectedMeasuredEventIds: this.resultSelectionCommand.measuredEventIds,
selectedBrowsers: this.resultSelectionCommand.browserIds,
selectedLocations: this.resultSelectionCommand.locationIds,
selectedConnectivities: this.resultSelectionCommand.selectedConnectivities,
...(this.remainingResultSelection.fromComparative && {comparativeFrom: this.remainingResultSelection.fromComparative.toISOString()}),
...(this.remainingResultSelection.toComparative && {comparativeTo: this.remainingResultSelection.toComparative.toISOString()}),
...(this.remainingResultSelection.measurands && {selectedAggrGroupValuesUnCached: this.remainingResultSelection.measurands}),
...(this.remainingResultSelection.performanceAspectTypes && {performanceAspectTypes: this.remainingResultSelection.performanceAspectTypes}),
...additionalParams
}
})
}

registerComponent(component: UiComponent): void {
if (component === UiComponent.MEASURAND) {
this.loadMeasurands(this.resultSelectionCommand);
@@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {ChartSwitchMenuEntry} from "../../models/chart-switch-menu-entry.model";
import {ChartSwitchMenuEntry} from "../../../result-selection/models/chart-switch-menu-entry.model";

@Component({
selector: 'osm-menu',

Some generated files are not rendered by default. Learn more.

0 comments on commit 266584a

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