Document title

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: [

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

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]);
   });

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 {TitleService} from './services/title.service';
 
 // AoT requires an exported function for factories
 export function createTranslateLoader(http: HttpClient) {
@@ -31,18 +30,24 @@ export function createTranslateLoader(http: HttpClient) {
     OsmLangService,
     ApplicationService,
     ResultSelectionService,
-    ResultSelectionStore,
-    BarchartDataService,
-    AggregationChartDataService
+    ResultSelectionStore
   ],
 })
 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');
 
-    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()
+    );
+
+    titleService.initRouteEventListener();
   }
 }

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>

frontend/src/app/modules/aggregation/aggregation.component.spec.ts

@@ -19,7 +19,7 @@ describe('AggregationComponent', () => {
       imports: [
         SharedModule,
         SharedMocksModule,
-        ResultSelectionModule,
+        ResultSelectionModule
       ],
       providers: [
         BarchartDataService,

frontend/src/app/modules/aggregation/aggregation.component.ts

@@ -15,24 +15,14 @@ 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) {
   }
 
   ngOnInit() {
     this.showChart = false;
+    this.initDataObservables();
     if (this.resultSelectionStore.validQuery) {
       this.getBarchartData();
     }
@@ -45,4 +35,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;
+    });
+  }
 }

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},
+  {path: 'show', component: AggregationComponent, data: {title: 'frontend.de.iteratec.osm.aggregation.title'}},
+  {path: '**', redirectTo: 'show', pathMatch: 'full'}
 ];
 
 @NgModule({

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;

frontend/src/app/modules/application-dashboard/application-dashboard.component.ts

@@ -4,13 +4,13 @@ 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';
 
 @Component({
   selector: 'osm-application-dashboard',
@@ -33,7 +33,7 @@ export class ApplicationDashboardComponent implements OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private applicationService: ApplicationService,
-    private performanceAspectService: PerformanceAspectService
+    private performanceAspectService: PerformanceAspectService,
   ) {
     this.pages$ = this.applicationService.aspectMetrics$;
     this.applications$ = applicationService.applications$.pipe(
@@ -42,7 +42,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 +56,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 +65,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);
+  }
 }

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({