refs #1731. New UX integration. Convert image to virtual
testing/ogGui-multibranch/pipeline/head There was a failure building this commit Details

pull/18/head
Manuel Aranda Rosales 2025-03-19 15:40:52 +01:00
parent 7e133f2b2b
commit 523b4bfc60
17 changed files with 170 additions and 11 deletions

View File

@ -0,0 +1,2 @@
NG_APP_BASE_API_URL=https://localhost:8443
NG_APP_OGCORE_MERCURE_BASE_URL=http://localhost:3000/.well-known/mercure

View File

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

View File

@ -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,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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;

View File

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