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%;
}
form {
padding: 20px;
}
.spacing-container {
margin-top: 20px;
margin-bottom: 16px;

View File

@ -1,38 +1,62 @@
<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} subred</h2>
<mat-dialog-content>
<div class="spacing-container">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nombre</mat-label>
<input matInput [(ngModel)]="name" placeholder="Nombre de la subred" required>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Netmask</mat-label>
<input matInput [(ngModel)]="netmask" placeholder="Netmask" required>
</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>
<form [formGroup]="subnetForm">
<div class="spacing-container">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nombre</mat-label>
<input matInput formControlName="name" placeholder="Nombre de la subred" required>
<mat-error *ngIf="subnetForm.controls['name'].invalid">
El nombre de la subred es obligatorio.
</mat-error>
</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 [(ngModel)]="nextServer" placeholder="Next Server">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Boot File Name</mat-label>
<input matInput [(ngModel)]="bootFileName" placeholder="Boot File Name">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Router</mat-label>
<input matInput [(ngModel)]="router" placeholder="Router">
</mat-form-field>
</div>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Netmask</mat-label>
<input matInput formControlName="netmask" placeholder="Netmask" required>
<mat-error *ngIf="subnetForm.controls['netmask'].invalid">
El netmask de la subred es obligatorio.
</mat-error>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Dirección IP</mat-label>
<input matInput formControlName="ipAddress" placeholder="Dirección IP" required>
<mat-error *ngIf="subnetForm.controls['ipAddress'].invalid">
La ip de la subred es obligatorio.
</mat-error>
</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-actions class="action-container">
<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>

View File

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

View File

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