Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d5c265860c | |||
| 0f6bfe45aa | |||
| 33a97b410e | |||
| bd6bce04c9 | |||
| 204253f78c | |||
| d1c19389d7 | |||
| 77630cf540 | |||
| b835318a3b | |||
| 91194e1c0d | |||
| 01c77d9427 | |||
| bf451e7a17 | |||
| 75f82780e4 | |||
| f4f2f42e19 | |||
| 5310fa838e |
56
changelog.md
56
changelog.md
@@ -1,5 +1,61 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-02-23 - 2.5.0 - feat(sz-config-section)
|
||||
add header action buttons to sz-config-section allowing configurable actions/events
|
||||
|
||||
- Introduce IConfigSectionAction interface (label, icon, event, detail).
|
||||
- Add actions property to SzConfigSection and render header action buttons in the component template.
|
||||
- Add styles for .header-action and hover state to match design system.
|
||||
- Dispatch CustomEvent when an action is clicked, using action.event (defaults to 'action') and action.detail.
|
||||
- Update demo (sz-demo-view-config) to include a sample 'View Routes' action showing usage.
|
||||
|
||||
## 2026-02-23 - 2.4.0 - feat(elements)
|
||||
add configuration overview and section components with demo view and index exports
|
||||
|
||||
- Adds new sz-config-section component (IConfigField interface, rich renderers for boolean, pills, badge, code, link and 'Not configured' handling).
|
||||
- Adds new sz-config-overview wrapper component with heading/info banner and slot styling.
|
||||
- Adds demo view sz-demo-view-config that supplies example configuration groups and fields for System, Proxy, Email, DNS, TLS, Cache, RADIUS and Remote Ingress.
|
||||
- Exports new components from ts_web/elements/index.ts so they are available to the element registry.
|
||||
|
||||
## 2026-02-22 - 2.3.0 - feat(routes)
|
||||
add route UI components and demo view with list/card and app-shell integration
|
||||
|
||||
- Add new route UI components: sz-route-card, sz-route-list-view, and sz-demo-view-routes under ts_web/elements
|
||||
- Export new components from ts_web/elements/index.ts and register demo view in the demo app shell menu (ts_web/pages/sz-demo-app-shell.ts)
|
||||
- sz-route-card introduces route types/interfaces (IRouteConfig, IRouteAction, IRouteMatch, IRouteTls, IRouteSecurity) and rich rendering (ports/domains formatting, feature icons, security and headers display)
|
||||
- sz-route-list-view provides demo data, search, filtering (by action and enabled state), results count, grid rendering of sz-route-card, and emits a 'route-click' event
|
||||
- Demo view integrates with app UI secondary menu (actions and statistics) and wires up route-click handling for interactivity
|
||||
|
||||
## 2026-02-21 - 2.2.0 - feat(demo-mta)
|
||||
add MTA / Email demo views and components and integrate into demo app shell
|
||||
|
||||
- Add sz-mta-list-view component with search, direction/status filters, and a results table
|
||||
- Add sz-demo-view-mta demo page with sample emails and detailed SMTP log data; handles list -> detail navigation
|
||||
- Export new MTA elements from ts_web/elements/index.ts and register sz-demo-view-mta
|
||||
- Integrate MTA view into sz-demo-app-shell navigation and include it in the Infrastructure section
|
||||
|
||||
## 2026-02-20 - 2.1.0 - feat(catalog)
|
||||
add comprehensive README documenting package purpose, components, usage, development workflow, and legal information
|
||||
|
||||
- Adds new readme.md at repository root for @serve.zone/catalog describing 30+ UI components, tags, and example usage.
|
||||
- Includes installation instructions, import examples, demo app shell info, development scripts (pnpm install/watch/build/test) and project structure overview.
|
||||
- Documents TypeScript interfaces exported, component architecture patterns, and license/trademark/company contact details.
|
||||
|
||||
## 2026-02-20 - 2.0.1 - fix(catalog)
|
||||
no changes detected
|
||||
|
||||
- No files changed in the diff
|
||||
- package.json version remains 2.0.0
|
||||
|
||||
## 2026-02-20 - 2.0.0 - BREAKING CHANGE(elements)
|
||||
rename Onebox registry component to Registry Advertisement (sz-registry-onebox-view → sz-registry-advertisement) and update exports, demos and docs
|
||||
|
||||
- Replaced ts_web/elements/sz-registry-onebox-view.ts with ts_web/elements/sz-registry-advertisement.ts
|
||||
- Updated export in ts_web/elements/index.ts to export the new component
|
||||
- Updated demo (ts_web/elements/sz-demo-view-registries.ts) to use the new tag and updated headings/labels
|
||||
- Updated readme.hints.md to reference sz-registry-advertisement instead of sz-registry-onebox-view
|
||||
- Breaking change: custom element tag name changed; consumers must update any usages/imports
|
||||
|
||||
## 2026-02-20 - 1.1.0 - feat(elements)
|
||||
add demoGroups metadata, filter demo view wrappers in wcctools, and update demo payloads
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@serve.zone/catalog",
|
||||
"version": "1.1.0",
|
||||
"version": "2.5.0",
|
||||
"private": false,
|
||||
"description": "UI component catalog for serve.zone",
|
||||
"main": "dist_ts_web/index.js",
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
| Platform | sz-platform-services-card, sz-platform-service-detail-view |
|
||||
| Network | sz-network-proxy-view, sz-network-dns-view, sz-network-domains-view, sz-reverse-proxy-card, sz-dns-ssl-card, sz-certificates-card, sz-domain-detail-view |
|
||||
| Services | sz-services-list-view, sz-services-backups-view, sz-service-detail-view, sz-service-create-view |
|
||||
| Auth & Settings | sz-login-view, sz-tokens-view, sz-settings-view, sz-registry-onebox-view, sz-registry-external-view |
|
||||
| Auth & Settings | sz-login-view, sz-tokens-view, sz-settings-view, sz-registry-advertisement, sz-registry-external-view |
|
||||
|
||||
## Build
|
||||
- `pnpm run build` - tsbuild tsfolders + tsbundle element --production
|
||||
|
||||
230
readme.md
Normal file
230
readme.md
Normal file
@@ -0,0 +1,230 @@
|
||||
# @serve.zone/catalog
|
||||
|
||||
The complete UI component library for **serve.zone** — a full-featured admin and management interface for onebox server management, built as a collection of reusable web components.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
pnpm install @serve.zone/catalog
|
||||
```
|
||||
|
||||
## Issue Reporting and Security
|
||||
|
||||
For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://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/](https://code.foss.global/) account to submit Pull Requests directly.
|
||||
|
||||
## 🚀 What It Does
|
||||
|
||||
`@serve.zone/catalog` provides **30+ production-ready web components** covering every aspect of server management:
|
||||
|
||||
- 📊 **Dashboard** — Real-time cluster overview, resource usage, traffic metrics, quick actions
|
||||
- 🐳 **Services** — Docker container management, deployment, logs, live stats, backups, and an integrated IDE workspace
|
||||
- 🌐 **Network** — Reverse proxy configuration, DNS record management, domain & SSL certificate monitoring
|
||||
- 📦 **Registries** — Container registry management (onebox + external registries like Docker Hub, GHCR, ECR)
|
||||
- 🔑 **Auth** — Login view, API token management (global + CI tokens)
|
||||
- ⚙️ **Settings** — Appearance, Cloudflare integration, SSL/TLS config, network settings, account management
|
||||
- 🏗️ **Platform Services** — MongoDB, MinIO, ClickHouse, Redis, Caddy monitoring and control
|
||||
|
||||
Every component supports **light and dark themes** out of the box and communicates via standard `CustomEvent` dispatching.
|
||||
|
||||
## 📦 Usage
|
||||
|
||||
### Import
|
||||
|
||||
```typescript
|
||||
// Import everything
|
||||
import * as szCatalog from '@serve.zone/catalog';
|
||||
|
||||
// Or import specific components
|
||||
import { SzDashboardView, SzLoginView, SzServiceDetailView } from '@serve.zone/catalog';
|
||||
```
|
||||
|
||||
Components auto-register as custom elements when imported. Use them directly in your HTML:
|
||||
|
||||
```html
|
||||
<sz-dashboard-view .data="${dashboardData}"></sz-dashboard-view>
|
||||
<sz-login-view @login="${handleLogin}"></sz-login-view>
|
||||
<sz-service-detail-view .service="${serviceData}" .logs="${logEntries}"></sz-service-detail-view>
|
||||
```
|
||||
|
||||
### Full Application Shell
|
||||
|
||||
For a complete app experience, use the demo app shell which wires up sidebar navigation, app bar menus, and all views via `dees-appui`:
|
||||
|
||||
```typescript
|
||||
import '@serve.zone/catalog';
|
||||
// Then use <sz-demo-app-shell> for a fully configured application
|
||||
```
|
||||
|
||||
## 🧩 Component Reference
|
||||
|
||||
### Dashboard
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzDashboardView` | `<sz-dashboard-view>` | Main dashboard orchestrating all grid sections — cluster, services, network, infrastructure |
|
||||
| `SzStatCard` | `<sz-stat-card>` | Single statistic card with label, value, icon, and color variant |
|
||||
| `SzResourceUsageCard` | `<sz-resource-usage-card>` | CPU/memory progress bars, network I/O, top memory consumers |
|
||||
| `SzTrafficCard` | `<sz-traffic-card>` | HTTP traffic metrics — requests, errors, response time, status distribution |
|
||||
| `SzQuickActionsCard` | `<sz-quick-actions-card>` | Configurable action button grid |
|
||||
|
||||
### Dashboard Grids
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzStatusGridCluster` | `<sz-status-grid-cluster>` | 4-column stat card grid — total/running/stopped services, Docker status |
|
||||
| `SzStatusGridServices` | `<sz-status-grid-services>` | Resource usage + platform services side by side |
|
||||
| `SzStatusGridNetwork` | `<sz-status-grid-network>` | Traffic, reverse proxy, and certificates in a responsive grid |
|
||||
| `SzStatusGridInfra` | `<sz-status-grid-infra>` | DNS/SSL status + quick actions |
|
||||
|
||||
### Services
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzServicesListView` | `<sz-services-list-view>` | Table of deployed services with status badges and action buttons |
|
||||
| `SzServiceDetailView` | `<sz-service-detail-view>` | Full service detail page — info, logs, live stats, actions, backups, and integrated workspace/IDE mode |
|
||||
| `SzServiceCreateView` | `<sz-service-create-view>` | Service deployment form — image, ports, env vars, volumes, resource limits |
|
||||
| `SzServicesBackupsView` | `<sz-services-backups-view>` | Backup schedule and backup history management |
|
||||
|
||||
### Platform Services
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzPlatformServicesCard` | `<sz-platform-services-card>` | Lists infrastructure services (MongoDB, MinIO, etc.) with status indicators |
|
||||
| `SzPlatformServiceDetailView` | `<sz-platform-service-detail-view>` | Detailed platform service view — connection info, config, metrics, logs |
|
||||
|
||||
### Network
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzNetworkProxyView` | `<sz-network-proxy-view>` | Reverse proxy management — traffic targets table and access log viewer |
|
||||
| `SzNetworkDnsView` | `<sz-network-dns-view>` | DNS record management with Cloudflare sync |
|
||||
| `SzNetworkDomainsView` | `<sz-network-domains-view>` | Domain list with certificate status and provider info |
|
||||
| `SzDomainDetailView` | `<sz-domain-detail-view>` | Domain detail — SSL certificate info, proxy routes, DNS records |
|
||||
| `SzReverseProxyCard` | `<sz-reverse-proxy-card>` | Compact proxy status card (HTTP/HTTPS ports, route count) |
|
||||
| `SzDnsSslCard` | `<sz-dns-ssl-card>` | Cloudflare DNS and ACME config status |
|
||||
| `SzCertificatesCard` | `<sz-certificates-card>` | Certificate status counts — valid, expiring, expired |
|
||||
|
||||
### Registries
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzRegistryAdvertisement` | `<sz-registry-advertisement>` | Onebox registry info card with docker quick-start commands |
|
||||
| `SzRegistryExternalView` | `<sz-registry-external-view>` | External registry management (Docker Hub, GHCR, GCR, ECR) |
|
||||
|
||||
### Auth & Settings
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzLoginView` | `<sz-login-view>` | Login page with serve.zone branding, credentials form, error display |
|
||||
| `SzTokensView` | `<sz-tokens-view>` | API token management — global and CI tokens with copy/regenerate/delete |
|
||||
| `SzSettingsView` | `<sz-settings-view>` | Full settings panel — appearance, Cloudflare, SSL/TLS, network, account |
|
||||
|
||||
## 🏗️ Architecture
|
||||
|
||||
### Component Pattern
|
||||
|
||||
All components follow a consistent pattern:
|
||||
|
||||
```typescript
|
||||
import { DeesElement, customElement, html, css, cssManager, property } from '@design.estate/dees-element';
|
||||
|
||||
@customElement('sz-my-component')
|
||||
export class SzMyComponent extends DeesElement {
|
||||
// TC39 standard decorators with accessor keyword
|
||||
@property({ type: String })
|
||||
public accessor label: string = '';
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
/* Light/dark theme support */
|
||||
:host { color: ${cssManager.bdTheme('#18181b', '#fafafa')}; }
|
||||
`,
|
||||
];
|
||||
|
||||
// Events via CustomEvent (bubbles + composed for shadow DOM)
|
||||
private handleClick() {
|
||||
this.dispatchEvent(new CustomEvent('action', {
|
||||
detail: { id: this.id },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
@serve.zone/catalog/
|
||||
├── html/ # WccTools dev server entry point
|
||||
│ ├── index.html # HTML shell
|
||||
│ └── index.ts # WccTools config (pages + elements sections)
|
||||
├── ts_web/
|
||||
│ ├── index.ts # Barrel export
|
||||
│ ├── elements/ # All web components
|
||||
│ │ ├── index.ts # Element barrel export
|
||||
│ │ ├── sz-*.ts # Individual components
|
||||
│ │ └── sz-demo-view-*.ts # Demo orchestration wrappers
|
||||
│ └── pages/ # Page-level components
|
||||
│ ├── sz-demo-app-shell.ts # Full app shell (dees-appui)
|
||||
│ └── ...
|
||||
└── dist_ts_web/ # Compiled output (npm entry point)
|
||||
```
|
||||
|
||||
### TypeScript Interfaces
|
||||
|
||||
The library exports comprehensive TypeScript interfaces for all data structures:
|
||||
|
||||
```typescript
|
||||
// Dashboard
|
||||
import type { IDashboardData, IResourceUsage, ITrafficData, IClusterStats } from '@serve.zone/catalog';
|
||||
|
||||
// Services
|
||||
import type { IServiceDetail, IServiceStats, ILogEntry, IServiceBackup } from '@serve.zone/catalog';
|
||||
|
||||
// Network
|
||||
import type { IDomainDetail, ICertificateDetail, IDnsRecord, ITrafficTarget } from '@serve.zone/catalog';
|
||||
|
||||
// Settings & Auth
|
||||
import type { ISettings, IToken, IExternalRegistry } from '@serve.zone/catalog';
|
||||
```
|
||||
|
||||
## 🛠️ Development
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
pnpm install
|
||||
|
||||
# Start dev server (wcctools dashboard with live reload)
|
||||
pnpm run watch
|
||||
|
||||
# Production build
|
||||
pnpm run build
|
||||
|
||||
# Run tests
|
||||
pnpm test
|
||||
```
|
||||
|
||||
The **wcctools dev server** provides an interactive dashboard where every component is rendered with demo data. Components are organized by group (Dashboard, Services, Network, etc.) in the sidebar. Demo view wrappers (`sz-demo-view-*`) are filtered out from the element list — they serve as full-page orchestration demos accessible through the Pages section.
|
||||
|
||||
## 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](./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.
|
||||
|
||||
### Company Information
|
||||
|
||||
Task Venture Capital GmbH
|
||||
Registered at District Court Bremen HRB 35230 HB, Germany
|
||||
|
||||
For any legal inquiries or further information, please contact us via email at hello@task.vc.
|
||||
|
||||
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@serve.zone/catalog',
|
||||
version: '1.1.0',
|
||||
version: '2.5.0',
|
||||
description: 'UI component catalog for serve.zone'
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export * from './sz-network-dns-view.js';
|
||||
export * from './sz-network-domains-view.js';
|
||||
|
||||
// Registry Views
|
||||
export * from './sz-registry-onebox-view.js';
|
||||
export * from './sz-registry-advertisement.js';
|
||||
export * from './sz-registry-external-view.js';
|
||||
|
||||
// Services Views
|
||||
@@ -45,6 +45,18 @@ export * from './sz-service-create-view.js';
|
||||
export * from './sz-platform-service-detail-view.js';
|
||||
export * from './sz-domain-detail-view.js';
|
||||
|
||||
// MTA Email Views
|
||||
export * from './sz-mta-list-view.js';
|
||||
export * from './sz-mta-detail-view.js';
|
||||
|
||||
// Route Configuration Views
|
||||
export * from './sz-route-card.js';
|
||||
export * from './sz-route-list-view.js';
|
||||
|
||||
// Config Views
|
||||
export * from './sz-config-section.js';
|
||||
export * from './sz-config-overview.js';
|
||||
|
||||
// Demo Views
|
||||
export * from './sz-demo-view-dashboard.js';
|
||||
export * from './sz-demo-view-services.js';
|
||||
@@ -52,3 +64,6 @@ export * from './sz-demo-view-network.js';
|
||||
export * from './sz-demo-view-registries.js';
|
||||
export * from './sz-demo-view-tokens.js';
|
||||
export * from './sz-demo-view-settings.js';
|
||||
export * from './sz-demo-view-mta.js';
|
||||
export * from './sz-demo-view-routes.js';
|
||||
export * from './sz-demo-view-config.js';
|
||||
|
||||
92
ts_web/elements/sz-config-overview.ts
Normal file
92
ts_web/elements/sz-config-overview.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-config-overview': SzConfigOverview;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-config-overview')
|
||||
export class SzConfigOverview extends DeesElement {
|
||||
public static demo = () => html`<sz-config-overview
|
||||
heading="Configuration"
|
||||
infoText="This is a read-only view of the current running configuration."
|
||||
>
|
||||
<div style="padding: 20px; text-align: center; color: #71717a; font-size: 14px;">
|
||||
Place <sz-config-section> elements here
|
||||
</div>
|
||||
</sz-config-overview>`;
|
||||
|
||||
public static demoGroups = ['Configuration'];
|
||||
|
||||
@property({ type: String })
|
||||
public accessor heading: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public accessor infoText: string = '';
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.info-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 14px 18px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
background: ${cssManager.bdTheme('#eff6ff', 'rgba(59,130,246,0.08)')};
|
||||
border: 1px solid ${cssManager.bdTheme('#bfdbfe', 'rgba(59,130,246,0.2)')};
|
||||
color: ${cssManager.bdTheme('#1e40af', '#93c5fd')};
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-banner dees-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
::slotted(sz-config-section) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
::slotted(sz-config-section:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${this.heading ? html`<div class="heading">${this.heading}</div>` : ''}
|
||||
${this.infoText ? html`
|
||||
<div class="info-banner">
|
||||
<dees-icon .icon=${'lucide:info'}></dees-icon>
|
||||
<span>${this.infoText}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
}
|
||||
580
ts_web/elements/sz-config-section.ts
Normal file
580
ts_web/elements/sz-config-section.ts
Normal file
@@ -0,0 +1,580 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
state,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
export interface IConfigField {
|
||||
key: string;
|
||||
value: string | number | boolean | string[] | null;
|
||||
type?: 'text' | 'boolean' | 'badge' | 'pills' | 'code' | 'link';
|
||||
description?: string;
|
||||
linkTo?: string;
|
||||
}
|
||||
|
||||
export interface IConfigSectionAction {
|
||||
label: string;
|
||||
icon?: string;
|
||||
event?: string;
|
||||
detail?: any;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-config-section': SzConfigSection;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-config-section')
|
||||
export class SzConfigSection extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<sz-config-section
|
||||
title="SmartProxy"
|
||||
subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
|
||||
icon="lucide:network"
|
||||
status="enabled"
|
||||
.fields=${[
|
||||
{ key: 'Route Count', value: 12 },
|
||||
{ key: 'ACME Enabled', value: true, type: 'boolean' },
|
||||
{ key: 'Account Email', value: 'admin@example.com' },
|
||||
{ key: 'Use Production', value: true, type: 'boolean' },
|
||||
{ key: 'Auto Renew', value: true, type: 'boolean' },
|
||||
{ key: 'Renew Threshold', value: '30 days' },
|
||||
] as IConfigField[]}
|
||||
></sz-config-section>
|
||||
<sz-config-section
|
||||
title="Email Server"
|
||||
subtitle="SMTP email handling with smartmta"
|
||||
icon="lucide:mail"
|
||||
status="disabled"
|
||||
.fields=${[
|
||||
{ key: 'Ports', value: ['25', '465', '587'], type: 'pills' },
|
||||
{ key: 'Hostname', value: null },
|
||||
{ key: 'Domains', value: ['example.com', 'mail.example.com'], type: 'pills' },
|
||||
] as IConfigField[]}
|
||||
></sz-config-section>
|
||||
<sz-config-section
|
||||
title="DNS Server"
|
||||
subtitle="Authoritative DNS with smartdns"
|
||||
icon="lucide:globe"
|
||||
status="not-configured"
|
||||
collapsible
|
||||
.fields=${[
|
||||
{ key: 'Port', value: 53 },
|
||||
{ key: 'NS Domains', value: ['ns1.example.com', 'ns2.example.com'], type: 'pills' },
|
||||
] as IConfigField[]}
|
||||
></sz-config-section>
|
||||
`;
|
||||
|
||||
public static demoGroups = ['Configuration'];
|
||||
|
||||
@property({ type: String })
|
||||
public accessor title: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public accessor subtitle: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public accessor icon: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public accessor status: 'enabled' | 'disabled' | 'not-configured' | 'warning' = 'enabled';
|
||||
|
||||
@property({ type: Array })
|
||||
public accessor fields: IConfigField[] = [];
|
||||
|
||||
@property({ type: Array })
|
||||
public accessor actions: IConfigSectionAction[] = [];
|
||||
|
||||
@property({ type: Boolean })
|
||||
public accessor collapsible: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public accessor collapsed: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor isCollapsed: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 20px;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:host([collapsible]) .section-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:host([collapsible]) .section-header:hover {
|
||||
background: ${cssManager.bdTheme('#ebebed', '#1c1c1f')};
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-icon dees-icon {
|
||||
font-size: 18px;
|
||||
color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.header-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
line-height: 1.3;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Status badge */
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-badge.enabled {
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34,197,94,0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.status-badge.disabled {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239,68,68,0.2)')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.status-badge.not-configured {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', 'rgba(113,113,122,0.2)')};
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.status-badge.warning {
|
||||
background: ${cssManager.bdTheme('#fef3c7', 'rgba(245,158,11,0.15)')};
|
||||
color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-badge.enabled .status-dot {
|
||||
background: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.status-badge.disabled .status-dot {
|
||||
background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.status-badge.not-configured .status-dot {
|
||||
background: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
}
|
||||
|
||||
.status-badge.warning .status-dot {
|
||||
background: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
|
||||
}
|
||||
|
||||
/* Action buttons */
|
||||
.header-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease;
|
||||
white-space: nowrap;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.header-action:hover {
|
||||
background: ${cssManager.bdTheme('rgba(37,99,235,0.08)', 'rgba(96,165,250,0.1)')};
|
||||
}
|
||||
|
||||
.header-action dees-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Chevron */
|
||||
.chevron {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
|
||||
.chevron.collapsed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.chevron dees-icon {
|
||||
font-size: 16px;
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.section-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.section-content.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Field rows */
|
||||
.field-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')};
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.field-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.field-key {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
flex-shrink: 0;
|
||||
min-width: 140px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
font-size: 13px;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.field-value.null-value {
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
font-style: italic;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* Boolean display */
|
||||
.bool-value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bool-value.true {
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.bool-value.false {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.bool-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bool-value.true .bool-dot {
|
||||
background: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.bool-value.false .bool-dot {
|
||||
background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
/* Pills */
|
||||
.pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 9px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||||
background: ${cssManager.bdTheme('#eff6ff', 'rgba(59,130,246,0.1)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
/* Code value */
|
||||
.code-value {
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||||
font-size: 12px;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
/* Link value */
|
||||
.link-value {
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.link-value:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Description hint */
|
||||
.field-description {
|
||||
font-size: 11px;
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
margin-top: 3px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Slot for custom content */
|
||||
.slot-content {
|
||||
border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')};
|
||||
}
|
||||
|
||||
.slot-content:empty {
|
||||
display: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Badge type */
|
||||
.badge-value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 9px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
async connectedCallback() {
|
||||
await super.connectedCallback();
|
||||
this.isCollapsed = this.collapsed;
|
||||
if (this.collapsible) {
|
||||
this.setAttribute('collapsible', '');
|
||||
}
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
const statusLabels: Record<string, string> = {
|
||||
'enabled': 'Enabled',
|
||||
'disabled': 'Disabled',
|
||||
'not-configured': 'Not Configured',
|
||||
'warning': 'Warning',
|
||||
};
|
||||
|
||||
return html`
|
||||
<div class="section">
|
||||
<div
|
||||
class="section-header"
|
||||
@click=${() => {
|
||||
if (this.collapsible) {
|
||||
this.isCollapsed = !this.isCollapsed;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="header-left">
|
||||
${this.icon ? html`
|
||||
<div class="header-icon">
|
||||
<dees-icon .icon=${this.icon}></dees-icon>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="header-text">
|
||||
<div class="header-title">${this.title}</div>
|
||||
${this.subtitle ? html`<div class="header-subtitle">${this.subtitle}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
${this.status ? html`
|
||||
<span class="status-badge ${this.status}">
|
||||
<span class="status-dot"></span>
|
||||
${statusLabels[this.status] || this.status}
|
||||
</span>
|
||||
` : ''}
|
||||
${this.actions.map(action => html`
|
||||
<button class="header-action" @click=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.dispatchEvent(new CustomEvent(action.event || 'action', {
|
||||
detail: action.detail || { label: action.label },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}}>
|
||||
${action.icon ? html`<dees-icon .icon=${action.icon}></dees-icon>` : ''}
|
||||
${action.label}
|
||||
</button>
|
||||
`)}
|
||||
${this.collapsible ? html`
|
||||
<span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
|
||||
<dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
|
||||
</span>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content ${this.isCollapsed ? 'collapsed' : ''}">
|
||||
${this.fields.map(field => this.renderField(field))}
|
||||
<div class="slot-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderField(field: IConfigField): TemplateResult {
|
||||
return html`
|
||||
<div class="field-row">
|
||||
<div class="field-key">${field.key}</div>
|
||||
<div>
|
||||
${this.renderFieldValue(field)}
|
||||
${field.description ? html`<div class="field-description">${field.description}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderFieldValue(field: IConfigField): TemplateResult {
|
||||
const value = field.value;
|
||||
const type = field.type || this.inferType(value);
|
||||
|
||||
// Null / undefined
|
||||
if (value === null || value === undefined) {
|
||||
return html`<span class="field-value null-value">Not configured</span>`;
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'boolean':
|
||||
return html`
|
||||
<span class="bool-value ${value ? 'true' : 'false'}">
|
||||
<span class="bool-dot"></span>
|
||||
${value ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
`;
|
||||
|
||||
case 'pills':
|
||||
if (Array.isArray(value) && value.length === 0) {
|
||||
return html`<span class="field-value null-value">None</span>`;
|
||||
}
|
||||
return html`
|
||||
<div class="pills">
|
||||
${(value as string[]).map(v => html`<span class="pill">${v}</span>`)}
|
||||
</div>
|
||||
`;
|
||||
|
||||
case 'code':
|
||||
return html`<span class="code-value">${String(value)}</span>`;
|
||||
|
||||
case 'badge':
|
||||
return html`<span class="badge-value">${String(value)}</span>`;
|
||||
|
||||
case 'link':
|
||||
return html`
|
||||
<span
|
||||
class="link-value"
|
||||
@click=${() => {
|
||||
if (field.linkTo) {
|
||||
this.dispatchEvent(new CustomEvent('navigate', {
|
||||
detail: { target: field.linkTo },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
>${String(value)}</span>
|
||||
`;
|
||||
|
||||
default:
|
||||
return html`<span class="field-value">${String(value)}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
private inferType(value: unknown): string {
|
||||
if (typeof value === 'boolean') return 'boolean';
|
||||
if (Array.isArray(value)) return 'pills';
|
||||
return 'text';
|
||||
}
|
||||
}
|
||||
165
ts_web/elements/sz-demo-view-config.ts
Normal file
165
ts_web/elements/sz-demo-view-config.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import type { IConfigField, IConfigSectionAction } from './sz-config-section.js';
|
||||
import './index.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-demo-view-config': SzDemoViewConfig;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-demo-view-config')
|
||||
export class SzDemoViewConfig extends DeesElement {
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
const systemFields: IConfigField[] = [
|
||||
{ key: 'Base Directory', value: '/home/user/.serve.zone/dcrouter' },
|
||||
{ key: 'Data Directory', value: '/home/user/.serve.zone/dcrouter/data' },
|
||||
{ key: 'Public IP', value: '203.0.113.50' },
|
||||
{ key: 'Proxy IPs', value: ['203.0.113.10', '203.0.113.11'], type: 'pills' },
|
||||
{ key: 'Uptime', value: '3d 14h 22m' },
|
||||
{ key: 'Storage Backend', value: 'filesystem', type: 'badge' },
|
||||
];
|
||||
|
||||
const proxyFields: IConfigField[] = [
|
||||
{ key: 'Route Count', value: 12 },
|
||||
{ key: 'ACME Enabled', value: true, type: 'boolean' },
|
||||
{ key: 'Account Email', value: 'admin@serve.zone' },
|
||||
{ key: 'Use Production', value: true, type: 'boolean' },
|
||||
{ key: 'Auto Renew', value: true, type: 'boolean' },
|
||||
{ key: 'Renew Threshold', value: '30 days' },
|
||||
];
|
||||
|
||||
const emailFields: IConfigField[] = [
|
||||
{ key: 'Ports', value: ['25', '465', '587'], type: 'pills' },
|
||||
{ key: 'Hostname', value: 'mail.serve.zone' },
|
||||
{ key: 'Domains', value: ['serve.zone', 'mail.serve.zone'], type: 'pills' },
|
||||
{ key: 'Email Routes', value: 5 },
|
||||
{ key: 'Received Path', value: '/data/emails' },
|
||||
];
|
||||
|
||||
const dnsFields: IConfigField[] = [
|
||||
{ key: 'Port', value: 53 },
|
||||
{ key: 'NS Domains', value: ['ns1.serve.zone', 'ns2.serve.zone'], type: 'pills' },
|
||||
{ key: 'Scopes', value: ['serve.zone', 'example.com'], type: 'pills' },
|
||||
{ key: 'Record Count', value: 24 },
|
||||
{ key: 'DNS Challenge', value: true, type: 'boolean' },
|
||||
];
|
||||
|
||||
const tlsFields: IConfigField[] = [
|
||||
{ key: 'Contact Email', value: 'admin@serve.zone' },
|
||||
{ key: 'Domain', value: 'serve.zone' },
|
||||
{ key: 'Source', value: 'acme', type: 'badge' },
|
||||
{ key: 'Certificate Path', value: null },
|
||||
{ key: 'Key Path', value: null },
|
||||
];
|
||||
|
||||
const cacheFields: IConfigField[] = [
|
||||
{ key: 'Storage Path', value: '/home/user/.serve.zone/dcrouter/tsmdb' },
|
||||
{ key: 'DB Name', value: 'dcrouter' },
|
||||
{ key: 'Default TTL', value: '30 days' },
|
||||
{ key: 'Cleanup Interval', value: '1 hour' },
|
||||
];
|
||||
|
||||
const radiusFields: IConfigField[] = [
|
||||
{ key: 'Auth Port', value: null },
|
||||
{ key: 'Accounting Port', value: null },
|
||||
];
|
||||
|
||||
const remoteIngressFields: IConfigField[] = [
|
||||
{ key: 'Tunnel Port', value: 8443 },
|
||||
{ key: 'Hub Domain', value: 'hub.serve.zone' },
|
||||
{ key: 'TLS Configured', value: true, type: 'boolean' },
|
||||
];
|
||||
|
||||
return html`
|
||||
<sz-config-overview
|
||||
infoText="This view displays the current running configuration. DcRouter is configured through code or remote management."
|
||||
>
|
||||
<sz-config-section
|
||||
title="System"
|
||||
subtitle="Base paths and infrastructure"
|
||||
icon="lucide:server"
|
||||
status="enabled"
|
||||
.fields=${systemFields}
|
||||
></sz-config-section>
|
||||
|
||||
<sz-config-section
|
||||
title="SmartProxy"
|
||||
subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
|
||||
icon="lucide:network"
|
||||
status="enabled"
|
||||
.fields=${proxyFields}
|
||||
.actions=${[{ label: 'View Routes', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'routes' } }] as IConfigSectionAction[]}
|
||||
></sz-config-section>
|
||||
|
||||
<sz-config-section
|
||||
title="Email Server"
|
||||
subtitle="SMTP email handling with smartmta"
|
||||
icon="lucide:mail"
|
||||
status="enabled"
|
||||
.fields=${emailFields}
|
||||
></sz-config-section>
|
||||
|
||||
<sz-config-section
|
||||
title="DNS Server"
|
||||
subtitle="Authoritative DNS with smartdns"
|
||||
icon="lucide:globe"
|
||||
status="enabled"
|
||||
.fields=${dnsFields}
|
||||
></sz-config-section>
|
||||
|
||||
<sz-config-section
|
||||
title="TLS / Certificates"
|
||||
subtitle="Certificate management and ACME"
|
||||
icon="lucide:shield-check"
|
||||
status="enabled"
|
||||
.fields=${tlsFields}
|
||||
></sz-config-section>
|
||||
|
||||
<sz-config-section
|
||||
title="Cache Database"
|
||||
subtitle="Persistent caching with smartdata"
|
||||
icon="lucide:database"
|
||||
status="enabled"
|
||||
.fields=${cacheFields}
|
||||
></sz-config-section>
|
||||
|
||||
<sz-config-section
|
||||
title="RADIUS Server"
|
||||
subtitle="Network authentication and VLAN assignment"
|
||||
icon="lucide:wifi"
|
||||
status="not-configured"
|
||||
.fields=${radiusFields}
|
||||
></sz-config-section>
|
||||
|
||||
<sz-config-section
|
||||
title="Remote Ingress"
|
||||
subtitle="Edge tunnel nodes"
|
||||
icon="lucide:cloud"
|
||||
status="enabled"
|
||||
.fields=${remoteIngressFields}
|
||||
></sz-config-section>
|
||||
</sz-config-overview>
|
||||
`;
|
||||
}
|
||||
}
|
||||
335
ts_web/elements/sz-demo-view-mta.ts
Normal file
335
ts_web/elements/sz-demo-view-mta.ts
Normal file
@@ -0,0 +1,335 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import type { DeesAppui } from '@design.estate/dees-catalog';
|
||||
import type { IEmail, TEmailDirection } from './sz-mta-list-view.js';
|
||||
import type { IEmailDetail } from './sz-mta-detail-view.js';
|
||||
import './index.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-demo-view-mta': SzDemoViewMta;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-demo-view-mta')
|
||||
export class SzDemoViewMta extends DeesElement {
|
||||
private appui: DeesAppui | null = null;
|
||||
|
||||
@state()
|
||||
private accessor currentView: 'list' | 'detail' = 'list';
|
||||
|
||||
@state()
|
||||
private accessor selectedEmail: IEmailDetail | null = null;
|
||||
|
||||
@state()
|
||||
private accessor currentDirectionFilter: TEmailDirection | 'all' = 'all';
|
||||
|
||||
private demoEmails: IEmail[] = [
|
||||
{ id: '1', direction: 'outbound', status: 'delivered', from: 'noreply@serve.zone', to: 'user@example.com', subject: 'Welcome to serve.zone', timestamp: '2024-01-15 14:30:22', messageId: '<abc123@serve.zone>', size: '12.4 KB' },
|
||||
{ id: '2', direction: 'outbound', status: 'bounced', from: 'alerts@serve.zone', to: 'invalid@nowhere.test', subject: 'Service Alert: CPU Usage High', timestamp: '2024-01-15 14:28:10', messageId: '<def456@serve.zone>', size: '8.2 KB' },
|
||||
{ id: '3', direction: 'inbound', status: 'delivered', from: 'support@customer.com', to: 'admin@serve.zone', subject: 'Re: Infrastructure Review', timestamp: '2024-01-15 14:25:00', messageId: '<ghi789@customer.com>', size: '24.1 KB' },
|
||||
{ id: '4', direction: 'outbound', status: 'rejected', from: 'billing@serve.zone', to: 'blocked@spam-domain.test', subject: 'Invoice #2024-001', timestamp: '2024-01-15 14:20:45', messageId: '<jkl012@serve.zone>', size: '45.6 KB' },
|
||||
{ id: '5', direction: 'outbound', status: 'deferred', from: 'noreply@serve.zone', to: 'slow@remote-server.test', subject: 'Password Reset Request', timestamp: '2024-01-15 14:15:30', messageId: '<mno345@serve.zone>', size: '6.8 KB' },
|
||||
{ id: '6', direction: 'inbound', status: 'delivered', from: 'ci@github.com', to: 'devops@serve.zone', subject: 'Build #4521 passed', timestamp: '2024-01-15 14:10:00', messageId: '<pqr678@github.com>', size: '15.3 KB' },
|
||||
{ id: '7', direction: 'outbound', status: 'pending', from: 'reports@serve.zone', to: 'team@serve.zone', subject: 'Weekly Infrastructure Report', timestamp: '2024-01-15 14:05:00', messageId: '<stu901@serve.zone>', size: '102.7 KB' },
|
||||
{ id: '8', direction: 'inbound', status: 'delivered', from: 'monitoring@uptime.io', to: 'ops@serve.zone', subject: 'Uptime Report: 99.98%', timestamp: '2024-01-15 13:55:00', messageId: '<vwx234@uptime.io>', size: '9.1 KB' },
|
||||
];
|
||||
|
||||
private demoEmailDetails: Record<string, IEmailDetail> = {
|
||||
'1': {
|
||||
id: '1',
|
||||
direction: 'outbound',
|
||||
status: 'delivered',
|
||||
from: 'noreply@serve.zone',
|
||||
to: 'user@example.com',
|
||||
toList: ['user@example.com'],
|
||||
subject: 'Welcome to serve.zone',
|
||||
timestamp: '2024-01-15 14:30:22',
|
||||
messageId: '<abc123@serve.zone>',
|
||||
size: '12.4 KB',
|
||||
smtpLog: [
|
||||
{ timestamp: '14:30:20', direction: 'client', command: 'EHLO mail.serve.zone' },
|
||||
{ timestamp: '14:30:20', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
|
||||
{ timestamp: '14:30:20', direction: 'server', command: '250-STARTTLS', responseCode: 250 },
|
||||
{ timestamp: '14:30:20', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
|
||||
{ timestamp: '14:30:20', direction: 'client', command: 'STARTTLS' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '220 Ready to start TLS', responseCode: 220 },
|
||||
{ timestamp: '14:30:21', direction: 'client', command: 'EHLO mail.serve.zone' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250-AUTH PLAIN LOGIN', responseCode: 250 },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
|
||||
{ timestamp: '14:30:21', direction: 'client', command: 'AUTH PLAIN AHVzZXIAcGFzc3dvcmQ=' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '235 2.7.0 Authentication successful', responseCode: 235 },
|
||||
{ timestamp: '14:30:21', direction: 'client', command: 'MAIL FROM:<noreply@serve.zone>' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250 OK', responseCode: 250 },
|
||||
{ timestamp: '14:30:21', direction: 'client', command: 'RCPT TO:<user@example.com>' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250 Accepted', responseCode: 250 },
|
||||
{ timestamp: '14:30:22', direction: 'client', command: 'DATA' },
|
||||
{ timestamp: '14:30:22', direction: 'server', command: '354 Enter message, ending with "." on a line by itself', responseCode: 354 },
|
||||
{ timestamp: '14:30:22', direction: 'client', command: '.' },
|
||||
{ timestamp: '14:30:22', direction: 'server', command: '250 OK id=1pQ2rS-0003Ab-C4', responseCode: 250 },
|
||||
{ timestamp: '14:30:22', direction: 'client', command: 'QUIT' },
|
||||
{ timestamp: '14:30:22', direction: 'server', command: '221 mail.example.com closing connection', responseCode: 221 },
|
||||
],
|
||||
connectionInfo: {
|
||||
sourceIp: '10.0.1.50',
|
||||
sourceHostname: 'mail.serve.zone',
|
||||
destinationIp: '93.184.216.34',
|
||||
destinationPort: 25,
|
||||
tlsVersion: 'TLSv1.3',
|
||||
tlsCipher: 'TLS_AES_256_GCM_SHA384',
|
||||
authenticated: true,
|
||||
authMethod: 'PLAIN',
|
||||
authUser: 'noreply@serve.zone',
|
||||
},
|
||||
authenticationResults: {
|
||||
spf: 'pass',
|
||||
spfDomain: 'serve.zone',
|
||||
dkim: 'pass',
|
||||
dkimDomain: 'serve.zone',
|
||||
dmarc: 'pass',
|
||||
dmarcPolicy: 'reject',
|
||||
},
|
||||
headers: {
|
||||
'From': 'noreply@serve.zone',
|
||||
'To': 'user@example.com',
|
||||
'Subject': 'Welcome to serve.zone',
|
||||
'Date': 'Mon, 15 Jan 2024 14:30:22 +0000',
|
||||
'MIME-Version': '1.0',
|
||||
'Content-Type': 'text/html; charset=UTF-8',
|
||||
},
|
||||
body: '<html>\n<head><title>Welcome</title></head>\n<body>\n <h1>Welcome to serve.zone!</h1>\n <p>Your account has been created successfully.</p>\n <p>Get started by visiting your <a href="https://serve.zone/dashboard">dashboard</a>.</p>\n</body>\n</html>',
|
||||
},
|
||||
'2': {
|
||||
id: '2',
|
||||
direction: 'outbound',
|
||||
status: 'bounced',
|
||||
from: 'alerts@serve.zone',
|
||||
to: 'invalid@nowhere.test',
|
||||
toList: ['invalid@nowhere.test'],
|
||||
subject: 'Service Alert: CPU Usage High',
|
||||
timestamp: '2024-01-15 14:28:10',
|
||||
messageId: '<def456@serve.zone>',
|
||||
size: '8.2 KB',
|
||||
rejectionReason: '550 5.1.1 The email account that you tried to reach does not exist.',
|
||||
bounceMessage: 'Delivery to the following recipient failed permanently:\n\n invalid@nowhere.test\n\nTechnical details of permanent failure:\nGoogle tried to deliver your message, but it was rejected by the server for the recipient domain nowhere.test.',
|
||||
smtpLog: [
|
||||
{ timestamp: '14:28:08', direction: 'client', command: 'EHLO mail.serve.zone' },
|
||||
{ timestamp: '14:28:08', direction: 'server', command: '250-mail.nowhere.test Hello', responseCode: 250 },
|
||||
{ timestamp: '14:28:08', direction: 'client', command: 'MAIL FROM:<alerts@serve.zone>' },
|
||||
{ timestamp: '14:28:09', direction: 'server', command: '250 OK', responseCode: 250 },
|
||||
{ timestamp: '14:28:09', direction: 'client', command: 'RCPT TO:<invalid@nowhere.test>' },
|
||||
{ timestamp: '14:28:10', direction: 'server', command: '550 5.1.1 The email account that you tried to reach does not exist.', responseCode: 550 },
|
||||
{ timestamp: '14:28:10', direction: 'client', command: 'QUIT' },
|
||||
{ timestamp: '14:28:10', direction: 'server', command: '221 Bye', responseCode: 221 },
|
||||
],
|
||||
connectionInfo: {
|
||||
sourceIp: '10.0.1.50',
|
||||
sourceHostname: 'mail.serve.zone',
|
||||
destinationIp: '198.51.100.25',
|
||||
destinationPort: 25,
|
||||
tlsVersion: 'TLSv1.2',
|
||||
tlsCipher: 'ECDHE-RSA-AES128-GCM-SHA256',
|
||||
authenticated: true,
|
||||
authMethod: 'PLAIN',
|
||||
authUser: 'alerts@serve.zone',
|
||||
},
|
||||
authenticationResults: {
|
||||
spf: 'pass',
|
||||
spfDomain: 'serve.zone',
|
||||
dkim: 'pass',
|
||||
dkimDomain: 'serve.zone',
|
||||
dmarc: 'pass',
|
||||
dmarcPolicy: 'quarantine',
|
||||
},
|
||||
headers: {
|
||||
'From': 'alerts@serve.zone',
|
||||
'To': 'invalid@nowhere.test',
|
||||
'Subject': 'Service Alert: CPU Usage High',
|
||||
'Date': 'Mon, 15 Jan 2024 14:28:10 +0000',
|
||||
'MIME-Version': '1.0',
|
||||
'Content-Type': 'text/plain; charset=UTF-8',
|
||||
},
|
||||
body: 'ALERT: CPU Usage High\n\nService: api-gateway\nCurrent Usage: 94.2%\nThreshold: 90%\nTimestamp: 2024-01-15 14:28:00 UTC\n\nPlease investigate immediately.',
|
||||
},
|
||||
'3': {
|
||||
id: '3',
|
||||
direction: 'inbound',
|
||||
status: 'delivered',
|
||||
from: 'support@customer.com',
|
||||
to: 'admin@serve.zone',
|
||||
toList: ['admin@serve.zone'],
|
||||
cc: ['ops@serve.zone'],
|
||||
subject: 'Re: Infrastructure Review',
|
||||
timestamp: '2024-01-15 14:25:00',
|
||||
messageId: '<ghi789@customer.com>',
|
||||
size: '24.1 KB',
|
||||
smtpLog: [
|
||||
{ timestamp: '14:24:58', direction: 'client', command: 'EHLO mail.customer.com' },
|
||||
{ timestamp: '14:24:58', direction: 'server', command: '250-mail.serve.zone Hello', responseCode: 250 },
|
||||
{ timestamp: '14:24:58', direction: 'server', command: '250-STARTTLS', responseCode: 250 },
|
||||
{ timestamp: '14:24:58', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
|
||||
{ timestamp: '14:24:59', direction: 'client', command: 'STARTTLS' },
|
||||
{ timestamp: '14:24:59', direction: 'server', command: '220 Ready to start TLS', responseCode: 220 },
|
||||
{ timestamp: '14:24:59', direction: 'client', command: 'MAIL FROM:<support@customer.com>' },
|
||||
{ timestamp: '14:24:59', direction: 'server', command: '250 OK', responseCode: 250 },
|
||||
{ timestamp: '14:24:59', direction: 'client', command: 'RCPT TO:<admin@serve.zone>' },
|
||||
{ timestamp: '14:25:00', direction: 'server', command: '250 Accepted', responseCode: 250 },
|
||||
{ timestamp: '14:25:00', direction: 'client', command: 'DATA' },
|
||||
{ timestamp: '14:25:00', direction: 'server', command: '354 Enter message', responseCode: 354 },
|
||||
{ timestamp: '14:25:00', direction: 'client', command: '.' },
|
||||
{ timestamp: '14:25:00', direction: 'server', command: '250 OK id=2bR3sT-0004Cd-E5', responseCode: 250 },
|
||||
],
|
||||
connectionInfo: {
|
||||
sourceIp: '203.0.113.45',
|
||||
sourceHostname: 'mail.customer.com',
|
||||
destinationIp: '10.0.1.50',
|
||||
destinationPort: 25,
|
||||
tlsVersion: 'TLSv1.3',
|
||||
tlsCipher: 'TLS_AES_128_GCM_SHA256',
|
||||
authenticated: false,
|
||||
authMethod: '',
|
||||
authUser: '',
|
||||
},
|
||||
authenticationResults: {
|
||||
spf: 'pass',
|
||||
spfDomain: 'customer.com',
|
||||
dkim: 'pass',
|
||||
dkimDomain: 'customer.com',
|
||||
dmarc: 'pass',
|
||||
dmarcPolicy: 'none',
|
||||
},
|
||||
headers: {
|
||||
'From': 'support@customer.com',
|
||||
'To': 'admin@serve.zone',
|
||||
'CC': 'ops@serve.zone',
|
||||
'Subject': 'Re: Infrastructure Review',
|
||||
'Date': 'Mon, 15 Jan 2024 14:25:00 +0000',
|
||||
'MIME-Version': '1.0',
|
||||
'Content-Type': 'text/plain; charset=UTF-8',
|
||||
'In-Reply-To': '<prev123@serve.zone>',
|
||||
},
|
||||
body: 'Hi Admin,\n\nThank you for the detailed infrastructure review report.\n\nWe have reviewed the recommendations and would like to\nproceed with the following:\n\n1. Upgrade to the Pro tier\n2. Enable automatic backups\n3. Set up monitoring alerts\n\nPlease let us know the timeline for these changes.\n\nBest regards,\nCustomer Support Team',
|
||||
},
|
||||
};
|
||||
|
||||
async onActivate(context: { appui: DeesAppui; viewId: string }) {
|
||||
this.appui = context.appui;
|
||||
|
||||
this.appui.setContentTabs([
|
||||
{
|
||||
key: 'All Emails',
|
||||
action: () => {
|
||||
this.currentDirectionFilter = 'all';
|
||||
this.currentView = 'list';
|
||||
this.updateSecondaryMenu();
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'Inbound',
|
||||
action: () => {
|
||||
this.currentDirectionFilter = 'inbound';
|
||||
this.currentView = 'list';
|
||||
this.updateSecondaryMenu();
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'Outbound',
|
||||
action: () => {
|
||||
this.currentDirectionFilter = 'outbound';
|
||||
this.currentView = 'list';
|
||||
this.updateSecondaryMenu();
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
this.updateSecondaryMenu();
|
||||
}
|
||||
|
||||
private updateSecondaryMenu() {
|
||||
if (!this.appui) return;
|
||||
|
||||
this.appui.setSecondaryMenu({
|
||||
heading: 'Email / MTA',
|
||||
groups: [
|
||||
{
|
||||
name: 'Actions',
|
||||
items: [
|
||||
{ type: 'action', key: 'Refresh', iconName: 'lucide:RefreshCw', action: () => { console.log('Refresh emails'); } },
|
||||
{ type: 'action', key: 'Export Logs', iconName: 'lucide:Download', action: () => { console.log('Export logs'); } },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Status Filters',
|
||||
items: [
|
||||
{ key: 'Delivered', iconName: 'lucide:CheckCircle', badge: '5', badgeVariant: 'success' as const, action: () => { console.log('Filter delivered'); } },
|
||||
{ key: 'Bounced', iconName: 'lucide:XCircle', badge: '1', badgeVariant: 'error' as const, action: () => { console.log('Filter bounced'); } },
|
||||
{ key: 'Deferred', iconName: 'lucide:Clock', badge: '1', badgeVariant: 'warning' as const, action: () => { console.log('Filter deferred'); } },
|
||||
{ key: 'Pending', iconName: 'lucide:Loader', badge: '1', action: () => { console.log('Filter pending'); } },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Statistics',
|
||||
items: [
|
||||
{ type: 'header' as const, label: '8 Total Emails' },
|
||||
{ type: 'header' as const, label: '62.5% Delivery Rate' },
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
onDeactivate() {
|
||||
// Cleanup if needed
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (this.currentView === 'detail' && this.selectedEmail) {
|
||||
return html`
|
||||
<sz-mta-detail-view
|
||||
.email=${this.selectedEmail}
|
||||
@back=${() => { this.currentView = 'list'; this.selectedEmail = null; }}
|
||||
></sz-mta-detail-view>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<sz-mta-list-view
|
||||
.emails=${this.currentDirectionFilter === 'all'
|
||||
? this.demoEmails
|
||||
: this.demoEmails.filter(e => e.direction === this.currentDirectionFilter)}
|
||||
@email-click=${(e: CustomEvent<IEmail>) => this.handleEmailClick(e.detail)}
|
||||
></sz-mta-list-view>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleEmailClick(email: IEmail) {
|
||||
const detail = this.demoEmailDetails[email.id];
|
||||
if (detail) {
|
||||
this.selectedEmail = detail;
|
||||
this.currentView = 'detail';
|
||||
} else {
|
||||
console.log('No detail data available for email:', email.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,7 +29,7 @@ export class SzDemoViewRegistries extends DeesElement {
|
||||
// Set up content tabs
|
||||
this.appui.setContentTabs([
|
||||
{
|
||||
key: 'Onebox Registry',
|
||||
key: 'Registry Advertisement',
|
||||
action: () => {
|
||||
this.currentTab = 'onebox';
|
||||
this.updateSecondaryMenu();
|
||||
@@ -52,7 +52,7 @@ export class SzDemoViewRegistries extends DeesElement {
|
||||
|
||||
if (this.currentTab === 'onebox') {
|
||||
this.appui.setSecondaryMenu({
|
||||
heading: 'Onebox Registry',
|
||||
heading: 'Registry Advertisement',
|
||||
groups: [
|
||||
{
|
||||
name: 'Actions',
|
||||
@@ -181,7 +181,7 @@ export class SzDemoViewRegistries extends DeesElement {
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${this.currentTab === 'onebox' ? html`
|
||||
<sz-registry-onebox-view
|
||||
<sz-registry-advertisement
|
||||
.images=${this.demoOneboxImages}
|
||||
.stats=${{
|
||||
totalImages: 4,
|
||||
@@ -191,7 +191,7 @@ export class SzDemoViewRegistries extends DeesElement {
|
||||
@view-image=${(e: CustomEvent) => console.log('View image:', e.detail)}
|
||||
@delete-image=${(e: CustomEvent) => console.log('Delete image:', e.detail)}
|
||||
@delete-tag=${(e: CustomEvent) => console.log('Delete tag:', e.detail)}
|
||||
></sz-registry-onebox-view>
|
||||
></sz-registry-advertisement>
|
||||
` : html`
|
||||
<sz-registry-external-view
|
||||
.registries=${this.demoExternalRegistries}
|
||||
|
||||
362
ts_web/elements/sz-demo-view-routes.ts
Normal file
362
ts_web/elements/sz-demo-view-routes.ts
Normal file
@@ -0,0 +1,362 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
import type { DeesAppui } from '@design.estate/dees-catalog';
|
||||
import type { IRouteConfig } from './sz-route-card.js';
|
||||
import './index.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-demo-view-routes': SzDemoViewRoutes;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-demo-view-routes')
|
||||
export class SzDemoViewRoutes extends DeesElement {
|
||||
private appui: DeesAppui | null = null;
|
||||
|
||||
@state()
|
||||
private accessor currentTab: 'all' | 'https' | 'email' | 'dns' = 'all';
|
||||
|
||||
private demoRoutes: IRouteConfig[] = [
|
||||
// 1. HTTPS with TLS termination + auto cert
|
||||
{
|
||||
id: 'route-1',
|
||||
name: 'Web Frontend',
|
||||
description: 'Main website with TLS termination and automatic certificates',
|
||||
enabled: true,
|
||||
priority: 10,
|
||||
tags: ['web', 'https', 'production'],
|
||||
match: {
|
||||
ports: 443,
|
||||
domains: ['serve.zone', 'www.serve.zone'],
|
||||
protocol: 'http',
|
||||
},
|
||||
action: {
|
||||
type: 'forward',
|
||||
targets: [{ host: '10.0.0.10', port: 3000 }],
|
||||
tls: { mode: 'terminate', certificate: 'auto' },
|
||||
},
|
||||
},
|
||||
// 2. HTTP to HTTPS redirect
|
||||
{
|
||||
id: 'route-2',
|
||||
name: 'HTTP Redirect',
|
||||
description: 'Redirects all HTTP traffic to HTTPS',
|
||||
enabled: true,
|
||||
priority: 100,
|
||||
tags: ['web', 'http', 'redirect'],
|
||||
match: {
|
||||
ports: 80,
|
||||
domains: ['serve.zone', 'www.serve.zone'],
|
||||
protocol: 'http',
|
||||
},
|
||||
action: {
|
||||
type: 'socket-handler',
|
||||
},
|
||||
},
|
||||
// 3. Email SMTP route
|
||||
{
|
||||
id: 'route-3',
|
||||
name: 'SMTP Inbound',
|
||||
description: 'Inbound email relay for serve.zone domain',
|
||||
enabled: true,
|
||||
tags: ['email', 'smtp', 'production'],
|
||||
match: {
|
||||
ports: 25,
|
||||
domains: 'mail.serve.zone',
|
||||
},
|
||||
action: {
|
||||
type: 'forward',
|
||||
targets: [{ host: '10.0.1.5', port: 25 }],
|
||||
tls: { mode: 'terminate', certificate: 'auto' },
|
||||
},
|
||||
},
|
||||
// 4. API gateway with path matching, rate limiting, CORS
|
||||
{
|
||||
id: 'route-4',
|
||||
name: 'API Gateway',
|
||||
description: 'API gateway with rate limiting, CORS headers, and load balancing',
|
||||
enabled: true,
|
||||
priority: 20,
|
||||
tags: ['web', 'api', 'https', 'production'],
|
||||
match: {
|
||||
ports: 443,
|
||||
domains: 'api.serve.zone',
|
||||
path: '/v2/*',
|
||||
protocol: 'http',
|
||||
},
|
||||
action: {
|
||||
type: 'forward',
|
||||
targets: [
|
||||
{ host: ['10.0.0.20', '10.0.0.21', '10.0.0.22'], port: 8080 },
|
||||
],
|
||||
tls: { mode: 'terminate', certificate: 'auto' },
|
||||
loadBalancing: { algorithm: 'round-robin' },
|
||||
},
|
||||
security: {
|
||||
rateLimit: { enabled: true, maxRequests: 200, window: 60 },
|
||||
maxConnections: 5000,
|
||||
},
|
||||
headers: {
|
||||
response: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'X-Request-Id': '{{requestId}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
// 5. WebSocket route
|
||||
{
|
||||
id: 'route-5',
|
||||
name: 'WebSocket Realtime',
|
||||
description: 'Real-time WebSocket connections for live updates',
|
||||
enabled: true,
|
||||
tags: ['web', 'https', 'websocket'],
|
||||
match: {
|
||||
ports: 443,
|
||||
domains: 'ws.serve.zone',
|
||||
path: '/ws/*',
|
||||
protocol: 'http',
|
||||
},
|
||||
action: {
|
||||
type: 'forward',
|
||||
targets: [{ host: '10.0.0.30', port: 9090 }],
|
||||
tls: { mode: 'terminate', certificate: 'auto' },
|
||||
websocket: { enabled: true },
|
||||
},
|
||||
},
|
||||
// 6. Wildcard domain route
|
||||
{
|
||||
id: 'route-6',
|
||||
name: 'Tenant Wildcard',
|
||||
description: 'Multi-tenant wildcard routing for customer subdomains',
|
||||
enabled: true,
|
||||
priority: 50,
|
||||
tags: ['web', 'https', 'multi-tenant'],
|
||||
match: {
|
||||
ports: 443,
|
||||
domains: '*.customers.serve.zone',
|
||||
protocol: 'http',
|
||||
},
|
||||
action: {
|
||||
type: 'forward',
|
||||
targets: [{ host: '10.0.0.40', port: 8080 }],
|
||||
tls: { mode: 'terminate', certificate: 'auto' },
|
||||
},
|
||||
security: {
|
||||
ipAllowList: ['10.0.0.0/8', '172.16.0.0/12'],
|
||||
},
|
||||
},
|
||||
// 7. Load-balanced route with health check
|
||||
{
|
||||
id: 'route-7',
|
||||
name: 'Microservices LB',
|
||||
description: 'Load-balanced microservices backend with IP-hash affinity',
|
||||
enabled: true,
|
||||
tags: ['web', 'https', 'production'],
|
||||
match: {
|
||||
ports: [443, 8443],
|
||||
domains: 'services.serve.zone',
|
||||
protocol: 'http',
|
||||
},
|
||||
action: {
|
||||
type: 'forward',
|
||||
targets: [
|
||||
{ host: ['10.0.2.1', '10.0.2.2', '10.0.2.3', '10.0.2.4'], port: 3000 },
|
||||
],
|
||||
tls: { mode: 'terminate-and-reencrypt', certificate: 'auto' },
|
||||
loadBalancing: { algorithm: 'ip-hash' },
|
||||
},
|
||||
},
|
||||
// 8. DNS-over-HTTPS route
|
||||
{
|
||||
id: 'route-8',
|
||||
name: 'DNS over HTTPS',
|
||||
description: 'DNS-over-HTTPS resolver endpoint',
|
||||
enabled: true,
|
||||
tags: ['dns', 'https'],
|
||||
match: {
|
||||
ports: 443,
|
||||
domains: 'dns.serve.zone',
|
||||
path: '/dns-query',
|
||||
protocol: 'http',
|
||||
},
|
||||
action: {
|
||||
type: 'forward',
|
||||
targets: [{ host: '10.0.3.1', port: 8053 }],
|
||||
tls: { mode: 'terminate', certificate: 'auto' },
|
||||
},
|
||||
},
|
||||
// 9. NFTables high-performance route
|
||||
{
|
||||
id: 'route-9',
|
||||
name: 'High-Perf TCP Proxy',
|
||||
description: 'NFTables-accelerated TCP proxy for game servers',
|
||||
enabled: true,
|
||||
tags: ['tcp', 'nftables', 'production'],
|
||||
match: {
|
||||
ports: [{ from: 27000, to: 27050 }],
|
||||
protocol: 'tcp',
|
||||
},
|
||||
action: {
|
||||
type: 'forward',
|
||||
targets: [{ host: '10.0.4.1', port: 'preserve' }],
|
||||
forwardingEngine: 'nftables',
|
||||
},
|
||||
},
|
||||
// 10. Disabled maintenance route
|
||||
{
|
||||
id: 'route-10',
|
||||
name: 'Legacy Admin Panel',
|
||||
description: 'Deprecated admin panel — disabled for maintenance',
|
||||
enabled: false,
|
||||
tags: ['web', 'https', 'deprecated'],
|
||||
match: {
|
||||
ports: 443,
|
||||
domains: 'admin-old.serve.zone',
|
||||
protocol: 'http',
|
||||
},
|
||||
action: {
|
||||
type: 'socket-handler',
|
||||
},
|
||||
security: {
|
||||
ipBlockList: ['0.0.0.0/0'],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
private get filteredRoutes(): IRouteConfig[] {
|
||||
if (this.currentTab === 'all') return this.demoRoutes;
|
||||
if (this.currentTab === 'https') {
|
||||
return this.demoRoutes.filter((r) =>
|
||||
r.tags?.some((t) => ['web', 'https', 'http'].includes(t))
|
||||
);
|
||||
}
|
||||
if (this.currentTab === 'email') {
|
||||
return this.demoRoutes.filter((r) =>
|
||||
r.tags?.some((t) => ['email', 'smtp'].includes(t))
|
||||
);
|
||||
}
|
||||
if (this.currentTab === 'dns') {
|
||||
return this.demoRoutes.filter((r) =>
|
||||
r.tags?.some((t) => ['dns'].includes(t))
|
||||
);
|
||||
}
|
||||
return this.demoRoutes;
|
||||
}
|
||||
|
||||
async onActivate(context: { appui: DeesAppui; viewId: string }) {
|
||||
this.appui = context.appui;
|
||||
|
||||
this.appui.setContentTabs([
|
||||
{
|
||||
key: 'All Routes',
|
||||
action: () => {
|
||||
this.currentTab = 'all';
|
||||
this.updateSecondaryMenu();
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'HTTP/S',
|
||||
action: () => {
|
||||
this.currentTab = 'https';
|
||||
this.updateSecondaryMenu();
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'Email',
|
||||
action: () => {
|
||||
this.currentTab = 'email';
|
||||
this.updateSecondaryMenu();
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'DNS',
|
||||
action: () => {
|
||||
this.currentTab = 'dns';
|
||||
this.updateSecondaryMenu();
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
this.updateSecondaryMenu();
|
||||
}
|
||||
|
||||
private updateSecondaryMenu() {
|
||||
if (!this.appui) return;
|
||||
|
||||
const total = this.demoRoutes.length;
|
||||
const active = this.demoRoutes.filter((r) => r.enabled !== false).length;
|
||||
const forwardCount = this.demoRoutes.filter((r) => r.action.type === 'forward').length;
|
||||
|
||||
this.appui.setSecondaryMenu({
|
||||
heading: 'Routes',
|
||||
groups: [
|
||||
{
|
||||
name: 'Actions',
|
||||
items: [
|
||||
{
|
||||
type: 'action',
|
||||
key: 'Refresh',
|
||||
iconName: 'lucide:RefreshCw',
|
||||
action: () => {
|
||||
console.log('Refresh routes');
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'action',
|
||||
key: 'Add Route',
|
||||
iconName: 'lucide:Plus',
|
||||
action: () => {
|
||||
console.log('Add route');
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Statistics',
|
||||
items: [
|
||||
{ type: 'header' as const, label: `${total} Total Routes` },
|
||||
{ type: 'header' as const, label: `${active} Active` },
|
||||
{ type: 'header' as const, label: `${forwardCount} Forward` },
|
||||
{ type: 'header' as const, label: `${total - forwardCount} Socket Handler` },
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
onDeactivate() {
|
||||
// Cleanup if needed
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<sz-route-list-view
|
||||
.routes=${this.filteredRoutes}
|
||||
@route-click=${(e: CustomEvent<IRouteConfig>) => {
|
||||
console.log('Route clicked:', e.detail.name);
|
||||
}}
|
||||
></sz-route-list-view>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -342,6 +342,7 @@ export class SzDemoViewServices extends DeesElement {
|
||||
@start=${() => console.log('Start')}
|
||||
@stop=${() => console.log('Stop')}
|
||||
@restart=${() => console.log('Restart')}
|
||||
@request-workspace=${(e: CustomEvent) => console.log('Workspace requested for:', e.detail.service.name)}
|
||||
></sz-service-detail-view>
|
||||
`;
|
||||
}
|
||||
|
||||
933
ts_web/elements/sz-mta-detail-view.ts
Normal file
933
ts_web/elements/sz-mta-detail-view.ts
Normal file
@@ -0,0 +1,933 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import type { IEmail } from './sz-mta-list-view.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-mta-detail-view': SzMtaDetailView;
|
||||
}
|
||||
}
|
||||
|
||||
export interface ISmtpLogEntry {
|
||||
timestamp: string;
|
||||
direction: 'client' | 'server';
|
||||
command: string;
|
||||
responseCode?: number;
|
||||
}
|
||||
|
||||
export interface IConnectionInfo {
|
||||
sourceIp: string;
|
||||
sourceHostname: string;
|
||||
destinationIp: string;
|
||||
destinationPort: number;
|
||||
tlsVersion: string;
|
||||
tlsCipher: string;
|
||||
authenticated: boolean;
|
||||
authMethod: string;
|
||||
authUser: string;
|
||||
}
|
||||
|
||||
export interface IAuthenticationResults {
|
||||
spf: 'pass' | 'fail' | 'softfail' | 'neutral' | 'none';
|
||||
spfDomain: string;
|
||||
dkim: 'pass' | 'fail' | 'none';
|
||||
dkimDomain: string;
|
||||
dmarc: 'pass' | 'fail' | 'none';
|
||||
dmarcPolicy: string;
|
||||
}
|
||||
|
||||
export interface IEmailDetail extends IEmail {
|
||||
to: string;
|
||||
toList: string[];
|
||||
cc?: string[];
|
||||
smtpLog: ISmtpLogEntry[];
|
||||
connectionInfo: IConnectionInfo;
|
||||
authenticationResults: IAuthenticationResults;
|
||||
rejectionReason?: string;
|
||||
bounceMessage?: string;
|
||||
headers: Record<string, string>;
|
||||
body: string;
|
||||
}
|
||||
|
||||
@customElement('sz-mta-detail-view')
|
||||
export class SzMtaDetailView extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="padding: 24px; max-width: 1200px;">
|
||||
<sz-mta-detail-view
|
||||
.email=${{
|
||||
id: '1',
|
||||
direction: 'outbound',
|
||||
status: 'delivered',
|
||||
from: 'noreply@serve.zone',
|
||||
to: 'user@example.com',
|
||||
toList: ['user@example.com'],
|
||||
subject: 'Welcome to serve.zone',
|
||||
timestamp: '2024-01-15 14:30:22',
|
||||
messageId: '<abc123@serve.zone>',
|
||||
size: '12.4 KB',
|
||||
smtpLog: [
|
||||
{ timestamp: '14:30:20', direction: 'client', command: 'EHLO mail.serve.zone' },
|
||||
{ timestamp: '14:30:20', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
|
||||
{ timestamp: '14:30:20', direction: 'server', command: '250-STARTTLS', responseCode: 250 },
|
||||
{ timestamp: '14:30:20', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
|
||||
{ timestamp: '14:30:20', direction: 'client', command: 'STARTTLS' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '220 Ready to start TLS', responseCode: 220 },
|
||||
{ timestamp: '14:30:21', direction: 'client', command: 'EHLO mail.serve.zone' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250-AUTH PLAIN LOGIN', responseCode: 250 },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
|
||||
{ timestamp: '14:30:21', direction: 'client', command: 'AUTH PLAIN AHVzZXIAcGFzc3dvcmQ=' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '235 2.7.0 Authentication successful', responseCode: 235 },
|
||||
{ timestamp: '14:30:21', direction: 'client', command: 'MAIL FROM:<noreply@serve.zone>' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250 OK', responseCode: 250 },
|
||||
{ timestamp: '14:30:21', direction: 'client', command: 'RCPT TO:<user@example.com>' },
|
||||
{ timestamp: '14:30:21', direction: 'server', command: '250 Accepted', responseCode: 250 },
|
||||
{ timestamp: '14:30:22', direction: 'client', command: 'DATA' },
|
||||
{ timestamp: '14:30:22', direction: 'server', command: '354 Enter message, ending with "." on a line by itself', responseCode: 354 },
|
||||
{ timestamp: '14:30:22', direction: 'client', command: '.' },
|
||||
{ timestamp: '14:30:22', direction: 'server', command: '250 OK id=1pQ2rS-0003Ab-C4', responseCode: 250 },
|
||||
{ timestamp: '14:30:22', direction: 'client', command: 'QUIT' },
|
||||
{ timestamp: '14:30:22', direction: 'server', command: '221 mail.example.com closing connection', responseCode: 221 },
|
||||
],
|
||||
connectionInfo: {
|
||||
sourceIp: '10.0.1.50',
|
||||
sourceHostname: 'mail.serve.zone',
|
||||
destinationIp: '93.184.216.34',
|
||||
destinationPort: 25,
|
||||
tlsVersion: 'TLSv1.3',
|
||||
tlsCipher: 'TLS_AES_256_GCM_SHA384',
|
||||
authenticated: true,
|
||||
authMethod: 'PLAIN',
|
||||
authUser: 'noreply@serve.zone',
|
||||
},
|
||||
authenticationResults: {
|
||||
spf: 'pass',
|
||||
spfDomain: 'serve.zone',
|
||||
dkim: 'pass',
|
||||
dkimDomain: 'serve.zone',
|
||||
dmarc: 'pass',
|
||||
dmarcPolicy: 'reject',
|
||||
},
|
||||
headers: {
|
||||
'From': 'noreply@serve.zone',
|
||||
'To': 'user@example.com',
|
||||
'Subject': 'Welcome to serve.zone',
|
||||
'Date': 'Mon, 15 Jan 2024 14:30:22 +0000',
|
||||
'MIME-Version': '1.0',
|
||||
'Content-Type': 'text/html; charset=UTF-8',
|
||||
},
|
||||
body: '<html>\\n<head><title>Welcome</title></head>\\n<body>\\n <h1>Welcome to serve.zone!</h1>\\n <p>Your account has been created successfully.</p>\\n <a href="https://serve.zone/dashboard">Go to Dashboard</a>\\n</body>\\n</html>',
|
||||
}}
|
||||
></sz-mta-detail-view>
|
||||
</div>
|
||||
`;
|
||||
|
||||
public static demoGroups = ['MTA'];
|
||||
|
||||
@property({ type: Object })
|
||||
public accessor email: IEmailDetail | null = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
cursor: pointer;
|
||||
transition: color 200ms ease;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.email-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.email-subject {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.badge-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: 9999px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge.delivered {
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.status-badge.bounced,
|
||||
.status-badge.rejected {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.status-badge.deferred {
|
||||
background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.direction-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 9999px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.direction-badge.inbound {
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.direction-badge.outbound {
|
||||
background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.content {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.smtp-log-container {
|
||||
padding: 16px;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')} transparent;
|
||||
}
|
||||
|
||||
.smtp-log-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.smtp-log-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.smtp-log-container::-webkit-scrollbar-thumb {
|
||||
background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Phase separators */
|
||||
.smtp-phase-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.smtp-phase-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
}
|
||||
|
||||
.smtp-phase-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Chat bubbles */
|
||||
.smtp-bubble {
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.smtp-bubble.client {
|
||||
align-self: flex-start;
|
||||
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.08)', 'rgba(59, 130, 246, 0.12)')};
|
||||
border-left: 3px solid ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.smtp-bubble.server {
|
||||
align-self: flex-end;
|
||||
background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.06)', 'rgba(34, 197, 94, 0.10)')};
|
||||
border-right: 3px solid ${cssManager.bdTheme('#22c55e', '#4ade80')};
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.smtp-bubble-command {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.smtp-bubble-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
}
|
||||
|
||||
.smtp-bubble.server .smtp-bubble-meta {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.smtp-direction-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.smtp-direction-tag.client {
|
||||
color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
||||
}
|
||||
|
||||
.smtp-direction-tag.server {
|
||||
color: ${cssManager.bdTheme('#22c55e', '#4ade80')};
|
||||
}
|
||||
|
||||
/* Response code badges */
|
||||
.response-code-badge {
|
||||
display: inline-block;
|
||||
padding: 1px 7px;
|
||||
border-radius: 9999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||||
}
|
||||
|
||||
.response-code-badge.code-2xx {
|
||||
background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.15)', 'rgba(34, 197, 94, 0.25)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.response-code-badge.code-3xx {
|
||||
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.15)', 'rgba(59, 130, 246, 0.25)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.response-code-badge.code-4xx {
|
||||
background: ${cssManager.bdTheme('rgba(250, 204, 21, 0.15)', 'rgba(250, 204, 21, 0.25)')};
|
||||
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
|
||||
}
|
||||
|
||||
.response-code-badge.code-5xx {
|
||||
background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.15)', 'rgba(239, 68, 68, 0.25)')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
/* Copy button */
|
||||
.smtp-copy-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
background: transparent;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.smtp-copy-button:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
}
|
||||
|
||||
/* Header subtitle enhancements */
|
||||
.smtp-header-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.smtp-direction-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.smtp-direction-badge.inbound {
|
||||
background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.12)', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.smtp-direction-badge.outbound {
|
||||
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.12)', 'rgba(59, 130, 246, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.email-body-container {
|
||||
padding: 16px;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.tls-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.auth-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
}
|
||||
|
||||
.auth-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.auth-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.auth-domain {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.auth-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auth-badge.pass {
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.auth-badge.fail {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.auth-badge.softfail,
|
||||
.auth-badge.neutral,
|
||||
.auth-badge.none {
|
||||
background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
|
||||
}
|
||||
|
||||
.rejection-card {
|
||||
border-color: ${cssManager.bdTheme('#fecaca', 'rgba(239, 68, 68, 0.3)')};
|
||||
}
|
||||
|
||||
.rejection-content {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.rejection-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.rejection-text {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
background: ${cssManager.bdTheme('#fef2f2', 'rgba(239, 68, 68, 0.1)')};
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
color: ${cssManager.bdTheme('#991b1b', '#fca5a5')};
|
||||
}
|
||||
|
||||
.rejection-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.no-email {
|
||||
padding: 48px 24px;
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.email) {
|
||||
return html`<div class="no-email">No email selected</div>`;
|
||||
}
|
||||
|
||||
const email = this.email;
|
||||
|
||||
return html`
|
||||
<div class="header">
|
||||
<div class="back-link" @click=${() => this.handleBack()}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
</svg>
|
||||
Back to Emails
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="email-header">
|
||||
<h1 class="email-subject">${email.subject}</h1>
|
||||
<div class="badge-group">
|
||||
<span class="status-badge ${email.status}">${email.status}</span>
|
||||
<span class="direction-badge ${email.direction}">${email.direction}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="main-content">
|
||||
<!-- Email Metadata -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Email Metadata</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="detail-list">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">From</span>
|
||||
<span class="detail-value">${email.from}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">To</span>
|
||||
<span class="detail-value">${email.toList.join(', ')}</span>
|
||||
</div>
|
||||
${email.cc && email.cc.length > 0 ? html`
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">CC</span>
|
||||
<span class="detail-value">${email.cc.join(', ')}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Subject</span>
|
||||
<span class="detail-value">${email.subject}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Date</span>
|
||||
<span class="detail-value">${email.timestamp}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Message ID</span>
|
||||
<span class="detail-value">${email.messageId}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Size</span>
|
||||
<span class="detail-value">${email.size}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SMTP Transaction Log -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">SMTP Transaction Log</div>
|
||||
<div class="smtp-header-subtitle">
|
||||
<span class="smtp-direction-badge ${email.direction}">${email.direction}</span>
|
||||
<span>${email.direction === 'outbound'
|
||||
? `${email.connectionInfo.sourceHostname} → ${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}`
|
||||
: `${email.connectionInfo.sourceIp} → ${email.connectionInfo.sourceHostname}:${email.connectionInfo.destinationPort}`
|
||||
}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="smtp-copy-button" @click=${() => this.copySmtpLog()}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
Copy Log
|
||||
</button>
|
||||
</div>
|
||||
${this.renderSmtpLog(email)}
|
||||
</div>
|
||||
|
||||
<!-- Email Body -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Email Body (Escaped)</div>
|
||||
<div class="card-subtitle">Raw content — HTML is not rendered</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="email-body-container">${email.body}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<!-- Connection Info -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Connection Info</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="detail-list">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Source IP</span>
|
||||
<span class="detail-value">${email.connectionInfo.sourceIp}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Source Hostname</span>
|
||||
<span class="detail-value">${email.connectionInfo.sourceHostname}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Destination</span>
|
||||
<span class="detail-value">${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">TLS</span>
|
||||
<span class="detail-value">
|
||||
${email.connectionInfo.tlsVersion
|
||||
? html`<span class="tls-badge">${email.connectionInfo.tlsVersion}</span>`
|
||||
: 'None'}
|
||||
</span>
|
||||
</div>
|
||||
${email.connectionInfo.tlsCipher ? html`
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Cipher</span>
|
||||
<span class="detail-value">${email.connectionInfo.tlsCipher}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Authenticated</span>
|
||||
<span class="detail-value">${email.connectionInfo.authenticated ? 'Yes' : 'No'}</span>
|
||||
</div>
|
||||
${email.connectionInfo.authenticated ? html`
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Auth Method</span>
|
||||
<span class="detail-value">${email.connectionInfo.authMethod}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Auth User</span>
|
||||
<span class="detail-value">${email.connectionInfo.authUser}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Authentication Results -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Authentication Results</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="auth-row">
|
||||
<div>
|
||||
<span class="auth-label">SPF</span>
|
||||
<span class="auth-domain">${email.authenticationResults.spfDomain}</span>
|
||||
</div>
|
||||
<span class="auth-badge ${email.authenticationResults.spf}">${email.authenticationResults.spf}</span>
|
||||
</div>
|
||||
<div class="auth-row">
|
||||
<div>
|
||||
<span class="auth-label">DKIM</span>
|
||||
<span class="auth-domain">${email.authenticationResults.dkimDomain}</span>
|
||||
</div>
|
||||
<span class="auth-badge ${email.authenticationResults.dkim}">${email.authenticationResults.dkim}</span>
|
||||
</div>
|
||||
<div class="auth-row">
|
||||
<div>
|
||||
<span class="auth-label">DMARC</span>
|
||||
<span class="auth-domain">policy: ${email.authenticationResults.dmarcPolicy}</span>
|
||||
</div>
|
||||
<span class="auth-badge ${email.authenticationResults.dmarc}">${email.authenticationResults.dmarc}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rejection Details (conditional) -->
|
||||
${email.status === 'rejected' || email.status === 'bounced' ? html`
|
||||
<div class="card rejection-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Rejection Details</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
${email.rejectionReason ? html`
|
||||
<div class="rejection-label">Rejection Reason</div>
|
||||
<div class="rejection-text">${email.rejectionReason}</div>
|
||||
` : ''}
|
||||
${email.bounceMessage ? html`
|
||||
<div class="rejection-label">Bounce Message</div>
|
||||
<div class="rejection-text">${email.bounceMessage}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private getResponseCodeBadgeClass(code: number): string {
|
||||
if (code >= 500) return 'code-5xx';
|
||||
if (code >= 400) return 'code-4xx';
|
||||
if (code >= 300) return 'code-3xx';
|
||||
return 'code-2xx';
|
||||
}
|
||||
|
||||
private getSmtpPhases(log: ISmtpLogEntry[]): Array<{ phase: string; label: string; entries: ISmtpLogEntry[] }> {
|
||||
const phases: Array<{ phase: string; label: string; entries: ISmtpLogEntry[] }> = [];
|
||||
let currentPhase = '';
|
||||
let ehloCount = 0;
|
||||
|
||||
for (const entry of log) {
|
||||
const cmd = entry.command.toUpperCase();
|
||||
let phase = currentPhase;
|
||||
|
||||
if (entry.direction === 'client') {
|
||||
if (cmd.startsWith('EHLO') || cmd.startsWith('HELO')) {
|
||||
ehloCount++;
|
||||
if (ehloCount === 1) {
|
||||
phase = 'connection';
|
||||
} else {
|
||||
phase = 'post-tls';
|
||||
}
|
||||
} else if (cmd === 'STARTTLS') {
|
||||
phase = 'tls';
|
||||
} else if (cmd.startsWith('AUTH')) {
|
||||
phase = 'auth';
|
||||
} else if (cmd.startsWith('MAIL FROM') || cmd.startsWith('RCPT TO') || cmd === 'DATA' || cmd === '.') {
|
||||
phase = 'transfer';
|
||||
} else if (cmd === 'QUIT') {
|
||||
phase = 'closing';
|
||||
}
|
||||
}
|
||||
|
||||
// Server responses stay in the current phase
|
||||
if (entry.direction === 'server' && phase === '') {
|
||||
phase = currentPhase || 'connection';
|
||||
}
|
||||
if (phase === '') phase = 'connection';
|
||||
|
||||
if (phase !== currentPhase) {
|
||||
currentPhase = phase;
|
||||
const labels: Record<string, string> = {
|
||||
'connection': 'Connection',
|
||||
'tls': 'TLS Negotiation',
|
||||
'post-tls': 'Post-TLS Handshake',
|
||||
'auth': 'Authentication',
|
||||
'transfer': 'Mail Transfer',
|
||||
'closing': 'Closing',
|
||||
};
|
||||
phases.push({ phase, label: labels[phase] || phase, entries: [] });
|
||||
}
|
||||
|
||||
if (phases.length === 0) {
|
||||
phases.push({ phase: 'connection', label: 'Connection', entries: [] });
|
||||
}
|
||||
phases[phases.length - 1].entries.push(entry);
|
||||
}
|
||||
|
||||
return phases;
|
||||
}
|
||||
|
||||
private renderSmtpLog(email: IEmailDetail): TemplateResult {
|
||||
const phases = this.getSmtpPhases(email.smtpLog);
|
||||
|
||||
return html`
|
||||
<div class="smtp-log-container">
|
||||
${phases.map(phase => html`
|
||||
<div class="smtp-phase-separator">
|
||||
<div class="smtp-phase-line"></div>
|
||||
<span class="smtp-phase-label">${phase.label}</span>
|
||||
<div class="smtp-phase-line"></div>
|
||||
</div>
|
||||
${phase.entries.map(entry => html`
|
||||
<div class="smtp-bubble ${entry.direction}">
|
||||
${entry.direction === 'server' && entry.responseCode ? html`
|
||||
<span class="response-code-badge ${this.getResponseCodeBadgeClass(entry.responseCode)}">${entry.responseCode}</span>
|
||||
` : ''}
|
||||
<div class="smtp-bubble-command">${entry.command}</div>
|
||||
<div class="smtp-bubble-meta">
|
||||
<span>${entry.timestamp}</span>
|
||||
<span>·</span>
|
||||
<span class="smtp-direction-tag ${entry.direction}">${entry.direction === 'client' ? 'Client' : 'Server'}</span>
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
`)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private copySmtpLog() {
|
||||
if (!this.email) return;
|
||||
const text = this.email.smtpLog
|
||||
.map(e => `[${e.timestamp}] ${e.direction === 'client' ? 'C:' : 'S:'} ${e.command}`)
|
||||
.join('\n');
|
||||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
|
||||
private handleBack() {
|
||||
this.dispatchEvent(new CustomEvent('back', { bubbles: true, composed: true }));
|
||||
}
|
||||
}
|
||||
332
ts_web/elements/sz-mta-list-view.ts
Normal file
332
ts_web/elements/sz-mta-list-view.ts
Normal file
@@ -0,0 +1,332 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
state,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-mta-list-view': SzMtaListView;
|
||||
}
|
||||
}
|
||||
|
||||
export type TEmailStatus = 'delivered' | 'bounced' | 'rejected' | 'deferred' | 'pending';
|
||||
export type TEmailDirection = 'inbound' | 'outbound';
|
||||
|
||||
export interface IEmail {
|
||||
id: string;
|
||||
direction: TEmailDirection;
|
||||
status: TEmailStatus;
|
||||
from: string;
|
||||
to: string;
|
||||
subject: string;
|
||||
timestamp: string;
|
||||
messageId: string;
|
||||
size: string;
|
||||
}
|
||||
|
||||
@customElement('sz-mta-list-view')
|
||||
export class SzMtaListView extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="padding: 24px; max-width: 1200px;">
|
||||
<sz-mta-list-view
|
||||
.emails=${[
|
||||
{ id: '1', direction: 'outbound', status: 'delivered', from: 'noreply@serve.zone', to: 'user@example.com', subject: 'Welcome to serve.zone', timestamp: '2024-01-15 14:30:22', messageId: '<abc123@serve.zone>', size: '12.4 KB' },
|
||||
{ id: '2', direction: 'outbound', status: 'bounced', from: 'alerts@serve.zone', to: 'invalid@nowhere.test', subject: 'Service Alert: CPU Usage High', timestamp: '2024-01-15 14:28:10', messageId: '<def456@serve.zone>', size: '8.2 KB' },
|
||||
{ id: '3', direction: 'inbound', status: 'delivered', from: 'support@customer.com', to: 'admin@serve.zone', subject: 'Re: Infrastructure Review', timestamp: '2024-01-15 14:25:00', messageId: '<ghi789@customer.com>', size: '24.1 KB' },
|
||||
{ id: '4', direction: 'outbound', status: 'rejected', from: 'billing@serve.zone', to: 'blocked@spam-domain.test', subject: 'Invoice #2024-001', timestamp: '2024-01-15 14:20:45', messageId: '<jkl012@serve.zone>', size: '45.6 KB' },
|
||||
{ id: '5', direction: 'outbound', status: 'deferred', from: 'noreply@serve.zone', to: 'slow@remote-server.test', subject: 'Password Reset Request', timestamp: '2024-01-15 14:15:30', messageId: '<mno345@serve.zone>', size: '6.8 KB' },
|
||||
{ id: '6', direction: 'inbound', status: 'delivered', from: 'ci@github.com', to: 'devops@serve.zone', subject: 'Build #4521 passed', timestamp: '2024-01-15 14:10:00', messageId: '<pqr678@github.com>', size: '15.3 KB' },
|
||||
{ id: '7', direction: 'outbound', status: 'pending', from: 'reports@serve.zone', to: 'team@serve.zone', subject: 'Weekly Infrastructure Report', timestamp: '2024-01-15 14:05:00', messageId: '<stu901@serve.zone>', size: '102.7 KB' },
|
||||
]}
|
||||
></sz-mta-list-view>
|
||||
</div>
|
||||
`;
|
||||
|
||||
public static demoGroups = ['MTA'];
|
||||
|
||||
@property({ type: Array })
|
||||
public accessor emails: IEmail[] = [];
|
||||
|
||||
@state()
|
||||
private accessor searchQuery: string = '';
|
||||
|
||||
@state()
|
||||
private accessor statusFilter: TEmailStatus | 'all' = 'all';
|
||||
|
||||
@state()
|
||||
private accessor directionFilter: TEmailDirection | 'all' = 'all';
|
||||
|
||||
private get filteredEmails(): IEmail[] {
|
||||
return this.emails.filter((email) => {
|
||||
if (this.statusFilter !== 'all' && email.status !== this.statusFilter) return false;
|
||||
if (this.directionFilter !== 'all' && email.direction !== this.directionFilter) return false;
|
||||
if (this.searchQuery) {
|
||||
const q = this.searchQuery.toLowerCase();
|
||||
return (
|
||||
email.from.toLowerCase().includes(q) ||
|
||||
email.to.toLowerCase().includes(q) ||
|
||||
email.subject.toLowerCase().includes(q) ||
|
||||
email.messageId.toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 8px 12px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
outline: none;
|
||||
transition: border-color 200ms ease;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
|
||||
}
|
||||
|
||||
.chip-group {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.chip.active {
|
||||
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
border-color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.results-count {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 90px 1.5fr 1.5fr 2fr 140px;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 90px 1.5fr 1.5fr 2fr 140px;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
|
||||
.table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
}
|
||||
|
||||
.direction-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.direction-icon.inbound {
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.direction-icon.outbound {
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge.delivered {
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.status-badge.bounced,
|
||||
.status-badge.rejected {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.status-badge.deferred {
|
||||
background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.email-from,
|
||||
.email-to {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.email-subject {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.email-timestamp {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 48px 24px;
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
const filtered = this.filteredEmails;
|
||||
|
||||
return html`
|
||||
<div class="filter-bar">
|
||||
<input
|
||||
class="search-input"
|
||||
type="text"
|
||||
placeholder="Search by from, to, subject, or message ID..."
|
||||
.value=${this.searchQuery}
|
||||
@input=${(e: InputEvent) => { this.searchQuery = (e.target as HTMLInputElement).value; }}
|
||||
/>
|
||||
<div class="chip-group">
|
||||
${(['all', 'inbound', 'outbound'] as const).map(dir => html`
|
||||
<button
|
||||
class="chip ${this.directionFilter === dir ? 'active' : ''}"
|
||||
@click=${() => { this.directionFilter = dir; }}
|
||||
>${dir === 'all' ? 'All' : dir === 'inbound' ? 'Inbound' : 'Outbound'}</button>
|
||||
`)}
|
||||
</div>
|
||||
<div class="chip-group">
|
||||
${(['all', 'delivered', 'bounced', 'rejected', 'deferred', 'pending'] as const).map(s => html`
|
||||
<button
|
||||
class="chip ${this.statusFilter === s ? 'active' : ''}"
|
||||
@click=${() => { this.statusFilter = s; }}
|
||||
>${s === 'all' ? 'All' : s.charAt(0).toUpperCase() + s.slice(1)}</button>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-count">Showing ${filtered.length} of ${this.emails.length} emails</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-header">
|
||||
<span></span>
|
||||
<span>Status</span>
|
||||
<span>From</span>
|
||||
<span>To</span>
|
||||
<span>Subject</span>
|
||||
<span>Timestamp</span>
|
||||
</div>
|
||||
${filtered.length > 0 ? filtered.map(email => html`
|
||||
<div class="table-row" @click=${() => this.handleEmailClick(email)}>
|
||||
<span class="direction-icon ${email.direction}">
|
||||
${email.direction === 'inbound'
|
||||
? html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>`
|
||||
: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>`
|
||||
}
|
||||
</span>
|
||||
<span><span class="status-badge ${email.status}">${email.status}</span></span>
|
||||
<span class="email-from" title="${email.from}">${email.from}</span>
|
||||
<span class="email-to" title="${email.to}">${email.to}</span>
|
||||
<span class="email-subject" title="${email.subject}">${email.subject}</span>
|
||||
<span class="email-timestamp">${email.timestamp}</span>
|
||||
</div>
|
||||
`) : html`
|
||||
<div class="empty-state">No emails found</div>
|
||||
`}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleEmailClick(email: IEmail) {
|
||||
this.dispatchEvent(new CustomEvent('email-click', { detail: email, bubbles: true, composed: true }));
|
||||
}
|
||||
}
|
||||
@@ -10,18 +10,18 @@ import {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-registry-onebox-view': SzRegistryOneboxView;
|
||||
'sz-registry-advertisement': SzRegistryAdvertisement;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-registry-onebox-view')
|
||||
export class SzRegistryOneboxView extends DeesElement {
|
||||
@customElement('sz-registry-advertisement')
|
||||
export class SzRegistryAdvertisement extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="padding: 24px; max-width: 800px;">
|
||||
<sz-registry-onebox-view
|
||||
<sz-registry-advertisement
|
||||
status="running"
|
||||
registryUrl="localhost:3000/v2"
|
||||
></sz-registry-onebox-view>
|
||||
></sz-registry-advertisement>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -211,10 +211,10 @@ export class SzRegistryOneboxView extends DeesElement {
|
||||
</div>
|
||||
<div class="header-info">
|
||||
<div class="header-title">
|
||||
Onebox Registry (Built-in)
|
||||
Registry Advertisement
|
||||
<span class="default-badge">Default</span>
|
||||
</div>
|
||||
<div class="header-subtitle">Built-in container registry for your services</div>
|
||||
<div class="header-subtitle">Container registry for your services</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -240,10 +240,10 @@ export class SzRegistryOneboxView extends DeesElement {
|
||||
|
||||
<div class="quick-start">
|
||||
<div class="quick-start-title">Quick Start</div>
|
||||
<div class="quick-start-desc">To push images to the Onebox registry, use a CI or Global token:</div>
|
||||
<div class="quick-start-desc">To push images to the registry, use a CI or Global token:</div>
|
||||
<div class="code-block">
|
||||
<div class="code-line code-comment"># Login to the registry</div>
|
||||
<div class="code-line code-command">docker login ${this.registryUrl.split('/')[0]} -u onebox -p YOUR_TOKEN</div>
|
||||
<div class="code-line code-command">docker login ${this.registryUrl.split('/')[0]} -u registry -p YOUR_TOKEN</div>
|
||||
<div class="code-line code-comment"># Tag and push your image</div>
|
||||
<div class="code-line code-command">docker tag myapp ${this.registryUrl.split('/')[0]}/myservice:latest</div>
|
||||
<div class="code-line code-command">docker push ${this.registryUrl.split('/')[0]}/myservice:latest</div>
|
||||
667
ts_web/elements/sz-route-card.ts
Normal file
667
ts_web/elements/sz-route-card.ts
Normal file
@@ -0,0 +1,667 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-route-card': SzRouteCard;
|
||||
}
|
||||
}
|
||||
|
||||
// Simplified route types for display purposes
|
||||
export type TRouteActionType = 'forward' | 'socket-handler';
|
||||
export type TTlsMode = 'passthrough' | 'terminate' | 'terminate-and-reencrypt';
|
||||
export type TPortRange = number | number[] | Array<{ from: number; to: number }>;
|
||||
|
||||
export interface IRouteMatch {
|
||||
ports: TPortRange;
|
||||
domains?: string | string[];
|
||||
path?: string;
|
||||
clientIp?: string[];
|
||||
tlsVersion?: string[];
|
||||
headers?: Record<string, string>;
|
||||
protocol?: 'http' | 'tcp';
|
||||
}
|
||||
|
||||
export interface IRouteTarget {
|
||||
host: string | string[];
|
||||
port: number | 'preserve';
|
||||
}
|
||||
|
||||
export interface IRouteTls {
|
||||
mode: TTlsMode;
|
||||
certificate?: 'auto' | { key: string; cert: string };
|
||||
}
|
||||
|
||||
export interface IRouteAction {
|
||||
type: TRouteActionType;
|
||||
targets?: IRouteTarget[];
|
||||
tls?: IRouteTls;
|
||||
websocket?: { enabled: boolean };
|
||||
loadBalancing?: { algorithm: 'round-robin' | 'least-connections' | 'ip-hash' };
|
||||
forwardingEngine?: 'node' | 'nftables';
|
||||
}
|
||||
|
||||
export interface IRouteSecurity {
|
||||
ipAllowList?: string[];
|
||||
ipBlockList?: string[];
|
||||
maxConnections?: number;
|
||||
rateLimit?: { enabled: boolean; maxRequests: number; window: number };
|
||||
}
|
||||
|
||||
export interface IRouteConfig {
|
||||
id?: string;
|
||||
match: IRouteMatch;
|
||||
action: IRouteAction;
|
||||
security?: IRouteSecurity;
|
||||
headers?: { request?: Record<string, string>; response?: Record<string, string> };
|
||||
name?: string;
|
||||
description?: string;
|
||||
priority?: number;
|
||||
tags?: string[];
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
function formatPorts(ports: TPortRange): string {
|
||||
if (typeof ports === 'number') return String(ports);
|
||||
if (Array.isArray(ports)) {
|
||||
return ports
|
||||
.map((p) => {
|
||||
if (typeof p === 'number') return String(p);
|
||||
return `${p.from}\u2013${p.to}`;
|
||||
})
|
||||
.join(', ');
|
||||
}
|
||||
return String(ports);
|
||||
}
|
||||
|
||||
function formatTargets(targets: IRouteTarget[]): string[] {
|
||||
const result: string[] = [];
|
||||
for (const t of targets) {
|
||||
const hosts = Array.isArray(t.host) ? t.host : [t.host];
|
||||
const portStr = t.port === 'preserve' ? '(preserve)' : String(t.port);
|
||||
for (const h of hosts) {
|
||||
result.push(`${h}:${portStr}`);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
@customElement('sz-route-card')
|
||||
export class SzRouteCard extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="padding: 24px; max-width: 520px;">
|
||||
<sz-route-card
|
||||
.route=${{
|
||||
name: 'API Gateway',
|
||||
description: 'Main API gateway with TLS termination and load balancing',
|
||||
enabled: true,
|
||||
priority: 10,
|
||||
tags: ['web', 'api', 'production'],
|
||||
match: {
|
||||
ports: [443, 8443],
|
||||
domains: ['api.example.com', '*.api.serve.zone'],
|
||||
path: '/api/*',
|
||||
protocol: 'http' as const,
|
||||
clientIp: ['10.0.0.0/8'],
|
||||
},
|
||||
action: {
|
||||
type: 'forward' as const,
|
||||
targets: [
|
||||
{ host: ['10.0.0.1', '10.0.0.2'], port: 8080 },
|
||||
],
|
||||
tls: { mode: 'terminate' as const, certificate: 'auto' as const },
|
||||
websocket: { enabled: true },
|
||||
loadBalancing: { algorithm: 'round-robin' as const },
|
||||
forwardingEngine: 'nftables' as const,
|
||||
},
|
||||
security: {
|
||||
ipAllowList: ['10.0.0.0/8'],
|
||||
ipBlockList: ['192.168.100.0/24'],
|
||||
rateLimit: { enabled: true, maxRequests: 100, window: 60 },
|
||||
maxConnections: 1000,
|
||||
},
|
||||
} satisfies IRouteConfig}
|
||||
></sz-route-card>
|
||||
</div>
|
||||
`;
|
||||
|
||||
public static demoGroups = ['Routes'];
|
||||
|
||||
@property({ type: Object })
|
||||
public accessor route: IRouteConfig | null = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
transition: border-color 200ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(0,0,0,0.2)')};
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot.enabled {
|
||||
background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
|
||||
box-shadow: 0 0 6px ${cssManager.bdTheme('rgba(34,197,94,0.4)', 'rgba(34,197,94,0.3)')};
|
||||
}
|
||||
|
||||
.status-dot.disabled {
|
||||
background: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
}
|
||||
|
||||
.route-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.header-badges {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge.forward {
|
||||
background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.badge.socket-handler {
|
||||
background: ${cssManager.bdTheme('#ede9fe', 'rgba(139, 92, 246, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#7c3aed', '#a78bfa')};
|
||||
}
|
||||
|
||||
.badge.enabled {
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.badge.disabled {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', 'rgba(113, 113, 122, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.priority {
|
||||
font-size: 11px;
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
border-left: 3px solid;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
}
|
||||
|
||||
.section:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section.match {
|
||||
border-left-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
||||
}
|
||||
|
||||
.section.action {
|
||||
border-left-color: ${cssManager.bdTheme('#22c55e', '#22c55e')};
|
||||
}
|
||||
|
||||
.section.security {
|
||||
border-left-color: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.field-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.field-key {
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
min-width: 64px;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.domain-chip {
|
||||
display: inline-flex;
|
||||
padding: 1px 6px;
|
||||
background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')};
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 2px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.domain-chip.glob {
|
||||
background: ${cssManager.bdTheme('#fef3c7', 'rgba(245, 158, 11, 0.15)')};
|
||||
color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.protocol-badge {
|
||||
display: inline-flex;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.protocol-badge.http {
|
||||
background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
}
|
||||
|
||||
.protocol-badge.tcp {
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.tls-badge {
|
||||
display: inline-flex;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tls-badge.auto {
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.tls-badge.custom {
|
||||
background: ${cssManager.bdTheme('#ffedd5', 'rgba(249, 115, 22, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#c2410c', '#fb923c')};
|
||||
}
|
||||
|
||||
.engine-badge {
|
||||
display: inline-flex;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: ${cssManager.bdTheme('#fae8ff', 'rgba(168, 85, 247, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#7e22ce', '#c084fc')};
|
||||
}
|
||||
|
||||
.header-pair {
|
||||
display: inline;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Feature icons */
|
||||
.features-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1a')};
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.no-route {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
font-size: 13px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.route) {
|
||||
return html`<div class="card"><div class="no-route">No route data</div></div>`;
|
||||
}
|
||||
|
||||
const r = this.route;
|
||||
const isEnabled = r.enabled !== false;
|
||||
const match = r.match;
|
||||
const action = r.action;
|
||||
const security = r.security;
|
||||
|
||||
return html`
|
||||
<div class="card">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<span class="status-dot ${isEnabled ? 'enabled' : 'disabled'}"></span>
|
||||
<span class="route-name">${r.name || r.id || 'Unnamed Route'}</span>
|
||||
</div>
|
||||
<div class="header-badges">
|
||||
<span class="badge ${action.type}">${action.type}</span>
|
||||
<span class="badge ${isEnabled ? 'enabled' : 'disabled'}">${isEnabled ? 'enabled' : 'disabled'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${r.description ? html`<div class="description">${r.description}</div>` : ''}
|
||||
|
||||
<div class="meta-row">
|
||||
${r.tags && r.tags.length > 0
|
||||
? html`<div class="tags">${r.tags.map((t) => html`<span class="tag">${t}</span>`)}</div>`
|
||||
: html`<div></div>`}
|
||||
${r.priority != null ? html`<span class="priority">Priority: ${r.priority}</span>` : ''}
|
||||
</div>
|
||||
|
||||
<!-- Match Section -->
|
||||
<div class="section match">
|
||||
<div class="section-label">Match</div>
|
||||
<div class="field-row">
|
||||
<span class="field-key">Ports</span>
|
||||
<span class="field-value mono">${formatPorts(match.ports)}</span>
|
||||
</div>
|
||||
${match.domains
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Domains</span>
|
||||
<span class="field-value">${this.renderDomains(match.domains)}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${match.path
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Path</span>
|
||||
<span class="field-value mono">${match.path}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${match.protocol
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Protocol</span>
|
||||
<span class="field-value">
|
||||
<span class="protocol-badge ${match.protocol}">${match.protocol}</span>
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${match.clientIp && match.clientIp.length > 0
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Client</span>
|
||||
<span class="field-value mono">${match.clientIp.join(', ')}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${match.tlsVersion && match.tlsVersion.length > 0
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">TLS Ver</span>
|
||||
<span class="field-value">${match.tlsVersion.join(', ')}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${match.headers
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Headers</span>
|
||||
<span class="field-value">
|
||||
${Object.entries(match.headers).map(
|
||||
([k, v]) => html`<span class="header-pair">${k}=${v}</span> `
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
</div>
|
||||
|
||||
<!-- Action Section -->
|
||||
<div class="section action">
|
||||
<div class="section-label">Action</div>
|
||||
${action.targets && action.targets.length > 0
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Targets</span>
|
||||
<span class="field-value mono">${formatTargets(action.targets).join(', ')}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${action.tls
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">TLS</span>
|
||||
<span class="field-value">
|
||||
${action.tls.mode}
|
||||
${action.tls.certificate
|
||||
? action.tls.certificate === 'auto'
|
||||
? html` <span class="tls-badge auto">auto cert</span>`
|
||||
: html` <span class="tls-badge custom">custom cert</span>`
|
||||
: ''}
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${action.forwardingEngine
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Engine</span>
|
||||
<span class="field-value"><span class="engine-badge">${action.forwardingEngine}</span></span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${action.loadBalancing
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">LB</span>
|
||||
<span class="field-value">${action.loadBalancing.algorithm}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${action.websocket?.enabled
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">WS</span>
|
||||
<span class="field-value"><span class="badge enabled">enabled</span></span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
</div>
|
||||
|
||||
<!-- Security Section -->
|
||||
${security
|
||||
? html`
|
||||
<div class="section security">
|
||||
<div class="section-label">Security</div>
|
||||
${security.ipAllowList && security.ipAllowList.length > 0
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Allow</span>
|
||||
<span class="field-value mono">${security.ipAllowList.join(', ')}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${security.ipBlockList && security.ipBlockList.length > 0
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Block</span>
|
||||
<span class="field-value mono">${security.ipBlockList.join(', ')}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${security.rateLimit?.enabled
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Rate</span>
|
||||
<span class="field-value">${security.rateLimit.maxRequests} req / ${security.rateLimit.window}s</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
${security.maxConnections
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Max Conn</span>
|
||||
<span class="field-value">${security.maxConnections}</span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
|
||||
<!-- Feature Icons Row -->
|
||||
${this.renderFeatures()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderDomains(domains: string | string[]): TemplateResult {
|
||||
const list = Array.isArray(domains) ? domains : [domains];
|
||||
return html`${list.map(
|
||||
(d) =>
|
||||
html`<span class="domain-chip ${d.includes('*') ? 'glob' : ''}">${d}</span>`
|
||||
)}`;
|
||||
}
|
||||
|
||||
private renderFeatures(): TemplateResult {
|
||||
if (!this.route) return html``;
|
||||
const features: TemplateResult[] = [];
|
||||
const action = this.route.action;
|
||||
const security = this.route.security;
|
||||
const headers = this.route.headers;
|
||||
|
||||
if (action.tls) {
|
||||
features.push(html`<span class="feature"><span class="feature-icon">🔒</span>TLS</span>`);
|
||||
}
|
||||
if (action.websocket?.enabled) {
|
||||
features.push(html`<span class="feature"><span class="feature-icon">↔</span>WS</span>`);
|
||||
}
|
||||
if (action.loadBalancing) {
|
||||
features.push(html`<span class="feature"><span class="feature-icon">⚖</span>LB</span>`);
|
||||
}
|
||||
if (security) {
|
||||
features.push(html`<span class="feature"><span class="feature-icon">🛡</span>Security</span>`);
|
||||
}
|
||||
if (headers) {
|
||||
features.push(html`<span class="feature"><span class="feature-icon">⚙</span>Headers</span>`);
|
||||
}
|
||||
|
||||
if (features.length === 0) return html``;
|
||||
return html`<div class="features-row">${features}</div>`;
|
||||
}
|
||||
}
|
||||
326
ts_web/elements/sz-route-list-view.ts
Normal file
326
ts_web/elements/sz-route-list-view.ts
Normal file
@@ -0,0 +1,326 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
state,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import type { IRouteConfig, TRouteActionType } from './sz-route-card.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-route-list-view': SzRouteListView;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-route-list-view')
|
||||
export class SzRouteListView extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="padding: 24px; max-width: 1200px;">
|
||||
<sz-route-list-view
|
||||
.routes=${[
|
||||
{
|
||||
name: 'HTTPS Gateway',
|
||||
description: 'Main web gateway with TLS termination',
|
||||
enabled: true,
|
||||
tags: ['web', 'https', 'production'],
|
||||
match: { ports: 443, domains: ['*.example.com', 'serve.zone'], protocol: 'http' as const },
|
||||
action: {
|
||||
type: 'forward' as const,
|
||||
targets: [{ host: '10.0.0.1', port: 8080 }],
|
||||
tls: { mode: 'terminate' as const, certificate: 'auto' as const },
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'SMTP Inbound',
|
||||
description: 'Email relay for incoming mail',
|
||||
enabled: true,
|
||||
tags: ['email', 'smtp'],
|
||||
match: { ports: 25, domains: 'mail.serve.zone' },
|
||||
action: {
|
||||
type: 'forward' as const,
|
||||
targets: [{ host: '10.0.1.5', port: 25 }],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'WebSocket API',
|
||||
description: 'Real-time WebSocket connections',
|
||||
enabled: true,
|
||||
tags: ['web', 'api'],
|
||||
match: { ports: 443, domains: 'ws.example.com', path: '/ws/*' },
|
||||
action: {
|
||||
type: 'forward' as const,
|
||||
targets: [{ host: '10.0.0.3', port: 9090 }],
|
||||
websocket: { enabled: true },
|
||||
tls: { mode: 'terminate' as const, certificate: 'auto' as const },
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Maintenance Page',
|
||||
enabled: false,
|
||||
tags: ['web'],
|
||||
match: { ports: [80, 443], domains: 'old.example.com' },
|
||||
action: { type: 'socket-handler' as const },
|
||||
},
|
||||
] satisfies IRouteConfig[]}
|
||||
></sz-route-list-view>
|
||||
</div>
|
||||
`;
|
||||
|
||||
public static demoGroups = ['Routes'];
|
||||
|
||||
@property({ type: Array })
|
||||
public accessor routes: IRouteConfig[] = [];
|
||||
|
||||
@state()
|
||||
private accessor searchQuery: string = '';
|
||||
|
||||
@state()
|
||||
private accessor actionFilter: TRouteActionType | 'all' = 'all';
|
||||
|
||||
@state()
|
||||
private accessor enabledFilter: 'all' | 'enabled' | 'disabled' = 'all';
|
||||
|
||||
private get filteredRoutes(): IRouteConfig[] {
|
||||
return this.routes.filter((route) => {
|
||||
// Action type filter
|
||||
if (this.actionFilter !== 'all' && route.action.type !== this.actionFilter) return false;
|
||||
|
||||
// Enabled/disabled filter
|
||||
if (this.enabledFilter === 'enabled' && route.enabled === false) return false;
|
||||
if (this.enabledFilter === 'disabled' && route.enabled !== false) return false;
|
||||
|
||||
// Search query
|
||||
if (this.searchQuery) {
|
||||
const q = this.searchQuery.toLowerCase();
|
||||
return this.routeMatchesSearch(route, q);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
private routeMatchesSearch(route: IRouteConfig, q: string): boolean {
|
||||
// Name and description
|
||||
if (route.name?.toLowerCase().includes(q)) return true;
|
||||
if (route.description?.toLowerCase().includes(q)) return true;
|
||||
|
||||
// Domains
|
||||
if (route.match.domains) {
|
||||
const domains = Array.isArray(route.match.domains) ? route.match.domains : [route.match.domains];
|
||||
if (domains.some((d) => d.toLowerCase().includes(q))) return true;
|
||||
}
|
||||
|
||||
// Ports
|
||||
const portsStr = this.formatPortsForSearch(route.match.ports);
|
||||
if (portsStr.includes(q)) return true;
|
||||
|
||||
// Path
|
||||
if (route.match.path?.toLowerCase().includes(q)) return true;
|
||||
|
||||
// Client IPs
|
||||
if (route.match.clientIp?.some((ip) => ip.includes(q))) return true;
|
||||
|
||||
// Targets
|
||||
if (route.action.targets) {
|
||||
for (const t of route.action.targets) {
|
||||
const hosts = Array.isArray(t.host) ? t.host : [t.host];
|
||||
if (hosts.some((h) => h.toLowerCase().includes(q))) return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Tags
|
||||
if (route.tags?.some((t) => t.toLowerCase().includes(q))) return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
private formatPortsForSearch(ports: import('./sz-route-card.js').TPortRange): string {
|
||||
if (typeof ports === 'number') return String(ports);
|
||||
if (Array.isArray(ports)) {
|
||||
return ports
|
||||
.map((p) => (typeof p === 'number' ? String(p) : `${p.from}-${p.to}`))
|
||||
.join(' ');
|
||||
}
|
||||
return String(ports);
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 8px 12px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
outline: none;
|
||||
transition: border-color 200ms ease;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
|
||||
}
|
||||
|
||||
.chip-group {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chip:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.chip.active {
|
||||
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
border-color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.results-count {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.grid sz-route-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
const filtered = this.filteredRoutes;
|
||||
|
||||
return html`
|
||||
<div class="filter-bar">
|
||||
<input
|
||||
class="search-input"
|
||||
type="text"
|
||||
placeholder="Search routes by domain, IP, port, path, or tag..."
|
||||
.value=${this.searchQuery}
|
||||
@input=${(e: InputEvent) => {
|
||||
this.searchQuery = (e.target as HTMLInputElement).value;
|
||||
}}
|
||||
/>
|
||||
<div class="chip-group">
|
||||
${(['all', 'forward', 'socket-handler'] as const).map(
|
||||
(type) => html`
|
||||
<button
|
||||
class="chip ${this.actionFilter === type ? 'active' : ''}"
|
||||
@click=${() => {
|
||||
this.actionFilter = type;
|
||||
}}
|
||||
>
|
||||
${type === 'all' ? 'All' : type === 'forward' ? 'Forward' : 'Socket Handler'}
|
||||
</button>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
<div class="chip-group">
|
||||
${(['all', 'enabled', 'disabled'] as const).map(
|
||||
(status) => html`
|
||||
<button
|
||||
class="chip ${this.enabledFilter === status ? 'active' : ''}"
|
||||
@click=${() => {
|
||||
this.enabledFilter = status;
|
||||
}}
|
||||
>
|
||||
${status.charAt(0).toUpperCase() + status.slice(1)}
|
||||
</button>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-count">
|
||||
Showing ${filtered.length} of ${this.routes.length} routes
|
||||
</div>
|
||||
|
||||
${filtered.length > 0
|
||||
? html`
|
||||
<div class="grid">
|
||||
${filtered.map(
|
||||
(route) => html`
|
||||
<sz-route-card
|
||||
.route=${route}
|
||||
@click=${() => this.handleRouteClick(route)}
|
||||
></sz-route-card>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">🔍</div>
|
||||
<div>No routes match your filters</div>
|
||||
</div>
|
||||
`}
|
||||
`;
|
||||
}
|
||||
|
||||
private handleRouteClick(route: IRouteConfig) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('route-click', {
|
||||
detail: route,
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -5,9 +5,12 @@ import {
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
state,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import type { IExecutionEnvironment } from '@design.estate/dees-catalog';
|
||||
|
||||
import './sz-stat-card.js';
|
||||
|
||||
declare global {
|
||||
@@ -123,6 +126,15 @@ export class SzServiceDetailView extends DeesElement {
|
||||
@property({ type: Boolean })
|
||||
public accessor streaming: boolean = false;
|
||||
|
||||
@property({ type: Object })
|
||||
public accessor workspaceEnvironment: IExecutionEnvironment | null = null;
|
||||
|
||||
@property({ type: String })
|
||||
public accessor workspacePath: string = '/';
|
||||
|
||||
@state()
|
||||
private accessor currentView: 'details' | 'workspace' = 'details';
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
@@ -455,10 +467,102 @@ export class SzServiceDetailView extends DeesElement {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:host(.workspace-mode) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.workspace-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.workspace-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.workspace-back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
cursor: pointer;
|
||||
transition: color 200ms ease;
|
||||
}
|
||||
|
||||
.workspace-back-link:hover {
|
||||
color: ${cssManager.bdTheme('#1d4ed8', '#93c5fd')};
|
||||
}
|
||||
|
||||
.workspace-service-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.workspace-status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.workspace-status-badge.running {
|
||||
background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
|
||||
}
|
||||
|
||||
.workspace-status-badge.stopped {
|
||||
background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
|
||||
}
|
||||
|
||||
.workspace-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (this.currentView === 'workspace') {
|
||||
return this.renderWorkspaceView();
|
||||
}
|
||||
return this.renderDetailsView();
|
||||
}
|
||||
|
||||
private renderWorkspaceView(): TemplateResult {
|
||||
return html`
|
||||
<div class="workspace-wrapper">
|
||||
<div class="workspace-header">
|
||||
<div class="workspace-back-link" @click=${() => this.handleCloseWorkspace()}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
</svg>
|
||||
Back to Details
|
||||
</div>
|
||||
<span class="workspace-service-name">${this.service.name}</span>
|
||||
<span class="workspace-status-badge ${this.service.status}"></span>
|
||||
</div>
|
||||
<div class="workspace-container">
|
||||
<dees-workspace .executionEnvironment=${this.workspaceEnvironment}></dees-workspace>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderDetailsView(): TemplateResult {
|
||||
return html`
|
||||
<div class="header">
|
||||
<div class="back-link" @click=${() => this.handleBack()}>
|
||||
@@ -590,6 +694,13 @@ export class SzServiceDetailView extends DeesElement {
|
||||
: html`<button class="action-button" @click=${() => this.handleAction('start')}>Start Service</button>`
|
||||
}
|
||||
<button class="action-button" @click=${() => this.handleAction('restart')}>Restart Service</button>
|
||||
<button class="action-button" @click=${() => this.handleOpenWorkspace()}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline; vertical-align: middle; margin-right: 4px;">
|
||||
<polyline points="4 17 10 11 4 5"></polyline>
|
||||
<line x1="12" y1="19" x2="20" y2="19"></line>
|
||||
</svg>
|
||||
Open Workspace
|
||||
</button>
|
||||
<button class="action-button danger" @click=${() => this.handleAction('delete')}>Delete Service</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -709,4 +820,30 @@ export class SzServiceDetailView extends DeesElement {
|
||||
private handleDeleteBackup(backup: IServiceBackup) {
|
||||
this.dispatchEvent(new CustomEvent('delete-backup', { detail: backup, bubbles: true, composed: true }));
|
||||
}
|
||||
|
||||
private handleOpenWorkspace() {
|
||||
if (this.workspaceEnvironment) {
|
||||
this.currentView = 'workspace';
|
||||
this.classList.add('workspace-mode');
|
||||
} else {
|
||||
this.dispatchEvent(new CustomEvent('request-workspace', {
|
||||
detail: { service: this.service },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
private handleCloseWorkspace() {
|
||||
this.currentView = 'details';
|
||||
this.classList.remove('workspace-mode');
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string, any>) {
|
||||
super.updated(changedProperties);
|
||||
if (changedProperties.has('workspaceEnvironment') && this.workspaceEnvironment && this.currentView === 'details') {
|
||||
this.currentView = 'workspace';
|
||||
this.classList.add('workspace-mode');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -132,6 +132,18 @@ export class SzDemoAppShell extends DeesElement {
|
||||
iconName: 'lucide:Key',
|
||||
content: 'sz-demo-view-tokens',
|
||||
},
|
||||
{
|
||||
id: 'mta',
|
||||
name: 'Email / MTA',
|
||||
iconName: 'lucide:Mail',
|
||||
content: 'sz-demo-view-mta',
|
||||
},
|
||||
{
|
||||
id: 'routes',
|
||||
name: 'Routes',
|
||||
iconName: 'lucide:Route',
|
||||
content: 'sz-demo-view-routes',
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
name: 'Settings',
|
||||
@@ -147,7 +159,7 @@ export class SzDemoAppShell extends DeesElement {
|
||||
},
|
||||
{
|
||||
name: 'Infrastructure',
|
||||
views: ['services', 'network', 'registries'],
|
||||
views: ['services', 'network', 'registries', 'mta', 'routes'],
|
||||
},
|
||||
{
|
||||
name: 'Administration',
|
||||
|
||||
Reference in New Issue
Block a user