From adc11df0088d77ffe674682864b67aabd0c945ca Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Mon, 10 Mar 2025 16:21:03 +0100
Subject: [PATCH] Improvements repository UX

---
 .../main-repository-view.component.css        |  2 +-
 .../main-repository-view.component.html       | 59 ++++++++++---------
 .../main-repository-view.component.ts         |  1 -
 .../repositories/repositories.component.css   |  4 +-
 .../repository-images.component.html          |  2 +-
 .../repository-images.component.ts            |  6 +-
 6 files changed, 38 insertions(+), 36 deletions(-)

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 4fa0077..c9f5f5c 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
@@ -382,4 +382,4 @@ table {
   .top-row .card {
     max-width: 100%;
   }
-}
\ No newline at end of file
+}
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 c2b6da9..e545a96 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,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>
 
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 6d2433c..9bd9ae0 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
@@ -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;
diff --git a/ogWebconsole/src/app/components/repositories/repositories.component.css b/ogWebconsole/src/app/components/repositories/repositories.component.css
index d7f88b1..75b57f7 100644
--- a/ogWebconsole/src/app/components/repositories/repositories.component.css
+++ b/ogWebconsole/src/app/components/repositories/repositories.component.css
@@ -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 {
diff --git a/ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.html b/ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.html
index b59ce8d..5bec694 100644
--- a/ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.html
+++ b/ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.html
@@ -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>
diff --git a/ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.ts b/ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.ts
index 170ff11..85e7ee6 100644
--- a/ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.ts
+++ b/ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.ts
@@ -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) => {