Show gateway status for whole time period

src/app/gateway/enums/gateway-status-interval.enum.ts

@@ -1,5 +1,22 @@
+import * as moment from 'moment';
+
 export enum GatewayStatusInterval {
   DAY = 'DAY',
   WEEK = 'WEEK',
   MONTH = 'MONTH',
 }
+
+export const gatewayStatusIntervalToDate = (
+  interval: GatewayStatusInterval
+): Date => {
+  const now = new Date();
+
+  switch (interval) {
+    case GatewayStatusInterval.WEEK:
+      return moment(now).subtract(7, 'days').toDate();
+    case GatewayStatusInterval.MONTH:
+      return moment(now).subtract(30, 'days').toDate();
+    default:
+      return moment(now).subtract(1, 'days').toDate();
+  }
+};

src/app/gateway/gateway-status/gateway-status.component.ts

@@ -14,7 +14,7 @@ import { recordToEntries } from '@shared/helpers/record.helper';
 import { LoRaWANGatewayService } from '@shared/services/lorawan-gateway.service';
 import * as moment from 'moment';
 import { Observable, Subject, Subscription } from 'rxjs';
-import { GatewayStatusInterval } from '../enums/gateway-status-interval.enum';
+import { GatewayStatusInterval, gatewayStatusIntervalToDate } from '../enums/gateway-status-interval.enum';
 import { GatewayStatus, AllGatewayStatusResponse } from '../gateway.model';
 import { map } from 'rxjs/operators';
 import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
@@ -135,14 +135,15 @@ export class GatewayStatusComponent implements AfterContentInit, OnDestroy {
       timeInterval
     ).subscribe((response) => {
       this.isLoadingResults = false;
+      const fromDate = gatewayStatusIntervalToDate(timeInterval);
 
-      if (response) {
-        this.handleStatusResponse(response);
+      if (Array.isArray(response?.data)) {
+        this.handleStatusResponse(response, fromDate);
       }
     });
   }
 
-  private handleStatusResponse(response: AllGatewayStatusResponse) {
+  private handleStatusResponse(response: AllGatewayStatusResponse, fromDate: Date) {
     this.resultsLength = response.count;
     const gatewaysWithLatestTimestampsPerHour = this.takeLatestTimestampInHour(
       response.data
@@ -153,9 +154,15 @@ export class GatewayStatusComponent implements AfterContentInit, OnDestroy {
 
     const sortedData = gatewaysWithWholeHourTimestamps
       .slice()
-      .sort((a, b) => a.name.localeCompare(b.name));
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((gateway) => ({
+        ...gateway,
+        statusTimestamps: gateway.statusTimestamps.sort(
+          (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
+        ),
+      }));
 
-    this.buildColumns(sortedData);
+    this.buildColumns(sortedData, fromDate);
     this.visibleFooterTimeInterval = Math.round(
       this.clamp(this.timeColumns.length / 4, 1, 6)
     );
@@ -164,23 +171,18 @@ export class GatewayStatusComponent implements AfterContentInit, OnDestroy {
     this.dataSource.paginator = this.paginator;
   }
 
-  private buildColumns(response: GatewayStatus[]) {
-    let minDate: Date | null | undefined;
+  private buildColumns(response: GatewayStatus[], fromDate: Date) {
+    const minDate = fromDate;
     let maxDate: Date | null | undefined;
     this.timeColumns = [];
 
     response.forEach((gateway) => {
       gateway.statusTimestamps.forEach(({ timestamp }) => {
-        if (!minDate) {
-          minDate = timestamp;
-        }
         if (!maxDate) {
           maxDate = timestamp;
         }
 
-        if (timestamp < minDate) {
-          minDate = timestamp;
-        } else if (timestamp > maxDate) {
+        if (timestamp > maxDate) {
           maxDate = timestamp;
         }
       });

src/app/shared/pipes/gateway/gateway-status-class.pipe.ts

@@ -1,5 +1,10 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { StatusTimestamp } from '@app/gateway/gateway.model';
+import * as moment from 'moment';
+
+const classNeverSeen = 'never-seen';
+const classOffline = 'offline';
+const classOnline = 'online';
 
 @Pipe({
   name: 'gatewayStatusClass',
@@ -14,14 +19,27 @@ export class GatewayStatusClassPipe implements PipeTransform {
     timestamp: string,
     ..._: unknown[]
   ): string {
-    return !statusTimestamps.length
-      ? 'never-seen'
-      : statusTimestamps.some(
-          (gatewayTimestamp) =>
-            gatewayTimestamp.timestamp.toISOString() === timestamp &&
-            gatewayTimestamp.wasOnline
-        )
-      ? 'online'
-      : 'offline';
+    if (!statusTimestamps.length) {
+      return classNeverSeen;
+    }
+
+    let currentStatus = classOffline;
+    const selectedDate = moment(timestamp).toDate();
+
+    for (const gatewayTimestamp of statusTimestamps) {
+      const isoGatewayTimestamp = gatewayTimestamp.timestamp.toISOString();
+
+      if (isoGatewayTimestamp === timestamp) {
+        return gatewayTimestamp.wasOnline ? classOnline : classOffline;
+      }
+
+      if (gatewayTimestamp.timestamp > selectedDate) {
+        return currentStatus;
+      }
+
+      currentStatus = gatewayTimestamp.wasOnline ? classOnline : classOffline;
+    }
+
+    return currentStatus;
   }
 }