feat(elements): standardize dashboard and detail views on dees tile and stats grid components
This commit is contained in:
@@ -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>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user