refs #1793. Updted assistants UX

Reviewed-on: #18

Jenkins/Jenkinsfile-deb-pkg

@@ -70,6 +70,7 @@ pipeline {
             agent { label 'debian-repo' }
             steps {
                 sh "aptly repo add opengnsys-devel /var/tmp/opengnsys/debian-repo/oggui/*.deb"
+                sh "rm -f /var/tmp/opengnsys/debian-repo/oggui/*.deb"
             }
         }
     }

debian/control

@@ -8,6 +8,6 @@ Standards-Version: 4.5.0
 Package: oggui
 Architecture: any
 Maintainer: Nicolas Arenas <nicolas.arenas@qindel.com> 
-Depends: ${shlibs:Depends}, ${misc:Depends}, nginx, nodejs, npm
+Depends: ${shlibs:Depends}, ${misc:Depends}, nginx
 Description: OpenGnsys GUI
  Una interfaz gráfica para OpenGnsys.

debian/oggui.config

@@ -7,5 +7,4 @@ set -e
 db_input high opengnsys/oggui_ogcoreUrl || true
 db_input high opengnsys/oggui_ogmercureUrl || true
 
-
 db_go

debian/oggui.install

@@ -1,9 +1,4 @@
-ogWebconsole/dist/oggui/browser /opt/opengnsys/oggui/browser/
+ogWebconsole/dist/oggui/browser /opt/opengnsys/oggui/
 etc /opt/opengnsys/oggui/
