Index: /branches/amp_4_0/dev/architecture/product_architecture.mmd =================================================================== --- /branches/amp_4_0/dev/architecture/product_architecture.mmd (nonexistent) +++ /branches/amp_4_0/dev/architecture/product_architecture.mmd (working copy) @@ -0,0 +1,83 @@ +flowchart LR + %% Global Styling + classDef default fill:#f9f9fa,stroke:#333,stroke-width:1px,rx:5,ry:5; + classDef external fill:#e0f7fa,stroke:#006064,stroke-width:2px; + classDef collection fill:#fff3e0,stroke:#e65100,stroke-width:2px; + classDef storage fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px; + classDef backend fill:#f3e5f5,stroke:#4a148c,stroke-width:2px; + classDef alert fill:#fce4ec,stroke:#880e4f,stroke-width:2px; + classDef viz fill:#e1bee7,stroke:#4a148c,stroke-width:2px; + classDef gateway fill:#b2ebf2,stroke:#00acc1,stroke-width:2px; + + %% Subgraphs for Logical Grouping + subgraph Data_Sources [Data Sources] + direction TB + Devices[Array & Generic Devices]:::external + end + + subgraph Access_Viz [Access & Visualization] + direction TB + Grafana[Grafana]:::viz + OpenSearch-Dashboards[OpenSearch-Dashboards]:::viz + AMP_GUI[AMP GUI]:::viz + Nginx[Nginx API Gateway]:::gateway + + style Access_Viz fill:#fff,stroke:#4a148c,stroke-width:2px,stroke-dasharray: 5 5,rx:10,ry:10 + end + + subgraph Collection [Data Collection & Processing] + direction TB + Telegraf[Telegraf]:::collection + Logstash[Logstash]:::collection + style Collection fill:#fff8e1,stroke:#ffa000,stroke-width:1px,rx:10,ry:10 + end + + subgraph Storage [Data Storage] + direction TB + TimescaleDB[(TimescaleDB)]:::storage + OpenSearch[(OpenSearch)]:::storage + Postgres[(PostgreSQL Metadata)]:::storage + style Storage fill:#f1f8e9,stroke:#33691e,stroke-width:1px,rx:10,ry:10 + end + + subgraph Backend [AMP Backend Layer] + AMP_Services[AMP Backend Services]:::backend + style Backend fill:#f3e5f5,stroke:#4a148c,stroke-width:1px,rx:10,ry:10 + end + + subgraph Alerts [Alerts & Notifications] + direction LR + Notification_Service[Notification Service]:::alert + SMTP[SMTP Server]:::alert + style Alerts fill:#fce4ec,stroke:#880e4f,stroke-width:1px,rx:10,ry:10 + end + + %% Data Flows + %% Metrics + Devices -- "SNMP Metrics" --> Telegraf + Telegraf -- Metrics --> TimescaleDB + TimescaleDB -- Visualizes Metrics --> Grafana + + %% Logs + Devices -- "Syslog RFC5424" --> Logstash + Logstash -- Logs --> OpenSearch + OpenSearch -- Visualizes Logs --> OpenSearch-Dashboards + + %% GUI & Control Plane + AMP_GUI --> Nginx + Nginx --> AMP_Services + AMP_Services -- "Config/Status via REST" --> Devices + AMP_Services -- "Read/Write Metadata" --> Postgres + + %% Backend Access to Data + AMP_Services -- "Query Metrics" --> TimescaleDB + AMP_Services -- "Query Logs" --> OpenSearch + + %% Alerts + Telegraf -. "Triggers Alerts" .-> Notification_Service + Notification_Service -- "Sends Emails" --> SMTP + + %% Link Styling - Modern Curves + linkStyle default stroke:#546e7a,stroke-width:2px,fill:none + linkStyle 0,1,2 stroke:#0277bd,stroke-width:2px + linkStyle 3,4,5 stroke:#ef6c00,stroke-width:2px Index: /branches/amp_4_0/dev/architecture/product_architecture.png =================================================================== Cannot display: file marked as a binary type. svn:mime-type = application/octet-stream Property changes on: dev/architecture/product_architecture.png ___________________________________________________________________ Added: svn:mime-type ## -0,0 +1 ## +application/octet-stream \ No newline at end of property Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.html (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.html (working copy) @@ -1,301 +1,274 @@ -
-
-
-

Managed Devices

+
+ +
+
+

