Feature/historical data preselect

src/web/src/app/scenario-historicaldata/scenario-historicaldata-routing.module.ts

@@ -6,10 +6,15 @@ const routes: Routes = [
     {
         path: "",
         component: ScenarioHistoricaldataComponent
-    }];
+    },
+    {
+        path: ":tmid",
+        component: ScenarioHistoricaldataComponent
+    }
+];
 
 @NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
 })
-export class ScenarioHistoricaldataRoutingModule { }
+export class ScenarioHistoricaldataRoutingModule {}

src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.html

@@ -3,23 +3,22 @@
   Clicking on a data source that can be visualized will show the visualization diagram.
   Since this API provides data from the past, it is also possible to retrieve data from machines which are currently offline.">
     <div>
-        <app-select-machine (change)="selectedMachineChanged($event)"></app-select-machine>
+        <app-select-machine (change)="selectedMachineChanged($event)" [initialMachineId]="selectedMachineId">
+        </app-select-machine>
         <app-date-range (change)="dateRangeChanged($event)"></app-date-range>
 
         <ng-select class="source-key-select" *ngIf="(sourceKeys$ | async) as sourceKeys" [items]="sourceKeys.keys"
             placeholder="Please select a source key" [clearable]="false" [searchable]="false"
-            [dropdownPosition]="'bottom'" (change)="sourceKeySelectChanged($event)">
+            [dropdownPosition]="'bottom'" [(ngModel)]="selectedSourceKey" (change)="sourceKeySelectChanged($event)">
         </ng-select>
 
-        <div *ngIf="(sourceKeys$ | async) as sourceKeys; else loadingOrError">
-            <div class="columns">
-                <div class="column">
-                    <div class="sourceKeyData full-height" *ngIf="lineSeriesData; else loadingOrError">
-                        <ngx-charts-line-chart class="historicalDataChart" [xAxis]="true" [yAxis]="true"
-                            [showGridLines]="true" [roundDomains]="true" [autoScale]="true" [results]="lineSeriesData"
-                            [scheme]="lineChartScheme">
-                        </ngx-charts-line-chart>
-                    </div>
+        <div class="columns">
+            <div class="column">
+                <div class="sourceKeyData full-height" *ngIf="lineSeriesData; else loadingOrError">
+                    <ngx-charts-line-chart class="historicalDataChart" [xAxis]="true" [yAxis]="true"
+                        [showGridLines]="true" [roundDomains]="true" [autoScale]="true" [results]="lineSeriesData"
+                        [scheme]="lineChartScheme">
+                    </ngx-charts-line-chart>
                 </div>
             </div>
         </div>

src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.spec.ts

@@ -8,22 +8,24 @@ import { DebugElement } from "@angular/core";
 import { of, throwError } from "rxjs";
 import { SourceKeys } from "./source-keys.model";
 import { RouterTestingModule } from "@angular/router/testing";
+import { Router } from "@angular/router";
 
 const sourceKeysMock: SourceKeys = {
     tmid: "1",
     keys: ["Energy!AirPressure", "Energy!ElectricPower"]
 };
 
-describe("ScenarioHistoricaldataComponent", () => {
+fdescribe("ScenarioHistoricaldataComponent", () => {
     let component: ScenarioHistoricaldataComponent;
     let fixture: ComponentFixture<ScenarioHistoricaldataComponent>;
     let historicalDataService: HistoricalDataService;
+    let router: Router;
     let element: DebugElement;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [ScenarioHistoricaldataComponent],
-            imports: [SharedModule, HttpClientTestingModule, RouterTestingModule],
+            imports: [SharedModule, HttpClientTestingModule, RouterTestingModule.withRoutes([])],
             providers: [HistoricalDataService]
         }).compileComponents();
     }));
@@ -33,20 +35,23 @@ describe("ScenarioHistoricaldataComponent", () => {
         component = fixture.componentInstance;
         element = fixture.debugElement;
         historicalDataService = element.injector.get(HistoricalDataService);
+        router = element.injector.get(Router);
     });
 
     it("should create", () => {
         expect(component).toBeTruthy();
     });
 
