combine

.gitignore

-/.idea/
-/node_modules/
+/.idea/

Dockerfile

-FROM node:16.3.0-alpine3.13
-
+FROM node:16.3.0-alpine3.13 AS web
 WORKDIR /app
+COPY web/package*.json ./
+RUN npm ci
+COPY web .
+RUN npm run build
 
-COPY package*.json ./
+FROM node:16.3.0-alpine3.13
+WORKDIR /app
+COPY server/package*.json ./
 RUN npm ci
-COPY . .
+COPY server .
+COPY --from=web dist/railgun-dashboard public
 
 CMD [ "./node_modules/.bin/ts-node", "src/main.ts"]

config/routers.json

-[
-  {"id":1, "name":"yangtze", "address":"10.198.0.1", "location":"CN-SHA", "inbound_cost":0, "outbound_cost":1},
-  {"id":3, "name":"south", "address":"10.198.0.3", "location":"CN-SHA", "inbound_cost":0, "outbound_cost":1},
-  {"id":4, "name":"ayane", "address":"10.198.0.4", "location":"CN-SZX", "inbound_cost":0, "outbound_cost":1},
-  {"id":5, "name":"satori", "address":"10.198.0.5", "location":"CN-YTY", "inbound_cost":0, "outbound_cost":1},
-  {"id":6, "name":"koishi", "address":"10.198.0.6", "location":"CN-JIU", "inbound_cost":0, "outbound_cost":1},
-  {"id":7, "name":"fractal", "address":"10.198.0.7", "location":"CN-SZX", "inbound_cost":0, "outbound_cost":1},
-  {"id":8, "name":"nanahira", "address":"10.198.0.22", "location":"US-SJC", "inbound_cost":0, "outbound_cost":1},
-  {"id":9, "name":"marcia", "address":"10.198.0.9", "location":"CN-SZX", "inbound_cost":0, "outbound_cost":1},
-  {"id":10, "name":"anillc", "address":"10.198.0.10", "location":"CN-SHA", "inbound_cost":0, "outbound_cost":1},
-  {"id":11, "name":"crest", "address":"10.198.0.15", "location":"US-LAX", "inbound_cost":0, "outbound_cost":1},
-  {"id":12, "name":"hk-hkg-alql2", "address":"10.198.0.12", "location":"HK-HKG", "inbound_cost":0, "outbound_cost":1},
-  {"id":13, "name":"hk-hkg-alql3", "address":"10.198.0.20", "location":"HK-HKG", "inbound_cost":0, "outbound_cost":1},
-  {"id":14, "name":"frog", "address":"10.198.0.8", "location":"CN-SHA", "inbound_cost":0, "outbound_cost":1},
-  {"id":15, "name":"ailizijiang", "address":"10.198.0.41", "location":"JP-NRT", "inbound_cost":0, "outbound_cost":1},
-  {"id":16, "name":"kano", "address":"10.198.0.14", "location":"KR-SEL", "inbound_cost":0, "outbound_cost":1},
-  {"id":17, "name":"ge-muc-uma", "address":"10.198.0.18", "location":"GE-MUC", "inbound_cost":0, "outbound_cost":1},
-  {"id":18, "name":"sakuya", "address":"10.198.0.16", "location":"TW-TPE", "inbound_cost":0, "outbound_cost":1},
-  {"id":19, "name":"monika", "address":"10.198.0.21", "location":"US-SEA", "inbound_cost":0, "outbound_cost":1},
-  {"id":24, "name":"palm", "address":"10.198.0.3","location:":"CN-ZB", "inbound_cost":0, "outbound_cost":1},
-  {"id":25, "name":"pekunicom", "address":"10.198.0.40", "location":"CN-PEK", "inbound_cost":0, "outbound_cost":1},
-  {"id":26, "name":"jue", "address":"10.198.0.32", "location":"JP-JPN", "inbound_cost":0, "outbound_cost":1},
-  {"id":28, "name":"bluebird", "address":"10.198.0.36", "location":"CN-PEK", "inbound_cost":0, "outbound_cost":1},
-  {"id":29, "name":"chikaanna", "address":"10.198.0.35", "location":"CN-SZX", "inbound_cost":0, "outbound_cost":1},
-  {"id":30, "name":"cain", "address":"10.198.0.17", "location":"CN-SHE", "inbound_cost":0, "outbound_cost":1},
-  {"id":32, "name":"hime", "address":"10.198.0.25", "location":"CN-SZX", "inbound_cost":0, "outbound_cost":1},
-  {"id":33, "name":"shirayuki", "address":"10.198.0.28", "location":"CN-SHA", "inbound_cost":0, "outbound_cost":1},
-  {"id":35, "name":"whitelight", "address":"10.198.0.42", "location":"CN-CAN", "inbound_cost":0, "outbound_cost":1},
-  {"id":37, "name":"nekoyuki", "address":"10.198.0.37", "location":"SG-SIN", "inbound_cost":0, "outbound_cost":1},
-  {"id":38, "name":"rossa", "address":"10.198.0.38", "location":"CN-CAN", "inbound_cost":0, "outbound_cost":1},
-  {"id":39, "name":"tsan", "address":"10.198.0.39", "location":"CN-CAN", "inbound_cost":0, "outbound_cost":1},
-  {"id":40, "name":"budingocg", "address":"10.198.0.13", "location":"CN-CAN", "inbound_cost":0, "outbound_cost":1},
-  {"id":41, "name":"hlsj-vpn-3", "address":"10.198.0.53", "location":"CN-SZX", "inbound_cost":0, "outbound_cost":1},
-  {"id":42, "name":"kino-enter", "address":"10.198.0.23", "location":"CN-CAN", "inbound_cost":0, "outbound_cost":1},
-  {"id":44, "name":"tx-sha-xs", "address":"10.198.0.44", "location":"CN-SHA", "inbound_cost":0, "outbound_cost":1},
-  {"id":45, "name":"tx-sha-hd", "address":"10.198.0.45", "location":"CN-SHA", "inbound_cost":0, "outbound_cost":1},
-  {"id":46, "name":"tx-pek-wl", "address":"10.198.0.46", "location":"CN-PEK", "inbound_cost":0, "outbound_cost":1},
-  {"id":47, "name":"tx-can-hr", "address":"10.198.0.47", "location":"CN-CAN", "inbound_cost":0, "outbound_cost":1},
-  {"id":48, "name":"tx-can-qiao", "address":"10.198.0.48", "location":"CN-CAN", "inbound_cost":0, "outbound_cost":1},
-  {"id":49, "name":"tx-sha-saku", "address":"10.198.0.49", "location":"CN-SHA", "inbound_cost":0, "outbound_cost":1},
-  {"id":63, "name":"kr-chu-cain1", "address":"10.198.0.26", "location":"KR-CHU", "inbound_cost":0, "outbound_cost":1},
-  {"id":64, "name":"kr-chu-cain2", "address":"10.198.0.27", "location":"KR-CHU", "inbound_cost":0, "outbound_cost":1},
-  {"id":65, "name":"kr-chu-caina", "address":"10.198.0.29", "location":"KR-CHU", "inbound_cost":0, "outbound_cost":1},
-  {"id":100, "name":"mini", "address":"10.198.0.100", "location":"CN-SHA", "inbound_cost":0, "outbound_cost":1},
-  {"id":101, "name":"genz", "address":"10.198.0.101", "location":"HK-HKG", "inbound_cost":0, "outbound_cost":1}
-]

