Solve conflics

2024-10-25 10:50:58 +02:00 · 2024-10-25 10:50:58 +02:00 · 48636d0933
parent 60a96170e1 2f3e119b54
commit 48636d0933
48 changed files with 1080 additions and 317 deletions
--- a/ogWebconsole/Dockerfile
+++ b/ogWebconsole/Dockerfile
@ -1,4 +1,4 @@
-FROM node:22.1.0
+FROM node:22.10-alpine

 WORKDIR /app

--- a/ogWebconsole/Dockerfile-testing
+++ b/ogWebconsole/Dockerfile-testing
@ -0,0 +1,15 @@
+FROM node:22.10
+
+WORKDIR /app
+RUN apt -y  update && apt -y install chromium 
+
+RUN npm install -g npm@latest
+
+RUN npm install -g @angular/cli@^12.0.0
+
+COPY . /app
+RUN npm install
+
+EXPOSE 4200
+
+CMD ["ng", "serve", "--host", "0.0.0.0", "--disable-host-check"]
--- a/ogWebconsole/Jenkinsfile
+++ b/ogWebconsole/Jenkinsfile
@ -3,9 +3,7 @@ pipeline {
    environment {
        DOCKER_REPO = "opengnsys"
        DOCKER_CREDENTIALS = credentials('docker-hub-credentials') 
-        DOCKER_TAG = "${env.BUILD_NUMBER}"
        DOCKER_IMAGE_NAME = "oggui"
-        BRANCH_NAME = "${GIT_BRANCH.split("/")[1]}"
    }
    stages {
        stage ('Checkout') {
@ -13,12 +11,47 @@ pipeline {
                checkout scm
            }
        }   
+        stage('Build Testing Image') {
+            steps {
+                sh "printenv"
+                echo 'Building....'
+                script {
+                    def DOCKER_TAG = "${env.BUILD_NUMBER}"
+                    
+                    dir('ogWebconsole') {
+                        IMAGE_ID = "${DOCKER_REPO}/${DOCKER_IMAGE_NAME}:${BRANCH_NAME}-${DOCKER_TAG}"
+                        IMAGE_ID_TESTING = "${DOCKER_REPO}/${DOCKER_IMAGE_NAME}:${BRANCH_NAME}-${DOCKER_TAG}-testing"
+                        if (BRANCH_NAME == 'main') {
+                            LATEST_ID = 'latest'
+                        }  else {
+                            LATEST_ID = "${DOCKER_REPO}/${DOCKER_IMAGE_NAME}:${BRANCH_NAME}-latest"
+                        }
+                        env.IMAGE_ID_TESTING = IMAGE_ID_TESTING
+                        env.IMAGE_ID = IMAGE_ID 
+                        env.LATEST_ID = LATEST_ID
+                        docker.build("${IMAGE_ID_TESTING}", "-f Dockerfile-testing .")
+                    }
+                }
+            }
+        }
+        stage('Testing') {
+            steps {
+                echo 'Running Tests....'
+                sh '''
+                    cd ogWebconsole
+                    mkdir -p test-results
+                    docker run -p 4200:4200 --name oggui-testing -e CHROME_BIN=/usr/bin/chromium -v $(pwd)/karma.conf.js:/app/karma.conf.js -v $(pwd)/.env:/app/.env -d $IMAGE_ID_TESTING
+                    docker exec oggui-testing ng test --watch=false --source-map=false --karma-config=karma.conf.js
+                '''
+            }
+        }
        stage('Build') {
            steps {
                echo 'Building....'
                script {
                    dir('ogWebconsole') {
-                        docker.build("${DOCKER_REPO}/${DOCKER_IMAGE_NAME}:${BRANCH_NAME}-${DOCKER_TAG}", "-f Dockerfile .")
+                        docker.build("${IMAGE_ID}", "-f Dockerfile .")
+                        docker.build("${LATEST_ID}", "-f Dockerfile .")
                    }
                }
            }
@ -28,12 +61,41 @@ pipeline {
                echo 'Pushing....'
                script {
                    docker.withRegistry('https://index.docker.io/v1/', 'docker-hub-credentials') {
-                        dir('ogWebconsole') {
-                            docker.image("${DOCKER_REPO}/${DOCKER_IMAGE_NAME}:${BRANCH_NAME}-${DOCKER_TAG}").push()
+                        docker.image("${IMAGE_ID}").push()
+                        docker.image("${LATEST_ID}").push()
                    }
                }
            }
        }
    }
+    post {
+        always {
+            echo 'Get test results....'
+            sh "docker cp oggui-testing:/app/test-results/ogGui-junit-report.xml ./test-results/ogGui-junit-report.xml"
+            sh "docker stop oggui-testing"
+            sh "docker rm oggui-testing"
+            junit '**/test-results/*.xml'
+            echo 'Cleaning up....'
+            sh "docker rmi ${IMAGE_ID} || true"
+            sh "docker rmi ${LATEST_ID} || true"
+            sh "docker rmi ${IMAGE_ID_TESTING} || true"
+            script {
+                def committerEmail = sh (
+                    script: "git show -s --pretty=%ae",
+                    returnStdout: true
+                ).trim()
+                def buildResult = currentBuild.currentResult
+                mail to: committerEmail, 
+                subject: "Opengnsys CI Build ${env.JOB_NAME} - ${env.BRANCH_NAME} - ${buildResult}", 
+                body: """
+                <h1>Opengnsys CI Build ${JOB_NAME} - ${BRANCH_NAME} - ${buildResult}</h1>
+                <p>Build Number: ${BUILD_NUMBER}</p>
+                <p>Build URL: ${BUILD_URL}</p>º
+
+                Saludos cordiales,
+                Opengnsys CI
+                """
+            }
+        }
    }
 }
--- a/ogWebconsole/karma.conf.js
+++ b/ogWebconsole/karma.conf.js
@ -0,0 +1,40 @@
+module.exports = function(config) {
+    config.set({
+      frameworks: ['jasmine', '@angular-devkit/build-angular'],
+      
+      plugins: [
+        require('karma-jasmine'),
+        require('karma-chrome-launcher'),
+        require('karma-jasmine-html-reporter'),
+        require('karma-coverage'),
+        require('karma-junit-reporter'),
+        require('@angular-devkit/build-angular/plugins/karma')
+      ],
+  
+      client: {
+        clearContext: false
+      },
+      
+      reporters: ['progress', 'kjhtml', 'junit'],
+      
+      junitReporter: {
+        outputDir: 'test-results',
+        outputFile: 'ogGui-junit-report.xml',
+        useBrowserName: false,
+      },
+      
+      port: 9876,
+      colors: true,
+      logLevel: config.LOG_INFO,
+      autoWatch: true,
+      browsers: ['ChromeHeadlessNoSandbox'],
+      customLaunchers: {
+        ChromeHeadlessNoSandbox: {
+          base: 'ChromeHeadless',
+          flags: ['--no-sandbox','--disable-setuid-sandbox']
+        }
+      },
+      singleRun: false,
+      restartOnFileChange: true
+    });
+  };
--- a/ogWebconsole/package-lock.json
+++ b/ogWebconsole/package-lock.json
@ -38,6 +38,7 @@
        "karma-coverage": "~2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "~2.1.0",
+        "karma-junit-reporter": "^2.0.1",
        "typescript": "~5.4.5"
      }
    },