System Monitoring Dashboard

+ Last Updated: {{ lastUpdated | date:'mediumTime' }}
- @if(isLoaded) { -
- @for (device of managedDevices; track device?.name) { -
-
-
{{ device.name }}
-
{{ device.ip }}
-
- CPU: {{ device.cpu }}% - Memory: {{ device.memory }}% - Conn: {{ device.connections }} -
-
- - - - -
-
-
-
- } +
+ +
+
+ + +
+
+
+
+ {{ onlineDevices }} / {{ totalDevices }} + Devices Online
- } -
+
-
-
-

System Load

+
+
+
+ {{ totalConnections }} + Active Connections +
-
-
-
+ +
+
+
+ {{ offlineDevices }} + Offline Devices
-
-
+
+
+ + +
+ + +
+
+

Global Network Traffic

-
-
+
+
-
-
-
-

System Overview

+ +
+
+

Connection Status

+
+
+
+
-
-
+ + +
+
+

System Load

+
+
+
+
+
+
+
+
+
+
+
+
+
- - - - - - - - - - - - - - - - - - - - - - - - - - -
+ +
- - - + + +
- @if (activeTab === 'virtual') { -
-
-

Top Hits Number

- - + @if (activeTab === 'virtual' || activeTab === 'real') { +
+ +
+
+

Top Hits

+
+
+ - - + + - - - @for (item of topHits; track $index) { - - - - - } - -
Service NameHitNameHits
{{ item.name }}{{ item.value }}
-
-
-

Top Connections Number

- - + + + @for (item of topHits | slice:0:5; track $index) { - - + + - - - @for (item of topConnections; track $index) { - - - - - } - -
Service NameConn{{ item.name }}{{ item.value }}
{{ item.name }}{{ item.value }}
-
-
-

Top Network Throughput

- - + } + @empty { - - - + - - - @for (item of topNetwork; track $index) { - - - - - - } - -
Service NameReceivedSent +
+ + No data available +
+
{{ item.name }}{{ item.inbound | bytesPerSec }}{{ item.outbound | bytesPerSec }}
-
+ } + +
- } - @if (activeTab === 'real') { -
-
-

Top Hits Number

- - + +
+
+

Top Connections

+
+
+ - - + + - - - @for (item of topHits; track $index) { - - - - - } - -
Service NameHitNameConnections
{{ item.name }}{{ item.value }}
-
-
-

Top Connections Number

- - + + + @for (item of topConnections | slice:0:5; track $index) { - - + + - - - @for (item of topConnections; track $index) { - - - - - } - -
Service NameConn{{ item.name }}{{ item.value }}
{{ item.name }}{{ item.value }}
-
-
-

Top Network Throughput

- - + } + @empty { - - - + - - - @for (item of topNetwork; track $index) { - - - - - - } - -
Service NameReceivedSent +
+ + No data available +
+
{{ item.name }}{{ item.inbound | bytesPerSec }}{{ item.outbound | bytesPerSec }}
+ } + + +
+ + +
+
+

Top Throughput

+ + + + + + + + + + @for (item of topNetwork | slice:0:5; track $index) { + + + + + + } + @empty { + + + + } + +
NameInboundOutbound
{{ item.name }}{{ item.inbound | bytesPerSec }}{{ item.outbound | bytesPerSec }}
+
+ + No data available +
+
+
} @if (activeTab === 'sslvpn') { -
-
-

TOP Active Sessions

- - +
+ +
+
+

Active Sessions

+
+
+ - - + + - - - @for (item of activeConnections; track $index) { - - - - - } - -
Service NameHitNameSessions
{{ item.name }}{{ item.value }}
-
-
-

Top Client Network Throughput

- - + + + @for (item of activeConnections | slice:0:5; track $index) { - - + + - - - @for (item of clientNetwork; track $index) { - - - - - - } - -
Service NameConn{{ item.name }}{{ item.value }}
{{ item.name }}{{ item.inbound | bytesPerSec }}{{ item.outbound | bytesPerSec }}
-
-
-

Top Server Network Throughput

- - + } + @empty { - - - + - - - @for (item of serverNetwork; track $index) { - - - - - - } - -
Service NameReceivedSent +
+ + No data available +
+
{{ item.name }}{{ item.inbound | bytesPerSec }}{{ item.outbound | bytesPerSec }}
+ } + + +
+ +
+
+

Client Traffic

+ + + + + + + + + + @for (item of clientNetwork | slice:0:5; track $index) { + + + + + + } + @empty { + + + + } + +
NameInboundOutbound
{{ item.name }}{{ item.inbound | bytesPerSec }}{{ item.outbound | bytesPerSec }}
+
+ + No data available +
+
+
}
-
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.scss (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.scss (working copy) @@ -1,156 +1,210 @@ :host { - --bg-color: #0a0f25; - --widget-bg: #10193a; - --text-color: #e0e0e0; - --text-muted: #8a9fcb; - --accent-blue: #39a0ed; - --accent-orange: #ff5722; - --accent-green: #009688; - --border-color: #2a3a6b; -} + --bg-dark: #f0f2f5; + --panel-bg: #ffffff; + --border-color: #e0e0e0; + --text-primary: #333333; + --text-secondary: #666666; -.dashboard-grid { - display: grid; - gap: 5px; - padding: 6px; - background-color: var(--bg-color); - color: var(--text-color); - font-family: Arial, sans-serif; - grid-template-columns: 1.5fr 1fr 1fr; - grid-template-rows: min-content 1fr; - grid-template-areas: - "devices load overview alerts" - "devices services services services"; + --accent-blue: #2196f3; + --accent-green: #4caf50; + --accent-orange: #ff9800; + --accent-red: #f44336; + + display: block; + background-color: var(--bg-dark); min-height: 100vh; + color: var(--text-primary); + font-family: Roboto, "Helvetica Neue", sans-serif; } -.widget { - background-color: var(--widget-bg); - border-radius: 8px; - padding: 6px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +* { + font-family: Roboto, "Helvetica Neue", sans-serif; +} + +.dashboard-container { + padding: 10px; display: flex; flex-direction: column; + gap: 10px; + max-width: 1600px; + margin: 0 auto; + box-sizing: border-box; } -.widget-header { +/* Header */ +.dashboard-header { display: flex; justify-content: space-between; align-items: center; + padding-bottom: 10px; border-bottom: 1px solid var(--border-color); - padding-bottom: 4px; - margin-bottom: 5px; -} -.widget-header h3 { - margin: 0; - font-weight: 600; - font-size: 1.1em; -} + h1 { + margin: 0; + font-size: 1.5rem; + font-weight: 600; + letter-spacing: -0.025em; + color: var(--text-primary); + } -.devices { grid-area: devices; } -.load { grid-area: load; } -.overview { grid-area: overview; } -.alerts { grid-area: alerts; } -.services { grid-area: services; } + .last-updated { + display: block; + margin-top: 4px; + font-size: 0.85rem; + color: var(--text-secondary); + } -table { - width: 100%; - border-collapse: collapse; - font-size: 0.9em; + button { + color: var(--text-secondary); + + &:hover { + color: var(--text-primary); + } + } } -th, td { - padding: 10px 4px; - text-align: left; - border-bottom: 1px solid var(--border-color); -} -th { - color: var(--accent-blue); - font-weight: 600; -} -tbody tr:last-child td { - border-bottom: none; -} -.state-alerting { - color: var(--accent-orange); - font-weight: bold; -} -.sort-by { - font-size: 0.8em; - color: var(--text-muted); +/* KPI Row */ +.kpi-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 10px; } -.device-list { + +.kpi-card { + background: var(--panel-bg); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 15px; display: flex; - flex-direction: column; - gap: 15px; + align-items: center; + gap: 12px; + transition: transform 0.2s, box-shadow 0.2s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + border-color: rgba(148, 163, 184, 0.2); + } + + .kpi-icon { + width: 42px; + height: 42px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + + fa-icon { + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + &.blue { + background: rgba(33, 150, 243, 0.1); + color: var(--accent-blue); + } + + &.green { + background: rgba(76, 175, 80, 0.1); + color: var(--accent-green); + } + + &.orange { + background: rgba(255, 152, 0, 0.1); + color: var(--accent-orange); + } + } + + .kpi-data { + display: flex; + flex-direction: column; + + .kpi-value { + font-size: 1.4rem; + font-weight: 700; + line-height: 1.2; + } + + .kpi-label { + font-size: 0.8rem; + color: var(--text-secondary); + } + } } -.device-item { + +/* Main Visuals */ +.main-row { display: grid; - grid-template-columns: 1fr 1fr; - align-items: center; + grid-template-columns: 2fr 1fr 1fr; gap: 10px; - padding-bottom: 15px; - border-bottom: 1px solid var(--border-color); + min-height: 280px; + + @media (max-width: 1400px) { + grid-template-columns: 1fr 1fr; + + .traffic-widget:first-child { + grid-column: span 2; + } + } + + @media (max-width: 1024px) { + grid-template-columns: 1fr; + + .traffic-widget:first-child { + grid-column: auto; + } + } } -.device-list .device-item:last-child { - border-bottom: none; -} -.device-name { - font-weight: bold; - font-size: 1.1em; - color: var(--text-color); -} -.device-ip { - font-size: 0.9em; - color: var(--text-muted); -} -.device-stats { - font-size: 0.85em; - color: var(--text-muted); -} -.device-stats strong { - color: var(--text-color); - min-width: 40px; - display: inline-block; -} -.device-stats span { - display: block; -} -.device-stats .cpu-warn { - color: var(--accent-orange); + +.glass-panel { + background: var(--panel-bg); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 20px; + display: flex; + flex-direction: column; } -.device-throughput { - font-size: 0.9em; - text-align: right; + +.widget-header { + margin-bottom: 15px; + + h3 { + margin: 0; + font-size: 1.1rem; + font-weight: 600; + color: var(--text-primary); + } } -.device-throughput span { - display: block; -} -.device-chart { - height: 60px; -} -.load-gauges { - display: flex; - justify-content: space-around; - align-items: center; - height: 100%; - gap: 5px; +.traffic-widget { + .chart-container { + flex: 1; + position: relative; + min-height: 250px; + } } -.gauge { - width: 120px; - height: 120px; - position: relative; - display: flex; - align-items: center; - justify-content: center; -} -.chart-container { - flex-grow: 1; - position: relative; - min-height: 200px; +.load-widget { + .load-gauges { + display: flex; + justify-content: space-around; + align-items: center; + flex: 1; + gap: 10px; + + .gauge-item { + width: 100px; + height: 100px; + position: relative; + } + + .gauge-chart { + width: 100%; + height: 100%; + } + } } .chart-host { @@ -158,38 +212,143 @@ height: 100%; } +/* Details Section */ +.details-row { + min-height: 200px; + /* Removed white background and padding constraints */ +} + .tab-header { display: flex; + gap: 20px; border-bottom: 1px solid var(--border-color); + padding-bottom: 15px; + margin-bottom: 20px; + + button { + background: none; + border: none; + color: var(--text-secondary); + font-size: 0.95rem; + font-weight: 500; + cursor: pointer; + padding: 0; + transition: color 0.2s; + position: relative; + + &:hover { + color: var(--text-primary); + } + + &.active { + color: var(--accent-blue); + + &::after { + content: ''; + position: absolute; + bottom: -16px; + left: 0; + width: 100%; + height: 2px; + background: var(--accent-blue); + box-shadow: 0 0 8px var(--accent-blue); + } + } + } } -.tab-header button { - background: none; - border: none; - color: var(--text-muted); - padding: 5px 8px; - cursor: pointer; - font-size: 1em; - border-bottom: 3px solid transparent; - margin-bottom: -2px; + +.metrics-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; } -.tab-header button.active { - color: var(--accent-blue); - border-bottom-color: var(--accent-blue); - font-weight: bold; + +.metric-col { + /* Now inherits glass-panel style when class is added */ + min-height: 250px; + + h4 { + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-secondary); + margin: 0 0 10px 0; + } } -.tab-content { - padding-top: 6px; + +.no-data-cell { + padding: 0 !important; + border-bottom: none !important; } -.service-tables { + +.no-data-content { display: flex; - gap: 6px; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 32px 0; + color: var(--text-secondary); + gap: 10px; + opacity: 0.7; + + fa-icon { + font-size: 24px; + margin-bottom: 4px; + } + + span { + font-size: 13px; + font-weight: 500; + } } -.table-group { - flex: 1; -} -.table-group h4 { - margin-top: 0; - margin-bottom: 10px; - font-size: 1em; - color: var(--text-muted); -} + +.dashboard-table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + font-size: 0.9rem; + + th { + text-align: left; + color: var(--text-secondary); + font-weight: 500; + padding: 8px 12px; + border-bottom: 1px solid var(--border-color); + } + + td { + padding: 10px 12px; + border-bottom: 1px solid rgba(148, 163, 184, 0.05); + color: var(--text-primary); + } + + tr:last-child td { + border-bottom: none; + } + + .text-right { + text-align: right; + } + + .name-col { + color: var(--text-primary); + font-weight: 500; + } + + .highlight-blue { + color: var(--accent-blue); + font-family: monospace; + } + + .highlight-green { + color: var(--accent-green); + font-family: monospace; + } + + .no-data { + text-align: center; + color: var(--text-secondary); + font-style: italic; + padding: 20px; + } +} \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.ts (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/control-panel/control-panel.ts (working copy) @@ -1,14 +1,14 @@ -import {Component, OnInit} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {SharedModule} from "../../shared/shared-module"; -import {EChartsOption} from "echarts"; -import {NotificationService} from "../../services/notification"; -import {DeviceService} from "../../services/device-service"; -import {take} from "rxjs/operators"; -import {SystemService} from '../../services/system-service'; -import {UtilsService} from '../../services/utils-service'; -import {BytesPerSecPipe} from '../../pipes/bytes-per-sec-pipe'; -import {ChartOptions} from '../../services/chart-options'; +import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from "../../shared/shared-module"; +import { EChartsOption } from "echarts"; +import { NotificationService } from "../../services/notification"; +import { DeviceService } from "../../services/device-service"; +import { take } from "rxjs/operators"; +import { SystemService } from '../../services/system-service'; +import { UtilsService } from '../../services/utils-service'; +import { BytesPerSecPipe } from '../../pipes/bytes-per-sec-pipe'; +import { ChartOptions } from '../../services/chart-options'; @Component({ selector: 'app-control-panel', @@ -24,33 +24,53 @@ export class ControlPanel implements OnInit { activeTab: string = 'virtual'; - managedDevices: any = []; - alertHistory: any = []; + // KPI Metrics + totalDevices: number = 0; + onlineDevices: number = 0; + offlineDevices: number = 0; + totalConnections: number = 0; + totalThroughputIn: number = 0; + totalThroughputOut: number = 0; - topHits: any = []; - topConnections: any = []; - topNetwork: any = []; + // Data Containers + managedDevices: any[] = []; + groups: any[] = []; - devices: any = []; - groups: any = []; + // Charts & Visuals + systemMetrics: any = {}; + diskMetrics: any = {}; + // Load Gauge Options + memLoadOptions: EChartsOption = {}; + cpuLoadOptions: EChartsOption = {}; + diskLoadOptions: EChartsOption = {}; + + // Traffic Chart + connectionChartOption1: EChartsOption = {}; + // Connection Status Chart + connectionChartOption2: EChartsOption = {}; + + // Tab Data + topHits: any[] = []; + topConnections: any[] = []; + topNetwork: any[] = []; + + activeConnections: any[] = []; + clientNetwork: any[] = []; + serverNetwork: any[] = []; + + // Raw Data Cache virtualServiceMetrics: any = []; realServiceMetrics: any = []; sslVPNMetrics: any = []; - systemMetrics: any = {}; - diskMetrics: any = {}; deviceMetrics: any = []; + deviceStats: any = {}; deviceConnectionStats: any = {}; - clientNetwork: any = []; - serverNetwork: any = []; - activeConnections: any = []; - memLoadOptions: any; - cpuLoadOptions: any - diskLoadOptions: any; - connectionChartOption1: EChartsOption = {}; + isLoaded: boolean = false; + lastUpdated: Date = new Date(); constructor( private _notification: NotificationService, @@ -58,35 +78,44 @@ private _system: SystemService, private _utils: UtilsService, private _chartOptions: ChartOptions, - ) { + ) { } + + ngOnInit() { + this.initEmptyCharts(); + this.refreshData(); + } + + refreshData() { + this.lastUpdated = new Date(); this.getSystemMetrics(); this.getDeviceMonitoringMetrics(); } - ngOnInit() { - this.memLoadOptions = this._chartOptions.getLoadChartOptions(0, '#03a9f4', 'Memory'); - this.cpuLoadOptions = this._chartOptions.getLoadChartOptions(0, '#ff5722', 'CPU'); - this.diskLoadOptions = this._chartOptions.getLoadChartOptions(0, '#009688', 'Disk'); + initEmptyCharts() { + this.memLoadOptions = this.getGaugeOption(0, '#03a9f4', 'Memory'); + this.cpuLoadOptions = this.getGaugeOption(0, '#ff5722', 'CPU'); + this.diskLoadOptions = this.getGaugeOption(0, '#009688', 'Disk'); } getSystemMetrics() { - this._system.getLatestSystemMetrics() - .pipe(take(1)) - .subscribe({ - next: (result: any) => { - this.systemMetrics = result; - if (this.systemMetrics?.disk_usage && this.systemMetrics.disk_usage.length > 0) { - this.diskMetrics = this.systemMetrics.disk_usage[0]; - } - this.cpuLoadOptions = this._chartOptions.getLoadChartOptions(this.systemMetrics?.cpu?.cpu_percent, '#ff5722', 'CPU'); - this.memLoadOptions = this._chartOptions.getLoadChartOptions(this.systemMetrics?.memory?.mem_percent, '#03a9f4', 'Memory'); - this.diskLoadOptions = this._chartOptions.getLoadChartOptions(this.diskMetrics?.used_percent, '#009688', 'Disk'); - }, - error: (error: { message: string; }) => { - console.log(error); - this._notification.showError(error.message); + this._system.getLatestSystemMetrics() + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + this.systemMetrics = result; + if (this.systemMetrics?.disk_usage && this.systemMetrics.disk_usage.length > 0) { + this.diskMetrics = this.systemMetrics.disk_usage[0]; } - }); + + this.cpuLoadOptions = this.getGaugeOption(this.systemMetrics?.cpu?.cpu_percent || 0, '#ff5722', 'CPU'); + this.memLoadOptions = this.getGaugeOption(this.systemMetrics?.memory?.mem_percent || 0, '#03a9f4', 'Memory'); + this.diskLoadOptions = this.getGaugeOption(this.diskMetrics?.used_percent || 0, '#009688', 'Disk'); + }, + error: (error: { message: string; }) => { + console.log(error); + this._notification.showError(error.message); + } + }); } getDeviceMonitoringMetrics(): void { @@ -121,10 +150,11 @@ } }) }) + this.updateGlobalTrafficChart(); }, error: (error: { message: string; }) => { this._notification.showError(error.message); - this.getDeviceGroups(); + this.getDeviceGroups(); // Retry or proceed? }, complete: () => { this.isLoaded = true; @@ -132,6 +162,45 @@ }) } + updateGlobalTrafficChart() { + const trafficMap = new Map(); + + this.managedDevices.forEach((device: any) => { + if (device.network_history && Array.isArray(device.network_history)) { + device.network_history.forEach((dataPoint: any[]) => { + // Assuming dataPoint is [timestamp, inbound, outbound] + const timestamp = dataPoint[0]; + const inbound = Number(dataPoint[1]) || 0; + const outbound = Number(dataPoint[2]) || 0; + + if (!trafficMap.has(timestamp)) { + trafficMap.set(timestamp, { inbound: 0, outbound: 0 }); + } + const current = trafficMap.get(timestamp)!; + current.inbound += inbound; + current.outbound += outbound; + }); + } + }); + + // Convert map to sorted arrays + const sortedTimestamps = Array.from(trafficMap.keys()).sort((a, b) => a - b); + const inboundSeries = sortedTimestamps.map(ts => [ts, trafficMap.get(ts)!.inbound]); + const outboundSeries = sortedTimestamps.map(ts => [ts, trafficMap.get(ts)!.outbound]); + + // Convert bytes to Mbps (assuming input is bytes/sec? Usually API returns bytes) + // Actually, historicalThroughputChartOptions tooltip says "Mbps". + // If input is bytes/sec, to get Mbps: (bytes * 8) / 1,000,000 + // Let's assume raw values are bytes/sec for now. + const toMbps = (val: number) => (val * 8) / 1000000; + + const inboundMbps = inboundSeries.map(p => [p[0], toMbps(p[1])]); + const outboundMbps = outboundSeries.map(p => [p[0], toMbps(p[1])]); + + this.connectionChartOption1 = this._chartOptions.historicalThroughputChartOptions(inboundMbps, outboundMbps); + this.customizeMainChart(this.connectionChartOption1); + } + getDeviceGroups(): void { this.groups = []; this.managedDevices = []; @@ -140,24 +209,49 @@ .subscribe({ next: (data: any) => { this.groups = data.groups; - data.devices.forEach((device: any) => { - this.deviceMetrics.forEach((d: any) => { - if (d?.agent_host === device?.ip) { - device.cpu = d.cpu !== null ? d.cpu : 0; - device.memory = d.mem !== null ? d.mem : 0; - device.net_mem = d.net_mem !== null ? d.net_mem : 0; - device.connections = d.connections !== null ? d.connections : 0; - // device.inbound = d.received; - // device.outbound = d.sent; - this.managedDevices.push(device); - } - }) - }) - this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.managedDevices); - this.deviceConnectionStats = this._utils.transformConnectedDevicesMetrics(this.deviceStats.types.entries()); - this.connectionChartOption1 = this._chartOptions.connectedDeviceLineChart(this.deviceConnectionStats) + const allDevices = data.devices || []; + + this.totalDevices = allDevices.length; + this.onlineDevices = 0; + this.totalConnections = 0; + // Note: totalThroughput needs to be calculated from network metrics if available instantly, + // or we can aggregate the latest points. For now, we'll sum connections. + + this.managedDevices = allDevices.map((device: any) => { + // Find matching metrics + const metrics = this.deviceMetrics.find((d: any) => d?.agent_host === device?.ip); + + if (metrics) { + device.cpu = metrics.cpu ?? 0; + device.memory = metrics.mem ?? 0; + device.connections = metrics.connections ?? 0; + // Simple online check logic - if we have metrics, it's likely online + device.status = 'Online'; + this.onlineDevices++; + this.totalConnections += device.connections; + } else { + device.cpu = 0; + device.memory = 0; + device.connections = 0; + device.status = 'Offline'; + } + return device; + }); + + this.offlineDevices = this.totalDevices - this.onlineDevices; + + // Process Aggregate Charts + this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.managedDevices); + this.deviceConnectionStats = this._utils.transformConnectedDevicesMetrics([...this.deviceStats.types.entries()]); + + // Re-style the main chart + this.connectionChartOption2 = this._chartOptions.connectedDeviceLineChart(this.deviceConnectionStats); + this.customizeMainChart(this.connectionChartOption2); + this.getDevicesNetworkMetrics(); - this.getTopAPVVirtualServicesMetrics(); + + // Refresh the active tab content + this.selectTab(this.activeTab); }, error: (error: { message: string; }) => { console.log(error); this._notification.showError(error.message); @@ -177,8 +271,7 @@ } getTopAPVVirtualServicesMetrics() { - let payload = {} - this._system.getTopAPVVirtualServicesMetrics(payload) + this._system.getTopAPVVirtualServicesMetrics({}) .pipe(take(1)) .subscribe({ next: (result: any) => { @@ -186,141 +279,129 @@ let _data: any = this._utils.formatChartData(['connections', 'hits', 'network'], this.virtualServiceMetrics); this.transformData(_data); }, - error: (error: { message: string; }) => { - console.log(error); - this._notification.showError(error.message); - } + error: (error: any) => console.log(error) }); } getTopAPVRealServicesMetrics() { - let payload = {} - this._system.getTopAPVRealServicesMetrics(payload) + this._system.getTopAPVRealServicesMetrics({}) .pipe(take(1)) .subscribe({ next: (result: any) => { - this.realServiceMetrics = this._device.mapDeviceDetails(this.devices, result); + // Note: ensuring we use 'managedDevices' if 'devices' was just an alias in old code + this.realServiceMetrics = this._device.mapDeviceDetails(this.managedDevices, result); let _data: any = this._utils.formatChartData(['connections', 'hits', 'network'], this.realServiceMetrics); this.transformData(_data); }, - error: (error: { message: string; }) => { - console.log(error); - this._notification.showError(error.message); - } + error: (error: any) => console.log(error) }); } getTopSSLVPNMetrics() { - let payload = {} - this._system.getTopSSLVPNMetrics(payload) + this._system.getTopSSLVPNMetrics({}) .pipe(take(1)) .subscribe({ next: (result: any) => { - this.sslVPNMetrics = this._device.mapDeviceDetails(this.devices, result); + this.sslVPNMetrics = this._device.mapDeviceDetails(this.managedDevices, result); let _data: any = this._utils.formatChartData(['active_sessions', 'client_network', 'server_network'], this.sslVPNMetrics) this.activeConnections = _data?.active_sessions; - this.clientNetwork = _data.client_network.names.map((name: any, index: any) => { - return { + + if (_data?.client_network) { + this.clientNetwork = _data.client_network.names.map((name: any, index: any) => ({ name: name, inbound: _data.client_network.inbound[index], outbound: _data.client_network.outbound[index], - } - }); - this.serverNetwork = _data.server_network.names.map((name: any, index: any) => { - return { + })); + } + + if (_data?.server_network) { + this.serverNetwork = _data.server_network.names.map((name: any, index: any) => ({ name: name, inbound: _data.server_network.inbound[index], outbound: _data.server_network.outbound[index], - } - }); + })); + } }, - error: (error: { message: string; }) => { - console.log(error); - this._notification.showError(error.message); - } + error: (error: any) => console.log(error) }); } transformData(_data: any) { - this.topConnections = _data.connections; - this.topHits = _data.hits; - this.topNetwork = _data.network.names.map((name: any, index: any) => { - return { + if (!_data) return; + this.topConnections = _data.connections || []; + this.topHits = _data.hits || []; + if (_data.network) { + this.topNetwork = _data.network.names.map((name: any, index: any) => ({ name: name, inbound: _data.network.inbound[index], outbound: _data.network.outbound[index], - } - }); + })); + } } - getDeviceChartOptions(device: any) { - const times: string[] = []; - const inboundData: number[] = []; - const outboundData: number[] = []; + // --- Visual Helper Methods --- - device.network_history.forEach((entry: any) => { - times.push(new Date(entry.time * 1000).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })); - - const factor: any = 1024 * 1024; - const inboundMB: number = parseFloat(entry.total_in) / factor; - const outboundMB: number = parseFloat(entry.total_out) / factor; - inboundData.push(parseFloat(inboundMB.toFixed(2))); - outboundData.push(parseFloat(outboundMB.toFixed(2))); - }); - + getGaugeOption(value: number, color: string, title: string): EChartsOption { return { - grid: { left: 5, top: 5, right: 5, bottom: 5, containLabel: false }, - xAxis: { - type: 'category', - show: false, - data: times - }, - yAxis: { - type: 'value', - show: false, - max: (value: any) => value.max * 1.2, - }, series: [ { - name: 'Inbound', - data: inboundData, - type: 'line', - smooth: true, - showSymbol: false, - lineStyle: { - color: '#39a0ed', - width: 2, + type: 'gauge', + startAngle: 90, + endAngle: -270, + pointer: { show: false }, + progress: { + show: true, + overlap: false, + roundCap: true, + clip: false, + itemStyle: { color: color } }, - areaStyle: { - color: 'rgba(57, 160, 237, 0.2)', + axisLine: { + lineStyle: { width: 8, color: [[1, 'rgba(0,0,0,0.05)']] } }, - }, - { - name: 'Outbound', - data: outboundData, - type: 'line', - smooth: true, - showSymbol: false, - lineStyle: { - color: '#52c41a', - width: 2, - }, - areaStyle: { - color: 'rgba(82, 196, 26, 0.1)', - }, - }, - ], - tooltip: { - trigger: 'axis', - formatter: (params: any[]) => { - let tooltip = `${params[0].name}
`; - params.forEach(param => { - tooltip += `${param.marker}${param.seriesName}: ${param.value}
`; - }); - return tooltip; - }, - }, + splitLine: { show: false }, + axisTick: { show: false }, + axisLabel: { show: false }, + data: [{ + value: value, + name: title, + title: { + offsetCenter: ['0%', '45%'], + fontSize: 10, + color: '#666666' + }, + detail: { + valueAnimation: true, + offsetCenter: ['0%', '-5%'], + fontSize: 16, + fontWeight: 'bold', + color: '#333333', + formatter: '{value}%' + } + }] + } + ] }; } + customizeMainChart(option: any) { + if (!option) return; + // Force some dashboard-friendly overrides + option.grid = { top: 40, right: 20, bottom: 20, left: 50, containLabel: true }; + option.backgroundColor = 'transparent'; + if (option.xAxis) { + option.xAxis.axisLine = { lineStyle: { color: '#e0e0e0' } }; + option.xAxis.axisLabel = { color: '#666666' }; + option.xAxis.splitLine = { show: false }; + } + if (option.yAxis) { + option.yAxis.axisLine = { show: false }; + option.yAxis.axisLabel = { color: '#666666' }; + option.yAxis.splitLine = { lineStyle: { color: '#e0e0e0', type: 'dashed' } }; + } + if (option.legend) { + option.legend.textStyle = { color: '#333333' }; + } + } + }