;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ResourceMonitoringLlbDetails]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ResourceMonitoringLlbDetails);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.ts (nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb-details/resource-monitoring-llb-details.ts (working copy)
@@ -0,0 +1,104 @@
+import {Component, DestroyRef, inject, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {SharedModule} from '../../../shared/shared-module';
+import {TimeFilter, TimeRange} from '../../common/time-filter/time-filter';
+import {MatDialog} from '@angular/material/dialog';
+import {EChartsOption} from 'echarts';
+import {take} from 'rxjs/operators';
+import {DeviceService} from '../../../services/device-service';
+import {NotificationService} from '../../../services/notification';
+import {ChartOptions} from '../../../services/chart-options';
+
+@Component({
+ selector: 'app-resource-monitoring-llb-details',
+ imports: [SharedModule,],
+ templateUrl: './resource-monitoring-llb-details.html',
+ styleUrl: './resource-monitoring-llb-details.scss'
+})
+export class ResourceMonitoringLlbDetails implements OnInit {
+
+ deviceIp: string = '';
+ linkName: string = '';
+ selectedTabIndex: number = 0;
+ private tabNames: string[] = [
+ 'Basic Monitoring',
+ ];
+
+ currentFrom: string | Date = 'now-15m';
+ currentTo: string | Date = 'now';
+ currentInterval: number = 10;
+ private destroyRef = inject(DestroyRef);
+
+ throughputChartOptions: EChartsOption = {};
+ bandwidthChartOptions: EChartsOption = {};
+ connectionsChartOptions: EChartsOption = {};
+ hitsChartOptions: EChartsOption = {};
+
+ constructor(
+ private _route: ActivatedRoute,
+ private _router: Router,
+ private _dialog: MatDialog,
+ private _device: DeviceService,
+ private _notification: NotificationService,
+ private _chartOptions: ChartOptions,
+ ) {
+ }
+
+ ngOnInit(): void {
+ this.deviceIp = this._route.snapshot.paramMap.get('deviceIp') || '';
+ this.linkName = this._route.snapshot.paramMap.get('linkName') || '';
+ this.getBasicMonitoringMetrics();
+ }
+
+ getBasicMonitoringMetrics(): void {
+ let payload = {agent_host: this.deviceIp, stat_name: 'historical_data', link_name: this.linkName, from: this.currentFrom, to: this.currentTo};
+ this._device.getLLBMonitoringMetrics(payload)
+ .pipe(take(1))
+ .subscribe({
+ next: (result: any) => {
+ let data = result?.data;
+ const factor: any = 1024 * 1024;
+ const sent_data_formatted: any = data.map((d: any) => [d.ts, d.avg_bandwid_out / factor]);
+ const received_data_formatted: any = data.map((d: any) => [d.ts, d.avg_bandwid_in / factor]);
+ const hits_data_formatted: any = data.map((d: any) => [d.ts, d.avg_link_hits]);
+ const connections_data_formatted: any = data.map((d: any) => [d.ts, d.avg_link_conn]);
+ const usage_data_formatted: any = data.map((d: any) => [d.ts, d.avg_link_usage / factor]);
+
+ this.throughputChartOptions = this._chartOptions.historicalThroughputChartOptions(sent_data_formatted, received_data_formatted)
+ this.hitsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Hits', unit: '#'}, hits_data_formatted);
+ this.connectionsChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Connections', unit: '#'}, connections_data_formatted);
+ this.bandwidthChartOptions = this._chartOptions.plotSingleLineChartOptions({label: 'Usage (Mbps)', unit: '#'}, usage_data_formatted);
+ },
+ error: (error: { message: string; }) => {
+ console.log(error);
+ this._notification.showError(error.message);
+ }
+ });
+ }
+
+ navigateMonitoringDevices() {
+ this._router.navigate(['/monitoring/resources'], {state: {}});
+ }
+
+ openTimeFilterDialog(): void {
+ const dialogRef = this._dialog.open(TimeFilter, {
+ width: '600px',
+ data: {
+ initialFrom: this.currentFrom,
+ initialTo: this.currentTo,
+ initialInterval: this.currentInterval
+ }
+ });
+
+ dialogRef.componentInstance.applyRange.subscribe((result: TimeRange) => {
+ if (result) {
+ this.currentFrom = result.from;
+ this.currentTo = result.to;
+ this.currentInterval = result.interval || 10;
+ this.getBasicMonitoringMetrics()
+ }
+ });
+
+ dialogRef.afterClosed().subscribe(() => {});
+ }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.html (revision 2730)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.html (working copy)
@@ -10,50 +10,55 @@
| Service Name |
- {{ element?.name }}
+ {{ element?.service_name }}
|
Gateway IP |
- {{ element?.device_group }} |
+ {{ element?.link_gateway }} |
Device IP |
- {{ element }} |
+ {{ element?.agent_host }} |
Health Status |
- @if (element?.snmp_general?.snmp_enable) {
+ @if (element?.link_status) {
-
+
} @else {
-
+
}
|
Device Name |
- |
+ {{element?.device_name}} |
-
- Device Group |
- |
-
Bandwidth Usage |
- |
+ {{element?.avg_link_usage | bytesPerSec}} |
Connections |
- |
+ {{element?.avg_link_conn}} |
Throughput |
- |
+
+
+
+
+ {{element.avg_bandwid_in | bytesPerSec}}
+
+
+
+ {{element.avg_bandwid_out | bytesPerSec}}
+ |
|
|
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.ts (revision 2730)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-llb/resource-monitoring-llb.ts (working copy)
@@ -7,10 +7,12 @@
import {take} from 'rxjs/operators';
import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
import {SystemService} from '../../../services/system-service';
+import {BytesPerSecPipe} from '../../../pipes/bytes-per-sec-pipe';
+import {Router} from '@angular/router';
@Component({
selector: 'app-resource-monitoring-llb',
- imports: [SharedModule, GlobalSerialPipe],
+ imports: [SharedModule, GlobalSerialPipe, BytesPerSecPipe],
templateUrl: './resource-monitoring-llb.html',
styleUrl: './resource-monitoring-llb.scss'
})
@@ -25,8 +27,8 @@
constructor(
private _device: DeviceService,
- private _system: SystemService,
private _notification: NotificationService,
+ private _router: Router,
) {
}
@@ -48,7 +50,7 @@
this.groups = data.groups;
this.devices.forEach((device: any) => {
if ((device?.type.toLowerCase() === 'apv' || device?.type.toLowerCase() === 'vapv') && device?.connection) {
- devices.push(device?.ip);
+ devices.push(device);
}
})
this.getLLBMonitoringMetrics(devices);
@@ -65,9 +67,7 @@
.pipe(take(1))
.subscribe({
next: (result: any) => {
- console.log(result);
- // let llbMetrics = this._device.mapDeviceDetails([device], result);
- // console.log(llbMetrics);
+ this.dataSource.data = this._device.mapDeviceDetails(devices, result?.data);
},
error: (error: { message: string; }) => {
console.log(error);
@@ -76,6 +76,7 @@
});
}
- goToDetails(_service: any) {
+ goToDetails(_link: any) {
+ this._router.navigate(['/monitoring/resources/llb', _link.agent_host, _link?.link_name], {state: {}});
}
}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.html (revision 2730)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.html (working copy)
@@ -55,11 +55,11 @@
Sent:
- {{element?.last_out_bps | bytes}}
+ {{element?.last_out | bytesPerSec}}
Received:
- {{element?.last_in_bps | bytes}}
+ {{element?.last_in | bytesPerSec}}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.ts (revision 2730)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-real/resource-monitoring-slb-real.ts (working copy)
@@ -8,11 +8,11 @@
import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
import {Router} from '@angular/router';
import {UtilsService} from '../../../services/utils-service';
-import {BytesPipe} from '../../../pipes/bytes-pipe';
+import {BytesPerSecPipe} from '../../../pipes/bytes-per-sec-pipe';
@Component({
selector: 'app-resource-monitoring-slb-real',
- imports: [SharedModule, GlobalSerialPipe, BytesPipe],
+ imports: [SharedModule, GlobalSerialPipe, BytesPerSecPipe],
templateUrl: './resource-monitoring-slb-real.html',
styleUrl: './resource-monitoring-slb-real.scss'
})
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.html
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.html (revision 2730)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.html (working copy)
@@ -53,11 +53,11 @@
Sent:
- {{element?.last_out_bps}}
+ {{element?.last_out | bytesPerSec}}
Received:
- {{element?.last_in_bps}}
+ {{element?.last_in | bytesPerSec}}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.ts (revision 2730)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/resource-monitoring-slb-virtual/resource-monitoring-slb-virtual.ts (working copy)
@@ -8,10 +8,11 @@
import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe';
import {Router} from '@angular/router';
import {UtilsService} from '../../../services/utils-service';
+import {BytesPerSecPipe} from '../../../pipes/bytes-per-sec-pipe';
@Component({
selector: 'app-resource-monitoring-slb-virtual',
- imports: [SharedModule, GlobalSerialPipe],
+ imports: [SharedModule, GlobalSerialPipe, BytesPerSecPipe],
templateUrl: './resource-monitoring-slb-virtual.html',
styleUrl: './resource-monitoring-slb-virtual.scss'
})
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/bytes-per-sec-pipe.spec.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/bytes-per-sec-pipe.spec.ts (nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/bytes-per-sec-pipe.spec.ts (working copy)
@@ -0,0 +1,8 @@
+import { BytesPerSecPipe } from './bytes-per-sec-pipe';
+
+describe('BytesPerSecPipe', () => {
+ it('create an instance', () => {
+ const pipe = new BytesPerSecPipe();
+ expect(pipe).toBeTruthy();
+ });
+});
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/bytes-per-sec-pipe.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/bytes-per-sec-pipe.ts (nonexistent)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/bytes-per-sec-pipe.ts (working copy)
@@ -0,0 +1,27 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+ name: 'bytesPerSec'
+})
+export class BytesPerSecPipe implements PipeTransform {
+
+ private readonly units = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps'];
+
+ transform(bytesPerSec: number | null, precision: number = 2): string {
+ if (bytesPerSec === null || bytesPerSec === 0) {
+ return '0 bps';
+ }
+
+ if (isNaN(bytesPerSec) || !isFinite(bytesPerSec)) {
+ return 'Invalid value';
+ }
+
+ const unitIndex = Math.floor(Math.log(bytesPerSec) / Math.log(1024));
+
+ const safeIndex = Math.min(unitIndex, this.units.length - 1);
+
+ const convertedValue = bytesPerSec / Math.pow(1024, safeIndex);
+
+ return `${convertedValue.toFixed(precision)} ${this.units[safeIndex]}`;
+ }
+}
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/llb_stats.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/llb_stats.py (revision 2730)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/controller/llb_stats.py (working copy)
@@ -65,7 +65,7 @@
time_from = req.get("from", None)
time_to = req.get("to", None)
- interval = req.get("interval", None)
+ interval = req.get("interval", "20s")
link_name = req.get("link_name", None)
if time_from is None:
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/llb_stats_queries.py
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/llb_stats_queries.py (revision 2730)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/hive/db/llb_stats_queries.py (working copy)
@@ -14,8 +14,6 @@
"""
Returns the latest LLB stats data over the last interval (default 20s)
"""
- andebug('an.model.cli', 'Inside get_llb_stats_data')
-
query = f"""
SELECT
agent_host,
@@ -42,10 +40,7 @@
"""
req = {"query": query}
- andebug('an.model.cli', f'query : {query}')
response = DBClient.execute_query(req)
- andebug('an.model.cli', f'response : {response}')
- andebug('an.model.cli', f'response data : {response["data"]}')
field_casts = {
"link_thresh": int,
@@ -56,13 +51,11 @@
"link_hits": int,
}
response["data"] = cast_fields(response["data"], field_casts)
- andebug('an.model.cli', f'response data after cast: {response["data"]}')
return response
@staticmethod
def get_top_hits(agent_host, time_from, time_to):
- andebug('an.model.cli', 'Inside get_top_hits')
query = f"""
SELECT
COALESCE((MAX(link_hits) - MIN(link_hits))::bigint, 0) AS hits,
@@ -79,10 +72,7 @@
ORDER BY hits DESC
LIMIT 5;
"""
- andebug('an.model.cli', f'query: {query}')
response = DBClient.execute_query({"query": query})
- andebug('an.model.cli', f'response: {response}')
- andebug('an.model.cli', f'response data: {response["data"]}')
field_casts = {
"hits": int
@@ -93,7 +83,6 @@
@staticmethod
def get_top_conn(agent_host, time_from, time_to):
- andebug('an.model.cli', 'Inside get_top_conn')
query = f"""
SELECT sub.conn, sub.link_name, sub.agent_host
FROM (
@@ -115,16 +104,12 @@
LIMIT 5;
"""
- andebug('an.model.cli', f'query: {query}')
response = DBClient.execute_query({"query": query})
- andebug('an.model.cli', f'response: {response}')
- andebug('an.model.cli', f'response data: {response["data"]}')
field_casts = {
"conn": int
}
response["data"] = cast_fields(response["data"], field_casts)
- andebug('an.model.cli', f'response data after cast: {response["data"]}')
return response
@@ -176,11 +161,29 @@
agent_host,
link_name,
link_status,
- COALESCE(ROUND(AVG(link_bandwid_in)::numeric, 2), 0) AS avg_bandwid_in,
- COALESCE(ROUND(AVG(link_bandwid_out)::numeric, 2), 0) AS avg_bandwid_out,
- COALESCE(ROUND(AVG(link_usage)::numeric, 2), 0) AS avg_link_usage,
- COALESCE(ROUND(AVG(link_conn)::numeric, 2), 0) AS avg_link_conn,
- COALESCE(ROUND(AVG(link_hits)::numeric, 2), 0) AS avg_link_hits
+ COALESCE(CAST(AVG(link_hits) AS bigint), 0) AS avg_link_hits,
+ COALESCE(CAST(AVG(link_conn) AS bigint), 0) AS avg_link_conn,
+ COALESCE(
+ ROUND(
+ AVG(
+ REGEXP_REPLACE(link_bandwid_in::text, '[^0-9\\.]+', '', 'g')::numeric * 8
+ ),
+ 2), 0
+ ) AS avg_bandwid_in,
+ COALESCE(
+ ROUND(
+ AVG(
+ REGEXP_REPLACE(link_bandwid_out::text, '[^0-9\\.]+', '', 'g')::numeric * 8
+ ),
+ 2), 0
+ ) AS avg_bandwid_out,
+ COALESCE(
+ ROUND(
+ AVG(
+ REGEXP_REPLACE(link_usage::text, '[^0-9\\.]+', '', 'g')::numeric
+ ),
+ 2), 0
+ ) AS avg_link_usage
FROM apv_llb_stats
WHERE time >= {time_from}
AND time <= {time_to}
@@ -210,30 +213,53 @@
@staticmethod
def get_llb_summary_data(time_from, time_to):
- andebug('an.model.cli', 'Inside get_llb_summary_data')
"""
Returns LLB summary stats aggregated over the full time range.
"""
query = f"""
- SELECT
+ SELECT
+ agent_host,
link_name,
+ link_gateway,
+ link_status,
+ link_thresh,
COALESCE(CAST(AVG(link_hits) AS bigint), 0) AS avg_link_hits,
COALESCE(CAST(AVG(link_conn) AS bigint), 0) AS avg_link_conn,
- COALESCE(ROUND(AVG(link_bandwid_in * 8)::numeric, 2), 0) AS avg_bandwid_in,
- COALESCE(ROUND(AVG(link_bandwid_out * 8)::numeric, 2), 0) AS avg_bandwid_out,
- COALESCE(ROUND(AVG(link_usage)::numeric, 2), 0) AS avg_link_usage
+ COALESCE(
+ ROUND(
+ AVG(
+ REGEXP_REPLACE(link_bandwid_in::text, '[^0-9\\.]+', '', 'g')::numeric * 8
+ ),
+ 2), 0
+ ) AS avg_bandwid_in,
+ COALESCE(
+ ROUND(
+ AVG(
+ REGEXP_REPLACE(link_bandwid_out::text, '[^0-9\\.]+', '', 'g')::numeric * 8
+ ),
+ 2), 0
+ ) AS avg_bandwid_out,
+ COALESCE(
+ ROUND(
+ AVG(
+ REGEXP_REPLACE(link_usage::text, '[^0-9\\.]+', '', 'g')::numeric
+ ),
+ 2), 0
+ ) AS avg_link_usage
FROM apv_llb_stats
- WHERE time >= {time_from}
- AND time <= {time_to}
- GROUP BY link_name
+ WHERE
+ time >= {time_from}
+ AND time <= {time_to}
+ GROUP BY
+ agent_host,
+ link_name,
+ link_gateway,
+ link_status,
+ link_thresh
ORDER BY link_name;
"""
-
req = {"query": query}
- andebug('an.model.cli', f'query: {query}')
response = DBClient.execute_query(req)
- andebug('an.model.cli', f'response: {response}')
- andebug('an.model.cli', f'response data: {response["data"]}')
field_casts = {
"avg_link_hits": float,
@@ -243,5 +269,4 @@
"avg_link_usage": float
}
response["data"] = cast_fields(response["data"], field_casts)
- andebug('an.model.cli', f'response data after cast: {response["data"]}')
- return response
\ No newline at end of file
+ return response