From bdbb16d3fd0553cdd74008feb0687d6c9b7faeae Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Fri, 31 Jan 2025 09:10:02 +0100 Subject: [PATCH] ogRepo new endpoints. Export/Import image --- ogWebconsole/src/app/app.module.ts | 4 + .../export-image/export-image.component.css | 22 +++ .../export-image/export-image.component.html | 15 ++ .../export-image.component.spec.ts | 58 +++++++ .../export-image/export-image.component.ts | 59 +++++++ .../components/images/images.component.css | 6 + .../components/images/images.component.html | 8 +- .../app/components/images/images.component.ts | 9 ++ .../import-image/import-image.component.css | 22 +++ .../import-image/import-image.component.html | 15 ++ .../import-image.component.spec.ts | 59 +++++++ .../import-image/import-image.component.ts | 58 +++++++ .../main-repository-view.component.css | 92 ++++++++++- .../main-repository-view.component.html | 139 ++++++++--------- .../main-repository-view.component.ts | 146 +++++------------- .../repositories/repositories.component.css | 7 + .../repositories/repositories.component.html | 23 ++- .../repositories/repositories.component.ts | 11 ++ ogWebconsole/src/locale/en.json | 1 + ogWebconsole/src/locale/es.json | 1 + 20 files changed, 558 insertions(+), 197 deletions(-) create mode 100644 ogWebconsole/src/app/components/images/export-image/export-image.component.css create mode 100644 ogWebconsole/src/app/components/images/export-image/export-image.component.html create mode 100644 ogWebconsole/src/app/components/images/export-image/export-image.component.spec.ts create mode 100644 ogWebconsole/src/app/components/images/export-image/export-image.component.ts create mode 100644 ogWebconsole/src/app/components/repositories/import-image/import-image.component.css create mode 100644 ogWebconsole/src/app/components/repositories/import-image/import-image.component.html create mode 100644 ogWebconsole/src/app/components/repositories/import-image/import-image.component.spec.ts create mode 100644 ogWebconsole/src/app/components/repositories/import-image/import-image.component.ts diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index d620284..c460a6e 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -124,6 +124,8 @@ import { MatSortModule } from '@angular/material/sort'; import { MenusComponent } from './components/menus/menus.component'; import { CreateMenuComponent } from './components/menus/create-menu/create-menu.component'; import { CreateMultipleClientComponent } from './components/groups/shared/clients/create-multiple-client/create-multiple-client.component'; +import { ExportImageComponent } from './components/images/export-image/export-image.component'; +import {ImportImageComponent} from "./components/repositories/import-image/import-image.component"; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './locale/', '.json'); } @@ -206,6 +208,8 @@ export function HttpLoaderFactory(http: HttpClient) { MenusComponent, CreateMenuComponent, CreateMultipleClientComponent, + ExportImageComponent, + ImportImageComponent, ], bootstrap: [AppComponent], imports: [BrowserModule, diff --git a/ogWebconsole/src/app/components/images/export-image/export-image.component.css b/ogWebconsole/src/app/components/images/export-image/export-image.component.css new file mode 100644 index 0000000..2239479 --- /dev/null +++ b/ogWebconsole/src/app/components/images/export-image/export-image.component.css @@ -0,0 +1,22 @@ +.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; +} diff --git a/ogWebconsole/src/app/components/images/export-image/export-image.component.html b/ogWebconsole/src/app/components/images/export-image/export-image.component.html new file mode 100644 index 0000000..40f46ec --- /dev/null +++ b/ogWebconsole/src/app/components/images/export-image/export-image.component.html @@ -0,0 +1,15 @@ +

Exportar imagen {{data.image?.name}}

