feat(elements): standardize dashboard and detail views on dees tile and stats grid components
This commit is contained in:
@@ -1,5 +1,12 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-04-07 - 2.12.0 - feat(elements)
|
||||
standardize dashboard and detail views on dees tile and stats grid components
|
||||
|
||||
- replace custom stat cards with dees-statsgrid across status and network views and remove the obsolete sz-stat-card element
|
||||
- migrate multiple detail and settings views to dees-tile headers and footers for consistent action placement and styling
|
||||
- extend sz-config-section with footer links and actions plus improved collapsed tile behavior
|
||||
|
||||
## 2026-04-05 - 2.11.2 - fix(route-card)
|
||||
align route card with source profile metadata and vpnOnly route configuration
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## Project Structure
|
||||
- `html/index.ts` - WccTools setup with sections for Pages and Elements
|
||||
- `ts_web/elements/` - All web components (34 elements + 9 demo-view wrappers)
|
||||
- `ts_web/elements/` - All web components (33 elements + 9 demo-view wrappers)
|
||||
- `ts_web/elements/index.ts` - Barrel export for all element components
|
||||
- `ts_web/pages/` - Page components
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
## Demo Groups
|
||||
| Group | Elements |
|
||||
|-------|----------|
|
||||
| Dashboard | sz-dashboard-view, sz-stat-card, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
|
||||
| Dashboard | sz-dashboard-view, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
|
||||
| Dashboard Grids | sz-status-grid-cluster, sz-status-grid-services, sz-status-grid-network, sz-status-grid-infra |
|
||||
| Platform | sz-platform-services-card, sz-platform-service-detail-view |
|
||||
| Network | sz-network-proxy-view, sz-network-dns-view, sz-network-domains-view, sz-reverse-proxy-card, sz-dns-ssl-card, sz-certificates-card, sz-domain-detail-view |
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@serve.zone/catalog',
|
||||
version: '2.11.2',
|
||||
version: '2.12.0',
|
||||
description: 'UI component catalog for serve.zone'
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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>
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
${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 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>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
<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>
|
||||
<span>${email.direction === 'outbound'
|
||||
</div>
|
||||
</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}`
|
||||
}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<button class="smtp-copy-button" @click=${() => this.copySmtpLog()}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
${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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 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>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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 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 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>
|
||||
`;
|
||||
|
||||
@@ -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 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>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -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,53 +294,19 @@ 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>
|
||||
<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="section-content">
|
||||
<div class="form-row">
|
||||
<div class="form-label-group">
|
||||
<span class="form-label">Dark Mode</span>
|
||||
@@ -279,12 +315,16 @@ export class SzSettingsView extends DeesElement {
|
||||
<div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
@@ -297,12 +337,16 @@ export class SzSettingsView extends DeesElement {
|
||||
<div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">SSL/TLS Settings</div>
|
||||
<div class="section-subtitle">Configure certificate management</div>
|
||||
<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>
|
||||
@@ -321,12 +365,16 @@ export class SzSettingsView extends DeesElement {
|
||||
<div class="form-hint">Email address for Let's Encrypt notifications.</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Network Settings</div>
|
||||
<div class="section-subtitle">Configure network and proxy settings</div>
|
||||
<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>
|
||||
@@ -345,12 +393,16 @@ export class SzSettingsView extends DeesElement {
|
||||
<div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Account</div>
|
||||
<div class="section-subtitle">Manage your account settings</div>
|
||||
<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>
|
||||
@@ -370,15 +422,23 @@ export class SzSettingsView extends DeesElement {
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button" @click=${() => this.handleChangePassword()}>Update Password</button>
|
||||
</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>
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -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``;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 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>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user