Merge pull request 'develop' (#20) from develop into main

Reviewed-on: #20

CHANGELOG.md

@@ -1,4 +1,14 @@
 # Changelog
+## [0.11.1] - 2025-4-16
+### Improved
+- Nuevos campos en la tabla de clientes. Tipo de firmware y mac.
+
+## Fixed
+- Se ha corregido error al crear OUs, que no refrescaba la web.
+- Se ha corregido error en el formulario de creacion de imagenes. Si se seleccionaba una imagen para un versionado, no dejaba deseleccionar.
+- Se ha corregido un bug en el particionador que impedia ejecutar, cuando eliminabamos una particion.
+
+---
 ## [0.11.0] - 2025-4-11
 ### Added
 - Se ha diseñado el nuevo formulario para poder ejecutar script. Sistema mejorado con variables etiquetadas.

ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.html

@@ -8,12 +8,17 @@
     [matMenuTriggerFor]="commandMenu">
     {{ buttonText }}
   </button>
+
+  <button mat-menu-item *ngSwitchCase="'menu-item'" [matMenuTriggerFor]="commandMenu" [disabled]="disabled">
+    <mat-icon>{{ icon }}</mat-icon>
+    <span>{{ buttonText }}</span>
+  </button>
 </ng-container>
 
 <mat-menu #commandMenu="matMenu">
   <button mat-menu-item [disabled]="command.disabled
-  || (command.slug === 'create-image' && clientData.length > 1)"
+  || (command.slug === 'create-image' && clientData.length > 1)" *ngFor="let command of arrayCommands"
-    *ngFor="let command of arrayCommands" (click)="onCommandSelect(command.slug)">
+    (click)="onCommandSelect(command.slug)">
     {{ command.name }}
   </button>
 </mat-menu>

ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.ts

@@ -11,7 +11,7 @@ import { ConfigService } from '@services/config.service';
 })
 export class ExecuteCommandComponent implements OnInit {
   @Input() clientData: any[] = [];
-  @Input() buttonType: 'icon' | 'text' = 'icon';
+  @Input() buttonType: 'icon' | 'text' | 'menu-item' = 'icon';
   @Input() buttonText: string = 'Ejecutar Comandos';
   @Input() icon: string = 'terminal';
   @Input() disabled: boolean = false;

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

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ConfigService } from '@services/config.service';
 import { MatTabChangeEvent } from '@angular/material/tabs';