+ + + + Seleccione repositorio destino + + {{ repository.name }} + + + + + + + + diff --git a/ogWebconsole/src/app/components/images/export-image/export-image.component.spec.ts b/ogWebconsole/src/app/components/images/export-image/export-image.component.spec.ts new file mode 100644 index 0000000..e45ee65 --- /dev/null +++ b/ogWebconsole/src/app/components/images/export-image/export-image.component.spec.ts @@ -0,0 +1,58 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExportImageComponent } from './export-image.component'; +import {FormBuilder, ReactiveFormsModule} from "@angular/forms"; +import {ToastrModule, ToastrService} from "ngx-toastr"; +import {provideHttpClient} from "@angular/common/http"; +import {provideHttpClientTesting} from "@angular/common/http/testing"; +import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog"; +import {MatFormFieldModule} from "@angular/material/form-field"; +import {MatInputModule} from "@angular/material/input"; +import {MatButtonModule} from "@angular/material/button"; +import {MatSelectModule} from "@angular/material/select"; +import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; +import {TranslateModule} from "@ngx-translate/core"; + +describe('ExportImageComponent', () => { + let component: ExportImageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ExportImageComponent], + imports: [ + ReactiveFormsModule, + MatDialogModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + MatSelectModule, + BrowserAnimationsModule, + ToastrModule.forRoot(), + TranslateModule.forRoot() + ], + providers: [ + FormBuilder, + ToastrService, + provideHttpClient(), + provideHttpClientTesting(), + { + provide: MatDialogRef, + useValue: {} + }, + { + provide: MAT_DIALOG_DATA, + useValue: {} + }] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ExportImageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/components/images/export-image/export-image.component.ts b/ogWebconsole/src/app/components/images/export-image/export-image.component.ts new file mode 100644 index 0000000..ea43de0 --- /dev/null +++ b/ogWebconsole/src/app/components/images/export-image/export-image.component.ts @@ -0,0 +1,59 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {ToastrService} from "ngx-toastr"; + +@Component({ + selector: 'app-export-image', + templateUrl: './export-image.component.html', + styleUrl: './export-image.component.css' +}) +export class ExportImageComponent implements OnInit { + baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; + loading: boolean = true; + repositories: any[] = []; + selectedRepository: string = ''; + + constructor( + private http: HttpClient, + public dialogRef: MatDialogRef, + private toastService: ToastrService, + @Inject(MAT_DIALOG_DATA) public data: { image: any } + ) { + + } + + ngOnInit(): void { + this.loading = true; + this.loadRepositories(); + } + + loadRepositories() { + this.http.get(`${this.baseUrl}/image-repositories?page=1&itemsPerPage=50`).subscribe( + response => { + this.repositories = response['hydra:member']; + this.loading = false; + }, + error => console.error('Error fetching organizational units:', error) + ); + } + + save() { + this.http.post(`${this.baseUrl}${this.selectedRepository}/export-image`, { + images: [this.data.image['@id']] + }).subscribe({ + next: (response) => { + this.toastService.success('Imagen exportada correctamente'); + this.dialogRef.close(); + }, + error: error => { + console.error('Error al exportar imagen:', error); + this.toastService.error('Error al exportar imagen'); + } + }); + } + + close() { + this.dialogRef.close(); + } +} diff --git a/ogWebconsole/src/app/components/images/images.component.css b/ogWebconsole/src/app/components/images/images.component.css index 50f0f3a..f1a253c 100644 --- a/ogWebconsole/src/app/components/images/images.component.css +++ b/ogWebconsole/src/app/components/images/images.component.css @@ -91,3 +91,9 @@ table { color: white; } +.header-container-title { + flex-grow: 1; + text-align: left; + margin-left: 1em; +} + diff --git a/ogWebconsole/src/app/components/images/images.component.html b/ogWebconsole/src/app/components/images/images.component.html index 235fdb9..836f976 100644 --- a/ogWebconsole/src/app/components/images/images.component.html +++ b/ogWebconsole/src/app/components/images/images.component.html @@ -3,7 +3,11 @@ -

{{ 'imagesTitle' | translate }}

+
+

+ {{ 'imagesTitle' | translate }} +

