Minor improvements to SPN page

modules/portmaster/src/app/pages/spn/pin-details/pin-details.html

@@ -84,6 +84,25 @@ <h1 class="flex flex-row items-center gap-2 text-base">
           <pre>{{ pin.pin.HopDistance }}</pre>
         </td>
       </tr>
+      <tr>
+        <td class="p-2 font-thin">Exit Connections</td>
+        <td>
+          <div class="flex flex-row items-center gap-2 cursor-pointer" [routerLink]="['/monitor']"
+            [queryParams]="{q: 'exit_node:' + pin.pin.ID}" (click)="dialogRef?.close()">
+            <pre>{{ exitConnectionCount }}</pre>
+            <svg viewBox="0 0 24 24" class="w-4 h-4" sfng-tooltip="Show exit connections in monitor.">
+              <g fill="none" stroke="currentColor">
+                <path shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8.464 8.464c-1.953 1.953-1.953 5.118 0 7.071 1.953 1.953 5.118 1.953 7.071 0 1.953-1.953 1.953-5.119 0-7.071C14.559 7.488 13.28 7 12 7" />
+                <path shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5.636 5.636c-3.515 3.515-3.515 9.213 0 12.728 3.515 3.515 9.213 3.515 12.728 0 3.515-3.515 3.515-9.213 0-12.728-2.627-2.627-6.474-3.289-9.717-1.989M5.64 5.64L12 12" />
+              </g>
+            </svg>
+          </div>
+        </td>
+      </tr>
     </table>
   </sfng-tab>
 

modules/portmaster/src/app/pages/spn/pin-details/pin-details.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges } from '@angular/core';
-import { SfngDialogRef, SFNG_DIALOG_REF } from '@safing/ui';
-import { map, Subscription } from 'rxjs';
+import { Netquery } from '@safing/portmaster-api';
+import { SFNG_DIALOG_REF, SfngDialogRef } from '@safing/ui';
+import { Subscription, forkJoin, map, of, switchMap } from 'rxjs';
 import { LaneModel } from '../pin-list/pin-list';
 import { MapPin, MapService } from './../map.service';
 
@@ -19,8 +20,12 @@ export class PinDetailsComponent implements OnInit, OnChanges, OnDestroy {
   /** Holds all pins this pin has a active connection to */
   connectedPins: LaneModel[] = [];
 
+  /** The number of connections that exit at this pin */
+  exitConnectionCount: number = 0;
+
   constructor(
     private mapService: MapService,
+    private netquery: Netquery,
     private cdr: ChangeDetectorRef,
     @Optional() @Inject(SFNG_DIALOG_REF) public dialogRef?: SfngDialogRef<PinDetailsComponent, never, string>,
   ) { }
@@ -38,13 +43,26 @@ export class PinDetailsComponent implements OnInit, OnChanges, OnDestroy {
       .pipe(
         map(pins => {
           return [pins.find(p => p.pin.ID === this.mapPinID), pins] as [MapPin, MapPin[]];
-        })
+        }),
+        switchMap(([pin, allPins]) => forkJoin({
+          pin: of(pin),
+          allPins: of(allPins),
+          exitConnections: this.netquery.query({
+            select: [
+              { $count: { field: '*', as: 'totalCount', } },
+            ],
+            query: {
+              exit_node: pin.pin.ID,
+            },
+            groupBy: ['exit_node']
+          })
+        }))
       )
-      .subscribe(([pin, allPins]) => {
-        this.pin = pin || null;
+      .subscribe((result) => {
+        this.pin = result.pin || null;
 
         const lm = new Map<string, MapPin>();
-        allPins.forEach(pin => lm.set(pin.pin.ID, pin))
+        result.allPins.forEach(pin => lm.set(pin.pin.ID, pin))
 
         const connectedTo = this.pin?.pin.ConnectedTo || {};
         this.connectedPins = Object.keys(connectedTo)
@@ -56,6 +74,8 @@ export class PinDetailsComponent implements OnInit, OnChanges, OnDestroy {
             }
           });
 
+        this.exitConnectionCount = result.exitConnections[0].totalCount;
+
         this.cdr.markForCheck();
       })
   }

