v2.7.0

changelog.md

@@ -1,5 +1,25 @@
 # 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
+
+- Places the logs component inside a container spanning all grid columns.
+- Keeps the service logs view aligned correctly within the detail page layout.
+
+## 2026-03-16 - 2.6.1 - fix(platform-service-detail-view)
+replace custom service log markup with dees-chart-log in the platform service detail view
+
+- Removes bespoke log container styles and rendering logic in favor of the shared dees-chart-log component
+- Normalizes log timestamps to ISO format before passing entries to the chart component
+- Enables log auto-scroll, entry limits, and metrics display for service logs
+
 ## 2026-03-16 - 2.6.0 - feat(service-create-view)
 add platform service toggles for MongoDB, S3, and ClickHouse provisioning
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/catalog",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "private": false,
   "description": "UI component catalog for serve.zone",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

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

ts_web/elements/sz-platform-service-detail-view.ts

@@ -363,56 +363,6 @@ export class SzPlatformServiceDetailView extends DeesElement {
         background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
       }
 
-      .log-container {
-        background: ${cssManager.bdTheme('#18181b', '#09090b')};
-        border-radius: 6px;
-        padding: 12px;
-        max-height: 300px;
-        overflow-y: auto;
-        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
-        font-size: 12px;
-        line-height: 1.6;
-      }
-
-      .log-entry {
-        display: flex;
-        gap: 12px;
-        padding: 4px 0;
-      }
-
-      .log-timestamp {
-        color: #71717a;
-        flex-shrink: 0;
-      }
-
-      .log-level {
-        flex-shrink: 0;
-        width: 50px;
-        text-transform: uppercase;
-        font-weight: 500;
-      }
-
-      .log-level.info {
-        color: #60a5fa;
-      }
-
-      .log-level.warn {
-        color: #fbbf24;
-      }
-
-      .log-level.error {
-        color: #f87171;
-      }
-
-      .log-level.debug {
-        color: #a1a1aa;
-      }
-
-      .log-message {
-        color: #fafafa;
-        word-break: break-word;
-      }
-
       .config-item {
         display: flex;
         justify-content: space-between;
@@ -637,29 +587,18 @@ export class SzPlatformServiceDetailView extends DeesElement {
         ` : ''}
 
         <!-- Logs -->
-        <div class="section full-width">
+        <div style="grid-column: 1 / -1;">
-          <div class="section-header">
+          <dees-chart-log
-            <div class="section-title">
+            .label=${'Service Logs'}
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            .logEntries=${this.logs.map(log => ({
-                <polyline points="4 17 10 11 4 5"></polyline>
+              timestamp: log.timestamp.includes('T') ? log.timestamp : new Date(log.timestamp).toISOString(),
-                <line x1="12" y1="19" x2="20" y2="19"></line>
+              level: log.level as 'debug' | 'info' | 'warn' | 'error',
-              </svg>
+              message: log.message,
-              Logs
+            }))}
-            </div>
+            .autoScroll=${true}
-          </div>
+            .maxEntries=${2000}
-          <div class="section-content">
+            .showMetrics=${true}
-            <div class="log-container">
+          ></dees-chart-log>
-              ${this.logs.length > 0 ? this.logs.map(log => html`
-                <div class="log-entry">
-                  <span class="log-timestamp">${log.timestamp}</span>
-                  <span class="log-level ${log.level}">${log.level}</span>
-                  <span class="log-message">${log.message}</span>
-                </div>
-              `) : html`
-                <div style="color: #71717a; text-align: center; padding: 20px;">No logs available</div>
-              `}
-            </div>
-          </div>
         </div>
       </div>
     `;

ts_web/elements/sz-service-detail-view.ts

@@ -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">
+          <dees-chart-log
-            <div class="card-header">
+            .label=${'Service Logs'}
-              <div class="logs-header" style="width: 100%;">
+            .logEntries=${this.logs.map(log => ({
-                <div>
+              timestamp: log.timestamp?.includes?.('T') ? log.timestamp : new Date(log.timestamp || Date.now()).toISOString(),
-                  <div class="card-title">Logs</div>
+              level: (log.level || 'info') as 'debug' | 'info' | 'warn' | 'error',
-                  <div class="card-subtitle">Container logs</div>
+              message: log.message,
-                </div>
+            }))}
-                <div class="logs-actions">
+            .autoScroll=${true}
-                  <button class="stream-button ${this.streaming ? 'streaming' : ''}" @click=${() => this.toggleStreaming()}>
+            .maxEntries=${2000}
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+            .showMetrics=${true}
-                      ${this.streaming
+          ></dees-chart-log>
-                        ? 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>
         </div>
 
         <div class="sidebar">