+import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-global-status',
@@ -40,6 +41,7 @@ export class GlobalStatusComponent implements OnInit {
 
   constructor(
     private configService: ConfigService,
+    private toastService: ToastrService,
     private http: HttpClient
   ) {
     this.baseUrl = this.configService.apiUrl;
@@ -50,6 +52,56 @@ export class GlobalStatusComponent implements OnInit {
 
   ngOnInit(): void {
     this.loadOgBootStatus();
+    this.syncSubnets()
+    this.syncTemplates()
+    this.syncOgLives()
+  }
+
+  syncSubnets() {
+    const timeoutId = setTimeout(() => {
+      this.toastService.error('Error al sincronizar las subredes: tiempo de espera agotado');
+    }, 3500);
+
+    this.http.post(`${this.baseUrl}/subnets/sync`, {}).subscribe({
+      next: (response) => {
+        clearTimeout(timeoutId);
+        this.toastService.success('Sincronización con componente DHCP exitosa');
+      },
+      error: (error) => {
+        clearTimeout(timeoutId);
+        this.toastService.error('Error al sincronizar las subredes DHCP');
+      }
+    });
+  }
+
+  syncTemplates() {
+    const timeoutId = setTimeout(() => {
+      this.toastService.error('Error al sincronizar las plantillas Pxe: tiempo de espera agotado');
+    }, 3500);
+
+    this.http.post(`${this.baseUrl}/pxe-templates/sync`, {})
+      .subscribe(response => {
+        clearTimeout(timeoutId);
+        this.toastService.success('Sincronización de las plantillas Pxe completada');
+      }, error => {
+        clearTimeout(timeoutId);
+        this.toastService.error('Error al sincronizar las plantillas Pxe');
+      });
+  }
+
+  syncOgLives(): void {
+    const timeoutId = setTimeout(() => {
+      this.toastService.error('Error al sincronizar las imagenes ogLive : tiempo de espera agotado');
+    }, 3500);
+
+    this.http.post(`${this.baseUrl}/og-lives/sync`, {})
+      .subscribe(response => {
+        clearTimeout(timeoutId);
+        this.toastService.success('Sincronización con los ogLives completada');
+      }, error => {
+        clearTimeout(timeoutId);
+        this.toastService.error('Error al sincronizar imágenes ogLive');
+      });
   }
 
   [key: string]: any;

ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html

@@ -24,6 +24,10 @@
       <mat-select [(ngModel)]="selectedImage" name="selectedImage" (selectionChange)="resetCanonicalName()" required>
         <mat-option *ngFor="let image of images" [value]="image">{{ image?.name }}</mat-option>
       </mat-select>
+      <button *ngIf="selectedImage" mat-icon-button matSuffix aria-label="Clear client search"
+              (click)="selectedImage = null; resetCanonicalName()">
+        <mat-icon>close</mat-icon>
+      </button>
       <mat-hint>Seleccione la imagen para sobreescribir si se requiere. </mat-hint>
     </mat-form-field>
   </div>

ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts

@@ -288,7 +288,9 @@ export class PartitionAssistantComponent {
 
     this.loading = true;
 
-    const totalPartitionSize = this.selectedDisk.partitions.reduce((sum: any, partition: { size: any; }) => sum + partition.size, 0);
+    const totalPartitionSize = this.selectedDisk.partitions
+      .filter((partition: any) => !partition.removed)
+      .reduce((sum: any, partition: any) => sum + partition.size, 0);
 
     if (totalPartitionSize > this.selectedDisk.totalDiskSize) {
       this.toastService.error('El tamaño total de las particiones en el disco seleccionado excede el tamaño total del disco.');

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

@@ -198,6 +198,9 @@
             <mat-icon>delete</mat-icon>
             <span>{{ 'delete' | translate }}</span>
           </button>
+          <app-execute-command [clientData]="selection.selected" [buttonType]="'menu-item'"
+            [buttonText]="'Ejecutar comandos'" [icon]="'terminal'" [disabled]="selection.selected.length === 0">
+          </app-execute-command>
         </mat-menu>
 
       </div>
@@ -245,7 +248,8 @@
                   <div *ngFor="let client of arrayClients" class="client-item">
                     <div class="client-card">
                       <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
-                        [checked]="selection.isSelected(client)" [disabled]="client.status === 'busy' || client.status === 'off' || client.status === 'disconnected'">
+                        [checked]="selection.isSelected(client)"
+                        [disabled]="client.status === 'busy' || client.status === 'off' || client.status === 'disconnected'">
                       </mat-checkbox>
                       <img style="margin-top: 0.5em;" [src]="'assets/images/computer_' + client.status + '.svg'"
                         alt="Client Icon" class="client-image" />
@@ -314,7 +318,8 @@
                     </th>
                     <td mat-cell *matCellDef="let row">
                       <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(row)"
-                        [checked]="selection.isSelected(row)" [disabled]="row.status === 'busy' || row.status === 'off' || row.status === 'disconnected'">
+                        [checked]="selection.isSelected(row)"
+                        [disabled]="row.status === 'busy' || row.status === 'off' || row.status === 'disconnected'">
                       </mat-checkbox>
                     </td>
                   </ng-container>
@@ -343,9 +348,22 @@
                     <th mat-header-cell *matHeaderCellDef mat-sort-header>IP </th>
                     <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                       matTooltipPosition="left" matTooltipShowDelay="500">
-                      {{ client.ip }}
+                      <div style="display: flex; flex-direction: column;">
+                        <span>{{ client.ip }}</span>
+                        <span style="font-size: 0.75rem; color: gray;">{{ client.mac }}</span>
+                      </div>
                     </td>
                   </ng-container>
+
+                  <ng-container matColumnDef="firmwareType">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'firmwareType' | translate }} </th>
+                    <td mat-cell *matCellDef="let client">
+                      <mat-chip s>
+                        {{ client.firmwareType ? client.firmwareType : 'N/A' }}
+                      </mat-chip>
+                    </td>
+                  </ng-container>
+
                   <ng-container matColumnDef="oglive">
                     <th mat-header-cell *matHeaderCellDef mat-sort-header> OG Live </th>
                     <td mat-cell *matCellDef="let client"> {{ client.ogLive?.date | date }} </td>

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

@@ -87,7 +87,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     { value: 'mac', name: 'Mac' },
   ];
 
-  displayedColumns: string[] = ['select', 'status', 'ip', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions'];
+  displayedColumns: string[] = ['select', 'status', 'ip', 'firmwareType', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions'];
 
   private _sort!: MatSort;
 
@@ -369,13 +369,15 @@ export class GroupsComponent implements OnInit, OnDestroy {
   onNodeClick(event: MouseEvent, node: TreeNode): void {
     event.stopPropagation();
     this.selectedNode = node;
-    this.fetchClientsForNode(node);
+    const selectedClientsBeforeEdit = this.selection.selected.map(client => client.uuid);
+    this.fetchClientsForNode(node, selectedClientsBeforeEdit);
   }
 
   onMenuClick(event: Event, node: any): void {
     event.stopPropagation();
     this.selectedNode = node;
-    this.fetchClientsForNode(node);
+    const selectedClientsBeforeEdit = this.selection.selected.map(client => client.uuid);
+    this.fetchClientsForNode(node, selectedClientsBeforeEdit);
   }
 
 
@@ -419,7 +421,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
       width: '900px',
     });
     dialogRef.afterClosed().subscribe((newUnit) => {
-      if (newUnit?.uuid) {
+      if (newUnit) {
         this.refreshData(newUnit.uuid);
       }
     });

ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.ts

@@ -105,6 +105,7 @@ export class ManageClientComponent implements OnInit {
           this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
             id: unit['@id'],
             name: unit.name,
+            netiface: unit.networkSettings?.netiface,
             path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits),
             repository: unit.networkSettings?.repository?.['@id'],
             hardwareProfile: unit.networkSettings?.hardwareProfile?.['@id'],
@@ -226,7 +227,8 @@ export class ManageClientComponent implements OnInit {
         repository: selectedUnit.repository || null,
         hardwareProfile: selectedUnit.hardwareProfile || null,
         ogLive: selectedUnit.ogLive || null,
-        menu: selectedUnit.menu || null
+        menu: selectedUnit.menu || null,
+        netiface: selectedUnit.netiface || null,
       });
     }
   }

ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.html

@@ -1,5 +1,3 @@
-<app-loading [isLoading]="loading"></app-loading>
-
 <div class="header-container">
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>

ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.ts

@@ -79,7 +79,6 @@ export class PXEimagesComponent implements OnInit {
     this.loading = true;
     this.search();
     this.loadAlert();
-    this.syncOgBoot()
     this.loading = false;
   }
 
@@ -245,17 +244,6 @@ export class PXEimagesComponent implements OnInit {
     );
   }
 
