Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.scss (revision 2785)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.scss (working copy)
@@ -1,7 +1,10 @@
.alert-log-container {
- padding: 20px;
- background-color: #f0f2f5;
- min-height: calc(100vh - 64px);
+ padding: 24px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: #f5f7fa;
+ box-sizing: border-box;
.time-range-selector {
background-color: #e0e0e0;
@@ -11,6 +14,7 @@
gap: 5px;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
+ border-radius: 4px;
button {
background-color: #d0d0d0;
@@ -39,28 +43,93 @@
}
.content-wrapper {
- // padding: 20px; // Removed padding as container has it
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ /* Allow scrolling if content overflows */
- .toolbar {
+ /* Summary Dashboard Styles */
+ .summary-grid {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ grid-template-rows: auto 350px;
+ gap: 24px;
+ margin-bottom: 24px;
+ }
+
+ .summary-card {
+ background-color: #fff;
+ border-radius: 12px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+ border: none;
display: flex;
- justify-content: space-between;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .metric-card {
+ grid-column: span 2;
+ height: 120px;
+ padding: 24px;
align-items: center;
- margin-bottom: 15px;
- // background-color: #e0e0e0; // Removed background to match AlertThresholds
- // padding: 5px 15px; // Removed padding
+ }
- .title {
- font-size: 14px;
- font-weight: 500;
- color: #333;
- display: none; // AlertThresholds doesn't have a visible title in toolbar
- }
+ .metric-content {
+ text-align: center;
+ }
- button {
- color: #333;
- }
+ .metric-label {
+ font-size: 1rem;
+ color: #777;
+ margin-bottom: 8px;
+ text-transform: uppercase;
+ font-weight: 500;
}
+ .metric-value {
+ font-size: 2.5rem;
+ font-weight: 600;
+ color: #333;
+ }
+
+ .status-alerting {
+ color: #d32f2f;
+ }
+
+ .status-resolved {
+ color: #388e3c;
+ }
+
+ .chart-card {
+ grid-column: span 3;
+ grid-row: 2;
+ padding: 16px;
+ }
+
+ .chart-content {
+ height: 100%;
+ width: 100%;
+ padding: 0;
+ }
+
+ .chart-container {
+ width: 100%;
+ height: 100%;
+ min-height: 250px;
+ }
+
+ mat-card-header {
+ margin-bottom: 16px;
+ }
+
+ mat-card-title {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: #333;
+ }
+
+ /* Existing Filters and Table Styles */
.filters-row {
display: flex;
justify-content: space-between;
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.ts
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.ts (revision 2785)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/alert-log/alert-log.ts (working copy)
@@ -3,6 +3,7 @@
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { EChartsOption } from 'echarts';
export interface AlertLogEntry {
alertType: string;
@@ -92,6 +93,15 @@
status: 'All'
};
+ // Summary Metrics
+ totalAlerts = 0;
+ alertingCount = 0;
+ resolvedCount = 0;
+
+ // Chart Options
+ alertsByTypeChartOption: EChartsOption = {};
+ alertsByProductChartOption: EChartsOption = {};
+
constructor(private dialog: MatDialog) { }
ngOnInit() {
@@ -119,12 +129,129 @@
alertRule: 'CertKeyExpired_6umk3_cert_exp_60',
status: 'Alerting',
action: 'View Detail'
+ },
+ {
+ alertType: 'Threshold Alert',
+ product: 'Device',
+ occurredAt: '2025-11-27 09:45:00',
+ alertRule: 'DeviceStatus_mem_usage_high',
+ status: 'Resolved',
+ action: 'View Detail'
+ },
+ {
+ alertType: 'Event Alert',
+ product: 'Real Service',
+ occurredAt: '2025-11-27 08:30:00',
+ alertRule: 'HealthCheck_rs_down',
+ status: 'Alerting',
+ action: 'View Detail'
}
];
this.dataSource.data = data;
this.dataSource.filterPredicate = this.createFilter();
+
+ this.calculateMetrics(data);
+ this.initCharts(data);
}
+ calculateMetrics(data: AlertLogEntry[]) {
+ this.totalAlerts = data.length;
+ this.alertingCount = data.filter(d => d.status === 'Alerting').length;
+ this.resolvedCount = data.filter(d => d.status === 'Resolved').length;
+ }
+
+ initCharts(data: AlertLogEntry[]) {
+ // Alerts by Type (Pie Chart)
+ const typeCounts: { [key: string]: number } = {};
+ data.forEach(d => {
+ typeCounts[d.alertType] = (typeCounts[d.alertType] || 0) + 1;
+ });
+
+ this.alertsByTypeChartOption = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '0%',
+ left: 'center'
+ },
+ series: [
+ {
+ name: 'Alert Type',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 20,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: Object.keys(typeCounts).map(key => ({ value: typeCounts[key], name: key }))
+ }
+ ]
+ };
+
+ // Alerts by Product (Bar Chart)
+ const productCounts: { [key: string]: number } = {};
+ data.forEach(d => {
+ productCounts[d.product] = (productCounts[d.product] || 0) + 1;
+ });
+
+ this.alertsByProductChartOption = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: Object.keys(productCounts),
+ axisTick: {
+ alignWithLabel: true
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Alerts',
+ type: 'bar',
+ barWidth: '60%',
+ data: Object.values(productCounts),
+ itemStyle: {
+ color: '#3f51b5'
+ }
+ }
+ ]
+ };
+ }
+
createFilter(): (data: AlertLogEntry, filter: string) => boolean {
return (data: AlertLogEntry, filter: string): boolean => {
const searchTerms = JSON.parse(filter);
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 (revision 2771)
+++ /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)
@@ -1 +1,33 @@
-
+@if (!isLoading) {
+
+ @if (hasAvx) {
+
+ }
+ @if (hasApv) {
+
+ }
+ @if (hasSslVpn) {
+
+ }
+
+ @if (!hasAvx && !hasApv && !hasSslVpn) {
+
+
+
+
+
+
No Devices Registered
+
Please register devices to view the devices & services metrics.
+
+
+ }
+
+}
\ No newline at end of file
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss
===================================================================
--- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss (revision 2771)
+++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-device-insights/dashboard-device-insights.scss (working copy)
@@ -0,0 +1,59 @@
+.services-dashboard-container {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 12px;
+ height: 100%;
+ overflow-y: auto;
+ scrollbar-width: none;
+ /* Firefox */
+ -ms-overflow-style: none;
+ /* IE 10+ */
+
+ &::-webkit-scrollbar {
+ display: none;
+ /* Chrome, Safari, Opera */
+ }
+}
+
+.service-section {
+ width: 100%;
+}
+
+.no-devices-message {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin-top: 40px;
+
+ mat-card {
+ width: 100%;
+ max-width: 500px;
+ text-align: center;
+ }
+
+ .empty-state {
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+
+ .empty-icon {
+ font-size: 48px;
+ color: #ccc;
+ margin-bottom: 10px;
+ }
+
+ h3 {
+ margin: 0;
+ color: #333;
+ font-weight: 500;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ }
+ }
+}
\ No newline at end of file
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 (revision 2771)
+++ /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)
@@ -1,24 +1,74 @@
-import {Component} from '@angular/core';
-import {SharedModule} from '../../../shared/shared-module';
-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';
-import {TabContainer, TabDefinition} from '../../common/tab-container/tab-container';
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { SharedModule } from '../../../shared/shared-module';
+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';
+import { DeviceService } from '../../../services/device-service';
+import { NotificationService } from '../../../services/notification';
+import { take } from 'rxjs/operators';
+import { AvxService } from '../../../services/avx-service';
+import { forkJoin } from 'rxjs';
@Component({
selector: 'app-dashboard-device-insights',
- imports: [SharedModule, TabContainer],
+ imports: [
+ SharedModule,
+ DashboardInsightsApv,
+ DashboardInsightsSslvpn,
+ DashboardInsightsAvx
+ ],
templateUrl: './dashboard-device-insights.html',
styleUrl: './dashboard-device-insights.scss'
})
-export class DashboardDeviceInsights {
+export class DashboardDeviceInsights implements OnInit {
+ hasAvx: boolean = false;
+ hasApv: boolean = false;
+ hasSslVpn: boolean = false;
+ isLoading: boolean = true;
- tabDefinitions: TabDefinition[] = [
- {label: 'Devices', component: DashboardInsightsDevices, paramName: 'devices'},
- {label: 'APV', component: DashboardInsightsApv, paramName: 'apv'},
- // { label: 'ASF', component: /* ASF Component */, paramName: 'asf' }, // Easily uncommented
- {label: 'SSL VPN', component: DashboardInsightsSslvpn, paramName: 'ssl-vpn'},
- {label: 'AVX', component: DashboardInsightsAvx, paramName: 'avx'},
- ];
+ private destroyRef = inject(DestroyRef);
+
+ constructor(
+ private _device: DeviceService,
+ private _avx: AvxService,
+ private _notification: NotificationService
+ ) {
+ }
+
+ ngOnInit(): void {
+ setTimeout(() => {
+ this.checkDeviceTypes();
+ });
+ }
+
+ checkDeviceTypes(): void {
+ this.isLoading = true;
+ forkJoin({
+ deviceGroups: this._device.getDeviceGroups().pipe(take(1)),
+ avxDevices: this._avx.getAVXDevices().pipe(take(1))
+ }).subscribe({
+ next: (results: any) => {
+ // Check AVX Devices
+ const avxDevices = results.avxDevices || [];
+ this.hasAvx = avxDevices.length > 0;
+
+ // Check APV/SSLVPN Devices
+ const devices = results.deviceGroups?.devices || [];
+ // Check for APV types (APV, AG, vAG, vxAG)
+ this.hasApv = devices.some((d: any) => {
+ const type = d.type?.toUpperCase();
+ return ['APV', 'AG', 'VAG', 'VXAG'].includes(type);
+ });
+
+ this.hasSslVpn = this.hasApv; // Assuming SSLVPN is a feature of APV devices for now.
+
+ this.isLoading = false;
+ },
+ error: (error: any) => {
+ console.error('Error fetching device status:', error);
+ this._notification.showError('Failed to fetch device status.');
+ this.isLoading = false;
+ }
+ });
+ }
}
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 (revision 2771)
+++ /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)
@@ -1,153 +1,141 @@
-
+
SLB - Virtual Services
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
+ params.forEach((param: any) => {
+ const valueInMbps = param.value.toFixed(2);
+ tooltipContent += `${param.marker} ${param.seriesName}: ${valueInMbps} Mbps
`;
+ });
+ return tooltipContent;
+ }
+ },
+ legend: {
+ data: ['Inbound', 'Outbound'],
+ bottom: 0
+ },
+ grid: {
+ left: '3%',
+ right: '15%',
+ bottom: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ name: 'Mbps',
+ nameLocation: 'end',
+ nameGap: 20
+ },
+ yAxis: {
+ type: 'category',
+ data: data.map(item => item.name),
+ inverse: true,
+ axisLabel: {
+ width: 80,
+ overflow: 'truncate'
+ }
+ },
+ series: [
+ {
+ name: 'Inbound',
+ type: 'bar',
+ stack: 'total',
+ data: data.map(item => item.inbound),
+ itemStyle: {
+ color: '#4caf50'
+ }
+ },
+ {
+ name: 'Outbound',
+ type: 'bar',
+ stack: 'total',
+ data: data.map(item => item.outbound),
+ itemStyle: {
+ color: '#2196f3',
+ borderRadius: [0, 4, 4, 0]
+ }
+ }
+ ]
+ };
+ }
}
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 (revision 2771)
+++ /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)
@@ -1,59 +1,61 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ AVX
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
+ params.forEach((param: any) => {
+ const valueInMbps = param.value.toFixed(2);
+ tooltipContent += `${param.marker} ${param.seriesName}: ${valueInMbps} Mbps
`;
+ });
+ return tooltipContent;
+ }
+ },
+ legend: {
+ data: ['Inbound', 'Outbound'],
+ bottom: 0
+ },
+ grid: {
+ left: '3%',
+ right: '15%',
+ bottom: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ name: 'Mbps',
+ nameLocation: 'end',
+ nameGap: 20
+ },
+ yAxis: {
+ type: 'category',
+ data: data.map(item => item.name),
+ inverse: true,
+ axisLabel: {
+ width: 80,
+ overflow: 'truncate'
+ }
+ },
+ series: [
+ {
+ name: 'Inbound',
+ type: 'bar',
+ stack: 'total',
+ data: data.map(item => item.inbound),
+ itemStyle: {
+ color: '#4caf50'
+ }
+ },
+ {
+ name: 'Outbound',
+ type: 'bar',
+ stack: 'total',
+ data: data.map(item => item.outbound),
+ itemStyle: {
+ color: '#2196f3',
+ borderRadius: [0, 4, 4, 0]
+ }
+ }
+ ]
+ };
+ }
}
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 (revision 2771)
+++ /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)
@@ -1,44 +1,47 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ SSL VPN
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
+ params.forEach((param: any) => {
+ const valueInMbps = param.value.toFixed(2);
+ tooltipContent += `${param.marker} ${param.seriesName}: ${valueInMbps} Mbps
`;
+ });
+ return tooltipContent;
+ }
+ },
+ legend: {
+ data: ['Inbound', 'Outbound'],
+ bottom: 0
+ },
+ grid: {
+ left: '3%',
+ right: '15%',
+ bottom: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ name: 'Mbps',
+ nameLocation: 'end',
+ nameGap: 20
+ },
+ yAxis: {
+ type: 'category',
+ data: data.map(item => item.name),
+ inverse: true,
+ axisLabel: {
+ width: 80,
+ overflow: 'truncate'
+ }
+ },
+ series: [
+ {
+ name: 'Inbound',
+ type: 'bar',
+ stack: 'total',
+ data: data.map(item => item.inbound),
+ itemStyle: {
+ color: '#4caf50'
+ }
+ },
+ {
+ name: 'Outbound',
+ type: 'bar',
+ stack: 'total',
+ data: data.map(item => item.outbound),
+ itemStyle: {
+ color: '#2196f3',
+ borderRadius: [0, 4, 4, 0]
+ }
+ }
+ ]
+ };
+ }
}
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 (revision 2771)
+++ /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)
@@ -1,130 +1,119 @@
-
-
-
-
-