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

refs #1060 Add execute command from clasroom menu
testing/ogGui-multibranch/pipeline/head There was a failure building this commit Details

oggui/translations
Alvaro Puente Mella 2024-11-06 13:09:18 +01:00
parent 8152d310f8
commit 6d763f22eb
7 changed files with 248 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -119,6 +119,7 @@ import { ClientsComponent } from './components/ogboot/pxe/clients/clients.compon
import { RepositoriesComponent } from './components/repositories/repositories.component';
import { CreateRepositoryComponent } from './components/repositories/create-repository/create-repository.component';
import { ExecuteCommandComponent } from './components/commands/main-commands/execute-command/execute-command.component';
import { ExecuteCommandOuComponent } from './components/groups/shared/execute-command-ou/execute-command-ou.component';
@NgModule({
declarations: [
AppComponent,
@ -195,6 +196,7 @@ import { ExecuteCommandComponent } from './components/commands/main-commands/exe
RepositoriesComponent,
CreateRepositoryComponent,
ExecuteCommandComponent,
ExecuteCommandOuComponent,
],
bootstrap: [AppComponent],
imports: [BrowserModule,

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

@ -3,7 +3,6 @@
<mat-dialog-content class="form-container">
<form [formGroup]="form" class="command-form">
<!-- Selector de Unidad Organizativa -->
<mat-form-field appearance="fill" class="full-width">
<mat-label>Unidad Organizativa</mat-label>
<mat-select formControlName="unit">
@ -11,7 +10,6 @@
</mat-select>
</mat-form-field>
<!-- Selector de Subunidad Organizativa -->
<mat-form-field appearance="fill" class="full-width">
<mat-label>Subunidad Organizativa</mat-label>
<mat-select formControlName="childUnit">
@ -19,7 +17,6 @@
</mat-select>
</mat-form-field>
<!-- Selector de Cliente (PC) con checkboxes -->
<div class="checkbox-group">
<label>Clientes (PC)</label>
<div *ngIf="clients.length > 0">
@ -40,4 +37,4 @@
<mat-dialog-actions align="end">
<button mat-button (click)="closeModal()">Cancelar</button>
<button mat-button (click)="executeCommand()" [disabled]="!form.get('clientSelection')?.value.length">Ejecutar</button>
</mat-dialog-actions>
</mat-dialog-actions>

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

@ -127,6 +127,12 @@
<mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Borrar elemento" matTooltipHideDelay="0" i18n="@@deleteElementTooltip">delete</mat-icon>
<span i18n="@@deleteElementMenu">Borrar elemento</span>
</button>
<button mat-menu-item (click)="onExecuteCommand($event, child.uuid, child.name, child.type)">
<mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Ejecutar comando" matTooltipHideDelay="0">play_arrow</mat-icon>
<span >Ejecutar comando</span>
</button>
</mat-menu>
</div>
</div>

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

@ -25,6 +25,8 @@ import {ClientTabViewComponent} from "./components/client-tab-view/client-tab-vi
import {
OrganizationalUnitTabViewComponent
} from "./components/organizational-unit-tab-view/organizational-unit-tab-view.component";
import { ExecuteCommandComponent } from '../commands/main-commands/execute-command/execute-command.component';
import { ExecuteCommandOuComponent } from './shared/execute-command-ou/execute-command-ou.component';
@Component({
selector: 'app-groups',
@ -298,6 +300,21 @@ export class GroupsComponent implements OnInit {
}
}
onExecuteCommand(event: MouseEvent, child: any, name: string, type:string): void {
console.log('Executing command on:', child);
this.dialog.open(ExecuteCommandOuComponent, {
width: '50%',
data: { childUnitUuid: child }
}).afterClosed().subscribe((result) => {
if (result) {
console.log('Comando ejecutado con éxito');
} else {
console.log('Ejecución de comando cancelada');
}
});
}
openSnackBar(isError: boolean, message: string) {
if (isError) {
this.toastService.error(' Error al eliminar la entidad: ' + message, 'Error');

57
ogWebconsole/src/app/components/groups/shared/execute-command-ou/execute-command-ou.component.css 100644
View File

@ -0,0 +1,57 @@
.form-container {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
.command-form {
width: 100%;
}
.full-width {
width: 100%;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 8px;
}
.checkbox-group label {
font-weight: bold;
margin-bottom: 8px;
}
.mat-checkbox {
margin-left: 8px;
}
.mat-dialog-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
}
.mat-dialog-content {
max-height: 60vh;
overflow-y: auto;
}
.mat-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px;
}
button[mat-button] {
font-weight: 500;
}
button[mat-button]:disabled {
color: rgba(0, 0, 0, 0.38);
}

45
ogWebconsole/src/app/components/groups/shared/execute-command-ou/execute-command-ou.component.html 100644
View File

@ -0,0 +1,45 @@
<h2 mat-dialog-title>Ejecutar Comando o Grupo de Comandos</h2>
<mat-dialog-content class="form-container">
<form [formGroup]="form" class="command-form">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccione Comando</mat-label>
<mat-select formControlName="selectedCommand" (selectionChange)="form.get('selectedCommandGroup')?.reset()">
<mat-option *ngFor="let command of commands" [value]="command.uuid">{{ command.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccione Grupo de Comandos</mat-label>
<mat-select formControlName="selectedCommandGroup" (selectionChange)="form.get('selectedCommand')?.reset()">
<mat-option *ngFor="let group of commandGroups" [value]="group.uuid">{{ group.name }}</mat-option>
</mat-select>
</mat-form-field>
<div class="checkbox-group">
<label>Clientes</label>
<div *ngIf="clients.length > 0">
<mat-checkbox *ngFor="let client of clients"
(change)="toggleClientSelection(client.uuid)"
[checked]="form.get('clientSelection')?.value.includes(client.uuid)">
{{ client.name }}
</mat-checkbox>
</div>
<div *ngIf="clients.length === 0">
<p>No hay clientes disponibles</p>
</div>
</div>
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="closeModal()">Cancelar</button>
<button mat-button
(click)="executeCommand()"
[disabled]="!form.get('clientSelection')?.value.length ||
(!form.get('selectedCommand')?.value && !form.get('selectedCommandGroup')?.value)">
Ejecutar
</button>
</mat-dialog-actions>

120
ogWebconsole/src/app/components/groups/shared/execute-command-ou/execute-command-ou.component.ts 100644
View File

@ -0,0 +1,120 @@
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-execute-command-ou',
templateUrl: './execute-command-ou.component.html',
styleUrls: ['./execute-command-ou.component.css']
})
export class ExecuteCommandOuComponent implements OnInit {
form: FormGroup;
clients: any[] = [];
commands: any[] = [];
commandGroups: any[] = [];
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
constructor(
private dialogRef: MatDialogRef<ExecuteCommandOuComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private http: HttpClient,
private fb: FormBuilder,
private toastService: ToastrService,
) {
this.form = this.fb.group({
selectedCommand: [null],
selectedCommandGroup: [null],
clientSelection: [[]]
});
}
ngOnInit(): void {
this.loadClients();
this.loadCommands();
this.loadCommandGroups();
}
loadClients(): void {
this.http.get<any>(`${this.baseUrl}/organizational-units/${this.data.childUnitUuid}`).subscribe(
response => {
this.clients = this.getAllClients(response);
const clientIds = this.clients.map(client => client.uuid);
this.form.get('clientSelection')?.setValue(clientIds);
},
error => console.error('Error al cargar los clientes:', error)
);
}
getAllClients(unit: any): any[] {
let allClients = unit.clients || [];
if (unit.children && unit.children.length > 0) {
unit.children.forEach((child: any) => {
allClients = allClients.concat(this.getAllClients(child));
});
}
return allClients;
}
loadCommands(): void {
this.http.get<any>(`${this.baseUrl}/commands?page=1&itemsPerPage=30`).subscribe(
response => {
this.commands = response['hydra:member'] || [];
},
error => this.toastService.error('Error al cargar comandos:', error)
);
}
loadCommandGroups(): void {
this.http.get<any>(`${this.baseUrl}/command-groups?page=1&itemsPerPage=30`).subscribe(
response => {
this.commandGroups = response['hydra:member'] || [];
},
error => this.toastService.error('Error al cargar grupos de comandos:', error)
);
}
toggleClientSelection(clientId: string): void {
const selectedClients = this.form.get('clientSelection')?.value || [];
if (selectedClients.includes(clientId)) {
this.form.get('clientSelection')?.setValue(selectedClients.filter((id: string) => id !== clientId));
} else {
this.form.get('clientSelection')?.setValue([...selectedClients, clientId]);
}
}
executeCommand(): void {
const selectedCommandUuid = this.form.get('selectedCommand')?.value || this.form.get('selectedCommandGroup')?.value;
const isCommandGroup = !!this.form.get('selectedCommandGroup')?.value;
if (!selectedCommandUuid) {
console.warn('No se ha seleccionado ningún comando o grupo de comandos');
return;
}
const payload = {
clients: (this.form.get('clientSelection')?.value || []).map((clientId: string) => `/clients/${clientId}`)
};
const url = isCommandGroup
? `${this.baseUrl}/command-groups/${selectedCommandUuid}/execute`
: `${this.baseUrl}/commands/${selectedCommandUuid}/execute`;
this.http.post(url, payload)
.subscribe({
next: () => {
this.toastService.success('Comando ejecutado con éxito');
this.dialogRef.close(true);
},
error: (error) => {
this.toastService.error('Error al ejecutar el comando:', error);
this.dialogRef.close(false);
}
});
}
closeModal(): void {
this.dialogRef.close(false);
}
}