refs #1869 Add ShowGitImages component and integrate it into RepositoriesComponent

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

@@ -43,6 +43,7 @@
 
       <ng-container *ngIf="column.columnDef === 'images'">
         <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

@@ -10,6 +10,7 @@ import { Router } from '@angular/router';
 import { ConfigService } from '@services/config.service';
 import {Subnet} from "../ogdhcp/og-dhcp-subnets.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({
@@ -55,6 +56,7 @@ export class RepositoriesComponent implements OnInit {
     }
   ];
   displayedColumns: string[] = ['id', 'name', 'ip', 'images', 'createdAt', 'actions'];
+  isGitModuleInstalled: boolean = true;
 
   constructor(
     public dialog: MatDialog,
@@ -127,10 +129,10 @@ export class RepositoriesComponent implements OnInit {
 
   openShowMonoliticImagesDialog(repository: Subnet) {
     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 +141,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;

ogWebconsole/src/app/components/repositories/show-git-images/show-git-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-git-images/show-git-images.component.html

@@ -1 +1,120 @@
-<p>show-git-images works!</p>
+<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 git 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>
+        </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-git-images/show-git-images.component.spec.ts

@@ -1,14 +1,54 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ShowGitImagesComponent } from './show-git-images.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+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('ShowGitImagesComponent', () => {
   let component: ShowGitImagesComponent;
   let fixture: ComponentFixture<ShowGitImagesComponent>;
 
   beforeEach(async () => {
+    const mockConfigService = {
+      apiUrl: 'http://mock-api-url'
+    };
+
     await TestBed.configureTestingModule({
-      declarations: [ShowGitImagesComponent]
+      declarations: [ShowGitImagesComponent, 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();
 

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

@@ -1,4 +1,21 @@
-import { Component } from '@angular/core';
+import {Component, Inject, Input, isDevMode, OnInit} from '@angular/core';
+import {MatTableDataSource} from "@angular/material/table";
+import {DatePipe} from "@angular/common";
+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 {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 {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 {ConvertImageToVirtualComponent} from "../convert-image-to-virtual/convert-image-to-virtual.component";
+import {EditImageComponent} from "../edit-image/edit-image.component";
 
 @Component({
   selector: 'app-show-git-images',
@@ -6,5 +23,394 @@ import { Component } from '@angular/core';
   styleUrl: './show-git-images.component.css'
 })
 export class ShowGitImagesComponent {
+baseUrl: string;
+  private apiUrl: string;
+  dataSource = new MatTableDataSource<any>();
+  length: number = 0;
+  itemsPerPage: number = 10;
+  page: number = 0;
+  loading: boolean = false;
+  filters: { [key: string]: string } = {};
+  alertMessage: string | null = null;
+  repository: any = {};
+  datePipe: DatePipe = new DatePipe('es-ES');
+  columns = [
+    {
+      columnDef: 'id',
+      header: 'Id',
+      cell: (image: any) => `${image.id}`
+    },
+    {
+      columnDef: 'name',
+      header: 'Nombre de imagen',
+      cell: (image: any) => `${image.image.name}`
+    },
+    {
+      columnDef: 'version',
+      header: 'Version',
+      cell: (image: any) => `${image.version ? image.version : '0'}`
+    },
+    {
+      columnDef: 'isGlobal',
+      header: 'Imagen global',
+      cell: (image: any) => `${image.image?.isGlobal}`
+    },
+    {
+      columnDef: 'status',
+      header: 'Estado',
+      cell: (image: any) => `${image.status}`
+    },
+    {
+      columnDef: 'description',
+      header: 'Descripción',
+      cell: (image: any) => `${image.description ? image.description : 'Sin descripción'}`
+    },
+    {
+      columnDef: 'createdAt',
+      header: 'Fecha de creación',
+      cell: (image: any) => `${this.datePipe.transform(image.createdAt, 'dd/MM/yyyy hh:mm:ss')}`
+    }
+  ];
+  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
 
+  constructor(
+    public dialog: MatDialog,
+    private http: HttpClient,
+    private toastService: ToastrService,
+    private joyrideService: JoyrideService,
+    private configService: ConfigService,
+    private router: Router,
+    public dialogRef: MatDialogRef<ShowGitImagesComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.baseUrl = this.configService.apiUrl;
+    this.apiUrl = `${this.baseUrl}/image-image-repositories`;
+  }
+
+  ngOnInit(): void {
+    console.error()
+    if (this.data) {
+      this.loadData();
+    }
+  }
+
+  loadData(): void {
+    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.dataSource.data = data['hydra:member'];
+        this.length = data['hydra:totalItems'];
+        this.loading = false;
+      },
+      error => {
+        console.error('Error fetching image repositories', error);
+      }
+    )
+  }
+
+  getStatusLabel(status: string): string {
+    switch (status) {
+      case 'pending':
+        return 'Pendiente';
+      case 'in-progress':
+        return 'En progreso';
+      case 'aux-files-pending':
+        return 'Archivos auxiliares pendientes';
+      case 'success':
+        return 'Creado con éxito';
+      case 'trash':
+        return 'Papelera temporal';
+      case 'failed':
+        return 'Fallido';
+      case 'transferring':
+        return 'Transfiriendo';
+      default:
+        return 'Estado desconocido';
+    }
+  }
+
+  onPageChange(event: any): void {
+    this.page = event.pageIndex;
+    this.itemsPerPage = event.pageSize;
+    this.length = event.length;
+    this.loadData();
+  }
+
+  loadImageAlert(image: any): Observable<any> {
+    return this.http.get<any>(`${this.apiUrl}/server/${image.uuid}/get`, {});
+  }
+
+  showImageInfo(event: MouseEvent, image:any) {
+    event.stopPropagation();
+    this.loading = true;
+    this.loadImageAlert(image).subscribe(
+      response => {
+        this.alertMessage = response;
+
+        this.dialog.open(ServerInfoDialogComponent, {
+          width: '800px',
+          data: {
+            message: this.alertMessage
+          }
+        });
+        this.loading = false;
+      },
+      error => {
+        this.toastService.error(error.error['hydra:description']);
+        this.loading = false;
+      }
+    );
+  }
+
+  importImage(): void {
+    console.log(this.data)
+    this.dialog.open(ImportImageComponent, {
+      width: '600px',
+      data: {
+        repositoryUuid: this.data.repositoryUuid,
+        name: this.data.repositoryName
+      }
+    }).afterClosed().subscribe((result) => {
+      if (result) {
+        this.loadData();
+      }
+    });
+  }
+
+  convertImage(): void {
+    this.dialog.open(ConvertImageComponent, {
+      width: '600px',
+      data: {
+        repositoryUuid: this.data.repositoryUuid,
+        name: this.data.repositoryName
+      }
+    }).afterClosed().subscribe((result) => {
+      if (result) {
+        this.loadData();
+      }
+    });
+  }
+
+  toggleAction(image: any, action:string): void {
+    switch (action) {
+      case 'get-aux':
+        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.loadData()
+          },
+          error: (error) => {
+            this.toastService.error(error.error['hydra:description']);
+          }
+        });
+        break;
+      case 'delete-trash':
+        if (!image.imageFullsum) {
+          const dialogRef = this.dialog.open(DeleteModalComponent, {
+            width: '400px',
+            data: { name: image.name },
+          });
+
+          dialogRef.afterClosed().subscribe((result) => {
+            this.http.delete(`${this.baseUrl}${image['@id']}`).subscribe({
+              next: () => {
+                this.toastService.success('Image deleted successfully');
+                this.loadData()
+              },
+              error: (error) => {
+                this.toastService.error('Error deleting image');
+              }
+            });
+          });
+        } else {
+          this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/delete-trash`,
+            { repository: `/image-repositories/${this.data.repositoryUuid}` })
+            .subscribe({
+              next: () => {
+                this.toastService.success('Petición de eliminación de la papelera temporal enviada');
+                this.loadData()
+              },
+              error: (error) => {
+                this.toastService.error(error.error['hydra:description']);
+              }
+            });
+        }
+
+        break;
+      case 'delete-permanent':
+        this.dialog.open(DeleteModalComponent, {
+          width: '300px',
+          data: { name: image.name },
+        }).afterClosed().subscribe((result) => {
+          if (result) {
+            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.loadData()
+              },
+              error: (error) => {
+                this.toastService.error(error.error['hydra:description']);
+              }
+            });
+          }
+        });
+        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.loadData()
+          },
+          error: (error) => {
+            this.toastService.error(error.error['hydra:description']);
+          }
+        });
+        break;
+      case 'status':
+        this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/status`, {}).subscribe({
+          next: (response: any) => {
+            this.toastService.info(response?.output);
+            this.loadData()
+          },
+          error: (error) => {
+            this.toastService.error(error.error['hydra:description']);
+          }
+        });
+        break;
+      case 'transfer':
+        this.http.get(`${this.baseUrl}${image.image['@id']}`).subscribe({
+          next: (response) => {
+            this.dialog.open(ExportImageComponent, {
+              width: '600px',
+              data: {
+                image: response,
+                imageImageRepository: image
+              }
+            });
+          },
+          error: (error) => {
+            this.toastService.error(error.error['hydra:description']);
+          }
+        });
+        break;
+      case 'transfer-global':
+        this.http.post<any>(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/transfer-global`, {
+        }).subscribe({
+          next: (response) => {
+            this.toastService.success('Petición de exportación de imagen realizada correctamente');
+            this.loading = false;
+            this.router.navigate(['/commands-logs']);
+          },
+          error: error => {
+            this.loading = false;
+            this.toastService.error('Error en la petición de exportación de imagen');
+          }
+        });
+        break;
+      case 'backup':
+        this.http.get(`${this.baseUrl}${image.image['@id']}`).subscribe({
+          next: (response) => {
+            this.dialog.open(BackupImageComponent, {
+              width: '600px',
+              data: {
+                image: response,
+                imageImageRepository: image
+              }
+            });
+          },
+          error: (error) => {
+            this.toastService.error(error.error['hydra:description']);
+          }
+        });
+        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;
+      default:
+        console.error('Acción no soportada:', action);
+        break;
+    }
+  }
+
+  iniciarTour(): void {
+    this.joyrideService.startTour({
+      steps: [
+        'imagesTitleStep',
+        'addImageButton',
+        'searchImagesField',
+        'imagesTable',
+        'actionsHeader',
+        'editImageButton',
+        'deleteImageButton',
+        'imagesPagination'
+      ],
+      showPrevButton: true,
+      themeColor: '#3f51b5'
+    });
+  }
+
+  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/components/repositories/show-monolitic-images/show-monolitic-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,50 +58,21 @@ 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-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);
 }
@@ -146,57 +92,9 @@ table {
   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.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 monolíticas 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,8 @@
     <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>
@@ -89,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>
@@ -104,17 +109,12 @@
   </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>
 
 </mat-dialog-content>
 <mat-dialog-actions class="action-container">
   <button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
-</mat-dialog-actions>
+</mat-dialog-actions>
-
-