Merge pull request #283 from iteratec/feature/resultSelectionDefaultValues

Feature: Set start values for the result selection in its components

Author: j0weiss

frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.ts

@@ -57,8 +57,19 @@ export class TimeFrameComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.selectedDates = [this.resultSelectionStore.resultSelectionCommand.from, this.resultSelectionStore.resultSelectionCommand.to];
-    this.selectTimeFrame();
+    if (this.resultSelectionStore.validQuery) {
+      this.selectedDates = [this.resultSelectionStore.resultSelectionCommand.from, this.resultSelectionStore.resultSelectionCommand.to];
+      this.selectTimeFrame();
+
+    } else {
+      let defaultFrom = new Date();
+      let 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);
+    }
 
     if (this.showAggregation) {
       this.resultSelectionStore.setRemainingResultSelectionInterval(this.aggregationIntervalInSeconds);
@@ -101,8 +112,8 @@ export class TimeFrameComponent implements OnInit {
 
     comparativeTo.setSeconds(comparativeTo.getSeconds() - 1);
 
-    let calculatedTimeFrameInSecondes = this.calculateTimeFrameInSeconds(from, to);
-    comparativeFrom.setSeconds(comparativeTo.getSeconds() - calculatedTimeFrameInSecondes);
+    let calculatedTimeFrameInSeconds = this.calculateTimeFrameInSeconds(from, to);
+    comparativeFrom.setSeconds(comparativeTo.getSeconds() - calculatedTimeFrameInSeconds);
 
     this.selectedComparativeDates = [comparativeFrom, comparativeTo];
   }
@@ -112,26 +123,26 @@ export class TimeFrameComponent implements OnInit {
     let to = new Date(this.selectedDates[1]);
 
     // Remove seconds and millisecond
-    from.setSeconds(0,0);
-    to.setSeconds(0,0);
+    from.setSeconds(0, 0);
+    to.setSeconds(0, 0);
 
-    let calculatedTimeFrameInSecondes = this.calculateTimeFrameInSeconds(from, to);
-    if (this.isValidTimeFrameUntilNow(calculatedTimeFrameInSecondes)) {
-      this.timeFrameInSeconds = calculatedTimeFrameInSecondes;
+    let calculatedTimeFrameInSeconds = this.calculateTimeFrameInSeconds(from, to);
+    if (this.isValidTimeFrameUntilNow(calculatedTimeFrameInSeconds)) {
+      this.timeFrameInSeconds = calculatedTimeFrameInSeconds;
     } else {
       this.timeFrameInSeconds = TIME_FRAME_IN_SECONDS.MANUAL_SELECTION;
     }
   }
 
   private calculateTimeFrameInSeconds(from: Date, to: Date): number {
     let timeZoneOffsetInSeconds = (to.getTimezoneOffset() - from.getTimezoneOffset()) * 60;
-    return to.getTime()/1000 - from.getTime()/1000 - timeZoneOffsetInSeconds;
+    return to.getTime() / 1000 - from.getTime() / 1000 - timeZoneOffsetInSeconds;
   }
 
-  private isValidTimeFrameUntilNow(calculatedTimeFrameInSecondes: number): boolean {
+  private isValidTimeFrameUntilNow(calculatedTimeFrameInSeconds: number): boolean {
     let to = new Date(this.selectedDates[1]);
     to.setHours(23, 59, 0, 0);
-    return to >= this.max && this.selectableTimeFramesInSeconds.find(value => value == calculatedTimeFrameInSecondes) != undefined
+    return to >= this.max && this.selectableTimeFramesInSeconds.find(value => value == calculatedTimeFrameInSeconds) != undefined
   }
 
   updateFromDate(calendar: CalendarType): void {

frontend/src/app/modules/result-selection/services/result-selection.service.ts

@@ -11,10 +11,13 @@ export class ResultSelectionService {
   }
 
   fetchResultSelectionData<T>(resultSelectionCommand: ResultSelectionCommand, url: URL): Observable<T> {
-    const params = this.createParamsFromResultSelectionCommand(resultSelectionCommand);
-    return this.http.get<T>(url, {params: params}).pipe(
-      this.handleError()
-    )
+    if (resultSelectionCommand.from && resultSelectionCommand.to) {
+      const params = this.createParamsFromResultSelectionCommand(resultSelectionCommand);
+      return this.http.get<T>(url, {params: params}).pipe(
+        this.handleError()
+      )
+    }
+    return new Observable<T>();
   }
 
   private createParamsFromResultSelectionCommand(resultSelectionCommand: ResultSelectionCommand) {

frontend/src/app/modules/result-selection/services/result-selection.store.ts

@@ -19,8 +19,6 @@ import {ActivatedRoute, Params, Router} from "@angular/router";
 
 @Injectable()
 export class ResultSelectionStore {
-  from: Date;
-  to: Date;
   _resultSelectionCommand$: BehaviorSubject<ResultSelectionCommand>;
   _remainingResultSelection$: BehaviorSubject<RemainingResultSelection>;
 
@@ -68,10 +66,15 @@ export class ResultSelectionStore {
     selectedTimeFrameInterval: 'interval'
   };
 
-  constructor(private resultSelectionService: ResultSelectionService, route: ActivatedRoute, private router: Router) {
-    this._resultSelectionCommand$ = new BehaviorSubject<ResultSelectionCommand>({});
+  constructor(private resultSelectionService: ResultSelectionService, private route: ActivatedRoute, private router: Router) {
+    this._resultSelectionCommand$ = new BehaviorSubject<ResultSelectionCommand>({caller: Caller.EventResult});
     this._remainingResultSelection$ = new BehaviorSubject<RemainingResultSelection>({});
-    route.queryParams.subscribe((params: Params) => {
+
+    this.readQueryParams();
+  }
+
+  readQueryParams(): void {
+    this.route.queryParams.subscribe((params: Params) => {
       if (params) {
         params = this.renameParamKeys(this.oldToNewChartKeyMap, params);
         this.validQuery = this.checkQuery(params);
@@ -101,22 +104,9 @@ export class ResultSelectionStore {
         this._remainingResultSelection$.next(remainingResultSelection);
       }
     });
-
-    if (!this.validQuery) {
-      let defaultFrom = new Date();
-      let defaultTo = new Date();
-      defaultFrom.setDate(defaultTo.getDate() - 3);
-
-      const resultSelectionCommand: ResultSelectionCommand = {
-        from: defaultFrom,
-        to: defaultTo,
-        caller: Caller.EventResult
-      };
-      this._resultSelectionCommand$.next(resultSelectionCommand);
-    }
   }
 
-  writeQueryParams(additionalParams?: Params) {
+  writeQueryParams(additionalParams?: Params): void {
     this.router.navigate([], {
       queryParams: {
         from: this.resultSelectionCommand.from.toISOString(),
@@ -157,27 +147,6 @@ export class ResultSelectionStore {
     });
   }
 
-  private checkQuery(params: Params): boolean {
-    const dates: Date[] = [new Date(params.from), new Date(params.to)];
-    const datesValid: boolean = dates.every(this.isValidDate);
-    const jobGroupIdsValid: boolean = !!params.jobGroupIds;
-
-    return datesValid && jobGroupIdsValid;
-  }
-
-  private isValidDate(date: Date) {
-    return date instanceof Date && !isNaN(date.getTime())
-  }
-
-  private renameParamKeys = (keysMap, object) =>
-    Object.keys(object).reduce(
-      (acc, key) => ({
-        ...acc,
-        ...{[keysMap[key] || key]: object[key]}
-      }),
-      {}
-    );
-
   setResultSelectionCommandTimeFrame(timeFrame: Date[]): void {
     this.setResultSelectionCommand({...this.resultSelectionCommand, from: timeFrame[0], to: timeFrame[1]});
   }
@@ -216,6 +185,27 @@ export class ResultSelectionStore {
     return this._remainingResultSelection$.getValue();
   }
 
+  private checkQuery(params: Params): boolean {
+    const dates: Date[] = [new Date(params.from), new Date(params.to)];
+    const datesValid: boolean = dates.every(this.isValidDate);
+    const jobGroupIdsValid: boolean = !!params.jobGroupIds;
+
+    return datesValid && jobGroupIdsValid;
+  }
+
+  private isValidDate(date: Date) {
+    return date instanceof Date && !isNaN(date.getTime())
+  }
+
+  private renameParamKeys = (keysMap, object) =>
+    Object.keys(object).reduce(
+      (acc, key) => ({
+        ...acc,
+        ...{[keysMap[key] || key]: object[key]}
+      }),
+      {}
+    );
+
   private setRemainingResultSelection(newState: RemainingResultSelection): void {
     this.dataAvailable$.next(true);
     this._remainingResultSelection$.next(newState);