@ -10027,6 +10028,22 @@
      "integrity": "sha512-VYz/BjjmC3klLJlLwA4Kw8ytk0zDSmbbDLNs794VnWmkcCB7I9aAL/D48VNQtmITyPvea2C3jdUMfc3kAoy0PQ==",
      "dev": true
    },
+    "node_modules/karma-junit-reporter": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/karma-junit-reporter/-/karma-junit-reporter-2.0.1.tgz",
+      "integrity": "sha512-VtcGfE0JE4OE1wn0LK8xxDKaTP7slN8DO3I+4xg6gAi1IoAHAXOJ1V9G/y45Xg6sxdxPOR3THCFtDlAfBo9Afw==",
+      "dev": true,
+      "dependencies": {
+        "path-is-absolute": "^1.0.0",
+        "xmlbuilder": "12.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      },
+      "peerDependencies": {
+        "karma": ">=0.9"
+      }
+    },
    "node_modules/karma-source-map-support": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz",
@ -14831,6 +14848,15 @@
        }
      }
    },
+    "node_modules/xmlbuilder": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-12.0.0.tgz",
+      "integrity": "sha512-lMo8DJ8u6JRWp0/Y4XLa/atVDr75H9litKlb2E5j3V3MesoL50EBgZDWoLT3F/LztVnG67GjPXLZpqcky/UMnQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
    "node_modules/y18n": {
      "version": "5.0.8",
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
--- a/ogWebconsole/package.json
+++ b/ogWebconsole/package.json
@ -40,6 +40,7 @@
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
+    "karma-junit-reporter": "^2.0.1",
    "typescript": "~5.4.5"
  }
 }
--- a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.html
+++ b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.html
@ -13,6 +13,12 @@
    <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
  </mat-form-field>
 </div>
+
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>
+
+<div *ngIf="!loading">
  <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>
@ -22,13 +28,19 @@
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
      <td mat-cell *matCellDef="let role" style="text-align: center;">
-      <button mat-icon-button color="primary" (click)="editRole(role)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
-      <button mat-icon-button color="warn" (click)="deleteRole(role)" i18n="@@buttonDelete" [disabled]="role.permissions.includes('ROLE_SUPER_ADMIN')"><mat-icon>delete</mat-icon></button>
+        <button mat-icon-button color="primary" (click)="editRole(role)" i18n="@@editImage"> 
+          <mat-icon>edit</mat-icon>
+        </button>
+        <button mat-icon-button color="warn" (click)="deleteRole(role)" i18n="@@buttonDelete" [disabled]="role.permissions.includes('ROLE_SUPER_ADMIN')">
+          <mat-icon>delete</mat-icon>
+        </button>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
+</div>
+
 <div class="paginator-container">
  <mat-paginator [length]="length"
                 [pageSize]="itemsPerPage"
--- a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.ts
+++ b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.ts
@ -1,13 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
-import { AddRoleModalComponent } from './add-role-modal/add-role-modal.component';
-import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
 import { DataService } from "./data.service";
-import {CreateCalendarComponent} from "../../../calendar/create-calendar/create-calendar.component";
 import { PageEvent } from "@angular/material/paginator";
+import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
+import { AddRoleModalComponent } from './add-role-modal/add-role-modal.component';

@Component({
  selector: 'app-roles',
@ -57,13 +56,16 @@ export class RolesComponent implements OnInit {
  }

  search() {
+    this.loading = true;
    this.http.get<any>(`${this.apiUrl}?&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
      (data) => {
        this.dataSource.data = data['hydra:member'];
        this.length = data['hydra:totalItems'];
+        this.loading = false;
      },
      (error) => {
-        console.error('Error fetching commands', error);
+        console.error('Error fetching roles', error);
+        this.loading = false;
      }
    );
  }
@ -114,7 +116,7 @@ export class RolesComponent implements OnInit {
    });
  }

-  onPageChange(event: any): void {
+  onPageChange(event: PageEvent): void {
    this.page = event.pageIndex;
    this.itemsPerPage = event.pageSize;
    this.length = event.length;
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.html
@ -13,8 +13,13 @@
    <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
  </mat-form-field>
 </div>
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>
+
+<div *ngIf="!loading">
+  <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 user"> {{ column.cell(user) }} </td>
@ -30,6 +35,8 @@
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
+</div>
+
 <div class="paginator-container">
  <mat-paginator [length]="length"
                 [pageSize]="itemsPerPage"
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.ts
@ -6,14 +6,12 @@ import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-mod
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
 import { DataService } from "./data.service";
-import {AddRoleModalComponent} from "../../roles/roles/add-role-modal/add-role-modal.component";

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
 })
-
 export class UsersComponent implements OnInit {
  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  dataSource = new MatTableDataSource<any>();
@ -61,13 +59,16 @@ export class UsersComponent implements OnInit {
  }

  search() {
+    this.loading = true;
    this.http.get<any>(`${this.apiUrl}?&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
      (data) => {
        this.dataSource.data = data['hydra:member'];
        this.length = data['hydra:totalItems'];
+        this.loading = false;
      },
      (error) => {
-        console.error('Error fetching commands', error);
+        console.error('Error fetching users', error);
+        this.loading = false;
      }
    );
  }
@ -78,7 +79,6 @@ export class UsersComponent implements OnInit {
    dialogRef.componentInstance.userAdded.subscribe(() => {
      this.search();
    });
-
  }

  editUser(user: any): void {
@ -114,8 +114,6 @@ export class UsersComponent implements OnInit {
            console.error('Error deleting user:', error);
          }
        });
-      } else {
-        console.log('User deletion cancelled');
      }
    });
  }
