feat(logs): replace custom logs list with dees-chart-log component and push logs to chart, add log mapping and lifecycle sync, and bump smartlog dependency

2026-02-20 12:55:20 +00:00
parent 822bbc1957
commit b2fe6caf33
6 changed files with 81 additions and 131 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,14 @@
 # Changelog

+## 2026-02-20 - 7.2.0 - feat(logs)
+replace custom logs list with dees-chart-log component and push logs to chart, add log mapping and lifecycle sync, and bump smartlog dependency
+
+- Replaced the legacy in-component log list and styling with a dees-chart-log element to render application logs.
+- Added updated() lifecycle handler to push new logs to the chart and new helper methods pushLogsToChart() and getMappedLogEntries() to map log entries to the chart's expected format.
+- Removed the streaming toggle, getActiveFilters(), legacy CSS for the log list, and the old per-entry rendering markup.
+- Added explicit typing for dropdown @selectedOption handlers (e: any).
+- Bumped dependency @push.rocks/smartlog from ^3.2.0 to ^3.2.1 in package.json.
+
 ## 2026-02-19 - 7.1.0 - feat(ops/monitoring)
 add in-memory log buffer, metrics time-series and ops UI integration

--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
    "@push.rocks/smartfile": "^13.1.2",
    "@push.rocks/smartguard": "^3.1.0",
    "@push.rocks/smartjwt": "^2.2.1",
-    "@push.rocks/smartlog": "^3.2.0",
+    "@push.rocks/smartlog": "^3.2.1",
    "@push.rocks/smartmetrics": "^3.0.1",
    "@push.rocks/smartmongo": "^5.1.0",
    "@push.rocks/smartmta": "^5.2.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,8 +54,8 @@ importers:
        specifier: ^2.2.1
        version: 2.2.1
      '@push.rocks/smartlog':
-        specifier: ^3.2.0
-        version: 3.2.0
+        specifier: ^3.2.1
+        version: 3.2.1
      '@push.rocks/smartmetrics':
        specifier: ^3.0.1
        version: 3.0.1
@@ -960,8 +960,8 @@ packages:
  '@push.rocks/smartlog-interfaces@3.0.2':
    resolution: {integrity: sha512-8hGRTJehbsFSJxLhCQkA018mZtXVPxPTblbg9VaE/EqISRzUw+eosJ2EJV7M4Qu0eiTJZjnWnNLn8CkD77ziWw==}

-  '@push.rocks/smartlog@3.2.0':
-    resolution: {integrity: sha512-d6IzsSG8HTmgxr8c9BVzZWpn8m3c17b5O+orHdwrlgHqPVa0+WXMe1ezItuPVZH5q6i8h+OfCv382PTloNiweg==}
+  '@push.rocks/smartlog@3.2.1':
+    resolution: {integrity: sha512-x9/P59pfzY6HOGYmYrhqmoRl/pliTVx44g2Vbb8dIr/0zA39cAJHlPze1+UGncn37XKGmutK2iLSsJLEsexD0A==}

  '@push.rocks/smartmail@2.2.0':
    resolution: {integrity: sha512-28K4HAcda7ODUUpFCgbS/uA+eqwVRcmLJERIdM9AvLHXaHAPLHH97HmwPPcAu9Sp3z05Um0inmDF51X6yVVkcw==}
@@ -4300,7 +4300,7 @@ snapshots:
      '@push.rocks/smartfeed': 1.4.0
      '@push.rocks/smartfile': 11.2.7
      '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartlog-destination-devtools': 1.0.12
      '@push.rocks/smartlog-interfaces': 3.0.2
      '@push.rocks/smartmanifest': 2.0.2
@@ -4349,7 +4349,7 @@ snapshots:
      '@push.rocks/smartfile': 13.1.2
      '@push.rocks/smartfs': 1.3.1
      '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartlog-destination-devtools': 1.0.12
      '@push.rocks/smartlog-interfaces': 3.0.2
      '@push.rocks/smartmanifest': 2.0.2
@@ -4416,7 +4416,7 @@ snapshots:
  '@apiclient.xyz/cloudflare@7.1.0':
    dependencies:
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrequest': 5.0.1
      '@push.rocks/smartstring': 4.1.0
