From 523b4bfc60211a3cd82e5e3ed58e05d7c66d8a9e Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Wed, 19 Mar 2025 15:40:52 +0100
Subject: [PATCH] refs #1731. New UX integration. Convert image to virtual

---
 ogWebconsole/.env.prod                        |  2 +
 ogWebconsole/.gitignore                       |  2 +
 ogWebconsole/docker-compose.yaml              |  0
 ogWebconsole/docker/nginx.conf                |  0
 ogWebconsole/src/app/app.module.ts            |  4 +-
 .../ogboot/pxe-images/pxe-images.component.ts |  2 +-
 .../backup-image/backup-image.component.html  |  5 +-
 .../convert-image-to-virtual.component.css    | 39 ++++++++++++++
 .../convert-image-to-virtual.component.html   | 14 +++++
 ...convert-image-to-virtual.component.spec.ts | 23 +++++++++
 .../convert-image-to-virtual.component.ts     | 51 +++++++++++++++++++
 .../convert-image.component.html              |  4 +-
 .../import-image/import-image.component.html  |  4 +-
 .../manage-repository.component.html          |  4 +-
 .../show-images/show-images.component.html    |  1 +
 .../show-images/show-images.component.ts      | 17 +++++++
 ogWebconsole/src/styles.css                   |  9 +++-
 17 files changed, 170 insertions(+), 11 deletions(-)
 delete mode 100644 ogWebconsole/docker-compose.yaml
 delete mode 100644 ogWebconsole/docker/nginx.conf
 create mode 100644 ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.css
 create mode 100644 ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.html
 create mode 100644 ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.spec.ts
 create mode 100644 ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.ts

diff --git a/ogWebconsole/.env.prod b/ogWebconsole/.env.prod
index e69de29..55dfe33 100644
--- a/ogWebconsole/.env.prod
+++ b/ogWebconsole/.env.prod
@@ -0,0 +1,2 @@
+NG_APP_BASE_API_URL=https://localhost:8443
+NG_APP_OGCORE_MERCURE_BASE_URL=http://localhost:3000/.well-known/mercure
diff --git a/ogWebconsole/.gitignore b/ogWebconsole/.gitignore
index 03923dd..141af17 100644
--- a/ogWebconsole/.gitignore
+++ b/ogWebconsole/.gitignore
@@ -41,3 +41,5 @@ testem.log
 .DS_Store
 Thumbs.db
 
+test-results/
+
diff --git a/ogWebconsole/docker-compose.yaml b/ogWebconsole/docker-compose.yaml
deleted file mode 100644
index e69de29..0000000
diff --git a/ogWebconsole/docker/nginx.conf b/ogWebconsole/docker/nginx.conf
deleted file mode 100644
index e69de29..0000000
diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index e2eb538..3e5a1e6 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -136,6 +136,7 @@ import localeEs from '@angular/common/locales/es';
 import { GlobalStatusComponent } from './components/global-status/global-status.component';
 import { ShowImagesComponent } from './components/repositories/show-images/show-images.component';
 import { StatusTabComponent } from './components/global-status/status-tab/status-tab.component';
+import { ConvertImageToVirtualComponent } from './components/repositories/convert-image-to-virtual/convert-image-to-virtual.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './locale/', '.json');
@@ -231,7 +232,8 @@ registerLocaleData(localeEs, 'es-ES');
     ConvertImageComponent,
     GlobalStatusComponent,
     ShowImagesComponent,
