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 (revision 2830) +++ /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) @@ -160,14 +160,26 @@ const sortByValueDesc = (a: any, b: any) => b.value - a.value; const sortedConnections = (_data.connections || []).sort(sortByValueDesc).slice(0, 5); - (this as any)[connectionsKey] = this.getHorizontalBarChartOptions('Connections', sortedConnections, '#00c698'); + if (sortedConnections.length > 0) { + (this as any)[connectionsKey] = this.getHorizontalBarChartOptions('Connections', sortedConnections, '#00c698'); + } else { + (this as any)[connectionsKey] = this._chartOptions.getNoDataChartOptions(); + } const sortedHits = (_data.hits || []).sort(sortByValueDesc).slice(0, 5); - (this as any)[hitsKey] = this.getHorizontalBarChartOptions('Hits', sortedHits, '#3f51b5'); + if (sortedHits.length > 0) { + (this as any)[hitsKey] = this.getHorizontalBarChartOptions('Hits', sortedHits, '#3f51b5'); + } else { + (this as any)[hitsKey] = this._chartOptions.getNoDataChartOptions(); + } const { names, inbound, outbound } = _data?.network || {}; let networkData = this.prepareNetworkData(names, inbound, outbound); - (this as any)[throughputKey] = this.getHorizontalThroughputChartOptions(networkData); + if (networkData.length > 0) { + (this as any)[throughputKey] = this.getHorizontalThroughputChartOptions(networkData); + } else { + (this as any)[throughputKey] = this._chartOptions.getNoDataChartOptions(); + } } private prepareNetworkData(names: any[], inbound: any[], outbound: any[]): any[] { 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 (revision 2830) +++ /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) @@ -62,6 +62,10 @@ this._avx.getAVXDevices().pipe(take(1)).subscribe({ next: (result: any) => { if (!result || result.length === 0) { + this.connectionChartOption = this._chartOptions.getNoDataChartOptions(); + this.cpuChartOption = this._chartOptions.getNoDataChartOptions(); + this.memoryChartOption = this._chartOptions.getNoDataChartOptions(); + this.diskChartOption = this._chartOptions.getNoDataChartOptions(); return; } this.avxDevices = result; @@ -89,9 +93,24 @@ const sortedDiskMetrics = metrics.disk.sort(sortByValueDesc).slice(0, 5); this.connectionChartOption = this._chartOptions.connectedDevicesDoughnutChartOptions(this.deviceStats?.total, true); - this.cpuChartOption = this.getHorizontalBarChartOptions('CPU %', sortedCpuMetrics, '#3f51b5'); - this.memoryChartOption = this.getHorizontalBarChartOptions('Memory %', sortedMemoryMetrics, '#00c698'); - this.diskChartOption = this.getHorizontalBarChartOptions('Disk %', sortedDiskMetrics, '#ff9800'); + + if (sortedCpuMetrics.length > 0) { + this.cpuChartOption = this.getHorizontalBarChartOptions('CPU %', sortedCpuMetrics, '#3f51b5'); + } else { + this.cpuChartOption = this._chartOptions.getNoDataChartOptions(); + } + + if (sortedMemoryMetrics.length > 0) { + this.memoryChartOption = this.getHorizontalBarChartOptions('Memory %', sortedMemoryMetrics, '#00c698'); + } else { + this.memoryChartOption = this._chartOptions.getNoDataChartOptions(); + } + + if (sortedDiskMetrics.length > 0) { + this.diskChartOption = this.getHorizontalBarChartOptions('Disk %', sortedDiskMetrics, '#ff9800'); + } else { + this.diskChartOption = this._chartOptions.getNoDataChartOptions(); + } }, error: error => { this._notification.showError(`Error: ${error?.message}`); 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 (revision 2830) +++ /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) @@ -95,17 +95,29 @@ // Active Sessions - Sort and Top 5 const sortByValueDesc = (a: any, b: any) => b.value - a.value; const sortedSessions = (_data?.active_sessions || []).sort(sortByValueDesc).slice(0, 5); - this.activeSessionsChartOption = this.getHorizontalBarChartOptions('Sessions', sortedSessions, '#9c27b0'); + if (sortedSessions.length > 0) { + this.activeSessionsChartOption = this.getHorizontalBarChartOptions('Sessions', sortedSessions, '#9c27b0'); + } else { + this.activeSessionsChartOption = this._chartOptions.getNoDataChartOptions(); + } // Client Throughput let { names, inbound, outbound } = _data?.client_network || {}; let clientNetworkData = this.prepareNetworkData(names, inbound, outbound); - this.clientThroughputChartOption = this.getHorizontalThroughputChartOptions(clientNetworkData); + if (clientNetworkData.length > 0) { + this.clientThroughputChartOption = this.getHorizontalThroughputChartOptions(clientNetworkData); + } else { + this.clientThroughputChartOption = this._chartOptions.getNoDataChartOptions(); + } // Server Throughput let { names: names1, inbound: inbound1, outbound: outbound1 } = _data?.server_network || {}; let serverNetworkData = this.prepareNetworkData(names1, inbound1, outbound1); - this.serverThroughputChartOption = this.getHorizontalThroughputChartOptions(serverNetworkData); + if (serverNetworkData.length > 0) { + this.serverThroughputChartOption = this.getHorizontalThroughputChartOptions(serverNetworkData); + } else { + this.serverThroughputChartOption = this._chartOptions.getNoDataChartOptions(); + } } private prepareNetworkData(names: any[], inbound: any[], outbound: any[]): any[] { Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/dashboard-system-insights/dashboard-system-insights.ts (revision 2830) +++ /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) @@ -185,24 +185,63 @@ remaining: 100 - this.currentSystemMetrics?.disk_io?.disk_io_percent, } } - this.systemLoadChartOption2 = this._chartOptions.systemStatusPieChartOptions('CPU', _data?.cpu?.usage, '#3f51b5'); - this.systemLoadChartOption3 = this._chartOptions.systemStatusPieChartOptions('Memory', _data?.memory?.usage, '#00c698'); - this.diskChartOption1 = this._chartOptions.systemStatusPieChartOptions('Disk', _data?.disk?.usage, '#ff9800'); - this.connectionChartOption1 = this._chartOptions.connectedDeviceLineChart(this.deviceConnectionStats) - this.connectionChartOption2 = this._chartOptions.connectedDevicesDoughnutChartOptions(this.deviceStats?.total); + + if (_data.cpu.usage !== undefined && _data.cpu.usage !== null) { + this.systemLoadChartOption2 = this._chartOptions.systemStatusPieChartOptions('CPU', _data?.cpu?.usage, '#3f51b5'); + } else { + this.systemLoadChartOption2 = this._chartOptions.getNoDataChartOptions(); + } + + if (_data.memory.usage !== undefined && _data.memory.usage !== null) { + this.systemLoadChartOption3 = this._chartOptions.systemStatusPieChartOptions('Memory', _data?.memory?.usage, '#00c698'); + } else { + this.systemLoadChartOption3 = this._chartOptions.getNoDataChartOptions(); + } + + if (_data.disk.usage !== undefined && _data.disk.usage !== null) { + this.diskChartOption1 = this._chartOptions.systemStatusPieChartOptions('Disk', _data?.disk?.usage, '#ff9800'); + } else { + this.diskChartOption1 = this._chartOptions.getNoDataChartOptions(); + } + + if (this.deviceConnectionStats && this.deviceConnectionStats.yAxisData && this.deviceConnectionStats.yAxisData.length > 0) { + this.connectionChartOption1 = this._chartOptions.connectedDeviceLineChart(this.deviceConnectionStats) + } else { + this.connectionChartOption1 = this._chartOptions.getNoDataChartOptions(); + } + + if (this.deviceStats && this.deviceStats.total) { + this.connectionChartOption2 = this._chartOptions.connectedDevicesDoughnutChartOptions(this.deviceStats?.total); + } else { + this.connectionChartOption2 = this._chartOptions.getNoDataChartOptions(); + } } updateHistoricalCharts() { const factor: any = 1024 * 1024; - const cpu_data_formatted: any = this.historicalCPUMetrics.map((d: any) => [d.time, d.cpu_percent]); - const memory_data_formatted: any = this.historicalMemoryMetrics.map((d: any) => [d.time, d.mem_percent]); - const sent_data_formatted: any = this.historicalNetworkMetrics.map((d: any) => [d.time, d.sent / factor]); - const received_data_formatted: any = this.historicalNetworkMetrics.map((d: any) => [d.time, d.received / factor]); - const disk_io_formatted = this.historicalDiskIOMetrics.map((d: any) => [d.time, d.disk_io_percent]); - this.systemLoadChartOption1 = this._chartOptions.historicalCPUMemoryChartOptions(cpu_data_formatted, memory_data_formatted); - this.networkThroughputChartOption1 = this._chartOptions.historicalThroughputChartOptions(sent_data_formatted, received_data_formatted) - this.diskIOChartOption1 = this._chartOptions.historicalDiskIOChartOptions(disk_io_formatted); + if (this.historicalCPUMetrics && this.historicalCPUMetrics.length > 0 && this.historicalMemoryMetrics && this.historicalMemoryMetrics.length > 0) { + const cpu_data_formatted: any = this.historicalCPUMetrics.map((d: any) => [d.time, d.cpu_percent]); + const memory_data_formatted: any = this.historicalMemoryMetrics.map((d: any) => [d.time, d.mem_percent]); + this.systemLoadChartOption1 = this._chartOptions.historicalCPUMemoryChartOptions(cpu_data_formatted, memory_data_formatted); + } else { + this.systemLoadChartOption1 = this._chartOptions.getNoDataChartOptions(); + } + + if (this.historicalNetworkMetrics && this.historicalNetworkMetrics.length > 0) { + const sent_data_formatted: any = this.historicalNetworkMetrics.map((d: any) => [d.time, d.sent / factor]); + const received_data_formatted: any = this.historicalNetworkMetrics.map((d: any) => [d.time, d.received / factor]); + this.networkThroughputChartOption1 = this._chartOptions.historicalThroughputChartOptions(sent_data_formatted, received_data_formatted) + } else { + this.networkThroughputChartOption1 = this._chartOptions.getNoDataChartOptions(); + } + + if (this.historicalDiskIOMetrics && this.historicalDiskIOMetrics.length > 0) { + const disk_io_formatted = this.historicalDiskIOMetrics.map((d: any) => [d.time, d.disk_io_percent]); + this.diskIOChartOption1 = this._chartOptions.historicalDiskIOChartOptions(disk_io_formatted); + } else { + this.diskIOChartOption1 = this._chartOptions.getNoDataChartOptions(); + } } // Device Metrics Logic @@ -228,6 +267,13 @@ } private updateDeviceMetricsCharts(): void { + if (!this.connectedDevicesMetrics || this.connectedDevicesMetrics.length === 0) { + this.devicesCPUChartOption1 = this._chartOptions.getNoDataChartOptions(); + this.devicesMemoryChartOption1 = this._chartOptions.getNoDataChartOptions(); + this.devicesThroughputChartOption1 = this._chartOptions.getNoDataChartOptions(); + return; + } + let _data: any = this._utils.formatChartData(['cpu', 'memory', 'device_network'], this.connectedDevicesMetrics) // Sort and slice for Top 5 @@ -235,8 +281,17 @@ const sortedCpu = (_data?.cpu || []).sort(sortByValueDesc).slice(0, 5); const sortedMemory = (_data?.memory || []).sort(sortByValueDesc).slice(0, 5); - this.devicesCPUChartOption1 = this.getHorizontalBarChartOptions('CPU %', sortedCpu, '#3f51b5'); - this.devicesMemoryChartOption1 = this.getHorizontalBarChartOptions('Memory %', sortedMemory, '#00c698'); + if (sortedCpu.length > 0) { + this.devicesCPUChartOption1 = this.getHorizontalBarChartOptions('CPU %', sortedCpu, '#3f51b5'); + } else { + this.devicesCPUChartOption1 = this._chartOptions.getNoDataChartOptions(); + } + + if (sortedMemory.length > 0) { + this.devicesMemoryChartOption1 = this.getHorizontalBarChartOptions('Memory %', sortedMemory, '#00c698'); + } else { + this.devicesMemoryChartOption1 = this._chartOptions.getNoDataChartOptions(); + } // Throughput let { names, inbound, outbound } = _data?.network || {}; @@ -256,7 +311,11 @@ networkData.sort((a, b) => b.total - a.total); const top5Network = networkData.slice(0, 5); - this.devicesThroughputChartOption1 = this.getHorizontalThroughputChartOptions(top5Network); + if (top5Network.length > 0) { + this.devicesThroughputChartOption1 = this.getHorizontalThroughputChartOptions(top5Network); + } else { + this.devicesThroughputChartOption1 = this._chartOptions.getNoDataChartOptions(); + } } getHorizontalBarChartOptions(label: string, metrics: any[], color: string): EChartsOption { Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/add-notification-channel.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/add-notification-channel.html (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/add-notification-channel.html (working copy) @@ -1,197 +1,176 @@ -

Notification Channel

+
+

Notification Channel

+ +
-
-
- - - - @if (nChannelForm.get('name')?.invalid && nChannelForm.get('name')?.touched) { + +
+
+ + + + @if (nChannelForm.get('name')?.invalid && nChannelForm.get('name')?.touched) { @if (nChannelForm.get('name')?.errors?.['required']) { - Name is required. + Name is required. } @else if (nChannelForm.get('name')?.errors) { - Invalid name format. + Invalid name format. } - } - -
-
- - - - @for (_type of ntype; track _type) { - {{ _type.displayName }} } - - @if (nChannelForm.get('type')?.invalid && nChannelForm.get('type')?.touched) { + +
+
+ + + + @for (_type of nTypes; track _type) { + {{ _type.displayName }} + } + + @if (nChannelForm.get('type')?.invalid && nChannelForm.get('type')?.touched) { @if (nChannelForm.get('type')?.errors?.['required']) { - Notification type is required. + Type is required. } @else { - Invalid notification format. + Invalid type. } - } - + } + +
-
+ +
Use this Notification for all alerts.
+ @if (this.nChannelForm.value.type === 'email') { +
- - - Send a single email to all recipients. -
-
@for (_user of adminUsers; track _user) { - {{ _user.username }} + {{ _user.username }} } @if (nChannelForm.get('recipients')?.invalid && nChannelForm.get('recipients')?.touched) { - - @if (nChannelForm.get('recipients')?.errors?.['required']) { - Recipient is required. - } @else { - Invalid recipient. - } - + + @if (nChannelForm.get('recipients')?.errors?.['required']) { + Recipient is required. + } @else { + Invalid recipient. + } + }
-
- +
+ + + Send a single email to all recipients.
+
+
+ +
} @else { -
+
+
- + @if (nChannelForm.get('url')?.invalid && nChannelForm.get('url')?.touched) { - - @if (nChannelForm.get('url')?.errors?.['required']) { - URL is required. - } @else if (nChannelForm.get('url')?.errors) { - Invalid url format. - } - + + @if (nChannelForm.get('url')?.errors?.['required']) { + URL is required. + } @else if (nChannelForm.get('url')?.errors) { + Invalid url format. + } + }
-
+
@for (_method of httpMethods; track _method) { - {{ _method.displayName }} + {{ _method.displayName }} } @if (nChannelForm.get('httpMethod')?.invalid && nChannelForm.get('httpMethod')?.touched) { - - @if (nChannelForm.get('httpMethod')?.errors?.['required']) { - HTTP Method is required. - } @else { - Invalid HTTP method. - } - + + @if (nChannelForm.get('httpMethod')?.errors?.['required']) { + HTTP Method is required. + } @else { + Invalid HTTP method. + } + }
+
+ +
+

Authentication

+
+
- + HTTP Basic Authorization @if (nChannelForm.get('username')?.invalid && nChannelForm.get('username')?.touched) { - - @if (nChannelForm.get('username')?.errors?.['required']) { - Username is required. - } @else if (nChannelForm.get('username')?.errors) { - Invalid username format. - } - + + @if (nChannelForm.get('username')?.errors?.['required']) { + Username is required. + } @else if (nChannelForm.get('username')?.errors) { + Invalid username format. + } + }
- + HTTP Basic Authorization @if (nChannelForm.get('password')?.invalid && nChannelForm.get('password')?.touched) { - - @if (nChannelForm.get('password')?.errors?.['required']) { - Password is required. - } @else if (nChannelForm.get('password')?.errors) { - Invalid password format. - } - + + @if (nChannelForm.get('password')?.errors?.['required']) { + Password is required. + } @else if (nChannelForm.get('password')?.errors) { + Invalid password format. + } + }
-
- -
+
+ +
+ +
} - - - + \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.html (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.html (working copy) @@ -1,14 +1,15 @@ -
- +
+ - Notification Channel +
+ +
-
- -
-
- +
+
@@ -16,7 +17,7 @@ @@ -26,30 +27,40 @@ - + - +
No. {{ i | globalSerial }} Channel Name - {{ element.name }} + {{ element.name }} Default - @if (element.is_default) { +
+ @if (element.is_default) { - } @else { - - } + Default + } @else { + + } +
Action -
- +
+
No results found. +
+ + No notification channels found +
+
-
+ -
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.scss (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.scss (working copy) @@ -0,0 +1,350 @@ +// Grid Layout styles for Add Channel Dialog +.form-grid-2-col { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + align-items: start; + + @media (max-width: 768px) { + grid-template-columns: 1fr; + } +} + +.full-width { + grid-column: 1 / -1; +} + +.form-field-wrapper { + display: flex; + flex-direction: column; + gap: 4px; + width: 100%; + + .form-label { + font-size: 13px; + font-weight: 500; + color: #444; // Slightly darker for better readability + margin-bottom: 2px; + } + + mat-form-field { + width: 100%; + } + + &.toggle-wrapper { + flex-direction: row !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 12px !important; + + .form-label { + flex: 0 0 auto !important; + width: auto !important; + margin-bottom: 0 !important; + margin-right: 0 !important; + } + + mat-slide-toggle { + flex: 0 0 auto !important; + width: auto !important; + margin-top: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + + mat-hint { + flex: 1 1 auto !important; // Allow growing to fill space, but wrapping + margin-left: 0 !important; + font-size: 12px; + color: #757575; + white-space: normal !important; // Allow wrapping + line-height: 1.2; + } + } +} + +// Dialog Header +.dialog-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 24px; // Slight reduction + border-bottom: 1px solid #eee; + + h2 { + margin: 0; + font-size: 18px; + font-weight: 600; + } + + button { + color: #666; + } +} + +// Dialog Content Overrides +mat-dialog-content { + overflow-x: hidden !important; + max-height: 80vh !important; + padding: 16px 24px !important; // Reduced vertical padding + + form { + margin: 0; + display: flex; + flex-direction: column; + gap: 12px; // Reduced from 24px + } +} + +// Dialog Actions +mat-dialog-actions { + padding: 12px 24px !important; + border-top: 1px solid #eee; + justify-content: flex-end; + margin-bottom: 0; +} + + +// Visual Grouping Container (Minimalist Redesign) +.settings-container { + background-color: transparent; // Remove background + border: none; // Remove border + border-radius: 0; + padding: 0; // Remove padding + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 8px; + + .section-header { + margin-bottom: 8px; + border-bottom: 1px solid #e0e0e0; // Subtle divider + padding-bottom: 4px; + + h3 { + margin: 0; + font-size: 11px; // Small, elegant font size + font-weight: 600; + color: #5f6368; // Subtle gray + text-transform: uppercase; + letter-spacing: 0.8px; // Increased spacing for readability + } + } + + .section-sub-header { + margin-top: 8px; + margin-bottom: 8px; + + h4 { + margin: 0; + font-size: 13px; + font-weight: 500; + color: #555; + } + } + + .button-container-center { + margin-top: 8px; + } +} + + +.mt-4 { + margin-top: 24px; +} + +.button-container { + display: flex; + justify-content: flex-end; +} + +.button-container-center { + display: flex; + justify-content: flex-start; // Align test button to left inside container looks better usually, or keep center + + // Actually, right aligned is often better for actions +} + +// Page Container styles (Copied from device-config-overview) +.page-container { + padding: 16px; + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + box-sizing: border-box; +} + +mat-card.table-card { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + border-radius: 8px; + background: #fff; + border: none; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + + &.appearance-outlined { + border: 1px solid #e0e0e0; + box-shadow: none; + } + + mat-card-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + border-bottom: 1px solid #f0f0f0; + + .header-actions { + display: flex; + gap: 8px; + + &.full-width-header { + width: 100%; + justify-content: flex-end; + } + + button { + display: flex; + align-items: center; + gap: 8px; + + fa-icon { + font-size: 14px; + } + } + } + } + + mat-card-content { + flex: 1; + display: flex; + flex-direction: column; + padding: 0; + overflow: hidden; + + .table-wrapper { + flex: 1; + overflow: auto; + } + } +} + +table.modern-table { + width: 100%; + + th.mat-header-cell { + background-color: #f8f9fa; + color: #5f6368; + font-weight: 600; + font-size: 13px; + text-transform: uppercase; + padding: 0 16px; + height: 48px; + border-bottom: 1px solid #e0e0e0; + } + + td.mat-cell { + padding: 0 16px; + font-size: 14px; + color: #3c4043; + height: 48px; + border-bottom: 1px solid #f1f3f4; + } + + tr.mat-row:hover { + background-color: #f8f9fa; + color: #1967d2; + } + + .row-link { + color: #1967d2; + text-decoration: none; + cursor: pointer; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } + + .secondary-text { + color: #5f6368; + } + + .status-cell { + display: flex; + align-items: center; + gap: 8px; + font-weight: 500; + + .success-icon { + color: #137333; + } + + .error-icon { + color: #d32f2f; + } + + .status-text { + &.success { + color: #137333; + } + + &.error { + color: #d32f2f; + } + } + } + + .row-action { + display: flex; + gap: 8px; + align-items: center; + + button { + width: 32px; + height: 32px; + line-height: 32px; + + fa-icon { + font-size: 14px; + color: #5f6368; + } + + &:hover fa-icon { + color: #1967d2; + } + + &[color="warn"] fa-icon { + color: #d32f2f; // specific red for warn + } + + &[color="warn"]:hover fa-icon { + color: #b71c1c; // darker red on hover + } + } + } + + /* No Data Row */ + .no-data-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 48px 0; + color: #757575; + gap: 12px; + + fa-icon { + font-size: 40px; + opacity: 0.5; + } + + span { + font-size: 14px; + } + } +} \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.ts (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-channels/notification-channels.ts (working copy) @@ -1,15 +1,15 @@ -import {ChangeDetectorRef, Component, inject, OnInit, ViewChild} from '@angular/core'; -import {SharedModule} from '../../../shared/shared-module'; -import {SystemService} from '../../../services/system-service'; -import {MatTableDataSource} from '@angular/material/table'; -import {take, takeUntil} from 'rxjs/operators'; -import {NotificationService} from '../../../services/notification'; -import {Confirmation} from '../../../services/confirmation'; -import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog'; -import {FormBuilder, FormGroup, Validators} from '@angular/forms'; -import {Subject} from 'rxjs'; -import {MatPaginator} from '@angular/material/paginator'; -import {GlobalSerialPipe} from '../../../pipes/global-serial-pipe'; +import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core'; +import { SharedModule } from '../../../shared/shared-module'; +import { SystemService } from '../../../services/system-service'; +import { MatTableDataSource } from '@angular/material/table'; +import { take, takeUntil } from 'rxjs/operators'; +import { NotificationService } from '../../../services/notification'; +import { Confirmation } from '../../../services/confirmation'; +import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { MatPaginator } from '@angular/material/paginator'; +import { GlobalSerialPipe } from '../../../pipes/global-serial-pipe'; @Component({ selector: 'app-notification-channels', @@ -113,7 +113,8 @@ @Component({ selector: 'add-notification-channel', templateUrl: './add-notification-channel.html', - imports: [SharedModule] + imports: [SharedModule], + styleUrl: './notification-channels.scss' }) export class AddNotificationChannelDialog implements OnInit { @@ -121,14 +122,14 @@ readonly data = inject(MAT_DIALOG_DATA); readonly dialogRef = inject(MatDialogRef); - ntype = [ - {value: 'email', displayName: 'Email'}, - {value: 'webhook', displayName: 'WebHook'}, + nTypes = [ + { value: 'email', displayName: 'Email' }, + { value: 'webhook', displayName: 'WebHook' }, ] httpMethods = [ - {value: 'POST', displayName: 'POST'}, - {value: 'PUT', displayName: 'PUT'}, + { value: 'POST', displayName: 'POST' }, + { value: 'PUT', displayName: 'PUT' }, ] adminUsers: any = []; @@ -339,4 +340,8 @@ urlControl?.updateValueAndValidity(); httpMethodControl?.updateValueAndValidity(); } + + onTypeChange() { + // Logic handled by valueChanges subscription + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.html (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.html (working copy) @@ -1,158 +1,139 @@ -
- - - SMTP Settings - +
+ -
-
- - + + +
+

Server Configuration

+
-
- - - - @if (notificationForm.get('host')?.invalid && notificationForm.get('host')?.touched) { +
+
+ + +
+ +
+ + + + @if (notificationForm.get('host')?.invalid && notificationForm.get('host')?.touched) { @if (notificationForm.get('host')?.errors?.['required']) { - SMTP server is required. + SMTP server is required. } @else if (notificationForm.get('host')?.errors) { - Invalid SMTP server format. + Invalid SMTP server format. } - } - -
+ } + +
-
- - - - @if (notificationForm.get('port')?.invalid && notificationForm.get('port')?.touched) { +
+ + + + @if (notificationForm.get('port')?.invalid && notificationForm.get('port')?.touched) { @if (notificationForm.get('port')?.errors?.['required']) { - Port number is required. + Port number is required. } @else if (notificationForm.get('port')?.errors) { - Invalid port number, should range from 0-65535. + Invalid port number, should range from 0-65535. } - } - + } + +
-
- - - - @if (notificationForm.get('user')?.invalid && notificationForm.get('user')?.touched) { + +
+

Authentication

+ +
+ +
+
+ + + + @if (notificationForm.get('user')?.invalid && notificationForm.get('user')?.touched) { @if (notificationForm.get('user')?.errors?.['required']) { - User is required. + User is required. } @else if (notificationForm.get('user')?.errors) { - Invalid user format. + Invalid user format. } - } - -
+ } + +
-
- - - - @if (notificationForm.get('password')?.invalid && notificationForm.get('password')?.touched) { +
+ + + + @if (notificationForm.get('password')?.invalid && notificationForm.get('password')?.touched) { @if (notificationForm.get('password')?.errors?.['required']) { - Password is required. + Password is required. } @else if (notificationForm.get('password')?.errors) { - Invalid password format. + Invalid password format. } - } - + } + +
-
- - - - @if (notificationForm.get('from_address')?.invalid && notificationForm.get('from_address')?.touched) { + +
+

Sender Information

+ +
+ +
+
+ + + + @if (notificationForm.get('from_address')?.invalid && notificationForm.get('from_address')?.touched) { @if (notificationForm.get('from_address')?.errors?.['required']) { - Sender Email is required. + Sender Email is required. } @else if (notificationForm.get('from_address')?.errors) { - Invalid email format. + Invalid email format. } - } - -
+ } + +
-
- - - - @if (notificationForm.get('from_name')?.invalid && notificationForm.get('from_name')?.touched) { +
+ + + + @if (notificationForm.get('from_name')?.invalid && notificationForm.get('from_name')?.touched) { @if (notificationForm.get('from_name')?.errors?.['required']) { - Sender Name is required. + Sender Name is required. } @else if (notificationForm.get('from_name')?.errors) { - Invalid sender name format. + Invalid sender name format. } - } - + } + +
- +
+ +
-
+
\ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.scss (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/notification-settings/notification-settings.scss (working copy) @@ -0,0 +1,105 @@ +.page-container { + padding: 16px; + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + box-sizing: border-box; +} + +mat-card.table-card { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + border-radius: 8px; + background: #fff; + border: none; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + + &.appearance-outlined { + border: 1px solid #e0e0e0; + box-shadow: none; + } + + mat-card-content { + flex: 1; + display: flex; + flex-direction: column; + padding: 16px; // Reduced padding + overflow: auto; + } +} + +.common-form { + max-width: 1200px; + width: 100%; +} + +.form-grid-2-col { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; // Reduced gap + align-items: start; + + @media (max-width: 768px) { + grid-template-columns: 1fr; + } +} + +.full-width { + grid-column: 1 / -1; +} + +.form-field-wrapper { + display: flex; + flex-direction: column; + gap: 4px; // Reduced gap + width: 100%; + + .form-label { + font-size: 14px; + font-weight: 500; + color: var(--mat-sys-on-surface); + } + + mat-form-field { + width: 100%; + } + + // Toggle specific styles + &.toggle-wrapper { + flex-direction: row; + align-items: center; + gap: 12px; + + .form-label { + margin-bottom: 0; // Remove bottom margin if any + } + + mat-slide-toggle { + margin-top: 0; + } + } +} + +.section-header { + margin-bottom: 12px; // Reduced margin + + h3 { + margin: 0 0 8px 0; // Reduced margin + font-size: 16px; + font-weight: 500; + color: var(--mat-sys-on-surface); + } +} + +.mt-4 { + margin-top: 24px; // Reduced margin +} + +.button-container { + display: flex; + justify-content: flex-end; + margin-top: 16px; // Reduced margin +} \ No newline at end of file Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/auth.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/auth.ts (revision 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/auth.ts (working copy) @@ -1,13 +1,13 @@ -import {Injectable} from '@angular/core'; -import {BehaviorSubject, catchError, Observable, throwError} from 'rxjs'; -import {Router} from '@angular/router'; -import {Storage} from './storage' -import {ErrorResponse, User} from '../models/user'; -import {HttpService} from './http'; -import {map} from 'rxjs/operators'; -import {URLS} from '../constants/api_urls'; -import {NotificationService} from './notification'; -import {MatDialog} from '@angular/material/dialog'; +import { Injectable } from '@angular/core'; +import { BehaviorSubject, catchError, Observable, throwError } from 'rxjs'; +import { Router } from '@angular/router'; +import { Storage } from './storage' +import { ErrorResponse, User } from '../models/user'; +import { HttpService } from './http'; +import { map } from 'rxjs/operators'; +import { URLS } from '../constants/api_urls'; +import { NotificationService } from './notification'; +import { MatDialog } from '@angular/material/dialog'; @Injectable({ providedIn: 'root' @@ -80,12 +80,12 @@ this._isAuthenticating.next(true); return this.http - .post(URLS.LOGIN_URL, formData, {isFormData: true}) + .post(URLS.LOGIN_URL, formData, { isFormData: true }) .pipe( map((response: User | ErrorResponse | any) => { - if ('error_code' in response && response.error_code !== 0) { + if (('error_code' in response && response.error_code !== 0) || ('code' in response && response.code !== 0)) { this._isAuthenticating.next(false); - throw new Error(response.msg); + throw new Error(response.msg || response.message); } // ToDo: Remove the hardcode with API update. if (!('roles' in response)) { @@ -165,11 +165,11 @@ getUserAuthorization(username: string) { const payload: any = new FormData(); payload.append('action', 'GetRoleByUsername'); - payload.append('options', JSON.stringify({"username": username})); - return this.http.post(URLS.GET_USER_AUTHORIZATION_URL, payload, { - csrf: true, - isFormData: true, - csrfInFormData: false - }) + payload.append('options', JSON.stringify({ "username": username })); + return this.http.post(URLS.GET_USER_AUTHORIZATION_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: false + }) } } 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 2830) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts (working copy) @@ -68,7 +68,7 @@ solidIcons.faPause, solidIcons.faEnvelope, solidIcons.faChevronDown, solidIcons.faPlay, solidIcons.faPlusCircle, solidIcons.faPlus, solidIcons.faFileImport, solidIcons.faCheckCircle, solidIcons.faExclamationCircle, solidIcons.faExclamationTriangle, solidIcons.faQuestion, - solidIcons.faDownload, solidIcons.faFolderTree, solidIcons.faRotateRight, solidIcons.faExchangeAlt, + solidIcons.faDownload, solidIcons.faFolderTree, solidIcons.faRotateRight, solidIcons.faExchangeAlt, solidIcons.faTimes, ]; const customRegularIcons = [