Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 889f84d666 | |||
| a188fcbe85 | |||
| 53b730914c | |||
| 51b4312cc0 | |||
| 668839887f | |||
| 567551b544 | |||
| d5c265860c | |||
| 0f6bfe45aa | |||
| 33a97b410e | |||
| bd6bce04c9 | |||
| 204253f78c | |||
| d1c19389d7 | |||
| 77630cf540 | |||
| b835318a3b |
54
changelog.md
54
changelog.md
@@ -1,5 +1,59 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-03-16 - 2.6.2 - fix(platform-service-detail-view)
|
||||
wrap service logs chart in a full-width container to preserve layout
|
||||
|
||||
- Places the logs component inside a container spanning all grid columns.
|
||||
- Keeps the service logs view aligned correctly within the detail page layout.
|
||||
|
||||
## 2026-03-16 - 2.6.1 - fix(platform-service-detail-view)
|
||||
replace custom service log markup with dees-chart-log in the platform service detail view
|
||||
|
||||
- Removes bespoke log container styles and rendering logic in favor of the shared dees-chart-log component
|
||||
- Normalizes log timestamps to ISO format before passing entries to the chart component
|
||||
- Enables log auto-scroll, entry limits, and metrics display for service logs
|
||||
|
||||
## 2026-03-16 - 2.6.0 - feat(service-create-view)
|
||||
add platform service toggles for MongoDB, S3, and ClickHouse provisioning
|
||||
|
||||
- Adds a new Platform Services section to the service creation view with dedicated toggles for managed infrastructure dependencies.
|
||||
- Includes MongoDB, S3-compatible storage, and ClickHouse selections in the emitted create-service configuration payload.
|
||||
- Resets selected platform services after form submission to keep create flow state consistent.
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@serve.zone/catalog",
|
||||
"version": "2.1.0",
|
||||
"version": "2.6.2",
|
||||
"private": false,
|
||||
"description": "UI component catalog for serve.zone",
|
||||
"main": "dist_ts_web/index.js",
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@serve.zone/catalog',
|
||||
version: '2.1.0',
|
||||
version: '2.6.2',
|
||||
description: 'UI component catalog for serve.zone'
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
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 }));
|
||||
}
|
||||
}
|
||||
@@ -363,56 +363,6 @@ export class SzPlatformServiceDetailView extends DeesElement {
|
||||
background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
|
||||
}
|
||||
|
||||
.log-container {
|
||||
background: ${cssManager.bdTheme('#18181b', '#09090b')};
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.log-timestamp {
|
||||
color: #71717a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.log-level {
|
||||
flex-shrink: 0;
|
||||
width: 50px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.log-level.info {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.log-level.warn {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.log-level.error {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.log-level.debug {
|
||||
color: #a1a1aa;
|
||||
}
|
||||
|
||||
.log-message {
|
||||
color: #fafafa;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -637,29 +587,18 @@ export class SzPlatformServiceDetailView extends DeesElement {
|
||||
` : ''}
|
||||
|
||||
<!-- Logs -->
|
||||
<div class="section full-width">
|
||||
<div class="section-header">
|
||||
<div class="section-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="4 17 10 11 4 5"></polyline>
|
||||
<line x1="12" y1="19" x2="20" y2="19"></line>
|
||||
</svg>
|
||||
Logs
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="log-container">
|
||||
${this.logs.length > 0 ? this.logs.map(log => html`
|
||||
<div class="log-entry">
|
||||
<span class="log-timestamp">${log.timestamp}</span>
|
||||
<span class="log-level ${log.level}">${log.level}</span>
|
||||
<span class="log-message">${log.message}</span>
|
||||
</div>
|
||||
`) : html`
|
||||
<div style="color: #71717a; text-align: center; padding: 20px;">No logs available</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
<div style="grid-column: 1 / -1;">
|
||||
<dees-chart-log
|
||||
.label=${'Service Logs'}
|
||||
.logEntries=${this.logs.map(log => ({
|
||||
timestamp: log.timestamp.includes('T') ? log.timestamp : new Date(log.timestamp).toISOString(),
|
||||
level: log.level as 'debug' | 'info' | 'warn' | 'error',
|
||||
message: log.message,
|
||||
}))}
|
||||
.autoScroll=${true}
|
||||
.maxEntries=${2000}
|
||||
.showMetrics=${true}
|
||||
></dees-chart-log>
|
||||
</div>
|
||||
</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,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -48,6 +48,9 @@ export interface IServiceConfig {
|
||||
memoryLimit: string;
|
||||
restartPolicy: 'always' | 'on-failure' | 'never';
|
||||
networkMode: string;
|
||||
enableMongoDB: boolean;
|
||||
enableS3: boolean;
|
||||
enableClickHouse: boolean;
|
||||
}
|
||||
|
||||
@customElement('sz-service-create-view')
|
||||
@@ -104,6 +107,15 @@ export class SzServiceCreateView extends DeesElement {
|
||||
@state()
|
||||
private accessor showAdvanced: boolean = false;
|
||||
|
||||
@state()
|
||||
private accessor enableMongoDB: boolean = false;
|
||||
|
||||
@state()
|
||||
private accessor enableS3: boolean = false;
|
||||
|
||||
@state()
|
||||
private accessor enableClickHouse: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
@@ -312,6 +324,105 @@ export class SzServiceCreateView extends DeesElement {
|
||||
accent-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
||||
}
|
||||
|
||||
.platform-toggle-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.platform-toggle-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
border-radius: 8px;
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
|
||||
.platform-toggle-item:has(input:checked) {
|
||||
background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')};
|
||||
}
|
||||
|
||||
.platform-toggle-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.platform-toggle-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#27272a')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.platform-toggle-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.platform-toggle-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.platform-toggle-desc {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
border-radius: 12px;
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
|
||||
.toggle-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider {
|
||||
background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider::before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@@ -536,6 +647,81 @@ export class SzServiceCreateView extends DeesElement {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Platform Services -->
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
|
||||
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
|
||||
<line x1="6" y1="6" x2="6.01" y2="6"></line>
|
||||
<line x1="6" y1="18" x2="6.01" y2="18"></line>
|
||||
</svg>
|
||||
Platform Services
|
||||
</div>
|
||||
<div class="form-hint" style="margin-bottom: 12px;">
|
||||
Enable managed infrastructure services for this deployment. Resources are automatically provisioned and connection details injected as environment variables.
|
||||
</div>
|
||||
<div class="platform-toggle-list">
|
||||
<label class="platform-toggle-item">
|
||||
<div class="platform-toggle-info">
|
||||
<div class="platform-toggle-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="platform-toggle-name">MongoDB</div>
|
||||
<div class="platform-toggle-desc">Document database with auto-provisioned credentials</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
?checked=${this.enableMongoDB}
|
||||
@change=${(e: Event) => this.enableMongoDB = (e.target as HTMLInputElement).checked}
|
||||
>
|
||||
<span class="toggle-slider"></span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="platform-toggle-item">
|
||||
<div class="platform-toggle-info">
|
||||
<div class="platform-toggle-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="platform-toggle-name">S3 Storage (MinIO)</div>
|
||||
<div class="platform-toggle-desc">Object storage bucket with auto-provisioned access keys</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
?checked=${this.enableS3}
|
||||
@change=${(e: Event) => this.enableS3 = (e.target as HTMLInputElement).checked}
|
||||
>
|
||||
<span class="toggle-slider"></span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="platform-toggle-item">
|
||||
<div class="platform-toggle-info">
|
||||
<div class="platform-toggle-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="6" height="20"/><rect x="9" y="7" width="6" height="15"/><rect x="16" y="12" width="6" height="10"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="platform-toggle-name">ClickHouse</div>
|
||||
<div class="platform-toggle-desc">Analytics database with auto-provisioned credentials</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
?checked=${this.enableClickHouse}
|
||||
@change=${(e: Event) => this.enableClickHouse = (e.target as HTMLInputElement).checked}
|
||||
>
|
||||
<span class="toggle-slider"></span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Options Toggle -->
|
||||
<button
|
||||
class="toggle-advanced ${this.showAdvanced ? 'open' : ''}"
|
||||
@@ -750,6 +936,9 @@ export class SzServiceCreateView extends DeesElement {
|
||||
memoryLimit: this.memoryLimit,
|
||||
restartPolicy: this.restartPolicy,
|
||||
networkMode: this.networkMode,
|
||||
enableMongoDB: this.enableMongoDB,
|
||||
enableS3: this.enableS3,
|
||||
enableClickHouse: this.enableClickHouse,
|
||||
};
|
||||
|
||||
this.dispatchEvent(new CustomEvent('create-service', {
|
||||
@@ -771,5 +960,8 @@ export class SzServiceCreateView extends DeesElement {
|
||||
this.restartPolicy = 'always';
|
||||
this.networkMode = 'bridge';
|
||||
this.showAdvanced = false;
|
||||
this.enableMongoDB = false;
|
||||
this.enableS3 = false;
|
||||
this.enableClickHouse = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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