fix

web/src/app/app.component.html

-<mat-toolbar color="primary">Menu</mat-toolbar>
-<div id="wrapper">
+<mat-toolbar color='primary'>Menu</mat-toolbar>
+<div id='wrapper' *ngIf='api.routers'>
   <mat-nav-list>
-    <a mat-list-item routerLink="">总览</a>
-    <a mat-list-item [routerLink]="router.id.toString()" *ngFor="let router of routers | async">{{router.name}}</a>
+    <a mat-list-item routerLink=''>总览</a>
+    <a mat-list-item [routerLink]='router.id.toString()' *ngFor='let router of api.routers'>{{router.name}}</a>
   </mat-nav-list>
   <router-outlet></router-outlet>
 </div>
 
 
-
-
 <!--<router-outlet></router-outlet>-->

web/src/app/app.component.ts

-import {Component, OnInit} from '@angular/core';
-import {ApiService} from "./api.service";
-import {firstValueFrom} from "rxjs";
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from './api.service';
 import * as _ from 'lodash';
 
 
@@ -10,27 +9,24 @@ import * as _ from 'lodash';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  routers = firstValueFrom(this.api.status())
 
-  constructor(private api: ApiService) {
+  constructor(public api: ApiService) {
   }
 
   async ngOnInit() {
-    const protos = []
-    const routers = await this.routers;
+    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.link(from.id, id);
+        const link = this.api.connections[from.id][id];
         if (!link) continue;
+        // @ts-ignore
         if (peer.reliability * reverse.reliability <= 0.01) {
-          const proto = link.split(',')[1];
-          protos.push(proto);
-          if (proto === 'wg') {
-            // console.log
-          }
+          protos.push(link.proto);
         }
       }
     }

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

@@ -14,7 +14,7 @@ import {Quality} from "../Quality";
 export class DashboardComponent implements OnInit {
   routers: RouterStatus[] = [];
   displayedColumns: string[] = [];
-  links = this.api.status().pipe(
+  links = this.api.state().pipe(
     map(routers => routers.map(router =>
       ({
         id: router.id,
@@ -83,7 +83,7 @@ export class DashboardComponent implements OnInit {
   }
 
   async ngOnInit() {
-    this.routers = await firstValueFrom(this.api.status())
+    this.routers = await firstValueFrom(this.api.state())
     this.displayedColumns = ['name', 'id'].concat(this.routers.map(r => r.name));
   }
 

web/src/app/router/router.component.ts

@@ -13,7 +13,7 @@ export class RouterComponent {
 
   displayedColumns: string[] = ['id', 'delay', 'loss', 'loss2', 'jitter'];
   dataSource = this.id.pipe(
-    switchMap(id => this.api.status().pipe(
+    switchMap(id => this.api.state().pipe(
       map(routers =>
         Object.entries(routers.find(r => r.id == id)!.peers).map(([id1, peer]) => {
           const peerId = parseInt(id1);