-    StatusTabComponent
+    StatusTabComponent,
+    ConvertImageToVirtualComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,
diff --git a/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.ts b/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.ts
index 29c1ee5..8b2a37f 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.ts
+++ b/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.ts
@@ -109,7 +109,7 @@ export class PXEimagesComponent implements OnInit {
     const statusMap: { [key: string]: { label: string; class: string } } = {
       active: { label: 'Instalada', class: 'status-active' },
       inactive: { label: 'Sin instalar', class: 'status-inactive' },
-      installing: { label: 'Instalando...', class: 'status-installing' },
+      pending: { label: 'Instalando...', class: 'status-installing' },
       failed: { label: 'Fallido', class: 'status-failed' }
     };
 
diff --git a/ogWebconsole/src/app/components/repositories/backup-image/backup-image.component.html b/ogWebconsole/src/app/components/repositories/backup-image/backup-image.component.html
index cc15162..de3cfe1 100644
--- a/ogWebconsole/src/app/components/repositories/backup-image/backup-image.component.html
+++ b/ogWebconsole/src/app/components/repositories/backup-image/backup-image.component.html
@@ -15,7 +15,8 @@
   </form>
 </mat-dialog-content>
 
-<div mat-dialog-actions class="action-container">
+<div class="action-container">
   <button class="ordinary-button" (click)="close()">Cancelar</button>
-  <button class="submit-button" [disabled]="!form.valid" (click)="save()">Continuar</button>
+  <button class="submit-button" (click)="save()">Continuar</button>
 </div>
+
diff --git a/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.css b/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.css
new file mode 100644
index 0000000..bdecbfa
--- /dev/null
+++ b/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.css
@@ -0,0 +1,39 @@
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.selected-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.selected-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #ccc;
+}
+
+.selected-item button {
+  margin-left: 10px;
+}
diff --git a/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.html b/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.html
new file mode 100644
index 0000000..c055d3a
--- /dev/null
+++ b/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.html
@@ -0,0 +1,14 @@
+<h2 mat-dialog-title>Convertir imagen en virtual </h2>
+
+<mat-dialog-content>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Extension</mat-label>
+    <input matInput [(ngModel)]="extension" placeholder="Introduzca la extensión de la imagen a convertir."
+    />
+  </mat-form-field>
+</mat-dialog-content>
+
+<div class="action-container">
+  <button class="ordinary-button" (click)="close()">Cancelar</button>
+  <button class="submit-button" (click)="save()">Continuar</button>
+</div>
diff --git a/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.spec.ts b/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.spec.ts
new file mode 100644
index 0000000..be42a50
--- /dev/null
+++ b/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConvertImageToVirtualComponent } from './convert-image-to-virtual.component';
+
+describe('ConvertImageToVirtualComponent', () => {
+  let component: ConvertImageToVirtualComponent;
+  let fixture: ComponentFixture<ConvertImageToVirtualComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ConvertImageToVirtualComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ConvertImageToVirtualComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.ts b/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.ts
new file mode 100644
index 0000000..bd5e923
--- /dev/null
+++ b/ogWebconsole/src/app/components/repositories/convert-image-to-virtual/convert-image-to-virtual.component.ts
@@ -0,0 +1,51 @@
+import {Component, Inject} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {ToastrService} from "ngx-toastr";
+import {Router} from "@angular/router";
+import {ConfigService} from "@services/config.service";
+
+@Component({
+  selector: 'app-convert-image-to-virtual',
+  templateUrl: './convert-image-to-virtual.component.html',
+  styleUrl: './convert-image-to-virtual.component.css'
+})
+export class ConvertImageToVirtualComponent {
+  baseUrl: string;
+  loading: boolean = true;
+  extension: string = '';
+
+  constructor(
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<ConvertImageToVirtualComponent>,
+    private toastService: ToastrService,
+    private router: Router,
+    private configService: ConfigService,
+    @Inject(MAT_DIALOG_DATA) public data: { imageImageRepository: any }
+  ) {
+    this.baseUrl = this.configService.apiUrl;
+  }
+
+  ngOnInit(): void {
+    this.loading = true;
+  }
+
+  save() {
+    this.http.post<any>(`${this.baseUrl}${this.data.imageImageRepository['@id']}/convert-image-to-virtual`, {
+      extension: this.extension
+    }).subscribe({
+      next: (response) => {
+        this.toastService.success('Peticion de conversion de imagen enviada correctamente');
+        this.dialogRef.close();
+        this.router.navigate(['/commands-logs']);
+      },
+      error: error => {
+        this.toastService.error(error.error['hydra:description']);
+      }
+    });
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}
diff --git a/ogWebconsole/src/app/components/repositories/convert-image/convert-image.component.html b/ogWebconsole/src/app/components/repositories/convert-image/convert-image.component.html
index 331ecec..df4bff5 100644
--- a/ogWebconsole/src/app/components/repositories/convert-image/convert-image.component.html
+++ b/ogWebconsole/src/app/components/repositories/convert-image/convert-image.component.html
@@ -15,7 +15,7 @@
   </mat-form-field>
 </mat-dialog-content>
 
-<mat-dialog-actions>
+<div class="action-container">
   <button class="ordinary-button" (click)="close()">Cancelar</button>
   <button class="submit-button" (click)="save()">Continuar</button>
-</mat-dialog-actions>
+</div>
diff --git a/ogWebconsole/src/app/components/repositories/import-image/import-image.component.html b/ogWebconsole/src/app/components/repositories/import-image/import-image.component.html
index d5b1658..a9760f5 100644
--- a/ogWebconsole/src/app/components/repositories/import-image/import-image.component.html
+++ b/ogWebconsole/src/app/components/repositories/import-image/import-image.component.html
@@ -9,7 +9,7 @@
   </mat-form-field>
 </mat-dialog-content>
 
-<mat-dialog-actions>
+<div class="action-container">
   <button class="ordinary-button" (click)="close()">Cancelar</button>
   <button class="submit-button" (click)="save()">Continuar</button>
-</mat-dialog-actions>
+</div>
diff --git a/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.html b/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.html
index 84ce0db..1edb619 100644
--- a/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.html
+++ b/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.html
@@ -19,7 +19,7 @@
   </form>
 </mat-dialog-content>
 
-<mat-dialog-actions class="action-container">
+<div mat-dialog-actions class="action-container">
   <button class="ordinary-button" (click)="close()">Cancelar</button>
   <button class="submit-button" (click)="save()">Guardar</button>
-</mat-dialog-actions>
\ No newline at end of file
+</div>
diff --git a/ogWebconsole/src/app/components/repositories/show-images/show-images.component.html b/ogWebconsole/src/app/components/repositories/show-images/show-images.component.html
index bd1f040..fc28fe2 100644
--- a/ogWebconsole/src/app/components/repositories/show-images/show-images.component.html
+++ b/ogWebconsole/src/app/components/repositories/show-images/show-images.component.html
@@ -92,6 +92,7 @@
           <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>
diff --git a/ogWebconsole/src/app/components/repositories/show-images/show-images.component.ts b/ogWebconsole/src/app/components/repositories/show-images/show-images.component.ts
index 8d89edb..f289885 100644
--- a/ogWebconsole/src/app/components/repositories/show-images/show-images.component.ts
+++ b/ogWebconsole/src/app/components/repositories/show-images/show-images.component.ts
@@ -14,6 +14,7 @@ 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";
 
 @Component({
   selector: 'app-show-images',
@@ -320,6 +321,22 @@ export class ShowImagesComponent implements OnInit {
           }
         });
         break;
+      case 'convert-image-to-virtual':
+        this.http.get(`${this.baseUrl}${image.image['@id']}`).subscribe({
+          next: (response) => {
+            this.dialog.open(ConvertImageToVirtualComponent, {
+              width: '600px',
+              data: {
+                image: response,
+                imageImageRepository: image
+              }
+            });
+          },
+          error: (error) => {
+            this.toastService.error(error.error['hydra:description']);
+          }
+        });
+        break;
       default:
         console.error('Acción no soportada:', action);
         break;
diff --git a/ogWebconsole/src/styles.css b/ogWebconsole/src/styles.css
index 9f78cfb..1612d8e 100644
--- a/ogWebconsole/src/styles.css
+++ b/ogWebconsole/src/styles.css
@@ -93,4 +93,11 @@ body {
 .action-button:disabled {
   background-color: #ced0df;
   cursor: not-allowed;
-}
\ No newline at end of file
+}
+
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}