Merge branch 'develop' of ssh://ognproject.evlt.uma.es:21987/opengnsys/oggui into develop

2025-03-10 16:21:43 +01:00 · 2025-03-10 16:21:43 +01:00 · 70319d718f
parent adc11df008 8e10d135e1
commit 70319d718f
5 changed files with 148 additions and 108 deletions
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@ -258,11 +258,11 @@ mat-tree mat-tree-node.disabled:hover {

 .client-name {
  display: block;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
+  font-weight: 500;
  margin-bottom: 5px;
  margin-top: 5px;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }

 .filters-container {
@ -319,11 +319,26 @@ mat-tree mat-tree-node.disabled:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }

-.client-image {
-  width: 35px;
-  height: 35px;
+.client-details {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: 4px;
+}
+
+.action-icons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1px;
  margin-top: 10px;
-  margin-bottom: 8px;
+}
+
+.client-status-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }

 .client-ip {
@ -338,11 +353,9 @@ mat-tree mat-tree-node.disabled:hover {
  gap: 4px;
 }

-.action-icons {
-  display: flex;
-  justify-content: center;
-  gap: 1px;
-  margin-top: 10px;
+.sync-spinner {
+  margin-left: 1em;
+  margin-right: 1em;
 }

 .mat-elevation-z8 {
@ -360,10 +373,6 @@ mat-tree mat-tree-node.disabled:hover {
  position: relative;
 }

-.client-details {
-  margin-top: 4px;
-}
-
@media (max-width: 1560px) {
  .clients-view-header {
    display: flex;
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@ -60,12 +60,14 @@
              </button>
            </mat-form-field>
            <mat-form-field class="form-field search-select" appearance="outline">
-              <mat-select placeholder="Buscar por estado..." #clientSearchStatusInput (selectionChange)="onClientFilterStatusInput($event.value)">
+              <mat-select placeholder="Buscar por estado..." #clientSearchStatusInput
+                (selectionChange)="onClientFilterStatusInput($event.value)">
                <mat-option *ngFor="let option of status" [value]="option.value">
                  {{ option.name }}
                </mat-option>
              </mat-select>
-              <button *ngIf="clientSearchStatusInput.value" mat-icon-button matSuffix aria-label="Clear tree search" (click)="clearStatusFilter($event, clientSearchStatusInput)">
+              <button *ngIf="clientSearchStatusInput.value" mat-icon-button matSuffix aria-label="Clear tree search"
+                (click)="clearStatusFilter($event, clientSearchStatusInput)">
                <mat-icon>close</mat-icon>
              </button>
            </mat-form-field>
@ -226,7 +228,7 @@
                      <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
                        [checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
                      </mat-checkbox>
-                      <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
+                      <img style="margin-top: 0.5em;" [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
                        class="client-image" />

                      <div class="client-details">
@ -234,14 +236,6 @@
                        <span class="client-ip">{{ client.ip }}</span>
                        <span class="client-ip">{{ client.mac }}</span>
                        <div class="action-icons">
-                          <button *ngIf="(!syncStatus || syncingClientId !== client.uuid)" mat-icon-button
-                            color="primary" (click)="getStatus(client, selectedNode)">
-                            <mat-icon>sync</mat-icon>
-                          </button>
-
-                          <button *ngIf="syncStatus && syncingClientId === client.uuid" mat-icon-button color="primary">
-                            <mat-spinner diameter="24"></mat-spinner>
-                          </button>

                          <app-execute-command [clientData]="[client]" [buttonType]="'icon'" [icon]="'terminal'"
                            [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"></app-execute-command>
@ -252,6 +246,10 @@
                            <mat-icon>more_vert</mat-icon>
                          </button>

+                          <span class="sync-spinner" *ngIf="syncStatus && syncingClientId === client.uuid">
+                            <mat-spinner diameter="24"></mat-spinner>
+                          </span>
+
                          <mat-menu #clientMenu="matMenu">
                            <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
                              <mat-icon>edit</mat-icon>
@ -261,6 +259,11 @@
                              <mat-icon>visibility</mat-icon>
                              <span>{{ 'viewDetails' | translate }}</span>
                            </button>
+                            <button mat-menu-item *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
+                              (click)="getStatus(client, selectedNode)">
+                              <mat-icon>sync</mat-icon>
+                              <span>{{ 'sync' | translate }}</span>
+                            </button>
                            <button mat-menu-item (click)="onDeleteClick($event, client)">
                              <mat-icon>delete</mat-icon>
                              <span>{{ 'delete' | translate }}</span>
@ -300,8 +303,13 @@
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'status' | translate }} </th>
                    <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                      matTooltipPosition="left" matTooltipShowDelay="500">
+                      <div class="client-status-container">
                        <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
                          class="client-image" />
+                        <span *ngIf="syncStatus && syncingClientId === client.uuid">
+                          <mat-spinner diameter="24"></mat-spinner>
+                        </span>
+                      </div>
                    </td>
                  </ng-container>

@ -372,7 +380,8 @@
                      </mat-menu>
                    </td>
                  </ng-container>
-                  <tr mat-header-row style="background-color: #f3f3f3;" *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                  <tr mat-header-row style="background-color: #f3f3f3;"
+                    *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                </table>
              </section>
--- a/ogWebconsole/src/app/components/images/create-image/create-image.component.css
+++ b/ogWebconsole/src/app/components/images/create-image/create-image.component.css
@ -1,8 +1,25 @@
-.dialog-content {
+.create-image-container {
  display: flex;
  flex-direction: column;
-  gap: 16px;
-  /* Espacio entre los elementos del formulario */
+  padding: 1rem;
+}
+
+.loading-spinner {
+  display: block;
+  margin: 0 auto;
+}
+
+.mat-dialog-content.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.mat-dialog-content {
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  padding-top: 1em;
 }

 .image-form {
--- a/ogWebconsole/src/app/components/images/create-image/create-image.component.html
+++ b/ogWebconsole/src/app/components/images/create-image/create-image.component.html
@ -1,13 +1,13 @@
-<app-loading [isLoading]="loading"></app-loading>
-
-<h2 mat-dialog-title>{{ imageId ? 'Editar' : 'Crear' }} imagen</h2>
-
-<mat-dialog-content class="dialog-content">
-  <form [formGroup]="imageForm" (ngSubmit)="saveImage()" class="image-form">
+<div class="create-image-container">
+  <h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} imagen</h2>
+  <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
+    <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
+    <form *ngIf="!loading" [formGroup]="imageForm" (ngSubmit)="saveImage()" class="image-form">
      <mat-card *ngIf="showWarning" class="warning-card">
        <mat-card-content>
          <mat-icon color="warn">warning</mat-icon>
-        Ha marcado la casilla <strong>"Imagen Global"</strong>. Se transferirá la imagen al resto de repositorios en el
+          Ha marcado la casilla <strong>"Imagen Global"</strong>. Se transferirá la imagen al resto de repositorios en
+          el
          caso de que no exista previamente.
        </mat-card-content>
      </mat-card>
@ -63,10 +63,10 @@
        <p>Código de partición: {{ partitionInfo['partitionCode'] }}</p>
      </div>
    </form>
-
-</mat-dialog-content>
+  </div>

  <mat-dialog-actions class="action-container">
    <button class="ordinary-button" (click)="close()">{{ 'cancelButton' | translate }}</button>
-  <button class="submit-button" (click)="saveImage()">{{ 'saveButton' | translate }}</button>
+    <button class="submit-button" (click)="saveImage()" [disabled]="loading">{{ 'saveButton' | translate }}</button>
  </mat-dialog-actions>
+</div>
--- a/ogWebconsole/src/app/components/images/create-image/create-image.component.ts
+++ b/ogWebconsole/src/app/components/images/create-image/create-image.component.ts
@ -17,6 +17,7 @@ export class CreateImageComponent implements OnInit {
  softwareProfiles: any[] = [];
  repositories: any[] = [];
  loading: boolean = false;
+  isEditMode: boolean = false;
  partitionInfo: { [key: string]: string } = {};
  showWarning: boolean = false;

@ -42,30 +43,34 @@ export class CreateImageComponent implements OnInit {
  ngOnInit() {
    this.loading = true;
    if (this.data) {
-      this.load()
+      this.isEditMode = true;
+      this.load();
+    } else {
+      this.loading = false;
    }
    this.fetchSoftwareProfiles();
    this.fetchRepositories();
-    this.loading = false;
  }

  load(): void {
    this.dataService.getImage(this.data).subscribe({
      next: (response) => {
-        this.imageForm = this.fb.group({
-          name: [response.name, Validators.required],
-          description: [response.description],
-          comments: [response.comments],
-          remotePc: [response.remotePc],
-          isGlobal: [response.isGlobal],
-          softwareProfile: [response.softwareProfile ? response.softwareProfile['@id'] : null, Validators.required],
-          imageRepositories: [response.imageRepositories ? response.imageRepositories.map((r: any) => r.imageRepository['@id']) : [], Validators.required],
+        this.imageForm.patchValue({
+          name: response.name,
+          description: response.description,
+          comments: response.comments,
+          remotePc: response.remotePc,
+          isGlobal: response.isGlobal,
+          softwareProfile: response.softwareProfile ? response.softwareProfile['@id'] : null,
+          imageRepositories: response.imageRepositories ? response.imageRepositories.map((r: any) => r.imageRepository['@id']) : [],
        });
        this.imageId = response['@id'];
        this.partitionInfo = response.partitionInfo;
+        this.loading = false;
      },
      error: (err) => {
        console.error('Error fetching remote calendar:', err);
+        this.loading = false;
      }
    });
  }