server/.gitignore

+/node_modules/
+/import/

package.json → server/package.json

@@ -6,9 +6,11 @@
     "start": "ts-node src/main.ts"
   },
   "dependencies": {
+    "express": "^4.18.1",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
+    "@types/express": "^4.17.13",
     "@types/lodash": "^4.14.172",
     "@types/node": "^16.6.1",
     "ts-node": "^10.2.0",

server/src/Api.ts

+import express from 'express';
+import { Router } from './Router';
+
+export const api = express.Router();
+
+api.get('/', function(req, res, next) {
+  const result = Router.all.map(from => ({
+    id: from.id,
+    peers: from.peers,
+    via: Object.fromEntries([...from.via.entries()].map(([to, via]) => [to.id, via.id]))
+  }));
+
+  res.json(result);
+});

src/Router.ts → server/src/Router.ts

 import { RemoteInfo, Socket } from 'dgram';
 import { DownloadMessage, PeerQuality, UploadMessage } from '../protocol';
-import routers from '../config/routers.json';
-import plans from '../config/plans.json';
+import routers from '../import/data/Router.json';
+// import plans from '../config/plans.json';
 import assert from 'assert';
 import { Quality } from './Quality';
 import _ from 'lodash';
 import config from '../config/config.json';
 
+import _connections from '../import/connections.json';
+
+const connections: Record<number, Record<number, { metric: number, protocol: string }>> = _connections;
+
 export class Router {
   static updating?: Router;
   static updating_timer: any;
   static timeout_timer: any;
 
-  static all: Router[] = routers.map(s => new Router(s));
+  static all: Router[] = routers.map(s => new Router(s.id));
 
   // config
-  id!: number;
-  name!: string;
-  address!: string;
-  location!: string;
-  inbound_cost!: number;
-  outbound_cost!: number;
+  // id!: number;
 
   seq = 0;
   peers: Record<number, PeerQuality> = {};
   via: Map<Router, Router> = new Map();
-  plan: Record<number, number> = {};
+  // plan: Record<number, number> = {};
 
   rinfo?: RemoteInfo;
 
-  constructor(config: Partial<Router>) {
-    Object.assign(this, config);
+  constructor(public id: number) {
+    // Object.assign(this, config);
   }
 
   reset() {
@@ -39,9 +38,9 @@ export class Router {
     for (const router of Router.all.filter(r => r.id !== this.id)) {
       this.via.set(router, router);
     }
-    for (const plan of plans.filter(plan => !plan.routers.includes(this.id))) {
-      this.plan[plan.id] = this.id;
-    }
+    // for (const plan of plans.filter(plan => !plan.routers.includes(this.id))) {
+    //   this.plan[plan.id] = this.id;
+    // }
   }
 
   lost() {
@@ -64,7 +63,7 @@ export class Router {
     while (true) {
       const quality = next.peers[current.id];
       if (!quality || quality.reliability <= 0) return Quality.unreachable; // 不通
-      result.concat(quality.delay, quality.jitter, quality.reliability, current.outbound_cost + next.inbound_cost);
+      result.concat(quality.delay, quality.jitter, quality.reliability, connections[current.id][next.id].metric);
       if (next === to) return result; // 到达
 
       // 寻找下一跳
@@ -82,9 +81,7 @@ export class Router {
 
   onMessage(hello: UploadMessage) {
     if (hello.ack === 0) this.reset();
-
     if (hello.peers) this.peers = hello.peers;
-
     if (Router.updating === this && hello.ack === this.seq + 1) {
       clearInterval(Router.updating_timer);
       clearTimeout(Router.timeout_timer);
@@ -118,19 +115,19 @@ export class Router {
     // 计算 route plan
     // 凡是自己可以作为那个 plan 出口的，是不会计算直接跳过的，所以这里有 plan 到自己的意思是，没有找到任何一个通的可以出的地方，所以只好从自己出了
     const changedPlan: Record<number, number> = {};
-    for (const plan of plans.filter(plan => !plan.routers.includes(this.id))) {
-      const currentPlan = this.plan[plan.id];
-      const currentMetric = currentPlan === this.id ? Infinity : metric[currentPlan];
-      const items = plan.routers.map(to => [to, metric[to]]);
-      const [bestPlan, bestMetric] = _.minBy(items, ([t, m]) => m)!;
-
-      if (currentPlan !== this.id && bestMetric === Infinity) {
-        // 原来通的，现在不通了
-        this.plan[plan.id] = changedPlan[plan.id] = this.id;
-      } else if (currentPlan !== bestPlan && bestMetric + config.throttle < currentMetric) {
-        this.plan[plan.id] = changedPlan[plan.id] = bestPlan;
-      }
-    }
+    // for (const plan of plans.filter(plan => !plan.routers.includes(this.id))) {
+    //   const currentPlan = this.plan[plan.id];
+    //   const currentMetric = currentPlan === this.id ? Infinity : metric[currentPlan];
+    //   const items = plan.routers.map(to => [to, metric[to]]);
+    //   const [bestPlan, bestMetric] = _.minBy(items, ([t, m]) => m)!;
+    //
+    //   if (currentPlan !== this.id && bestMetric === Infinity) {
+    //     // 原来通的，现在不通了
+    //     this.plan[plan.id] = changedPlan[plan.id] = this.id;
+    //   } else if (currentPlan !== bestPlan && bestMetric + config.throttle < currentMetric) {
+    //     this.plan[plan.id] = changedPlan[plan.id] = bestPlan;
+    //   }
+    // }
 
     if (!_.isEmpty(changedVia) || !_.isEmpty(changedPlan)) {
       Router.updating = this;

src/main.ts → server/src/main.ts

 import dgram from 'dgram';
-import http from 'http';
-
 import { UploadMessage } from '../protocol';
 import assert from 'assert';
 import { Router } from './Router';
 import config from '../config/config.json';
+import { api } from './Api';
+import express from 'express';
+import path from 'path';
+
 
+// http
+const app = express();
+app.use(express.static(path.join(__dirname, 'public')));
+app.use('/', api);
+
+// udp routing protocol
 const socket = dgram
   .createSocket('udp4')
   .on('listening', () => {
@@ -29,27 +37,6 @@ const socket = dgram
   });
 socket.bind(config.port);
 
-//web management api
-http
-  .createServer(function(req, res) {
-    res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
-    const result = Router.all.map(from => ({
-      id: from.id,
-      name: from.name,
-      address: from.address,
-      location: from.location,
-      peers: from.peers,
-      via: Object.fromEntries([...from.via.entries()].map(([to, via]) => [to.id, via.id]))
-    }));
-    // const result: Record<number, Record<number, number>> = Object.fromEntries(Router.all.map(from => [from.id, ]));
-    return res.end(JSON.stringify(result));
-  })
-  .on('listening', () => {
-    const address = socket.address();
-    console.log(`http listening ${address.address}:${address.port}`);
-  })
-  .listen(config.port);
-
 setInterval(() => {
   for (const from of Router.all) {
     if (Router.updating) return;

web/.browserslistrc

+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

web/.editorconfig

+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

web/.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

web/.vscode/extensions.json

+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

web/.vscode/launch.json

+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

web/.vscode/tasks.json

+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

web/README.md

+# RailgunDashboard
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.3.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

web/angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "railgun-dashboard": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/railgun-dashboard",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "railgun-dashboard:build:production"
+            },
+            "development": {
+              "browserTarget": "railgun-dashboard:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "railgun-dashboard:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "290a382f-00ee-4f44-8a2c-21d811baedb5"
+  }
+}

web/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/railgun-dashboard'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

web/package.json

+{
+  "name": "railgun-dashboard",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^14.1.0",
+    "@angular/cdk": "^14.1.2",
+    "@angular/common": "^14.1.0",
+    "@angular/compiler": "^14.1.0",
+    "@angular/core": "^14.1.0",
+    "@angular/forms": "^14.1.0",
+    "@angular/material": "^14.1.2",
+    "@angular/platform-browser": "^14.1.0",
+    "@angular/platform-browser-dynamic": "^14.1.0",
+    "@angular/router": "^14.1.0",
+    "@types/lodash-es": "^4.17.6",
+    "country-code-emoji": "^2.3.0",
+    "lodash-es": "^4.17.21",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.1.3",
+    "@angular/cli": "~14.1.3",
+    "@angular/compiler-cli": "^14.1.0",
+    "@types/jasmine": "~4.0.0",
+    "jasmine-core": "~4.2.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.7.2"
+  }
+}

web/src/app/Quality.ts

+import {PeerQuality} from "./api.service";
+
+export class Quality {
+  static unreachable = new Quality(0, 0, 0, 0);
+
+  constructor(public delay = 0, public jitter = 0, public reliability = 1, public cost = 0, public hop = 0) {
+  }
+
+  concat(delay: number, jitter: number, reliability: number, cost: number, hop: number): Quality {
+    this.delay += delay;
+    this.jitter += jitter;
+    this.reliability *= reliability;
+    this.cost += cost;
+    this.hop += hop;
+    return this;
+  }
+
+  concatPeer(quality?: PeerQuality): Quality {
+    if (!quality) return Quality.unreachable
+    return this.concat(quality.delay, quality.jitter, quality.reliability, 0, 1);
+  }
+
+  concatQuality(quality: Quality): Quality {
+    return this.concat(quality.delay, quality.jitter, quality.reliability, quality.cost, quality.hop);
+  }
+
+  // 若 reliability = 0，metric 应为 +∞
+  // 对于两条路线，同时连接任何一个相同的(reliability > 0的)线路，大小关系不变
+  metric() {
+    // assert(this.jitter >= 0);
+    // assert(0 <= this.reliability && this.reliability <= 1);
+    // assert(this.cost >= 0);
+    if (this.reliability === 0) {
+      return Infinity;
+    } else {
+      // 公式
+      return this.delay + (1 - this.reliability) * 1000 + this.cost * 0.1;
+    }
+  }
+}

web/src/app/api.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  let service: ApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {DashboardComponent} from "./dashboard/dashboard.component";
+import {RouterComponent} from "./router/router.component";
+
+const routes: Routes = [
+  {path: '', component: DashboardComponent},
+  {path: ':id', component: RouterComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {
+}

web/src/app/app.component.html

+<mat-toolbar color="primary">Menu</mat-toolbar>
+<div id="wrapper">
+  <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>
+  </mat-nav-list>
+  <router-outlet></router-outlet>
+</div>
+
+
+
+
+<!--<router-outlet></router-outlet>-->

web/src/app/app.component.scss

+:host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+mat-toolbar {
+  flex-shrink: 0;
+}
+
+#wrapper {
+  display: flex;
+  overflow: hidden;
+
+  > mat-nav-list {
+    width: 300px;
+    flex-shrink: 0;
+    overflow-y: auto;
+  }
+}

web/src/app/app.component.spec.ts

+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'railgun-dashboard'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('railgun-dashboard');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('railgun-dashboard app is running!');
+  });
+});

web/src/app/app.component.ts

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

web/src/app/app.module.ts

+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatTableModule} from "@angular/material/table";
+import {NavComponent} from './nav/nav.component';
+import {LayoutModule} from '@angular/cdk/layout';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatIconModule} from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
+import {DashboardComponent} from './dashboard/dashboard.component';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatCardModule} from '@angular/material/card';
+import {MatMenuModule} from '@angular/material/menu';
+import {RouterComponent} from "./router/router.component";
+import {HttpClientModule} from "@angular/common/http";
+import { TestComponent } from './test/test.component';
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import {FormsModule} from "@angular/forms";
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    NavComponent,
+    DashboardComponent,
+    RouterComponent,
+    TestComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatTableModule,
+    LayoutModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatListModule,
+    MatGridListModule,
+    MatCardModule,
+    MatMenuModule,
+    HttpClientModule,
+    MatSlideToggleModule,
+    FormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}

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

+<h1 class="mat-h1">Dashboard</h1>
+
+<mat-card class="mat-elevation-z8">
+  <mat-card-header>
+    <mat-card-title>
+      <span>直接相邻链路</span>
+      <mat-slide-toggle [(ngModel)]="routed">路由后</mat-slide-toggle>
+      <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu" xPosition="before">
+        <button mat-menu-item>Expand</button>
+        <button mat-menu-item>Remove</button>
+      </mat-menu>
+    </mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <table mat-table [dataSource]="links" *ngIf="routers" fixedLayout [trackBy]="trackById">
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>name</th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+      </ng-container>
+      <ng-container matColumnDef="id">
+        <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 [matColumnDef]="router.name">
+          <th mat-header-cell *matHeaderCellDef><span class="id">{{router.id}}</span><span
+            class="head">{{router.name}}</span></th>
+          <td mat-cell *matCellDef="let element"
+              [style.color]="element.peers[router.id]?.color"
+              [style.text-decoration]="element.peers[router.id]?.decoration"
+          > {{element.peers[router.id]?.delay}} </td>
+        </ng-container>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>
+
+<!--<h2>直接相邻链路</h2>-->
+<!--<mat-card class="mat-elevation-z8">-->
+<!--  <table mat-table [dataSource]="links" *ngIf="routers" fixedLayout [trackBy]="trackById">-->
+<!--    <ng-container matColumnDef="name">-->
+<!--      <th mat-header-cell *matHeaderCellDef></th>-->
+<!--      <td mat-cell *matCellDef="let element"> {{element.name}} </td>-->
+<!--    </ng-container>-->
+<!--    <ng-container *ngFor="let router of routers">-->
+<!--      <ng-container [matColumnDef]="router.name">-->
+<!--        <th mat-header-cell *matHeaderCellDef><span class="head">{{router.name}}</span></th>-->
+<!--        <td mat-cell *matCellDef="let element"-->
+<!--            [style.color]="element.peers[router.id]?.color"> {{element.peers[router.id]?.delay}} </td>-->
+<!--      </ng-container>-->
+<!--    </ng-container>-->
+<!--    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>-->
+<!--    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>-->
+<!--  </table>-->
+<!--</mat-card>-->

web/src/app/dashboard/dashboard.component.scss

+:host {
+  flex: 1;
+  overflow: auto;
+  padding: 20px;
+}
+
+mat-card {
+  width: 100%;
+  //max-height: 400px;
+  overflow: auto;
+  box-sizing: border-box;
+  background: initial;
+
+  .more-button {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+  }
+
+  table {
+    text-align: right;
+    border-spacing: 0;
+    border-collapse: collapse;
+    background: initial;
+    overflow: hidden;
+    z-index: 1;
+    min-width: 100%;
+    white-space: nowrap;
+
+    ::ng-deep thead {
+      height: 80px;
+      vertical-align: bottom;
+    }
+
+    tr {
+      height: 24px;
+
+      &:hover {
+        background: whitesmoke;
+      }
+
+      th, td {
+        padding: 0 8px;
+        position: relative;
+        width: 8px;
+      }
+    }
+
+    td:hover::after, th:hover::after {
+      background-color: whitesmoke;
+      content: '\00a0';
+      height: 10000px;
+      left: 0;
+      position: absolute;
+      top: -5000px;
+      width: 100%;
+      z-index: -1;
+      border-left: 1px solid rgba(0, 0, 0, .12);
+      border-right: 1px solid rgba(0, 0, 0, .12);
+    }
+  }
+}
+
+.id {
+  transform: translateX(10px);
+  display: inline-block;
+}
+
+.head {
+  display: inline-block;
+  text-align: left;
+  transform: rotate(-60deg);
+  transform-origin: left top;
+  width: 8px;
+  padding-left: 4px;
+}
+
+.oc {
+  text-decoration: underline blue;
+}
+
+.wg {
+  text-decoration: underline red;
+}
+
+.tun {
+  text-decoration: underline green;
+}

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

+import { LayoutModule } from '@angular/cdk/layout';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DashboardComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatCardModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

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";
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss'],
+  // changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DashboardComponent implements OnInit {
+  routers: RouterStatus[] = [];
+  displayedColumns: string[] = [];
+  links = this.api.status().pipe(
+    map(routers => routers.map(router =>
+      ({
+        id: router.id,
+        name: router.name,
+        peers: _.mapValues(router.peers, (quality, id1) => this.displayQuality(routers, router, parseInt(id1)))
+      })
+    ))
+  );
+  routed = false;
+
+  constructor(private api: ApiService) {
+  }
+
+  displayQuality(routers: RouterStatus[], from: RouterStatus, toId: number) {
+    const to = routers.find(r => r.id === toId);
+    if (!to) return;
+
+    const quality = new Quality();
+
+    if (this.routed) {
+      quality
+        .concatQuality(this.calculate(routers, from, to))
+        .concatQuality(this.calculate(routers, to, from));
+
+      return {
+        delay: quality.reliability <= 0.01 ? 'x' : quality.delay,
+        color: `hsl(${this.mapNumber(quality.reliability, 0.9, 1, 0, 120)}, 100%, 40%)`,
+        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);
+      if (!link) return;
+      if (!to.peers[from.id]) return;
+
+      quality
+        .concatPeer(from.peers[toId])
+        .concatPeer(to.peers[from.id]);
+
+      const decorations: Record<string, string> = {
+        oc: 'underline blue',
+        wg: 'underline red',
+        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]]
+      };
+    }
+  }
+
+  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.status())
+    this.displayedColumns = ['name', 'id'].concat(this.routers.map(r => r.name));
+  }
+
+  value(from: number, to: number) {
+    //
+    // element.peers[id]?.delay
+  }
+
+  trackById(index: number, item: any) {
+    return index;
+  }
+
+  /** Based on the screen size, switch from standard to one column per row */
+
+  private calculate(routers: RouterStatus[], from: RouterStatus, to: RouterStatus): Quality {
+    const result = new Quality();
+
+    let current = from;
+    while (current !== to) {
+      const next = routers.find(r => r.id == current.via[to.id])!;
+      result.concatPeer(next.peers[current.id]);
+      current = next;
+    }
+
+    return result;
+  }
+}

