IOT-34 add statistics to gateway

Author: Jeppe Elkjær Jørgensen

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

@@ -1,8 +1,8 @@
 <app-top-bar-single [data]="gateway" [backButton]="backButton"></app-top-bar-single>
     <div class="application-component">
-        <div class="col-12 mb-4 py-3 bottom-separator">
-            <div class="col-12 col-sm-12">
-                <div class="col-12 col-sm-12">
+        <div class="bottom-separator">
+            <div class="col-12 py-4">
+                <div class="col-12 col-sm-4">
                     <h4>{{ 'GATEWAY.NAME' | translate }}</h4>
                 </div>
                 <div class="col-12 pt-2 col-sm-8">
@@ -56,5 +56,30 @@ <h4>{{ 'GATEWAY.TAGS' | translate }}</h4>
                 <p>{{gateway.tagsString}}</p>
             </div>
         </div>
+            <div class="col-12 col-sm-4">
+                <h4>{{ 'GATEWAY.STATS' | translate }}</h4>
+            </div>
+            <div class="mat-elevation-z8 col-12 pt-2 col-sm-8">
+                <table mat-table [dataSource]="dataSource">
+                    <ng-container matColumnDef="rxPacketsReceived">
+                        <th mat-header-cell *matHeaderCellDef>{{ 'GATEWAY.STATS-RXPACKETSRECEIVED' | translate }}</th>
+                        <td mat-cell *matCellDef="let element">{{element.rxPacketsReceived}}</td>
+                    </ng-container>
+                    
+                    <ng-container matColumnDef="txPacketsEmitted">
+                        <th mat-header-cell *matHeaderCellDef>{{ 'GATEWAY.STATS-TXPACKETSEMITTED' | translate }}</th>
+                        <td mat-cell *matCellDef="let element">{{element.txPacketsEmitted}}</td>
+                    </ng-container>
+            
+                    <ng-container matColumnDef="txPacketsReceived">
+                        <th mat-header-cell *matHeaderCellDef>{{ 'GATEWAY.STATS-TIMESTAMP' | translate }}</th>
+                        <td mat-cell *matCellDef="let element">{{element.timestamp | date}}</td>
+                    </ng-container>
+            
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                </table>
+                <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+            </div>
         </div>
-    </div>
+    </div>

src/app/gateway/gateway-detail/gateway-detail.component.scss

@@ -0,0 +1,3 @@
+table {
+    width: 100%;
+  }

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

@@ -1,22 +1,29 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Gateway } from 'src/app/models/gateway';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Gateway, GatewayStats } from 'src/app/models/gateway';
 import { Subscription } from 'rxjs';
 import { ChirpstackGatewayService } from 'src/app/shared/services/chirpstack-gateway.service';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BackButton } from 'src/app/models/back-button';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
 
 @Component({
     selector: 'app-gateway-detail',
     templateUrl: './gateway-detail.component.html',
     styleUrls: ['./gateway-detail.component.scss']
 })
-export class GatewayDetailComponent implements OnInit, OnDestroy {
+export class GatewayDetailComponent implements OnInit, OnDestroy, AfterViewInit {
 
     public gatewaySubscription: Subscription;
     public gateway: Gateway;
     public backButton: BackButton = { label: '', routerLink: '/gateways' };
     private id: string;
+    private gatewayStats: GatewayStats[];
+    displayedColumns: string[] = ['rxPacketsReceived', 'txPacketsEmitted', 'txPacketsReceived'];
+    public dataSource = new MatTableDataSource<GatewayStats>();
+    @ViewChild(MatPaginator) paginator: MatPaginator;
+
     constructor(
         private gatewayService: ChirpstackGatewayService,
         private route: ActivatedRoute,
@@ -35,10 +42,16 @@ export class GatewayDetailComponent implements OnInit, OnDestroy {
             });
     }
 
+    ngAfterViewInit() {
+        this.dataSource.paginator = this.paginator;
+    }
+
     bindGateway(id: string): void {
         this.gatewayService.get(id).subscribe((result: any) => {
             result.gateway.tagsString = JSON.stringify(result.gateway.tags);
             this.gateway = result.gateway;
+            this.gatewayStats = result.stats;
+            this.dataSource = new MatTableDataSource<GatewayStats>(this.gatewayStats);
             console.log('gateway', this.gateway);
         });
     }

src/app/gateway/gateway.module.ts

@@ -12,6 +12,7 @@ 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';
+import { NGMaterialModule } from '@shared/Modules/materiale.module';
 
 @NgModule({
   declarations: [
@@ -29,14 +30,15 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     TranslateModule,
     FormModule,
     FormsModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    NGMaterialModule
   ],
   exports: [
     GatewayTableComponent,
     GatewayTableRowComponent,
     GatewaysComponent,
     GatewayListComponent,
-    GatewayEditComponent,
+    GatewayEditComponent
   ]
 })
 export class GatewayModule { }

src/app/models/gateway.ts

@@ -32,7 +32,7 @@ export class GatewayResponse {
 }
 
 export interface GatewayStats {
-    timestamp: string;
+    timestamp: Date;
     rxPacketsReceived: number;
     rxPacketsReceivedOK: number;
     txPacketsReceived: number;

src/assets/i18n/da.json

@@ -41,7 +41,11 @@
     "ID": "Gateway ID",
     "LOCATION": "Placering",
     "TAGS": "Tags",
-    "NAME": "Gatewayens navn"
+    "NAME": "Gatewayens navn",
+    "STATS": "Statistik",
+    "STATS-RXPACKETSRECEIVED": "Pakker modtaget",
+    "STATS-TXPACKETSEMITTED": "Pakker Sendt",
+    "STATS-TIMESTAMP": "Tidspunkt"
   },
   "IOT-DEVICE": {
     "CREATE": "Gem IoT enhed",