Hide offline hubs from map

safing · Sep 5, 2023 · 828e33c · 828e33c
1 parent 2c57ca0
commit 828e33c
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 15 deletions.
diff --git a/modules/portmaster/src/app/pages/spn/country-details/country-details.html b/modules/portmaster/src/app/pages/spn/country-details/country-details.html
@@ -25,9 +25,9 @@ <h1 class="flex flex-row items-center gap-2" cdkDragHandle cdkDrag cdkDragRootEl
           <th>
             <span class="text-primary">Total Nodes</span>
           </th>
-          <td>{{ pins.length }}</td>
+          <td>{{ totalAliveCount }}</td>
         </tr>
-        <tr *ngIf="!!pins.length">
+        <tr *ngIf="totalAliveCount">
           <th>
             <span class="inline-block pl-4">
               <spn-node-icon bySafing="true" isActive="true"></spn-node-icon>
@@ -36,7 +36,7 @@ <h1 class="flex flex-row items-center gap-2" cdkDragHandle cdkDrag cdkDragRootEl
           </th>
           <td>{{ safingNodeCount }}</td>
         </tr>
-        <tr *ngIf="!!pins.length">
+        <tr *ngIf="totalAliveCount">
           <th>
             <span class="inline-block pl-4">
               <spn-node-icon bySafing="false" isActive="true"></spn-node-icon>

