refs #1077 Add model teplates for reference

2024-11-07 11:11:32 +01:00 · 2024-11-07 11:11:32 +01:00 · 0d403d8b8e
parent 6d763f22eb
commit 0d403d8b8e
5 changed files with 110 additions and 53 deletions
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
@ -181,44 +181,49 @@ mat-spinner {
  margin: 10px 10px;
 }

-.result-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-
-.result-checkbox {
-  float: right;
-  margin: 0;
+.result-card.small-card {
+  width: 100%;
+  max-width: 180px;
+  height: auto;
+  min-height: 130px;
+  padding: 10px;
+  margin: 5px;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }

 .result-title {
-  font-size: 1.2rem;
-  font-weight: 600;
+  font-size: 1rem;
+  font-weight: 500;
  color: #333;
+  margin-bottom: 5px;
 }

 .result-content {
-  padding-top: 10px;
+  padding-top: 5px;
  color: #555;
+  font-size: 0.85rem;
 }

-.result-type {
-  font-size: 1rem;
-  font-weight: 500;
-  margin: 0;
+.result-type, .result-ip, .result-mac, .result-status, .result-internal-units, .result-clients {
+  font-size: 0.8rem;
+  margin: 2px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

-.result-ip, .result-mac, .result-status {
-  font-size: 0.9rem;
-  margin: 5px 0;
+.result-checkbox {
+  align-self: flex-start;
+  margin: 0 0 5px 0;
 }

-.result-internal-units,
-.result-clients {
-  font-size: 0.9rem;
-  color: #007bff;
-  color: #007bff;
-  margin: 5px 0;
+.result-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }

 .paginator-container {
@ -240,7 +245,6 @@ mat-card {
 }

 .red-card {
-  background-color: #f35f53;
  background-color: #f35f53;
  color: white;
 }
@ -248,8 +252,6 @@ mat-card {
 .green-card {
  background-color: #4caf50;
  color: white;
-  background-color: #4caf50;
-  color: white;
 }

 .view-mode-buttons button.active {
@ -271,7 +273,6 @@ mat-card {
 }

 .result-card-list .result-title {
-  font-size: 14px;
  font-size: 14px;
  font-weight: bold;
  margin-right: 8px;
@ -282,12 +283,10 @@ mat-card {
  flex-direction: row;
  gap: 8px;
  font-size: 12px;
-  font-size: 12px;
 }

 .result-card-list p {
  margin: 0;
-  margin: 0;
 }

 .result-list {
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
@ -47,9 +47,9 @@
    <div class="results">
      <ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
        <ng-container *ngIf="viewMode === 'grid'">
-          <mat-grid-list cols="5" rowHeight="1:1">
+          <mat-grid-list cols="8" rowHeight="1:1">
            <mat-grid-tile *ngFor="let result of filteredResults">
-              <mat-card class="result-card">
+              <mat-card class="result-card small-card">
                <mat-checkbox [checked]="isSelected(result.name)" (change)="onCheckboxChange($event, result.name, result['@id'])" class="result-checkbox"></mat-checkbox>
                <mat-card-title class="result-title">{{ result.name }}</mat-card-title>
                <mat-card-content class="result-content">
--- a/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.css
+++ b/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.css
@ -1,4 +1,3 @@
-
 mat-form-field {
  width: 100%;
  margin-bottom: 20px;
@ -53,9 +52,9 @@ h3 {

 .list-item-content {
  display: flex;
-  align-items: flex-start; /* Alinea el contenido al inicio */
-  justify-content: space-between; /* Espacio entre los textos y los íconos */
-  width: 100%; /* Asegúrate de que el contenido ocupe todo el ancho */
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
 }

 .text-content {
@ -73,3 +72,15 @@ h3 {
  margin-left: 8px;
  cursor: pointer;
 }
+
+.actions-container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
--- a/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.html
+++ b/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.html
@ -1,9 +1,8 @@
-<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} plantilla </h2>
+<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} plantilla</h2>

 <mat-dialog-content>
  <div class="spacing-container">
    <form [formGroup]="templateForm" (ngSubmit)="onSave()">
-
      <mat-form-field appearance="fill">
        <mat-label>Nombre de la Plantilla</mat-label>
        <input matInput formControlName="name" placeholder="Introduce el nombre de la plantilla">
@ -23,9 +22,19 @@
  </div>
 </mat-dialog-content>

-<mat-dialog-actions align="end">
-  <button mat-button type="button" (click)="onCancel()">Cancelar</button>
-  <button mat-raised-button color="primary" type="submit" (click)="onSave()" [disabled]="!templateForm.valid">
-    {{ isEditMode ? 'Actualizar' : 'Crear' }}
-  </button>
+<mat-dialog-actions>
+  <div class="actions-container">
+    <button mat-flat-button color="accent" [matMenuTriggerFor]="templateMenu">Cargar plantilla modelo</button>
+    <mat-menu #templateMenu="matMenu">
+      <button mat-menu-item (click)="loadTemplateModel('ogLive')">ogLive</button>
+      <button mat-menu-item (click)="loadTemplateModel('disco')">Arranque por disco</button>
+    </mat-menu>
+
+    <div class="action-buttons">
+      <button mat-button type="button" (click)="onCancel()">Cancelar</button>
+      <button mat-raised-button color="primary" type="submit" (click)="onSave()" [disabled]="!templateForm.valid">
+        {{ isEditMode ? 'Actualizar' : 'Crear' }}
+      </button>
+    </div>
+  </div>
 </mat-dialog-actions>
--- a/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.ts
+++ b/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.ts
@ -1,9 +1,9 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { ToastrService } from 'ngx-toastr';
-import {DeleteModalComponent} from "../../../../shared/delete_modal/delete-modal/delete-modal.component";
+import { DeleteModalComponent } from "../../../../shared/delete_modal/delete-modal/delete-modal.component";

@Component({
  selector: 'app-create-pxe-template',
@ -17,6 +17,39 @@ export class CreatePxeTemplateComponent implements OnInit {
  isEditMode: boolean = false;
  clients: any[] = [];

+  templateModels = {
+    ogLive: `#!ipxe
+set timeout 0
+set timeout-style hidden
+set ISODIR __OGLIVE__
+set default 0
+set kernelargs __INFOHOST__
+:try_iso
+kernel http://__SERVERIP__/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs} || goto fallback
+initrd http://__SERVERIP__/tftpboot/\${ISODIR}/oginitrd.img
+boot
+
+:fallback
+set ISODIR ogLive
+kernel http://__SERVERIP__/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs}
+initrd http://__SERVERIP__/tftpboot/\${ISODIR}/oginitrd.img
+boot`,
+    
+    disco: `#!ipxe
+
+iseq \${platform} efi && goto uefi_boot || goto bios_boot
+
+:bios_boot
+echo "Running in BIOS mode - Booting first disk"
+chain http://__SERVERIP__/tftpboot/grub.exe --config-file="title FirstHardDisk;chainloader (hd0)+1;rootnoverify (hd0);boot" || echo "Failed to boot in BIOS mode"
+exit
+
+:uefi_boot
+echo "Running in UEFI mode - Booting first disk"
+sanboot --no-describe --drive 0 --filename \\EFI\\grub\\Boot\\grubx64.efi || echo "Failed to boot in UEFI mode"
+exit`
+  };
+
  constructor(
    public dialogRef: MatDialogRef<CreatePxeTemplateComponent>,
    public dialog: MatDialog,
@ -29,8 +62,8 @@ export class CreatePxeTemplateComponent implements OnInit {
  ngOnInit() {
    this.isEditMode = !!this.data;

-    if (this.isEditMode){
-      this.getPxeClients()
+    if (this.isEditMode) {
+      this.getPxeClients();
    }

    this.templateForm = this.fb.group({
@ -50,7 +83,7 @@ export class CreatePxeTemplateComponent implements OnInit {
  getPxeClients(): void {
    this.http.get<any>(`${this.baseUrl}/clients?template.id=${this.data.id}`).subscribe({
      next: data => {
-        this.clients = data['hydra:member']
+        this.clients = data['hydra:member'];
      },
      error: error => {
        console.error('Error al obtener los clientes PXE:', error);
@ -67,12 +100,10 @@ export class CreatePxeTemplateComponent implements OnInit {

    this.http.post<any>(`${this.baseUrl}/pxe-templates`, payload).subscribe({
      next: data => {
-        console.log('Plantilla PXE creada:', data);
        this.toastService.success('Plantilla PXE creada exitosamente');
        this.dialogRef.close(true);
      },
      error: error => {
-        console.error('Error al crear la plantilla PXE:', error);
        this.toastService.error('Error al crear la plantilla PXE');
        this.dialogRef.close(false);
      }
@ -98,13 +129,19 @@ export class CreatePxeTemplateComponent implements OnInit {
    });
  }

+  loadTemplateModel(type: 'ogLive' | 'disco'): void {
+    const selectedContent = this.templateModels[type];
+    this.templateForm.get('templateContent')?.setValue(selectedContent);
+    this.toastService.info(`Plantilla ${type} cargada.`);
+  }
+
  addClientToTemplate(client: any): void {
    const postData = {
      client: client['@id']
    };

    this.http.post(`${this.baseUrl}/pxe-templates/${this.data.uuid}/sync-client`, postData).subscribe(
-      response => {
+      () => {
        this.toastService.success('Clientes asignados correctamente');
      },
      error => {
@ -126,11 +163,12 @@ export class CreatePxeTemplateComponent implements OnInit {
            this.toastService.success('Cliente eliminado exitosamente');
            this.dialogRef.close();
          },
-          error: (error) => {
+          error: error => {
            this.toastService.error(error.error['hydra:description']);
          }
        });
-      }})
+      }
+    });
  }

  onCancel(): void {