-bin /opt/opengnsys/oggui/
-var /opt/opengnsys/oggui/
-ogWebconsole/*.json   /opt/opengnsys/oggui/src/
-ogWebconsole/*.js    /opt/opengnsys/oggui/src/
-ogWebconsole/src  /opt/opengnsys/oggui/src/
 ogWebconsole/ssl/* /opt/opengnsys/oggui/etc/nginx/certs/
 

debian/oggui.postinst

@@ -1,6 +1,7 @@
 #!/bin/bash
 
 set -e
+set -x
 
 . /usr/share/debconf/confmodule
 
@@ -12,39 +13,26 @@ OGMERCURE_URL="$RET"
 # Asegurarse de que el usuario exista
 USER="opengnsys"
 HASH_FILE="/opt/opengnsys/oggui/var/lib/oggui/oggui.config.hash"
-CONFIG_FILE="/opt/opengnsys/oggui/src/.env"
+CONFIG_FILE="/opt/opengnsys/oggui/browser/assets/config.json"
 
 # Detectar si es una instalación nueva o una actualización
 if [ "$1" = "configure" ] && [ -z "$2" ]; then
-    cd /opt/opengnsys/oggui/src/
-    echo NG_APP_BASE_API_URL=$OGCORE_URL > "$CONFIG_FILE"
-    echo NG_APP_OGCORE_MERCURE_BASE_URL=$OGMERCURE_URL >> "$CONFIG_FILE"
-    npm install -g @angular/cli
-    npm install
-    /usr/local/bin/ng build --base-href=/ --output-path=dist/oggui --optimization=true --configuration=production --localize=false 
-    cp -pr /opt/opengnsys/oggui/src/dist/oggui/browser /opt/opengnsys/oggui/
-    md5sum "$CONFIG_FILE" > "$HASH_FILE"
+    jq --arg apiUrl "$OGCORE_URL" --arg mercureUrl "$OGMERCURE_URL" \
+  '.apiUrl = $apiUrl | .mercureUrl = $mercureUrl' "$CONFIG_FILE" > "${CONFIG_FILE}.tmp" && mv "${CONFIG_FILE}.tmp" "$CONFIG_FILE"
     ln -s /opt/opengnsys/oggui/etc/systemd/system/oggui.service /etc/systemd/system/oggui.service
     ln -s /opt/opengnsys/oggui/etc/nginx/oggui.conf /etc/nginx/sites-enabled/oggui.conf
+    ln -s $CONFIG_FILE /opt/opengnsys/oggui/etc/config.json
     mkdir -p /etc/nginx/certs/ 
     cp -p /opt/opengnsys/oggui/etc/nginx/certs/* /etc/nginx/certs/
     chown -R www-data:www-data /etc/nginx/certs
     systemctl daemon-reload
-    systemctl enable oggui
-    # systemctl restart nombre_del_s
-    systemctl daemon-reload
     systemctl restart nginx
 elif [ "$1" = "configure" ] && [ -n "$2" ]; then
     cd /opt/opengnsys/oggui
     echo "Actualización desde la versión $2"
-    /usr/local/bin/ng build --base-href=/ --output-path=dist/oggui --optimization=true --configuration=production --localize=false 
-    rm -rf /opt/opengnsys/oggui/browser
-    cp -pr /opt/opengnsys/oggui/src/dist/oggui/browser /opt/opengnsys/oggui/
-    md5sum "$CONFIG_FILE" > "$HASH_FILE"
 fi
 
 # Cambiar la propiedad de los archivos al usuario especificado
 chown opengnsys:www-data /opt/opengnsys/
 chown -R opengnsys:www-data /opt/opengnsys/oggui 
-chmod 755 /opt/opengnsys/oggui/bin/start-oggui.sh
 exit 0

debian/rules

@@ -5,16 +5,7 @@
 
 override_dh_auto_build:
 	cd ogWebconsole && npm install
-	cd ogWebconsole && /usr/local/bin/ng build --base-href=/ --output-path=dist/oggui --optimization=true --configuration=production --localize=false
+	cd ogWebconsole && npx ng build --base-href=/ --output-path=dist/oggui --optimization=true --configuration=production
 
 override_dh_auto_install:
 	dh_auto_install
-	mkdir -p debian/oggui/opt/opengnsys/oggui/browser
-	mkdir -p debian/oggui/opt/opengnsys/oggui/src/
-	cp -pr ogWebconsole/dist/oggui/browser/* debian/oggui/opt/opengnsys/oggui/browser/
-	rm -rf debian/oggui/opt/opengnsys/oggui/browser/node_modules
-	cp -pr etc debian/oggui/opt/opengnsys/oggui/
-	cp -pr bin debian/oggui/opt/opengnsys/oggui/
-	cp -pr var debian/oggui/opt/opengnsys/oggui/
-	cp -p ogWebconsole/.env debian/oggui/opt/opengnsys/oggui/src/
-	md5sum debian/oggui/opt/opengnsys/oggui/src/.env > debian/oggui/opt/opengnsys/oggui/var/lib/oggui/oggui.config.hash

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

@@ -137,6 +137,7 @@ import { GlobalStatusComponent } from './components/global-status/global-status.
 import { ShowImagesComponent } from './components/repositories/show-images/show-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';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './locale/', '.json');
@@ -233,7 +234,8 @@ registerLocaleData(localeEs, 'es-ES');
     GlobalStatusComponent,
     ShowImagesComponent,
     StatusTabComponent,
-    ConvertImageToVirtualComponent
+    ConvertImageToVirtualComponent,
+    RunScriptAssistantComponent
   ],
   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

@@ -57,4 +57,15 @@
   justify-content: flex-end;
   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,8 +11,9 @@
 </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>
-</mat-menu>
+</mat-menu>

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

@@ -22,14 +22,14 @@ export class ExecuteCommandComponent implements OnInit {
     { name: 'Enceder', slug: 'power-on', disabled: false },
     { name: 'Apagar', slug: 'power-off', disabled: false },
     { name: 'Reiniciar', slug: 'reboot', disabled: false },
-    { name: 'Iniciar Sesión', slug: 'login', disabled: true },
+    { name: 'Iniciar Sesión', slug: 'login', disabled: false },
     { name: 'Crear imagen', slug: 'create-image', disabled: false },
     { name: 'Clonar/desplegar imagen', slug: 'deploy-image', disabled: false },
     { name: 'Eliminar Imagen Cache', slug: 'delete-image-cache', disabled: true },
     { 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 script', 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/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 {
@@ -148,9 +144,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 +229,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 +263,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 +283,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 +299,11 @@ table.mat-elevation-z8 {
 }
 
 .charts-container {
-  flex: 1;
+  flex: 2;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center; /* Centra los gráficos */
-  gap: 20px;
+  flex-direction: column;
+  align-items: center;
+  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/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: 0 5px;
+  padding: 20px;
   box-sizing: border-box;
