- {{ networkMetrics?.bytes_sent_bps | bytes }}
+ {{ networkMetrics?.sent | bytes }}
Sent
- {{ networkMetrics?.bytes_recv_bps | bytes }}
+ {{ networkMetrics?.received | bytes }}
Received
@@ -144,6 +144,8 @@
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.ts (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.ts (working copy)
@@ -1,23 +1,21 @@
-import {Component, inject, OnChanges, OnInit, SimpleChanges, ViewEncapsulation} from '@angular/core';
+import {Component, DestroyRef, inject, OnChanges, OnInit, SimpleChanges, ViewEncapsulation} from '@angular/core';
import {SharedModule} from '../../../shared/shared-module';
import {EChartsOption} from 'echarts';
import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
-import {take} from 'rxjs/operators';
+import {startWith, take, tap} from 'rxjs/operators';
import {DeviceService} from '../../../services/device-service';
import {NotificationService} from '../../../services/notification';
import {SystemService} from '../../../services/system-service';
import {BytesPipe} from '../../../pipes/bytes-pipe';
+import {ChartOptions} from '../../../services/chart-options';
+import {KeyValuePair, UtilsService} from '../../../services/utils-service';
+import {interval} from 'rxjs';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {MatTableDataSource} from '@angular/material/table';
+import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
+import {Router} from '@angular/router';
-export interface DeviceTypeStatus {
- connected: number;
- disconnected: number;
-}
-export interface DeviceGraphData {
- total: DeviceTypeStatus;
- types: Map
;
-}
-
@Component({
selector: 'app-dashboard-system-insights',
imports: [SharedModule, BytesPipe],
@@ -38,18 +36,27 @@
connectionChartOption1: EChartsOption = {};
connectionChartOption2: EChartsOption = {};
+ private destroyRef = inject(DestroyRef);
+
constructor(
private _device: DeviceService,
private _system: SystemService,
private _notification: NotificationService,
+ private _chartOptions: ChartOptions,
+ private _utils: UtilsService,
) {
}
ngOnInit(): void {
setTimeout(() => {
this.getDeviceGroups();
- this.getLatestSystemMetrics();
- this.getHistoricalSystemMetrics();
+ interval(this._utils.AUTO_REFRESH_INTERVAL)
+ .pipe(
+ startWith(0),
+ tap(() => this.getSystemMetrics()),
+ takeUntilDestroyed(this.destroyRef)
+ )
+ .subscribe();
})
}
@@ -60,6 +67,11 @@
diskMetrics: any = {};
networkMetrics: any = {};
+ getSystemMetrics(): void {
+ this.getLatestSystemMetrics();
+ this.getHistoricalSystemMetrics();
+ }
+
getLatestSystemMetrics() {
this._system.getLatestSystemMetrics()
.pipe(take(1))
@@ -128,13 +140,13 @@
this.groups.push(group?.group_name);
group?.device_list.forEach((device: any) => {
this.devices.push(device);
- if (device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv') {
+ if (device.connection && (device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv')) {
this.getAPVVirtualServices(device);
}
})
})
- this.deviceStats = this.getDeviceGraphData(this.devices);
- this.deviceConnectionStats = this.transformChartData(this.deviceStats.types.entries());
+ this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.devices);
+ this.deviceConnectionStats = this._utils.transformConnectedDevicesMetrics(this.deviceStats.types.entries());
this.connectedDevices = this.devices.filter((device: any) => device?.connection === true).length;
}
}
@@ -159,51 +171,6 @@
})
}
- transformChartData(deviceData: [string, { connected: number, disconnected: number }][]) {
- const yAxisData: string[] = [];
- const connectedData: number[] = [];
- const disconnectedData: number[] = [];
-
- deviceData.forEach(([type, status]) => {
- yAxisData.push(type);
- connectedData.push(status.connected);
- disconnectedData.push(status.disconnected);
- });
-
- return {yAxisData, connectedData, disconnectedData};
- }
-
- getDeviceGraphData(devices: any): DeviceGraphData {
- const totalStatus: DeviceTypeStatus = {connected: 0, disconnected: 0};
- const typesStatus = new Map();
-
- if (!devices || devices.length === 0) {
- return {total: totalStatus, types: typesStatus};
- }
-
- devices.forEach((device: any) => {
- // Update the total counts
- if (device.connection) {
- totalStatus.connected++;
- } else {
- totalStatus.disconnected++;
- }
-
- // Update the per-type counts
- if (!typesStatus.has(device.type)) {
- typesStatus.set(device.type, {connected: 0, disconnected: 0});
- }
- const status = typesStatus.get(device.type)!;
- if (device.connection) {
- status.connected++;
- } else {
- status.disconnected++;
- }
- });
-
- return {total: totalStatus, types: typesStatus};
- }
-
ngOnChanges(changes: SimpleChanges): void {
if (changes['cpuUsagePercentage']) {
this.updateChartOption();
@@ -229,375 +196,24 @@
remaining: 100 - this.currentSystemMetrics?.disk_io?.disk_io_percent,
}
}
- this.systemLoadChartOption2 = {
- title: {
- text: `CPU Usage - ${_data?.cpu?.usage.toFixed(1)}%`,
- left: 'center',
- top: '80%',
- textStyle: {
- fontSize: 14,
- fontWeight: 'bold',
- color: '#333'
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b}: {c}%'
- },
- series: [
- {
- type: 'pie',
- radius: ['70%', '90%'],
- center: ['50%', '75%'],
- startAngle: 180,
- endAngle: 0,
- label: {
- show: false
- },
- data: [
- {
- value: _data?.cpu?.usage,
- name: 'CPU Usage',
- itemStyle: {
- color: '#008ac5'
- },
- },
- {
- value: _data?.cpu?.remaining,
- name: 'Remaining',
- itemStyle: {
- color: '#E0E0E0'
- },
- },
- ]
- }
- ]
- };
-
- this.systemLoadChartOption3 = {
- title: {
- text: `Memory Usage - ${_data?.memory?.usage.toFixed(1)}%`,
- left: 'center',
- top: '80%',
- textStyle: {
- fontSize: 14,
- fontWeight: 'bold',
- color: '#333'
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b}: {c}%'
- },
- series: [
- {
- type: 'pie',
- radius: ['70%', '90%'],
- center: ['50%', '75%'],
- startAngle: 180,
- endAngle: 0,
- label: {
- show: false
- },
- data: [
- {
- value: _data?.memory?.usage,
- name: 'Memory Usage',
- itemStyle: {
- color: '#00c698'
- },
- },
- {
- value: _data?.memory?.remaining,
- name: 'Remaining',
- itemStyle: {
- color: '#E0E0E0'
- },
- },
- ]
- }
- ]
- };
-
- this.diskChartOption1 = {
- title: {
- text: `Usage - ${_data?.disk?.usage.toFixed(1)}%`,
- left: 'center',
- top: '80%',
- textStyle: {
- fontSize: 12,
- fontWeight: 'bold',
- color: '#333'
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b}: {c}%'
- },
- series: [
- {
- type: 'pie',
- radius: ['70%', '90%'],
- center: ['50%', '75%'],
- startAngle: 180,
- endAngle: 0,
- label: {
- show: false
- },
- data: [
- {
- value: _data?.disk?.usage,
- name: 'Disk Usage',
- itemStyle: {
- color: '#1170cf'
- },
- },
- {
- value: _data?.disk?.remaining.toFixed(2),
- name: 'Remaining',
- itemStyle: {
- color: '#E0E0E0'
- },
- },
- ]
- }
- ]
- };
-
- this.connectionChartOption1 = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- bottom: 'bottom'
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- formatter: function (value: number) {
- if (value % 1 === 0) {
- return String(value);
- }
- return '';
- },
- },
- },
- xAxis: {
- type: 'category',
- data: this.deviceConnectionStats?.yAxisData
- },
- series: [
- {
- name: 'Connected',
- type: 'bar',
- stack: 'total',
- color: 'green',
- label: {
- show: true
- },
- emphasis: {
- focus: 'series'
- },
- data: this.deviceConnectionStats?.connectedData
- },
- {
- name: 'Disconnected',
- type: 'bar',
- stack: 'total',
- label: {
- show: true
- },
- color: 'red',
- emphasis: {
- focus: 'series'
- },
- data: this.deviceConnectionStats?.disconnectedData
- }
- ]
- };
-
- this.connectionChartOption2 = {
- tooltip: {
- trigger: 'item'
- },
- series: [
- {
- name: 'Devices Status',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'bottom'
- },
- labelLine: {
- show: false
- },
- data: [
- {value: this.deviceStats?.total?.connected, name: 'Connected', itemStyle: {color: 'green'}},
- {value: this.deviceStats?.total?.disconnected, name: 'Disconnected', itemStyle: {color: 'red'}}
- ]
- }
- ]
- }
+ this.systemLoadChartOption2 = this._chartOptions.halfDoughnutChartOptions('CPU', _data?.cpu, ['#008ac5', '#E0E0E0']);
+ this.systemLoadChartOption3 = this._chartOptions.halfDoughnutChartOptions('Memory', _data?.memory, ['#00c698', '#E0E0E0']);
+ this.diskChartOption1 = this._chartOptions.halfDoughnutChartOptions('Disk', _data?.disk, ['#1170cf', '#E0E0E0']);
+ this.connectionChartOption1 = this._chartOptions.connectedDeviceLineChart(this.deviceConnectionStats)
+ this.connectionChartOption2 = this._chartOptions.connectedDevicesDoughnutChartOptions(this.deviceStats?.total);
}
updateHistoricalCharts() {
+ const factor: any = 1024 * 1024;
const cpu_data_formatted: any = this.historicalCPUMetrics.map((d: any) => [d.time, d.cpu_percent]);
const memory_data_formatted: any = this.historicalMemoryMetrics.map((d: any) => [d.time, d.mem_percent]);
-
- const {unit, factor}: any = {unit: 'MB/s', factor: 1024 * 1024};
- const sent_data_formatted: any = this.historicalNetworkMetrics.map((d: any) => [d.time, d.bytes_sent_bps / factor]);
- const received_data_formatted: any = this.historicalNetworkMetrics.map((d: any) => [d.time, d.bytes_recv_bps / factor]);
-
+ const sent_data_formatted: any = this.historicalNetworkMetrics.map((d: any) => [d.time, d.sent / factor]);
+ const received_data_formatted: any = this.historicalNetworkMetrics.map((d: any) => [d.time, d.received / factor]);
const disk_io_formatted = this.historicalDiskIOMetrics.map((d: any) => [d.time, d.disk_io_percent]);
- this.systemLoadChartOption1 = {
- grid: {
- left: '7%',
- right: '1%',
- bottom: '1%',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- formatter: (params: any) => {
- const date = new Date(params[0].value[0]);
- const formattedTime = date.toLocaleTimeString('en-US', {
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- hour12: false
- });
- let tooltipContent = `Time: ${formattedTime}
`;
- params.forEach((item: any) => {
- tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}
`;
- });
- return tooltipContent;
- }
- },
- legend: {
- data: ['CPU', 'Memory']
- },
- xAxis: {
- type: 'time',
- name: 'Time'
- },
- yAxis: {
- type: 'value',
- name: 'Percentage'
- },
- series: [
- {
- name: 'CPU',
- type: 'line',
- data: cpu_data_formatted,
- color: '#008ac5'
- },
- {
- name: 'Memory',
- type: 'line',
- data: memory_data_formatted,
- color: '#00c698'
- }
- ]
- };
-
- this.networkThroughputChartOption1 = {
- grid: {
- left: '7%',
- right: '1%',
- bottom: '1%',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- formatter: (params: any) => {
- const date = new Date(params[0].value[0]);
- const formattedTime = date.toLocaleTimeString('en-US', {
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- hour12: false
- });
- let tooltipContent = `Time: ${formattedTime}
`;
- params.forEach((item: any) => {
- tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)} ${unit}
`;
- });
- return tooltipContent;
- }
- },
- legend: {
- data: ['Sent', 'Received']
- },
- xAxis: {
- type: 'time',
- name: 'Time'
- },
- yAxis: {
- type: 'value',
- name: `Bandwidth (${unit})`
- },
- series: [
- {
- name: 'Sent',
- type: 'line',
- data: sent_data_formatted,
- },
- {
- name: 'Received',
- type: 'line',
- data: received_data_formatted,
- }
- ]
- };
-
- this.diskIOChartOption1 = {
- grid: {
- left: '7%',
- right: '1%',
- bottom: '1%',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- formatter: (params: any) => {
- const date = new Date(params[0].value[0]);
- const formattedTime = date.toLocaleTimeString('en-US', {
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- hour12: false
- });
- let tooltipContent = `Time: ${formattedTime}
`;
- params.forEach((item: any) => {
- tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)}
`;
- });
- return tooltipContent;
- }
- },
- legend: {
- data: ['Disk I/O',]
- },
- xAxis: {
- type: 'time',
- name: 'Time'
- },
- yAxis: {
- type: 'value',
- name: `Percentage %`
- },
- series: [
- {
- name: 'Disk I/O',
- type: 'line',
- data: disk_io_formatted
- },
- ]
- };
+ this.systemLoadChartOption1 = this._chartOptions.historicalCPUMemoryChartOptions(cpu_data_formatted, memory_data_formatted);
+ this.networkThroughputChartOption1 = this._chartOptions.historicalThroughputChartOptions(sent_data_formatted, received_data_formatted)
+ this.diskIOChartOption1 = this._chartOptions.historicalDiskIOChartOptions(disk_io_formatted);
}
dialog = inject(MatDialog);
@@ -617,16 +233,8 @@
})
}
- enlargeSystemDiskUsage() {
- this.dialogConfig.width = '50%';
- const dialogRef = this.dialog.open(EnlargeSystemDiskUsage, this.dialogConfig);
- dialogRef.afterClosed().subscribe((isAdded: boolean) => {
- })
- }
-
enlargeSystemDevices() {
- this.dialogConfig.width = '50%';
- this.dialogConfig.data = this.deviceStats;
+ // this.dialogConfig.width = '50%';
const dialogRef = this.dialog.open(EnlargeSystemDevices, this.dialogConfig);
dialogRef.afterClosed().subscribe((isAdded: boolean) => {
})
@@ -634,135 +242,136 @@
}
@Component({
- selector: 'enlarge-system-load',
- templateUrl: './enlarge-system-load.html',
- imports: [SharedModule]
+ selector: 'enlarge-system-devices',
+ templateUrl: './enlarge-system-devices.html',
+ imports: [SharedModule, GlobalSerialPipe]
})
-export class EnlargeSystemLoad implements OnInit {
-
- chartOption1: EChartsOption = {};
-
+export class EnlargeSystemDevices implements OnInit {
readonly data = inject(MAT_DIALOG_DATA);
- readonly dialogRef = inject(MatDialogRef);
+ readonly dialogRef = inject(MatDialogRef);
+ private destroyRef = inject(DestroyRef);
constructor(
- private _system: SystemService,
+ private _router: Router,
private _notification: NotificationService,
+ private _utils: UtilsService,
+ private _device: DeviceService,
) {
}
ngOnInit() {
setTimeout(() => {
- this.getHistoricalSystemMetrics();
+ interval(this._utils.AUTO_REFRESH_INTERVAL)
+ .pipe(
+ startWith(0),
+ tap(() => {
+ this.getDeviceStatus();
+ }),
+ takeUntilDestroyed(this.destroyRef)
+ )
+ .subscribe();
})
}
- cpuMetrics: any = {};
- memoryMetrics: any = {};
+ devices: any[] = [];
+ groups: any[] = [];
+ deviceStats: any = {};
+ deviceStatusColumns: Array = ['serial', 'deviceName', 'deviceGroup', 'ip'];
+ deviceStatusDataSource: MatTableDataSource = new MatTableDataSource();
- getHistoricalSystemMetrics() {
- this._system.getHistoricalSystemMetrics()
+ getDeviceStatus() {
+ this.devices = [];
+ this.groups = [];
+ this.deviceStatusDataSource.data = [];
+ let offlineDevices: any = [];
+ // ToDo: Update with actual RoleId
+ let roleId = "0"
+ let rawPayload = new FormData();
+ rawPayload.set('action', 'FilterRoleDeviceGroups');
+ rawPayload.set('options', JSON.stringify({"role_id": roleId}));
+ this._device.getDeviceGroups(rawPayload)
.pipe(take(1))
.subscribe({
next: (result: any) => {
- this.cpuMetrics = result?.cpu_history;
- this.memoryMetrics = result?.mem_history;
- this.updateChartOptions();
- },
- error: (error: { message: string; }) => {
+ if (result && result.length > 1) {
+ if (result[1] && 'result' in result[1]) {
+ let groups = result[1].result;
+ groups.forEach((group: any) => {
+ this.groups.push(group?.group_name);
+ group?.device_list.forEach((device: any) => {
+ this.devices.push(device);
+ if (!device?.connection) {
+ offlineDevices.push(device);
+ }
+ })
+ })
+ this.deviceStats = this._utils.transformTotalConnectedDevicesMetrics(this.devices);
+ this.deviceStatusDataSource.data = offlineDevices;
+ }
+ }
+ }, error: (error: { message: string; }) => {
console.log(error);
this._notification.showError(error.message);
}
- });
+ })
}
- updateChartOptions() {
- const cpu_data_formatted = this.cpuMetrics.map((d: any) => [d.time, d.cpu_percent]);
- const memory_data_formatted = this.memoryMetrics.map((d: any) => [d.time, d.mem_percent]);
-
- this.chartOption1 = {
- tooltip: {
- trigger: 'axis',
- formatter: (params: any) => {
- const date = new Date(params[0].value[0]);
- const formattedTime = date.toLocaleTimeString('en-US', {
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- hour12: false
- });
- let tooltipContent = `Time: ${formattedTime}
`;
- params.forEach((item: any) => {
- tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}
`;
- });
- return tooltipContent;
- }
- },
- legend: {
- data: ['CPU', 'Memory']
- },
- xAxis: {
- type: 'time',
- name: 'Time'
- },
- yAxis: {
- type: 'value',
- name: 'Percentage'
- },
- series: [
- {
- name: 'CPU',
- type: 'line',
- data: cpu_data_formatted,
- color: '#008ac5'
- },
- {
- name: 'Memory',
- type: 'line',
- data: memory_data_formatted,
- color: '#00c698'
- }
- ]
- };
+ navigateToDevice(device: any) {
+ this._router.navigate(['/inventory/devices', device.name], {
+ state: {deviceData: device, groups: this.groups}
+ });
+ this.dialogRef.close();
}
-
onCancel() {
this.dialogRef.close();
}
}
@Component({
- selector: 'enlarge-system-throughput',
- templateUrl: './enlarge-system-throughput.html',
+ selector: 'enlarge-system-load',
+ templateUrl: './enlarge-system-load.html',
imports: [SharedModule]
})
-export class EnlargeSystemThroughput implements OnInit {
+export class EnlargeSystemLoad implements OnInit {
chartOption1: EChartsOption = {};
readonly data = inject(MAT_DIALOG_DATA);
- readonly dialogRef = inject(MatDialogRef);
+ readonly dialogRef = inject(MatDialogRef);
+ private destroyRef = inject(DestroyRef);
constructor(
private _system: SystemService,
private _notification: NotificationService,
+ private _chartOptions: ChartOptions,
+ private _utils: UtilsService
) {
}
ngOnInit() {
setTimeout(() => {
- this.getHistoricalSystemMetrics();
+ interval(this._utils.AUTO_REFRESH_INTERVAL)
+ .pipe(
+ startWith(0),
+ tap(() => {
+ this.getHistoricalSystemMetrics();
+ }),
+ takeUntilDestroyed(this.destroyRef)
+ )
+ .subscribe();
})
}
- networkMetrics: any = {};
+ cpuMetrics: any = {};
+ memoryMetrics: any = {};
getHistoricalSystemMetrics() {
this._system.getHistoricalSystemMetrics()
.pipe(take(1))
.subscribe({
next: (result: any) => {
- this.networkMetrics = result?.net_history;
+ this.cpuMetrics = result?.cpu_history;
+ this.memoryMetrics = result?.mem_history;
this.updateChartOptions();
},
error: (error: { message: string; }) => {
@@ -773,53 +382,9 @@
}
updateChartOptions() {
- const {unit, factor}: any = {unit: 'MB/s', factor: 1024 * 1024};
-
- const sent_data_formatted = this.networkMetrics.map((d: any) => [d.time, d.bytes_sent_bps / factor]);
- const received_data_formatted = this.networkMetrics.map((d: any) => [d.time, d.bytes_recv_bps / factor]);
-
- this.chartOption1 = {
- tooltip: {
- trigger: 'axis',
- formatter: (params: any) => {
- const date = new Date(params[0].value[0]);
- const formattedTime = date.toLocaleTimeString('en-US', {
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- hour12: false
- });
- let tooltipContent = `Time: ${formattedTime}
`;
- params.forEach((item: any) => {
- tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)} ${unit}
`;
- });
- return tooltipContent;
- }
- },
- legend: {
- data: ['Sent', 'Received']
- },
- xAxis: {
- type: 'time',
- name: 'Time'
- },
- yAxis: {
- type: 'value',
- name: `Bandwidth (${unit})`
- },
- series: [
- {
- name: 'Sent',
- type: 'line',
- data: sent_data_formatted
- },
- {
- name: 'Received',
- type: 'line',
- data: received_data_formatted
- }
- ]
- };
+ const cpu_data_formatted = this.cpuMetrics.map((d: any) => [d.time, d.cpu_percent]);
+ const memory_data_formatted = this.memoryMetrics.map((d: any) => [d.time, d.mem_percent]);
+ this.chartOption1 = this._chartOptions.historicalCPUMemoryChartOptions(cpu_data_formatted, memory_data_formatted);
}
onCancel() {
@@ -828,39 +393,48 @@
}
@Component({
- selector: 'enlarge-system-disk-usage',
- templateUrl: './enlarge-system-disk-usage.html',
- imports: [SharedModule],
- encapsulation: ViewEncapsulation.None
+ selector: 'enlarge-system-throughput',
+ templateUrl: './enlarge-system-throughput.html',
+ imports: [SharedModule]
})
-export class EnlargeSystemDiskUsage implements OnInit {
+export class EnlargeSystemThroughput implements OnInit {
chartOption1: EChartsOption = {};
- chartOption2: EChartsOption = {};
readonly data = inject(MAT_DIALOG_DATA);
- readonly dialogRef = inject(MatDialogRef);
+ readonly dialogRef = inject(MatDialogRef);
+ private destroyRef = inject(DestroyRef);
constructor(
private _system: SystemService,
private _notification: NotificationService,
+ private _chartOptions: ChartOptions,
+ private _utils: UtilsService
) {
}
ngOnInit() {
setTimeout(() => {
- this.getHistoricalSystemMetrics();
+ interval(this._utils.AUTO_REFRESH_INTERVAL)
+ .pipe(
+ startWith(0),
+ tap(() => {
+ this.getHistoricalSystemMetrics();
+ }),
+ takeUntilDestroyed(this.destroyRef)
+ )
+ .subscribe();
})
}
- diskIOMetrics: any = {};
+ networkMetrics: any = {};
getHistoricalSystemMetrics() {
this._system.getHistoricalSystemMetrics()
.pipe(take(1))
.subscribe({
next: (result: any) => {
- this.diskIOMetrics = result?.disk_io_history;
+ this.networkMetrics = result?.net_history;
this.updateChartOptions();
},
error: (error: { message: string; }) => {
@@ -871,161 +445,13 @@
}
updateChartOptions() {
- const disk_io_formatted = this.diskIOMetrics.map((d: any) => [d.time, d.disk_io_percent]);
-
- this.chartOption1 = {
- tooltip: {
- trigger: 'axis',
- formatter: (params: any) => {
- const date = new Date(params[0].value[0]);
- const formattedTime = date.toLocaleTimeString('en-US', {
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- hour12: false
- });
- let tooltipContent = `Time: ${formattedTime}
`;
- params.forEach((item: any) => {
- tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)}
`;
- });
- return tooltipContent;
- }
- },
- legend: {
- data: ['Disk I/O',]
- },
- xAxis: {
- type: 'time',
- name: 'Time'
- },
- yAxis: {
- type: 'value',
- name: `Percentage %`
- },
- series: [
- {
- name: 'Disk I/O',
- type: 'line',
- data: disk_io_formatted
- },
- ]
- };
+ const factor: any = 1024 * 1024;
+ const sent_data_formatted = this.networkMetrics.map((d: any) => [d.time, d.sent / factor]);
+ const received_data_formatted = this.networkMetrics.map((d: any) => [d.time, d.received / factor]);
+ this.chartOption1 = this._chartOptions.historicalThroughputChartOptions(sent_data_formatted, received_data_formatted)
}
onCancel() {
this.dialogRef.close();
}
}
-
-@Component({
- selector: 'enlarge-system-devices',
- templateUrl: './enlarge-system-devices.html',
- imports: [SharedModule],
- encapsulation: ViewEncapsulation.None
-})
-export class EnlargeSystemDevices implements OnInit {
-
- chartOption1: EChartsOption = {};
- chartOption2: EChartsOption = {};
-
- readonly data = inject(MAT_DIALOG_DATA);
- readonly dialogRef = inject(MatDialogRef);
-
- ngOnInit() {
- this.updateChartOptions()
- }
-
- transformChartData(deviceData: [string, { connected: number, disconnected: number }][]) {
- const yAxisData: string[] = [];
- const connectedData: number[] = [];
- const disconnectedData: number[] = [];
-
- deviceData.forEach(([type, status]) => {
- yAxisData.push(type);
- connectedData.push(status.connected);
- disconnectedData.push(status.disconnected);
- });
-
- return {yAxisData, connectedData, disconnectedData};
- }
-
- updateChartOptions() {
- const {yAxisData, connectedData, disconnectedData} = this.transformChartData(this.data.types.entries());
- this.chartOption1 = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- left: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'value'
- },
- yAxis: {
- type: 'category',
- data: yAxisData
- },
- series: [
- {
- name: 'Connected',
- type: 'bar',
- stack: 'total',
- color: 'green',
- label: {
- show: true
- },
- emphasis: {
- focus: 'series'
- },
- data: connectedData
- },
- {
- name: 'Disconnected',
- type: 'bar',
- stack: 'total',
- label: {
- show: true
- },
- color: 'red',
- emphasis: {
- focus: 'series'
- },
- data: disconnectedData
- }
- ]
- };
-
- this.chartOption2 = {
- tooltip: {
- trigger: 'item'
- },
- series: [
- {
- name: 'Devices Status',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'bottom'
- },
- labelLine: {
- show: false
- },
- data: [
- {value: this.data?.total?.connected, name: 'Connected', itemStyle: {color: '#4CAF50'}},
- {value: this.data?.total?.disconnected, name: 'Disconnected', itemStyle: {color: '#F44336'}}
- ]
- }
- ]
- }
- }
-
- onCancel() {
- this.dialogRef.close();
- }
-}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-devices.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-devices.html (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-devices.html (working copy)
@@ -1,12 +1,74 @@
-System Devices Status ({{data?.total?.connected}}/{{data?.total?.connected + data?.total?.disconnected}})
+Disconnected Devices - ({{ deviceStats?.total?.disconnected }}
+ /{{ deviceStats?.total?.connected + deviceStats?.total?.disconnected }})
-
-
+ @if (deviceStats?.total?.disconnected === 0) {
+
+
All devices are connected.
+
+ } @else {
+
+
+
+
+
+
+ | ID |
+ {{ i | globalSerial }} |
+
+
+ Device Name |
+
+
+ {{ element?.name }}
+
+ |
+
+
+ Model |
+ {{ element?.model }} |
+
+
+ IP Address |
+ {{ element?.ip }} |
+
+ |
+ |
+
+ | No results found. |
+
+
+
+
+ }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ @for (tab of tabDefinitions; track tab.label) {
+
+
+
+
+
+
+
+ }
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
`;
+ params.forEach((param: any) => {
+ const valueInMbps = param.value.toFixed(2);
+ tooltipContent += `${param.marker} ${param.seriesName}: ${valueInMbps} Mbps
`;
+ });
+ return tooltipContent;
+ }
+ },
+ grid: {
+ left: '3%',
+ containLabel: true
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ name: 'Mbps',
+ nameLocation: 'end',
+ nameGap: 20,
+ axisLabel: {
+ formatter: '{value}'
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: sortedNames,
+ },
+ series: [
+ {
+ name: 'Inbound',
+ type: 'bar',
+ data: sortedInbound
+ },
+ {
+ name: 'Outbound',
+ type: 'bar',
+ data: sortedOutbound
+ }
+ ]
+ };
+ }
+
+ distributionChartOptions(label: any, active_sessions: any): EChartsOption {
+ return {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}
{b}: {c}'
+ },
+ series: [
+ {
+ name: label,
+ type: 'pie',
+ radius: [25, 75],
+ center: ['50%', '50%'],
+ roseType: 'area',
+ itemStyle: {
+ borderRadius: 8
+ },
+ data: active_sessions
+ }
+ ]
+ }
+ }
+
+ lineChartOptions(label: any, metrics: any): EChartsOption {
+ return {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '3%',
+ containLabel: true
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ max: 100,
+ name: '%',
+ nameLocation: 'end',
+ nameGap: 20,
+ axisLabel: {
+ formatter: '{value}'
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: metrics.map((item: any) => item?.name),
+ inverse: false
+ },
+ series: [
+ {
+ name: label,
+ type: 'bar',
+ data: metrics.map((item: any) => item?.value)
+ }
+ ]
+ };
+ }
+
+ connectedDeviceLineChart(metrics: any): EChartsOption {
+ return {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ bottom: 'bottom'
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ formatter: function (value: number) {
+ if (value % 1 === 0) {
+ return String(value);
+ }
+ return '';
+ },
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: metrics?.yAxisData
+ },
+ series: [
+ {
+ name: 'Connected',
+ type: 'bar',
+ stack: 'total',
+ color: 'green',
+ label: {
+ show: true
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: metrics?.connectedData
+ },
+ {
+ name: 'Disconnected',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true
+ },
+ color: 'red',
+ emphasis: {
+ focus: 'series'
+ },
+ data: metrics?.disconnectedData
+ }
+ ]
+ };
+ }
+
+ historicalThroughputChartOptions(inbound: any, outbound: any): EChartsOption {
+ return {
+ grid: {
+ left: '7%',
+ right: '1%',
+ bottom: '1%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params: any) => {
+ const date = new Date(params[0].value[0]);
+ const formattedTime = date.toLocaleTimeString('en-US', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false
+ });
+ let tooltipContent = `Time: ${formattedTime}
`;
+ params.forEach((item: any) => {
+ tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)} Mbps
`;
+ });
+ return tooltipContent;
+ }
+ },
+ legend: {
+ data: ['Sent', 'Received']
+ },
+ xAxis: {
+ type: 'time',
+ name: 'Time'
+ },
+ yAxis: {
+ type: 'value',
+ name: `Bandwidth (Mbps)`
+ },
+ series: [
+ {
+ name: 'Sent',
+ type: 'line',
+ data: outbound,
+ },
+ {
+ name: 'Received',
+ type: 'line',
+ data: inbound,
+ }
+ ]
+ }
+ }
+
+ historicalCPUMemoryChartOptions(cpu_data: any, memory_data: any): EChartsOption {
+ return {
+ grid: {
+ left: '7%',
+ right: '1%',
+ bottom: '1%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params: any) => {
+ const date = new Date(params[0].value[0]);
+ const formattedTime = date.toLocaleTimeString('en-US', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false
+ });
+ let tooltipContent = `Time: ${formattedTime}
`;
+ params.forEach((item: any) => {
+ tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1]}
`;
+ });
+ return tooltipContent;
+ }
+ },
+ legend: {
+ data: ['CPU', 'Memory']
+ },
+ xAxis: {
+ type: 'time',
+ name: 'Time'
+ },
+ yAxis: {
+ type: 'value',
+ name: 'Percentage'
+ },
+ series: [
+ {
+ name: 'CPU',
+ type: 'line',
+ data: cpu_data,
+ color: '#008ac5'
+ },
+ {
+ name: 'Memory',
+ type: 'line',
+ data: memory_data,
+ color: '#00c698'
+ }
+ ]
+ }
+ }
+
+ historicalDiskIOChartOptions(disk_io_data: any): EChartsOption {
+ return {
+ grid: {
+ left: '7%',
+ right: '1%',
+ bottom: '1%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params: any) => {
+ const date = new Date(params[0].value[0]);
+ const formattedTime = date.toLocaleTimeString('en-US', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false
+ });
+ let tooltipContent = `Time: ${formattedTime}
`;
+ params.forEach((item: any) => {
+ tooltipContent += `${item.marker} ${item.seriesName}: ${item.value[1].toFixed(2)}
`;
+ });
+ return tooltipContent;
+ }
+ },
+ legend: {
+ data: ['Disk I/O',]
+ },
+ xAxis: {
+ type: 'time',
+ name: 'Time'
+ },
+ yAxis: {
+ type: 'value',
+ name: `Percentage %`
+ },
+ series: [
+ {
+ name: 'Disk I/O',
+ type: 'line',
+ data: disk_io_data
+ },
+ ]
+ }
+ }
+
+ connectedDevicesDoughnutChartOptions(deviceMetrics: any, showLegend: boolean = false): EChartsOption {
+ let options: EChartsOption = {
+ tooltip: {
+ trigger: 'item'
+ },
+ series: [
+ {
+ name: 'Devices Status',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'bottom'
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: deviceMetrics?.connected, name: 'Connected', itemStyle: {color: 'green'}},
+ {value: deviceMetrics?.disconnected, name: 'Disconnected', itemStyle: {color: 'red'}}
+ ]
+ }
+ ]
+ }
+ if (showLegend) {
+ options.legend = {
+ bottom: 'bottom'
+ }
+ }
+ return options;
+ }
+
+ halfDoughnutChartOptions(label: string, _data: any, colors: any[] = ['#008ac5', '#E0E0E0']): EChartsOption {
+ return {
+ title: {
+ text: `${label} Usage - ${_data?.usage.toFixed(1)}%`,
+ left: 'center',
+ top: '80%',
+ textStyle: {
+ fontSize: 14,
+ fontWeight: 'bold',
+ color: '#333'
+ }
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}: {c}%'
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['70%', '90%'],
+ center: ['50%', '75%'],
+ startAngle: 180,
+ endAngle: 0,
+ label: {
+ show: false
+ },
+ data: [
+ {
+ value: _data?.usage,
+ name: `${label} Usage`,
+ itemStyle: {
+ color: colors[0]
+ },
+ },
+ {
+ value: _data?.remaining,
+ name: 'Remaining',
+ itemStyle: {
+ color: colors[1]
+ },
+ },
+ ]
+ }
+ ]
+ }
+ }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/device-service.ts (working copy)
@@ -141,7 +141,7 @@
}
getDeviceConfigByConfigFileName(filename: any, filetype: string = 'system') {
- let baseURL: string =`${URLS.GET_DEVICE_CONFIG_BY_CONFIG_FILE_NAME_URL}`;
+ let baseURL: string = `${URLS.GET_DEVICE_CONFIG_BY_CONFIG_FILE_NAME_URL}`;
filetype = filetype === 'device' ? 'system' : filetype;
return this.http.get(`${baseURL}/${filetype}/${filename}`);
}
@@ -157,7 +157,7 @@
getAGVSiteConfig(configName: string, vsite: any = 'global') {
let finalURL: any = `${URLS.GET_AG_VSITE_CA_CONFIG_URL}/${configName}/ca.conf`;
if (vsite !== 'global') {
- finalURL = `${URLS.GET_AG_VSITE_CA_CONFIG_URL}/${configName}/vsites/${vsite}/ca.conf.${vsite}`;
+ finalURL = `${URLS.GET_AG_VSITE_CA_CONFIG_URL}/${configName}/vsites/${vsite}/ca.conf.${vsite}`;
}
return this.http.post(finalURL, null, {
csrf: true,
@@ -167,7 +167,7 @@
}
updateDeviceConfigByConfigFileName(filename: string, filetype: string, rawPayload: any) {
- let baseURL: string =`${URLS.UPDATE_DEVICE_CONFIG_BY_CONFIG_FILE_NAME_URL}`;
+ let baseURL: string = `${URLS.UPDATE_DEVICE_CONFIG_BY_CONFIG_FILE_NAME_URL}`;
filetype = filetype === 'device' ? 'system' : filetype;
return this.http.post(`${baseURL}/${filetype}/${filename}`, rawPayload, {
csrf: true,
@@ -179,7 +179,7 @@
updateAGVSiteConfig(configName: string, vsite: any = 'global', rawPayload: any) {
let finalURL: any = `${URLS.UPDATE_AG_VSITE_CA_CONFIG_URL}/${configName}/ca.conf`;
if (vsite !== 'global') {
- finalURL = `${URLS.UPDATE_AG_VSITE_CA_CONFIG_URL}/${configName}/vsites/${vsite}/ca.conf.${vsite}`;
+ finalURL = `${URLS.UPDATE_AG_VSITE_CA_CONFIG_URL}/${configName}/vsites/${vsite}/ca.conf.${vsite}`;
}
return this.http.post(finalURL, rawPayload, {
csrf: true,
@@ -528,4 +528,19 @@
}
);
}
+
+ mapDeviceDetails(devices: any[], metrics: any[]): any[] {
+ metrics.forEach((_metric: any) => {
+ const device = devices.find(_device => _metric?.agent_host === _device?.ip);
+ if (device) {
+ _metric.device_name = device?.name;
+ _metric.device_type = device?.type;
+ // Specific for LLB
+ if (!_metric.service_name && _metric?.link_name) {
+ _metric.service_name = _metric.link_name;
+ }
+ }
+ });
+ return metrics;
+ }
}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/loading.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/loading.ts (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/loading.ts (working copy)
@@ -6,18 +6,29 @@
})
export class Loading {
-
+ private activeRequestCount = 0;
private loadingSubject = new BehaviorSubject(false);
loading$ = this.loadingSubject.asObservable();
constructor() {
}
- show() {
- this.loadingSubject.next(true);
+ startRequest(): void {
+ this.activeRequestCount++;
+ if (this.activeRequestCount === 1) {
+ this.loadingSubject.next(true);
+ }
}
- hide() {
- this.loadingSubject.next(false);
+ endRequest(): void {
+ this.activeRequestCount--;
+
+ if (this.activeRequestCount < 0) {
+ this.activeRequestCount = 0;
+ }
+
+ if (this.activeRequestCount === 0) {
+ this.loadingSubject.next(false);
+ }
}
}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts (working copy)
@@ -485,6 +485,14 @@
getTopAPVLLBMetrics(payload: any) {
return this.http.post(URLS.GET_TOP_APV_LLB_METRICS_URL, payload, {
+ csrf: true,
+ isFormData: false,
+ csrfInFormData: true
+ });
+ }
+
+ getTopSSLVPNMetrics(payload: any) {
+ return this.http.post(URLS.GET_TOP_SSL_VPN_METRICS_URL, payload, {
csrf: true,
isFormData: false,
csrfInFormData: true
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.ts (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/utils-service.ts (working copy)
@@ -1,12 +1,28 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';
-import {KeyValuePair} from '../components/sub-components/device-details/device-details';
+export interface DeviceTypeStatus {
+ connected: number;
+ disconnected: number;
+}
+
+export interface DeviceGraphData {
+ total: DeviceTypeStatus;
+ types: Map;
+}
+
+export interface KeyValuePair {
+ key: string;
+ value: any;
+}
+
@Injectable({
providedIn: 'root'
})
export class UtilsService {
+ AUTO_REFRESH_INTERVAL: number = 10000;
+
constructor() {
}
@@ -88,4 +104,155 @@
"17": "rdp",
}
}
+
+ formatChartData(metrics: any, rawData: any): any {
+ let result: any = {};
+
+ if (metrics.includes('connections')) {
+ result.connections = rawData
+ .filter((item: any) => item.metric === 'connections')
+ .map((item: any) => ({
+ name: `${item.service_name} (${item.device_name})`,
+ value: item.value
+ }))
+ .sort((a: any, b: any) => b.value - a.value);
+ }
+
+ if (metrics.includes('hits') || metrics.includes('requests')) {
+ result.hits = rawData
+ .filter((item: any) => item.metric === 'hits' || item.metric === 'requests')
+ .map((item: any) => ({
+ name: `${item.service_name} (${item.device_name})`,
+ value: item.value
+ }))
+ .sort((a: any, b: any) => b.value - a.value);
+ }
+
+ if (metrics.includes('active_sessions')) {
+ result.active_sessions = rawData
+ .filter((item: any) => item.metric === 'active_sessions')
+ .map((item: any) => ({name: `${item.vsite_name} (${item.device_name})`, value: item.value}))
+ .sort((a: any, b: any) => b.value - a.value);
+ }
+
+ if (metrics.includes('cpu')) {
+ result.cpu = rawData
+ .filter((item: any) => item.metric === 'cpu')
+ .map((item: any) => ({name: `${item.device_name}`, value: item.value}))
+ .sort((a: any, b: any) => b.value - a.value);
+ }
+
+ if (metrics.includes('memory')) {
+ result.memory = rawData
+ .filter((item: any) => item.metric === 'memory')
+ .map((item: any) => ({name: `${item.device_name}`, value: item.value}))
+ .sort((a: any, b: any) => b.value - a.value);
+ }
+
+ if (metrics.includes('network')) {
+ const sortedNetworkData = rawData
+ .filter((item: any) => item.metric === 'network')
+ .map((item: any) => ({
+ name: `${item.service_name} (${item.device_name})`,
+ // Convert Bytes to Megabytes (MB)
+ inbound: item.received / (1024 * 1024),
+ outbound: item.sent / (1024 * 1024),
+ }))
+ .sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound));
+ result.network = {
+ names: sortedNetworkData.map((item: any) => item.name),
+ inbound: sortedNetworkData.map((item: any) => item.inbound),
+ outbound: sortedNetworkData.map((item: any) => item.outbound)
+ };
+ }
+
+ if (metrics.includes('device_network')) {
+ const sortedNetworkData = rawData
+ .filter((item: any) => item.metric === 'network')
+ .map((item: any) => ({
+ name: `${item.device_name}`,
+ // Convert Bytes to Megabytes (MB)
+ total_in: item.total_in / (1024 * 1024),
+ total_out: item.total_out / (1024 * 1024),
+ }))
+ .sort((a: any, b: any) => (b.total_in + b.total_out) - (a.total_in + a.total_out));
+ result.network = {
+ names: sortedNetworkData.map((item: any) => item.name),
+ inbound: sortedNetworkData.map((item: any) => item.total_in),
+ outbound: sortedNetworkData.map((item: any) => item.total_out)
+ };
+ }
+
+ if (metrics.includes('client_network')) {
+ const sortedNetworkData = rawData
+ .filter((item: any) => item.metric === 'client_network')
+ .map((item: any) => ({
+ name: `${item.vsite_name} (${item.device_name})`,
+ // Convert Bytes to Megabytes (MB)
+ inbound: item.received / (1024 * 1024),
+ outbound: item.sent / (1024 * 1024),
+ }))
+ .sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound));
+ result.client_network = {
+ names: sortedNetworkData.map((item: any) => item.name),
+ inbound: sortedNetworkData.map((item: any) => item.inbound),
+ outbound: sortedNetworkData.map((item: any) => item.outbound)
+ };
+ }
+
+ if (metrics.includes('server_network')) {
+ const sortedNetworkData = rawData
+ .filter((item: any) => item.metric === 'server_network')
+ .map((item: any) => ({
+ name: `${item.vsite_name} (${item.device_name})`,
+ // Convert Bytes to Megabytes (MB)
+ inbound: item.received / (1024 * 1024),
+ outbound: item.sent / (1024 * 1024),
+ }))
+ .sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound));
+ result.server_network = {
+ names: sortedNetworkData.map((item: any) => item.name),
+ inbound: sortedNetworkData.map((item: any) => item.inbound),
+ outbound: sortedNetworkData.map((item: any) => item.outbound)
+ };
+ }
+ return result;
+ }
+
+ transformConnectedDevicesMetrics(deviceData: [string, { connected: number, disconnected: number }][]) {
+ const yAxisData: string[] = [];
+ const connectedData: number[] = [];
+ const disconnectedData: number[] = [];
+ deviceData.forEach(([type, status]) => {
+ yAxisData.push(type);
+ connectedData.push(status.connected);
+ disconnectedData.push(status.disconnected);
+ });
+ return {yAxisData, connectedData, disconnectedData};
+ }
+
+ transformTotalConnectedDevicesMetrics(devices: any): DeviceGraphData {
+ const totalStatus: DeviceTypeStatus = {connected: 0, disconnected: 0};
+ const typesStatus = new Map();
+ if (!devices || devices.length === 0) {
+ return {total: totalStatus, types: typesStatus};
+ }
+ devices.forEach((device: any) => {
+ if (device.connection) {
+ totalStatus.connected++;
+ } else {
+ totalStatus.disconnected++;
+ }
+ if (!typesStatus.has(device.type)) {
+ typesStatus.set(device.type, {connected: 0, disconnected: 0});
+ }
+ const status = typesStatus.get(device.type)!;
+ if (device.connection) {
+ status.connected++;
+ } else {
+ status.disconnected++;
+ }
+ });
+ return {total: totalStatus, types: typesStatus};
+ }
}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/sslvpn_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/sslvpn_metrics.py (nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/sslvpn_metrics.py (working copy)
@@ -0,0 +1,32 @@
+from django.http import JsonResponse
+
+from cm.lib.libbasic_operation import oper_log
+from hive.custom_exceptions import generic_exception as ge
+from hive.services.sslvpn_metrics import get_top_ssl_vpn_metrics
+
+
+def handle_get_top_ssl_vpn_metrics(request, path=None):
+ try:
+ if request.method != 'POST':
+ return JsonResponse({
+ 'error': 400,
+ 'message': "Invalid HTTP method"
+ }, status=400)
+
+ payload = getattr(request, 'json', {}) or {}
+ agent_hosts = payload.get('agent_host', None)
+ if agent_hosts is not None:
+ if isinstance(agent_hosts, str):
+ agent_hosts = [agent_hosts]
+
+ services_metrics = get_top_ssl_vpn_metrics(agent_hosts)
+
+ return JsonResponse(services_metrics, safe=False)
+
+ except ge.GenericError as e:
+ oper_log('error', 'system', str(e))
+ return ge.handle_exception(e)
+ except Exception as e:
+ msg = f'Exception while getting top ssl-vpn virtual site metrics: {str(e)}'
+ oper_log('error', 'system', msg)
+ raise ge.GenericError(500, msg)
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/apv_services_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/apv_services_metrics.py (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/apv_services_metrics.py (working copy)
@@ -3,9 +3,9 @@
self.metric = metric # "connections", "requests", or "network"
self.agent_host = agent_host
self.service_name = service_name
- self.value = float(value) if value is not None else None
- self.received = int(received) if received is not None else None
- self.sent = int(sent) if sent is not None else None
+ self.value = int(value) if value is not None else 0
+ self.received = int(received) if received is not None else 0
+ self.sent = int(sent) if sent is not None else 0
def to_dict(self):
return {
@@ -23,9 +23,9 @@
self.metric = metric # "connections", "hits", or "network"
self.agent_host = agent_host
self.service_name = service_name
- self.value = float(value) if value is not None else None
- self.received = int(received) if received is not None else None
- self.sent = int(sent) if sent is not None else None
+ self.value = int(value) if value is not None else 0
+ self.received = int(received) if received is not None else 0
+ self.sent = int(sent) if sent is not None else 0
def to_dict(self):
return {
@@ -40,12 +40,12 @@
class LLBMetrics:
def __init__(self, metric, agent_host, link_name, value, received=None, sent=None):
- self.metric = metric # "hits", "connections", "throughput"
+ self.metric = metric # "hits", "connections", "throughput"
self.agent_host = agent_host
self.link_name = link_name
- self.value = float(value) if value is not None else None
- self.received = int(received) if received is not None else None
- self.sent = int(sent) if sent is not None else None
+ self.value = int(value) if value is not None else 0
+ self.received = int(received) if received is not None else 0
+ self.sent = int(sent) if sent is not None else 0
def to_dict(self):
return {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/devices_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/devices_metrics.py (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/devices_metrics.py (working copy)
@@ -2,9 +2,9 @@
def __init__(self, metric, agent_host, value, total_in=None, total_out=None):
self.metric = metric # "cpu", "memory", or "network"
self.agent_host = agent_host
- self.value = float(value) if value is not None else None
- self.total_in = int(total_in) if total_in is not None else None
- self.total_out = int(total_out) if total_out is not None else None
+ self.value = float(value) if value is not None else 0
+ self.total_in = int(total_in) if total_in is not None else 0
+ self.total_out = int(total_out) if total_out is not None else 0
def to_dict(self):
return {
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/sslvpn_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/sslvpn_metrics.py (nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/sslvpn_metrics.py (working copy)
@@ -0,0 +1,18 @@
+class VirtualSiteMetrics:
+ def __init__(self, metric, agent_host, vsite_name, value, received=None, sent=None):
+ self.metric = metric # "active_sessions", "client_network", "server_network"
+ self.agent_host = agent_host
+ self.vsite_name = vsite_name
+ self.value = int(value) if value is not None else 0
+ self.received = int(received) if received is not None else 0
+ self.sent = int(sent) if sent is not None else 0
+
+ def to_dict(self):
+ return {
+ "metric": self.metric,
+ "agent_host": self.agent_host,
+ "vsite_name": self.vsite_name,
+ "value": self.value,
+ "received": self.received,
+ "sent": self.sent
+ }
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/system_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/system_metrics.py (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/system_metrics.py (working copy)
@@ -55,18 +55,18 @@
class NetworkMetrics:
- def __init__(self, time, host, interface, bytes_sent_bps, bytes_recv_bps):
+ def __init__(self, time, host, interface, sent, received):
self.time = time
self.host = host
self.interface = interface
- self.bytes_sent_bps = bytes_sent_bps
- self.bytes_recv_bps = bytes_recv_bps
+ self.sent = sent
+ self.received = received
def to_dict(self):
return {
'time': self.time.isoformat() if self.time else None,
'host': self.host,
'interface': self.interface,
- 'bytes_sent_bps': float(round(self.bytes_sent_bps, 2)) if self.bytes_sent_bps is not None else None,
- 'bytes_recv_bps': float(round(self.bytes_recv_bps, 2)) if self.bytes_recv_bps is not None else None
+ 'sent': float(round(self.sent, 2)) if self.sent is not None else 0,
+ 'received': float(round(self.received, 2)) if self.received is not None else 0
}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/sslvpn_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/sslvpn_metrics.py (nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/sslvpn_metrics.py (working copy)
@@ -0,0 +1,162 @@
+from hive.db.db_client import with_db_connection
+from hive.db.sslvpn_metrics import VirtualSiteMetrics
+
+
+class VirtualSiteMetricsRepo:
+ @staticmethod
+ @with_db_connection
+ def get_top_virtual_site_metrics(cur, interval_seconds=30, limit=5, agent_hosts=None):
+ # Build agent_host filter
+ host_filter = ""
+ params = {"interval": interval_seconds, "limit": limit}
+ if agent_hosts:
+ host_filter = "AND agent_host = ANY(%(agent_hosts)s)"
+ params["agent_hosts"] = agent_hosts
+
+ query = f"""
+ -- Top Active Sessions
+ WITH ActiveSessions AS (
+ SELECT
+ id,
+ agent_host,
+ last(active_sessions, time) AS value
+ FROM ag_virtual_site_stats
+ WHERE time >= NOW() - INTERVAL '%(interval)s seconds' {host_filter}
+ GROUP BY id, agent_host
+ ),
+ ActiveTop AS (
+ SELECT
+ 'active_sessions' AS metric,
+ agent_host,
+ id AS vsite_name,
+ value,
+ NULL::BIGINT AS received,
+ NULL::BIGINT AS sent
+ FROM ActiveSessions
+ ORDER BY value DESC
+ LIMIT %(limit)s
+ ),
+
+ -- Client Throughput
+ ClientBytes AS (
+ SELECT
+ time_bucket('10 seconds', time) AS bucket,
+ id,
+ agent_host,
+ first(client_bytes_in, time) AS first_in,
+ first(client_bytes_out, time) AS first_out
+ FROM ag_virtual_site_stats
+ WHERE time >= NOW() - INTERVAL '%(interval)s seconds' {host_filter}
+ GROUP BY bucket, id, agent_host
+ ),
+ ClientDerivatives AS (
+ SELECT
+ id,
+ agent_host,
+ (first_in - lag(first_in) OVER w) * 8 AS received,
+ (first_out - lag(first_out) OVER w) * 8 AS sent
+ FROM ClientBytes
+ WINDOW w AS (PARTITION BY id, agent_host ORDER BY bucket)
+ ),
+ ClientAgg AS (
+ SELECT
+ id,
+ agent_host,
+ last(received, now()) AS received,
+ last(sent, now()) AS sent,
+ last(received, now()) + last(sent, now()) AS total
+ FROM ClientDerivatives
+ GROUP BY id, agent_host
+ ),
+ ClientTop AS (
+ SELECT
+ 'client_network' AS metric,
+ agent_host,
+ id AS vsite_name,
+ total AS value,
+ received,
+ sent
+ FROM ClientAgg
+ ORDER BY total DESC
+ LIMIT %(limit)s
+ ),
+
+ -- Server Throughput
+ ServerBytes AS (
+ SELECT
+ time_bucket('10 seconds', time) AS bucket,
+ id,
+ agent_host,
+ first(server_bytes_in, time) AS first_in,
+ first(server_bytes_out, time) AS first_out
+ FROM ag_virtual_site_stats
+ WHERE time >= NOW() - INTERVAL '%(interval)s seconds' {host_filter}
+ GROUP BY bucket, id, agent_host
+ ),
+ ServerDerivatives AS (
+ SELECT
+ id,
+ agent_host,
+ (first_in - lag(first_in) OVER w) * 8 AS received,
+ (first_out - lag(first_out) OVER w) * 8 AS sent
+ FROM ServerBytes
+ WINDOW w AS (PARTITION BY id, agent_host ORDER BY bucket)
+ ),
+ ServerAgg AS (
+ SELECT
+ id,
+ agent_host,
+ last(received, now()) AS received,
+ last(sent, now()) AS sent,
+ last(received, now()) + last(sent, now()) AS total
+ FROM ServerDerivatives
+ GROUP BY id, agent_host
+ ),
+ ServerTop AS (
+ SELECT
+ 'server_network' AS metric,
+ agent_host,
+ id AS vsite_name,
+ total AS value,
+ received,
+ sent
+ FROM ServerAgg
+ ORDER BY total DESC
+ LIMIT %(limit)s
+ )
+
+ -- Final Union
+ SELECT *
+ FROM (
+ SELECT * FROM ActiveTop
+ UNION ALL
+ SELECT * FROM ClientTop
+ UNION ALL
+ SELECT * FROM ServerTop
+ ) t
+ ORDER BY metric, value DESC;
+ """
+
+ cur.execute(query, params)
+ rows = cur.fetchall()
+
+ metrics_list = []
+ for row in rows:
+ metric_obj = VirtualSiteMetricsRepo.parse_virtual_metric(row)
+ if metric_obj:
+ metrics_list.append(metric_obj)
+ return metrics_list
+
+ @staticmethod
+ def parse_virtual_metric(row):
+ if not row:
+ return None
+ metric, agent_host, vsite_name, value, received, sent = row
+ return VirtualSiteMetrics(
+ metric=metric,
+ agent_host=agent_host,
+ vsite_name=vsite_name,
+ value=value,
+ received=received,
+ sent=sent
+ )
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/system_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/system_metrics.py (revision 2709)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/repositories/system_metrics.py (working copy)
@@ -107,8 +107,8 @@
SELECT
bucket_time,
interface,
- ROUND(SUM(bytes_sent_diff) / GREATEST(1, SUM(time_diff_sec)), 2) AS bytes_sent_bps,
- ROUND(SUM(bytes_recv_diff) / GREATEST(1, SUM(time_diff_sec)), 2) AS bytes_recv_bps
+ ROUND(SUM(bytes_sent_diff) / GREATEST(1, SUM(time_diff_sec)), 2) AS sent,
+ ROUND(SUM(bytes_recv_diff) / GREATEST(1, SUM(time_diff_sec)), 2) AS received
FROM (
SELECT
time_bucket('1 minute', time) AS bucket_time,
@@ -129,13 +129,13 @@
cur.close()
metrics_list = []
- for time, interface, bytes_sent, bytes_recv in results:
+ for time, interface, sent, received in results:
metrics_list.append(NetworkMetrics(
time=time,
host=host,
interface=interface,
- bytes_sent_bps=bytes_sent,
- bytes_recv_bps=bytes_recv
+ sent=sent,
+ received=received
))
return [m.to_dict() for m in metrics_list]
@@ -228,8 +228,8 @@
SELECT bucket_time,
interface,
ROUND(SUM(bytes_sent_diff) * 8 / GREATEST(1, SUM(time_diff_sec)),
- 2) AS bytes_sent_bps,
- ROUND(SUM(bytes_recv_diff) * 8 / GREATEST(1, SUM(time_diff_sec)), 2) AS bytes_recv_bps
+ 2) AS sent,
+ ROUND(SUM(bytes_recv_diff) * 8 / GREATEST(1, SUM(time_diff_sec)), 2) AS received
FROM (SELECT time_bucket('1 minute', time) AS bucket_time,
interface,
GREATEST(bytes_sent::BIGINT -
@@ -253,12 +253,12 @@
cur.close()
metrics_list = []
- for time, interface, bytes_sent, bytes_recv in results:
+ for time, interface, sent, received in results:
metrics_list.append(NetworkMetrics(
time=time,
host=host,
interface=interface,
- bytes_sent_bps=bytes_sent,
- bytes_recv_bps=bytes_recv
+ sent=sent,
+ received=received
))
return [m.to_dict() for m in metrics_list]
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/sslvpn_metrics.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/sslvpn_metrics.py (nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/services/sslvpn_metrics.py (working copy)
@@ -0,0 +1,35 @@
+from hive.repositories.sslvpn_metrics import VirtualSiteMetricsRepo
+
+
+def sanitize_metrics(metrics_list):
+ sanitized = []
+ for m in metrics_list:
+ d = m.to_dict() if hasattr(m, "to_dict") else dict(m)
+ if d['metric'] == 'active_sessions':
+ d.pop('received', None)
+ d.pop('sent', None)
+ elif d['metric'] in ('client_network', 'server_network'):
+ d.pop('value', None)
+ sanitized.append(d)
+ return sanitized
+
+
+def get_top_ssl_vpn_metrics(agent_hosts=None, interval=30, limit=5):
+ """
+ Wrapper to fetch top devices' metrics.
+
+ :param agent_hosts: list of hostnames to filter (or None for all)
+ :param interval: interval in seconds for network rate calculation
+ :param limit: top N hosts per metric
+ :return: list of dicts representing metrics
+ """
+ metrics_objects = VirtualSiteMetricsRepo.get_top_virtual_site_metrics(
+ agent_hosts=agent_hosts,
+ interval_seconds=interval,
+ limit=limit
+ )
+
+ metrics_list = [m.to_dict() for m in metrics_objects]
+
+ metrics_list = sanitize_metrics(metrics_list)
+ return metrics_list