refs #1731. New UX integration. Convert image to virtual

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

ogWebconsole/.gitignore

@@ -41,3 +41,5 @@ testem.log
 .DS_Store
 Thumbs.db
 
+test-results/
+

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,

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' }
     };
 

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>
+

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;
+}

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>

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();
+  });
+});

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();
+  }
+}

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>

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>

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>
+</div>

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>

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;

ogWebconsole/src/styles.css

@@ -93,4 +93,11 @@ body {
 .action-button:disabled {
   background-color: #ced0df;
   cursor: not-allowed;
-}
+}
+
+.action-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+  padding: 1.5em;
+}