Skip to content
Permalink
Browse files

Merge pull request #196 from iteratec/feature/angularResultSelection

Feature: Angular result selection (merged)
This includes #179, #184, #186 and #191
  • Loading branch information...
sburnicki committed May 16, 2019
2 parents 906110b + 4781f62 commit f7137f46b5ee79a7422b3fffefbeb6bd46a04dc3
Showing with 2,592 additions and 1,283 deletions.
  1. +2 −1 frontend/angular.json
  2. +858 −1,228 frontend/package-lock.json
  3. +28 −25 frontend/package.json
  4. +2 −0 frontend/src/app/app.module.ts
  5. +27 −0 frontend/src/app/models/application.model.ts
  6. +14 −0 frontend/src/app/models/browser.model.ts
  7. +14 −0 frontend/src/app/models/connectivity.model.ts
  8. +19 −0 frontend/src/app/models/location.model.ts
  9. +19 −0 frontend/src/app/models/measured-event.model.ts
  10. +10 −1 frontend/src/app/models/page.model.ts
  11. +1 −1 ...erformance-aspect-management/performance-aspect-inspect/performance-aspect-inspect.component.html
  12. +9 −2 .../performance-aspect-management/performance-aspect-inspect/performance-aspect-inspect.component.ts
  13. +1 −1 ...tend/src/app/modules/result-selection/components/measurand-select/measurand-select.component.html
  14. +1 −10 frontend/src/app/modules/result-selection/components/measurand-select/measurand-select.component.ts
  15. +27 −0 frontend/src/app/modules/result-selection/components/measurands/measurands.component.html
  16. +4 −0 frontend/src/app/modules/result-selection/components/measurands/measurands.component.scss
  17. +30 −0 frontend/src/app/modules/result-selection/components/measurands/measurands.component.spec.ts
  18. +88 −0 frontend/src/app/modules/result-selection/components/measurands/measurands.component.ts
  19. +20 −0 ...ult-selection/components/result-selection-application/result-selection-application.component.html
  20. 0 ...ult-selection/components/result-selection-application/result-selection-application.component.scss
  21. +103 −0 ...-selection/components/result-selection-application/result-selection-application.component.spec.ts
  22. +94 −0 ...esult-selection/components/result-selection-application/result-selection-application.component.ts
  23. +111 −0 ...t-selection-page-location-connectivity/result-selection-page-location-connectivity.component.html
  24. +3 −0 ...t-selection-page-location-connectivity/result-selection-page-location-connectivity.component.scss
  25. +147 −0 ...election-page-location-connectivity/result-selection-page-location-connectivity.component.spec.ts
  26. +111 −0 ...ult-selection-page-location-connectivity/result-selection-page-location-connectivity.component.ts
  27. +83 −0 ...esult-selection/components/result-selection-time-frame/result-selection-time-frame.component.html
  28. +11 −0 ...esult-selection/components/result-selection-time-frame/result-selection-time-frame.component.scss
  29. +124 −0 ...lt-selection/components/result-selection-time-frame/result-selection-time-frame.component.spec.ts
  30. +178 −0 .../result-selection/components/result-selection-time-frame/result-selection-time-frame.component.ts
  31. +7 −0 frontend/src/app/modules/result-selection/models/chart.model.ts
  32. +40 −0 frontend/src/app/modules/result-selection/models/result-selection-command.model.ts
  33. +14 −0 frontend/src/app/modules/result-selection/models/selectable-hero-timing.model.ts
  34. +14 −0 frontend/src/app/modules/result-selection/models/selectable-page.model.ts
  35. +14 −0 frontend/src/app/modules/result-selection/models/selectable-user-timing.model.ts
  36. +6 −0 frontend/src/app/modules/result-selection/result-selection.component.html
  37. 0 frontend/src/app/modules/result-selection/result-selection.component.scss
  38. +49 −0 frontend/src/app/modules/result-selection/result-selection.component.spec.ts
  39. +18 −0 frontend/src/app/modules/result-selection/result-selection.component.ts
  40. +43 −4 frontend/src/app/modules/result-selection/result-selection.module.ts
  41. +161 −5 frontend/src/app/modules/result-selection/services/result-selection.service.ts
  42. +10 −2 frontend/src/app/testing/shared-mocks.module.ts
  43. +2 −0 frontend/src/styles.scss
  44. +2 −1 grails-app/controllers/de/iteratec/osm/result/ResultSelectionController.groovy
  45. +38 −2 grails-app/i18n/messages.properties
  46. +35 −0 grails-app/i18n/messages_de.properties
