serve.zone/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(elements): standardize dashboard and detail views on dees tile and stats grid components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-07 22:27:23 +00:00
parent b91d3a9341
commit 9aad9c0c2a
16 changed files with 1148 additions and 972 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ts_web/elements/index.ts
View File

@@ -1,5 +1,4 @@
// Dashboard Cards
export * from './sz-stat-card.js';
export * from './sz-resource-usage-card.js';
export * from './sz-traffic-card.js';
export * from './sz-platform-services-card.js';

197
ts_web/elements/sz-config-section.ts
View File

@@ -24,6 +24,13 @@ export interface IConfigSectionAction {
detail?: any;
}
export interface IConfigSectionLink {
label: string;
href: string;
icon?: string;
external?: boolean;
}
declare global {
interface HTMLElementTagNameMap {
'sz-config-section': SzConfigSection;
@@ -46,6 +53,12 @@ export class SzConfigSection extends DeesElement {
{ key: 'Auto Renew', value: true, type: 'boolean' },
{ key: 'Renew Threshold', value: '30 days' },
] as IConfigField[]}
.links=${[
{ label: 'Docs', href: 'https://code.foss.global/serve.zone/smartproxy', icon: 'lucide:bookOpen', external: true },
] as IConfigSectionLink[]}
.actions=${[
{ label: 'Configure', icon: 'lucide:settings', event: 'configure' },
] as IConfigSectionAction[]}
></sz-config-section>
<sz-config-section
title="Email Server"
@@ -57,6 +70,13 @@ export class SzConfigSection extends DeesElement {
{ key: 'Hostname', value: null },
{ key: 'Domains', value: ['example.com', 'mail.example.com'], type: 'pills' },
] as IConfigField[]}
.links=${[
{ label: 'Docs', href: 'https://code.foss.global/serve.zone/smartmta', icon: 'lucide:bookOpen', external: true },
{ label: 'Source', href: 'https://code.foss.global/serve.zone/smartmta', icon: 'lucide:github', external: true },
] as IConfigSectionLink[]}
.actions=${[
{ label: 'Enable', icon: 'lucide:power', event: 'enable' },
] as IConfigSectionAction[]}
></sz-config-section>
<sz-config-section
title="DNS Server"
@@ -68,6 +88,9 @@ export class SzConfigSection extends DeesElement {
{ key: 'Port', value: 53 },
{ key: 'NS Domains', value: ['ns1.example.com', 'ns2.example.com'], type: 'pills' },
] as IConfigField[]}
.links=${[
{ label: 'Getting Started', href: 'https://docs.example.com/dns', icon: 'lucide:bookOpen', external: true },
] as IConfigSectionLink[]}
></sz-config-section>
`;
@@ -91,6 +114,9 @@ export class SzConfigSection extends DeesElement {
@property({ type: Array })
public accessor actions: IConfigSectionAction[] = [];
@property({ type: Array })
public accessor links: IConfigSectionLink[] = [];
@property({ type: Boolean })
public accessor collapsible: boolean = false;
@@ -108,20 +134,25 @@ export class SzConfigSection extends DeesElement {
margin-bottom: 16px;
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
overflow: hidden;
dees-tile {
display: block;
}
:host([collapsed]) dees-tile::part(content) {
display: none;
}
:host([collapsed]) dees-tile::part(footer) {
display: none;
}
.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')};
padding: 10px 16px;
gap: 12px;
width: 100%;
box-sizing: border-box;
cursor: default;
user-select: none;
}
@@ -131,30 +162,31 @@ export class SzConfigSection extends DeesElement {
}
:host([collapsible]) .section-header:hover {
background: ${cssManager.bdTheme('#ebebed', '#1c1c1f')};
background: var(--dees-color-hover);
}
.header-left {
display: flex;
align-items: center;
gap: 12px;
gap: 10px;
min-width: 0;
flex: 1;
}
.header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
width: 28px;
height: 28px;
background: var(--dees-color-border-default);
border-radius: 6px;
flex-shrink: 0;
}
.header-icon dees-icon {
font-size: 18px;
color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
font-size: 14px;
color: var(--dees-color-text-muted);
}
.header-text {
@@ -162,15 +194,17 @@ export class SzConfigSection extends DeesElement {
}
.header-title {
font-size: 15px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
font-size: 13px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
line-height: 1.3;
}
.header-subtitle {
font-size: 12px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
font-size: 11px;
color: var(--dees-color-text-muted);
letter-spacing: -0.01em;
line-height: 1.3;
margin-top: 1px;
}
@@ -236,30 +270,60 @@ export class SzConfigSection extends DeesElement {
background: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
}
/* Action buttons */
.header-action {
display: inline-flex;
/* Footer action buttons — canonical dees-modal / dees-tile pattern */
.section-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 6px;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.tile-button {
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 12px;
font-weight: 500;
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
background: transparent;
border: none;
cursor: pointer;
transition: background 150ms ease;
border-left: 1px solid var(--dees-color-border-subtle);
color: var(--dees-color-text-muted);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
font-family: inherit;
text-decoration: none;
}
.header-action:hover {
background: ${cssManager.bdTheme('rgba(37,99,235,0.08)', 'rgba(96,165,250,0.1)')};
.tile-button:first-child {
border-left: none;
}
.header-action dees-icon {
font-size: 14px;
.tile-button:hover {
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.tile-button.primary {
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.tile-button.primary:hover {
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.tile-button dees-icon {
font-size: 12px;
}
/* Chevron */
@@ -274,8 +338,8 @@ export class SzConfigSection extends DeesElement {
}
.chevron dees-icon {
font-size: 16px;
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
font-size: 14px;
color: var(--dees-color-text-muted);
}
/* Content */
@@ -283,10 +347,6 @@ export class SzConfigSection extends DeesElement {
padding: 0;
}
.section-content.collapsed {
display: none;
}
/* Field rows */
.field-row {
display: flex;
@@ -439,6 +499,13 @@ export class SzConfigSection extends DeesElement {
}
}
updated(changedProperties: Map<string, any>) {
super.updated(changedProperties);
if (changedProperties.has('isCollapsed')) {
this.toggleAttribute('collapsed', this.isCollapsed);
}
}
public render(): TemplateResult {
const statusLabels: Record<string, string> = {
'enabled': 'Enabled',
@@ -448,8 +515,9 @@ export class SzConfigSection extends DeesElement {
};
return html`
<div class="section">
<dees-tile>
<div
slot="header"
class="section-header"
@click=${() => {
if (this.collapsible) {
@@ -475,8 +543,36 @@ export class SzConfigSection extends DeesElement {
${statusLabels[this.status] || this.status}
</span>
` : ''}
${this.collapsible ? html`
<span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
<dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
</span>
` : ''}
</div>
</div>
<div class="section-content">
${this.fields.map(field => this.renderField(field))}
<div class="slot-content">
<slot></slot>
</div>
</div>
${this.links.length > 0 || this.actions.length > 0 ? html`
<div slot="footer" class="section-footer">
${this.links.map(link => html`
<a
class="tile-button"
href=${link.href}
target=${link.external ? '_blank' : '_self'}
rel=${link.external ? 'noopener noreferrer' : ''}
@click=${(e: Event) => e.stopPropagation()}
>
${link.icon ? html`<dees-icon .icon=${link.icon}></dees-icon>` : ''}
${link.label}
${link.external ? html`<dees-icon .icon=${'lucide:externalLink'}></dees-icon>` : ''}
</a>
`)}
${this.actions.map(action => html`
<button class="header-action" @click=${(e: Event) => {
<button class="tile-button primary" @click=${(e: Event) => {
e.stopPropagation();
this.dispatchEvent(new CustomEvent(action.event || 'action', {
detail: action.detail || { label: action.label },
@@ -488,20 +584,9 @@ export class SzConfigSection extends DeesElement {
${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>
` : ''}
</dees-tile>
`;
}

128
ts_web/elements/sz-domain-detail-view.ts
View File

@@ -229,57 +229,87 @@ export class SzDomainDetailView extends DeesElement {
}
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
overflow: hidden;
}
.section.full-width {
dees-tile.full-width {
grid-column: 1 / -1;
}
.section-header {
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
flex: 1;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
}
.section-title svg {
width: 16px;
height: 16px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--dees-color-text-secondary);
}
.section-action {
padding: 6px 10px;
background: transparent;
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 4px;
.section-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.tile-button {
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 12px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
font-weight: 500;
cursor: pointer;
transition: all 200ms ease;
user-select: none;
transition: all 0.15s ease;
background: transparent;
border: none;
border-left: 1px solid var(--dees-color-border-subtle);
color: var(--dees-color-text-muted);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.section-action:hover {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
.tile-button:first-child {
border-left: none;
}
.tile-button:hover {
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.tile-button.primary {
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.tile-button.primary:hover {
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.section-content {
padding: 16px;
}
@@ -582,8 +612,8 @@ export class SzDomainDetailView extends DeesElement {
<div class="grid">
<!-- Certificate Section -->
<div class="section">
<div class="section-header">
<dees-tile>
<div slot="header" class="section-header">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
@@ -591,9 +621,6 @@ export class SzDomainDetailView extends DeesElement {
</svg>
SSL Certificate
</div>
${this.certificate ? html`
<button class="section-action" @click=${() => this.handleRenewCertificate()}>Renew</button>
` : ''}
</div>
<div class="section-content">
${this.certificate ? html`
@@ -652,11 +679,16 @@ export class SzDomainDetailView extends DeesElement {
<div class="empty-state">No certificate configured</div>
`}
</div>
</div>
${this.certificate ? html`
<div slot="footer" class="section-footer">
<button class="tile-button primary" @click=${() => this.handleRenewCertificate()}>Renew</button>
</div>
` : ''}
</dees-tile>
<!-- Proxy Routes Section -->
<div class="section">
<div class="section-header">
<dees-tile>
<div slot="header" class="section-header">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="16 3 21 3 21 8"></polyline>
@@ -679,11 +711,11 @@ export class SzDomainDetailView extends DeesElement {
<div class="empty-state">No proxy routes configured</div>
`}
</div>
</div>
</dees-tile>
<!-- DNS Records Section -->
<div class="section full-width">
<div class="section-header">
<dees-tile class="full-width">
<div slot="header" class="section-header">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
@@ -692,13 +724,6 @@ export class SzDomainDetailView extends DeesElement {
</svg>
DNS Records
</div>
<button class="section-action" @click=${() => this.handleAddDnsRecord()}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add Record
</button>
</div>
<div class="section-content">
${this.dnsRecords.length > 0 ? html`
@@ -737,7 +762,16 @@ export class SzDomainDetailView extends DeesElement {
<div class="empty-state">No DNS records configured</div>
`}
</div>
</div>
<div slot="footer" class="section-footer">
<button class="tile-button primary" @click=${() => this.handleAddDnsRecord()}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add Record
</button>
</div>
</dees-tile>
</div>
`;
}

212
ts_web/elements/sz-mta-detail-view.ts
View File

@@ -256,31 +256,89 @@ export class SzMtaDetailView extends DeesElement {
gap: 24px;
}
.card {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
overflow: hidden;
.card-header {
height: 36px;
display: flex;
align-items: center;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.card-header {
.card-heading {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
align-items: baseline;
gap: 8px;
min-width: 0;
}
.card-title {
font-size: 16px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-subtitle {
font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-top: 2px;
font-size: 12px;
color: var(--dees-color-text-muted);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.tile-button {
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 12px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
background: transparent;
border: none;
border-left: 1px solid var(--dees-color-border-subtle);
color: var(--dees-color-text-muted);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.tile-button:first-child {
border-left: none;
}
.tile-button:hover {
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.tile-button.primary {
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.tile-button.primary:hover {
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.card-content {
@@ -451,37 +509,13 @@ export class SzMtaDetailView extends DeesElement {
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 metadata banner — sits inside content, above the log */
.smtp-header-subtitle {
font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-top: 2px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 10px 16px;
font-size: 12px;
color: var(--dees-color-text-muted);
border-bottom: 1px solid var(--dees-color-border-subtle);
font-family: monospace;
}
.smtp-direction-badge {
@@ -578,7 +612,7 @@ export class SzMtaDetailView extends DeesElement {
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
}
.rejection-card {
dees-tile.rejection-card::part(outer) {
border-color: ${cssManager.bdTheme('#fecaca', 'rgba(239, 68, 68, 0.3)')};
}
@@ -646,9 +680,11 @@ export class SzMtaDetailView extends DeesElement {
<div class="content">
<div class="main-content">
<!-- Email Metadata -->
<div class="card">
<div class="card-header">
<div class="card-title">Email Metadata</div>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Email Metadata</span>
</div>
</div>
<div class="card-content">
<div class="detail-list">
@@ -684,49 +720,53 @@ export class SzMtaDetailView extends DeesElement {
</div>
</div>
</div>
</div>
</dees-tile>
<!-- 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>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">SMTP Transaction Log</span>
<span class="smtp-direction-badge ${email.direction}">${email.direction}</span>
</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">
</div>
<div class="smtp-header-subtitle">
${email.direction === 'outbound'
? `${email.connectionInfo.sourceHostname} → ${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}`
: `${email.connectionInfo.sourceIp} → ${email.connectionInfo.sourceHostname}:${email.connectionInfo.destinationPort}`
}
</div>
${this.renderSmtpLog(email)}
<div slot="footer" class="card-footer">
<button class="tile-button" @click=${() => this.copySmtpLog()}>
<svg width="12" height="12" 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>
</dees-tile>
<!-- 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>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Email Body (Escaped)</span>
<span class="card-subtitle">Raw content — HTML is not rendered</span>
</div>
</div>
<pre class="email-body-container">${email.body}</pre>
</div>
</dees-tile>
</div>
<div class="sidebar">
<!-- Connection Info -->
<div class="card">
<div class="card-header">
<div class="card-title">Connection Info</div>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Connection Info</span>
</div>
</div>
<div class="card-content">
<div class="detail-list">
@@ -772,12 +812,14 @@ export class SzMtaDetailView extends DeesElement {
` : ''}
</div>
</div>
</div>
</dees-tile>
<!-- Authentication Results -->
<div class="card">
<div class="card-header">
<div class="card-title">Authentication Results</div>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Authentication Results</span>
</div>
</div>
<div class="card-content">
<div class="auth-row">
@@ -802,13 +844,15 @@ export class SzMtaDetailView extends DeesElement {
<span class="auth-badge ${email.authenticationResults.dmarc}">${email.authenticationResults.dmarc}</span>
</div>
</div>
</div>
</dees-tile>
<!-- 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>
<dees-tile class="rejection-card">
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Rejection Details</span>
</div>
</div>
<div class="card-content">
${email.rejectionReason ? html`
@@ -820,7 +864,7 @@ export class SzMtaDetailView extends DeesElement {
<div class="rejection-text">${email.bounceMessage}</div>
` : ''}
</div>
</div>
</dees-tile>
` : ''}
</div>
</div>

80
ts_web/elements/sz-network-domains-view.ts
View File

@@ -7,8 +7,7 @@ import {
property,
type TemplateResult,
} from '@design.estate/dees-element';
import './sz-stat-card.js';
import type { IStatsTile } from '@design.estate/dees-catalog';
declare global {
interface HTMLElementTagNameMap {
@@ -91,19 +90,11 @@ export class SzNetworkDomainsView extends DeesElement {
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
dees-statsgrid {
display: block;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.table-container {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
@@ -205,6 +196,42 @@ export class SzNetworkDomainsView extends DeesElement {
`,
];
private get tiles(): IStatsTile[] {
return [
{
id: 'total',
title: 'Total Domains',
value: this.stats.total,
type: 'number',
icon: 'lucide:globe',
},
{
id: 'valid',
title: 'Valid Certificates',
value: this.stats.valid,
type: 'number',
icon: 'lucide:shieldCheck',
color: '#22c55e',
},
{
id: 'expiring',
title: 'Expiring Soon',
value: this.stats.expiring,
type: 'number',
icon: 'lucide:shieldAlert',
color: this.stats.expiring > 0 ? '#f59e0b' : undefined,
},
{
id: 'expired',
title: 'Expired/Pending',
value: this.stats.expired,
type: 'number',
icon: 'lucide:circleOff',
color: this.stats.expired > 0 ? '#ef4444' : undefined,
},
];
}
public render(): TemplateResult {
return html`
<div class="header">
@@ -212,31 +239,10 @@ export class SzNetworkDomainsView extends DeesElement {
<button class="sync-button" @click=${() => this.handleSync()}>Sync Cloudflare</button>
</div>
<div class="stats-grid">
<sz-stat-card
label="Total Domains"
value="${this.stats.total}"
icon="server"
></sz-stat-card>
<sz-stat-card
label="Valid Certificates"
value="${this.stats.valid}"
icon="check"
variant="success"
></sz-stat-card>
<sz-stat-card
label="Expiring Soon"
value="${this.stats.expiring}"
icon="stop"
variant="${this.stats.expiring > 0 ? 'warning' : 'default'}"
></sz-stat-card>
<sz-stat-card
label="Expired/Pending"
value="${this.stats.expired}"
icon="stop"
variant="${this.stats.expired > 0 ? 'error' : 'default'}"
></sz-stat-card>
</div>
<dees-statsgrid
.tiles=${this.tiles}
.minTileWidth=${200}
></dees-statsgrid>
<div class="table-container">
<div class="table-header">

289
ts_web/elements/sz-network-proxy-view.ts
View File

@@ -7,8 +7,7 @@ import {
property,
type TemplateResult,
} from '@design.estate/dees-element';
import './sz-stat-card.js';
import type { IStatsTile } from '@design.estate/dees-catalog';
declare global {
interface HTMLElementTagNameMap {
@@ -113,42 +112,107 @@ export class SzNetworkProxyView extends DeesElement {
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
dees-statsgrid {
display: block;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
dees-tile {
display: block;
margin-bottom: 24px;
overflow: hidden;
}
.section-header {
padding: 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
height: 36px;
display: flex;
align-items: center;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.section-heading {
flex: 1;
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.section-subtitle {
font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-top: 2px;
font-size: 12px;
color: var(--dees-color-text-muted);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.section-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.tile-button {
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 12px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
background: transparent;
border: none;
border-left: 1px solid var(--dees-color-border-subtle);
color: var(--dees-color-text-muted);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.tile-button:first-child {
border-left: none;
}
.tile-button:hover {
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.tile-button.primary {
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.tile-button.primary:hover {
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.tile-button.danger {
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
}
.tile-button.danger:hover {
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
}
.table-header {
@@ -234,61 +298,6 @@ export class SzNetworkProxyView extends DeesElement {
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
}
.logs-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
}
.logs-actions {
display: flex;
gap: 8px;
}
.stream-button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
border: none;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
color: white;
cursor: pointer;
transition: all 200ms ease;
}
.stream-button:hover {
background: ${cssManager.bdTheme('#1d4ed8', '#2563eb')};
}
.stream-button.streaming {
background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
}
.stream-button.streaming:hover {
background: ${cssManager.bdTheme('#b91c1c', '#dc2626')};
}
.clear-button {
padding: 6px 12px;
background: transparent;
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 4px;
font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
cursor: pointer;
transition: all 200ms ease;
}
.clear-button:hover {
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
}
.logs-container {
padding: 16px;
font-family: monospace;
@@ -336,41 +345,57 @@ export class SzNetworkProxyView extends DeesElement {
`,
];
private get tiles(): IStatsTile[] {
return [
{
id: 'proxy-status',
title: 'Proxy Status',
value: this.proxyStatus === 'running' ? 'Running' : 'Stopped',
type: 'text',
icon: 'lucide:server',
color: this.proxyStatus === 'running' ? '#22c55e' : '#ef4444',
},
{
id: 'routes',
title: 'Routes',
value: this.routeCount,
type: 'number',
icon: 'lucide:server',
},
{
id: 'certificates',
title: 'Certificates',
value: this.certificateCount,
type: 'number',
icon: 'lucide:check',
},
{
id: 'targets',
title: 'Targets',
value: this.targetCount,
type: 'number',
icon: 'lucide:server',
},
];
}
public render(): TemplateResult {
return html`
<div class="actions">
<button class="refresh-button" @click=${() => this.handleRefresh()}>Refresh</button>
</div>
<div class="stats-grid">
<sz-stat-card
label="Proxy Status"
value="${this.proxyStatus === 'running' ? 'Running' : 'Stopped'}"
icon="server"
variant="${this.proxyStatus === 'running' ? 'success' : 'error'}"
valueBadge
></sz-stat-card>
<sz-stat-card
label="Routes"
value="${this.routeCount}"
icon="server"
></sz-stat-card>
<sz-stat-card
label="Certificates"
value="${this.certificateCount}"
icon="check"
></sz-stat-card>
<sz-stat-card
label="Targets"
value="${this.targetCount}"
icon="server"
></sz-stat-card>
</div>
<dees-statsgrid
.tiles=${this.tiles}
.minTileWidth=${200}
></dees-statsgrid>
<div class="section">
<div class="section-header">
<div class="section-title">Traffic Targets</div>
<div class="section-subtitle">Services, registry, and platform services with their routing info</div>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">Traffic Targets</span>
<span class="section-subtitle">Services, registry, and platform services with their routing info</span>
</div>
</div>
<div class="table-header">
<span>Type</span>
@@ -388,30 +413,13 @@ export class SzNetworkProxyView extends DeesElement {
<span><span class="status-badge ${target.status}">${target.status}</span></span>
</div>
`)}
</div>
</dees-tile>
<div class="section">
<div class="logs-header">
<div>
<div class="section-title">Access Logs</div>
<div class="section-subtitle">Real-time Caddy access logs</div>
</div>
<div class="logs-actions">
<button class="stream-button ${this.streaming ? 'streaming' : ''}" @click=${() => this.toggleStreaming()}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
${this.streaming
? html`<rect x="6" y="6" width="12" height="12" rx="1"/>`
: html`<polygon points="5,3 19,12 5,21"/>`
}
</svg>
${this.streaming ? 'Stop' : 'Stream'}
</button>
<button class="clear-button" @click=${() => this.handleClearLogs()}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
</svg>
Clear logs
</button>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">Access Logs</span>
<span class="section-subtitle">Real-time Caddy access logs</span>
</div>
</div>
<div class="logs-container">
@@ -428,7 +436,24 @@ export class SzNetworkProxyView extends DeesElement {
<div class="empty-logs">Click "Stream" to start live access log streaming</div>
`}
</div>
</div>
<div slot="footer" class="section-footer">
<button class="tile-button ${this.streaming ? 'danger' : 'primary'}" @click=${() => this.toggleStreaming()}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
${this.streaming
? html`<rect x="6" y="6" width="12" height="12" rx="1"/>`
: html`<polygon points="5,3 19,12 5,21"/>`
}
</svg>
${this.streaming ? 'Stop' : 'Stream'}
</button>
<button class="tile-button" @click=${() => this.handleClearLogs()}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
</svg>
Clear logs
</button>
</div>
</dees-tile>
`;
}

50
ts_web/elements/sz-platform-service-detail-view.ts
View File

@@ -225,39 +225,35 @@ export class SzPlatformServiceDetailView extends DeesElement {
}
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
overflow: hidden;
}
.section.full-width {
dees-tile.full-width {
grid-column: 1 / -1;
}
.section-header {
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
flex: 1;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
}
.section-title svg {
width: 16px;
height: 16px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--dees-color-text-secondary);
}
.section-content {
@@ -452,8 +448,8 @@ export class SzPlatformServiceDetailView extends DeesElement {
<div class="grid">
<!-- Connection Info -->
<div class="section">
<div class="section-header">
<dees-tile>
<div slot="header" class="section-header">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
@@ -516,11 +512,11 @@ export class SzPlatformServiceDetailView extends DeesElement {
</div>
` : ''}
</div>
</div>
</dees-tile>
<!-- Configuration -->
<div class="section">
<div class="section-header">
<dees-tile>
<div slot="header" class="section-header">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>
@@ -537,12 +533,12 @@ export class SzPlatformServiceDetailView extends DeesElement {
</div>
`)}
</div>
</div>
</dees-tile>
<!-- Metrics -->
${this.service.metrics ? html`
<div class="section full-width">
<div class="section-header">
<dees-tile class="full-width">
<div slot="header" class="section-header">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="20" x2="18" y2="10"></line>
@@ -583,7 +579,7 @@ export class SzPlatformServiceDetailView extends DeesElement {
` : ''}
</div>
</div>
</div>
</dees-tile>
` : ''}
<!-- Logs -->

176
ts_web/elements/sz-service-detail-view.ts
View File

@@ -11,8 +11,6 @@ import {
import type { IExecutionEnvironment } from '@design.estate/dees-catalog';
import './sz-stat-card.js';
declare global {
interface HTMLElementTagNameMap {
'sz-service-detail-view': SzServiceDetailView;
@@ -218,31 +216,97 @@ export class SzServiceDetailView extends DeesElement {
gap: 24px;
}
.card {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
overflow: hidden;
.card-header {
height: 36px;
display: flex;
align-items: center;
padding: 0 8px 0 16px;
width: 100%;
box-sizing: border-box;
}
.card-header {
.card-heading {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
align-items: baseline;
gap: 8px;
min-width: 0;
}
.card-title {
font-size: 16px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-subtitle {
font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-top: 2px;
font-size: 12px;
color: var(--dees-color-text-muted);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.tile-button {
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 12px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
background: transparent;
border: none;
border-left: 1px solid var(--dees-color-border-subtle);
color: var(--dees-color-text-muted);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.tile-button:first-child {
border-left: none;
}
.tile-button:hover {
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.tile-button.primary {
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.tile-button.primary:hover {
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.tile-button.danger {
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
}
.tile-button.danger:hover {
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
}
.card-content {
@@ -518,12 +582,11 @@ export class SzServiceDetailView extends DeesElement {
<div class="content">
<div class="main-content">
<div class="card">
<div class="card-header">
<div>
<div class="card-title">Service Details</div>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Service Details</span>
</div>
<button class="action-button" style="width: auto; padding: 6px 12px;" @click=${() => this.handleEdit()}>Edit</button>
</div>
<div class="card-content">
<div class="detail-list">
@@ -557,7 +620,10 @@ export class SzServiceDetailView extends DeesElement {
</div>
</div>
</div>
</div>
<div slot="footer" class="card-footer">
<button class="tile-button primary" @click=${() => this.handleEdit()}>Edit</button>
</div>
</dees-tile>
<dees-chart-log
.label=${'Service Logs'}
@@ -573,9 +639,11 @@ export class SzServiceDetailView extends DeesElement {
</div>
<div class="sidebar">
<div class="card">
<div class="card-header">
<div class="card-title">Live stats</div>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Live stats</span>
</div>
</div>
<div class="card-content">
<div class="stats-grid">
@@ -598,13 +666,13 @@ export class SzServiceDetailView extends DeesElement {
</div>
</div>
</div>
</div>
</dees-tile>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">Actions</div>
<div class="card-subtitle">Manage service state</div>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Actions</span>
<span class="card-subtitle">Manage service state</span>
</div>
</div>
<div class="card-content">
@@ -624,13 +692,13 @@ export class SzServiceDetailView extends DeesElement {
<button class="action-button danger" @click=${() => this.handleAction('delete')}>Delete Service</button>
</div>
</div>
</div>
</dees-tile>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">Image Source</div>
<div class="card-subtitle">${this.service.registry === 'Docker Hub' ? 'External container registry' : 'Onebox registry'}</div>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Image Source</span>
<span class="card-subtitle">${this.service.registry === 'Docker Hub' ? 'External container registry' : 'Onebox registry'}</span>
</div>
</div>
<div class="card-content">
@@ -649,21 +717,14 @@ export class SzServiceDetailView extends DeesElement {
</div>
</div>
</div>
</div>
</dees-tile>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">Backups</div>
<div class="card-subtitle">Create and manage service backups</div>
<dees-tile>
<div slot="header" class="card-header">
<div class="card-heading">
<span class="card-title">Backups</span>
<span class="card-subtitle">Create and manage service backups</span>
</div>
<button class="action-button" style="width: auto; padding: 6px 12px;" @click=${() => this.handleCreateBackup()}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Create Backup
</button>
</div>
<div class="card-content">
<div class="backup-list">
@@ -698,7 +759,16 @@ export class SzServiceDetailView extends DeesElement {
`)}
</div>
</div>
</div>
<div slot="footer" class="card-footer">
<button class="tile-button primary" @click=${() => this.handleCreateBackup()}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Create Backup
</button>
</div>
</dees-tile>
</div>
</div>
`;

157
ts_web/elements/sz-services-backups-view.ts
View File

@@ -65,71 +65,94 @@ export class SzServicesBackupsView extends DeesElement {
display: block;
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
dees-tile {
display: block;
margin-bottom: 24px;
overflow: hidden;
}
.section-header {
height: 36px;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
align-items: center;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.section-info {
.section-heading {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.section-subtitle {
font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
font-size: 12px;
color: var(--dees-color-text-muted);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header-actions {
.section-footer {
display: flex;
gap: 8px;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.action-button {
display: inline-flex;
.tile-button {
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 12px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
background: transparent;
border: none;
border-left: 1px solid var(--dees-color-border-subtle);
color: var(--dees-color-text-muted);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
cursor: pointer;
transition: all 200ms ease;
}
.action-button:hover {
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
.tile-button:first-child {
border-left: none;
}
.action-button.primary {
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
border: none;
.tile-button:hover {
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.action-button.primary:hover {
opacity: 0.9;
.tile-button.primary {
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.tile-button.primary:hover {
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.table-header {
@@ -253,28 +276,11 @@ export class SzServicesBackupsView extends DeesElement {
public render(): TemplateResult {
return html`
<div class="section">
<div class="section-header">
<div class="section-info">
<div class="section-title">Backup Schedules</div>
<div class="section-subtitle">Configure automated backup schedules for your services</div>
</div>
<div class="header-actions">
<button class="action-button" @click=${() => this.handleImport()}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
Import Backup
</button>
<button class="action-button primary" @click=${() => this.handleCreateSchedule()}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Create Schedule
</button>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">Backup Schedules</span>
<span class="section-subtitle">Configure automated backup schedules for your services</span>
</div>
</div>
<div class="table-header schedules-header">
@@ -318,13 +324,30 @@ export class SzServicesBackupsView extends DeesElement {
</span>
</div>
`)}
</div>
<div slot="footer" class="section-footer">
<button class="tile-button" @click=${() => this.handleImport()}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
Import Backup
</button>
<button class="tile-button primary" @click=${() => this.handleCreateSchedule()}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Create Schedule
</button>
</div>
</dees-tile>
<div class="section">
<div class="section-header">
<div class="section-info">
<div class="section-title">All Backups</div>
<div class="section-subtitle">Browse and manage all backups across services</div>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">All Backups</span>
<span class="section-subtitle">Browse and manage all backups across services</span>
</div>
</div>
<div class="table-header backups-header">
@@ -358,7 +381,7 @@ export class SzServicesBackupsView extends DeesElement {
</span>
</div>
`)}
</div>
</dees-tile>
`;
}

372
ts_web/elements/sz-settings-view.ts
View File

@@ -72,28 +72,98 @@ export class SzSettingsView extends DeesElement {
display: block;
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
padding: 20px;
dees-tile {
display: block;
margin-bottom: 24px;
}
.section-header {
margin-bottom: 16px;
height: 36px;
display: flex;
align-items: center;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.section-heading {
flex: 1;
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.section-subtitle {
font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-top: 2px;
font-size: 12px;
color: var(--dees-color-text-muted);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.section-content {
padding: 20px;
}
.section-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.tile-button {
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 12px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
background: transparent;
border: none;
border-left: 1px solid var(--dees-color-border-subtle);
color: var(--dees-color-text-muted);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.tile-button:first-child {
border-left: none;
}
.tile-button:hover {
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.tile-button.primary {
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.tile-button.primary:hover {
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.form-group {
@@ -224,161 +294,151 @@ export class SzSettingsView extends DeesElement {
margin-bottom: 4px;
}
.actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 16px;
border-top: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
margin-top: 24px;
}
.button {
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 200ms ease;
}
.button.secondary {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
}
.button.secondary:hover {
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
}
.button.primary {
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
border: none;
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
}
.button.primary:hover {
opacity: 0.9;
}
`,
];
public render(): TemplateResult {
return html`
<div class="section">
<div class="section-header">
<div class="section-title">Appearance</div>
<div class="section-subtitle">Customize the look and feel</div>
</div>
<div class="form-row">
<div class="form-label-group">
<span class="form-label">Dark Mode</span>
<span class="form-hint">Toggle dark mode on or off</span>
</div>
<div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-title">Cloudflare Integration</div>
<div class="section-subtitle">Configure Cloudflare API for DNS management</div>
</div>
<div class="input-group">
<div class="form-group">
<div class="field-label">API Token</div>
<input type="password" placeholder="Enter Cloudflare API token" .value=${this.settings.cloudflareToken} @input=${(e: Event) => this.updateSetting('cloudflareToken', (e.target as HTMLInputElement).value)}>
</div>
<div class="form-group">
<div class="field-label">Zone ID (Optional)</div>
<input type="text" placeholder="Default zone ID" .value=${this.settings.cloudflareZoneId} @input=${(e: Event) => this.updateSetting('cloudflareZoneId', (e.target as HTMLInputElement).value)}>
</div>
<div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-title">SSL/TLS Settings</div>
<div class="section-subtitle">Configure certificate management</div>
</div>
<div class="form-row">
<div class="form-label-group">
<span class="form-label">Auto-Renew Certificates</span>
<span class="form-hint">Automatically renew certificates before expiry</span>
</div>
<div class="toggle-switch ${this.settings.autoRenewCerts ? 'active' : ''}" @click=${() => this.toggleSetting('autoRenewCerts')}></div>
</div>
<div class="form-group" style="margin-top: 16px;">
<div class="field-label">Renewal Threshold (days)</div>
<input type="number" .value=${String(this.settings.renewalThreshold)} @input=${(e: Event) => this.updateSetting('renewalThreshold', parseInt((e.target as HTMLInputElement).value))}>
<div class="form-hint">Renew certificates when they have fewer than this many days remaining.</div>
</div>
<div class="form-group">
<div class="field-label">ACME Email</div>
<input type="email" placeholder="admin@example.com" .value=${this.settings.acmeEmail} @input=${(e: Event) => this.updateSetting('acmeEmail', (e.target as HTMLInputElement).value)}>
<div class="form-hint">Email address for Let's Encrypt notifications.</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-title">Network Settings</div>
<div class="section-subtitle">Configure network and proxy settings</div>
</div>
<div class="input-row">
<div class="form-group">
<div class="field-label">HTTP Port</div>
<input type="number" .value=${String(this.settings.httpPort)} @input=${(e: Event) => this.updateSetting('httpPort', parseInt((e.target as HTMLInputElement).value))}>
</div>
<div class="form-group">
<div class="field-label">HTTPS Port</div>
<input type="number" .value=${String(this.settings.httpsPort)} @input=${(e: Event) => this.updateSetting('httpsPort', parseInt((e.target as HTMLInputElement).value))}>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">Appearance</span>
<span class="section-subtitle">Customize the look and feel</span>
</div>
</div>
<div class="form-row">
<div class="form-label-group">
<span class="form-label">Force HTTPS</span>
<span class="form-hint">Redirect all HTTP traffic to HTTPS</span>
</div>
<div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-title">Account</div>
<div class="section-subtitle">Manage your account settings</div>
</div>
<div class="form-group">
<div class="field-label">Current User</div>
<div style="font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')};">${this.currentUser || 'Unknown'}</div>
</div>
<div class="password-section">
<div class="password-title">Change Password</div>
<div class="password-fields">
<div>
<div class="field-label">Current Password</div>
<input type="password" id="currentPassword">
<div class="section-content">
<div class="form-row">
<div class="form-label-group">
<span class="form-label">Dark Mode</span>
<span class="form-hint">Toggle dark mode on or off</span>
</div>
<div>
<div class="field-label">New Password</div>
<input type="password" id="newPassword">
</div>
<div>
<div class="field-label">Confirm Password</div>
<input type="password" id="confirmPassword">
</div>
<button class="button secondary" style="width: fit-content;" @click=${() => this.handleChangePassword()}>Update Password</button>
<div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
</div>
</div>
</div>
</dees-tile>
<div class="actions">
<button class="button secondary" @click=${() => this.handleReset()}>Reset</button>
<button class="button primary" @click=${() => this.handleSave()}>Save Settings</button>
</div>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">Cloudflare Integration</span>
<span class="section-subtitle">Configure Cloudflare API for DNS management</span>
</div>
</div>
<div class="section-content">
<div class="input-group">
<div class="form-group">
<div class="field-label">API Token</div>
<input type="password" placeholder="Enter Cloudflare API token" .value=${this.settings.cloudflareToken} @input=${(e: Event) => this.updateSetting('cloudflareToken', (e.target as HTMLInputElement).value)}>
</div>
<div class="form-group">
<div class="field-label">Zone ID (Optional)</div>
<input type="text" placeholder="Default zone ID" .value=${this.settings.cloudflareZoneId} @input=${(e: Event) => this.updateSetting('cloudflareZoneId', (e.target as HTMLInputElement).value)}>
</div>
<div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
</div>
</div>
</dees-tile>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">SSL/TLS Settings</span>
<span class="section-subtitle">Configure certificate management</span>
</div>
</div>
<div class="section-content">
<div class="form-row">
<div class="form-label-group">
<span class="form-label">Auto-Renew Certificates</span>
<span class="form-hint">Automatically renew certificates before expiry</span>
</div>
<div class="toggle-switch ${this.settings.autoRenewCerts ? 'active' : ''}" @click=${() => this.toggleSetting('autoRenewCerts')}></div>
</div>
<div class="form-group" style="margin-top: 16px;">
<div class="field-label">Renewal Threshold (days)</div>
<input type="number" .value=${String(this.settings.renewalThreshold)} @input=${(e: Event) => this.updateSetting('renewalThreshold', parseInt((e.target as HTMLInputElement).value))}>
<div class="form-hint">Renew certificates when they have fewer than this many days remaining.</div>
</div>
<div class="form-group">
<div class="field-label">ACME Email</div>
<input type="email" placeholder="admin@example.com" .value=${this.settings.acmeEmail} @input=${(e: Event) => this.updateSetting('acmeEmail', (e.target as HTMLInputElement).value)}>
<div class="form-hint">Email address for Let's Encrypt notifications.</div>
</div>
</div>
</dees-tile>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">Network Settings</span>
<span class="section-subtitle">Configure network and proxy settings</span>
</div>
</div>
<div class="section-content">
<div class="input-row">
<div class="form-group">
<div class="field-label">HTTP Port</div>
<input type="number" .value=${String(this.settings.httpPort)} @input=${(e: Event) => this.updateSetting('httpPort', parseInt((e.target as HTMLInputElement).value))}>
</div>
<div class="form-group">
<div class="field-label">HTTPS Port</div>
<input type="number" .value=${String(this.settings.httpsPort)} @input=${(e: Event) => this.updateSetting('httpsPort', parseInt((e.target as HTMLInputElement).value))}>
</div>
</div>
<div class="form-row">
<div class="form-label-group">
<span class="form-label">Force HTTPS</span>
<span class="form-hint">Redirect all HTTP traffic to HTTPS</span>
</div>
<div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
</div>
</div>
</dees-tile>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">Account</span>
<span class="section-subtitle">Manage your account settings</span>
</div>
</div>
<div class="section-content">
<div class="form-group">
<div class="field-label">Current User</div>
<div style="font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')};">${this.currentUser || 'Unknown'}</div>
</div>
<div class="password-section">
<div class="password-title">Change Password</div>
<div class="password-fields">
<div>
<div class="field-label">Current Password</div>
<input type="password" id="currentPassword">
</div>
<div>
<div class="field-label">New Password</div>
<input type="password" id="newPassword">
</div>
<div>
<div class="field-label">Confirm Password</div>
<input type="password" id="confirmPassword">
</div>
</div>
</div>
</div>
<div slot="footer" class="section-footer">
<button class="tile-button" @click=${() => this.handleChangePassword()}>Update Password</button>
</div>
</dees-tile>
<dees-tile>
<div class="section-content" style="padding: 12px 16px; text-align: center; color: var(--dees-color-text-muted); font-size: 12px;">
Save your changes or reset to defaults.
</div>
<div slot="footer" class="section-footer">
<button class="tile-button" @click=${() => this.handleReset()}>Reset</button>
<button class="tile-button primary" @click=${() => this.handleSave()}>Save Settings</button>
</div>
</dees-tile>
`;
}