@@ -5150,7 +5150,7 @@ snapshots:
      '@push.rocks/smartdelay': 3.0.5
      '@push.rocks/smartfile': 13.1.2
      '@push.rocks/smartfs': 1.3.1
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartpath': 6.0.0
      '@push.rocks/smartpromise': 4.2.3
      typescript: 5.9.3
@@ -5171,7 +5171,7 @@ snapshots:
      '@push.rocks/smartdelay': 3.0.5
      '@push.rocks/smartfs': 1.3.1
      '@push.rocks/smartinteract': 2.0.16
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartlog-destination-local': 9.0.2
      '@push.rocks/smartpath': 6.0.0
      '@push.rocks/smartpromise': 4.2.3
@@ -5197,7 +5197,7 @@ snapshots:
      '@push.rocks/smartdelay': 3.0.5
      '@push.rocks/smartfile': 13.1.2
      '@push.rocks/smartfs': 1.3.1
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartnpm': 2.0.6
      '@push.rocks/smartpath': 6.0.0
      '@push.rocks/smartrequest': 5.0.1
@@ -5232,7 +5232,7 @@ snapshots:
      '@push.rocks/smartexpect': 2.5.0
      '@push.rocks/smartfile': 11.2.7
      '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartmongo': 2.2.0(socks@2.8.7)
      '@push.rocks/smartnetwork': 4.4.0
      '@push.rocks/smartpath': 6.0.0
@@ -5278,7 +5278,7 @@ snapshots:
      '@push.rocks/smartdelay': 3.0.5
      '@push.rocks/smartfs': 1.3.1
      '@push.rocks/smartinteract': 2.0.16
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartlog-destination-local': 9.0.2
      '@push.rocks/smartshell': 3.3.0
      '@push.rocks/smartwatch': 6.3.0
@@ -5711,7 +5711,7 @@ snapshots:
      '@push.rocks/qenv': 6.1.3
      '@push.rocks/smartfile': 11.2.7
      '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartpath': 6.0.0
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrx': 3.0.10
@@ -5735,7 +5735,7 @@ snapshots:
      '@api.global/typedrequest': 3.2.6
      '@configvault.io/interfaces': 1.0.17
      '@push.rocks/smartfile': 11.2.7
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartpath': 6.0.0

  '@push.rocks/smartacme@9.1.3(socks@2.8.7)':
@@ -5746,7 +5746,7 @@ snapshots:
      '@push.rocks/smartdata': 7.0.15(socks@2.8.7)
      '@push.rocks/smartdelay': 3.0.5
      '@push.rocks/smartdns': 7.8.1
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartnetwork': 4.4.0
      '@push.rocks/smartstring': 4.1.0
      '@push.rocks/smarttime': 4.2.3
@@ -5856,7 +5856,7 @@ snapshots:
  '@push.rocks/smartcli@4.0.20':
    dependencies:
      '@push.rocks/lik': 6.2.2
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartobject': 1.0.12
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrx': 3.0.10
@@ -5881,7 +5881,7 @@ snapshots:
    dependencies:
      '@push.rocks/lik': 6.2.2
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartmongo': 2.2.0(socks@2.8.7)
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrx': 3.0.10
@@ -5910,7 +5910,7 @@ snapshots:
    dependencies:
      '@push.rocks/lik': 6.2.2
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartmongo': 2.2.0(socks@2.8.7)
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrx': 3.0.10
@@ -6102,7 +6102,7 @@ snapshots:
      '@api.global/typedrequest-interfaces': 2.0.2
      '@tsclass/tsclass': 4.4.4

-  '@push.rocks/smartlog@3.2.0':
+  '@push.rocks/smartlog@3.2.1':
    dependencies:
      '@api.global/typedrequest-interfaces': 3.0.19
      '@push.rocks/consolecolor': 2.0.3
@@ -6149,7 +6149,7 @@ snapshots:
  '@push.rocks/smartmetrics@3.0.1':
    dependencies:
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1

  '@push.rocks/smartmime@1.0.6':
    dependencies:
@@ -6218,7 +6218,7 @@ snapshots:
    dependencies:
      '@push.rocks/smartfile': 13.1.2
      '@push.rocks/smartfs': 1.3.1
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartmail': 2.2.0
      '@push.rocks/smartpath': 6.0.0
      '@push.rocks/smartrust': 1.2.1