@@ -32,7 +32,8 @@
"scripts": [],
"lazyModules": [
"src/app/modules/page-comparison/page-comparison.module",
"src/app/modules/job-threshold/job-threshold.module"
"src/app/modules/job-threshold/job-threshold.module",
"src/app/modules/result-selection/result-selection.module"
],
"vendorChunk": false,
"extractCss": true

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -12,43 +12,46 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^7.2.4",
"@angular/common": "^7.2.4",
"@angular/compiler": "^7.2.4",
"@angular/core": "^7.2.4",
"@angular/forms": "^7.2.4",
"@angular/http": "^7.2.4",
"@angular/platform-browser": "^7.2.4",
"@angular/platform-browser-dynamic": "^7.2.4",
"@angular/router": "^7.2.4",
"@angular/animations": "^7.2.13",
"@angular/cdk": "^7.3.7",
"@angular/common": "^7.2.13",
"@angular/compiler": "^7.2.13",
"@angular/core": "^7.2.13",
"@angular/forms": "^7.2.13",
"@angular/http": "^7.2.13",
"@angular/platform-browser": "^7.2.13",
"@angular/platform-browser-dynamic": "^7.2.13",
"@angular/router": "^7.2.13",
"@ng-select/ng-select": "^2.17.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"core-js": "^2.6.3",
"d3": "^5.8.2",
"core-js": "^3.0.1",
"d3": "^5.9.2",
"ng-pick-datetime": "^7.0.0",
"ngx-smart-modal": "^7.1.1",
"rxjs": "^6.4.0",
"zone.js": "^0.8.29"
"zone.js": "^0.9.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.0",
"@angular/cli": "7.3.0",
"@angular/compiler-cli": "^7.2.4",
"@angular/language-service": "^7.2.4",
"@types/d3": "^5.7.0",
"@types/jasmine": "^3.3.8",
"@angular-devkit/build-angular": "^0.13.8",
"@angular/cli": "7.3.8",
"@angular/compiler-cli": "^7.2.13",
"@angular/language-service": "^7.2.13",
"@types/d3": "^5.7.2",
"@types/jasmine": "^3.3.12",
"@types/jasminewd2": "^2.0.6",
"@types/node": "~10.12.21",
"codelyzer": "^4.5.0",
"jasmine-core": "~3.3.0",
"@types/node": "~11.13.5",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.0",
"karma": "^4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.4",
"karma-coverage-istanbul-reporter": "~2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"karma-mocha-reporter": "^2.2.5",
"ts-node": "~8.0.2",
"tslint": "~5.12.1",
"ts-node": "~8.1.0",
"tslint": "~5.16.0",
"typescript": "3.2.4"
}
}
@@ -5,12 +5,14 @@ import {APP_BASE_HREF} from '@angular/common';
import {NotFoundComponent} from "./not-found.component";
import {APP_COMPONENT_SELECTOR, AppComponent} from "./app.component";
import {GlobalModule} from "./global.module";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";