-  padding-left: 1em;
 }
 
 .input-group {
@@ -107,6 +106,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 {
@@ -137,3 +157,24 @@ 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;
+}

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

@@ -7,7 +7,7 @@
     </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>
@@ -19,22 +19,43 @@
       <mat-panel-description> Listado de clientes donde se desplegará la imagen </mat-panel-description>
     </mat-expansion-panel-header>
 
-      <div class="clients-grid" >
-        <div *ngFor="let client of clientData" class="client-item">
-          <div class="client-card">
-            <img
-              [src]="'assets/images/ordenador_' + client.status + '.png'"
-              alt="Client Icon"
-              class="client-image" />
+    <div class="clients-grid">
+      <div class="button-row">
+        <button class="action-button" (click)="toggleSelectAll()">
+          {{ allSelected ? 'Desmarcar' : 'Marcar' }}
+        </button>
+      </div>
+      <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">
 
-            <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>
+          <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-radio-group [(ngModel)]="selectedModelClient" (change)="loadPartitions(selectedModelClient)">
+            <mat-radio-button [value]="client"
+                              color="primary"
+                              [disabled]="!client.selected"
+                              (click)="$event.stopPropagation()">
+              Particiones
+            </mat-radio-button>
+          </mat-radio-group>
         </div>
       </div>
+    </div>
+
   </mat-expansion-panel>
 </div>
 
@@ -52,89 +73,97 @@
 
     <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-select>
     </mat-form-field>
   </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 *ngIf="errorMessage" class="error-message">
+    {{ errorMessage }}
   </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>
+  <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>
 
-    <mat-form-field appearance="fill" class="input-field">
-      <mat-label>Semilla</mat-label>
-      <input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number">
-    </mat-form-field>
+      <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>
 
+

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,6 +45,11 @@ export class DeployImageComponent {
     { name: 'Full duplex', value: "full" },
   ];
 
+  selectedClients: any[] = [];
+  selectedModelClient: any = null;
+  filteredPartitions: any[] = [];
+  selectedRepository: any = null;
+
   allMethods = [
     'uftp',
     'udpcast',
@@ -92,55 +96,106 @@ 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.clientData = navigation?.extras?.state?.['clientData'];
-    this.clientId = this.clientData?.[0]['@id'];
-    this.loadImages();
-    this.loadPartitions()
+    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.selectedModelClient = this.clientData[0];
+    if (this.selectedModelClient) {
+      this.loadPartitions(this.selectedModelClient);
+    }
   }
 
   isMethod(method: string): boolean {
     return this.selectedMethod === method;
   }
 
-  loadPartitions() {
-    const url = `${this.baseUrl}${this.clientId}`;
-    this.http.get(url).subscribe(
-      (response: any) => {
-        if (response.partitions) {
-          this.client = response;
-          this.clientName = response.name;
-          this.dataSource.data = response.partitions.filter((partition: any) => {
-            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);
-      }
+  toggleClientSelection(client: any) {
+    client.selected = !client.selected;
+    this.updateSelectedClients();
+  }
+
+  updateSelectedClients() {
+    this.selectedClients = this.clientData.filter(
+      (client: { selected: boolean; state: string }) => client.selected && client.state === "og-live"
     );
+
+    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
+
+          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]) {
-      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;
+    const repositoryId = this.selectedRepository?.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 +211,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 +253,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 +276,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 +287,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;
-  background-color: #f9f9f9;
-  padding: 20px;
-  margin: 20px auto;
+  padding: 40px;
+  margin: 20px;
+  background-color: #eaeff6;
+  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,16 +152,6 @@ 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;
 }
@@ -216,9 +180,57 @@ 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;
+}
+
+
+
 

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

@@ -7,7 +7,7 @@
     </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>
 
@@ -19,15 +19,38 @@
     </mat-expansion-panel-header>
 
     <div class="clients-grid">
+      <div class="button-row">
+        <button class="action-button" (click)="toggleSelectAll()">
+          {{ allSelected ? 'Desmarcar' : 'Marcar' }}
+        </button>
+      </div>
       <div *ngFor="let client of clientData" class="client-item">
-        <div class="client-card">
-          <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon" class="client-image" />
+        <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>
+          <mat-radio-group [(ngModel)]="selectedModelClient" (change)="loadPartitions(selectedModelClient)">
+            <mat-radio-button [value]="client"
+                              color="primary"
+                              [disabled]="!client.selected"
+                              (click)="$event.stopPropagation()">
+              Particiones
+            </mat-radio-button>
+          </mat-radio-group>
+
         </div>
       </div>
     </div>
@@ -49,15 +72,11 @@
   </div>
 
   <div class="partition-assistant" *ngIf="selectedDisk">
-    <div class="partition-bar">
-      <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">
+    <div class="row-button">
       <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 +138,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,31 @@ export class PartitionAssistantComponent {
   ) {
     this.baseUrl = this.configService.apiUrl;
     this.apiUrl = this.baseUrl + '/partitions';
-    const navigation = this.router.getCurrentNavigation();
-    this.clientData = navigation?.extras?.state?.['clientData'];
-    this.clientId = this.clientData[0]['@id'];
-    this.loadPartitions();
-
+    this.route.queryParams.subscribe(params => {
+      if (params['clientData']) {
+        this.clientData = JSON.parse(params['clientData']);
+      }
+    });
+    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];
+    this.selectedModelClient = this.clientData[0];
+    this.loadPartitions(this.selectedModelClient);
   }
 
   get selectedDisk():any {
     return this.disks.find(disk => disk.diskNumber === this.selectedDiskNumber) || null;
   }
 
-  loadPartitions() {
-    const url = `${this.baseUrl}${this.clientId}`;
+  loadPartitions(client: any) {
+    if (!client.selected) {
+      this.selectedModelClient = null;
+    }
+    const url = `${this.baseUrl}${client.uuid}`;
     this.http.get(url).subscribe(
       (response) => {
         this.data = response;
@@ -81,7 +94,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 +160,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,6 +192,25 @@ 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);
 
@@ -237,28 +270,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 +281,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 +290,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 +309,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 +319,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,214 @@
+
+.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;
+}
+
+.full-width {
+  width: 100%;
+  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 {
+  display: block;
+  font-size: 1.2em;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 5px;
+}
+
+.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;
+}

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

@@ -0,0 +1,80 @@
+<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]="!selectedScript" (click)="save()">Ejecutar</button>
+  </div>
+</div>
+<mat-divider></mat-divider>
+
+<div class="select-container">
+  <mat-expansion-panel hideToggle>
+    <mat-expansion-panel-header>
+      <mat-panel-title> Clientes </mat-panel-title>
+      <mat-panel-description> Listado de clientes donde se ejectutará el script </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <div class="clients-grid">
+      <div class="button-row">
+        <button class="action-button" (click)="toggleSelectAll()">
+          {{ allSelected ? 'Desmarcar' : 'Marcar' }}
+        </button>
+      </div>
+      <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="deploy-container">
+    <mat-form-field appearance="fill" class="full-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" class="script-container">
+    <div *ngIf="selectedScript" class="script-content">
+      <h3> Script:</h3>
+        <div class="script-preview" [innerHTML]="scriptContent"></div>
+    </div>
+
+    <div class="script-params" *ngIf="parameters.length > 0">
+      <h3>Ingrese los valores de los parámetros:</h3>
+      <div *ngFor="let param of parameters; let i = index">
+        <mat-form-field appearance="fill" class="full-width">
+          <mat-label>Parámetro {{ i + 1 }}</mat-label>
+          <input matInput [(ngModel)]="parameters[i]" (input)="updateScript()" 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,81 @@
+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";
+
+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: [DeployImageComponent, LoadingComponent],
+      imports: [
+        ReactiveFormsModule,
+        FormsModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatCheckboxModule,
+        MatExpansionModule,
+        MatButtonModule,
+        MatTableModule,
+        MatDividerModule,
+        MatRadioModule,
+        MatSelectModule,
+        BrowserAnimationsModule,
+        ToastrModule.forRoot(),
+        TranslateModule.forRoot()
+      ],
+      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,135 @@
+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";
+
+@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: string[] = [];
+  selectedScript: any = null;
+  selectedClients: any[] = [];
+  allSelected: boolean = true;
+  selection = new SelectionModel(true, []);
+
+  constructor(
+    private http: HttpClient,
+    private toastService: ToastrService,
+    private configService: ConfigService,
+    private router: Router,
+    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;
+    });
+  }
+
+  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(/@\d+/g) || [];
+      this.parameters = new Array(matches.length).fill("");
+    }
+  }
+
+  updateScript() {
+    let updatedScript = this.selectedScript.script;
+
+    this.parameters.forEach((value, index) => {
+      updatedScript = updatedScript.replace(new RegExp(`@${index + 1}`, "g"), value || `@${index + 1}`);
+    });
+
+    this.scriptContent = updatedScript;
+  }
+
+  save(): void {
+    this.loading = true;
+
+    this.http.post(`${this.baseUrl}/commands/run-script`, {
+      clients: this.selectedClients.map((client: any) => client.uuid),
+      script: this.scriptContent
+    }).subscribe(
+      response => {
+        this.toastService.success('Script ejecutado correctamente');
+        this.dataChange.emit();
+      },
+      error => {
+        this.toastService.error('Error al ejecutar el script');
+      }
+    );
+
+    this.loading = false;
+  }
+}

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

