@serve.zone/dcrouter 13.2.2 → 13.4.0

package/ts_web/elements/security/ops-view-security-overview.ts

@@ -0,0 +1,172 @@
+import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-security-overview': OpsViewSecurityOverview;
+  }
+}
+
+@customElement('ops-view-security-overview')
+export class OpsViewSecurityOverview extends DeesElement {
+  @state()
+  accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
+
+  constructor() {
+    super();
+    const sub = appstate.statsStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.statsState = s;
+      });
+    this.rxSubscriptions.push(sub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      h2 {
+        margin: 32px 0 16px 0;
+        font-size: 24px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+      dees-statsgrid {
+        margin-bottom: 32px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const metrics = this.statsState.securityMetrics;
+
+    if (!metrics) {
+      return html`
+        <div class="loadingMessage">
+          <p>Loading security metrics...</p>
+        </div>
+      `;
+    }
+
+    const threatLevel = this.calculateThreatLevel(metrics);
+    const threatScore = this.getThreatScore(metrics);
+
+    // Derive active sessions from recent successful auth events (last hour)
+    const allEvents: any[] = metrics.recentEvents || [];
+    const oneHourAgo = Date.now() - 3600000;
+    const recentAuthSuccesses = allEvents.filter(
+      (evt: any) => evt.type === 'authentication' && evt.success === true && evt.timestamp >= oneHourAgo
+    ).length;
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'threatLevel',
+        title: 'Threat Level',
+        value: threatScore,
+        type: 'gauge',
+        icon: 'lucide:Shield',
+        gaugeOptions: {
+          min: 0,
+          max: 100,
+          thresholds: [
+            { value: 0, color: '#ef4444' },
+            { value: 30, color: '#f59e0b' },
+            { value: 70, color: '#22c55e' },
+          ],
+        },
+        description: `Status: ${threatLevel.toUpperCase()}`,
+      },
+      {
+        id: 'blockedThreats',
+        title: 'Blocked Threats',
+        value: (metrics.blockedIPs?.length || 0) + metrics.spamDetected,
+        type: 'number',
+        icon: 'lucide:ShieldCheck',
+        color: '#ef4444',
+        description: 'Total threats blocked today',
+      },
+      {
+        id: 'activeSessions',
+        title: 'Active Sessions',
+        value: recentAuthSuccesses,
+        type: 'number',
+        icon: 'lucide:Users',
+        color: '#22c55e',
+        description: 'Authenticated in last hour',
+      },
+      {
+        id: 'authFailures',
+        title: 'Auth Failures',
+        value: metrics.authenticationFailures,
+        type: 'number',
+        icon: 'lucide:LockOpen',
+        color: metrics.authenticationFailures > 10 ? '#ef4444' : '#f59e0b',
+        description: 'Failed login attempts today',
+      },
+    ];
+
+    return html`
+      <dees-heading level="hr">Overview</dees-heading>
+
+      <dees-statsgrid
+        .tiles=${tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
+
+      <h2>Recent Security Events</h2>
+      <dees-table
+        .heading1=${'Security Events'}
+        .heading2=${'Last 24 hours'}
+        .data=${this.getSecurityEvents(metrics)}
+        .displayFunction=${(item) => ({
+          'Time': new Date(item.timestamp).toLocaleTimeString(),
+          'Event': item.event,
+          'Severity': item.severity,
+          'Details': item.details,
+        })}
+      ></dees-table>
+    `;
+  }
+
+  private calculateThreatLevel(metrics: any): string {
+    const score = this.getThreatScore(metrics);
+    if (score < 30) return 'alert';
+    if (score < 70) return 'warning';
+    return 'success';
+  }
+
+  private getThreatScore(metrics: any): number {
+    // Simple scoring algorithm
+    let score = 100;
+    const blockedCount = Array.isArray(metrics.blockedIPs) ? metrics.blockedIPs.length : (metrics.blockedIPs || 0);
+    score -= blockedCount * 2;
+    score -= (metrics.authenticationFailures || 0) * 1;
+    score -= (metrics.spamDetected || 0) * 0.5;
+    score -= (metrics.malwareDetected || 0) * 3;
+    score -= (metrics.phishingDetected || 0) * 3;
+    score -= (metrics.suspiciousActivities || 0) * 2;
+    return Math.max(0, Math.min(100, Math.round(score)));
+  }
+
+  private getSecurityEvents(metrics: any): any[] {
+    const events: any[] = metrics.recentEvents || [];
+    return events.map((evt: any) => ({
+      timestamp: evt.timestamp,
+      event: evt.message,
+      severity: evt.level === 'critical' ? 'critical' : evt.level === 'error' ? 'high' : evt.level === 'warn' ? 'warning' : 'info',
+      details: evt.ipAddress ? `IP: ${evt.ipAddress}` : evt.domain ? `Domain: ${evt.domain}` : evt.type,
+    }));
+  }
+}

package/ts_web/router.ts

@@ -3,9 +3,37 @@ import * as appstate from './appstate.js';
 
 const SmartRouter = plugins.domtools.plugins.smartrouter.SmartRouter;
 
