Major SPN map revamp

modules/portmaster/projects/safing/ui/src/lib/dialog/dialog.container.ts

@@ -1,4 +1,5 @@
 import { AnimationEvent } from '@angular/animations';
+import { CdkDrag } from '@angular/cdk/drag-drop';
 import { CdkPortalOutlet, ComponentPortal, Portal, TemplatePortal } from '@angular/cdk/portal';
 import { ChangeDetectorRef, Component, ComponentRef, EmbeddedViewRef, HostBinding, HostListener, InjectionToken, Input, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
@@ -24,7 +25,7 @@ export class SfngDialogContainerComponent<T> {
   ref: ComponentRef<T> | EmbeddedViewRef<T> | null = null;
 
   constructor(
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
   ) { }
 
   @HostBinding('@dialogContainer')
@@ -33,6 +34,9 @@ export class SfngDialogContainerComponent<T> {
   @ViewChild(CdkPortalOutlet, { static: true })
   _portalOutlet: CdkPortalOutlet | null = null;
 
+  @ViewChild(CdkDrag, { static: true })
+  drag!: CdkDrag;
+
   attachComponentPortal(portal: ComponentPortal<T>): ComponentRef<T> {
     this.ref = this._portalOutlet!.attachComponentPortal(portal)
     return this.ref;

modules/portmaster/src/app/app.module.ts

@@ -27,8 +27,7 @@ import { AppOverviewComponent, AppViewComponent, QuickSettingInternetButtonCompo
 import { QuickSettingUseSPNButtonComponent } from './pages/app-view/qs-use-spn/qs-use-spn';
 import { MonitorPageComponent } from './pages/monitor';
 import { SettingsComponent } from './pages/settings/settings';
-import { SpnPageComponent } from './pages/spn';
-import { SPNFeatureCarouselComponent } from './pages/spn/spn-feature-carousel';
+import { SPNModule } from './pages/spn/spn.module';
 import { SupportPageComponent } from './pages/support';
 import { SupportFormComponent } from './pages/support/form';
 import { NotificationsService } from './services';
@@ -83,13 +82,11 @@ import { PlaceholderComponent } from './shared/text-placeholder';
     ExitScreenComponent,
     SupportPageComponent,
     SupportFormComponent,
-    SpnPageComponent,
     SecurityLockComponent,
     SPNStatusComponent,
     SPNLoginComponent,
     SPNNetworkStatusComponent,
     SPNAccountDetailsComponent,
-    SPNFeatureCarouselComponent,
     NetworkScoutComponent,
     EditProfileDialog,
     ProcessDetailsDialogComponent,
@@ -132,6 +129,7 @@ import { PlaceholderComponent } from './shared/text-placeholder';
     NetqueryModule,
     CommonPipesModule,
     UiModule,
+    SPNModule,
     PortmasterAPIModule.forRoot({
       httpAPI: environment.httpAPI,
       websocketAPI: environment.portAPI,

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

@@ -0,0 +1,154 @@
+<h1 class="flex flex-row items-center gap-2" cdkDragHandle cdkDrag cdkDragRootElement=".cdk-overlay-pane">
+  <span [appCountryFlags]="countryCode"></span>
+  <span>{{ countryName }}</span>
+  <span class="flex-grow"></span>
+
+  <svg *ngIf="!!dialogRef" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+    stroke-width="2" class="w-4 h-4 ml-2 opacity-75 cursor-pointer hover:opacity-100" (click)="dialogRef.close()">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+  </svg>
+</h1>
+
+<sfng-tab-group linkRouter="false" class="h-full">
+  <!-- Tab that displays all nodes in that country -->
+  <sfng-tab id="pins" title="Nodes">
+    <spn-pin-list *sfngTabContent [pins]="pins" (pinHover)="pinHover.next($event)" (pinClick)="openPinDetails($event)"
+      allowClick="true">
+    </spn-pin-list>
+  </sfng-tab>
+
+  <!-- Tab that displays generale statistics about the country -->
+  <sfng-tab id="Statistics" title="Statistics">
+    <div *sfngTabContent class="flex flex-col gap-3">
+      <table>
+        <tr>
+          <th>
+            <span class="text-primary">Total Nodes</span>
+          </th>
+          <td>{{ pins.length }}</td>
+        </tr>
+        <tr *ngIf="!!pins.length">
+          <th>
+            <span class="inline-block pl-4">
+              <spn-node-icon bySafing="true" isActive="true"></spn-node-icon>
+              by Safing
+            </span>
+          </th>
+          <td>{{ safingNodeCount }}</td>
+        </tr>
+        <tr *ngIf="!!pins.length">
+          <th>
+            <span class="inline-block pl-4">
+              <spn-node-icon bySafing="false" isActive="true"></spn-node-icon>
+              by Community
+            </span>
+          </th>
+          <td>{{ communityNodeCount }}</td>
+        </tr>
+        <tr>
+          <th>
+            <span class="text-primary">Exit Nodes</span>
+          </th>
+          <td>{{ exitNodeCount }}</td>
+        </tr>
+        <tr *ngIf="!!exitNodeCount">
+          <th>
+            <span class="inline-block pl-4">
+              <spn-node-icon bySafing="true" isExit="true"></spn-node-icon>
+              by Safing
+            </span>
+          </th>
+          <td>{{ safingExitNodeCount }}</td>
+        </tr>
+        <tr *ngIf="!!exitNodeCount">
+          <th>
+            <span class="inline-block pl-4">
+              <spn-node-icon bySafing="false" isExit="true"></spn-node-icon>
+              by Community
+            </span>
+          </th>
+          <td>{{ communityExitNodeCount }}</td>
+        </tr>
+        <tr>
+          <th>
+            <span class="text-primary">Nodes In Use</span>
+          </th>
+          <td>{{ activeNodeCount }}</td>
+        </tr>
+        <tr *ngIf="activeNodeCount">
+          <th>
+            <span class="inline-block pl-4">
+              <spn-node-icon bySafing="true" isActive="true"></spn-node-icon>
+              by Safing
+            </span>
+          </th>
+          <td>{{ activeSafingNodeCount }}</td>
+        </tr>
+        <tr *ngIf="activeNodeCount">
+          <th>
+            <span class="inline-block pl-4">
+              <spn-node-icon bySafing="false" isActive="true"></spn-node-icon>
+              by Community
+            </span>
+          </th>
+          <td>{{ activeCommunityNodeCount }}</td>
+        </tr>
+      </table>
+    </div>
+  </sfng-tab>
+
+
+  <!-- Tab that displays all apps that exit in this country -->
+  <sfng-tab id="profiles" title="Apps">
+    <div *sfngTabContent>
+      <span class="inline-block p-2 mb-2 text-tertiary">The following Apps have connections that are routed throught the
+        SPN and use an
+        exit node in {{ countryName }}({{ countryCode }}):</span>
+      <table class="w-full custom ">
+        <tbody>
+          <tr *ngFor="let app of profiles; trackBy: trackProfile"
+            class="bg-transparent hover:bg-gray-500 hover:bg-opacity-50">
+            <td class="p-2">
+              <app-icon [profile]="app.profile"></app-icon>
+              {{ app.profile.Name }}
+            </td>
+            <td class="p-2">
+              {{ app.count }} <span class="text-tertiary">connections</span>
+            </td>
+            <td class="w-10 p-2">
+              <div class="flex flex-row items-center gap-2 ">
+                <div class="w-6 outline-none cursor-pointer hover:text-primary text-secondary"
+                  [routerLink]="['/app/', app.profile.Source, app.profile.ID]"
+                  [queryParams]="{tab: 0, q: filterConnectionsByCountryNodes}" (click)="$event.stopPropagation()">
+                  <svg viewBox="0 0 24 24" class="w-4 h-4">
+                    <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>
+
+                <div class="cursor-pointer w-6outline-none hover:text-primary text-secondary"
+                  [routerLink]="['/app/',  app.profile.Source, app.profile.ID]" [queryParams]="{tab: 'settings'}"
+                  (click)="$event.stopPropagation()">
+                  <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" class="w-4 h-4"
+                    fill="none" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor"
+                      d="M19 21h-3a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2Z" />
+                    <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M19 9h-3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2ZM5 3h3a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2ZM5 15h3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2Z" />
+                  </svg>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </sfng-tab>
+
+</sfng-tab-group>