From abeb8ecda3625d78de2746fdafff1b181e9d35d0 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Mon, 12 Jan 2026 23:44:05 +0000 Subject: [PATCH] feat(eco-view-system): add memory usage history, process metrics, and top processes display with loading fallback --- changelog.md | 10 +++ ts_web/00_commitinfo_data.ts | 2 +- .../views/eco-view-system/eco-view-system.ts | 61 ++++++++++++------- 3 files changed, 50 insertions(+), 23 deletions(-) diff --git a/changelog.md b/changelog.md index 7e73d4e..2cd6b9e 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,15 @@ # Changelog +## 2026-01-12 - 3.39.0 - feat(eco-view-system) +add memory usage history, process metrics, and top processes display with loading fallback + +- Add memoryUsageHistory state and update it in setMetrics to track memory usage trend +- Introduce process state: processTotal, processRunning, processSleeping, processBlocked, and topProcesses +- Extend setProcesses signature to accept blocked and a typed process list and store values in state +- Use reactive state values in UI tiles (memory trend, process tiles) instead of hardcoded placeholders +- Replace 'Threads' tile with 'Blocked' tile and update its icon and color +- Render top processes from state and show a 'Loading...' fallback when the list is empty + ## 2026-01-12 - 3.38.0 - feat(eco-view-system) add extended system metrics and display formatted total network usage in eco system view diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index e62e426..a39ac9d 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@ecobridge.xyz/catalog', - version: '3.38.0', + version: '3.39.0', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/views/eco-view-system/eco-view-system.ts b/ts_web/views/eco-view-system/eco-view-system.ts index 756ae94..ae5d7be 100644 --- a/ts_web/views/eco-view-system/eco-view-system.ts +++ b/ts_web/views/eco-view-system/eco-view-system.ts @@ -246,6 +246,25 @@ export class EcoViewSystem extends DeesElement { @state() accessor networkOutHistory: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; + @state() + accessor memoryUsageHistory: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; + + // Process data + @state() + accessor processTotal = 0; + + @state() + accessor processRunning = 0; + + @state() + accessor processSleeping = 0; + + @state() + accessor processBlocked = 0; + + @state() + accessor topProcesses: Array<{ name: string; pid: number; cpu: number; memory: number; state: string }> = []; + // Public method to update metrics from backend public setMetrics(metrics: { cpu: { usage: number; cores: number; physicalCores?: number; model: string; speed: number; speedMax?: number; loadAvg: number[]; coreLoads?: number[] }; @@ -275,6 +294,9 @@ export class EcoViewSystem extends DeesElement { this.swapTotal = metrics.memory.swapTotal || 0; this.swapUsed = metrics.memory.swapUsed || 0; + // Update memory usage history for trend chart + this.memoryUsageHistory = [...this.memoryUsageHistory.slice(1), metrics.memory.usagePercent]; + // Disk metrics if (metrics.disk) { this.diskUsage = metrics.disk.usagePercent; @@ -308,8 +330,12 @@ export class EcoViewSystem extends DeesElement { } // Method to set processes data - public setProcesses(data: { total: number; running: number; sleeping: number; list: any[] }): void { - // Could store and display process data if needed + public setProcesses(data: { total: number; running: number; sleeping: number; blocked?: number; list: Array<{ name: string; pid: number; cpu: number; memory: number; state: string }> }): void { + this.processTotal = data.total; + this.processRunning = data.running; + this.processSleeping = data.sleeping; + this.processBlocked = data.blocked || 0; + this.topProcesses = data.list || []; } // Helper to format bytes @@ -692,7 +718,7 @@ export class EcoViewSystem extends DeesElement { value: `${this.memoryUsage}%`, type: 'trend' as const, icon: 'lucide:trendingUp', - trendData: [58, 62, 65, 63, 68, 72, 70, 65, this.memoryUsage], + trendData: this.memoryUsageHistory, description: 'Recent usage', }, { @@ -853,14 +879,14 @@ export class EcoViewSystem extends DeesElement { { id: 'total-processes', title: 'Total Processes', - value: 247, + value: this.processTotal, type: 'number' as const, icon: 'lucide:layers', }, { id: 'running', title: 'Running', - value: 12, + value: this.processRunning, type: 'number' as const, icon: 'lucide:play', color: 'hsl(142 71% 45%)', @@ -868,30 +894,21 @@ export class EcoViewSystem extends DeesElement { { id: 'sleeping', title: 'Sleeping', - value: 235, + value: this.processSleeping, type: 'number' as const, icon: 'lucide:moon', color: 'hsl(217 91% 60%)', }, { - id: 'threads', - title: 'Threads', - value: 1842, + id: 'blocked', + title: 'Blocked', + value: this.processBlocked, type: 'number' as const, - icon: 'lucide:gitBranch', + icon: 'lucide:pauseCircle', + color: 'hsl(0 84% 60%)', }, ]; - const topProcesses = [ - { name: 'node', pid: 1234, cpu: 12.5, memory: 8.2 }, - { name: 'chrome', pid: 2345, cpu: 8.3, memory: 15.4 }, - { name: 'code', pid: 3456, cpu: 5.2, memory: 12.1 }, - { name: 'docker', pid: 4567, cpu: 4.8, memory: 6.8 }, - { name: 'postgres', pid: 5678, cpu: 3.2, memory: 4.5 }, - { name: 'nginx', pid: 6789, cpu: 1.5, memory: 2.1 }, - { name: 'redis', pid: 7890, cpu: 0.8, memory: 1.8 }, - ]; - return html`
Processes
@@ -915,14 +932,14 @@ export class EcoViewSystem extends DeesElement { CPU % Memory %
- ${topProcesses.map(proc => html` + ${this.topProcesses.length > 0 ? this.topProcesses.map(proc => html`
${proc.name} ${proc.pid} ${proc.cpu}% ${proc.memory}%
- `)} + `) : html`
Loading...
`} `;