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

feat(sz-service-detail-view): replace the custom logs panel with dees-chart-log in the service detail view

Browse Source
This commit is contained in:
Jürgen Kunz
2026-03-17 19:29:47 +00:00
parent 889f84d666
commit 61359bc712
3 changed files with 19 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -1,5 +1,12 @@
# Changelog
## 2026-03-17 - 2.7.0 - feat(sz-service-detail-view)
replace the custom logs panel with dees-chart-log in the service detail view
- Removes the bespoke log streaming UI styles and markup in favor of a shared log chart component.
- Maps service log entries to structured timestamp, level, and message data for the new component.
- Enables auto-scrolling, metrics display, and a higher log entry limit in the embedded log viewer.
## 2026-03-16 - 2.6.2 - fix(platform-service-detail-view)
wrap service logs chart in a full-width container to preserve layout

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@serve.zone/catalog',
version: '2.6.2',
version: '2.7.0',
description: 'UI component catalog for serve.zone'
}

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

@@ -396,68 +396,6 @@ export class SzServiceDetailView extends DeesElement {
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
}
.logs-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logs-actions {
display: flex;
gap: 8px;
align-items: center;
}
.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;
}
.stream-button.streaming {
background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
}
.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;
}
.logs-container {
padding: 16px;
font-family: monospace;
font-size: 12px;
max-height: 300px;
overflow-y: auto;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
}
.log-entry {
padding: 2px 0;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
white-space: pre-wrap;
word-break: break-all;
}
.empty-logs {
padding: 24px;
text-align: center;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
}
.tag-badge {
display: inline-flex;
padding: 2px 8px;
@@ -621,35 +559,17 @@ export class SzServiceDetailView extends DeesElement {
</div>
</div>
<div class="card">
<div class="card-header">
<div class="logs-header" style="width: 100%;">
<div>
<div class="card-title">Logs</div>
<div class="card-subtitle">Container 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()}>Clear logs</button>
</div>
</div>
</div>
<div class="logs-container">
${this.logs.length > 0 ? this.logs.map(log => html`
<div class="log-entry">${log.timestamp} ${log.message}</div>
`) : html`
<div class="empty-logs">Click "Stream" to start live log streaming</div>
`}
</div>
</div>
<dees-chart-log
.label=${'Service Logs'}
.logEntries=${this.logs.map(log => ({
timestamp: log.timestamp?.includes?.('T') ? log.timestamp : new Date(log.timestamp || Date.now()).toISOString(),
level: (log.level || 'info') as 'debug' | 'info' | 'warn' | 'error',
message: log.message,
}))}
.autoScroll=${true}
.maxEntries=${2000}
.showMetrics=${true}
></dees-chart-log>
</div>
<div class="sidebar">