refs #1567. New subnet field: 'dns'

deb-pkg
Manuel Aranda Rosales 2025-02-28 09:21:08 +01:00
parent 20452c83eb
commit a296706757
4 changed files with 105 additions and 82 deletions

View File

@ -2,10 +2,6 @@
width: 100%; width: 100%;
} }
form {
padding: 20px;
}
.spacing-container { .spacing-container {
margin-top: 20px; margin-top: 20px;
margin-bottom: 16px; margin-bottom: 16px;

View File

@ -1,38 +1,62 @@
<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} subred</h2> <h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} subred</h2>
<mat-dialog-content> <mat-dialog-content>
<div class="spacing-container"> <form [formGroup]="subnetForm">
<mat-form-field appearance="fill" class="full-width"> <div class="spacing-container">
<mat-label>Nombre</mat-label> <mat-form-field appearance="fill" class="full-width">
<input matInput [(ngModel)]="name" placeholder="Nombre de la subred" required> <mat-label>Nombre</mat-label>
</mat-form-field> <input matInput formControlName="name" placeholder="Nombre de la subred" required>
<mat-form-field appearance="fill" class="full-width"> <mat-error *ngIf="subnetForm.controls['name'].invalid">
<mat-label>Netmask</mat-label> El nombre de la subred es obligatorio.
<input matInput [(ngModel)]="netmask" placeholder="Netmask" required> </mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Dirección IP</mat-label>
<input matInput [(ngModel)]="ipAddress" placeholder="Dirección IP" required>
</mat-form-field>
<mat-divider></mat-divider> <mat-form-field appearance="fill" class="full-width">
<span class="step-title">Parámetros avanzados</span> <mat-label>Netmask</mat-label>
<mat-form-field appearance="fill" class="full-width"> <input matInput formControlName="netmask" placeholder="Netmask" required>
<mat-label>Next Server</mat-label> <mat-error *ngIf="subnetForm.controls['netmask'].invalid">
<input matInput [(ngModel)]="nextServer" placeholder="Next Server"> El netmask de la subred es obligatorio.
</mat-form-field> </mat-error>
<mat-form-field appearance="fill" class="full-width"> </mat-form-field>
<mat-label>Boot File Name</mat-label>
<input matInput [(ngModel)]="bootFileName" placeholder="Boot File Name"> <mat-form-field appearance="fill" class="full-width">
</mat-form-field> <mat-label>Dirección IP</mat-label>
<mat-form-field appearance="fill" class="full-width"> <input matInput formControlName="ipAddress" placeholder="Dirección IP" required>
<mat-label>Router</mat-label> <mat-error *ngIf="subnetForm.controls['ipAddress'].invalid">
<input matInput [(ngModel)]="router" placeholder="Router"> La ip de la subred es obligatorio.
</mat-form-field> </mat-error>
</div> </mat-form-field>
<mat-divider></mat-divider>
<span class="step-title">Parámetros avanzados</span>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Next Server</mat-label>
<input matInput formControlName="nextServer" placeholder="Next Server">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Boot File Name</mat-label>
<input matInput formControlName="bootFileName" placeholder="Boot File Name">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Router</mat-label>
<input matInput formControlName="router" placeholder="Router">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>DNS</mat-label>
<input matInput formControlName="dns" placeholder="DNS">
<mat-error *ngIf="subnetForm.controls['dns'].invalid">
Formato inválido. Introduzca direcciones IP separadas por comas.
</mat-error>
</mat-form-field>
</div>
</form>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions class="action-container"> <mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">Cancelar</button> <button class="ordinary-button" (click)="onNoClick()">Cancelar</button>
<button class="submit-button" (click)="save()" cdkFocusInitial>Guardar</button> <button class="submit-button" (click)="save()" [disabled]="subnetForm.invalid" cdkFocusInitial>Guardar</button>
</mat-dialog-actions> </mat-dialog-actions>

View File

