From d0625b4a7b5258e3c6854b1c80fb2573dbdffe4f Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Mon, 25 May 2020 10:27:45 +0200
Subject: [PATCH 01/10] Added Title in global module. Refactored.

---
 frontend/src/app/app.module.ts                | 12 ++--
 frontend/src/app/global.module.ts             | 27 ++++----
 .../aggregation/aggregation.component.ts      | 41 +++++++----
 .../application/application.component.ts      | 23 ++++---
 .../measurands/measurands.component.ts        | 59 +++++++++-------
 .../page-location-connectivity.component.ts   | 10 ++-
 .../components/submit/submit.component.ts     | 14 ++--
 .../time-frame/time-frame.component.ts        | 68 +++++++++++--------
 grails-app/i18n/messages.properties           |  4 ++
 grails-app/i18n/messages_de.properties        |  3 +
 10 files changed, 159 insertions(+), 102 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 95fbfff9c1..d5cb0b8daa 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -1,11 +1,11 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {ApplicationRef, Injector, NgModule, NgModuleFactory, SystemJsNgModuleLoader, Type} from '@angular/core';
-import {AppRoutingModule} from "./app-routing.module";
+import {AppRoutingModule} from './app-routing.module';
 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";
+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({
@@ -17,7 +17,7 @@ import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
     GlobalModule
   ],
   providers: [SystemJsNgModuleLoader,
-    {provide: APP_BASE_HREF, useValue: '/',}
+    {provide: APP_BASE_HREF, useValue: '/'}
   ],
   entryComponents: [
     AppComponent
diff --git a/frontend/src/app/global.module.ts b/frontend/src/app/global.module.ts
index bd43c9eae6..ae22c66953 100644
--- a/frontend/src/app/global.module.ts
+++ b/frontend/src/app/global.module.ts
@@ -1,14 +1,13 @@
 import {NgModule} from '@angular/core';
-import {HttpClient, HttpClientModule} from "@angular/common/http";
-import {GrailsBridgeService} from "./services/grails-bridge.service";
-import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core";
-import {TranslateHttpLoader} from "@ngx-translate/http-loader";
-import {OsmLangService} from "./services/osm-lang.service";
-import {ApplicationService} from "./services/application.service";
-import {ResultSelectionService} from "./modules/result-selection/services/result-selection.service";
-import {ResultSelectionStore} from "./modules/result-selection/services/result-selection.store";
-import {BarchartDataService} from "./modules/aggregation/services/barchart-data.service";
-import {AggregationChartDataService} from "./modules/aggregation/services/aggregation-chart-data.service";
+import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {GrailsBridgeService} from './services/grails-bridge.service';
+import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {OsmLangService} from './services/osm-lang.service';
+import {ApplicationService} from './services/application.service';
+import {ResultSelectionService} from './modules/result-selection/services/result-selection.service';
+import {ResultSelectionStore} from './modules/result-selection/services/result-selection.store';
+import {Title} from '@angular/platform-browser';
 
 // AoT requires an exported function for factories
 export function createTranslateLoader(http: HttpClient) {
@@ -32,8 +31,7 @@ export function createTranslateLoader(http: HttpClient) {
     ApplicationService,
     ResultSelectionService,
     ResultSelectionStore,
-    BarchartDataService,
-    AggregationChartDataService
+    Title
   ],
 })
 export class GlobalModule {
@@ -43,6 +41,9 @@ export class GlobalModule {
     translateService.addLangs(this.supportedLangs);
     translateService.setDefaultLang('en');
 
-    translateService.use(this.supportedLangs.includes(this.osmLangService.getOsmLang()) ? this.osmLangService.getOsmLang() : translateService.getDefaultLang());
+    translateService.use(this.supportedLangs.includes(this.osmLangService.getOsmLang()) ?
+      this.osmLangService.getOsmLang() :
+      translateService.getDefaultLang()
+    );
   }
 }
diff --git a/frontend/src/app/modules/aggregation/aggregation.component.ts b/frontend/src/app/modules/aggregation/aggregation.component.ts
index 4ec0c51549..1b568dc995 100644
--- a/frontend/src/app/modules/aggregation/aggregation.component.ts
+++ b/frontend/src/app/modules/aggregation/aggregation.component.ts
@@ -3,6 +3,8 @@ import {BarchartDataService} from './services/barchart-data.service';
 import {ResultSelectionStore} from '../result-selection/services/result-selection.store';
 import {BehaviorSubject} from 'rxjs';
 import {AggregationChartDataService} from './services/aggregation-chart-data.service';
+import {Title} from '@angular/platform-browser';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'osm-aggregation',
@@ -15,24 +17,23 @@ export class AggregationComponent implements OnInit {
   barchartMedianData$: BehaviorSubject<any> = new BehaviorSubject<any>([]);
   showChart = false;
 
-  constructor(
-    private barchartDataService: BarchartDataService,
-    private resultSelectionStore: ResultSelectionStore,
-    private aggregationChartDataService: AggregationChartDataService
-  ) {
-    this.aggregationChartDataService.barchartAverageData$.subscribe((data) => {
-      this.barchartAverageData$.next(data);
-    });
-    this.aggregationChartDataService.barchartMedianData$.subscribe((data) => {
-      this.barchartMedianData$.next(data);
-    });
-    this.resultSelectionStore.dataAvailable$.subscribe((dataAvailable: boolean) => {
-      this.showChart = this.showChart && dataAvailable;
-    });
+  constructor(private barchartDataService: BarchartDataService,
+              private resultSelectionStore: ResultSelectionStore,
+              private aggregationChartDataService: AggregationChartDataService,
+              private titleService: Title,
+              private translateService: TranslateService) {
   }
 
   ngOnInit() {
+    this.translateService.get('frontend.de.iteratec.osm.aggregation.aggregationTitle')
+      .subscribe((title: string) => {
+        if (title) {
+          this.titleService.setTitle(this.translateService.instant('frontend.de.iteratec.osm.aggregation.aggregationTitle'));
+        }
+        // this.titleService.setTitle(title);
+    });
     this.showChart = false;
+    this.initDataObservables();
     if (this.resultSelectionStore.validQuery) {
       this.getBarchartData();
     }
@@ -45,4 +46,16 @@ export class AggregationComponent implements OnInit {
       this.resultSelectionStore.remainingResultSelection
     );
   }
+
+  private initDataObservables(): void {
+    this.aggregationChartDataService.barchartAverageData$.subscribe((data) => {
+      this.barchartAverageData$.next(data);
+    });
+    this.aggregationChartDataService.barchartMedianData$.subscribe((data) => {
+      this.barchartMedianData$.next(data);
+    });
+    this.resultSelectionStore.dataAvailable$.subscribe((dataAvailable: boolean) => {
+      this.showChart = this.showChart && dataAvailable;
+    });
+  }
 }
diff --git a/frontend/src/app/modules/result-selection/components/application/application.component.ts b/frontend/src/app/modules/result-selection/components/application/application.component.ts
index d447ee9830..168d8f2456 100644
--- a/frontend/src/app/modules/result-selection/components/application/application.component.ts
+++ b/frontend/src/app/modules/result-selection/components/application/application.component.ts
@@ -3,7 +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} from '@angular/router';
+import {ResponseWithLoadingState} from '../../../../models/response-with-loading-state.model';
 
 @Component({
   selector: 'osm-result-selection-application',
@@ -21,19 +21,14 @@ export class ApplicationComponent implements OnInit {
   selectedTag = '';
   unfilteredSelectedApplications: number[] = [];
 
-  constructor(private resultSelectionStore: ResultSelectionStore, private route: ActivatedRoute) {
-    this.resultSelectionStore.applications$.subscribe(applications => {
-      this.updateApplicationsAndTags(applications.data);
-    });
+  constructor(private resultSelectionStore: ResultSelectionStore) {
   }
 
-  private static sortByName(applications: SelectableApplication[]): SelectableApplication[] {
-    return applications.sort((a, b) => {
-      return a.name.localeCompare(b.name);
+  ngOnInit() {
+    this.resultSelectionStore.applications$.subscribe((applications: ResponseWithLoadingState<SelectableApplication[]>) => {
+      this.updateApplicationsAndTags(applications.data);
     });
-  }
 
-  ngOnInit() {
     this.resultSelectionStore.registerComponent(UiComponent.APPLICATION);
     this.resultSelectionStore.reset$.subscribe(() => this.resetResultSelection());
     if (this.resultSelectionStore.resultSelectionCommand.jobGroupIds) {
@@ -69,7 +64,7 @@ export class ApplicationComponent implements OnInit {
 
   private updateApplications(applications: SelectableApplication[]): void {
     if (applications != null && applications.length > 0) {
-      this.applications = ApplicationComponent.sortByName(applications);
+      this.applications = this.sortByName(applications);
     } else {
       this.applications = [];
     }
@@ -134,4 +129,10 @@ export class ApplicationComponent implements OnInit {
       }
     }
   }
+
+  private sortByName(applications: SelectableApplication[]): SelectableApplication[] {
+    return applications.sort((a, b) => {
+      return a.name.localeCompare(b.name);
+    });
+  }
 }
diff --git a/frontend/src/app/modules/result-selection/components/measurands/measurands.component.ts b/frontend/src/app/modules/result-selection/components/measurands/measurands.component.ts
index ac86f552e4..754f7bdfaf 100644
--- a/frontend/src/app/modules/result-selection/components/measurands/measurands.component.ts
+++ b/frontend/src/app/modules/result-selection/components/measurands/measurands.component.ts
@@ -39,39 +39,19 @@ export class MeasurandsComponent implements OnInit {
   @Input() addingMeasurandsDisabled$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   constructor(private resultSelectionStore: ResultSelectionStore, private performanceAspectService: PerformanceAspectService) {
-    this.aspectTypes$ = this.performanceAspectService.aspectTypes$;
-    this.loadTimes$ = this.resultSelectionStore.loadTimes$;
-    this.userTimings$ = this.resultSelectionStore.userTimings$;
-    this.heroTimings$ = this.resultSelectionStore.heroTimings$;
-    this.requestCounts$ = this.resultSelectionStore.requestCounts$;
-    this.requestSizes$ = this.resultSelectionStore.requestSizes$;
-    this.percentages$ = this.resultSelectionStore.percentages$;
-
-    this.measurands$.next({
-      ...this.measurands$.getValue(),
-      data: [
-        this.loadTimes$,
-        this.userTimings$,
-        this.heroTimings$,
-        this.requestCounts$,
-        this.requestSizes$,
-        this.percentages$
-      ]
-    });
-    this.getDefaultValue();
   }
 
   ngOnInit() {
+    this.initObservables();
     this.resultSelectionStore.registerComponent(UiComponent.MEASURAND);
     this.loadingState().subscribe(next => {
       this.measurands$.next({...this.measurands$.getValue(), isLoading: next});
     });
+
     if (this.resultSelectionStore.validQuery) {
-      this.loadResultSelection();
+      this.initByUrlQuery();
     } else {
-      this.defaultValue$
-        .pipe(takeWhile((measurand: Measurand) => measurand === undefined, true))
-        .subscribe((measurand: Measurand) => this.setDefaultValue(measurand));
+      this.initWithStartValue();
     }
   }
 
@@ -111,6 +91,29 @@ export class MeasurandsComponent implements OnInit {
     }
   }
 
+  private initObservables(): void {
+    this.aspectTypes$ = this.performanceAspectService.aspectTypes$;
+    this.loadTimes$ = this.resultSelectionStore.loadTimes$;
+    this.userTimings$ = this.resultSelectionStore.userTimings$;
+    this.heroTimings$ = this.resultSelectionStore.heroTimings$;
+    this.requestCounts$ = this.resultSelectionStore.requestCounts$;
+    this.requestSizes$ = this.resultSelectionStore.requestSizes$;
+    this.percentages$ = this.resultSelectionStore.percentages$;
+
+    this.measurands$.next({
+      ...this.measurands$.getValue(),
+      data: [
+        this.loadTimes$,
+        this.userTimings$,
+        this.heroTimings$,
+        this.requestCounts$,
+        this.requestSizes$,
+        this.percentages$
+      ]
+    });
+    this.getDefaultValue();
+  }
+
   private loadingState(): Observable<boolean> {
     return combineLatest(
       this.aspectTypes$,
@@ -126,7 +129,7 @@ export class MeasurandsComponent implements OnInit {
     );
   }
 
-  private loadResultSelection(): void {
+  private initByUrlQuery(): void {
     let allMeasurands: SelectableMeasurand[];
     let performanceAspects: PerformanceAspectType[];
     const finishedLoading$: Subject<void> = new Subject<void>();
@@ -163,6 +166,12 @@ export class MeasurandsComponent implements OnInit {
     });
   }
 
+  private initWithStartValue(): void {
+    this.defaultValue$
+      .pipe(takeWhile((measurand: Measurand) => measurand === undefined, true))
+      .subscribe((measurand: Measurand) => this.setDefaultValue(measurand));
+  }
+
   private setResultSelection(): void {
     this.resultSelectionStore.setRemainingResultSelectionEnums(
       this.selectedMeasurands.filter((item: Measurand) => {
diff --git a/frontend/src/app/modules/result-selection/components/page-location-connectivity/page-location-connectivity.component.ts b/frontend/src/app/modules/result-selection/components/page-location-connectivity/page-location-connectivity.component.ts
index 3cf2966ef1..89dfe33905 100644
--- a/frontend/src/app/modules/result-selection/components/page-location-connectivity/page-location-connectivity.component.ts
+++ b/frontend/src/app/modules/result-selection/components/page-location-connectivity/page-location-connectivity.component.ts
@@ -31,12 +31,18 @@ export class PageLocationConnectivityComponent implements OnInit {
   @Input() pageRequired = false;
 
   constructor(private resultSelectionService: ResultSelectionService, private resultSelectionStore: ResultSelectionStore) {
+  }
+
+  ngOnInit(): void {
     this.eventsAndPages$ = this.resultSelectionStore.eventsAndPages$;
     this.locationsAndBrowsers$ = this.resultSelectionStore.locationsAndBrowsers$;
     this.connectivities$ = this.resultSelectionStore.connectivities$;
+
+    this.registerComponentsInStore();
+    this.setActiveTab();
   }
 
-  ngOnInit(): void {
+  private registerComponentsInStore(): void {
     if (this.showMeasuredStepSelection || this.showPageSelection) {
       this.resultSelectionStore.registerComponent(UiComponent.PAGE);
     }
@@ -46,7 +52,9 @@ export class PageLocationConnectivityComponent implements OnInit {
     if (this.showConnectivitySelection) {
       this.resultSelectionStore.registerComponent(UiComponent.CONNECTIVITY);
     }
+  }
 
+  private setActiveTab(): void {
     if (this.showPageSelection) {
       this.activeTab = ActiveTab.PageAndEvent;
     } else if (!this.showPageSelection && this.showBrowserSelection) {
diff --git a/frontend/src/app/modules/result-selection/components/submit/submit.component.ts b/frontend/src/app/modules/result-selection/components/submit/submit.component.ts
index f67c723b86..506da9854b 100644
--- a/frontend/src/app/modules/result-selection/components/submit/submit.component.ts
+++ b/frontend/src/app/modules/result-selection/components/submit/submit.component.ts
@@ -23,11 +23,19 @@ export class SubmitComponent implements OnInit {
   @Output() submit: EventEmitter<void> = new EventEmitter<void>();
 
   constructor(private resultSelectionStore: ResultSelectionStore) {
+  }
+
+  ngOnInit() {
     this.resultCount$ = this.resultSelectionStore.resultCount$;
     this.dataAvailable$ = this.resultSelectionStore.dataAvailable$;
+    this.observeIfSelected();
   }
 
-  ngOnInit() {
+  show(): void {
+    this.submit.emit();
+  }
+
+  private observeIfSelected(): void {
     this.resultSelectionStore._resultSelectionCommand$.subscribe((next: ResultSelectionCommand) => {
       if (next.jobGroupIds) {
         this.applicationsSelected$.next(next.jobGroupIds.length > 0);
@@ -49,8 +57,4 @@ export class SubmitComponent implements OnInit {
       }
     });
   }
-
-  show(): void {
-    this.submit.emit();
-  }
 }
diff --git a/frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.ts b/frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.ts
index fe1b09c38d..26633f161f 100644
--- a/frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.ts
+++ b/frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.ts
@@ -48,38 +48,18 @@ export class TimeFrameComponent implements OnInit {
 
   CalendarType: typeof CalendarType = CalendarType;
 
-  constructor(private resultSelectionStore: ResultSelectionStore, dateTimeAdapter: DateTimeAdapter<any>, osmLangService: OsmLangService) {
-    if (osmLangService.getOsmLang() === 'en') {
-      dateTimeAdapter.setLocale('en-GB');
-    } else {
-      dateTimeAdapter.setLocale(osmLangService.getOsmLang());
-    }
+  constructor(private resultSelectionStore: ResultSelectionStore,
+              private dateTimeAdapter: DateTimeAdapter<any>,
+              private osmLangService: OsmLangService) {
   }
 
   ngOnInit() {
-    if (this.resultSelectionStore.validQuery) {
-      this.selectedDates = [
-        this.resultSelectionStore.resultSelectionCommand.from,
-        this.resultSelectionStore.resultSelectionCommand.to
-      ];
-      if (this.resultSelectionStore.remainingResultSelection.fromComparative
-        && this.resultSelectionStore.remainingResultSelection.toComparative) {
-        this.comparativeSelectionActive = true;
-        this.selectedComparativeDates = [
-          this.resultSelectionStore.remainingResultSelection.fromComparative,
-          this.resultSelectionStore.remainingResultSelection.toComparative
-        ];
-      }
-      this.selectTimeFrame();
+    this.setCalendarLanguage();
 
+    if (this.resultSelectionStore.validQuery) {
+      this.initByUrlQuery();
     } else {
-      const defaultFrom = new Date();
-      const defaultTo = new Date();
-      defaultFrom.setDate(defaultTo.getDate() - 3);
-      this.selectedDates = [defaultFrom, defaultTo];
-      this.timeFrameInSeconds = TIME_FRAME_IN_SECONDS.THREE_DAYS;
-
-      this.resultSelectionStore.setResultSelectionCommandTimeFrame(this.selectedDates);
+      this.initWithStartValues();
     }
 
     if (this.showAggregation) {
@@ -196,6 +176,40 @@ export class TimeFrameComponent implements OnInit {
     this.resultSelectionStore.setRemainingResultSelectionInterval(this.aggregationIntervalInSeconds);
   }
 
+  private setCalendarLanguage(): void {
+    if (this.osmLangService.getOsmLang() === 'en') {
+      this.dateTimeAdapter.setLocale('en-GB');
+    } else {
+      this.dateTimeAdapter.setLocale(this.osmLangService.getOsmLang());
+    }
+  }
+
+  private initByUrlQuery(): void {
+    this.selectedDates = [
+      this.resultSelectionStore.resultSelectionCommand.from,
+      this.resultSelectionStore.resultSelectionCommand.to
+    ];
+    if (this.resultSelectionStore.remainingResultSelection.fromComparative
+      && this.resultSelectionStore.remainingResultSelection.toComparative) {
+      this.comparativeSelectionActive = true;
+      this.selectedComparativeDates = [
+        this.resultSelectionStore.remainingResultSelection.fromComparative,
+        this.resultSelectionStore.remainingResultSelection.toComparative
+      ];
+    }
+    this.selectTimeFrame();
+  }
+
+  private initWithStartValues(): void {
+    const defaultFrom = new Date();
+    const defaultTo = new Date();
+    defaultFrom.setDate(defaultTo.getDate() - 3);
+    this.selectedDates = [defaultFrom, defaultTo];
+    this.timeFrameInSeconds = TIME_FRAME_IN_SECONDS.THREE_DAYS;
+
+    this.resultSelectionStore.setResultSelectionCommandTimeFrame(this.selectedDates);
+  }
+
   private setDatesFromTimeFrame(): void {
     const to = new Date();
     const from = new Date(to.getTime() - this.timeFrameInSeconds * 1000);
diff --git a/grails-app/i18n/messages.properties b/grails-app/i18n/messages.properties
index 6e27837cbd..d7b7d489a1 100644
--- a/grails-app/i18n/messages.properties
+++ b/grails-app/i18n/messages.properties
@@ -1151,6 +1151,7 @@ frontend.de.iteratec.osm.queueDashboard.location-info-list.lastDate.label=Date o
 frontend.de.iteratec.osm.queueDashboard.location-info-list.status.label=Status
 frontend.de.iteratec.osm.queueDashboard.location-info-list.started.label=Launched
 frontend.de.iteratec.osm.queueDashboard.location-info-list.since=Since
+frontend.de.iteratec.osm.landing.documentTitle=Home
 frontend.de.iteratec.osm.landing.yourApplications=Your applications
 frontend.de.iteratec.osm.landing.setupNewMeasurement=Setup new measurement
 frontend.de.iteratec.osm.landing.nothingSetUp=Nothing set up yet.
@@ -1251,6 +1252,7 @@ frontend.default.button.cancel.label=Cancel
 frontend.de.iteratec.osm.application-title=Application
 frontend.back.label=Back to
 frontend.de.iteratec.osm.dashboard=Dashboard
+frontend.de.iteratec.osm.aggregation.documentTitle=Aggregation
 frontend.de.iteratec.osm.aggregation.title=Aggregation
 frontend.de.iteratec.osm.aggregation.description=The webpagetest raw data of the respective interval is the basis for the displayed mean values.
 frontend.de.iteratec.osm.distributionChart.description=The webpagetest raw data of the respective interval is the basis for the displayed distribution.
@@ -1301,6 +1303,7 @@ frontend.de.iteratec.chart.contextMenu.deselectPoint=Deselect Point
 frontend.de.iteratec.chart.contextMenu.deselectAllPoints=Deselect all Points
 frontend.de.iteratec.chart.errorHeader=Error
 frontend.de.iteratec.chart.datapointSelection.error.multipleServer=Comparison of the filmstrips is only possible for measurements on the same server.
+frontend.de.iteratec.osm.timeSeries.documentTitle=Time Series
 frontend.de.iteratec.osm.timeSeries.chart.label.measurand=Measurand
 frontend.de.iteratec.osm.timeSeries.chart.label.application=Application
 frontend.de.iteratec.osm.timeSeries.chart.label.measuredEvent=Measured step
@@ -1308,3 +1311,4 @@ frontend.de.iteratec.osm.timeSeries.chart.label.location=Location
 frontend.de.iteratec.osm.timeSeries.chart.label.connectivity=Connectivity
 frontend.de.iteratec.osm.timeSeries.chart.label.timestamp=Timestamp: 
 frontend.de.iteratec.osm.timeSeries.chart.label.testAgent=Test agent: 
+frontend.de.iteratec.osm.startPage.documentTitle
diff --git a/grails-app/i18n/messages_de.properties b/grails-app/i18n/messages_de.properties
index 06f545c738..b8aafa494d 100644
--- a/grails-app/i18n/messages_de.properties
+++ b/grails-app/i18n/messages_de.properties
@@ -1129,6 +1129,7 @@ frontend.de.iteratec.osm.queueDashboard.location-info-list.lastDate.label=Stand
 frontend.de.iteratec.osm.queueDashboard.location-info-list.status.label=Status
 frontend.de.iteratec.osm.queueDashboard.location-info-list.started.label=Gestartet
 frontend.de.iteratec.osm.queueDashboard.location-info-list.since=Seit
+frontend.de.iteratec.osm.landing.documentTitle=Startseite
 frontend.de.iteratec.osm.landing.yourApplications=Ihre Anwendungen
 frontend.de.iteratec.osm.landing.setupNewMeasurement=Neue Messung einrichten
 frontend.de.iteratec.osm.landing.nothingSetUp=Es wurde noch nichts eingerichtet.
@@ -1225,6 +1226,7 @@ frontend.default.button.cancel.label=Abbrechen
 frontend.de.iteratec.osm.application-title=Anwendung
 frontend.back.label=Zurück zu
 frontend.de.iteratec.osm.dashboard=Dashboard
+frontend.de.iteratec.osm.aggregation.documentTitle=Aggregation
 frontend.de.iteratec.osm.aggregation.title=Aggregation
 frontend.de.iteratec.osm.aggregation.description=Den dargestellten Durchschnittswerten der Seiten liegen jeweils die Webpagetest-Rohdaten des entprechenden Intervals zugrunde.
 frontend.de.iteratec.osm.distributionChart.description=Den dargestellten Verteilungen der Seiten liegen jeweils die Webpagetest-Rohdaten des entprechenden Intervals zugrunde.
@@ -1275,6 +1277,7 @@ frontend.de.iteratec.chart.contextMenu.deselectPoint=Punkt abwählen
 frontend.de.iteratec.chart.contextMenu.deselectAllPoints=Alle Punkte abwählen
 frontend.de.iteratec.chart.errorHeader=Fehler
 frontend.de.iteratec.chart.datapointSelection.error.multipleServer=Vergleich der Filmstreifen ist nur für Messungen des gleichen Servers möglich.
+frontend.de.iteratec.osm.timeSeries.documentTitle=Zeitreihen
 frontend.de.iteratec.osm.timeSeries.chart.label.measurand=Messgröße
 frontend.de.iteratec.osm.timeSeries.chart.label.application=Anwendung
 frontend.de.iteratec.osm.timeSeries.chart.label.measuredEvent=Messschritt

From 5c82ac90111ad5de4f9babb09c8509d48f0ec605 Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Tue, 26 May 2020 17:00:23 +0200
Subject: [PATCH 02/10] Added TitleService

---
 frontend/src/app/global.module.ts             |  4 +-
 .../aggregation/aggregation.component.ts      | 14 ++----
 .../application-dashboard.component.spec.ts   | 26 +++++------
 .../application-dashboard.component.ts        | 37 ++++++++-------
 .../aspect-configuration.component.html       |  2 +-
 .../aspect-configuration.component.ts         |  6 ++-
 .../aspect-configuration.module.ts            |  7 ++-
 .../aspect-metrics.component.ts               | 20 ++++----
 .../edit-aspect-metrics.component.html        |  4 +-
 .../edit-aspect-metrics.component.ts          |  3 ++
 .../app/modules/landing/landing.component.ts  | 35 ++++++++------
 .../metric-finder.component.html              |  9 ++--
 .../metric-finder/metric-finder.component.ts  |  8 ++--
 .../chart-switch-menu.component.ts            | 46 +++++++++++++++----
 .../src/app/services/title.service.spec.ts    | 12 +++++
 frontend/src/app/services/title.service.ts    | 24 ++++++++++
 grails-app/i18n/messages.properties           | 15 +++---
 grails-app/i18n/messages_de.properties        | 14 +++---
 grails-app/views/_menu/_navbar.gsp            |  4 +-
 19 files changed, 179 insertions(+), 111 deletions(-)
 create mode 100644 frontend/src/app/services/title.service.spec.ts
 create mode 100644 frontend/src/app/services/title.service.ts

diff --git a/frontend/src/app/global.module.ts b/frontend/src/app/global.module.ts
index ae22c66953..e0f5d35532 100644
--- a/frontend/src/app/global.module.ts
+++ b/frontend/src/app/global.module.ts
@@ -7,7 +7,6 @@ import {OsmLangService} from './services/osm-lang.service';
 import {ApplicationService} from './services/application.service';
 import {ResultSelectionService} from './modules/result-selection/services/result-selection.service';
 import {ResultSelectionStore} from './modules/result-selection/services/result-selection.store';
-import {Title} from '@angular/platform-browser';
 
 // AoT requires an exported function for factories
 export function createTranslateLoader(http: HttpClient) {
@@ -30,8 +29,7 @@ export function createTranslateLoader(http: HttpClient) {
     OsmLangService,
     ApplicationService,
     ResultSelectionService,
-    ResultSelectionStore,
-    Title
+    ResultSelectionStore
   ],
 })
 export class GlobalModule {
diff --git a/frontend/src/app/modules/aggregation/aggregation.component.ts b/frontend/src/app/modules/aggregation/aggregation.component.ts
index 1b568dc995..3201c24b2c 100644
--- a/frontend/src/app/modules/aggregation/aggregation.component.ts
+++ b/frontend/src/app/modules/aggregation/aggregation.component.ts
@@ -3,8 +3,7 @@ import {BarchartDataService} from './services/barchart-data.service';
 import {ResultSelectionStore} from '../result-selection/services/result-selection.store';
 import {BehaviorSubject} from 'rxjs';
 import {AggregationChartDataService} from './services/aggregation-chart-data.service';
-import {Title} from '@angular/platform-browser';
-import {TranslateService} from '@ngx-translate/core';
+import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-aggregation',
@@ -20,18 +19,11 @@ export class AggregationComponent implements OnInit {
   constructor(private barchartDataService: BarchartDataService,
               private resultSelectionStore: ResultSelectionStore,
               private aggregationChartDataService: AggregationChartDataService,
-              private titleService: Title,
-              private translateService: TranslateService) {
+              private titleService: TitleService) {
   }
 
   ngOnInit() {
-    this.translateService.get('frontend.de.iteratec.osm.aggregation.aggregationTitle')
-      .subscribe((title: string) => {
-        if (title) {
-          this.titleService.setTitle(this.translateService.instant('frontend.de.iteratec.osm.aggregation.aggregationTitle'));
-        }
-        // this.titleService.setTitle(title);
-    });
+    this.titleService.setTitle('frontend.de.iteratec.osm.aggregation.title');
     this.showChart = false;
     this.initDataObservables();
     if (this.resultSelectionStore.validQuery) {
diff --git a/frontend/src/app/modules/application-dashboard/application-dashboard.component.spec.ts b/frontend/src/app/modules/application-dashboard/application-dashboard.component.spec.ts
index 28a18a2230..75dc651535 100644
--- a/frontend/src/app/modules/application-dashboard/application-dashboard.component.spec.ts
+++ b/frontend/src/app/modules/application-dashboard/application-dashboard.component.spec.ts
@@ -4,19 +4,19 @@ import {ApplicationDashboardComponent} from './application-dashboard.component';
 import {PageComponent} from './components/page/page.component';
 import {ApplicationSelectComponent} from './components/application-select/application-select.component';
 import {CsiGraphComponent} from './components/csi-graph/csi-graph.component';
-import {PageMetricComponent} from "./components/page-metric/page-metric.component";
-import {CsiInfoComponent} from "./components/csi-info/csi-info.component";
-import {SharedMocksModule} from "../../testing/shared-mocks.module";
-import {ApplicationService} from "../../services/application.service";
-import {CsiValueBigComponent} from "../shared/components/csi-value/csi-value-big/csi-value-big.component";
-import {CsiValueBaseComponent} from "../shared/components/csi-value/csi-value-base.component";
-import {CsiValueMediumComponent} from "../shared/components/csi-value/csi-value-medium/csi-value-medium.component";
-import {ApplicationJobStatusComponent} from "./components/application-job-status/application-job-status.component";
-import {GraphiteIntegrationComponent} from "./components/application-job-status/graphite-integration/graphite-integration.component";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {MeasurandSelectComponent} from "../result-selection/components/measurands/measurand-select/measurand-select.component";
-import {ResultSelectionService} from "../result-selection/services/result-selection.service";
-import {GrailsBridgeService} from "../../services/grails-bridge.service";
+import {PageMetricComponent} from './components/page-metric/page-metric.component';
+import {CsiInfoComponent} from './components/csi-info/csi-info.component';
+import {SharedMocksModule} from '../../testing/shared-mocks.module';
+import {ApplicationService} from '../../services/application.service';
+import {CsiValueBigComponent} from '../shared/components/csi-value/csi-value-big/csi-value-big.component';
+import {CsiValueBaseComponent} from '../shared/components/csi-value/csi-value-base.component';
+import {CsiValueMediumComponent} from '../shared/components/csi-value/csi-value-medium/csi-value-medium.component';
+import {ApplicationJobStatusComponent} from './components/application-job-status/application-job-status.component';
+import {GraphiteIntegrationComponent} from './components/application-job-status/graphite-integration/graphite-integration.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MeasurandSelectComponent} from '../result-selection/components/measurands/measurand-select/measurand-select.component';
+import {ResultSelectionService} from '../result-selection/services/result-selection.service';
+import {GrailsBridgeService} from '../../services/grails-bridge.service';
 
 describe('ApplicationDashboardComponent', () => {
   let component: ApplicationDashboardComponent;
diff --git a/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts b/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts
index 1d2be234e2..09466a919a 100644
--- a/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts
+++ b/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts
@@ -4,13 +4,14 @@ import {combineLatest, Observable, Subject} from 'rxjs';
 import {filter, map, takeUntil} from 'rxjs/operators';
 import {ApplicationService} from '../../services/application.service';
 import {Application} from '../../models/application.model';
-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";
-import {ResponseWithLoadingState} from "../../models/response-with-loading-state.model";
+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';
+import {ResponseWithLoadingState} from '../../models/response-with-loading-state.model';
+import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-application-dashboard',
@@ -33,8 +34,10 @@ export class ApplicationDashboardComponent implements OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private applicationService: ApplicationService,
-    private performanceAspectService: PerformanceAspectService
+    private performanceAspectService: PerformanceAspectService,
+    private titleService: TitleService
   ) {
+    this.titleService.setTitle('frontend.de.iteratec.osm.applicationDashboard.title');
     this.pages$ = this.applicationService.aspectMetrics$;
     this.applications$ = applicationService.applications$.pipe(
       filter(response => !response.isLoading && !!response.data),
@@ -42,7 +45,8 @@ export class ApplicationDashboardComponent implements OnDestroy {
     );
     this.applicationCsi$ = applicationService.selectSelectedApplicationCsi();
     this.isLoading$ = combineLatest(applicationService.applicationCsiById$, applicationService.selectedApplication$)
-      .pipe(map(([applicationCsiById, selectedApplication]: [ApplicationCsiById, Application]) => applicationCsiById.isLoading && !applicationCsiById[selectedApplication.id]));
+      .pipe(map(([applicationCsiById, selectedApplication]: [ApplicationCsiById, Application]) =>
+        applicationCsiById.isLoading && !applicationCsiById[selectedApplication.id]));
     this.recentCsiValue$ = this.applicationCsi$
       .pipe(map((applicationCsi: ApplicationCsi) => applicationCsi.recentCsi()));
     this.hasConfiguration$ = this.applicationCsi$
@@ -55,14 +59,6 @@ export class ApplicationDashboardComponent implements OnDestroy {
     this.aspectTypes$ = this.performanceAspectService.aspectTypes$;
   }
 
-  private handleNavigation(applicationId: string, applications: Application[]) {
-    if (!applicationId) {
-      this.updateApplication(applications[0]);
-      return;
-    }
-    this.applicationService.setSelectedApplication(applicationId);
-  }
-
   ngOnDestroy() {
     this.destroyed$.next(null);
     this.destroyed$.complete();
@@ -72,4 +68,11 @@ export class ApplicationDashboardComponent implements OnDestroy {
     this.router.navigate(['/applicationDashboard', application.id]);
   }
 
+  private handleNavigation(applicationId: string, applications: Application[]) {
+    if (!applicationId) {
+      this.updateApplication(applications[0]);
+      return;
+    }
+    this.applicationService.setSelectedApplication(applicationId);
+  }
 }
diff --git a/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.html b/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.html
index 7cf932571c..24eb32fec2 100644
--- a/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.html
+++ b/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.html
@@ -2,7 +2,7 @@ <h1>{{ 'frontend.de.iteratec.osm.performance-aspects' | translate }}: {{(applica
   - {{(page$ | async)?.name}}</h1>
 <a (click)="deselectPage()" [routerLink]="['/applicationDashboard', (application$ | async)?.id || '']">
   <i class="fas fa-arrow-left"></i>
-  {{ 'frontend.back.label' | translate }}
+  {{ 'frontend.back.label.neuter' | translate }}
   {{(application$ | async)?.name}}
   {{ 'frontend.de.iteratec.osm.dashboard' | translate }}
 </a>
diff --git a/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.ts b/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.ts
index 902f3f5510..24b3e58e2f 100644
--- a/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.ts
+++ b/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.ts
@@ -8,6 +8,7 @@ import {Application} from '../../models/application.model';
 import {AspectConfigurationService} from './services/aspect-configuration.service';
 import {PerformanceAspectService} from '../../services/performance-aspect.service';
 import {ResponseWithLoadingState} from '../../models/response-with-loading-state.model';
+import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-aspect-configuration',
@@ -26,7 +27,9 @@ export class AspectConfigurationComponent implements OnInit {
     private route: ActivatedRoute,
     private applicationService: ApplicationService,
     private aspectConfService: AspectConfigurationService,
-    private perfAspectService: PerformanceAspectService) {
+    private perfAspectService: PerformanceAspectService,
+    private titleService: TitleService
+  ) {
     this.application$ = applicationService.selectedApplication$;
     this.page$ = aspectConfService.selectedPage$;
     this.performanceAspects$ = aspectConfService.extendedAspects$;
@@ -34,6 +37,7 @@ export class AspectConfigurationComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.titleService.setTitle('frontend.de.iteratec.osm.performance-aspect.configuration.overview.title');
     this.route.paramMap.subscribe((params: ParamMap) => {
       this.aspectConfService.loadApplication(params.get('applicationId'));
       this.aspectConfService.loadPage(params.get('pageId'));
diff --git a/frontend/src/app/modules/aspect-configuration/aspect-configuration.module.ts b/frontend/src/app/modules/aspect-configuration/aspect-configuration.module.ts
index b15dcd4216..2288964047 100644
--- a/frontend/src/app/modules/aspect-configuration/aspect-configuration.module.ts
+++ b/frontend/src/app/modules/aspect-configuration/aspect-configuration.module.ts
@@ -1,14 +1,13 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {AspectConfigurationComponent} from './aspect-configuration.component';
-import {RouterModule, Routes} from "@angular/router";
-import {SharedModule} from "../shared/shared.module";
+import {RouterModule, Routes} from '@angular/router';
+import {SharedModule} from '../shared/shared.module';
 import {AspectMetricsComponent} from './components/aspect-metrics/aspect-metrics.component';
-import {MetricFinderModule} from "../metric-finder/metric-finder.module";
+import {MetricFinderModule} from '../metric-finder/metric-finder.module';
 import {EditAspectMetricsComponent} from './components/edit-aspect-metrics/edit-aspect-metrics.component';
 
 const routes: Routes = [
-  {path: '', component: AspectConfigurationComponent},
   {path: ':applicationId/:pageId', component: AspectConfigurationComponent},
   {path: 'edit/:applicationId/:pageId/:browserId/:aspectType', component: EditAspectMetricsComponent}
 ];
diff --git a/frontend/src/app/modules/aspect-configuration/components/aspect-metrics/aspect-metrics.component.ts b/frontend/src/app/modules/aspect-configuration/components/aspect-metrics/aspect-metrics.component.ts
index 171cd7ad9a..4b0d7d4ce2 100644
--- a/frontend/src/app/modules/aspect-configuration/components/aspect-metrics/aspect-metrics.component.ts
+++ b/frontend/src/app/modules/aspect-configuration/components/aspect-metrics/aspect-metrics.component.ts
@@ -3,12 +3,12 @@ import {
   ExtendedPerformanceAspect,
   PerformanceAspect,
   PerformanceAspectType
-} from "../../../../models/perfomance-aspect.model";
-import {Observable} from "rxjs";
-import {Application} from "../../../../models/application.model";
-import {Page} from "../../../../models/page.model";
-import {AspectConfigurationService} from "../../services/aspect-configuration.service";
-import {map} from "rxjs/operators";
+} from '../../../../models/perfomance-aspect.model';
+import {Observable} from 'rxjs';
+import {Application} from '../../../../models/application.model';
+import {Page} from '../../../../models/page.model';
+import {AspectConfigurationService} from '../../services/aspect-configuration.service';
+import {map} from 'rxjs/operators';
 
 @Component({
   selector: 'osm-aspect-metrics',
@@ -31,16 +31,16 @@ export class AspectMetricsComponent implements OnInit {
   ngOnInit() {
     this.aspectsToShow$ = this.aspectConfService.extendedAspects$.pipe(
       map((aspects: ExtendedPerformanceAspect[]) => {
-        return aspects.filter((aspect: ExtendedPerformanceAspect) => aspect.performanceAspectType.name == this.actualType.name)
+        return aspects.filter((aspect: ExtendedPerformanceAspect) => aspect.performanceAspectType.name === this.actualType.name);
       })
     );
   }
 
   getSelectedAspect(): PerformanceAspect {
-    if (typeof(this.application) === 'undefined') return null;
+    if (typeof(this.application) === 'undefined') { return null; }
     const matchingAspect: PerformanceAspect = this.aspectConfService.extendedAspects$.getValue().find((aspect: PerformanceAspect) => {
-      return aspect.applicationId == this.application.id && aspect.pageId == this.page.id &&
-        aspect.browserId == this.browserId && aspect.performanceAspectType.name == this.actualType.name
+      return aspect.applicationId === this.application.id && aspect.pageId === this.page.id &&
+        aspect.browserId === this.browserId && aspect.performanceAspectType.name === this.actualType.name;
     });
     return matchingAspect;
   }
diff --git a/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.html b/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.html
index 8d5a6a02dc..2d14b16078 100644
--- a/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.html
+++ b/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.html
@@ -2,8 +2,8 @@ <h1>{{ 'frontend.de.iteratec.osm.performance-aspects' | translate }}: {{(applica
   - {{(page$ | async)?.name}}</h1>
 <a [routerLink]="['/aspectConfiguration', (application$ | async)?.id || '', (page$ | async)?.id || '']">
   <i class="fas fa-arrow-left"></i>
-  {{ 'frontend.back.label' | translate }}
-  {{ 'frontend.de.iteratec.osm.performance-aspect.configuration.link-title' | translate }}
+  {{ 'frontend.back.label.feminine' | translate }}
+  {{ 'frontend.de.iteratec.osm.performance-aspect.configuration.overview.link-title' | translate }}
 </a>
 
 <div class="grid-container">
diff --git a/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.ts b/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.ts
index da37393eed..aace3c2cca 100644
--- a/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.ts
+++ b/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.ts
@@ -15,6 +15,7 @@ import {MetricFinderService} from '../../../metric-finder/services/metric-finder
 import {MetricFinderComponent} from '../../../metric-finder/metric-finder.component';
 import {AspectMetricsComponent} from '../aspect-metrics/aspect-metrics.component';
 import {GrailsBridgeService} from '../../../../services/grails-bridge.service';
+import {TitleService} from '../../../../services/title.service';
 
 @Component({
   selector: 'osm-edit-aspect-metrics',
@@ -43,6 +44,7 @@ export class EditAspectMetricsComponent implements OnInit {
     private applicationService: ApplicationService,
     private aspectConfService: AspectConfigurationService,
     private metricFinderService: MetricFinderService,
+    private titleService: TitleService,
     grailsBridgeService: GrailsBridgeService
   ) {
     this.application$ = applicationService.selectedApplication$;
@@ -54,6 +56,7 @@ export class EditAspectMetricsComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.titleService.setTitle('frontend.de.iteratec.osm.performance-aspect.configuration.edit.title');
     this.route.paramMap.subscribe((params: ParamMap) => {
       this.aspectConfService.loadApplication(params.get('applicationId'));
       this.aspectConfService.loadPage(params.get('pageId'));
diff --git a/frontend/src/app/modules/landing/landing.component.ts b/frontend/src/app/modules/landing/landing.component.ts
index 7a07cd9b3e..7bebb8f701 100644
--- a/frontend/src/app/modules/landing/landing.component.ts
+++ b/frontend/src/app/modules/landing/landing.component.ts
@@ -1,10 +1,11 @@
 import {Component} from '@angular/core';
 import {filter, map} from 'rxjs/operators';
-import {ApplicationService} from "../../services/application.service";
+import {ApplicationService} from '../../services/application.service';
 import {combineLatest, Observable, of} from 'rxjs';
-import {ApplicationWithCsi} from "./models/application-with-csi.model";
-import {ResponseWithLoadingState} from "../../models/response-with-loading-state.model";
+import {ApplicationWithCsi} from './models/application-with-csi.model';
+import {ResponseWithLoadingState} from '../../models/response-with-loading-state.model';
 import {FailingJob} from './models/failing-jobs.model';
+import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-landing',
@@ -16,31 +17,35 @@ export class LandingComponent {
   showApplicationEmptyState$: Observable<boolean>;
   hasData$: Observable<boolean>;
   applications$: Observable<ApplicationWithCsi[]>;
-  failingJobs$: Observable<{[application: string]: FailingJob[]}>;
+  failingJobs$: Observable<{ [application: string]: FailingJob[] }>;
   isHealthy$: Observable<boolean> = of(false);
 
-  constructor(private applicationService: ApplicationService) {
+  constructor(private applicationService: ApplicationService, private titleService: TitleService) {
+    this.titleService.setTitle('frontend.de.iteratec.osm.landing.title');
     this.hasData$ = this.applicationService.applications$.pipe(map(response => this.dataHasLoaded(response)));
     this.showApplicationEmptyState$ = this.applicationService.applications$.pipe(
       map(response => this.dataHasLoaded(response) && response.data.length < 1),
     );
     this.applications$ = combineLatest(this.applicationService.applications$, this.applicationService.applicationCsiById$).pipe(
       filter(([applications]) => !applications.isLoading && !!applications.data),
-      map(([applications, csiById]) => applications.data.map(app => new ApplicationWithCsi(app, csiById[app.id], csiById.isLoading)).sort(function (a, b) {
-        if (!b.recentCsi.csiDocComplete) {
-          return -1;
-        } else if(!a.recentCsi.csiDocComplete){
-          return 1;
-        } else {
-          return b.recentCsi.csiDocComplete - a.recentCsi.csiDocComplete;
-        }
-      }))
+      map(([applications, csiById]) => applications.data
+        .map(app => new ApplicationWithCsi(app, csiById[app.id], csiById.isLoading))
+        .sort(function (a, b) {
+          if (!b.recentCsi.csiDocComplete) {
+            return -1;
+          } else if (!a.recentCsi.csiDocComplete) {
+            return 1;
+          } else {
+            return b.recentCsi.csiDocComplete - a.recentCsi.csiDocComplete;
+          }
+        })
+      )
     );
     this.applicationService.loadRecentCsiForApplications();
     this.failingJobs$ = this.applicationService.failingJobs$;
 
     this.failingJobs$.subscribe(next => {
-      if (!next || !this.objectKeys(next).length) {
+      if (!next || !this.objectKeys(next).length) {
         this.isHealthy$ = of(true);
       } else {
         this.isHealthy$ = of(false);
diff --git a/frontend/src/app/modules/metric-finder/metric-finder.component.html b/frontend/src/app/modules/metric-finder/metric-finder.component.html
index 924b509795..40b1ba9b9f 100644
--- a/frontend/src/app/modules/metric-finder/metric-finder.component.html
+++ b/frontend/src/app/modules/metric-finder/metric-finder.component.html
@@ -1,6 +1,7 @@
-<osm-line-chart [results]="testResults$ | async" [metric]="selectedMetric"
-                (resultSelectionChange)="setSelectedResults($event)" *ngIf="(testResults$ | async).length > 0"></osm-line-chart>
+<osm-line-chart (resultSelectionChange)="setSelectedResults($event)" *ngIf="(testResults$ | async).length > 0"
+                [metric]="selectedMetric"
+                [results]="testResults$ | async"></osm-line-chart>
 
-<osm-comparable-filmstrips [results]="selectedResults" [highlightedMetric]="selectedMetric"></osm-comparable-filmstrips>
+<osm-comparable-filmstrips [highlightedMetric]="selectedMetric" [results]="selectedResults"></osm-comparable-filmstrips>
 
-<osm-metric-selection [results]="selectedResults" [(selectedMetric)]="selectedMetric"></osm-metric-selection>
+<osm-metric-selection [(selectedMetric)]="selectedMetric" [results]="selectedResults"></osm-metric-selection>
diff --git a/frontend/src/app/modules/metric-finder/metric-finder.component.ts b/frontend/src/app/modules/metric-finder/metric-finder.component.ts
index 5a85109684..0198980b26 100644
--- a/frontend/src/app/modules/metric-finder/metric-finder.component.ts
+++ b/frontend/src/app/modules/metric-finder/metric-finder.component.ts
@@ -32,9 +32,11 @@ export class MetricFinderComponent {
   }
 
   clearResults() {
-    this.lineChartCmp.clearSelection();
-    this.lineChartCmp.clearResults();
-    this.lineChartCmp.redraw();
+    if (this.lineChartCmp) {
+      this.lineChartCmp.clearSelection();
+      this.lineChartCmp.clearResults();
+      this.lineChartCmp.redraw();
+    }
     this.compFilmstripCmp.clearResults();
   }
 }
diff --git a/frontend/src/app/modules/shared/components/chart-switch-menu/chart-switch-menu.component.ts b/frontend/src/app/modules/shared/components/chart-switch-menu/chart-switch-menu.component.ts
index 23231f3547..09eab65997 100644
--- a/frontend/src/app/modules/shared/components/chart-switch-menu/chart-switch-menu.component.ts
+++ b/frontend/src/app/modules/shared/components/chart-switch-menu/chart-switch-menu.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import {ActivatedRoute, Router} from "@angular/router";
-import {ChartSwitchMenuEntry} from "../../../result-selection/models/chart-switch-menu-entry.model";
+import {ActivatedRoute, Router} from '@angular/router';
+import {ChartSwitchMenuEntry} from '../../../result-selection/models/chart-switch-menu-entry.model';
 
 @Component({
   selector: 'osm-menu',
@@ -10,17 +10,43 @@ import {ChartSwitchMenuEntry} from "../../../result-selection/models/chart-switc
 export class ChartSwitchMenuComponent implements OnInit {
 
   chartSwitchMenu: ChartSwitchMenuEntry[] = [
-    {baseUrl: "/eventResultDashboard/showAll", label: "frontend.de.iteratec.osm.results.timeSeries", icon: "fas fa-chart-line", devUrl: "/eventResultDashboardDev/showAll"},
-    {baseUrl: "/aggregation/show", label: "frontend.de.iteratec.osm.results.aggregation", icon: "fas fa-chart-bar"},
-    {baseUrl: "/distributionChart/show", label: "frontend.de.iteratec.osm.results.distribution", icon: "fas fa-chart-area", devUrl: "/distributionDev/show"},
-    {baseUrl: "/pageComparison/show", label: "frontend.de.iteratec.osm.results.pageComparison", icon: "fas fa-balance-scale", },
-    {baseUrl: "/detailAnalysis/show", label: "frontend.de.iteratec.osm.results.detailAnalysis", icon: "fas fa-chart-pie"},
-    {baseUrl: "/tabularResultPresentation/listResults", label: "frontend.de.iteratec.osm.results.resultList", icon: "fas fa-th-list"}
+    {
+      baseUrl: '/eventResultDashboard/showAll',
+      label: 'frontend.de.iteratec.osm.timeSeries.title',
+      icon: 'fas fa-chart-line',
+      devUrl: '/eventResultDashboardDev/showAll'
+    },
+    {
+      baseUrl: '/aggregation/show',
+      label: 'frontend.de.iteratec.osm.aggregation.title',
+      icon: 'fas fa-chart-bar'
+    },
+    {
+      baseUrl: '/distributionChart/show',
+      label: 'frontend.de.iteratec.osm.results.distribution',
+      icon: 'fas fa-chart-area',
+      devUrl: '/distributionDev/show'
+    },
+    {
+      baseUrl: '/pageComparison/show',
+      label: 'frontend.de.iteratec.osm.results.pageComparison',
+      icon: 'fas fa-balance-scale'
+    },
+    {
+      baseUrl: '/detailAnalysis/show',
+      label: 'frontend.de.iteratec.osm.results.detailAnalysis',
+      icon: 'fas fa-chart-pie'
+    },
+    {
+      baseUrl: '/tabularResultPresentation/listResults',
+      label: 'frontend.de.iteratec.osm.results.resultList',
+      icon: 'fas fa-th-list'
+    }
   ];
 
-  queryString: string = '';
+  queryString = '';
 
-  constructor(private router: Router, private route: ActivatedRoute) {
+  constructor(public router: Router, private route: ActivatedRoute) {
     route.queryParams.subscribe(() => {
       this.queryString = window.location.search;
     });
diff --git a/frontend/src/app/services/title.service.spec.ts b/frontend/src/app/services/title.service.spec.ts
new file mode 100644
index 0000000000..344243f8e6
--- /dev/null
+++ b/frontend/src/app/services/title.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TitleService } from './title.service';
+
+describe('TitleService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: TitleService = TestBed.get(TitleService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/services/title.service.ts b/frontend/src/app/services/title.service.ts
new file mode 100644
index 0000000000..eed44d55f0
--- /dev/null
+++ b/frontend/src/app/services/title.service.ts
@@ -0,0 +1,24 @@
+import {Injectable} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {Title} from '@angular/platform-browser';
+import {Subscription} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TitleService {
+
+  constructor(private translateService: TranslateService, private titleService: Title) {
+  }
+
+  setTitle(titleKeyToTranslate: string): void {
+    const titleSubscription: Subscription = this.translateService.stream(titleKeyToTranslate).subscribe((title: string) => {
+      if (title !== titleKeyToTranslate) {
+        this.titleService.setTitle(title);
+        if (titleSubscription) {
+          titleSubscription.unsubscribe();
+        }
+      }
+    });
+  }
+}
diff --git a/grails-app/i18n/messages.properties b/grails-app/i18n/messages.properties
index d7b7d489a1..c5b1009db1 100644
--- a/grails-app/i18n/messages.properties
+++ b/grails-app/i18n/messages.properties
@@ -1151,7 +1151,7 @@ frontend.de.iteratec.osm.queueDashboard.location-info-list.lastDate.label=Date o
 frontend.de.iteratec.osm.queueDashboard.location-info-list.status.label=Status
 frontend.de.iteratec.osm.queueDashboard.location-info-list.started.label=Launched
 frontend.de.iteratec.osm.queueDashboard.location-info-list.since=Since
-frontend.de.iteratec.osm.landing.documentTitle=Home
+frontend.de.iteratec.osm.landing.title=Home
 frontend.de.iteratec.osm.landing.yourApplications=Your applications
 frontend.de.iteratec.osm.landing.setupNewMeasurement=Setup new measurement
 frontend.de.iteratec.osm.landing.nothingSetUp=Nothing set up yet.
@@ -1244,15 +1244,17 @@ frontend.de.iteratec.osm.performance-aspect.PAGE_IS_USABLE=Usable
 frontend.de.iteratec.osm.performance-aspect.PAGE_IS_USABLE.user-centric-question=Is it usable?
 frontend.de.iteratec.osm.performance-aspect.PAGE_IS_USABLE.description=Page is usable
 frontend.de.iteratec.osm.performance-aspect-metric=Aspect metric
-frontend.de.iteratec.osm.performance-aspect.configuration.link-title=Overview aspect metrics
+frontend.de.iteratec.osm.performance-aspect.configuration.overview.title=Aspect metrics
+frontend.de.iteratec.osm.performance-aspect.configuration.overview.link-title=Overview of aspect metrics
+frontend.de.iteratec.osm.performance-aspect.configuration.edit.title=Configuration of aspect metrics
 frontend.de.iteratec.osm.applicationDashboard.jobStatus.integrations=Integrations
 frontend.default.button.edit.label=Edit
 frontend.default.button.save.label=Save
 frontend.default.button.cancel.label=Cancel
 frontend.de.iteratec.osm.application-title=Application
-frontend.back.label=Back to
+frontend.back.label.feminine=Back to the
+frontend.back.label.neuter=Back to the
 frontend.de.iteratec.osm.dashboard=Dashboard
-frontend.de.iteratec.osm.aggregation.documentTitle=Aggregation
 frontend.de.iteratec.osm.aggregation.title=Aggregation
 frontend.de.iteratec.osm.aggregation.description=The webpagetest raw data of the respective interval is the basis for the displayed mean values.
 frontend.de.iteratec.osm.distributionChart.description=The webpagetest raw data of the respective interval is the basis for the displayed distribution.
@@ -1266,8 +1268,6 @@ frontend.de.iteratec.osm.resultSelection.warning.noDataAvailable=No data availab
 frontend.de.iteratec.osm.resultSelection.warning.noApplicationSelected=No application selected.
 frontend.de.iteratec.osm.resultSelection.warning.noPageSelected=No page or measured step selected.
 frontend.de.iteratec.osm.resultSelection.warning.noMeasurandSelected=No measurand selected.
-frontend.de.iteratec.osm.results.timeSeries=Time Series
-frontend.de.iteratec.osm.results.aggregation=Aggregation
 frontend.de.iteratec.osm.results.distributionChart=Distribution Chart
 frontend.de.iteratec.osm.results.distribution=Distribution
 frontend.de.iteratec.osm.results.pageComparison=Page Comparison
@@ -1303,7 +1303,7 @@ frontend.de.iteratec.chart.contextMenu.deselectPoint=Deselect Point
 frontend.de.iteratec.chart.contextMenu.deselectAllPoints=Deselect all Points
 frontend.de.iteratec.chart.errorHeader=Error
 frontend.de.iteratec.chart.datapointSelection.error.multipleServer=Comparison of the filmstrips is only possible for measurements on the same server.
-frontend.de.iteratec.osm.timeSeries.documentTitle=Time Series
+frontend.de.iteratec.osm.timeSeries.title=Time Series
 frontend.de.iteratec.osm.timeSeries.chart.label.measurand=Measurand
 frontend.de.iteratec.osm.timeSeries.chart.label.application=Application
 frontend.de.iteratec.osm.timeSeries.chart.label.measuredEvent=Measured step
@@ -1311,4 +1311,3 @@ frontend.de.iteratec.osm.timeSeries.chart.label.location=Location
 frontend.de.iteratec.osm.timeSeries.chart.label.connectivity=Connectivity
 frontend.de.iteratec.osm.timeSeries.chart.label.timestamp=Timestamp: 
 frontend.de.iteratec.osm.timeSeries.chart.label.testAgent=Test agent: 
-frontend.de.iteratec.osm.startPage.documentTitle
diff --git a/grails-app/i18n/messages_de.properties b/grails-app/i18n/messages_de.properties
index b8aafa494d..5fec00989b 100644
--- a/grails-app/i18n/messages_de.properties
+++ b/grails-app/i18n/messages_de.properties
@@ -1129,7 +1129,7 @@ frontend.de.iteratec.osm.queueDashboard.location-info-list.lastDate.label=Stand
 frontend.de.iteratec.osm.queueDashboard.location-info-list.status.label=Status
 frontend.de.iteratec.osm.queueDashboard.location-info-list.started.label=Gestartet
 frontend.de.iteratec.osm.queueDashboard.location-info-list.since=Seit
-frontend.de.iteratec.osm.landing.documentTitle=Startseite
+frontend.de.iteratec.osm.landing.title=Startseite
 frontend.de.iteratec.osm.landing.yourApplications=Ihre Anwendungen
 frontend.de.iteratec.osm.landing.setupNewMeasurement=Neue Messung einrichten
 frontend.de.iteratec.osm.landing.nothingSetUp=Es wurde noch nichts eingerichtet.
@@ -1219,14 +1219,16 @@ frontend.de.iteratec.osm.performance-aspect.PAGE_IS_USABLE=Usable
 frontend.de.iteratec.osm.performance-aspect.PAGE_IS_USABLE.user-centric-question=Is it usable?
 frontend.de.iteratec.osm.performance-aspect.PAGE_IS_USABLE.description=Seite ist bedienbar
 frontend.de.iteratec.osm.performance-aspect-metric=Aspekt-Metrik
-frontend.de.iteratec.osm.performance-aspect.configuration.link-title=Übersicht Aspekt-Metriken
+frontend.de.iteratec.osm.performance-aspect.configuration.overview.title=Aspekt-Metriken
+frontend.de.iteratec.osm.performance-aspect.configuration.overview.link-title=Übersicht der Aspekt-Metriken
+frontend.de.iteratec.osm.performance-aspect.configuration.edit.title=Konfiguration der Aspekt-Metriken
 frontend.default.button.edit.label=Bearbeiten
 frontend.default.button.save.label=Speichern
 frontend.default.button.cancel.label=Abbrechen
 frontend.de.iteratec.osm.application-title=Anwendung
-frontend.back.label=Zurück zu
+frontend.back.label.feminine=Zurück zur
+frontend.back.label.neuter=Zurück zum
 frontend.de.iteratec.osm.dashboard=Dashboard
-frontend.de.iteratec.osm.aggregation.documentTitle=Aggregation
 frontend.de.iteratec.osm.aggregation.title=Aggregation
 frontend.de.iteratec.osm.aggregation.description=Den dargestellten Durchschnittswerten der Seiten liegen jeweils die Webpagetest-Rohdaten des entprechenden Intervals zugrunde.
 frontend.de.iteratec.osm.distributionChart.description=Den dargestellten Verteilungen der Seiten liegen jeweils die Webpagetest-Rohdaten des entprechenden Intervals zugrunde.
@@ -1240,8 +1242,6 @@ frontend.de.iteratec.osm.resultSelection.warning.noDataAvailable=Für Ihre Auswa
 frontend.de.iteratec.osm.resultSelection.warning.noApplicationSelected=Keine Anwendung ausgewählt.
 frontend.de.iteratec.osm.resultSelection.warning.noPageSelected=Keine Seite oder Messschritt ausgewählt.
 frontend.de.iteratec.osm.resultSelection.warning.noMeasurandSelected=Keine Messgröße ausgewählt.
-frontend.de.iteratec.osm.results.timeSeries=Zeitreihen
-frontend.de.iteratec.osm.results.aggregation=Aggregation
 frontend.de.iteratec.osm.results.distributionChart=Verteilungsdiagramm
 frontend.de.iteratec.osm.results.distribution=Verteilungsdiagramm
 frontend.de.iteratec.osm.results.pageComparison=Seitenvergleich
@@ -1277,7 +1277,7 @@ frontend.de.iteratec.chart.contextMenu.deselectPoint=Punkt abwählen
 frontend.de.iteratec.chart.contextMenu.deselectAllPoints=Alle Punkte abwählen
 frontend.de.iteratec.chart.errorHeader=Fehler
 frontend.de.iteratec.chart.datapointSelection.error.multipleServer=Vergleich der Filmstreifen ist nur für Messungen des gleichen Servers möglich.
-frontend.de.iteratec.osm.timeSeries.documentTitle=Zeitreihen
+frontend.de.iteratec.osm.timeSeries.title=Zeitreihen
 frontend.de.iteratec.osm.timeSeries.chart.label.measurand=Messgröße
 frontend.de.iteratec.osm.timeSeries.chart.label.application=Anwendung
 frontend.de.iteratec.osm.timeSeries.chart.label.measuredEvent=Messschritt
diff --git a/grails-app/views/_menu/_navbar.gsp b/grails-app/views/_menu/_navbar.gsp
index 80d9af43ce..364ed1cf50 100644
--- a/grails-app/views/_menu/_navbar.gsp
+++ b/grails-app/views/_menu/_navbar.gsp
@@ -32,7 +32,7 @@
         <ul class="nav navbar-nav">
             <li class="${controllerName.equals("landing") ? 'active' : ''}" data-active-matches="^/$">
                 <g:link uri="/"><i class="fas fa-home"></i>
-                    <g:message code="navbar.home" default="Home"/>
+                    <g:message code="frontend.de.iteratec.osm.landing.title" default="Home"/>
                 </g:link>
             </li>
             <li class="dropdown ${mainTab.equals('results') ? 'active open' : ''}"
@@ -61,7 +61,7 @@
                         data-active-matches="/aggregation/show/?.*">
                         <a href="${createLink(uri: '/aggregation/show')}">
                             <i class="fas fa-chart-bar"></i>
-                            <g:message code="de.iteratec.isocsi.aggregationChart" default="Aggregation"/>
+                            <g:message code="frontend.de.iteratec.osm.aggregation.title" default="Aggregation"/>
                         </a>
                     </li>
                     <li class="${controllerName.equals('distributionChart') ? 'active' : ''}" id="distributionMainMenu">

From ccedc986a63c2d6dc6ef911abcd7c95016a37aa5 Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Thu, 28 May 2020 16:24:43 +0200
Subject: [PATCH 03/10] Added title for queue dashboard

---
 .../queue-dashboard.component.ts              | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.ts b/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.ts
index e256bffa8c..8414c6c204 100644
--- a/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.ts
+++ b/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.ts
@@ -1,30 +1,29 @@
-import {
-  Component
-} from '@angular/core';
+import {Component} from '@angular/core';
 import {Observable} from 'rxjs';
-import {QueueDashboardService} from "./services/queue-dashboard.service";
-import {WptServerDTO} from "./models/WptServerDTO";
-import {ServerInfo} from "./services/queue-dashboard.service";
+import {QueueDashboardService, ServerInfo} from './services/queue-dashboard.service';
+import {WptServerDTO} from './models/WptServerDTO';
+import {TitleService} from '../../services/title.service';
 
 @Component({
-  selector: 'app-queue-dashboard',
+  selector: 'osm-app-queue-dashboard',
   templateUrl: './queue-dashboard.component.html',
   styleUrls: ['./queue-dashboard.component.scss']
 })
 export class QueueDashboardComponent {
 
-  private queueService: QueueDashboardService;
   wptServer$: Observable<Array<WptServerDTO>>;
   serverInfo$: Observable<ServerInfo>;
+  private queueService: QueueDashboardService;
 
-  constructor( queueService: QueueDashboardService) {
+  constructor(queueService: QueueDashboardService, private titleService: TitleService) {
+    this.titleService.setTitle('frontend.de.iteratec.osm.queueDashboard.title');
     this.queueService = queueService;
     this.wptServer$ = this.queueService.activeServers$;
     this.serverInfo$ = this.queueService.serverInfo$;
     this.queueService.getActiveWptServer();
   }
 
-  loadQueueContent( id: number){
+  loadQueueContent(id: number) {
     this.queueService.getInfoTableForWptServer(id);
   }
 }

From 5cc18023c35ac9039389ffa93d2d49e8c42fabe4 Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Thu, 28 May 2020 17:06:42 +0200
Subject: [PATCH 04/10] Fixed angular tests

---
 .../queue-dashboard.component.spec.ts         | 61 ++++++++++---------
 .../src/app/services/title.service.spec.ts    | 11 +++-
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.spec.ts b/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.spec.ts
index ef80f0cfea..44a8b71d0e 100644
--- a/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.spec.ts
+++ b/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.spec.ts
@@ -1,16 +1,18 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {QueueDashboardComponent} from "./queue-dashboard.component";
-import {SharedMocksModule} from "../../testing/shared-mocks.module";
-import {QueueDashboardService, ServerInfo} from "./services/queue-dashboard.service";
-import {LocationInfoListComponent} from "./components/location-info-list/location-info-list.component";
-import {OsmLangService} from "../../services/osm-lang.service";
-import {GrailsBridgeService} from "../../services/grails-bridge.service";
+import {QueueDashboardComponent} from './queue-dashboard.component';
+import {SharedMocksModule} from '../../testing/shared-mocks.module';
+import {QueueDashboardService, ServerInfo} from './services/queue-dashboard.service';
+import {LocationInfoListComponent} from './components/location-info-list/location-info-list.component';
+import {OsmLangService} from '../../services/osm-lang.service';
+import {GrailsBridgeService} from '../../services/grails-bridge.service';
+import {TitleService} from '../../services/title.service';
 
 
-describe("QueueDashboardComponent", () => {
+describe('QueueDashboardComponent', () => {
   let component: QueueDashboardComponent;
   let fixture: ComponentFixture<QueueDashboardComponent>;
   let queueDashboardService: QueueDashboardService;
+  let titleService: TitleService;
   let mockserver = [];
   let mockinformation = [];
 
@@ -28,7 +30,7 @@ describe("QueueDashboardComponent", () => {
         OsmLangService,
         GrailsBridgeService
       ]
-    }).compileComponents()
+    }).compileComponents();
   }));
 
   beforeEach( () => {
@@ -37,14 +39,14 @@ describe("QueueDashboardComponent", () => {
     fixture.detectChanges();
 
     mockserver = [{
-      label:"prod.server02.wpt.iteratec.de",
-      baseUrl:"http://prod.server02.wpt.iteratec.de/",
-      id:11
+      label: 'prod.server02.wpt.iteratec.de',
+      baseUrl: 'http://prod.server02.wpt.iteratec.de/',
+      id: 11
     },
       {
-        label:"dev.server02.wpt.iteratec.de",
-        baseUrl:"http://dev.server02.wpt.iteratec.de/",
-        id:1
+        label: 'dev.server02.wpt.iteratec.de',
+        baseUrl: 'http://dev.server02.wpt.iteratec.de/',
+        id: 1
       }
     ];
 
@@ -54,18 +56,18 @@ describe("QueueDashboardComponent", () => {
       eventResultLastHour: 0,
       eventsNextHour: 2,
       executingJobs: [
-        [{jobConfigLabel: "label",
-          date: "2018-10-14 14:00:16.0",
-          wptServerBaseUrl: "url",
+        [{jobConfigLabel: 'label',
+          date: '2018-10-14 14:00:16.0',
+          wptServerBaseUrl: 'url',
           testId: 55,
-          jobResultStatus: {name: "WAITING"}}]
+          jobResultStatus: {name: 'WAITING'}}]
       ],
-      id: "Dulles_GalaxyS5:undefined",
+      id: 'Dulles_GalaxyS5:undefined',
       jobResultsLastHour: 0,
       jobs: 2,
       jobsNextHour: 1,
-      label: "Dulles_GalaxyS5",
-      lastHealthCheckDate: "2018-10-15 15:00:16.0",
+      label: 'Dulles_GalaxyS5',
+      lastHealthCheckDate: '2018-10-15 15:00:16.0',
       pendingJobs: 2,
       runningJobs: 0}];
   });
@@ -76,8 +78,9 @@ describe("QueueDashboardComponent", () => {
 
   it('should be able to call the queueDashboardService method from the QueueDashboardService', () => {
     queueDashboardService = TestBed.get(QueueDashboardService);
-    spyOn(queueDashboardService, "getActiveWptServer");
-    new QueueDashboardComponent(queueDashboardService);
+    titleService = TestBed.get(TitleService);
+    spyOn(queueDashboardService, 'getActiveWptServer');
+    new QueueDashboardComponent(queueDashboardService, titleService);
     expect(queueDashboardService.getActiveWptServer).toHaveBeenCalled();
   });
 
@@ -97,15 +100,15 @@ describe("QueueDashboardComponent", () => {
     queueDashboardService.activeServers$.next(mockserver);
     fixture.detectChanges();
 
-    const datatableEl: HTMLCollection = fixture.nativeElement.querySelectorAll("#data-table-id");
+    const datatableEl: HTMLCollection = fixture.nativeElement.querySelectorAll('#data-table-id');
     expect(datatableEl.length).toEqual(0);
 
-    const buttons : HTMLButtonElement = fixture.nativeElement.querySelectorAll("#load-data-button");
+    const buttons: HTMLButtonElement = fixture.nativeElement.querySelectorAll('#load-data-button');
     buttons[0].click();
     buttons[1].click();
 
     fixture.detectChanges();
-    const datatableEl2: HTMLCollection = fixture.nativeElement.querySelectorAll("#data-table-id");
+    const datatableEl2: HTMLCollection = fixture.nativeElement.querySelectorAll('#data-table-id');
     expect(datatableEl2.length).toBeGreaterThan(0);
   });
 
@@ -115,10 +118,10 @@ describe("QueueDashboardComponent", () => {
     queueDashboardService.activeServers$.next(mockserver);
     fixture.detectChanges();
 
-    const datarows : HTMLCollection = fixture.nativeElement.querySelectorAll(".queueRow");
+    const datarows: HTMLCollection = fixture.nativeElement.querySelectorAll('.queueRow');
     expect(datarows.length).toEqual(0);
 
-    fixture.nativeElement.querySelectorAll(".card").forEach(card => {
+    fixture.nativeElement.querySelectorAll('.card').forEach(card => {
       card.isOpened = true;
       card.isLoaded = true;
     });
@@ -131,7 +134,7 @@ describe("QueueDashboardComponent", () => {
 
     fixture.detectChanges();
 
-    const datarows2 : HTMLCollection = fixture.nativeElement.querySelectorAll(".queueRow");
+    const datarows2: HTMLCollection = fixture.nativeElement.querySelectorAll('.queueRow');
     expect(datarows2).toBeTruthy();
     expect(datarows2[0].firstElementChild.textContent ).toEqual(mockinformation[0].id);
   });
diff --git a/frontend/src/app/services/title.service.spec.ts b/frontend/src/app/services/title.service.spec.ts
index 344243f8e6..ce283f0510 100644
--- a/frontend/src/app/services/title.service.spec.ts
+++ b/frontend/src/app/services/title.service.spec.ts
@@ -1,9 +1,14 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { TitleService } from './title.service';
+import {TitleService} from './title.service';
+import {SharedMocksModule} from '../testing/shared-mocks.module';
 
 describe('TitleService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [
+      SharedMocksModule
+    ]
+  }));
 
   it('should be created', () => {
     const service: TitleService = TestBed.get(TitleService);

From 32917217b068b9411ffc02a558fd2468a837885e Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Fri, 29 May 2020 09:33:05 +0200
Subject: [PATCH 05/10] Added title for distribution chart

---
 .../modules/distribution/distribution.component.ts  | 13 ++++++++++---
 .../chart-switch-menu.component.ts                  |  2 +-
 grails-app/i18n/messages.properties                 |  5 +++--
 grails-app/i18n/messages_de.properties              |  3 ++-
 grails-app/views/_menu/_navbar.gsp                  |  2 +-
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/modules/distribution/distribution.component.ts b/frontend/src/app/modules/distribution/distribution.component.ts
index 1a221c6536..ff8e877f1c 100644
--- a/frontend/src/app/modules/distribution/distribution.component.ts
+++ b/frontend/src/app/modules/distribution/distribution.component.ts
@@ -1,21 +1,28 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {DistributionDataDTO, DistributionData} from './models/distribution-data.model';
 import {URL} from '../../enums/url.enum';
 import {ResultSelectionStore} from '../result-selection/services/result-selection.store';
 import {BehaviorSubject} from 'rxjs';
 import {ViolinchartDataService} from './services/violinchart-data.service';
+import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-distribution',
   templateUrl: './distribution.component.html',
   styleUrls: ['./distribution.component.scss']
 })
-export class DistributionComponent {
+export class DistributionComponent implements OnInit {
 
   showChartCard = false;
   results$ = new BehaviorSubject<DistributionDataDTO>(new DistributionData());
 
-  constructor(private violinChartService: ViolinchartDataService, private resultSelectionStore: ResultSelectionStore) {
+  constructor(private violinChartService: ViolinchartDataService,
+              private resultSelectionStore: ResultSelectionStore,
+              private titleService: TitleService) {
+  }
+
+  ngOnInit() {
+    this.titleService.setTitle('frontend.de.iteratec.osm.distribution.title');
   }
 
   getDistributionChartData() {
diff --git a/frontend/src/app/modules/shared/components/chart-switch-menu/chart-switch-menu.component.ts b/frontend/src/app/modules/shared/components/chart-switch-menu/chart-switch-menu.component.ts
index 09eab65997..4009bdb3d8 100644
--- a/frontend/src/app/modules/shared/components/chart-switch-menu/chart-switch-menu.component.ts
+++ b/frontend/src/app/modules/shared/components/chart-switch-menu/chart-switch-menu.component.ts
@@ -23,7 +23,7 @@ export class ChartSwitchMenuComponent implements OnInit {
     },
     {
       baseUrl: '/distributionChart/show',
-      label: 'frontend.de.iteratec.osm.results.distribution',
+      label: 'frontend.de.iteratec.osm.distribution.title',
       icon: 'fas fa-chart-area',
       devUrl: '/distributionDev/show'
     },
diff --git a/grails-app/i18n/messages.properties b/grails-app/i18n/messages.properties
index 44b526f70d..ca8c2a6a17 100644
--- a/grails-app/i18n/messages.properties
+++ b/grails-app/i18n/messages.properties
@@ -1257,7 +1257,6 @@ frontend.back.label.neuter=Back to the
 frontend.de.iteratec.osm.dashboard=Dashboard
 frontend.de.iteratec.osm.aggregation.title=Aggregation
 frontend.de.iteratec.osm.aggregation.description=The webpagetest raw data of the respective interval is the basis for the displayed mean values.
-frontend.de.iteratec.osm.distribution.description=The webpagetest raw data of the respective interval is the basis for the displayed distribution.
 frontend.de.iteratec.osm.resultSelection.show=Show
 frontend.de.iteratec.osm.resultSelection.warning.longProcessingTime=The request will take a long time (too much data selected).
 frontend.de.iteratec.osm.resultSelection.warning.longProcessingTime.confirm=Are you sure?
@@ -1309,7 +1308,9 @@ frontend.de.iteratec.osm.timeSeries.chart.label.measuredEvent=Measured step
 frontend.de.iteratec.osm.timeSeries.chart.label.location=Location
 frontend.de.iteratec.osm.timeSeries.chart.label.connectivity=Connectivity
 frontend.de.iteratec.osm.timeSeries.chart.label.timestamp=Timestamp: 
-frontend.de.iteratec.osm.timeSeries.chart.label.testAgent=Test agent:
+frontend.de.iteratec.osm.timeSeries.chart.label.testAgent=Test agent: 
+frontend.de.iteratec.osm.distribution.title=Distribution Chart
+frontend.de.iteratec.osm.distribution.description=The webpagetest raw data of the respective interval is the basis for the displayed distribution.
 frontend.de.iteratec.osm.distribution.chart.settings.maximum=Maximum value
 frontend.de.iteratec.osm.distribution.chart.settings.filter=Filter
 frontend.de.iteratec.osm.distribution.chart.settings.sort=Sort
diff --git a/grails-app/i18n/messages_de.properties b/grails-app/i18n/messages_de.properties
index f9319a901d..5f4bc3e484 100644
--- a/grails-app/i18n/messages_de.properties
+++ b/grails-app/i18n/messages_de.properties
@@ -1231,7 +1231,6 @@ frontend.back.label.neuter=Zurück zum
 frontend.de.iteratec.osm.dashboard=Dashboard
 frontend.de.iteratec.osm.aggregation.title=Aggregation
 frontend.de.iteratec.osm.aggregation.description=Den dargestellten Durchschnittswerten der Seiten liegen jeweils die Webpagetest-Rohdaten des entprechenden Intervals zugrunde.
-frontend.de.iteratec.osm.distribution.description=Den dargestellten Verteilungen der Seiten liegen jeweils die Webpagetest-Rohdaten des entprechenden Intervals zugrunde.
 frontend.de.iteratec.osm.resultSelection.show=Anzeigen
 frontend.de.iteratec.osm.resultSelection.warning.longProcessingTime=Die Anfrage wird lange dauern (zu viele Daten ausgewählt).
 frontend.de.iteratec.osm.resultSelection.warning.longProcessingTime.confirm=Sind Sie sicher?
@@ -1284,6 +1283,8 @@ frontend.de.iteratec.osm.timeSeries.chart.label.location=Location
 frontend.de.iteratec.osm.timeSeries.chart.label.connectivity=Anbindung
 frontend.de.iteratec.osm.timeSeries.chart.label.timestamp=Zeitstempel: 
 frontend.de.iteratec.osm.timeSeries.chart.label.testAgent=Testagent: 
+frontend.de.iteratec.osm.distribution.title=Verteilungsdiagramm
+frontend.de.iteratec.osm.distribution.description=Den dargestellten Verteilungen der Seiten liegen jeweils die Webpagetest-Rohdaten des entprechenden Intervals zugrunde.
 frontend.de.iteratec.osm.distribution.chart.settings.maximum=Maximalwert
 frontend.de.iteratec.osm.distribution.chart.settings.filter=Filtern
 frontend.de.iteratec.osm.distribution.chart.settings.sort=Sortierung
diff --git a/grails-app/views/_menu/_navbar.gsp b/grails-app/views/_menu/_navbar.gsp
index 364ed1cf50..d4212997c8 100644
--- a/grails-app/views/_menu/_navbar.gsp
+++ b/grails-app/views/_menu/_navbar.gsp
@@ -68,7 +68,7 @@
                         <g:link controller="distributionChart" action="show"
                                 title="${message(code:'de.iteratec.osm.distributionChart', default:'Distribution Chart')}">
                             <i class="fas fa-chart-area"></i>
-                            <g:message code="de.iteratec.osm.distributionChart" default="Distribution Chart"/>
+                            <g:message code="frontend.de.iteratec.osm.distribution.title" default="Distribution Chart"/>
                         </g:link>
                     </li>
                     <li class="${controllerName.equals('pageComparison') ? 'active' : ''}" id="pageComparisonMainMenu">

From aebd2a99df5af085b45a5c0b1e38a036a563750f Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Fri, 29 May 2020 16:14:49 +0200
Subject: [PATCH 06/10] Change title with router event

---
 frontend/package-lock.json                    | 77 +++++--------------
 frontend/src/app/app-routing.module.ts        |  6 +-
 frontend/src/app/global.module.ts             |  8 +-
 .../aggregation/aggregation.component.ts      |  5 +-
 .../modules/aggregation/aggregation.module.ts |  2 +-
 .../application-dashboard.component.ts        |  3 -
 .../application-dashboard.module.ts           | 18 ++---
 .../aspect-configuration.component.ts         |  5 +-
 .../aspect-configuration.module.ts            |  4 +-
 .../edit-aspect-metrics.component.html        | 13 ++--
 .../edit-aspect-metrics.component.ts          |  3 -
 .../distribution/distribution.component.ts    | 12 +--
 .../distribution/distribution.module.ts       |  2 +-
 .../app/modules/landing/landing.component.ts  |  4 +-
 .../src/app/modules/landing/landing.module.ts | 10 +--
 .../queue-dashboard.component.ts              |  4 +-
 .../queue-dashboard/queue-dashboard.module.ts | 12 +--
 frontend/src/app/services/title.service.ts    | 51 ++++++++++--
 grails-app/i18n/messages.properties           |  1 +
 grails-app/i18n/messages_de.properties        |  1 +
 20 files changed, 110 insertions(+), 131 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a09e0970dd..bc90f31603 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1455,7 +1455,6 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
-      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -2679,8 +2678,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -3346,8 +3344,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "depd": {
       "version": "1.1.2",
@@ -4274,8 +4271,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4296,14 +4292,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4318,20 +4312,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4448,8 +4439,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4461,7 +4451,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4476,7 +4465,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4484,14 +4472,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4510,7 +4496,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4591,8 +4576,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4604,7 +4588,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4690,8 +4673,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4727,7 +4709,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4747,7 +4728,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4791,14 +4771,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -4807,7 +4785,6 @@
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
       "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4820,7 +4797,6 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
-      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -4858,8 +4834,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "get-stream": {
       "version": "3.0.0",
@@ -5039,8 +5014,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -5753,8 +5727,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -6370,7 +6343,6 @@
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -6383,8 +6355,7 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -6668,8 +6639,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -7300,7 +7270,6 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -8198,7 +8167,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
-      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -8210,7 +8178,6 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
-          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -8221,8 +8188,7 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -8231,7 +8197,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -8242,7 +8207,6 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -8253,7 +8217,6 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
-          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -9528,7 +9491,6 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "dev": true,
-      "optional": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -10853,7 +10815,6 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 5d3715b7a9..4a570113ba 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -20,10 +20,6 @@ const appRoutes: Routes = [
     path: 'landing',
     loadChildren: './modules/landing/landing.module#LandingModule'
   },
-  {
-    path: 'metricFinder',
-    loadChildren: './modules/metric-finder/metric-finder.module#MetricFinderModule'
-  },
   {
     path: 'aggregation',
     loadChildren: './modules/aggregation/aggregation.module#AggregationModule'
@@ -41,7 +37,7 @@ const appRoutes: Routes = [
     loadChildren: './modules/landing/landing.module#LandingModule',
     pathMatch: 'full'
   },
-  {path: '**', component: NotFoundComponent}];
+  {path: '**', component: NotFoundComponent, data: {title: 'frontend.de.iteratec.osm.error.notFound.title'}}];
 
 @NgModule({
   imports: [
diff --git a/frontend/src/app/global.module.ts b/frontend/src/app/global.module.ts
index e0f5d35532..321f6ab630 100644
--- a/frontend/src/app/global.module.ts
+++ b/frontend/src/app/global.module.ts
@@ -7,6 +7,7 @@ import {OsmLangService} from './services/osm-lang.service';
 import {ApplicationService} from './services/application.service';
 import {ResultSelectionService} from './modules/result-selection/services/result-selection.service';
 import {ResultSelectionStore} from './modules/result-selection/services/result-selection.store';
+import {TitleService} from './services/title.service';
 
 // AoT requires an exported function for factories
 export function createTranslateLoader(http: HttpClient) {
@@ -35,7 +36,10 @@ export function createTranslateLoader(http: HttpClient) {
 export class GlobalModule {
   supportedLangs: string[] = ['en', 'de'];
 
-  constructor(private osmLangService: OsmLangService, private translateService: TranslateService) {
+  constructor(private osmLangService: OsmLangService,
+              private translateService: TranslateService,
+              private titleService: TitleService
+  ) {
     translateService.addLangs(this.supportedLangs);
     translateService.setDefaultLang('en');
 
@@ -43,5 +47,7 @@ export class GlobalModule {
       this.osmLangService.getOsmLang() :
       translateService.getDefaultLang()
     );
+
+    titleService.initRouteEventListener();
   }
 }
diff --git a/frontend/src/app/modules/aggregation/aggregation.component.ts b/frontend/src/app/modules/aggregation/aggregation.component.ts
index 3201c24b2c..695a424734 100644
--- a/frontend/src/app/modules/aggregation/aggregation.component.ts
+++ b/frontend/src/app/modules/aggregation/aggregation.component.ts
@@ -3,7 +3,6 @@ import {BarchartDataService} from './services/barchart-data.service';
 import {ResultSelectionStore} from '../result-selection/services/result-selection.store';
 import {BehaviorSubject} from 'rxjs';
 import {AggregationChartDataService} from './services/aggregation-chart-data.service';
-import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-aggregation',
@@ -18,12 +17,10 @@ export class AggregationComponent implements OnInit {
 
   constructor(private barchartDataService: BarchartDataService,
               private resultSelectionStore: ResultSelectionStore,
-              private aggregationChartDataService: AggregationChartDataService,
-              private titleService: TitleService) {
+              private aggregationChartDataService: AggregationChartDataService) {
   }
 
   ngOnInit() {
-    this.titleService.setTitle('frontend.de.iteratec.osm.aggregation.title');
     this.showChart = false;
     this.initDataObservables();
     if (this.resultSelectionStore.validQuery) {
diff --git a/frontend/src/app/modules/aggregation/aggregation.module.ts b/frontend/src/app/modules/aggregation/aggregation.module.ts
index 7daff6f29d..1e3d44e860 100644
--- a/frontend/src/app/modules/aggregation/aggregation.module.ts
+++ b/frontend/src/app/modules/aggregation/aggregation.module.ts
@@ -10,7 +10,7 @@ import {AggregationChartDataService} from './services/aggregation-chart-data.ser
 import {FormsModule} from '@angular/forms';
 
 const AggregationRoutes: Routes = [
-  {path: 'show', component: AggregationComponent},
+  {path: 'show', component: AggregationComponent, data: {title: 'frontend.de.iteratec.osm.aggregation.title'}}
 ];
 
 @NgModule({
diff --git a/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts b/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts
index 09466a919a..d76e41620f 100644
--- a/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts
+++ b/frontend/src/app/modules/application-dashboard/application-dashboard.component.ts
@@ -11,7 +11,6 @@ import {FailingJobStatistic} from './models/failing-job-statistic.model';
 import {PerformanceAspectService} from '../../services/performance-aspect.service';
 import {PerformanceAspectType} from '../../models/perfomance-aspect.model';
 import {ResponseWithLoadingState} from '../../models/response-with-loading-state.model';
-import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-application-dashboard',
@@ -35,9 +34,7 @@ export class ApplicationDashboardComponent implements OnDestroy {
     private router: Router,
     private applicationService: ApplicationService,
     private performanceAspectService: PerformanceAspectService,
-    private titleService: TitleService
   ) {
-    this.titleService.setTitle('frontend.de.iteratec.osm.applicationDashboard.title');
     this.pages$ = this.applicationService.aspectMetrics$;
     this.applications$ = applicationService.applications$.pipe(
       filter(response => !response.isLoading && !!response.data),
diff --git a/frontend/src/app/modules/application-dashboard/application-dashboard.module.ts b/frontend/src/app/modules/application-dashboard/application-dashboard.module.ts
index fc6891d1a2..d0e1732569 100644
--- a/frontend/src/app/modules/application-dashboard/application-dashboard.module.ts
+++ b/frontend/src/app/modules/application-dashboard/application-dashboard.module.ts
@@ -2,20 +2,20 @@ import {NgModule} from '@angular/core';
 import {ApplicationDashboardComponent} from './application-dashboard.component';
 import {ApplicationSelectComponent} from './components/application-select/application-select.component';
 import {PageComponent} from './components/page/page.component';
-import {RouterModule, Routes} from "@angular/router";
+import {RouterModule, Routes} from '@angular/router';
 import {CsiGraphComponent} from './components/csi-graph/csi-graph.component';
 import {PageMetricComponent} from './components/page-metric/page-metric.component';
-import {CsiInfoComponent} from "./components/csi-info/csi-info.component";
-import {SharedModule} from "../shared/shared.module";
-import {HttpClientModule} from "@angular/common/http";
+import {CsiInfoComponent} from './components/csi-info/csi-info.component';
+import {SharedModule} from '../shared/shared.module';
+import {HttpClientModule} from '@angular/common/http';
 import {ApplicationJobStatusComponent} from './components/application-job-status/application-job-status.component';
-import {GraphiteIntegrationComponent} from "./components/application-job-status/graphite-integration/graphite-integration.component";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {ResultSelectionModule} from "../result-selection/result-selection.module";
+import {GraphiteIntegrationComponent} from './components/application-job-status/graphite-integration/graphite-integration.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ResultSelectionModule} from '../result-selection/result-selection.module';
 
 const DashboardRoutes: Routes = [
-  {path: '', component: ApplicationDashboardComponent},
-  {path: ':applicationId', component: ApplicationDashboardComponent}
+  {path: '', component: ApplicationDashboardComponent, data: {title: 'frontend.de.iteratec.osm.applicationDashboard.title'}},
+  {path: ':applicationId', component: ApplicationDashboardComponent, data: {title: 'frontend.de.iteratec.osm.applicationDashboard.title'}}
 ];
 
 @NgModule({
diff --git a/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.ts b/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.ts
index 24b3e58e2f..b908c78125 100644
--- a/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.ts
+++ b/frontend/src/app/modules/aspect-configuration/aspect-configuration.component.ts
@@ -8,7 +8,6 @@ import {Application} from '../../models/application.model';
 import {AspectConfigurationService} from './services/aspect-configuration.service';
 import {PerformanceAspectService} from '../../services/performance-aspect.service';
 import {ResponseWithLoadingState} from '../../models/response-with-loading-state.model';
-import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-aspect-configuration',
@@ -27,8 +26,7 @@ export class AspectConfigurationComponent implements OnInit {
     private route: ActivatedRoute,
     private applicationService: ApplicationService,
     private aspectConfService: AspectConfigurationService,
-    private perfAspectService: PerformanceAspectService,
-    private titleService: TitleService
+    private perfAspectService: PerformanceAspectService
   ) {
     this.application$ = applicationService.selectedApplication$;
     this.page$ = aspectConfService.selectedPage$;
@@ -37,7 +35,6 @@ export class AspectConfigurationComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.titleService.setTitle('frontend.de.iteratec.osm.performance-aspect.configuration.overview.title');
     this.route.paramMap.subscribe((params: ParamMap) => {
       this.aspectConfService.loadApplication(params.get('applicationId'));
       this.aspectConfService.loadPage(params.get('pageId'));
diff --git a/frontend/src/app/modules/aspect-configuration/aspect-configuration.module.ts b/frontend/src/app/modules/aspect-configuration/aspect-configuration.module.ts
index 2288964047..2e09661bcd 100644
--- a/frontend/src/app/modules/aspect-configuration/aspect-configuration.module.ts
+++ b/frontend/src/app/modules/aspect-configuration/aspect-configuration.module.ts
@@ -8,8 +8,8 @@ import {MetricFinderModule} from '../metric-finder/metric-finder.module';
 import {EditAspectMetricsComponent} from './components/edit-aspect-metrics/edit-aspect-metrics.component';
 
 const routes: Routes = [
-  {path: ':applicationId/:pageId', component: AspectConfigurationComponent},
-  {path: 'edit/:applicationId/:pageId/:browserId/:aspectType', component: EditAspectMetricsComponent}
+  {path: ':applicationId/:pageId', component: AspectConfigurationComponent, data: {title: 'frontend.de.iteratec.osm.performance-aspect.configuration.overview.title'}},
+  {path: 'edit/:applicationId/:pageId/:browserId/:aspectType', component: EditAspectMetricsComponent, data: {title: 'frontend.de.iteratec.osm.performance-aspect.configuration.edit.title'}}
 ];
 
 @NgModule({
diff --git a/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.html b/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.html
index 2d14b16078..c9a162bfd0 100644
--- a/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.html
+++ b/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.html
@@ -8,16 +8,17 @@ <h1>{{ 'frontend.de.iteratec.osm.performance-aspects' | translate }}: {{(applica
 
 <div class="grid-container">
   <div class="card">
-    <osm-aspect-metrics [application]="application$ | async"
-                        [page]="page$ | async"
+    <osm-aspect-metrics [actualType]="aspectType$ | async"
+                        [application]="application$ | async"
                         [browserId]="browserId$ | async"
-                        [actualType]="aspectType$ | async"
+                        [page]="page$ | async"
                         class="aspect-inspect"></osm-aspect-metrics>
   </div>
   <div class="card">
-    <osm-metric-finder [selectedMetric] = "selectedMetric"
+    <osm-metric-finder [selectedMetric]="selectedMetric"
     ></osm-metric-finder>
-    <button class="btn btn-primary btn-aspect-config"
-            [disabled]="!grailsBridgeService.globalOsmNamespace.user.loggedIn" (click)="persistAspect()">{{'frontend.default.button.save' | translate}}</button>
+    <button (click)="persistAspect()"
+            [disabled]="!grailsBridgeService.globalOsmNamespace.user.loggedIn"
+            class="btn btn-primary btn-aspect-config">{{'frontend.default.button.save' | translate}}</button>
   </div>
 </div>
diff --git a/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.ts b/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.ts
index aace3c2cca..da37393eed 100644
--- a/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.ts
+++ b/frontend/src/app/modules/aspect-configuration/components/edit-aspect-metrics/edit-aspect-metrics.component.ts
@@ -15,7 +15,6 @@ import {MetricFinderService} from '../../../metric-finder/services/metric-finder
 import {MetricFinderComponent} from '../../../metric-finder/metric-finder.component';
 import {AspectMetricsComponent} from '../aspect-metrics/aspect-metrics.component';
 import {GrailsBridgeService} from '../../../../services/grails-bridge.service';
-import {TitleService} from '../../../../services/title.service';
 
 @Component({
   selector: 'osm-edit-aspect-metrics',
@@ -44,7 +43,6 @@ export class EditAspectMetricsComponent implements OnInit {
     private applicationService: ApplicationService,
     private aspectConfService: AspectConfigurationService,
     private metricFinderService: MetricFinderService,
-    private titleService: TitleService,
     grailsBridgeService: GrailsBridgeService
   ) {
     this.application$ = applicationService.selectedApplication$;
@@ -56,7 +54,6 @@ export class EditAspectMetricsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.titleService.setTitle('frontend.de.iteratec.osm.performance-aspect.configuration.edit.title');
     this.route.paramMap.subscribe((params: ParamMap) => {
       this.aspectConfService.loadApplication(params.get('applicationId'));
       this.aspectConfService.loadPage(params.get('pageId'));
diff --git a/frontend/src/app/modules/distribution/distribution.component.ts b/frontend/src/app/modules/distribution/distribution.component.ts
index ff8e877f1c..2861a65786 100644
--- a/frontend/src/app/modules/distribution/distribution.component.ts
+++ b/frontend/src/app/modules/distribution/distribution.component.ts
@@ -1,28 +1,22 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {DistributionDataDTO, DistributionData} from './models/distribution-data.model';
 import {URL} from '../../enums/url.enum';
 import {ResultSelectionStore} from '../result-selection/services/result-selection.store';
 import {BehaviorSubject} from 'rxjs';
 import {ViolinchartDataService} from './services/violinchart-data.service';
-import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-distribution',
   templateUrl: './distribution.component.html',
   styleUrls: ['./distribution.component.scss']
 })
-export class DistributionComponent implements OnInit {
+export class DistributionComponent {
 
   showChartCard = false;
   results$ = new BehaviorSubject<DistributionDataDTO>(new DistributionData());
 
   constructor(private violinChartService: ViolinchartDataService,
-              private resultSelectionStore: ResultSelectionStore,
-              private titleService: TitleService) {
-  }
-
-  ngOnInit() {
-    this.titleService.setTitle('frontend.de.iteratec.osm.distribution.title');
+              private resultSelectionStore: ResultSelectionStore) {
   }
 
   getDistributionChartData() {
diff --git a/frontend/src/app/modules/distribution/distribution.module.ts b/frontend/src/app/modules/distribution/distribution.module.ts
index 6576eb47e8..44d6f9562a 100644
--- a/frontend/src/app/modules/distribution/distribution.module.ts
+++ b/frontend/src/app/modules/distribution/distribution.module.ts
@@ -9,7 +9,7 @@ import {ViolinChartComponent} from './components/violin-chart/violin-chart.compo
 import {FormsModule} from '@angular/forms';
 
 const DistributionRoutes: Routes = [
-  {path: 'show', component: DistributionComponent},
+  {path: 'show', component: DistributionComponent, data: {title: 'frontend.de.iteratec.osm.distribution.title'}},
   {path: '**', redirectTo: 'show', pathMatch: 'full'}
 ];
 
diff --git a/frontend/src/app/modules/landing/landing.component.ts b/frontend/src/app/modules/landing/landing.component.ts
index 7bebb8f701..6872e5e8e7 100644
--- a/frontend/src/app/modules/landing/landing.component.ts
+++ b/frontend/src/app/modules/landing/landing.component.ts
@@ -5,7 +5,6 @@ import {combineLatest, Observable, of} from 'rxjs';
 import {ApplicationWithCsi} from './models/application-with-csi.model';
 import {ResponseWithLoadingState} from '../../models/response-with-loading-state.model';
 import {FailingJob} from './models/failing-jobs.model';
-import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-landing',
@@ -20,8 +19,7 @@ export class LandingComponent {
   failingJobs$: Observable<{ [application: string]: FailingJob[] }>;
   isHealthy$: Observable<boolean> = of(false);
 
-  constructor(private applicationService: ApplicationService, private titleService: TitleService) {
-    this.titleService.setTitle('frontend.de.iteratec.osm.landing.title');
+  constructor(private applicationService: ApplicationService) {
     this.hasData$ = this.applicationService.applications$.pipe(map(response => this.dataHasLoaded(response)));
     this.showApplicationEmptyState$ = this.applicationService.applications$.pipe(
       map(response => this.dataHasLoaded(response) && response.data.length < 1),
diff --git a/frontend/src/app/modules/landing/landing.module.ts b/frontend/src/app/modules/landing/landing.module.ts
index ebdc5c55ad..86744acfa4 100644
--- a/frontend/src/app/modules/landing/landing.module.ts
+++ b/frontend/src/app/modules/landing/landing.module.ts
@@ -1,15 +1,15 @@
 import {NgModule} from '@angular/core';
 import {LandingComponent} from './landing.component';
-import {RouterModule} from "@angular/router";
-import {SharedModule} from "../shared/shared.module";
+import {RouterModule} from '@angular/router';
+import {SharedModule} from '../shared/shared.module';
 import {ContinueSetupComponent} from './components/continue-setup/continue-setup.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      {path: '', component: LandingComponent},
-      {path: 'index', component: LandingComponent},
-      {path: 'continueSetup', component: ContinueSetupComponent}
+      {path: '', component: LandingComponent, data: {title: 'frontend.de.iteratec.osm.landing.title'}},
+      {path: 'index', component: LandingComponent, data: {title: 'frontend.de.iteratec.osm.landing.title'}},
+      {path: 'continueSetup', component: ContinueSetupComponent, data: {title: 'frontend.de.iteratec.osm.landing.incomplete-setup-title'}}
     ]),
     SharedModule
   ],
diff --git a/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.ts b/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.ts
index 8414c6c204..d58b8df68e 100644
--- a/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.ts
+++ b/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.ts
@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {Observable} from 'rxjs';
 import {QueueDashboardService, ServerInfo} from './services/queue-dashboard.service';
 import {WptServerDTO} from './models/WptServerDTO';
-import {TitleService} from '../../services/title.service';
 
 @Component({
   selector: 'osm-app-queue-dashboard',
@@ -15,8 +14,7 @@ export class QueueDashboardComponent {
   serverInfo$: Observable<ServerInfo>;
   private queueService: QueueDashboardService;
 
-  constructor(queueService: QueueDashboardService, private titleService: TitleService) {
-    this.titleService.setTitle('frontend.de.iteratec.osm.queueDashboard.title');
+  constructor(queueService: QueueDashboardService) {
     this.queueService = queueService;
     this.wptServer$ = this.queueService.activeServers$;
     this.serverInfo$ = this.queueService.serverInfo$;
diff --git a/frontend/src/app/modules/queue-dashboard/queue-dashboard.module.ts b/frontend/src/app/modules/queue-dashboard/queue-dashboard.module.ts
index 146042da8a..b24be62154 100644
--- a/frontend/src/app/modules/queue-dashboard/queue-dashboard.module.ts
+++ b/frontend/src/app/modules/queue-dashboard/queue-dashboard.module.ts
@@ -1,18 +1,18 @@
 import {LOCALE_ID, NgModule} from '@angular/core';
 import {QueueDashboardComponent} from './queue-dashboard.component';
 import {SharedModule} from '../shared/shared.module';
-import {RouterModule, Routes} from "@angular/router";
-import {QueueDashboardService} from "./services/queue-dashboard.service";
-import {HttpClientModule} from "@angular/common/http";
-import {LocationInfoListComponent} from "./components/location-info-list/location-info-list.component";
-import {OsmLangService} from "../../services/osm-lang.service";
+import {RouterModule, Routes} from '@angular/router';
+import {QueueDashboardService} from './services/queue-dashboard.service';
+import {HttpClientModule} from '@angular/common/http';
+import {LocationInfoListComponent} from './components/location-info-list/location-info-list.component';
+import {OsmLangService} from '../../services/osm-lang.service';
 
 import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 registerLocaleData(localeDe, 'de');
 
 const QueueRoutes: Routes = [
-  {path: '', component: QueueDashboardComponent},
+  {path: '', component: QueueDashboardComponent, data: {title: 'frontend.de.iteratec.osm.queueDashboard.title'}},
 ];
 
 @NgModule({
diff --git a/frontend/src/app/services/title.service.ts b/frontend/src/app/services/title.service.ts
index eed44d55f0..6d68c641e9 100644
--- a/frontend/src/app/services/title.service.ts
+++ b/frontend/src/app/services/title.service.ts
@@ -2,23 +2,58 @@ import {Injectable} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {Title} from '@angular/platform-browser';
 import {Subscription} from 'rxjs';
+import {filter, map} from 'rxjs/operators';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TitleService {
 
-  constructor(private translateService: TranslateService, private titleService: Title) {
+  private static APP_TITLE = 'OpenSpeedMonitor';
+
+  constructor(private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private translateService: TranslateService,
+              private titleService: Title) {
   }
 
-  setTitle(titleKeyToTranslate: string): void {
-    const titleSubscription: Subscription = this.translateService.stream(titleKeyToTranslate).subscribe((title: string) => {
-      if (title !== titleKeyToTranslate) {
-        this.titleService.setTitle(title);
-        if (titleSubscription) {
-          titleSubscription.unsubscribe();
+  initRouteEventListener(): void {
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd),
+      map(() => {
+        let child = this.activatedRoute.firstChild;
+        while (child.firstChild) {
+          child = child.firstChild;
+        }
+        if (child.snapshot.data['title']) {
+          return child.snapshot.data['title'];
         }
-      }
+        return TitleService.APP_TITLE;
+      })
+    ).subscribe((title: string) => {
+      this.setDocumentTitle(title);
     });
   }
+
+  private setDocumentTitle(title: string): void {
+    if (title === TitleService.APP_TITLE) {
+      this.titleService.setTitle(TitleService.APP_TITLE);
+    } else {
+      this.setTranslatedTitle(title);
+    }
+  }
+
+  private setTranslatedTitle(titleKeyToTranslate: string): void {
+    const titleSubscription: Subscription = this.translateService
+      .stream(titleKeyToTranslate)
+      .subscribe((title: string) => {
+        if (title !== titleKeyToTranslate) {
+          this.titleService.setTitle(title);
+          if (titleSubscription) {
+            titleSubscription.unsubscribe();
+          }
+        }
+      });
+  }
 }
diff --git a/grails-app/i18n/messages.properties b/grails-app/i18n/messages.properties
index ca8c2a6a17..6e99e83269 100644
--- a/grails-app/i18n/messages.properties
+++ b/grails-app/i18n/messages.properties
@@ -1317,3 +1317,4 @@ frontend.de.iteratec.osm.distribution.chart.settings.sort=Sort
 frontend.de.iteratec.osm.distribution.chart.settings.sort.desc=Descending Median
 frontend.de.iteratec.osm.distribution.chart.settings.sort.asc=Ascending Median
 frontend.de.iteratec.osm.distribution.chart.settings.customerJourney=Customer Journey
+frontend.de.iteratec.osm.error.notFound.title=Page Not Found
diff --git a/grails-app/i18n/messages_de.properties b/grails-app/i18n/messages_de.properties
index 5f4bc3e484..5547c65d63 100644
--- a/grails-app/i18n/messages_de.properties
+++ b/grails-app/i18n/messages_de.properties
@@ -1291,3 +1291,4 @@ frontend.de.iteratec.osm.distribution.chart.settings.sort=Sortierung
 frontend.de.iteratec.osm.distribution.chart.settings.sort.desc=Absteigender Median
 frontend.de.iteratec.osm.distribution.chart.settings.sort.asc=Aufsteigender Median
 frontend.de.iteratec.osm.distribution.chart.settings.customerJourney=Customer Journey
+frontend.de.iteratec.osm.error.notFound.title=Seite nicht gefunden

From 49f21a76f94e1956c696e74969609d5108b65133 Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Fri, 29 May 2020 16:17:16 +0200
Subject: [PATCH 07/10] Redirect to correct aggregation chart url

---
 frontend/src/app/modules/aggregation/aggregation.module.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/modules/aggregation/aggregation.module.ts b/frontend/src/app/modules/aggregation/aggregation.module.ts
index 1e3d44e860..9669074978 100644
--- a/frontend/src/app/modules/aggregation/aggregation.module.ts
+++ b/frontend/src/app/modules/aggregation/aggregation.module.ts
@@ -10,7 +10,8 @@ import {AggregationChartDataService} from './services/aggregation-chart-data.ser
 import {FormsModule} from '@angular/forms';
 
 const AggregationRoutes: Routes = [
-  {path: 'show', component: AggregationComponent, data: {title: 'frontend.de.iteratec.osm.aggregation.title'}}
+  {path: 'show', component: AggregationComponent, data: {title: 'frontend.de.iteratec.osm.aggregation.title'}},
+  {path: '**', redirectTo: 'show', pathMatch: 'full'}
 ];
 
 @NgModule({

From 2742e33fbff06db8f6aaf13ac554fda980d997bc Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Fri, 29 May 2020 17:07:51 +0200
Subject: [PATCH 08/10] Use result selection component instead of its many
 child components

---
 .../aggregation/aggregation.component.html    | 30 ++---------------
 .../distribution/distribution.component.html  | 30 ++---------------
 .../result-selection.component.html           | 33 +++++++++++++++++++
 .../result-selection.component.ts             | 24 +++++++++++++-
 .../result-selection.module.ts                | 31 +++++++++--------
 5 files changed, 78 insertions(+), 70 deletions(-)

diff --git a/frontend/src/app/modules/aggregation/aggregation.component.html b/frontend/src/app/modules/aggregation/aggregation.component.html
index 3daf4e88a9..ba487c94a8 100644
--- a/frontend/src/app/modules/aggregation/aggregation.component.html
+++ b/frontend/src/app/modules/aggregation/aggregation.component.html
@@ -4,31 +4,7 @@
 </p>
 <osm-aggregation-chart *ngIf="showChart" [barchartAverageData]="barchartAverageData$ | async"
                        [barchartMedianData]="barchartMedianData$ | async"></osm-aggregation-chart>
-<div class="action-row">
-  <div class="col-md-12">
-    <osm-result-selection-submit [applicationsRequired]="true" [measurandsRequired]="true"
-                                 (submit)="getBarchartData()"></osm-result-selection-submit>
-  </div>
-</div>
-<div class="row">
-  <div class="col-md-12">
-    <div class="action-row">
 
-      <div class="col-md-4">
-        <osm-result-selection-time-frame [showComparativeTimeFrame]="true"></osm-result-selection-time-frame>
-        <osm-result-selection-measurands [multipleMeasurands]="true"></osm-result-selection-measurands>
-      </div>
-      <div class="col-md-3">
-        <osm-result-selection-application></osm-result-selection-application>
-      </div>
-      <div class="col-md-5">
-        <osm-result-selection-page-location-connectivity [showPageSelection]="true"
-                                                         [showBrowserSelection]="true"></osm-result-selection-page-location-connectivity>
-      </div>
-      <div class="col-md-12">
-        <osm-result-selection-reset></osm-result-selection-reset>
-      </div>
-
-    </div>
-  </div>
-</div>
+<osm-result-selection (submit)="getBarchartData()" [applicationsRequired]="true" [browser]="true"
+                      [measurandsRequired]="true" [multipleMeasurands]="true" [page]="true"
+                      [timeFrameComparative]="true"></osm-result-selection>
diff --git a/frontend/src/app/modules/distribution/distribution.component.html b/frontend/src/app/modules/distribution/distribution.component.html
index 6d166a9816..68eb8bb67b 100644
--- a/frontend/src/app/modules/distribution/distribution.component.html
+++ b/frontend/src/app/modules/distribution/distribution.component.html
@@ -5,31 +5,5 @@
 
 <osm-violin-chart [dataInput]="this.results$ | async" [hidden]="!showChartCard"></osm-violin-chart>
 
-<div class="action-row">
-  <div class="col-md-12">
-    <osm-result-selection-submit (submit)="getDistributionChartData()" [applicationsRequired]="true" [measurandsRequired]="true"
-                                 [pagesRequired]="true"></osm-result-selection-submit>
-  </div>
-</div>
-<div class="row">
-  <div class="col-md-12">
-    <div class="action-row">
-      <div class="col-md-4">
-        <osm-result-selection-time-frame></osm-result-selection-time-frame>
-        <osm-result-selection-measurands></osm-result-selection-measurands>
-      </div>
-      <div class="col-md-3">
-        <osm-result-selection-application></osm-result-selection-application>
-      </div>
-      <div class="col-md-5">
-        <osm-result-selection-page-location-connectivity [pageRequired]="true"
-                                                         [showBrowserSelection]="false"
-                                                         [showPageSelection]="true">
-        </osm-result-selection-page-location-connectivity>
-      </div>
-      <div class="col-md-12">
-        <osm-result-selection-reset></osm-result-selection-reset>
-      </div>
-    </div>
-  </div>
-</div>
+<osm-result-selection (submit)="getDistributionChartData()" [applicationsRequired]="true" [measurandsRequired]="true"
+                      [page]="true" [pagesRequired]="true"></osm-result-selection>
diff --git a/frontend/src/app/modules/result-selection/result-selection.component.html b/frontend/src/app/modules/result-selection/result-selection.component.html
index 8b13789179..d6a454a44d 100644
--- a/frontend/src/app/modules/result-selection/result-selection.component.html
+++ b/frontend/src/app/modules/result-selection/result-selection.component.html
@@ -1 +1,34 @@
+<div class="action-row">
+  <div class="col-md-12">
+    <osm-result-selection-submit (submit)="emitSubmitEvent()" [applicationsRequired]="applicationsRequired"
+                                 [measurandsRequired]="measurandsRequired"
+                                 [pagesRequired]="pagesRequired"></osm-result-selection-submit>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-12">
+    <div class="action-row">
 
+      <div class="col-md-4">
+        <osm-result-selection-time-frame [showAggregation]="timeFrameAggregation"
+                                         [showComparativeTimeFrame]="timeFrameComparative"></osm-result-selection-time-frame>
+        <osm-result-selection-measurands [multipleMeasurands]="multipleMeasurands"></osm-result-selection-measurands>
+      </div>
+      <div class="col-md-3">
+        <osm-result-selection-application></osm-result-selection-application>
+      </div>
+      <div class="col-md-5">
+        <osm-result-selection-page-location-connectivity [pageRequired]="pagesRequired"
+                                                         [showBrowserSelection]="browser"
+                                                         [showConnectivitySelection]="connectivity"
+                                                         [showLocationSelection]="location"
+                                                         [showMeasuredStepSelection]="measuredStep"
+                                                         [showPageSelection]="page"></osm-result-selection-page-location-connectivity>
+      </div>
+      <div class="col-md-12">
+        <osm-result-selection-reset></osm-result-selection-reset>
+      </div>
+
+    </div>
+  </div>
+</div>
diff --git a/frontend/src/app/modules/result-selection/result-selection.component.ts b/frontend/src/app/modules/result-selection/result-selection.component.ts
index 297b537c4a..1ac6164734 100644
--- a/frontend/src/app/modules/result-selection/result-selection.component.ts
+++ b/frontend/src/app/modules/result-selection/result-selection.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 @Component({
   selector: 'osm-result-selection',
@@ -7,6 +7,28 @@ import {Component} from '@angular/core';
 })
 export class ResultSelectionComponent {
 
+  @Output() submit: EventEmitter<void> = new EventEmitter<void>();
+
+  @Input() applicationsRequired = false;
+  @Input() measurandsRequired = false;
+  @Input() pagesRequired = false;
+
+  @Input() timeFrameAggregation = false;
+  @Input() timeFrameComparative = false;
+
+  @Input() multipleMeasurands = false;
+
+  @Input() page = false;
+  @Input() measuredStep = false;
+
+  @Input() browser = false;
+  @Input() location = false;
+
+  @Input() connectivity = false;
+
   constructor() {  }
 
+  emitSubmitEvent(): void {
+    this.submit.emit();
+  }
 }
diff --git a/frontend/src/app/modules/result-selection/result-selection.module.ts b/frontend/src/app/modules/result-selection/result-selection.module.ts
index 887359ee55..e394af4540 100644
--- a/frontend/src/app/modules/result-selection/result-selection.module.ts
+++ b/frontend/src/app/modules/result-selection/result-selection.module.ts
@@ -1,20 +1,20 @@
 import {NgModule} from '@angular/core';
 import {ResultSelectionComponent} from './result-selection.component';
-import {ResultSelectionService} from "./services/result-selection.service";
-import {MeasurandSelectComponent} from "./components/measurands/measurand-select/measurand-select.component";
-import {SharedModule} from "../shared/shared.module";
+import {ResultSelectionService} from './services/result-selection.service';
+import {MeasurandSelectComponent} from './components/measurands/measurand-select/measurand-select.component';
+import {SharedModule} from '../shared/shared.module';
 import {TimeFrameComponent} from './components/time-frame/time-frame.component';
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MeasurandsComponent} from './components/measurands/measurands.component';
 import {OWL_DATE_TIME_FORMATS, OwlDateTimeModule, OwlNativeDateTimeModule} from 'ng-pick-datetime';
-import {NgSelectModule} from "@ng-select/ng-select";
+import {NgSelectModule} from '@ng-select/ng-select';
 import {ApplicationComponent} from './components/application/application.component';
 import {SelectionDataComponent} from './components/page-location-connectivity/selection-data/selection-data.component';
-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 '../shared/components/chart-switch-menu/chart-switch-menu.component';
+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 '../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'},
@@ -42,7 +42,10 @@ export const TIME_FORMAT = {
     SubmitComponent,
     ChartSwitchMenuComponent
   ],
-  exports: [TimeFrameComponent, ApplicationComponent, MeasurandsComponent, PageLocationConnectivityComponent, ResetComponent, SubmitComponent, ChartSwitchMenuComponent],
+  exports: [
+    ChartSwitchMenuComponent,
+    ResultSelectionComponent
+  ],
   providers: [
     {
       provide: OWL_DATE_TIME_FORMATS,
@@ -51,7 +54,7 @@ export const TIME_FORMAT = {
     ResultSelectionService,
     ResultSelectionStore
   ],
-  entryComponents: [
-  ]
+  entryComponents: []
 })
-export class ResultSelectionModule { }
+export class ResultSelectionModule {
+}

From b624ee6d5d11635a4743890ae40f5373bcbacb36 Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Fri, 29 May 2020 17:44:52 +0200
Subject: [PATCH 09/10] Fixed angular tests

---
 frontend/src/app/global.module.spec.ts        | 32 ++++++++++-------
 .../aggregation/aggregation.component.spec.ts |  2 +-
 .../queue-dashboard.component.spec.ts         |  5 +--
 .../result-selection.component.spec.ts        | 26 ++++++++------
 .../time-series/time-series.component.html    | 36 +++----------------
 5 files changed, 42 insertions(+), 59 deletions(-)

diff --git a/frontend/src/app/global.module.spec.ts b/frontend/src/app/global.module.spec.ts
index 111c41b388..6ca22e9774 100644
--- a/frontend/src/app/global.module.spec.ts
+++ b/frontend/src/app/global.module.spec.ts
@@ -1,23 +1,28 @@
-import {TranslateService} from "@ngx-translate/core";
-import {TestBed} from "@angular/core/testing";
-import {OsmLangService} from "./services/osm-lang.service";
-import {GlobalModule} from "./global.module";
+import {TranslateService} from '@ngx-translate/core';
+import {TestBed} from '@angular/core/testing';
+import {OsmLangService} from './services/osm-lang.service';
+import {GlobalModule} from './global.module';
+import {TitleService} from './services/title.service';
+import {RouterTestingModule} from '@angular/router/testing';
 
 describe('GlobalModule', () => {
   let globalModule: GlobalModule;
-  let osmLangServiceSpy = jasmine.createSpyObj('OsmLangService',
+  const osmLangServiceSpy = jasmine.createSpyObj('OsmLangService',
     ['getOsmLang']);
-  let translateServiceSpy = jasmine.createSpyObj('TranslateService',
+  const translateServiceSpy = jasmine.createSpyObj('TranslateService',
     ['getDefaultLang', 'setDefaultLang', 'use', 'addLangs']);
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
       providers: [
         {provide: TranslateService, useValue: translateServiceSpy},
         {provide: OsmLangService, useValue: osmLangServiceSpy}
       ]
     });
-    globalModule = new GlobalModule(TestBed.get(OsmLangService), TestBed.get(TranslateService))
+    globalModule = new GlobalModule(TestBed.get(OsmLangService), TestBed.get(TranslateService), TestBed.get(TitleService));
   });
 
   it('sets en as default lang', () => {
@@ -32,23 +37,26 @@ describe('GlobalModule', () => {
     osmLangServiceSpy.getOsmLang.and.returnValue('de');
     globalModule = new GlobalModule(
       TestBed.get(OsmLangService),
-      TestBed.get(TranslateService)
+      TestBed.get(TranslateService),
+      TestBed.get(TitleService)
     );
     expect(getMostRecentCallsArgs(translateServiceSpy.use)).toEqual(['de']);
     osmLangServiceSpy.getOsmLang.and.returnValue('en');
     globalModule = new GlobalModule(
       TestBed.get(OsmLangService),
-      TestBed.get(TranslateService)
+      TestBed.get(TranslateService),
+      TestBed.get(TitleService)
     );
     expect(getMostRecentCallsArgs(translateServiceSpy.use)).toEqual(['en']);
   });
   it('default lang is used if osm lang is not supported', () => {
     osmLangServiceSpy.getOsmLang.and.returnValue('not_supported_lang');
-    let defaultLang = 'en';
-    translateServiceSpy.getDefaultLang.and.returnValue(defaultLang)
+    const defaultLang = 'en';
+    translateServiceSpy.getDefaultLang.and.returnValue(defaultLang);
     globalModule = new GlobalModule(
       TestBed.get(OsmLangService),
-      TestBed.get(TranslateService)
+      TestBed.get(TranslateService),
+      TestBed.get(TitleService)
     );
     expect(getMostRecentCallsArgs(translateServiceSpy.use)).toEqual([defaultLang]);
   });
diff --git a/frontend/src/app/modules/aggregation/aggregation.component.spec.ts b/frontend/src/app/modules/aggregation/aggregation.component.spec.ts
index 8e5c668cf1..5f32ea14e7 100644
--- a/frontend/src/app/modules/aggregation/aggregation.component.spec.ts
+++ b/frontend/src/app/modules/aggregation/aggregation.component.spec.ts
@@ -19,7 +19,7 @@ describe('AggregationComponent', () => {
       imports: [
         SharedModule,
         SharedMocksModule,
-        ResultSelectionModule,
+        ResultSelectionModule
       ],
       providers: [
         BarchartDataService,
diff --git a/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.spec.ts b/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.spec.ts
index 44a8b71d0e..15210e9a8e 100644
--- a/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.spec.ts
+++ b/frontend/src/app/modules/queue-dashboard/queue-dashboard.component.spec.ts
@@ -5,14 +5,12 @@ import {QueueDashboardService, ServerInfo} from './services/queue-dashboard.serv
 import {LocationInfoListComponent} from './components/location-info-list/location-info-list.component';
 import {OsmLangService} from '../../services/osm-lang.service';
 import {GrailsBridgeService} from '../../services/grails-bridge.service';
-import {TitleService} from '../../services/title.service';
 
 
 describe('QueueDashboardComponent', () => {
   let component: QueueDashboardComponent;
   let fixture: ComponentFixture<QueueDashboardComponent>;
   let queueDashboardService: QueueDashboardService;
-  let titleService: TitleService;
   let mockserver = [];
   let mockinformation = [];
 
@@ -78,9 +76,8 @@ describe('QueueDashboardComponent', () => {
 
   it('should be able to call the queueDashboardService method from the QueueDashboardService', () => {
     queueDashboardService = TestBed.get(QueueDashboardService);
-    titleService = TestBed.get(TitleService);
     spyOn(queueDashboardService, 'getActiveWptServer');
-    new QueueDashboardComponent(queueDashboardService, titleService);
+    new QueueDashboardComponent(queueDashboardService);
     expect(queueDashboardService.getActiveWptServer).toHaveBeenCalled();
   });
 
diff --git a/frontend/src/app/modules/result-selection/result-selection.component.spec.ts b/frontend/src/app/modules/result-selection/result-selection.component.spec.ts
index 85f1f6c5f2..0617286526 100644
--- a/frontend/src/app/modules/result-selection/result-selection.component.spec.ts
+++ b/frontend/src/app/modules/result-selection/result-selection.component.spec.ts
@@ -1,17 +1,19 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {ResultSelectionComponent} from './result-selection.component';
-import {TimeFrameComponent} from "./components/time-frame/time-frame.component";
+import {TimeFrameComponent} from './components/time-frame/time-frame.component';
 import {ApplicationComponent} from './components/application/application.component';
-import {SharedMocksModule} from "../../testing/shared-mocks.module";
-import {ResultSelectionService} from "./services/result-selection.service";
-import {OsmLangService} from "../../services/osm-lang.service";
-import {GrailsBridgeService} from "../../services/grails-bridge.service";
-import {MeasurandsComponent} from "./components/measurands/measurands.component";
-import {MeasurandSelectComponent} from "./components/measurands/measurand-select/measurand-select.component";
-import {PageLocationConnectivityComponent} from "./components/page-location-connectivity/page-location-connectivity.component";
-import {ResultSelectionStore} from "./services/result-selection.store";
-import {SelectionDataComponent} from "./components/page-location-connectivity/selection-data/selection-data.component";
+import {SharedMocksModule} from '../../testing/shared-mocks.module';
+import {ResultSelectionService} from './services/result-selection.service';
+import {OsmLangService} from '../../services/osm-lang.service';
+import {GrailsBridgeService} from '../../services/grails-bridge.service';
+import {MeasurandsComponent} from './components/measurands/measurands.component';
+import {MeasurandSelectComponent} from './components/measurands/measurand-select/measurand-select.component';
+import {PageLocationConnectivityComponent} from './components/page-location-connectivity/page-location-connectivity.component';
+import {ResultSelectionStore} from './services/result-selection.store';
+import {SelectionDataComponent} from './components/page-location-connectivity/selection-data/selection-data.component';
+import {ResetComponent} from './components/reset/reset.component';
+import {SubmitComponent} from './components/submit/submit.component';
 
 describe('ResultSelectionComponent', () => {
   let component: ResultSelectionComponent;
@@ -26,7 +28,9 @@ describe('ResultSelectionComponent', () => {
         PageLocationConnectivityComponent,
         SelectionDataComponent,
         MeasurandsComponent,
-        MeasurandSelectComponent
+        MeasurandSelectComponent,
+        ResetComponent,
+        SubmitComponent
       ],
       imports: [
         SharedMocksModule
diff --git a/frontend/src/app/modules/time-series/time-series.component.html b/frontend/src/app/modules/time-series/time-series.component.html
index c4124ab210..c07502fda5 100644
--- a/frontend/src/app/modules/time-series/time-series.component.html
+++ b/frontend/src/app/modules/time-series/time-series.component.html
@@ -1,38 +1,12 @@
 <osm-menu></osm-menu>
 
-<div class="action-row" *ngIf="showTimeSeriesChart">
+<div *ngIf="showTimeSeriesChart" class="action-row">
   <div class="col-md-12">
     <osm-time-series-line-chart [timeSeriesResults]="results$ | async"></osm-time-series-line-chart>
   </div>
 </div>
 
-<div class="action-row">
-  <div class="col-md-12">
-    <osm-result-selection-submit [measurandsRequired]="true" [applicationsRequired]="true" [pagesRequired]="true"
-                                 (submit)="getTimeSeriesChartData()"></osm-result-selection-submit>
-  </div>
-</div>
-<div class="row">
-  <div class="col-md-12">
-    <div class="action-row">
-
-      <div class="col-md-4">
-        <osm-result-selection-time-frame [showAggregation]="true"></osm-result-selection-time-frame>
-        <osm-result-selection-measurands [multipleMeasurands]="true"></osm-result-selection-measurands>
-      </div>
-      <div class="col-md-3">
-        <osm-result-selection-application></osm-result-selection-application>
-      </div>
-      <div class="col-md-5">
-        <osm-result-selection-page-location-connectivity [showPageSelection]="true" [showMeasuredStepSelection]="true"
-                                                         [showBrowserSelection]="true" [showLocationSelection]="true"
-                                                         [showConnectivitySelection]="true" [pageRequired]="true">
-        </osm-result-selection-page-location-connectivity>
-      </div>
-      <div class="col-md-12">
-        <osm-result-selection-reset></osm-result-selection-reset>
-      </div>
-
-    </div>
-  </div>
-</div>
+<osm-result-selection (submit)="getTimeSeriesChartData()" [applicationsRequired]="true" [browser]="true"
+                      [connectivity]="true" [location]="true" [measurandsRequired]="true" [measuredStep]="true"
+                      [multipleMeasurands]="true" [page]="true" [pagesRequired]="true"
+                      [timeFrameAggregation]="true"></osm-result-selection>

From 57d38512fd52468b5df87ace84dfdf6e5b910144 Mon Sep 17 00:00:00 2001
From: Daniel Steger <daniel.steger@iteratec.com>
Date: Wed, 24 Jun 2020 09:30:12 +0200
Subject: [PATCH 10/10] Add document title for time series chart

---
 frontend/src/app/modules/time-series/time-series.module.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/modules/time-series/time-series.module.ts b/frontend/src/app/modules/time-series/time-series.module.ts
index d0814fb7bd..715276adec 100644
--- a/frontend/src/app/modules/time-series/time-series.module.ts
+++ b/frontend/src/app/modules/time-series/time-series.module.ts
@@ -10,7 +10,8 @@ import {LineChartDataService} from './services/line-chart-data.service';
 import {FormsModule} from '@angular/forms';
 
 const TimeSeriesRoutes: Routes = [
-  {path: 'showAll', component: TimeSeriesComponent},
+  {path: 'showAll', component: TimeSeriesComponent, data: {title: 'frontend.de.iteratec.osm.timeSeries.title'}},
+  {path: '**', redirectTo: 'showAll', pathMatch: 'full'}
 ];
 
 @NgModule({