-  syncOgBoot(): void {
-    this.http.post(`${this.apiUrl}/sync`, {})
-      .subscribe(response => {
-        this.toastService.success('Sincronización con oGBoot exitosa');
-        this.search()
-      }, error => {
-        console.error('Error al sincronizar', error);
-        this.toastService.error('Error al sincronizar');
-      });
-  }
-
   iniciarTour(): void {
     this.joyrideService.startTour({
       steps: [

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

@@ -35,7 +35,7 @@
 </div>
 
 <app-loading [isLoading]="loading"></app-loading>
-<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
   text="{{ 'tableDescription' | translate }}">
   <ng-container  *ngFor="let column of columns" [matColumnDef]="column.columnDef">
     <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>

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

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import { CreatePxeTemplateComponent } from './create-pxeTemplate/create-pxe-template.component';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
@@ -19,7 +19,7 @@ import { ConfigService } from '@services/config.service';
   templateUrl: './pxe.component.html',
   styleUrls: ['./pxe.component.css']
 })
-export class PxeComponent {
+export class PxeComponent implements OnInit{
   baseUrl: string;
   private apiUrl: string;
   pxeTemplates: any[] = [];
@@ -76,7 +76,6 @@ export class PxeComponent {
     this.loading = true;
     this.search();
     this.loadAlert()
-    this.syncTemplates()
     this.loading = false;
   }
 
@@ -147,17 +146,6 @@ export class PxeComponent {
     const dialogRef = this.dialog.open(ShowTemplateContentComponent, { data: { data }, width: '700px' });
   }
 
-  syncTemplates() {
-    this.http.post(`${this.apiUrl}/sync`, {})
-      .subscribe(response => {
-        this.toastService.success('Sincronización completada');
-        this.search()
-      }, error => {
-        console.error('Error al sincronizar', error);
-        this.toastService.error('Error al sincronizar');
-      });
-  }
-
   applyFilter() {
     this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`).subscribe({
       next: (response) => {

ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.spec.ts

@@ -72,10 +72,4 @@ describe('OgDhcpSubnetsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should call syncSubnets and handle success', () => {
-    component.syncSubnets();
-    expect(mockHttpClient.post).toHaveBeenCalledWith(`${component.baseUrl}/subnets/sync`, {});
-    expect(mockToastrService.success).toHaveBeenCalledWith('Sincronización con componente DHCP exitosa');
-  });
-
 });

ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.ts

@@ -69,19 +69,21 @@ export class OgDhcpSubnetsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.loading = true;
     this.loadAlert()
-    this.syncSubnets()
+    this.loadSubnets()
   }
 
   loadSubnets() {
+    this.loading = true;
     this.http.get<any>(`${this.baseUrl}/subnets?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`).subscribe({
       next: (response) => {
         this.dataSource.data = response['hydra:member'];
         this.length = response['hydra:totalItems'];
+        this.loading = false;
       },
       error: error => {
         this.toastService.error(error.error['hydra:description']);
+        this.loading = false;
       }
     });
 
@@ -90,28 +92,6 @@ export class OgDhcpSubnetsComponent implements OnInit {
     }
   }
 
-  syncSubnets() {
-    this.loading = true;
-    const timeoutId = setTimeout(() => {
-      this.loading = false;
-      this.toastService.error('Error al sincronizar: tiempo de espera agotado');
-    }, 3500);
-
-    this.http.post(`${this.apiUrl}/sync`, {}).subscribe({
-      next: (response) => {
-        clearTimeout(timeoutId);
-        this.toastService.success('Sincronización con componente DHCP exitosa');
-        this.loadSubnets();
-        this.loading = false;
-      },
-      error: (error) => {
-        clearTimeout(timeoutId);
-        this.loading = false;
-        this.toastService.error('Error al sincronizar');
-      }
-    });
-  }
-
   toggleAction(subnet: any, action: string): void {
     switch (action) {
       case 'get':

ogWebconsole/src/app/services/config.service.ts

@@ -12,7 +12,7 @@ export class ConfigService {
   constructor(private http: HttpClient) {}
 
   loadConfig() {
-    return this.http.get('/assets/config.json').pipe(
+    return this.http.get('assets/config.json').pipe(
       catchError((error) => {
         console.error('Error loading config.json', error);
         return of({});

ogWebconsole/src/locale/en.json

@@ -21,6 +21,7 @@
   "labelOrganizationalUnit": "Organizational Unit",
   "buttonCancel": "Cancel",
   "buttonAdd": "Add",
+  "firmwareType": "Firmware",
   "addRule": "Add rule",
   "rulesHeader": "Rules",
   "statusUnavailable": "Unavailable",

ogWebconsole/src/locale/es.json

@@ -21,6 +21,7 @@
   "labelOrganizationalUnit": "Unidad organizativa",
   "buttonCancel": "Cancelar",
   "buttonAdd": "Añadir",
+  "firmwareType": "Firmware",
   "back": "Atrás",
   "addClientDialogTitle": "Añadir Cliente",
   "dialogTitleEditUser": "Editar usuario",