Ogboot changes and payload fix

ogWebconsole/src/app/app.module.ts

@@ -85,6 +85,7 @@ import { OgbootStatusComponent } from './components/ogboot-status/ogboot-status.
 import { CreatePxeBootFileComponent } from './components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { DeleteImageComponent } from './components/images/images/delete-image/delete-image/delete-image.component';
+import { DeletePxeTemplateComponent } from './components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component';
 
 @NgModule({
   declarations: [
@@ -129,7 +130,8 @@ import { DeleteImageComponent } from './components/images/images/delete-image/de
     PxeBootFilesComponent,
     OgbootStatusComponent,
     CreatePxeBootFileComponent,
-    DeleteImageComponent
+    DeleteImageComponent,
+    DeletePxeTemplateComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

ogWebconsole/src/app/components/images/images/images.component.html

@@ -55,7 +55,6 @@
     <th mat-header-cell *matHeaderCellDef i18n="@@columnActions">Acciones</th>
     <td mat-cell *matCellDef="let image">
       <button mat-icon-button color="primary" (click)="editImage(image)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
-      <button mat-icon-button color="warn" (click)="deleteImage(image)" i18n="@@buttonDeleteUser"><mat-icon>delete</mat-icon></button>
       <button mat-icon-button [matMenuTriggerFor]="menu">
         <mat-icon>menu</mat-icon>
       </button>

ogWebconsole/src/app/components/images/images/images.component.ts

@@ -136,6 +136,7 @@ export class ImagesComponent implements OnInit {
           next: () => {
             console.log('Imagen cambiada');
             this.toastService.success('Petición de desinstalación enviada');
+            /* this.deleteImage(image); */
             this.loadImages();
           },
           error: (error) => {

ogWebconsole/src/app/components/ogboot-status/ogboot-status.component.ts

@@ -14,6 +14,7 @@ export class OgbootStatusComponent implements OnInit {
 
   view: [number, number] = [1300, 500]; 
 
+  // Opciones de la gráfica
   gradient: boolean = true;
   showLegend: boolean = true;
   showLabels: boolean = true;
@@ -48,6 +49,7 @@ export class OgbootStatusComponent implements OnInit {
       console.error('Error fetching status', error);
     });
   }
+
   getServices(): { name: string, status: string }[] {
     return Object.keys(this.servicesStatus).map(key => ({
       name: key,

ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts

@@ -24,7 +24,7 @@ export class CreatePxeBootFileComponent {
 
   ngOnInit(): void {
     this.selectedElements = this.data;
-    this.clientes = this.selectedElements.map((client: { uuid: any; }) => client.uuid);
+    this.clientes = this.selectedElements.map((client: { uuid: any; }) => `/clients/${client.uuid}`);
     this.loadPxeTemplates();
   }
 
@@ -49,9 +49,9 @@ export class CreatePxeBootFileComponent {
     if (this.selectedPxeTemplate) {
       const payload = {
         template: `/pxe-templates/${this.selectedPxeTemplate}`,
-        clients: [`/clients/${this.clientes}`]
+        clients: this.clientes
       };
-      console.log('Payload:', payload);
+      console.log('Payload FINAAAL:', payload);
       this.http.post('http://127.0.0.1:8080/pxe-boot-files', payload)
         .subscribe({
           next: response => {

ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.css

@@ -1,86 +1,52 @@
+form {
+  max-width: 600px;
+  margin: 20px auto;
+  padding: 20px;
+}
+
 mat-form-field {
   width: 100%;
-    margin-bottom: 16px;
+  margin-bottom: 20px;
-    padding: 5px;
+}
-  }
 
-  .button-group {
+pre {
+  background-color: #eceff1;
+  padding: 15px;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-size: 0.9rem;
+  color: #333;
+}
+
+mat-dialog-actions {
+  margin-top: 20px;
   display: flex;
-    justify-content: space-between;
+  justify-content: flex-end;
-  }
-  
-  button {
-    width: 48%;
-  }
-  
-  :host {
-    display: block;
-    padding: 20px;
-    background-color: #f5f5f5;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.mat-form-field {
-    width: 100%;
-    margin-bottom: 16px;
-}
-
-.mat-step-label {
-    font-weight: bold;
-    font-size: 1.1em;
 }
 
 button {
-    margin: 8px 0;
+  margin-left: 10px;
 }
 
-.mat-stepper-header {
+button[type="submit"] {
-    background-color: #fff;
-    padding: 16px;
-    border-bottom: 1px solid #e0e0e0;
-    border-radius: 8px 8px 0 0;
-}
-
-.mat-stepper-horizontal-line {
-    border-color: #3f51b5;
-}
-
-.mat-stepper-horizontal {
-    background-color: #fff;
-    padding: 0;
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-.mat-step-header {
-    background-color: #e8eaf6;
-    color: #3f51b5;
-}
-
-.mat-step-header .mat-step-icon {
   background-color: #3f51b5;
   color: #fff;
 }
 
-.mat-stepper-content {
+button[type="submit"]:disabled {
-    padding: 16px;
+  background-color: #c5cae9;
-    background-color: #fff;
-    border-radius: 0 0 8px 8px;
 }
 
-pre {
+h2 {
-    background-color: #e8eaf6;
+  margin-bottom: 20px;
-    padding: 16px;
+  font-size: 1.5rem;
-    border-radius: 4px;
+  color: #000000;
-    font-size: 12px;
+  text-align: center;
-    overflow-x: auto;
 }
 
-.mat-raised-button {
+h3 {
-    margin-right: 8px;
+  margin-top: 30px;
-}
+  font-size: 1.2rem;
-
+  color: #000000;
-.mat-button {
-    margin-right: 8px;
 }

ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.html

@@ -1,51 +1,24 @@
-<h2>Crear Plantilla PXE</h2>
+<form [formGroup]="templateForm" (ngSubmit)="onCreate()">
-<mat-horizontal-stepper [linear]="true" #stepper>
+  <h2>Crear Plantilla PXE</h2>
-  <mat-step [stepControl]="firstFormGroup">
+
-    <form [formGroup]="firstFormGroup">
+  <mat-form-field appearance="fill">
-      <ng-template matStepLabel>Nombre de la plantilla</ng-template>
-      <mat-form-field>
     <mat-label>Nombre de la Plantilla</mat-label>
-        <input matInput formControlName="name" placeholder="Nombre de la plantilla" required />
+    <input matInput formControlName="name" placeholder="Introduce el nombre de la plantilla">
+    <mat-error *ngIf="templateForm.get('name')?.hasError('required')">
+      El nombre de la plantilla es requerido.
+    </mat-error>
   </mat-form-field>
-      <div>
+
-        <button mat-button matStepperNext>Continuar</button>
-      </div>
-    </form>
-  </mat-step>
-  <mat-step [stepControl]="secondFormGroup">
-    <form [formGroup]="secondFormGroup">
-      <ng-template matStepLabel>Configurar parámetros</ng-template>
   <mat-form-field appearance="fill">
-        <mat-label>Tiempo de espera (en segundos)</mat-label>
+    <mat-label>Contenido de la Plantilla</mat-label>
-        <input matInput formControlName="timeout" type="number" required />
+    <textarea matInput formControlName="templateContent" rows="20" placeholder="Introduce el contenido de la plantilla"></textarea>
+    <mat-error *ngIf="templateForm.get('templateContent')?.hasError('required')">
+      El contenido de la plantilla es requerido.
+    </mat-error>
   </mat-form-field>
-      <mat-form-field appearance="fill">
+
-        <mat-label>Estilo de tiempo de espera</mat-label>
+  <mat-dialog-actions align="end">
-        <mat-select formControlName="timeoutStyle" required>
+    <button mat-button type="button" (click)="onCancel()">Cancelar</button>
-          <mat-option value="hidden">Oculto</mat-option>
+    <button mat-raised-button color="primary" type="submit" [disabled]="!templateForm.valid">Crear</button>
-          <mat-option value="visible">Visible</mat-option>
+  </mat-dialog-actions>
-        </mat-select>
+</form>
-      </mat-form-field>
-      <mat-form-field appearance="fill">
-        <mat-label>Directorio ISO</mat-label>
-        <input matInput formControlName="isoDir" required />
-      </mat-form-field>
-      <mat-form-field appearance="fill">
-        <mat-label>Argumentos del Kernel</mat-label>
-        <input matInput formControlName="kernelArgs" required />
-      </mat-form-field>
-      <div>
-        <button mat-button matStepperPrevious>Atrás</button>
-        <button mat-button matStepperNext>Siguiente</button>
-      </div>
-    </form>
-  </mat-step>
-  <mat-step>
-    <ng-template matStepLabel>Vista previa y creación</ng-template>
-    <pre>{{ previewContent }}</pre>
-    <div class="button-group">
-      <button mat-flat-button color="primary" (click)="onCreate()" >Crear</button>
-      <button mat-button matStepperPrevious>Atrás</button>
-    </div>
-  </mat-step>
-</mat-horizontal-stepper>

ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.ts

@@ -6,11 +6,10 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'app-create-pxe-template',
   templateUrl: './create-pxe-template.component.html',
-  styleUrl: './create-pxe-template.component.css'
+  styleUrls: ['./create-pxe-template.component.css']
 })
 export class CreatePxeTemplateComponent {
-  firstFormGroup!: FormGroup; // Use `!` to assert that this will be initialized
+  templateForm!: FormGroup;
-  secondFormGroup!: FormGroup; // Use `!` to assert that this will be initialized
   previewContent: string = '';
 
   constructor(
@@ -20,52 +19,19 @@ export class CreatePxeTemplateComponent {
   ) {}
 
   ngOnInit() {
-    this.firstFormGroup = this.fb.group({
+    this.templateForm = this.fb.group({
-      name: ['', Validators.required]
+      name: ['', Validators.required],
+      templateContent: ['', Validators.required]
     });
-    this.secondFormGroup = this.fb.group({
-      timeout: [0, Validators.required],
-      timeoutStyle: ['hidden', Validators.required],
-      isoDir: ['OGLIVE', Validators.required],
-      kernelArgs: ['INFOHOST', Validators.required]
-    });
-
-    this.secondFormGroup.valueChanges.subscribe(() => {
-      this.updatePreview();
-    });
-  }
-
-  updatePreview() {
-    const formValues = { ...this.firstFormGroup.value, ...this.secondFormGroup.value };
-    this.previewContent = `#!ipxe
-set timeout ${formValues.timeout}
-set timeout-style ${formValues.timeoutStyle}
-
-set ISODIR ${formValues.isoDir}
-set default 0
-set kernelargs ${formValues.kernelArgs}
-#Menú de entrada para seleccionar OgLive
-
-:try_iso
-kernel http://SERVERIP/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs} || goto fallback
-initrd http://SERVERIP/tftpboot/\${ISODIR}/oginitrd.img
-boot
-
-:fallback
-echo "OgLive default"
-set ISODIR ogLive
-kernel http://SERVERIP/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs}
-initrd http://SERVERIP/tftpboot/\${ISODIR}/oginitrd.img
-boot`;
   }
 
   onCreate(): void {
-    const formValues = { ...this.firstFormGroup.value, ...this.secondFormGroup.value };
+    const formValues = this.templateForm.value;
     const payload = {
       name: formValues.name,
-      templateContent: "this.previewContent"
+      templateContent: formValues.templateContent
     };
-    console.log(payload)
+    console.log(payload);
     this.http.post<any>('http://127.0.0.1:8080/pxe-templates', payload).subscribe({
       next: data => {
         console.log('Plantilla PXE creada:', data);

ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title i18n="@@deleteDialogTitle">Eliminar</h1>
+  <div mat-dialog-content>
+    <p i18n="@@deleteConfirmationMessage">¿Estás seguro que deseas eliminarla?</p>
+  </div>
+  <div mat-dialog-actions>
+    <button mat-button (click)="onNoClick()" i18n="@@cancelButton">Cancelar</button>
+    <button mat-button color="warn" (click)="onYesClick()" i18n="@@confirmButton">Eliminar</button>
+  </div>

ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeletePxeTemplateComponent } from './delete-pxe-template.component';
+
+describe('DeletePxeTemplateComponent', () => {
+  let component: DeletePxeTemplateComponent;
+  let fixture: ComponentFixture<DeletePxeTemplateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DeletePxeTemplateComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeletePxeTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.ts

@@ -0,0 +1,22 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-delete-pxe-template',
+  templateUrl: './delete-pxe-template.component.html',
+  styleUrl: './delete-pxe-template.component.css'
+})
+export class DeletePxeTemplateComponent {
+  constructor(
+    public dialogRef: MatDialogRef<DeletePxeTemplateComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { name: string }
+  ) {}
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+  onYesClick(): void {
+    this.dialogRef.close(true);
+  }
+}

ogWebconsole/src/app/components/pxe/pxe/pxe.component.html

@@ -41,7 +41,6 @@
     <th mat-header-cell *matHeaderCellDef i18n="@@columnActions">Acciones</th>
     <td mat-cell *matCellDef="let template">
       <button mat-icon-button color="primary" (click)="editPxeTemplate(template)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
-      <button mat-icon-button color="warn" (click)="deletePxeTemplate(template)" i18n="@@buttonDeleteUser"><mat-icon>delete</mat-icon></button>
       <button mat-icon-button [matMenuTriggerFor]="menu">
         <mat-icon>menu</mat-icon>
       </button>

ogWebconsole/src/app/components/pxe/pxe/pxe.component.ts

@@ -7,6 +7,7 @@ import {MatTableDataSource} from "@angular/material/table";
 import {PageEvent} from "@angular/material/paginator";
 import {ToastrService} from "ngx-toastr";
 import {DatePipe} from "@angular/common";
+import { DeletePxeTemplateComponent } from './delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component';
 
 @Component({
   selector: 'app-pxe',
@@ -25,7 +26,7 @@ export class PxeComponent {
   alertMessage: string | null = null;
   datePipe: DatePipe = new DatePipe('es-ES');
   selectedItem: any = null;
-  previewContent: string | null = null;
+  previewContent: any | null = null;
   columns = [
     {
       columnDef: 'id',
@@ -78,6 +79,7 @@ export class PxeComponent {
 
   addPxeTemplate() {
     const dialogRef = this.dialog.open(CreatePxeTemplateComponent, {
+      width: '600px'
     });
 
     dialogRef.afterClosed().subscribe(() => {
@@ -87,30 +89,8 @@ export class PxeComponent {
 
   showPxeInfo(template: any) {
     this.selectedItem = template;
-    this.previewContent = this.generatePreviewContent(template); // Generar contenido de resumen
-  }
 
-  generatePreviewContent(formValues: any): string {
+    this.previewContent = template.templateContent;
-    return `#!ipxe
-set timeout ${formValues.timeout}
-set timeout-style ${formValues.timeoutStyle}
-
-set ISODIR ${formValues.isoDir}
-set default 0
-set kernelargs ${formValues.kernelArgs}
-#Menú de entrada para seleccionar OgLive
-
-:try_iso
-kernel http://SERVERIP/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs} || goto fallback
-initrd http://SERVERIP/tftpboot/\${ISODIR}/oginitrd.img
-boot
-
-:fallback
-echo "OgLive default"
-set ISODIR ogLive
-kernel http://SERVERIP/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs}
-initrd http://SERVERIP/tftpboot/\${ISODIR}/oginitrd.img
-boot`;
   }
 
   toggleAction(image: any, action:string): void {
@@ -144,8 +124,31 @@ boot`;
     }
   }
 
-  deletePxeTemplate(uuid: string) {
+  deletePxeTemplate(template: any) {
     // Lógica para eliminar una plantilla
+      const dialogRef = this.dialog.open(DeletePxeTemplateComponent, {
+        width: '300px'
+      });
+
+      console.log('Eliminando pxe:', template.uuid);
+    
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          this.http.delete(`http://127.0.0.1:8080/pxe-templates/${template.uuid}`).subscribe({
+            next: () => {
+              console.log('pxe eliminado');
+              this.toastService.success('PXE deleted successfully');
+              this.loadPxeTemplates();
+            },
+            error: (error) => {
+              console.error('Error al eliminar la pxe:', error);
+            }
+          });
+        } else {
+          console.log('Eliminación de pxe cancelada');
+        }
+      }); 
+    
   }
 
   editPxeTemplate(template: any) {