Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts (revision 2698) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts (working copy) @@ -29,6 +29,7 @@ import {DeviceHaOverview} from './components/sub-components/device-ha-overview/device-ha-overview'; import {DeviceHa} from './components/device-ha/device-ha'; import {Topology} from './components/topology/topology'; +import {Observability} from './components/observability/observability'; export const routes: Routes = [ @@ -187,6 +188,7 @@ }, ] }, + {path: 'observability', component: Observability, data: {roles: ['super_admin', 'device_admin', 'common_admin']}}, {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, // {path: '**', redirectTo: 'dashboard'} ] Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/dashboard/dashboard.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/dashboard/dashboard.html (revision 2698) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/dashboard/dashboard.html (working copy) @@ -1 +1,18 @@ -

dashboard works!

+
+ + + +
+ +
+ + + + +
+ +
+ + + +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/dashboard/dashboard.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/dashboard/dashboard.ts (revision 2698) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/dashboard/dashboard.ts (working copy) @@ -1,11 +1,56 @@ -import { Component } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {SharedModule} from '../../shared/shared-module'; +import {ActivatedRoute, Router} from '@angular/router'; +import {MatTabChangeEvent} from '@angular/material/tabs'; +import {DashboardSystemInsights} from '../sub-components/dashboard-system-insights/dashboard-system-insights'; +import {DashboardDeviceInsights} from '../sub-components/dashboard-device-insights/dashboard-device-insights'; @Component({ selector: 'app-dashboard', - imports: [], + imports: [SharedModule, DashboardSystemInsights, DashboardDeviceInsights], templateUrl: './dashboard.html', styleUrl: './dashboard.scss' }) -export class Dashboard { +export class Dashboard implements OnInit { + selectedTabIndex: number = 0; + private tabNames: string[] = [ + 'System', + 'Devices & Services Overview', + ]; + + constructor(private _route: ActivatedRoute, private _router: Router) { + } + + ngOnInit(): void { + this._route.queryParams.subscribe(params => { + const tabParam = params['tab']; + if (tabParam) { + const index = this.tabNames.indexOf(tabParam); + if (index !== -1) { + this.selectedTabIndex = index; + } else { + this.selectedTabIndex = 0; + } + } else { + this.updateQueryParams(this.selectedTabIndex); + } + }); + } + + onTabChange(event: MatTabChangeEvent): void { + this.selectedTabIndex = event.index; + this.updateQueryParams(event.index); + } + + private updateQueryParams(tabIndex: number): void { + const tabName = this.tabNames[tabIndex]; + if (tabName) { + this._router.navigate([], { + relativeTo: this._route, + queryParams: {tab: tabName}, + queryParamsHandling: 'merge' + }); + } + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.html (revision 2698) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.html (working copy) @@ -1 +1,45 @@ -

observability works!

+ + + Services Status + + +
+ +
+
+ Visit Opensearch Dashboard - Logs Dashboard +
+
+
+ + + + + + + + + + + + + + + + + + +
ID {{ i + 1 }}Service Name{{ element?.name }}Status +
+ @if (element?.status === 'active') { + + } @else { + + } +
+
No results found.
+
+
+ + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.scss (revision 2698) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.scss (working copy) @@ -0,0 +1,20 @@ +.page-card-1 { + width: 100%; + border-radius: 0; + background-color: inherit; + font-size: 14px !important; + mat-card-header { + color: #1170cf; + } +} + +mat-card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4px 10px; +} + +mat-card-title { + font-size: medium; +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.ts (revision 2698) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/observability/observability.ts (working copy) @@ -1,11 +1,81 @@ -import { Component } from '@angular/core'; +import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core'; +import {SharedModule} from '../../shared/shared-module'; +import {MatTableDataSource} from '@angular/material/table'; +import {SystemService} from '../../services/system-service'; +import {NotificationService} from '../../services/notification'; +import {Confirmation} from '../../services/confirmation'; +import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog'; +import {FormBuilder, FormGroup} from '@angular/forms'; @Component({ selector: 'app-observability', - imports: [], + imports: [SharedModule], templateUrl: './observability.html', styleUrl: './observability.scss' }) -export class Observability { +export class Observability implements OnInit { + dataColumns = ['serial', 'name', 'status']; + dataSource = new MatTableDataSource([]); + dialog = inject(MatDialog); + dialogConfig = new MatDialogConfig(); + + constructor( + private _system: SystemService, + private _notification: NotificationService, + private _cdRef: ChangeDetectorRef, + private _confirmation: Confirmation + ) { + } + + ngOnInit() { + } + + updateLogSettings() { + // ToDo: Get the current log settings - keep original msg or not. + this.dialogConfig.data = { + enable: false + } + const dialogRef = this.dialog.open(UpdateLogSettings, this.dialogConfig); + dialogRef.afterClosed().subscribe((isAdded: boolean) => { + }) + } + + openSearchDashboard() { + // ToDo: Route to OpenSearch Dashboard. + } } + +@Component({ + selector: 'update-log-settings', + templateUrl: './update-log-settings.html', + imports: [SharedModule] +}) +export class UpdateLogSettings implements OnInit { + + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + configForm!: FormGroup; + + constructor( + private _fb: FormBuilder, + ) { + this.configForm = this._fb.group({ + enable: [false], + }) + } + + ngOnInit() { + this.configForm.patchValue({ + enable: this.data?.enable, + }) + } + + onSubmit() { + // ToDo: Update the logic to update the log settings to keep the original log message. + } + + onCancel() { + this.dialogRef.close(); + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.html (working copy) @@ -0,0 +1,39 @@ +
+ + + +
+ +
+ + + + +
+ +
+ + + + + + + + + + + +
+ +
+ + + + +
+ +
+ + + +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss (added) =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss (revision 0) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss (revision 0) Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.spec.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.spec.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.spec.ts (working copy) @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardDeviceInsights } from './dashboard-device-insights'; + +describe('DashboardDeviceInsights', () => { + let component: DashboardDeviceInsights; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DashboardDeviceInsights] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardDeviceInsights); + 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/dashboard-device-insights/dashboard-device-insights.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.ts (working copy) @@ -0,0 +1,61 @@ +import {Component, OnInit} from '@angular/core'; +import {SharedModule} from '../../../shared/shared-module'; +import {ActivatedRoute, Router} from '@angular/router'; +import {MatTabChangeEvent} from '@angular/material/tabs'; +import {DashboardInsightsDevices} from '../dashboard-insights-devices/dashboard-insights-devices'; +import {DashboardInsightsApv} from '../dashboard-insights-apv/dashboard-insights-apv'; +import {DashboardInsightsSslvpn} from '../dashboard-insights-sslvpn/dashboard-insights-sslvpn'; +import {DashboardInsightsAvx} from '../dashboard-insights-avx/dashboard-insights-avx'; + +@Component({ + selector: 'app-dashboard-device-insights', + imports: [SharedModule, DashboardInsightsDevices, DashboardInsightsApv, DashboardInsightsSslvpn, DashboardInsightsAvx], + templateUrl: './dashboard-device-insights.html', + styleUrl: './dashboard-device-insights.scss' +}) +export class DashboardDeviceInsights implements OnInit { + + selectedTabIndex: number = 0; + private tabNames: string[] = [ + 'Devices', + 'APV', + // 'ASF', + 'SSL VPN', + 'AVX', + ]; + + constructor(private _route: ActivatedRoute, private _router: Router) { + } + + ngOnInit(): void { + this._route.queryParams.subscribe(params => { + const tabParam = params['subTab']; + if (tabParam) { + const index = this.tabNames.indexOf(tabParam); + if (index !== -1) { + this.selectedTabIndex = index; + } else { + this.selectedTabIndex = 0; + } + } else { + this.updateQueryParams(this.selectedTabIndex); + } + }); + } + + onTabChange(event: MatTabChangeEvent): void { + this.selectedTabIndex = event.index; + this.updateQueryParams(event.index); + } + + private updateQueryParams(tabIndex: number): void { + const tabName = this.tabNames[tabIndex]; + if (tabName) { + this._router.navigate([], { + relativeTo: this._route, + queryParams: {subTab: tabName}, + queryParamsHandling: 'merge' + }); + } + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.html (working copy) @@ -0,0 +1,153 @@ + + + SLB - Virtual Services + + + + + + +
+ + Hits - Top 5 + +
+
+
+
+ + + + + + +
+ + Open Connections - Top 5 + +
+
+
+
+ + + + + + +
+ + Throughput - Top 5 + +
+
+
+
+ + + + + + + + + SLB - Real Services + + + + + + +
+ + Hits - Top 5 + +
+
+
+
+ + + + + + +
+ + Open Connections - Top 5 + +
+
+
+
+ + + + + + +
+ + Throughput - Top 5 + +
+
+
+
+ + + + + + + + + LLB + + + + + + +
+ + Hits - Top 5 + +
+
+
+
+ + + + + + +
+ + Open Connections - Top 5 + +
+
+
+
+ + + + + + +
+ + Throughput - Top 5 + +
+
+
+
+ + + + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.scss (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.scss (working copy) @@ -0,0 +1,177 @@ +/* dashboard-metric-card.component.css */ +.dashboard-card { + width: 100%; + height: 100%; + border-radius: 8px; + background-color: inherit; +} + +.card-content-wrapper { + margin-top: 2px; + padding: 0 !important; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +.card-header-row { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 8px; + padding: 0 8px; +} + +.metric-icon { + color: #3f51b5; +} + +.card-title { + font-size: 18px; + font-weight: 500; + color: #555; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.metric-value { + display: flex; + justify-content: center; + align-items: flex-end; + line-height: 1; +} + +.metric-label { + display: flex; + justify-content: center; + align-items: flex-end; + font-size: 0.9rem; + color: #777; + margin-top: 5px; +} + +.online-count { + font-size: 36px; + font-weight: 600; + color: #333; +} + +.total-count { + font-size: 18px; + font-weight: 500; + color: #888; + margin-left: 4px; +} + +.status-details { + font-size: 14px; + color: #d32f2f; + margin: 0; + font-weight: 500; + text-align: center; +} + +.active, +.matrics-icon { + color: darkgreen; +} + +/* Updated CSS for horizontal chart layout */ +.chart-flex-container { + display: flex; + justify-content: space-around; + align-items: center; + height: 100%; + width: 100%; + flex-grow: 1; +} + +.chart-container { + width: 100%; + height: 100%; + max-width: none; /* Remove any max-width constraints */ + max-height: none; /* Remove any max-height constraints */ +} + +/* Adjustments for multiple charts */ +.chart-flex-container .chart-container { + width: 100%; + height: 100%; +} + +mat-grid-list { + height: 100%; + width: 100%; +} + +/* The original vertical layout for metrics */ +.metrics-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +/* Container to center content vertically and horizontally */ +.card-body-content { + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; +} + +/* New CSS for the metrics block */ +.metrics-horizontal-container { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + width: 100%; +} + +.metric-item { + text-align: center; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.metric-value { + font-size: 1rem; + font-weight: 500; + color: #333; +} + +.metric-label { + font-size: 0.9rem; + color: #777; + text-transform: uppercase; + margin-top: 5px; +} + +.page-card-1 { + width: 100%; + border-radius: 0; + background-color: inherit; + font-size: 14px !important; + mat-card-header { + color: #1170cf; + } +} + +mat-card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4px 10px; +} + +mat-card-title { + font-size: medium; +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.spec.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.spec.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.spec.ts (working copy) @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardInsightsApv } from './dashboard-insights-apv'; + +describe('DashboardInsightsApv', () => { + let component: DashboardInsightsApv; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DashboardInsightsApv] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardInsightsApv); + 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/dashboard-insights-apv/dashboard-insights-apv.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-apv/dashboard-insights-apv.ts (working copy) @@ -0,0 +1,421 @@ +import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core'; +import {FaIconComponent} from "@fortawesome/angular-fontawesome"; +import {MatCard, MatCardContent, MatCardTitle} from "@angular/material/card"; +import {MatGridList, MatGridTile} from "@angular/material/grid-list"; +import {NgxEchartsDirective} from "ngx-echarts"; +import {SharedModule} from '../../../shared/shared-module'; +import {EChartsOption} from 'echarts'; + +@Component({ + selector: 'app-dashboard-insights-apv', + imports: [ + SharedModule + ], + templateUrl: './dashboard-insights-apv.html', + styleUrl: './dashboard-insights-apv.scss' +}) +export class DashboardInsightsApv implements OnInit, OnChanges { + + chartOption1: EChartsOption = {}; + chartOption2: EChartsOption = {}; + chartOption3: EChartsOption = {}; + chartOption4: EChartsOption = {}; + chartOption5: EChartsOption = {}; + chartOption6: EChartsOption = {}; + chartOption7: EChartsOption = {}; + chartOption8: EChartsOption = {}; + chartOption9: EChartsOption = {}; + + ngOnInit(): void { + this.updateChartOption(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes['cpuUsagePercentage']) { + this.updateChartOption(); + } + } + + private updateChartOption() { + let _vdata: any = { + hits: [ + {name: 'vs1', value: 60}, + {name: 'vs2', value: 50}, + {name: 'vs3', value: 44}, + {name: 'vs4', value: 40}, + {name: 'vs5', value: 35} + ], + connections: [ + {name: 'vs1', value: 40}, + {name: 'vs2', value: 50}, + {name: 'vs3', value: 64}, + {name: 'vs4', value: 40}, + {name: 'vs5', value: 35} + ], + throughput: [ + {name: 'vs1', inbound: 10, outbound: 20}, + {name: 'vs2', inbound: 20, outbound: 5}, + {name: 'vs3', inbound: 10, outbound: 8}, + {name: 'vs4', inbound: 7, outbound: 12}, + {name: 'vs5', inbound: 8, outbound: 11}, + ] + } + let _rdata: any = { + hits: [ + {name: 'rs1', value: 60}, + {name: 'rs2', value: 50}, + {name: 'rs3', value: 44}, + {name: 'rs4', value: 40}, + {name: 'rs5', value: 35} + ], + connections: [ + {name: 'rs1', value: 40}, + {name: 'rs2', value: 50}, + {name: 'rs3', value: 64}, + {name: 'rs4', value: 40}, + {name: 'rs5', value: 35} + ], + throughput: [ + {name: 'rs1', inbound: 10, outbound: 20}, + {name: 'rs2', inbound: 20, outbound: 5}, + {name: 'rs3', inbound: 10, outbound: 8}, + {name: 'rs4', inbound: 7, outbound: 12}, + {name: 'rs5', inbound: 8, outbound: 11}, + ] + } + let _ldata: any = { + hits: [ + {name: 'llb1', value: 60}, + {name: 'llb2', value: 50}, + {name: 'llb3', value: 44}, + {name: 'llb4', value: 40}, + {name: 'llb5', value: 35} + ], + connections: [ + {name: 'llb1', value: 40}, + {name: 'llb2', value: 50}, + {name: 'llb3', value: 64}, + {name: 'llb4', value: 40}, + {name: 'llb5', value: 35} + ], + throughput: [ + {name: 'llb1', inbound: 10, outbound: 20}, + {name: 'llb2', inbound: 20, outbound: 5}, + {name: 'llb3', inbound: 10, outbound: 8}, + {name: 'llb4', inbound: 7, outbound: 12}, + {name: 'llb5', inbound: 8, outbound: 11}, + ] + } + _rdata?.hits.sort((a: any, b: any) => b.value - a.value); + _rdata?.connections.sort((a: any, b: any) => b.value - a.value); + _rdata?.throughput.sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound)); + const sortedRNames = _rdata?.throughput.map((item: any) => item.name); + const sortedRInbound = _rdata?.throughput.map((item: any) => item.inbound); + const sortedROutbound = _rdata?.throughput.map((item: any) => item.outbound); + + _vdata?.hits.sort((a: any, b: any) => b.value - a.value); + _vdata?.connections.sort((a: any, b: any) => b.value - a.value); + _vdata?.throughput.sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound)); + const sortedVNames = _vdata?.throughput.map((item: any) => item.name); + const sortedVInbound = _vdata?.throughput.map((item: any) => item.inbound); + const sortedVOutbound = _vdata?.throughput.map((item: any) => item.outbound); + + _ldata?.hits.sort((a: any, b: any) => b.value - a.value); + _ldata?.connections.sort((a: any, b: any) => b.value - a.value); + _ldata?.throughput.sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound)); + const sortedLNames = _ldata?.throughput.map((item: any) => item.name); + const sortedLInbound = _ldata?.throughput.map((item: any) => item.inbound); + const sortedLOutbound = _ldata?.throughput.map((item: any) => item.outbound); + + this.chartOption1 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _vdata?.hits.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Hits', + type: 'bar', + data: _vdata?.hits.map((item: any) => item?.value) + } + ] + }; + + this.chartOption2 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _vdata?.connections.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Connections', + type: 'bar', + data: _vdata?.connections.map((item: any) => item?.value) + } + ] + }; + + this.chartOption3 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + legend: { + bottom: 'bottom' + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01] + }, + yAxis: { + type: 'category', + data: sortedVNames, + inverse: true + }, + series: [ + { + name: 'Inbound', + type: 'bar', + data: sortedVInbound + }, + { + name: 'Outbound', + type: 'bar', + data: sortedVOutbound + } + ] + }; + + this.chartOption4 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _rdata?.hits.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Hits', + type: 'bar', + data: _rdata?.hits.map((item: any) => item?.value) + } + ] + }; + + this.chartOption5 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _rdata?.connections.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Connections', + type: 'bar', + data: _rdata?.connections.map((item: any) => item?.value) + } + ] + }; + + this.chartOption6 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + legend: { + bottom: 'bottom' + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01] + }, + yAxis: { + type: 'category', + data: sortedRNames, + inverse: true + }, + series: [ + { + name: 'Inbound', + type: 'bar', + data: sortedRInbound + }, + { + name: 'Outbound', + type: 'bar', + data: sortedROutbound + } + ] + }; + + this.chartOption7 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _ldata?.hits.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Hits', + type: 'bar', + data: _ldata?.hits.map((item: any) => item?.value) + } + ] + }; + + this.chartOption8 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _ldata?.connections.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Connections', + type: 'bar', + data: _ldata?.connections.map((item: any) => item?.value) + } + ] + }; + + this.chartOption9 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + legend: { + bottom: 'bottom' + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01] + }, + yAxis: { + type: 'category', + data: sortedLNames, + inverse: true + }, + series: [ + { + name: 'Inbound', + type: 'bar', + data: sortedLInbound + }, + { + name: 'Outbound', + type: 'bar', + data: sortedLOutbound + } + ] + }; + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.html (working copy) @@ -0,0 +1 @@ +

dashboard-insights-asf works!

Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.scss (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.scss (working copy) @@ -0,0 +1,156 @@ +/* dashboard-metric-card.component.css */ +.dashboard-card { + width: 100%; + height: 100%; + border-radius: 8px; + background-color: inherit; +} + +.card-content-wrapper { + margin-top: 2px; + padding: 0 !important; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +.card-header-row { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 8px; + padding: 0 8px; +} + +.metric-icon { + color: #3f51b5; +} + +.card-title { + font-size: 18px; + font-weight: 500; + color: #555; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.metric-value { + display: flex; + justify-content: center; + align-items: flex-end; + line-height: 1; +} + +.metric-label { + display: flex; + justify-content: center; + align-items: flex-end; + font-size: 0.9rem; + color: #777; + margin-top: 5px; +} + +.online-count { + font-size: 36px; + font-weight: 600; + color: #333; +} + +.total-count { + font-size: 18px; + font-weight: 500; + color: #888; + margin-left: 4px; +} + +.status-details { + font-size: 14px; + color: #d32f2f; + margin: 0; + font-weight: 500; + text-align: center; +} + +.active, +.matrics-icon { + color: darkgreen; +} + +/* Updated CSS for horizontal chart layout */ +.chart-flex-container { + display: flex; + justify-content: space-around; + align-items: center; + height: 100%; + width: 100%; + flex-grow: 1; +} + +.chart-container { + width: 100%; + height: 100%; + max-width: none; /* Remove any max-width constraints */ + max-height: none; /* Remove any max-height constraints */ +} + +/* Adjustments for multiple charts */ +.chart-flex-container .chart-container { + width: 100%; + height: 100%; +} + +mat-grid-list { + height: 100%; + width: 100%; +} + +/* The original vertical layout for metrics */ +.metrics-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +/* Container to center content vertically and horizontally */ +.card-body-content { + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; +} + +/* New CSS for the metrics block */ +.metrics-horizontal-container { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + width: 100%; +} + +.metric-item { + text-align: center; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.metric-value { + font-size: 1rem; + font-weight: 500; + color: #333; +} + +.metric-label { + font-size: 0.9rem; + color: #777; + text-transform: uppercase; + margin-top: 5px; +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.spec.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.spec.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.spec.ts (working copy) @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardInsightsAsf } from './dashboard-insights-asf'; + +describe('DashboardInsightsAsf', () => { + let component: DashboardInsightsAsf; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DashboardInsightsAsf] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardInsightsAsf); + 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/dashboard-insights-asf/dashboard-insights-asf.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-asf/dashboard-insights-asf.ts (working copy) @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-dashboard-insights-asf', + imports: [], + templateUrl: './dashboard-insights-asf.html', + styleUrl: './dashboard-insights-asf.scss' +}) +export class DashboardInsightsAsf { + +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.html (working copy) @@ -0,0 +1,58 @@ + + + + +
+ + CPU Usage - Top 5 + +
+
+
+
+ + + + + + +
+ + Memory Usage - Top 5 + +
+
+
+
+ + + + + + +
+ + Throughput - Top 5 + +
+
+
+
+ + + + + + +
+ + Connection Status + +
+
+
+
+ + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.scss (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.scss (working copy) @@ -0,0 +1,156 @@ +/* dashboard-metric-card.component.css */ +.dashboard-card { + width: 100%; + height: 100%; + border-radius: 8px; + background-color: inherit; +} + +.card-content-wrapper { + margin-top: 2px; + padding: 0 !important; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +.card-header-row { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 8px; + padding: 0 8px; +} + +.metric-icon { + color: #3f51b5; +} + +.card-title { + font-size: 18px; + font-weight: 500; + color: #555; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.metric-value { + display: flex; + justify-content: center; + align-items: flex-end; + line-height: 1; +} + +.metric-label { + display: flex; + justify-content: center; + align-items: flex-end; + font-size: 0.9rem; + color: #777; + margin-top: 5px; +} + +.online-count { + font-size: 36px; + font-weight: 600; + color: #333; +} + +.total-count { + font-size: 18px; + font-weight: 500; + color: #888; + margin-left: 4px; +} + +.status-details { + font-size: 14px; + color: #d32f2f; + margin: 0; + font-weight: 500; + text-align: center; +} + +.active, +.matrics-icon { + color: darkgreen; +} + +/* Updated CSS for horizontal chart layout */ +.chart-flex-container { + display: flex; + justify-content: space-around; + align-items: center; + height: 100%; + width: 100%; + flex-grow: 1; +} + +.chart-container { + width: 100%; + height: 100%; + max-width: none; /* Remove any max-width constraints */ + max-height: none; /* Remove any max-height constraints */ +} + +/* Adjustments for multiple charts */ +.chart-flex-container .chart-container { + width: 100%; + height: 100%; +} + +mat-grid-list { + height: 100%; + width: 100%; +} + +/* The original vertical layout for metrics */ +.metrics-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +/* Container to center content vertically and horizontally */ +.card-body-content { + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; +} + +/* New CSS for the metrics block */ +.metrics-horizontal-container { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + width: 100%; +} + +.metric-item { + text-align: center; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.metric-value { + font-size: 1rem; + font-weight: 500; + color: #333; +} + +.metric-label { + font-size: 0.9rem; + color: #777; + text-transform: uppercase; + margin-top: 5px; +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.spec.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.spec.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.spec.ts (working copy) @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardInsightsAvx } from './dashboard-insights-avx'; + +describe('DashboardInsightsAvx', () => { + let component: DashboardInsightsAvx; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DashboardInsightsAvx] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardInsightsAvx); + 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/dashboard-insights-avx/dashboard-insights-avx.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-avx/dashboard-insights-avx.ts (working copy) @@ -0,0 +1,171 @@ +import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core'; +import {SharedModule} from '../../../shared/shared-module'; +import {EChartsOption} from 'echarts'; + +@Component({ + selector: 'app-dashboard-insights-avx', + imports: [ + SharedModule + ], + templateUrl: './dashboard-insights-avx.html', + styleUrl: './dashboard-insights-avx.scss' +}) +export class DashboardInsightsAvx implements OnInit, OnChanges { + + chartOption1: EChartsOption = {}; + chartOption2: EChartsOption = {}; + chartOption3: EChartsOption = {}; + chartOption4: EChartsOption = {}; + + ngOnInit(): void { + this.updateChartOption(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes['cpuUsagePercentage']) { + this.updateChartOption(); + } + } + + private updateChartOption() { + let _data: any = { + cpu: [ + {name: 'AVX1', value: 60}, + {name: 'AVX2', value: 50}, + {name: 'AVX3', value: 44}, + ], + memory: [ + {name: 'AVX1', value: 40}, + {name: 'AVX2', value: 50}, + {name: 'AVX3', value: 64}, + ], + disk: [ + {name: 'AVX1', value: 10}, + {name: 'AVX2', value: 80}, + {name: 'AVX3', value: 10}, + ] + } + _data?.cpu.sort((a: any, b: any) => b.value - a.value); + _data?.memory.sort((a: any, b: any) => b.value - a.value); + _data?.disk.sort((a: any, b: any) => b.value - a.value); + + this.chartOption1 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _data?.cpu.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'CPU %', + type: 'bar', + data: _data?.cpu.map((item: any) => item?.value) + } + ] + }; + + this.chartOption2 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _data?.memory.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Memory %', + type: 'bar', + data: _data?.memory.map((item: any) => item?.value) + } + ] + }; + + this.chartOption3 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _data?.disk.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Disk %', + type: 'bar', + data: _data?.disk.map((item: any) => item?.value) + } + ] + }; + + this.chartOption4 = { + tooltip: { + trigger: 'item' + }, + legend: { + top: '5%', + left: 'center' + }, + series: [ + { + name: 'Devices Status', + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'bottom' + }, + labelLine: { + show: false + }, + data: [ + {value: 3, name: 'Connected', itemStyle: {color: '#4CAF50'}}, + {value: 1, name: 'Disconnected', itemStyle: {color: '#F44336'}} + ] + } + ] + } + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.html (working copy) @@ -0,0 +1,58 @@ + + + + +
+ + CPU Usage - Top 5 + +
+
+
+
+ + + + + + +
+ + Memory Usage - Top 5 + +
+
+
+
+ + + + + + +
+ + Throughput - Top 5 + +
+
+
+
+ + + + + + +
+ + Connection Status + +
+
+
+
+ + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.scss (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.scss (working copy) @@ -0,0 +1,156 @@ +/* dashboard-metric-card.component.css */ +.dashboard-card { + width: 100%; + height: 100%; + border-radius: 8px; + background-color: inherit; +} + +.card-content-wrapper { + margin-top: 2px; + padding: 0 !important; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +.card-header-row { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 8px; + padding: 0 8px; +} + +.metric-icon { + color: #3f51b5; +} + +.card-title { + font-size: 18px; + font-weight: 500; + color: #555; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.metric-value { + display: flex; + justify-content: center; + align-items: flex-end; + line-height: 1; +} + +.metric-label { + display: flex; + justify-content: center; + align-items: flex-end; + font-size: 0.9rem; + color: #777; + margin-top: 5px; +} + +.online-count { + font-size: 36px; + font-weight: 600; + color: #333; +} + +.total-count { + font-size: 18px; + font-weight: 500; + color: #888; + margin-left: 4px; +} + +.status-details { + font-size: 14px; + color: #d32f2f; + margin: 0; + font-weight: 500; + text-align: center; +} + +.active, +.matrics-icon { + color: darkgreen; +} + +/* Updated CSS for horizontal chart layout */ +.chart-flex-container { + display: flex; + justify-content: space-around; + align-items: center; + height: 100%; + width: 100%; + flex-grow: 1; +} + +.chart-container { + width: 100%; + height: 100%; + max-width: none; /* Remove any max-width constraints */ + max-height: none; /* Remove any max-height constraints */ +} + +/* Adjustments for multiple charts */ +.chart-flex-container .chart-container { + width: 100%; + height: 100%; +} + +mat-grid-list { + height: 100%; + width: 100%; +} + +/* The original vertical layout for metrics */ +.metrics-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +/* Container to center content vertically and horizontally */ +.card-body-content { + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; +} + +/* New CSS for the metrics block */ +.metrics-horizontal-container { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + width: 100%; +} + +.metric-item { + text-align: center; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.metric-value { + font-size: 1rem; + font-weight: 500; + color: #333; +} + +.metric-label { + font-size: 0.9rem; + color: #777; + text-transform: uppercase; + margin-top: 5px; +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.spec.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.spec.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.spec.ts (working copy) @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardInsightsDevices } from './dashboard-insights-devices'; + +describe('DashboardInsightsDevices', () => { + let component: DashboardInsightsDevices; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DashboardInsightsDevices] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardInsightsDevices); + 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/dashboard-insights-devices/dashboard-insights-devices.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-devices/dashboard-insights-devices.ts (working copy) @@ -0,0 +1,184 @@ +import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core'; +import {EChartsOption} from 'echarts'; +import {SharedModule} from '../../../shared/shared-module'; + +@Component({ + selector: 'app-dashboard-insights-devices', + imports: [ + SharedModule + ], + templateUrl: './dashboard-insights-devices.html', + styleUrl: './dashboard-insights-devices.scss' +}) +export class DashboardInsightsDevices implements OnInit, OnChanges { + + chartOption1: EChartsOption = {}; + chartOption2: EChartsOption = {}; + chartOption3: EChartsOption = {}; + chartOption4: EChartsOption = {}; + + ngOnInit(): void { + this.updateChartOption(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes['cpuUsagePercentage']) { + this.updateChartOption(); + } + } + + private updateChartOption() { + let _data: any = { + cpu: [ + {name: 'APV1', value: 60}, + {name: 'vAPV3', value: 50}, + {name: 'vAPV2', value: 44}, + {name: 'vASF1', value: 40}, + {name: 'vxAG2', value: 35} + ], + memory: [ + {name: 'APV1', value: 40}, + {name: 'vAPV3', value: 50}, + {name: 'vAPV2', value: 64}, + {name: 'vASF1', value: 40}, + {name: 'vxAG2', value: 35} + ], + throughput: [ + {name: 'APV1', inbound: 10, outbound: 20}, + {name: 'vASF1', inbound: 20, outbound: 5}, + {name: 'vxAG2', inbound: 10, outbound: 8}, + {name: 'vAPV3', inbound: 7, outbound: 12}, + {name: 'vAPV2', inbound: 8, outbound: 11}, + ] + } + _data?.cpu.sort((a: any, b: any) => b.value - a.value); + _data?.memory.sort((a: any, b: any) => b.value - a.value); + _data?.throughput.sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound)); + const sortedNames = _data?.throughput.map((item: any) => item.name); + const sortedInbound = _data?.throughput.map((item: any) => item.inbound); + const sortedOutbound = _data?.throughput.map((item: any) => item.outbound); + + this.chartOption1 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _data?.cpu.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'CPU %', + type: 'bar', + data: _data?.cpu.map((item: any) => item?.value) + } + ] + }; + + this.chartOption2 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _data?.memory.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Memory %', + type: 'bar', + data: _data?.memory.map((item: any) => item?.value) + } + ] + }; + + this.chartOption3 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01] + }, + yAxis: { + type: 'category', + data: sortedNames, + inverse: true + }, + series: [ + { + name: 'Inbound', + type: 'bar', + data: sortedInbound + }, + { + name: 'Outbound', + type: 'bar', + data: sortedOutbound + } + ] + }; + + this.chartOption4 = { + tooltip: { + trigger: 'item' + }, + legend: { + top: '5%', + left: 'center' + }, + series: [ + { + name: 'Devices Status', + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'bottom' + }, + labelLine: { + show: false + }, + data: [ + {value: 10, name: 'Connected', itemStyle: {color: '#4CAF50'}}, + {value: 1, name: 'Disconnected', itemStyle: {color: '#F44336'}} + ] + } + ] + } + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.html (working copy) @@ -0,0 +1,44 @@ + + + + +
+ + Sessions - Top 5 + +
+
+
+
+ + + + + + +
+ + Client Throughput - Top 5 + +
+
+
+
+ + + + + + +
+ + Server Throughput - Top 5 + +
+
+
+
+ + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.scss (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.scss (working copy) @@ -0,0 +1,156 @@ +/* dashboard-metric-card.component.css */ +.dashboard-card { + width: 100%; + height: 100%; + border-radius: 8px; + background-color: inherit; +} + +.card-content-wrapper { + margin-top: 2px; + padding: 0 !important; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +.card-header-row { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 8px; + padding: 0 8px; +} + +.metric-icon { + color: #3f51b5; +} + +.card-title { + font-size: 18px; + font-weight: 500; + color: #555; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.metric-value { + display: flex; + justify-content: center; + align-items: flex-end; + line-height: 1; +} + +.metric-label { + display: flex; + justify-content: center; + align-items: flex-end; + font-size: 0.9rem; + color: #777; + margin-top: 5px; +} + +.online-count { + font-size: 36px; + font-weight: 600; + color: #333; +} + +.total-count { + font-size: 18px; + font-weight: 500; + color: #888; + margin-left: 4px; +} + +.status-details { + font-size: 14px; + color: #d32f2f; + margin: 0; + font-weight: 500; + text-align: center; +} + +.active, +.matrics-icon { + color: darkgreen; +} + +/* Updated CSS for horizontal chart layout */ +.chart-flex-container { + display: flex; + justify-content: space-around; + align-items: center; + height: 100%; + width: 100%; + flex-grow: 1; +} + +.chart-container { + width: 100%; + height: 100%; + max-width: none; /* Remove any max-width constraints */ + max-height: none; /* Remove any max-height constraints */ +} + +/* Adjustments for multiple charts */ +.chart-flex-container .chart-container { + width: 100%; + height: 100%; +} + +mat-grid-list { + height: 100%; + width: 100%; +} + +/* The original vertical layout for metrics */ +.metrics-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +/* Container to center content vertically and horizontally */ +.card-body-content { + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; +} + +/* New CSS for the metrics block */ +.metrics-horizontal-container { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + width: 100%; +} + +.metric-item { + text-align: center; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.metric-value { + font-size: 1rem; + font-weight: 500; + color: #333; +} + +.metric-label { + font-size: 0.9rem; + color: #777; + text-transform: uppercase; + margin-top: 5px; +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.spec.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.spec.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.spec.ts (working copy) @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardInsightsSslvpn } from './dashboard-insights-sslvpn'; + +describe('DashboardInsightsSslvpn', () => { + let component: DashboardInsightsSslvpn; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DashboardInsightsSslvpn] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardInsightsSslvpn); + 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/dashboard-insights-sslvpn/dashboard-insights-sslvpn.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-insights-sslvpn/dashboard-insights-sslvpn.ts (working copy) @@ -0,0 +1,167 @@ +import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core'; +import {SharedModule} from '../../../shared/shared-module'; +import {EChartsOption} from 'echarts'; + +@Component({ + selector: 'app-dashboard-insights-sslvpn', + imports: [SharedModule], + templateUrl: './dashboard-insights-sslvpn.html', + styleUrl: './dashboard-insights-sslvpn.scss' +}) +export class DashboardInsightsSslvpn implements OnInit, OnChanges { + + chartOption1: EChartsOption = {}; + chartOption2: EChartsOption = {}; + chartOption3: EChartsOption = {}; + chartOption4: EChartsOption = {}; + + ngOnInit(): void { + this.updateChartOption(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes['cpuUsagePercentage']) { + this.updateChartOption(); + } + } + + private updateChartOption() { + let _data: any = { + sessions: [ + {name: 'vsite1', value: 60}, + {name: 'vsite2', value: 50}, + {name: 'vsite3', value: 44}, + {name: 'vsite4', value: 40}, + {name: 'vsite5', value: 35} + ], + clientThroughput: [ + {name: 'vsite1', inbound: 15, outbound: 20}, + {name: 'vsite2', inbound: 20, outbound: 5}, + {name: 'vsite3', inbound: 10, outbound: 8}, + {name: 'vsite4', inbound: 7, outbound: 12}, + {name: 'vsite5', inbound: 8, outbound: 11}, + ], + serverThroughput: [ + {name: 'vsite1', inbound: 10, outbound: 20}, + {name: 'vsite2', inbound: 20, outbound: 5}, + {name: 'vsite3', inbound: 15, outbound: 8}, + {name: 'vsite4', inbound: 7, outbound: 12}, + {name: 'vsite5', inbound: 8, outbound: 11}, + ] + } + _data?.sessions.sort((a: any, b: any) => b.value - a.value); + _data?.clientThroughput.sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound)); + _data?.serverThroughput.sort((a: any, b: any) => (b.inbound + b.outbound) - (a.inbound + a.outbound)); + const sortedCNames = _data?.clientThroughput.map((item: any) => item.name); + const sortedCInbound = _data?.clientThroughput.map((item: any) => item.inbound); + const sortedCOutbound = _data?.clientThroughput.map((item: any) => item.outbound); + + const sortedSNames = _data?.serverThroughput.map((item: any) => item.name); + const sortedSInbound = _data?.serverThroughput.map((item: any) => item.inbound); + const sortedSOutbound = _data?.serverThroughput.map((item: any) => item.outbound); + + this.chartOption1 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + max: 100 + }, + yAxis: { + type: 'category', + data: _data?.sessions.map((item: any) => item?.name), + inverse: true + }, + series: [ + { + name: 'Sessions', + type: 'bar', + data: _data?.sessions.map((item: any) => item?.value) + } + ] + }; + + this.chartOption2 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + legend: { + bottom: 'bottom' + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01] + }, + yAxis: { + type: 'category', + data: sortedCNames, + inverse: true + }, + series: [ + { + name: 'Received', + type: 'bar', + data: sortedCInbound + }, + { + name: 'Sent', + type: 'bar', + data: sortedCOutbound + } + ] + }; + + this.chartOption3 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + legend: { + bottom: 'bottom' + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01] + }, + yAxis: { + type: 'category', + data: sortedSNames, + inverse: true + }, + series: [ + { + name: 'Received', + type: 'bar', + data: sortedSInbound + }, + { + name: 'Sent', + type: 'bar', + data: sortedSOutbound + } + ] + }; + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.html (working copy) @@ -0,0 +1,153 @@ + + + + +
+ Devices +
+
+ 3 + /4 +
+

1 device(s) offline

+ + + + + + +
+ Services +
+
+ 5 + +
+

Active Services

+ + + + + + +
+ Events +
+
+ 5 + +
+

(last 7 days)

+ + + + + + +
+ Alerts +
+
+ 5 + +
+

(last 7 days)

+ + + + + + +
+ + System Load + + +
+
+
+
+
+ + + + + + +
+ + Network Throughput + + +
+
+
+
+ 227.26 Kbps + Outbound +
+
+ 278.28 Kbps + Inbound +
+
+
+ + + + + + +
+ + Disk Usage + + +
+
+
+
+
+
+
+
+ 25.50 GB + Used +
+
+ 474.50 GB + Free +
+
+ 227.26 Kbps + Read Rate +
+
+ 227.26 Kbps + Write Rate +
+
+
+ + + + + + +
+ + Devices + + +
+
+
+
+ + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.scss (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.scss (working copy) @@ -0,0 +1,156 @@ +/* dashboard-metric-card.component.css */ +.dashboard-card { + width: 100%; + height: 100%; + border-radius: 8px; + background-color: inherit; +} + +.card-content-wrapper { + margin-top: 2px; + padding: 0 !important; + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +.card-header-row { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 8px; + padding: 0 8px; +} + +.metric-icon { + color: #3f51b5; +} + +.card-title { + font-size: 18px; + font-weight: 500; + color: #555; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.metric-value { + display: flex; + justify-content: center; + align-items: flex-end; + line-height: 1; +} + +.metric-label { + display: flex; + justify-content: center; + align-items: flex-end; + font-size: 0.9rem; + color: #777; + margin-top: 5px; +} + +.online-count { + font-size: 36px; + font-weight: 600; + color: #333; +} + +.total-count { + font-size: 18px; + font-weight: 500; + color: #888; + margin-left: 4px; +} + +.status-details { + font-size: 14px; + color: #d32f2f; + margin: 0; + font-weight: 500; + text-align: center; +} + +.active, +.matrics-icon { + color: darkgreen; +} + +/* Updated CSS for horizontal chart layout */ +.chart-flex-container { + display: flex; + justify-content: space-around; + align-items: center; + height: 100%; + width: 100%; + flex-grow: 1; +} + +.chart-container { + width: 100%; + height: 100%; + max-width: none; + max-height: none; +} + +/* Adjustments for multiple charts */ +.chart-flex-container .chart-container { + width: 100%; + height: 100%; +} + +mat-grid-list { + height: 100%; + width: 100%; +} + +/* The original vertical layout for metrics */ +.metrics-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +/* Container to center content vertically and horizontally */ +.card-body-content { + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; +} + +/* New CSS for the metrics block */ +.metrics-horizontal-container { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + width: 100%; +} + +.metric-item { + text-align: center; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.metric-value { + font-size: 1rem; + font-weight: 500; + color: #333; +} + +//.metric-label { +// font-size: 0.9rem; +// color: #777; +// text-transform: uppercase; +// margin-top: 5px; +//} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.spec.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.spec.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.spec.ts (working copy) @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardSystemInsights } from './dashboard-system-insights'; + +describe('DashboardSystemInsights', () => { + let component: DashboardSystemInsights; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DashboardSystemInsights] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DashboardSystemInsights); + 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/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 (nonexistent) +++ /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) @@ -0,0 +1,799 @@ +import {Component, 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'; + +@Component({ + selector: 'app-dashboard-system-insights', + imports: [SharedModule], + templateUrl: './dashboard-system-insights.html', + styleUrl: './dashboard-system-insights.scss' +}) +export class DashboardSystemInsights implements OnInit, OnChanges { + + chartOption1: EChartsOption = {}; + chartOption2: EChartsOption = {}; + chartOption3: EChartsOption = {}; + chartOption4: EChartsOption = {}; + chartOption5: EChartsOption = {}; + + ngOnInit(): void { + this.updateChartOption(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes['cpuUsagePercentage']) { + this.updateChartOption(); + } + } + + private updateChartOption() { + let _data: any = { + cpu: { + usage: 5, + remaining: 95 + }, + memory: { + usage: 45, + remaining: 55 + }, + disk: { + usage: 5.1, + remaining: 94.9 + }, + diskIO: { + usage: 10, + remaining: 90 + } + } + + this.chartOption1 = { + title: { + text: `CPU - ${_data?.cpu?.usage.toFixed(1)}%`, + left: 'center', + top: '60%', + textStyle: { + fontSize: 16, + 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: '#1170cf' + }, + }, + { + value: _data?.cpu?.remaining, + name: 'Remaining', + itemStyle: { + color: '#E0E0E0' + }, + }, + ] + } + ] + }; + + this.chartOption2 = { + title: { + text: `Memory - ${_data?.memory?.usage.toFixed(1)}%`, + left: 'center', + top: '60%', + textStyle: { + fontSize: 16, + 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: '#1170cf' + }, + }, + { + value: _data?.memory?.remaining, + name: 'Remaining', + itemStyle: { + color: '#E0E0E0' + }, + }, + ] + } + ] + }; + + this.chartOption3 = { + title: { + text: `Usage - ${_data?.disk?.usage.toFixed(1)}%`, + left: 'center', + top: '60%', + 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, + name: 'Remaining', + itemStyle: { + color: '#E0E0E0' + }, + }, + ] + } + ] + }; + this.chartOption4 = { + title: { + text: `I/O - ${_data?.diskIO?.usage.toFixed(1)}%`, + left: 'center', + top: '60%', + 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?.diskIO?.usage, + name: 'Disk Usage', + itemStyle: { + color: '#1170cf' + }, + }, + { + value: _data?.diskIO?.remaining, + name: 'Remaining', + itemStyle: { + color: '#E0E0E0' + }, + }, + ] + } + ] + }; + + this.chartOption5 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + bottom: 'bottom' + }, + xAxis: { + type: 'value' + }, + yAxis: { + type: 'category', + data: ['APV', 'vAPV', 'ASF', 'vASF', 'AG', 'vxAG'] + }, + series: [ + { + name: 'Connected', + type: 'bar', + stack: 'total', + color: 'green', + label: { + show: true + }, + emphasis: { + focus: 'series' + }, + data: [3, 10, 2, 0, 3, 5] + }, + { + name: 'Disconnected', + type: 'bar', + stack: 'total', + label: { + show: true + }, + color: 'red', + emphasis: { + focus: 'series' + }, + data: [0, 2, 0, 0, 0, 1] + } + ] + }; + } + + dialog = inject(MatDialog); + dialogConfig = new MatDialogConfig(); + + enlargeSystemLoad() { + this.dialogConfig.width = '50%'; + const dialogRef = this.dialog.open(EnlargeSystemLoad, this.dialogConfig); + dialogRef.afterClosed().subscribe((isAdded: boolean) => { + }) + } + + enlargeSystemThroughput() { + this.dialogConfig.width = '50%'; + const dialogRef = this.dialog.open(EnlargeSystemThroughput, this.dialogConfig); + dialogRef.afterClosed().subscribe((isAdded: boolean) => { + }) + } + + enlargeSystemDiskUsage() { + this.dialogConfig.width = '50%'; + const dialogRef = this.dialog.open(EnlargeSystemDiskUsage, this.dialogConfig); + dialogRef.afterClosed().subscribe((isAdded: boolean) => { + }) + } + + enlargeSystemDevices() { + this.dialogConfig.width = '50%'; + const dialogRef = this.dialog.open(EnlargeSystemDevices, this.dialogConfig); + dialogRef.afterClosed().subscribe((isAdded: boolean) => { + }) + } +} + +@Component({ + selector: 'enlarge-system-load', + templateUrl: './enlarge-system-load.html', + imports: [SharedModule] +}) +export class EnlargeSystemLoad implements OnInit { + + chartOption1: EChartsOption = {}; + + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + + ngOnInit() { + this.updateChartOptions() + } + + updateChartOptions() { + let _data: any = {} + 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: [ + ['2025-08-28 10:00:00', 25], + ['2025-08-28 10:01:00', 25], + ['2025-08-28 10:02:00', 26], + ['2025-08-28 10:03:00', 25], + ['2025-08-28 10:04:00', 26], + ['2025-08-28 10:05:00', 27], + ['2025-08-28 10:06:00', 26], + ['2025-08-28 10:07:00', 27], + ['2025-08-28 10:08:00', 28], + ['2025-08-28 10:09:00', 28], + ['2025-08-28 10:10:00', 28], + ['2025-08-28 10:11:00', 29], + ['2025-08-28 10:12:00', 29], + ['2025-08-28 10:13:00', 29], + ['2025-08-28 10:14:00', 30], + ['2025-08-28 10:15:00', 30], + ['2025-08-28 10:16:00', 31], + ['2025-08-28 10:17:00', 30], + ['2025-08-28 10:18:00', 31], + ['2025-08-28 10:19:00', 32], + ['2025-08-28 10:20:00', 31], + ['2025-08-28 10:21:00', 32], + ['2025-08-28 10:22:00', 33], + ['2025-08-28 10:23:00', 32], + ['2025-08-28 10:24:00', 35], + ['2025-08-28 10:25:00', 34], + ['2025-08-28 10:26:00', 33], + ['2025-08-28 10:27:00', 34], + ['2025-08-28 10:28:00', 35], + ['2025-08-28 10:29:00', 34], + ['2025-08-28 10:30:00', 35] + ] + }, + { + name: 'Memory', + type: 'line', + data: [ + ['2025-08-28 10:00:00', 18], + ['2025-08-28 10:01:00', 18], + ['2025-08-28 10:02:00', 19], + ['2025-08-28 10:03:00', 18], + ['2025-08-28 10:04:00', 19], + ['2025-08-28 10:05:00', 20], + ['2025-08-28 10:06:00', 19], + ['2025-08-28 10:07:00', 20], + ['2025-08-28 10:08:00', 21], + ['2025-08-28 10:09:00', 21], + ['2025-08-28 10:10:00', 21], + ['2025-08-28 10:11:00', 22], + ['2025-08-28 10:12:00', 22], + ['2025-08-28 10:13:00', 22], + ['2025-08-28 10:14:00', 23], + ['2025-08-28 10:15:00', 23], + ['2025-08-28 10:16:00', 24], + ['2025-08-28 10:17:00', 23], + ['2025-08-28 10:18:00', 24], + ['2025-08-28 10:19:00', 25], + ['2025-08-28 10:20:00', 24], + ['2025-08-28 10:21:00', 25], + ['2025-08-28 10:22:00', 26], + ['2025-08-28 10:23:00', 25], + ['2025-08-28 10:24:00', 26], + ['2025-08-28 10:25:00', 27], + ['2025-08-28 10:26:00', 26], + ['2025-08-28 10:27:00', 27], + ['2025-08-28 10:28:00', 28], + ['2025-08-28 10:29:00', 27], + ['2025-08-28 10:30:00', 28] + ] + } + ] + }; + } + + onCancel() { + this.dialogRef.close(); + } +} + +@Component({ + selector: 'enlarge-system-throughput', + templateUrl: './enlarge-system-throughput.html', + imports: [SharedModule] +}) +export class EnlargeSystemThroughput implements OnInit { + + chartOption1: EChartsOption = {}; + + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + + ngOnInit() { + this.updateChartOptions() + } + + updateChartOptions() { + 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; + } + }, + xAxis: { + type: 'time', + name: 'Time' + }, + yAxis: { + type: 'value', + name: 'Throughput' + }, + series: [ + { + name: 'Sent', + type: 'bar', + data: [ + ['2025-08-28 10:00:00', 100], + ['2025-08-28 10:01:00', 105], + ['2025-08-28 10:02:00', 102], + ['2025-08-28 10:03:00', 110], + ['2025-08-28 10:04:00', 115], + ['2025-08-28 10:05:00', 112], + ['2025-08-28 10:06:00', 120], + ['2025-08-28 10:07:00', 125], + ['2025-08-28 10:08:00', 122], + ['2025-08-28 10:09:00', 130], + ['2025-08-28 10:10:00', 135], + ['2025-08-28 10:11:00', 132], + ['2025-08-28 10:12:00', 140], + ['2025-08-28 10:13:00', 145], + ['2025-08-28 10:14:00', 142], + ['2025-08-28 10:15:00', 150], + ['2025-08-28 10:16:00', 155], + ['2025-08-28 10:17:00', 152], + ['2025-08-28 10:18:00', 160], + ['2025-08-28 10:19:00', 165], + ['2025-08-28 10:20:00', 162], + ['2025-08-28 10:21:00', 170], + ['2025-08-28 10:22:00', 175], + ['2025-08-28 10:23:00', 172], + ['2025-08-28 10:24:00', 180], + ['2025-08-28 10:25:00', 185], + ['2025-08-28 10:26:00', 182], + ['2025-08-28 10:27:00', 190], + ['2025-08-28 10:28:00', 195], + ['2025-08-28 10:29:00', 192], + ['2025-08-28 10:30:00', 200] + ] + }, + { + name: 'Received', + type: 'bar', + data: [ + ['2025-08-28 10:00:00', 90], + ['2025-08-28 10:01:00', 95], + ['2025-08-28 10:02:00', 92], + ['2025-08-28 10:03:00', 100], + ['2025-08-28 10:04:00', 105], + ['2025-08-28 10:05:00', 102], + ['2025-08-28 10:06:00', 110], + ['2025-08-28 10:07:00', 115], + ['2025-08-28 10:08:00', 112], + ['2025-08-28 10:09:00', 120], + ['2025-08-28 10:10:00', 125], + ['2025-08-28 10:11:00', 122], + ['2025-08-28 10:12:00', 130], + ['2025-08-28 10:13:00', 135], + ['2025-08-28 10:14:00', 132], + ['2025-08-28 10:15:00', 140], + ['2025-08-28 10:16:00', 145], + ['2025-08-28 10:17:00', 142], + ['2025-08-28 10:18:00', 150], + ['2025-08-28 10:19:00', 155], + ['2025-08-28 10:20:00', 152], + ['2025-08-28 10:21:00', 160], + ['2025-08-28 10:22:00', 165], + ['2025-08-28 10:23:00', 162], + ['2025-08-28 10:24:00', 170], + ['2025-08-28 10:25:00', 175], + ['2025-08-28 10:26:00', 172], + ['2025-08-28 10:27:00', 180], + ['2025-08-28 10:28:00', 185], + ['2025-08-28 10:29:00', 182], + ['2025-08-28 10:30:00', 190] + ] + } + ] + }; + } + + onCancel() { + this.dialogRef.close(); + } +} + +@Component({ + selector: 'enlarge-system-disk-usage', + templateUrl: './enlarge-system-disk-usage.html', + imports: [SharedModule], + encapsulation: ViewEncapsulation.None +}) +export class EnlargeSystemDiskUsage implements OnInit { + + chartOption1: EChartsOption = {}; + chartOption2: EChartsOption = {}; + + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + + ngOnInit() { + this.updateChartOptions() + } + + updateChartOptions() { + let _data: any = { + disk: { + usage: 5.1, + remaining: 94.9 + }, + diskIO: { + usage: 10, + remaining: 90 + } + } + this.chartOption1 = { + title: { + text: `Usage - ${_data?.disk?.usage.toFixed(1)}%`, + left: 'center', + top: '60%', + 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, + name: 'Remaining', + itemStyle: { + color: '#E0E0E0' + }, + }, + ] + } + ] + }; + + this.chartOption2 = { + title: { + text: `I/O - ${_data?.diskIO?.usage.toFixed(1)}%`, + left: 'center', + top: '60%', + 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?.diskIO?.usage, + name: 'Disk Usage', + itemStyle: { + color: '#1170cf' + }, + }, + { + value: _data?.diskIO?.remaining, + name: 'Remaining', + itemStyle: { + color: '#E0E0E0' + }, + }, + ] + } + ] + }; + } + + 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() + } + + updateChartOptions() { + let _data: any = { + disk: { + usage: 5.1, + remaining: 94.9 + }, + diskIO: { + usage: 10, + remaining: 90 + } + } + + this.chartOption1 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + containLabel: true + }, + xAxis: { + type: 'value' + }, + yAxis: { + type: 'category', + data: ['APV', 'vAPV', 'ASF', 'vASF', 'AG', 'vxAG'] + }, + series: [ + { + name: 'Connected', + type: 'bar', + stack: 'total', + color: 'green', + label: { + show: true + }, + emphasis: { + focus: 'series' + }, + data: [3, 10, 2, 0, 3, 5] + }, + { + name: 'Disconnected', + type: 'bar', + stack: 'total', + label: { + show: true + }, + color: 'red', + emphasis: { + focus: 'series' + }, + data: [0, 2, 0, 0, 0, 1] + } + ] + }; + + 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: 10, name: 'Connected', itemStyle: {color: '#4CAF50'}}, + {value: 1, 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 (nonexistent) +++ /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) @@ -0,0 +1,12 @@ +

System Devices Status (10/11)

+ +
+
+
+
+ + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-disk-usage.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-disk-usage.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-disk-usage.html (working copy) @@ -0,0 +1,12 @@ +

System Disk Usage

+ +
+
+
+
+ + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-load.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-load.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-load.html (working copy) @@ -0,0 +1,12 @@ +

System Load

+ +
+ + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-throughput.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-throughput.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/enlarge-system-throughput.html (working copy) @@ -0,0 +1,12 @@ +

System Throughput

+ +
+ + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts (revision 2698) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts (working copy) @@ -29,6 +29,10 @@ faCodeCompare, faListCheck, faGears, + faEthernet, + faEye, + faUpRightAndDownLeftFromCenter, + faExpand, } from '@fortawesome/free-solid-svg-icons'; import { faBell, @@ -186,6 +190,10 @@ faWindowRestore, faGears, faCircleUp, + faEthernet, + faEye, + faUpRightAndDownLeftFromCenter, + faExpand, ); } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss (revision 2698) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss (working copy) @@ -286,3 +286,26 @@ cursor: not-allowed; pointer-events: none; } + +.fa-align-right { + text-align: right; +} + +mat-dialog-content { + display: flex; + flex-direction: column; + width: 100%; +} + +mat-dialog-content .dialog-charts-wrapper { + display: flex; + justify-content: space-between; + gap: 16px; + width: 100%; +} + +mat-dialog-content .dialog-chart-container { + flex: 1; + height: 275px; + min-width: 0; +}