Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.html (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.html (working copy) @@ -1 +1,210 @@ -

admin-aaa works!

+
+ + + AAA Settings + + +
+
+ + +
+
+ + +
+
+ + + + @for (_auth of authMethod; track _auth) { + {{ _auth.displayName }} + } + + @if (aaaForm.get('method')?.invalid && aaaForm.get('method')?.touched) { + + @if (aaaForm.get('method')?.errors?.['required']) { + Method is required. + } @else { + Invalid method format. + } + + } + +
+ +
+ + + + + AAA - es01 + + +
+
+ + + + @if (esForm1.get('host_name')?.invalid && esForm1.get('host_name')?.touched) { + + @if (esForm1.get('host_name')?.errors?.['required']) { + Hostname is required. + } @else { + Invalid hostname format. + } + + } + +
+
+ + + + @if (esForm1.get('port')?.invalid && esForm1.get('port')?.touched) { + + @if (esForm1.get('port')?.errors?.['required']) { + Port is required. + } @else { + Port value must be between 0 and 65535. + } + + } + +
+
+ + + + @if (esForm1.get('secret')?.invalid && esForm1.get('secret')?.touched) { + + @if (esForm1.get('secret')?.errors?.['required']) { + Secret is required. + } @else { + Invalid secret format. + } + + } + +
+
+      + +
+
+ + + + + AAA - es02 + + +
+
+ + + + @if (esForm2.get('host_name')?.invalid && esForm2.get('host_name')?.touched) { + + @if (esForm2.get('host_name')?.errors?.['required']) { + Hostname is required. + } @else { + Invalid hostname format. + } + + } + +
+
+ + + + @if (esForm2.get('port')?.invalid && esForm2.get('port')?.touched) { + + @if (esForm2.get('port')?.errors?.['required']) { + Port is required. + } @else { + Port value must be between 0 and 65535. + } + + } + +
+
+ + + + @if (esForm2.get('secret')?.invalid && esForm2.get('secret')?.touched) { + + @if (esForm2.get('secret')?.errors?.['required']) { + Secret is required. + } @else { + Invalid secret format. + } + + } + +
+
+      + +
+
+ + +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.scss (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.scss (working copy) @@ -0,0 +1,22 @@ +.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/admin-aaa/admin-aaa.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.ts (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/admin-aaa/admin-aaa.ts (working copy) @@ -1,11 +1,255 @@ -import { Component } from '@angular/core'; +import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; +import {SharedModule} from '../../../shared/shared-module'; +import {take} from 'rxjs/operators'; +import {NotificationService} from '../../../services/notification'; +import {SystemService} from '../../../services/system-service'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {Confirmation} from '../../../services/confirmation'; @Component({ selector: 'app-admin-aaa', - imports: [], + imports: [SharedModule], templateUrl: './admin-aaa.html', styleUrl: './admin-aaa.scss' }) -export class AdminAaa { +export class AdminAaa implements OnInit { + aaaForm: FormGroup; + esForm1: FormGroup; + esForm2: FormGroup; + + authMethod: any = [ + {value: 'radius', displayName: 'RADIUS'}, + {value: 'tac_x', displayName: 'TAC_X'}, + ] + isAAAES1: boolean = false; + isAAAES2: boolean = false; + + constructor( + private cdRef: ChangeDetectorRef, + private notification: NotificationService, + private systemService: SystemService, + private formBuilder: FormBuilder, + private confirmationService: Confirmation + ) { + this.aaaForm = this.formBuilder.group({ + enable_aaa: [false,], + enable_aaa_authorize: [false,], + method: ['radius',], + }); + + this.esForm1 = this.formBuilder.group({ + host_name: ['', [Validators.required]], + port: [1812, [Validators.required, Validators.min(0), Validators.max(65535)]], + secret: [''] + }) + + this.esForm2 = this.formBuilder.group({ + host_name: ['', [Validators.required]], + port: [49, [Validators.required, Validators.min(0), Validators.max(65535)]], + secret: [''] + }) + } + + ngOnInit() { + setTimeout(() => { + this.getAAASettings(); + }) + } + + getAAASettings() { + this.aaaForm.patchValue({ + enable_aaa: false, + enable_aaa_authorize: false, + method: 'radius' + }); + this.esForm1.patchValue({ + host_name: '', + port: 1812, + secret: '', + }); + this.esForm2.patchValue({ + host_name: '', + port: 49, + secret: '', + }); + this.isAAAES2 = false; + this.isAAAES2 = false; + this.systemService.getAAASettings() + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + this.aaaForm.patchValue(result); + if (result.admin_aaa_server && result.admin_aaa_server.length > 0) { + if (result.admin_aaa_server[0].server_id == "es01") { + this.esForm1.patchValue(result.admin_aaa_server[0]); + this.isAAAES1 = true; + } else if (result.admin_aaa_server[0].server_id == "es02") { + this.esForm2.patchValue(result.admin_aaa_server[0]); + this.isAAAES2 = true; + } + } + if (result.admin_aaa_server && result.admin_aaa_server.length > 1) { + if (result.admin_aaa_server[1].server_id == "es01") { + this.esForm1.patchValue(result.admin_aaa_server[1]); + this.isAAAES1 = true; + } else if (result.admin_aaa_server[1].server_id == "es02") { + this.esForm2.patchValue(result.admin_aaa_server[1]); + this.isAAAES2 = true; + } + } + this.cdRef.detectChanges(); + }, + error: (error: { message: string; }) => { + console.log(error); + this.notification.showError(error.message); + this.cdRef.detectChanges(); + } + }) + } + + updateAAASettings() { + if (this.aaaForm.invalid) { + console.log(this.aaaForm.value); + this.aaaForm.markAllAsTouched(); + return; + } + + let payload = new FormData(); + payload.set('post_data', JSON.stringify(this.aaaForm.value)); + this.systemService.updateAAASettings(payload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 0 && result[0]) { + this.notification.showSuccess(`AAA settings successfully!`); + this.getAAASettings(); + } else { + this.notification.showError(`Failed to update the AAA settings.`); + } + }, + error: (err: any) => { + this.notification.showError(`Failed to update the AAA settings.`); + } + }) + } + + updateESForm(serverId: string) { + let payload: any = {} + if (serverId === 'es01') { + if (this.esForm1.invalid) { + console.log(this.esForm1.value); + this.esForm1.markAllAsTouched(); + return; + } + payload = { + host_name: this.esForm1.value.host_name, + aaa_port: this.esForm1.value.port, + secret: this.esForm1.value.secret, + } + } else if (serverId === 'es02') { + if (this.esForm2.invalid) { + console.log(this.esForm2.value); + this.esForm2.markAllAsTouched(); + return; + } + payload = { + host_name: this.esForm2.value.host_name, + aaa_port: this.esForm2.value.port, + secret: this.esForm2.value.secret, + } + } + let rawPayload = new FormData(); + rawPayload.set('post_data', JSON.stringify(payload)); + if (serverId === 'es01') { + if (this.isAAAES1) { + this.updateAAAESServer('es01', payload); + } else { + payload["server_id"] = serverId; + this.addAAAESServer(payload); + } + } else if (serverId === 'es02') { + if (this.isAAAES2) { + this.updateAAAESServer('es02', payload); + } else { + payload["server_id"] = serverId; + this.addAAAESServer(payload); + } + } + } + + addAAAESServer(rawPayload: any) { + let payload = new FormData(); + payload.set('post_data', JSON.stringify(rawPayload)); + this.systemService.addAAAESServer(payload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 0 && result[0]) { + this.notification.showSuccess(`${rawPayload.host_name} added successfully!`); + this.getAAASettings(); + } else { + this.notification.showError(`Failed to add the ${rawPayload.host_name} settings.`); + } + }, + error: (err: any) => { + this.notification.showError(`Failed to add the ${rawPayload.host_name} settings.`); + } + }) + } + + updateAAAESServer(serverId: string, rawPayload: any) { + let payload = new FormData(); + payload.set('post_data', JSON.stringify(rawPayload)); + this.systemService.updateAAAESServer(serverId, payload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 0 && result[0]) { + this.notification.showSuccess(`${serverId} updated successfully!`); + this.getAAASettings(); + } else { + this.notification.showError(`Failed to update the ${serverId} settings.`); + } + }, + error: (err: any) => { + this.notification.showError(`Failed to update the ${serverId} settings.`); + } + }) + } + + deleteAAAESSettings(serverId: string) { + let confirmMsg = `Are you sure you want to clear "${serverId}" configuration? This action cannot be undone.` + this.confirmationService.openConfirmDialog({ + title: `Clear ${serverId} configuration?`, + message: confirmMsg, + confirmButtonText: 'Yes, Clear It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe((deleteIt: boolean) => { + if (deleteIt) { + let rawPayload = new FormData(); + rawPayload.set('pk', JSON.stringify({'server_id': serverId})); + this.systemService.deleteAAAESSettings(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + // ToDo: Backend fix required. + this.notification.showSuccess(`${serverId} cleared successfully!`); + this.getAAASettings(); + }, + error: (err: any) => { + if (err?.status === 200) { + // ToDo: Backend fix required. + this.notification.showSuccess(`${serverId} cleared successfully!`); + this.getAAASettings(); + } else { + this.notification.showError('Clear failed.'); + } + } + }) + } + }); + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/add-dns-server.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/add-dns-server.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/add-dns-server.html (working copy) @@ -0,0 +1,74 @@ +

Add DNS Sever

+ +
+
+ + + IPv4 + IPv6 + +
+ @if (dnsForm.get('type')?.value == 'v4') { +
+ + + + @if (dnsForm.get('ip')?.invalid && dnsForm.get('ip')?.touched) { + + @if (dnsForm.get('ip')?.errors?.['required']) { + IPv4 address is required. + } @else if (dnsForm.get('ip')?.errors?.['ipv4']) { + Invalid IPv4 address format. + } + + } + +
+ } @else { +
+ + + + @if (dnsForm.get('ip')?.invalid && dnsForm.get('ip')?.touched) { + + @if (dnsForm.get('ip')?.errors?.['required']) { + IPv6 address is required. + } @else if (dnsForm.get('ip')?.errors?.['ipv6']) { + Invalid IPv6 address format. + } + + } + +
+ } +
+ + + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.html (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.html (working copy) @@ -1 +1,140 @@ -

network works!

+
+ + + Interfaces + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{ i + 1 }} Name + {{ element.interface_name }} + Interface IP {{ element.addresses[0].ip + " - " + element.addresses[0].mask_prefix }} Type {{ element.inf_type == 'mgmt' ? 'Management Interface' : element.inf_type }} Action +
+ +
+
No results found.
+
+ + + + + DNS + + +
+ +
+
+ + + + + + + + + + + + + + + + + + +
No. {{ i + 1 }} Interface IP {{ element.server_ip }} Action +
+ +
+
No results found.
+
+ + + + + Default Route + + +
+
+ + + + @if (routeForm.get('ipv4')?.invalid && routeForm.get('ipv4')?.touched) { + + @if (routeForm.get('ipv4')?.errors?.['required']) { + IPv4 address is required. + } @else if (routeForm.get('ipv4')?.errors?.['ipv4']) { + Invalid IPv4 address format. + } + + } + +
+
+ + + + @if (routeForm.get('ipv6')?.invalid && routeForm.get('ipv6')?.touched) { + + @if (routeForm.get('ipv6')?.errors?.['required']) { + IPv6 address is required. + } @else if (routeForm.get('ipv6')?.errors?.['ipv6']) { + Invalid IPv6 address format. + } + + } + +
+
+      + +
+
+ + +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.scss (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.scss (working copy) @@ -0,0 +1,27 @@ +.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; +} + +.submit-button-wrapper { + display: flex; + justify-content: center; + margin-top: 20px; +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.ts (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/network.ts (working copy) @@ -1,11 +1,464 @@ -import { Component } from '@angular/core'; +import {ChangeDetectorRef, Component, inject, OnInit} from '@angular/core'; +import {SharedModule} from '../../../shared/shared-module'; +import {take} from 'rxjs/operators'; +import {MatTableDataSource} from '@angular/material/table'; +import {SystemService} from '../../../services/system-service'; +import {NotificationService} from '../../../services/notification'; +import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material/dialog'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {CustomValidators} from '../../../utils/custom-validators'; +import {Confirmation} from '../../../services/confirmation'; @Component({ selector: 'app-network', - imports: [], + imports: [SharedModule], templateUrl: './network.html', styleUrl: './network.scss' }) -export class Network { +export class Network implements OnInit { + interfacesDataSource: any = new MatTableDataSource(); + interfacesColumns: Array = ['serial', 'name', 'ip', 'type', 'action']; + + dnsDataSource: any = new MatTableDataSource(); + dnsColumns: Array = ['serial', 'ip', 'action']; + + dialog = inject(MatDialog); + dialogConfig = new MatDialogConfig(); + + routeForm: FormGroup; + + constructor( + private cdRef: ChangeDetectorRef, + private systemService: SystemService, + private notification: NotificationService, + private formBuilder: FormBuilder, + private confirmationService: Confirmation, + ) { + this.routeForm = this.formBuilder.group({ + ipv4: ['', [CustomValidators.ipv4()]], + ipv6: ['', [CustomValidators.ipv6()]], + }) + } + + ngOnInit() { + setTimeout(() => { + this.getNetworkInterfaces(); + this.getDNSServers(); + this.getDefaultRoute(); + }) + } + + getNetworkInterfaces(): void { + this.interfacesDataSource = new MatTableDataSource(); + this.systemService.getNetworkInterfaces() + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 0) { + this.interfacesDataSource = new MatTableDataSource(result); + } + this.cdRef.detectChanges(); + }, + error: (error: { message: string; }) => { + console.log(error); + this.notification.showError(error.message); + this.cdRef.detectChanges(); + } + }) + } + + getDNSServers(): void { + this.dnsDataSource = new MatTableDataSource(); + this.systemService.getDNSServers() + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 0) { + this.dnsDataSource = new MatTableDataSource(result); + } + this.cdRef.detectChanges(); + }, + error: (error: { message: string; }) => { + console.log(error); + this.notification.showError(error.message); + this.cdRef.detectChanges(); + } + }) + } + + getDefaultRoute(): void { + this.systemService.getDefaultRoutes() + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result) { + this.routeForm.patchValue(result); + } + this.cdRef.detectChanges(); + }, + error: (error: { message: string; }) => { + console.log(error); + this.notification.showError(error.message); + this.cdRef.detectChanges(); + } + }) + } + + showInterfaceInfo(_interface: any): void { + this.dialogConfig.width = '45%'; + this.dialogConfig.data = _interface; + const dialogRef = this.dialog.open(ShowInterfaceDetails, this.dialogConfig); + dialogRef.afterClosed().subscribe((result: boolean) => { + }) + } + + updateNetworkInterface(_interface: any): void { + this.dialogConfig.width = '45%'; + this.dialogConfig.data = _interface; + const dialogRef = this.dialog.open(UpdateInterfaceDetails, this.dialogConfig); + dialogRef.afterClosed().subscribe((isUpdated: boolean) => { + if (isUpdated) { + this.getNetworkInterfaces(); + } + }) + } + + addDNSServer(): void { + this.dialogConfig.width = '45%'; + const dialogRef = this.dialog.open(AddDNSServerDetails, this.dialogConfig); + dialogRef.afterClosed().subscribe((isUpdated: boolean) => { + if (isUpdated) { + this.getDNSServers(); + } + }) + } + + deleteDNSServer(server: any): void { + let confirmMsg = `Are you sure you want to delete the DNS entry - ${server?.server_ip}"? This action cannot be undone.` + this.confirmationService.openConfirmDialog({ + title: `Delete DNS Server?`, + message: confirmMsg, + confirmButtonText: 'Yes, Delete It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe((result: boolean) => { + if (result) { + let payload: any = { + "server_ip": {} + } + if (CustomValidators.isIPv4(server?.server_ip)) { + payload.server_ip = {ipv4: server?.server_ip}; + } else if (CustomValidators.isIPv6(server?.server_ip)) { + payload.server_ip = {ipv6: server?.server_ip}; + } + let rawPayload = new FormData(); + rawPayload.set('pk', JSON.stringify(payload)); + this.systemService.deleteDNSServer(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + this.notification.showSuccess(`DNS server deleted successfully!`); + this.getDNSServers(); + }, + error: (err: any) => { + // ToDo: Fix in backend + if (err?.status === 200) { + // ToDo: Backend fix required. + this.notification.showSuccess(`DNS server deleted successfully!`); + this.getDNSServers(); + } else { + this.notification.showError(`Failed to delete the DNS server.`); + } + } + }) + } + }); + } + + clearDefaultRoute(): void { + let confirmMsg = `Are you sure you want to clear the Network Routes"? This action cannot be undone.` + this.confirmationService.openConfirmDialog({ + title: `Clear Network Routes?`, + message: confirmMsg, + confirmButtonText: 'Yes, Clear It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe((result: boolean) => { + if (result) { + let rawPayload = new FormData(); + rawPayload.set('action', 'Clear') + rawPayload.set('options', JSON.stringify({"__pk_list": []})); + this.systemService.clearDefaultRoute(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (result[0]) { + this.notification.showSuccess(`Routes cleared successfully!`); + } else { + this.notification.showError(`Failed to clear the routes.`); + } + } + }, + error: () => { + this.notification.showError(`Failed to update the routes.`); + } + }) + } + }); + } + + updateDefaultRoute(): void { + if (this.routeForm.invalid) { + console.log(this.routeForm.value); + this.routeForm.markAllAsTouched(); + return; + } + let rawPayload = new FormData(); + rawPayload.set('post_data', JSON.stringify({ + gateway_ip: {ipv4: this.routeForm.value.ipv4, ipv6: this.routeForm.value.ipv6}, + })); + this.systemService.updateDefaultRoute(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (result[0]) { + this.notification.showSuccess(`Routes updated successfully!`); + } else { + this.notification.showError(`Failed to update the routes.`); + } + } + }, + error: () => { + this.notification.showError(`Failed to update the routes.`); + } + }) + } } + +@Component({ + selector: 'show-interface-details', + templateUrl: './show-interface-details.html', + imports: [SharedModule] +}) +export class ShowInterfaceDetails { + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + + interfaceDataSource: any = new MatTableDataSource(); + interfaceColumns: Array = ['key', 'value']; + + constructor() { + this.interfaceDataSource = new MatTableDataSource([ + {key: 'Interface Name', value: this.data?.interface_name}, + {key: 'Interface Type', value: this.data?.inf_type}, + {key: 'MAC', value: this.data?.mac}, + {key: 'MTU', value: this.data?.mtu}, + {key: 'IP', value: this.data?.addresses[0]?.ip}, + {key: 'Netmask', value: this.data?.addresses[0]?.mask_prefix}, + ]); + } + + onCancel(): void { + this.dialogRef.close(false); + } +} + +@Component({ + selector: 'update-interface-details', + templateUrl: './update-interface-details.html', + imports: [SharedModule] +}) +export class UpdateInterfaceDetails { + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + interfaceForm: FormGroup; + + constructor( + private formBuilder: FormBuilder, + private systemService: SystemService, + private notification: NotificationService,) { + this.interfaceForm = this.formBuilder.group({ + 'ipv4': ['', [CustomValidators.ipv4()]], + 'netmask': ['', [CustomValidators.ipv4()]], + 'ipv6': ['', [CustomValidators.ipv6()]], + 'mask_prefix': ['', [CustomValidators.ipv6Prefix()]], + }); + // ToDo: Update the logic in backend if no IPv4, this will break. + if (this.data.addresses && this.data.addresses.length > 0) { + this.interfaceForm.patchValue({ + ipv4: this.data.addresses[0]?.ip, + netmask: this.data.addresses[0]?.mask_prefix, + }) + } + if (this.data.addresses && this.data.addresses.length > 1) { + this.interfaceForm.patchValue({ + ipv6: this.data.addresses[1]?.ip, + mask_prefix: this.data.addresses[1]?.mask_prefix, + }) + } + } + + onSubmit(): void { + if (this.interfaceForm.invalid) { + console.log(this.interfaceForm.value); + this.interfaceForm.markAllAsTouched(); + return; + } + let payload = { + ip: {}, + mask_prefix: {} + }; + if (CustomValidators.isIPv4(this.interfaceForm.value.ipv4)) { + payload.ip = {ipv4: this.interfaceForm.value.ipv4}; + payload.mask_prefix = {mask: this.interfaceForm.value.netmask}; + } + let rawPayload = new FormData(); + rawPayload.set('post_data', JSON.stringify(payload)); + + let addPayload = null; + if (this.interfaceForm.value.ipv6 !== '') { + let aPayload = { + interface: [{interface_name: this.data?.interface_name, _asso_idx: 0}], + ip: {ipv6: this.interfaceForm.value.ipv6}, + mask_prefix: {prefix: this.interfaceForm.value.mask_prefix}, + } + addPayload = new FormData(); + addPayload.set('post_data', JSON.stringify(aPayload)); + } + this.updateNetworkInterface(this.data.interface_name, 'ipv4', this.interfaceForm.value.ipv4, this.interfaceForm.value.netmask, rawPayload, addPayload); + } + + updateNetworkInterface(iName: any, ipType: any, ip: any, mask: any, rawPayload: any, addPayload: any = null): void { + this.systemService.updateNetworkInterface(iName, ipType, ip, mask, rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (result[0]) { + this.notification.showSuccess(`Network interface updated successfully!`); + if (addPayload === null) { + this.dialogRef.close(true); + } else { + this.updateInterfaceIPv6(addPayload); + } + } + } + }, + error: () => { + this.notification.showError(`Failed to update the network interface.`); + } + }) + } + + updateInterfaceIPv6(payload: any) { + this.systemService.addNetworkInterfaceIPv6(payload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (result[0]) { + this.notification.showSuccess(`Network interface updated successfully!`); + this.dialogRef.close(true); + } else { + this.notification.showError(`Failed - ${result[1]}.`); + } + } + }, + error: () => { + this.notification.showError(`Failed to update the network interface.`); + } + }) + } + + onCancel(): void { + this.dialogRef.close(false); + } +} + +@Component({ + selector: 'add-dns-server', + templateUrl: './add-dns-server.html', + imports: [SharedModule] +}) +export class AddDNSServerDetails implements OnInit { + readonly data = inject(MAT_DIALOG_DATA); + readonly dialogRef = inject(MatDialogRef); + dnsForm: FormGroup; + + constructor( + private formBuilder: FormBuilder, + private systemService: SystemService, + private notification: NotificationService, + ) { + this.dnsForm = this.formBuilder.group({ + type: ['v4', [Validators.required]], + ip: ['', [Validators.required]], + }); + + this.dnsForm.get('type')?.valueChanges.subscribe(ipType => { + const ipAddressControl = this.dnsForm.get('ip'); + if (ipAddressControl) { + ipAddressControl.clearValidators(); + const currentValidators = [Validators.required]; // ipAddress is always required + + if (ipType === 'v4') { + currentValidators.push(CustomValidators.ipv4()); + ipAddressControl.setValidators(currentValidators); + } else if (ipType === 'v6') { + currentValidators.push(CustomValidators.ipv6()); + ipAddressControl.setValidators(currentValidators); + } + ipAddressControl.updateValueAndValidity(); + } + }); + } + + ngOnInit(): void { + this.dnsForm.get('ip')?.updateValueAndValidity(); + } + + onSubmit(): void { + if (this.dnsForm.invalid) { + console.log(this.dnsForm.value); + this.dnsForm.markAllAsTouched(); + return; + } + + let payload: any = { + server_ip: {} + }; + if (this.dnsForm.value.type === 'v4') { + payload.server_ip = {ipv4: this.dnsForm.value.ip}; + } else if (this.dnsForm.value.type === 'v6') { + payload.server_ip = {ipv6: this.dnsForm.value.ip}; + } + let rawPayload = new FormData(); + rawPayload.set('post_data', JSON.stringify(payload)); + this.systemService.addDNSServer(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.length > 1) { + if (result[0]) { + this.notification.showSuccess(`DNS server added successfully!`); + this.dialogRef.close(true); + } else { + this.notification.showError(`Failed to update the DNS servers.`); + } + } + }, + error: () => { + this.notification.showError(`Failed to update the DNS servers.`); + } + }) + } + + onCancel(): void { + this.dialogRef.close(false); + } +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/show-interface-details.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/show-interface-details.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/show-interface-details.html (working copy) @@ -0,0 +1,21 @@ +

Interface - {{ data.interface_name }}

+ + + + + + + + + + +
{{ element.key }} {{ element.value }}
+ + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/update-interface-details.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/update-interface-details.html (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/network/update-interface-details.html (working copy) @@ -0,0 +1,107 @@ +

Update Interface - {{ data.interface_name }}

+ + +
+
+ + + + @if (interfaceForm.get('ipv4')?.invalid && interfaceForm.get('ipv4')?.touched) { + + @if (interfaceForm.get('ipv4')?.errors?.['required']) { + IPv4 address is required. + } @else if (interfaceForm.get('ipv4')?.errors?.['ipv4']) { + Invalid IPv4 address format. + } + + } + +
+
+ + + + @if (interfaceForm.get('netmask')?.invalid && interfaceForm.get('netmask')?.touched) { + + @if (interfaceForm.get('netmask')?.errors?.['required']) { + Netmask is required. + } @else if (interfaceForm.get('netmask')?.errors?.['ipv4']) { + Invalid Netmask format. + } + + } + +
+
+ + + + @if (interfaceForm.get('ipv6')?.invalid && interfaceForm.get('ipv6')?.touched) { + + @if (interfaceForm.get('ipv6')?.errors?.['required']) { + IPv6 address is required. + } @else if (interfaceForm.get('ipv6')?.errors?.['ipv6']) { + Invalid IPv6 address format. + } + + } + +
+
+ + + + @if (interfaceForm.get('mask_prefix')?.invalid && interfaceForm.get('mask_prefix')?.touched) { + + @if (interfaceForm.get('mask_prefix')?.errors?.['required']) { + Mask Prefix is required. + } @else if (interfaceForm.get('mask_prefix')?.errors?.['ipv4']) { + Invalid mask prefix format. + } + + } + +
+
+ + + + + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.html (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.html (working copy) @@ -1 +1,25 @@ -

system-update works!

+
+ + + Current Version + + + + + + + + + + +
{{ element.key }} {{ element.value }}
+ + + + + System Update + + + + +
Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.scss (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.scss (working copy) @@ -0,0 +1,22 @@ +.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/system-update/system-update.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.ts (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/sub-components/system-update/system-update.ts (working copy) @@ -1,11 +1,56 @@ -import { Component } from '@angular/core'; +import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; +import {SharedModule} from '../../../shared/shared-module'; +import {take} from 'rxjs/operators'; +import {SystemService} from '../../../services/system-service'; +import {NotificationService} from '../../../services/notification'; +import {MatTableDataSource} from '@angular/material/table'; @Component({ selector: 'app-system-update', - imports: [], + imports: [ + SharedModule + ], templateUrl: './system-update.html', styleUrl: './system-update.scss' }) -export class SystemUpdate { +export class SystemUpdate implements OnInit { + systemVersion: string = 'Unknown'; + systemUpdateDataSource: any = new MatTableDataSource(); + systemUpdateColumns: Array = ['key', 'value']; + + + constructor( + private cdRef: ChangeDetectorRef, + private systemService: SystemService, + private notification: NotificationService, + ) { + } + + ngOnInit() { + setTimeout(() => { + this.getSystemVersion(); + }) + } + + getSystemVersion() { + this.systemService.getSystemVersion() + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + if (result && result.data && result.data.version) { + this.systemVersion = result.data.version; + this.systemUpdateDataSource = new MatTableDataSource([ + {key: 'Version', value: result.data.version}, + ]); + } + this.cdRef.detectChanges(); + }, + error: (error: { message: string; }) => { + console.log(error); + this.notification.showError(error.message); + this.cdRef.detectChanges(); + } + }) + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts (working copy) @@ -55,5 +55,8 @@ ADD_AAA_ES_SERVER_URL: `${PREFIX}/api/cm/system/AdminAAAServer/_add`, UPDATE_AAA_ES_SERVER_URL: `${PREFIX}/api/cm/system/AdminAAAServer/_update/server_id`, UPDATE_AAA_SETTINGS_URL: `${PREFIX}/api/cm/system/AdminAAASettings/_update`, - + UPDATE_DEFAULT_ROUTE_URL: `${PREFIX}/api/cm/network/route/DefaultRoutingSetting/_update`, + CLEAR_DEFAULT_ROUTE_URL: `${PREFIX}/api/cm/network/route/DefaultRoutingSetting/_perform`, + ADD_DNS_SERVER_URL: `${PREFIX}/api/cm/network/dns/DNSServer/_add`, + ADD_INTERFACE_IP_DETAILS_URL: `${PREFIX}/api/cm/network/interface/InterfaceIP/_add`, } as const; // Makes properties readonly Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts (working copy) @@ -163,7 +163,7 @@ updateNetworkInterface(iName: any, ipType: any, ip: any, maskPrefix: any, payload: any) { let baseURL = URLS.UPDATE_INTERFACE_URL; - let finalURL = `${baseURL}/%5B%7B%22interface_name%22%3A%20%22${iName}%22%2C%20%22_asso_idx%22%3A%200%7D%5D/ip/%7B%22${ipType}%22%3A%20%22${ip}%22%7D/mask_prefix/${maskPrefix}`; + let finalURL = `${baseURL}/%5B%7B%22interface_name%22%3A%20%22${iName}%22%2C%20%22_asso_idx%22%3A%200%7D%5D/ip/%7B%22${ipType}%22%3A%20%22${ip}%22%7D/mask_prefix/%7B%22mask%22%3A%20%22${maskPrefix}%22%7D`; return this.http.post(finalURL, payload, { csrf: true, isFormData: true, @@ -208,4 +208,44 @@ csrfInFormData: true }); } + + updateDefaultRoute(payload: any) { + return this.http.post(URLS.UPDATE_DEFAULT_ROUTE_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }); + } + + clearDefaultRoute(payload: any) { + return this.http.post(URLS.CLEAR_DEFAULT_ROUTE_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }); + } + + deleteDNSServer(payload: any) { + return this.http.post(URLS.DELETE_DNS_SERVER_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }); + } + + addDNSServer(payload: any) { + return this.http.post(URLS.ADD_DNS_SERVER_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }); + } + + addNetworkInterfaceIPv6(payload: any) { + return this.http.post(URLS.ADD_INTERFACE_IP_DETAILS_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }); + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/utils/custom-validators.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/utils/custom-validators.ts (revision 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/utils/custom-validators.ts (working copy) @@ -28,6 +28,18 @@ }; } + static ipv6Prefix(): ValidatorFn { + const ipv6PrefixRegex = /^(([0-9a-fA-F]{1,4}:){0,7}([0-9a-fA-F]{1,4}|:)?)(\/([0-9]|[1-9][0-9]|1[0-2][0-8]))?$/; + + return (control: AbstractControl): ValidationErrors | null => { + const value = control.value; + if (!value) { + return null; + } + return ipv6PrefixRegex.test(value) ? null : { 'ipv6Prefix': true }; + }; + } + // Combined IP address validator static ipAddress(): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { @@ -49,12 +61,15 @@ } static isIPv6(ip: string): boolean { - const ipv6Regex = new RegExp( - '^((([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4}|:))|(([0-9a-fA-F]{1,4}:){6}(:[0-9a-fA-F]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9a-fA-F]{1,4}:){5}(((:[0-9a-fA-F]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9a-fA-F]{1,4}:){4}(((:[0-9a-fA-F]{1,4}){1,3})|((:[0-9a-fA-F]{0,1}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){3}(((:[0-9a-fA-F]{1,4}){1,4})|((:[0-9a-fA-F]{0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){2}(((:[0-9a-fA-F]{1,4}){1,5})|((:[0-9a-fA-F]{0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9a-fA-F]{1,4}:){1}(((:[0-9a-fA-F]{1,4}){1,6})|((:[0-9a-fA-F]{0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9a-fA-F]{1,4}){1,7})|((:[0-9a-fA-F]{0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?$' - ); + const ipv6Regex = /^(([0-9a-fA-F]{1,4}:){7}([0-9a-fA-F]{1,4}|:)|([0-9a-fA-F]{1,4}:){6}(:[0-9a-fA-F]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:)|([0-9a-fA-F]{1,4}:){5}((:[0-9a-fA-F]{1,4}){1,2}|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:)|([0-9a-fA-F]{1,4}:){4}((:[0-9a-fA-F]{1,4}){1,3}|(:[0-9a-fA-F]{1,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)|([0-9a-fA-F]{1,4}:){3}((:[0-9a-fA-F]{1,4}){1,4}|(:[0-9a-fA-F]{1,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)|([0-9a-fA-F]{1,4}:){2}((:[0-9a-fA-F]{1,4}){1,5}|(:[0-9a-fA-F]{1,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)|([0-9a-fA-F]{1,4}:){1}((:[0-9a-fA-F]{1,4}){1,6}|(:[0-9a-fA-F]{1,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)|:((:[0-9a-fA-F]{1,4}){1,7}|(:[0-9a-fA-F]{1,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))(%.+)?$/; return ipv6Regex.test(ip); } + static isIPv6Prefix(prefix: string): boolean { + const ipv6PrefixRegex = /^(([0-9a-fA-F]{1,4}:){0,7}([0-9a-fA-F]{1,4}|:)?)(\/([0-9]|[1-9][0-9]|1[0-2][0-8]))?$/; + return ipv6PrefixRegex.test(prefix); + } + static getIpVersion(ip: string): 'v4' | 'v6' | 'N/A' { if (CustomValidators.isIPv4(ip)) { return 'v4'; 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 2661) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/styles.scss (working copy) @@ -35,7 +35,8 @@ typography: $custom-typography, color: ( theme-type: light, - primary: mat.$azure-palette + primary: mat.$azure-palette, + tertiary: mat.$azure-palette, ), density: ( scale: 0 @@ -215,7 +216,7 @@ .form-label { font-weight: 500; - width: 150px; + width: 200px; text-align: right; } @@ -239,6 +240,12 @@ } } +.secondary-btn-center { + align-self: center; + min-width: 120px; + margin-top: 20px; +} + .button-container { display: flex; justify-content: flex-end; @@ -256,3 +263,13 @@ cursor: not-allowed; user-select: none; } + +.button-container-center { + display: flex; + justify-content: center; + align-items: center; +} + +.warning { + color: red !important; +}