@ -126,5 +124,4 @@ export class UsersComponent implements OnInit {
    this.length = event.length;
    this.search();
  }
-
 }
--- a/ogWebconsole/src/app/components/calendar/calendar.component.html
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.html
@ -13,6 +13,12 @@
    <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
  </mat-form-field>
 </div>
+
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>
+
+<div *ngIf="!loading">
  <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>
@ -42,6 +48,8 @@
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
+</div>
+
 <div class="paginator-container">
  <mat-paginator [length]="length"
                 [pageSize]="itemsPerPage"
--- a/ogWebconsole/src/app/components/calendar/calendar.component.spec.ts
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.spec.ts
@ -10,8 +10,9 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { FormsModule } from '@angular/forms'; // Importa FormsModule para ngModel
+import { FormsModule } from '@angular/forms';
 import { CalendarComponent } from './calendar.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';

 describe('CalendarComponent', () => {
  let component: CalendarComponent;
@ -32,7 +33,8 @@ describe('CalendarComponent', () => {
        MatTableModule,
        MatPaginatorModule,
        MatTooltipModule,
-        FormsModule // Añade FormsModule aquí para que ngModel funcione
+        FormsModule,
+        MatProgressSpinner
      ]
    })
    .compileComponents();
--- a/ogWebconsole/src/app/components/calendar/calendar.component.ts
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.ts
@ -148,13 +148,16 @@ export class CalendarComponent implements OnInit {
  }

  applyFilter() {
+    this.loading = true;
    this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`).subscribe({
      next: (response) => {
        this.dataSource.data = response['hydra:member'];
        this.length = response['hydra:totalItems'];
+        this.loading = false;
      },
      error: (error) => {
        console.error('Error al cargar las imágenes:', error);
+        this.loading = false;
      }
    });
  }
--- a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
@ -14,6 +14,11 @@
  </mat-form-field>
 </div>

+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>
+
+<div *ngIf="!loading">
  <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>
@ -46,6 +51,7 @@
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
+</div>

 <div class="paginator-container">
  <mat-paginator [length]="length"
--- a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts
@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { MatDialog } from '@angular/material/dialog';
 import { ToastrService } from 'ngx-toastr';
-import { CreateCommandGroupComponent } from './create-command-group/create-command-group.component'
+import { CreateCommandGroupComponent } from './create-command-group/create-command-group.component';
 import { DetailCommandGroupComponent } from './detail-command-group/detail-command-group.component';
 import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
 import { MatTableDataSource } from "@angular/material/table";
@ -22,6 +22,7 @@ export class CommandsGroupsComponent implements OnInit {
  page: number = 0;
  pageSizeOptions: number[] = [10, 20, 40, 100];
  datePipe: DatePipe = new DatePipe('es-ES');
+  loading: boolean = false;
  columns = [
    {
      columnDef: 'id',
@ -54,13 +55,16 @@ export class CommandsGroupsComponent implements OnInit {
  }

  search(): void {
+    this.loading = true;
    this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
      (data) => {
        this.dataSource.data = data['hydra:member'];
        this.length = data['hydra:totalItems'];
+        this.loading = false;
      },
      (error) => {
        console.error('Error fetching command groups', error);
+        this.loading = false;
      }
    );
  }
--- a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
@ -1,6 +1,10 @@
 <h2 mat-dialog-title>{{ editing ? 'Editar' : 'Crear' }} grupo de comando</h2>
 <mat-dialog-content class="form-container">
-  <form class="command-group-form" (ngSubmit)="onSubmit()">
+  <div *ngIf="loading" class="loading-container">
+    <mat-spinner></mat-spinner>
+  </div>
+
+  <form *ngIf="!loading" class="command-group-form" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <mat-label>Nombre del Grupo</mat-label>
      <input matInput [(ngModel)]="groupName" name="groupName" required />
@ -11,7 +15,7 @@
    <div class="command-selection">
      <div class="available-commands">
        <h3>Comandos Disponibles</h3>
-        <div class="table-wrapper"> <!-- Agregar este contenedor -->
+        <div class="table-wrapper">
          <table mat-table [dataSource]="availableCommands" class="mat-elevation-z8">
            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef> Nombre </th>
@ -57,4 +61,3 @@
  <button mat-button (click)="close()">Cancelar</button>
  <button mat-button (click)="onSubmit()" cdkFocusInitial> Guardar </button>
 </mat-dialog-actions>
-
--- a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.ts
@ -15,6 +15,7 @@ export class CreateCommandGroupComponent implements OnInit {
  groupName: string = '';
  enabled: boolean = true;
  editing: boolean = false;
+  loading: boolean = false;
  private apiUrl = `${this.baseUrl}/commands`;

  constructor(
@ -34,12 +35,15 @@ export class CreateCommandGroupComponent implements OnInit {
  }

  loadAvailableCommands(): void {
+    this.loading = true;
    this.http.get<any>(this.apiUrl).subscribe(
      (data) => {
        this.availableCommands = data['hydra:member'];
+        this.loading = false;
      },
      (error) => {
        console.error('Error fetching available commands', error);
+        this.loading = false;
      }
    );
  }
--- a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
@ -1,7 +1,12 @@
 <div class="detail-command-group-container">
  <h2>Detalles del Grupo de Comandos</h2>

-  <mat-card>
+  <!-- Indicador de carga -->
+  <div *ngIf="loading" class="loading-container">
+    <mat-spinner></mat-spinner>
+  </div>
+
+  <mat-card *ngIf="!loading">
    <mat-card-header>
      <mat-card-title>{{ data.name }}</mat-card-title>
      <mat-card-subtitle>Creado por: {{ data.createdBy }}</mat-card-subtitle>
@ -27,11 +32,10 @@
        <tr mat-row *matRowDef="let row; columns: ['name', 'uuid'];"></tr>
      </table>
    </mat-card-content>
-    
  </mat-card>

  <!-- Sección para seleccionar clientes -->
-  <div class="additional-section" *ngIf="showClientSelect">
+  <div class="additional-section" *ngIf="showClientSelect && !loading">
    <form [formGroup]="form">
      <h4>Selecciona los clientes:</h4>
      <mat-form-field appearance="fill">
@ -48,7 +52,7 @@
    </form>
  </div>

-  <div class="command-group-actions">
+  <div class="command-group-actions" *ngIf="!loading">
    <button mat-flat-button color="primary" (click)="toggleClientSelect()">
      {{ showClientSelect ? 'Ejecutar' : 'Programar Ejecución' }}
    </button>
--- a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.ts
@ -13,8 +13,9 @@ export class DetailCommandGroupComponent implements OnInit {
  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  form!: FormGroup;
  clients: any[] = [];
-  showClientSelect = false; // Ocultar selección de clientes inicialmente
+  showClientSelect = false;
  canExecute = false;
+  loading: boolean = false;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
@ -29,17 +30,28 @@ export class DetailCommandGroupComponent implements OnInit {
      selectedClients: [[], Validators.required],
    });

-    // Obtener la lista de clientes
-    this.http.get<any>(`${this.baseUrl}/clients?page=1&itemsPerPage=30`).subscribe(response => {
+    this.loadClients();
+  }
+
+  loadClients(): void {
+    this.loading = true;
+    this.http.get<any>(`${this.baseUrl}/clients?page=1&itemsPerPage=30`).subscribe({
+      next: (response) => {
        this.clients = response['hydra:member'];
+        this.loading = false;
+      },
+      error: (error) => {
+        console.error('Error fetching clients:', error);
+        this.loading = false;
+      }
    });
  }

  toggleClientSelect(): void {
    if (!this.showClientSelect) {
-      this.showClientSelect = true; // Mostrar selección de clientes
+      this.showClientSelect = true;
    } else {
-      this.execute(); // Ejecutar si ya está visible
+      this.execute();
    }
  }

@ -50,13 +62,16 @@ export class DetailCommandGroupComponent implements OnInit {
      };

      const apiUrl = `${this.baseUrl}/command-groups/${this.data.uuid}/execute`;
+      this.loading = true;
      this.http.post(apiUrl, payload).subscribe({
        next: () => {
          this.dialogRef.close();
          this.toastService.success('Grupo de comandos ejecutado exitosamente');
+          this.loading = false;
        },
        error: (error) => {
          console.error('Error ejecutando grupo de comandos:', error);
+          this.loading = false;
        }
      });
    } else {
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
@ -16,6 +16,11 @@
  </mat-form-field>
 </div>

+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>
+
+<div *ngIf="!loading">
  <table mat-table [dataSource]="tasks" class="mat-elevation-z8">
    <ng-container matColumnDef="taskid">
      <th mat-header-cell *matHeaderCellDef> Id</th>
@ -56,6 +61,7 @@
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
+</div>

 <mat-paginator [length]="length"
               [pageSize]="itemsPerPage"
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
@ -20,6 +20,7 @@ export class CommandsTaskComponent implements OnInit {
  page: number = 1;
  pageSizeOptions: number[] = [5, 10, 20, 40, 100];
  displayedColumns: string[] = ['taskid', 'notes', 'name', 'scheduledDate', 'enabled', 'actions'];
+  loading: boolean = false;
  private apiUrl = `${this.baseUrl}/command-tasks`;

  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
@ -34,13 +35,16 @@ export class CommandsTaskComponent implements OnInit {
  }

  loadTasks(): void {
+    this.loading = true;
    this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
      (data) => {
        this.tasks = data['hydra:member'];
        this.length = data['hydra:totalItems'];
+        this.loading = false;
      },
      (error) => {
        console.error('Error fetching tasks', error);
+        this.loading = false;
      }
    );
  }
--- a/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.ts
@ -13,11 +13,9 @@ export class DetailTaskComponent {
    public dialogRef: MatDialogRef<DetailTaskComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
-    this.task = data.task;  // Asignamos la tarea que viene en el modal
-    console.log('tasaas',this.task);
+    this.task = data.task;
  }

-  // Método opcional para cerrar el modal
  closeDialog(): void {
    this.dialogRef.close();
  }
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html
@ -5,6 +5,7 @@
  </div>
 </div>
 <mat-divider class="divider"></mat-divider>
+
 <div class="search-container">
  <mat-form-field appearance="fill" class="search-select">
    <input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto" placeholder="Seleccione un cliente">
@ -15,7 +16,6 @@
    </mat-autocomplete>
  </mat-form-field>

-  <!-- Autocomplete para seleccionar un comando -->
  <mat-form-field appearance="fill" class="search-select">
    <input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto" placeholder="Seleccione un comando">
    <mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand" (optionSelected)="onOptionCommandSelected($event.option.value)">
@ -26,19 +26,25 @@
  </mat-form-field>
 </div>

+<!-- Indicador de carga -->
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>
+
+<!-- Tabla de trazas -->
+<div *ngIf="!loading">
  <table mat-table [dataSource]="traces" 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 trace">
-      <ng-container >
        {{ column.cell(trace) }}
-      </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="paginator-container">
  <mat-paginator [length]="length"
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.ts
@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import {Observable, startWith} from 'rxjs';
-import {FormControl} from "@angular/forms";
-import {map} from "rxjs/operators";
-import {DatePipe} from "@angular/common";
+import { Observable } from 'rxjs';
+import { FormControl } from '@angular/forms';
+import { map, startWith } from 'rxjs/operators';
+import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-task-logs',
@ -46,7 +46,7 @@ export class TaskLogsComponent implements OnInit {
    },
    {
      columnDef: 'executedAt',
-      header: 'Programacion de ejecución',
+      header: 'Programación de ejecución',
      cell: (trace: any) => `${this.datePipe.transform(trace.executedAt, 'dd/MM/yyyy hh:mm:ss')}`,
    },
    {
@ -110,40 +110,45 @@ export class TaskLogsComponent implements OnInit {
  }

  loadTraces(): void {
+    this.loading = true;
    const url = `${this.baseUrl}/traces?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`;
    this.http.get<any>(url, { params: this.filters }).subscribe(
      (data) => {
        this.traces = data['hydra:member'];
        this.length = data['hydra:totalItems'];
        this.groupedTraces = this.groupByCommandId(this.traces);
+        this.loading = false;
      },
      (error) => {
        console.error('Error fetching traces', error);
+        this.loading = false;
      }
    );
  }

  loadCommands() {
+    this.loading = true;
    this.http.get<any>(`${this.baseUrl}/commands?&page=1&itemsPerPage=10000`).subscribe(
      response => {
        this.commands = response['hydra:member'];
        this.loading = false;
      },
      error => {
-        console.error('Error fetching parent units:', error);
+        console.error('Error fetching commands:', error);
        this.loading = false;
      }
    );
  }

  loadClients() {
+    this.loading = true;
    this.http.get<any>(`${this.baseUrl}/clients?&page=1&itemsPerPage=10000`).subscribe(
      response => {
        this.clients = response['hydra:member'];
        this.loading = false;
      },
      error => {
-        console.error('Error fetching parent units:', error);
+        console.error('Error fetching clients:', error);
        this.loading = false;
      }
    );
--- a/ogWebconsole/src/app/components/commands/main-commands/commands.component.html
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.html
@ -5,6 +5,7 @@
  </div>
 </div>
 <mat-divider class="divider"></mat-divider>
+
 <div class="search-container">
  <mat-form-field appearance="fill" class="search-string">
    <mat-label i18n="@@searchLabel">Buscar nombre de comando</mat-label>
@ -14,6 +15,11 @@
  </mat-form-field>
 </div>

+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>
+
+<div *ngIf="!loading">
  <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>
@ -33,15 +39,14 @@
      <td mat-cell *matCellDef="let client" style="text-align: center;">
        <button mat-icon-button color="info" (click)="viewDetails($event, client)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
        <button mat-icon-button color="primary" (click)="editCommand($event, client)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
-      <button mat-icon-button color="warn" (click)="deleteCommand($event, client)">
-        <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
-      </button>
+        <button mat-icon-button color="warn" (click)="deleteCommand($event, client)"><mat-icon i18n="@@deleteElementTooltip">delete</mat-icon></button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
+</div>

 <div class="paginator-container">
  <mat-paginator [length]="length"
--- a/ogWebconsole/src/app/components/commands/main-commands/commands.component.spec.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.spec.ts
@ -1,33 +1,61 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { TreeViewComponent } from '../../groups/shared/tree-view/tree-view.component';
-import { MatDialogModule } from '@angular/material/dialog'; // <-- Import MatDialogModule
-import { MatFormFieldModule } from '@angular/material/form-field'; // Import for mat-form-field
-import { MatInputModule } from '@angular/material/input'; // Import for matInput
-import { MatDividerModule } from '@angular/material/divider'; // Import for mat-divider
-import { ToastrModule } from 'ngx-toastr'; // Import for Toastr
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { ToastrModule } from 'ngx-toastr';
+import { MatTableModule } from '@angular/material/table';
+import { DatePipe } from '@angular/common';
+import { CommandsComponent } from './commands.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgxChartsModule } from '@swimlane/ngx-charts';

-describe('TreeViewComponent', () => {
-  let component: TreeViewComponent;
-  let fixture: ComponentFixture<TreeViewComponent>;
+describe('CommandsComponent', () => {
+  let component: CommandsComponent;
+  let fixture: ComponentFixture<CommandsComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [TreeViewComponent],
+      declarations: [CommandsComponent],
      imports: [
-        MatDialogModule, // <-- Add MatDialogModule here
-        MatFormFieldModule, // <-- For mat-form-field
-        MatInputModule, // <-- For matInput
-        MatDividerModule, // <-- For mat-divider
-        ToastrModule.forRoot() // <-- For ToastrService
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        MatProgressSpinner,
+        MatProgressSpinnerModule, 
+        MatDialogModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        NgxChartsModule,
+        DatePipe
      ],
      providers: [
-        provideHttpClient(withInterceptorsFromDi())
+        { provide: MatDialogRef, useValue: {} }, 
+        { provide: MAT_DIALOG_DATA, useValue: {} } 
      ]
-    })
-    .compileComponents();
      
-    fixture = TestBed.createComponent(TreeViewComponent);
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommandsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
@ -35,4 +63,5 @@ describe('TreeViewComponent', () => {
  it('should create', () => {
    expect(component).toBeTruthy();
  });
+
 });
--- a/ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
@ -5,8 +5,8 @@ import { ToastrService } from 'ngx-toastr';
 import { CommandDetailComponent } from './detail-command/command-detail.component';
 import { CreateCommandComponent } from './create-command/create-command.component';
 import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
-import {MatTableDataSource} from "@angular/material/table";
-import {DatePipe} from "@angular/common";
+import { MatTableDataSource } from '@angular/material/table';
+import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-commands',
@ -22,6 +22,7 @@ export class CommandsComponent implements OnInit {
  page: number = 0;
  pageSizeOptions: number[] = [10, 20, 40, 100];
  datePipe: DatePipe = new DatePipe('es-ES');
+  loading: boolean = false;
  columns = [
    {
      columnDef: 'id',
@ -54,13 +55,16 @@ export class CommandsComponent implements OnInit {
  }

  search(): void {
+    this.loading = true;
    this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
      (data) => {
        this.dataSource.data = data['hydra:member'];
        this.length = data['hydra:totalItems'];
+        this.loading = false;
      },
      (error) => {
        console.error('Error fetching commands', error);
+        this.loading = false;
      }
    );
  }
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
@ -9,7 +9,13 @@
    </button>
  </mat-menu>
 </div>
-<div class="client-info">
+<mat-divider class="divider"></mat-divider>
+
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>
+
+<div *ngIf="!loading" class="client-info">
  <div class="info-section">
    <mat-tab-group dynamicHeight>
      <mat-tab label="Datos generales">
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts
@ -4,6 +4,7 @@ import {DatePipe} from "@angular/common";
 import {MatTableDataSource} from "@angular/material/table";
 import {PartitionAssistantComponent} from "./partition-assistant/partition-assistant.component";
 import {MatDialog} from "@angular/material/dialog";
+
 interface ClientInfo {
  property: string;
  value: any;
@ -58,6 +59,8 @@ export class ClientMainViewComponent implements OnInit {
    },
  ];
  displayedColumns = [...this.columns.map(column => column.columnDef)];
+  isDiskUsageEmpty: boolean = true;
+  loading: boolean = true;

  constructor(private http: HttpClient, private dialog: MatDialog) {
    const url = window.location.href;
@ -71,6 +74,8 @@ export class ClientMainViewComponent implements OnInit {
    this.updateGeneralData();
    this.updateNetworkData();
    this.loadCommands()
+    this.calculateDiskUsage();
+    this.loading = false;
  }

  updateGeneralData() {
@ -85,6 +90,7 @@ export class ClientMainViewComponent implements OnInit {
      { property: 'Menú', value: this.clientData?.menu?.description || '' },
    ];
  }
+
  updateNetworkData() {
    this.networkData = [
      { property: 'Remote Pc', value: this.clientData.remotePc || '' },
@ -120,6 +126,7 @@ export class ClientMainViewComponent implements OnInit {
      const percentage = total > 0 ? Math.round((used / total) * 100) : 0;
      return { diskNumber, total, used, percentage };
    });
+    this.isDiskUsageEmpty = this.diskUsageData.length === 0;
  }

  loadPartitions(): void {
--- a/ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.html
@ -34,6 +34,12 @@
      </mat-select>
    </mat-form-field>
  </div>
+
+  <div *ngIf="!loading" class="loading-container">
+    <mat-spinner></mat-spinner>
+  </div>
+
+  <div *ngIf="loading">
  <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>
@ -80,3 +86,4 @@
                 (page)="onPageChange($event)">
  </mat-paginator>
 </div>
+</div>
--- a/ogWebconsole/src/app/components/groups/components/organizational-unit-tab-view/organizational-unit-tab-view.component.ts
+++ b/ogWebconsole/src/app/components/groups/components/organizational-unit-tab-view/organizational-unit-tab-view.component.ts
@ -64,7 +64,7 @@ export class OrganizationalUnitTabViewComponent {
    },
    {
      columnDef: 'available',
-      header: 'Aula Reservada',
+      header: 'Disponible remotePC',
      cell: (ou: any) => `${ou.available ? 'No' : 'Si'}`
    },
    {
--- a/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.spec.ts
+++ b/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.spec.ts
@ -2,6 +2,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { OgbootStatusComponent } from './ogboot-status.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
 describe('OgbootStatusComponent', () => {
  let component: OgbootStatusComponent;
  let fixture: ComponentFixture<OgbootStatusComponent>;
@ -9,7 +23,30 @@ describe('OgbootStatusComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [OgbootStatusComponent],
-      imports: [HttpClientTestingModule, NgxChartsModule]
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        MatProgressSpinner,
+        MatProgressSpinnerModule, 
+        MatDialogModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        NgxChartsModule
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} }, 
+        { provide: MAT_DIALOG_DATA, useValue: {} } 
+      ]
    }).compileComponents();
  });

--- a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.spec.ts
+++ b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.spec.ts
@ -9,7 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select'; 
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, NgControl, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table'; 

@ -37,7 +37,9 @@ describe('PxeBootFilesComponent', () => {
        FormsModule,
        MatInputModule,
        MatTableModule,
-      ]
+        ReactiveFormsModule      
+      ],
+      providers: [NgControl]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/ogboot/pxe/add-clients-to-pxe/add-clients-to-pxe.component.spec.ts
+++ b/ogWebconsole/src/app/components/ogboot/pxe/add-clients-to-pxe/add-clients-to-pxe.component.spec.ts
@ -1,6 +1,25 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { AddClientsToPxeComponent } from './add-clients-to-pxe.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatListModule } from '@angular/material/list';
+import { MatTabsModule } from '@angular/material/tabs';

 describe('AddClientsToPxeComponent', () => {
  let component: AddClientsToPxeComponent;
@ -8,7 +27,32 @@ describe('AddClientsToPxeComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [AddClientsToPxeComponent]
+      declarations: [AddClientsToPxeComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatProgressSpinnerModule, 
+        MatDialogModule,
+        MatSelectModule,
+        MatTabsModule,
+        MatAutocompleteModule, 
+        MatListModule
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {} }
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/ogboot/pxe/clients/clients.component.spec.ts
+++ b/ogWebconsole/src/app/components/ogboot/pxe/clients/clients.component.spec.ts
@ -1,6 +1,25 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { ClientsComponent } from './clients.component';
+import { MatInputModule } from '@angular/material/input';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatListModule } from '@angular/material/list';
+import { MatTabsModule } from '@angular/material/tabs';

 describe('ClientsComponent', () => {
  let component: ClientsComponent;
@ -8,7 +27,33 @@ describe('ClientsComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [ClientsComponent]
+      declarations: [ClientsComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatProgressSpinnerModule, 
+        MatDialogModule,
+        MatSelectModule,
+        MatTabsModule,
+        MatAutocompleteModule, 
+        MatListModule
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {data: {id: 123}} }
+
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/ogboot/pxe/clients/clients.component.ts
+++ b/ogWebconsole/src/app/components/ogboot/pxe/clients/clients.component.ts
@ -35,7 +35,6 @@ export class ClientsComponent {
  getPxeClients(): void {
    this.http.get<any>(`${this.baseUrl}/clients?template.id=${this.data.data.id}`).subscribe({
      next: data => {
-        console.log(data['hydra:member'])
        this.clients = data['hydra:member']
      },
      error: error => {
--- a/ogWebconsole/src/app/components/ogboot/pxe/show-template-content/show-template-content.component.spec.ts
+++ b/ogWebconsole/src/app/components/ogboot/pxe/show-template-content/show-template-content.component.spec.ts
@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ShowTemplateContentComponent } from './show-template-content.component';
-
-describe('ShowTemplateContentComponent', () => {
-  let component: ShowTemplateContentComponent;
-  let fixture: ComponentFixture<ShowTemplateContentComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ShowTemplateContentComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ShowTemplateContentComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component.spec.ts
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component.spec.ts
@ -1,6 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { ServerInfoDialogComponent } from './server-info-dialog.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; // Importar tokens de MatDialog

 describe('ServerInfoDialogComponent', () => {
  let component: ServerInfoDialogComponent;
@ -8,7 +24,30 @@ describe('ServerInfoDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [ServerInfoDialogComponent]
+      declarations: [ServerInfoDialogComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        MatProgressSpinnerModule,
+        MatOptionModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        MatDialogModule 
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },  
+        { provide: MAT_DIALOG_DATA, useValue: {} } 
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.spec.ts
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.spec.ts
@ -1,6 +1,23 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { StatusComponent } from './status.component';
+import { MatInputModule } from '@angular/material/input';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+import { NgxChartsModule } from '@swimlane/ngx-charts';

 describe('StatusComponent', () => {
  let component: StatusComponent;
@ -8,7 +25,31 @@ describe('StatusComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [StatusComponent]
+      declarations: [StatusComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        MatProgressSpinnerModule,
+        MatOptionModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        MatDialogModule,
+        NgxChartsModule
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },  
+        { provide: MAT_DIALOG_DATA, useValue: {} } 
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/operative-system/create-operative-system/create-operative-system.component.spec.ts
+++ b/ogWebconsole/src/app/components/operative-system/create-operative-system/create-operative-system.component.spec.ts
@ -1,6 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { CreateOperativeSystemComponent } from './create-operative-system.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';

 describe('CreateOperativeSystemComponent', () => {
  let component: CreateOperativeSystemComponent;
@ -8,7 +22,29 @@ describe('CreateOperativeSystemComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [CreateOperativeSystemComponent]
+      declarations: [CreateOperativeSystemComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        MatProgressSpinner,
+        MatProgressSpinnerModule, 
+        MatDialogModule,
+        ReactiveFormsModule
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} }, // Proporciona un mock de MatDialogRef
+        { provide: MAT_DIALOG_DATA, useValue: {} } // Proporciona un mock de MAT_DIALOG_DATA si es necesario
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/operative-system/operative-system.component.spec.ts
+++ b/ogWebconsole/src/app/components/operative-system/operative-system.component.spec.ts
@ -1,6 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { OperativeSystemComponent } from './operative-system.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';

 describe('OperativeSystemComponent', () => {
  let component: OperativeSystemComponent;
@ -8,7 +21,22 @@ describe('OperativeSystemComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [OperativeSystemComponent]
+      declarations: [OperativeSystemComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        MatProgressSpinner
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/software-profile/create-software-profile/create-software-profile.component.spec.ts
+++ b/ogWebconsole/src/app/components/software-profile/create-software-profile/create-software-profile.component.spec.ts
@ -1,6 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { CreateSoftwareProfileComponent } from './create-software-profile.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; 
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatTabsModule } from '@angular/material/tabs'; 
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatListModule } from '@angular/material/list';

 describe('CreateSoftwareProfileComponent', () => {
  let component: CreateSoftwareProfileComponent;
@ -8,7 +26,32 @@ describe('CreateSoftwareProfileComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [CreateSoftwareProfileComponent]
+      declarations: [CreateSoftwareProfileComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatProgressSpinnerModule, 
+        MatDialogModule,
+        MatSelectModule,
+        MatTabsModule,
+        MatAutocompleteModule, 
+        MatListModule
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {} }
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/software-profile/software-profile.component.spec.ts
+++ b/ogWebconsole/src/app/components/software-profile/software-profile.component.spec.ts
@ -1,6 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { SoftwareProfileComponent } from './software-profile.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';

 describe('SoftwareProfileComponent', () => {
  let component: SoftwareProfileComponent;
@ -8,7 +23,25 @@ describe('SoftwareProfileComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [SoftwareProfileComponent]
+      declarations: [SoftwareProfileComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        MatProgressSpinner,
+        MatOptionModule,
+        ReactiveFormsModule,
+        MatSelectModule
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/software/create-software/create-software.component.spec.ts
+++ b/ogWebconsole/src/app/components/software/create-software/create-software.component.spec.ts
@ -1,6 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { CreateSoftwareComponent } from './create-software.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

 describe('CreateSoftwareComponent', () => {
  let component: CreateSoftwareComponent;
@ -8,7 +24,30 @@ describe('CreateSoftwareComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [CreateSoftwareComponent]
+      declarations: [CreateSoftwareComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        MatProgressSpinner,
+        MatProgressSpinnerModule, 
+        MatDialogModule,
+        ReactiveFormsModule,
+        MatSelectModule
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: {} }, // Proporciona un mock de MatDialogRef
+        { provide: MAT_DIALOG_DATA, useValue: {} } // Proporciona un mock de MAT_DIALOG_DATA si es necesario
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/software/software.component.html
+++ b/ogWebconsole/src/app/components/software/software.component.html
@ -8,13 +8,13 @@
 <div class="search-container">
  <mat-form-field appearance="fill" class="search-string">
    <mat-label i18n="@@searchLabel">Buscar nombre de software</mat-label>
-    <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
+    <input matInput name="searchBar" placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
    <mat-icon matSuffix>search</mat-icon>
    <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
  </mat-form-field>
  <mat-form-field appearance="fill" class="search-boolean">
    <mat-label i18n="@@searchLabel">Buscar por tipo</mat-label>
-    <mat-select [(ngModel)]="filters['type']" (selectionChange)="search()" placeholder="Seleccionar opción">
+    <mat-select name="searchType" [(ngModel)]="filters['type']" (selectionChange)="search()" placeholder="Seleccionar opción">
      <mat-option [value]="'application'">Aplicación</mat-option>
      <mat-option [value]="'operative-system'">Sistema operativo</mat-option>
      <mat-option [value]="'file'">Sistema de ficheros</mat-option>
--- a/ogWebconsole/src/app/components/software/software.component.spec.ts
+++ b/ogWebconsole/src/app/components/software/software.component.spec.ts
@ -1,6 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { SoftwareComponent } from './software.component';
+import { MatDividerModule } from '@angular/material/divider';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+import { MatOptionModule } from '@angular/material/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';

 describe('SoftwareComponent', () => {
  let component: SoftwareComponent;
@ -8,7 +23,25 @@ describe('SoftwareComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [SoftwareComponent]
+      declarations: [SoftwareComponent],
+      imports: [
+        HttpClientTestingModule,
+        ToastrModule.forRoot(),
+        BrowserAnimationsModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatTooltipModule,
+        FormsModule,
+        MatProgressSpinner,
+        MatOptionModule,
+        ReactiveFormsModule,
+        MatSelectModule
+      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/styles.css
+++ b/ogWebconsole/src/styles.css
@ -2,3 +2,35 @@

 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+
+/* Clase general para el contenedor de carga */
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
+    width: 100vw;
+    height: 100vh;
+  }
+  
+  /* Spinner de Angular Material */
+  .mat-spinner {
+    width: 100px;
+    height: 100px;
+  }
+  
+  /* Texto que acompaña al spinner */
+  .loading-container p {
+    margin-top: 20px;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #555;
+  }
+  
--- a/ogWebconsole/test-results/ogGui-junit-report.xml
+++ b/ogWebconsole/test-results/ogGui-junit-report.xml
@ -0,0 +1,47 @@
+<?xml version="1.0"?>
+<testsuite name="Chrome 123.0.0.0 (Linux x86_64)" package="" timestamp="2024-10-24T11:02:26" id="0" hostname="Ubnt" tests="31" errors="0" failures="0" time="1.13">
+  <properties>
+    <property name="browser.fullName" value="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36"/>
+  </properties>
+  <testcase name="CreateOperativeSystemComponent should create" time="0.106" classname="CreateOperativeSystemComponent"/>
+  <testcase name="PxeBootFilesComponent should create" time="0.083" classname="PxeBootFilesComponent"/>
+  <testcase name="OgDhcpSubnetsComponent should create" time="0.068" classname="OgDhcpSubnetsComponent"/>
+  <testcase name="PXEimagesComponent should create" time="0.092" classname="PXEimagesComponent"/>
+  <testcase name="AddClientsToPxeComponent should create" time="0.024" classname="AddClientsToPxeComponent"/>
+  <testcase name="RolesComponent should create" time="0.024" classname="RolesComponent"/>
+  <testcase name="SoftwareProfileComponent should create" time="0.05" classname="SoftwareProfileComponent"/>
+  <testcase name="CreateCommandComponent should create" time="0.026" classname="CreateCommandComponent"/>
+  <testcase name="DashboardComponent should create the component" time="0.008" classname="DashboardComponent"/>
+  <testcase name="CalendarComponent should create" time="0.049" classname="CalendarComponent"/>
+  <testcase name="UsersComponent should create" time="0.023" classname="UsersComponent"/>
+  <testcase name="SoftwareComponent should create" time="0.053" classname="SoftwareComponent"/>
+  <testcase name="OgdhcpComponent should create" time="0.006" classname="OgdhcpComponent"/>
+  <testcase name="StatusComponent should create" time="0.032" classname="StatusComponent"/>
+  <testcase name="OperativeSystemComponent should create" time="0.04" classname="OperativeSystemComponent"/>
+  <testcase name="LoginComponent should create" time="0.036" classname="LoginComponent"/>
+  <testcase name="CommandsTaskComponent should create" time="0.041" classname="CommandsTaskComponent"/>
+  <testcase name="CommandsComponent should create" time="0.037" classname="CommandsComponent"/>
+  <testcase name="CreateSoftwareProfileComponent should create" time="0.067" classname="CreateSoftwareProfileComponent"/>
+  <testcase name="OgbootStatusComponent should create the component" time="0.017" classname="OgbootStatusComponent"/>
+  <testcase name="ClientsComponent should create" time="0.032" classname="ClientsComponent"/>
+  <testcase name="AdminComponent el primer botón debería tener el texto &quot;Usuarios&quot;" time="0.022" classname="AdminComponent"/>
+  <testcase name="AdminComponent el segundo botón debería tener el routerLink correcto" time="0.017" classname="AdminComponent"/>
+  <testcase name="AdminComponent el primer botón debería tener el routerLink correcto" time="0.016" classname="AdminComponent"/>
+  <testcase name="AdminComponent debería crear el componente" time="0.008" classname="AdminComponent"/>
+  <testcase name="AdminComponent el segundo botón debería tener el texto &quot;Roles&quot;" time="0.011" classname="AdminComponent"/>
+  <testcase name="AdminComponent debería contener dos botones" time="0.009" classname="AdminComponent"/>
+  <testcase name="AppComponent should create the app" time="0.009" classname="AppComponent"/>
+  <testcase name="CreateSoftwareComponent should create" time="0.058" classname="CreateSoftwareComponent"/>
+  <testcase name="PxeComponent should create the component" time="0.05" classname="PxeComponent"/>
+  <testcase name="ServerInfoDialogComponent should create" time="0.016" classname="ServerInfoDialogComponent"/>
+  <system-out>
+    <![CDATA[Chrome 123.0.0.0 (Linux x86_64) ERROR: 'Error fetching images', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'Unknown Error', url: 'https://127.0.0.1:8443/og-lives?page=1&itemsPerPage=1000', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for https://127.0.0.1:8443/og-lives?page=1&itemsPerPage=1000: 0 Unknown Error', error: ProgressEvent{isTrusted: true}}
+,Chrome 123.0.0.0 (Linux x86_64) ERROR: 'Error fetching og lives', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'Unknown Error', url: 'https://127.0.0.1:8443/og-lives?page=1&itemsPerPage=1000', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for https://127.0.0.1:8443/og-lives?page=1&itemsPerPage=1000: 0 Unknown Error', error: ProgressEvent{isTrusted: true}}
+,Chrome 123.0.0.0 (Linux x86_64) LOG: 'Selected subnet UUID:', Object{}
+,Chrome 123.0.0.0 (Linux x86_64) LOG: Object{}
+,Chrome 123.0.0.0 (Linux x86_64) LOG: Object{}
+
+]]>
+  </system-out>
+  <system-err/>
+</testsuite>