+
- + diff --git a/ogWebconsole/src/app/components/images/images.component.ts b/ogWebconsole/src/app/components/images/images.component.ts index ca36c01..4d9e6c7 100644 --- a/ogWebconsole/src/app/components/images/images.component.ts +++ b/ogWebconsole/src/app/components/images/images.component.ts @@ -11,6 +11,7 @@ import {ServerInfoDialogComponent} from "../ogdhcp/og-dhcp-subnets/server-info-d import {Observable} from "rxjs"; import {InfoImageComponent} from "../ogboot/pxe-images/info-image/info-image/info-image.component"; import { JoyrideService } from 'ngx-joyride'; +import {ExportImageComponent} from "./export-image/export-image.component"; @Component({ selector: 'app-images', @@ -216,6 +217,14 @@ export class ImagesComponent implements OnInit { } }); break; + case 'export': + this.dialog.open(ExportImageComponent, { + width: '600px', + data: { + image: image + } + }); + break; default: console.error('Acción no soportada:', action); break; diff --git a/ogWebconsole/src/app/components/repositories/import-image/import-image.component.css b/ogWebconsole/src/app/components/repositories/import-image/import-image.component.css new file mode 100644 index 0000000..2239479 --- /dev/null +++ b/ogWebconsole/src/app/components/repositories/import-image/import-image.component.css @@ -0,0 +1,22 @@ +.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; +} 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 new file mode 100644 index 0000000..4d834d0 --- /dev/null +++ b/ogWebconsole/src/app/components/repositories/import-image/import-image.component.html @@ -0,0 +1,15 @@ +

Importar imagenes a {{data.repository?.name}}

+ + + + Seleccione imagenes a importar + + {{ image.name }} + + + + + + + + diff --git a/ogWebconsole/src/app/components/repositories/import-image/import-image.component.spec.ts b/ogWebconsole/src/app/components/repositories/import-image/import-image.component.spec.ts new file mode 100644 index 0000000..03aa01d --- /dev/null +++ b/ogWebconsole/src/app/components/repositories/import-image/import-image.component.spec.ts @@ -0,0 +1,59 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ImportImageComponent } from './import-image.component'; +import {FormBuilder, ReactiveFormsModule} from "@angular/forms"; +import {ToastrModule, ToastrService} from "ngx-toastr"; +import {DataService} from "../../calendar/data.service"; +import {provideHttpClient} from "@angular/common/http"; +import {provideHttpClientTesting} from "@angular/common/http/testing"; +import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog"; +import {MatFormFieldModule} from "@angular/material/form-field"; +import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; +import {TranslateModule} from "@ngx-translate/core"; +import {MatButtonModule} from "@angular/material/button"; +import {MatInputModule} from "@angular/material/input"; +import {MatSelectModule} from "@angular/material/select"; + +describe('ImportImageComponent', () => { + let component: ImportImageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ImportImageComponent], + imports: [ + ReactiveFormsModule, + MatDialogModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + MatSelectModule, + BrowserAnimationsModule, + ToastrModule.forRoot(), + TranslateModule.forRoot() + ], + providers: [ + FormBuilder, + ToastrService, + provideHttpClient(), + provideHttpClientTesting(), + { + provide: MatDialogRef, + useValue: {} + }, + { + provide: MAT_DIALOG_DATA, + useValue: {} + }] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ImportImageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/components/repositories/import-image/import-image.component.ts b/ogWebconsole/src/app/components/repositories/import-image/import-image.component.ts new file mode 100644 index 0000000..3ffd0df --- /dev/null +++ b/ogWebconsole/src/app/components/repositories/import-image/import-image.component.ts @@ -0,0 +1,58 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {ToastrService} from "ngx-toastr"; + +@Component({ + selector: 'app-import-image', + templateUrl: './import-image.component.html', + styleUrl: './import-image.component.css' +}) +export class ImportImageComponent implements OnInit{ + baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; + loading: boolean = true; + images: any[] = []; + selectedClients: any[] = []; + + constructor( + private http: HttpClient, + public dialogRef: MatDialogRef, + private toastService: ToastrService, + @Inject(MAT_DIALOG_DATA) public data: { repository: any } + ) { + + } + + ngOnInit(): void { + this.loading = true; + this.loadImages(); + } + + loadImages() { + this.http.get(`${this.baseUrl}/images?page=1&itemsPerPage=50`).subscribe( + response => { + this.images = response['hydra:member']; + this.loading = false; + }, + error => console.error('Error fetching organizational units:', error) + ); + } + + save() { + this.http.post(`${this.baseUrl}${this.data.repository['@id']}/import-image`, { + images: this.selectedClients + }).subscribe({ + next: (response) => { + this.toastService.success('Peticion de importacion de imagen enviada correctamente'); + this.dialogRef.close(); + }, + error: error => { + this.toastService.error('Error al importar imagenes'); + } + }); + } + + close() { + this.dialogRef.close(); + } +} diff --git a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.css b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.css index 66ff364..326ce6a 100644 --- a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.css +++ b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.css @@ -135,6 +135,10 @@ min-height: 400px; } +.main-container { + margin-top: 15px; +} + .mat-tab-body-wrapper { min-height: inherit; } @@ -210,13 +214,6 @@ p { align-items: center; } -.status-led { - width: 10px; - height: 10px; - border-radius: 50%; - display: inline-block; - margin-right: 10px; -} .status-led.active { background-color: green; @@ -304,4 +301,85 @@ table { } +.dashboard { + padding: 20px; + display: flex; + flex-direction: column; + gap: 20px; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; +} + +.row { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; +} + +.top-row { + display: flex; + justify-content: center; + gap: 20px; +} + +.top-row .card { + flex: 1; +} + +.card { + background: white; + padding: 15px; + border-radius: 10px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + flex: 1; + min-width: 300px; +} + +.status-led { + width: 10px; + height: 10px; + display: inline-block; + border-radius: 50%; + margin-right: 5px; +} + +.active { + background-color: green; +} + +.inactive { + background-color: red; +} + +.cpu-usage-bar { + background: lightgray; + width: 100%; + height: 20px; + border-radius: 5px; + overflow: hidden; +} + +.cpu-bar { + height: 100%; + background: green; +} + +.cpu-bar.high { + background: red; +} + +@media (max-width: 900px) { + .top-row { + flex-direction: column; + } + + .top-row .card { + max-width: 100%; + } +} diff --git a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html index 5dea2dd..d6baad7 100644 --- a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html +++ b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html @@ -1,51 +1,91 @@ - +
-

