This module provides the frontend web application for the DCRouter OpsServer, built with modern web components using the @design.estate/dees-element library. It offers a comprehensive dashboard for monitoring and managing your DCRouter instance in real-time.

Issue Reporting and Security

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

Features

🔐 Secure Authentication

JWT-based authentication flow
Automatic session management
Secure login with username/password

📊 Overview Dashboard

Real-time server statistics
Connection monitoring
Email throughput visualization
DNS query metrics
RADIUS session tracking

🌐 Network View

Active connection monitoring
SmartProxy route visualization
TCP/HTTP connection details
TLS certificate status

📧 Email Management

Email queue monitoring
Delivery status tracking
Bounce management
DKIM key status
Domain configuration overview

📜 Log Viewer

Real-time log streaming
Log level filtering (error, warning, info, debug)
Search and filter capabilities
Time-range selection

⚙️ Configuration

View current system configuration
Update settings via TypedRequest API
Route management
Domain management

🛡️ Security Dashboard

IP reputation monitoring
Rate limit status
Blocked connections
Security event tracking

Architecture

The web application is built using:

@design.estate/dees-element - Modern web component framework with lit-element
@design.estate/dees-catalog - Pre-built UI components (appdash, login, forms)
@push.rocks/smartstate - Reactive state management
@api.global/typedrequest - Type-safe API communication

Component Structure

ts_web/
├── index.ts              # Application entry point
├── plugins.ts            # External dependency imports
├── router.ts             # Client-side routing
├── appstate.ts           # State management
└── elements/
    ├── index.ts          # Component barrel export
    ├── ops-dashboard.ts  # Main dashboard container
    ├── ops-view-overview.ts    # Overview statistics
    ├── ops-view-network.ts     # Network monitoring
    ├── ops-view-emails.ts      # Email management
    ├── ops-view-logs.ts        # Log viewer
    ├── ops-view-config.ts      # Configuration
    ├── ops-view-security.ts    # Security dashboard
    └── shared/
        ├── index.ts      # Shared component exports
        ├── css.ts        # Shared styles
        └── ops-sectionheading.ts  # Section heading component

State Management

The application uses @push.rocks/smartstate for reactive state management:

State Parts

// Login state
interface ILoginState {
  identity: IIdentity | null;
  isLoggedIn: boolean;
}

// UI state
interface IUiState {
  activeView: string;
  sidebarCollapsed: boolean;
  autoRefresh: boolean;
  refreshInterval: number;
  theme: 'light' | 'dark';
}

// Statistics state
interface IStatsState {
  server: IServerStats;
  email: IEmailStats;
  dns: IDnsStats;
  connections: IConnectionInfo[];
  health: IHealthStatus;
}

// Configuration state
interface IConfigState {
  configuration: IDcRouterConfig;
  loading: boolean;
}

Actions

loginAction - Authenticate user
logoutAction - End session
fetchAllStatsAction - Refresh all statistics
fetchConfigurationAction - Load configuration
updateConfigurationAction - Save configuration changes

Client-Side Routing

The application includes client-side routing for deep linking:

// Routes
/overview       → Overview dashboard
/network        → Network monitoring
/emails         → Email management
/logs           → Log viewer
/configuration  → System configuration
/security       → Security dashboard

URL state is synchronized with the UI, allowing bookmarking and sharing of specific views.

Building

The web application is built using @git.zone/tsbundle:

# Build the bundle
pnpm run bundle

# Watch for development
pnpm run watch

The bundle is output to ./dist_serve/bundle.js and served by the OpsServer.

Development

Local Development

// Start DCRouter with OpsServer enabled
import { DcRouter } from '@serve.zone/dcrouter';

const router = new DcRouter({
  opsServerConfig: {
    port: 3000,
    admin: {
      username: 'admin',
      password: 'dev-password'
    }
  }
});

await router.start();
// Dashboard at http://localhost:3000

Adding New Views

Create a new view component in elements/:

import { DeesElement, customElement, html } from '@design.estate/dees-element';

@customElement('ops-view-myview')
export class OpsViewMyView extends DeesElement {
  public render() {
    return html`<div>My custom view</div>`;
  }
}

Import and add to ops-dashboard.ts:

import { OpsViewMyView } from './ops-view-myview.js';

private viewTabs = [
  // ... existing tabs
  { name: 'MyView', element: OpsViewMyView }
];

Add route in router.ts if needed.

License and Legal Information

This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the LICENSE file.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

readme.md

@serve.zone/dcrouter-web