BREAKING CHANGE(mta): migrate internal MTA to @push.rocks/smartmta and remove legacy mail/deliverability implementation
This commit is contained in:
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@serve.zone/dcrouter',
|
||||
version: '4.1.1',
|
||||
version: '5.0.0',
|
||||
description: 'A multifaceted routing service handling mail and SMS delivery functions.'
|
||||
}
|
||||
|
||||
265
ts_web/readme.md
265
ts_web/readme.md
@@ -1,8 +1,8 @@
|
||||
# @serve.zone/dcrouter-web
|
||||
|
||||
Web-based Operations Dashboard for DCRouter. 🖥️
|
||||
Web-based Operations Dashboard for DcRouter. 🖥️
|
||||
|
||||
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.
|
||||
A modern, reactive web application for monitoring and managing your DcRouter instance in real-time. Built with web components using [@design.estate/dees-element](https://code.foss.global/design.estate/dees-element) and [@design.estate/dees-catalog](https://code.foss.global/design.estate/dees-catalog).
|
||||
|
||||
## Issue Reporting and Security
|
||||
|
||||
@@ -10,203 +10,184 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
|
||||
|
||||
## Features
|
||||
|
||||
### 🔐 **Secure Authentication**
|
||||
- JWT-based authentication flow
|
||||
- Automatic session management
|
||||
- Secure login with username/password
|
||||
### 🔐 Secure Authentication
|
||||
- JWT-based login with persistent sessions (IndexedDB)
|
||||
- Automatic session expiry detection and cleanup
|
||||
- Secure username/password authentication
|
||||
|
||||
### 📊 **Overview Dashboard**
|
||||
- Real-time server statistics
|
||||
- Connection monitoring
|
||||
- Email throughput visualization
|
||||
- DNS query metrics
|
||||
- RADIUS session tracking
|
||||
### 📊 Overview Dashboard
|
||||
- Real-time server statistics (CPU, memory, uptime)
|
||||
- Active connection counts and email throughput
|
||||
- DNS query metrics and RADIUS session tracking
|
||||
- Auto-refreshing with configurable intervals
|
||||
|
||||
### 🌐 **Network View**
|
||||
- Active connection monitoring
|
||||
- SmartProxy route visualization
|
||||
- TCP/HTTP connection details
|
||||
- TLS certificate status
|
||||
### 🌐 Network View
|
||||
- Active connection monitoring with real-time data from SmartProxy
|
||||
- Top connected IPs with connection counts and percentages
|
||||
- Throughput rates (inbound/outbound in kbit/s, Mbit/s, Gbit/s)
|
||||
- Traffic chart with selectable time ranges
|
||||
|
||||
### 📧 **Email Management**
|
||||
- Email queue monitoring
|
||||
- Delivery status tracking
|
||||
- Bounce management
|
||||
- DKIM key status
|
||||
- Domain configuration overview
|
||||
### 📧 Email Management
|
||||
- **Queued** — Emails pending delivery with queue position
|
||||
- **Sent** — Successfully delivered emails with timestamps
|
||||
- **Failed** — Failed emails with resend capability
|
||||
- **Security** — Security incidents from email processing
|
||||
- Bounce record management and suppression list controls
|
||||
|
||||
### 📜 **Log Viewer**
|
||||
### 📜 Log Viewer
|
||||
- Real-time log streaming
|
||||
- Log level filtering (error, warning, info, debug)
|
||||
- Search and filter capabilities
|
||||
- Time-range selection
|
||||
- Filter by log level (error, warning, info, debug)
|
||||
- Search and time-range selection
|
||||
|
||||
### ⚙️ **Configuration**
|
||||
- View current system configuration
|
||||
- Update settings via TypedRequest API
|
||||
- Route management
|
||||
- Domain management
|
||||
### ⚙️ Configuration
|
||||
- Read-only display of current system configuration
|
||||
- Status badges for boolean values (enabled/disabled)
|
||||
- Array values displayed as pills with counts
|
||||
- Section icons and formatted byte/time values
|
||||
|
||||
### 🛡️ **Security Dashboard**
|
||||
### 🛡️ Security Dashboard
|
||||
- IP reputation monitoring
|
||||
- Rate limit status
|
||||
- Blocked connections
|
||||
- Security event tracking
|
||||
- Rate limit status across domains
|
||||
- Blocked connection tracking
|
||||
- Security event timeline
|
||||
|
||||
## Architecture
|
||||
|
||||
The web application is built using:
|
||||
### Technology Stack
|
||||
|
||||
- **@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
|
||||
| Layer | Package | Purpose |
|
||||
|-------|---------|---------|
|
||||
| **Components** | `@design.estate/dees-element` | Web component framework (lit-element based) |
|
||||
| **UI Kit** | `@design.estate/dees-catalog` | Pre-built components (tables, charts, forms, app shell) |
|
||||
| **State** | `@push.rocks/smartstate` | Reactive state management with persistent/soft modes |
|
||||
| **Routing** | Client-side router | URL-synchronized view navigation |
|
||||
| **API** | `@api.global/typedrequest` | Type-safe communication with OpsServer |
|
||||
| **Types** | `@serve.zone/dcrouter-interfaces` | Shared TypedRequest interface definitions |
|
||||
|
||||
### Component Structure
|
||||
|
||||
```
|
||||
ts_web/
|
||||
├── index.ts # Application entry point
|
||||
├── plugins.ts # External dependency imports
|
||||
├── router.ts # Client-side routing
|
||||
├── appstate.ts # State management
|
||||
├── index.ts # Entry point — renders <ops-dashboard>
|
||||
├── appstate.ts # State management (all state parts + actions)
|
||||
├── router.ts # Client-side routing (AppRouter)
|
||||
├── plugins.ts # Dependency imports
|
||||
└── 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
|
||||
├── ops-dashboard.ts # Main app shell
|
||||
├── ops-view-overview.ts # Overview statistics
|
||||
├── ops-view-network.ts # Network monitoring
|
||||
├── ops-view-emails.ts # Email queue management
|
||||
├── ops-view-logs.ts # Log viewer
|
||||
├── ops-view-config.ts # Configuration display
|
||||
├── ops-view-security.ts # Security dashboard
|
||||
└── shared/
|
||||
├── index.ts # Shared component exports
|
||||
├── css.ts # Shared styles
|
||||
├── css.ts # Shared styles
|
||||
└── ops-sectionheading.ts # Section heading component
|
||||
```
|
||||
|
||||
## State Management
|
||||
### State Management
|
||||
|
||||
The application uses `@push.rocks/smartstate` for reactive state management:
|
||||
The app uses `@push.rocks/smartstate` with multiple state parts:
|
||||
|
||||
### State Parts
|
||||
|
||||
```typescript
|
||||
// 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;
|
||||
}
|
||||
```
|
||||
| State Part | Mode | Description |
|
||||
|-----------|------|-------------|
|
||||
| `loginStatePart` | Persistent (IndexedDB) | JWT identity and login status |
|
||||
| `statsStatePart` | Soft (memory) | Server, email, DNS, security metrics |
|
||||
| `configStatePart` | Soft | Current system configuration |
|
||||
| `uiStatePart` | Soft | Active view, sidebar, auto-refresh, theme |
|
||||
| `logStatePart` | Soft | Recent logs, streaming status, filters |
|
||||
| `networkStatePart` | Soft | Connections, IPs, throughput rates |
|
||||
| `emailOpsStatePart` | Soft | Email queues, bounces, suppression list |
|
||||
|
||||
### Actions
|
||||
|
||||
- `loginAction` - Authenticate user
|
||||
- `logoutAction` - End session
|
||||
- `fetchAllStatsAction` - Refresh all statistics
|
||||
- `fetchConfigurationAction` - Load configuration (read-only)
|
||||
|
||||
## Client-Side Routing
|
||||
|
||||
The application includes client-side routing for deep linking:
|
||||
|
||||
```typescript
|
||||
// Routes
|
||||
/overview → Overview dashboard
|
||||
/network → Network monitoring
|
||||
/emails → Email management
|
||||
/logs → Log viewer
|
||||
/configuration → System configuration
|
||||
/security → Security dashboard
|
||||
// Authentication
|
||||
loginAction(username, password) // JWT login
|
||||
logoutAction() // Clear session
|
||||
|
||||
// Data fetching (auto-refresh compatible)
|
||||
fetchAllStatsAction() // Server + email + DNS + security stats
|
||||
fetchConfigurationAction() // System configuration
|
||||
fetchRecentLogsAction() // Log entries
|
||||
fetchNetworkStatsAction() // Connection + throughput data
|
||||
|
||||
// Email operations
|
||||
fetchQueuedEmailsAction() // Pending emails
|
||||
fetchSentEmailsAction() // Delivered emails
|
||||
fetchFailedEmailsAction() // Failed emails
|
||||
fetchSecurityIncidentsAction() // Security events
|
||||
fetchBounceRecordsAction() // Bounce records
|
||||
resendEmailAction(emailId) // Re-queue failed email
|
||||
removeFromSuppressionAction(email) // Remove from suppression list
|
||||
```
|
||||
|
||||
URL state is synchronized with the UI, allowing bookmarking and sharing of specific views.
|
||||
### Client-Side Routing
|
||||
|
||||
## Building
|
||||
|
||||
The web application is built using `@git.zone/tsbundle`:
|
||||
|
||||
```bash
|
||||
# Build the bundle
|
||||
pnpm run bundle
|
||||
|
||||
# Watch for development
|
||||
pnpm run watch
|
||||
```
|
||||
/overview → Overview dashboard
|
||||
/network → Network monitoring
|
||||
/emails → Email management
|
||||
/emails/queued → Queued emails
|
||||
/emails/sent → Sent emails
|
||||
/emails/failed → Failed emails
|
||||
/emails/security → Security incidents
|
||||
/logs → Log viewer
|
||||
/configuration → System configuration
|
||||
/security → Security dashboard
|
||||
```
|
||||
|
||||
The bundle is output to `./dist_serve/bundle.js` and served by the OpsServer.
|
||||
URL state is synchronized with the UI — bookmarking and deep linking fully supported.
|
||||
|
||||
## Development
|
||||
|
||||
### Local Development
|
||||
### Running Locally
|
||||
|
||||
Start DcRouter with OpsServer enabled:
|
||||
|
||||
```typescript
|
||||
// Start DCRouter with OpsServer enabled
|
||||
import { DcRouter } from '@serve.zone/dcrouter';
|
||||
|
||||
const router = new DcRouter({
|
||||
opsServerConfig: {
|
||||
port: 3000,
|
||||
admin: {
|
||||
username: 'admin',
|
||||
password: 'dev-password'
|
||||
}
|
||||
}
|
||||
// OpsServer starts automatically on port 3000
|
||||
smartProxyConfig: { routes: [/* your routes */] }
|
||||
});
|
||||
|
||||
await router.start();
|
||||
// Dashboard at http://localhost:3000
|
||||
```
|
||||
|
||||
### Adding New Views
|
||||
### Building
|
||||
|
||||
1. Create a new view component in `elements/`:
|
||||
```bash
|
||||
# Build the bundle
|
||||
pnpm run bundle
|
||||
|
||||
# Watch for development (auto-rebuild + restart)
|
||||
pnpm run watch
|
||||
```
|
||||
|
||||
The bundle is output to `./dist_serve/bundle.js` and served by the OpsServer.
|
||||
|
||||
### Adding a New View
|
||||
|
||||
1. Create a view component in `elements/`:
|
||||
```typescript
|
||||
import { DeesElement, customElement, html } from '@design.estate/dees-element';
|
||||
import { DeesElement, customElement, html, css } from '@design.estate/dees-element';
|
||||
|
||||
@customElement('ops-view-myview')
|
||||
export class OpsViewMyView extends DeesElement {
|
||||
public static styles = [css`:host { display: block; padding: 24px; }`];
|
||||
|
||||
public render() {
|
||||
return html`<div>My custom view</div>`;
|
||||
return html`<ops-sectionheading>My View</ops-sectionheading>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. Import and add to `ops-dashboard.ts`:
|
||||
```typescript
|
||||
import { OpsViewMyView } from './ops-view-myview.js';
|
||||
|
||||
private viewTabs = [
|
||||
// ... existing tabs
|
||||
{ name: 'MyView', element: OpsViewMyView }
|
||||
];
|
||||
```
|
||||
|
||||
3. Add route in `router.ts` if needed.
|
||||
2. Add it to the dashboard tabs in `ops-dashboard.ts`
|
||||
3. Add the route in `router.ts`
|
||||
4. Add any state management in `appstate.ts`
|
||||
|
||||
## License and Legal Information
|
||||
|
||||
|
||||
Reference in New Issue
Block a user