OgRepository server Status

-
-
-

Uso de disco

+

OgRepository Server Status

+ +
+
+

Uso de Disco

+ [labels]="showLabels" > -
+

Total: {{ diskUsage.total }}

Ocupado: {{ diskUsage.used }}

Disponible: {{ diskUsage.available }}

-

Ocupado ( % ): {{ diskUsage.percentage }}

+

Ocupado (%): {{ diskUsage.percentage }}

-
+
+

Uso de RAM

+ + +
+

Total: {{ ramUsage.total }}

+

Ocupado: {{ ramUsage.used }}

+

Disponible: {{ ramUsage.available }}

+

Ocupado (%): {{ ramUsage.percentage }}

+
+
+
+ +
+
+

Uso de CPU

+
+
+
+

Usado: {{ cpuUsage.percentage }}

+
+ +

Servicios

  • - + {{ service.name }}: - Activo - Detenido - No accesible - {{ service.status }} - + Activo + Detenido + No accesible + {{ service.status }} + +
    • +
+
+ +
+

Procesos

+
    +
  • + + {{ process.name }}: {{ process.status }}
+ +
@@ -83,59 +123,6 @@ -
-

Imágenes

-
- - Buscar nombre de imagen - - search - Pulsar 'enter' para buscar - -
- - - - - - - - - - - - - -
{{ column.header }} - - - {{ image[column.columnDef] ? 'check_circle' : 'cancel' }} - - - - {{ column.cell(image) }} - - Acciones - - - - - - - -
-
- - -
-
+ diff --git a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.ts b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.ts index f209816..3b77099 100644 --- a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.ts +++ b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.ts @@ -1,4 +1,4 @@ -import {Component, Inject} from '@angular/core'; +import {Component, Inject, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {HttpClient} from "@angular/common/http"; import {ToastrService} from "ngx-toastr"; @@ -17,7 +17,7 @@ import {MatDialog} from "@angular/material/dialog"; templateUrl: './main-repository-view.component.html', styleUrl: './main-repository-view.component.css' }) -export class MainRepositoryViewComponent { +export class MainRepositoryViewComponent implements OnInit { baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; repositoryForm: FormGroup; repositoryId: string | null = null; @@ -25,16 +25,20 @@ export class MainRepositoryViewComponent { loading: boolean = true; diskUsage: any = {}; servicesStatus: any = {}; + processesStatus: any = {}; diskUsageChartData: any[] = []; + ramUsageChartData: any[] = []; + ramUsage: any = {}; + cpuUsage: any = {}; alertMessage: string | null = null; length: number = 0; itemsPerPage: number = 10; page: number = 0; view: [number, number] = [800, 500]; gradient: boolean = true; - showLegend: boolean = true; showLabels: boolean = true; isDoughnut: boolean = true; + status: boolean = false; repositoryData: any = {}; colorScheme: any = { domain: ['#FF6384', '#3f51b5'] @@ -115,7 +119,6 @@ export class MainRepositoryViewComponent { comments: [response.comments], }); this.loading = false; - // Llamar searchImages() solo cuando la data de repository esté cargada this.searchImages(); }, (error) => { @@ -157,28 +160,33 @@ export class MainRepositoryViewComponent { loadStatus(): void { this.http.get(`${this.baseUrl}/image-repositories/server/${this.repositoryId}/status`).subscribe(data => { - const diskData = data.output.disk; - const servicesData = data.output.services; + if (!data.success) { + console.error('Error: No se pudo obtener los datos del servidor'); + this.status = false; + return; + } - this.diskUsage = { - total: diskData.total, - used: diskData.used, - available: diskData.available, - percentage: diskData.used_percentage - }; + this.status = true; + const { disk, services, ram, cpu, processes } = data.output; + + this.diskUsage = { ...disk }; this.diskUsageChartData = [ - { - name: 'Usado', - value: parseFloat(diskData.used) - }, - { - name: 'Disponible', - value: parseFloat(diskData.available) - } + { name: 'Usado', value: parseFloat(disk.used.replace('GB', '')) }, + { name: 'Disponible', value: parseFloat(disk.available.replace('GB', '')) } ]; - this.servicesStatus = servicesData; + this.ramUsage = { ...ram }; + this.ramUsageChartData = [ + { name: 'Usado', value: parseFloat(ram.used.replace('GB', '')) }, + { name: 'Disponible', value: parseFloat(ram.available.replace('GB', '')) } + ]; + + this.cpuUsage = { percentage: cpu.used_percentage }; + + this.servicesStatus = Object.entries(services).map(([name, status]) => ({ name, status })); + + this.processesStatus = Object.entries(processes).map(([name, status]) => ({ name, status })); }, error => { console.error('Error fetching status', error); @@ -186,10 +194,17 @@ export class MainRepositoryViewComponent { } getServices(): { name: string, status: string }[] { - return Object.keys(this.servicesStatus).map(key => ({ - name: key, - status: this.servicesStatus[key] - })); + if (!this.status) { + return []; + } + return this.servicesStatus ? this.servicesStatus : []; + } + + getProcesses(): { name: string, status: string }[] { + if (!this.status) { + return []; + } + return this.processesStatus ? this.processesStatus : []; } searchImages(): void { @@ -207,64 +222,6 @@ export class MainRepositoryViewComponent { ); } - editImage(event: MouseEvent, image: any): void { - event.stopPropagation(); - this.dialog.open(CreateImageComponent, { - width: '800px', - data: image['@id'] - }).afterClosed().subscribe(() => this.searchImages()); - } - - deleteImage(image: any): void { - this.dialog.open(DeleteModalComponent, { - width: '300px', - data: { name: image.name }, - }).afterClosed().subscribe((result) => { - if (result) { - this.http.delete(`${this.apiUrl}/server/${image.uuid}/delete`).subscribe({ - next: () => { - this.toastService.success('Imagen eliminada con éxito'); - this.searchImages(); - }, - error: (error) => { - this.toastService.error(error.error['hydra:description']); - console.error('Error al eliminar la imagen:', error); - } - }); - } - }); - } - - loadImageAlert(image: any): Observable { - return this.http.get(`${this.apiUrl}/server/${image.uuid}/get`, {}); - } - - showImageInfo(event: MouseEvent, image:any) { - event.stopPropagation(); - this.loadImageAlert(image).subscribe( - response => { - this.alertMessage = response.output; - - this.dialog.open(ServerInfoDialogComponent, { - width: '600px', - data: { - message: this.alertMessage - } - }); - }, - error => { - this.toastService.error(error.error['hydra:description']); - } - ); - } - - onPageChange(event: any): void { - this.page = event.pageIndex; - this.itemsPerPage = event.pageSize; - this.length = event.length; - this.searchImages(); - } - loadAlert(): Observable { return this.http.get(`${this.baseUrl}/image-repositories/server/get-collection`); } @@ -280,29 +237,6 @@ export class MainRepositoryViewComponent { }); } - - toggleAction(image: any, action:string): void { - switch (action) { - case 'get-aux': - this.http.post(`${this.baseUrl}/images/server/${image.uuid}/create-aux-files`, {}).subscribe({ - next: () => { - this.toastService.success('Petición de creación de archivos auxiliares enviada'); - this.searchImages() - }, - error: (error) => { - this.toastService.error(error.error['hydra:description']); - } - }); - break; - case 'delete': - this.deleteImage(image); - break; - default: - console.error('Acción no soportada:', action); - break; - } - } - openImageInfoDialog() { this.loadAlert().subscribe( response => { diff --git a/ogWebconsole/src/app/components/repositories/repositories.component.css b/ogWebconsole/src/app/components/repositories/repositories.component.css index 16117cb..8207143 100644 --- a/ogWebconsole/src/app/components/repositories/repositories.component.css +++ b/ogWebconsole/src/app/components/repositories/repositories.component.css @@ -100,3 +100,10 @@ table { margin: 8px 8px 8px 0; } +.header-container-title { + flex-grow: 1; + text-align: left; + margin-left: 1em; +} + + diff --git a/ogWebconsole/src/app/components/repositories/repositories.component.html b/ogWebconsole/src/app/components/repositories/repositories.component.html index debcfd6..a8dbde6 100644 --- a/ogWebconsole/src/app/components/repositories/repositories.component.html +++ b/ogWebconsole/src/app/components/repositories/repositories.component.html @@ -2,7 +2,11 @@ -

Administrar repositorios

+
+

+ {{ 'repositoryTitle' | translate }} +

+
@@ -11,14 +15,20 @@
- Buscar nombre de imagen + Buscar nombre de repositorio search Pulsar 'enter' para buscar + + Buscar IP de repositorio + + search + Pulsar 'enter' para buscar +
- +
- diff --git a/ogWebconsole/src/app/components/repositories/repositories.component.ts b/ogWebconsole/src/app/components/repositories/repositories.component.ts index 20229db..e497435 100644 --- a/ogWebconsole/src/app/components/repositories/repositories.component.ts +++ b/ogWebconsole/src/app/components/repositories/repositories.component.ts @@ -8,6 +8,7 @@ import {DeleteModalComponent} from "../../shared/delete_modal/delete-modal/delet import { JoyrideService } from 'ngx-joyride'; import {CreateRepositoryComponent} from "./create-repository/create-repository.component"; import { Router } from '@angular/router'; +import {ImportImageComponent} from "./import-image/import-image.component"; @Component({ selector: 'app-repositories', @@ -91,6 +92,16 @@ export class RepositoriesComponent { this.router.navigate(['repository', repository.uuid]); } + importImage(event: MouseEvent, repository: any): void { + event.stopPropagation(); + this.dialog.open(ImportImageComponent, { + width: '600px', + data: { repository } + }).afterClosed().subscribe(() => { + this.search(); + }); + } + deleteRepository(event: MouseEvent,command: any): void { event.stopPropagation(); this.dialog.open(DeleteModalComponent, { diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json index 72c162a..250997a 100644 --- a/ogWebconsole/src/locale/en.json +++ b/ogWebconsole/src/locale/en.json @@ -275,6 +275,7 @@ "ogliveColumn": "OgLive", "selectImageOption": "Select image", "selectOgLiveOption": "Select OgLive", + "repositoryTitle": "Admin Repository", "saveAssociationsButton": "Save Associations", "partitionAssistantTitle": "Partition assistant", "diskSizeLabel": "Size", diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json index 9d226a3..aab2787 100644 --- a/ogWebconsole/src/locale/es.json +++ b/ogWebconsole/src/locale/es.json @@ -300,6 +300,7 @@ "internalUnits": "Unidades internas", "noResultsMessage": "No hay resultados para mostrar.", "imagesTitle": "Administrar imágenes", + "repositoryTitle": "Administrar repositorios", "addImageButton": "Añadir imagen", "searchNameDescription": "Busca imágenes por nombre para encontrar rápidamente una imagen específica.", "searchDefaultDescription": "Filtra las imágenes para mostrar solo las imágenes por defecto o no por defecto.",
{{ column.header }} @@ -30,9 +40,10 @@ Acciones - - + + +