opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improvements repository UX

pull/18/head
Manuel Aranda Rosales 2025-03-10 16:21:03 +01:00
parent 83c3b3caed
commit adc11df008
6 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.css
View File

@ -382,4 +382,4 @@ table {
.top-row .card {
max-width: 100%;
}
}
}

59
ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html
View File

@ -1,37 +1,10 @@
<mat-tab-group dynamicHeight>
<mat-tab label="Estado servidor">
<app-loading [isLoading]="loading"></app-loading>
<div class="server-status">
<h2>OgRepository Server Status</h2>
<div class="row top-row">
<div class="card">
<h3>Uso de Disco</h3>
<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData"
[gradient]="gradient" [doughnut]="isDoughnut" [labels]="showLabels">
</ngx-charts-pie-chart>
<div class="info">
<p>Total: {{ diskUsage.total }}</p>
<p>Ocupado: {{ diskUsage.used }}</p>
<p>Disponible: {{ diskUsage.available }}</p>
<p>Ocupado (%): {{ diskUsage.percentage }}</p>
</div>
</div>
<div class="card">
<h3>Uso de RAM</h3>
<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="ramUsageChartData" [gradient]="gradient"
[doughnut]="isDoughnut" [labels]="showLabels">
</ngx-charts-pie-chart>
<div class="info">
<p>Total: {{ ramUsage.total }}</p>
<p>Ocupado: {{ ramUsage.used }}</p>
<p>Disponible: {{ ramUsage.available }}</p>
<p>Ocupado (%): {{ ramUsage.percentage }}</p>
</div>
</div>
</div>
<div class="row bottom-row">
<div class="card">
<h3>Uso de CPU</h3>
@ -74,6 +47,36 @@
</ul>
</div>
</div>
<div class="row top-row">
<div class="card">
<h3>Uso de Disco</h3>
<div class="info">
<ngx-charts-pie-chart [scheme]="colorScheme" [results]="diskUsageChartData"
[gradient]="gradient" [doughnut]="isDoughnut" [labels]="showLabels">
</ngx-charts-pie-chart>
<p>Total: {{ diskUsage.total }}</p>
<p>Ocupado: {{ diskUsage.used }}</p>
<p>Disponible: {{ diskUsage.available }}</p>
<p>Ocupado (%): {{ diskUsage.percentage }}</p>
</div>
</div>
<div class="card">
<h3>Uso de RAM</h3>
<div class="info">
<ngx-charts-pie-chart [scheme]="colorScheme" [results]="ramUsageChartData" [gradient]="gradient"
[doughnut]="isDoughnut" [labels]="showLabels">
</ngx-charts-pie-chart>
<p>Total: {{ ramUsage.total }}</p>
<p>Ocupado: {{ ramUsage.used }}</p>
<p>Disponible: {{ ramUsage.available }}</p>
<p>Ocupado (%): {{ ramUsage.percentage }}</p>
</div>
</div>
</div>
</div>
</mat-tab>

1
ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.ts
View File

@ -32,7 +32,6 @@ export class MainRepositoryViewComponent implements OnInit {
length: number = 0;
itemsPerPage: number = 10;
page: number = 0;
view: [number, number] = [800, 500];
gradient: boolean = true;
showLabels: boolean = true;
isDoughnut: boolean = true;

4
ogWebconsole/src/app/components/repositories/repositories.component.css
View File

@ -50,13 +50,13 @@ table {
width: 100%;
}
.search-container {
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 1.5rem 0rem 1.5rem 0rem;
box-sizing: border-box;
margin: 1.5rem 0rem 1.5rem 0rem;
}
.search-string {

2
ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.html
View File

@ -74,7 +74,7 @@
<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, 'backup')">Realizar backup </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'status')">Checkear stado imagen </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'status')">Checkear estado imagen </button>
</mat-menu>
</td>
</ng-container>

6
ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.ts
View File

@ -166,7 +166,7 @@ export class RepositoryImagesComponent implements OnInit {
switch (action) {
case 'get-aux':
this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/create-aux-files`, {}).subscribe({
next: () => {
next: (message) => {
this.toastService.success('Petición de creación de archivos auxiliares enviada');
this.search()
},
@ -239,8 +239,8 @@ export class RepositoryImagesComponent implements OnInit {
break;
case 'status':
this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/status`, {}).subscribe({
next: () => {
this.toastService.success('Integridad de la imagen comprobada con éxito');
next: (response: any) => {
this.toastService.info(response?.output);
this.search()
},
error: (error) => {