web/src/app/nav/nav.component.scss

+.sidenav-container {
+  height: 100%;
+}
+
+.sidenav {
+  width: 200px;
+}
+
+.sidenav .mat-toolbar {
+  background: inherit;
+}
+
+.mat-toolbar.mat-primary {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}

web/src/app/nav/nav.component.spec.ts

+import { LayoutModule } from '@angular/cdk/layout';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import { NavComponent } from './nav.component';
+
+describe('NavComponent', () => {
+  let component: NavComponent;
+  let fixture: ComponentFixture<NavComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [NavComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/nav/nav.component.ts

+import { Component } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.scss']
+})
+export class NavComponent {
+
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+    .pipe(
+      map(result => result.matches),
+      shareReplay()
+    );
+
+  constructor(private breakpointObserver: BreakpointObserver) {}
+
+}

web/src/app/router/router.component.html

+<h1 class="mat-h1">Dashboard</h1>
+
+<h2>{{id|async}} 的直接相邻链路</h2>
+<mat-card class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" fixedLayout>
+
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>#</th>
+      <td mat-cell *matCellDef="let element"> {{element?.id}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="delay">
+      <th mat-header-cell *matHeaderCellDef>延迟 (RTT)</th>
+      <td mat-cell *matCellDef="let element"> {{element?.delay}} ms</td>
+    </ng-container>
+
+    <ng-container matColumnDef="loss">
+      <th mat-header-cell *matHeaderCellDef>丢包 (#>{{id|async}})</th>
+      <td mat-cell *matCellDef="let element"> {{element?.loss | percent:'1.0-2'}} </td>
+    </ng-container>
+    <ng-container matColumnDef="loss2">
+      <th mat-header-cell *matHeaderCellDef>丢包 ({{id|async}}>#)</th>
+      <td mat-cell *matCellDef="let element"> {{element?.loss2 | percent:'1.0-2'}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="jitter">
+      <th mat-header-cell *matHeaderCellDef>抖动</th>
+      <td mat-cell *matCellDef="let element"> {{element?.jitter}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</mat-card>

web/src/app/router/router.component.scss

+:host {
+  flex: 1;
+  overflow: auto;
+  padding: 20px;
+}
+
+mat-card {
+  width: 100%;
+  //max-height: 400px;
+  overflow: auto;
+
+  box-sizing: border-box;
+
+
+  table {
+    //text-align: right;
+    border-spacing: 0;
+    border-collapse: collapse;
+    background: initial;
+    overflow: hidden;
+    z-index: 1;
+    min-width: 100%;
+
+
+
+    tr {
+      height: 32px;
+
+      &:hover {
+        background: whitesmoke;
+      }
+
+      th, td {
+        padding: 0 8px;
+        position: relative;
+        text-align: right;
+      }
+
+      th:first-child, td:first-child{
+        width: 24px;
+      }
+    }
+
+    td:hover::after {
+      background-color: whitesmoke;
+      content: '\00a0';
+      height: 10000px;
+      left: 0;
+      position: absolute;
+      top: -5000px;
+      width: 100%;
+      z-index: -1;
+    }
+  }
+}

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

+import { LayoutModule } from '@angular/cdk/layout';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { RouterComponent } from './router.component';
+
+describe('DashboardComponent', () => {
+  let component: RouterComponent;
+  let fixture: ComponentFixture<RouterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [RouterComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatCardModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import {Component} from '@angular/core';
+import {map, switchMap} from 'rxjs/operators';
+import {ApiService, PeerQuality} from "../api.service";
+import {ActivatedRoute} from "@angular/router";
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './router.component.html',
+  styleUrls: ['./router.component.scss']
+})
+export class RouterComponent {
+  id = this.route.params.pipe(map(params => <number>params['id']));
+
+  displayedColumns: string[] = ['id', 'delay', 'loss', 'loss2', 'jitter'];
+  dataSource = this.id.pipe(
+    switchMap(id => this.api.status().pipe(
+      map(routers =>
+        Object.entries(routers.find(r => r.id == id)!.peers).map(([id1, peer]) => {
+          const peerId = parseInt(id1);
+          const reverse = routers.find(r => r.id === peerId)?.peers?.[id];
+          if (!reverse) return undefined;
+          return this.displayQuality(peerId, peer, reverse)
+        })
+      ))));
+
+  /** Based on the screen size, switch from standard to one column per row */
+
+
+  constructor(private api: ApiService, private route: ActivatedRoute) {
+  }
+
+  displayQuality(id: number, inbound: PeerQuality, outbound: PeerQuality) {
+    return {
+      id,
+      delay: inbound.delay + outbound.delay,
+      loss: 1 - inbound.reliability,
+      loss2: 1 - outbound.reliability,
+      jitter: inbound.jitter + outbound.jitter
+    };
+  }
+
+}

web/src/app/test/test.component.html

+<div class="grid-container">
+  <h1 class="mat-h1">Dashboard</h1>
+  <mat-grid-list cols="2" rowHeight="350px">
+    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
+      <mat-card class="dashboard-card">
+        <mat-card-header>
+          <mat-card-title>
+            {{card.title}}
+            <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #menu="matMenu" xPosition="before">
+              <button mat-menu-item>Expand</button>
+              <button mat-menu-item>Remove</button>
+            </mat-menu>
+          </mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="dashboard-card-content">
+          <div>Card Content Here</div>
+        </mat-card-content>
+      </mat-card>
+    </mat-grid-tile>
+  </mat-grid-list>
+</div>

web/src/app/test/test.component.scss

+.grid-container {
+  margin: 20px;
+}
+
+.dashboard-card {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  right: 15px;
+  bottom: 15px;
+}
+
+.more-button {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+}
+
+.dashboard-card-content {
+  text-align: center;
+}

web/src/app/test/test.component.spec.ts

+import { LayoutModule } from '@angular/cdk/layout';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatCardModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/test/test.component.ts

+import { Component } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './test.component.html',
+  styleUrls: ['./test.component.scss']
+})
+export class TestComponent {
+  /** Based on the screen size, switch from standard to one column per row */
+  cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
+    map(({ matches }) => {
+      if (matches) {
+        return [
+          { title: 'Card 1', cols: 1, rows: 1 },
+          { title: 'Card 2', cols: 1, rows: 1 },
+          { title: 'Card 3', cols: 1, rows: 1 },
+          { title: 'Card 4', cols: 1, rows: 1 }
+        ];
+      }
+
+      return [
+        { title: 'Card 1', cols: 2, rows: 1 },
+        { title: 'Card 2', cols: 1, rows: 1 },
+        { title: 'Card 3', cols: 1, rows: 2 },
+        { title: 'Card 4', cols: 1, rows: 1 }
+      ];
+    })
+  );
+
+  constructor(private breakpointObserver: BreakpointObserver) {}
+}

web/src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

web/src/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

web/src/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>RailgunDashboard</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="mat-typography">
+  <app-root></app-root>
+</body>
+</html>

web/src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

web/src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

web/src/styles.scss

+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

web/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

web/tsconfig.app.json

+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

web/tsconfig.json

+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2020",
+    "module": "es2020",
+    "lib": [
+      "es2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

web/tsconfig.spec.json

+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}