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

Reviewed-on: #19

CHANGELOG.md

@@ -1,9 +1,25 @@
 # Changelog
+## [0.11.0] - 2025-4-11
+### Added
+- Se ha diseñado el nuevo formulario para poder ejecutar script. Sistema mejorado con variables etiquetadas.
+- Se puede añadir descripcion a una imagen.
+- Se han añadido al formulario de crear/editar repositorio, la posibilidad de añadir usuario y puerto ssh.
+- Nuevo estado en pc => desconectado.
+- Se ha añadido nueva accion para renombrar imagen monolitica.
+
+### Improved
+- Se ha mejorado la interfaz de usuario tanto para el despliegue de imagenes, como el particionado.
+- Se ha mejorado la responsividad de la vista de grupos.
+- Cambios en el comportamiento general de muchos componentes modales. Se han añadido spinners de carga mas intuitivos.
+
+---
+
 ## [0.10.1] - 2025-3-27
 ### Improved
 - Mejoras en el comportamiento del arbol de grupos.
 - Nueva regexp para controlar las "macs" en la creacion de clientes.
 
+---
 ## [0.10.0] - 2025-3-25
 ### Added
 - Nuevo componenten de estado global.
@@ -20,14 +36,17 @@
 ### Fixed
 - Cambios en la expresion regular para la validacion de documentos DHCP en la carga masiva de pc.
 
+---
 ## [0.9.2] - 2025-03-19
 ### Changed 
 - Jenkinsfile to pubilsh packages in repo in case og release
 
+---
 ## [0.9.1] - 2025-03-12
 ### Changed
 - Se ha modificado el acceso a Mercure añadiendo nueva variable de entorno.
 
+---
 ## [0.9.0] - 2025-3-4
 ### Added
 - Integracion con Mercure. Subscriber tanto en "Trazas" con en "Clientes".
@@ -43,17 +62,20 @@
 - Cambios en DHCP. Nueva UX en "ver clientes". Ahora tenemos un buscador detallado.
 - Para gestionar/añadir clientes a subredes ahora tenemos un botón para "añadir todos" y tan solo nos aparecn los equipos que no estén previamente asignados en una subred.
 
+---
 ## [0.7.0] - 2024-12-10
 ### Refactored
 - Refactored the group screen, removing the separate tabs for clients, advanced search, and organizational units.
 - Added support for partitioning functionality in the client detail view.
 
+---
 ## [0.6.1] - 2024-11-19
 ### Improved
 - Introduced a new automatic sync mode for the ogdhcp and ogBoot components.
 - Improve test coverage.
 - New view for clients inside the classroom on the main page.
 
+---
 ## [0.6.0] - 2024-11-19
 ### Added
 - Added functionality to execute actions from the menu in the general groups screen.

ogWebconsole/src/app/app-routing.module.ts

@@ -40,6 +40,9 @@ import {EnvVarsComponent} from "./components/admin/env-vars/env-vars.component";
 import {MenusComponent} from "./components/menus/menus.component";
 import {OgDhcpSubnetsComponent} from "./components/ogdhcp/og-dhcp-subnets.component";
 import {StatusComponent} from "./components/ogdhcp/status/status.component";