diff --git a/modules/portmaster/src/app/pages/spn/country-details/country-details.ts b/modules/portmaster/src/app/pages/spn/country-details/country-details.ts
@@ -43,6 +43,9 @@ export class CountryDetailsComponent implements OnInit, OnChanges, OnDestroy {
   /** @private - A {@link TrackByFunction} for all profiles that use this country for exit */
   trackProfile: TrackByFunction<this['profiles'][0]> = (_: number, profile: this['profiles'][0]) => `${profile.profile.Source}/${profile.profile.ID}`;
 
+  /** The number of alive nodes in this country */
+  totalAliveCount = 0;
+
   /** The number of exit nodes in this country */
   exitNodeCount = 0;
 
@@ -161,6 +164,10 @@ export class CountryDetailsComponent implements OnInit, OnChanges, OnDestroy {
           this.communityExitNodeCount = 0;
 
           this.pins.forEach(pin => {
+            if (pin.isOffline) {
+              return
+            }
+            this.totalAliveCount++;
 
             if (pin.pin.VerifiedOwner === 'Safing') {
               this.safingNodeCount++;

diff --git a/modules/portmaster/src/app/pages/spn/country-overlay/country-overlay.ts b/modules/portmaster/src/app/pages/spn/country-overlay/country-overlay.ts
@@ -53,6 +53,9 @@ export class CountryOverlayComponent implements OnInit, OnChanges, OnDestroy {
         this.communityNodes = [];
 
         pinsInCountry.forEach(pin => {
+          if (pin.isOffline) {
+            return
+          }
           if (pin.pin.VerifiedOwner === 'Safing') {
             this.safingNodes.push(pin)
           } else {

diff --git a/modules/portmaster/src/app/pages/spn/map-renderer/map-renderer.ts b/modules/portmaster/src/app/pages/spn/map-renderer/map-renderer.ts
@@ -184,6 +184,7 @@ export class MapRendererComponent implements AfterViewInit, OnDestroy {
   }
 
   private async renderPins(pins: MapPin[]) {
+    pins = pins.filter(pin => !pin.isOffline && !pin.isActive);
     console.log(`[MAP] Rendering ${pins.length} pins`)
 
     const countriesWithNodes = new Set<string>();
@@ -204,7 +205,7 @@ export class MapRendererComponent implements AfterViewInit, OnDestroy {
       .append(d => {
         const val = MapRendererComponent.MarkerSize / this.zoomScale;
 
-        if (d.pin.HopDistance === 1) {
+        if (d.isHome) {
           const homeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
           homeIcon.setAttribute('r', `${val * 1.25}`)
 
@@ -234,6 +235,13 @@ export class MapRendererComponent implements AfterViewInit, OnDestroy {
 
         return 1 / this.zoomScale
       })
+      .attr("fill", d => {
+        if (d.hasIssues) {
+          return "none"
+        }
+
+        return ""
+      })
       .call(selection => {
         selection
           .style('opacity', 0)
@@ -269,7 +277,7 @@ export class MapRendererComponent implements AfterViewInit, OnDestroy {
     // update all pins to their correct position and update their attributes
     this.pinsGroup.selectAll<SVGGElement, MapPin>('g')
       .attr('hub-id', d => d.pin.ID)
-      .attr('is-home', d => d.pin.HopDistance === 1)
+      .attr('is-home', d => d.isHome)
       .attr('transform', d => `translate(${this.projection([d.location.Longitude, d.location.Latitude])})`)
       .attr('in-use', d => d.isTransit)
       .attr('is-exit', d => d.isExit)

diff --git a/modules/portmaster/src/app/pages/spn/map.service.ts b/modules/portmaster/src/app/pages/spn/map.service.ts
@@ -13,17 +13,23 @@ export interface MapPin {
   // this pin.
   entity: IntelEntity;
 
-  // whether or not the pin is currently used as an exit node
-  isExit: boolean;
+  // whether the pin is regarded as offline / not available.
+  isOffline: boolean;
+
+  // whether or not the pin is used as the entry-node.
+  isHome: boolean;
 
   // whether or not the pin is used as a transit node
   isTransit: boolean;
 
+  // whether or not the pin is currently used as an exit node
+  isExit: boolean;
+
   // whether or not the pin is currently active.
   isActive: boolean;
 
-  // whether or not the pin is used as the entry-node.
-  isHome: boolean;
+  // whether the pin has any known issues
+  hasIssues: boolean;
 
   // FIXME: remove me
   collapsed?: boolean;
@@ -116,23 +122,37 @@ export class MapService {
           }));
 
           pins.forEach(pin => {
+            // Save Pin ID as seen.
+            seenPinIDs.add(pin.ID);
+
+            // Get previous model for comparison.
             const oldPinModel = pinMap.get(pin.ID);
+
+            // Get states of new model.
+            const isOffline = pin.States.includes('Offline') || !pin.States.includes('Reachable');
+            const isHome = pin.HopDistance === 1;
+            const isTransit = transitPins.has(pin.ID);
             const isExit = exitPins.has(pin.ID);
             const isActive = activePins.has(pin.ID);
-            const isTransit = transitPins.has(pin.ID)
+            const hasIssues = pin.States.includes('ConnectivityIssues');
 
-            const pinHasChanged = !oldPinModel || oldPinModel.pin !== pin || oldPinModel.isExit !== isExit || oldPinModel.isActive !== isActive || oldPinModel.isTransit !== isTransit;
-            seenPinIDs.add(pin.ID);
+            // Compare old and new model to see if there are changes.
+            const pinHasChanged = !oldPinModel || oldPinModel.pin !== pin ||
+              oldPinModel.isOffline !== isOffline || oldPinModel.isHome !== isHome || oldPinModel.isTransit !== isTransit ||
+              oldPinModel.isExit !== isExit || oldPinModel.isActive !== isActive || oldPinModel.hasIssues !== hasIssues;
 
+            // Update pin on map set when updated.
             if (pinHasChanged) {
               const newPinModel: MapPin = {
                 pin: pin,
                 location: getPinCoords(pin) || UnknownLocation,
                 entity: (pin.EntityV4 || pin.EntityV6)!,
-                isExit: exitPins.has(pin.ID),
+                isOffline: isOffline,
+                isHome: isHome,
                 isTransit: isTransit,
-                isActive: activePins.has(pin.ID),
-                isHome: pin.HopDistance === 1,
+                isExit: isExit,
+                isActive: isActive,
+                hasIssues: hasIssues,
               }
 
               pinMap.set(pin.ID, newPinModel);