189
ts_web/elements/sz-stat-card.ts
View File

@@ -1,189 +0,0 @@
import {
DeesElement,
customElement,
html,
css,
cssManager,
property,
type TemplateResult,
} from '@design.estate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'sz-stat-card': SzStatCard;
}
}
@customElement('sz-stat-card')
export class SzStatCard extends DeesElement {
public static demo = () => html`
<style>
.demo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 24px;
max-width: 800px;
}
</style>
<div class="demo-grid">
<sz-stat-card
label="Total Services"
value="7"
icon="server"
></sz-stat-card>
<sz-stat-card
label="Running"
value="7"
icon="check"
variant="success"
></sz-stat-card>
<sz-stat-card
label="Stopped"
value="0"
icon="stop"
></sz-stat-card>
<sz-stat-card
label="Docker"
value="Running"
icon="container"
variant="success"
valueBadge
></sz-stat-card>
</div>
`;
public static demoGroups = ['Dashboard'];
@property({ type: String })
public accessor label: string = '';
@property({ type: String })
public accessor value: string = '';
@property({ type: String })
public accessor icon: string = '';
@property({ type: String })
public accessor variant: 'default' | 'success' | 'warning' | 'error' = 'default';
@property({ type: Boolean })
public accessor valueBadge: boolean = false;
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
height: 100%;
}
.card {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
padding: 20px;
transition: all 200ms ease;
height: 100%;
box-sizing: border-box;
}
.card:hover {
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.05)', 'rgba(0,0,0,0.2)')};
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.label {
font-size: 14px;
font-weight: 500;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
}
.icon {
width: 20px;
height: 20px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
}
.value {
font-size: 28px;
font-weight: 700;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
line-height: 1.2;
}
.value.success {
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
}
.value.warning {
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
}
.value.error {
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
}
.badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 9999px;
font-size: 14px;
font-weight: 500;
}
.badge.success {
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
}
.badge.warning {
background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
}
.badge.error {
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
}
.badge.default {
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
}
`,
];
public render(): TemplateResult {
const valueClass = this.valueBadge ? `badge ${this.variant}` : `value ${this.variant}`;
return html`
<div class="card">
<div class="header">
<span class="label">${this.label}</span>
${this.renderIcon()}
</div>
<div class="${valueClass}">${this.value}</div>
</div>
`;
}
private renderIcon(): TemplateResult {
const icons: Record<string, TemplateResult> = {
server: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" 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>`,
check: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
stop: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg>`,
container: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>`,
};
return icons[this.icon] || html``;
}
}

