fix

web/src/app/api.service.ts

@@ -3,18 +3,19 @@ import { HttpClient } from '@angular/common/http';
 import { firstValueFrom, mergeMap, timer } from 'rxjs';
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class ApiService {
   routers!: any[];
-  connections!: Record<number, Record<number, any>>;
+  connections!: Record<number, Record<number, Connection>>;
 
   constructor(private http: HttpClient) {
   }
 
   async init() {
-    this.routers = await firstValueFrom(this.http.get<any[]>('http://10.198.0.7:500/api/routers'));
-    this.connections = await firstValueFrom(this.http.get<Record<number, Record<number, any>>>('http://10.198.0.7:500/api/routers'));
+    this.connections = await firstValueFrom(this.http.get<Record<number, Record<number, Connection>>>('http://10.198.0.7:500/api/connections'));
+    this.routers = await firstValueFrom(this.http.get<RouterStatus[]>('http://10.198.0.7:500/api/routers'));
+
 
     console.log(
       this.routers
@@ -23,7 +24,7 @@ export class ApiService {
             Host: item.name,
             HostName: item.host,
             User: item.user,
-            Port: item.sshPort,
+            Port: item.sshPort
           })
             .filter(([key, value]) => value)
             .map((line) => line.join(' '))
@@ -43,9 +44,6 @@ export class ApiService {
 
 export interface RouterStatus {
   id: number,
-  name: string,
-  address: string,
-  location: string,
   peers: Record<number, PeerQuality>,
   via: Record<number, number>
 }
@@ -56,6 +54,20 @@ export interface PeerQuality {
   reliability: number;
 }
 
+export interface Router {
+  id: number;
+  name: string;
+  location: string;
+  host: string;
+  port: number;
+  user: string;
+}
+
+export interface Connection {
+  metric: number;
+  protocol: string;
+}
+
 // const connected: Record<number, Record<number, string>> = {};
 // for (const from of data) {
 //   if (!connected[from.id]) connected[from.id] = {}

web/src/app/app.component.ts

@@ -15,21 +15,20 @@ export class AppComponent implements OnInit {
 
   async ngOnInit() {
     await this.api.init();
-    const protos = [];
-    const routers = this.api.routers;
-    for (const from of routers) {
-      for (const [id1, peer] of Object.entries(from.peers)) {
-        const id = parseInt(id1);
-        const reverse = routers.find(r => r.id === id)?.peers?.[from.id];
-        if (!reverse) continue;
-        const link = this.api.connections[from.id][id];
-        if (!link) continue;
-        // @ts-ignore
-        if (peer.reliability * reverse.reliability <= 0.01) {
-          protos.push(link.proto);
-        }
-      }
-    }
-    console.log(_.groupBy(protos));
+    // const protos = [];
+    // for (const from of this.api.routers) {
+    //   for (const [id1, peer] of Object.entries(from.peers)) {
+    //     const id = parseInt(id1);
+    //     const reverse = this.api.routers.find(r => r.id === id)?.peers?.[from.id];
+    //     if (!reverse) continue;
+    //     const link = this.api.connections[from.id][id];
+    //     if (!link) continue;
+    //     // @ts-ignore
+    //     if (peer.reliability * reverse.reliability <= 0.01) {
+    //       protos.push(link.proto);
+    //     }
+    //   }
+    // }
+    // console.log(_.groupBy(protos));
   }
 }

web/src/app/dashboard/dashboard.component.html

@@ -15,7 +15,7 @@
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <table mat-table [dataSource]="links" *ngIf="routers" fixedLayout [trackBy]="trackById">
+    <table mat-table [dataSource]="links" *ngIf="api.routers" fixedLayout [trackBy]="trackById">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>name</th>
         <td mat-cell *matCellDef="let element"> {{element.name}} </td>
@@ -24,7 +24,7 @@
         <th mat-header-cell *matHeaderCellDef>id</th>
         <td mat-cell *matCellDef="let element"> {{element.id}} </td>
       </ng-container>
-      <ng-container *ngFor="let router of routers">
+      <ng-container *ngFor="let router of api.routers">
         <ng-container [matColumnDef]="router.name">
           <th mat-header-cell *matHeaderCellDef><span class="id">{{router.id}}</span><span
             class="head">{{router.name}}</span></th>

web/src/app/dashboard/dashboard.component.ts

-import {Component, OnInit} from '@angular/core';
-import {map} from 'rxjs/operators';
-import {ApiService, RouterStatus} from "../api.service";
-import * as _ from "lodash-es";
-import {firstValueFrom} from "rxjs";
-import {Quality} from "../Quality";
+import { Component, OnInit } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { ApiService, RouterStatus } from '../api.service';
+import * as _ from 'lodash-es';
+import { Quality } from '../Quality';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss'],
+  styleUrls: ['./dashboard.component.scss']
   // changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DashboardComponent implements OnInit {
-  routers: RouterStatus[] = [];
+  // routers: RouterStatus[] = [];
   displayedColumns: string[] = [];
   links = this.api.state().pipe(
     map(routers => routers.map(router =>
       ({
         id: router.id,
-        name: router.name,
+        name: this.api.routers.find(r => r.id == router.id)!.name,
         peers: _.mapValues(router.peers, (quality, id1) => this.displayQuality(routers, router, parseInt(id1)))
       })
     ))
   );
   routed = false;
 
-  constructor(private api: ApiService) {
+  constructor(public api: ApiService) {
   }
 
   displayQuality(routers: RouterStatus[], from: RouterStatus, toId: number) {
@@ -45,7 +44,8 @@ export class DashboardComponent implements OnInit {
         decoration: quality.hop <= 2 ? '' : `underline hsl(${this.mapNumber(quality.hop, 4, 8, 120, 0)}, 100%, 40%)`
       };
     } else {
-      const link = this.api.link(from.id, toId);
+      const link = this.api.connections[from.id]?.[toId];
+      console.log(link);
       if (!link) return;
       if (!to.peers[from.id]) return;
 
@@ -56,35 +56,23 @@ export class DashboardComponent implements OnInit {
       const decorations: Record<string, string> = {
         oc: 'underline blue',
         wg: 'underline red',
-        tun: 'underline greed',
-      }
+        tun: 'underline greed'
+      };
 
       return {
         delay: quality.reliability <= 0.01 ? 'x' : quality.delay,
         color: `hsl(${this.mapNumber(quality.reliability, 0.9, 1, 0, 120)}, 100%, 40%)`,
-        decoration: decorations[link.split(',')[1]]
+        decoration: decorations[link.protocol]
       };
     }
   }
 
-  displayQuality2(router: RouterStatus, routers: RouterStatus[]) {
-    return {
-      name: router.name,
-      peers: _.mapValues(router.peers, (quality, id) => {
-        // const reverse = routers.find(r => r.id === parseInt(id))?.peers?.[router.id];
-        // if (!reverse) return undefined;
-        // return this.displayQuality2(quality, reverse);
-      })
-    }
-  }
-
   mapNumber(value: number, minFrom: number, maxFrom: number, minTo: number, maxTo: number) {
     return minTo + (maxTo - minTo) * ((_.clamp(value, minFrom, maxFrom) - minFrom) / (maxFrom - minFrom));
   }
 
   async ngOnInit() {
-    this.routers = await firstValueFrom(this.api.state())
-    this.displayedColumns = ['name', 'id'].concat(this.routers.map(r => r.name));
+    this.displayedColumns = ['name', 'id'].concat(this.api.routers.map(r => r.name));
   }
 
   value(from: number, to: number) {

web/tsconfig.json

@@ -19,7 +19,7 @@
     "target": "es2020",
     "module": "es2020",
     "lib": [
-      "es2022",
+      "es2021",
       "dom"
     ]
   },