packet stats per node

ui/src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ import {NetworkStatusComponent} from "./components/packet/NetworkStatus.componen
 const routes: Routes = [
   {path: "nodes/:type", component: NodesListComponent},
   {path: "messages", component: MessageHistoryComponent},
-  {path: "network/status", component: NetworkStatusComponent},
+  {path: "network/status/:num", component: NetworkStatusComponent},
   {path: "", component: BotCommandsComponent}
 ];
 

ui/src/app/app.component.ts

@@ -22,7 +22,7 @@ export class AppComponent implements OnInit {
   userNode!: NodeDTO
 
   routes: {name: string, url: string}[] = [
-    {name: "Статистика сети", url:"network/status"},
+    {name: "Статистика сети", url:"network/status/0"},
     {name: "История сообщений", url:"messages"},
     {name: "Прямые ноды", url:"nodes/direct"},
     {name: "Все ноды", url:"nodes/list"},

ui/src/app/app.module.ts

@@ -12,7 +12,6 @@ import {HttpClientModule, HTTP_INTERCEPTORS} from "@angular/common/http";
 import {BotCommandsComponent} from "./components/botCommands/BotCommands.component";
 import {MessageHistoryComponent} from "./components/messages/MessageHistory.component";
 import {NodesListComponent, NodeDtoSearchPipe, NodeDtoSortPipe} from "./components/nodes/nodes-list.component";
-import {AllNodesComponent} from "./components/nodes/AllNodes.component";
 import {AuthDialog, AuthInterceptor} from "./auth/AuthInterceptor";
 import {MatDialogModule} from "@angular/material/dialog";
 import {MatTabsModule} from "@angular/material/tabs";
@@ -31,7 +30,6 @@ import {NetworkStatusComponent} from "./components/packet/NetworkStatus.componen
     BotCommandsComponent,
     MessageHistoryComponent,
     NodesListComponent,
-    AllNodesComponent,
     AuthDialog,
     NetworkStatusComponent
   ],

ui/src/app/components/nodes/AllNodes.component.ts

@@ -1,9 +0,0 @@
-import {Component} from "@angular/core";
-
-@Component({
-  selector: "app-all-nodes",
-  template: ``
-})
-export class AllNodesComponent {
-
-}

ui/src/app/components/nodes/nodes-list.component.ts

@@ -44,9 +44,10 @@ import {numToColor} from "../../utils/Utils";
 
           </mat-card-content>-->
           <mat-card-actions>
+            <button mat-button>{{node.ts * 1000 | date:"HH:mm dd.MM.yyyy"}}</button>
             <button mat-button *ngIf="node.hops_away > 0">Прыжков: {{node.hops_away}}</button>
             <button mat-button>SNR: {{node.snr}}</button>
-            <button mat-button>{{node.ts * 1000 | date:"HH:mm dd.MM.yyyy"}}</button>
+            <button mat-button (click)="goTo('/network/status/' + node.num)">Статистика</button>
           </mat-card-actions>
         </mat-card>
       </div>
@@ -56,7 +57,8 @@ import {numToColor} from "../../utils/Utils";
 export class NodesListComponent implements OnInit {
   numToColor = numToColor
   constructor(private http: HttpClient,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private router: Router) {
   }
 
   nodes: NodeDTO[] = [];
@@ -84,10 +86,14 @@ export class NodesListComponent implements OnInit {
       }
     )
   }