86
ts_web/elements/sz-status-grid-cluster.ts
View File

@@ -7,8 +7,7 @@ import {
property,
type TemplateResult,
} from '@design.estate/dees-element';
import './sz-stat-card.js';
import type { IStatsTile } from '@design.estate/dees-catalog';
declare global {
interface HTMLElementTagNameMap {
@@ -54,54 +53,51 @@ export class SzStatusGridCluster extends DeesElement {
:host {
display: block;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
align-items: stretch;
}
.grid > * {
height: 100%;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
`,
];
private get tiles(): IStatsTile[] {
return [
{
id: 'total',
title: 'Total Services',
value: this.stats.totalServices,
type: 'number',
icon: 'lucide:server',
},
{
id: 'running',
title: 'Running',
value: this.stats.running,
type: 'number',
icon: 'lucide:check',
color: '#22c55e',
},
{
id: 'stopped',
title: 'Stopped',
value: this.stats.stopped,
type: 'number',
icon: 'lucide:circleStop',
color: this.stats.stopped > 0 ? '#f59e0b' : undefined,
},
{
id: 'docker',
title: 'Docker',
value: this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped',
type: 'text',
icon: 'lucide:container',
color: this.stats.dockerStatus === 'running' ? '#22c55e' : '#ef4444',
},
];
}
public render(): TemplateResult {
return html`
<div class="grid">
<sz-stat-card
label="Total Services"
value="${this.stats.totalServices}"
icon="server"
></sz-stat-card>
<sz-stat-card
label="Running"
value="${this.stats.running}"
icon="check"
variant="success"
></sz-stat-card>
<sz-stat-card
label="Stopped"
value="${this.stats.stopped}"
icon="stop"
variant="${this.stats.stopped > 0 ? 'warning' : 'default'}"
></sz-stat-card>
<sz-stat-card
label="Docker"
value="${this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped'}"
icon="container"
variant="${this.stats.dockerStatus === 'running' ? 'success' : 'error'}"
valueBadge
></sz-stat-card>
</div>
<dees-statsgrid
.tiles=${this.tiles}
.minTileWidth=${200}
></dees-statsgrid>
`;
}
}

170
ts_web/elements/sz-tokens-view.ts
View File

@@ -55,56 +55,94 @@ export class SzTokensView extends DeesElement {
display: block;
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
dees-tile {
display: block;
margin-bottom: 24px;
overflow: hidden;
}
.section-header {
height: 36px;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
align-items: center;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.section-info {
.section-heading {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
align-items: baseline;
gap: 8px;
min-width: 0;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.section-subtitle {
font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
font-size: 12px;
color: var(--dees-color-text-muted);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.create-button {
display: inline-flex;
.section-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.tile-button {
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 12px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
background: transparent;
border: none;
border-left: 1px solid var(--dees-color-border-subtle);
color: var(--dees-color-text-muted);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
cursor: pointer;
transition: all 200ms ease;
}
.create-button:hover {
opacity: 0.9;
.tile-button:first-child {
border-left: none;
}
.tile-button:hover {
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.tile-button.primary {
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.tile-button.primary:hover {
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.token-list {
@@ -192,45 +230,18 @@ export class SzTokensView extends DeesElement {
.empty-text {
font-size: 14px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
margin-bottom: 16px;
}
.empty-button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
cursor: pointer;
transition: all 200ms ease;
}
.empty-button:hover {
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
}
`,
];
public render(): TemplateResult {
return html`
<div class="section">
<div class="section-header">
<div class="section-info">
<div class="section-title">Global Tokens</div>
<div class="section-subtitle">Tokens that can push images to multiple services</div>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">Global Tokens</span>
<span class="section-subtitle">Tokens that can push images to multiple services</span>
</div>
<button class="create-button" @click=${() => this.handleCreate('global')}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Create Token
</button>
</div>
${this.globalTokens.length > 0 ? html`
<div class="token-list">
@@ -239,25 +250,26 @@ export class SzTokensView extends DeesElement {
` : html`
<div class="empty-state">
<div class="empty-text">No global tokens created</div>
<button class="empty-button" @click=${() => this.handleCreate('global')}>Create Global Token</button>
</div>
`}
</div>
<div class="section">
<div class="section-header">
<div class="section-info">
<div class="section-title">CI Tokens (Service-specific)</div>
<div class="section-subtitle">Tokens tied to individual services for CI/CD pipelines</div>
</div>
<button class="create-button" @click=${() => this.handleCreate('ci')}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<div slot="footer" class="section-footer">
<button class="tile-button primary" @click=${() => this.handleCreate('global')}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Create Token
</button>
</div>
</dees-tile>
<dees-tile>
<div slot="header" class="section-header">
<div class="section-heading">
<span class="section-title">CI Tokens (Service-specific)</span>
<span class="section-subtitle">Tokens tied to individual services for CI/CD pipelines</span>
</div>
</div>
${this.ciTokens.length > 0 ? html`
<div class="token-list">
${this.ciTokens.map(token => this.renderToken(token))}
@@ -265,10 +277,18 @@ export class SzTokensView extends DeesElement {
` : html`
<div class="empty-state">
<div class="empty-text">No CI tokens created</div>
<button class="empty-button" @click=${() => this.handleCreate('ci')}>Create CI Token</button>
</div>
`}
</div>
<div slot="footer" class="section-footer">
<button class="tile-button primary" @click=${() => this.handleCreate('ci')}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Create Token
</button>
</div>
</dees-tile>
`;
}