-    it("should fetch data and display it", fakeAsync(async () => {
+    fit("should fetch data and display it", fakeAsync(async () => {
         const getSourceKeysSpy = spyOn(historicalDataService, "getSourceKeys").and.returnValue(of(sourceKeysMock));
+        const routerNavigateSpy = spyOn(router, "navigate").and.returnValue(null);
         fixture.detectChanges();
         expect(getSourceKeysSpy).toHaveBeenCalledTimes(0);
         const machineId = "1";
         component.selectedMachineChanged(machineId);
         fixture.detectChanges();
 
+        expect(routerNavigateSpy).toHaveBeenCalled();
         expect(getSourceKeysSpy).toHaveBeenCalledTimes(1);
         expect(getSourceKeysSpy).toHaveBeenCalledWith(machineId);
         expect((await component.sourceKeys$.toPromise()).keys.length).toEqual(2);

src/web/src/app/scenario-historicaldata/scenario-historicaldata.component.ts

@@ -5,6 +5,7 @@ import { HistoricalDataService } from "./scenario-historicaldata.service";
 import { HistoricalDataResponseElement, HistoricItemData } from "./historical-data.model";
 import { filter, concatMap, tap, map, catchError } from "rxjs/operators";
 import * as moment from "moment";
+import { Router, ActivatedRoute } from "@angular/router";
 
 @Component({
     selector: "app-scenario-historicaldata",
@@ -18,21 +19,33 @@ export class ScenarioHistoricaldataComponent implements OnInit {
             limit: 1000
         }
     });
+    public loadingCriterias: any;
     sourceKeys$: Observable<SourceKeys>;
     error$ = new Subject<boolean>();
     loading$ = new Subject<boolean>();
     lineSeriesData: LineSeriesData[];
     lineChartScheme = {
         domain: ["#e3000b", "#0092b4", "#303741"]
     };
+    public selectedMachineId: string;
+    public selectedSourceKey: string;
 
-    constructor(private readonly historicalDataService: HistoricalDataService) {
+    constructor(
+        private readonly historicalDataService: HistoricalDataService,
+        private readonly router: Router,
+        private readonly route: ActivatedRoute
+    ) {
         this.error$.next(false);
         this.loading$.next(false);
     }
 
     ngOnInit() {
-        this.searchCriteria$
+        this.selectedMachineId = this.route.snapshot.params.tmid;
+        if (this.route.snapshot.queryParams.sourceKey) {
+            this.selectedSourceKey = this.route.snapshot.queryParams.sourceKey;
+        }
+
+        this.loadingCriterias = this.searchCriteria$
             .pipe(
                 filter(this.filterIncompleteSearchCriteria()),
                 tap(this.setLoadingFlags()),
@@ -89,6 +102,10 @@ export class ScenarioHistoricaldataComponent implements OnInit {
     }
 
     public selectedMachineChanged(tmid: string) {
+        this.selectedMachineId = tmid;
+        this.lineSeriesData = null;
+        this.createRoute();
+
         this.error$.next(false);
         this.loading$.next(true);
         this.sourceKeys$ = null;
@@ -107,6 +124,14 @@ export class ScenarioHistoricaldataComponent implements OnInit {
             sourceKeys => {
                 this.sourceKeys$ = of(sourceKeys);
                 this.loading$.next(false);
+                if (this.selectedSourceKey) {
+                    if (sourceKeys.keys.some(el => el === this.selectedSourceKey)) {
+                        this.sourceKeySelectChanged(this.selectedSourceKey);
+                    } else {
+                        this.selectedSourceKey = null;
+                        this.createRoute();
+                    }
+                }
             },
             error => {
                 console.error("could not load sourceKeys", error);
@@ -132,6 +157,8 @@ export class ScenarioHistoricaldataComponent implements OnInit {
         if (!key) {
             return;
         }
+        this.selectedSourceKey = key;
+        this.createRoute();
         this.sourceKeySelected(key);
     }
 
@@ -174,6 +201,14 @@ export class ScenarioHistoricaldataComponent implements OnInit {
                 );
         };
     }
+
+    private createRoute(): void {
+        this.router.navigate(["scenario-historicaldata", this.selectedMachineId], {
+            queryParams: {
+                sourceKey: this.selectedSourceKey
+            }
+        });
+    }
 }
 
 interface ScenarionHistoricaldataSearchCriteria {

src/web/src/app/scenario-machinestate/scenario-machinestate-routing.module.ts

@@ -1,20 +1,20 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { ScenarioMachinestateComponent } from './scenario-machinestate.component';
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+import { ScenarioMachinestateComponent } from "./scenario-machinestate.component";
 
 const routes: Routes = [
     {
-        path: '',
+        path: "",
         component: ScenarioMachinestateComponent
     },
     {
-        path: ':tmid',
+        path: ":tmid",
         component: ScenarioMachinestateComponent
     }
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
 })
-export class ScenarioMachinestateRoutingModule { }
+export class ScenarioMachinestateRoutingModule {}

src/web/src/app/shared/components/select-machine/select-machine.component.html

@@ -1,5 +1,5 @@
 <div class="control">
-    <ng-select *ngIf="items$ | async; else loadingOrError" class="select-machine" [items]="items$ | async"
+    <ng-select *ngIf="(items$ | async) as items; else loadingOrError" class="select-machine" [items]="items"
         groupBy="assignedMachines" bindLabel="displayName" placeholder="Please select a machine" [clearable]="false"
         [searchable]="false" [dropdownPosition]="'bottom'" (change)="selectedMachineChanged($event)"
         [(ngModel)]="selectedMachine">

src/web/src/app/shared/components/select-machine/select-machine.component.ts

@@ -28,15 +28,16 @@ export class SelectMachineComponent implements OnInit {
 
     ngOnInit() {
         this.items$ = this.machineOverviewService.getSubscriptions().pipe(
-          tap(subscriptions => {
-            for (const subscription of subscriptions) {
-              for (const machine of subscription.assignedMachines) {
-                if (machine.tmid === this.initialMachineId) {
-                  this.selectedMachine = machine;
+            tap(subscriptions => {
+                for (const subscription of subscriptions) {
+                    for (const machine of subscription.assignedMachines) {
+                        if (machine.tmid === this.initialMachineId) {
+                            this.selectedMachine = machine;
+                            this.selectedMachineChanged(this.selectedMachine);
+                        }
+                    }
                 }
-              }
-            }
-          }),
+            }),
             catchError(err => {
                 this.error$.next(true);
                 this.loading$.next(false);