Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 889f84d666 | |||
| a188fcbe85 | |||
| 53b730914c | |||
| 51b4312cc0 | |||
| 668839887f | |||
| 567551b544 | |||
| d5c265860c | |||
| 0f6bfe45aa | |||
| 33a97b410e | |||
| bd6bce04c9 | |||
| 204253f78c | |||
| d1c19389d7 |
46
changelog.md
46
changelog.md
@@ -1,5 +1,51 @@
|
||||
# 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
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@serve.zone/catalog",
|
||||
"version": "2.2.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.2.0',
|
||||
version: '2.6.2',
|
||||
description: 'UI component catalog for serve.zone'
|
||||
}
|
||||
|
||||
@@ -49,6 +49,14 @@ export * from './sz-domain-detail-view.js';
|
||||
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';
|
||||
@@ -57,3 +65,5 @@ 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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -138,6 +138,12 @@ export class SzDemoAppShell extends DeesElement {
|
||||
iconName: 'lucide:Mail',
|
||||
content: 'sz-demo-view-mta',
|
||||
},
|
||||
{
|
||||
id: 'routes',
|
||||
name: 'Routes',
|
||||
iconName: 'lucide:Route',
|
||||
content: 'sz-demo-view-routes',
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
name: 'Settings',
|
||||
@@ -153,7 +159,7 @@ export class SzDemoAppShell extends DeesElement {
|
||||
},
|
||||
{
|
||||
name: 'Infrastructure',
|
||||
views: ['services', 'network', 'registries', 'mta'],
|
||||
views: ['services', 'network', 'registries', 'mta', 'routes'],
|
||||
},
|
||||
{
|
||||
name: 'Administration',
|
||||
|
||||
Reference in New Issue
Block a user