+
+  goTo(url: string) {
+    this.router.navigate([url]);
+  }
 }
 
 import { Pipe, PipeTransform } from '@angular/core';
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 @Pipe({
   name: 'NodeDtoSort',
   standalone: true

ui/src/app/components/packet/NetworkStatus.component.ts

@@ -5,17 +5,24 @@ import {Chart} from "chart.js/auto";
 import {numToColor} from "../../utils/Utils";
 import {KeyValueMap} from "../../entities/KeyValueMap";
 import {NodeDTO} from "../../entities/NodeDTO";
+import {ActivatedRoute} from "@angular/router";
 
 @Component({
   selector: "app-network-status",
   template: `
     <div style="width: 80%; padding: 0 10%;">
-      <div *ngFor="let type of graphs" class="card-wrapper-450" style="padding-top: 12px">
-        <mat-card *ngFor="let p1 of type.cards">
-          <mat-card-content>
-            <canvas [id]="p1.canvasId">{{p1.chart}}</canvas>
-          </mat-card-content>
-        </mat-card>
+      <div [ngSwitch]="MODE">
+        <h1 *ngSwitchCase="'ALL'">Статистика всей сети</h1>
+        <h1 *ngSwitchCase="'NODE'">Статистика ноды {{getNumName(NUM)}} в сети</h1>
+      </div>
+      <div *ngFor="let type of graphs" >
+        <div *ngIf="MODE == type.requestMode" class="card-wrapper-450" style="padding-top: 12px">
+          <mat-card *ngFor="let p1 of type.cards">
+            <mat-card-content>
+              <canvas [id]="p1.canvasId">{{p1.chart}}</canvas>
+            </mat-card-content>
+          </mat-card>
+        </div>
       </div>
     </div>
   `
@@ -24,66 +31,107 @@ export class NetworkStatusComponent implements OnInit {
   DAY = 86400;
   WEEK = this.DAY * 7;
   MONTH = this.DAY * 30;
+  MODE: "ALL"|"NODE" = "ALL"
+  NUM:number = 0;
 
   nodesNames: KeyValueMap<NodeDTO> = {}
 
   //общая статичтика по perPortNum за день\неделю\месяц / ?=
   //top кто насрал пакетами всего за день\неделю\месяц / ?=packetsSumNode=true
-  graphs:any[] = [
-    {
-      header: "Cтатистика пакетов в сети",
-      type: 'perPortNum',
-      cards:[{
-        chart: Chart,
-        canvasId: "DayPerPB",
-        params: "?=",
-        before: new Date().getTime()/1000,
-        after: (new Date().getTime()/1000) - this.DAY,
-        config: this.generateConfigTChart("Cтатистика по пакетам в сети за день")
-      },{
-        chart: Chart,
-        canvasId: "WeekPerPB",
-        params: "?=",
-        before: new Date().getTime()/1000,
-        after: (new Date().getTime()/1000) - this.WEEK,
-        config: this.generateConfigTChart("Cтатистика по пакетам в сети за неделю")
-      },{
-        chart: Chart,
-        canvasId: "MonthPerPB",
-        params: "?=",
-        before: new Date().getTime()/1000,
-        after: (new Date().getTime()/1000) - this.MONTH,
-        config: this.generateConfigTChart("Cтатистика по пакетам в сети за месяц")
-      }]
-    },
-    {
-      header: "Общая статистика пакетов в сети",
-      type: 'perSumNode',
-      cards:[{
-        chart: Chart,
-        canvasId: "DaySumPB",
-        params: "?packetsSumNode=true",
-        before: new Date().getTime()/1000,
-        after: (new Date().getTime()/1000) - this.DAY,
-        config: this.generateConfigTChart("Количество пакетов от пользоватей за день", false)
-      },{
-        chart: Chart,
-        canvasId: "WeekSumPB",
-        params: "?packetsSumNode=true",
-        before: new Date().getTime()/1000,
-        after: (new Date().getTime()/1000) - this.WEEK,
-        config: this.generateConfigTChart("Количество пакетов от пользоватей за неделю", false)
+  graphs:any[] = this.generateGraps();
+  constructor(private http: HttpClient,
+              private route: ActivatedRoute) {}
+
+  getNumName(num:number) {
+    if (`${num}` in this.nodesNames)
+      return this.nodesNames[`${num}`].long_name
+    else return `${num}`
+  }
+
+  generateGraps() {
+    return [
+      {
+        header: "Cтатистика пакетов в сети",
+        type: 'perPortNum',
+        requestMode: "ALL",
+        cards:[{
+          chart: Chart,
+          canvasId: "DayPerPB",
+          params: "?=",
+          before: new Date().getTime()/1000,
+          after: (new Date().getTime()/1000) - this.DAY,
+          config: this.generateConfigTChart("Cтатистика по пакетам в сети за день")
+        },{
+          chart: Chart,
+          canvasId: "WeekPerPB",
+          params: "?=",
+          before: new Date().getTime()/1000,
+          after: (new Date().getTime()/1000) - this.WEEK,
+          config: this.generateConfigTChart("Cтатистика по пакетам в сети за неделю")
+        },{
+          chart: Chart,
+          canvasId: "MonthPerPB",
+          params: "?=",
+          before: new Date().getTime()/1000,
+          after: (new Date().getTime()/1000) - this.MONTH,
+          config: this.generateConfigTChart("Cтатистика по пакетам в сети за месяц")
+        }]
+      },
+      {
+        header: "Общая статистика пакетов в сети",
+        type: 'perSumNode',
+        requestMode: "ALL",
+        cards:[{
+          chart: Chart,
+          canvasId: "DaySumPB",
+          params: "?packetsSumNode=true",
+          before: new Date().getTime()/1000,
+          after: (new Date().getTime()/1000) - this.DAY,
+          config: this.generateConfigTChart("Количество пакетов от пользоватей за день", false)
+        },{
+          chart: Chart,
+          canvasId: "WeekSumPB",
+          params: "?packetsSumNode=true",
+          before: new Date().getTime()/1000,
+          after: (new Date().getTime()/1000) - this.WEEK,
+          config: this.generateConfigTChart("Количество пакетов от пользоватей за неделю", false)
+        },{
+          chart: Chart,
+          canvasId: "MonthSumPB",
+          params: "?packetsSumNode=true",
+          before: new Date().getTime()/1000,
+          after: (new Date().getTime()/1000) - this.MONTH,
+          config: this.generateConfigTChart("Количество пакетов от пользоватей за месяц", false)
+        }]
       },{
-        chart: Chart,
-        canvasId: "MonthSumPB",
-        params: "?packetsSumNode=true",
-        before: new Date().getTime()/1000,
-        after: (new Date().getTime()/1000) - this.MONTH,
-        config: this.generateConfigTChart("Количество пакетов от пользоватей за месяц", false)
-      }]
-    }
-  ];
-  constructor(private http: HttpClient) {}
+        header: "Cтатистика пакетов в сети",
+        type: 'packetsPerNode',
+        requestMode: "NODE",
+        cards:[{
+          chart: Chart,
+          canvasId: "DayPerNodePB",
+          params: "?packetsPerNode=true",
+          before: new Date().getTime()/1000,
+          after: (new Date().getTime()/1000) - this.DAY,
+          config: this.generateConfigTChart("Cтатистика по пакетам в сети за день")
+        },{
+          chart: Chart,
+          canvasId: "WeekPerNodePB",
+          params: "?packetsPerNode=true",
+          before: new Date().getTime()/1000,
+          after: (new Date().getTime()/1000) - this.WEEK,
+          config: this.generateConfigTChart("Cтатистика по пакетам в сети за неделю")
+        },{
+          chart: Chart,
+          canvasId: "MonthPerNodePB",
+          params: "?packetsPerNode=true",
+          before: new Date().getTime()/1000,
+          after: (new Date().getTime()/1000) - this.MONTH,
+          config: this.generateConfigTChart("Cтатистика по пакетам в сети за месяц")
+        }]
+      }
+    ]
+  }
 
   generateConfigTChart(name: string, legend: boolean = true) {
     return {
@@ -106,58 +154,97 @@ export class NetworkStatusComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.http.get(`api/nodes/list`).subscribe(
-      (obj) => {
-        (obj as NodeDTO[]).forEach(
-          (node) => {
-            this.nodesNames[`${node.num}`] = node;
+    this.route.params.subscribe(
+      (params) => {
+        const num: number = Number.parseInt(params["num"]);
+        console.log(num);
+        switch (num) {
+          case 0: {
+            this.MODE = "ALL";
+            this.http.get(`api/nodes/list`).subscribe(
+              (obj) => {
+                (obj as NodeDTO[]).forEach(
+                  (node) => {
+                    this.nodesNames[`${node.num}`] = node;
+                  }
+                )
+              }
+            ).add(
+              () => {
+                this.graphs = this.generateGraps();
+                this.updateGraphs();
+              }
+            )
+            break;
           }
-        )
-      }
-    ).add(
-      () => {
-          this.graphs.forEach(
-            (graph) => {
-              graph.cards.forEach((settings:any) => {
-                this.http.get(`api/packet/stats${settings.params}&before=${settings.before}&after=${settings.after}`)
-                  .subscribe((data) => {
-                    settings.config.data = {
-                      labels: [],
-                      datasets: [
-                        {
-                          label: settings.canvasId,
-                          data: [],
-                          backgroundColor: []
-                        }
-                      ]
-                    };
-                    (data as Object[]).map((obj) => PacketGroup.fromDto(obj)).sort((p1, p2) => p2.count - p1.count).forEach(
-                      (d) => {
-                        switch (graph.type) {
-                          case "perPortNum": {
-                            settings.config.data.labels.push(`${d.portnumName} - ${d.count}`)
-                            settings.config.data.datasets[0].data.push(d.count)
-                            settings.config.data.datasets[0].backgroundColor.push(numToColor(d.portnum, 0))
-                            break;
-                          }
-                          case "perSumNode": {
-                            const name = `${d.from}` in this.nodesNames ? this.nodesNames[`${d.from}`].long_name : `${d.from}`
-                            settings.config.data.labels.push(`${name} - ${d.count}`)
-                            settings.config.data.datasets[0].data.push(d.count)
-                            settings.config.data.datasets[0].backgroundColor.push(numToColor(d.from, 0))
-                            break;
-                          }
-                        }
-                      }
-                    )
-                    //if (settings.chart)
-                    //  settings.chart.destroy()
+          default: {
+            this.MODE = "NODE";
+            this.NUM = num;
+            this.http.get(`api/nodes/${num}`).subscribe(
+              (obj) => {
+                const node: NodeDTO = obj as NodeDTO
+                if (node)
+                  this.nodesNames[`${node.num}`] = node;
+              }
+            ).add(
+              () => {
+                this.graphs = this.generateGraps();
+                this.updateGraphs();
+              }
+            )
+            break;
+          }
+        }
+      })
+  }
+
+  updateGraphs() {
+    this.graphs.forEach(
+      (graph) => {
+        graph.cards.forEach((settings:any) => {
+          if (this.MODE != graph.requestMode) return;
+          this.http.get(`api/packet/stats${settings.params}&before=${settings.before}&after=${settings.after}&${this.NUM == 0?'':('&nums='+this.NUM)}`)
+            .subscribe((data) => {
+              settings.config.data = {
+                labels: [],
+                datasets: [
+                  {
+                    label: settings.canvasId,
+                    data: [],
+                    backgroundColor: []
+                  }
+                ]
+              };
+              (data as Object[]).map((obj) => PacketGroup.fromDto(obj)).sort((p1, p2) => p2.count - p1.count).forEach(
+                (d) => {
+                  switch (graph.type) {
+                    case "perPortNum":
+                    case "packetsPerNode":{
+                      settings.config.data.labels.push(`${d.portnumName} - ${d.count}`)
+                      settings.config.data.datasets[0].data.push(d.count)
+                      settings.config.data.datasets[0].backgroundColor.push(numToColor(d.portnum, 0))
+                      break;
+                    }
+                    case "perSumNode": {
+                      const name = `${d.from}` in this.nodesNames ? this.nodesNames[`${d.from}`].long_name : `${d.from}`
+                      settings.config.data.labels.push(`${name} - ${d.count}`)
+                      settings.config.data.datasets[0].data.push(d.count)
+                      settings.config.data.datasets[0].backgroundColor.push(numToColor(d.from, 0))
+                      break;
+                    }
+                    default: {
+                      console.log("missing type: " + graph.type);
+                      break;
+                    }
+                  }
+                }
+              )
+              //if (settings.chart)
+              //  settings.chart.destroy()
 
-                    settings.chart = new Chart(settings.canvasId, settings.config)
-                  })
-              })
-            }
-          )
+              settings.chart = new Chart(settings.canvasId, settings.config)
+            })
+        })
       }
     )
   }