@@ -6324,7 +6324,7 @@ snapshots:
  '@push.rocks/smartproxy@25.7.8':
    dependencies:
      '@push.rocks/smartcrypto': 2.0.4
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartrust': 1.2.1
      '@tsclass/tsclass': 9.3.0
      minimatch: 10.2.1
@@ -6405,7 +6405,7 @@ snapshots:
      '@cfworker/json-schema': 4.1.1
      '@push.rocks/lik': 6.2.2
      '@push.rocks/smartenv': 6.0.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartpath': 6.0.0
      ws: 8.19.0
    transitivePeerDependencies:
@@ -6440,7 +6440,7 @@ snapshots:
      '@push.rocks/smartdelay': 3.0.5
      '@push.rocks/smartenv': 5.0.13
      '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrx': 3.0.10
      '@push.rocks/smarttime': 4.1.1
@@ -6555,7 +6555,7 @@ snapshots:
      '@design.estate/dees-element': 2.1.6
      '@push.rocks/lik': 6.2.2
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrx': 3.0.10
      '@push.rocks/smarttime': 4.1.1
@@ -6571,7 +6571,7 @@ snapshots:
      '@design.estate/dees-element': 2.1.6
      '@push.rocks/lik': 6.2.2
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrx': 3.0.10
      '@push.rocks/smarttime': 4.1.1
@@ -6587,7 +6587,7 @@ snapshots:
      '@design.estate/dees-element': 2.1.6
      '@push.rocks/lik': 6.2.2
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrx': 3.0.10
      '@push.rocks/smarttime': 4.2.3
--- a/ts/00_commitinfo_data.ts
+++ b/ts/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/dcrouter',
-  version: '7.1.0',
+  version: '7.2.0',
  description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/dcrouter',
-  version: '7.1.0',
+  version: '7.2.0',
  description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }
--- a/ts_web/elements/ops-view-logs.ts
+++ b/ts_web/elements/ops-view-logs.ts
@@ -55,87 +55,20 @@ export class OpsViewLogs extends DeesElement {
        align-items: center;
        gap: 8px;
      }
-
-      .logContainer {
-        background: ${cssManager.bdTheme('#f8f9fa', '#1e1e1e')};
-        border-radius: 8px;
-        padding: 16px;
-        max-height: 600px;
-        overflow-y: auto;
-        font-family: 'Consolas', 'Monaco', monospace;
-        font-size: 13px;
-      }
-
-      .logEntry {
-        margin-bottom: 8px;
-        line-height: 1.5;
-      }
-
-      .logTimestamp {
-        color: ${cssManager.bdTheme('#7a7a7a', '#7a7a7a')};
-        margin-right: 8px;
-      }
-
-      .logLevel {
-        font-weight: bold;
-        margin-right: 8px;
-        padding: 2px 6px;
-        border-radius: 3px;
-        font-size: 11px;
-      }
-
-      .logLevel.debug { 
-        color: ${cssManager.bdTheme('#6a9955', '#6a9955')}; 
-        background: ${cssManager.bdTheme('rgba(106, 153, 85, 0.1)', 'rgba(106, 153, 85, 0.1)')};
-      }
-      .logLevel.info { 
-        color: ${cssManager.bdTheme('#569cd6', '#569cd6')}; 
-        background: ${cssManager.bdTheme('rgba(86, 156, 214, 0.1)', 'rgba(86, 156, 214, 0.1)')};
-      }
-      .logLevel.warn { 
-        color: ${cssManager.bdTheme('#ce9178', '#ce9178')}; 
-        background: ${cssManager.bdTheme('rgba(206, 145, 120, 0.1)', 'rgba(206, 145, 120, 0.1)')};
-      }
-      .logLevel.error { 
-        color: ${cssManager.bdTheme('#f44747', '#f44747')}; 
-        background: ${cssManager.bdTheme('rgba(244, 71, 71, 0.1)', 'rgba(244, 71, 71, 0.1)')};
-      }
-
-      .logCategory {
-        color: ${cssManager.bdTheme('#c586c0', '#c586c0')};
-        margin-right: 8px;
-      }
-
-      .logMessage {
-        color: ${cssManager.bdTheme('#333', '#d4d4d4')};
-      }
-
-      .noLogs {
-        color: ${cssManager.bdTheme('#7a7a7a', '#7a7a7a')};
-        text-align: center;
-        padding: 40px;
-      }
    `,
  ];

  public render() {
    return html`
      <ops-sectionheading>Logs</ops-sectionheading>