@@ -98,7 +98,7 @@
         <div class="tree-container">
           <mat-tree [dataSource]="treeDataSource" [treeControl]="treeControl">
             <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id}"
-              *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick(node)">
+              *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick($event, node)">
               <button mat-icon-button matTreeNodeToggle [disabled]="!node.expandable"
                 [ngClass]="{'disabled-toggle': !node.expandable}">
                 <mat-icon>{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>
@@ -114,12 +114,12 @@
                 }}
               </mat-icon>
               <span>{{ node.name }}</span>
-              <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onNodeClick(node)">
+              <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)">
                 <mat-icon>more_vert</mat-icon>
               </button>
             </mat-tree-node>
             <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id}"
-              *matTreeNodeDef="let node; when: isLeafNode" matTreeNodePadding (click)="onNodeClick(node)">
+              *matTreeNodeDef="let node; when: isLeafNode" matTreeNodePadding (click)="onNodeClick($event, node)">
               <button mat-icon-button matTreeNodeToggle [disabled]="true" class="disabled-toggle"></button>
               <mat-icon style="color: green;">
                 {{
@@ -135,7 +135,7 @@
               <ng-container *ngIf="node.type === 'client'">
                 <span> - IP: {{ node.ip }}</span>
               </ng-container>
-              <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onNodeClick(node)">
+              <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)">
                 <mat-icon>more_vert</mat-icon>
               </button>
             </mat-tree-node>
@@ -228,7 +228,7 @@
                       <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
                         [checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
                       </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'" alt="Client Icon"
                         class="client-image" />
 
                       <div class="client-details">
@@ -304,7 +304,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>
@@ -404,4 +404,4 @@
 
     </div>
   </ng-template>
-</div>
+</div>

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

@@ -117,13 +117,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: [] };
@@ -135,4 +135,4 @@ describe('GroupsComponent', () => {
             { params: jasmine.any(Object) }
         );
     });