-export const validViews = ['overview', 'network', 'emails', 'logs', 'routes', 'apitokens', 'configuration', 'security', 'certificates', 'remoteingress', 'vpn', 'sourceprofiles', 'networktargets', 'targetprofiles'] as const;
+// Flat top-level views (no subviews)
+const flatViews = ['logs', 'certificates'] as const;
+
+// Tabbed views and their valid subviews
+const subviewMap: Record<string, readonly string[]> = {
+  overview: ['stats', 'configuration'] as const,
+  network: ['activity', 'routes', 'sourceprofiles', 'networktargets', 'targetprofiles', 'remoteingress', 'vpn'] as const,
+  email: ['log', 'security'] as const,
+  access: ['apitokens'] as const,
+  security: ['overview', 'blocked', 'authentication'] as const,
+};
+
+// Default subview when user visits the bare parent URL
+const defaultSubview: Record<string, string> = {
+  overview: 'stats',
+  network: 'activity',
+  email: 'log',
+  access: 'apitokens',
+  security: 'overview',
+};
+
+export const validTopLevelViews = [...flatViews, ...Object.keys(subviewMap)] as const;
+export type TValidView = typeof validTopLevelViews[number];
+
+export function isValidView(view: string): boolean {
+  return (validTopLevelViews as readonly string[]).includes(view);
+}
 
-export type TValidView = typeof validViews[number];
+export function isValidSubview(view: string, subview: string): boolean {
+  return subviewMap[view]?.includes(subview) ?? false;
+}
 
 class AppRouter {
   private router: InstanceType<typeof SmartRouter>;
@@ -25,10 +53,25 @@ class AppRouter {
   }
 
   private setupRoutes(): void {
-    for (const view of validViews) {
+    // Flat views
+    for (const view of flatViews) {
+      this.router.on(`/${view}`, async () => {
+        this.updateViewState(view, null);
+      });
+    }
+
+    // Tabbed views
+    for (const view of Object.keys(subviewMap)) {
+      // Bare parent → redirect to default subview
       this.router.on(`/${view}`, async () => {
-        this.updateViewState(view);
+        this.navigateTo(`/${view}/${defaultSubview[view]}`);
       });
+      // Each valid subview
+      for (const sub of subviewMap[view]) {
+        this.router.on(`/${view}/${sub}`, async () => {
+          this.updateViewState(view, sub);
+        });
+      }
     }
 
     // Root redirect
@@ -42,7 +85,9 @@ class AppRouter {
       if (this.suppressStateUpdate) return;
 
       const currentPath = window.location.pathname;
-      const expectedPath = `/${uiState.activeView}`;
+      const expectedPath = uiState.activeSubview
+        ? `/${uiState.activeView}/${uiState.activeSubview}`
+        : `/${uiState.activeView}`;
 
       if (currentPath !== expectedPath) {
         this.suppressStateUpdate = true;
@@ -57,25 +102,38 @@ class AppRouter {
 
     if (!path || path === '/') {
       this.router.pushUrl('/overview');
-    } else {
-      const segments = path.split('/').filter(Boolean);
-      const view = segments[0];
+      return;
+    }
+
+    const segments = path.split('/').filter(Boolean);
+    const view = segments[0];
+    const sub = segments[1];
 
-      if (validViews.includes(view as TValidView)) {
-        this.updateViewState(view as TValidView);
+    if (!isValidView(view)) {
+      this.router.pushUrl('/overview');
+      return;
+    }
+
+    if (subviewMap[view]) {
+      if (sub && isValidSubview(view, sub)) {
+        this.updateViewState(view, sub);
       } else {
-        this.router.pushUrl('/overview');
+        // Bare parent or invalid sub → default subview
+        this.router.pushUrl(`/${view}/${defaultSubview[view]}`);
       }
+    } else {
+      this.updateViewState(view, null);
     }
   }
 
-  private updateViewState(view: string): void {
+  private updateViewState(view: string, subview: string | null): void {
     this.suppressStateUpdate = true;
     const currentState = appstate.uiStatePart.getState()!;
-    if (currentState.activeView !== view) {
+    if (currentState.activeView !== view || currentState.activeSubview !== subview) {
       appstate.uiStatePart.setState({
         ...currentState,
         activeView: view,
+        activeSubview: subview,
       } as appstate.IUiState);
     }
     this.suppressStateUpdate = false;
@@ -85,11 +143,17 @@ class AppRouter {
     this.router.pushUrl(path);
   }
 
-  public navigateToView(view: string): void {
-    if (validViews.includes(view as TValidView)) {
-      this.navigateTo(`/${view}`);
-    } else {
+  public navigateToView(view: string, subview?: string): void {
+    if (!isValidView(view)) {
       this.navigateTo('/overview');
+      return;
+    }
+    if (subview && isValidSubview(view, subview)) {
+      this.navigateTo(`/${view}/${subview}`);
+    } else if (subviewMap[view]) {
+      this.navigateTo(`/${view}/${defaultSubview[view]}`);
+    } else {
+      this.navigateTo(`/${view}`);
     }
   }
 

package/dist_ts_web/elements/ops-view-security.d.ts

@@ -1,24 +0,0 @@
-import * as plugins from '../plugins.js';
-import * as appstate from '../appstate.js';
-import { DeesElement } from '@design.estate/dees-element';
-export declare class OpsViewSecurity extends DeesElement {
-    accessor statsState: appstate.IStatsState;
-    accessor selectedTab: 'overview' | 'blocked' | 'authentication' | 'email-security';
-    private tabLabelMap;
-    private labelToTab;
-    constructor();
-    firstUpdated(): Promise<void>;
-    static styles: plugins.deesElement.CSSResult[];
-    render(): plugins.deesElement.TemplateResult<1>;
-    private renderTabContent;
-    private renderOverview;
-    private renderBlockedIPs;
-    private renderAuthentication;
-    private renderEmailSecurity;
-    private calculateThreatLevel;
-    private getThreatScore;
-    private getSecurityEvents;
-    private clearBlockedIPs;
-    private unblockIP;
-    private saveEmailSecuritySettings;
-}