+import {
+  RunScriptAssistantComponent
+} from "./components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component";
 const routes: Routes = [
   { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
   { path: '', component: MainLayoutComponent,
@@ -63,6 +66,7 @@ const routes: Routes = [
       { path: 'calendars', component: CalendarComponent },
       { path: 'clients/deploy-image', component: DeployImageComponent },
       { path: 'clients/partition-assistant', component: PartitionAssistantComponent },
+      { path: 'clients/run-script', component: RunScriptAssistantComponent },
       { path: 'clients/:id', component: ClientMainViewComponent },
       { path: 'clients/:id/create-image', component: CreateClientImageComponent },
       { path: 'repositories', component: RepositoriesComponent },

ogWebconsole/src/app/app.module.ts

@@ -118,7 +118,6 @@ import { CreateMultipleClientComponent } from './components/groups/shared/client
 import { ExportImageComponent } from './components/images/export-image/export-image.component';
 import { ImportImageComponent } from "./components/repositories/import-image/import-image.component";
 import { LoadingComponent } from './shared/loading/loading.component';
-import { RepositoryImagesComponent } from './components/repositories/repository-images/repository-images.component';
 import { InputDialogComponent } from './components/commands/commands-task/task-logs/input-dialog/input-dialog.component';
 import { ManageOrganizationalUnitComponent } from './components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component';
 import { BackupImageComponent } from './components/repositories/backup-image/backup-image.component';
@@ -134,9 +133,16 @@ import { ConvertImageComponent } from './components/repositories/convert-image/c
 import { registerLocaleData } from '@angular/common';
 import localeEs from '@angular/common/locales/es';
 import { GlobalStatusComponent } from './components/global-status/global-status.component';
-import { ShowImagesComponent } from './components/repositories/show-images/show-images.component';
+import { ShowMonoliticImagesComponent } from './components/repositories/show-monolitic-images/show-monolitic-images.component';
 import { StatusTabComponent } from './components/global-status/status-tab/status-tab.component';
 import { ConvertImageToVirtualComponent } from './components/repositories/convert-image-to-virtual/convert-image-to-virtual.component';
+import { RunScriptAssistantComponent } from './components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component';
+import {
+  SaveScriptComponent
+} from "./components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component";
+import { EditImageComponent } from './components/repositories/edit-image/edit-image.component';
+import { ShowGitImagesComponent } from './components/repositories/show-git-images/show-git-images.component';
+import { RenameImageComponent } from './components/repositories/rename-image/rename-image.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './locale/', '.json');
@@ -223,7 +229,6 @@ registerLocaleData(localeEs, 'es-ES');
     ExportImageComponent,
     ImportImageComponent,
     LoadingComponent,
-    RepositoryImagesComponent,
     InputDialogComponent,
     ManageOrganizationalUnitComponent,
     BackupImageComponent,
@@ -231,9 +236,14 @@ registerLocaleData(localeEs, 'es-ES');
     OperationResultDialogComponent,
     ConvertImageComponent,
     GlobalStatusComponent,
-    ShowImagesComponent,
+    ShowMonoliticImagesComponent,
     StatusTabComponent,
-    ConvertImageToVirtualComponent
+    ConvertImageToVirtualComponent,
+    RunScriptAssistantComponent,
+    SaveScriptComponent,
+    EditImageComponent,
+    ShowGitImagesComponent,
+    RenameImageComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.ts

@@ -228,7 +228,6 @@ export class TaskLogsComponent implements OnInit {
     this.http.get<any>(`${this.baseUrl}/commands?&page=1&itemsPerPage=10000`).subscribe(
       response => {
         this.commands = response['hydra:member'];
-        console.log(this.commands);
         this.loading = false;
       },
       error => {

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

@@ -85,14 +85,14 @@ export class CommandsComponent implements OnInit {
 
   openCreateCommandModal(): void {
     this.dialog.open(CreateCommandComponent, {
-      width: '600px',
+      width: '800px',
     }).afterClosed().subscribe(() => this.search());
   }
 
   editCommand(event: MouseEvent, command: any): void {
     event.stopPropagation();
     this.dialog.open(CreateCommandComponent, {
-      width: '600px',
+      width: '800px',
       data: command['@id']
     }).afterClosed().subscribe(() => this.search());
   }

ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css

@@ -58,3 +58,14 @@
   gap: 1em;
   padding: 1.5em;
 }
+
+.checkbox-with-hint {
+  display: flex;
+  flex-direction: column;
+}
+
+.hint-text {
+  font-size: 12px;
+  color: gray;
+  margin-left: 40px;
+}

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

@@ -13,7 +13,13 @@
 
     <div class="checkbox-group">
       <mat-checkbox formControlName="readOnly">{{ 'readOnlyLabel' | translate }}</mat-checkbox>
+
       <mat-checkbox formControlName="enabled">{{ 'enabledLabel' | translate }}</mat-checkbox>
+
+      <div class="checkbox-with-hint">
+        <mat-checkbox formControlName="parameters">{{ 'parameters' | translate }}</mat-checkbox>
+        <span class="hint-text">Si se selecciona esta opción los parámetros deben indicarse en el script con el símbolo &#64;.</span>
+      </div>
     </div>
 
     <mat-form-field appearance="fill" class="full-width">

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

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { HttpClient } from '@angular/common/http';
@@ -11,7 +11,7 @@ import { ConfigService } from "@services/config.service";
   templateUrl: './create-command.component.html',
   styleUrls: ['./create-command.component.css']
 })
-export class CreateCommandComponent {
+export class CreateCommandComponent implements OnInit{
   baseUrl: string;
   createCommandForm: FormGroup<any>;
   commandId: string | null = null;
@@ -30,6 +30,7 @@ export class CreateCommandComponent {
       name: ['', Validators.required],
       script: [''],
       readOnly: [false],
+      parameters: [false],
       enabled: [true],
       comments: [''],
     });
@@ -44,12 +45,12 @@ export class CreateCommandComponent {
   load(): void {
     this.dataService.getCommand(this.data).subscribe({
       next: (response) => {
-        console.log(response);
         this.createCommandForm = this.fb.group({
           name: [response.name, Validators.required],
           notes: [response.notes],
           script: [response.script],
           readOnly: [response.readOnly],
+          parameters: [response.parameters],
           enabled: [response.enabled],
         });
         this.commandId = response['@id'];
@@ -84,7 +85,6 @@ export class CreateCommandComponent {
           },
           (error) => {
             this.toastService.error(error['error']['hydra:description']);
-            console.error('Error al editar el comando', error);
           }
         );
       } else {
@@ -95,7 +95,6 @@ export class CreateCommandComponent {
           },
           (error) => {
             this.toastService.error(error['error']['hydra:description']);
-            console.error('Error al añadir comando', error);
           }
         );
       }

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

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

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

@@ -29,7 +29,7 @@ export class ExecuteCommandComponent implements OnInit {
     { name: 'Particionar y Formatear', slug: 'partition', disabled: false },
     { name: 'Inventario Software', slug: 'software-inventory', disabled: true },
     { name: 'Inventario Hardware', slug: 'hardware-inventory', disabled: true },
-    { name: 'Ejecutar script', slug: 'run-script', disabled: true },
+    { name: 'Ejecutar comando', slug: 'run-script', disabled: false },
   ];
 
   client: any = {};
@@ -60,6 +60,14 @@ export class ExecuteCommandComponent implements OnInit {
       this.openDeployImageAssistant();
     }
 
+    if (action === 'run-script') {
+      this.openRunScriptAssistant();
+    }
+
+    if (action === 'login') {
+      this.loginClient();
+    }
+
     if (action === 'reboot') {
       this.rebootClient();
     }
@@ -86,6 +94,19 @@ export class ExecuteCommandComponent implements OnInit {
     );
   }
 
+  loginClient(): void {
+    this.http.post(`${this.baseUrl}/clients/server/login-client`, {
+      clients: this.clientData.map((client: any) => client['@id'])
+    }).subscribe(
+      response => {
+        this.toastService.success('Cliente actualizado correctamente');
+      },
+      error => {
+        this.toastService.error('Error de conexión con el cliente');
+      }
+    );
+  }
+
   powerOnClient(): void {
     this.http.post(`${this.baseUrl}/image-repositories/wol`, {
       clients: this.clientData.map((client: any) => client['@id'])
@@ -113,8 +134,18 @@ export class ExecuteCommandComponent implements OnInit {
   }
 
   openPartitionAssistant(): void {
+    const clientDataToSend = this.clientData.map(client => ({
+      name: client.name,
+      mac: client.mac,
+      uuid: '/clients/'+client.uuid,
+      status: client.status,
+      partitions: client.partitions,
+      firmwareType: client.firmwareType,
+      ip: client.ip
+    }));
+
     this.router.navigate(['/clients/partition-assistant'], {
-      state: { clientData: this.clientData },
+      queryParams: { clientData: JSON.stringify(clientDataToSend) }
     }).then(r => {
       console.log('Navigated to partition assistant with data:', this.clientData);
     });
@@ -127,10 +158,38 @@ export class ExecuteCommandComponent implements OnInit {
   }
 
   openDeployImageAssistant(): void {
+    const clientDataToSend = this.clientData.map(client => ({
+      name: client.name,
+      mac: client.mac,
+      uuid: '/clients/'+client.uuid,
+      status: client.status,
+      partitions: client.partitions,
+      ip: client.ip
+    }));
+
     this.router.navigate(['/clients/deploy-image'], {
-      state: { clientData: this.clientData },
+      queryParams: { clientData: JSON.stringify(clientDataToSend) }
     }).then(r => {
       console.log('Navigated to deploy image with data:', this.clientData);
     });
   }
+
+  openRunScriptAssistant(): void {
+    const clientDataToSend = this.clientData.map(client => ({
+      name: client.name,
+      mac: client.mac,
+      uuid: '/clients/'+client.uuid,
+      status: client.status,
+      partitions: client.partitions,
+      ip: client.ip
+    }));
+
+    this.router.navigate(['/clients/run-script'], {
+      queryParams: { clientData: JSON.stringify(clientDataToSend) }
+    }).then(() => {
+      console.log('Navigated to run script with data:', clientDataToSend);
+    });
+  }
+
+
 }

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

@@ -106,25 +106,27 @@ export class GlobalStatusComponent implements OnInit {
     const timeoutId = setTimeout(() => {
       this.loading = false;
       this.repositories.forEach(repository => {
-        this.errorRepositories[repository.uuid] = true;
+        if (!(repository.uuid in this.errorRepositories)) {
+          this.errorRepositories[repository.uuid] = true;
+        }
       });
     }, 5000);
+
     this.http.get<any>(`${this.repositoriesUrl}?page=1&itemsPerPage=10`).subscribe(
       data => {
         this.repositories = data['hydra:member'];
         let remainingRepositories = this.repositories.length;
+
         this.repositories.forEach(repository => {
           this.loadRepositoryStatus(repository.uuid, (errorOccurred: boolean) => {
             remainingRepositories--;
+
+            this.errorRepositories[repository.uuid] = errorOccurred;
+
             if (remainingRepositories === 0) {
               this.loading = false;
               clearTimeout(timeoutId);
             }
-            if (errorOccurred) {
-              this.errorRepositories[repository.uuid] = true;
-            } else {
-              this.errorRepositories[repository.uuid] = false;
-            }
           });
         });
       },

ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css

@@ -42,23 +42,19 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  /* Distribuye el espacio entre los gráficos */
   gap: 20px;
-  /* Añade espacio entre los gráficos */
 }
 
 .disk-usage {
   text-align: center;
   flex: 1;
   min-width: 200px;
-  /* Ajusta este valor según el tamaño mínimo deseado para cada gráfico */
 }
 
 .circular-chart {
   max-width: 150px;
   max-height: 150px;
   margin: 0 auto;
-  /* Centra el gráfico dentro del contenedor */
 }
 
 .chart {
@@ -84,6 +80,11 @@
 
 .client-info {
   margin: 20px 0;
+  border-radius: 12px;
+  background-color: #f5f7fa;
+  padding: 20px;
+  border: 2px solid #d1d9e6;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }
 
 .info-section {
@@ -148,9 +149,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  /* Distribuye el espacio entre los gráficos */
   gap: 20px;
-  /* Añade espacio entre los gráficos */
 }
 
 .buttons-row {
@@ -235,29 +234,22 @@
   animation: progress 1s ease-out forwards;
 }
 
-/* Define colores distintos para cada partición */
 .partition-0 {
   stroke: #00bfa5;
 }
 
-/* Ejemplo: verde */
 .partition-1 {
   stroke: #ff6f61;
 }
 
-/* Ejemplo: rojo */
 .partition-2 {
   stroke: #ffb400;
 }
 
-/* Ejemplo: amarillo */
 .partition-3 {
   stroke: #3498db;
 }
 
-/* Ejemplo: azul */
-
-/* Texto en el centro del gráfico */
 .percentage {
   fill: #333;
   font-size: 0.7rem;
@@ -276,14 +268,14 @@
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   flex-wrap: wrap;
   justify-content: center;
-  align-items: center; /* Centra contenido verticalmente */
+  align-items: stretch;
   margin-bottom: 20px;
 }
 
 .table-container {
-  flex: 1;
+  flex: 3;
   display: flex;
-  justify-content: center; /* Centrar la tabla */
+  justify-content: center;
   align-items: center;
 }
 
@@ -296,7 +288,7 @@ table.mat-elevation-z8 {
 }
 
 .mat-header-cell {
-  background-color: #d1d9e6 !important; /* Encabezado más moderno */
+  background-color: #d1d9e6 !important;
   color: #333;
   font-weight: bold;
   text-align: center;
@@ -312,11 +304,11 @@ table.mat-elevation-z8 {
 }
 
 .charts-container {
-  flex: 1;
+  flex: 2;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
-  justify-content: center; /* Centra los gráficos */
+  align-items: center;
-  gap: 20px;
+  justify-content: center;
 }
 
 .disk-usage {

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

@@ -34,7 +34,6 @@
   </div>
 
   <div class="disk-container">
-    <!-- Tabla de particiones -->
     <div class="table-container">
       <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
         <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
@@ -55,7 +54,6 @@
       </table>
     </div>
 
-    <!-- Gráfico circular -->
     <div class="charts-container">
       <ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
         <div *ngFor="let disk of chartDisk" class="disk-usage">

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

@@ -48,7 +48,7 @@ export class ClientMainViewComponent implements OnInit {
     { name: 'Particionar y Formatear', slug: 'partition' },
     { name: 'Inventario Software', slug: 'software-inventory' },
     { name: 'Inventario Hardware', slug: 'hardware-inventory' },
-    { name: 'Ejecutar script', slug: 'run-script' },
+    { name: 'Ejecutar comando', slug: 'run-script' },
   ];
 
   datePipe: DatePipe = new DatePipe('es-ES');

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

@@ -24,6 +24,7 @@
 table {
   width: 100%;
   margin-top: 50px;
+  background-color: #eaeff6;
 }
 
 .search-container  {
@@ -36,18 +37,26 @@ table {
 }
 
 .select-container {
-  margin-top: 20px;
+  gap: 16px;
-  align-items: center;
   width: 100%;
-  padding: 0 5px;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.selector {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+  margin-top: 30px;
   box-sizing: border-box;
 }
 
-.custom-width {
+.half-width {
-  width: 50%;
+  flex: 1;
-  margin-bottom: 16px;
+  max-width: 50%;
 }
 
+
 .search-string {
   flex: 2;
   padding: 5px;
@@ -87,3 +96,10 @@ table {
   padding-right: 1em;
 }
 
+.partition-table-container {
+  background-color: #eaeff6;
+  padding: 20px;
+  border-radius: 12px;
+  margin-top: 20px;
+}
+

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

@@ -7,39 +7,53 @@
     </h2>
   </div>
   <div class="button-row">
-    <button class="action-button" (click)="save()">Ejecutar</button>
+    <button class="action-button" [disabled]="!selectedPartition"  (click)="save()">Ejecutar</button>
   </div>
 </div>
 <mat-divider></mat-divider>
 
 <div class="select-container">
-  <mat-form-field appearance="fill" class="custom-width">
+  <div class="selector">
-    <mat-label>Nombre canónico</mat-label>
+    <mat-form-field appearance="fill" class="half-width">
-    <input matInput [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
+      <mat-label>Nombre canónico</mat-label>
-  </mat-form-field>
+      <input matInput [disabled]="selectedImage" [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" class="half-width">
+      <mat-label>Seleccione imagen</mat-label>
+      <mat-select [(ngModel)]="selectedImage" name="selectedImage" (selectionChange)="resetCanonicalName()" required>
+        <mat-option *ngFor="let image of images" [value]="image">{{ image?.name }}</mat-option>
+      </mat-select>
+      <mat-hint>Seleccione la imagen para sobreescribir si se requiere. </mat-hint>
+    </mat-form-field>
+  </div>
+
+
+  <div class="partition-table-container">
+    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: start">Seleccionar partición</th>
+        <td mat-cell *matCellDef="let row">
+          <mat-radio-group
+            [(ngModel)]="selectedPartition"
+            [disabled]="!row.operativeSystem"
+          >
+            <mat-radio-button [value]="row">
+            </mat-radio-button>
+          </mat-radio-group>
+        </td>
+      </ng-container>
+
+      <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+        <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
+        <td mat-cell *matCellDef="let image">
+          {{ column.cell(image) }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+
 </div>
-
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-  <ng-container matColumnDef="select">
-    <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: start">Seleccionar partición</th>
-    <td mat-cell *matCellDef="let row">
-      <mat-radio-group
-        [(ngModel)]="selectedPartition"
-        [disabled]="!row.operativeSystem"
-      >
-        <mat-radio-button [value]="row">
-        </mat-radio-button>
-      </mat-radio-group>
-    </td>
-  </ng-container>
-
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
-    <td mat-cell *matCellDef="let image">
-      {{ column.cell(image) }}
-    </td>
-  </ng-container>
-
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import { HttpClient } from "@angular/common/http";
 import { ToastrService } from "ngx-toastr";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -11,7 +11,7 @@ import { ConfigService } from '@services/config.service';
   templateUrl: './create-image.component.html',
   styleUrl: './create-image.component.css'
 })
-export class CreateClientImageComponent {
+export class CreateClientImageComponent implements OnInit{
   baseUrl: string;
   @Output() dataChange = new EventEmitter<any>();
 
@@ -24,6 +24,7 @@ export class CreateClientImageComponent {
   name: string = '';
   client: any = null;
   loading: boolean = false;
+  selectedImage: any = null;
   dataSource = new MatTableDataSource<any>();
   columns = [
     {
@@ -103,14 +104,29 @@ export class CreateClientImageComponent {
     );
   }
 
+  resetCanonicalName() {
+    this.name = this.selectedImage ? this.selectedImage.name : '';
+  }
+
   save(): void {
     this.loading = true;
 
+    if (!this.selectedPartition) {
+      this.toastService.error('Debes seleccionar una partición');
+      this.loading = false;
+      return;
+    }
+
+    if (this.selectedImage) {
+      this.toastService.warning('Aviso: Está seleccionando una imagen previamente creada. Se procede a crear un backup de la misma. ');
+    }
+
     const payload = {
       client: `/clients/${this.clientId}`,
       name: this.name,
       partition: this.selectedPartition['@id'],
-      source: 'assistant'
+      source: 'assistant',
+      selectedImage: this.selectedImage?.['@id']
     };
 
 

ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css

@@ -6,6 +6,7 @@
 table {
   width: 100%;
   margin-top: 50px;
+  background-color: #eaeff6;
 }
 
 .search-container  {
@@ -38,10 +39,8 @@ table {
 .select-container {
   margin-top: 20px;
   align-items: center;
-  width: 100%;
+  padding: 20px;
-  padding: 0 5px;
   box-sizing: border-box;
-  padding-left: 1em;
 }
 
 .input-group {
@@ -51,6 +50,10 @@ table {
   margin-top: 20px;
 }
 
+mat-option .unit-name {
+  display: block;
+}
+
 .input-field {
   flex: 1 1 calc(33.33% - 16px);
   min-width: 250px;
@@ -107,6 +110,27 @@ table {
   position: relative;
   padding: 8px;
   text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+
+  &:hover {
+    background-color: #f0f0f0;
+    transform: scale(1.02);
+  }
+}
+
+::ng-deep .custom-tooltip {
+  white-space: pre-line !important;
+  max-width: 200px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.selected-client {
+  background-color: #a0c2e5 !important; /* Azul */
+  color: white !important;
 }
 
 .client-details {
@@ -114,11 +138,15 @@ table {
 }
 
 .client-name {
-  display: block;
+  font-size: 0.9em;
-  font-size: 1.2em;
   font-weight: 600;
   color: #333;
   margin-bottom: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  display: inline-block;
 }
 
 .client-ip {
@@ -137,3 +165,34 @@ table {
   display: flex;
   padding-right: 1em;
 }
+
+.partition-table-container {
+  background-color: #eaeff6;
+  padding: 20px;
+  border-radius: 12px;
+  margin-top: 20px;
+}
+
+.disabled-client {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.error-message {
+  background-color: #de2323;
+  padding: 20px;
+  border-radius: 12px;
+  margin-top: 20px;
+  color: white;
+  font-weight: bold;
+}
+
+.action-button {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}

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

@@ -7,34 +7,60 @@
     </h2>
   </div>
   <div class="button-row">
-    <button class="action-button" (click)="save()">Ejecutar</button>
+    <button class="action-button" [disabled]="!allSelected || !selectedModelClient || !selectedImage || !selectedMethod || !selectedPartition"  (click)="save()">Ejecutar</button>
   </div>
 </div>
 <mat-divider></mat-divider>
 
 <div class="select-container">
-  <mat-expansion-panel hideToggle>
+  <mat-expansion-panel>
     <mat-expansion-panel-header>
       <mat-panel-title> Clientes </mat-panel-title>
-      <mat-panel-description> Listado de clientes donde se desplegará la imagen </mat-panel-description>
+      <mat-panel-description>
+        Listado de clientes donde se desplegará la imagen
+        <mat-icon>desktop_windows</mat-icon>
+      </mat-panel-description>
     </mat-expansion-panel-header>
 
-      <div class="clients-grid" >
+    <div class="button-row">
-        <div *ngFor="let client of clientData" class="client-item">
+      <button class="action-button" (click)="toggleSelectAll()">
-          <div class="client-card">
+        {{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
-            <img
+      </button>
-              [src]="'assets/images/ordenador_' + client.status + '.png'"
+    </div>
-              alt="Client Icon"
-              class="client-image" />
 
-            <div class="client-details">
+    <div class="clients-grid">
-              <span class="client-name">{{ client.name }}</span>
+      <div *ngFor="let client of clientData" class="client-item">
-              <span class="client-ip">{{ client.ip }}</span>
+        <div class="client-card"
-              <span class="client-ip">{{ client.mac }}</span>
+             (click)="client.status === 'og-live' && toggleClientSelection(client)"
-            </div>
+             [ngClass]="{'selected-client': client.selected, 'disabled-client': client.status !== 'og-live'}"
+             [matTooltip]="getPartitionsTooltip(client)"
+             matTooltipPosition="above"
+             matTooltipClass="custom-tooltip">
+
+          <img
+            [src]="'assets/images/computer_' + client.status + '.svg'"
+            alt="Client Icon"
+            class="client-image" />
+
+          <div class="client-details">
+            <span class="client-name">{{ client.name | slice:0:20 }}</span>
+            <span class="client-ip">{{ client.ip }}</span>
+            <span class="client-ip">{{ client.mac }}</span>
           </div>
+          <mat-divider></mat-divider>
+
+          <mat-radio-group [(ngModel)]="selectedModelClient" (change)="loadPartitions(selectedModelClient)">
+            <mat-radio-button [value]="client"
+                              color="primary"
+                              [disabled]="!client.selected"
+                              (click)="$event.stopPropagation()">
+              Modelo
+            </mat-radio-button>
+          </mat-radio-group>
         </div>
       </div>
+    </div>
+
   </mat-expansion-panel>
 </div>
 
@@ -45,96 +71,106 @@
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>Seleccione imagen</mat-label>
       <mat-select [(ngModel)]="selectedImage" name="selectedImage">
-        <mat-option *ngFor="let image of images" [value]="image">{{ image.image?.name }}</mat-option>
+        <mat-option *ngFor="let image of images" [value]="image">
+          <div class="unit-name"> {{ image.name }}</div>
+          <div style="font-size: smaller; color: gray;">{{ image.description }}</div>
+        </mat-option>
       </mat-select>
-      <mat-hint *ngIf="clientData">Imágenes alojadas en {{ clientData[0].repository?.name }}</mat-hint>
     </mat-form-field>
 
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>Seleccione método de deploy</mat-label>
-      <mat-select [(ngModel)]="selectedMethod" name="selectedMethod">
+      <mat-select [(ngModel)]="selectedMethod" name="selectedMethod" (selectionChange)="validateImageSize()">
-        <mat-option *ngFor="let method of allMethods" [value]="method">{{ method }}</mat-option>
+        <mat-option *ngFor="let method of allMethods" [value]="method.value">{{ method.name }}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
+
+  <div *ngIf="errorMessage" class="error-message">
+    {{ errorMessage }}
+  </div>
+
+  <div class="partition-table-container">
+    <table mat-table [dataSource]="filteredPartitions" class="mat-elevation-z8">
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef style="text-align: start">Seleccionar partición</th>
+        <td mat-cell *matCellDef="let row">
+          <mat-radio-group [(ngModel)]="selectedPartition" name="selectedPartition" (change)="validateImageSize()">
+            <mat-radio-button [value]="row">
+            </mat-radio-button>
+          </mat-radio-group>
+        </td>
+      </ng-container>
+
+      <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+        <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
+        <td mat-cell *matCellDef="let image">
+          {{ column.cell(image) }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+
+  <mat-divider></mat-divider>
+  <div class="options-container">
+    <h3 *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">Opciones multicast</h3>
+    <h3 *ngIf="isMethod('p2p')" class="input-group">Opciones torrent</h3>
+    <div *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">
+      <mat-form-field appearance="fill" class="input-field">
+        <mat-label>Puerto</mat-label>
+        <input matInput [(ngModel)]="mcastPort" name="mcastPort" type="number">
+      </mat-form-field>
+
+      <mat-form-field appearance="fill" class="input-field">
+        <mat-label>Dirección</mat-label>
+        <input matInput [(ngModel)]="mcastIp" name="mcastIp">
+      </mat-form-field>
+
+      <mat-form-field appearance="fill" class="input-field">
+        <mat-label i18n="@@mcastModeLabel">Modo Multicast</mat-label>
+        <mat-select [(ngModel)]="mcastMode" name="mcastMode">
+          <mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
+            {{ option.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill" class="input-field">
+        <mat-label>Velocidad</mat-label>
+        <input matInput [(ngModel)]="mcastSpeed" name="mcastSpeed" type="number">
+      </mat-form-field>
+
+      <mat-form-field appearance="fill" class="input-field">
+        <mat-label>Máximo Clientes</mat-label>
+        <input matInput [(ngModel)]="mcastMaxClients" name="mcastMaxClients" type="number">
+      </mat-form-field>
+
+      <mat-form-field appearance="fill" class="input-field">
+        <mat-label>Tiempo Máximo de Espera</mat-label>
+        <input matInput [(ngModel)]="mcastMaxTime" name="mcastMaxTime" type="number">
+      </mat-form-field>
+    </div>
+
+    <div *ngIf="isMethod('p2p')" class="input-group">
+      <mat-form-field appearance="fill" class="input-field">
+        <mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
+        <mat-select [(ngModel)]="p2pMode" name="p2pMode">
+          <mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
+            {{ option.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill" class="input-field">
+        <mat-label>Semilla</mat-label>
+        <input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number">
+      </mat-form-field>
+    </div>
+  </div>
+
 </div>
 
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-  <ng-container matColumnDef="select">
-    <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: start">Seleccionar partición</th>
-    <td mat-cell *matCellDef="let row">
-      <mat-radio-group [(ngModel)]="selectedPartition" name="selectedPartition">
-        <mat-radio-button [value]="row">
-        </mat-radio-button>
-      </mat-radio-group>
-    </td>
-  </ng-container>
-
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
-    <td mat-cell *matCellDef="let image">
-      {{ column.cell(image) }}
-    </td>
-  </ng-container>
-
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
-
-<mat-divider></mat-divider>
-<div class="options-container">
-  <h3 *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">Opciones multicast</h3>
-  <h3 *ngIf="isMethod('p2p')" class="input-group">Opciones torrent</h3>
-  <div *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">
-    <mat-form-field appearance="fill" class="input-field">
-      <mat-label>Puerto</mat-label>
-      <input matInput [(ngModel)]="mcastPort" name="mcastPort" type="number">
-    </mat-form-field>
-
-    <mat-form-field appearance="fill" class="input-field">
-      <mat-label>Dirección</mat-label>
-      <input matInput [(ngModel)]="mcastIp" name="mcastIp">
-    </mat-form-field>
-
-    <mat-form-field appearance="fill" class="input-field">
-      <mat-label i18n="@@mcastModeLabel">Modo Multicast</mat-label>
-      <mat-select [(ngModel)]="mcastMode" name="mcastMode">
-        <mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
-          {{ option.name }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field appearance="fill" class="input-field">
-      <mat-label>Velocidad</mat-label>
-      <input matInput [(ngModel)]="mcastSpeed" name="mcastSpeed" type="number">
-    </mat-form-field>
-
-    <mat-form-field appearance="fill" class="input-field">
-      <mat-label>Máximo Clientes</mat-label>
-      <input matInput [(ngModel)]="mcastMaxClients" name="mcastMaxClients" type="number">
-    </mat-form-field>
-
-    <mat-form-field appearance="fill" class="input-field">
-      <mat-label>Tiempo Máximo de Espera</mat-label>
-      <input matInput [(ngModel)]="mcastMaxTime" name="mcastMaxTime" type="number">
-    </mat-form-field>
-  </div>
-
-  <div *ngIf="isMethod('p2p')" class="input-group">
-    <mat-form-field appearance="fill" class="input-field">
-      <mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
-      <mat-select [(ngModel)]="p2pMode" name="p2pMode">
-        <mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
-          {{ option.name }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-
-    <mat-form-field appearance="fill" class="input-field">
-      <mat-label>Semilla</mat-label>
-      <input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number">
-    </mat-form-field>
-  </div>
-</div>
 

ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.spec.ts

@@ -14,10 +14,11 @@ import { MatRadioModule } from '@angular/material/radio';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
 import { ToastrModule, ToastrService } from 'ngx-toastr';
-import { provideRouter } from '@angular/router';
+import { ActivatedRoute, provideRouter } from '@angular/router';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { MatSelectModule } from '@angular/material/select';
-import {MatExpansionModule} from "@angular/material/expansion";
+import { MatExpansionModule } from "@angular/material/expansion";
-import {LoadingComponent} from "../../../../../shared/loading/loading.component";
+import { LoadingComponent } from "../../../../../shared/loading/loading.component";
 import { ConfigService } from '@services/config.service';
 
 describe('DeployImageComponent', () => {
@@ -63,13 +64,25 @@ describe('DeployImageComponent', () => {
           provide: MAT_DIALOG_DATA,
           useValue: {}
         },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParams: {
+              subscribe: (fn: (value: any) => void) => fn({ clientData: JSON.stringify([{ '@id': '123', uuid: 'client-uuid', status: 'og-live', partitions: [] }]) })
+            }
+          }
+        },
         { provide: ConfigService, useValue: mockConfigService }
-      ]
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(DeployImageComponent);
     component = fixture.componentInstance;
+    component.clientData = [{ '@id': '123', uuid: 'client-uuid', status: 'og-live', partitions: [] }];
+    component.selectedModelClient = component.clientData[0];
+    component.loadPartitions(component.selectedModelClient);
     fixture.detectChanges();
   });
 

ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts

@@ -19,7 +19,6 @@ export class DeployImageComponent {
   clientId: string | null = null;
   partitions: any[] = [];
   images: any[] = [];
-  clientName: string = '';
   selectedImage: any = null;
   selectedMethod: string | null = null;
   selectedPartition: any = null;
@@ -31,10 +30,10 @@ export class DeployImageComponent {
   mcastMaxTime: Number = 0;
   p2pMode: string = '';
   p2pTime: Number = 0;
-  name: string = '';
   client: any = null;
   clientData: any = [];
   loading: boolean = false;
+  allSelected = true;
 
   protected p2pModeOptions = [
     { name: 'Leecher', value: 'leecher' },
@@ -46,13 +45,17 @@ export class DeployImageComponent {
     { name: 'Full duplex', value: "full" },
   ];
 
+  selectedClients: any[] = [];
+  selectedModelClient: any = null;
+  filteredPartitions: any[] = [];
+  selectedRepository: any = null;
+
   allMethods = [
-    'uftp',
+    { name: 'Multicast', value: 'udpcast' },
-    'udpcast',
+    { name: 'Unicast', value: 'unicast' },
-    'udpcast-direct',
+    { name: 'Multicast (direct)', value: 'udpcast-direct' },
-    'unicast',
+    { name: 'Unicast (direct)', value: 'unicast-direct' },
-    'unicast-direct',
+    { name: 'Torrent', value: 'p2p' },
-    'p2p'
   ];
 
   dataSource = new MatTableDataSource<any>();
@@ -92,55 +95,109 @@ export class DeployImageComponent {
     private toastService: ToastrService,
     private configService: ConfigService,
     private router: Router,
+    private route: ActivatedRoute
   ) {
     this.baseUrl = this.configService.apiUrl;
-    const navigation = this.router.getCurrentNavigation();
+    this.route.queryParams.subscribe(params => {
-    this.clientData = navigation?.extras?.state?.['clientData'];
+      if (params['clientData']) {
-    this.clientId = this.clientData?.[0]['@id'];
+        this.clientData = JSON.parse(params['clientData']);
-    this.loadImages();
+      }
-    this.loadPartitions()
+    });
+    this.clientId = this.clientData?.length ? this.clientData[0]['@id'] : null;
+    this.clientData.forEach((client: { selected: boolean; status: string}) => {
+      if (client.status === 'og-live') {
+        client.selected = true;
+      }
+    });
+    this.selectedClients = this.clientData.filter(
+      (client: { status: string }) => client.status === 'og-live'
+    );
+
+    this.selectedModelClient = this.clientData.find(
+      (client: { status: string }) => client.status === 'og-live'
+    ) || null;
+
+    if (this.selectedModelClient) {
+      this.loadPartitions(this.selectedModelClient);
+    }
   }
 
   isMethod(method: string): boolean {
     return this.selectedMethod === method;
   }
 
-  loadPartitions() {
+  toggleClientSelection(client: any) {
-    const url = `${this.baseUrl}${this.clientId}`;
+    client.selected = !client.selected;
-    this.http.get(url).subscribe(
+    this.updateSelectedClients();
-      (response: any) => {
+  }
-        if (response.partitions) {
+
-          this.client = response;
+  updateSelectedClients() {
-          this.clientName = response.name;
+    this.selectedClients = this.clientData.filter(
-          this.dataSource.data = response.partitions.filter((partition: any) => {
+      (client: { selected: boolean; state: string }) => client.selected && client.state === "og-live"
-            return partition.partitionNumber !== 0;
-          });
-          this.p2pMode = response.organizationalUnit?.networkSettings?.p2pMode;
-          this.p2pTime = response.organizationalUnit?.networkSettings?.p2pTime;
-          this.mcastSpeed = response.organizationalUnit?.networkSettings?.mcastSpeed;
-          this.mcastMode = response.organizationalUnit?.networkSettings?.mcastMode;
-          this.mcastPort = response.organizationalUnit?.networkSettings?.mcastPort;
-          this.mcastIp = response.organizationalUnit?.networkSettings?.mcastIp;
-        }
-      },
-      (error) => {
-        console.error('Error al cargar los datos del cliente:', error);
-      }
     );
+
+    if (!this.selectedClients.includes(this.selectedModelClient)) {
+      this.selectedModelClient = null;
+      this.filteredPartitions = [];
+    }
+  }
+
+  getPartitionsTooltip(client: any): string {
+    if (!client.partitions || client.partitions.length === 0) {
+      return 'No hay particiones disponibles';
+    }
+
+    return client.partitions
+      .map((p: { partitionNumber: any; size: any; filesystem: any }) => `#${p.partitionNumber} ${p.filesystem} - ${p.size / 1024 }GB`)
+      .join('\n');
+  }
+
+  loadPartitions(client: any) {
+    if (client.selected) {
+      this.http.get(`${this.baseUrl}${client.uuid}`).subscribe(
+        (fullClientData: any) => {
+          this.filteredPartitions = fullClientData.partitions;
+          this.selectedRepository = fullClientData.repository ?? null;
+
+          if (fullClientData.partitions) {
+            this.filteredPartitions = fullClientData.partitions.filter((partition: any) => {
+              return partition.partitionNumber !== 0;
+            });
+            this.p2pMode = fullClientData.organizationalUnit?.networkSettings?.p2pMode;
+            this.p2pTime = fullClientData.organizationalUnit?.networkSettings?.p2pTime;
+            this.mcastSpeed = fullClientData.organizationalUnit?.networkSettings?.mcastSpeed;
+            this.mcastMode = fullClientData.organizationalUnit?.networkSettings?.mcastMode;
+            this.mcastPort = fullClientData.organizationalUnit?.networkSettings?.mcastPort;
+            this.mcastIp = fullClientData.organizationalUnit?.networkSettings?.mcastIp;
+          }
+
+          this.loadImages();
+        },
+        (error) => {
+          console.error('Error al cargar los datos completos del cliente:', error);
+        }
+      );
+    } else {
+      this.selectedClients = this.selectedClients.filter(c => c.uuid !== client.uuid);
+      this.filteredPartitions = [];
+    }
+  }
+
+
+  toggleSelectAll() {
+    this.allSelected = !this.allSelected;
+    this.clientData.forEach((client: { selected: boolean; status: string }) => {
+      if (client.status === "og-live") {
+        client.selected = this.allSelected;
+      }
+    });
   }
 
   loadImages() {
-    if (!this.clientData || this.clientData.length === 0 || !this.clientData[0]) {
+    const repositoryId = this.selectedRepository?.id;
-      console.error('Error: clientData es nulo, indefinido o vacío.');
-      return;
-    }
-
-    const repositoryId =
-      this.clientData[0]?.repository?.id ??
-      this.clientData[0]?.organizationalUnit?.networkSettings?.repository?.id;
 
     if (!repositoryId) {
-      console.error('Error: No se encontró repositoryId en clientData.');
+      console.error('Error: No se encontró repositoryId en el cliente seleccionado.');
       return;
     }
 
@@ -156,9 +213,27 @@ export class DeployImageComponent {
     );
   }
 
+  validateImageSize() {
+    if (this.selectedImage && this.selectedPartition) {
+      if ((this.selectedImage.datasize / 1024) / 1024 > this.selectedPartition.size) {
+
+        this.errorMessage = "El tamaño de la imagen seleccionada excede el tamaño de la partición.";
+        return false;
+      }
+    }
+    this.errorMessage = "";
+    return true;
+  }
+
   save(): void {
     this.loading = true;
 
+    if (!this.selectedClients.length) {
+      this.toastService.error('Debe seleccionar al menos un cliente');
+      this.loading = false;
+      return;
+    }
+
     if (!this.selectedImage) {
       this.toastService.error('Debe seleccionar una imagen');
       this.loading = false;
@@ -180,7 +255,7 @@ export class DeployImageComponent {
     this.toastService.info('Preparando petición de despliegue');
 
     const payload = {
-      clients: this.clientData.map((client: any) => client['@id']),
+      clients: this.selectedClients.map((client: any) => client.uuid),
       method: this.selectedMethod,
       // partition: this.selectedPartition['@id'],
       diskNumber: this.selectedPartition.diskNumber,
@@ -203,7 +278,6 @@ export class DeployImageComponent {
           this.router.navigate(['/commands-logs']);
         },
         error: (error) => {
-          console.error('Error:', error);
           this.toastService.error(error.error['hydra:description'], 'Se ha detectado un error en el despliegue de imágenes.', {
             "closeButton": true,
             "newestOnTop": false,
@@ -215,7 +289,6 @@ export class DeployImageComponent {
           });
           this.loading = false;
         }
-      }
+      });
-      );
   }
 }

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

@@ -1,8 +1,8 @@
 .partition-assistant {
-  font-family: 'Roboto', sans-serif;
+  padding: 40px;
-  background-color: #f9f9f9;
+  margin: 20px;
-  padding: 20px;
+  background-color: #eaeff6;
-  margin: 20px auto;
+  border-radius: 12px;
 }
 
 .header-container {
@@ -19,40 +19,14 @@
   color: #555;
 }
 
-.partition-bar {
-  display: flex;
-  margin: 20px 0;
-  height: 40px;
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: #e0e0e0;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.partition-segment {
-  text-align: center;
-  color: white;
-  line-height: 40px;
-  font-weight: 500;
-  font-size: 0.9rem;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-  border-right: 2px solid white; /* Borde de separación */
-}
-
-.partition-segment:last-child {
-  border-right: none;
-}
-
 .partition-table {
   width: 100%;
   border-collapse: collapse;
-  background-color: #fff;
   overflow: hidden;
   margin-bottom: 20px;
 }
 
 .partition-table th {
-  background-color: #f5f5f5;
   color: #333;
   padding: 12px;
   font-weight: 600;
@@ -178,26 +152,20 @@ button.remove-btn:hover {
   position: relative;
 }
 
-.client-card {
-  background: #ffffff;
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  position: relative;
-  padding: 8px;
-  text-align: center;
-}
-
 .client-details {
   margin-top: 4px;
 }
 
 .client-name {
-  display: block;
+  font-size: 0.9em;
-  font-size: 1.2em;
   font-weight: 600;
   color: #333;
   margin-bottom: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  display: inline-block;
 }
 
 .client-ip {
@@ -216,9 +184,68 @@ button.remove-btn:hover {
   margin-top: 20px;
   align-items: center;
   width: 100%;
-  padding: 0 5px;
   box-sizing: border-box;
   padding-left: 1em;
 }
 
+.client-card {
+  background: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+  padding: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+
+  &:hover {
+    background-color: #f0f0f0;
+    transform: scale(1.02);
+  }
+}
+
+::ng-deep .custom-tooltip {
+  white-space: pre-line !important;
+  max-width: 200px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.selected-client {
+  background-color: #a0c2e5 !important;
+  color: white !important;
+}
+
+.button-row {
+  display: flex;
+  padding-right: 1em;
+}
+
+.disabled-client {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.row-button {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+}
+
+
+.action-button {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}
+
+
+
 

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

@@ -7,27 +7,55 @@
     </h2>
   </div>
   <div class="subnets-button-row">
-    <button class="action-button" [disabled]="data.status === 'busy'" (click)="save()">Ejecutar</button>
+    <button class="action-button" [disabled]="data.status === 'busy' || !selectedModelClient || !allSelected" (click)="save()">Ejecutar</button>
   </div>
 </div>
 
 <div class="select-container">
-  <mat-expansion-panel hideToggle>
+  <mat-expansion-panel>
     <mat-expansion-panel-header>
       <mat-panel-title> Clientes </mat-panel-title>
-      <mat-panel-description> Listado de clientes donde se realizará el particionado </mat-panel-description>
+      <mat-panel-description>
+        Listado de clientes donde se realizará el particionado
+        <mat-icon>desktop_windows</mat-icon>
+      </mat-panel-description>
     </mat-expansion-panel-header>
 
+    <div class="button-row">
+      <button class="action-button" (click)="toggleSelectAll()">
+        {{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
+      </button>
+    </div>
+
     <div class="clients-grid">
       <div *ngFor="let client of clientData" class="client-item">
-        <div class="client-card">
+        <div class="client-card"
-          <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon" class="client-image" />
+             (click)="client.status === 'og-live' && toggleClientSelection(client)"
+             [ngClass]="{'selected-client': client.selected, 'disabled-client': client.status !== 'og-live'}"
+             [matTooltip]="getPartitionsTooltip(client)"
+             matTooltipPosition="above"
+             matTooltipClass="custom-tooltip">
+
+          <img
+            [src]="'assets/images/computer_' + client.status + '.svg'"
+            alt="Client Icon"
+            class="client-image" />
 
           <div class="client-details">
             <span class="client-name">{{ client.name }}</span>
             <span class="client-ip">{{ client.ip }}</span>
             <span class="client-ip">{{ client.mac }}</span>
           </div>
+          <mat-divider></mat-divider>
+          <mat-radio-group [(ngModel)]="selectedModelClient" (change)="loadPartitions(selectedModelClient)">
+            <mat-radio-button [value]="client"
+                              color="primary"
+                              [disabled]="!client.selected"
+                              (click)="$event.stopPropagation()">
+              Modelo
+            </mat-radio-button>
+          </mat-radio-group>
+
         </div>
       </div>
     </div>
@@ -49,15 +77,11 @@
   </div>
 
   <div class="partition-assistant" *ngIf="selectedDisk">
-    <div class="partition-bar">
+    <div class="row-button">
-      <div *ngFor="let partition of activePartitions(selectedDisk.diskNumber)"
-        [ngStyle]="{'width': partition.percentage + '%', 'background-color': partition.color}"
-        class="partition-segment">
-        {{ partition.partitionCode }} ({{ (partition.size / 1024).toFixed(2) }} GB)
-      </div>
-    </div>
-    <div class="row">
       <button class="action-button" (click)="addPartition(selectedDisk.diskNumber)">Añadir partición</button>
+      <mat-chip *ngIf="selectedModelClient.firmwareType">
+        Tabla de particiones: {{ selectedModelClient.firmwareType }}
+      </mat-chip>
     </div>
 
     <div class="row">
@@ -119,5 +143,3 @@
     </div>
   </div>
 </mat-dialog-content>
-
-<div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>

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

@@ -1,11 +1,9 @@
 import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
-import {MAT_DIALOG_DATA} from "@angular/material/dialog";
 import {ActivatedRoute, Router} from "@angular/router";
 import { PARTITION_TYPES } from '../../../../../shared/constants/partition-types';
 import { FILESYSTEM_TYPES } from '../../../../../shared/constants/filesystem-types';
-import {toUnredirectedSourceFile} from "@angular/compiler-cli/src/ngtsc/util/src/typescript";
 import { ConfigService } from '@services/config.service';
 
 interface Partition {
@@ -47,6 +45,9 @@ export class PartitionAssistantComponent {
   view: [number, number] = [400, 300];
   showLegend = true;
   showLabels = true;
+  allSelected = true;
+  selectedClients: any[] = [];
+  selectedModelClient: any = null;
 
   constructor(
     private http: HttpClient,
@@ -57,19 +58,40 @@ export class PartitionAssistantComponent {
   ) {
     this.baseUrl = this.configService.apiUrl;
     this.apiUrl = this.baseUrl + '/partitions';
-    const navigation = this.router.getCurrentNavigation();
+    this.route.queryParams.subscribe(params => {
-    this.clientData = navigation?.extras?.state?.['clientData'];
+      if (params['clientData']) {
-    this.clientId = this.clientData[0]['@id'];
+        this.clientData = JSON.parse(params['clientData']);
-    this.loadPartitions();
+      }
+    });
+    this.clientId = this.clientData?.[0]['@id'];
+    this.clientData.forEach((client: { selected: boolean; status: string}) => {
+      if (client.status === 'og-live') {
+        client.selected = true;
+      }
+    });
 
+    this.selectedClients = this.clientData.filter(
+      (client: { status: string }) => client.status === 'og-live'
+    );
+
+    this.selectedModelClient = this.clientData.find(
+      (client: { status: string }) => client.status === 'og-live'
+    ) || null;
+
+    if (this.selectedModelClient) {
+      this.loadPartitions(this.selectedModelClient);
+    }
   }
 
   get selectedDisk():any {
     return this.disks.find(disk => disk.diskNumber === this.selectedDiskNumber) || null;
   }
 
-  loadPartitions() {
+  loadPartitions(client: any) {
-    const url = `${this.baseUrl}${this.clientId}`;
+    if (!client.selected) {
+      this.selectedModelClient = null;
+    }
+    const url = `${this.baseUrl}${client.uuid}`;
     this.http.get(url).subscribe(
       (response) => {
         this.data = response;
@@ -81,7 +103,17 @@ export class PartitionAssistantComponent {
     );
   }
 
+  toggleSelectAll() {
+    this.allSelected = !this.allSelected;
+    this.clientData.forEach((client: { selected: boolean; status: string }) => {
+      if (client.status === "og-live") {
+        client.selected = this.allSelected;
+      }
+    });
+  }
+
   initializeDisks() {
+    this.disks = [];
     const partitionsFromData = this.data.partitions;
     this.originalPartitions = JSON.parse(JSON.stringify(partitionsFromData));
 
@@ -137,15 +169,6 @@ export class PartitionAssistantComponent {
     return bytes
   }
 
-   activePartitions(diskNumber: number) {
-      const disk = this.disks.find((d) => d.diskNumber === diskNumber);
-      if (disk) {
-        return disk.partitions.filter((partition) => !partition.removed);
-      }
-
-      return null;
-  }
-
   updatePartitionPercentages(partitions: Partition[], totalDiskSize: number) {
     let totalUsedPercentage = 0;
 
@@ -178,11 +201,31 @@ export class PartitionAssistantComponent {
     }
   }
 
+  toggleClientSelection(client: any) {
+    client.selected = !client.selected;
+    this.updateSelectedClients();
+  }
+
+  updateSelectedClients() {
+    this.selectedClients = this.clientData.filter((client: { selected: any; }) => client.selected);
+  }
+
+  getPartitionsTooltip(client: any): string {
+    if (!client.partitions || client.partitions.length === 0) {
+      return 'No hay particiones disponibles';
+    }
+
+    return client.partitions
+      .map((p: { partitionNumber: any; size: any; filesystem: any }) => `#${p.partitionNumber} ${p.filesystem} - ${p.size / 1024 }GB`)
+      .join('\n');
+  }
+
   addPartition(diskNumber: number) {
     const disk = this.disks.find((d) => d.diskNumber === diskNumber);
 
     if (disk) {
       const remainingGB = this.getRemainingGB(disk.partitions, disk.totalDiskSize);
+
       if (remainingGB > 0) {
         const removedPartitions = disk.partitions.filter((p) => !p.removed);
         const maxPartitionNumber =
@@ -205,7 +248,7 @@ export class PartitionAssistantComponent {
         this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize);
         this.updateDiskChart(disk);
       } else {
-        this.errorMessage = 'No hay suficiente espacio libre en el disco para crear una nueva partición.';
+        this.toastService.error('No hay suficiente espacio libre en el disco para crear una nueva partición.');
       }
     }
   }
@@ -237,28 +280,9 @@ export class PartitionAssistantComponent {
     return Math.max(0, totalDiskSize - totalUsedGB);
   }
 
-  getModifiedOrNewPartitions() {
-    const modifiedPartitions: any[] = [];
-
-    this.disks.forEach((disk) => {
-      disk.partitions.forEach((partition) => {
-        const originalPartition = this.originalPartitions.find(
-          (p) => p.diskNumber === disk.diskNumber && p.partitionNumber === partition.partitionNumber
-        );
-        modifiedPartitions.push({
-          partition,
-          diskNumber: disk.diskNumber,
-          partitionNumber: partition.partitionNumber,
-        });
-      });
-    });
-
-    return modifiedPartitions;
-  }
-
   save() {
     if (!this.selectedDisk) {
-      this.errorMessage = 'Por favor selecciona un disco antes de guardar.';
+      this.toastService.error('No se ha seleccionado un disco.');
       return;
     }
 
@@ -267,7 +291,7 @@ export class PartitionAssistantComponent {
     const totalPartitionSize = this.selectedDisk.partitions.reduce((sum: any, partition: { size: any; }) => sum + partition.size, 0);
 
     if (totalPartitionSize > this.selectedDisk.totalDiskSize) {
-      this.errorMessage = 'El tamaño total de las particiones en el disco seleccionado excede el tamaño total del disco.';
+      this.toastService.error('El tamaño total de las particiones en el disco seleccionado excede el tamaño total del disco.');
       this.loading = false;
       return;
     }
@@ -276,7 +300,7 @@ export class PartitionAssistantComponent {
 
     if (modifiedPartitions.length === 0) {
       this.loading = false;
-      this.errorMessage = 'No hay cambios para guardar en el disco seleccionado.';
+      this.toastService.info('No hay cambios para guardar en el disco seleccionado.');
       return;
     }
 
@@ -295,7 +319,7 @@ export class PartitionAssistantComponent {
     if (newPartitions.length > 0) {
       const bulkPayload = {
         partitions: newPartitions,
-        clients: this.clientData.map((client: any) => client['@id']),
+        clients: this.selectedClients.map((client: any) => client.uuid),
       };
 
       this.http.post(this.apiUrl, bulkPayload).subscribe(
@@ -305,7 +329,6 @@ export class PartitionAssistantComponent {
           this.router.navigate(['/commands-logs']);
         },
         (error) => {
-          console.error('Error al crear las particiones:', error);
           this.loading = false;
           this.toastService.error('Error al crear las particiones.');
         }

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.css

@@ -0,0 +1,264 @@
+
+.divider {
+  margin: 20px 0;
+}
+
+table {
+  width: 100%;
+  margin-top: 50px;
+}
+
+.search-container  {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.deploy-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  gap: 10px;
+}
+
+.script-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 20px;
+  background-color: #eaeff6;
+  border-radius: 12px;
+  margin-top: 20px;
+}
+
+.script-content {
+  flex: 2;
+  min-width: 60%;
+}
+
+.script-params {
+  flex: 1;
+  min-width: 35%;
+}
+
+@media (max-width: 768px) {
+  .script-container {
+    flex-direction: column;
+  }
+
+  .script-content, .script-params {
+    min-width: 100%;
+  }
+}
+
+.select-container {
+  margin-top: 20px;
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.input-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.input-field {
+  flex: 1 1 calc(33.33% - 16px);
+  min-width: 250px;
+}
+
+.script-preview {
+  background-color: #f4f4f4;
+  border: 1px solid #ccc;
+  padding: 10px;
+  border-radius: 5px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  min-height: 50px;
+}
+
+.custom-width {
+  width: 50%;
+  margin-bottom: 16px;
+}
+
+.search-string {
+  flex: 2;
+  padding: 5px;
+}
+
+.search-boolean {
+  flex: 1;
+  padding: 5px;
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.mat-elevation-z8 {
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+}
+
+.paginator-container {
+  display: flex;
+  justify-content: end;
+  margin-bottom: 30px;
+}
+
+.clients-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px;
+}
+
+.client-item {
+  position: relative;
+}
+
+.client-card {
+  background: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+  padding: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+
+  &:hover {
+    background-color: #f0f0f0;
+    transform: scale(1.02);
+  }
+}
+
+.client-details {
+  margin-top: 4px;
+}
+
+.client-name {
+  font-size: 0.9em;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+  display: inline-block;
+}
+
+.client-ip {
+  display: block;
+  font-size: 0.9em;
+  color: #666;
+}
+
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  padding-left: 1em;
+}
+
+.button-row {
+  display: flex;
+  padding-right: 1em;
+}
+
+.client-card {
+  background: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+  padding: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+
+  &:hover {
+    background-color: #f0f0f0;
+    transform: scale(1.02);
+  }
+}
+
+::ng-deep .custom-tooltip {
+  white-space: pre-line !important;
+  max-width: 200px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.selected-client {
+  background-color: #a0c2e5 !important;
+  color: white !important;
+}
+
+.button-row {
+  display: flex;
+  padding-right: 1em;
+}
+
+.disabled-client {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.action-button {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.new-command-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 15px;
+  background-color: #eaeff6;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+  margin-top: 15px;
+}
+
+.new-command-container mat-form-field {
+  width: 100%;
+}
+
+.new-command-container textarea {
+  font-family: monospace;
+  resize: vertical;
+}
+
+.new-command-container .action-button {
+  align-self: flex-end;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.full-width {
+  width: 100%;
+}
+
+

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.html

@@ -0,0 +1,103 @@
+<app-loading [isLoading]="loading"></app-loading>
+
+<div class="header-container">
+  <div class="header-container-title">
+    <h2>
+      {{ 'runScript' | translate }}
+    </h2>
+  </div>
+  <div class="button-row">
+    <button class="action-button" [disabled]="selectedClients.length < 1 || (commandType === 'existing' && !selectedScript)" (click)="save()">Ejecutar</button>
+  </div>
+</div>
+<mat-divider></mat-divider>
+
+<div class="select-container">
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title> Clientes </mat-panel-title>
+      <mat-panel-description>
+        Listado de clientes donde se ejecutara el script seleccionado
+        <mat-icon>desktop_windows</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <div class="button-row">
+      <button class="action-button" (click)="toggleSelectAll()">
+        {{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
+      </button>
+    </div>
+
+    <div class="clients-grid">
+      <div *ngFor="let client of clientData" class="client-item">
+        <div class="client-card"
+             (click)="client.status === 'og-live' && toggleClientSelection(client)"
+             [ngClass]="{'selected-client': client.selected, 'disabled-client': client.status !== 'og-live'}"
+             [matTooltip]="getPartitionsTooltip(client)"
+             matTooltipPosition="above"
+             matTooltipClass="custom-tooltip">
+
+          <img
+            [src]="'assets/images/computer_' + client.status + '.svg'"
+            alt="Client Icon"
+            class="client-image" />
+
+          <div class="client-details">
+            <span class="client-name">{{ client.name }}</span>
+            <span class="client-ip">{{ client.ip }}</span>
+            <span class="client-ip">{{ client.mac }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </mat-expansion-panel>
+</div>
+
+<mat-divider style="margin-top: 20px;"></mat-divider>
+
+<div class="select-container">
+  <div class="command-toggle">
+    <mat-radio-group [(ngModel)]="commandType">
+      <mat-radio-button value="new">Comando nuevo</mat-radio-button>
+      <mat-radio-button value="existing">Comando existente</mat-radio-button>
+    </mat-radio-group>
+  </div>
+
+  <div *ngIf="commandType === 'new'" class="new-command-container">
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Ingrese el script</mat-label>
+      <textarea matInput [(ngModel)]="newScript" rows="6" placeholder="Escriba su script aquí"></textarea>
+    </mat-form-field>
+    <button class="action-button" (click)="saveNewScript()">Guardar Comando</button>
+  </div>
+
+  <div *ngIf="commandType === 'existing'" class="select-container">
+    <mat-form-field appearance="fill" class="custom-width">
+      <mat-label>Seleccione script a ejecutar</mat-label>
+      <mat-select [(ngModel)]="selectedScript" (selectionChange)="onScriptChange()">
+        <mat-option *ngFor="let script of scripts" [value]="script">{{ script.name }}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <div *ngIf="selectedScript && commandType === 'existing'" class="script-container">
+    <div class="script-content">
+      <h3> Script:</h3>
+      <div class="script-preview" [innerHTML]="scriptContent"></div>
+    </div>
+
+    <div class="script-params" *ngIf="parameterNames.length > 0">
+      <h3>Ingrese los valores de los parámetros detectados:</h3>
+      <div *ngFor="let paramName of parameterNames">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>{{ paramName }}</mat-label>
+          <input matInput
+                 [ngModel]="parameters[paramName]"
+                 (ngModelChange)="onParamChange(paramName, $event)"
+                 placeholder="Ingrese el valor">
+        </mat-form-field>
+      </div>
+    </div>
+  </div>
+</div>
+

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.spec.ts

@@ -0,0 +1,99 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RunScriptAssistantComponent } from './run-script-assistant.component';
+import { DeployImageComponent } from "../deploy-image/deploy-image.component";
+import { LoadingComponent } from "../../../../../shared/loading/loading.component";
+import { FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from "@angular/material/dialog";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatExpansionModule } from "@angular/material/expansion";
+import { MatButtonModule } from "@angular/material/button";
+import { MatTableModule } from "@angular/material/table";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatRadioModule } from "@angular/material/radio";
+import { MatSelectModule } from "@angular/material/select";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { ToastrModule, ToastrService } from "ngx-toastr";
+import { TranslateModule } from "@ngx-translate/core";
+import { provideHttpClient } from "@angular/common/http";
+import { provideHttpClientTesting } from "@angular/common/http/testing";
+import { provideRouter } from "@angular/router";
+import { ConfigService } from "@services/config.service";
+import { TranslateLoader } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import {MatIconModule} from "@angular/material/icon";
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
+
+describe('RunScriptAssistantComponent', () => {
+  let component: RunScriptAssistantComponent;
+  let fixture: ComponentFixture<RunScriptAssistantComponent>;
+
+  beforeEach(async () => {
+    const mockConfigService = {
+      apiUrl: 'http://mock-api-url',
+      mercureUrl: 'http://mock-mercure-url'
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [RunScriptAssistantComponent, DeployImageComponent, LoadingComponent],
+      imports: [
+        ReactiveFormsModule,
+        FormsModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatCheckboxModule,
+        MatExpansionModule,
+        MatButtonModule,
+        MatTableModule,
+        MatDividerModule,
+        MatRadioModule,
+        MatProgressSpinnerModule,
+        MatSelectModule,
+        BrowserAnimationsModule,
+        MatIconModule,
+        ToastrModule.forRoot(),
+        HttpClientTestingModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useFactory: HttpLoaderFactory,
+            deps: [HttpClient]
+          }
+        })
+      ],
+      providers: [
+        FormBuilder,
+        ToastrService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideRouter([]),
+        {
+          provide: MatDialogRef,
+          useValue: {}
+        },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {}
+        },
+        { provide: ConfigService, useValue: mockConfigService }
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(RunScriptAssistantComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,177 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+import {SelectionModel} from "@angular/cdk/collections";
+import {HttpClient} from "@angular/common/http";
+import {ToastrService} from "ngx-toastr";
+import {ConfigService} from "@services/config.service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {SaveScriptComponent} from "./save-script/save-script.component";
+import {MatDialog} from "@angular/material/dialog";
+
+@Component({
+  selector: 'app-run-script-assistant',
+  templateUrl: './run-script-assistant.component.html',
+  styleUrl: './run-script-assistant.component.css'
+})
+export class RunScriptAssistantComponent {
+  baseUrl: string;
+  @Output() dataChange = new EventEmitter<any>();
+
+  errorMessage = '';
+  clientId: string | null = null;
+  name: string = '';
+  client: any = null;
+  clientData: any = [];
+  loading: boolean = false;
+  scripts: any[] = [];
+  scriptContent: string = "";
+  parameters: any = {};
+  selectedScript: any = null;
+  selectedClients: any[] = [];
+  allSelected: boolean = true;
+  commandType: string = 'existing';
+  newScript: string = '';
+  selection = new SelectionModel(true, []);
+  parameterNames: string[] = Object.keys(this.parameters);
+
+  constructor(
+    private http: HttpClient,
+    private toastService: ToastrService,
+    private configService: ConfigService,
+    private router: Router,
+    private dialog: MatDialog,
+    private route: ActivatedRoute
+  ) {
+    this.baseUrl = this.configService.apiUrl;
+    this.route.queryParams.subscribe(params => {
+      if (params['clientData']) {
+        this.clientData = JSON.parse(params['clientData']);
+      }
+    });
+    this.clientId = this.clientData?.length ? this.clientData[0]['@id'] : null;
+    this.clientData.forEach((client: { selected: boolean; status: string}) => {
+      if (client.status === 'og-live') {
+        client.selected = true;
+      }
+    });
+    this.selectedClients = this.clientData.filter(
+      (client: { status: string }) => client.status === 'og-live'
+    );
+    this.loadScripts()
+  }
+
+  loadScripts(): void {
+    this.loading = true;
+
+    this.http.get(`${this.baseUrl}/commands?readOnly=false&enabled=true`).subscribe((data: any) => {
+      this.scripts = data['hydra:member'];
+      this.loading = false;
+    }, (error) => {
+      this.toastService.error(error.error['hydra:description']);
+      this.loading = false;
+    });
+  }
+
+  saveNewScript() {
+    if (!this.newScript.trim()) {
+      this.toastService.error('Debe ingresar un script antes de guardar.');
+      return;
+    }
+    const dialogRef = this.dialog.open(SaveScriptComponent, {
+      width: '400px',
+      data: this.newScript
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.toastService.success('Script guardado correctamente');
+      }
+    });
+  }
+
+  toggleClientSelection(client: any) {
+    client.selected = !client.selected;
+    this.updateSelectedClients();
+  }
+
+  updateSelectedClients() {
+    this.selectedClients = this.clientData.filter(
+      (client: { selected: boolean; status: string }) => client.selected && client.status === "og-live"
+    );
+  }
+
+  toggleSelectAll() {
+    this.allSelected = !this.allSelected;
+    this.clientData.forEach((client: { selected: boolean; status: string }) => {
+      if (client.status === "og-live") {
+        client.selected = this.allSelected;
+      }
+    });
+  }
+
+  getPartitionsTooltip(client: any): string {
+    if (!client.partitions || client.partitions.length === 0) {
+      return 'No hay particiones disponibles';
+    }
+
+    return client.partitions
+      .map((p: { partitionNumber: any; size: any; filesystem: any }) => `#${p.partitionNumber} ${p.filesystem} - ${p.size / 1024 }GB`)
+      .join('\n');
+  }
+
+  onScriptChange() {
+    if (this.selectedScript) {
+      this.scriptContent = this.selectedScript.script;
+
+      const matches = this.scriptContent.match(/@(\w+)/g) || [];
+      const uniqueParams = Array.from(new Set(matches.map(m => m.slice(1))));
+
+      this.parameters = {};
+      uniqueParams.forEach(param => this.parameters[param] = '');
+
+      this.parameterNames = uniqueParams;
+
+      this.updateScript();
+    }
+  }
+
+  onParamChange(name: string, value: string): void {
+    this.parameters[name] = value;
+    this.updateScript();
+  }
+
+  updateScript(): void {
+    let updatedScript = this.selectedScript.script;
+
+    for (const [key, value] of Object.entries(this.parameters)) {
+      const regex = new RegExp(`@${key}\\b`, 'g');
+      updatedScript = updatedScript.replace(regex, value || `@${key}`);
+    }
+
+    this.scriptContent = updatedScript;
+  }
+
+  trackByIndex(index: number): number {
+    return index;
+  }
+
+
+  save(): void {
+    this.loading = true;
+
+    this.http.post(`${this.baseUrl}/commands/run-script`, {
+      clients: this.selectedClients.map((client: any) => client.uuid),
+      script: this.commandType === 'existing'  ? this.scriptContent : this.newScript,
+    }).subscribe(
+      response => {
+        this.toastService.success('Script ejecutado correctamente');
+        this.dataChange.emit();
+        this.router.navigate(['/commands-logs']);
+      },
+      error => {
+        this.toastService.error('Error al ejecutar el script');
+      }
+    );
+
+    this.loading = false;
+  }
+}

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component.css

@@ -0,0 +1,40 @@
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+  padding: 40px;
+}
+
+.repository-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.full-width{
+  width: 100%;
+  margin-top: 16px;
+}
+
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}
+
+@media (max-width: 600px) {
+  .form-field {
+    width: 100%;
+  }
+
+  .dialog-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  button {
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 8px;
+  }
+}

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component.html

@@ -0,0 +1,12 @@
+<h2 mat-dialog-title>Guardar Comando</h2>
+<mat-dialog-content>
+  <p>Introduce un nombre para el comando:</p>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Nombre del Comando</mat-label>
+    <input matInput [(ngModel)]="commandName">
+  </mat-form-field>
+</mat-dialog-content>
+<div mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="close()">Cancelar</button>
+  <button class="submit-button" (click)="save()">Guardar</button>
+</div>

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component.spec.ts

@@ -0,0 +1,94 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import {RunScriptAssistantComponent} from "../run-script-assistant.component";
+import {DeployImageComponent} from "../../deploy-image/deploy-image.component";
+import {LoadingComponent} from "../../../../../../shared/loading/loading.component";
+import {FormBuilder, FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatExpansionModule} from "@angular/material/expansion";
+import {MatButtonModule} from "@angular/material/button";
+import {MatTableModule} from "@angular/material/table";
+import {MatDividerModule} from "@angular/material/divider";
+import {MatRadioModule} from "@angular/material/radio";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatSelectModule} from "@angular/material/select";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {MatIconModule} from "@angular/material/icon";
+import {ToastrModule, ToastrService} from "ngx-toastr";
+import {HttpClientTestingModule, provideHttpClientTesting} from "@angular/common/http/testing";
+import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
+import {HttpClient, provideHttpClient} from "@angular/common/http";
+import {provideRouter} from "@angular/router";
+import {ConfigService} from "@services/config.service";
+import {HttpLoaderFactory} from "../run-script-assistant.component.spec";
+import {SaveScriptComponent} from "./save-script.component";
+
+describe('SaveScriptComponent', () => {
+  let component: SaveScriptComponent;
+  let fixture: ComponentFixture<SaveScriptComponent>;
+
+  beforeEach(async () => {
+    const mockConfigService = {
+      apiUrl: 'http://mock-api-url',
+      mercureUrl: 'http://mock-mercure-url'
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [RunScriptAssistantComponent, DeployImageComponent, LoadingComponent],
+      imports: [
+        ReactiveFormsModule,
+        FormsModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatCheckboxModule,
+        MatExpansionModule,
+        MatButtonModule,
+        MatTableModule,
+        MatDividerModule,
+        MatRadioModule,
+        MatProgressSpinnerModule,
+        MatSelectModule,
+        BrowserAnimationsModule,
+        MatIconModule,
+        ToastrModule.forRoot(),
+        HttpClientTestingModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useFactory: HttpLoaderFactory,
+            deps: [HttpClient]
+          }
+        })
+      ],
+      providers: [
+        FormBuilder,
+        ToastrService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideRouter([]),
+        {
+          provide: MatDialogRef,
+          useValue: {}
+        },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {}
+        },
+        { provide: ConfigService, useValue: mockConfigService }
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(SaveScriptComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component.ts

@@ -0,0 +1,51 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {FormBuilder, Validators} from "@angular/forms";
+import {HttpClient} from "@angular/common/http";
+import {ToastrService} from "ngx-toastr";
+import {ConfigService} from "@services/config.service";
+import {DataService} from "../../../../../commands/main-commands/data.service";
+
+@Component({
+  selector: 'app-save-script',
+  templateUrl: './save-script.component.html',
+  styleUrl: './save-script.component.css'
+})
+export class SaveScriptComponent {
+  commandName: string = '';
+  baseUrl: string;
+
+  constructor(
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<SaveScriptComponent>,
+    private toastService: ToastrService,
+    private configService: ConfigService,
+    private dataService: DataService,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.baseUrl = this.configService.apiUrl;
+  }
+
+  save() {
+    const payload = {
+      name: this.commandName,
+      script: this.data,
+      readOnly: false,
+      enabled: true,
+    };
+
+    this.http.post(`${this.baseUrl}/commands`, payload).subscribe(
+      (response) => {
+        this.toastService.success('Comando añadido correctamente');
+        this.dialogRef.close();
+      },
+      (error) => {
+        this.toastService.error(error['error']['hydra:description']);
+      }
+    );
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}

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

@@ -22,6 +22,96 @@
   overflow: hidden;
 }
 
+.clients-mat-divider {
+  display: none;
+}
+
+@media (max-width: 992px) {
+  .main-container {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden !important;
+  }
+
+  .filters-and-tree-container {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-grow: 1 !important;
+    flex-shrink: 1 !important;
+    width: 100% !important;
+    max-width: none !important;
+    min-width: 0 !important;
+    padding: 1rem !important;
+    box-sizing: border-box !important;
+    min-height: 250px !important;
+    overflow-y: auto !important;
+  }
+
+  .filters-panel,
+  .tree-container {
+    flex: 1 1 50% !important;
+    overflow-y: auto !important;
+    padding: 0.5rem !important;
+    box-sizing: border-box !important;
+    margin-bottom: 0 !important;
+  }
+
+  .filters-container {
+    padding: 0 !important;
+  }
+
+  .tree-mat-divider {
+    display: none !important;
+  }
+
+  .clients-mat-divider {
+    display: inline;
+  }
+
+  .clients-view-header {
+    display: flex;
+    flex-direction: row !important;
+    justify-content: space-between !important;
+    margin-bottom: 0.5rem !important;
+    margin-top: 0.5rem !important;
+    align-items: center !important;
+    padding-right: 1rem !important;
+  }
+
+  .groups-button-row {
+    display: none !important;
+  }
+
+  .cards-view {
+    max-height: none !important;
+  }
+
+  .clients-table {
+    max-height: unset !important;
+    overflow: unset !important;
+    display: table !important;
+    flex-direction: unset !important;
+  }
+
+  .clients-container {
+    padding: 0em 1em 0em 1em !important;
+  }
+}
+
+@media (max-width: 1400px) {
+  .type-view-text {
+    display: none;
+  }
+}
+
+@media (max-width: 450px) {
+  .clients-title-name {
+    font-size: 20px !important;
+  }
+}
+
 .header-container-title {
   flex-grow: 1;
   text-align: left;
@@ -34,15 +124,6 @@
   padding-right: 0.5rem;
 }
 
-.clients-container {
-  flex-grow: 1;
-  box-sizing: border-box;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  padding: 0rem 1rem 0rem 0.5rem;
-}
-
 .clients-view-header {
   display: flex;
   flex-direction: row;
@@ -53,6 +134,32 @@
   padding-right: 1rem;
 }
 
+@media (max-width: 768px) {
+  .clients-view-header {
+    display: flex;
+    flex-direction: column !important;
+  }
+}
+
+.clients-title-name {
+  font-size: x-large;
+  display: block;
+  padding: 1rem 1rem 1rem 13px;
+  margin-left: 0.6rem;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.view-type-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+
 .clients-view {
   flex-grow: 1;
   overflow-y: auto;
@@ -75,16 +182,35 @@
   padding-left: 1rem;
 }
 
+.list-view {
+  overflow-x: auto;
+}
+
 .clients-table {
   max-height: calc(100vh - 330px);
   overflow: auto;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  table-layout: auto;
+  border-collapse: collapse;
 }
 
-.clients-table table {
+.clients-table th,
-  flex-grow: 1;
+.clients-table td {
-  overflow: auto;
+  text-align: left;
+  padding: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.clients-table th {
+  font-weight: 500;
+}
+
+.clients-table td {
+  border-bottom: 1px solid #ddd;
 }
 
 .paginator-container {
@@ -124,18 +250,6 @@
   flex: 1;
 }
 
-@media (max-width: 1024px) {
-  .header-container {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .groups-button-row {
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-}
-
 mat-tree {
   background-color: #f9f9f9;
   padding: 0px 10px 10px 10px;
@@ -265,21 +379,36 @@ mat-tree mat-tree-node.disabled:hover {
   padding-right: 1rem;
 }
 
-.filters-container {
+.clients-container {
+  flex: 8;
+  box-sizing: border-box;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  justify-content: start;
+  padding: 0rem 1rem 0rem 0.5rem;
-  padding: 1em 1em 0em 1em;
-}
-
-.filter-form-field {
-  min-width: 21rem;
 }
 
 .filters-and-tree-container {
+  flex: 2;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex-shrink: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.filters-container {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  flex-grow: 1;
+}
+
+.filter-form-field {
+  flex: 1;
+  min-width: 150px;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .filters-panel {
@@ -327,6 +456,10 @@ mat-tree mat-tree-node.disabled:hover {
   margin-top: 4px;
 }
 
+.type-view-text {
+  margin-left: 0.5vw;
+}
+
 .action-icons {
   display: flex;
   justify-content: center;
@@ -373,22 +506,6 @@ mat-tree mat-tree-node.disabled:hover {
   position: relative;
 }
 
-@media (max-width: 1560px) {
-  .clients-view-header {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-    margin-top: 0;
-  }
-}
-
-.clients-title-name {
-  font-size: x-large;
-  display: block;
-  padding: 1rem 1rem 1rem 13px;
-  margin-left: 0.6rem;
-}
-
 .no-clients-info {
   display: flex;
   align-items: center;
@@ -397,13 +514,6 @@ mat-tree mat-tree-node.disabled:hover {
   margin-left: 1.6rem;
 }
 
-.view-type-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 2rem;
-  align-items: center;
-}
-
 mat-button-toggle-group {
   border: none;
 }

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

@@ -25,6 +25,27 @@
         {{ 'legendButton' | translate }}
       </button>
     </div>
+
+    <!-- Menú desplegable para pantallas pequeñas -->
+    <div *ngIf="isSmallScreen" class="groups-menu">
+      <button mat-icon-button [matMenuTriggerFor]="smallScreenMenu" matTooltip="Opciones" matTooltipShowDelay="1000">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <mat-menu #smallScreenMenu="matMenu">
+        <button mat-menu-item (click)="addOU($event)">
+          {{ 'newOrganizationalUnitButton' | translate }}
+        </button>
+        <button mat-menu-item (click)="addClient($event)">
+          {{ 'newSingleClientButton' | translate }}
+        </button>
+        <button mat-menu-item (click)="addMultipleClients($event)">
+          {{ 'newMultipleClientButton' | translate }}
+        </button>
+        <button mat-menu-item (click)="openBottomSheet()">
+          {{ 'legendButton' | translate }}
+        </button>
+      </mat-menu>
+    </div>
   </div>
 
   <div *ngIf="initialLoading; else contentTemplate">
@@ -72,7 +93,7 @@
               </button>
             </mat-form-field>
 
-            <mat-divider style="padding-top: 10px;"></mat-divider>
+            <mat-divider class="tree-mat-divider" style="padding-top: 10px;"></mat-divider>
 
             <!-- Funcionalidad actualmente deshabilitada-->
             <!-- <mat-form-field appearance="outline">
@@ -185,25 +206,23 @@
 
       <!-- CLIENTS -->
       <div class="clients-container">
-
+        <mat-divider class="clients-mat-divider"></mat-divider>
         <!-- CLIENTS HEADER -->
         <div class="clients-view-header">
-          <div>
+          <span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
-            <span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
+            {{ 'clients' | translate }}
-              {{ 'clients' | translate }}
+            <strong>{{ selectedNode?.name }}</strong>
-              <strong>{{ selectedNode?.name }}</strong>
+          </span>
-            </span>
-          </div>
           <div class="view-type-container">
             <app-execute-command [clientData]="selection.selected" [buttonType]="'text'"
               [buttonText]="'Ejecutar comandos'" [disabled]="selection.selected.length === 0"></app-execute-command>
             <mat-button-toggle-group name="viewType" aria-label="View Type" [hideSingleSelectionIndicator]="true"
               (change)="toggleView($event.value)">
               <mat-button-toggle value="list" [disabled]="currentView === 'list'">
-                <mat-icon>list</mat-icon> {{ 'Vista Lista' | translate }}
+                <mat-icon>list</mat-icon> <span class="type-view-text">{{ 'Vista Lista' | translate }}</span>
               </mat-button-toggle>
               <mat-button-toggle value="card" [disabled]="currentView === 'card'">
-                <mat-icon>grid_view</mat-icon> {{ 'Vista Tarjeta' | translate }}
+                <mat-icon>grid_view</mat-icon> <span class="type-view-text">{{ 'Vista Tarjeta' | translate }}</span>
               </mat-button-toggle>
             </mat-button-toggle-group>
           </div>
@@ -226,10 +245,10 @@
                   <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'">
+                        [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/ordenador_' + client.status + '.png'" alt="Client Icon"
+                      <img style="margin-top: 0.5em;" [src]="'assets/images/computer_' + client.status + '.svg'"
-                        class="client-image" />
+                        alt="Client Icon" class="client-image" />
 
                       <div class="client-details">
                         <span class="client-name">{{ client.name }}</span>
@@ -295,7 +314,7 @@
                     </th>
                     <td mat-cell *matCellDef="let row">
                       <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(row)"
-                        [checked]="selection.isSelected(row)" [disabled]="row.status === 'busy'">
+                        [checked]="selection.isSelected(row)" [disabled]="row.status === 'busy' || row.status === 'off' || row.status === 'disconnected'">
                       </mat-checkbox>
                     </td>
                   </ng-container>
@@ -304,7 +323,7 @@
                     <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                       matTooltipPosition="left" matTooltipShowDelay="500">
                       <div class="client-status-container">
-                        <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
+                        <img [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon"
                           class="client-image" />
                         <span *ngIf="syncStatus && syncingClientId === client.uuid">
                           <mat-spinner diameter="24"></mat-spinner>
@@ -317,7 +336,7 @@
                     <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'name' | translate }} </th>
                     <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                       matTooltipPosition="left" matTooltipShowDelay="500">
-                      <p style="font-weight: 500;">{{ client.name }}</p>
+                      <p>{{ client.name }}</p>
                     </td>
                   </ng-container>
                   <ng-container matColumnDef="ip">
@@ -359,7 +378,8 @@
                         <mat-icon>more_vert</mat-icon>
                       </button>
                       <app-execute-command [clientData]="[client]" [buttonType]="'icon'" [icon]="'terminal'"
-                        [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"></app-execute-command>
+                        [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))">
+                      </app-execute-command>
                       <mat-menu #clientMenu="matMenu">
                         <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
                           <mat-icon>edit</mat-icon>

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

@@ -4,7 +4,6 @@ import { MatInputModule } from '@angular/material/input';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatOptionModule } from '@angular/material/core';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -117,13 +116,13 @@ describe('GroupsComponent', () => {
         expect(component.expandPathToNode).toHaveBeenCalledWith(node);
     });
 
-    it('should handle node click', () => {
+   /* it('should handle node click', () => {
         const node: TreeNode = { id: '1', name: 'Node 1', type: 'type', children: [] };
         spyOn<any>(component, 'fetchClientsForNode');
-        component.onNodeClick(node);
+        component.onNodeClick($event, node);
         expect(component.selectedNode).toBe(node);
         expect(component['fetchClientsForNode']).toHaveBeenCalledWith(node);
-    });
+    });*/
 
     it('should fetch clients for node', () => {
         const node: TreeNode = { id: '1', name: 'Node 1', type: 'type', children: [] };

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, QueryList, ViewChildren } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -24,7 +24,8 @@ import { ManageClientComponent } from "./shared/clients/manage-client/manage-cli
 import { debounceTime } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { ConfigService } from '@services/config.service';
-import { GlobalStatusComponent } from '../global-status/global-status.component';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { MatMenuTrigger } from '@angular/material/menu';
 
 enum NodeType {
   OrganizationalUnit = 'organizational-unit',
@@ -40,6 +41,8 @@ enum NodeType {
   styleUrls: ['./groups.component.css'],
 })
 export class GroupsComponent implements OnInit, OnDestroy {
+  @ViewChildren(MatMenuTrigger) menuTriggers!: QueryList<MatMenuTrigger>;
+  isSmallScreen: boolean = false;
   baseUrl: string;
   mercureUrl: string;
   organizationalUnits: UnidadOrganizativa[] = [];
@@ -105,6 +108,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     public dialog: MatDialog,
     private bottomSheet: MatBottomSheet,
     private joyrideService: JoyrideService,
+    private breakpointObserver: BreakpointObserver,
     private toastr: ToastrService,
     private configService: ConfigService
   ) {
@@ -144,20 +148,31 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
     this.arrayClients = this.selectedClients.data;
 
-    const eventSource = new EventSource(`${this.mercureUrl}?topic=`
+    const eventSource = new EventSource(`${this.mercureUrl}?topic=` + encodeURIComponent(`clients`));
-      + encodeURIComponent(`clients`));
 
     eventSource.onmessage = (event) => {
       const data = JSON.parse(event.data);
-      if (data && data['@id']) {
+
+      if (Array.isArray(data)) {
+        data.forEach((client) => {
+          if (client && client['@id']) {
+            this.updateClientStatus(client['@id'], client.status);
+          }
+        });
+      }
+      else if (data && data['@id']) {
         this.updateClientStatus(data['@id'], data.status);
       }
-    }
+    };
 
     this.clientFilterSubject.pipe(debounceTime(500)).subscribe(searchTerm => {
       this.filters['query'] = searchTerm;
       this.filterClients(searchTerm);
     });
+
+    this.breakpointObserver.observe(['(max-width: 992px)']).subscribe((result) => {
+      this.isSmallScreen = result.matches;
+    })
   }
 
   private updateClientStatus(clientUuid: string, newStatus: string): void {
@@ -359,6 +374,8 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
   onMenuClick(event: Event, node: any): void {
     event.stopPropagation();
+    this.selectedNode = node;
+    this.fetchClientsForNode(node);
   }
 
 
@@ -371,7 +388,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
         this.selectedClients.data = response['hydra:member'];
         this.length = response['hydra:totalItems'];
         this.arrayClients = this.selectedClients.data;
-        this.hasClients = node.hasClients ?? false;
+        this.hasClients = this.selectedClients.data.length > 0;
         this.isLoadingClients = false;
         this.initialLoading = false;
         this.selection.clear();
@@ -465,10 +482,11 @@ export class GroupsComponent implements OnInit, OnDestroy {
       ? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px' })
       : this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px' });
 
-    dialogRef.afterClosed().subscribe(() => {
+    dialogRef.afterClosed().subscribe((result) => {
-      if (node) {
+      if (result?.success) {
-        this.refreshData(node.id);
+        this.refreshData(node?.id);
       }
+      this.menuTriggers.forEach(trigger => trigger.closeMenu());
     });
   }
 
@@ -532,8 +550,11 @@ export class GroupsComponent implements OnInit, OnDestroy {
       ? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px' })
       : this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px' });
 
-    dialogRef.afterClosed().subscribe(() => {
+    dialogRef.afterClosed().subscribe((result) => {
-      this.refreshData(this.selectedNode?.id, selectedClientsBeforeEdit);
+      if (result?.success) {
+        this.refreshData(this.selectedNode?.id, selectedClientsBeforeEdit);
+      }
+      this.menuTriggers.forEach(trigger => trigger.closeMenu());
     });
   }
 

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

@@ -272,7 +272,7 @@ export class ManageClientComponent implements OnInit {
 
         this.http.patch<any>(putUrl, formData, { headers }).subscribe(
           response => {
-            this.dialogRef.close();
+            this.dialogRef.close({ success: true });
             this.toastService.success('Cliente actualizado exitosamente', 'Éxito');
           },
           error => {
@@ -285,6 +285,7 @@ export class ManageClientComponent implements OnInit {
           (response) => {
             this.toastService.success('Cliente creado exitosamente', 'Éxito');
             this.dialogRef.close({
+              success: true,
               client: response,
               organizationalUnit: formData.organizationalUnit,
             });
@@ -300,6 +301,6 @@ export class ManageClientComponent implements OnInit {
   }
 
   onNoClick(): void {
-    this.dialogRef.close();
+    this.dialogRef.close({ success: false });
   }
 }

ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css

@@ -6,6 +6,10 @@ h1 {
     margin-top: 20px;
 }
 
+.create-ou-container {
+    position: relative;
+}
+
 .form-field {
     width: 100%;
 }
@@ -20,6 +24,13 @@ h1 {
     overflow-y: auto;
 }
 
+.loading-spinner {
+  display: block;
+  margin: 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
 .mat-dialog-actions {
     display: flex;
     justify-content: flex-end;

ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html

@@ -1,11 +1,10 @@
-<app-loading [isLoading]="loading"></app-loading>
+<div class="create-ou-container">
-
-<div *ngIf="!loading">
     <h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1>
-    <div class="mat-dialog-content">
+  <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
         <!-- Paso 1: General -->
-        <span class="step-title">General</span>
+      <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
-        <form [formGroup]="generalFormGroup" class="grid-form">
+      <span *ngIf="!loading" class="step-title">General</span>
+        <form *ngIf="generalFormGroup && !loading" [formGroup]="generalFormGroup" class="grid-form">
             <mat-form-field class="form-field" appearance="fill">
                 <mat-label>Tipo</mat-label>
                 <mat-select formControlName="type" required>
@@ -42,8 +41,8 @@
         </form>
 
         <!-- Paso 2: Información del Aula -->
-        <span *ngIf="generalFormGroup.value.type === 'classroom'" class="step-title">Información del aula</span>
+        <span *ngIf="generalFormGroup.value.type === 'classroom' && !loading" class="step-title">Información del aula</span>
-        <form *ngIf="generalFormGroup.value.type === 'classroom'" class="grid-form"
+        <form *ngIf="generalFormGroup.value.type === 'classroom' && !loading" class="grid-form"
             [formGroup]="classroomInfoFormGroup">
             <mat-form-field class="form-field">
                 <mat-label>Localización</mat-label>
@@ -71,8 +70,8 @@
         </form>
 
         <!-- Paso 3: Configuración de Red -->
-        <span class="step-title">Configuración de Red</span>
+        <span *ngIf="!loading" class="step-title">Configuración de Red</span>
-        <form [formGroup]="networkSettingsFormGroup" class="grid-form">
+        <form *ngIf="networkSettingsFormGroup && !loading" [formGroup]="networkSettingsFormGroup" class="grid-form">
             <mat-form-field class="form-field">
                 <mat-label>OgLive</mat-label>
                 <mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)">
@@ -168,8 +167,8 @@
         </form>
 
         <!-- Paso 4: Información Adicional -->
-        <span class="step-title">Información Adicional</span>
+        <span *ngIf="!loading" class="step-title">Información Adicional</span>
-        <form [formGroup]="additionalInfoFormGroup">
+        <form *ngIf="additionalInfoFormGroup && !loading" [formGroup]="additionalInfoFormGroup">
             <mat-form-field class="form-field">
                 <mat-label>Comentarios</mat-label>
                 <textarea matInput formControlName="comments"></textarea>

ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts

@@ -75,7 +75,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
     });
 
     this.networkSettingsFormGroup = this._formBuilder.group({
-      ogLive: [ null],
+      ogLive: [null],
       repository: [null],
       proxy: [null],
       dns: [null],
@@ -100,63 +100,76 @@ export class ManageOrganizationalUnitComponent implements OnInit {
       capacity: [null, [Validators.required, Validators.min(0)]],
       remoteCalendar: [null]
     });
-
-    if (this.isEditMode) {
-      this.loadData(data.uuid);
-    }
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
-    this.loadParentUnits();
+    this.loading = true;
-    this.loadHardwareProfiles();
+    const observables = [
-    this.loadCalendars();
+      this.loadParentUnits(),
-    this.loadOgLives();
+      this.loadHardwareProfiles(),
-    this.loadRepositories();
+      this.loadCalendars(),
-    this.loadMenus()
+      this.loadOgLives(),
+      this.loadRepositories(),
+      this.loadMenus(),
+    ];
+
+    Promise.all(observables).then(() => {
+      if (this.isEditMode) {
+        this.loadData(this.data.uuid).then(() => {
+          this.loading = false;
+        });
+      } else {
+        this.loading = false;
+      }
+    }).catch(error => {
+      console.error('Error loading data:', error);
+      this.loading = false;
+    });
   }
 
   get filteredTypes(): string[] {
     return this.generalFormGroup.get('parent')?.value ? this.types.filter(type => type !== 'organizational-unit') : this.types;
   }
 
-  loadParentUnits() {
+  loadParentUnits(): Promise<void> {
-    this.loading = true;
+    return new Promise((resolve, reject) => {
-    const url = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=1000`;
+      const url = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=1000`;
-    this.http.get<any>(url).subscribe(
+      this.http.get<any>(url).subscribe(
-      response => {
+        response => {
-        this.parentUnits = response['hydra:member'];
+          this.parentUnits = response['hydra:member'];
-        this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
+          this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
-          id: unit['@id'],
+            id: unit['@id'],
-          name: unit.name,
+            name: unit.name,
-          path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits),
+            path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits),
-          repository: unit.networkSettings?.repository?.['@id'],
+            repository: unit.networkSettings?.repository?.['@id'],
-          hardwareProfile: unit.networkSettings?.hardwareProfile?.['@id'],
+            hardwareProfile: unit.networkSettings?.hardwareProfile?.['@id'],
-          ogLive: unit.networkSettings?.ogLive?.['@id'],
+            ogLive: unit.networkSettings?.ogLive?.['@id'],
-          menu: unit.networkSettings?.menu?.['@id'],
+            menu: unit.networkSettings?.menu?.['@id'],
-          mcastIp: unit.networkSettings?.mcastIp,
+            mcastIp: unit.networkSettings?.mcastIp,
-          mcastSpeed: unit.networkSettings?.mcastSpeed,
+            mcastSpeed: unit.networkSettings?.mcastSpeed,
-          mcastPort: unit.networkSettings?.mcastPort,
+            mcastPort: unit.networkSettings?.mcastPort,
-          mcastMode: unit.networkSettings?.mcastMode,
+            mcastMode: unit.networkSettings?.mcastMode,
-          netiface: unit.networkSettings?.netiface,
+            netiface: unit.networkSettings?.netiface,
-          p2pMode: unit.networkSettings?.p2pMode,
+            p2pMode: unit.networkSettings?.p2pMode,
-          p2pTime: unit.networkSettings?.p2pTime,
+            p2pTime: unit.networkSettings?.p2pTime,
-          dns: unit.networkSettings?.dns,
+            dns: unit.networkSettings?.dns,
-          netmask: unit.networkSettings?.netmask,
+            netmask: unit.networkSettings?.netmask,
-          router: unit.networkSettings?.router,
+            router: unit.networkSettings?.router,
-          ntp: unit.networkSettings?.ntp
+            ntp: unit.networkSettings?.ntp
-        }));
+          }));
 
-        const initialUnitId = this.generalFormGroup.get('parent')?.value;
+          const initialUnitId = this.generalFormGroup.get('parent')?.value;
-        if (initialUnitId) {
+          if (initialUnitId) {
-          this.setOrganizationalUnitDefaults(initialUnitId);
+            this.setOrganizationalUnitDefaults(initialUnitId);
+          }
+          resolve();
+        },
+        error => {
+          console.error('Error fetching parent units:', error);
+          reject(error);
         }
-        this.loading = false;
+      );
-      },
+    });
-      error => {
-        console.error('Error fetching parent units:', error);
-        this.loading = false;
-      }
-    );
   }
 
   onParentChange(event: any): void {
@@ -191,78 +204,87 @@ export class ManageOrganizationalUnitComponent implements OnInit {
     return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;
   }
 
-  loadHardwareProfiles(): void {
+  loadHardwareProfiles(): Promise<void> {
-    this.loading = true;
+    return new Promise((resolve, reject) => {
-    this.dataService.getHardwareProfiles().subscribe(
+      this.dataService.getHardwareProfiles().subscribe(
-      (data: any[]) => {
+        (data: any[]) => {
-        this.hardwareProfiles = data;
+          this.hardwareProfiles = data;
-        this.loading = false;
+          resolve();
-      },
+        },
-      (error: any) => {
+        error => {
-        console.error('Error fetching hardware profiles', error);
+          console.error('Error fetching hardware profiles:', error);
-        this.loading = false;
+          reject(error);
-      }
+        }
-    );
+      );
+    });
   }
 
-  loadMenus(): void {
+  loadOgLives(): Promise<void> {
-    this.loading = true;
+    return new Promise((resolve, reject) => {
-    const url = `${this.baseUrl}/menus?page=1&itemsPerPage=10000`;
+      const url = `${this.baseUrl}/og-lives?page=1&itemsPerPage=30`;
 
-    this.http.get<any>(url).subscribe(
+      this.http.get<any>(url).subscribe(
-      response => {
+        response => {
-        this.menus = response['hydra:member'];
+          this.ogLives = response['hydra:member'];
-        this.loading = false;
+          resolve();
-      },
+        },
-      error => {
+        error => {
-        console.error('Error fetching menus:', error);
+          console.error('Error fetching ogLives:', error);
-        this.loading = false;
+          reject(error);
-      }
+        }
-    );
+      );
+    });
   }
 
-  loadOgLives() {
+  loadMenus(): Promise<void> {
-    this.loading = true;
+    return new Promise((resolve, reject) => {
-    this.dataService.getOgLives().subscribe(
+      const url = `${this.baseUrl}/menus?page=1&itemsPerPage=10000`;
-      (data: any[]) => {
+
-        this.ogLives = data;
+      this.http.get<any>(url).subscribe(
-        this.loading = false;
+        response => {
-      },
+          this.menus = response['hydra:member'];
-      error => {
+          resolve();
-        console.error('Error fetching ogLives', error);
+        },
-        this.loading = false;
+        error => {
-      }
+          console.error('Error fetching menus:', error);
-    );
+          reject(error);
+        }
+      );
+    });
   }
 
-  loadRepositories() {
+  loadRepositories(): Promise<void> {
-    this.loading = true;
+    return new Promise((resolve, reject) => {
-    this.dataService.getRepositories().subscribe(
+      const url = `${this.baseUrl}/image-repositories?page=1&itemsPerPage=10000`;
-      (data: any[]) => {
+
-        this.repositories = data;
+      this.http.get<any>(url).subscribe(
-        this.loading = false;
+        response => {
-      },
+          this.repositories = response['hydra:member'];
-      error => {
+          resolve();
-        console.error('Error fetching repositories', error);
+        },
-        this.loading = false;
+        error => {
-      }
+          console.error('Error fetching ogLives:', error);
-    );
+          reject(error);
+        }
+      );
+    });
   }
 
-  loadCalendars() {
+  loadCalendars(): Promise<void> {
-    this.loading = true;
+    return new Promise((resolve, reject) => {
-    const apiUrl = `${this.baseUrl}/remote-calendars?page=1&itemsPerPage=30`;
+      const apiUrl = `${this.baseUrl}/remote-calendars?page=1&itemsPerPage=30`;
-    this.http.get<any>(apiUrl).subscribe(
+      this.http.get<any>(apiUrl).subscribe(
-      response => {
+        response => {
-        this.calendars = response['hydra:member'];
+          this.calendars = response['hydra:member'];
-        this.loading = false;
+          resolve();
-      },
+        },
-      error => {
+        error => {
-        console.error('Error loading calendars', error);
+          console.error('Error loading calendars', error);
-        this.toastService.error('Error loading current calendar');
+          this.toastService.error('Error loading current calendar');
-        this.loading = false;
+          reject(error);
-      }
+        }
-    );
+      );
+    });
   }
 
   loadCurrentCalendar(uuid: string): void {
@@ -293,57 +315,58 @@ export class ManageOrganizationalUnitComponent implements OnInit {
     this.networkSettingsFormGroup.value.repository = event.value;
   }
 
-  loadData(uuid: string) {
+  loadData(uuid: string): Promise<void> {
-    this.loading = true;
+    return new Promise((resolve, reject) => {
-    const url = `${this.baseUrl}/organizational-units/${uuid}`;
+      const url = `${this.baseUrl}/organizational-units/${uuid}`;
 
-    this.http.get<any>(url).subscribe(
+      this.http.get<any>(url).subscribe(
-      data => {
+        data => {
-        this.generalFormGroup.patchValue({
+          this.generalFormGroup.patchValue({
-          name: data.name,
+            name: data.name,
-          parent: data.parent ? data.parent['@id'] : '',
+            parent: data.parent ? data.parent['@id'] : '',
-          description: data.description,
+            description: data.description,
-          type: data.type,
+            type: data.type,
-          excludeParentChanges: data.excludeParentChanges
+            excludeParentChanges: data.excludeParentChanges
-        });
+          });
-        this.additionalInfoFormGroup.patchValue({
+          this.additionalInfoFormGroup.patchValue({
-          comments: data.comments
+            comments: data.comments
-        });
+          });
-        this.networkSettingsFormGroup.patchValue({
+          this.networkSettingsFormGroup.patchValue({
-          proxy: data.networkSettings.proxy,
+            proxy: data.networkSettings?.proxy,
-          dns: data.networkSettings.dns,
+            dns: data.networkSettings?.dns,
-          netmask: data.networkSettings.netmask,
+            netmask: data.networkSettings?.netmask,
-          router: data.networkSettings.router,
+            router: data.networkSettings?.router,
-          ntp: data.networkSettings.ntp,
+            ntp: data.networkSettings?.ntp,
-          netiface: data.networkSettings.netiface,
+            netiface: data.networkSettings?.netiface,
-          p2pMode: data.networkSettings.p2pMode,
+            p2pMode: data.networkSettings?.p2pMode,
-          p2pTime: data.networkSettings.p2pTime,
+            p2pTime: data.networkSettings?.p2pTime,
-          mcastIp: data.networkSettings.mcastIp,
+            mcastIp: data.networkSettings?.mcastIp,
-          mcastSpeed: data.networkSettings.mcastSpeed,
+            mcastSpeed: data.networkSettings?.mcastSpeed,
-          mcastPort: data.networkSettings.mcastPort,
+            mcastPort: data.networkSettings?.mcastPort,
-          mcastMode: data.networkSettings.mcastMode,
+            mcastMode: data.networkSettings?.mcastMode,
-          menu: data.networkSettings.menu ? data.networkSettings.menu['@id'] : null,
+            menu: data.networkSettings?.menu ? data.networkSettings.menu['@id'] : null,
-          hardwareProfile: data.networkSettings.hardwareProfile ? data.networkSettings.hardwareProfile['@id'] : null,
+            hardwareProfile: data.networkSettings?.hardwareProfile ? data.networkSettings.hardwareProfile['@id'] : null,
-          ogLive: data.networkSettings.ogLive ? data.networkSettings.ogLive['@id'] : null,
+            ogLive: data.networkSettings?.ogLive ? data.networkSettings.ogLive['@id'] : null,
-          repository: data.networkSettings.repository ? data.networkSettings.repository['@id'] : null
+            repository: data.networkSettings?.repository ? data.networkSettings.repository['@id'] : null
-        });
+          });
-        this.classroomInfoFormGroup.patchValue({
+          this.classroomInfoFormGroup.patchValue({
-          location: data.location,
+            location: data.location,
-          projector: data.projector,
+            projector: data.projector,
-          board: data.board,
+            board: data.board,
-          capacity: data.capacity,
+            capacity: data.capacity,
-          remoteCalendar: data.remoteCalendar ? data.remoteCalendar['@id'] : null
+            remoteCalendar: data.remoteCalendar ? data.remoteCalendar['@id'] : null
-        });
+          });
-        this.loading = false;
+          resolve();
-      },
+        },
 
-      error => {
+        error => {
-        console.error('Error fetching data for edit:', error);
+          console.error('Error fetching data for edit:', error);
-        this.toastService.error('Error fetching data');
+          this.toastService.error('Error fetching data');
-        this.loading = false;
+          reject(error);
-        this.onNoClick();
+          this.onNoClick();
-      }
+        }
-    );
+      );
+    });
   }
 
   onSubmit() {
@@ -371,7 +394,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
         this.http.put<any>(putUrl, formData, { headers }).subscribe(
           response => {
             this.unitAdded.emit();
-            this.dialogRef.close();
+            this.dialogRef.close({ success: true });
             this.toastService.success('Editado exitosamente', 'Éxito');
           },
           error => {
@@ -390,7 +413,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
         this.http.post<any>(postUrl, formData, { headers }).subscribe(
           response => {
             this.unitAdded.emit(response);
-            this.dialogRef.close(response);
+            this.dialogRef.close({ success: true });
             this.toastService.success('Creado exitosamente', 'Éxito');
           },
           error => {
@@ -407,6 +430,6 @@ export class ManageOrganizationalUnitComponent implements OnInit {
   }
 
   onNoClick(): void {
-    this.dialogRef.close();
+    this.dialogRef.close({ success: false });
   }
 }

ogWebconsole/src/app/components/login/login.component.spec.ts

@@ -7,9 +7,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 import { of, throwError } from 'rxjs';
 import { ConfigService } from '@services/config.service';
+import { GlobalStatusComponent } from '../global-status/global-status.component';
 
 describe('LoginComponent', () => {
   let component: LoginComponent;
@@ -22,7 +24,7 @@ describe('LoginComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      declarations: [LoginComponent],
+      declarations: [LoginComponent, GlobalStatusComponent], 
       imports: [
         FormsModule,
         ToastrModule.forRoot(),
@@ -30,6 +32,7 @@ describe('LoginComponent', () => {
         MatFormFieldModule,
         MatInputModule,
         MatIconModule,
+        MatDialogModule, 
         TranslateModule.forRoot() 
       ],
       providers: [
@@ -46,101 +49,4 @@ describe('LoginComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should disable the login button if username or password is missing', () => {
-    component.loginObj.username = '';
-    component.loginObj.password = '';
-    fixture.detectChanges();
-    const button = fixture.nativeElement.querySelector('button[type="submit"]');
-    expect(button.disabled).toBeTruthy();
-  });
-
-  it('should enable the login button if username and password are present', () => {
-    component.loginObj.username = 'testUser';
-    component.loginObj.password = 'testPass';
-    fixture.detectChanges();
-    const button = fixture.nativeElement.querySelector('button[type="submit"]');
-    expect(button.disabled).toBeFalsy();
-  });
-
-  it('should call onLogin and navigate on successful login', () => {
-    const mockRouter = spyOn(component['router'], 'navigateByUrl');
-    const mockHttp = spyOn(component['http'], 'post').and.returnValue(of({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c', refreshToken: '456' }));
-
-    component.loginObj.username = 'testUser';
-    component.loginObj.password = 'testPass';
-    component.onLogin();
-
-    expect(mockHttp).toHaveBeenCalledWith(`${component.baseUrl}/auth/login`, component.loginObj);
-    expect(mockRouter).toHaveBeenCalledWith('/groups');
-  });
-
-  it('should show error message on login failure', () => {
-    const mockToast = spyOn(component['toastService'], 'error');
-    const mockHttp = spyOn(component['http'], 'post').and.returnValue(throwError({ error: { message: 'Invalid credentials' } }));
-
-    component.loginObj.username = 'testUser';
-    component.loginObj.password = 'testPass';
-    component.onLogin();
-
-    expect(mockHttp).toHaveBeenCalled();
-    expect(mockToast).toHaveBeenCalledWith('Error al iniciar sesión: Invalid credentials', 'Error');
-  });
-
-  it('should change language to Spanish and save to localStorage', () => {
-    const mockTranslate = spyOn(component['translateService'], 'use');
-    component.changeLanguage('es');
-    expect(localStorage.getItem('language')).toBe('es');
-    expect(mockTranslate).toHaveBeenCalledWith('es');
-  });
-
-  it('should change language to English and save to localStorage', () => {
-    const mockTranslate = spyOn(component['translateService'], 'use');
-    component.changeLanguage('en');
-    expect(localStorage.getItem('language')).toBe('en');
-    expect(mockTranslate).toHaveBeenCalledWith('en');
-  });
-
-  it('should toggle password visibility when clicking the button', () => {
-    const initialHideState = component.hide();
-    const button = fixture.nativeElement.querySelector('button[mat-icon-button]');
-    button.click();
-    expect(component.hide()).toBe(!initialHideState);
-  });
-
-  it('should add "invalid" class to username input if it is invalid and touched', () => {
-    const usernameInput = fixture.nativeElement.querySelector('input[name="username"]');
-    usernameInput.value = ''; // Empty value makes it invalid
-    usernameInput.dispatchEvent(new Event('input'));
-    usernameInput.dispatchEvent(new Event('blur')); // Simulates "touched"
-    fixture.detectChanges();
-
-    expect(usernameInput.classList).toContain('invalid');
-  });
-
-  it('should add rotating class to the logo when loading', () => {
-    component.isLoading = true;
-    fixture.detectChanges();
-    const logo = fixture.nativeElement.querySelector('.login-logo');
-    expect(logo.classList).toContain('rotating');
-  });
-
-  it('should not add rotating class to the logo when not loading', () => {
-    component.isLoading = false;
-    fixture.detectChanges();
-    const logo = fixture.nativeElement.querySelector('.login-logo');
-    expect(logo.classList).not.toContain('rotating');
-  });
-
-  it('should show a success toast message', () => {
-    const mockToast = spyOn(component['toastService'], 'success');
-    component.openSnackBar(false, 'Welcome!');
-    expect(mockToast).toHaveBeenCalledWith('Welcome!', 'Éxito');
-  });
-
-  it('should show an error toast message', () => {
-    const mockToast = spyOn(component['toastService'], 'error');
-    component.openSnackBar(true, 'Something went wrong');
-    expect(mockToast).toHaveBeenCalledWith('Something went wrong', 'Error');
-  });
 });

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

@@ -5,6 +5,8 @@ import { TranslateService } from '@ngx-translate/core';
 import { ToastrService } from "ngx-toastr";
 import { jwtDecode } from "jwt-decode";
 import { ConfigService } from '@services/config.service';
+import { MatDialog } from '@angular/material/dialog';
+import { GlobalStatusComponent } from '../global-status/global-status.component'
 
 @Component({
   selector: 'app-login',
@@ -27,7 +29,8 @@ export class LoginComponent {
     private router: Router,
     private configService: ConfigService,
     private toastService: ToastrService,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private dialog: MatDialog
   ) {
     this.baseUrl = this.configService.apiUrl;
     const savedLanguage = localStorage.getItem('language') || 'es';
@@ -67,6 +70,10 @@ export class LoginComponent {
 
           this.openSnackBar(false, 'Bienvenido ' + this.loginObj.username);
           this.router.navigateByUrl('/groups');
+          this.dialog.open(GlobalStatusComponent, {
+            width: '45vw',
+            height: '80vh',
+          });
         }
         this.isLoading = false;
       },

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

@@ -91,15 +91,25 @@ export class OgDhcpSubnetsComponent implements OnInit {
   }
 
   syncSubnets() {
-    this.http.post(`${this.apiUrl}/sync`, {})
+    this.loading = true;
-      .subscribe(response => {
+    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.loadSubnets();
         this.loading = false;
-      }, error => {
+      },
+      error: (error) => {
+        clearTimeout(timeoutId);
         this.loading = false;
         this.toastService.error('Error al sincronizar');
-      });
+      }
+    });
   }
 
   toggleAction(subnet: any, action: string): void {
@@ -213,10 +223,10 @@ export class OgDhcpSubnetsComponent implements OnInit {
 
   openShowClientsDialog(subnet: Subnet) {
     const dialogRef = this.dialog.open(ShowClientsComponent, {
-      width: '100vw',
+      width: '85vw',
-      height: '100vh',
+      height: '85vh',
-      maxWidth: '100vw',
+      maxWidth: '85vw',
-      maxHeight: '100vh',
+      maxHeight: '85vh',
       data: { subnetId: subnet.id, subnetName: subnet.name, subnetUuid: subnet.uuid }
     });
 

ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.html

@@ -58,7 +58,7 @@
       <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
       <td mat-cell *matCellDef="let client">
         <ng-container *ngIf="column.columnDef === 'status'">
-          <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon" class="client-image" />
+          <img [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon" class="client-image" />
         </ng-container>
 
         <ng-container *ngIf="column.columnDef === 'ogLive'">

ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.css

@@ -0,0 +1,39 @@
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.selected-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.selected-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #ccc;
+}
+
+.selected-item button {
+  margin-left: 10px;
+}

ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.html

@@ -0,0 +1,16 @@
+<h2 mat-dialog-title>Editar imagen </h2>
+
+<mat-dialog-content>
+  <form [formGroup]="imageForm">
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Descripción</mat-label>
+      <input matInput formControlName="description" placeholder="Introduzca la descripción de la imagen."
+      />
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+
+<div class="action-container">
+  <button class="ordinary-button" (click)="close()">Cancelar</button>
+  <button class="submit-button" (click)="save()">Continuar</button>
+</div>

ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.spec.ts

@@ -0,0 +1,72 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, provideHttpClientTesting } from '@angular/common/http/testing';
+import { EditImageComponent } from './edit-image.component';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { ToastrModule, ToastrService } from 'ngx-toastr';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { provideHttpClient } from '@angular/common/http';
+import { ConfigService } from '@services/config.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('EditImageComponent', () => {
+  let component: EditImageComponent;
+  let fixture: ComponentFixture<EditImageComponent>;
+
+  beforeEach(async () => {
+    const mockConfigService = {
+      apiUrl: 'http://mock-api-url'
+    };
+
+    const mockDialogData = {
+      image: {
+        '@id': 'mock-id',
+        name: 'Mock Image',
+        description: 'Mock Description'
+      }
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [EditImageComponent],
+      imports: [
+        HttpClientTestingModule,
+        MatDialogModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule 
+      ],
+      providers: [
+        FormBuilder,
+        ToastrService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        {
+          provide: MatDialogRef,
+          useValue: {}
+        },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: mockDialogData
+        },
+        {
+          provide: ConfigService,
+          useValue: mockConfigService
+        }
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(EditImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.ts

@@ -0,0 +1,70 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {ToastrService} from "ngx-toastr";
+import {Router} from "@angular/router";
+import {ConfigService} from "@services/config.service";
+import {FormBuilder, FormGroup} from "@angular/forms";
+
+@Component({
+  selector: 'app-edit-image',
+  templateUrl: './edit-image.component.html',
+  styleUrl: './edit-image.component.css'
+})
+export class EditImageComponent implements OnInit{
+  baseUrl: string;
+  loading: boolean = true;
+  imageForm: FormGroup;
+
+  constructor(
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<EditImageComponent>,
+    private fb: FormBuilder,
+    private toastService: ToastrService,
+    private router: Router,
+    private configService: ConfigService,
+    @Inject(MAT_DIALOG_DATA) public data: { image: any }
+  ) {
+    this.baseUrl = this.configService.apiUrl;
+    this.imageForm = this.fb.group({
+      description: ['']
+    })
+  }
+
+  ngOnInit(): void {
+    this.loading = true;
+    this.load()
+  }
+
+  load() {
+    this.http.get<any>(`${this.baseUrl}${this.data.image['@id']}`).subscribe({
+      next: (response) => {
+        this.imageForm.patchValue({
+          description: response.description
+        });
+        this.loading = false;
+      },
+      error: error => {
+        this.toastService.error(error.error['hydra:description']);
+      }
+    });
+  }
+
+  save() {
+    const payload = this.imageForm.value;
+
+    this.http.put<any>(`${this.baseUrl}${this.data.image['@id']}`, payload).subscribe({
+      next: (response) => {
+        this.toastService.success('Image updated successfully');
+        this.dialogRef.close(true);
+      },
+      error: error => {
+        this.toastService.error(error.error['hydra:description']);
+      }
+    });
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}

ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.html

@@ -12,6 +12,18 @@
       <input matInput formControlName="ip" name="description">
     </mat-form-field>
 
+    <mat-form-field appearance="fill" class="form-field">
+      <mat-label>Puerto ssh</mat-label>
+      <input matInput formControlName="sshPort" name="sshPort">
+      <mat-hint>Valor que utilizará el sistema para algunas acciones como transferir imagenes.</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" class="form-field">
+      <mat-label>Usuario</mat-label>
+      <input matInput formControlName="user" name="user">
+      <mat-hint>Este usuario se utilizara para conectarse al repositorio.</mat-hint>
+    </mat-form-field>
+
     <mat-form-field appearance="fill" class="form-field">
       <mat-label>Comentarios</mat-label>
       <input matInput formControlName="comments" name="comments">

ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.ts

@@ -30,6 +30,8 @@ export class ManageRepositoryComponent implements OnInit {
     this.imageForm = this.fb.group({
       name: [null, Validators.required],
       ip: [null],
+      sshPort: [null],
+      user: [null],
       comments: [null],
     });
   }
@@ -46,6 +48,8 @@ export class ManageRepositoryComponent implements OnInit {
         this.imageForm = this.fb.group({
           name: [response.name, Validators.required],
           ip: [response.ip],
+          sshPort: [response.sshPort?? '22' ],
+          user: [response.user?? 'opengnsys'],
           comments: [response.comments],
         });
         this.repositoryId = response['@id'];
@@ -60,6 +64,8 @@ export class ManageRepositoryComponent implements OnInit {
     const payload = {
       name: this.imageForm.value.name,
       ip: this.imageForm.value.ip,
+      sshPort: this.imageForm.value.sshPort,
+      user: this.imageForm.value.user,
       comments: this.imageForm.value.comments,
     };
 

ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.css

@@ -0,0 +1,39 @@
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.selected-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.selected-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #ccc;
+}
+
+.selected-item button {
+  margin-left: 10px;
+}

ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.html

@@ -0,0 +1,13 @@
+<h2 mat-dialog-title>Renombrar imagen {{ data.imageImageRepository?.name }}</h2>
+
+<mat-dialog-content>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Nuevo nombre</mat-label>
+    <input matInput [(ngModel)]="name" placeholder="Introduzca el nuevo nombre" required />
+  </mat-form-field>
+</mat-dialog-content>
+
+<div class="action-container">
+  <button class="ordinary-button" (click)="close()">Cancelar</button>
+  <button class="submit-button" (click)="save()">Continuar</button>
+</div>

ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.spec.ts

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RenameImageComponent } from './rename-image.component';
+import {ConvertImageToVirtualComponent} from "../convert-image-to-virtual/convert-image-to-virtual.component";
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
+import {ToastrModule} from "ngx-toastr";
+import {provideHttpClient} from "@angular/common/http";
+import {provideHttpClientTesting} from "@angular/common/http/testing";
+import {ConfigService} from "@services/config.service";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+
+describe('RenameImageComponent', () => {
+  let component: RenameImageComponent;
+  let fixture: ComponentFixture<RenameImageComponent>;
+
+  beforeEach(async () => {
+    const mockConfigService = {
+      apiUrl: 'http://mock-api-url'
+    };
+    await TestBed.configureTestingModule({
+      declarations: [RenameImageComponent],
+      imports: [
+        MatDialogModule,
+        ToastrModule.forRoot()
+      ],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        {
+          provide: MatDialogRef,
+          useValue: {}
+        },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {}
+        },
+        {
+          provide: ConfigService,
+          useValue: mockConfigService
+        }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(RenameImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.ts

@@ -0,0 +1,51 @@
+import {Component, EventEmitter, Inject, OnInit, Output} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {ToastrService} from "ngx-toastr";
+import {Router} from "@angular/router";
+import {ConfigService} from "@services/config.service";
+
+@Component({
+  selector: 'app-rename-image',
+  templateUrl: './rename-image.component.html',
+  styleUrl: './rename-image.component.css'
+})
+export class RenameImageComponent implements OnInit{
+  baseUrl: string;
+  loading: boolean = true;
+  name: string = '';
+  @Output() eventEmitter = new EventEmitter();
+
+  constructor(
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<RenameImageComponent>,
+    private toastService: ToastrService,
+    private router: Router,
+    private configService: ConfigService,
+    @Inject(MAT_DIALOG_DATA) public data: { imageImageRepository: any }
+  ) {
+    this.baseUrl = this.configService.apiUrl;
+  }
+
+  ngOnInit(): void {
+    this.loading = true;
+  }
+
+  save() {
+    this.http.post<any>(`${this.baseUrl}${this.data.imageImageRepository['@id']}/rename-image`, {
+      newName: this.name
+    }).subscribe({
+      next: (response) => {
+        this.toastService.success('Imagen renombrada correctamente');
+        this.dialogRef.close(true);
+      },
+      error: error => {
+        this.toastService.error(error.error['hydra:description']);
+      }
+    });
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}

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

@@ -5,7 +5,7 @@
     <mat-icon>help</mat-icon>
   </button>
   <div class="header-container-title">
-    <h2 joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">
+    <h2 joyrideStep="repositoryTitleStep" text="{{ 'groupsTitleStepText' | translate }}">
       {{ 'repositoryTitle' | translate }}
     </h2>
   </div>
@@ -42,7 +42,8 @@
       </ng-container>
 
       <ng-container *ngIf="column.columnDef === 'images'">
-        <button class="action-button" (click)="openShowImagesDialog(repository)">Gestionar Imágenes</button>
+        <button class="action-button" (click)="openShowMonoliticImagesDialog(repository)">Gestionar Imágenes</button>
+        <button class="action-button" style="margin-left: 0.5vw;" [disabled]="!isGitModuleInstalled" (click)="openShowGitImagesDialog(repository)">Gestionar Imágenes Git</button>
       </ng-container>
     </td>
   </ng-container>

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

@@ -9,7 +9,8 @@ import { JoyrideService } from 'ngx-joyride';
 import { Router } from '@angular/router';
 import { ConfigService } from '@services/config.service';
 import {Subnet} from "../ogdhcp/og-dhcp-subnets.component";
-import {ShowImagesComponent} from "./show-images/show-images.component";
+import {ShowMonoliticImagesComponent} from "./show-monolitic-images/show-monolitic-images.component";
+import {ShowGitImagesComponent} from "./show-git-images/show-git-images.component";
 import {ManageRepositoryComponent} from "./manage-repository/manage-repository.component";
 
 @Component({
@@ -38,6 +39,11 @@ export class RepositoriesComponent implements OnInit {
       header: 'Nombre de repositorio',
       cell: (repository: any) => `${repository.name}`
     },
+    {
+      columnDef: 'user',
+      header: 'Usuario',
+      cell: (repository: any) => `${repository.user?? 'opengnsys'}`
+    },
     {
       columnDef: 'ip',
       header: 'Ip',
@@ -54,7 +60,8 @@ export class RepositoriesComponent implements OnInit {
       cell: (repository: any) => `${this.datePipe.transform(repository.createdAt, 'dd/MM/yyyy hh:mm:ss')}`
     }
   ];
-  displayedColumns: string[] = ['id', 'name', 'ip', 'images', 'createdAt', 'actions'];
+  isGitModuleInstalled: boolean = true;
+  displayedColumns: string[] = ['id', 'name', 'ip', 'user', 'images', 'createdAt', 'actions'];
 
   constructor(
     public dialog: MatDialog,
@@ -91,7 +98,6 @@ export class RepositoriesComponent implements OnInit {
         this.loading = false;
       },
       error => {
-        console.error('Error fetching images', error);
         this.loading = false;
       }
     );
@@ -125,12 +131,12 @@ export class RepositoriesComponent implements OnInit {
     });
   }
 
-  openShowImagesDialog(repository: Subnet) {
+  openShowMonoliticImagesDialog(repository: Subnet) {
-    const dialogRef = this.dialog.open(ShowImagesComponent, {
+    const dialogRef = this.dialog.open(ShowMonoliticImagesComponent, {
-      width: '100vw',
+      width: '85vw',
-      height: '100vh',
+      height: '85vh',
-      maxWidth: '100vw',
+      maxWidth: '85vw',
-      maxHeight: '100vh',
+      maxHeight: '85vh',
       data: { repositoryId: repository.id, repositoryName: repository.name, repositoryUuid: repository.uuid }
     });
 
@@ -139,6 +145,19 @@ export class RepositoriesComponent implements OnInit {
     });
   }
 
+  openShowGitImagesDialog(repository: Subnet) {
+    const dialogRef = this.dialog.open(ShowGitImagesComponent, {
+      width: '85vw',
+      height: '85vh',
+      maxWidth: '85vw',
+      maxHeight: '85vh',
+      data: { repositoryId: repository.id, repositoryName: repository.name, repositoryUuid: repository.uuid }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.search();
+    });
+  }
 
   onPageChange(event: any): void {
     this.page = event.pageIndex;
@@ -150,7 +169,7 @@ export class RepositoriesComponent implements OnInit {
   iniciarTour(): void {
     this.joyrideService.startTour({
       steps: [
-        'titleStep',
+        'repositoryTitleStep',
         'addStep',
       ],
       showPrevButton: true,

ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.html

@@ -1,104 +0,0 @@
-<app-loading [isLoading]="loading"></app-loading>
-
-<div class="header-container">
-  <button mat-icon-button color="primary" (click)="iniciarTour()">
-    <mat-icon>help</mat-icon>
-  </button>
-  <div class="header-container-title">
-    <h2 joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">
-      {{ 'imagesTitle' | translate }} en {{ repository?.name }}
-    </h2>
-  </div>
-  <div class="images-button-row">
-    <button class="action-button" (click)="importImage()">
-      {{ 'importImageButton' | translate }}
-    </button>
-  </div>
-  <div class="images-button-row">
-    <button class="action-button" (click)="convertImage()">
-      {{ 'convertImageButton' | translate }}
-    </button>
-  </div>
-</div>
-
-<div class="search-container">
-  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchImagesField" text="Busca una imagen por nombre. Pulsa 'enter' para iniciar la búsqueda.">
-    <mat-label>{{ 'searchLabel' | translate }}</mat-label>
-    <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
-    <mat-icon matSuffix>search</mat-icon>
-    <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
-  </mat-form-field>
-  <mat-form-field appearance="fill" class="search-boolean">
-    <mat-label i18n="@@searchLabel">Estado</mat-label>
-    <mat-select [(ngModel)]="filters['status']" (selectionChange)="search()" placeholder="Seleccionar opción" >
-      <mat-option [value]="'failed'">Fallido</mat-option>
-      <mat-option [value]="'pending'">Pendiente</mat-option>
-      <mat-option [value]="'in-progress'">Transfiriendo</mat-option>
-      <mat-option [value]="'success'">Creado con éxito</mat-option>
-      <mat-option [value]="'transferring'">En progreso</mat-option>
-      <mat-option [value]="'trash'">Papelera</mat-option>
-      <mat-option [value]="'aux-files-pending'">Creando archivos auxiliares</mat-option>
-    </mat-select>
-  </mat-form-field>
-</div>
-
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="imagesTable" text="Esta tabla muestra las imágenes disponibles.">
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
-    <td mat-cell *matCellDef="let image">
-      <ng-container *ngIf="column.columnDef === 'remotePc' || column.columnDef === 'isGlobal'">
-        <mat-icon [color]="image.image[column.columnDef] ? 'primary' : 'warn'">
-          {{ image.image[column.columnDef] ? 'check_circle' : 'cancel' }}
-        </mat-icon>
-      </ng-container>
-      <ng-container *ngIf="column.columnDef === 'status'">
-        <mat-chip [ngClass]="{
-              'chip-failed': image.status === 'failed',
-              'chip-success': image.status === 'success',
-              'chip-pending': image.status === 'pending',
-              'chip-in-progress': image.status === 'in-progress',
-              'chip-transferring': image.status === 'transferring',
-            }">
-          {{ getStatusLabel(image[column.columnDef]) }}
-        </mat-chip>
-      </ng-container>
-      <ng-container *ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal'">
-        {{ column.cell(image) }}
-      </ng-container>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="actions">
-    <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
-    <td mat-cell *matCellDef="let image" style="text-align: center;">
-      <button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
-      <button *ngIf="repositoryUuid"  mat-icon-button color="warn" (click)="toggleAction(image, 'delete-trash')">
-        <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
-      </button>
-      <button mat-icon-button [matMenuTriggerFor]="menu">
-        <mat-icon>menu</mat-icon>
-      </button>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="toggleAction(image, 'get-aux')">Obtener ficheros auxiliares</button>
-        <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'delete-permanent')">Eliminar permanentemente</button>
-        <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'" (click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>
-        <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'transfer')">Transferir imagen</button>
-        <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'transfer-global')">Transferir imagen globalmente </button>
-        <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'backup')">Realizar backup </button>
-        <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'status')">Checkear estado imagen </button>
-      </mat-menu>
-    </td>
-  </ng-container>
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
-
-<div class="paginator-container">
-  <mat-paginator [length]="length"
-                 [pageSize]="itemsPerPage"
-                 [pageIndex]="page"
-                 [pageSizeOptions]="[5, 10, 20, 40, 100]"
-                 (page)="onPageChange($event)">
-  </mat-paginator>
-</div>
-

ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.spec.ts

@@ -1,84 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideHttpClient } from '@angular/common/http';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { ReactiveFormsModule, FormsModule, FormBuilder } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatTableModule } from '@angular/material/table';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatIconModule } from '@angular/material/icon';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslateModule } from '@ngx-translate/core';
-import { ToastrModule, ToastrService } from 'ngx-toastr';
-import { JoyrideModule } from 'ngx-joyride';
-import { CommonModule } from '@angular/common';
-import {MatProgressSpinner} from "@angular/material/progress-spinner";
-import {RepositoryImagesComponent} from "./repository-images.component";
-import {LoadingComponent} from "../../../shared/loading/loading.component";
-import {MatOptionModule} from "@angular/material/core";
-import {MatSelectModule} from "@angular/material/select";
-import { ConfigService } from '@services/config.service';
-
-describe('RepositoriesComponent', () => {
-  let component: RepositoryImagesComponent;
-  let fixture: ComponentFixture<RepositoryImagesComponent>;
-
-  beforeEach(async () => {
-    const mockConfigService = {
-      apiUrl: 'http://mock-api-url',
-      mercureUrl: 'http://mock-mercure-url'
-    };
-
-    await TestBed.configureTestingModule({
-      declarations: [RepositoryImagesComponent, LoadingComponent],
-      imports: [
-        ReactiveFormsModule,
-        FormsModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatTableModule,
-        MatPaginatorModule,
-        MatDividerModule,
-        MatIconModule,
-        MatOptionModule,
-        BrowserAnimationsModule,
-        MatProgressSpinner,
-        MatSelectModule ,
-        ToastrModule.forRoot(),
-        TranslateModule.forRoot(),
-        JoyrideModule.forRoot(),
-        CommonModule
-      ],
-      providers: [
-        FormBuilder,
-        ToastrService,
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        {
-          provide: MatDialogRef,
-          useValue: {}
-        },
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: {}
-        },
-        { provide: ConfigService, useValue: mockConfigService }
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(RepositoryImagesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.css

@@ -1,8 +1,3 @@
-
-table {
-  width: 100%;
-}
-
 .search-container  {
   display: flex;
   justify-content: space-between;
@@ -12,43 +7,23 @@ table {
   box-sizing: border-box;
 }
 
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-container-title {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
 .search-string {
   flex: 2;
   padding: 5px;
 }
 
-.search-boolean {
-  flex: 1;
-  padding: 5px;
-}
-
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
-}
-
-.paginator-container {
-  display: flex;
-  justify-content: end;
-  margin-bottom: 30px;
-}
-
-.example-headers-align .mat-expansion-panel-header-description {
-  justify-content: space-between;
-  align-items: center;
-}
-
-.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
-  margin-left: 8px;
-}
-
 .button-row {
   display: table-cell;
   max-width: 600px;
@@ -83,15 +58,43 @@ table {
   color: white;
 }
 
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
-}
-
 .images-button-row {
   display: flex;
   gap: 15px;
   padding: 5px;
 }
 
+table {
+  width: 100%;
+}
+
+.search-boolean {
+  flex: 1;
+  padding: 5px;
+}
+
+.mat-elevation-z8 {
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+}
+
+.paginator-container {
+  display: flex;
+  justify-content: end;
+  margin-bottom: 30px;
+}
+
+.example-headers-align .mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
+  margin-left: 8px;
+}
+
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}

ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.html

@@ -1,26 +1,19 @@
 <app-loading [isLoading]="loading"></app-loading>
 
-<h2 mat-dialog-title>Gestionar imágenes en {{data.repositoryName}}</h2>
-
 <mat-dialog-content>
   <div class="header-container">
-    <button mat-icon-button color="primary" (click)="iniciarTour()">
-      <mat-icon>help</mat-icon>
-    </button>
     <div class="header-container-title">
+      <button mat-icon-button color="primary" (click)="iniciarTour()">
+        <mat-icon>help</mat-icon>
+      </button>
+      <h2>Gestionar imágenes git en {{data.repositoryName}}</h2>
     </div>
     <div class="images-button-row">
       <button class="action-button" (click)="openImageInfoDialog()">Ver Información</button>
-    </div>
-    <div class="images-button-row">
       <button class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
-    </div>
-    <div class="images-button-row">
       <button class="action-button" (click)="importImage()">
         {{ 'importImageButton' | translate }}
       </button>
-    </div>
-    <div class="images-button-row">
       <button class="action-button" (click)="convertImage()">
         {{ 'convertImageButton' | translate }}
       </button>
@@ -28,15 +21,17 @@
   </div>
 
   <div class="search-container">
-    <mat-form-field appearance="fill" class="search-string" joyrideStep="searchImagesField" text="Busca una imagen por nombre. Pulsa 'enter' para iniciar la búsqueda.">
+    <mat-form-field appearance="fill" class="search-string" joyrideStep="searchImagesField"
+      text="Busca una imagen por nombre. Pulsa 'enter' para iniciar la búsqueda.">
       <mat-label>{{ 'searchLabel' | translate }}</mat-label>
-      <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="loadData()" i18n-placeholder="@@searchPlaceholder">
+      <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="loadData()"
+        i18n-placeholder="@@searchPlaceholder">
       <mat-icon matSuffix>search</mat-icon>
       <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
     </mat-form-field>
     <mat-form-field appearance="fill" class="search-boolean">
       <mat-label i18n="@@searchLabel">Estado</mat-label>
-      <mat-select [(ngModel)]="filters['status']" (selectionChange)="loadData()" placeholder="Seleccionar opción" >
+      <mat-select [(ngModel)]="filters['status']" (selectionChange)="loadData()" placeholder="Seleccionar opción">
         <mat-option [value]="'failed'">Fallido</mat-option>
         <mat-option [value]="'pending'">Pendiente</mat-option>
         <mat-option [value]="'in-progress'">Transfiriendo</mat-option>
@@ -48,7 +43,8 @@
     </mat-form-field>
   </div>
 
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="imagesTable" text="Esta tabla muestra las imágenes disponibles.">
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="imagesTable"
+    text="Esta tabla muestra las imágenes disponibles.">
     <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
       <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
       <td mat-cell *matCellDef="let image">
@@ -68,7 +64,8 @@
             {{ getStatusLabel(image[column.columnDef]) }}
           </mat-chip>
         </ng-container>
-        <ng-container *ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal'">
+        <ng-container
+          *ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal'">
           {{ column.cell(image) }}
         </ng-container>
       </td>
@@ -77,7 +74,11 @@
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
       <td mat-cell *matCellDef="let image" style="text-align: center;">
-        <button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
+        <button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon
+            i18n="@@deleteElementTooltip">visibility</mat-icon></button>
+        <button mat-icon-button color="primary" (click)="toggleAction(image, 'edit')">
+          <mat-icon i18n="@@deleteElementTooltip">edit</mat-icon>
+        </button>
         <button mat-icon-button color="warn" (click)="toggleAction(image, 'delete-trash')">
           <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
         </button>
@@ -86,13 +87,20 @@
         </button>
         <mat-menu #menu="matMenu">
           <button mat-menu-item (click)="toggleAction(image, 'get-aux')">Obtener ficheros auxiliares</button>
-          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'delete-permanent')">Eliminar permanentemente</button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
-          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'" (click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>
+            (click)="toggleAction(image, 'delete-permanent')">Eliminar permanentemente</button>
-          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'transfer')">Transferir imagen</button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'"
-          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'transfer-global')">Transferir imagen globalmente </button>
+            (click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>
-          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'backup')">Realizar backup </button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
-          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'status')">Checkear estado imagen </button>
+            (click)="toggleAction(image, 'transfer')">Transferir imagen</button>
-          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'convert-image-to-virtual')">Convertir imagen en virtual </button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'transfer-global')">Transferir imagen globalmente </button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'backup')">Realizar backup </button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'status')">Checkear estado imagen </button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'convert-image-to-virtual')">Convertir imagen en virtual </button>
         </mat-menu>
       </td>
     </ng-container>
@@ -101,11 +109,8 @@
   </table>
 
   <div class="paginator-container">
-    <mat-paginator [length]="length"
+    <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
-                   [pageSize]="itemsPerPage"
+      [pageSizeOptions]="[5, 10, 20, 40, 100]" (page)="onPageChange($event)">
-                   [pageIndex]="page"
-                   [pageSizeOptions]="[5, 10, 20, 40, 100]"
-                   (page)="onPageChange($event)">
     </mat-paginator>
   </div>
 
@@ -113,5 +118,3 @@
 <mat-dialog-actions class="action-container">
   <button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
 </mat-dialog-actions>
-
-

ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ShowGitImagesComponent } from './show-git-images.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ShowImagesComponent } from './show-images.component';
 import { ToastrModule } from 'ngx-toastr';
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
@@ -17,9 +17,9 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
-describe('ShowImagesComponent', () => {
+describe('ShowGitImagesComponent', () => {
-  let component: ShowImagesComponent;
+  let component: ShowGitImagesComponent;
-  let fixture: ComponentFixture<ShowImagesComponent>;
+  let fixture: ComponentFixture<ShowGitImagesComponent>;
 
   beforeEach(async () => {
     const mockConfigService = {
@@ -27,7 +27,7 @@ describe('ShowImagesComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      declarations: [ShowImagesComponent, LoadingComponent],
+      declarations: [ShowGitImagesComponent, LoadingComponent],
       imports: [
         HttpClientTestingModule,
         ToastrModule.forRoot(),
@@ -52,7 +52,7 @@ describe('ShowImagesComponent', () => {
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ShowImagesComponent);
+    fixture = TestBed.createComponent(ShowGitImagesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.ts

@@ -15,14 +15,15 @@ import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/de
 import {ExportImageComponent} from "../../images/export-image/export-image.component";
 import {BackupImageComponent} from "../backup-image/backup-image.component";
 import {ConvertImageToVirtualComponent} from "../convert-image-to-virtual/convert-image-to-virtual.component";
+import {EditImageComponent} from "../edit-image/edit-image.component";
 
 @Component({
-  selector: 'app-show-images',
+  selector: 'app-show-git-images',
-  templateUrl: './show-images.component.html',
+  templateUrl: './show-git-images.component.html',
-  styleUrl: './show-images.component.css'
+  styleUrl: './show-git-images.component.css'
 })
-export class ShowImagesComponent implements OnInit {
+export class ShowGitImagesComponent {
-  baseUrl: string;
+baseUrl: string;
   private apiUrl: string;
   dataSource = new MatTableDataSource<any>();
   length: number = 0;
@@ -45,9 +46,9 @@ export class ShowImagesComponent implements OnInit {
       cell: (image: any) => `${image.image.name}`
     },
     {
-      columnDef: 'remotePc',
+      columnDef: 'version',
-      header: 'Remote Pc',
+      header: 'Version',
-      cell: (image: any) => `${image.image?.remotePc}`
+      cell: (image: any) => `${image.version ? image.version : '0'}`
     },
     {
       columnDef: 'isGlobal',
@@ -60,9 +61,9 @@ export class ShowImagesComponent implements OnInit {
       cell: (image: any) => `${image.status}`
     },
     {
-      columnDef: 'imageFullsum',
+      columnDef: 'description',
-      header: 'Fullsum',
+      header: 'Descripción',
-      cell: (image: any) => `${image.imageFullsum}`
+      cell: (image: any) => `${image.description ? image.description : 'Sin descripción'}`
     },
     {
       columnDef: 'createdAt',
@@ -79,7 +80,7 @@ export class ShowImagesComponent implements OnInit {
     private joyrideService: JoyrideService,
     private configService: ConfigService,
     private router: Router,
-    public dialogRef: MatDialogRef<ShowImagesComponent>,
+    public dialogRef: MatDialogRef<ShowGitImagesComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.baseUrl = this.configService.apiUrl;
@@ -254,6 +255,18 @@ export class ShowImagesComponent implements OnInit {
           }
         });
         break;
+      case 'edit':
+        this.dialog.open(EditImageComponent, {
+          width: '600px',
+          data: {
+            image: image,
+          }
+        }).afterClosed().subscribe((result) => {
+          if (result) {
+            this.loadData();
+          }
+        });
+        break;
       case 'recover':
         this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/recover`, {}).subscribe({
           next: () => {
@@ -332,6 +345,7 @@ export class ShowImagesComponent implements OnInit {
                 imageImageRepository: image
               }
             });
+            this.router.navigate(['/commands-logs']);
           },
           error: (error) => {
             this.toastService.error(error.error['hydra:description']);

ogWebconsole/src/app/components/repositories/show-images/show-images.component.css

@@ -1,202 +0,0 @@
-
-table {
-  width: 100%;
-}
-
-.search-container  {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin: 1.5rem 0rem 1.5rem 0rem;
-  box-sizing: border-box;
-}
-
-.search-string {
-  flex: 2;
-  padding: 5px;
-}
-
-.search-boolean {
-  flex: 1;
-  padding: 5px;
-}
-
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
-}
-
-.paginator-container {
-  display: flex;
-  justify-content: end;
-  margin-bottom: 30px;
-}
-
-.example-headers-align .mat-expansion-panel-header-description {
-  justify-content: space-between;
-  align-items: center;
-}
-
-.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
-  margin-left: 8px;
-}
-
-.button-row {
-  display: table-cell;
-  max-width: 600px;
-}
-
-.button-row .mat-mdc-button-base {
-  margin: 8px 8px 8px 0;
-}
-
-.chip-failed {
-  background-color: #e87979 !important;
-  color: white;
-}
-
-.chip-success {
-  background-color: #46c446 !important;
-  color: white;
-}
-
-.chip-pending {
-  background-color: lightgrey !important;
-  color: black;
-}
-
-.chip-in-progress {
-  background-color: #f5a623 !important;
-  color: white;
-}
-
-.chip-transferring {
-  background-color: #f5a623 !important;
-  color: white;
-}
-
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
-}
-
-.images-button-row {
-  display: flex;
-  gap: 15px;
-  padding: 5px;
-}
-
-
-table {
-  width: 100%;
-}
-
-.search-container  {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin: 1.5rem 0rem 1.5rem 0rem;
-  box-sizing: border-box;
-}
-
-.search-string {
-  flex: 2;
-  padding: 5px;
-}
-
-.search-boolean {
-  flex: 1;
-  padding: 5px;
-}
-
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
-}
-
-.paginator-container {
-  display: flex;
-  justify-content: end;
-  margin-bottom: 30px;
-}
-
-.example-headers-align .mat-expansion-panel-header-description {
-  justify-content: space-between;
-  align-items: center;
-}
-
-.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
-  margin-left: 8px;
-}
-
-.button-row {
-  display: table-cell;
-  max-width: 600px;
-}
-
-.button-row .mat-mdc-button-base {
-  margin: 8px 8px 8px 0;
-}
-
-.chip-failed {
-  background-color: #e87979 !important;
-  color: white;
-}
-
-.chip-success {
-  background-color: #46c446 !important;
-  color: white;
-}
-
-.chip-pending {
-  background-color: lightgrey !important;
-  color: black;
-}
-
-.chip-in-progress {
-  background-color: #f5a623 !important;
-  color: white;
-}
-
-.chip-transferring {
-  background-color: #f5a623 !important;
-  color: white;
-}
-
-.action-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1em;
-  padding: 1.5em;
-}
-
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
-}
-
-.images-button-row {
-  display: flex;
-  gap: 15px;
-  padding: 5px;
-}
-
-

ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.css

@@ -0,0 +1,100 @@
+.search-container  {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin: 1.5rem 0rem 1.5rem 0rem;
+  box-sizing: border-box;
+}
+
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-container-title {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
+.search-string {
+  flex: 2;
+  padding: 5px;
+}
+
+.button-row {
+  display: table-cell;
+  max-width: 600px;
+}
+
+.button-row .mat-mdc-button-base {
+  margin: 8px 8px 8px 0;
+}
+
+.chip-failed {
+  background-color: #e87979 !important;
+  color: white;
+}
+
+.chip-success {
+  background-color: #46c446 !important;
+  color: white;
+}
+
+.chip-pending {
+  background-color: lightgrey !important;
+  color: black;
+}
+
+.chip-in-progress {
+  background-color: #f5a623 !important;
+  color: white;
+}
+
+.chip-transferring {
+  background-color: #f5a623 !important;
+  color: white;
+}
+
+.images-button-row {
+  display: flex;
+  gap: 15px;
+  padding: 5px;
+}
+
+table {
+  width: 100%;
+}
+
+.search-boolean {
+  flex: 1;
+  padding: 5px;
+}
+
+.mat-elevation-z8 {
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+}
+
+.paginator-container {
+  display: flex;
+  justify-content: end;
+  margin-bottom: 30px;
+}
+
+.example-headers-align .mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
+  margin-left: 8px;
+}
+
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}

ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html

@@ -0,0 +1,122 @@
+<app-loading [isLoading]="loading"></app-loading>
+
+<mat-dialog-content>
+  <div class="header-container">
+    <div class="header-container-title">
+      <button mat-icon-button color="primary" (click)="iniciarTour()">
+        <mat-icon>help</mat-icon>
+      </button>
+      <h2>Gestionar imágenes monolíticas en {{data.repositoryName}}</h2>
+    </div>
+    <div class="images-button-row">
+      <button class="action-button" (click)="openImageInfoDialog()">Ver Información</button>
+      <button class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
+      <button class="action-button" (click)="importImage()">
+        {{ 'importImageButton' | translate }}
+      </button>
+      <button class="action-button" (click)="convertImage()">
+        {{ 'convertImageButton' | translate }}
+      </button>
+    </div>
+  </div>
+
+  <div class="search-container">
+    <mat-form-field appearance="fill" class="search-string" joyrideStep="searchImagesField"
+      text="Busca una imagen por nombre. Pulsa 'enter' para iniciar la búsqueda.">
+      <mat-label>{{ 'searchLabel' | translate }}</mat-label>
+      <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="loadData()"
+        i18n-placeholder="@@searchPlaceholder">
+      <mat-icon matSuffix>search</mat-icon>
+      <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
+    </mat-form-field>
+    <mat-form-field appearance="fill" class="search-boolean">
+      <mat-label i18n="@@searchLabel">Estado</mat-label>
+      <mat-select [(ngModel)]="filters['status']" (selectionChange)="loadData()" placeholder="Seleccionar opción">
+        <mat-option [value]="'failed'">Fallido</mat-option>
+        <mat-option [value]="'pending'">Pendiente</mat-option>
+        <mat-option [value]="'in-progress'">Transfiriendo</mat-option>
+        <mat-option [value]="'success'">Creado con éxito</mat-option>
+        <mat-option [value]="'transferring'">En progreso</mat-option>
+        <mat-option [value]="'trash'">Papelera</mat-option>
+        <mat-option [value]="'aux-files-pending'">Creando archivos auxiliares</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="imagesTable"
+    text="Esta tabla muestra las imágenes disponibles.">
+    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
+      <td mat-cell *matCellDef="let image">
+        <ng-container *ngIf="column.columnDef === 'remotePc' || column.columnDef === 'isGlobal'">
+          <mat-icon [color]="image.image[column.columnDef] ? 'primary' : 'warn'">
+            {{ image.image[column.columnDef] ? 'check_circle' : 'cancel' }}
+          </mat-icon>
+        </ng-container>
+        <ng-container *ngIf="column.columnDef === 'status'">
+          <mat-chip [ngClass]="{
+                'chip-failed': image.status === 'failed',
+                'chip-success': image.status === 'success',
+                'chip-pending': image.status === 'pending',
+                'chip-in-progress': image.status === 'in-progress',
+                'chip-transferring': image.status === 'transferring',
+              }">
+            {{ getStatusLabel(image[column.columnDef]) }}
+          </mat-chip>
+        </ng-container>
+        <ng-container
+          *ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal'">
+          {{ column.cell(image) }}
+        </ng-container>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
+      <td mat-cell *matCellDef="let image" style="text-align: center;">
+        <button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon
+            i18n="@@deleteElementTooltip">visibility</mat-icon></button>
+        <button mat-icon-button color="primary" (click)="toggleAction(image, 'edit')">
+          <mat-icon i18n="@@deleteElementTooltip">edit</mat-icon>
+        </button>
+        <button mat-icon-button color="warn" (click)="toggleAction(image, 'delete-trash')">
+          <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
+        </button>
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <mat-icon>menu</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item (click)="toggleAction(image, 'get-aux')">Obtener ficheros auxiliares</button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'delete-permanent')">Eliminar permanentemente</button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'"
+            (click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'transfer')">Transferir imagen</button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'transfer-global')">Transferir imagen globalmente </button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'backup')">Realizar backup </button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'status')">Checkear estado imagen </button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
+            (click)="toggleAction(image, 'convert-image-to-virtual')">Convertir imagen en virtual </button>
+          <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'rename')">Renombrar imagen</button>
+
+        </mat-menu>
+      </td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+
+  <div class="paginator-container">
+    <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
+      [pageSizeOptions]="[5, 10, 20, 40, 100]" (page)="onPageChange($event)">
+    </mat-paginator>
+  </div>
+
+</mat-dialog-content>
+<mat-dialog-actions class="action-container">
+  <button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
+</mat-dialog-actions>

ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.spec.ts

@@ -0,0 +1,63 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ShowMonoliticImagesComponent } from './show-monolitic-images.component';
+import { ToastrModule } from 'ngx-toastr';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { JoyrideModule } from 'ngx-joyride';
+import { ConfigService } from '@services/config.service';
+import { LoadingComponent } from '../../../shared/loading/loading.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule } from '@angular/material/table';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+describe('ShowMonoliticImagesComponent', () => {
+  let component: ShowMonoliticImagesComponent;
+  let fixture: ComponentFixture<ShowMonoliticImagesComponent>;
+
+  beforeEach(async () => {
+    const mockConfigService = {
+      apiUrl: 'http://mock-api-url'
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [ShowMonoliticImagesComponent, LoadingComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        MatDialogModule,
+        TranslateModule.forRoot(),
+        JoyrideModule.forRoot(),
+        MatIconModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatPaginatorModule,
+        MatTableModule,
+        FormsModule,
+        NoopAnimationsModule,
+        MatInputModule,
+        MatProgressSpinnerModule
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: ConfigService, useValue: mockConfigService }
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ShowMonoliticImagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts

@@ -1,26 +1,29 @@
-import {Component, Input, isDevMode, OnInit} from '@angular/core';
+import {Component, Inject, Input, isDevMode, OnInit} from '@angular/core';
 import {MatTableDataSource} from "@angular/material/table";
 import {DatePipe} from "@angular/common";
-import {MatDialog} from "@angular/material/dialog";
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
 import {HttpClient} from "@angular/common/http";
 import {ToastrService} from "ngx-toastr";
 import {JoyrideService} from "ngx-joyride";
+import {ConfigService} from "@services/config.service";
+import {Router} from "@angular/router";
 import {Observable} from "rxjs";
-import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
-import {ExportImageComponent} from "../../images/export-image/export-image.component";
-import {BackupImageComponent} from "../backup-image/backup-image.component";
 import {ServerInfoDialogComponent} from "../../ogdhcp/server-info-dialog/server-info-dialog.component";
 import {ImportImageComponent} from "../import-image/import-image.component";
 import {ConvertImageComponent} from "../convert-image/convert-image.component";
-import { ConfigService } from '@services/config.service';
+import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
-import {Router} from "@angular/router";
+import {ExportImageComponent} from "../../images/export-image/export-image.component";
+import {BackupImageComponent} from "../backup-image/backup-image.component";
+import {ConvertImageToVirtualComponent} from "../convert-image-to-virtual/convert-image-to-virtual.component";
+import {EditImageComponent} from "../edit-image/edit-image.component";
+import {RenameImageComponent} from "../rename-image/rename-image.component";
 
 @Component({
-  selector: 'app-repository-images',
+  selector: 'app-show-monolitic-images',
-  templateUrl: './repository-images.component.html',
+  templateUrl: './show-monolitic-images.component.html',
-  styleUrl: './repository-images.component.css'
+  styleUrl: './show-monolitic-images.component.css'
 })
-export class RepositoryImagesComponent implements OnInit {
+export class ShowMonoliticImagesComponent implements OnInit {
   baseUrl: string;
   private apiUrl: string;
   dataSource = new MatTableDataSource<any>();
@@ -41,12 +44,12 @@ export class RepositoryImagesComponent implements OnInit {
     {
       columnDef: 'name',
       header: 'Nombre de imagen',
-      cell: (image: any) => `${image.image.name}`
+      cell: (image: any) => `${image.name}`
     },
     {
-      columnDef: 'remotePc',
+      columnDef: 'version',
-      header: 'Remote Pc',
+      header: 'Version',
-      cell: (image: any) => `${image.image?.remotePc}`
+      cell: (image: any) => `${image.version ? image.version : '0'}`
     },
     {
       columnDef: 'isGlobal',
@@ -59,9 +62,9 @@ export class RepositoryImagesComponent implements OnInit {
       cell: (image: any) => `${image.status}`
     },
     {
-      columnDef: 'imageFullsum',
+      columnDef: 'description',
-      header: 'Fullsum',
+      header: 'Descripción',
-      cell: (image: any) => `${image.imageFullsum}`
+      cell: (image: any) => `${image.description ? image.description : 'Sin descripción'}`
     },
     {
       columnDef: 'createdAt',
@@ -71,9 +74,6 @@ export class RepositoryImagesComponent implements OnInit {
   ];
   displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
 
-  @Input() repositoryUuid: any
-  private repositoryId: any;
-
   constructor(
     public dialog: MatDialog,
     private http: HttpClient,
@@ -81,25 +81,27 @@ export class RepositoryImagesComponent implements OnInit {
     private joyrideService: JoyrideService,
     private configService: ConfigService,
     private router: Router,
+    public dialogRef: MatDialogRef<ShowMonoliticImagesComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.baseUrl = this.configService.apiUrl;
     this.apiUrl = `${this.baseUrl}/image-image-repositories`;
   }
 
   ngOnInit(): void {
-    if (this.repositoryUuid) {
+    console.error()
-      this.loadRepository()
+    if (this.data) {
-    } else {
+      this.loadData();
-      this.search();
     }
   }
 
-  loadRepository(): void {
+  loadData(): void {
-    this.http.get<any>(`${this.baseUrl}/image-repositories/${this.repositoryUuid}`, {}).subscribe(
+    this.loading = true;
+    this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}&repository.id=${this.data.repositoryId}`, { params: this.filters }).subscribe(
       data => {
-        this.repositoryId = data.id;
+        this.dataSource.data = data['hydra:member'];
-        this.repository = data
+        this.length = data['hydra:totalItems'];
-        this.search();
+        this.loading = false;
       },
       error => {
         console.error('Error fetching image repositories', error);
@@ -128,26 +130,11 @@ export class RepositoryImagesComponent implements OnInit {
     }
   }
 
-  search(): void {
-    this.loading = true;
-    this.http.get<any>(`${this.apiUrl}?page=${this.page +1 }&itemsPerPage=${this.itemsPerPage}&repository.id=${this.repositoryId}`, { params: this.filters }).subscribe(
-      data => {
-        this.dataSource.data = data['hydra:member'];
-        this.length = data['hydra:totalItems'];
-        this.loading = false;
-      },
-      error => {
-        console.error('Error fetching images', error);
-        this.loading = false;
-      }
-    );
-  }
-
   onPageChange(event: any): void {
     this.page = event.pageIndex;
     this.itemsPerPage = event.pageSize;
     this.length = event.length;
-    this.search();
+    this.loadData();
   }
 
   loadImageAlert(image: any): Observable<any> {
@@ -177,15 +164,16 @@ export class RepositoryImagesComponent implements OnInit {
   }
 
   importImage(): void {
+    console.log(this.data)
     this.dialog.open(ImportImageComponent, {
       width: '600px',
       data: {
-        repositoryUuid: this.repositoryUuid,
+        repositoryUuid: this.data.repositoryUuid,
-        name: this.repository.name
+        name: this.data.repositoryName
       }
     }).afterClosed().subscribe((result) => {
       if (result) {
-        this.search();
+        this.loadData();
       }
     });
   }
@@ -194,12 +182,12 @@ export class RepositoryImagesComponent implements OnInit {
     this.dialog.open(ConvertImageComponent, {
       width: '600px',
       data: {
-        repositoryUuid: this.repositoryUuid,
+        repositoryUuid: this.data.repositoryUuid,
-        name: this.repository.name
+        name: this.data.repositoryName
       }
     }).afterClosed().subscribe((result) => {
       if (result) {
-        this.search();
+        this.loadData();
       }
     });
   }
@@ -210,7 +198,7 @@ export class RepositoryImagesComponent implements OnInit {
         this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/create-aux-files`, {}).subscribe({
           next: (message) => {
             this.toastService.success('Petición de creación de archivos auxiliares enviada');
-            this.search()
+            this.loadData()
           },
           error: (error) => {
             this.toastService.error(error.error['hydra:description']);
@@ -228,7 +216,7 @@ export class RepositoryImagesComponent implements OnInit {
             this.http.delete(`${this.baseUrl}${image['@id']}`).subscribe({
               next: () => {
                 this.toastService.success('Image deleted successfully');
-                this.search()
+                this.loadData()
               },
               error: (error) => {
                 this.toastService.error('Error deleting image');
@@ -237,11 +225,11 @@ export class RepositoryImagesComponent implements OnInit {
           });
         } else {
           this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/delete-trash`,
-            { repository: `/image-repositories/${this.repositoryUuid}` })
+            { repository: `/image-repositories/${this.data.repositoryUuid}` })
             .subscribe({
               next: () => {
                 this.toastService.success('Petición de eliminación de la papelera temporal enviada');
-                this.search()
+                this.loadData()
               },
               error: (error) => {
                 this.toastService.error(error.error['hydra:description']);
@@ -259,7 +247,7 @@ export class RepositoryImagesComponent implements OnInit {
             this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/delete-permanent`, {}).subscribe({
               next: () => {
                 this.toastService.success('Petición de eliminación de la papelera temporal enviada');
-                this.search()
+                this.loadData()
               },
               error: (error) => {
                 this.toastService.error(error.error['hydra:description']);
@@ -268,11 +256,23 @@ export class RepositoryImagesComponent implements OnInit {
           }
         });
         break;
+      case 'edit':
+        this.dialog.open(EditImageComponent, {
+          width: '600px',
+          data: {
+            image: image,
+          }
+        }).afterClosed().subscribe((result) => {
+          if (result) {
+            this.loadData();
+          }
+        });
+        break;
       case 'recover':
         this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/recover`, {}).subscribe({
           next: () => {
             this.toastService.success('Petición de recuperación de la imagen enviada');
-            this.search()
+            this.loadData()
           },
           error: (error) => {
             this.toastService.error(error.error['hydra:description']);
@@ -283,7 +283,7 @@ export class RepositoryImagesComponent implements OnInit {
         this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/status`, {}).subscribe({
           next: (response: any) => {
             this.toastService.info(response?.output);
-            this.search()
+            this.loadData()
           },
           error: (error) => {
             this.toastService.error(error.error['hydra:description']);
@@ -336,11 +336,41 @@ export class RepositoryImagesComponent implements OnInit {
           }
         });
         break;
+      case 'convert-image-to-virtual':
+        this.http.get(`${this.baseUrl}${image.image['@id']}`).subscribe({
+          next: (response) => {
+            this.dialog.open(ConvertImageToVirtualComponent, {
+              width: '600px',
+              data: {
+                image: response,
+                imageImageRepository: image
+              }
+            });
+            this.router.navigate(['/commands-logs']);
+          },
+          error: (error) => {
+            this.toastService.error(error.error['hydra:description']);
+          }
+        });
+        break;
+      case 'rename':
+        this.dialog.open(RenameImageComponent, {
+          width: '600px',
+          data: {
+            imageImageRepository: image
+          }
+        }).afterClosed().subscribe((result) => {
+          if (result) {
+            this.loadData();
+          }
+        });
+        break;
       default:
         console.error('Acción no soportada:', action);
         break;
     }
   }
+
   iniciarTour(): void {
     this.joyrideService.startTour({
       steps: [
@@ -358,5 +388,42 @@ export class RepositoryImagesComponent implements OnInit {
     });
   }
 
+  loadAlert(): Observable<any> {
+    return this.http.post<any>(`${this.baseUrl}/image-repositories/server/${this.data.repositoryUuid}/get-collection`, {});
+  }
+
+  syncRepository() {
+    this.http.post(`${this.baseUrl}/image-repositories/server/${this.data.repositoryUuid}/sync`, {})
+      .subscribe(response => {
+        this.toastService.success('Sincronización completada');
+        this.loadData()
+      }, error => {
+        console.error('Error al sincronizar', error);
+        this.toastService.error('Error al sincronizar');
+      });
+  }
+
+  openImageInfoDialog() {
+    this.loadAlert().subscribe(
+      response => {
+        this.alertMessage = response.output;
+
+        this.dialog.open(ServerInfoDialogComponent, {
+          width: '800px',
+          data: {
+            message: this.alertMessage
+          }
+        });
+      },
+      error => {
+        console.error('Error al cargar la información del alert', error);
+      }
+    );
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
   protected readonly isDevMode = isDevMode;
 }

ogWebconsole/src/app/layout/header/header.component.css

@@ -1,6 +1,7 @@
 mat-toolbar {
   /*height: 7vh;*/
-  min-height: 60px;
+  min-height: 65px;
+  min-width: 375px;
   background-color: #3f51b5;
   color: white;
 }
@@ -45,3 +46,38 @@ mat-toolbar {
   background-color: #ced0df;
   cursor: not-allowed;
 }
+
+.hide-on-small {
+  display: none;
+}
+
+@media (min-width: 1500px) {
+  .hide-on-small {
+    display: inline;
+  }
+}
+
+@media (max-width: 576px) {
+  .navbar-actions-row {
+    display: none;
+  }
+
+  mat-toolbar {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .isSmallScreenButtons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .trace-button .mat-icon {
+    margin-right: 0px !important;
+  }
+
+  .smallScreenMenubutton {
+    margin-right: 2vh;
+  }
+}

ogWebconsole/src/app/layout/header/header.component.html

@@ -1,5 +1,6 @@
 <mat-toolbar>
-  <span class="navbar-title" matTooltip="Consola web de administración de Opengnsys" matTooltipShowDelay="1000">
+  <span class="navbar-title hide-on-small" matTooltip="Consola web de administración de Opengnsys"
+    matTooltipShowDelay="1000">
     Opengnsys webconsole
   </span>
 
@@ -8,12 +9,14 @@
     <mat-icon class="navbar-icon">menu</mat-icon>
   </button>
 
-  <div class="navbar-actions-row">
+  <div class="navbar-actions-row" *ngIf="!isSmallScreen">
-    <button class="trace-button" routerLink="/commands-logs" mat-button><mat-icon>notifications</mat-icon></button>
+    <button class="trace-button" routerLink="/commands-logs" mat-button>
+      <mat-icon>notifications</mat-icon>
+    </button>
 
     <div class="navbar-buttons-row">
       <button class="ordinary-button" (click)="showGlobalStatus()">
-        {{'GlobalStatus' | translate}}
+        {{ 'GlobalStatus' | translate }}
       </button>
 
       <button class="ordinary-button" *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu"
@@ -31,20 +34,43 @@
         {{ 'logout' | translate }}
       </button>
     </div>
+  </div>
 
-    <mat-menu #menu="matMenu">
+  <!-- Menú desplegable para pantallas pequeñas -->
-      <button mat-menu-item routerLink="/users" matTooltip="Ver y gestionar todos los usuarios"
+  <div *ngIf="isSmallScreen" class="isSmallScreenButtons">
-        matTooltipShowDelay="1000">
+    <button class="trace-button" routerLink="/commands-logs" mat-button>
-        {{ 'labelUsers' | translate }}
+      <mat-icon>notifications</mat-icon>
+    </button>
+    <button class="smallScreenMenubutton" mat-icon-button [matMenuTriggerFor]="smallScreenMenu" matTooltip="Opciones" matTooltipShowDelay="1000">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <mat-menu #smallScreenMenu="matMenu">
+      <button mat-menu-item (click)="showGlobalStatus()">
+        {{ 'GlobalStatus' | translate }}
       </button>
-      <button mat-menu-item routerLink="/user-groups" matTooltip="Gestionar roles de usuario"
+      <button mat-menu-item *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu">
-        matTooltipShowDelay="1000">
+        {{ 'Administration' | translate }}
-        {{ 'labelRoles' | translate }}
       </button>
-      <button mat-menu-item routerLink="/env-vars" matTooltip="Gestionar variables de entorno"
+      <button mat-menu-item *ngIf="!isSuperAdmin" (click)="editUser()">
-        matTooltipShowDelay="1000">
+        {{ 'changePassword' | translate }}
-        {{ 'labelEnvVars' | translate }}
       </button>
     </mat-menu>
+    <button class="logout-button" routerLink="/auth/login" matTooltip="Cerrar sesión y salir de la aplicación"
+      matTooltipShowDelay="1000">
+      {{ 'logout' | translate }}
+    </button>
   </div>
+
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item routerLink="/users" matTooltip="Ver y gestionar todos los usuarios"
+      matTooltipShowDelay="1000">
+      {{ 'labelUsers' | translate }}
+    </button>
+    <button mat-menu-item routerLink="/user-groups" matTooltip="Gestionar roles de usuario" matTooltipShowDelay="1000">
+      {{ 'labelRoles' | translate }}
+    </button>
+    <button mat-menu-item routerLink="/env-vars" matTooltip="Gestionar variables de entorno" matTooltipShowDelay="1000">
+      {{ 'labelEnvVars' | translate }}
+    </button>
+  </mat-menu>
 </mat-toolbar>

ogWebconsole/src/app/layout/header/header.component.ts

@@ -3,6 +3,7 @@ import { jwtDecode } from 'jwt-decode';
 import { ChangePasswordModalComponent } from '../../components/admin/users/users/change-password-modal/change-password-modal.component';
 import { MatDialog } from "@angular/material/dialog";
 import { GlobalStatusComponent } from 'src/app/components/global-status/global-status.component';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 @Component({
   selector: 'app-header',
@@ -12,6 +13,7 @@ import { GlobalStatusComponent } from 'src/app/components/global-status/global-s
 
 export class HeaderComponent implements OnInit {
   isSuperAdmin: boolean = false;
+  isSmallScreen: boolean = false;
 
   @Output() toggleSidebar = new EventEmitter<void>();
   private decodedToken: any;
@@ -21,7 +23,7 @@ export class HeaderComponent implements OnInit {
     this.toggleSidebar.emit();
   }
 
-  constructor(public dialog: MatDialog) { }
+  constructor(public dialog: MatDialog, private breakpointObserver: BreakpointObserver) { }
 
   ngOnInit(): void {
     const token = localStorage.getItem('loginToken');
@@ -35,6 +37,9 @@ export class HeaderComponent implements OnInit {
         console.error('Error decoding JWT:', error);
       }
     }
+    this.breakpointObserver.observe(['(max-width: 576px)']).subscribe((result) => {
+      this.isSmallScreen = result.matches;
+    })
   }
 
   ngDoCheck(): void {
@@ -52,8 +57,6 @@ export class HeaderComponent implements OnInit {
     this.dialog.open(GlobalStatusComponent, {
       width: '45vw',
       height: '80vh', 
-      // maxWidth: '60vw', 
-      // maxHeight: '60vh'
     })
   }
 }

ogWebconsole/src/app/layout/main-layout/main-layout.component.css

@@ -1,10 +1,10 @@
 .container {
   width: 100vw;
   height: calc(100vh - 7vh);
+  min-width: 375px;
 }
 
 .sidebar {
   width: 15vw;
   min-width: 250px;
-  z-index: auto !important;
 }

ogWebconsole/src/app/layout/main-layout/main-layout.component.html

@@ -1,8 +1,9 @@
 <app-header (toggleSidebar)="toggleSidebar()"></app-header>
 
 <mat-drawer-container class="container" autosize>
-  <mat-drawer class="sidebar" mode="side" [opened]="isSidebarVisible">
+  <mat-drawer class="sidebar" [mode]="sidebarMode" [opened]="isSidebarVisible" (close)="isSidebarVisible = false">
-    <app-sidebar></app-sidebar>
+    <app-sidebar [isVisible]="isSidebarVisible" [sidebarMode]="sidebarMode" (closeSidebar)="isSidebarVisible = false">
+    </app-sidebar>
   </mat-drawer>
 
   <mat-drawer-content class="content">

ogWebconsole/src/app/layout/main-layout/main-layout.component.ts

@@ -1,12 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 @Component({
   selector: 'app-main-layout',
   templateUrl: './main-layout.component.html',
   styleUrls: ['./main-layout.component.css'],
 })
-export class MainLayoutComponent {
+export class MainLayoutComponent implements OnInit {
   isSidebarVisible: boolean = true;
+  sidebarMode: 'side' | 'over' = 'side';
+
+  constructor(private breakpointObserver: BreakpointObserver) { }
+
+  ngOnInit(): void {
+    this.breakpointObserver.observe(['(max-width: 1500px)']).subscribe((result) => {
+      if (result.matches) {
+        this.sidebarMode = 'over';
+        this.isSidebarVisible = false;
+      } else {
+        this.sidebarMode = 'side';
+        this.isSidebarVisible = true;
+      }
+    });
+  }
 
   toggleSidebar() {
     this.isSidebarVisible = !this.isSidebarVisible;

ogWebconsole/src/app/layout/sidebar/sidebar.component.html

@@ -7,14 +7,16 @@
 
   <mat-divider></mat-divider>
 
-  <mat-list-item routerLink="/groups" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/groups" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">apartment</mat-icon>
       <span>{{ 'groups' | translate }}</span>
     </span>
   </mat-list-item>
 
-  <mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">playlist_play</mat-icon>
       <span>{{ 'actions' | translate }}</span>
@@ -23,19 +25,22 @@
 
   <!-- Submenu items for commands -->
   <mat-nav-list *ngIf="showCommandSub" style="padding-left: 20px;">
-    <mat-list-item routerLink="/commands" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/commands" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">chevron_right</mat-icon>
         <span>{{ 'commands' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/commands-groups" matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/commands-groups" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">chevron_right</mat-icon>
         <span>{{ 'commandGroups' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/commands-task" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/commands-task" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">chevron_right</mat-icon>
         <span>{{ 'tasks' | translate }}</span>
@@ -43,14 +48,16 @@
     </mat-list-item>
   </mat-nav-list>
 
-  <mat-list-item routerLink="/subnets" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/subnets" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">lan</mat-icon>
       <span> {{ 'subnets' | translate }}</span>
     </span>
   </mat-list-item>
 
-  <mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">desktop_windows</mat-icon>
       <span>{{ 'boot' | translate }}</span>
@@ -59,19 +66,22 @@
 
   <!-- Submenu items for Boot -->
   <mat-nav-list *ngIf="showOgBootSub" style="padding-left: 20px;">
-    <mat-list-item routerLink="/pxe-images" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/pxe-images" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">album</mat-icon>
         <span>{{ 'ogLive' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/pxe" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/pxe" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">assignment</mat-icon>
         <span>{{ 'pxeTemplates' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/pxe-boot-file" matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/pxe-boot-file" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">save</mat-icon>
         <span>{{ 'pxeBootFiles' | translate }}</span>
@@ -79,14 +89,16 @@
     </mat-list-item>
   </mat-nav-list>
 
-  <mat-list-item routerLink="/calendars" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/calendars" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">calendar_month</mat-icon>
       <span>{{ 'calendars' | translate }}</span>
     </span>
   </mat-list-item>
 
-  <mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">terminal</mat-icon>
       <span>{{ 'software' | translate }}</span>
@@ -95,19 +107,22 @@
 
   <!-- Submenu items for Software -->
   <mat-nav-list *ngIf="showSoftwareSub" style="padding-left: 20px;">
-    <mat-list-item routerLink="/software" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/software" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">list</mat-icon>
         <span>{{ 'softwareList' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/software-profiles" matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/software-profiles" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">folder_shared</mat-icon>
         <span>{{ 'softwareProfiles' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/operative-systems" matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/operative-systems" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">terminal</mat-icon>
         <span>{{ 'operativeSystems' | translate }}</span>
@@ -115,14 +130,16 @@
     </mat-list-item>
   </mat-nav-list>
 
-  <mat-list-item routerLink="/repositories" matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/repositories" (click)="onItemClick()"
+    matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">warehouse</mat-icon>
       <span>{{ 'repositories' | translate }}</span>
     </span>
   </mat-list-item>
 
-  <mat-list-item routerLink="/menus" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/menus" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">list</mat-icon>
       <span>{{ 'menus' | translate }}</span>

ogWebconsole/src/app/layout/sidebar/sidebar.component.ts

@@ -1,6 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { jwtDecode } from 'jwt-decode';
 import { MatDialog } from '@angular/material/dialog';
+
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
@@ -8,6 +9,9 @@ import { MatDialog } from '@angular/material/dialog';
 })
 export class SidebarComponent {
   @Input() isVisible: boolean = false;
+  @Input() sidebarMode: 'side' | 'over' = 'side';
+  @Output() closeSidebar: EventEmitter<void> = new EventEmitter<void>();
+
   isSuperAdmin: boolean = false;
   username: string = "";
   decodedToken: any = "";
@@ -29,6 +33,12 @@ export class SidebarComponent {
     this.showSoftwareSub = !this.showSoftwareSub;
   }
 
+  onItemClick() {
+    if (this.isVisible && this.sidebarMode === 'over') {
+      this.closeSidebar.emit();
+    }
+  }
+
   constructor(public dialog: MatDialog) {}
 
   ngOnInit(): void {

ogWebconsole/src/assets/images/close-delete-remove-trash-cancel-cross-svgrepo-com.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" ?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
<style type="text/css">
+	.st0{opacity:0.2;fill:none;stroke:#000000;stroke-width:5.000000e-02;stroke-miterlimit:10;}
+</style>
+
<g id="grid_system"/>
+
<g id="_icons">
+
<path d="M8.3,15.7C8.5,15.9,8.7,16,9,16s0.5-0.1,0.7-0.3l2.3-2.3l2.3,2.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3   c0.4-0.4,0.4-1,0-1.4L13.4,12l2.3-2.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L12,10.6L9.7,8.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4   l2.3,2.3l-2.3,2.3C7.9,14.7,7.9,15.3,8.3,15.7z"/>
+
<path d="M12,21c5,0,9-4,9-9s-4-9-9-9s-9,4-9,9S7,21,12,21z M12,5c3.9,0,7,3.1,7,7s-3.1,7-7,7s-7-3.1-7-7S8.1,5,12,5z"/>
+
</g>
+
</svg>

ogWebconsole/src/assets/images/computer_busy.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+  <path fill="#EA3323" d="M160-760h640v440H160Z"/>
+</svg>

ogWebconsole/src/assets/images/computer_disconnected.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px">
+  <path fill="#666666" d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Z"/>
+  <path fill="#FF0000" d="M160-100l-80-80 320-320-320-320 80-80 320 320 320-320 80 80-320 320 320 320-80 80-320-320-320 320Z"/>
+</svg>

ogWebconsole/src/assets/images/computer_initializing.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666">
+  <path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+  <path fill="#75FBFD" d="M160-760h640v440H160Z"/>
+</svg>

ogWebconsole/src/assets/images/computer_linux-session.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px">
+  <path fill="#666666" d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+  <path fill="#EA33F7" d="M160-760h640v440H160Z"/>
+  <rect x="250" y="-670" width="460" height="220" fill="#ffffff" stroke="#000000" stroke-width="4" rx="10" ry="10"/>
+</svg>

ogWebconsole/src/assets/images/computer_linux.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+  <path fill="#EA33F7" d="M160-760h640v440H160Z"/>
+</svg>

ogWebconsole/src/assets/images/computer_macos.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+  <path fill="#F19E39" d="M160-760h640v440H160Z"/>
+</svg>

ogWebconsole/src/assets/images/computer_off.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+</svg>

ogWebconsole/src/assets/images/computer_og-live.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+  <path fill="#FFFF55" d="M160-760h640v440H160Z"/>
+</svg>

ogWebconsole/src/assets/images/computer_turning-off.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+</svg>

ogWebconsole/src/assets/images/computer_windows-session.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px">
+  <path fill="#666666" d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+  <path fill="#0000F5" d="M160-760h640v440H160Z"/>
+  <rect x="250" y="-670" width="460" height="220" fill="#ffffff" stroke="#000000" stroke-width="4" rx="10" ry="10"/>
+</svg>

ogWebconsole/src/assets/images/computer_windows.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
+  <path fill="#0000F5" d="M160-760h640v440H160Z"/>
+</svg>

ogWebconsole/src/locale/en.json

@@ -40,6 +40,8 @@
   "labelRoleName": "Name",
   "sectionTitlePermissions": "Permissions:",
   "checkboxSuperAdmin": "Super Admin",
+  "parameters": "Parameters",
+  "runScripts": "Run scripts",
   "checkboxOrgAdmin": "Organizational Unit Admin",
   "checkboxOrgOperator": "Organizational Unit Operator",
   "checkboxOrgMinimal": "Minimal Organizational Unit",
@@ -478,5 +480,6 @@
   "CpuUsage": "CPU Usage",
   "processes": "Processes",
   "usedPercentageLabel": "Used",
-  "errorLoadingData": "Error fetching data. Service not available"
+  "errorLoadingData": "Error fetching data. Service not available",
+  "repositoryTitleStep": "On this screen you can manage image repositories."
 }

ogWebconsole/src/locale/es.json

@@ -38,7 +38,9 @@
   "rulesHeader": "Reglas",
   "statusUnavailable": "No disponible",
   "statusAvailable": "Disponible",
+  "parameters": "Parámetros",
   "labelRoleName": "Nombre",
+  "runScript": "Ejecutar comando",
   "sectionTitlePermissions": "Permisos:",
   "checkboxSuperAdmin": "Super Admin",
   "checkboxOrgAdmin": "Admin de Unidad Organizativa",
@@ -480,6 +482,6 @@
   "CpuUsage": "Uso de CPU",
   "processes": "Procesos",
   "usedPercentageLabel": "Usado",
-  "errorLoadingData": "Error al cargar los datos. Servicio inactivo"
+  "errorLoadingData": "Error al cargar los datos. Servicio inactivo",
-
+  "repositoryTitleStep": "En esta pantalla se pueden gestionar los repositorios de imágenes."
 }