Improvements in client view

ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css

@@ -194,6 +194,17 @@ button {
   margin-bottom: 10px;
 }
 
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.button-group button {
+  flex-grow: 1;
+}
+
 .red-card {
   background-color: #f35f53;
   color: white;

ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html

@@ -106,12 +106,19 @@
 
       </ng-container>
 
-      <button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton">Guardar
-        Filtros</button>
-      <button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton"
-        [disabled]="selectedElements.length === 0">Enviar Acción</button>
-      <button mat-flat-button color="primary" [disabled]="selectedElements.length === 0"
-        (click)="onPxeBootFile()">Añadir fichero PXE</button>
+      <div class="button-group">
+        <button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton" joyrideStep="saveFiltersStep" text="Guarda tus filtros seleccionados para usarlos en el futuro.">Guardar Filtros</button>
+        <button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0" joyrideStep="sendActionStep" text="Envía una acción a los elementos seleccionados.">Enviar Acción</button>
+        <button mat-flat-button color="primary" [disabled]="selectedElements.length === 0" (click)="onPxeBootFile()" joyrideStep="addPxeStep" text="Añade un archivo PXE a los elementos seleccionados.">Añadir fichero PXE</button>
+        <button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [disabled]="selectedFilter1 === 'ou'">
+          Asistentes
+        </button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item [disabled]="selectedElements.length > 1 || !selectedElements.length" (click)="onCommandSelect('partition')">Asistente de particionado</button>
+          <button mat-menu-item [disabled]="selectedElements.length > 1 || !selectedElements.length" (click)="onCommandSelect('create-image')">Crear una imagen</button>
+          <button mat-menu-item [disabled]="selectedElements.length > 1 || !selectedElements.length" (click)="onCommandSelect('deploy-image')">Desplegar una imagen</button>
+        </mat-menu>
+      </div>
     </div>
     <div class="results">
       <ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">

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

@@ -78,12 +78,31 @@
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">{{ 'columnActions' | translate }}</th>
-      <td mat-cell *matCellDef="let client" style="text-align: center;" joyrideStep="clientTabactionsStep" text="Acciones disponibles para cada cliente, como ver, editar o eliminar.">
-        <button *ngIf="!syncStatus" mat-icon-button color="primary" (click)="getStatus(client)"><mat-icon>sync</mat-icon></button>
-        <button *ngIf="syncStatus" mat-icon-button color="primary"><mat-spinner diameter="24"></mat-spinner></button>
-        <button mat-icon-button color="info" (click)="handleClientClick($event, client)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
-        <button mat-icon-button color="primary" (click)="onEditClick($event, client.uuid)" i18n="@@editImage"><mat-icon>edit</mat-icon></button>
+      <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">
+        {{ 'columnActions' | translate }}
+      </th>
+      <td mat-cell *matCellDef="let client" style="text-align: center;" joyrideStep="clientTabactionsStep"
+          text="Acciones disponibles para cada cliente, como ver, editar o eliminar.">
+
+        <button
+          *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
+          mat-icon-button color="primary"
+          (click)="getStatus(client)">
+          <mat-icon>sync</mat-icon>
+        </button>
+
+        <button
+          *ngIf="syncStatus && syncingClientId === client.uuid"
+          mat-icon-button color="primary">
+          <mat-spinner diameter="24"></mat-spinner>
+        </button>
+
+        <button mat-icon-button color="info" (click)="handleClientClick($event, client)">
+          <mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon>
+        </button>
+        <button mat-icon-button color="primary" (click)="onEditClick($event, client.uuid)" i18n="@@editImage">
+          <mat-icon>edit</mat-icon>
+        </button>
         <button mat-icon-button color="warn" (click)="onDeleteClick($event, client)">
           <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
         </button>

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

@@ -32,6 +32,7 @@ export class ClientTabViewComponent {
   filters: { [key: string]: string } = {};
   organizationalUnits: any[] = [];
   datePipe: DatePipe = new DatePipe('es-ES');
+  syncingClientId: number | null = null;
 
   private apiUrl = `${this.baseUrl}/clients`;
 
@@ -136,16 +137,20 @@ export class ClientTabViewComponent {
   }
 
   getStatus(client: any): void {
+    this.syncingClientId = client.uuid;
     this.syncStatus = true;
+
     this.http.post(`${this.baseUrl}${client['@id']}/agent/status`, {}).subscribe(
       response => {
         this.toastService.success('Cliente actualizado correctamente');
-        this.search()
+        this.search();
         this.syncStatus = false;
+        this.syncingClientId = null;
       },
       error => {
         this.toastService.error('Error de conexión con el cliente');
         this.syncStatus = false;
+        this.syncingClientId = null;
       }
     );
   }

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

@@ -12,29 +12,16 @@
 </div>
 
 <mat-divider class="divider"></mat-divider>
+
 <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>Buscar nombre de imagen</mat-label>
+    <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>Pulsar 'enter' para buscar</mat-hint>
+    <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
   </mat-form-field>
 </div>
 
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-    <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'">
-          <mat-icon [color]="image[column.columnDef] ? 'primary' : 'warn'">
-            {{ image[column.columnDef] ? 'check_circle' : 'cancel' }}
-          </mat-icon>
-        </ng-container>
-        <ng-container *ngIf="column.columnDef !== 'remotePc'">
-          {{ column.cell(image) }}
-        </ng-container>
-      </td>
-    </ng-container>
 <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>
@@ -86,50 +73,4 @@
                    (page)="onPageChange($event)">
     </mat-paginator>
   </div>
-<div class="search-container">
-  <mat-form-field appearance="fill" class="search-string">
-    <mat-label>{{ 'searchLabel' | translate }}</mat-label>
-    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']" (keyup.enter)="search()">
-    <mat-icon matSuffix>search</mat-icon>
-    <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
-  </mat-form-field>
-</div>
 
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-  <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'">
-        <mat-icon [color]="image[column.columnDef] ? 'primary' : 'warn'">
-          {{ image[column.columnDef] ? 'check_circle' : 'cancel' }}
-        </mat-icon>
-      </ng-container>
-      <ng-container *ngIf="column.columnDef !== 'remotePc'">
-        {{ column.cell(image) }}
-      </ng-container>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="actions">
-    <th mat-header-cell *matHeaderCellDef class="actions-header">{{ 'columnActions' | translate }}</th>
-    <td mat-cell *matCellDef="let client">
-      <button mat-icon-button color="primary" (click)="editImage($event, client)">
-        <mat-icon>{{ 'editButtonIcon' | translate }}</mat-icon>
-      </button>
-      <button mat-icon-button color="warn" (click)="deleteImage($event, client)">
-        <mat-icon>{{ 'deleteButtonIcon' | translate }}</mat-icon>
-      </button>
-    </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/main-repository-view/main-repository-view.component.ts

@@ -270,7 +270,7 @@ export class MainRepositoryViewComponent {
   }
 
   syncRepository() {
-    this.http.post(`${this.apiUrl}/sync`, {})
+    this.http.get(`${this.baseUrl}/image-repositories/server/sync`, {})
       .subscribe(response => {
         this.toastService.success('Sincronización completada');
         this.load()