Updated client view

ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css

@@ -5,16 +5,6 @@
   padding: 10px;
 }
 
-.client-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
 .client-icon {
   flex-shrink: 0;
   margin-right: 20px;
@@ -63,7 +53,6 @@
   justify-content: center;
 }
 
-
 .icon-pc {
   font-size: 25px;
   color: #3b82f6;
@@ -85,9 +74,7 @@
 }
 
 .info-section {
-  margin-bottom: 30px;
   background-color: #fff;
-  padding: 20px;
   border-radius: 12px;
 }
 

ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html

@@ -12,71 +12,64 @@
   </mat-menu>
 </div>
 
-<mat-tab-group dynamicHeight>
-  <mat-tab label="Datos generales">
-    <div *ngIf="loading" class="loading-container">
-      <mat-spinner></mat-spinner>
-    </div>
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>
 
-    <div *ngIf="!loading" class="client-info">
-      <div class="info-section">
-        <div class="two-column-table">
-          <div class="table-row" *ngFor="let clientData of generalData">
-            <div class="column property">{{ clientData?.property }}</div>
-            <div class="column value">{{ clientData?.value }}</div>
-          </div>
-        </div>
-        <div class="two-column-table">
-          <div class="table-row" *ngFor="let clientData of networkData">
-            <div class="column property">{{ clientData?.property }}</div>
-            <div class="column value">{{ clientData?.value }}</div>
-          </div>
-        </div>
+<div *ngIf="!loading" class="client-info">
+  <div class="info-section">
+    <div class="two-column-table">
+      <div class="table-row" *ngFor="let clientData of generalData">
+        <div class="column property">{{ clientData?.property }}</div>
+        <div class="column value">{{ clientData?.value }}</div>
       </div>
     </div>
-  </mat-tab>
-  <mat-tab label="Discos/Particiones">
-    <div class="header-container">
-      <h2 class="title" i18n="@@adminImagesTitle">Discos/Particiones</h2>
+    <div class="two-column-table">
+      <div class="table-row" *ngFor="let clientData of networkData">
+        <div class="column property">{{ clientData?.property }}</div>
+        <div class="column value">{{ clientData?.value }}</div>
+      </div>
     </div>
+  </div>
+</div>
+<div class="header-container">
+  <h2 class="title" i18n="@@adminImagesTitle">Discos/Particiones</h2>
+</div>
 
-    <div class="table-container">
-      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-        <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-          <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
-          <td mat-cell *matCellDef="let image" >
-            <ng-container *ngIf="column.columnDef !== 'size'">
-              {{ column.cell(image) }}
-            </ng-container>
-            <ng-container *ngIf="column.columnDef === 'size'">
-                <mat-chip color="primary" >
-                  {{ (image.size / 1024).toFixed(2) }} GB
-                </mat-chip>
-            </ng-container>
-          </td>
+<div class="table-container">
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
+      <td mat-cell *matCellDef="let image" >
+        <ng-container *ngIf="column.columnDef !== 'size'">
+          {{ column.cell(image) }}
         </ng-container>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-      </table>
+        <ng-container *ngIf="column.columnDef === 'size'">
+          <mat-chip color="primary" >
+            {{ (image.size / 1024).toFixed(2) }} GB
+          </mat-chip>
+        </ng-container>
+      </td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</div>
+
+<div class="charts-wrapper">
+  <ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
+    <div class="charts-row">
+      <div *ngFor="let disk of chartDisk" class="disk-usage">
+        <ngx-charts-pie-chart
+          [view]="view"
+          [results]="disk.chartData"
+          [legend]="showLegend">
+        </ngx-charts-pie-chart>
+
+        <h3>Disco {{ disk.diskNumber }}</h3>
+        <p>Usado: {{ (disk.used).toFixed(2) }} GB ({{ disk.percentage }}%)</p>
+        <p>Total: {{ disk.total }} GB</p>
+      </div>
     </div>
