diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index 37fbf03..fe650f0 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/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, diff --git a/ogWebconsole/src/app/components/images/images/images.component.html b/ogWebconsole/src/app/components/images/images/images.component.html index d5f74ef..2bd1513 100644 --- a/ogWebconsole/src/app/components/images/images/images.component.html +++ b/ogWebconsole/src/app/components/images/images/images.component.html @@ -55,7 +55,6 @@ Acciones - diff --git a/ogWebconsole/src/app/components/images/images/images.component.ts b/ogWebconsole/src/app/components/images/images/images.component.ts index 0720c49..dd0de7f 100644 --- a/ogWebconsole/src/app/components/images/images/images.component.ts +++ b/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) => { diff --git a/ogWebconsole/src/app/components/ogboot-status/ogboot-status.component.ts b/ogWebconsole/src/app/components/ogboot-status/ogboot-status.component.ts index 70f8843..0dd8d3f 100644 --- a/ogWebconsole/src/app/components/ogboot-status/ogboot-status.component.ts +++ b/ogWebconsole/src/app/components/ogboot-status/ogboot-status.component.ts @@ -12,8 +12,9 @@ export class OgbootStatusComponent implements OnInit { installedOglives: any[] = []; diskUsageChartData: any[] = []; - view: [number, number] = [1300, 500]; + 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, diff --git a/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts b/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts index 9089f1c..0419b69 100644 --- a/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts +++ b/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 => { diff --git a/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.css b/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.css index e991549..65ed3aa 100644 --- a/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.css +++ b/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; - padding: 5px; - } - - .button-group { - display: flex; - justify-content: space-between; - } - - 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; -} - -.mat-stepper-header { - 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 { - padding: 16px; - background-color: #fff; - border-radius: 0 0 8px 8px; + width: 100%; + margin-bottom: 20px; } pre { - background-color: #e8eaf6; - padding: 16px; - border-radius: 4px; - font-size: 12px; - overflow-x: auto; + background-color: #eceff1; + padding: 15px; + border-radius: 4px; + white-space: pre-wrap; + word-wrap: break-word; + font-size: 0.9rem; + color: #333; } -.mat-raised-button { - margin-right: 8px; +mat-dialog-actions { + margin-top: 20px; + display: flex; + justify-content: flex-end; } -.mat-button { - margin-right: 8px; +button { + margin-left: 10px; } + +button[type="submit"] { + background-color: #3f51b5; + color: #fff; +} + +button[type="submit"]:disabled { + background-color: #c5cae9; +} + +h2 { + margin-bottom: 20px; + font-size: 1.5rem; + color: #000000; + text-align: center; +} + +h3 { + margin-top: 30px; + font-size: 1.2rem; + color: #000000; +} \ No newline at end of file diff --git a/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.html b/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.html index d0cb428..43c9137 100644 --- a/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.html +++ b/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.html @@ -1,51 +1,24 @@ -

Crear Plantilla PXE

- - -
- Nombre de la plantilla - - Nombre de la Plantilla - - -
- -
-
-
- -
- Configurar parámetros - - Tiempo de espera (en segundos) - - - - Estilo de tiempo de espera - - Oculto - Visible - - - - Directorio ISO - - - - Argumentos del Kernel - - -
- - -
-
-
- - Vista previa y creación -
{{ previewContent }}
-
- - -
-
-
+
+

Crear Plantilla PXE

+ + + Nombre de la Plantilla + + + El nombre de la plantilla es requerido. + + + + + Contenido de la Plantilla + + + El contenido de la plantilla es requerido. + + + + + + + +
diff --git a/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.ts b/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.ts index ccf8342..05a5927 100644 --- a/ogWebconsole/src/app/components/pxe/pxe/create-pxeTemplate/create-pxe-template/create-pxe-template.component.ts +++ b/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 - secondFormGroup!: FormGroup; // Use `!` to assert that this will be initialized + templateForm!: FormGroup; previewContent: string = ''; constructor( @@ -20,52 +19,19 @@ export class CreatePxeTemplateComponent { ) {} ngOnInit() { - this.firstFormGroup = this.fb.group({ - name: ['', Validators.required] + this.templateForm = this.fb.group({ + 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('http://127.0.0.1:8080/pxe-templates', payload).subscribe({ next: data => { console.log('Plantilla PXE creada:', data); diff --git a/ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.css b/ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.css new file mode 100644 index 0000000..e69de29 diff --git a/ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.html b/ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.html new file mode 100644 index 0000000..548c6a7 --- /dev/null +++ b/ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.html @@ -0,0 +1,8 @@ +

Eliminar

+
+

¿Estás seguro que deseas eliminarla?

+
+
+ + +
\ No newline at end of file diff --git a/ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.spec.ts b/ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.spec.ts new file mode 100644 index 0000000..55a1d1d --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [DeletePxeTemplateComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DeletePxeTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.ts b/ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.ts new file mode 100644 index 0000000..cb2e97b --- /dev/null +++ b/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, + @Inject(MAT_DIALOG_DATA) public data: { name: string } + ) {} + + onNoClick(): void { + this.dialogRef.close(false); + } + + onYesClick(): void { + this.dialogRef.close(true); + } +} diff --git a/ogWebconsole/src/app/components/pxe/pxe/pxe.component.html b/ogWebconsole/src/app/components/pxe/pxe/pxe.component.html index 21bf12f..eb2425f 100644 --- a/ogWebconsole/src/app/components/pxe/pxe/pxe.component.html +++ b/ogWebconsole/src/app/components/pxe/pxe/pxe.component.html @@ -41,7 +41,6 @@ Acciones - diff --git a/ogWebconsole/src/app/components/pxe/pxe/pxe.component.ts b/ogWebconsole/src/app/components/pxe/pxe/pxe.component.ts index 658703e..25041da 100644 --- a/ogWebconsole/src/app/components/pxe/pxe/pxe.component.ts +++ b/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 { - 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`; + this.previewContent = template.templateContent; } 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) {