-      
+
      <div class="controls">
        <div class="filterGroup">
-          <dees-button 
+          <dees-button
            @click=${() => this.fetchLogs()}
          >
            Refresh Logs
          </dees-button>
-          
-          <dees-button 
-            @click=${() => this.toggleStreaming()}
-            .type=${this.logState.isStreaming ? 'highlighted' : 'normal'}
-          >
-            ${this.logState.isStreaming ? 'Stop Streaming' : 'Start Streaming'}
-          </dees-button>
        </div>

        <div class="filterGroup">
@@ -143,7 +76,7 @@ export class OpsViewLogs extends DeesElement {
          <dees-input-dropdown
            .options=${['all', 'debug', 'info', 'warn', 'error']}
            .selectedOption=${'all'}
-            @selectedOption=${(e) => this.updateFilter('level', e.detail)}
+            @selectedOption=${(e: any) => this.updateFilter('level', e.detail)}
          ></dees-input-dropdown>
        </div>

@@ -152,7 +85,7 @@ export class OpsViewLogs extends DeesElement {
          <dees-input-dropdown
            .options=${['all', 'smtp', 'dns', 'security', 'system', 'email']}
            .selectedOption=${'all'}
-            @selectedOption=${(e) => this.updateFilter('category', e.detail)}
+            @selectedOption=${(e: any) => this.updateFilter('category', e.detail)}
          ></dees-input-dropdown>
        </div>

@@ -161,34 +94,55 @@ export class OpsViewLogs extends DeesElement {
          <dees-input-dropdown
            .options=${['50', '100', '200', '500']}
            .selectedOption=${'100'}
-            @selectedOption=${(e) => this.updateFilter('limit', e.detail)}
+            @selectedOption=${(e: any) => this.updateFilter('limit', e.detail)}
          ></dees-input-dropdown>
        </div>
      </div>

-      <div class="logContainer">
-        ${this.logState.recentLogs.length > 0 ? 
-          this.logState.recentLogs.map(log => html`
-            <div class="logEntry">
-              <span class="logTimestamp">${new Date(log.timestamp).toLocaleTimeString()}</span>
-              <span class="logLevel ${log.level}">${log.level.toUpperCase()}</span>
-              <span class="logCategory">[${log.category}]</span>
-              <span class="logMessage">${log.message}</span>
-            </div>
-          `) : html`
-            <div class="noLogs">No logs to display</div>
-          `
-        }
-      </div>
+      <dees-chart-log
+        .label=${'Application Logs'}
+        .autoScroll=${true}
+        .maxEntries=${2000}
+        .showMetrics=${true}
+      ></dees-chart-log>
    `;
  }

  async connectedCallback() {
    super.connectedCallback();
-    // Auto-fetch logs when the view mounts
    this.fetchLogs();
  }

+  async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('logState')) {
+      this.pushLogsToChart();
+    }
+  }
+
+  private async pushLogsToChart() {
+    const chartLog = this.shadowRoot?.querySelector('dees-chart-log') as any;
+    if (!chartLog) return;
+
+    // Ensure the chart element has finished its own initialization
+    await chartLog.updateComplete;
+
+    chartLog.clearLogs();
+    const entries = this.getMappedLogEntries();
+    if (entries.length > 0) {
+      chartLog.updateLog(entries);
+    }
+  }
+
+  private getMappedLogEntries() {
+    return this.logState.recentLogs.map((log) => ({
+      timestamp: new Date(log.timestamp).toISOString(),
+      level: log.level as 'debug' | 'info' | 'warn' | 'error',
+      message: log.message,
+      source: log.category,
+    }));
+  }
+
  private async fetchLogs() {
    await appstate.logStatePart.dispatchAction(appstate.fetchRecentLogsAction, {
      limit: this.filterLimit,
@@ -214,17 +168,4 @@ export class OpsViewLogs extends DeesElement {

    this.fetchLogs();
  }
-
-  private getActiveFilters() {
-    return {
-      level: this.filterLevel,
-      category: this.filterCategory,
-      limit: this.filterLimit,
-    };
-  }
-
-  private toggleStreaming() {
-    // TODO: Implement log streaming with VirtualStream
-    console.log('Streaming toggle not yet implemented');
-  }
-}
+}