Add first working dashboard version

safing · Aug 8, 2023 · 0cf1475 · 0cf1475
1 parent 038bd81
commit 0cf1475
Show file tree

Hide file tree

Showing 22 changed files with 500 additions and 292 deletions.
diff --git a/modules/portmaster/projects/safing/portmaster-api/src/lib/config.types.ts b/modules/portmaster/projects/safing/portmaster-api/src/lib/config.types.ts
@@ -1,3 +1,4 @@
+import { FeatureID } from './features';
 import { Record } from './portapi.types';
 import { deepClone } from './utils';
 
@@ -162,7 +163,7 @@ export interface Annotations<T extends OptionValueType> {
   [WellKnown.Stackable]?: true;
   [WellKnown.QuickSetting]?: QuickSetting<T> | QuickSetting<T>[];
   [WellKnown.Requires]?: ValueRequirement | ValueRequirement[];
-  [WellKnown.RequiresFeatureID]?: string | string[];
+  [WellKnown.RequiresFeatureID]?: FeatureID | FeatureID[];
   // Any thing else...
   [key: string]: any;
 }

diff --git a/modules/portmaster/projects/safing/portmaster-api/src/lib/features.ts b/modules/portmaster/projects/safing/portmaster-api/src/lib/features.ts
@@ -1,4 +1,5 @@
-export enum Feature {
+export enum FeatureID {
+  None = "",
   SPN = "spn",
   PrioritySupport = "support",
   History = "history",

diff --git a/modules/portmaster/projects/safing/portmaster-api/src/lib/netquery.service.ts b/modules/portmaster/projects/safing/portmaster-api/src/lib/netquery.service.ts
@@ -24,6 +24,10 @@ export interface Sum {
     condition: Condition;
     as: string;
     distinct?: boolean;
+  } | {
+    field: string;
+    as: string;
+    distinct?: boolean;
   }
 }
 

diff --git a/modules/portmaster/projects/safing/portmaster-api/src/lib/spn.service.ts b/modules/portmaster/projects/safing/portmaster-api/src/lib/spn.service.ts
@@ -2,8 +2,9 @@ import { HttpClient, HttpParams, HttpResponse } from "@angular/common/http";
 import { Inject, Injectable } from "@angular/core";
 import { BehaviorSubject, Observable, of } from "rxjs";
 import { filter, map, multicast, refCount, share, switchMap } from "rxjs/operators";
+import { FeatureID } from "./features";
 import { PORTMASTER_HTTP_API_ENDPOINT, PortapiService } from './portapi.service';
-import { Pin, SPNStatus, UserProfile } from "./spn.types";
+import { Feature, Pin, SPNStatus, UserProfile } from "./spn.types";
 
 @Injectable({ providedIn: 'root' })
 export class SPNService {
@@ -93,6 +94,39 @@ export class SPNService {
     })
   }
 
