opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ogboot changes and payload fix

oggui/ogboot
Alvaro Puente Mella 2024-08-23 12:28:17 +02:00
parent ad9bce6b9a
commit 9f27849a76
14 changed files with 166 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ogWebconsole/src/app/app.module.ts
View File

@ -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,

1
ogWebconsole/src/app/components/images/images/images.component.html
View File

@ -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>

1
ogWebconsole/src/app/components/images/images/images.component.ts
View File

@ -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) => {

4
ogWebconsole/src/app/components/ogboot-status/ogboot-status.component.ts
View File

@ -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,

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

@ -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 => {

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

@ -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;
}

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

@ -1,51 +1,24 @@
<h2>Crear Plantilla PXE</h2>
<mat-horizontal-stepper [linear]="true" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<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 />
</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>
<input matInput formControlName="timeout" type="number" required />
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Estilo de tiempo de espera</mat-label>
<mat-select formControlName="timeoutStyle" required>
<mat-option value="hidden">Oculto</mat-option>
<mat-option value="visible">Visible</mat-option>
</mat-select>
</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>
<form [formGroup]="templateForm" (ngSubmit)="onCreate()">
<h2>Crear Plantilla PXE</h2>
<mat-form-field appearance="fill">
<mat-label>Nombre de la Plantilla</mat-label>
<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>
<mat-form-field appearance="fill">
<mat-label>Contenido de la Plantilla</mat-label>
<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-dialog-actions align="end">
<button mat-button type="button" (click)="onCancel()">Cancelar</button>
<button mat-raised-button color="primary" type="submit" [disabled]="!templateForm.valid">Crear</button>
</mat-dialog-actions>
</form>

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

@ -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<any>('http://127.0.0.1:8080/pxe-templates', payload).subscribe({
next: data => {
console.log('Plantilla PXE creada:', data);

0
ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.css 100644
View File

8
ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.html 100644
View File

@ -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>

23
ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.spec.ts 100644
View File

@ -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();
});
});

22
ogWebconsole/src/app/components/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component.ts 100644
View File

@ -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);
}
}

1
ogWebconsole/src/app/components/pxe/pxe/pxe.component.html
View File

@ -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>

53
ogWebconsole/src/app/components/pxe/pxe/pxe.component.ts
View File

@ -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) {