-})
+})

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

@@ -196,6 +196,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     hasClients: node.hasClients,
     ip: node.ip,
     '@id': node['@id'],
+    networkSettings: node.networkSettings,
   });
 
 
@@ -350,11 +351,16 @@ export class GroupsComponent implements OnInit, OnDestroy {
   }
 
 
-  onNodeClick(node: TreeNode): void {
+  onNodeClick(event: MouseEvent, node: TreeNode): void {
+    event.stopPropagation();
     this.selectedNode = node;
     this.fetchClientsForNode(node);
   }
 
+  onMenuClick(event: Event, node: any): void {
+    event.stopPropagation();
+  }
+
 
   public fetchClientsForNode(node: any, selectedClientsBeforeEdit: string[] = []): void {
     const params = new HttpParams({ fromObject: this.filters });

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

@@ -71,6 +71,7 @@ export interface TreeNode {
   hasClients?: boolean;
   clients?: Client[];
   ip?: string;
+  networkSettings?: Object;
 }
 
 export interface FlatNode {
@@ -80,6 +81,7 @@ export interface FlatNode {
   level: number;
   expandable: boolean;
   hasClients?: boolean;
+  networkSettings?: Object;
   ip?: string;
   '@id'?: string;
 }

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

@@ -84,7 +84,7 @@ export class ManageClientComponent implements OnInit {
       serialNumber: [''],
       netiface: null,
       netDriver: null,
-      mac: ['', Validators.required],
+      mac: ['', Validators.pattern(/^([0-9A-Fa-f]{2}:){5}[0-9A-Fa-f]{2}$/)],
       ip: ['', Validators.required],
       template: [null],
       hardwareProfile: [null],

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

@@ -20,7 +20,7 @@
             </mat-form-field>
             <mat-form-field class="form-field" appearance="fill">
                 <mat-label>Padre</mat-label>
-                <mat-select formControlName="parent">
+                <mat-select formControlName="parent" (selectionChange)="onParentChange($event)">
                     <mat-select-trigger>
                         {{ getSelectedParentName() }}
                     </mat-select-trigger>

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],
@@ -128,8 +128,28 @@ export class ManageOrganizationalUnitComponent implements OnInit {
         this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
           id: unit['@id'],
           name: unit.name,
-          path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits)
+          path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits),
+          repository: unit.networkSettings?.repository?.['@id'],
+          hardwareProfile: unit.networkSettings?.hardwareProfile?.['@id'],
+          ogLive: unit.networkSettings?.ogLive?.['@id'],
+          menu: unit.networkSettings?.menu?.['@id'],
+          mcastIp: unit.networkSettings?.mcastIp,
+          mcastSpeed: unit.networkSettings?.mcastSpeed,
+          mcastPort: unit.networkSettings?.mcastPort,
+          mcastMode: unit.networkSettings?.mcastMode,
+          netiface: unit.networkSettings?.netiface,
+          p2pMode: unit.networkSettings?.p2pMode,
+          p2pTime: unit.networkSettings?.p2pTime,
+          dns: unit.networkSettings?.dns,
+          netmask: unit.networkSettings?.netmask,
+          router: unit.networkSettings?.router,
+          ntp: unit.networkSettings?.ntp
         }));