-
-    <div class="charts-wrapper">
-      <ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
-        <div class="charts-row">
-          <div *ngFor="let disk of chartDisk" class="disk-usage">
-            <ngx-charts-pie-chart
-              [view]="view"
-              [results]="disk.chartData"
-              [legend]="showLegend">
-            </ngx-charts-pie-chart>
-
-            <h3>Disco {{ disk.diskNumber }}</h3>
-            <p>Usado: {{ (disk.used).toFixed(2) }} GB ({{ disk.percentage }}%)</p>
-            <p>Total: {{ disk.total }} GB</p>
-          </div>
-        </div>
-      </ng-container>
-    </div>
-
-  </mat-tab>
-</mat-tab-group>
+  </ng-container>
+</div>

ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts

@@ -110,26 +110,22 @@ export class ClientMainViewComponent implements OnInit {
   updateGeneralData() {
     this.generalData = [
       { property: 'Nombre', value: this.clientData?.name || '' },
-      { property: 'Uuid', value: this.clientData?.uuid || '' },
       { property: 'IP', value: this.clientData?.ip || '' },
       { property: 'MAC', value: this.clientData?.mac || '' },
       { property: 'Nº de serie', value: this.clientData?.serialNumber || '' },
-      { property: 'Netiface', value: this.clientData?.netiface || '' },
+      { property: 'Netiface', value: this.clientData?.netiface || this.clientData?.organizationalUnit?.networkSettings?.netiface || '' },
       { property: 'Perfil hardware', value: this.clientData?.hardwareProfile?.description || '' },
-      { property: 'Menú', value: this.clientData?.menu?.description || '' },
     ];
   }
 
   updateNetworkData() {
     this.networkData = [
+      { property: 'Pxe', value: this.clientData?.template?.name || '' },
       { property: 'Remote Pc', value: this.clientData.remotePc || '' },
       { property: 'Subred', value: this.clientData?.subnet || '' },
       { property: 'OGlive', value: this.clientData?.ogLive?.name || '' },
       { property: 'Autoexec', value: '' },
       { property: 'Repositorio', value: this.clientData?.repository?.name || '' },
-      { property: 'Validación', value: this.clientData?.organizationalUnit?.networkSettings?.validation || '' },
-      { property: 'Pxe', value: this.clientData?.template?.name || '' },
-      { property: 'Creado por', value: this.clientData?.createdBy || '' }
     ];
   }
 

ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html

@@ -1,5 +1,5 @@
 <div class="header-container">
-  <h2 class="title" i18n="@@subnetsTitle">Deploy imagen en {{ clientName }}</h2>
+  <h2 class="title" i18n="@@subnetsTitle">Desplegar imagen en {{ clientName }}</h2>
   <div class="subnets-button-row">
     <button mat-flat-button color="primary" (click)="save()">Guardar</button>
   </div>
@@ -25,7 +25,7 @@
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>Seleccione método de deploy</mat-label>
       <mat-select [(ngModel)]="selectedMethod" name="selectedMethod">
-        <mat-option *ngFor="let method of deployMethods" [value]="method">{{ method }}</mat-option>
+        <mat-option *ngFor="let method of deployMethods" [disabled]="method !== 'unicast'"  [value]="method">{{ method }}</mat-option>
       </mat-select>
     </mat-form-field>
   </div>

ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts

@@ -3,7 +3,7 @@ import {MatTableDataSource} from "@angular/material/table";
 import {SelectionModel} from "@angular/cdk/collections";
 import {HttpClient} from "@angular/common/http";
 import {ToastrService} from "ngx-toastr";
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 
 @Component({
   selector: 'app-deploy-image',
@@ -92,7 +92,8 @@ export class DeployImageComponent {
   constructor(
     private http: HttpClient,
     private toastService: ToastrService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private router: Router,
   ) {}
 
   ngOnInit() {
@@ -134,7 +135,7 @@ export class DeployImageComponent {
   }
 
   loadImages() {
-    const url = `${this.baseUrl}/images?page=1&itemsPerPage=1000`;
+    const url = `${this.baseUrl}/images?status=success&page=1&itemsPerPage=1000`;
     this.http.get(url).subscribe(
       (response: any) => {
         this.images = response['hydra:member'];
@@ -162,6 +163,7 @@ export class DeployImageComponent {
       .subscribe({
           next: (response) => {
             this.toastService.success('Imagen creada exitosamente');
+            this.router.navigate(['/images']);
           },
           error: (error) => {
             console.error('Error:', error);