IOT-34 add status to gateway table

Author: Jeppe Elkjær Jørgensen

src/app/gateway/gateway-table-row/gateway-table-row.component.html

@@ -3,14 +3,23 @@
         {{ gateway.name }}
     </a>
 </td>
-
 <td class=" pr-3">
     {{ gateway.id }}
 </td>
-
 <td class=" pr-3">
     {{ gateway.location.longitude }}, {{ gateway.location.latitude }}
-
+</td>
+<td class=" pr-3">
+    {{lastActive()}}
+</td>
+<td class=" pr-3">
+    <ng-container *ngIf="gatewayStatus(); then statusOk else statusError"></ng-container>
+    <ng-template #statusOk>
+        <fa-icon [icon]="faCheckCircle" class="fa-ok"></fa-icon>
+    </ng-template>
+    <ng-template #statusError>
+        <fa-icon [icon]="faExclamationTriangle" class="fa-error"></fa-icon>
+    </ng-template>
 </td>
 <td>
     <div class="dropdown">

src/app/gateway/gateway-table-row/gateway-table-row.component.scss

@@ -0,0 +1,7 @@
+.fa-error {
+    color: red !important;
+}
+
+.fa-ok {
+    color: green !important;
+}

src/app/gateway/gateway-table-row/gateway-table-row.component.ts

@@ -2,6 +2,9 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Router } from '@angular/router';
 import { Gateway } from 'src/app/models/gateway';
+import { faCheckCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as moment from 'moment';
+import 'moment/locale/da';
 
 @Component({
   selector: 'tr[app-gateway-table-row]',
@@ -11,19 +14,46 @@ import { Gateway } from 'src/app/models/gateway';
 export class GatewayTableRowComponent implements OnInit {
 
   @Input() gateway: Gateway;
-
   @Output() deleteGateway = new EventEmitter();
-
+  faExclamationTriangle = faExclamationTriangle;
+  faCheckCircle = faCheckCircle;
   private alertMessage: string;
 
   constructor(
     public translate: TranslateService,
     private router: Router
     ) {
+      moment.locale('da');
       translate.use('da');
   }
 
   ngOnInit(): void {
+    /* 
+    *****Use for testting*****
+
+    const time = new Date();
+    const addRandomTime = Math.floor(Math.random() * 200) + 1;
+    time.setSeconds(time.getSeconds() - addRandomTime);
+    this.gateway.lastSeenAt = time; */
+  }
+
+  gatewayStatus(): boolean {
+    const errorTime = new Date();
+    // 150 seconds is the define error interval: 30 sec heartbeat * 5.
+    errorTime.setSeconds(errorTime.getSeconds() - 150);
+    if (this.gateway?.lastSeenAt && (errorTime.getTime() < this.gateway?.lastSeenAt.getTime())) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  lastActive(): string {
+    if (this.gateway?.lastSeenAt) {
+      return moment(this.gateway.lastSeenAt).fromNow();
+    } else {
+      return this.translate.instant("ACTIVITY.NEVER");
+    }
   }
 
   clickDelete() {

src/app/gateway/gateway-table/gateway-table.component.html

@@ -5,6 +5,8 @@
                 <th>{{ 'LORA-GATEWAY-TABLE.NAME' | translate }}</th>
                 <th>{{ 'LORA-GATEWAY-TABLE.GATEWAYID' | translate }}</th>
                 <th>{{ 'LORA-GATEWAY-TABLE.LOCATION' | translate }}</th>
+                <th>{{ 'LORA-GATEWAY-TABLE.LAST-SEEN-AT' | translate }}</th>
+                <th>{{ 'LORA-GATEWAY-TABLE.STATUS' | translate }}</th>
                 <th></th>
             </tr>
         </thead>

src/app/gateway/gateway.module.ts

@@ -11,6 +11,7 @@ import { GatewayListComponent } from './gateway-list/gateway-list.component';
 import { GatewayEditComponent } from './gateway-edit/gateway-edit.component';
 import { FormsModule } from '@angular/forms';
 import { GatewayDetailComponent } from './gateway-detail/gateway-detail.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   declarations: [
@@ -28,6 +29,7 @@ import { GatewayDetailComponent } from './gateway-detail/gateway-detail.componen
     TranslateModule,
     FormModule,
     FormsModule,
+    FontAwesomeModule
   ],
   exports: [
     GatewayTableComponent,

src/app/models/gateway.ts

@@ -9,6 +9,7 @@ export class Gateway {
     gatewayProfileID: string = null;
     tagsString = '{}';
     tags?: JSON;
+    lastSeenAt: Date;
 }
 
 export class GatewayData {
@@ -26,6 +27,14 @@ export class GatewayResponse {
     updatedAt: string;
     firstSeenAt: string;
     lastSeenAt: string;
-
     gateway: Gateway;
+    stats: GatewayStats[];
+}
+
+export interface GatewayStats {
+    timestamp: string;
+    rxPacketsReceived: number;
+    rxPacketsReceivedOK: number;
+    txPacketsReceived: number;
+    txPacketsEmitted: number;
 }

src/assets/i18n/da.json

@@ -78,7 +78,9 @@
   "LORA-GATEWAY-TABLE": {
     "NAME": "Navn",
     "GATEWAYID": "Gateway ID",
-    "LOCATION": "Placering"
+    "LOCATION": "Placering",
+    "LAST-SEEN-AT": "Seneste aktivitet",
+    "STATUS": "Status"
   },
   "LORA-GATEWAY-TABLE-ROW": {
     "DELETE": "Slet Gateway",