+
+        const initialUnitId = this.generalFormGroup.get('parent')?.value;
+        if (initialUnitId) {
+          this.setOrganizationalUnitDefaults(initialUnitId);
+        }
         this.loading = false;
       },
       error => {
@@ -139,6 +159,33 @@ export class ManageOrganizationalUnitComponent implements OnInit {
     );
   }
 
+  onParentChange(event: any): void {
+    this.setOrganizationalUnitDefaults(event.value);
+  }
+
+  setOrganizationalUnitDefaults(unitId: string): void {
+    const selectedUnit: any = this.parentUnitsWithPaths.find(unit => unit.id === unitId);
+    if (selectedUnit) {
+      this.networkSettingsFormGroup.patchValue({
+        repository: selectedUnit.repository || null,
+        hardwareProfile: selectedUnit.hardwareProfile || null,
+        ogLive: selectedUnit.ogLive || null,
+        menu: selectedUnit.menu || null,
+        mcastIp: selectedUnit.mcastIp || null,
+        mcastSpeed: selectedUnit.mcastSpeed || null,
+        mcastPort: selectedUnit.mcastPort || null,
+        mcastMode: selectedUnit.mcastMode || null,
+        netiface: selectedUnit.netiface || null,
+        p2pMode: selectedUnit.p2pMode || null,
+        p2pTime: selectedUnit.p2pTime || null,
+        dns: selectedUnit.dns || null,
+        netmask: selectedUnit.netmask || null,
+        router: selectedUnit.router || null,
+        ntp: selectedUnit.ntp || null
+      });
+    }
+  }
+
   getSelectedParentName(): string | undefined {
     const parentId = this.generalFormGroup.get('parent')?.value;
     return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;

ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.css

@@ -2,6 +2,12 @@
   width: 100%;
 }
 
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+  padding: 40px;
+}
+
 .spacing-container {
   margin-top: 20px;
   margin-bottom: 16px;

ogWebconsole/src/app/components/ogdhcp/create-subnet/create-subnet.component.html

@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} subred</h2>
 
-<mat-dialog-content>
+<mat-dialog-content class="dialog-content">
   <form [formGroup]="subnetForm">
     <div class="spacing-container">
       <mat-form-field appearance="fill" class="full-width">

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/manage-repository/manage-repository.component.css

@@ -1,6 +1,7 @@
 .dialog-content {
   display: flex;
   flex-direction: column;
+  padding: 40px;
 }
 
 .repository-form {
@@ -36,4 +37,4 @@
     margin-left: 0;
     margin-bottom: 8px;
   }
-}
+}

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_initializing.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="#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",

ogWebconsole/src/locale/es.json

@@ -38,7 +38,9 @@
   "rulesHeader": "Reglas",
   "statusUnavailable": "No disponible",
   "statusAvailable": "Disponible",
+  "parameters": "Parámetros",
   "labelRoleName": "Nombre",
+  "runScript": "Ejecutar script",
   "sectionTitlePermissions": "Permisos:",
   "checkboxSuperAdmin": "Super Admin",
   "checkboxOrgAdmin": "Admin de Unidad Organizativa",