modules/portmaster/src/app/pages/spn/pin-list/pin-list.html

@@ -10,7 +10,7 @@
     <th *ngIf="allowClick"></th>
   </thead>
   <tbody>
-    <tr class="border-l-2 border-transparent cursor-pointer " [ngClass]="{'hover:border-l-yellow-300': allowHover}"
+    <tr class="border-l-2 border-transparent" [ngClass]="{'hover:border-l-yellow-300': allowHover}"
       *ngFor="let pin of pins; trackBy: trackPin" (mouseenter)="pinHover.next(pin.pin.ID)"
       (mouseleave)="pinHover.next(null)">
       <td>
@@ -53,8 +53,8 @@
           </svg>
 
           <!-- Transit Node Icon -->
-          <svg sfng-tooltip="Transit Node" *ngIf="pin.isTransit" xmlns="http://www.w3.org/2000/svg" fill="none"
-            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-blue">
+          <svg sfng-tooltip="Transit Node" *ngIf="pin.isTransit && !pin.isHome" xmlns="http://www.w3.org/2000/svg"
+            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-blue">
             <path stroke-linecap="round" stroke-linejoin="round"
               d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
           </svg>
@@ -74,7 +74,7 @@
       <td>{{ pin.pin.EntityV6?.IP || 'N/A' }}</td>
       <td *ngIf="allowClick">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-          class="w-4 h-4 text-secondary hover:text-primary" (click)="pinClick.next(pin.pin.ID)">
+          class="w-4 h-4 cursor-pointer text-secondary hover:text-primary" (click)="pinClick.next(pin.pin.ID)">
           <path stroke-linecap="round" stroke-linejoin="round"
             d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
         </svg>

modules/portmaster/src/app/pages/spn/pin-overlay/pin-overlay.html

@@ -5,6 +5,7 @@
   <div class="flex flex-row items-center justify-start w-full gap-1">
     <app-menu #pinUseMenu>
       <app-menu-item (click)="openPinDetails()">Show Details</app-menu-item>
+      <app-menu-item (click)="showExitConnections()">Show exit connections</app-menu-item>
       <app-menu-item (click)="copyNodeID()">Copy Node ID</app-menu-item>
     </app-menu>
     <app-menu-trigger class="mr-0 -ml-2" useContent="true" [menu]="pinUseMenu">

modules/portmaster/src/app/pages/spn/pin-overlay/pin-overlay.ts

@@ -1,7 +1,8 @@
-import { animate, AnimationEvent, keyframes, style, transition, trigger } from '@angular/animations';
+import { AnimationEvent, animate, keyframes, style, transition, trigger } from '@angular/animations';
 import { CdkDrag, CdkDragHandle, CdkDragRelease } from '@angular/cdk/drag-drop';
 import { Overlay, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Inject, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { SfngDialogService } from '@safing/ui';
 import { Path } from '../map-renderer';
 import { PinDetailsComponent } from '../pin-details';
@@ -154,6 +155,7 @@ export class PinOverlayComponent implements OnInit {
     @Inject(MapOverlay) public overlay: Overlay,
     private dialog: SfngDialogService,
     private actionIndicator: ActionIndicatorService,
+    private router: Router,
     private cdr: ChangeDetectorRef,
   ) { }
 
@@ -167,6 +169,14 @@ export class PinOverlayComponent implements OnInit {
     this.cdr.markForCheck();
   }
 
+  showExitConnections() {
+    this.router.navigate(['/monitor'], {
+      queryParams: {
+        q: 'exit_node:' + this.mapPin.pin.ID
+      }
+    })
+  }
+
   async copyNodeID() {
     if (!!navigator.clipboard) {
       await navigator.clipboard.writeText(this.mapPin.pin.ID);