opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'develop' (#19) from develop into main
testing/ogGui-multibranch/pipeline/head There was a failure building this commit Details
oggui-debian-package/pipeline/head This commit looks good Details 

Reviewed-on: #19
pull/20/head^2
Manuel Aranda Rosales 2025-04-11 12:03:38 +02:00
parent 4758190b6d cf5f2754c6
commit b2d34a6880
100 changed files with 3212 additions and 1326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
CHANGELOG.md
View File

@ -1,9 +1,25 @@
# Changelog
## [0.11.0] - 2025-4-11
### Added
- Se ha diseñado el nuevo formulario para poder ejecutar script. Sistema mejorado con variables etiquetadas.
- Se puede añadir descripcion a una imagen.
- Se han añadido al formulario de crear/editar repositorio, la posibilidad de añadir usuario y puerto ssh.
- Nuevo estado en pc => desconectado.
- Se ha añadido nueva accion para renombrar imagen monolitica.
### Improved
- Se ha mejorado la interfaz de usuario tanto para el despliegue de imagenes, como el particionado.
- Se ha mejorado la responsividad de la vista de grupos.
- Cambios en el comportamiento general de muchos componentes modales. Se han añadido spinners de carga mas intuitivos.
---
## [0.10.1] - 2025-3-27
### Improved
- Mejoras en el comportamiento del arbol de grupos.
- Nueva regexp para controlar las "macs" en la creacion de clientes.
---
## [0.10.0] - 2025-3-25
### Added
- Nuevo componenten de estado global.
@ -20,14 +36,17 @@
### Fixed
- Cambios en la expresion regular para la validacion de documentos DHCP en la carga masiva de pc.
---
## [0.9.2] - 2025-03-19
### Changed
- Jenkinsfile to pubilsh packages in repo in case og release
---
## [0.9.1] - 2025-03-12
### Changed
- Se ha modificado el acceso a Mercure añadiendo nueva variable de entorno.
---
## [0.9.0] - 2025-3-4
### Added
- Integracion con Mercure. Subscriber tanto en "Trazas" con en "Clientes".
@ -43,17 +62,20 @@
- Cambios en DHCP. Nueva UX en "ver clientes". Ahora tenemos un buscador detallado.
- Para gestionar/añadir clientes a subredes ahora tenemos un botón para "añadir todos" y tan solo nos aparecn los equipos que no estén previamente asignados en una subred.
---
## [0.7.0] - 2024-12-10
### Refactored
- Refactored the group screen, removing the separate tabs for clients, advanced search, and organizational units.
- Added support for partitioning functionality in the client detail view.
---
## [0.6.1] - 2024-11-19
### Improved
- Introduced a new automatic sync mode for the ogdhcp and ogBoot components.
- Improve test coverage.
- New view for clients inside the classroom on the main page.
---
## [0.6.0] - 2024-11-19
### Added
- Added functionality to execute actions from the menu in the general groups screen.

4
ogWebconsole/src/app/app-routing.module.ts
View File

@ -40,6 +40,9 @@ import {EnvVarsComponent} from "./components/admin/env-vars/env-vars.component";
import {MenusComponent} from "./components/menus/menus.component";
import {OgDhcpSubnetsComponent} from "./components/ogdhcp/og-dhcp-subnets.component";
import {StatusComponent} from "./components/ogdhcp/status/status.component";
import {
RunScriptAssistantComponent
} from "./components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component";
const routes: Routes = [
{ path: '', redirectTo: 'auth/login', pathMatch: 'full' },
{ path: '', component: MainLayoutComponent,
@ -63,6 +66,7 @@ const routes: Routes = [
{ path: 'calendars', component: CalendarComponent },
{ path: 'clients/deploy-image', component: DeployImageComponent },
{ path: 'clients/partition-assistant', component: PartitionAssistantComponent },
{ path: 'clients/run-script', component: RunScriptAssistantComponent },
{ path: 'clients/:id', component: ClientMainViewComponent },
{ path: 'clients/:id/create-image', component: CreateClientImageComponent },
{ path: 'repositories', component: RepositoriesComponent },

20
ogWebconsole/src/app/app.module.ts
View File

@ -118,7 +118,6 @@ import { CreateMultipleClientComponent } from './components/groups/shared/client
import { ExportImageComponent } from './components/images/export-image/export-image.component';
import { ImportImageComponent } from "./components/repositories/import-image/import-image.component";
import { LoadingComponent } from './shared/loading/loading.component';
import { RepositoryImagesComponent } from './components/repositories/repository-images/repository-images.component';
import { InputDialogComponent } from './components/commands/commands-task/task-logs/input-dialog/input-dialog.component';
import { ManageOrganizationalUnitComponent } from './components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component';
import { BackupImageComponent } from './components/repositories/backup-image/backup-image.component';
@ -134,9 +133,16 @@ import { ConvertImageComponent } from './components/repositories/convert-image/c
import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
import { GlobalStatusComponent } from './components/global-status/global-status.component';
import { ShowImagesComponent } from './components/repositories/show-images/show-images.component';
import { ShowMonoliticImagesComponent } from './components/repositories/show-monolitic-images/show-monolitic-images.component';
import { StatusTabComponent } from './components/global-status/status-tab/status-tab.component';
import { ConvertImageToVirtualComponent } from './components/repositories/convert-image-to-virtual/convert-image-to-virtual.component';
import { RunScriptAssistantComponent } from './components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component';
import {
SaveScriptComponent
} from "./components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component";
import { EditImageComponent } from './components/repositories/edit-image/edit-image.component';
import { ShowGitImagesComponent } from './components/repositories/show-git-images/show-git-images.component';
import { RenameImageComponent } from './components/repositories/rename-image/rename-image.component';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './locale/', '.json');
@ -223,7 +229,6 @@ registerLocaleData(localeEs, 'es-ES');
ExportImageComponent,
ImportImageComponent,
LoadingComponent,
RepositoryImagesComponent,
InputDialogComponent,
ManageOrganizationalUnitComponent,
BackupImageComponent,
@ -231,9 +236,14 @@ registerLocaleData(localeEs, 'es-ES');
OperationResultDialogComponent,
ConvertImageComponent,
GlobalStatusComponent,
ShowImagesComponent,
ShowMonoliticImagesComponent,
StatusTabComponent,
ConvertImageToVirtualComponent
ConvertImageToVirtualComponent,
RunScriptAssistantComponent,
SaveScriptComponent,
EditImageComponent,
ShowGitImagesComponent,
RenameImageComponent
],
bootstrap: [AppComponent],
imports: [BrowserModule,

1
ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.ts
View File

@ -228,7 +228,6 @@ export class TaskLogsComponent implements OnInit {
this.http.get<any>(`${this.baseUrl}/commands?&page=1&itemsPerPage=10000`).subscribe(
response => {
this.commands = response['hydra:member'];
console.log(this.commands);
this.loading = false;
},
error => {

4
ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
View File

@ -85,14 +85,14 @@ export class CommandsComponent implements OnInit {
openCreateCommandModal(): void {
this.dialog.open(CreateCommandComponent, {
width: '600px',
width: '800px',
}).afterClosed().subscribe(() => this.search());
}
editCommand(event: MouseEvent, command: any): void {
event.stopPropagation();
this.dialog.open(CreateCommandComponent, {
width: '600px',
width: '800px',
data: command['@id']
}).afterClosed().subscribe(() => this.search());
}

13
ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
View File

@ -57,4 +57,15 @@
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}
}
.checkbox-with-hint {
display: flex;
flex-direction: column;
}
.hint-text {
font-size: 12px;
color: gray;
margin-left: 40px;
}

6
ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
View File

@ -13,7 +13,13 @@
<div class="checkbox-group">
<mat-checkbox formControlName="readOnly">{{ 'readOnlyLabel' | translate }}</mat-checkbox>
<mat-checkbox formControlName="enabled">{{ 'enabledLabel' | translate }}</mat-checkbox>
<div class="checkbox-with-hint">
<mat-checkbox formControlName="parameters">{{ 'parameters' | translate }}</mat-checkbox>
<span class="hint-text">Si se selecciona esta opción los parámetros deben indicarse en el script con el símbolo &#64;.</span>
</div>
</div>
<mat-form-field appearance="fill" class="full-width">

9
ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Inject } from '@angular/core';
import {Component, Inject, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { HttpClient } from '@angular/common/http';
@ -11,7 +11,7 @@ import { ConfigService } from "@services/config.service";
templateUrl: './create-command.component.html',
styleUrls: ['./create-command.component.css']
})
export class CreateCommandComponent {
export class CreateCommandComponent implements OnInit{
baseUrl: string;
createCommandForm: FormGroup<any>;
commandId: string | null = null;
@ -30,6 +30,7 @@ export class CreateCommandComponent {
name: ['', Validators.required],
script: [''],
readOnly: [false],
parameters: [false],
enabled: [true],
comments: [''],
});
@ -44,12 +45,12 @@ export class CreateCommandComponent {
load(): void {
this.dataService.getCommand(this.data).subscribe({
next: (response) => {
console.log(response);
this.createCommandForm = this.fb.group({
name: [response.name, Validators.required],
notes: [response.notes],
script: [response.script],
readOnly: [response.readOnly],
parameters: [response.parameters],
enabled: [response.enabled],
});
this.commandId = response['@id'];
@ -84,7 +85,6 @@ export class CreateCommandComponent {
},
(error) => {
this.toastService.error(error['error']['hydra:description']);
console.error('Error al editar el comando', error);
}
);
} else {
@ -95,7 +95,6 @@ export class CreateCommandComponent {
},
(error) => {
this.toastService.error(error['error']['hydra:description']);
console.error('Error al añadir comando', error);
}
);
}

5
ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.html
View File

@ -11,8 +11,9 @@
</ng-container>
<mat-menu #commandMenu="matMenu">
<button mat-menu-item [disabled]="command.disabled || (command.slug === 'create-image' && clientData.length > 1)"
<button mat-menu-item [disabled]="command.disabled
|| (command.slug === 'create-image' && clientData.length > 1)"
*ngFor="let command of arrayCommands" (click)="onCommandSelect(command.slug)">
{{ command.name }}
</button>
</mat-menu>
</mat-menu>

65
ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.ts
View File

@ -29,7 +29,7 @@ export class ExecuteCommandComponent implements OnInit {
{ name: 'Particionar y Formatear', slug: 'partition', disabled: false },
{ name: 'Inventario Software', slug: 'software-inventory', disabled: true },
{ name: 'Inventario Hardware', slug: 'hardware-inventory', disabled: true },
{ name: 'Ejecutar script', slug: 'run-script', disabled: true },
{ name: 'Ejecutar comando', slug: 'run-script', disabled: false },
];
client: any = {};
@ -60,6 +60,14 @@ export class ExecuteCommandComponent implements OnInit {
this.openDeployImageAssistant();
}
if (action === 'run-script') {
this.openRunScriptAssistant();
}
if (action === 'login') {
this.loginClient();
}
if (action === 'reboot') {
this.rebootClient();
}
@ -86,6 +94,19 @@ export class ExecuteCommandComponent implements OnInit {
);
}
loginClient(): void {
this.http.post(`${this.baseUrl}/clients/server/login-client`, {
clients: this.clientData.map((client: any) => client['@id'])
}).subscribe(
response => {
this.toastService.success('Cliente actualizado correctamente');
},
error => {
this.toastService.error('Error de conexión con el cliente');
}
);
}
powerOnClient(): void {
this.http.post(`${this.baseUrl}/image-repositories/wol`, {
clients: this.clientData.map((client: any) => client['@id'])
@ -113,8 +134,18 @@ export class ExecuteCommandComponent implements OnInit {
}
openPartitionAssistant(): void {
const clientDataToSend = this.clientData.map(client => ({
name: client.name,
mac: client.mac,
uuid: '/clients/'+client.uuid,
status: client.status,
partitions: client.partitions,
firmwareType: client.firmwareType,
ip: client.ip
}));
this.router.navigate(['/clients/partition-assistant'], {
state: { clientData: this.clientData },
queryParams: { clientData: JSON.stringify(clientDataToSend) }
}).then(r => {
console.log('Navigated to partition assistant with data:', this.clientData);
});
@ -127,10 +158,38 @@ export class ExecuteCommandComponent implements OnInit {
}
openDeployImageAssistant(): void {
const clientDataToSend = this.clientData.map(client => ({
name: client.name,
mac: client.mac,
uuid: '/clients/'+client.uuid,
status: client.status,
partitions: client.partitions,
ip: client.ip
}));
this.router.navigate(['/clients/deploy-image'], {
state: { clientData: this.clientData },
queryParams: { clientData: JSON.stringify(clientDataToSend) }
}).then(r => {
console.log('Navigated to deploy image with data:', this.clientData);
});
}
openRunScriptAssistant(): void {
const clientDataToSend = this.clientData.map(client => ({
name: client.name,
mac: client.mac,
uuid: '/clients/'+client.uuid,
status: client.status,
partitions: client.partitions,
ip: client.ip
}));
this.router.navigate(['/clients/run-script'], {
queryParams: { clientData: JSON.stringify(clientDataToSend) }
}).then(() => {
console.log('Navigated to run script with data:', clientDataToSend);
});
}
}

16
ogWebconsole/src/app/components/global-status/global-status.component.ts
View File

@ -106,25 +106,27 @@ export class GlobalStatusComponent implements OnInit {
const timeoutId = setTimeout(() => {
this.loading = false;
this.repositories.forEach(repository => {
this.errorRepositories[repository.uuid] = true;
if (!(repository.uuid in this.errorRepositories)) {
this.errorRepositories[repository.uuid] = true;
}
});
}, 5000);
this.http.get<any>(`${this.repositoriesUrl}?page=1&itemsPerPage=10`).subscribe(
data => {
this.repositories = data['hydra:member'];
let remainingRepositories = this.repositories.length;
this.repositories.forEach(repository => {
this.loadRepositoryStatus(repository.uuid, (errorOccurred: boolean) => {
remainingRepositories--;
this.errorRepositories[repository.uuid] = errorOccurred;
if (remainingRepositories === 0) {
this.loading = false;
clearTimeout(timeoutId);
}
if (errorOccurred) {
this.errorRepositories[repository.uuid] = true;
} else {
this.errorRepositories[repository.uuid] = false;
}
});
});
},
@ -138,7 +140,7 @@ export class GlobalStatusComponent implements OnInit {
}
);
}
loadRepositoryStatus(repositoryUuid: string, callback: (errorOccurred: boolean) => void): void {
const timeoutId = setTimeout(() => {
callback(true);

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

@ -42,23 +42,19 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* Distribuye el espacio entre los gráficos */
gap: 20px;
/* Añade espacio entre los gráficos */
}
.disk-usage {
text-align: center;
flex: 1;
min-width: 200px;
/* Ajusta este valor según el tamaño mínimo deseado para cada gráfico */
}
.circular-chart {
max-width: 150px;
max-height: 150px;
margin: 0 auto;
/* Centra el gráfico dentro del contenedor */
}
.chart {
@ -84,6 +80,11 @@
.client-info {
margin: 20px 0;
border-radius: 12px;
background-color: #f5f7fa;
padding: 20px;
border: 2px solid #d1d9e6;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.info-section {
@ -148,9 +149,7 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* Distribuye el espacio entre los gráficos */
gap: 20px;
/* Añade espacio entre los gráficos */
}
.buttons-row {
@ -235,29 +234,22 @@
animation: progress 1s ease-out forwards;
}
/* Define colores distintos para cada partición */
.partition-0 {
stroke: #00bfa5;
}
/* Ejemplo: verde */
.partition-1 {
stroke: #ff6f61;
}
/* Ejemplo: rojo */
.partition-2 {
stroke: #ffb400;
}
/* Ejemplo: amarillo */
.partition-3 {
stroke: #3498db;
}
/* Ejemplo: azul */
/* Texto en el centro del gráfico */
.percentage {
fill: #333;
font-size: 0.7rem;
@ -276,14 +268,14 @@
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
flex-wrap: wrap;
justify-content: center;
align-items: center; /* Centra contenido verticalmente */
align-items: stretch;
margin-bottom: 20px;
}
.table-container {
flex: 1;
flex: 3;
display: flex;
justify-content: center; /* Centrar la tabla */
justify-content: center;
align-items: center;
}
@ -296,7 +288,7 @@ table.mat-elevation-z8 {
}
.mat-header-cell {
background-color: #d1d9e6 !important; /* Encabezado más moderno */
background-color: #d1d9e6 !important;
color: #333;
font-weight: bold;
text-align: center;
@ -312,11 +304,11 @@ table.mat-elevation-z8 {
}
.charts-container {
flex: 1;
flex: 2;
display: flex;
flex-wrap: wrap;
justify-content: center; /* Centra los gráficos */
gap: 20px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.disk-usage {

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

@ -34,7 +34,6 @@
</div>
<div class="disk-container">
<!-- Tabla de particiones -->
<div class="table-container">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
@ -55,7 +54,6 @@
</table>
</div>
<!-- Gráfico circular -->
<div class="charts-container">
<ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
<div *ngFor="let disk of chartDisk" class="disk-usage">

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

@ -48,7 +48,7 @@ export class ClientMainViewComponent implements OnInit {
{ name: 'Particionar y Formatear', slug: 'partition' },
{ name: 'Inventario Software', slug: 'software-inventory' },
{ name: 'Inventario Hardware', slug: 'hardware-inventory' },
{ name: 'Ejecutar script', slug: 'run-script' },
{ name: 'Ejecutar comando', slug: 'run-script' },
];
datePipe: DatePipe = new DatePipe('es-ES');

28
ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.css
View File

@ -24,6 +24,7 @@
table {
width: 100%;
margin-top: 50px;
background-color: #eaeff6;
}
.search-container {
@ -36,18 +37,26 @@ table {
}
.select-container {
margin-top: 20px;
align-items: center;
gap: 16px;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
padding: 20px;
}
.selector {
display: flex;
gap: 16px;
width: 100%;
margin-top: 30px;
box-sizing: border-box;
}
.custom-width {
width: 50%;
margin-bottom: 16px;
.half-width {
flex: 1;
max-width: 50%;
}
.search-string {
flex: 2;
padding: 5px;
@ -87,3 +96,10 @@ table {
padding-right: 1em;
}
.partition-table-container {
background-color: #eaeff6;
padding: 20px;
border-radius: 12px;
margin-top: 20px;
}

74
ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html
View File

@ -7,39 +7,53 @@
</h2>
</div>
<div class="button-row">
<button class="action-button" (click)="save()">Ejecutar</button>
<button class="action-button" [disabled]="!selectedPartition" (click)="save()">Ejecutar</button>
</div>
</div>
<mat-divider></mat-divider>
<div class="select-container">
<mat-form-field appearance="fill" class="custom-width">
<mat-label>Nombre canónico</mat-label>
<input matInput [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
</mat-form-field>
<div class="selector">
<mat-form-field appearance="fill" class="half-width">
<mat-label>Nombre canónico</mat-label>
<input matInput [disabled]="selectedImage" [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
</mat-form-field>
<mat-form-field appearance="fill" class="half-width">
<mat-label>Seleccione imagen</mat-label>
<mat-select [(ngModel)]="selectedImage" name="selectedImage" (selectionChange)="resetCanonicalName()" required>
<mat-option *ngFor="let image of images" [value]="image">{{ image?.name }}</mat-option>
</mat-select>
<mat-hint>Seleccione la imagen para sobreescribir si se requiere. </mat-hint>
</mat-form-field>
</div>
<div class="partition-table-container">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: start">Seleccionar partición</th>
<td mat-cell *matCellDef="let row">
<mat-radio-group
[(ngModel)]="selectedPartition"
[disabled]="!row.operativeSystem"
>
<mat-radio-button [value]="row">
</mat-radio-button>
</mat-radio-group>
</td>
</ng-container>
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let image">
{{ column.cell(image) }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: start">Seleccionar partición</th>
<td mat-cell *matCellDef="let row">
<mat-radio-group
[(ngModel)]="selectedPartition"
[disabled]="!row.operativeSystem"
>
<mat-radio-button [value]="row">
</mat-radio-button>
</mat-radio-group>
</td>
</ng-container>
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let image">
{{ column.cell(image) }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

22
ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Output } from '@angular/core';
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { ToastrService } from "ngx-toastr";
import { ActivatedRoute, Router } from "@angular/router";
@ -11,7 +11,7 @@ import { ConfigService } from '@services/config.service';
templateUrl: './create-image.component.html',
styleUrl: './create-image.component.css'
})
export class CreateClientImageComponent {
export class CreateClientImageComponent implements OnInit{
baseUrl: string;
@Output() dataChange = new EventEmitter<any>();
@ -24,6 +24,7 @@ export class CreateClientImageComponent {
name: string = '';
client: any = null;
loading: boolean = false;
selectedImage: any = null;
dataSource = new MatTableDataSource<any>();
columns = [
{
@ -103,14 +104,29 @@ export class CreateClientImageComponent {
);
}
resetCanonicalName() {
this.name = this.selectedImage ? this.selectedImage.name : '';
}
save(): void {
this.loading = true;
if (!this.selectedPartition) {
this.toastService.error('Debes seleccionar una partición');
this.loading = false;
return;
}
if (this.selectedImage) {
this.toastService.warning('Aviso: Está seleccionando una imagen previamente creada. Se procede a crear un backup de la misma. ');
}
const payload = {
client: `/clients/${this.clientId}`,
name: this.name,
partition: this.selectedPartition['@id'],
source: 'assistant'
source: 'assistant',
selectedImage: this.selectedImage?.['@id']
};

69
ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css
View File

@ -6,6 +6,7 @@
table {
width: 100%;
margin-top: 50px;
background-color: #eaeff6;
}
.search-container {
@ -38,10 +39,8 @@ table {
.select-container {
margin-top: 20px;
align-items: center;
width: 100%;
padding: 0 5px;
padding: 20px;
box-sizing: border-box;
padding-left: 1em;
}
.input-group {
@ -51,6 +50,10 @@ table {
margin-top: 20px;
}
mat-option .unit-name {
display: block;
}
.input-field {
flex: 1 1 calc(33.33% - 16px);
min-width: 250px;
@ -107,6 +110,27 @@ table {
position: relative;
padding: 8px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
&:hover {
background-color: #f0f0f0;
transform: scale(1.02);
}
}
::ng-deep .custom-tooltip {
white-space: pre-line !important;
max-width: 200px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px;
border-radius: 4px;
}
.selected-client {
background-color: #a0c2e5 !important; /* Azul */
color: white !important;
}
.client-details {
@ -114,11 +138,15 @@ table {
}
.client-name {
display: block;
font-size: 1.2em;
font-size: 0.9em;
font-weight: 600;
color: #333;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
display: inline-block;
}
.client-ip {
@ -137,3 +165,34 @@ table {
display: flex;
padding-right: 1em;
}
.partition-table-container {
background-color: #eaeff6;
padding: 20px;
border-radius: 12px;
margin-top: 20px;
}
.disabled-client {
pointer-events: none;
opacity: 0.5;
}
.error-message {
background-color: #de2323;
padding: 20px;
border-radius: 12px;
margin-top: 20px;
color: white;
font-weight: bold;
}
.action-button {
margin-top: 10px;
margin-bottom: 10px;
}
.mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}

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

@ -7,34 +7,60 @@
</h2>
</div>
<div class="button-row">
<button class="action-button" (click)="save()">Ejecutar</button>
<button class="action-button" [disabled]="!allSelected || !selectedModelClient || !selectedImage || !selectedMethod || !selectedPartition" (click)="save()">Ejecutar</button>
</div>
</div>
<mat-divider></mat-divider>
<div class="select-container">
<mat-expansion-panel hideToggle>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title> Clientes </mat-panel-title>
<mat-panel-description> Listado de clientes donde se desplegará la imagen </mat-panel-description>
<mat-panel-description>
Listado de clientes donde se desplegará la imagen
<mat-icon>desktop_windows</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="clients-grid" >
<div *ngFor="let client of clientData" class="client-item">
<div class="client-card">
<img
[src]="'assets/images/ordenador_' + client.status + '.png'"
alt="Client Icon"
class="client-image" />
<div class="button-row">
<button class="action-button" (click)="toggleSelectAll()">
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
</button>
</div>
<div class="client-details">
<span class="client-name">{{ client.name }}</span>
<span class="client-ip">{{ client.ip }}</span>
<span class="client-ip">{{ client.mac }}</span>
</div>
<div class="clients-grid">
<div *ngFor="let client of clientData" class="client-item">
<div class="client-card"
(click)="client.status === 'og-live' && toggleClientSelection(client)"
[ngClass]="{'selected-client': client.selected, 'disabled-client': client.status !== 'og-live'}"
[matTooltip]="getPartitionsTooltip(client)"
matTooltipPosition="above"
matTooltipClass="custom-tooltip">
<img
[src]="'assets/images/computer_' + client.status + '.svg'"
alt="Client Icon"
class="client-image" />
<div class="client-details">
<span class="client-name">{{ client.name | slice:0:20 }}</span>
<span class="client-ip">{{ client.ip }}</span>
<span class="client-ip">{{ client.mac }}</span>
</div>
<mat-divider></mat-divider>
<mat-radio-group [(ngModel)]="selectedModelClient" (change)="loadPartitions(selectedModelClient)">
<mat-radio-button [value]="client"
color="primary"
[disabled]="!client.selected"
(click)="$event.stopPropagation()">
Modelo
</mat-radio-button>
</mat-radio-group>
</div>
</div>
</div>
</mat-expansion-panel>
</div>
@ -45,96 +71,106 @@
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccione imagen</mat-label>
<mat-select [(ngModel)]="selectedImage" name="selectedImage">
<mat-option *ngFor="let image of images" [value]="image">{{ image.image?.name }}</mat-option>
<mat-option *ngFor="let image of images" [value]="image">
<div class="unit-name"> {{ image.name }}</div>
<div style="font-size: smaller; color: gray;">{{ image.description }}</div>
</mat-option>
</mat-select>
<mat-hint *ngIf="clientData">Imágenes alojadas en {{ clientData[0].repository?.name }}</mat-hint>
</mat-form-field>
<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 allMethods" [value]="method">{{ method }}</mat-option>
<mat-select [(ngModel)]="selectedMethod" name="selectedMethod" (selectionChange)="validateImageSize()">
<mat-option *ngFor="let method of allMethods" [value]="method.value">{{ method.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="errorMessage" class="error-message">
{{ errorMessage }}
</div>
<div class="partition-table-container">
<table mat-table [dataSource]="filteredPartitions" class="mat-elevation-z8">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef style="text-align: start">Seleccionar partición</th>
<td mat-cell *matCellDef="let row">
<mat-radio-group [(ngModel)]="selectedPartition" name="selectedPartition" (change)="validateImageSize()">
<mat-radio-button [value]="row">
</mat-radio-button>
</mat-radio-group>
</td>
</ng-container>
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let image">
{{ column.cell(image) }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<mat-divider></mat-divider>
<div class="options-container">
<h3 *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">Opciones multicast</h3>
<h3 *ngIf="isMethod('p2p')" class="input-group">Opciones torrent</h3>
<div *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">
<mat-form-field appearance="fill" class="input-field">
<mat-label>Puerto</mat-label>
<input matInput [(ngModel)]="mcastPort" name="mcastPort" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Dirección</mat-label>
<input matInput [(ngModel)]="mcastIp" name="mcastIp">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label i18n="@@mcastModeLabel">Modo Multicast</mat-label>
<mat-select [(ngModel)]="mcastMode" name="mcastMode">
<mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Velocidad</mat-label>
<input matInput [(ngModel)]="mcastSpeed" name="mcastSpeed" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Máximo Clientes</mat-label>
<input matInput [(ngModel)]="mcastMaxClients" name="mcastMaxClients" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Tiempo Máximo de Espera</mat-label>
<input matInput [(ngModel)]="mcastMaxTime" name="mcastMaxTime" type="number">
</mat-form-field>
</div>
<div *ngIf="isMethod('p2p')" class="input-group">
<mat-form-field appearance="fill" class="input-field">
<mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
<mat-select [(ngModel)]="p2pMode" name="p2pMode">
<mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Semilla</mat-label>
<input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number">
</mat-form-field>
</div>
</div>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: start">Seleccionar partición</th>
<td mat-cell *matCellDef="let row">
<mat-radio-group [(ngModel)]="selectedPartition" name="selectedPartition">
<mat-radio-button [value]="row">
</mat-radio-button>
</mat-radio-group>
</td>
</ng-container>
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let image">
{{ column.cell(image) }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-divider></mat-divider>
<div class="options-container">
<h3 *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">Opciones multicast</h3>
<h3 *ngIf="isMethod('p2p')" class="input-group">Opciones torrent</h3>
<div *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">
<mat-form-field appearance="fill" class="input-field">
<mat-label>Puerto</mat-label>
<input matInput [(ngModel)]="mcastPort" name="mcastPort" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Dirección</mat-label>
<input matInput [(ngModel)]="mcastIp" name="mcastIp">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label i18n="@@mcastModeLabel">Modo Multicast</mat-label>
<mat-select [(ngModel)]="mcastMode" name="mcastMode">
<mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Velocidad</mat-label>
<input matInput [(ngModel)]="mcastSpeed" name="mcastSpeed" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Máximo Clientes</mat-label>
<input matInput [(ngModel)]="mcastMaxClients" name="mcastMaxClients" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Tiempo Máximo de Espera</mat-label>
<input matInput [(ngModel)]="mcastMaxTime" name="mcastMaxTime" type="number">
</mat-form-field>
</div>
<div *ngIf="isMethod('p2p')" class="input-group">
<mat-form-field appearance="fill" class="input-field">
<mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
<mat-select [(ngModel)]="p2pMode" name="p2pMode">
<mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Semilla</mat-label>
<input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number">
</mat-form-field>
</div>
</div>

25
ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.spec.ts
View File

@ -10,14 +10,15 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTableModule } from '@angular/material/table';
import { MatDividerModule } from '@angular/material/divider';
import { MatRadioModule } from '@angular/material/radio';
import { MatRadioModule } from '@angular/material/radio';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateModule } from '@ngx-translate/core';
import { ToastrModule, ToastrService } from 'ngx-toastr';
import { provideRouter } from '@angular/router';
import { ActivatedRoute, provideRouter } from '@angular/router';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';
import {MatExpansionModule} from "@angular/material/expansion";
import {LoadingComponent} from "../../../../../shared/loading/loading.component";
import { MatExpansionModule } from "@angular/material/expansion";
import { LoadingComponent } from "../../../../../shared/loading/loading.component";
import { ConfigService } from '@services/config.service';
describe('DeployImageComponent', () => {
@ -63,13 +64,25 @@ describe('DeployImageComponent', () => {
provide: MAT_DIALOG_DATA,
useValue: {}
},
{
provide: ActivatedRoute,
useValue: {
queryParams: {
subscribe: (fn: (value: any) => void) => fn({ clientData: JSON.stringify([{ '@id': '123', uuid: 'client-uuid', status: 'og-live', partitions: [] }]) })
}
}
},
{ provide: ConfigService, useValue: mockConfigService }
]
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
.compileComponents();
fixture = TestBed.createComponent(DeployImageComponent);
component = fixture.componentInstance;
component.clientData = [{ '@id': '123', uuid: 'client-uuid', status: 'og-live', partitions: [] }];
component.selectedModelClient = component.clientData[0];
component.loadPartitions(component.selectedModelClient);
fixture.detectChanges();
});

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

@ -19,7 +19,6 @@ export class DeployImageComponent {
clientId: string | null = null;
partitions: any[] = [];
images: any[] = [];
clientName: string = '';
selectedImage: any = null;
selectedMethod: string | null = null;
selectedPartition: any = null;
@ -31,10 +30,10 @@ export class DeployImageComponent {
mcastMaxTime: Number = 0;
p2pMode: string = '';
p2pTime: Number = 0;
name: string = '';
client: any = null;
clientData: any = [];
loading: boolean = false;
allSelected = true;
protected p2pModeOptions = [
{ name: 'Leecher', value: 'leecher' },
@ -46,13 +45,17 @@ export class DeployImageComponent {
{ name: 'Full duplex', value: "full" },
];
selectedClients: any[] = [];
selectedModelClient: any = null;
filteredPartitions: any[] = [];
selectedRepository: any = null;
allMethods = [
'uftp',
'udpcast',
'udpcast-direct',
'unicast',
'unicast-direct',
'p2p'
{ name: 'Multicast', value: 'udpcast' },
{ name: 'Unicast', value: 'unicast' },
{ name: 'Multicast (direct)', value: 'udpcast-direct' },
{ name: 'Unicast (direct)', value: 'unicast-direct' },
{ name: 'Torrent', value: 'p2p' },
];
dataSource = new MatTableDataSource<any>();
@ -92,55 +95,109 @@ export class DeployImageComponent {
private toastService: ToastrService,
private configService: ConfigService,
private router: Router,
private route: ActivatedRoute
) {
this.baseUrl = this.configService.apiUrl;
const navigation = this.router.getCurrentNavigation();
this.clientData = navigation?.extras?.state?.['clientData'];
this.clientId = this.clientData?.[0]['@id'];
this.loadImages();
this.loadPartitions()
this.route.queryParams.subscribe(params => {
if (params['clientData']) {
this.clientData = JSON.parse(params['clientData']);
}
});
this.clientId = this.clientData?.length ? this.clientData[0]['@id'] : null;
this.clientData.forEach((client: { selected: boolean; status: string}) => {
if (client.status === 'og-live') {
client.selected = true;
}
});
this.selectedClients = this.clientData.filter(
(client: { status: string }) => client.status === 'og-live'
);
this.selectedModelClient = this.clientData.find(
(client: { status: string }) => client.status === 'og-live'
) || null;
if (this.selectedModelClient) {
this.loadPartitions(this.selectedModelClient);
}
}
isMethod(method: string): boolean {
return this.selectedMethod === method;
}
loadPartitions() {
const url = `${this.baseUrl}${this.clientId}`;
this.http.get(url).subscribe(
(response: any) => {
if (response.partitions) {
this.client = response;
this.clientName = response.name;
this.dataSource.data = response.partitions.filter((partition: any) => {
return partition.partitionNumber !== 0;
});
this.p2pMode = response.organizationalUnit?.networkSettings?.p2pMode;
this.p2pTime = response.organizationalUnit?.networkSettings?.p2pTime;
this.mcastSpeed = response.organizationalUnit?.networkSettings?.mcastSpeed;
this.mcastMode = response.organizationalUnit?.networkSettings?.mcastMode;
this.mcastPort = response.organizationalUnit?.networkSettings?.mcastPort;
this.mcastIp = response.organizationalUnit?.networkSettings?.mcastIp;
}
},
(error) => {
console.error('Error al cargar los datos del cliente:', error);
}
toggleClientSelection(client: any) {
client.selected = !client.selected;
this.updateSelectedClients();
}
updateSelectedClients() {
this.selectedClients = this.clientData.filter(
(client: { selected: boolean; state: string }) => client.selected && client.state === "og-live"
);
if (!this.selectedClients.includes(this.selectedModelClient)) {
this.selectedModelClient = null;
this.filteredPartitions = [];
}
}
getPartitionsTooltip(client: any): string {
if (!client.partitions || client.partitions.length === 0) {
return 'No hay particiones disponibles';
}
return client.partitions
.map((p: { partitionNumber: any; size: any; filesystem: any }) => `#${p.partitionNumber} ${p.filesystem} - ${p.size / 1024 }GB`)
.join('\n');
}
loadPartitions(client: any) {
if (client.selected) {
this.http.get(`${this.baseUrl}${client.uuid}`).subscribe(
(fullClientData: any) => {
this.filteredPartitions = fullClientData.partitions;
this.selectedRepository = fullClientData.repository ?? null;
if (fullClientData.partitions) {
this.filteredPartitions = fullClientData.partitions.filter((partition: any) => {
return partition.partitionNumber !== 0;
});
this.p2pMode = fullClientData.organizationalUnit?.networkSettings?.p2pMode;
this.p2pTime = fullClientData.organizationalUnit?.networkSettings?.p2pTime;
this.mcastSpeed = fullClientData.organizationalUnit?.networkSettings?.mcastSpeed;
this.mcastMode = fullClientData.organizationalUnit?.networkSettings?.mcastMode;
this.mcastPort = fullClientData.organizationalUnit?.networkSettings?.mcastPort;
this.mcastIp = fullClientData.organizationalUnit?.networkSettings?.mcastIp;
}
this.loadImages();
},
(error) => {
console.error('Error al cargar los datos completos del cliente:', error);
}
);
} else {
this.selectedClients = this.selectedClients.filter(c => c.uuid !== client.uuid);
this.filteredPartitions = [];
}
}
toggleSelectAll() {
this.allSelected = !this.allSelected;
this.clientData.forEach((client: { selected: boolean; status: string }) => {
if (client.status === "og-live") {
client.selected = this.allSelected;
}
});
}
loadImages() {
if (!this.clientData || this.clientData.length === 0 || !this.clientData[0]) {
console.error('Error: clientData es nulo, indefinido o vacío.');
return;
}
const repositoryId =
this.clientData[0]?.repository?.id ??
this.clientData[0]?.organizationalUnit?.networkSettings?.repository?.id;
const repositoryId = this.selectedRepository?.id;
if (!repositoryId) {
console.error('Error: No se encontró repositoryId en clientData.');
console.error('Error: No se encontró repositoryId en el cliente seleccionado.');
return;
}
@ -156,9 +213,27 @@ export class DeployImageComponent {
);
}
validateImageSize() {
if (this.selectedImage && this.selectedPartition) {
if ((this.selectedImage.datasize / 1024) / 1024 > this.selectedPartition.size) {
this.errorMessage = "El tamaño de la imagen seleccionada excede el tamaño de la partición.";
return false;
}
}
this.errorMessage = "";
return true;
}
save(): void {
this.loading = true;
if (!this.selectedClients.length) {
this.toastService.error('Debe seleccionar al menos un cliente');
this.loading = false;
return;
}
if (!this.selectedImage) {
this.toastService.error('Debe seleccionar una imagen');
this.loading = false;
@ -180,7 +255,7 @@ export class DeployImageComponent {
this.toastService.info('Preparando petición de despliegue');
const payload = {
clients: this.clientData.map((client: any) => client['@id']),
clients: this.selectedClients.map((client: any) => client.uuid),
method: this.selectedMethod,
// partition: this.selectedPartition['@id'],
diskNumber: this.selectedPartition.diskNumber,
@ -203,7 +278,6 @@ export class DeployImageComponent {
this.router.navigate(['/commands-logs']);
},
error: (error) => {
console.error('Error:', error);
this.toastService.error(error.error['hydra:description'], 'Se ha detectado un error en el despliegue de imágenes.', {
"closeButton": true,
"newestOnTop": false,
@ -215,7 +289,6 @@ export class DeployImageComponent {
});
this.loading = false;
}
}
);
});
}
}

113
ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css
View File

@ -1,8 +1,8 @@
.partition-assistant {
font-family: 'Roboto', sans-serif;
background-color: #f9f9f9;
padding: 20px;
margin: 20px auto;
padding: 40px;
margin: 20px;
background-color: #eaeff6;
border-radius: 12px;
}
.header-container {
@ -19,40 +19,14 @@
color: #555;
}
.partition-bar {
display: flex;
margin: 20px 0;
height: 40px;
border-radius: 8px;
overflow: hidden;
background-color: #e0e0e0;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.partition-segment {
text-align: center;
color: white;
line-height: 40px;
font-weight: 500;
font-size: 0.9rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
border-right: 2px solid white; /* Borde de separación */
}
.partition-segment:last-child {
border-right: none;
}
.partition-table {
width: 100%;
border-collapse: collapse;
background-color: #fff;
overflow: hidden;
margin-bottom: 20px;
}
.partition-table th {
background-color: #f5f5f5;
color: #333;
padding: 12px;
font-weight: 600;
@ -178,26 +152,20 @@ button.remove-btn:hover {
position: relative;
}
.client-card {
background: #ffffff;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
padding: 8px;
text-align: center;
}
.client-details {
margin-top: 4px;
}
.client-name {
display: block;
font-size: 1.2em;
font-size: 0.9em;
font-weight: 600;
color: #333;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
display: inline-block;
}
.client-ip {
@ -216,9 +184,68 @@ button.remove-btn:hover {
margin-top: 20px;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
padding-left: 1em;
}
.client-card {
background: #ffffff;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
padding: 8px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
&:hover {
background-color: #f0f0f0;
transform: scale(1.02);
}
}
::ng-deep .custom-tooltip {
white-space: pre-line !important;
max-width: 200px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px;
border-radius: 4px;
}
.selected-client {
background-color: #a0c2e5 !important;
color: white !important;
}
.button-row {
display: flex;
padding-right: 1em;
}
.disabled-client {
pointer-events: none;
opacity: 0.5;
}
.row-button {
display: flex;
align-items: center;
gap: 30px;
}
.action-button {
margin-top: 10px;
margin-bottom: 10px;
}
.mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}

52
ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html
View File

@ -7,27 +7,55 @@
</h2>
</div>
<div class="subnets-button-row">
<button class="action-button" [disabled]="data.status === 'busy'" (click)="save()">Ejecutar</button>
<button class="action-button" [disabled]="data.status === 'busy' || !selectedModelClient || !allSelected" (click)="save()">Ejecutar</button>
</div>
</div>
<div class="select-container">
<mat-expansion-panel hideToggle>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title> Clientes </mat-panel-title>
<mat-panel-description> Listado de clientes donde se realizará el particionado </mat-panel-description>
<mat-panel-description>
Listado de clientes donde se realizará el particionado
<mat-icon>desktop_windows</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="button-row">
<button class="action-button" (click)="toggleSelectAll()">
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
</button>
</div>
<div class="clients-grid">
<div *ngFor="let client of clientData" class="client-item">
<div class="client-card">
<img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon" class="client-image" />
<div class="client-card"
(click)="client.status === 'og-live' && toggleClientSelection(client)"
[ngClass]="{'selected-client': client.selected, 'disabled-client': client.status !== 'og-live'}"
[matTooltip]="getPartitionsTooltip(client)"
matTooltipPosition="above"
matTooltipClass="custom-tooltip">
<img
[src]="'assets/images/computer_' + client.status + '.svg'"
alt="Client Icon"
class="client-image" />
<div class="client-details">
<span class="client-name">{{ client.name }}</span>
<span class="client-ip">{{ client.ip }}</span>
<span class="client-ip">{{ client.mac }}</span>
</div>
<mat-divider></mat-divider>
<mat-radio-group [(ngModel)]="selectedModelClient" (change)="loadPartitions(selectedModelClient)">
<mat-radio-button [value]="client"
color="primary"
[disabled]="!client.selected"
(click)="$event.stopPropagation()">
Modelo
</mat-radio-button>
</mat-radio-group>
</div>
</div>
</div>
@ -49,15 +77,11 @@
</div>
<div class="partition-assistant" *ngIf="selectedDisk">
<div class="partition-bar">
<div *ngFor="let partition of activePartitions(selectedDisk.diskNumber)"
[ngStyle]="{'width': partition.percentage + '%', 'background-color': partition.color}"
class="partition-segment">
{{ partition.partitionCode }} ({{ (partition.size / 1024).toFixed(2) }} GB)
</div>
</div>
<div class="row">
<div class="row-button">
<button class="action-button" (click)="addPartition(selectedDisk.diskNumber)">Añadir partición</button>
<mat-chip *ngIf="selectedModelClient.firmwareType">
Tabla de particiones: {{ selectedModelClient.firmwareType }}
</mat-chip>
</div>
<div class="row">
@ -119,5 +143,3 @@
</div>
</div>
</mat-dialog-content>
<div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>

107
ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts
View File

@ -1,11 +1,9 @@
import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import {MAT_DIALOG_DATA} from "@angular/material/dialog";
import {ActivatedRoute, Router} from "@angular/router";
import { PARTITION_TYPES } from '../../../../../shared/constants/partition-types';
import { FILESYSTEM_TYPES } from '../../../../../shared/constants/filesystem-types';
import {toUnredirectedSourceFile} from "@angular/compiler-cli/src/ngtsc/util/src/typescript";
import { ConfigService } from '@services/config.service';
interface Partition {
@ -47,6 +45,9 @@ export class PartitionAssistantComponent {
view: [number, number] = [400, 300];
showLegend = true;
showLabels = true;
allSelected = true;
selectedClients: any[] = [];
selectedModelClient: any = null;
constructor(
private http: HttpClient,
@ -57,19 +58,40 @@ export class PartitionAssistantComponent {
) {
this.baseUrl = this.configService.apiUrl;
this.apiUrl = this.baseUrl + '/partitions';
const navigation = this.router.getCurrentNavigation();
this.clientData = navigation?.extras?.state?.['clientData'];
this.clientId = this.clientData[0]['@id'];
this.loadPartitions();
this.route.queryParams.subscribe(params => {
if (params['clientData']) {
this.clientData = JSON.parse(params['clientData']);
}
});
this.clientId = this.clientData?.[0]['@id'];
this.clientData.forEach((client: { selected: boolean; status: string}) => {
if (client.status === 'og-live') {
client.selected = true;
}
});
this.selectedClients = this.clientData.filter(
(client: { status: string }) => client.status === 'og-live'
);
this.selectedModelClient = this.clientData.find(
(client: { status: string }) => client.status === 'og-live'
) || null;
if (this.selectedModelClient) {
this.loadPartitions(this.selectedModelClient);
}
}
get selectedDisk():any {
return this.disks.find(disk => disk.diskNumber === this.selectedDiskNumber) || null;
}
loadPartitions() {
const url = `${this.baseUrl}${this.clientId}`;
loadPartitions(client: any) {
if (!client.selected) {
this.selectedModelClient = null;
}
const url = `${this.baseUrl}${client.uuid}`;
this.http.get(url).subscribe(
(response) => {
this.data = response;
@ -81,7 +103,17 @@ export class PartitionAssistantComponent {
);
}
toggleSelectAll() {
this.allSelected = !this.allSelected;
this.clientData.forEach((client: { selected: boolean; status: string }) => {
if (client.status === "og-live") {
client.selected = this.allSelected;
}
});
}
initializeDisks() {
this.disks = [];
const partitionsFromData = this.data.partitions;
this.originalPartitions = JSON.parse(JSON.stringify(partitionsFromData));
@ -137,15 +169,6 @@ export class PartitionAssistantComponent {
return bytes
}
activePartitions(diskNumber: number) {
const disk = this.disks.find((d) => d.diskNumber === diskNumber);
if (disk) {
return disk.partitions.filter((partition) => !partition.removed);
}
return null;
}
updatePartitionPercentages(partitions: Partition[], totalDiskSize: number) {
let totalUsedPercentage = 0;
@ -178,11 +201,31 @@ export class PartitionAssistantComponent {
}
}
toggleClientSelection(client: any) {
client.selected = !client.selected;
this.updateSelectedClients();
}
updateSelectedClients() {
this.selectedClients = this.clientData.filter((client: { selected: any; }) => client.selected);
}
getPartitionsTooltip(client: any): string {
if (!client.partitions || client.partitions.length === 0) {
return 'No hay particiones disponibles';
}
return client.partitions
.map((p: { partitionNumber: any; size: any; filesystem: any }) => `#${p.partitionNumber} ${p.filesystem} - ${p.size / 1024 }GB`)
.join('\n');
}
addPartition(diskNumber: number) {
const disk = this.disks.find((d) => d.diskNumber === diskNumber);
if (disk) {
const remainingGB = this.getRemainingGB(disk.partitions, disk.totalDiskSize);
if (remainingGB > 0) {
const removedPartitions = disk.partitions.filter((p) => !p.removed);
const maxPartitionNumber =
@ -205,7 +248,7 @@ export class PartitionAssistantComponent {
this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize);
this.updateDiskChart(disk);
} else {
this.errorMessage = 'No hay suficiente espacio libre en el disco para crear una nueva partición.';
this.toastService.error('No hay suficiente espacio libre en el disco para crear una nueva partición.');
}
}
}
@ -237,28 +280,9 @@ export class PartitionAssistantComponent {
return Math.max(0, totalDiskSize - totalUsedGB);
}
getModifiedOrNewPartitions() {
const modifiedPartitions: any[] = [];
this.disks.forEach((disk) => {
disk.partitions.forEach((partition) => {
const originalPartition = this.originalPartitions.find(
(p) => p.diskNumber === disk.diskNumber && p.partitionNumber === partition.partitionNumber
);
modifiedPartitions.push({
partition,
diskNumber: disk.diskNumber,
partitionNumber: partition.partitionNumber,
});
});
});
return modifiedPartitions;
}
save() {
if (!this.selectedDisk) {
this.errorMessage = 'Por favor selecciona un disco antes de guardar.';
this.toastService.error('No se ha seleccionado un disco.');
return;
}
@ -267,7 +291,7 @@ export class PartitionAssistantComponent {
const totalPartitionSize = this.selectedDisk.partitions.reduce((sum: any, partition: { size: any; }) => sum + partition.size, 0);
if (totalPartitionSize > this.selectedDisk.totalDiskSize) {
this.errorMessage = 'El tamaño total de las particiones en el disco seleccionado excede el tamaño total del disco.';
this.toastService.error('El tamaño total de las particiones en el disco seleccionado excede el tamaño total del disco.');
this.loading = false;
return;
}
@ -276,7 +300,7 @@ export class PartitionAssistantComponent {
if (modifiedPartitions.length === 0) {
this.loading = false;
this.errorMessage = 'No hay cambios para guardar en el disco seleccionado.';
this.toastService.info('No hay cambios para guardar en el disco seleccionado.');
return;
}
@ -295,7 +319,7 @@ export class PartitionAssistantComponent {
if (newPartitions.length > 0) {
const bulkPayload = {
partitions: newPartitions,
clients: this.clientData.map((client: any) => client['@id']),
clients: this.selectedClients.map((client: any) => client.uuid),
};
this.http.post(this.apiUrl, bulkPayload).subscribe(
@ -305,7 +329,6 @@ export class PartitionAssistantComponent {
this.router.navigate(['/commands-logs']);
},
(error) => {
console.error('Error al crear las particiones:', error);
this.loading = false;
this.toastService.error('Error al crear las particiones.');
}

264
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.css 100644
View File

@ -0,0 +1,264 @@
.divider {
margin: 20px 0;
}
table {
width: 100%;
margin-top: 50px;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.deploy-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
gap: 10px;
}
.script-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background-color: #eaeff6;
border-radius: 12px;
margin-top: 20px;
}
.script-content {
flex: 2;
min-width: 60%;
}
.script-params {
flex: 1;
min-width: 35%;
}
@media (max-width: 768px) {
.script-container {
flex-direction: column;
}
.script-content, .script-params {
min-width: 100%;
}
}
.select-container {
margin-top: 20px;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.input-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
}
.input-field {
flex: 1 1 calc(33.33% - 16px);
min-width: 250px;
}
.script-preview {
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
font-family: monospace;
white-space: pre-wrap;
min-height: 50px;
}
.custom-width {
width: 50%;
margin-bottom: 16px;
}
.search-string {
flex: 2;
padding: 5px;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
}
.client-item {
position: relative;
}
.client-card {
background: #ffffff;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
padding: 8px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
&:hover {
background-color: #f0f0f0;
transform: scale(1.02);
}
}
.client-details {
margin-top: 4px;
}
.client-name {
font-size: 0.9em;
font-weight: 600;
color: #333;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
display: inline-block;
}
.client-ip {
display: block;
font-size: 0.9em;
color: #666;
}
.header-container-title {
flex-grow: 1;
text-align: left;
padding-left: 1em;
}
.button-row {
display: flex;
padding-right: 1em;
}
.client-card {
background: #ffffff;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
padding: 8px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
&:hover {
background-color: #f0f0f0;
transform: scale(1.02);
}
}
::ng-deep .custom-tooltip {
white-space: pre-line !important;
max-width: 200px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px;
border-radius: 4px;
}
.selected-client {
background-color: #a0c2e5 !important;
color: white !important;
}
.button-row {
display: flex;
padding-right: 1em;
}
.disabled-client {
pointer-events: none;
opacity: 0.5;
}
.action-button {
margin-top: 10px;
margin-bottom: 10px;
}
.mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
.new-command-container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
background-color: #eaeff6;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
margin-top: 15px;
}
.new-command-container mat-form-field {
width: 100%;
}
.new-command-container textarea {
font-family: monospace;
resize: vertical;
}
.new-command-container .action-button {
align-self: flex-end;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.full-width {
width: 100%;
}

103
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.html 100644
View File

@ -0,0 +1,103 @@
<app-loading [isLoading]="loading"></app-loading>
<div class="header-container">
<div class="header-container-title">
<h2>
{{ 'runScript' | translate }}
</h2>
</div>
<div class="button-row">
<button class="action-button" [disabled]="selectedClients.length < 1 || (commandType === 'existing' && !selectedScript)" (click)="save()">Ejecutar</button>
</div>
</div>
<mat-divider></mat-divider>
<div class="select-container">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title> Clientes </mat-panel-title>
<mat-panel-description>
Listado de clientes donde se ejecutara el script seleccionado
<mat-icon>desktop_windows</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="button-row">
<button class="action-button" (click)="toggleSelectAll()">
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
</button>
</div>
<div class="clients-grid">
<div *ngFor="let client of clientData" class="client-item">
<div class="client-card"
(click)="client.status === 'og-live' && toggleClientSelection(client)"
[ngClass]="{'selected-client': client.selected, 'disabled-client': client.status !== 'og-live'}"
[matTooltip]="getPartitionsTooltip(client)"
matTooltipPosition="above"
matTooltipClass="custom-tooltip">
<img
[src]="'assets/images/computer_' + client.status + '.svg'"
alt="Client Icon"
class="client-image" />
<div class="client-details">
<span class="client-name">{{ client.name }}</span>
<span class="client-ip">{{ client.ip }}</span>
<span class="client-ip">{{ client.mac }}</span>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
</div>
<mat-divider style="margin-top: 20px;"></mat-divider>
<div class="select-container">
<div class="command-toggle">
<mat-radio-group [(ngModel)]="commandType">
<mat-radio-button value="new">Comando nuevo</mat-radio-button>
<mat-radio-button value="existing">Comando existente</mat-radio-button>
</mat-radio-group>
</div>
<div *ngIf="commandType === 'new'" class="new-command-container">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Ingrese el script</mat-label>
<textarea matInput [(ngModel)]="newScript" rows="6" placeholder="Escriba su script aquí"></textarea>
</mat-form-field>
<button class="action-button" (click)="saveNewScript()">Guardar Comando</button>
</div>
<div *ngIf="commandType === 'existing'" class="select-container">
<mat-form-field appearance="fill" class="custom-width">
<mat-label>Seleccione script a ejecutar</mat-label>
<mat-select [(ngModel)]="selectedScript" (selectionChange)="onScriptChange()">
<mat-option *ngFor="let script of scripts" [value]="script">{{ script.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="selectedScript && commandType === 'existing'" class="script-container">
<div class="script-content">
<h3> Script:</h3>
<div class="script-preview" [innerHTML]="scriptContent"></div>
</div>
<div class="script-params" *ngIf="parameterNames.length > 0">
<h3>Ingrese los valores de los parámetros detectados:</h3>
<div *ngFor="let paramName of parameterNames">
<mat-form-field appearance="fill" class="full-width">
<mat-label>{{ paramName }}</mat-label>
<input matInput
[ngModel]="parameters[paramName]"
(ngModelChange)="onParamChange(paramName, $event)"
placeholder="Ingrese el valor">
</mat-form-field>
</div>
</div>
</div>
</div>

99
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.spec.ts 100644
View File

@ -0,0 +1,99 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RunScriptAssistantComponent } from './run-script-assistant.component';
import { DeployImageComponent } from "../deploy-image/deploy-image.component";
import { LoadingComponent } from "../../../../../shared/loading/loading.component";
import { FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from "@angular/material/dialog";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatExpansionModule } from "@angular/material/expansion";
import { MatButtonModule } from "@angular/material/button";
import { MatTableModule } from "@angular/material/table";
import { MatDividerModule } from "@angular/material/divider";
import { MatRadioModule } from "@angular/material/radio";
import { MatSelectModule } from "@angular/material/select";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ToastrModule, ToastrService } from "ngx-toastr";
import { TranslateModule } from "@ngx-translate/core";
import { provideHttpClient } from "@angular/common/http";
import { provideHttpClientTesting } from "@angular/common/http/testing";
import { provideRouter } from "@angular/router";
import { ConfigService } from "@services/config.service";
import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import {MatIconModule} from "@angular/material/icon";
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
describe('RunScriptAssistantComponent', () => {
let component: RunScriptAssistantComponent;
let fixture: ComponentFixture<RunScriptAssistantComponent>;
beforeEach(async () => {
const mockConfigService = {
apiUrl: 'http://mock-api-url',
mercureUrl: 'http://mock-mercure-url'
};
await TestBed.configureTestingModule({
declarations: [RunScriptAssistantComponent, DeployImageComponent, LoadingComponent],
imports: [
ReactiveFormsModule,
FormsModule,
MatDialogModule,
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
MatExpansionModule,
MatButtonModule,
MatTableModule,
MatDividerModule,
MatRadioModule,
MatProgressSpinnerModule,
MatSelectModule,
BrowserAnimationsModule,
MatIconModule,
ToastrModule.forRoot(),
HttpClientTestingModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [
FormBuilder,
ToastrService,
provideHttpClient(),
provideHttpClientTesting(),
provideRouter([]),
{
provide: MatDialogRef,
useValue: {}
},
{
provide: MAT_DIALOG_DATA,
useValue: {}
},
{ provide: ConfigService, useValue: mockConfigService }
]
})
.compileComponents();
fixture = TestBed.createComponent(RunScriptAssistantComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

177
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.ts 100644
View File

@ -0,0 +1,177 @@
import {Component, EventEmitter, Output} from '@angular/core';
import {SelectionModel} from "@angular/cdk/collections";
import {HttpClient} from "@angular/common/http";
import {ToastrService} from "ngx-toastr";
import {ConfigService} from "@services/config.service";
import {ActivatedRoute, Router} from "@angular/router";
import {SaveScriptComponent} from "./save-script/save-script.component";
import {MatDialog} from "@angular/material/dialog";
@Component({
selector: 'app-run-script-assistant',
templateUrl: './run-script-assistant.component.html',
styleUrl: './run-script-assistant.component.css'
})
export class RunScriptAssistantComponent {
baseUrl: string;
@Output() dataChange = new EventEmitter<any>();
errorMessage = '';
clientId: string | null = null;
name: string = '';
client: any = null;
clientData: any = [];
loading: boolean = false;
scripts: any[] = [];
scriptContent: string = "";
parameters: any = {};
selectedScript: any = null;
selectedClients: any[] = [];
allSelected: boolean = true;
commandType: string = 'existing';
newScript: string = '';
selection = new SelectionModel(true, []);
parameterNames: string[] = Object.keys(this.parameters);
constructor(
private http: HttpClient,
private toastService: ToastrService,
private configService: ConfigService,
private router: Router,
private dialog: MatDialog,
private route: ActivatedRoute
) {
this.baseUrl = this.configService.apiUrl;
this.route.queryParams.subscribe(params => {
if (params['clientData']) {
this.clientData = JSON.parse(params['clientData']);
}
});
this.clientId = this.clientData?.length ? this.clientData[0]['@id'] : null;
this.clientData.forEach((client: { selected: boolean; status: string}) => {
if (client.status === 'og-live') {
client.selected = true;
}
});
this.selectedClients = this.clientData.filter(
(client: { status: string }) => client.status === 'og-live'
);
this.loadScripts()
}
loadScripts(): void {
this.loading = true;
this.http.get(`${this.baseUrl}/commands?readOnly=false&enabled=true`).subscribe((data: any) => {
this.scripts = data['hydra:member'];
this.loading = false;
}, (error) => {
this.toastService.error(error.error['hydra:description']);
this.loading = false;
});
}
saveNewScript() {
if (!this.newScript.trim()) {
this.toastService.error('Debe ingresar un script antes de guardar.');
return;
}
const dialogRef = this.dialog.open(SaveScriptComponent, {
width: '400px',
data: this.newScript
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.toastService.success('Script guardado correctamente');
}
});
}
toggleClientSelection(client: any) {
client.selected = !client.selected;
this.updateSelectedClients();
}
updateSelectedClients() {
this.selectedClients = this.clientData.filter(
(client: { selected: boolean; status: string }) => client.selected && client.status === "og-live"
);
}
toggleSelectAll() {
this.allSelected = !this.allSelected;
this.clientData.forEach((client: { selected: boolean; status: string }) => {
if (client.status === "og-live") {
client.selected = this.allSelected;
}
});
}
getPartitionsTooltip(client: any): string {
if (!client.partitions || client.partitions.length === 0) {
return 'No hay particiones disponibles';
}
return client.partitions
.map((p: { partitionNumber: any; size: any; filesystem: any }) => `#${p.partitionNumber} ${p.filesystem} - ${p.size / 1024 }GB`)
.join('\n');
}
onScriptChange() {
if (this.selectedScript) {
this.scriptContent = this.selectedScript.script;
const matches = this.scriptContent.match(/@(\w+)/g) || [];
const uniqueParams = Array.from(new Set(matches.map(m => m.slice(1))));
this.parameters = {};
uniqueParams.forEach(param => this.parameters[param] = '');
this.parameterNames = uniqueParams;
this.updateScript();
}
}
onParamChange(name: string, value: string): void {
this.parameters[name] = value;
this.updateScript();
}
updateScript(): void {
let updatedScript = this.selectedScript.script;
for (const [key, value] of Object.entries(this.parameters)) {
const regex = new RegExp(`@${key}\\b`, 'g');
updatedScript = updatedScript.replace(regex, value || `@${key}`);
}
this.scriptContent = updatedScript;
}
trackByIndex(index: number): number {
return index;
}
save(): void {
this.loading = true;
this.http.post(`${this.baseUrl}/commands/run-script`, {
clients: this.selectedClients.map((client: any) => client.uuid),
script: this.commandType === 'existing' ? this.scriptContent : this.newScript,
}).subscribe(
response => {
this.toastService.success('Script ejecutado correctamente');
this.dataChange.emit();
this.router.navigate(['/commands-logs']);
},
error => {
this.toastService.error('Error al ejecutar el script');
}
);
this.loading = false;
}
}

40
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component.css 100644
View File

@ -0,0 +1,40 @@
.dialog-content {
display: flex;
flex-direction: column;
padding: 40px;
}
.repository-form {
width: 100%;
display: flex;
flex-direction: column;
}
.full-width{
width: 100%;
margin-top: 16px;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}
@media (max-width: 600px) {
.form-field {
width: 100%;
}
.dialog-actions {
flex-direction: column;
align-items: stretch;
}
button {
width: 100%;
margin-left: 0;
margin-bottom: 8px;
}
}

12
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component.html 100644
View File

@ -0,0 +1,12 @@
<h2 mat-dialog-title>Guardar Comando</h2>
<mat-dialog-content>
<p>Introduce un nombre para el comando:</p>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nombre del Comando</mat-label>
<input matInput [(ngModel)]="commandName">
</mat-form-field>
</mat-dialog-content>
<div mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="close()">Cancelar</button>
<button class="submit-button" (click)="save()">Guardar</button>
</div>

94
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component.spec.ts 100644
View File

@ -0,0 +1,94 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import {RunScriptAssistantComponent} from "../run-script-assistant.component";
import {DeployImageComponent} from "../../deploy-image/deploy-image.component";
import {LoadingComponent} from "../../../../../../shared/loading/loading.component";
import {FormBuilder, FormsModule, ReactiveFormsModule} from "@angular/forms";
import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatInputModule} from "@angular/material/input";
import {MatCheckboxModule} from "@angular/material/checkbox";
import {MatExpansionModule} from "@angular/material/expansion";
import {MatButtonModule} from "@angular/material/button";
import {MatTableModule} from "@angular/material/table";
import {MatDividerModule} from "@angular/material/divider";
import {MatRadioModule} from "@angular/material/radio";
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
import {MatSelectModule} from "@angular/material/select";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {MatIconModule} from "@angular/material/icon";
import {ToastrModule, ToastrService} from "ngx-toastr";
import {HttpClientTestingModule, provideHttpClientTesting} from "@angular/common/http/testing";
import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {HttpClient, provideHttpClient} from "@angular/common/http";
import {provideRouter} from "@angular/router";
import {ConfigService} from "@services/config.service";
import {HttpLoaderFactory} from "../run-script-assistant.component.spec";
import {SaveScriptComponent} from "./save-script.component";
describe('SaveScriptComponent', () => {
let component: SaveScriptComponent;
let fixture: ComponentFixture<SaveScriptComponent>;
beforeEach(async () => {
const mockConfigService = {
apiUrl: 'http://mock-api-url',
mercureUrl: 'http://mock-mercure-url'
};
await TestBed.configureTestingModule({
declarations: [RunScriptAssistantComponent, DeployImageComponent, LoadingComponent],
imports: [
ReactiveFormsModule,
FormsModule,
MatDialogModule,
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
MatExpansionModule,
MatButtonModule,
MatTableModule,
MatDividerModule,
MatRadioModule,
MatProgressSpinnerModule,
MatSelectModule,
BrowserAnimationsModule,
MatIconModule,
ToastrModule.forRoot(),
HttpClientTestingModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [
FormBuilder,
ToastrService,
provideHttpClient(),
provideHttpClientTesting(),
provideRouter([]),
{
provide: MatDialogRef,
useValue: {}
},
{
provide: MAT_DIALOG_DATA,
useValue: {}
},
{ provide: ConfigService, useValue: mockConfigService }
]
})
.compileComponents();
fixture = TestBed.createComponent(SaveScriptComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

51
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component.ts 100644
View File

@ -0,0 +1,51 @@
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {FormBuilder, Validators} from "@angular/forms";
import {HttpClient} from "@angular/common/http";
import {ToastrService} from "ngx-toastr";
import {ConfigService} from "@services/config.service";
import {DataService} from "../../../../../commands/main-commands/data.service";
@Component({
selector: 'app-save-script',
templateUrl: './save-script.component.html',
styleUrl: './save-script.component.css'
})
export class SaveScriptComponent {
commandName: string = '';
baseUrl: string;
constructor(
private http: HttpClient,
public dialogRef: MatDialogRef<SaveScriptComponent>,
private toastService: ToastrService,
private configService: ConfigService,
private dataService: DataService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.baseUrl = this.configService.apiUrl;
}
save() {
const payload = {
name: this.commandName,
script: this.data,
readOnly: false,
enabled: true,
};
this.http.post(`${this.baseUrl}/commands`, payload).subscribe(
(response) => {
this.toastService.success('Comando añadido correctamente');
this.dialogRef.close();
},
(error) => {
this.toastService.error(error['error']['hydra:description']);
}
);
}
close() {
this.dialogRef.close();
}
}

220
ogWebconsole/src/app/components/groups/groups.component.css
View File

@ -22,6 +22,96 @@
overflow: hidden;
}
.clients-mat-divider {
display: none;
}
@media (max-width: 992px) {
.main-container {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
.filters-and-tree-container {
display: flex !important;
flex-direction: row !important;
flex-grow: 1 !important;
flex-shrink: 1 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
padding: 1rem !important;
box-sizing: border-box !important;
min-height: 250px !important;
overflow-y: auto !important;
}
.filters-panel,
.tree-container {
flex: 1 1 50% !important;
overflow-y: auto !important;
padding: 0.5rem !important;
box-sizing: border-box !important;
margin-bottom: 0 !important;
}
.filters-container {
padding: 0 !important;
}
.tree-mat-divider {
display: none !important;
}
.clients-mat-divider {
display: inline;
}
.clients-view-header {
display: flex;
flex-direction: row !important;
justify-content: space-between !important;
margin-bottom: 0.5rem !important;
margin-top: 0.5rem !important;
align-items: center !important;
padding-right: 1rem !important;
}
.groups-button-row {
display: none !important;
}
.cards-view {
max-height: none !important;
}
.clients-table {
max-height: unset !important;
overflow: unset !important;
display: table !important;
flex-direction: unset !important;
}
.clients-container {
padding: 0em 1em 0em 1em !important;
}
}
@media (max-width: 1400px) {
.type-view-text {
display: none;
}
}
@media (max-width: 450px) {
.clients-title-name {
font-size: 20px !important;
}
}
.header-container-title {
flex-grow: 1;
text-align: left;
@ -34,15 +124,6 @@
padding-right: 0.5rem;
}
.clients-container {
flex-grow: 1;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0rem 1rem 0rem 0.5rem;
}
.clients-view-header {
display: flex;
flex-direction: row;
@ -53,6 +134,32 @@
padding-right: 1rem;
}
@media (max-width: 768px) {
.clients-view-header {
display: flex;
flex-direction: column !important;
}
}
.clients-title-name {
font-size: x-large;
display: block;
padding: 1rem 1rem 1rem 13px;
margin-left: 0.6rem;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.view-type-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
flex-shrink: 0;
}
.clients-view {
flex-grow: 1;
overflow-y: auto;
@ -75,16 +182,35 @@
padding-left: 1rem;
}
.list-view {
overflow-x: auto;
}
.clients-table {
max-height: calc(100vh - 330px);
overflow: auto;
display: flex;
flex-direction: column;
width: 100%;
table-layout: auto;
border-collapse: collapse;
}
.clients-table table {
flex-grow: 1;
overflow: auto;
.clients-table th,
.clients-table td {
text-align: left;
padding: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clients-table th {
font-weight: 500;
}
.clients-table td {
border-bottom: 1px solid #ddd;
}
.paginator-container {
@ -124,18 +250,6 @@
flex: 1;
}
@media (max-width: 1024px) {
.header-container {
flex-direction: column;
gap: 10px;
}
.groups-button-row {
flex-wrap: wrap;
gap: 10px;
}
}
mat-tree {
background-color: #f9f9f9;
padding: 0px 10px 10px 10px;
@ -265,21 +379,36 @@ mat-tree mat-tree-node.disabled:hover {
padding-right: 1rem;
}
.filters-container {
.clients-container {
flex: 8;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: start;
padding: 1em 1em 0em 1em;
}
.filter-form-field {
min-width: 21rem;
padding: 0rem 1rem 0rem 0.5rem;
}
.filters-and-tree-container {
flex: 2;
display: flex;
flex-direction: column;
height: 100%;
flex-shrink: 1;
width: 100%;
box-sizing: border-box;
}
.filters-container {
display: flex;
flex-direction: column;
padding: 1em;
flex-grow: 1;
}
.filter-form-field {
flex: 1;
min-width: 150px;
max-width: 100%;
box-sizing: border-box;
}
.filters-panel {
@ -327,6 +456,10 @@ mat-tree mat-tree-node.disabled:hover {
margin-top: 4px;
}
.type-view-text {
margin-left: 0.5vw;
}
.action-icons {
display: flex;
justify-content: center;
@ -373,22 +506,6 @@ mat-tree mat-tree-node.disabled:hover {
position: relative;
}
@media (max-width: 1560px) {
.clients-view-header {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
margin-top: 0;
}
}
.clients-title-name {
font-size: x-large;
display: block;
padding: 1rem 1rem 1rem 13px;
margin-left: 0.6rem;
}
.no-clients-info {
display: flex;
align-items: center;
@ -397,13 +514,6 @@ mat-tree mat-tree-node.disabled:hover {
margin-left: 1.6rem;
}
.view-type-container {
display: flex;
justify-content: flex-end;
gap: 2rem;
align-items: center;
}
mat-button-toggle-group {
border: none;
}

54
ogWebconsole/src/app/components/groups/groups.component.html
View File

@ -25,6 +25,27 @@
{{ 'legendButton' | translate }}
</button>
</div>
<!-- Menú desplegable para pantallas pequeñas -->
<div *ngIf="isSmallScreen" class="groups-menu">
<button mat-icon-button [matMenuTriggerFor]="smallScreenMenu" matTooltip="Opciones" matTooltipShowDelay="1000">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #smallScreenMenu="matMenu">
<button mat-menu-item (click)="addOU($event)">
{{ 'newOrganizationalUnitButton' | translate }}
</button>
<button mat-menu-item (click)="addClient($event)">
{{ 'newSingleClientButton' | translate }}
</button>
<button mat-menu-item (click)="addMultipleClients($event)">
{{ 'newMultipleClientButton' | translate }}
</button>
<button mat-menu-item (click)="openBottomSheet()">
{{ 'legendButton' | translate }}
</button>
</mat-menu>
</div>
</div>
<div *ngIf="initialLoading; else contentTemplate">
@ -72,7 +93,7 @@
</button>
</mat-form-field>
<mat-divider style="padding-top: 10px;"></mat-divider>
<mat-divider class="tree-mat-divider" style="padding-top: 10px;"></mat-divider>
<!-- Funcionalidad actualmente deshabilitada-->
<!-- <mat-form-field appearance="outline">
@ -185,25 +206,23 @@
<!-- CLIENTS -->
<div class="clients-container">
<mat-divider class="clients-mat-divider"></mat-divider>
<!-- CLIENTS HEADER -->
<div class="clients-view-header">
<div>
<span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
{{ 'clients' | translate }}
<strong>{{ selectedNode?.name }}</strong>
</span>
</div>
<span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
{{ 'clients' | translate }}
<strong>{{ selectedNode?.name }}</strong>
</span>
<div class="view-type-container">
<app-execute-command [clientData]="selection.selected" [buttonType]="'text'"
[buttonText]="'Ejecutar comandos'" [disabled]="selection.selected.length === 0"></app-execute-command>
<mat-button-toggle-group name="viewType" aria-label="View Type" [hideSingleSelectionIndicator]="true"
(change)="toggleView($event.value)">
<mat-button-toggle value="list" [disabled]="currentView === 'list'">
<mat-icon>list</mat-icon> {{ 'Vista Lista' | translate }}
<mat-icon>list</mat-icon> <span class="type-view-text">{{ 'Vista Lista' | translate }}</span>
</mat-button-toggle>
<mat-button-toggle value="card" [disabled]="currentView === 'card'">
<mat-icon>grid_view</mat-icon> {{ 'Vista Tarjeta' | translate }}
<mat-icon>grid_view</mat-icon> <span class="type-view-text">{{ 'Vista Tarjeta' | translate }}</span>
</mat-button-toggle>
</mat-button-toggle-group>
</div>
@ -226,10 +245,10 @@
<div *ngFor="let client of arrayClients" class="client-item">
<div class="client-card">
<mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
[checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
[checked]="selection.isSelected(client)" [disabled]="client.status === 'busy' || client.status === 'off' || client.status === 'disconnected'">
</mat-checkbox>
<img style="margin-top: 0.5em;" [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
class="client-image" />
<img style="margin-top: 0.5em;" [src]="'assets/images/computer_' + client.status + '.svg'"
alt="Client Icon" class="client-image" />
<div class="client-details">
<span class="client-name">{{ client.name }}</span>
@ -295,7 +314,7 @@
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(row)"
[checked]="selection.isSelected(row)" [disabled]="row.status === 'busy'">
[checked]="selection.isSelected(row)" [disabled]="row.status === 'busy' || row.status === 'off' || row.status === 'disconnected'">
</mat-checkbox>
</td>
</ng-container>
@ -304,7 +323,7 @@
<td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
matTooltipPosition="left" matTooltipShowDelay="500">
<div class="client-status-container">
<img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
<img [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon"
class="client-image" />
<span *ngIf="syncStatus && syncingClientId === client.uuid">
<mat-spinner diameter="24"></mat-spinner>
@ -317,7 +336,7 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'name' | translate }} </th>
<td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
matTooltipPosition="left" matTooltipShowDelay="500">
<p style="font-weight: 500;">{{ client.name }}</p>
<p>{{ client.name }}</p>
</td>
</ng-container>
<ng-container matColumnDef="ip">
@ -359,7 +378,8 @@
<mat-icon>more_vert</mat-icon>
</button>
<app-execute-command [clientData]="[client]" [buttonType]="'icon'" [icon]="'terminal'"
[disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"></app-execute-command>
[disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))">
</app-execute-command>
<mat-menu #clientMenu="matMenu">
<button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
<mat-icon>edit</mat-icon>

9
ogWebconsole/src/app/components/groups/groups.component.spec.ts
View File

@ -4,7 +4,6 @@ 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';
@ -117,13 +116,13 @@ describe('GroupsComponent', () => {
expect(component.expandPathToNode).toHaveBeenCalledWith(node);
});
it('should handle node click', () => {
/* it('should handle node click', () => {
const node: TreeNode = { id: '1', name: 'Node 1', type: 'type', children: [] };
spyOn<any>(component, 'fetchClientsForNode');
component.onNodeClick(node);
component.onNodeClick($event, node);
expect(component.selectedNode).toBe(node);
expect(component['fetchClientsForNode']).toHaveBeenCalledWith(node);
});
});*/
it('should fetch clients for node', () => {
const node: TreeNode = { id: '1', name: 'Node 1', type: 'type', children: [] };
@ -135,4 +134,4 @@ describe('GroupsComponent', () => {
{ params: jasmine.any(Object) }
);
});
})
})

45
ogWebconsole/src/app/components/groups/groups.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { Component, OnInit, OnDestroy, ViewChild, QueryList, ViewChildren } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
@ -24,7 +24,8 @@ import { ManageClientComponent } from "./shared/clients/manage-client/manage-cli
import { debounceTime } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { ConfigService } from '@services/config.service';
import { GlobalStatusComponent } from '../global-status/global-status.component';
import { BreakpointObserver } from '@angular/cdk/layout';
import { MatMenuTrigger } from '@angular/material/menu';
enum NodeType {
OrganizationalUnit = 'organizational-unit',
@ -40,6 +41,8 @@ enum NodeType {
styleUrls: ['./groups.component.css'],
})
export class GroupsComponent implements OnInit, OnDestroy {
@ViewChildren(MatMenuTrigger) menuTriggers!: QueryList<MatMenuTrigger>;
isSmallScreen: boolean = false;
baseUrl: string;
mercureUrl: string;
organizationalUnits: UnidadOrganizativa[] = [];
@ -105,6 +108,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
public dialog: MatDialog,
private bottomSheet: MatBottomSheet,
private joyrideService: JoyrideService,
private breakpointObserver: BreakpointObserver,
private toastr: ToastrService,
private configService: ConfigService
) {
@ -144,20 +148,31 @@ export class GroupsComponent implements OnInit, OnDestroy {
this.arrayClients = this.selectedClients.data;
const eventSource = new EventSource(`${this.mercureUrl}?topic=`
+ encodeURIComponent(`clients`));
const eventSource = new EventSource(`${this.mercureUrl}?topic=` + encodeURIComponent(`clients`));
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data && data['@id']) {
if (Array.isArray(data)) {
data.forEach((client) => {
if (client && client['@id']) {
this.updateClientStatus(client['@id'], client.status);
}
});
}
else if (data && data['@id']) {
this.updateClientStatus(data['@id'], data.status);
}
}
};
this.clientFilterSubject.pipe(debounceTime(500)).subscribe(searchTerm => {
this.filters['query'] = searchTerm;
this.filterClients(searchTerm);
});
this.breakpointObserver.observe(['(max-width: 992px)']).subscribe((result) => {
this.isSmallScreen = result.matches;
})
}
private updateClientStatus(clientUuid: string, newStatus: string): void {
@ -359,6 +374,8 @@ export class GroupsComponent implements OnInit, OnDestroy {
onMenuClick(event: Event, node: any): void {
event.stopPropagation();
this.selectedNode = node;
this.fetchClientsForNode(node);
}
@ -371,7 +388,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
this.selectedClients.data = response['hydra:member'];
this.length = response['hydra:totalItems'];
this.arrayClients = this.selectedClients.data;
this.hasClients = node.hasClients ?? false;
this.hasClients = this.selectedClients.data.length > 0;
this.isLoadingClients = false;
this.initialLoading = false;
this.selection.clear();
@ -465,10 +482,11 @@ export class GroupsComponent implements OnInit, OnDestroy {
? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px' })
: this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px' });
dialogRef.afterClosed().subscribe(() => {
if (node) {
this.refreshData(node.id);
dialogRef.afterClosed().subscribe((result) => {
if (result?.success) {
this.refreshData(node?.id);
}
this.menuTriggers.forEach(trigger => trigger.closeMenu());
});
}
@ -532,8 +550,11 @@ export class GroupsComponent implements OnInit, OnDestroy {
? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px' })
: this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px' });
dialogRef.afterClosed().subscribe(() => {
this.refreshData(this.selectedNode?.id, selectedClientsBeforeEdit);
dialogRef.afterClosed().subscribe((result) => {
if (result?.success) {
this.refreshData(this.selectedNode?.id, selectedClientsBeforeEdit);
}
this.menuTriggers.forEach(trigger => trigger.closeMenu());
});
}

5
ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.ts
View File

@ -272,7 +272,7 @@ export class ManageClientComponent implements OnInit {
this.http.patch<any>(putUrl, formData, { headers }).subscribe(
response => {
this.dialogRef.close();
this.dialogRef.close({ success: true });
this.toastService.success('Cliente actualizado exitosamente', 'Éxito');
},
error => {
@ -285,6 +285,7 @@ export class ManageClientComponent implements OnInit {
(response) => {
this.toastService.success('Cliente creado exitosamente', 'Éxito');
this.dialogRef.close({
success: true,
client: response,
organizationalUnit: formData.organizationalUnit,
});
@ -300,6 +301,6 @@ export class ManageClientComponent implements OnInit {
}
onNoClick(): void {
this.dialogRef.close();
this.dialogRef.close({ success: false });
}
}

13
ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.css
View File

@ -6,6 +6,10 @@ h1 {
margin-top: 20px;
}
.create-ou-container {
position: relative;
}
.form-field {
width: 100%;
}
@ -20,6 +24,13 @@ h1 {
overflow-y: auto;
}
.loading-spinner {
display: block;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.mat-dialog-actions {
display: flex;
justify-content: flex-end;
@ -55,4 +66,4 @@ h1 {
align-items: center;
grid-column: span 2;
margin-bottom: 10px;
}
}

23
ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
View File

@ -1,11 +1,10 @@
<app-loading [isLoading]="loading"></app-loading>
<div *ngIf="!loading">
<div class="create-ou-container">
<h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1>
<div class="mat-dialog-content">
<div class="mat-dialog-content" [ngClass]="{'loading': loading}">
<!-- Paso 1: General -->
<span class="step-title">General</span>
<form [formGroup]="generalFormGroup" class="grid-form">
<mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
<span *ngIf="!loading" class="step-title">General</span>
<form *ngIf="generalFormGroup && !loading" [formGroup]="generalFormGroup" class="grid-form">
<mat-form-field class="form-field" appearance="fill">
<mat-label>Tipo</mat-label>
<mat-select formControlName="type" required>
@ -42,8 +41,8 @@
</form>
<!-- Paso 2: Información del Aula -->
<span *ngIf="generalFormGroup.value.type === 'classroom'" class="step-title">Información del aula</span>
<form *ngIf="generalFormGroup.value.type === 'classroom'" class="grid-form"
<span *ngIf="generalFormGroup.value.type === 'classroom' && !loading" class="step-title">Información del aula</span>
<form *ngIf="generalFormGroup.value.type === 'classroom' && !loading" class="grid-form"
[formGroup]="classroomInfoFormGroup">
<mat-form-field class="form-field">
<mat-label>Localización</mat-label>
@ -71,8 +70,8 @@
</form>
<!-- Paso 3: Configuración de Red -->
<span class="step-title">Configuración de Red</span>
<form [formGroup]="networkSettingsFormGroup" class="grid-form">
<span *ngIf="!loading" class="step-title">Configuración de Red</span>
<form *ngIf="networkSettingsFormGroup && !loading" [formGroup]="networkSettingsFormGroup" class="grid-form">
<mat-form-field class="form-field">
<mat-label>OgLive</mat-label>
<mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)">
@ -168,8 +167,8 @@
</form>
<!-- Paso 4: Información Adicional -->
<span class="step-title">Información Adicional</span>
<form [formGroup]="additionalInfoFormGroup">
<span *ngIf="!loading" class="step-title">Información Adicional</span>
<form *ngIf="additionalInfoFormGroup && !loading" [formGroup]="additionalInfoFormGroup">
<mat-form-field class="form-field">
<mat-label>Comentarios</mat-label>
<textarea matInput formControlName="comments"></textarea>

349
ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts
View File

@ -75,7 +75,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
});
this.networkSettingsFormGroup = this._formBuilder.group({
ogLive: [ null],
ogLive: [null],
repository: [null],
proxy: [null],
dns: [null],
@ -100,63 +100,76 @@ export class ManageOrganizationalUnitComponent implements OnInit {
capacity: [null, [Validators.required, Validators.min(0)]],
remoteCalendar: [null]
});
if (this.isEditMode) {
this.loadData(data.uuid);
}
}
ngOnInit() {
this.loadParentUnits();
this.loadHardwareProfiles();
this.loadCalendars();
this.loadOgLives();
this.loadRepositories();
this.loadMenus()
ngOnInit(): void {
this.loading = true;
const observables = [
this.loadParentUnits(),
this.loadHardwareProfiles(),
this.loadCalendars(),
this.loadOgLives(),
this.loadRepositories(),
this.loadMenus(),
];
Promise.all(observables).then(() => {
if (this.isEditMode) {
this.loadData(this.data.uuid).then(() => {
this.loading = false;
});
} else {
this.loading = false;
}
}).catch(error => {
console.error('Error loading data:', error);
this.loading = false;
});
}
get filteredTypes(): string[] {
return this.generalFormGroup.get('parent')?.value ? this.types.filter(type => type !== 'organizational-unit') : this.types;
}
loadParentUnits() {
this.loading = true;
const url = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=1000`;
this.http.get<any>(url).subscribe(
response => {
this.parentUnits = response['hydra:member'];
this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
id: unit['@id'],
name: unit.name,
path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits),
repository: unit.networkSettings?.repository?.['@id'],
hardwareProfile: unit.networkSettings?.hardwareProfile?.['@id'],
ogLive: unit.networkSettings?.ogLive?.['@id'],
menu: unit.networkSettings?.menu?.['@id'],
mcastIp: unit.networkSettings?.mcastIp,
mcastSpeed: unit.networkSettings?.mcastSpeed,
mcastPort: unit.networkSettings?.mcastPort,
mcastMode: unit.networkSettings?.mcastMode,
netiface: unit.networkSettings?.netiface,
p2pMode: unit.networkSettings?.p2pMode,
p2pTime: unit.networkSettings?.p2pTime,
dns: unit.networkSettings?.dns,
netmask: unit.networkSettings?.netmask,
router: unit.networkSettings?.router,
ntp: unit.networkSettings?.ntp
}));
loadParentUnits(): Promise<void> {
return new Promise((resolve, reject) => {
const url = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=1000`;
this.http.get<any>(url).subscribe(
response => {
this.parentUnits = response['hydra:member'];
this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
id: unit['@id'],
name: unit.name,
path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits),
repository: unit.networkSettings?.repository?.['@id'],
hardwareProfile: unit.networkSettings?.hardwareProfile?.['@id'],
ogLive: unit.networkSettings?.ogLive?.['@id'],
menu: unit.networkSettings?.menu?.['@id'],
mcastIp: unit.networkSettings?.mcastIp,
mcastSpeed: unit.networkSettings?.mcastSpeed,
mcastPort: unit.networkSettings?.mcastPort,
mcastMode: unit.networkSettings?.mcastMode,
netiface: unit.networkSettings?.netiface,
p2pMode: unit.networkSettings?.p2pMode,
p2pTime: unit.networkSettings?.p2pTime,
dns: unit.networkSettings?.dns,
netmask: unit.networkSettings?.netmask,
router: unit.networkSettings?.router,
ntp: unit.networkSettings?.ntp
}));
const initialUnitId = this.generalFormGroup.get('parent')?.value;
if (initialUnitId) {
this.setOrganizationalUnitDefaults(initialUnitId);
const initialUnitId = this.generalFormGroup.get('parent')?.value;
if (initialUnitId) {
this.setOrganizationalUnitDefaults(initialUnitId);
}
resolve();
},
error => {
console.error('Error fetching parent units:', error);
reject(error);
}
this.loading = false;
},
error => {
console.error('Error fetching parent units:', error);
this.loading = false;
}
);
);
});
}
onParentChange(event: any): void {
@ -191,78 +204,87 @@ export class ManageOrganizationalUnitComponent implements OnInit {
return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;
}
loadHardwareProfiles(): void {
this.loading = true;
this.dataService.getHardwareProfiles().subscribe(
(data: any[]) => {
this.hardwareProfiles = data;
this.loading = false;
},
(error: any) => {
console.error('Error fetching hardware profiles', error);
this.loading = false;
}
);
loadHardwareProfiles(): Promise<void> {
return new Promise((resolve, reject) => {
this.dataService.getHardwareProfiles().subscribe(
(data: any[]) => {
this.hardwareProfiles = data;
resolve();
},
error => {
console.error('Error fetching hardware profiles:', error);
reject(error);
}
);
});
}
loadMenus(): void {
this.loading = true;
const url = `${this.baseUrl}/menus?page=1&itemsPerPage=10000`;
loadOgLives(): Promise<void> {
return new Promise((resolve, reject) => {
const url = `${this.baseUrl}/og-lives?page=1&itemsPerPage=30`;
this.http.get<any>(url).subscribe(
response => {
this.menus = response['hydra:member'];
this.loading = false;
},
error => {
console.error('Error fetching menus:', error);
this.loading = false;
}
);
this.http.get<any>(url).subscribe(
response => {
this.ogLives = response['hydra:member'];
resolve();
},
error => {
console.error('Error fetching ogLives:', error);
reject(error);
}
);
});
}
loadOgLives() {
this.loading = true;
this.dataService.getOgLives().subscribe(
(data: any[]) => {
this.ogLives = data;
this.loading = false;
},
error => {
console.error('Error fetching ogLives', error);
this.loading = false;
}
);
loadMenus(): Promise<void> {
return new Promise((resolve, reject) => {
const url = `${this.baseUrl}/menus?page=1&itemsPerPage=10000`;
this.http.get<any>(url).subscribe(
response => {
this.menus = response['hydra:member'];
resolve();
},
error => {
console.error('Error fetching menus:', error);
reject(error);
}
);
});
}
loadRepositories() {
this.loading = true;
this.dataService.getRepositories().subscribe(
(data: any[]) => {
this.repositories = data;
this.loading = false;
},
error => {
console.error('Error fetching repositories', error);
this.loading = false;
}
);
loadRepositories(): Promise<void> {
return new Promise((resolve, reject) => {
const url = `${this.baseUrl}/image-repositories?page=1&itemsPerPage=10000`;
this.http.get<any>(url).subscribe(
response => {
this.repositories = response['hydra:member'];
resolve();
},
error => {
console.error('Error fetching ogLives:', error);
reject(error);
}
);
});
}
loadCalendars() {
this.loading = true;
const apiUrl = `${this.baseUrl}/remote-calendars?page=1&itemsPerPage=30`;
this.http.get<any>(apiUrl).subscribe(
response => {
this.calendars = response['hydra:member'];
this.loading = false;
},
error => {
console.error('Error loading calendars', error);
this.toastService.error('Error loading current calendar');
this.loading = false;
}
);
loadCalendars(): Promise<void> {
return new Promise((resolve, reject) => {
const apiUrl = `${this.baseUrl}/remote-calendars?page=1&itemsPerPage=30`;
this.http.get<any>(apiUrl).subscribe(
response => {
this.calendars = response['hydra:member'];
resolve();
},
error => {
console.error('Error loading calendars', error);
this.toastService.error('Error loading current calendar');
reject(error);
}
);
});
}
loadCurrentCalendar(uuid: string): void {
@ -293,57 +315,58 @@ export class ManageOrganizationalUnitComponent implements OnInit {
this.networkSettingsFormGroup.value.repository = event.value;
}
loadData(uuid: string) {
this.loading = true;
const url = `${this.baseUrl}/organizational-units/${uuid}`;
loadData(uuid: string): Promise<void> {
return new Promise((resolve, reject) => {
const url = `${this.baseUrl}/organizational-units/${uuid}`;
this.http.get<any>(url).subscribe(
data => {
this.generalFormGroup.patchValue({
name: data.name,
parent: data.parent ? data.parent['@id'] : '',
description: data.description,
type: data.type,
excludeParentChanges: data.excludeParentChanges
});
this.additionalInfoFormGroup.patchValue({
comments: data.comments
});
this.networkSettingsFormGroup.patchValue({
proxy: data.networkSettings.proxy,
dns: data.networkSettings.dns,
netmask: data.networkSettings.netmask,
router: data.networkSettings.router,
ntp: data.networkSettings.ntp,
netiface: data.networkSettings.netiface,
p2pMode: data.networkSettings.p2pMode,
p2pTime: data.networkSettings.p2pTime,
mcastIp: data.networkSettings.mcastIp,
mcastSpeed: data.networkSettings.mcastSpeed,
mcastPort: data.networkSettings.mcastPort,
mcastMode: data.networkSettings.mcastMode,
menu: data.networkSettings.menu ? data.networkSettings.menu['@id'] : null,
hardwareProfile: data.networkSettings.hardwareProfile ? data.networkSettings.hardwareProfile['@id'] : null,
ogLive: data.networkSettings.ogLive ? data.networkSettings.ogLive['@id'] : null,
repository: data.networkSettings.repository ? data.networkSettings.repository['@id'] : null
});
this.classroomInfoFormGroup.patchValue({
location: data.location,
projector: data.projector,
board: data.board,
capacity: data.capacity,
remoteCalendar: data.remoteCalendar ? data.remoteCalendar['@id'] : null
});
this.loading = false;
},
this.http.get<any>(url).subscribe(
data => {
this.generalFormGroup.patchValue({
name: data.name,
parent: data.parent ? data.parent['@id'] : '',
description: data.description,
type: data.type,
excludeParentChanges: data.excludeParentChanges
});
this.additionalInfoFormGroup.patchValue({
comments: data.comments
});
this.networkSettingsFormGroup.patchValue({
proxy: data.networkSettings?.proxy,
dns: data.networkSettings?.dns,
netmask: data.networkSettings?.netmask,
router: data.networkSettings?.router,
ntp: data.networkSettings?.ntp,
netiface: data.networkSettings?.netiface,
p2pMode: data.networkSettings?.p2pMode,
p2pTime: data.networkSettings?.p2pTime,
mcastIp: data.networkSettings?.mcastIp,
mcastSpeed: data.networkSettings?.mcastSpeed,
mcastPort: data.networkSettings?.mcastPort,
mcastMode: data.networkSettings?.mcastMode,
menu: data.networkSettings?.menu ? data.networkSettings.menu['@id'] : null,
hardwareProfile: data.networkSettings?.hardwareProfile ? data.networkSettings.hardwareProfile['@id'] : null,
ogLive: data.networkSettings?.ogLive ? data.networkSettings.ogLive['@id'] : null,
repository: data.networkSettings?.repository ? data.networkSettings.repository['@id'] : null
});
this.classroomInfoFormGroup.patchValue({
location: data.location,
projector: data.projector,
board: data.board,
capacity: data.capacity,
remoteCalendar: data.remoteCalendar ? data.remoteCalendar['@id'] : null
});
resolve();
},
error => {
console.error('Error fetching data for edit:', error);
this.toastService.error('Error fetching data');
this.loading = false;
this.onNoClick();
}
);
error => {
console.error('Error fetching data for edit:', error);
this.toastService.error('Error fetching data');
reject(error);
this.onNoClick();
}
);
});
}
onSubmit() {
@ -371,7 +394,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
this.http.put<any>(putUrl, formData, { headers }).subscribe(
response => {
this.unitAdded.emit();
this.dialogRef.close();
this.dialogRef.close({ success: true });
this.toastService.success('Editado exitosamente', 'Éxito');
},
error => {
@ -390,7 +413,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
this.http.post<any>(postUrl, formData, { headers }).subscribe(
response => {
this.unitAdded.emit(response);
this.dialogRef.close(response);
this.dialogRef.close({ success: true });
this.toastService.success('Creado exitosamente', 'Éxito');
},
error => {
@ -407,6 +430,6 @@ export class ManageOrganizationalUnitComponent implements OnInit {
}
onNoClick(): void {
this.dialogRef.close();
this.dialogRef.close({ success: false });
}
}

106
ogWebconsole/src/app/components/login/login.component.spec.ts
View File

@ -7,9 +7,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { of, throwError } from 'rxjs';
import { ConfigService } from '@services/config.service';
import { GlobalStatusComponent } from '../global-status/global-status.component';
describe('LoginComponent', () => {
let component: LoginComponent;
@ -22,7 +24,7 @@ describe('LoginComponent', () => {
};
await TestBed.configureTestingModule({
declarations: [LoginComponent],
declarations: [LoginComponent, GlobalStatusComponent],
imports: [
FormsModule,
ToastrModule.forRoot(),
@ -30,7 +32,8 @@ describe('LoginComponent', () => {
MatFormFieldModule,
MatInputModule,
MatIconModule,
TranslateModule.forRoot()
MatDialogModule,
TranslateModule.forRoot()
],
providers: [
provideHttpClient(withInterceptorsFromDi()),
@ -46,101 +49,4 @@ describe('LoginComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
it('should disable the login button if username or password is missing', () => {
component.loginObj.username = '';
component.loginObj.password = '';
fixture.detectChanges();
const button = fixture.nativeElement.querySelector('button[type="submit"]');
expect(button.disabled).toBeTruthy();
});
it('should enable the login button if username and password are present', () => {
component.loginObj.username = 'testUser';
component.loginObj.password = 'testPass';
fixture.detectChanges();
const button = fixture.nativeElement.querySelector('button[type="submit"]');
expect(button.disabled).toBeFalsy();
});
it('should call onLogin and navigate on successful login', () => {
const mockRouter = spyOn(component['router'], 'navigateByUrl');
const mockHttp = spyOn(component['http'], 'post').and.returnValue(of({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c', refreshToken: '456' }));
component.loginObj.username = 'testUser';
component.loginObj.password = 'testPass';
component.onLogin();
expect(mockHttp).toHaveBeenCalledWith(`${component.baseUrl}/auth/login`, component.loginObj);
expect(mockRouter).toHaveBeenCalledWith('/groups');
});
it('should show error message on login failure', () => {
const mockToast = spyOn(component['toastService'], 'error');
const mockHttp = spyOn(component['http'], 'post').and.returnValue(throwError({ error: { message: 'Invalid credentials' } }));
component.loginObj.username = 'testUser';
component.loginObj.password = 'testPass';
component.onLogin();
expect(mockHttp).toHaveBeenCalled();
expect(mockToast).toHaveBeenCalledWith('Error al iniciar sesión: Invalid credentials', 'Error');
});
it('should change language to Spanish and save to localStorage', () => {
const mockTranslate = spyOn(component['translateService'], 'use');
component.changeLanguage('es');
expect(localStorage.getItem('language')).toBe('es');
expect(mockTranslate).toHaveBeenCalledWith('es');
});
it('should change language to English and save to localStorage', () => {
const mockTranslate = spyOn(component['translateService'], 'use');
component.changeLanguage('en');
expect(localStorage.getItem('language')).toBe('en');
expect(mockTranslate).toHaveBeenCalledWith('en');
});
it('should toggle password visibility when clicking the button', () => {
const initialHideState = component.hide();
const button = fixture.nativeElement.querySelector('button[mat-icon-button]');
button.click();
expect(component.hide()).toBe(!initialHideState);
});
it('should add "invalid" class to username input if it is invalid and touched', () => {
const usernameInput = fixture.nativeElement.querySelector('input[name="username"]');
usernameInput.value = ''; // Empty value makes it invalid
usernameInput.dispatchEvent(new Event('input'));
usernameInput.dispatchEvent(new Event('blur')); // Simulates "touched"
fixture.detectChanges();
expect(usernameInput.classList).toContain('invalid');
});
it('should add rotating class to the logo when loading', () => {
component.isLoading = true;
fixture.detectChanges();
const logo = fixture.nativeElement.querySelector('.login-logo');
expect(logo.classList).toContain('rotating');
});
it('should not add rotating class to the logo when not loading', () => {
component.isLoading = false;
fixture.detectChanges();
const logo = fixture.nativeElement.querySelector('.login-logo');
expect(logo.classList).not.toContain('rotating');
});
it('should show a success toast message', () => {
const mockToast = spyOn(component['toastService'], 'success');
component.openSnackBar(false, 'Welcome!');
expect(mockToast).toHaveBeenCalledWith('Welcome!', 'Éxito');
});
it('should show an error toast message', () => {
const mockToast = spyOn(component['toastService'], 'error');
component.openSnackBar(true, 'Something went wrong');
expect(mockToast).toHaveBeenCalledWith('Something went wrong', 'Error');
});
});
});

9
ogWebconsole/src/app/components/login/login.component.ts
View File

@ -5,6 +5,8 @@ import { TranslateService } from '@ngx-translate/core';
import { ToastrService } from "ngx-toastr";
import { jwtDecode } from "jwt-decode";
import { ConfigService } from '@services/config.service';
import { MatDialog } from '@angular/material/dialog';
import { GlobalStatusComponent } from '../global-status/global-status.component'
@Component({
selector: 'app-login',
@ -27,7 +29,8 @@ export class LoginComponent {
private router: Router,
private configService: ConfigService,
private toastService: ToastrService,
private translateService: TranslateService
private translateService: TranslateService,
private dialog: MatDialog
) {
this.baseUrl = this.configService.apiUrl;
const savedLanguage = localStorage.getItem('language') || 'es';
@ -67,6 +70,10 @@ export class LoginComponent {
this.openSnackBar(false, 'Bienvenido ' + this.loginObj.username);
this.router.navigateByUrl('/groups');
this.dialog.open(GlobalStatusComponent, {
width: '45vw',
height: '80vh',
});
}
this.isLoading = false;
},

28
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets.component.ts
View File

@ -91,15 +91,25 @@ export class OgDhcpSubnetsComponent implements OnInit {
}
syncSubnets() {
this.http.post(`${this.apiUrl}/sync`, {})
.subscribe(response => {
this.loading = true;
const timeoutId = setTimeout(() => {
this.loading = false;
this.toastService.error('Error al sincronizar: tiempo de espera agotado');
}, 3500);
this.http.post(`${this.apiUrl}/sync`, {}).subscribe({
next: (response) => {
clearTimeout(timeoutId);
this.toastService.success('Sincronización con componente DHCP exitosa');
this.loadSubnets()
this.loadSubnets();
this.loading = false;
}, error => {
},
error: (error) => {
clearTimeout(timeoutId);
this.loading = false;
this.toastService.error('Error al sincronizar');
});
}
});
}
toggleAction(subnet: any, action: string): void {
@ -213,10 +223,10 @@ export class OgDhcpSubnetsComponent implements OnInit {
openShowClientsDialog(subnet: Subnet) {
const dialogRef = this.dialog.open(ShowClientsComponent, {
width: '100vw',
height: '100vh',
maxWidth: '100vw',
maxHeight: '100vh',
width: '85vw',
height: '85vh',
maxWidth: '85vw',
maxHeight: '85vh',
data: { subnetId: subnet.id, subnetName: subnet.name, subnetUuid: subnet.uuid }
});

2
ogWebconsole/src/app/components/ogdhcp/show-clients/show-clients.component.html
View File

@ -58,7 +58,7 @@
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let client">
<ng-container *ngIf="column.columnDef === 'status'">
<img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon" class="client-image" />
<img [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon" class="client-image" />
</ng-container>
<ng-container *ngIf="column.columnDef === 'ogLive'">

39
ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.css 100644
View File

@ -0,0 +1,39 @@
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
}
mat-form-field {
width: 100%;
}
mat-dialog-actions {
display: flex;
justify-content: flex-end;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.selected-list ul {
list-style: none;
padding: 0;
}
.selected-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
border-bottom: 1px solid #ccc;
}
.selected-item button {
margin-left: 10px;
}

16
ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.html 100644
View File

@ -0,0 +1,16 @@
<h2 mat-dialog-title>Editar imagen </h2>
<mat-dialog-content>
<form [formGroup]="imageForm">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Descripción</mat-label>
<input matInput formControlName="description" placeholder="Introduzca la descripción de la imagen."
/>
</mat-form-field>
</form>
</mat-dialog-content>
<div class="action-container">
<button class="ordinary-button" (click)="close()">Cancelar</button>
<button class="submit-button" (click)="save()">Continuar</button>
</div>

72
ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.spec.ts 100644
View File

@ -0,0 +1,72 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, provideHttpClientTesting } from '@angular/common/http/testing';
import { EditImageComponent } from './edit-image.component';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import { ToastrModule, ToastrService } from 'ngx-toastr';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { provideHttpClient } from '@angular/common/http';
import { ConfigService } from '@services/config.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
describe('EditImageComponent', () => {
let component: EditImageComponent;
let fixture: ComponentFixture<EditImageComponent>;
beforeEach(async () => {
const mockConfigService = {
apiUrl: 'http://mock-api-url'
};
const mockDialogData = {
image: {
'@id': 'mock-id',
name: 'Mock Image',
description: 'Mock Description'
}
};
await TestBed.configureTestingModule({
declarations: [EditImageComponent],
imports: [
HttpClientTestingModule,
MatDialogModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
ToastrModule.forRoot(),
BrowserAnimationsModule
],
providers: [
FormBuilder,
ToastrService,
provideHttpClient(),
provideHttpClientTesting(),
{
provide: MatDialogRef,
useValue: {}
},
{
provide: MAT_DIALOG_DATA,
useValue: mockDialogData
},
{
provide: ConfigService,
useValue: mockConfigService
}
]
})
.compileComponents();
fixture = TestBed.createComponent(EditImageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

70
ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.ts 100644
View File

@ -0,0 +1,70 @@
import {Component, Inject, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {ToastrService} from "ngx-toastr";
import {Router} from "@angular/router";
import {ConfigService} from "@services/config.service";
import {FormBuilder, FormGroup} from "@angular/forms";
@Component({
selector: 'app-edit-image',
templateUrl: './edit-image.component.html',
styleUrl: './edit-image.component.css'
})
export class EditImageComponent implements OnInit{
baseUrl: string;
loading: boolean = true;
imageForm: FormGroup;
constructor(
private http: HttpClient,
public dialogRef: MatDialogRef<EditImageComponent>,
private fb: FormBuilder,
private toastService: ToastrService,
private router: Router,
private configService: ConfigService,
@Inject(MAT_DIALOG_DATA) public data: { image: any }
) {
this.baseUrl = this.configService.apiUrl;
this.imageForm = this.fb.group({
description: ['']
})
}
ngOnInit(): void {
this.loading = true;
this.load()
}
load() {
this.http.get<any>(`${this.baseUrl}${this.data.image['@id']}`).subscribe({
next: (response) => {
this.imageForm.patchValue({
description: response.description
});
this.loading = false;
},
error: error => {
this.toastService.error(error.error['hydra:description']);
}
});
}
save() {
const payload = this.imageForm.value;
this.http.put<any>(`${this.baseUrl}${this.data.image['@id']}`, payload).subscribe({
next: (response) => {
this.toastService.success('Image updated successfully');
this.dialogRef.close(true);
},
error: error => {
this.toastService.error(error.error['hydra:description']);
}
});
}
close() {
this.dialogRef.close();
}
}

12
ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.html
View File

@ -12,6 +12,18 @@
<input matInput formControlName="ip" name="description">
</mat-form-field>
<mat-form-field appearance="fill" class="form-field">
<mat-label>Puerto ssh</mat-label>
<input matInput formControlName="sshPort" name="sshPort">
<mat-hint>Valor que utilizará el sistema para algunas acciones como transferir imagenes.</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="form-field">
<mat-label>Usuario</mat-label>
<input matInput formControlName="user" name="user">
<mat-hint>Este usuario se utilizara para conectarse al repositorio.</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="form-field">
<mat-label>Comentarios</mat-label>
<input matInput formControlName="comments" name="comments">

6
ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.ts
View File

@ -30,6 +30,8 @@ export class ManageRepositoryComponent implements OnInit {
this.imageForm = this.fb.group({
name: [null, Validators.required],
ip: [null],
sshPort: [null],
user: [null],
comments: [null],
});
}
@ -46,6 +48,8 @@ export class ManageRepositoryComponent implements OnInit {
this.imageForm = this.fb.group({
name: [response.name, Validators.required],
ip: [response.ip],
sshPort: [response.sshPort?? '22' ],
user: [response.user?? 'opengnsys'],
comments: [response.comments],
});
this.repositoryId = response['@id'];
@ -60,6 +64,8 @@ export class ManageRepositoryComponent implements OnInit {
const payload = {
name: this.imageForm.value.name,
ip: this.imageForm.value.ip,
sshPort: this.imageForm.value.sshPort,
user: this.imageForm.value.user,
comments: this.imageForm.value.comments,
};

39
ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.css 100644
View File

@ -0,0 +1,39 @@
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
}
mat-form-field {
width: 100%;
}
mat-dialog-actions {
display: flex;
justify-content: flex-end;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.selected-list ul {
list-style: none;
padding: 0;
}
.selected-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
border-bottom: 1px solid #ccc;
}
.selected-item button {
margin-left: 10px;
}

13
ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.html 100644
View File

@ -0,0 +1,13 @@
<h2 mat-dialog-title>Renombrar imagen {{ data.imageImageRepository?.name }}</h2>
<mat-dialog-content>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nuevo nombre</mat-label>
<input matInput [(ngModel)]="name" placeholder="Introduzca el nuevo nombre" required />
</mat-form-field>
</mat-dialog-content>
<div class="action-container">
<button class="ordinary-button" (click)="close()">Cancelar</button>
<button class="submit-button" (click)="save()">Continuar</button>
</div>

54
ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.spec.ts 100644
View File

@ -0,0 +1,54 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RenameImageComponent } from './rename-image.component';
import {ConvertImageToVirtualComponent} from "../convert-image-to-virtual/convert-image-to-virtual.component";
import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
import {ToastrModule} from "ngx-toastr";
import {provideHttpClient} from "@angular/common/http";
import {provideHttpClientTesting} from "@angular/common/http/testing";
import {ConfigService} from "@services/config.service";
import {NO_ERRORS_SCHEMA} from "@angular/core";
describe('RenameImageComponent', () => {
let component: RenameImageComponent;
let fixture: ComponentFixture<RenameImageComponent>;
beforeEach(async () => {
const mockConfigService = {
apiUrl: 'http://mock-api-url'
};
await TestBed.configureTestingModule({
declarations: [RenameImageComponent],
imports: [
MatDialogModule,
ToastrModule.forRoot()
],
providers: [
provideHttpClient(),
provideHttpClientTesting(),
{
provide: MatDialogRef,
useValue: {}
},
{
provide: MAT_DIALOG_DATA,
useValue: {}
},
{
provide: ConfigService,
useValue: mockConfigService
}
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
fixture = TestBed.createComponent(RenameImageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

51
ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.ts 100644
View File

@ -0,0 +1,51 @@
import {Component, EventEmitter, Inject, OnInit, Output} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {ToastrService} from "ngx-toastr";
import {Router} from "@angular/router";
import {ConfigService} from "@services/config.service";
@Component({
selector: 'app-rename-image',
templateUrl: './rename-image.component.html',
styleUrl: './rename-image.component.css'
})
export class RenameImageComponent implements OnInit{
baseUrl: string;
loading: boolean = true;
name: string = '';
@Output() eventEmitter = new EventEmitter();
constructor(
private http: HttpClient,
public dialogRef: MatDialogRef<RenameImageComponent>,
private toastService: ToastrService,
private router: Router,
private configService: ConfigService,
@Inject(MAT_DIALOG_DATA) public data: { imageImageRepository: any }
) {
this.baseUrl = this.configService.apiUrl;
}
ngOnInit(): void {
this.loading = true;
}
save() {
this.http.post<any>(`${this.baseUrl}${this.data.imageImageRepository['@id']}/rename-image`, {
newName: this.name
}).subscribe({
next: (response) => {
this.toastService.success('Imagen renombrada correctamente');
this.dialogRef.close(true);
},
error: error => {
this.toastService.error(error.error['hydra:description']);
}
});
}
close() {
this.dialogRef.close();
}
}

5
ogWebconsole/src/app/components/repositories/repositories.component.html
View File

@ -5,7 +5,7 @@
<mat-icon>help</mat-icon>
</button>
<div class="header-container-title">
<h2 joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">
<h2 joyrideStep="repositoryTitleStep" text="{{ 'groupsTitleStepText' | translate }}">
{{ 'repositoryTitle' | translate }}
</h2>
</div>
@ -42,7 +42,8 @@
</ng-container>
<ng-container *ngIf="column.columnDef === 'images'">
<button class="action-button" (click)="openShowImagesDialog(repository)">Gestionar Imágenes</button>
<button class="action-button" (click)="openShowMonoliticImagesDialog(repository)">Gestionar Imágenes</button>
<button class="action-button" style="margin-left: 0.5vw;" [disabled]="!isGitModuleInstalled" (click)="openShowGitImagesDialog(repository)">Gestionar Imágenes Git</button>
</ng-container>
</td>
</ng-container>

39
ogWebconsole/src/app/components/repositories/repositories.component.ts
View File

@ -9,7 +9,8 @@ import { JoyrideService } from 'ngx-joyride';
import { Router } from '@angular/router';
import { ConfigService } from '@services/config.service';
import {Subnet} from "../ogdhcp/og-dhcp-subnets.component";
import {ShowImagesComponent} from "./show-images/show-images.component";
import {ShowMonoliticImagesComponent} from "./show-monolitic-images/show-monolitic-images.component";
import {ShowGitImagesComponent} from "./show-git-images/show-git-images.component";
import {ManageRepositoryComponent} from "./manage-repository/manage-repository.component";
@Component({
@ -38,6 +39,11 @@ export class RepositoriesComponent implements OnInit {
header: 'Nombre de repositorio',
cell: (repository: any) => `${repository.name}`
},
{
columnDef: 'user',
header: 'Usuario',
cell: (repository: any) => `${repository.user?? 'opengnsys'}`
},
{
columnDef: 'ip',
header: 'Ip',
@ -54,7 +60,8 @@ export class RepositoriesComponent implements OnInit {
cell: (repository: any) => `${this.datePipe.transform(repository.createdAt, 'dd/MM/yyyy hh:mm:ss')}`
}
];
displayedColumns: string[] = ['id', 'name', 'ip', 'images', 'createdAt', 'actions'];
isGitModuleInstalled: boolean = true;
displayedColumns: string[] = ['id', 'name', 'ip', 'user', 'images', 'createdAt', 'actions'];
constructor(
public dialog: MatDialog,
@ -91,7 +98,6 @@ export class RepositoriesComponent implements OnInit {
this.loading = false;
},
error => {
console.error('Error fetching images', error);
this.loading = false;
}
);
@ -125,12 +131,12 @@ export class RepositoriesComponent implements OnInit {
});
}
openShowImagesDialog(repository: Subnet) {
const dialogRef = this.dialog.open(ShowImagesComponent, {
width: '100vw',
height: '100vh',
maxWidth: '100vw',
maxHeight: '100vh',
openShowMonoliticImagesDialog(repository: Subnet) {
const dialogRef = this.dialog.open(ShowMonoliticImagesComponent, {
width: '85vw',
height: '85vh',
maxWidth: '85vw',
maxHeight: '85vh',
data: { repositoryId: repository.id, repositoryName: repository.name, repositoryUuid: repository.uuid }
});
@ -139,6 +145,19 @@ export class RepositoriesComponent implements OnInit {
});
}
openShowGitImagesDialog(repository: Subnet) {
const dialogRef = this.dialog.open(ShowGitImagesComponent, {
width: '85vw',
height: '85vh',
maxWidth: '85vw',
maxHeight: '85vh',
data: { repositoryId: repository.id, repositoryName: repository.name, repositoryUuid: repository.uuid }
});
dialogRef.afterClosed().subscribe(result => {
this.search();
});
}
onPageChange(event: any): void {
this.page = event.pageIndex;
@ -150,7 +169,7 @@ export class RepositoriesComponent implements OnInit {
iniciarTour(): void {
this.joyrideService.startTour({
steps: [
'titleStep',
'repositoryTitleStep',
'addStep',
],
showPrevButton: true,

104
ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.html
View File

@ -1,104 +0,0 @@
<app-loading [isLoading]="loading"></app-loading>
<div class="header-container">
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<div class="header-container-title">
<h2 joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">
{{ 'imagesTitle' | translate }} en {{ repository?.name }}
</h2>
</div>
<div class="images-button-row">
<button class="action-button" (click)="importImage()">
{{ 'importImageButton' | translate }}
</button>
</div>
<div class="images-button-row">
<button class="action-button" (click)="convertImage()">
{{ 'convertImageButton' | translate }}
</button>
</div>
</div>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchImagesField" text="Busca una imagen por nombre. Pulsa 'enter' para iniciar la búsqueda.">
<mat-label>{{ 'searchLabel' | translate }}</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint>{{ 'searchHint' | translate }}</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-boolean">
<mat-label i18n="@@searchLabel">Estado</mat-label>
<mat-select [(ngModel)]="filters['status']" (selectionChange)="search()" placeholder="Seleccionar opción" >
<mat-option [value]="'failed'">Fallido</mat-option>
<mat-option [value]="'pending'">Pendiente</mat-option>
<mat-option [value]="'in-progress'">Transfiriendo</mat-option>
<mat-option [value]="'success'">Creado con éxito</mat-option>
<mat-option [value]="'transferring'">En progreso</mat-option>
<mat-option [value]="'trash'">Papelera</mat-option>
<mat-option [value]="'aux-files-pending'">Creando archivos auxiliares</mat-option>
</mat-select>
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="imagesTable" text="Esta tabla muestra las imágenes disponibles.">
<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 === 'remotePc' || column.columnDef === 'isGlobal'">
<mat-icon [color]="image.image[column.columnDef] ? 'primary' : 'warn'">
{{ image.image[column.columnDef] ? 'check_circle' : 'cancel' }}
</mat-icon>
</ng-container>
<ng-container *ngIf="column.columnDef === 'status'">
<mat-chip [ngClass]="{
'chip-failed': image.status === 'failed',
'chip-success': image.status === 'success',
'chip-pending': image.status === 'pending',
'chip-in-progress': image.status === 'in-progress',
'chip-transferring': image.status === 'transferring',
}">
{{ getStatusLabel(image[column.columnDef]) }}
</mat-chip>
</ng-container>
<ng-container *ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal'">
{{ column.cell(image) }}
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let image" style="text-align: center;">
<button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button *ngIf="repositoryUuid" mat-icon-button color="warn" (click)="toggleAction(image, 'delete-trash')">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="toggleAction(image, 'get-aux')">Obtener ficheros auxiliares</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'delete-permanent')">Eliminar permanentemente</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'" (click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'transfer')">Transferir imagen</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'transfer-global')">Transferir imagen globalmente </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'backup')">Realizar backup </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'status')">Checkear estado imagen </button>
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="[5, 10, 20, 40, 100]"
(page)="onPageChange($event)">
</mat-paginator>
</div>

84
ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.spec.ts
View File

@ -1,84 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { ReactiveFormsModule, FormsModule, FormBuilder } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateModule } from '@ngx-translate/core';
import { ToastrModule, ToastrService } from 'ngx-toastr';
import { JoyrideModule } from 'ngx-joyride';
import { CommonModule } from '@angular/common';
import {MatProgressSpinner} from "@angular/material/progress-spinner";
import {RepositoryImagesComponent} from "./repository-images.component";
import {LoadingComponent} from "../../../shared/loading/loading.component";
import {MatOptionModule} from "@angular/material/core";
import {MatSelectModule} from "@angular/material/select";
import { ConfigService } from '@services/config.service';
describe('RepositoriesComponent', () => {
let component: RepositoryImagesComponent;
let fixture: ComponentFixture<RepositoryImagesComponent>;
beforeEach(async () => {
const mockConfigService = {
apiUrl: 'http://mock-api-url',
mercureUrl: 'http://mock-mercure-url'
};
await TestBed.configureTestingModule({
declarations: [RepositoryImagesComponent, LoadingComponent],
imports: [
ReactiveFormsModule,
FormsModule,
MatDialogModule,
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
MatButtonModule,
MatTableModule,
MatPaginatorModule,
MatDividerModule,
MatIconModule,
MatOptionModule,
BrowserAnimationsModule,
MatProgressSpinner,
MatSelectModule ,
ToastrModule.forRoot(),
TranslateModule.forRoot(),
JoyrideModule.forRoot(),
CommonModule
],
providers: [
FormBuilder,
ToastrService,
provideHttpClient(),
provideHttpClientTesting(),
{
provide: MatDialogRef,
useValue: {}
},
{
provide: MAT_DIALOG_DATA,
useValue: {}
},
{ provide: ConfigService, useValue: mockConfigService }
]
}).compileComponents();
fixture = TestBed.createComponent(RepositoryImagesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

89
ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.css → ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.css
View File

@ -1,8 +1,3 @@
table {
width: 100%;
}
.search-container {
display: flex;
justify-content: space-between;
@ -12,43 +7,23 @@ table {
box-sizing: border-box;
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.header-container-title {
display: flex;
align-items: center;
gap: 1em;
}
.search-string {
flex: 2;
padding: 5px;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
margin-left: 8px;
}
.button-row {
display: table-cell;
max-width: 600px;
@ -83,15 +58,43 @@ table {
color: white;
}
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
.images-button-row {
display: flex;
gap: 15px;
padding: 5px;
}
table {
width: 100%;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
margin-left: 8px;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

67
ogWebconsole/src/app/components/repositories/show-images/show-images.component.html → ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.html
View File

@ -1,26 +1,19 @@
<app-loading [isLoading]="loading"></app-loading>
<h2 mat-dialog-title>Gestionar imágenes en {{data.repositoryName}}</h2>
<mat-dialog-content>
<div class="header-container">
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<div class="header-container-title">
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<h2>Gestionar imágenes git en {{data.repositoryName}}</h2>
</div>
<div class="images-button-row">
<button class="action-button" (click)="openImageInfoDialog()">Ver Información</button>
</div>
<div class="images-button-row">
<button class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
</div>
<div class="images-button-row">
<button class="action-button" (click)="importImage()">
{{ 'importImageButton' | translate }}
</button>
</div>
<div class="images-button-row">
<button class="action-button" (click)="convertImage()">
{{ 'convertImageButton' | translate }}
</button>
@ -28,15 +21,17 @@
</div>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchImagesField" text="Busca una imagen por nombre. Pulsa 'enter' para iniciar la búsqueda.">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchImagesField"
text="Busca una imagen por nombre. Pulsa 'enter' para iniciar la búsqueda.">
<mat-label>{{ 'searchLabel' | translate }}</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="loadData()" i18n-placeholder="@@searchPlaceholder">
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="loadData()"
i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint>{{ 'searchHint' | translate }}</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-boolean">
<mat-label i18n="@@searchLabel">Estado</mat-label>
<mat-select [(ngModel)]="filters['status']" (selectionChange)="loadData()" placeholder="Seleccionar opción" >
<mat-select [(ngModel)]="filters['status']" (selectionChange)="loadData()" placeholder="Seleccionar opción">
<mat-option [value]="'failed'">Fallido</mat-option>
<mat-option [value]="'pending'">Pendiente</mat-option>
<mat-option [value]="'in-progress'">Transfiriendo</mat-option>
@ -48,7 +43,8 @@
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="imagesTable" text="Esta tabla muestra las imágenes disponibles.">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="imagesTable"
text="Esta tabla muestra las imágenes disponibles.">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let image">
@ -68,7 +64,8 @@
{{ getStatusLabel(image[column.columnDef]) }}
</mat-chip>
</ng-container>
<ng-container *ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal'">
<ng-container
*ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal'">
{{ column.cell(image) }}
</ng-container>
</td>
@ -77,7 +74,11 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let image" style="text-align: center;">
<button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon
i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="toggleAction(image, 'edit')">
<mat-icon i18n="@@deleteElementTooltip">edit</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="toggleAction(image, 'delete-trash')">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
</button>
@ -86,13 +87,20 @@
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="toggleAction(image, 'get-aux')">Obtener ficheros auxiliares</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'delete-permanent')">Eliminar permanentemente</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'" (click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'transfer')">Transferir imagen</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'transfer-global')">Transferir imagen globalmente </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'backup')">Realizar backup </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'status')">Checkear estado imagen </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'convert-image-to-virtual')">Convertir imagen en virtual </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'delete-permanent')">Eliminar permanentemente</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'"
(click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'transfer')">Transferir imagen</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'transfer-global')">Transferir imagen globalmente </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'backup')">Realizar backup </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'status')">Checkear estado imagen </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'convert-image-to-virtual')">Convertir imagen en virtual </button>
</mat-menu>
</td>
</ng-container>
@ -101,17 +109,12 @@
</table>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="[5, 10, 20, 40, 100]"
(page)="onPageChange($event)">
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
[pageSizeOptions]="[5, 10, 20, 40, 100]" (page)="onPageChange($event)">
</mat-paginator>
</div>
</mat-dialog-content>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
</mat-dialog-actions>
</mat-dialog-actions>

14
ogWebconsole/src/app/components/repositories/show-images/show-images.component.spec.ts → ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.spec.ts
View File

@ -1,6 +1,6 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ShowGitImagesComponent } from './show-git-images.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ShowImagesComponent } from './show-images.component';
import { ToastrModule } from 'ngx-toastr';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
@ -17,9 +17,9 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
describe('ShowImagesComponent', () => {
let component: ShowImagesComponent;
let fixture: ComponentFixture<ShowImagesComponent>;
describe('ShowGitImagesComponent', () => {
let component: ShowGitImagesComponent;
let fixture: ComponentFixture<ShowGitImagesComponent>;
beforeEach(async () => {
const mockConfigService = {
@ -27,7 +27,7 @@ describe('ShowImagesComponent', () => {
};
await TestBed.configureTestingModule({
declarations: [ShowImagesComponent, LoadingComponent],
declarations: [ShowGitImagesComponent, LoadingComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),
@ -52,7 +52,7 @@ describe('ShowImagesComponent', () => {
})
.compileComponents();
fixture = TestBed.createComponent(ShowImagesComponent);
fixture = TestBed.createComponent(ShowGitImagesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
@ -60,4 +60,4 @@ describe('ShowImagesComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
});
});

38
ogWebconsole/src/app/components/repositories/show-images/show-images.component.ts → ogWebconsole/src/app/components/repositories/show-git-images/show-git-images.component.ts
View File

@ -15,14 +15,15 @@ import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/de
import {ExportImageComponent} from "../../images/export-image/export-image.component";
import {BackupImageComponent} from "../backup-image/backup-image.component";
import {ConvertImageToVirtualComponent} from "../convert-image-to-virtual/convert-image-to-virtual.component";
import {EditImageComponent} from "../edit-image/edit-image.component";
@Component({
selector: 'app-show-images',
templateUrl: './show-images.component.html',
styleUrl: './show-images.component.css'
selector: 'app-show-git-images',
templateUrl: './show-git-images.component.html',
styleUrl: './show-git-images.component.css'
})
export class ShowImagesComponent implements OnInit {
baseUrl: string;
export class ShowGitImagesComponent {
baseUrl: string;
private apiUrl: string;
dataSource = new MatTableDataSource<any>();
length: number = 0;
@ -45,9 +46,9 @@ export class ShowImagesComponent implements OnInit {
cell: (image: any) => `${image.image.name}`
},
{
columnDef: 'remotePc',
header: 'Remote Pc',
cell: (image: any) => `${image.image?.remotePc}`
columnDef: 'version',
header: 'Version',
cell: (image: any) => `${image.version ? image.version : '0'}`
},
{
columnDef: 'isGlobal',
@ -60,9 +61,9 @@ export class ShowImagesComponent implements OnInit {
cell: (image: any) => `${image.status}`
},
{
columnDef: 'imageFullsum',
header: 'Fullsum',
cell: (image: any) => `${image.imageFullsum}`
columnDef: 'description',
header: 'Descripción',
cell: (image: any) => `${image.description ? image.description : 'Sin descripción'}`
},
{
columnDef: 'createdAt',
@ -79,7 +80,7 @@ export class ShowImagesComponent implements OnInit {
private joyrideService: JoyrideService,
private configService: ConfigService,
private router: Router,
public dialogRef: MatDialogRef<ShowImagesComponent>,
public dialogRef: MatDialogRef<ShowGitImagesComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.baseUrl = this.configService.apiUrl;
@ -254,6 +255,18 @@ export class ShowImagesComponent implements OnInit {
}
});
break;
case 'edit':
this.dialog.open(EditImageComponent, {
width: '600px',
data: {
image: image,
}
}).afterClosed().subscribe((result) => {
if (result) {
this.loadData();
}
});
break;
case 'recover':
this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/recover`, {}).subscribe({
next: () => {
@ -332,6 +345,7 @@ export class ShowImagesComponent implements OnInit {
imageImageRepository: image
}
});
this.router.navigate(['/commands-logs']);
},
error: (error) => {
this.toastService.error(error.error['hydra:description']);

202
ogWebconsole/src/app/components/repositories/show-images/show-images.component.css
View File

@ -1,202 +0,0 @@
table {
width: 100%;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 1.5rem 0rem 1.5rem 0rem;
box-sizing: border-box;
}
.search-string {
flex: 2;
padding: 5px;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
margin-left: 8px;
}
.button-row {
display: table-cell;
max-width: 600px;
}
.button-row .mat-mdc-button-base {
margin: 8px 8px 8px 0;
}
.chip-failed {
background-color: #e87979 !important;
color: white;
}
.chip-success {
background-color: #46c446 !important;
color: white;
}
.chip-pending {
background-color: lightgrey !important;
color: black;
}
.chip-in-progress {
background-color: #f5a623 !important;
color: white;
}
.chip-transferring {
background-color: #f5a623 !important;
color: white;
}
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
.images-button-row {
display: flex;
gap: 15px;
padding: 5px;
}
table {
width: 100%;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 1.5rem 0rem 1.5rem 0rem;
box-sizing: border-box;
}
.search-string {
flex: 2;
padding: 5px;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
margin-left: 8px;
}
.button-row {
display: table-cell;
max-width: 600px;
}
.button-row .mat-mdc-button-base {
margin: 8px 8px 8px 0;
}
.chip-failed {
background-color: #e87979 !important;
color: white;
}
.chip-success {
background-color: #46c446 !important;
color: white;
}
.chip-pending {
background-color: lightgrey !important;
color: black;
}
.chip-in-progress {
background-color: #f5a623 !important;
color: white;
}
.chip-transferring {
background-color: #f5a623 !important;
color: white;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
.images-button-row {
display: flex;
gap: 15px;
padding: 5px;
}

100
ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.css 100644
View File

@ -0,0 +1,100 @@
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 1.5rem 0rem 1.5rem 0rem;
box-sizing: border-box;
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.header-container-title {
display: flex;
align-items: center;
gap: 1em;
}
.search-string {
flex: 2;
padding: 5px;
}
.button-row {
display: table-cell;
max-width: 600px;
}
.button-row .mat-mdc-button-base {
margin: 8px 8px 8px 0;
}
.chip-failed {
background-color: #e87979 !important;
color: white;
}
.chip-success {
background-color: #46c446 !important;
color: white;
}
.chip-pending {
background-color: lightgrey !important;
color: black;
}
.chip-in-progress {
background-color: #f5a623 !important;
color: white;
}
.chip-transferring {
background-color: #f5a623 !important;
color: white;
}
.images-button-row {
display: flex;
gap: 15px;
padding: 5px;
}
table {
width: 100%;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
margin-left: 8px;
}
.action-container {
display: flex;
justify-content: flex-end;
gap: 1em;
padding: 1.5em;
}

122
ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.html 100644
View File

@ -0,0 +1,122 @@
<app-loading [isLoading]="loading"></app-loading>
<mat-dialog-content>
<div class="header-container">
<div class="header-container-title">
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<h2>Gestionar imágenes monolíticas en {{data.repositoryName}}</h2>
</div>
<div class="images-button-row">
<button class="action-button" (click)="openImageInfoDialog()">Ver Información</button>
<button class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
<button class="action-button" (click)="importImage()">
{{ 'importImageButton' | translate }}
</button>
<button class="action-button" (click)="convertImage()">
{{ 'convertImageButton' | translate }}
</button>
</div>
</div>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchImagesField"
text="Busca una imagen por nombre. Pulsa 'enter' para iniciar la búsqueda.">
<mat-label>{{ 'searchLabel' | translate }}</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="loadData()"
i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint>{{ 'searchHint' | translate }}</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-boolean">
<mat-label i18n="@@searchLabel">Estado</mat-label>
<mat-select [(ngModel)]="filters['status']" (selectionChange)="loadData()" placeholder="Seleccionar opción">
<mat-option [value]="'failed'">Fallido</mat-option>
<mat-option [value]="'pending'">Pendiente</mat-option>
<mat-option [value]="'in-progress'">Transfiriendo</mat-option>
<mat-option [value]="'success'">Creado con éxito</mat-option>
<mat-option [value]="'transferring'">En progreso</mat-option>
<mat-option [value]="'trash'">Papelera</mat-option>
<mat-option [value]="'aux-files-pending'">Creando archivos auxiliares</mat-option>
</mat-select>
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="imagesTable"
text="Esta tabla muestra las imágenes disponibles.">
<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 === 'remotePc' || column.columnDef === 'isGlobal'">
<mat-icon [color]="image.image[column.columnDef] ? 'primary' : 'warn'">
{{ image.image[column.columnDef] ? 'check_circle' : 'cancel' }}
</mat-icon>
</ng-container>
<ng-container *ngIf="column.columnDef === 'status'">
<mat-chip [ngClass]="{
'chip-failed': image.status === 'failed',
'chip-success': image.status === 'success',
'chip-pending': image.status === 'pending',
'chip-in-progress': image.status === 'in-progress',
'chip-transferring': image.status === 'transferring',
}">
{{ getStatusLabel(image[column.columnDef]) }}
</mat-chip>
</ng-container>
<ng-container
*ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal'">
{{ column.cell(image) }}
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let image" style="text-align: center;">
<button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon
i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="toggleAction(image, 'edit')">
<mat-icon i18n="@@deleteElementTooltip">edit</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="toggleAction(image, 'delete-trash')">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="toggleAction(image, 'get-aux')">Obtener ficheros auxiliares</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'delete-permanent')">Eliminar permanentemente</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'"
(click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'transfer')">Transferir imagen</button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'transfer-global')">Transferir imagen globalmente </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'backup')">Realizar backup </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'status')">Checkear estado imagen </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'"
(click)="toggleAction(image, 'convert-image-to-virtual')">Convertir imagen en virtual </button>
<button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'rename')">Renombrar imagen</button>
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="paginator-container">
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
[pageSizeOptions]="[5, 10, 20, 40, 100]" (page)="onPageChange($event)">
</mat-paginator>
</div>
</mat-dialog-content>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
</mat-dialog-actions>

63
ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.spec.ts 100644
View File

@ -0,0 +1,63 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ShowMonoliticImagesComponent } from './show-monolitic-images.component';
import { ToastrModule } from 'ngx-toastr';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { JoyrideModule } from 'ngx-joyride';
import { ConfigService } from '@services/config.service';
import { LoadingComponent } from '../../../shared/loading/loading.component';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { FormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
describe('ShowMonoliticImagesComponent', () => {
let component: ShowMonoliticImagesComponent;
let fixture: ComponentFixture<ShowMonoliticImagesComponent>;
beforeEach(async () => {
const mockConfigService = {
apiUrl: 'http://mock-api-url'
};
await TestBed.configureTestingModule({
declarations: [ShowMonoliticImagesComponent, LoadingComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),
MatDialogModule,
TranslateModule.forRoot(),
JoyrideModule.forRoot(),
MatIconModule,
MatFormFieldModule,
MatSelectModule,
MatPaginatorModule,
MatTableModule,
FormsModule,
NoopAnimationsModule,
MatInputModule,
MatProgressSpinnerModule
],
providers: [
{ provide: MatDialogRef, useValue: {} },
{ provide: MAT_DIALOG_DATA, useValue: {} },
{ provide: ConfigService, useValue: mockConfigService }
]
})
.compileComponents();
fixture = TestBed.createComponent(ShowMonoliticImagesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

185
ogWebconsole/src/app/components/repositories/repository-images/repository-images.component.ts → ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts
View File

@ -1,26 +1,29 @@
import {Component, Input, isDevMode, OnInit} from '@angular/core';
import {Component, Inject, Input, isDevMode, OnInit} from '@angular/core';
import {MatTableDataSource} from "@angular/material/table";
import {DatePipe} from "@angular/common";
import {MatDialog} from "@angular/material/dialog";
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
import {HttpClient} from "@angular/common/http";
import {ToastrService} from "ngx-toastr";
import {JoyrideService} from "ngx-joyride";
import {ConfigService} from "@services/config.service";
import {Router} from "@angular/router";
import {Observable} from "rxjs";
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
import {ExportImageComponent} from "../../images/export-image/export-image.component";
import {BackupImageComponent} from "../backup-image/backup-image.component";
import {ServerInfoDialogComponent} from "../../ogdhcp/server-info-dialog/server-info-dialog.component";
import {ImportImageComponent} from "../import-image/import-image.component";
import {ConvertImageComponent} from "../convert-image/convert-image.component";
import { ConfigService } from '@services/config.service';
import {Router} from "@angular/router";
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
import {ExportImageComponent} from "../../images/export-image/export-image.component";
import {BackupImageComponent} from "../backup-image/backup-image.component";
import {ConvertImageToVirtualComponent} from "../convert-image-to-virtual/convert-image-to-virtual.component";
import {EditImageComponent} from "../edit-image/edit-image.component";
import {RenameImageComponent} from "../rename-image/rename-image.component";
@Component({
selector: 'app-repository-images',
templateUrl: './repository-images.component.html',
styleUrl: './repository-images.component.css'
selector: 'app-show-monolitic-images',
templateUrl: './show-monolitic-images.component.html',
styleUrl: './show-monolitic-images.component.css'
})
export class RepositoryImagesComponent implements OnInit {
export class ShowMonoliticImagesComponent implements OnInit {
baseUrl: string;
private apiUrl: string;
dataSource = new MatTableDataSource<any>();
@ -41,12 +44,12 @@ export class RepositoryImagesComponent implements OnInit {
{
columnDef: 'name',
header: 'Nombre de imagen',
cell: (image: any) => `${image.image.name}`
cell: (image: any) => `${image.name}`
},
{
columnDef: 'remotePc',
header: 'Remote Pc',
cell: (image: any) => `${image.image?.remotePc}`
columnDef: 'version',
header: 'Version',
cell: (image: any) => `${image.version ? image.version : '0'}`
},
{
columnDef: 'isGlobal',
@ -59,9 +62,9 @@ export class RepositoryImagesComponent implements OnInit {
cell: (image: any) => `${image.status}`
},
{
columnDef: 'imageFullsum',
header: 'Fullsum',
cell: (image: any) => `${image.imageFullsum}`
columnDef: 'description',
header: 'Descripción',
cell: (image: any) => `${image.description ? image.description : 'Sin descripción'}`
},
{
columnDef: 'createdAt',
@ -71,9 +74,6 @@ export class RepositoryImagesComponent implements OnInit {
];
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
@Input() repositoryUuid: any
private repositoryId: any;
constructor(
public dialog: MatDialog,
private http: HttpClient,
@ -81,25 +81,27 @@ export class RepositoryImagesComponent implements OnInit {
private joyrideService: JoyrideService,
private configService: ConfigService,
private router: Router,
public dialogRef: MatDialogRef<ShowMonoliticImagesComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.baseUrl = this.configService.apiUrl;
this.apiUrl = `${this.baseUrl}/image-image-repositories`;
}
ngOnInit(): void {
if (this.repositoryUuid) {
this.loadRepository()
} else {
this.search();
console.error()
if (this.data) {
this.loadData();
}
}
loadRepository(): void {
this.http.get<any>(`${this.baseUrl}/image-repositories/${this.repositoryUuid}`, {}).subscribe(
loadData(): void {
this.loading = true;
this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}&repository.id=${this.data.repositoryId}`, { params: this.filters }).subscribe(
data => {
this.repositoryId = data.id;
this.repository = data
this.search();
this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.loading = false;
},
error => {
console.error('Error fetching image repositories', error);
@ -128,26 +130,11 @@ export class RepositoryImagesComponent implements OnInit {
}
}
search(): void {
this.loading = true;
this.http.get<any>(`${this.apiUrl}?page=${this.page +1 }&itemsPerPage=${this.itemsPerPage}&repository.id=${this.repositoryId}`, { params: this.filters }).subscribe(
data => {
this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.loading = false;
},
error => {
console.error('Error fetching images', error);
this.loading = false;
}
);
}
onPageChange(event: any): void {
this.page = event.pageIndex;
this.itemsPerPage = event.pageSize;
this.length = event.length;
this.search();
this.loadData();
}
loadImageAlert(image: any): Observable<any> {
@ -177,15 +164,16 @@ export class RepositoryImagesComponent implements OnInit {
}
importImage(): void {
console.log(this.data)
this.dialog.open(ImportImageComponent, {
width: '600px',
data: {
repositoryUuid: this.repositoryUuid,
name: this.repository.name
repositoryUuid: this.data.repositoryUuid,
name: this.data.repositoryName
}
}).afterClosed().subscribe((result) => {
if (result) {
this.search();
this.loadData();
}
});
}
@ -194,12 +182,12 @@ export class RepositoryImagesComponent implements OnInit {
this.dialog.open(ConvertImageComponent, {
width: '600px',
data: {
repositoryUuid: this.repositoryUuid,
name: this.repository.name
repositoryUuid: this.data.repositoryUuid,
name: this.data.repositoryName
}
}).afterClosed().subscribe((result) => {
if (result) {
this.search();
this.loadData();
}
});
}
@ -210,7 +198,7 @@ export class RepositoryImagesComponent implements OnInit {
this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/create-aux-files`, {}).subscribe({
next: (message) => {
this.toastService.success('Petición de creación de archivos auxiliares enviada');
this.search()
this.loadData()
},
error: (error) => {
this.toastService.error(error.error['hydra:description']);
@ -228,7 +216,7 @@ export class RepositoryImagesComponent implements OnInit {
this.http.delete(`${this.baseUrl}${image['@id']}`).subscribe({
next: () => {
this.toastService.success('Image deleted successfully');
this.search()
this.loadData()
},
error: (error) => {
this.toastService.error('Error deleting image');
@ -237,11 +225,11 @@ export class RepositoryImagesComponent implements OnInit {
});
} else {
this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/delete-trash`,
{ repository: `/image-repositories/${this.repositoryUuid}` })
{ repository: `/image-repositories/${this.data.repositoryUuid}` })
.subscribe({
next: () => {
this.toastService.success('Petición de eliminación de la papelera temporal enviada');
this.search()
this.loadData()
},
error: (error) => {
this.toastService.error(error.error['hydra:description']);
@ -259,7 +247,7 @@ export class RepositoryImagesComponent implements OnInit {
this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/delete-permanent`, {}).subscribe({
next: () => {
this.toastService.success('Petición de eliminación de la papelera temporal enviada');
this.search()
this.loadData()
},
error: (error) => {
this.toastService.error(error.error['hydra:description']);
@ -268,11 +256,23 @@ export class RepositoryImagesComponent implements OnInit {
}
});
break;
case 'edit':
this.dialog.open(EditImageComponent, {
width: '600px',
data: {
image: image,
}
}).afterClosed().subscribe((result) => {
if (result) {
this.loadData();
}
});
break;
case 'recover':
this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/recover`, {}).subscribe({
next: () => {
this.toastService.success('Petición de recuperación de la imagen enviada');
this.search()
this.loadData()
},
error: (error) => {
this.toastService.error(error.error['hydra:description']);
@ -283,7 +283,7 @@ export class RepositoryImagesComponent implements OnInit {
this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/status`, {}).subscribe({
next: (response: any) => {
this.toastService.info(response?.output);
this.search()
this.loadData()
},
error: (error) => {
this.toastService.error(error.error['hydra:description']);
@ -336,11 +336,41 @@ export class RepositoryImagesComponent implements OnInit {
}
});
break;
case 'convert-image-to-virtual':
this.http.get(`${this.baseUrl}${image.image['@id']}`).subscribe({
next: (response) => {
this.dialog.open(ConvertImageToVirtualComponent, {
width: '600px',
data: {
image: response,
imageImageRepository: image
}
});
this.router.navigate(['/commands-logs']);
},
error: (error) => {
this.toastService.error(error.error['hydra:description']);
}
});
break;
case 'rename':
this.dialog.open(RenameImageComponent, {
width: '600px',
data: {
imageImageRepository: image
}
}).afterClosed().subscribe((result) => {
if (result) {
this.loadData();
}
});
break;
default:
console.error('Acción no soportada:', action);
break;
}
}
iniciarTour(): void {
this.joyrideService.startTour({
steps: [
@ -358,5 +388,42 @@ export class RepositoryImagesComponent implements OnInit {
});
}
loadAlert(): Observable<any> {
return this.http.post<any>(`${this.baseUrl}/image-repositories/server/${this.data.repositoryUuid}/get-collection`, {});
}
syncRepository() {
this.http.post(`${this.baseUrl}/image-repositories/server/${this.data.repositoryUuid}/sync`, {})
.subscribe(response => {
this.toastService.success('Sincronización completada');
this.loadData()
}, error => {
console.error('Error al sincronizar', error);
this.toastService.error('Error al sincronizar');
});
}
openImageInfoDialog() {
this.loadAlert().subscribe(
response => {
this.alertMessage = response.output;
this.dialog.open(ServerInfoDialogComponent, {
width: '800px',
data: {
message: this.alertMessage
}
});
},
error => {
console.error('Error al cargar la información del alert', error);
}
);
}
onNoClick(): void {
this.dialogRef.close();
}
protected readonly isDevMode = isDevMode;
}

38
ogWebconsole/src/app/layout/header/header.component.css
View File

@ -1,6 +1,7 @@
mat-toolbar {
/*height: 7vh;*/
min-height: 60px;
min-height: 65px;
min-width: 375px;
background-color: #3f51b5;
color: white;
}
@ -45,3 +46,38 @@ mat-toolbar {
background-color: #ced0df;
cursor: not-allowed;
}
.hide-on-small {
display: none;
}
@media (min-width: 1500px) {
.hide-on-small {
display: inline;
}
}
@media (max-width: 576px) {
.navbar-actions-row {
display: none;
}
mat-toolbar {
display: flex;
justify-content: space-between;
}
.isSmallScreenButtons {
display: flex;
justify-content: center;
align-items: center;
}
.trace-button .mat-icon {
margin-right: 0px !important;
}
.smallScreenMenubutton {
margin-right: 2vh;
}
}

54
ogWebconsole/src/app/layout/header/header.component.html
View File

@ -1,5 +1,6 @@
<mat-toolbar>
<span class="navbar-title" matTooltip="Consola web de administración de Opengnsys" matTooltipShowDelay="1000">
<span class="navbar-title hide-on-small" matTooltip="Consola web de administración de Opengnsys"
matTooltipShowDelay="1000">
Opengnsys webconsole
</span>
@ -8,12 +9,14 @@
<mat-icon class="navbar-icon">menu</mat-icon>
</button>
<div class="navbar-actions-row">
<button class="trace-button" routerLink="/commands-logs" mat-button><mat-icon>notifications</mat-icon></button>
<div class="navbar-actions-row" *ngIf="!isSmallScreen">
<button class="trace-button" routerLink="/commands-logs" mat-button>
<mat-icon>notifications</mat-icon>
</button>
<div class="navbar-buttons-row">
<button class="ordinary-button" (click)="showGlobalStatus()">
{{'GlobalStatus' | translate}}
{{ 'GlobalStatus' | translate }}
</button>
<button class="ordinary-button" *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu"
@ -31,20 +34,43 @@
{{ 'logout' | translate }}
</button>
</div>
</div>
<mat-menu #menu="matMenu">
<button mat-menu-item routerLink="/users" matTooltip="Ver y gestionar todos los usuarios"
matTooltipShowDelay="1000">
{{ 'labelUsers' | translate }}
<!-- Menú desplegable para pantallas pequeñas -->
<div *ngIf="isSmallScreen" class="isSmallScreenButtons">
<button class="trace-button" routerLink="/commands-logs" mat-button>
<mat-icon>notifications</mat-icon>
</button>
<button class="smallScreenMenubutton" mat-icon-button [matMenuTriggerFor]="smallScreenMenu" matTooltip="Opciones" matTooltipShowDelay="1000">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #smallScreenMenu="matMenu">
<button mat-menu-item (click)="showGlobalStatus()">
{{ 'GlobalStatus' | translate }}
</button>
<button mat-menu-item routerLink="/user-groups" matTooltip="Gestionar roles de usuario"
matTooltipShowDelay="1000">
{{ 'labelRoles' | translate }}
<button mat-menu-item *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu">
{{ 'Administration' | translate }}
</button>
<button mat-menu-item routerLink="/env-vars" matTooltip="Gestionar variables de entorno"
matTooltipShowDelay="1000">
{{ 'labelEnvVars' | translate }}
<button mat-menu-item *ngIf="!isSuperAdmin" (click)="editUser()">
{{ 'changePassword' | translate }}
</button>
</mat-menu>
<button class="logout-button" routerLink="/auth/login" matTooltip="Cerrar sesión y salir de la aplicación"
matTooltipShowDelay="1000">
{{ 'logout' | translate }}
</button>
</div>
<mat-menu #menu="matMenu">
<button mat-menu-item routerLink="/users" matTooltip="Ver y gestionar todos los usuarios"
matTooltipShowDelay="1000">
{{ 'labelUsers' | translate }}
</button>
<button mat-menu-item routerLink="/user-groups" matTooltip="Gestionar roles de usuario" matTooltipShowDelay="1000">
{{ 'labelRoles' | translate }}
</button>
<button mat-menu-item routerLink="/env-vars" matTooltip="Gestionar variables de entorno" matTooltipShowDelay="1000">
{{ 'labelEnvVars' | translate }}
</button>
</mat-menu>
</mat-toolbar>

9
ogWebconsole/src/app/layout/header/header.component.ts
View File

@ -3,6 +3,7 @@ import { jwtDecode } from 'jwt-decode';
import { ChangePasswordModalComponent } from '../../components/admin/users/users/change-password-modal/change-password-modal.component';
import { MatDialog } from "@angular/material/dialog";
import { GlobalStatusComponent } from 'src/app/components/global-status/global-status.component';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
selector: 'app-header',
@ -12,6 +13,7 @@ import { GlobalStatusComponent } from 'src/app/components/global-status/global-s
export class HeaderComponent implements OnInit {
isSuperAdmin: boolean = false;
isSmallScreen: boolean = false;
@Output() toggleSidebar = new EventEmitter<void>();
private decodedToken: any;
@ -21,7 +23,7 @@ export class HeaderComponent implements OnInit {
this.toggleSidebar.emit();
}
constructor(public dialog: MatDialog) { }
constructor(public dialog: MatDialog, private breakpointObserver: BreakpointObserver) { }
ngOnInit(): void {
const token = localStorage.getItem('loginToken');
@ -35,6 +37,9 @@ export class HeaderComponent implements OnInit {
console.error('Error decoding JWT:', error);
}
}
this.breakpointObserver.observe(['(max-width: 576px)']).subscribe((result) => {
this.isSmallScreen = result.matches;
})
}
ngDoCheck(): void {
@ -52,8 +57,6 @@ export class HeaderComponent implements OnInit {
this.dialog.open(GlobalStatusComponent, {
width: '45vw',
height: '80vh',
// maxWidth: '60vw',
// maxHeight: '60vh'
})
}
}

4
ogWebconsole/src/app/layout/main-layout/main-layout.component.css
View File

@ -1,10 +1,10 @@
.container {
width: 100vw;
height: calc(100vh - 7vh);
min-width: 375px;
}
.sidebar {
width: 15vw;
min-width: 250px;
z-index: auto !important;
}
}

7
ogWebconsole/src/app/layout/main-layout/main-layout.component.html
View File

@ -1,11 +1,12 @@
<app-header (toggleSidebar)="toggleSidebar()"></app-header>
<mat-drawer-container class="container" autosize>
<mat-drawer class="sidebar" mode="side" [opened]="isSidebarVisible">
<app-sidebar></app-sidebar>
<mat-drawer class="sidebar" [mode]="sidebarMode" [opened]="isSidebarVisible" (close)="isSidebarVisible = false">
<app-sidebar [isVisible]="isSidebarVisible" [sidebarMode]="sidebarMode" (closeSidebar)="isSidebarVisible = false">
</app-sidebar>
</mat-drawer>
<mat-drawer-content class="content">
<router-outlet></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
</mat-drawer-container>

22
ogWebconsole/src/app/layout/main-layout/main-layout.component.ts
View File

@ -1,14 +1,30 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
selector: 'app-main-layout',
templateUrl: './main-layout.component.html',
styleUrls: ['./main-layout.component.css'],
})
export class MainLayoutComponent {
export class MainLayoutComponent implements OnInit {
isSidebarVisible: boolean = true;
sidebarMode: 'side' | 'over' = 'side';
constructor(private breakpointObserver: BreakpointObserver) { }
ngOnInit(): void {
this.breakpointObserver.observe(['(max-width: 1500px)']).subscribe((result) => {
if (result.matches) {
this.sidebarMode = 'over';
this.isSidebarVisible = false;
} else {
this.sidebarMode = 'side';
this.isSidebarVisible = true;
}
});
}
toggleSidebar() {
this.isSidebarVisible = !this.isSidebarVisible;
}
}
}

53
ogWebconsole/src/app/layout/sidebar/sidebar.component.html
View File

@ -7,14 +7,16 @@
<mat-divider></mat-divider>
<mat-list-item routerLink="/groups" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/groups" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">apartment</mat-icon>
<span>{{ 'groups' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">playlist_play</mat-icon>
<span>{{ 'actions' | translate }}</span>
@ -23,19 +25,22 @@
<!-- Submenu items for commands -->
<mat-nav-list *ngIf="showCommandSub" style="padding-left: 20px;">
<mat-list-item routerLink="/commands" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/commands" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">chevron_right</mat-icon>
<span>{{ 'commands' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/commands-groups" matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/commands-groups" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">chevron_right</mat-icon>
<span>{{ 'commandGroups' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/commands-task" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/commands-task" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">chevron_right</mat-icon>
<span>{{ 'tasks' | translate }}</span>
@ -43,14 +48,16 @@
</mat-list-item>
</mat-nav-list>
<mat-list-item routerLink="/subnets" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/subnets" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">lan</mat-icon>
<span> {{ 'subnets' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}" matTooltipShowDelay="1000">
<mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">desktop_windows</mat-icon>
<span>{{ 'boot' | translate }}</span>
@ -59,19 +66,22 @@
<!-- Submenu items for Boot -->
<mat-nav-list *ngIf="showOgBootSub" style="padding-left: 20px;">
<mat-list-item routerLink="/pxe-images" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/pxe-images" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">album</mat-icon>
<span>{{ 'ogLive' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/pxe" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/pxe" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">assignment</mat-icon>
<span>{{ 'pxeTemplates' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/pxe-boot-file" matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/pxe-boot-file" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">save</mat-icon>
<span>{{ 'pxeBootFiles' | translate }}</span>
@ -79,14 +89,16 @@
</mat-list-item>
</mat-nav-list>
<mat-list-item routerLink="/calendars" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/calendars" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">calendar_month</mat-icon>
<span>{{ 'calendars' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}" matTooltipShowDelay="1000">
<mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">terminal</mat-icon>
<span>{{ 'software' | translate }}</span>
@ -95,19 +107,22 @@
<!-- Submenu items for Software -->
<mat-nav-list *ngIf="showSoftwareSub" style="padding-left: 20px;">
<mat-list-item routerLink="/software" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/software" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">list</mat-icon>
<span>{{ 'softwareList' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/software-profiles" matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/software-profiles" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">folder_shared</mat-icon>
<span>{{ 'softwareProfiles' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/operative-systems" matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/operative-systems" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">terminal</mat-icon>
<span>{{ 'operativeSystems' | translate }}</span>
@ -115,17 +130,19 @@
</mat-list-item>
</mat-nav-list>
<mat-list-item routerLink="/repositories" matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/repositories" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">warehouse</mat-icon>
<span>{{ 'repositories' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/menus" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/menus" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">list</mat-icon>
<span>{{ 'menus' | translate }}</span>
</span>
</mat-list-item>
</mat-nav-list>
</mat-nav-list>

14
ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
View File

@ -1,6 +1,7 @@
import { Component, Input } from '@angular/core';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { jwtDecode } from 'jwt-decode';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
@ -8,6 +9,9 @@ import { MatDialog } from '@angular/material/dialog';
})
export class SidebarComponent {
@Input() isVisible: boolean = false;
@Input() sidebarMode: 'side' | 'over' = 'side';
@Output() closeSidebar: EventEmitter<void> = new EventEmitter<void>();
isSuperAdmin: boolean = false;
username: string = "";
decodedToken: any = "";
@ -29,6 +33,12 @@ export class SidebarComponent {
this.showSoftwareSub = !this.showSoftwareSub;
}
onItemClick() {
if (this.isVisible && this.sidebarMode === 'over') {
this.closeSidebar.emit();
}
}
constructor(public dialog: MatDialog) {}
ngOnInit(): void {
@ -44,4 +54,4 @@ export class SidebarComponent {
}
}
}
}
}

12
ogWebconsole/src/assets/images/close-delete-remove-trash-cancel-cross-svgrepo-com.svg 100644
View File

@ -0,0 +1,12 @@
<?xml version="1.0" ?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
.st0{opacity:0.2;fill:none;stroke:#000000;stroke-width:5.000000e-02;stroke-miterlimit:10;}
</style>
<g id="grid_system"/>
<g id="_icons">
<path d="M8.3,15.7C8.5,15.9,8.7,16,9,16s0.5-0.1,0.7-0.3l2.3-2.3l2.3,2.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l2.3-2.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L12,10.6L9.7,8.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4 l2.3,2.3l-2.3,2.3C7.9,14.7,7.9,15.3,8.3,15.7z"/>
<path d="M12,21c5,0,9-4,9-9s-4-9-9-9s-9,4-9,9S7,21,12,21z M12,5c3.9,0,7,3.1,7,7s-3.1,7-7,7s-7-3.1-7-7S8.1,5,12,5z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 858 B

3
ogWebconsole/src/assets/images/computer_busy.svg 100644
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
<path fill="#EA3323" d="M160-760h640v440H160Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

4
ogWebconsole/src/assets/images/computer_disconnected.svg 100644
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px">
<path fill="#666666" d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Z"/>
<path fill="#FF0000" d="M160-100l-80-80 320-320-320-320 80-80 320 320 320-320 80 80-320 320 320 320-80 80-320-320-320 320Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 421 B

4
ogWebconsole/src/assets/images/computer_initializing.svg 100644
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666">
<path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
<path fill="#75FBFD" d="M160-760h640v440H160Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 358 B

5
ogWebconsole/src/assets/images/computer_linux-session.svg 100644
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px">
<path fill="#666666" d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
<path fill="#EA33F7" d="M160-760h640v440H160Z"/>
<rect x="250" y="-670" width="460" height="220" fill="#ffffff" stroke="#000000" stroke-width="4" rx="10" ry="10"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 475 B

3
ogWebconsole/src/assets/images/computer_linux.svg 100644
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
<path fill="#EA33F7" d="M160-760h640v440H160Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

3
ogWebconsole/src/assets/images/computer_macos.svg 100644
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
<path fill="#F19E39" d="M160-760h640v440H160Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

2
ogWebconsole/src/assets/images/computer_off.svg 100644
View File

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

3
ogWebconsole/src/assets/images/computer_og-live.svg 100644
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
<path fill="#FFFF55" d="M160-760h640v440H160Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

2
ogWebconsole/src/assets/images/computer_turning-off.svg 100644
View File

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

5
ogWebconsole/src/assets/images/computer_windows-session.svg 100644
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px">
<path fill="#666666" d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
<path fill="#0000F5" d="M160-760h640v440H160Z"/>
<rect x="250" y="-670" width="460" height="220" fill="#ffffff" stroke="#000000" stroke-width="4" rx="10" ry="10"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 475 B

3
ogWebconsole/src/assets/images/computer_windows.svg 100644
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#666666"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/>
<path fill="#0000F5" d="M160-760h640v440H160Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 355 B

BIN
ogWebconsole/src/assets/images/ordenador_MNT.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 778 B

BIN
ogWebconsole/src/assets/images/ordenador_busy.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 762 B

BIN
ogWebconsole/src/assets/images/ordenador_initializing.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
ogWebconsole/src/assets/images/ordenador_linux-session.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 729 B

BIN
ogWebconsole/src/assets/images/ordenador_linux.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 746 B

BIN
ogWebconsole/src/assets/images/ordenador_macos.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 901 B

BIN
ogWebconsole/src/assets/images/ordenador_off.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 778 B

BIN
ogWebconsole/src/assets/images/ordenador_og-live.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 756 B

BIN
ogWebconsole/src/assets/images/ordenador_turning-off.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 778 B

BIN
ogWebconsole/src/assets/images/ordenador_windows-session.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 733 B

BIN
ogWebconsole/src/assets/images/ordenador_windows.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 747 B

5
ogWebconsole/src/locale/en.json
View File

@ -40,6 +40,8 @@
"labelRoleName": "Name",
"sectionTitlePermissions": "Permissions:",
"checkboxSuperAdmin": "Super Admin",
"parameters": "Parameters",
"runScripts": "Run scripts",
"checkboxOrgAdmin": "Organizational Unit Admin",
"checkboxOrgOperator": "Organizational Unit Operator",
"checkboxOrgMinimal": "Minimal Organizational Unit",
@ -478,5 +480,6 @@
"CpuUsage": "CPU Usage",
"processes": "Processes",
"usedPercentageLabel": "Used",
"errorLoadingData": "Error fetching data. Service not available"
"errorLoadingData": "Error fetching data. Service not available",
"repositoryTitleStep": "On this screen you can manage image repositories."
}

6
ogWebconsole/src/locale/es.json
View File

@ -38,7 +38,9 @@
"rulesHeader": "Reglas",
"statusUnavailable": "No disponible",
"statusAvailable": "Disponible",
"parameters": "Parámetros",
"labelRoleName": "Nombre",
"runScript": "Ejecutar comando",
"sectionTitlePermissions": "Permisos:",
"checkboxSuperAdmin": "Super Admin",
"checkboxOrgAdmin": "Admin de Unidad Organizativa",
@ -480,6 +482,6 @@
"CpuUsage": "Uso de CPU",
"processes": "Procesos",
"usedPercentageLabel": "Usado",
"errorLoadingData": "Error al cargar los datos. Servicio inactivo"
"errorLoadingData": "Error al cargar los datos. Servicio inactivo",
"repositoryTitleStep": "En esta pantalla se pueden gestionar los repositorios de imágenes."
}