@ -1,8 +1,8 @@
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
@Component({ @Component({
selector: 'app-create-subnet', selector: 'app-create-subnet',
@ -11,23 +11,28 @@ import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/de
}) })
export class CreateSubnetComponent implements OnInit { export class CreateSubnetComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
subnetId: string | null = null; subnetForm: FormGroup;
name: string = '';
netmask: string = '';
ipAddress: string = '';
nextServer: string = '';
bootFileName: string = '';
router: string = '';
serverId: number = 0;
isEditMode: boolean = false; isEditMode: boolean = false;
subnetId: string | null = null;
constructor( constructor(
private toastService: ToastrService, private toastService: ToastrService,
private http: HttpClient, private http: HttpClient,
private fb: FormBuilder,
public dialogRef: MatDialogRef<CreateSubnetComponent>, public dialogRef: MatDialogRef<CreateSubnetComponent>,
public dialog: MatDialog, public dialog: MatDialog,
@Inject(MAT_DIALOG_DATA) public data: any @Inject(MAT_DIALOG_DATA) public data: any
) { } ) {
this.subnetForm = this.fb.group({
name: ['', Validators.required],
netmask: ['', Validators.required],
ipAddress: ['', Validators.required],
router: [''],
dns: ['', Validators.pattern(/^(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?),)*((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/)],
nextServer: [''],
bootFileName: ['']
});
}
ngOnInit(): void { ngOnInit(): void {
if (this.data) { if (this.data) {
@ -38,13 +43,15 @@ export class CreateSubnetComponent implements OnInit {
loadData() { loadData() {
this.subnetId = this.data.uuid; this.subnetId = this.data.uuid;
this.name = this.data.name; this.subnetForm.patchValue({
this.netmask = this.data.netmask; name: this.data.name,
this.ipAddress = this.data.ipAddress; netmask: this.data.netmask,
this.nextServer = this.data.nextServer; dns: this.data.dns,
this.bootFileName = this.data.bootFileName; ipAddress: this.data.ipAddress,
this.router = this.data.router; nextServer: this.data.nextServer,
this.serverId = this.data.serverId; bootFileName: this.data.bootFileName,
router: this.data.router
});
} }
onNoClick(): void { onNoClick(): void {
@ -52,37 +59,33 @@ export class CreateSubnetComponent implements OnInit {
} }
save(): void { save(): void {
const payload = { if (this.subnetForm.invalid) {
name: this.name, this.toastService.error('Por favor, revisa los campos del formulario');
netmask: this.netmask, return;
ipAddress: this.ipAddress, }
router: this.router || null,
nextServer: this.nextServer || null,
bootFileName: this.bootFileName || null
};
if (!this.data){ const payload = this.subnetForm.value;
this.http.post(`${this.baseUrl}/subnets`, payload)
.subscribe({ if (!this.isEditMode) {
next: (response) => { this.http.post(`${this.baseUrl}/subnets`, payload).subscribe({
this.toastService.success('Configuración de red añadida exitosamente'); next: () => {
this.dialogRef.close(); this.toastService.success('Configuración de red añadida exitosamente');
}, this.dialogRef.close();
error: (error) => { },
this.toastService.error(error.error['hydra:description']); error: (error) => {
} this.toastService.error(error.error['hydra:description']);
}); }
});
} else { } else {
this.http.patch(`${this.baseUrl}/subnets/${this.subnetId}`, payload) this.http.patch(`${this.baseUrl}/subnets/${this.subnetId}`, payload).subscribe({
.subscribe({ next: () => {
next: (response) => { this.toastService.success('Configuración de red actualizada exitosamente');
this.toastService.success('Configuración de red actualizada exitosamente'); this.dialogRef.close();
this.dialogRef.close(); },
}, error: (error) => {
error: (error) => { this.toastService.error(error.error['hydra:description']);
this.toastService.error(error.error['hydra:description']); }
} });
});
} }
} }
} }

View File

@ -66,10 +66,8 @@ export class OgDhcpSubnetsComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.loading = true; this.loading = true;
this.loadSubnets();
this.loadAlert() this.loadAlert()
this.syncSubnets() this.syncSubnets()
this.loading = false;
} }
loadSubnets() { loadSubnets() {
@ -93,7 +91,9 @@ export class OgDhcpSubnetsComponent implements OnInit {
.subscribe(response => { .subscribe(response => {
this.toastService.success('Sincronización con componente DHCP exitosa'); this.toastService.success('Sincronización con componente DHCP exitosa');
this.loadSubnets() this.loadSubnets()
this.loading = false;
}, error => { }, error => {
this.loading = false;
this.toastService.error('Error al sincronizar'); this.toastService.error('Error al sincronizar');
}); });
} }