+  watchEnabledFeatures(): Observable<(Feature & { enabled: boolean })[]> {
+    return this.profile$
+      .pipe(
+        switchMap(profile => {
+          return this.loadFeaturePackages()
+            .pipe(
+              map(features => {
+                return features.map(feature => {
+                  console.log(feature, profile?.current_plan?.feature_ids)
+                  return {
+                    ...feature,
+                    enabled: feature.RequiredFeatureID === FeatureID.None || profile?.current_plan?.feature_ids?.includes(feature.RequiredFeatureID) || false,
+                  }
+                })
+              })
+            )
+        })
+      );
+  }
+
+  /** Returns a list of all feature packages */
+  loadFeaturePackages(): Observable<Feature[]> {
+    return this.http.get<{ Features: Feature[] }>(`${this.httpAPI}/v1/account/features`)
+      .pipe(
+        map(response => response.Features.map(feature => {
+          return {
+            ...feature,
+            IconURL: `${this.httpAPI}/v1/account/features/${feature.ID}/icon`,
+          }
+        }))
+      );
+  }
+
   /**
    * Returns the current SPN user profile.
    *

diff --git a/modules/portmaster/projects/safing/portmaster-api/src/lib/spn.types.ts b/modules/portmaster/projects/safing/portmaster-api/src/lib/spn.types.ts
@@ -1,3 +1,4 @@
+import { FeatureID } from './features';
 import { GeoCoordinates, IntelEntity } from './network.types';
 import { Record } from './portapi.types';
 
@@ -55,16 +56,16 @@ export interface Plan {
   amount: number;
   months: number;
   renewable: boolean;
-  feature_ids: string[];
+  feature_ids: FeatureID[];
 }
 
 export interface View {
-    Message           : string;
-    ShowAccountData   : boolean;
-    ShowAccountButton : boolean;
-    ShowLoginButton   : boolean;
-    ShowRefreshButton : boolean;
-    ShowLogoutButton  : boolean;
+  Message: string;
+  ShowAccountData: boolean;
+  ShowAccountButton: boolean;
+  ShowLoginButton: boolean;
+  ShowRefreshButton: boolean;
+  ShowLogoutButton: boolean;
 }
 
 export interface UserProfile extends Record {
@@ -75,7 +76,27 @@ export interface UserProfile extends Record {
   subscription: Subscription | null;
   current_plan: Plan | null;
   next_plan: Plan | null;
-	view: View | null;
-	LastNotifiedOfEnd?: string;
+  view: View | null;
+  LastNotifiedOfEnd?: string;
   LoggedInAt?: string;
 }
+
+export interface Package {
+  Name: string;
+  HexColor: string;
+}
+
+export interface Feature {
+  ID: string;
+  Name: string;
+  ConfigKey: string;
+  ConfigScope: string;
+  RequiredFeatureID: FeatureID;
+  InPackage: Package | null;
+  Comment: string;
+  Beta?: boolean;
+  CommingSoon?: boolean;
+
+  // does not come from the PM API but is set by SPNService
+  IconURL: string;
+}
diff --git a/modules/portmaster/src/app/app.module.ts b/modules/portmaster/src/app/app.module.ts
@@ -60,6 +60,7 @@ import { SPNLoginComponent } from './shared/spn-login';
 import { SPNStatusComponent } from './shared/spn-status';
 import { PilotWidgetComponent } from './shared/status-pilot';
 import { PlaceholderComponent } from './shared/text-placeholder';
+import { FeatureCardComponent } from './pages/dashboard/feature-card/feature-card.component';
 
 @NgModule({
   declarations: [
@@ -91,7 +92,8 @@ import { PlaceholderComponent } from './shared/text-placeholder';
     EditProfileDialog,
     ProcessDetailsDialogComponent,
     QsHistoryComponent,
-    DashboardPageComponent
+    DashboardPageComponent,
+    FeatureCardComponent
   ],
   imports: [
     BrowserModule,

diff --git a/modules/portmaster/src/app/layout/navigation/navigation.html b/modules/portmaster/src/app/layout/navigation/navigation.html
@@ -5,7 +5,7 @@
       *ngIf="sideDashStatus === 'collapsed'">
     </app-security-lock>
 
-    <div class="absolute flex flex-col items-center justify-center w-16 h-16 outline-none" routerLink="monitor"
+    <div class="absolute flex flex-col items-center justify-center w-16 h-16 outline-none" routerLink="dashboard"
       [@fadeIn] [@fadeOut] *ngIf="sideDashStatus === 'expanded'">
       <div class="relative">
 

diff --git a/modules/portmaster/src/app/pages/app-view/qs-history/qs-history.component.ts b/modules/portmaster/src/app/pages/app-view/qs-history/qs-history.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { BoolSetting, Feature, SPNService, Setting, getActualValue } from '@safing/portmaster-api';
+import { BoolSetting, FeatureID, SPNService, Setting, getActualValue } from '@safing/portmaster-api';
 import { BehaviorSubject, Observable, map } from 'rxjs';
 import { share } from 'rxjs/operators';
 import { SaveSettingEvent } from 'src/app/shared/config';
@@ -18,7 +18,7 @@ export class QsHistoryComponent implements OnChanges {
     .pipe(
       takeUntilDestroyed(),
       map(profile => {
-        return (profile?.current_plan?.feature_ids?.includes(Feature.History)) || false;
+        return (profile?.current_plan?.feature_ids?.includes(FeatureID.History)) || false;
       }),
       share({ connector: () => new BehaviorSubject<boolean>(false) })
     )