[IT-2812] Set time frame default value in time frame component

Author: DanielSteger

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/models/result-selection-command.model.ts

@@ -1,6 +1,6 @@
 export interface ResultSelectionCommandDTO {
-  from: Date;
-  to: Date;
+  from?: Date;
+  to?: Date;
   caller?: Caller;
   jobGroupIds?: number[];
   pageIds?: number[];
@@ -11,8 +11,8 @@ export interface ResultSelectionCommandDTO {
 }
 
 export class ResultSelectionCommand implements ResultSelectionCommandDTO {
-  from: Date;
-  to: Date;
+  from?: Date;
+  to?: Date;
   caller?: Caller;
   jobGroupIds?: number[];
   pageIds?: number[];

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,8 +66,17 @@ export class ResultSelectionStore {
     selectedTimeFrameInterval: 'interval'
   };
 
-  constructor(private resultSelectionService: ResultSelectionService, route: ActivatedRoute, private router: Router) {
-    route.queryParams.subscribe((params: Params) => {
+  constructor(private resultSelectionService: ResultSelectionService, private route: ActivatedRoute, private router: Router) {
+    this.getQueryParams();
+
+    if (!this.validQuery) {
+      this._resultSelectionCommand$ = new BehaviorSubject({caller: Caller.EventResult});
+      this._remainingResultSelection$ = new BehaviorSubject({});
+    }
+  }
+
+  getQueryParams(): void {
+    this.route.queryParams.subscribe((params: Params) => {
       if (params) {
         params = this.renameParamKeys(this.oldToNewChartKeyMap, params);
         this.validQuery = this.checkQuery(params);
@@ -155,27 +162,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]});
   }
@@ -214,6 +200,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);