@NgModule({
declarations: [NotFoundComponent, AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
GlobalModule
],
@@ -1,11 +1,14 @@
import {parseDate} from "../utils/date.util";
import { Page } from "./page.model";

export interface ApplicationDTO {
id: number;
name: string;
pageCount?: number;
dateOfLastResults?: string | Date;
csiConfigurationId?: number;
pages?: Page[];
tags?: Array<string>;
}

export class Application implements ApplicationDTO {
@@ -23,3 +26,27 @@ export class Application implements ApplicationDTO {
this.csiConfigurationId = dto.csiConfigurationId || null;
}
}

export class SelectableApplication implements ApplicationDTO {
id: number;
name: string;
tags: Array<string>;

constructor(dto: ApplicationDTO) {
this.id = dto.id;
this.name = dto.name;
this.tags = dto.tags;
}
}

export class ApplicationWithPages implements ApplicationDTO {
id: number;
name: string;
pages: Page[];

constructor(dto: ApplicationDTO) {
this.id = dto.id;
this.name = dto.name;
this.pages = dto.pages;
}
}
@@ -0,0 +1,14 @@
export interface BrowserDTO {
id: number;
name: string;
}

export class Browser implements BrowserDTO {
id: number;
name: string;

constructor (dto: BrowserDTO) {
this.id = dto.id;
this.name = dto.name;
}
}
@@ -0,0 +1,14 @@
export interface ConnectivityDTO {
id: number;
name: string;
}

export class Connectivity implements ConnectivityDTO {
id: number;
name: string;

constructor (dto: ConnectivityDTO) {
this.id = dto.id;
this.name = dto.name;
}
}
@@ -0,0 +1,19 @@
import {Browser} from "./browser.model";

export interface LocationDTO {
id: number;
name: string;
parent: Browser;
}

export class Location implements LocationDTO {
id: number;
name: string;
parent: Browser;

constructor (dto: LocationDTO) {
this.id = dto.id;
this.name = dto.name;
this.parent = dto.parent;
}
}
@@ -0,0 +1,19 @@
import { Page } from "./page.model";

export interface MeasuredEventDTO {
id: number;
name: string;
parent: Page;
}

export class MeasuredEvent implements MeasuredEventDTO {
id: number;
name: string;
parent: Page;

constructor (dto: MeasuredEventDTO) {
this.id = dto.id;
this.name = dto.name;
this.parent = dto.parent;
}
}
@@ -1,5 +1,14 @@
export interface Page {
export interface PageDTO {
name: string
id: number

}
export class Page implements PageDTO {
id: number;
name: string;

constructor (dto: PageDTO) {
this.id = dto.id;
this.name = dto.name;
}
}
@@ -7,7 +7,7 @@
</div>
<div class="measurand">

<osm-measurand-select [selectedMeasurand]="metric$ | async"
<osm-measurand-select [selectedMeasurand]="metric$ | async" [selectableMeasurandGroups]="measurands"
(onSelect)="selectMeasurandForAspect($event)"></osm-measurand-select>
</div>
</div>
@@ -2,7 +2,8 @@ import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angula
import {PerformanceAspect} from "../../../../../models/perfomance-aspect.model";
import {ReplaySubject} from "rxjs";
import {ResponseWithLoadingState} from "../../../../../models/response-with-loading-state.model";
import {SelectableMeasurand} from "../../../../../models/measurand.model";
import {MeasurandGroup, SelectableMeasurand} from "../../../../../models/measurand.model";
import {ResultSelectionService} from "../../../../result-selection/services/result-selection.service";

@Component({
selector: 'osm-performance-aspect-inspect',
@@ -13,8 +14,14 @@ export class PerformanceAspectInspectComponent implements OnInit, OnChanges {
@Input() performanceAspectWrapped: ResponseWithLoadingState<PerformanceAspect>;
@Output() onSelect: EventEmitter<PerformanceAspect> = new EventEmitter<PerformanceAspect>();
metric$: ReplaySubject<SelectableMeasurand> = new ReplaySubject<SelectableMeasurand>();
measurands: ReplaySubject<ResponseWithLoadingState<MeasurandGroup>>[];

constructor() {
constructor(private resultSelectionService: ResultSelectionService) {
this.measurands = [
this.resultSelectionService.loadTimes$,
this.resultSelectionService.heroTimings$,
this.resultSelectionService.userTimings$
];
}

ngOnInit() {
@@ -2,7 +2,7 @@
[compareWith]="compareMeasurands">
<optgroup *ngFor="let group$ of selectableMeasurandGroups"
label="{{(group$ | async)?.data?.name | translate}}">
<option *ngIf="(group$ | async)?.data?.values.length == 0" [disabled]="true">
<option *ngIf="(group$ | async)?.data?.values?.length == 0" [disabled]="true">
{{(group$ | async)?.isLoading ? "frontend.de.iteratec.osm.queueDashboard.load-information.label" : "frontend.de.iteratec.osm.no-info.label" | translate}}
</option>
<option *ngFor="let selectableMeasurand of (group$ | async)?.data?.values"
@@ -1,5 +1,4 @@
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {ResultSelectionService} from "../../services/result-selection.service";
import {ReplaySubject} from "rxjs";
import {ResponseWithLoadingState} from "../../../../models/response-with-loading-state.model";
import {MeasurandGroup, SelectableMeasurand} from "../../../../models/measurand.model";
@@ -13,15 +12,7 @@ export class MeasurandSelectComponent implements OnInit {
@Input() selectedMeasurand: SelectableMeasurand;
@Output() onSelect: EventEmitter<SelectableMeasurand> = new EventEmitter<SelectableMeasurand>();

selectableMeasurandGroups: ReplaySubject<ResponseWithLoadingState<MeasurandGroup>>[];

constructor(private resultSelectionService: ResultSelectionService) {
this.selectableMeasurandGroups = [
this.resultSelectionService.loadTimes$,
this.resultSelectionService.heroTimings$,
this.resultSelectionService.userTimings$
];
}
@Input() selectableMeasurandGroups: ReplaySubject<ResponseWithLoadingState<MeasurandGroup>>[];

ngOnInit() {
}
@@ -0,0 +1,27 @@
<div class="card form-horizontal">
<h2>{{ 'frontend.de.iteratec.osm.resultSelection.measurands.title' | translate }}</h2>

<div class="row form-group" *ngFor="let metric of selectedMeasurands; index as i; trackBy:trackByFn; first as isFirst">
<label class="control-label col-sm-4" *ngIf="isFirst">
{{ 'frontend.de.iteratec.osm.resultSelection.measurands.title' | translate }}:
</label>
<div class="col-sm-7" [ngClass]="{'col-sm-offset-4': !isFirst}">
<osm-measurand-select [selectedMeasurand]="selectedMeasurands[i]" [selectableMeasurandGroups]="measurands"
(onSelect)="selectMeasurand(i, $event)"></osm-measurand-select>
</div>
<div class="col-sm-1 control-label remove-measurand-button" *ngIf="!isFirst">
<a (click)="removeMeasurandField(i)">
<i class="fas fa-times" aria-hidden="true"></i>
</a>
</div>
</div>

<div class="row form-group">
<div class="col-sm-7 col-sm-offset-4">
<button type="button" id="show-comparative-button" class="btn btn-default btn-block" (click)="addMeasurandField()">
<i class="fas fa-plus"></i> {{ 'frontend.de.iteratec.osm.resultSelection.measurands.add' | translate }}
</button>
</div>
</div>

</div>
@@ -0,0 +1,4 @@
.remove-measurand-button {
text-align: left;
padding-left: 0;
}
@@ -0,0 +1,30 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { MeasurandsComponent } from './measurands.component';
import {MeasurandSelectComponent} from "../measurand-select/measurand-select.component";
import {ResultSelectionService} from "../../services/result-selection.service";
import {SharedMocksModule} from "../../../../testing/shared-mocks.module";

describe('MeasurandsComponent', () => {
let component: MeasurandsComponent;
let fixture: ComponentFixture<MeasurandsComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ SharedMocksModule ],
declarations: [ MeasurandsComponent, MeasurandSelectComponent ],
providers: [ ResultSelectionService ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(MeasurandsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Oops, something went wrong.

0 comments on commit f7137f4

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