refs #1157. Added env_vars route

ogWebconsole/src/app/app-routing.module.ts

@@ -39,6 +39,7 @@ import {
 import {
   MainRepositoryViewComponent
 } from "./components/repositories/main-repository-view/main-repository-view.component";
+import {EnvVarsComponent} from "./components/admin/env-vars/env-vars.component";
 const routes: Routes = [
   { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
 {
@@ -48,6 +49,7 @@ const routes: Routes = [
     { path: 'dashboard', component: DashboardComponent },
     { path: 'admin', component: AdminComponent },
     { path: 'users', component: UsersComponent },
+    { path: 'env-vars', component: EnvVarsComponent },
     { path: 'user-groups', component: RolesComponent },
     { path: 'groups', component: GroupsComponent },
     { path: 'pxe-images', component: PXEimagesComponent },

ogWebconsole/src/app/app.module.ts

@@ -122,6 +122,7 @@ import { DeployImageComponent } from './components/groups/components/client-main
 import { MainRepositoryViewComponent } from './components/repositories/main-repository-view/main-repository-view.component';
 import { ExecuteCommandOuComponent } from './components/groups/shared/execute-command-ou/execute-command-ou.component';
 import { JoyrideModule } from 'ngx-joyride';
+import { EnvVarsComponent } from './components/admin/env-vars/env-vars.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -200,6 +201,7 @@ import { JoyrideModule } from 'ngx-joyride';
     DeployImageComponent,
     MainRepositoryViewComponent,
     ExecuteCommandOuComponent,
+    EnvVarsComponent,
   ],
   bootstrap: [AppComponent],
     imports: [BrowserModule,

ogWebconsole/src/app/components/admin/env-vars/env-vars.component.css

@@ -0,0 +1,38 @@
+.env-settings {
+  padding: 16px;
+
+  h1 {
+    margin-bottom: 16px;
+  }
+
+  .mat-table {
+    margin-bottom: 16px;
+    width: 100%;
+  }
+
+  .value-input {
+    width: 100%;
+  }
+
+  .actions {
+    display: flex;
+    gap: 16px;
+    justify-content: flex-end;
+    margin-top: 16px;
+
+    button {
+      min-width: 120px;
+    }
+  }
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
+.mat-elevation-z8 {
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+}

ogWebconsole/src/app/components/admin/env-vars/env-vars.component.html

@@ -0,0 +1,29 @@
+<div class="env-settings">
+  <h1>Editar Variables de Entorno</h1>
+
+  <mat-table [dataSource]="envVars" class="mat-elevation-z8">
+    <!-- Nombre de la variable -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef> Variable </mat-header-cell>
+      <mat-cell *matCellDef="let variable">{{ variable.name }}</mat-cell>
+    </ng-container>
+
+    <!-- Valor de la variable -->
+    <ng-container matColumnDef="value">
+      <mat-header-cell *matHeaderCellDef> Valor </mat-header-cell>
+      <mat-cell *matCellDef="let variable">
+        <mat-form-field class="value-input">
+          <input matInput [(ngModel)]="variable.value" />
+        </mat-form-field>
+      </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
+
+  <div class="actions" >
+    <button mat-raised-button color="primary" (click)="saveEnvVars()">Guardar Cambios</button>
+    <button mat-raised-button color="accent" (click)="loadEnvVars()">Recargar</button>
+  </div>
+</div>

ogWebconsole/src/app/components/admin/env-vars/env-vars.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvVarsComponent } from './env-vars.component';
+
+describe('EnvVarsComponent', () => {
+  let component: EnvVarsComponent;
+  let fixture: ComponentFixture<EnvVarsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [EnvVarsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EnvVarsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/admin/env-vars/env-vars.component.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {ToastrService} from "ngx-toastr";
+
+@Component({
+  selector: 'app-env-vars',
+  templateUrl: './env-vars.component.html',
+  styleUrl: './env-vars.component.css'
+})
+export class EnvVarsComponent {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
+  envVars: { name: string; value: string }[] = [];
+  displayedColumns: string[] = ['name', 'value'];
+
+  private apiUrl = `${this.baseUrl}/env-vars`;
+
+  constructor(
+    private http: HttpClient,
+    private toastService: ToastrService,
+  ) {}
+
+  ngOnInit(): void {
+    this.loadEnvVars();
+  }
+
+  loadEnvVars(): void {
+    this.http.get<{ vars: Record<string, string> }>(this.apiUrl).subscribe({
+      next: (response) => {
+        this.envVars = Object.entries(response.vars).map(([name, value]) => ({ name, value }));
+      },
+      error: (err) => {
+        console.error('Error al cargar las variables de entorno:', err);
+        this.toastService.error('No se pudieron cargar las variables de entorno.');
+      }
+    });
+  }
+
+  saveEnvVars(): void {
+    const vars = this.envVars.reduce((acc, variable) => {
+      acc[variable.name] = variable.value;
+      return acc;
+    }, {} as Record<string, string>);
+
+    this.http.post(this.apiUrl, { vars }).subscribe({
+      next: () => {
+        this.toastService.success('Variables de entorno guardadas correctamente.');
+      },
+      error: (err) => {
+        console.error('Error al guardar las variables de entorno:', err);
+        this.toastService.error('No se pudieron cargar las variables de entorno.');
+      }
+    });
+  }
+}

ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css

@@ -192,7 +192,7 @@ mat-spinner {
   max-width: 180px;
   height: 100%;
   padding: 10px;
-  margin: 5px 5px 10px;
+  margin: 10px 10px 10px 10px;
   border-radius: 8px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   display: flex;

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

@@ -69,7 +69,7 @@
             </ngx-charts-pie-chart>
 
             <h3>Disco {{ disk.diskNumber }}</h3>
-            <p>Usado: {{ disk.used }} GB ({{ disk.percentage }}%)</p>
+            <p>Usado: {{ (disk.used).toFixed(2) }} GB ({{ disk.percentage }}%)</p>
             <p>Total: {{ disk.total }} GB</p>
           </div>
         </div>

ogWebconsole/src/app/components/groups/groups.component.css

@@ -195,6 +195,7 @@ mat-spinner {
   width: 100%;
   max-width: 250px;
   height: 250px;
+}
 
 .paginator-container {
   display: flex;

ogWebconsole/src/app/layout/header/header.component.html

@@ -27,8 +27,10 @@
       <button mat-menu-item routerLink="/user-groups" i18n="@@rolesMenuItem" matTooltip="Gestionar roles de usuario" matTooltipShowDelay="1000">
         Roles
       </button>
+      <button mat-menu-item routerLink="/env-vars" i18n="@@rolesMenuItem" matTooltip="Gestionar variables de entorno" matTooltipShowDelay="1000">
+        Variables de entorno
+      </button>
     </mat-menu>
-
     <button mat-flat-button color="warn" routerLink="/auth/login" i18n="@@logout"
       matTooltip="Cerrar sesión y salir de la aplicación" matTooltipShowDelay="1000">
       Salir