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

develop #67

Merged
maranda merged 19 commits from develop into main 2026-04-16 17:18:42 +02:00
Conversation 0 Commits 19 Files Changed 62
62 changed files with 2712 additions and 1703 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,20 @@
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, APP_INITIALIZER } from '@angular/core';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, APP_INITIALIZER, Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
@Injectable()
class SpanishPaginatorIntl extends MatPaginatorIntl {
override itemsPerPageLabel = 'Elementos por página:';
override nextPageLabel = 'Siguiente';
override previousPageLabel = 'Anterior';
override firstPageLabel = 'Primera página';
override lastPageLabel = 'Última página';
override getRangeLabel = (page: number, pageSize: number, length: number) => {
if (length === 0 || pageSize === 0) return `0 de ${length}`;
const startIndex = page * pageSize;
const endIndex = Math.min(startIndex + pageSize, length);
return `${startIndex + 1} – ${endIndex} de ${length}`;
};
}
import { ConfigService } from './services/config.service';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
@ -106,6 +122,7 @@ import { RepositoriesComponent } from './components/repositories/repositories.co
import { ManageRepositoryComponent } from './components/repositories/manage-repository/manage-repository.component';
import { ExecuteCommandComponent } from './components/commands/main-commands/execute-command/execute-command.component';
import { DeployImageComponent } from './components/groups/components/client-main-view/deploy-image/deploy-image.component';
import { DeployMethodConfigDialogComponent } from './components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component';
import { MainRepositoryViewComponent } from './components/repositories/main-repository-view/main-repository-view.component';
import { ExecuteCommandOuComponent } from './components/groups/shared/execute-command-ou/execute-command-ou.component';
import { JoyrideModule } from 'ngx-joyride';
@ -250,6 +267,7 @@ registerLocaleData(localeEs, 'es-ES');
ExecuteCommandComponent,
ExecuteCommandOuComponent,
DeployImageComponent,
DeployMethodConfigDialogComponent,
MainRepositoryViewComponent,
EnvVarsComponent,
MenusComponent,
@ -361,6 +379,7 @@ registerLocaleData(localeEs, 'es-ES');
multi: true
},
{ provide: LOCALE_ID, useValue: 'es-ES' },
{ provide: MatPaginatorIntl, useClass: SpanishPaginatorIntl },
provideAnimationsAsync(),
provideHttpClient(withInterceptorsFromDi()),
ConfigService,

6
ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
View File

@ -38,6 +38,12 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Clientes por página</mat-label>
<input matInput formControlName="clientsPerPage" type="number" min="1" placeholder="Por defecto (20)">
<mat-hint>Número de clientes mostrados por página en el listado</mat-hint>
</mat-form-field>
</form>
</mat-dialog-content>
<mat-dialog-actions class="action-container">

7
ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts
View File

@ -48,6 +48,7 @@ export class AddUserModalComponent implements OnInit {
password: ['', Validators.required],
role: ['', Validators.required],
groupsView: ['card', Validators.required],
clientsPerPage: [null, [Validators.min(1)]],
organizationalUnits: [[]]
});
@ -82,7 +83,8 @@ export class AddUserModalComponent implements OnInit {
username: response.username,
role: response.userGroups.length > 0 ? response.userGroups[0]['@id'] : null,
organizationalUnits: organizationalUnitIds,
groupsView: response.groupsView
groupsView: response.groupsView,
clientsPerPage: response.clientsPerPage ?? null
});
this.userId = response['@id'];
@ -108,7 +110,8 @@ export class AddUserModalComponent implements OnInit {
allowedOrganizationalUnits: this.userForm.value.organizationalUnits,
enabled: true,
userGroups: [this.userForm.value.role],
groupsView: this.userForm.value.groupsView
groupsView: this.userForm.value.groupsView,
clientsPerPage: this.userForm.value.clientsPerPage || null
};
if (!this.userId && this.userForm.value.password) {

5
ogWebconsole/src/app/components/admin/users/users/users.component.ts
View File

@ -38,6 +38,11 @@ export class UsersComponent implements OnInit {
header: 'Vista de Grupos',
cell: (user: any) => `${user.groupsView}`
},
{
columnDef: 'clientsPerPage',
header: 'Clientes por página',
cell: (user: any) => user.clientsPerPage != null ? `${user.clientsPerPage}` : '-'
},
{
columnDef: 'allowedOrganizationalUnits',
header: 'Unidades Organizacionales Permitidas',

61
ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
View File

@ -78,7 +78,7 @@ table {
}
/* Estilos para los botones de gestión */
.schedule-btn, .script-btn {
.schedule-btn, .script-btn, .traces-btn {
display: inline-flex;
align-items: center;
justify-content: center;
@ -114,7 +114,17 @@ table {
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
.schedule-btn mat-icon, .script-btn mat-icon {
.traces-btn {
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
color: white;
}
.traces-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}
.schedule-btn mat-icon, .script-btn mat-icon, .traces-btn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
@ -123,15 +133,58 @@ table {
justify-content: center;
}
.schedule-btn span, .script-btn span {
.schedule-btn span, .script-btn span, .traces-btn span {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}
/* Indicadores de estado de trazas */
.trace-stats {
display: flex;
gap: 4px;
align-items: center;
}
.trace-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: white;
padding: 0 6px;
cursor: default;
}
.trace-success {
background-color: #4caf50;
}
.trace-in-progress {
background-color: #2196f3;
}
.trace-pending {
background-color: #ff9800;
}
.trace-failed {
background-color: #f44336;
}
.trace-no-data {
color: #999;
font-style: italic;
font-size: 13px;
}
/* Responsive para los botones */
@media (max-width: 768px) {
.schedule-btn, .script-btn {
.schedule-btn, .script-btn, .traces-btn {
width: 100%;
justify-content: center;
margin: 4px 0;

4
ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
View File

@ -46,11 +46,11 @@
<ng-container *ngIf="column.columnDef === 'management'">
<button class="action-button schedule-btn" (click)="openShowScheduleDialog(task)">
<mat-icon>schedule</mat-icon>
<span>Programaciones</span>
<span>{{ 'schedules' | translate }}</span>
</button>
<button class="action-button script-btn" (click)="openShowScriptDialog(task)">
<mat-icon>code</mat-icon>
<span>Acciones</span>
<span>{{ 'taskActions' | translate }}</span>
</button>
</ng-container>
</td>

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

@ -71,6 +71,7 @@ export class CommandsTaskComponent implements OnInit {
);
}
updateDisplayedColumns(): void {
const hasNonClientTasks = this.tasks.some(task => task.scope !== 'clients');
@ -127,7 +128,7 @@ export class CommandsTaskComponent implements OnInit {
deleteTask(task: any): void {
this.dialog.open(DeleteModalComponent, {
width: '300px',
data: { name: task.createdBy },
data: { name: task.name },
}).afterClosed().subscribe((result) => {
if (result) {
this.http.delete(`${this.apiUrl}/${task.uuid}`).subscribe({

27
ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.html
View File

@ -1,32 +1,32 @@
<h2 mat-dialog-title class="dialog-title">
{{ data.schedule ? 'Editar' : 'Crear' }} Programación de Tarea
{{ (data.schedule ? 'editSchedule' : 'createSchedule') | translate }} {{ 'taskSchedule' | translate }}
</h2>
<mat-dialog-content class="dialog-content">
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="task-form">
<mat-form-field appearance="fill" class="w-full">
<mat-label>Repetición</mat-label>
<mat-label>{{ 'repetition' | translate }}</mat-label>
<mat-select formControlName="recurrenceType">
<mat-option *ngFor="let opt of recurrenceTypes" [value]="opt.value">{{ opt.label }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="w-full" *ngIf="form.get('recurrenceType')?.value === 'none'">
<mat-label>Fecha de ejecución</mat-label>
<mat-label>{{ 'executionDate' | translate }}</mat-label>
<input matInput [matDatepicker]="oneTimePicker" formControlName="executionDate">
<mat-datepicker-toggle matSuffix [for]="oneTimePicker"></mat-datepicker-toggle>
<mat-datepicker #oneTimePicker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="fill" class="w-full">
<mat-label>Hora de ejecución</mat-label>
<mat-label>{{ 'executionTime' | translate }}</mat-label>
<input matInput formControlName="executionTime" placeholder="08:00" type="time">
<mat-hint>Hora en formato 24h (ej: 14:30)</mat-hint>
<mat-hint>{{ 'timeFormatHint' | translate }}</mat-hint>
</mat-form-field>
<div *ngIf="form.get('recurrenceType')?.value !== 'none'" class="mb-4">
<label class="section-label">Días de la semana:</label>
<label class="section-label">{{ 'weekDaysLabel' | translate }}:</label>
<div class="weekday-toggle-group">
<button
*ngFor="let day of weekDays"
@ -40,7 +40,7 @@
</div>
<div *ngIf="form.get('recurrenceType')?.value !== 'none'" >
<label class="section-label">Meses:</label>
<label class="section-label">{{ 'monthsLabel' | translate }}:</label>
<div class="month-toggle-row" *ngFor="let row of monthRows">
<button
*ngFor="let month of row"
@ -55,14 +55,14 @@
<div *ngIf="form.get('recurrenceType')?.value !== 'none'" class="custom-time" formGroupName="recurrenceDetails">
<mat-form-field appearance="fill" class="w-half">
<mat-label>Fecha de inicio</mat-label>
<mat-label>{{ 'startDate' | translate }}</mat-label>
<input matInput [matDatepicker]="fromPicker" formControlName="initDate">
<mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
<mat-datepicker #fromPicker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="fill" class="w-half">
<mat-label>Fecha de fin</mat-label>
<mat-label>{{ 'endDate' | translate }}</mat-label>
<input matInput [matDatepicker]="toPicker" formControlName="endDate">
<mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
<mat-datepicker #toPicker></mat-datepicker>
@ -71,15 +71,14 @@
<mat-checkbox formControlName="enabled" class="enabled-checkbox">
<mat-icon class="checkbox-icon">power_settings_new</mat-icon>
Activar programación
{{ 'enableSchedule' | translate }}
</mat-checkbox>
<!-- Resumen mejorado de la programación -->
<mat-card *ngIf="summaryText" class="summary-card">
<mat-card-header>
<mat-card-title class="summary-title">
<mat-icon color="primary">info</mat-icon>
Resumen de la Programación
{{ 'scheduleSummaryTitle' | translate }}
</mat-card-title>
</mat-card-header>
<mat-card-content>
@ -90,11 +89,11 @@
</div>
<div class="summary-item" *ngIf="nextExecutionDate">
<mat-icon class="summary-icon">next_plan</mat-icon>
<span class="summary-text">Próxima ejecución: {{ nextExecutionDate | date:'full' }}</span>
<span class="summary-text">{{ 'nextExecution' | translate }}: {{ nextExecutionDate | date:'full' }}</span>
</div>
<div class="summary-item" *ngIf="executionCount">
<mat-icon class="summary-icon">repeat</mat-icon>
<span class="summary-text">Se ejecutará {{ executionCount }} veces</span>
<span class="summary-text">{{ 'willExecuteTimes' | translate:{ count: executionCount } }}</span>
</div>
</div>
</mat-card-content>

28
ogWebconsole/src/app/components/commands/commands-task/create-task-schedule/create-task-schedule.component.ts
View File

@ -168,6 +168,34 @@ export class CreateTaskScheduleComponent implements OnInit{
onSubmit() {
const formData = this.form.value;
if (formData.recurrenceType === 'custom') {
const selectedDayNames = Object.keys(this.selectedDays).filter(day => this.selectedDays[day]);
const selectedMonthNames = Object.keys(this.selectedMonths).filter(month => this.selectedMonths[month]);
if (selectedDayNames.length === 0) {
this.toastr.error('Debe seleccionar al menos un día de la semana');
return;
}
if (selectedMonthNames.length === 0) {
this.toastr.error('Debe seleccionar al menos un mes');
return;
}
const initDate = formData.recurrenceDetails?.initDate;
const endDate = formData.recurrenceDetails?.endDate;
if (!initDate || !endDate) {
this.toastr.error('Debe especificar fecha de inicio y fecha de fin');
return;
}
if (new Date(endDate) <= new Date(initDate)) {
this.toastr.error('La fecha de fin debe ser posterior a la fecha de inicio');
return;
}
}
const payload: any = {
commandTask: this.data.task['@id'],
executionDate: formData.recurrenceType === 'none' ? this.convertDateToLocalISO(formData.executionDate) : null,

662
ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.css
View File

@ -1,31 +1,312 @@
.divider {
margin: 20px 0;
.dialog-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 16px 24px;
}
table {
.back-icon {
cursor: pointer;
color: #666;
transition: color 0.2s;
}
.back-icon:hover {
color: #1976d2;
}
.title-with-action {
display: flex;
align-items: center;
gap: 8px;
}
/* ===== Category cards ===== */
.categories-grid {
display: flex;
flex-direction: column;
gap: 12px;
padding: 8px 0;
}
.category-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
border-radius: 10px;
border: 1px solid #e0e0e0;
border-left: 5px solid;
cursor: pointer;
transition: all 0.2s ease;
background: #fff;
}
.category-card:hover {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
transform: translateX(4px);
}
.category-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
flex-shrink: 0;
}
.category-icon mat-icon {
color: #fff;
font-size: 26px;
width: 26px;
height: 26px;
}
.category-info {
flex: 1;
}
.category-info h3 {
margin: 0 0 4px 0;
font-size: 15px;
font-weight: 600;
color: #333;
}
.category-info p {
margin: 0;
font-size: 13px;
color: #777;
}
.category-arrow {
color: #bbb;
transition: transform 0.2s;
}
.category-card:hover .category-arrow {
transform: translateX(4px);
color: #666;
}
.info-icon {
color: #90a4ae;
}
/* ===== Info panel (for assistant-required categories) ===== */
.info-panel {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px;
text-align: center;
}
.info-panel-icon .big-info-icon {
font-size: 56px;
width: 56px;
height: 56px;
margin-bottom: 16px;
opacity: 0.8;
}
.info-panel-content {
max-width: 520px;
}
.info-panel-content h3 {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 12px 0;
}
.info-panel-content > p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin: 0 0 24px 0;
}
.info-steps {
display: flex;
flex-direction: column;
gap: 14px;
text-align: left;
margin-bottom: 28px;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
}
.info-step {
display: flex;
align-items: center;
gap: 14px;
font-size: 14px;
color: #444;
}
.step-number-badge {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #1976d2;
color: #fff;
font-weight: 600;
font-size: 13px;
flex-shrink: 0;
}
.info-supported-ops {
text-align: left;
}
.info-supported-label {
font-size: 13px;
font-weight: 600;
color: #555;
margin: 0 0 10px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-op-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
margin: 4px 6px 4px 0;
background: #f0f4f8;
border-radius: 20px;
font-size: 13px;
color: #444;
}
.info-op-chip mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
/* ===== Action selector within category ===== */
.actions-grid {
display: flex;
flex-direction: column;
gap: 12px;
padding: 8px 0;
}
.actions-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.action-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border-radius: 8px;
border: 1px solid #e0e0e0;
border-left: 4px solid;
cursor: pointer;
transition: all 0.2s ease;
background: #fff;
font-size: 15px;
font-weight: 500;
color: #333;
}
.action-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transform: translateX(4px);
}
.action-card mat-icon:first-child {
font-size: 24px;
width: 24px;
height: 24px;
}
.action-card span {
flex: 1;
}
/* ===== Form sections ===== */
.action-form {
padding: 8px 0;
}
.order-field {
width: 200px;
margin-bottom: 16px;
}
.form-section {
margin-top: 8px;
}
.full-width {
width: 100%;
margin-top: 50px;
}
.task-form {
padding: 20px;
}
.search-container {
.radio-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
box-sizing: border-box;
gap: 24px;
margin-bottom: 20px;
padding: 12px 16px;
background-color: #f8f9fa;
border-radius: 8px;
}
.deploy-container {
/* ===== System action info ===== */
.system-action-info {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 20px;
padding: 32px 16px;
text-align: center;
}
.system-action-info .big-icon {
font-size: 48px;
width: 48px;
height: 48px;
margin-bottom: 16px;
}
.system-action-info p {
color: #666;
font-size: 14px;
max-width: 400px;
}
/* ===== Script section ===== */
.script-type-selector {
margin-bottom: 16px;
}
.new-command-container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
background-color: #eaeff6;
border: 1px solid #ddd;
border-radius: 8px;
}
.new-command-container textarea {
font-family: monospace;
resize: vertical;
}
.script-container {
@ -33,7 +314,7 @@ table {
padding: 20px;
background-color: #eaeff6;
border-radius: 12px;
margin-top: 20px;
margin-top: 12px;
}
.script-content {
@ -46,35 +327,6 @@ table {
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;
@ -85,145 +337,7 @@ table {
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;
}
/* ===== Action buttons ===== */
.action-container {
display: flex;
justify-content: flex-end;
@ -231,178 +345,14 @@ table {
padding: 1.5em;
}
.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%;
}
.script-selector-card {
margin: 20px 20px;
padding: 16px;
}
/* Estilos para las pestañas principales */
.action-tabs {
margin-top: 20px;
}
.action-tabs ::ng-deep .mat-tab-header {
border-bottom: 2px solid #e0e0e0;
margin-bottom: 20px;
}
.action-tabs ::ng-deep .mat-tab-label {
min-width: 160px;
padding: 12px 24px;
font-weight: 500;
color: #666;
transition: all 0.3s ease;
}
.action-tabs ::ng-deep .mat-tab-label:hover {
color: #1976d2;
background-color: rgba(25, 118, 210, 0.04);
}
.action-tabs ::ng-deep .mat-tab-label.mat-tab-label-active {
color: #1976d2;
font-weight: 600;
}
.action-tabs ::ng-deep .mat-ink-bar {
background-color: #1976d2;
height: 3px;
}
/* Contenido de las pestañas */
.tab-content {
padding: 20px 0;
}
.action-description {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
padding: 16px;
background-color: #f8f9fa;
border-radius: 8px;
border-left: 4px solid #1976d2;
}
.action-description mat-icon {
color: #1976d2;
font-size: 24px;
width: 24px;
height: 24px;
}
.action-description span {
color: #495057;
font-size: 14px;
font-weight: 500;
}
/* Selector de tipo de script */
.script-type-selector {
margin-bottom: 24px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.radio-group {
display: flex;
gap: 24px;
}
.radio-button {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 6px;
transition: all 0.2s ease;
}
.radio-button:hover {
background-color: rgba(25, 118, 210, 0.04);
}
.radio-button mat-icon {
color: #1976d2;
font-size: 20px;
width: 20px;
height: 20px;
}
/* Contenedor de acciones básicas */
.basic-action-container {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Contenedor de scripts */
.script-options {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Responsive design */
/* ===== Responsive ===== */
@media (max-width: 768px) {
.action-tabs ::ng-deep .mat-tab-label {
min-width: 120px;
padding: 8px 16px;
font-size: 14px;
}
.radio-group {
.radio-row {
flex-direction: column;
gap: 16px;
gap: 12px;
}
.action-description {
flex-direction: column;
text-align: center;
gap: 8px;
.info-steps {
padding: 14px;
}
}

269
ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.html
View File

@ -1,118 +1,169 @@
<h2 mat-dialog-title class="dialog-title">Añadir acción a: {{ data.task?.name }}</h2>
<h2 mat-dialog-title class="dialog-title">
<mat-icon *ngIf="selectedCategory" class="back-icon" (click)="goBackToCategories()">arrow_back</mat-icon>
<span *ngIf="!selectedCategory">{{ 'addActionTo' | translate }}: {{ data.commandTask?.name }}</span>
<span *ngIf="selectedCategory && !selectedAction && isInfoOnlyCategory()" class="title-with-action">
<mat-icon [style.color]="getSelectedCategoryColor()">{{ categories | keyvalue : undefined }}</mat-icon>
<ng-container *ngFor="let cat of categories">
<ng-container *ngIf="cat.id === selectedCategory">
<mat-icon [style.color]="cat.color">{{ cat.icon }}</mat-icon>
{{ cat.labelKey | translate }}
</ng-container>
</ng-container>
</span>
<span *ngIf="selectedAction" class="title-with-action">
<mat-icon [style.color]="getSelectedCategoryColor()">{{ getSelectedActionIcon() }}</mat-icon>
{{ getSelectedActionLabel() }}
</span>
</h2>
<mat-dialog-content class="dialog-content">
<div class="task-form">
<!-- Pestañas principales -->
<mat-tab-group [(selectedIndex)]="selectedTabIndex" (selectedIndexChange)="onTabChange($event)" class="action-tabs">
<!-- Pestaña de Acciones Básicas -->
<mat-tab label="Acciones Básicas" class="basic-tab">
<div class="tab-content">
<div class="action-description">
<mat-icon>power_settings_new</mat-icon>
<span>Selecciona una acción básica del sistema</span>
</div>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Tipo de Acción</mat-label>
<mat-select [(ngModel)]="selectedBasicAction" (selectionChange)="onBasicActionChange()">
<mat-option value="poweron">
<mat-icon>power</mat-icon> Encender Equipo
</mat-option>
<mat-option value="shutdown">
<mat-icon>power_off</mat-icon> Apagar Equipo
</mat-option>
<mat-option value="reboot">
<mat-icon>restart_alt</mat-icon> Reiniciar Equipo
</mat-option>
<mat-option value="login">
<mat-icon>login</mat-icon> Iniciar Sesión
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="custom-width">
<mat-label>Orden de ejecución</mat-label>
<input matInput type="number" [(ngModel)]="executionOrder" placeholder="Orden de ejecución">
</mat-form-field>
</div>
</mat-tab>
<!-- Pestaña de Scripts -->
<mat-tab label="Ejecutar Script" class="script-tab">
<div class="tab-content">
<div class="action-description">
<mat-icon>code</mat-icon>
<span>Ejecuta un script personalizado o crea uno nuevo</span>
</div>
<!-- Opciones de script -->
<div class="script-options">
<div class="script-type-selector">
<mat-radio-group [(ngModel)]="commandType" class="radio-group">
<mat-radio-button value="new" class="radio-button">
<mat-icon>edit</mat-icon> Nuevo Script
</mat-radio-button>
<mat-radio-button value="existing" class="radio-button">
<mat-icon>storage</mat-icon> Script Guardado
</mat-radio-button>
</mat-radio-group>
</div>
<!-- Nuevo Script -->
<div *ngIf="commandType === 'new'" class="new-command-container">
<mat-form-field appearance="fill" class="custom-width">
<mat-label>Orden de ejecución</mat-label>
<input matInput type="number" [(ngModel)]="executionOrder" placeholder="Orden de ejecución">
</mat-form-field>
<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 mat-flat-button color="primary" (click)="saveNewScript()">Guardar Script</button>
</div>
<!-- Script Existente -->
<div *ngIf="commandType === 'existing'">
<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>
<!-- Detalles del Script -->
<div *ngIf="selectedScript && commandType === 'existing'" class="script-container">
<mat-form-field appearance="fill" class="custom-width">
<mat-label>Orden de ejecución</mat-label>
<input matInput type="number" [(ngModel)]="executionOrder" placeholder="Orden de ejecución">
</mat-form-field>
<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 parámetros:</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="Valor para {{ paramName }}">
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
<!-- PASO 1: Selector de categorías -->
<div *ngIf="!selectedCategory" class="categories-grid">
<div *ngFor="let category of categories"
class="category-card"
[style.border-left-color]="category.color"
(click)="selectCategory(category.id)">
<div class="category-icon" [style.background-color]="category.color">
<mat-icon>{{ category.icon }}</mat-icon>
</div>
<div class="category-info">
<h3>{{ category.labelKey | translate }}</h3>
<p>{{ category.descriptionKey | translate }}</p>
</div>
<mat-icon class="category-arrow" *ngIf="!category.infoOnly">chevron_right</mat-icon>
<mat-icon class="category-arrow info-icon" *ngIf="category.infoOnly">info_outline</mat-icon>
</div>
</div>
<!-- PANEL INFORMATIVO: categorías que requieren contexto de equipo -->
<div *ngIf="selectedCategory && isInfoOnlyCategory()" class="info-panel">
<div class="info-panel-icon">
<ng-container *ngFor="let cat of categories">
<mat-icon *ngIf="cat.id === selectedCategory" [style.color]="cat.color" class="big-info-icon">{{ cat.icon }}</mat-icon>
</ng-container>
</div>
<div class="info-panel-content">
<h3>{{ 'assistantRequiredTitle' | translate }}</h3>
<p>{{ 'assistantRequiredDesc' | translate }}</p>
<div class="info-steps">
<div class="info-step">
<div class="step-number-badge">1</div>
<span>{{ 'assistantStep1' | translate }}</span>
</div>
<div class="info-step">
<div class="step-number-badge">2</div>
<span>{{ 'assistantStep2' | translate }}</span>
</div>
<div class="info-step">
<div class="step-number-badge">3</div>
<span>{{ 'assistantStep3' | translate }}</span>
</div>
</div>
<div class="info-supported-ops">
<p class="info-supported-label">{{ 'supportedOpsLabel' | translate }}:</p>
<ng-container *ngFor="let cat of categories">
<ng-container *ngIf="cat.id === selectedCategory">
<div *ngFor="let action of cat.actions" class="info-op-chip">
<mat-icon [style.color]="cat.color">{{ action.icon }}</mat-icon>
<span>{{ action.labelKey | translate }}</span>
</div>
</ng-container>
</ng-container>
</div>
</div>
</div>
<!-- PASO 2: Selector de acción dentro de categoría (solo si tiene >1 acción y no es infoOnly) -->
<div *ngIf="selectedCategory && !selectedAction && !isInfoOnlyCategory()" class="actions-grid">
<div class="actions-list">
<ng-container *ngFor="let category of categories">
<ng-container *ngIf="category.id === selectedCategory">
<div *ngFor="let action of category.actions"
class="action-card"
[style.border-left-color]="category.color"
(click)="selectAction(action.type)">
<mat-icon [style.color]="category.color">{{ action.icon }}</mat-icon>
<span>{{ action.labelKey | translate }}</span>
<mat-icon class="category-arrow">chevron_right</mat-icon>
</div>
</ng-container>
</ng-container>
</div>
</div>
<!-- PASO 3: Formulario según acción seleccionada -->
<div *ngIf="selectedAction" class="action-form">
<!-- Orden de ejecución (común a todas) -->
<mat-form-field appearance="fill" class="order-field">
<mat-label>{{ 'executionOrder' | translate }}</mat-label>
<input matInput type="number" [(ngModel)]="executionOrder" min="0">
</mat-form-field>
<!-- ========== SYSTEM CONTROL (power-on, shutdown, reboot, login) ========== -->
<div *ngIf="selectedAction === 'power-on' || selectedAction === 'shutdown' || selectedAction === 'reboot' || selectedAction === 'login'"
class="form-section system-info">
<div class="system-action-info">
<mat-icon [style.color]="getSelectedCategoryColor()" class="big-icon">{{ getSelectedActionIcon() }}</mat-icon>
<p>{{ 'systemActionHint' | translate }}</p>
</div>
</div>
<!-- ========== RUN SCRIPT ========== -->
<div *ngIf="selectedAction === 'run-script'" class="form-section">
<div class="script-type-selector">
<mat-radio-group [(ngModel)]="commandType" class="radio-row">
<mat-radio-button value="new">
<mat-icon>edit</mat-icon> {{ 'newScript' | translate }}
</mat-radio-button>
<mat-radio-button value="existing">
<mat-icon>storage</mat-icon> {{ 'savedScript' | translate }}
</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>{{ 'enterScript' | translate }}</mat-label>
<textarea matInput [(ngModel)]="newScript" rows="6" [placeholder]="'writeScriptHere' | translate"></textarea>
</mat-form-field>
<button mat-flat-button color="primary" (click)="saveNewScript()">{{ 'saveScript' | translate }}</button>
</div>
<div *ngIf="commandType === 'existing'">
<mat-form-field appearance="fill" class="full-width">
<mat-label>{{ 'selectScriptToRun' | translate }}</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>{{ 'scriptLabel' | translate }}:</h3>
<div class="script-preview" [innerHTML]="scriptContent"></div>
</div>
<div class="script-params" *ngIf="parameterNames.length > 0">
<h3>{{ 'enterParameters' | translate }}:</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]="('valueFor' | translate) + ' ' + paramName">
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onCancel()">{{ 'buttonCancel' | translate }}</button>
<button class="submit-button" (click)="onSubmit()" >{{ 'buttonSave' | translate }}</button>
<button class="submit-button" (click)="onSubmit()" *ngIf="selectedAction">{{ 'buttonSave' | translate }}</button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.spec.ts
View File

@ -31,6 +31,7 @@ import {ConfigService} from "@services/config.service";
import {ActivatedRoute} from "@angular/router";
import {MatButtonToggleModule} from "@angular/material/button-toggle";
import {MatRadioModule} from "@angular/material/radio";
import {MatCheckboxModule} from "@angular/material/checkbox";
describe('CreateTaskScriptComponent', () => {
let component: CreateTaskScriptComponent;
@ -68,6 +69,7 @@ describe('CreateTaskScriptComponent', () => {
MatMenuModule,
MatButtonToggleModule,
MatRadioModule,
MatCheckboxModule,
MatTreeModule,
TranslateModule.forRoot(),
JoyrideModule.forRoot(),

324
ogWebconsole/src/app/components/commands/commands-task/create-task-script/create-task-script.component.ts
View File

@ -9,6 +9,23 @@ import {
SaveScriptComponent
} from "../../../groups/components/client-main-view/run-script-assistant/save-script/save-script.component";
import {FormBuilder, FormGroup} from "@angular/forms";
import {TranslateService} from "@ngx-translate/core";
interface ActionCategory {
id: string;
icon: string;
labelKey: string;
descriptionKey: string;
color: string;
infoOnly: boolean;
actions: ActionOption[];
}
interface ActionOption {
type: string;
icon: string;
labelKey: string;
}
@Component({
selector: 'app-create-task-script',
@ -19,20 +36,72 @@ export class CreateTaskScriptComponent implements OnInit {
form: FormGroup;
baseUrl: string;
@Output() dataChange = new EventEmitter<any>();
errorMessage = '';
loading: boolean = false;
scripts: any[] = [];
scriptContent: string = "";
parameters: any = {};
selectedTabIndex: number = 0;
selectedBasicAction: string = '';
commandType: string = 'existing';
selectedScript: any = null;
newScript: string = '';
executionOrder: Number = 0;
executionOrder: number = 0;
selection = new SelectionModel(true, []);
parameterNames: string[] = Object.keys(this.parameters);
commandTask: any;
selectedCategory: string = '';
selectedAction: string = '';
categories: ActionCategory[] = [
{
id: 'image-ops',
icon: 'perm_media',
labelKey: 'catImageOps',
descriptionKey: 'catImageOpsDesc',
color: '#1565c0',
infoOnly: true,
actions: [
{ type: 'deploy-image', icon: 'cloud_download', labelKey: 'deployImage' },
{ type: 'create-image', icon: 'add_photo_alternate', labelKey: 'createImage' },
]
},
{
id: 'partition',
icon: 'storage',
labelKey: 'catPartition',
descriptionKey: 'catPartitionDesc',
color: '#2e7d32',
infoOnly: true,
actions: [
{ type: 'partition-assistant', icon: 'view_column', labelKey: 'partitionAndFormat' },
]
},
{
id: 'system',
icon: 'settings_power',
labelKey: 'catSystemControl',
descriptionKey: 'catSystemControlDesc',
color: '#e65100',
infoOnly: false,
actions: [
{ type: 'power-on', icon: 'power', labelKey: 'powerOnDevice' },
{ type: 'shutdown', icon: 'power_off', labelKey: 'shutdownDevice' },
{ type: 'reboot', icon: 'restart_alt', labelKey: 'rebootDevice' },
{ type: 'login', icon: 'login', labelKey: 'loginSession' },
]
},
{
id: 'script',
icon: 'code',
labelKey: 'catCustomScript',
descriptionKey: 'catCustomScriptDesc',
color: '#6a1b9a',
infoOnly: false,
actions: [
{ type: 'run-script', icon: 'terminal', labelKey: 'runScript' },
]
}
];
constructor(
private fb: FormBuilder,
private http: HttpClient,
@ -42,25 +111,56 @@ export class CreateTaskScriptComponent implements OnInit {
private router: Router,
private dialog: MatDialog,
private route: ActivatedRoute,
private translate: TranslateService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.baseUrl = this.configService.apiUrl;
this.commandTask = this.data.commandTask;
this.loadScripts()
this.loadScripts();
this.form = this.fb.group({
content: [''],
order: [''],
})
});
}
ngOnInit(): void {
ngOnInit(): void {}
selectCategory(categoryId: string): void {
const cat = this.categories.find(c => c.id === categoryId);
if (cat?.infoOnly) {
this.selectedCategory = categoryId;
this.selectedAction = '';
return;
}
this.selectedCategory = categoryId;
if (cat && cat.actions.length === 1) {
this.selectAction(cat.actions[0].type);
} else {
this.selectedAction = '';
}
}
selectAction(actionType: string): void {
this.selectedAction = actionType;
}
goBackToCategories(): void {
this.selectedCategory = '';
this.selectedAction = '';
}
goBackToActions(): void {
this.selectedAction = '';
}
isInfoOnlyCategory(): boolean {
const cat = this.categories.find(c => c.id === this.selectedCategory);
return cat?.infoOnly || false;
}
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;
@ -70,75 +170,16 @@ export class CreateTaskScriptComponent implements OnInit {
});
}
onTabChange(index: number): void {
this.selectedTabIndex = index;
if (index === 0) {
this.selectedBasicAction = '';
} else {
this.selectedScript = null;
this.newScript = '';
}
}
onBasicActionChange(): void {
this.parameters = {};
this.parameterNames = Object.keys(this.parameters);
}
getBasicActionType(): string {
const actionMap: { [key: string]: string } = {
'poweron': 'POWER-ON',
'shutdown': 'SHUTDOWN',
'reboot': 'REBOOT',
'login': 'LOGIN',
};
return actionMap[this.selectedBasicAction] || '';
}
validateBasicAction(): boolean {
if (!this.selectedBasicAction) {
this.toastService.error('Debe seleccionar un tipo de acción');
return false;
}
if (this.executionOrder === null || this.executionOrder === undefined) {
this.toastService.error('Debe especificar el orden de ejecución');
return false;
}
return true;
}
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');
}
});
}
onScriptChange() {
onScriptChange(): void {
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))));
const uniqueParams = Array.from(new Set(matches.map((m: string) => m.slice(1))));
this.parameters = {};
uniqueParams.forEach(param => this.parameters[param] = '');
this.parameterNames = uniqueParams;
this.updateScript();
}
}
@ -150,16 +191,82 @@ export class CreateTaskScriptComponent implements OnInit {
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;
}
validateScript(): boolean {
saveNewScript(): void {
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');
}
});
}
onSubmit(): void {
if (!this.selectedAction) {
this.toastService.error(this.translate.instant('selectActionTypeError'));
return;
}
if (this.executionOrder === null || this.executionOrder === undefined) {
this.toastService.error(this.translate.instant('executionOrderRequired'));
return;
}
let type = '';
let content = '';
switch (this.selectedAction) {
case 'run-script':
if (!this.validateScript()) return;
type = 'run-script';
content = this.commandType === 'existing' ? this.scriptContent : this.newScript;
break;
case 'power-on':
case 'shutdown':
case 'reboot':
case 'login':
type = this.selectedAction;
content = this.selectedAction;
break;
default:
this.toastService.error('Tipo de acción no reconocido');
return;
}
const payload: any = {
commandTask: this.commandTask['@id'],
content: content,
order: this.executionOrder,
type: type,
};
this.http.post(`${this.baseUrl}/command-task-scripts`, payload).subscribe({
next: () => {
this.toastService.success(this.translate.instant('actionAddedSuccess'));
this.dialogRef.close(true);
},
error: (error) => {
this.toastService.error(error.error['hydra:description']);
}
});
}
private validateScript(): boolean {
if (this.commandType === 'new') {
if (!this.newScript.trim()) {
this.toastService.error('Debe ingresar un script');
@ -171,60 +278,31 @@ export class CreateTaskScriptComponent implements OnInit {
return false;
}
}
if (this.executionOrder === null || this.executionOrder === undefined) {
this.toastService.error('Debe especificar el orden de ejecución');
return false;
}
return true;
}
onSubmit() {
let isValid = false;
let content = '';
let type = '';
if (this.selectedTabIndex === 0) {
isValid = this.validateBasicAction();
if (isValid) {
content = this.getBasicActionType();
type = 'basic-action';
}
} else { // Pestaña de scripts
isValid = this.validateScript();
if (isValid) {
content = this.commandType === 'existing' ? this.scriptContent : this.newScript;
type = 'run-script';
}
}
if (!isValid) {
return;
}
if (!this.data) {
this.toastService.error('Error: No se recibieron datos del diálogo');
return;
}
this.http.post(`${this.baseUrl}/command-task-scripts`, {
commandTask: this.commandTask['@id'],
content: content,
order: this.executionOrder,
type: this.selectedBasicAction,
}).subscribe({
next: () => {
this.toastService.success('Tarea creada con éxito');
this.dialogRef.close(true);
},
error: (error) => {
this.toastService.error(error.error['hydra:description']);
}
})
}
onCancel(): void {
this.dialogRef.close(false);
}
getSelectedCategoryColor(): string {
const cat = this.categories.find(c => c.id === this.selectedCategory);
return cat?.color || '#1976d2';
}
getSelectedActionLabel(): string {
for (const cat of this.categories) {
const action = cat.actions.find(a => a.type === this.selectedAction);
if (action) return this.translate.instant(action.labelKey);
}
return '';
}
getSelectedActionIcon(): string {
for (const cat of this.categories) {
const action = cat.actions.find(a => a.type === this.selectedAction);
if (action) return action.icon;
}
return '';
}
}

32
ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
View File

@ -9,32 +9,32 @@
<mat-button-toggle-group *ngIf="data?.source === 'assistant'" [(ngModel)]="taskMode" class="task-mode-selection" name="taskMode" appearance="standard">
<mat-button-toggle value="create">
<mat-icon>add_task</mat-icon>
Crear tarea
{{ 'createTaskLabel' | translate }}
</mat-button-toggle>
<mat-button-toggle value="add">
<mat-icon>playlist_add</mat-icon>
Introducir en tarea existente
{{ 'addToExistingTask' | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div *ngIf="taskMode === 'add'" class="select-task">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccione una tarea</mat-label>
<mat-label>{{ 'selectTask' | translate }}</mat-label>
<mat-select [(ngModel)]="selectedExistingTask" name="existingTask">
<mat-option *ngFor="let task of existingTasks" [value]="task">{{ task.name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Orden de ejecución</mat-label>
<mat-label>{{ 'executionOrder' | translate }}</mat-label>
<input
matInput
type="number"
[(ngModel)]="executionOrder"
name="executionOrder"
min="1"
placeholder="Introduce el orden"
[placeholder]="'enterOrder' | translate"
>
</mat-form-field>
</div>
@ -42,30 +42,30 @@
<form *ngIf="taskMode === 'create' && taskForm && !loading" [formGroup]="taskForm" class="task-form">
<mat-form-field appearance="fill" class="full-width">
<mat-label>{{ 'nameLabel' | translate }}</mat-label>
<input matInput formControlName="name" placeholder="{{ 'nameLabel' | translate }}">
<input matInput formControlName="name" [placeholder]="'nameLabel' | translate">
<mat-error *ngIf="taskForm.get('name')?.invalid">{{ 'requiredFieldError' | translate }}</mat-error>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>{{ 'notesLabel' | translate }}</mat-label>
<textarea matInput formControlName="notes" placeholder="{{ 'notesPlaceholder' | translate }}"></textarea>
<textarea matInput formControlName="notes" [placeholder]="'notesPlaceholder' | translate"></textarea>
</mat-form-field>
<mat-checkbox *ngIf="!editing" formControlName="scheduleAfterCreate" class="schedule-checkbox">
¿Quieres programar la tarea al finalizar su creación?
{{ 'scheduleAfterCreate' | translate }}
</mat-checkbox>
<mat-divider style="margin: 15px 0;"></mat-divider>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Ámbito</mat-label>
<mat-label>{{ 'scopeLabel' | translate }}</mat-label>
<mat-select formControlName="scope" (selectionChange)="onScopeChange($event.value)"
[disabled]="data?.clients && data.clients.length >= 1">
<mat-option value="organizational-unit">Unidad Organizativa</mat-option>
<mat-option value="classrooms-group">Grupo de aulas</mat-option>
<mat-option value="classroom">Aulas</mat-option>
<mat-option value="clients-group">Grupos de clientes</mat-option>
<mat-option value="clients">Clientes</mat-option>
<mat-option value="organizational-unit">{{ 'scopeOrganizationalUnit' | translate }}</mat-option>
<mat-option value="classrooms-group">{{ 'scopeClassroomsGroup' | translate }}</mat-option>
<mat-option value="classroom">{{ 'scopeClassroom' | translate }}</mat-option>
<mat-option value="clients-group">{{ 'scopeClientsGroup' | translate }}</mat-option>
<mat-option value="clients">{{ 'scopeClients' | translate }}</mat-option>
</mat-select>
</mat-form-field>
@ -80,11 +80,11 @@
</mat-form-field>
<div *ngIf="taskForm.get('scope')?.value === 'clients'" class="clients-selection">
<h4>Clientes seleccionados</h4>
<h4>{{ 'selectedClients' | translate }}</h4>
<div *ngIf="data?.selectedClients && data.selectedClients.length > 0" class="pre-selected-info">
<mat-icon>info</mat-icon>
<span>Los clientes han sido pre-seleccionados desde el componente de despliegue de imágenes.</span>
<span>{{ 'preSelectedInfo' | translate }}</span>
</div>
<div class="clients-list">

52
ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
View File

@ -7,6 +7,7 @@ import { ConfigService } from '@services/config.service';
import {of} from "rxjs";
import {startWith, switchMap} from "rxjs/operators";
import {CreateTaskScheduleComponent} from "../create-task-schedule/create-task-schedule.component";
import {ShowTaskScriptComponent} from "../show-task-script/show-task-script.component";
@Component({
selector: 'app-create-task',
@ -291,17 +292,12 @@ export class CreateTaskComponent implements OnInit {
next: response => {
this.toastr.success('Tarea creada con éxito');
this.dialogRef.close(response);
if (formData.scheduleAfterCreate) {
const dialogRef = this.dialog.open(CreateTaskScheduleComponent, {
width: '800px',
data: { task: response }
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.toastr.success('Tarea programada correctamente');
}
});
if (this.data?.source === 'assistant') {
if (formData.scheduleAfterCreate) {
this.openScheduleDialog(response);
}
} else {
this.openPostCreationFlow(response, formData.scheduleAfterCreate);
}
},
error: () => {
@ -311,6 +307,40 @@ export class CreateTaskComponent implements OnInit {
}
}
private openScheduleDialog(task: any): void {
this.dialog.open(CreateTaskScheduleComponent, {
width: '800px',
data: { task: task }
}).afterClosed().subscribe(result => {
if (result) {
this.toastr.success('Tarea programada correctamente');
}
});
}
private openPostCreationFlow(task: any, scheduleAfterCreate: boolean): void {
const actionsDialog = this.dialog.open(ShowTaskScriptComponent, {
width: '85vw',
height: '85vh',
maxWidth: '85vw',
maxHeight: '85vh',
data: { commandTask: task }
});
actionsDialog.afterClosed().subscribe(() => {
if (scheduleAfterCreate) {
this.dialog.open(CreateTaskScheduleComponent, {
width: '800px',
data: { task: task }
}).afterClosed().subscribe(result => {
if (result) {
this.toastr.success('Tarea programada correctamente');
}
});
}
});
}
close(): void {
this.dialogRef.close(false);
}

58
ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html
View File

@ -8,48 +8,40 @@
<mat-card-content>
<p><strong>{{ 'taskId' | translate }}:</strong> {{ task.uuid }}</p>
<p><strong>{{ 'status' | translate }}:</strong> {{ task.status }}</p>
<p><strong>{{ 'creationDate' | translate }}:</strong> {{ task.createdAt | date: 'short' }}</p>
<p><strong>{{ 'notes' | translate }}:</strong> {{ task.notes }}</p>
<h3>{{ 'includedCommandGroups' | translate }}</h3>
<table mat-table [dataSource]="task.commandGroups" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'commandGroupColumn' | translate }} </th>
<td mat-cell *matCellDef="let group"> {{ group.name }} </td>
</ng-container>
<ng-container matColumnDef="uuid">
<th mat-header-cell *matHeaderCellDef> UUID </th>
<td mat-cell *matCellDef="let group"> {{ group.uuid }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['name', 'uuid']"></tr>
<tr mat-row *matRowDef="let row; columns: ['name', 'uuid'];"></tr>
</table>
<h3>{{ 'commandsToExecute' | translate }}</h3>
<div *ngFor="let group of task.commandGroups">
<p><strong>{{ 'group' | translate }}: </strong>{{ group.name }}</p>
<table mat-table [dataSource]="group.commands" class="mat-elevation-z8">
<ng-container matColumnDef="commandName">
<th mat-header-cell *matHeaderCellDef> {{ 'commandColumn' | translate }} </th>
<td mat-cell *matCellDef="let command"> {{ command.name }} </td>
</ng-container>
<table mat-table [dataSource]="task.commandTaskScripts || []" class="mat-elevation-z8" *ngIf="task.commandTaskScripts?.length > 0">
<ng-container matColumnDef="order">
<th mat-header-cell *matHeaderCellDef>Orden</th>
<td mat-cell *matCellDef="let script">{{ script.order }}</td>
</ng-container>
<ng-container matColumnDef="commandUuid">
<th mat-header-cell *matHeaderCellDef> UUID </th>
<td mat-cell *matCellDef="let command"> {{ command.uuid }} </td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>Tipo</th>
<td mat-cell *matCellDef="let script">{{ script.type }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['commandName', 'commandUuid']"></tr>
<tr mat-row *matRowDef="let row; columns: ['commandName', 'commandUuid'];"></tr>
</table>
</div>
<ng-container matColumnDef="content">
<th mat-header-cell *matHeaderCellDef>Contenido</th>
<td mat-cell *matCellDef="let script">
<span *ngIf="script.content">{{ script.content }}</span>
<span *ngIf="!script.content && script.parameters">
(parámetros configurados)
</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['order', 'type', 'content']"></tr>
<tr mat-row *matRowDef="let row; columns: ['order', 'type', 'content'];"></tr>
</table>
<p *ngIf="!task.commandTaskScripts?.length">No hay acciones configuradas.</p>
</mat-card-content>
</mat-card>
<div class="task-actions">
<button class="ordinary-button" (click)="closeDialog()">Cancel</button>
<button class="ordinary-button" (click)="closeDialog()">{{ 'buttonCancel' | translate }}</button>
</div>
</div>

23
ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.css
View File

@ -89,7 +89,6 @@ table {
.recurrence-type-container {
display: flex;
justify-content: center;
}
.recurrence-chip {
@ -158,14 +157,12 @@ table {
/* Estilos para el campo executionTime */
.time-display {
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
background-color: #667eea;
color: white;
border-radius: 16px;
min-width: 100px;
}
.time-icon {
@ -182,14 +179,12 @@ table {
/* Estilos para el campo nextExecution */
.next-execution {
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
background-color: #4facfe;
color: white;
border-radius: 16px;
min-width: 120px;
}
.execution-icon {
@ -201,7 +196,6 @@ table {
/* Estilos para el campo daysOfWeek */
.days-display {
text-align: center;
}
.days-header {
@ -229,7 +223,6 @@ table {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
.day-chip {
@ -245,7 +238,6 @@ table {
/* Estilos para el campo months */
.months-display {
text-align: center;
}
.months-header {
@ -273,7 +265,6 @@ table {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
.month-chip {
@ -290,18 +281,15 @@ table {
/* Estilos para el campo enabled */
.status-container {
display: flex;
justify-content: center;
}
.status-indicator {
display: flex;
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
font-size: 14px;
min-width: 100px;
justify-content: center;
}
.status-active {
@ -323,8 +311,7 @@ table {
/* Estilos para datos no definidos */
.no-data {
text-align: center;
padding: 8px;
padding: 8px 0;
}
.no-data-text {
@ -375,7 +362,7 @@ table {
.paginator-container {
margin-top: 20px;
display: flex;
justify-content: center;
justify-content: flex-end;
}
/* Estilos para los botones de acción en la tabla */

73
ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.html
View File

@ -1,44 +1,30 @@
<app-loading [isLoading]="loading"></app-loading>
<h2 mat-dialog-title>Gestionar programaciones de tareas en {{ data.commandTask?.name }}</h2>
<h2 mat-dialog-title>{{ 'manageTaskSchedules' | translate }} {{ data.commandTask?.name }}</h2>
<mat-dialog-content>
<div class="header-actions">
<button (click)="createNewSchedule()" class="action-button">
<mat-icon>add</mat-icon>
Nueva Programación
{{ 'newSchedule' | translate }}
</button>
</div>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
text="Busca programaciones por nombre para localizar una programación específica rápidamente.">
<mat-label i18n="@@searchLabel">Buscar programación</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" i18n-placeholder="@@searchPlaceholder"
(keyup.enter)="loadData()" i18n-placeholder="@@searchPlaceholder">
<mat-form-field appearance="fill" class="search-string">
<mat-label>{{ 'searchScheduleLabel' | translate }}</mat-label>
<input matInput [placeholder]="'searchPlaceholder' | translate" [(ngModel)]="filters['name']"
(keyup.enter)="loadData()">
<mat-icon matSuffix>search</mat-icon>
<button *ngIf="filters['name']" mat-icon-button matSuffix aria-label="Clear search"
(click)="filters['name'] = ''; loadData()">
<button *ngIf="filters['name']" mat-icon-button matSuffix (click)="filters['name'] = ''; loadData()">
<mat-icon>close</mat-icon>
</button>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchTypeStep" text="Busca programaciones por tipo de recurrencia.">
<mat-label i18n="@@searchLabel">Buscar por tipo</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['recurrence']" i18n-placeholder="@@searchPlaceholder"
(keyup.enter)="loadData()" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<button *ngIf="filters['recurrence']" mat-icon-button matSuffix aria-label="Clear type search"
(click)="filters['recurrence'] = ''; loadData()">
<mat-icon>close</mat-icon>
</button>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
<mat-hint>{{ 'searchHint' | translate }}</mat-hint>
</mat-form-field>
</div>
<app-loading [isLoading]="loading"></app-loading>
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
text="Visualiza y administra las programaciones de tareas según los filtros aplicados.">
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let schedule">
@ -54,7 +40,7 @@
</div>
</div>
</ng-container>
<ng-container *ngIf="column.columnDef === 'executionTime'">
<div class="time-display">
<mat-icon class="time-icon">schedule</mat-icon>
@ -65,45 +51,45 @@
<ng-container *ngIf="column.columnDef === 'nextExecution'">
<div class="next-execution">
<mat-icon class="execution-icon">schedule</mat-icon>
<span>{{ column.cell(schedule) || 'No calculada' }}</span>
<span>{{ column.cell(schedule) || ('notCalculated' | translate) }}</span>
</div>
</ng-container>
<ng-container *ngIf="column.columnDef === 'daysOfWeek'">
<div class="days-display" *ngIf="column.cell(schedule)">
<div class="days-chips">
<span *ngFor="let day of column.cell(schedule).days"
<span *ngFor="let day of column.cell(schedule).days"
class="day-chip">{{ day }}</span>
</div>
</div>
<div class="no-data" *ngIf="!column.cell(schedule)">
<span class="no-data-text">No definido</span>
<span class="no-data-text">{{ 'notDefined' | translate }}</span>
</div>
</ng-container>
<ng-container *ngIf="column.columnDef === 'months'">
<div class="months-display" *ngIf="column.cell(schedule)">
<div class="months-chips">
<span *ngFor="let month of column.cell(schedule).months"
<span *ngFor="let month of column.cell(schedule).months"
class="month-chip">{{ month }}</span>
</div>
</div>
<div class="no-data" *ngIf="!column.cell(schedule)">
<span class="no-data-text">No definido</span>
<span class="no-data-text">{{ 'notDefined' | translate }}</span>
</div>
</ng-container>
<ng-container *ngIf="column.columnDef !== 'recurrenceType' && column.columnDef !== 'executionTime' &&
column.columnDef !== 'daysOfWeek' && column.columnDef !== 'months' &&
<ng-container *ngIf="column.columnDef !== 'recurrenceType' && column.columnDef !== 'executionTime' &&
column.columnDef !== 'daysOfWeek' && column.columnDef !== 'months' &&
column.columnDef !== 'nextExecution' && column.columnDef !== 'enabled'">
{{ column.cell(schedule) }}
</ng-container>
<ng-container *ngIf="column.columnDef === 'enabled'">
<div class="status-container">
<div class="status-indicator" [ngClass]="schedule.enabled ? 'status-active' : 'status-inactive'">
<mat-icon class="status-icon">{{ schedule.enabled ? 'check_circle' : 'cancel' }}</mat-icon>
<span class="status-text">{{ schedule.enabled ? 'Activo' : 'Inactivo' }}</span>
<span class="status-text">{{ (schedule.enabled ? 'active' : 'inactive') | translate }}</span>
</div>
</div>
</ng-container>
@ -111,13 +97,13 @@
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'columnActions' | translate }}</th>
<td mat-cell *matCellDef="let schedule" style="text-align: center;">
<button mat-icon-button color="primary" (click)="editSchedule(schedule)" matTooltip="Editar programación">
<mat-icon i18n="@@editElementTooltip">edit</mat-icon>
<button mat-icon-button color="primary" (click)="editSchedule(schedule)" [matTooltip]="'editScheduleTooltip' | translate">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="deleteSchedule(schedule)" matTooltip="Eliminar programación">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
<button mat-icon-button color="warn" (click)="deleteSchedule(schedule)" [matTooltip]="'deleteScheduleTooltip' | translate">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
@ -126,8 +112,7 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="paginator-container" joyrideStep="paginationStep"
text="Navega entre las páginas de programaciones usando el paginador.">
<div class="paginator-container">
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
@ -135,5 +120,5 @@
</mat-dialog-content>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
<button class="ordinary-button" (click)="onNoClick()">{{ 'close' | translate }}</button>
</mat-dialog-actions>

8
ogWebconsole/src/app/components/commands/commands-task/show-task-schedule/show-task-schedule.component.ts
View File

@ -36,6 +36,8 @@ export class ShowTaskScheduleComponent implements OnInit{
];
displayedColumns: string[] = ['id', 'recurrenceType', 'executionTime', 'nextExecution', 'daysOfWeek', 'months', 'enabled', 'actions'];
allColumns: string[] = ['id', 'recurrenceType', 'executionTime', 'nextExecution', 'daysOfWeek', 'months', 'enabled', 'actions'];
compactColumns: string[] = ['id', 'recurrenceType', 'executionTime', 'nextExecution', 'enabled', 'actions'];
constructor(
private toastService: ToastrService,
@ -60,6 +62,7 @@ export class ShowTaskScheduleComponent implements OnInit{
(data) => {
this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.updateDisplayedColumns();
this.loading = false;
},
(error) => {
@ -295,6 +298,11 @@ export class ShowTaskScheduleComponent implements OnInit{
return mapping[monthName?.toLowerCase?.()] ?? -1;
}
updateDisplayedColumns(): void {
const hasRecurrent = this.dataSource.data.some((s: any) => s.recurrenceType !== 'none');
this.displayedColumns = hasRecurrent ? this.allColumns : this.compactColumns;
}
onPageChange(event: any): void {
this.page = event.pageIndex;
this.itemsPerPage = event.pageSize;

131
ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.css
View File

@ -283,26 +283,129 @@ mat-spinner {
border: 1px solid #e0e0e0;
}
/* Estilos para el indicador de orden */
.order-indicator {
/* Badge de paso */
.step-badge {
display: inline-flex;
align-items: center;
justify-content: center;
}
.step-number {
background-color: #3f51b5;
color: white;
border-radius: 50%;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 15px;
box-shadow: 0 2px 4px rgba(63, 81, 181, 0.3);
}
/* Display de tipo de acción */
.type-display {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: #f8f9fa;
font-size: 13px;
font-weight: 500;
color: #333;
}
.type-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #666;
}
/* Contenido del script en celda */
.script-content-cell {
background-color: #f5f5f5;
padding: 8px 12px;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', monospace;
white-space: pre-wrap;
font-size: 12px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
}
.no-content-hint {
color: #999;
font-size: 13px;
font-style: italic;
}
/* Hint secuencial */
.sequential-hint {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
color: #1565c0;
background: #e3f2fd;
border-radius: 4px;
margin: 0 24px;
font-size: 13px;
}
.sequential-hint mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
/* Timeline resumen */
.timeline-summary {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 24px;
background: #fafafa;
border: 1px solid #e8e8e8;
border-radius: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.timeline-step {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: white;
border: 1px solid #d0d0d0;
border-radius: 20px;
border: 1px solid #e9ecef;
font-size: 13px;
}
.order-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: #6c757d;
.timeline-number {
background: #3f51b5;
color: white;
border-radius: 50%;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 12px;
}
.order-number {
font-weight: 600;
color: #495057;
font-size: 14px;
.timeline-label {
color: #444;
font-weight: 500;
}
.timeline-arrow {
color: #9e9e9e;
font-size: 20px;
width: 20px;
height: 20px;
}

104
ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.html
View File

@ -1,62 +1,81 @@
<app-loading [isLoading]="loading"></app-loading>
<h2 mat-dialog-title>Gestionar scripts de tareas en {{ data.commandTask?.name }}</h2>
<h2 mat-dialog-title>{{ 'taskActionsTitle' | translate }}: {{ data.commandTask?.name }}</h2>
<div *ngIf="dataSource.data.length > 1" class="sequential-hint">
<mat-icon>info</mat-icon>
<span>{{ 'taskActionsSequentialHint' | translate }}</span>
</div>
<mat-dialog-content>
<div class="header-actions">
<button (click)="createNewScript()" class="action-button">
<mat-icon>add</mat-icon>
Nueva Acción
{{ 'newAction' | translate }}
</button>
</div>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
text="Busca subredes por nombre para localizar una subred específica rápidamente.">
<mat-label i18n="@@searchLabel">Buscar contenido de script</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" i18n-placeholder="@@searchPlaceholder"
(keyup.enter)="loadData()" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<button *ngIf="filters['name']" mat-icon-button matSuffix aria-label="Clear tree search"
(click)="filters['name'] = ''; loadData()">
<mat-icon>close</mat-icon>
</button>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
<div *ngIf="dataSource.data.length > 0 && !loading" class="timeline-summary">
<ng-container *ngFor="let item of dataSource.data; let last = last">
<div class="timeline-step">
<span class="timeline-number">{{ item.order }}</span>
<span class="timeline-label">{{ getTypeDisplay(item.type).label }}</span>
</div>
<mat-icon *ngIf="!last" class="timeline-arrow">arrow_forward</mat-icon>
</ng-container>
</div>
<app-loading [isLoading]="loading"></app-loading>
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
text="Visualiza y administra las subredes listadas según los filtros aplicados.">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let schedule">
<ng-container *ngIf="column.columnDef === 'content'; else checkOtherColumn">
<div style="background-color: #f5f5f5; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; white-space: pre-wrap; font-size: 13px;">
{{ column.cell(schedule) }}
</div>
</ng-container>
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-template #checkOtherColumn>
<ng-container *ngIf="column.columnDef === 'parameters'; else normalCell">
<button class="parameters-button" (click)="openParametersModal(schedule.parameters)">
<mat-icon>settings</mat-icon>
<span>Ver parámetros</span>
</button>
</ng-container>
</ng-template>
<ng-container matColumnDef="order">
<th mat-header-cell *matHeaderCellDef>{{ 'executionOrder' | translate }}</th>
<td mat-cell *matCellDef="let item">
<div class="step-badge">
<span class="step-number">{{ item.order }}</span>
</div>
</td>
</ng-container>
<ng-template #normalCell>
{{ column.cell(schedule) }}
</ng-template>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>{{ 'actionType' | translate }}</th>
<td mat-cell *matCellDef="let item">
<div class="type-display">
<mat-icon class="type-icon">{{ getTypeDisplay(item.type).icon }}</mat-icon>
<span>{{ getTypeDisplay(item.type).label }}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="content">
<th mat-header-cell *matHeaderCellDef>{{ 'scriptLabel' | translate }}</th>
<td mat-cell *matCellDef="let item">
<div *ngIf="item.content" class="script-content-cell">
<code>{{ item.content }}</code>
</div>
<span *ngIf="!item.content" class="no-content-hint">
({{ 'viewParameters' | translate }})
</span>
</td>
</ng-container>
<ng-container matColumnDef="parameters">
<th mat-header-cell *matHeaderCellDef>{{ 'viewParameters' | translate }}</th>
<td mat-cell *matCellDef="let item">
<button class="parameters-button" (click)="openParametersModal(item.parameters)"
*ngIf="item.parameters && (item.parameters | json) !== '{}'">
<mat-icon>settings</mat-icon>
<span>{{ 'viewParameters' | translate }}</span>
</button>
<span *ngIf="!item.parameters || (item.parameters | json) === '{}'" class="no-content-hint">—</span>
</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 schedule" style="text-align: center;">
<button mat-icon-button color="warn" (click)="deleteTaskScript(schedule)">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
<th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'columnActions' | translate }}</th>
<td mat-cell *matCellDef="let item" style="text-align: center;">
<button mat-icon-button color="warn" (click)="deleteTaskScript(item)">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
@ -65,8 +84,7 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="paginator-container" joyrideStep="paginationStep"
text="Navega entre las páginas de subredes usando el paginador.">
<div class="paginator-container">
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
@ -74,5 +92,5 @@
</mat-dialog-content>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">Cerrar</button>
<button class="ordinary-button" (click)="onNoClick()">{{ 'close' | translate }}</button>
</mat-dialog-actions>

35
ogWebconsole/src/app/components/commands/commands-task/show-task-script/show-task-script.component.ts
View File

@ -25,14 +25,31 @@ export class ShowTaskScriptComponent implements OnInit{
filters: { [key: string]: string } = {};
columns = [
{ columnDef: 'id', header: 'ID', cell: (client: any) => client.id },
{ columnDef: 'order', header: 'Orden', cell: (client: any) => client.order },
{ columnDef: 'content', header: 'Script', cell: (client: any) => client.content },
{ columnDef: 'type', header: 'Tipo', cell: (client: any) => client.type },
{ columnDef: 'parameters', header: 'Parámetros', cell: (client: any) => client.parameters },
{ columnDef: 'id', header: 'ID', cell: (item: any) => item.id },
{ columnDef: 'order', header: 'Orden', cell: (item: any) => item.order },
{ columnDef: 'type', header: 'Tipo', cell: (item: any) => item.type },
{ columnDef: 'parameters', header: 'Parámetros', cell: (item: any) => item.parameters },
{ columnDef: 'content', header: 'Contenido', cell: (item: any) => item.content },
];
displayedColumns: string[] = ['id', 'order', 'type', 'parameters', 'content', 'actions'];
displayedColumns: string[] = ['order', 'type', 'content', 'parameters', 'actions'];
typeLabels: { [key: string]: { label: string, icon: string } } = {
'partition-and-format': { label: 'Particionar y formatear', icon: 'storage' },
'partition-assistant': { label: 'Asistente de particionado', icon: 'storage' },
'deploy-image': { label: 'Desplegar imagen', icon: 'cloud_download' },
'create-image': { label: 'Crear imagen', icon: 'cloud_upload' },
'run-script': { label: 'Ejecutar script', icon: 'code' },
'reboot': { label: 'Reiniciar', icon: 'restart_alt' },
'shutdown': { label: 'Apagar', icon: 'power_off' },
'poweron': { label: 'Encender', icon: 'power' },
'power-on': { label: 'Encender', icon: 'power' },
'login': { label: 'Iniciar sesión', icon: 'login' },
};
getTypeDisplay(type: string): { label: string, icon: string } {
return this.typeLabels[type] || { label: type, icon: 'play_arrow' };
}
constructor(
private toastService: ToastrService,
@ -53,9 +70,11 @@ export class ShowTaskScriptComponent implements OnInit{
loadData() {
this.loading = true;
this.http.get<any>(`${this.baseUrl}/command-task-scripts?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}&commandTask.id=${this.data.commandTask?.id}`, { params: this.filters }).subscribe(
this.http.get<any>(`${this.baseUrl}/command-task-scripts?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}&commandTask.id=${this.data.commandTask?.id}&order[order]=ASC`, { params: this.filters }).subscribe(
(data) => {
this.dataSource.data = data['hydra:member'];
const items = data['hydra:member'];
items.sort((a: any, b: any) => (a.order ?? 0) - (b.order ?? 0));
this.dataSource.data = items;
this.length = data['hydra:totalItems'];
this.loading = false;
},

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

@ -10,6 +10,26 @@
align-items: center;
}
/* Layout compacto: tipo + configuración en una fila */
.compact-config-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.compact-section {
padding: 20px !important;
margin-bottom: 0 !important;
}
.type-section {
flex: 0 0 280px;
}
.config-section {
flex: 1;
}
/* Secciones del formulario */
.form-section {
background: white !important;
@ -249,6 +269,14 @@ mat-form-field {
/* Responsive design */
@media (max-width: 768px) {
.compact-config-row {
flex-direction: column;
}
.type-section {
flex: none;
}
.select-container {
padding: 16px;
}
@ -879,8 +907,8 @@ mat-form-field {
.git-info-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
grid-template-columns: 1fr;
gap: 12px;
}
.git-info-item {

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

@ -33,14 +33,13 @@
</div>
<div class="select-container">
<div class="form-section">
<div class="form-section-title">
<mat-icon>settings</mat-icon>
Configuración de tipo de imagen
</div>
<div class="selector">
<mat-form-field appearance="fill" class="half-width">
<div class="compact-config-row">
<div class="form-section compact-section type-section">
<div class="form-section-title">
<mat-icon>settings</mat-icon>
Tipo de imagen
</div>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Tipo de imagen</mat-label>
<mat-select [(ngModel)]="imageType" class="full-width" (selectionChange)="onImageTypeSelected($event.value)">
<mat-option [value]="'monolithic'">Monolítica</mat-option>
@ -48,89 +47,128 @@
</mat-select>
</mat-form-field>
</div>
</div>
<div class="form-section" *ngIf="imageType === 'git'">
<div class="form-section-title">
<mat-icon>code</mat-icon>
Configuración Git
<div class="form-section compact-section config-section" *ngIf="imageType === 'monolithic'">
<div class="form-section-title">
<mat-icon>image</mat-icon>
Configuración
</div>
<div class="action-chips-container">
<mat-chip-listbox [(ngModel)]="monolithicAction" required class="action-chip-listbox">
<mat-chip-option value="create" class="action-chip create-chip firmware-chip" (click)="onMonolithicActionSelected({value: 'create'})">
<span>Crear imagen</span>
</mat-chip-option>
<mat-chip-option value="update" class="action-chip update-chip firmware-chip" (click)="onMonolithicActionSelected({value: 'update'})">
<span>Actualizar imagen</span>
</mat-chip-option>
</mat-chip-listbox>
</div>
<div *ngIf="monolithicAction === 'create'">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nombre canónico</mat-label>
<input matInput [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
<mat-hint>Nombre para la nueva imagen</mat-hint>
</mat-form-field>
</div>
<div *ngIf="monolithicAction === 'update'">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccione imagen</mat-label>
<mat-select [(ngModel)]="selectedImage" name="selectedImage" (selectionChange)="resetCanonicalName()" required>
<mat-option [value]="null">Seleccionar imagen para actualizar</mat-option>
<mat-option *ngFor="let image of images" [value]="image">{{ image?.name }}</mat-option>
</mat-select>
<button *ngIf="selectedImage" mat-icon-button matSuffix aria-label="Clear client search"
(click)="selectedImage = null; resetCanonicalName()">
<mat-icon>close</mat-icon>
</button>
<mat-hint>Selecciona la imagen existente que quieres actualizar.</mat-hint>
</mat-form-field>
</div>
</div>
<div class="git-info-container" *ngIf="selectedPartition && imageType === 'git' && (hasValidGitData || loadingGitData)">
<div class="git-info-card">
<div class="git-info-header">
<mat-icon class="git-info-icon">info</mat-icon>
<span class="git-info-title">La imagen en caché a actualizar es:</span>
<mat-spinner *ngIf="loadingGitData" diameter="20" class="git-loading-spinner"></mat-spinner>
</div>
<div class="" *ngIf="!loadingGitData && hasValidGitData">
<div class="git-info-grid">
<div class="git-info-item">
<mat-form-field appearance="outline" class="git-form-field">
<mat-label>
<mat-icon class="git-item-icon">folder</mat-icon>
Repositorio
</mat-label>
<input matInput [value]="gitData.repo" readonly>
</mat-form-field>
</div>
<div class="git-info-item">
<mat-form-field appearance="outline" class="git-form-field">
<mat-label>
<mat-icon class="git-item-icon">account_tree</mat-icon>
Rama origen
</mat-label>
<input matInput [value]="gitData.branch" readonly>
</mat-form-field>
</div>
<div class="git-info-item">
<mat-form-field appearance="outline" class="git-form-field">
<mat-label>
<mat-icon class="git-item-icon">call_split</mat-icon>
Rama destino
</mat-label>
<input matInput
[(ngModel)]="destinationBranch"
[readonly]="!isDestinationBranchEditable"
placeholder="Nombre de la rama destino"
[matTooltip]="isDestinationBranchEditable ? 'Guardar cambios' : 'Editar nombre de la rama destino'">
<button mat-icon-button
matSuffix
[matTooltip]="isDestinationBranchEditable ? 'Guardar' : 'Editar rama destino'"
(click)="toggleDestinationBranchEdit()">
<mat-icon>{{ isDestinationBranchEditable ? 'save' : 'edit' }}</mat-icon>
</button>
</mat-form-field>
</div>
<div class="form-section compact-section config-section" *ngIf="imageType === 'git'">
<div class="form-section-title">
<mat-icon>code</mat-icon>
Configuración Git
</div>
<div class="git-info-container" *ngIf="selectedPartition && imageType === 'git' && (hasValidGitData || loadingGitData)">
<div class="git-info-card">
<div class="git-info-header">
<mat-icon class="git-info-icon">info</mat-icon>
<span class="git-info-title">La imagen en caché a actualizar es:</span>
<mat-spinner *ngIf="loadingGitData" diameter="20" class="git-loading-spinner"></mat-spinner>
</div>
<div class="repository-warning" *ngIf="repositoryNotFound">
<mat-icon class="warning-icon">warning</mat-icon>
<div class="warning-content">
<div class="warning-title">Repositorio no encontrado</div>
<div class="warning-message">
El repositorio "{{ gitData.repo }}" no existe en el listado de repositorios disponibles.
Es posible que necesites crearlo primero.
<div *ngIf="!loadingGitData && hasValidGitData">
<div class="git-info-grid">
<div class="git-info-item">
<mat-form-field appearance="outline" class="git-form-field">
<mat-label>
<mat-icon class="git-item-icon">folder</mat-icon>
Repositorio
</mat-label>
<input matInput [value]="gitData.repo" readonly>
</mat-form-field>
</div>
<div class="git-info-item">
<mat-form-field appearance="outline" class="git-form-field">
<mat-label>
<mat-icon class="git-item-icon">account_tree</mat-icon>
Rama origen
</mat-label>
<input matInput [value]="gitData.branch" readonly>
</mat-form-field>
</div>
<div class="git-info-item">
<mat-form-field appearance="outline" class="git-form-field">
<mat-label>
<mat-icon class="git-item-icon">call_split</mat-icon>
Rama destino
</mat-label>
<input matInput
[(ngModel)]="destinationBranch"
[readonly]="!isDestinationBranchEditable"
placeholder="Nombre de la rama destino"
[matTooltip]="isDestinationBranchEditable ? 'Guardar cambios' : 'Editar nombre de la rama destino'">
<button mat-icon-button
matSuffix
[matTooltip]="isDestinationBranchEditable ? 'Guardar' : 'Editar rama destino'"
(click)="toggleDestinationBranchEdit()">
<mat-icon>{{ isDestinationBranchEditable ? 'save' : 'edit' }}</mat-icon>
</button>
</mat-form-field>
</div>
</div>
<div class="repository-warning" *ngIf="repositoryNotFound">
<mat-icon class="warning-icon">warning</mat-icon>
<div class="warning-content">
<div class="warning-title">Repositorio no encontrado</div>
<div class="warning-message">
El repositorio "{{ gitData.repo }}" no existe en el listado de repositorios disponibles.
Es posible que necesites crearlo primero.
</div>
</div>
</div>
</div>
</div>
<div class="git-info-loading" *ngIf="loadingGitData">
<span>Cargando información de Git...</span>
</div>
<div class="git-info-empty" *ngIf="!loadingGitData && !hasValidGitData">
<span>No se encontró información de Git para esta partición</span>
<div class="git-info-loading" *ngIf="loadingGitData">
<span>Cargando información de Git...</span>
</div>
<div class="git-info-empty" *ngIf="!loadingGitData && !hasValidGitData">
<span>No se encontró información de Git para esta partición</span>
</div>
</div>
</div>
</div>
<!-- Checkbox para forzar push cuando estamos en modo modificar imagen git -->
<div class="force-push-container" *ngIf="imageType === 'git' && hasValidGitData">
<mat-checkbox [(ngModel)]="forcePush" class="force-push-checkbox">
Opción 'Forzar push'
</mat-checkbox>
</div>
<div class="force-push-container" *ngIf="imageType === 'git' && hasValidGitData">
<mat-checkbox [(ngModel)]="forcePush" class="force-push-checkbox">
Opción 'Forzar push'
</mat-checkbox>
</div>
<div class="repository-header" *ngIf="!hasValidGitData">
<button *ngIf="imageType === 'git'"
class="create-repository-button"
@ -140,80 +178,24 @@
<span>Crear nuevo repositorio / SO</span>
</button>
</div>
<div class="selector" *ngIf="!hasValidGitData">
<mat-form-field appearance="fill" class="half-width">
<mat-label>Seleccionar repositorio Git</mat-label>
<mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositorySelected($event.value)" required>
<mat-option [value]="null">Seleccionar repositorio git / SO</mat-option>
<mat-option *ngFor="let repo of gitRepositories" [value]="repo">{{ repo.name }}</mat-option>
</mat-select>
<mat-spinner *ngIf="loadingGitRepositories" matSuffix diameter="20"></mat-spinner>
<mat-hint>
<mat-icon>info</mat-icon>
Selecciona el repositorio git para obtener las imágenes disponibles.
<span *ngIf="gitRepositories.length === 0" class="no-repositories-hint">
No hay repositorios disponibles. Crea uno nuevo para continuar.
</span>
</mat-hint>
</mat-form-field>
<button class="create-branch-button"
*ngIf="selectedGitRepository"
(click)="openCreateBranchModal()"
[disabled]="loadingBranches"
matTooltip="Crear nueva rama"
style="display: none;">
<mat-icon>add</mat-icon>
<span>Crear rama</span>
</button>
</div>
</div>
<div class="form-section" *ngIf="imageType === 'monolithic'">
<div class="form-section-title">
<mat-icon>image</mat-icon>
Configuración de imagen monolítica
</div>
<div class="action-chips-container">
<mat-chip-listbox [(ngModel)]="monolithicAction" required class="action-chip-listbox">
<mat-chip-option value="create" class="action-chip create-chip firmware-chip" (click)="onMonolithicActionSelected({value: 'create'})">
<span>Crear imagen</span>
</mat-chip-option>
<mat-chip-option value="update" class="action-chip update-chip firmware-chip" (click)="onMonolithicActionSelected({value: 'update'})">
<span>Actualizar imagen</span>
</mat-chip-option>
</mat-chip-listbox>
</div>
<div class="action-hint">
<mat-icon>info</mat-icon>
<span *ngIf="monolithicAction === 'create'">Crea una nueva imagen con el nombre especificado</span>
<span *ngIf="monolithicAction === 'update'">Actualiza una imagen existente seleccionada</span>
</div>
<div class="selector" *ngIf="monolithicAction === 'create'">
<mat-form-field appearance="fill" class="half-width">
<mat-label>Nombre canónico</mat-label>
<input matInput [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
<mat-hint>Introduce el nombre para la nueva imagen que se creará.</mat-hint>
</mat-form-field>
</div>
<div class="selector" *ngIf="monolithicAction === 'update'">
<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 [value]="null">Seleccionar imagen para actualizar</mat-option>
<mat-option *ngFor="let image of images" [value]="image">{{ image?.name }}</mat-option>
</mat-select>
<button *ngIf="selectedImage" mat-icon-button matSuffix aria-label="Clear client search"
(click)="selectedImage = null; resetCanonicalName()">
<mat-icon>close</mat-icon>
</button>
<mat-hint>Selecciona la imagen existente que quieres actualizar.</mat-hint>
</mat-form-field>
<div class="selector" *ngIf="!hasValidGitData">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccionar repositorio Git</mat-label>
<mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositorySelected($event.value)" required>
<mat-option [value]="null">Seleccionar repositorio git / SO</mat-option>
<mat-option *ngFor="let repo of gitRepositories" [value]="repo">{{ repo.name }}</mat-option>
</mat-select>
<mat-spinner *ngIf="loadingGitRepositories" matSuffix diameter="20"></mat-spinner>
<mat-hint>
<mat-icon>info</mat-icon>
Selecciona el repositorio git para obtener las imágenes disponibles.
<span *ngIf="gitRepositories.length === 0" class="no-repositories-hint">
No hay repositorios disponibles. Crea uno nuevo para continuar.
</span>
</mat-hint>
</mat-form-field>
</div>
</div>
</div>

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

@ -2,10 +2,10 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 32px;
padding: 16px 24px;
background: white;
border-radius: 12px;
margin-bottom: 20px;
margin-bottom: 16px;
}
.header-container-title {
@ -55,37 +55,81 @@
cursor: not-allowed;
}
.secondary-button {
background: #e3f2fd !important;
color: #1976d2 !important;
}
.secondary-button:hover:not(:disabled) {
background: #bbdefb !important;
}
/* Contenedor principal */
.select-container {
background: white !important;
margin-top: 20px;
margin-top: 12px;
align-items: center;
padding: 20px;
padding: 0 20px 12px;
box-sizing: border-box;
}
.config-container {
background: transparent !important;
}
/* Secciones del formulario */
.form-section {
background: white !important;
border-radius: 16px;
padding: 32px;
margin-bottom: 24px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #bbdefb;
}
.compact-section {
padding: 20px !important;
margin-bottom: 12px !important;
}
.form-section-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
font-size: 20px;
gap: 10px;
margin-bottom: 16px;
font-size: 17px;
font-weight: 600;
color: #2c3e50;
padding-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #f8f9fa;
}
/* Layout horizontal: imagen + partición */
.deploy-config-row {
display: flex;
gap: 16px;
margin-bottom: 4px;
}
.image-config-section {
flex: 0 0 340px;
}
.image-config-section .filters-row {
flex-direction: column;
gap: 0;
margin-bottom: 0;
}
.image-config-section .filters-row mat-form-field {
width: 100% !important;
}
.partition-select-section {
flex: 1;
min-width: 0;
}
.form-section-title mat-icon {
color: #667eea;
font-size: 24px;
@ -93,14 +137,6 @@
height: 24px;
}
/* Selectores */
.selector {
display: flex;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.half-width {
flex: 1;
min-width: 250px;
@ -276,9 +312,9 @@ mat-form-field {
/* Tabla de particiones */
.partition-table-container {
background: white !important;
border-radius: 12px;
padding: 24px;
margin-top: 20px;
border-radius: 8px;
padding: 0;
margin-top: 0;
}
table {
@ -296,24 +332,48 @@ table {
background: white !important;
color: #2c3e50;
font-weight: 600;
padding: 16px;
padding: 10px 12px;
}
::ng-deep .mat-cell {
padding: 16px;
padding: 8px 12px;
color: #495057;
}
/* Opciones avanzadas */
.input-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
/* Resumen de configuración avanzada */
.method-config-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: #f0f4ff;
border: 1px solid #d0d9ff;
border-radius: 8px;
margin-top: 8px;
}
.input-field {
width: 100%;
.summary-content {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.summary-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #667eea;
flex-shrink: 0;
}
.summary-text {
font-size: 12px;
font-weight: 500;
color: #495057;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mensajes de error */
@ -568,25 +628,13 @@ table {
gap: 40px;
}
.monolithic-row {
display: flex;
gap: 24px;
align-items: flex-end;
margin-bottom: 20px;
}
@media (max-width: 900px) {
.deploy-config-row {
flex-direction: column;
}
.monolithic-row .half-width {
flex: 1 1 200px;
min-width: 200px;
}
.monolithic-row .full-width {
flex: 2;
}
@media (max-width: 768px) {
.monolithic-row .full-width {
flex: 2;
.image-config-section {
flex: none;
}
}

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

@ -86,58 +86,183 @@
<mat-divider style="margin-top: 20px;"></mat-divider>
<div class="select-container">
<!-- Sección: Configuración de imagen -->
<div class="form-section">
<div class="select-container config-container">
<div class="deploy-config-row">
<!-- Sección: Configuración de imagen -->
<div class="form-section compact-section image-config-section">
<div class="form-section-title">
<mat-icon>image</mat-icon>
Configuración de imagen
</div>
<div class="selector">
<mat-form-field appearance="fill" class="half-width">
<mat-label>Tipo de imagen</mat-label>
<mat-select [(ngModel)]="imageType" (selectionChange)="onImageTypeSelected($event.value)">
<mat-option [value]="'monolithic'">Monolítica</mat-option>
<mat-option [value]="'git'">Git</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Campos monolítica -->
<div class="monolithic-row" *ngIf="imageType === 'monolithic'">
<mat-form-field appearance="fill" class="half-width">
<mat-label>Seleccione método de deploy</mat-label>
<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>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccione imagen</mat-label>
<mat-select [(ngModel)]="selectedImage" name="selectedImage" [disabled]="!imageType">
<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-form-field>
</div>
<!-- Campos Git -->
<div *ngIf="imageType === 'git'" class="filters-row git-gap">
<mat-form-field appearance="fill" style="width: 300px;">
<mat-label>Seleccionar Repositorio</mat-label>
<mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositoryChange($event.value)"
[disabled]="loadingRepositories">
<mat-option *ngFor="let repo of repositories" [value]="repo">
{{ repo }}
</mat-option>
</mat-select>
<mat-icon matSuffix *ngIf="loadingRepositories">hourglass_empty</mat-icon>
</mat-form-field>
<mat-form-field appearance="fill" style="width: 300px;">
<mat-label>Seleccionar Rama</mat-label>
<mat-select [(ngModel)]="selectedBranch" (selectionChange)="onGitBranchChange()"
[disabled]="loadingBranches || !selectedRepository">
<mat-option *ngFor="let branch of branches" [value]="branch">
{{ branch }}
</mat-option>
</mat-select>
<mat-icon matSuffix *ngIf="loadingBranches">hourglass_empty</mat-icon>
</mat-form-field>
<mat-form-field appearance="fill" style="width: 200px;">
<mat-label>Tag</mat-label>
<mat-select [(ngModel)]="showOnlyTagged" (selectionChange)="onTagFilterChange()" [disabled]="!commits.length">
<mat-option [value]="false">No</mat-option>
<mat-option [value]="true">Sí</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Modo de despliegue: solo visible para métodos no-direct -->
@if (imageType === 'monolithic' && selectedMethod && !isDirectMethod()) {
<div class="form-section-row">
<div class="deploy-mode-label">
<mat-icon>cached</mat-icon>
<span>Modo de operación</span>
</div>
<mat-radio-group [(ngModel)]="deployMode" name="deployMode" class="deploy-mode-radio-group">
<mat-radio-button value="deploy" color="primary" class="deploy-mode-radio">
<div class="deploy-mode-option">
<mat-icon>storage</mat-icon>
<div>
<span class="deploy-mode-option-title">Despliegue completo</span>
<span class="deploy-mode-option-desc">Actualiza caché y restaura partición</span>
</div>
</div>
</mat-radio-button>
<mat-radio-button value="update-cache" color="primary" class="deploy-mode-radio">
<div class="deploy-mode-option">
<mat-icon>download</mat-icon>
<div>
<span class="deploy-mode-option-title">Solo actualizar caché</span>
<span class="deploy-mode-option-desc">Descarga imagen sin restaurar partición</span>
</div>
</div>
</mat-radio-button>
</mat-radio-group>
</div>
}
<div *ngIf="errorMessage" class="error-message">
{{ errorMessage }}
</div>
<div *ngIf="methodConfigured && selectedMethod && needsAdvancedConfig(selectedMethod)" class="method-config-summary">
<div class="summary-content">
<mat-icon class="summary-icon">tune</mat-icon>
<span class="summary-text">{{ getMethodConfigSummary() }}</span>
</div>
<button mat-icon-button matTooltip="Editar configuración" (click)="openMethodConfigDialog()">
<mat-icon>edit</mat-icon>
</button>
</div>
</div>
<!-- Sección: Selección de partición (oculta en modo solo-caché) -->
@if (deployMode !== 'update-cache') {
<div class="form-section compact-section partition-select-section" id="partition-selection">
<div class="form-section-title">
<mat-icon>storage</mat-icon>
Selección de partición
</div>
<div class="partition-table-container">
<div *ngIf="showInstructions" class="instructions-box">
<mat-card class="instructions-card">
<mat-card-title>
Instrucciones generadas
<button mat-icon-button (click)="showInstructions = false" style="float: right;">
<mat-icon>close</mat-icon>
</button>
</mat-card-title>
<mat-card-content>
<pre>{{ ogInstructions }}</pre>
</mat-card-content>
</mat-card>
</div>
<app-disk-partition-selector
[(selectedPartition)]="selectedPartition"
[partitions]="filteredPartitions"
[columns]="columns"
[displayedColumns]="displayedColumns">
</app-disk-partition-selector>
</div>
</div>
}
<!-- En modo solo-caché: tabla informativa de particiones (sin selección) -->
@if (deployMode === 'update-cache') {
<div class="form-section compact-section partition-select-section" id="partition-info">
<div class="form-section-title">
<mat-icon>info</mat-icon>
Estado actual de particiones
</div>
<div class="partition-table-container">
<app-disk-partition-selector
[(selectedPartition)]="selectedPartition"
[partitions]="filteredPartitions"
[columns]="columns"
[displayedColumns]="displayedColumns"
[readonly]="true">
</app-disk-partition-selector>
</div>
</div>
}
</div>
<!-- Tabla de commits Git (solo cuando hay commits cargados) -->
<div *ngIf="imageType === 'git' && filteredCommits.length > 0" class="form-section compact-section">
<div class="form-section-title">
<mat-icon>image</mat-icon>
Configuración de imagen
<mat-icon>history</mat-icon>
Selección de commit
</div>
<div class="selector">
<mat-form-field appearance="fill" class="half-width">
<mat-label>Tipo de imagen</mat-label>
<mat-select [(ngModel)]="imageType" (selectionChange)="onImageTypeSelected($event.value)">
<mat-option [value]="'monolithic'">Monolítica</mat-option>
<mat-option [value]="'git'">Git</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Selectores Git (solo si imageType === 'git') -->
<div *ngIf="imageType === 'git'" class="filters-row git-gap">
<mat-form-field appearance="fill" style="width: 300px;">
<mat-label>Seleccionar Repositorio</mat-label>
<mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositoryChange($event.value)"
[disabled]="loadingRepositories">
<mat-option *ngFor="let repo of repositories" [value]="repo">
{{ repo }}
</mat-option>
</mat-select>
<mat-icon matSuffix *ngIf="loadingRepositories">hourglass_empty</mat-icon>
</mat-form-field>
<mat-form-field appearance="fill" style="width: 300px;">
<mat-label>Seleccionar Rama</mat-label>
<mat-select [(ngModel)]="selectedBranch" (selectionChange)="onGitBranchChange()"
[disabled]="loadingBranches || !selectedRepository">
<mat-option *ngFor="let branch of branches" [value]="branch">
{{ branch }}
</mat-option>
</mat-select>
<mat-icon matSuffix *ngIf="loadingBranches">hourglass_empty</mat-icon>
</mat-form-field>
<mat-form-field appearance="fill" style="width: 200px;">
<mat-label>Tag</mat-label>
<mat-select [(ngModel)]="showOnlyTagged" (selectionChange)="onTagFilterChange()" [disabled]="!commits.length">
<mat-option [value]="false">No</mat-option>
<mat-option [value]="true">Sí</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="imageType === 'git' && filteredCommits.length > 0" class="commits-table-container">
<div class="commits-table-container">
<table mat-table [dataSource]="filteredCommits" class="mat-elevation-z8">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>Seleccionar</th>
@ -179,182 +304,10 @@
<tr mat-row *matRowDef="let row; columns: ['select','hexsha','message','committed_date','tags'];"></tr>
</table>
</div>
<div class="monolithic-row" *ngIf="imageType === 'monolithic'">
<mat-form-field appearance="fill" class="half-width">
<mat-label>Seleccione método de deploy</mat-label>
<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>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccione imagen</mat-label>
<mat-select [(ngModel)]="selectedImage" name="selectedImage" [disabled]="!imageType">
<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-form-field>
</div>
<!-- Modo de despliegue: solo visible para métodos no-direct -->
@if (imageType === 'monolithic' && selectedMethod && !isDirectMethod()) {
<div class="form-section-row">
<div class="deploy-mode-label">
<mat-icon>cached</mat-icon>
<span>Modo de operación</span>
</div>
<mat-radio-group [(ngModel)]="deployMode" name="deployMode" class="deploy-mode-radio-group">
<mat-radio-button value="deploy" color="primary" class="deploy-mode-radio">
<div class="deploy-mode-option">
<mat-icon>storage</mat-icon>
<div>
<span class="deploy-mode-option-title">Despliegue completo</span>
<span class="deploy-mode-option-desc">Actualiza caché y restaura partición</span>
</div>
</div>
</mat-radio-button>
<mat-radio-button value="update-cache" color="primary" class="deploy-mode-radio">
<div class="deploy-mode-option">
<mat-icon>download</mat-icon>
<div>
<span class="deploy-mode-option-title">Solo actualizar caché</span>
<span class="deploy-mode-option-desc">Descarga imagen sin restaurar partición</span>
</div>
</div>
</mat-radio-button>
</mat-radio-group>
</div>
}
<div *ngIf="errorMessage" class="error-message">
{{ errorMessage }}
</div>
</div>
<!-- Sección: Opciones avanzadas -->
<div class="form-section" id="advanced-options"
*ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct') || isMethod('p2p')">
<div class="form-section-title">
<mat-icon>settings</mat-icon>
<span *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">Opciones multicast</span>
<span *ngIf="isMethod('p2p')">Opciones torrent</span>
</div>
<div class="input-group" *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
<mat-form-field appearance="fill" class="input-field">
<mat-label>Puerto</mat-label>
<input matInput [(ngModel)]="mcastPort" name="mcastPort" type="number"
[required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Dirección</mat-label>
<input matInput [(ngModel)]="mcastIp" name="mcastIp"
[required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
</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"
[required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
<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"
[required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
</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"
[required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
</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"
[required]="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')">
</mat-form-field>
</div>
<div class="input-group" *ngIf="isMethod('p2p')">
<mat-form-field appearance="fill" class="input-field">
<mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
<mat-select [(ngModel)]="p2pMode" name="p2pMode" [required]="isMethod('p2p')">
<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" *ngIf="p2pMode === 'seeder'">
<mat-label>Semilla (minutos)</mat-label>
<input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number"
[required]="isMethod('p2p') && p2pMode === 'seeder'">
</mat-form-field>
</div>
</div>
<!-- Sección: Selección de partición (oculta en modo solo-caché) -->
@if (deployMode !== 'update-cache') {
<div class="form-section" id="partition-selection">
<div class="form-section-title">
<mat-icon>storage</mat-icon>
Selección de partición
</div>
<div class="partition-table-container">
@if (showInstructions) {
<mat-card class="instructions-card">
<mat-card-title>
Instrucciones generadas
<button mat-icon-button (click)="showInstructions = false" style="float: right;">
<mat-icon>close</mat-icon>
</button>
</mat-card-title>
<mat-card-content>
<pre>{{ ogInstructions }}</pre>
</mat-card-content>
</mat-card>
}
<app-disk-partition-selector
[(selectedPartition)]="selectedPartition"
[partitions]="filteredPartitions"
[columns]="columns"
[displayedColumns]="displayedColumns">
</app-disk-partition-selector>
</div>
</div>
}
<!-- En modo solo-caché: tabla informativa de particiones (sin selección) -->
@if (deployMode === 'update-cache') {
<div class="form-section" id="partition-info">
<div class="form-section-title">
<mat-icon>info</mat-icon>
Estado actual de particiones
</div>
<div class="partition-table-container">
<app-disk-partition-selector
[(selectedPartition)]="selectedPartition"
[partitions]="filteredPartitions"
[columns]="columns"
[displayedColumns]="displayedColumns"
[readonly]="true">
</app-disk-partition-selector>
</div>
</div>
}
</div>
<app-scroll-to-top [threshold]="100" targetElement=".header-container" position="bottom-right" [showTooltip]="true"
tooltipText="Volver arriba" tooltipPosition="left">
</app-scroll-to-top>
</app-scroll-to-top>

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

@ -5,6 +5,7 @@ import { HttpClient } from "@angular/common/http";
import { ToastrService } from "ngx-toastr";
import { ActivatedRoute, Router } from "@angular/router";
import { ConfigService } from '@services/config.service';
import {DeployMethodConfigDialogComponent} from "./deploy-method-config-dialog/deploy-method-config-dialog.component";
import { CreateTaskComponent } from "../../../../commands/commands-task/create-task/create-task.component";
import { MatDialog } from "@angular/material/dialog";
import { QueueConfirmationModalComponent } from "../../../../../shared/queue-confirmation-modal/queue-confirmation-modal.component";
@ -108,6 +109,7 @@ export class DeployImageComponent implements OnInit {
showOnlyTagged: boolean = false;
filteredCommits: any[] = [];
methodConfigured: boolean = false;
constructor(
private http: HttpClient,
@ -267,22 +269,74 @@ export class DeployImageComponent implements OnInit {
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 = "";
if (this.selectedMethod) {
setTimeout(() => {
this.scrollToPartitionSection();
}, 300);
if (this.selectedMethod && this.needsAdvancedConfig(this.selectedMethod)) {
this.openMethodConfigDialog();
} else {
this.methodConfigured = false;
}
return true;
}
needsAdvancedConfig(method: string): boolean {
return ['udpcast', 'uftp', 'udpcast-direct', 'p2p'].includes(method);
}
openMethodConfigDialog(): void {
const dialogRef = this.dialog.open(DeployMethodConfigDialogComponent, {
width: '540px',
disableClose: false,
data: {
method: this.selectedMethod,
mcastIp: this.mcastIp,
mcastPort: this.mcastPort,
mcastMode: this.mcastMode,
mcastSpeed: this.mcastSpeed,
mcastMaxClients: this.mcastMaxClients,
mcastMaxTime: this.mcastMaxTime,
p2pMode: this.p2pMode,
p2pTime: this.p2pTime,
multicastModeOptions: this.multicastModeOptions,
p2pModeOptions: this.p2pModeOptions,
}
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.mcastIp = result.mcastIp;
this.mcastPort = result.mcastPort;
this.mcastMode = result.mcastMode;
this.mcastSpeed = result.mcastSpeed;
this.mcastMaxClients = result.mcastMaxClients;
this.mcastMaxTime = result.mcastMaxTime;
this.p2pMode = result.p2pMode;
this.p2pTime = result.p2pTime;
this.methodConfigured = true;
}
});
}
getMethodConfigSummary(): string {
if (!this.selectedMethod) return '';
if (['udpcast', 'uftp', 'udpcast-direct'].includes(this.selectedMethod)) {
return `${this.mcastIp}:${this.mcastPort} · ${this.mcastMode} · ${this.mcastSpeed} Mbps`;
}
if (this.selectedMethod === 'p2p') {
let summary = this.p2pMode || '';
if (this.p2pMode === 'seeder' && this.p2pTime) {
summary += ` · ${this.p2pTime} min`;
}
return summary;
}
return '';
}
save(): void {
const needsPartition = this.deployMode !== 'update-cache';
@ -525,6 +579,7 @@ export class DeployImageComponent implements OnInit {
this.ogInstructions = `og-deploy-image --image ${this.selectedImage.name} --partition ${this.selectedPartition?.partitionNumber || 1} --method ${this.selectedMethod}`;
}
scrollToPartitionSection() {
const partitionSection = document.getElementById('partition-selection');
if (partitionSection) {

51
ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.css Normal file
View File

@ -0,0 +1,51 @@
h2[mat-dialog-title] {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px 0;
padding: 20px 24px 12px;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
border-bottom: 2px solid #f0f0f0;
}
.dialog-title-icon {
color: #667eea;
font-size: 22px;
width: 22px;
height: 22px;
}
.config-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
padding: 16px 0 8px;
}
mat-dialog-content {
min-width: 460px;
padding: 8px 24px !important;
}
mat-dialog-actions {
padding: 16px 24px 20px !important;
margin: 0 !important;
border-top: 1px solid #f0f0f0;
gap: 12px;
}
::ng-deep .mat-dialog-actions button {
min-width: 100px;
}
@media (max-width: 600px) {
.config-grid {
grid-template-columns: 1fr;
}
mat-dialog-content {
min-width: auto;
}
}

67
ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.html Normal file
View File

@ -0,0 +1,67 @@
<h2 mat-dialog-title>
<mat-icon class="dialog-title-icon">settings</mat-icon>
Configuración de {{ getMethodLabel() }}
</h2>
<mat-dialog-content>
<!-- Multicast options -->
<div *ngIf="isMulticast()" class="config-grid">
<mat-form-field appearance="fill">
<mat-label>Dirección</mat-label>
<input matInput [(ngModel)]="mcastIp" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Puerto</mat-label>
<input matInput [(ngModel)]="mcastPort" type="number" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Modo Multicast</mat-label>
<mat-select [(ngModel)]="mcastMode" required>
<mat-option *ngFor="let option of data.multicastModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Velocidad</mat-label>
<input matInput [(ngModel)]="mcastSpeed" type="number" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Máx. Clientes</mat-label>
<input matInput [(ngModel)]="mcastMaxClients" type="number" required>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Tiempo máx. espera</mat-label>
<input matInput [(ngModel)]="mcastMaxTime" type="number" required>
</mat-form-field>
</div>
<!-- P2P options -->
<div *ngIf="isP2P()" class="config-grid">
<mat-form-field appearance="fill">
<mat-label>Modo P2P</mat-label>
<mat-select [(ngModel)]="p2pMode" required>
<mat-option *ngFor="let option of data.p2pModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" *ngIf="p2pMode === 'seeder'">
<mat-label>Semilla (minutos)</mat-label>
<input matInput [(ngModel)]="p2pTime" type="number" required>
</mat-form-field>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onCancel()">Cancelar</button>
<button mat-flat-button color="primary" [disabled]="!isValid()" (click)="onSave()">
Guardar configuración
</button>
</mat-dialog-actions>

93
ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-method-config-dialog/deploy-method-config-dialog.component.ts Normal file
View File

@ -0,0 +1,93 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
export interface DeployMethodConfigData {
method: string;
mcastIp: string;
mcastPort: number;
mcastMode: string;
mcastSpeed: number;
mcastMaxClients: number;
mcastMaxTime: number;
p2pMode: string;
p2pTime: number;
multicastModeOptions: { name: string; value: string }[];
p2pModeOptions: { name: string; value: string }[];
}
@Component({
selector: 'app-deploy-method-config-dialog',
templateUrl: './deploy-method-config-dialog.component.html',
styleUrls: ['./deploy-method-config-dialog.component.css']
})
export class DeployMethodConfigDialogComponent {
mcastIp: string;
mcastPort: number;
mcastMode: string;
mcastSpeed: number;
mcastMaxClients: number;
mcastMaxTime: number;
p2pMode: string;
p2pTime: number;
constructor(
public dialogRef: MatDialogRef<DeployMethodConfigDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: DeployMethodConfigData
) {
this.mcastIp = data.mcastIp;
this.mcastPort = data.mcastPort;
this.mcastMode = data.mcastMode;
this.mcastSpeed = data.mcastSpeed;
this.mcastMaxClients = data.mcastMaxClients;
this.mcastMaxTime = data.mcastMaxTime;
this.p2pMode = data.p2pMode;
this.p2pTime = data.p2pTime;
}
isMulticast(): boolean {
return ['udpcast', 'uftp', 'udpcast-direct'].includes(this.data.method);
}
isP2P(): boolean {
return this.data.method === 'p2p';
}
getMethodLabel(): string {
const labels: Record<string, string> = {
'udpcast': 'Multicast',
'uftp': 'UFTP',
'udpcast-direct': 'Multicast (directo)',
'p2p': 'Torrent (P2P)',
};
return labels[this.data.method] || this.data.method;
}
isValid(): boolean {
if (this.isMulticast()) {
return !!(this.mcastPort && this.mcastIp && this.mcastMode && this.mcastSpeed && this.mcastMaxClients && this.mcastMaxTime);
}
if (this.isP2P()) {
if (!this.p2pMode) return false;
if (this.p2pMode === 'seeder' && !this.p2pTime) return false;
return true;
}
return true;
}
onSave(): void {
this.dialogRef.close({
mcastIp: this.mcastIp,
mcastPort: this.mcastPort,
mcastMode: this.mcastMode,
mcastSpeed: this.mcastSpeed,
mcastMaxClients: this.mcastMaxClients,
mcastMaxTime: this.mcastMaxTime,
p2pMode: this.p2pMode,
p2pTime: this.p2pTime,
});
}
onCancel(): void {
this.dialogRef.close(null);
}
}

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

@ -1,20 +1,21 @@
.partition-assistant {
padding: 32px;
margin: 20px;
padding: 16px 20px;
margin: 0 20px 20px;
background: white !important;
border-radius: 16px;
border-radius: 0 0 16px 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #bbdefb;
border-top: none;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 32px;
padding: 16px 24px;
background: white;
border-radius: 12px;
margin-bottom: 20px;
margin-bottom: 16px;
}
.header-container-title {
@ -114,76 +115,138 @@
cursor: not-allowed;
}
.secondary-button {
background: #e3f2fd !important;
color: #1976d2 !important;
}
.secondary-button:hover:not(:disabled) {
background: #bbdefb !important;
}
.row-button {
display: flex;
align-items: center;
gap: 30px;
gap: 16px;
}
.disk-selector-card {
padding: 32px;
margin: 20px;
background: white !important;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #bbdefb;
overflow: hidden;
.disk-and-partitions-container {
margin: 0 20px;
}
.card-header {
.disk-toolbar {
display: flex;
align-items: center;
padding: 24px 32px;
background: transparent;
color: #1976d2;
border-bottom: 1.5px solid #1976d2;
gap: 16px;
padding: 12px 20px;
background: white;
border-radius: 16px 16px 0 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #bbdefb;
flex-wrap: wrap;
}
.card-icon {
font-size: 28px;
width: 28px;
height: 28px;
margin-right: 16px;
color: #1976d2;
.disk-toolbar-select {
flex: 0 0 280px;
margin-bottom: -1.25em;
}
.card-title h3 {
margin: 0 0 4px 0;
font-size: 20px;
.disk-toolbar-info {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 0;
}
.disk-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.disk-stat-label {
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6c757d;
}
.disk-stat-value {
font-size: 13px;
font-weight: 600;
color: #1976d2;
color: #333;
}
.card-title p {
margin: 0;
font-size: 14px;
opacity: 0.9;
color: #1976d2;
.disk-stat-value.used {
color: #dc3545;
}
.card-content {
padding: 24px 32px;
.disk-stat-value.free {
color: #28a745;
}
.disk-select-field {
width: 100%;
margin-bottom: 20px;
}
.selected-disk-hint {
.disk-usage-bar-inline {
display: flex;
align-items: center;
gap: 8px;
color: #2e7d32;
font-weight: 500;
font-size: 14px;
flex: 1;
min-width: 80px;
max-width: 200px;
}
.hint-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: #4caf50;
.disk-usage-bar-inline .usage-bar-container {
flex: 1;
}
.usage-percent-label {
font-size: 12px;
font-weight: 600;
color: #666;
white-space: nowrap;
}
.disk-toolbar-meta {
display: flex;
gap: 8px;
align-items: center;
}
.meta-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 16px;
background: #f0f4ff;
color: #495057;
font-size: 12px;
font-weight: 500;
border: 1px solid #d0d9ff;
}
.meta-chip mat-icon {
font-size: 14px;
width: 14px;
height: 14px;
color: #667eea;
}
.add-partition-btn {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
margin: 0 !important;
padding: 8px 16px !important;
}
.add-partition-btn mat-icon {
font-size: 18px;
width: 18px;
height: 18px;
}
/* Opciones del select */
@ -386,11 +449,11 @@
}
.select-container {
margin-top: 20px;
margin-top: 12px;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 20px;
padding: 0 20px 12px;
}
/* Expansion panel */
@ -503,8 +566,8 @@
}
.form-container {
flex: 0 0 65%;
max-width: 65%;
flex: 1;
min-width: 0;
padding-right: 20px;
box-sizing: border-box;
background: white;
@ -512,73 +575,6 @@
border: none;
}
.disk-space-info-container {
margin: 24px 0;
background: none;
border-radius: 0;
border: none;
padding: 0;
}
.disk-space-card {
display: flex;
gap: 24px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.space-info-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
min-width: 180px;
}
.space-icon {
font-size: 24px;
width: 24px;
height: 24px;
}
.used-icon {
color: #dc3545;
}
.free-icon {
color: #28a745;
}
.total-icon {
color: #007bff;
}
.space-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.space-label {
font-size: 12px;
font-weight: 500;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.space-value {
font-size: 16px;
font-weight: 600;
color: #212529;
}
.disk-usage-bar {
margin-top: 16px;
}
.usage-bar-container {
width: 100%;
@ -596,13 +592,6 @@
transition: width 0.3s ease;
}
.usage-percentage {
font-size: 14px;
font-weight: 600;
color: #666;
margin-top: 8px;
text-align: center;
}
.partition-table {
width: 100%;
@ -656,10 +645,9 @@
}
.chart-container {
flex: 0 0 35%;
max-width: 35%;
align-self: center;
justify-self: center;
flex: 0 0 280px;
max-width: 280px;
align-self: flex-start;
}
.chart-header {
@ -1263,13 +1251,17 @@
padding: 20px;
}
.disk-space-card {
.disk-toolbar {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.space-info-item {
min-width: auto;
.disk-toolbar-select {
flex: none;
}
.disk-toolbar-info {
flex-wrap: wrap;
}
.row {
@ -1293,7 +1285,7 @@
}
.partition-validation-indicator {
margin: 16px 0;
margin: 8px 0;
border-radius: 12px;
transition: all 0.3s ease;
}
@ -1432,45 +1424,6 @@
::ng-deep .model-selector .mat-radio-outer-circle { border-color: #667eea !important; }
::ng-deep .model-selector .mat-radio-inner-circle { background-color: #667eea !important; }
/* Overrides: info badges sin fondo ni borde, estilo neutro */
.info-badge {
background: transparent;
border: none;
box-shadow: none;
}
.info-badge:hover {
transform: none;
box-shadow: none;
}
.info-badge:first-of-type,
.info-badge:last-of-type {
background: transparent;
border-color: transparent;
}
.info-badge:first-of-type .info-icon,
.info-badge:last-of-type .info-icon,
.info-badge:first-of-type .info-label,
.info-badge:last-of-type .info-label,
.info-badge:first-of-type .info-value,
.info-badge:last-of-type .info-value {
color: inherit;
}
/* Colores neutros en badges */
.info-badge .info-label {
color: #333;
}
.info-badge .info-value {
color: #333;
}
.info-badge .info-icon {
color: #6c757d;
}

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

@ -17,15 +17,9 @@
</div>
<div class="button-row">
<button class="action-button" [disabled]="!selectedModelClient || !allSelected || !selectedDisk || (selectedDisk.totalDiskSize - selectedDisk.used) <= 0 || partitionValidationStatus === 'error'" (click)="save()">Ejecutar</button>
</div>
<div class="button-row">
<button class="action-button" (click)="generateInstructions()">
<button class="action-button secondary-button" (click)="generateInstructions()">
Generar instrucciones
</button>
</div>
<div class="button-row">
<button class="action-button" color="accent" [disabled]="!selectedModelClient || !allSelected || !selectedDisk || (selectedDisk.totalDiskSize - selectedDisk.used) <= 0" (click)="openScheduleModal()">
Opciones de programación
</button>
@ -108,18 +102,10 @@
<mat-dialog-content>
<div class="disk-selector-card" id="disk-selector">
<div class="card-header">
<mat-icon class="card-icon">storage</mat-icon>
<div class="card-title">
<h3>Selección de Disco</h3>
<p>Elige el disco donde se realizarán las operaciones de particionado</p>
</div>
</div>
<div class="card-content">
<mat-form-field appearance="fill" class="disk-select-field">
<mat-label>Seleccionar disco</mat-label>
<div class="disk-and-partitions-container" id="disk-selector">
<div class="disk-toolbar">
<mat-form-field appearance="fill" class="disk-toolbar-select">
<mat-label>Disco</mat-label>
<mat-select [(ngModel)]="selectedDiskNumber" (selectionChange)="onDiskSelectionChange()">
<mat-option *ngFor="let disk of disks" [value]="disk.diskNumber">
<div class="disk-option">
@ -133,84 +119,57 @@
</div>
</mat-option>
</mat-select>
<mat-hint *ngIf="!selectedDisk">Selecciona el disco que deseas particionar</mat-hint>
<mat-hint *ngIf="selectedDisk" class="selected-disk-hint">
<mat-icon class="hint-icon">check_circle</mat-icon>
Disco {{ selectedDisk.diskNumber }} seleccionado - {{ (selectedDisk.totalDiskSize / 1024).toFixed(2) }} GB
</mat-hint>
</mat-form-field>
<div class="no-disks-message" *ngIf="!disks || disks.length === 0">
<mat-icon class="warning-icon">warning</mat-icon>
<div class="message-text">
<span class="message-title">No hay discos disponibles</span>
<span class="message-subtitle">Asegúrate de que el cliente modelo tenga discos configurados</span>
<div class="disk-toolbar-info" *ngIf="selectedDisk">
<div class="disk-stat">
<span class="disk-stat-label">Usado</span>
<span class="disk-stat-value used">{{ selectedDisk.used | number:'1.0-0' }} MB</span>
</div>
<div class="disk-stat">
<span class="disk-stat-label">Libre</span>
<span class="disk-stat-value free" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">{{ (selectedDisk.totalDiskSize - selectedDisk.used) | number:'1.0-0' }} MB</span>
</div>
<div class="disk-stat">
<span class="disk-stat-label">Total</span>
<span class="disk-stat-value">{{ selectedDisk.totalDiskSize | number:'1.0-0' }} MB</span>
</div>
<div class="disk-usage-bar-inline">
<div class="usage-bar-container">
<div class="usage-bar-fill"
[style.width.%]="(selectedDisk.used / selectedDisk.totalDiskSize) * 100"
[ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}"></div>
</div>
<span class="usage-percent-label" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">{{ ((selectedDisk.used / selectedDisk.totalDiskSize) * 100) | number:'1.0-0' }}%</span>
</div>
</div>
<div class="disk-toolbar-meta" *ngIf="selectedDisk">
<span class="meta-chip" *ngIf="selectedModelClient?.firmwareType">
<mat-icon>memory</mat-icon> {{ selectedModelClient.firmwareType }}
</span>
<span class="meta-chip" *ngIf="partitionCode">
<mat-icon>storage</mat-icon> {{ partitionCode }}
</span>
</div>
<button class="action-button add-partition-btn" *ngIf="selectedDisk" (click)="addPartition(selectedDisk.diskNumber)">
<mat-icon>add</mat-icon> Añadir partición
</button>
</div>
<div class="no-disks-message" *ngIf="!disks || disks.length === 0">
<mat-icon class="warning-icon">warning</mat-icon>
<div class="message-text">
<span class="message-title">No hay discos disponibles</span>
<span class="message-subtitle">Asegúrate de que el cliente modelo tenga discos configurados</span>
</div>
</div>
</div>
<div class="partition-assistant" *ngIf="selectedDisk">
<div class="row-button">
<button class="action-button" (click)="addPartition(selectedDisk.diskNumber)">Añadir partición</button>
<div class="info-badge" *ngIf="selectedModelClient.firmwareType">
<mat-icon class="info-icon">memory</mat-icon>
<div class="info-content">
<span class="info-label">Firmware</span>
<span class="info-value">{{ selectedModelClient.firmwareType }}</span>
</div>
</div>
<div class="info-badge" *ngIf="partitionCode">
<mat-icon class="info-icon">storage</mat-icon>
<div class="info-content">
<span class="info-label">Tabla de particiones</span>
<span class="info-value">{{ partitionCode }}</span>
</div>
</div>
</div>
<mat-divider style="padding: 10px;"></mat-divider>
<div class="row">
<div class="form-container">
<div class="disk-space-info-container" id="disk-info">
<div class="disk-space-card">
<div class="space-info-item">
<mat-icon class="space-icon used-icon">storage</mat-icon>
<div class="space-details">
<span class="space-label">Espacio usado</span>
<span class="space-value">{{ selectedDisk.used | number:'1.2-2' }} MB</span>
</div>
</div>
<div class="space-info-item">
<mat-icon class="space-icon free-icon" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">cloud_done</mat-icon>
<div class="space-details">
<span class="space-label">Espacio libre</span>
<span class="space-value" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">{{ (selectedDisk.totalDiskSize - selectedDisk.used) | number:'1.2-2' }} MB</span>
</div>
</div>
<div class="space-info-item">
<mat-icon class="space-icon total-icon">dns</mat-icon>
<div class="space-details">
<span class="space-label">Espacio total</span>
<span class="space-value">{{ selectedDisk.totalDiskSize | number:'1.2-2' }} MB</span>
</div>
</div>
</div>
<div class="disk-usage-bar">
<div class="usage-bar-container">
<div class="usage-bar-fill"
[style.width.%]="(selectedDisk.used / selectedDisk.totalDiskSize) * 100"
[ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}"></div>
</div>
<span class="usage-percentage" [ngClass]="{'warning': (selectedDisk.used / selectedDisk.totalDiskSize) >= 0.9 && (selectedDisk.used / selectedDisk.totalDiskSize) < 1, 'danger': (selectedDisk.used / selectedDisk.totalDiskSize) >= 1}">{{ ((selectedDisk.used / selectedDisk.totalDiskSize) * 100) | number:'1.1-1' }}% usado</span>
</div>
</div>
<!-- Indicador de validación de particiones -->
<div class="partition-validation-indicator" *ngIf="selectedDisk && selectedDisk.partitions.length > 0">

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

@ -104,6 +104,7 @@ table {
padding: 24px 32px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
@ -389,13 +390,13 @@ table {
.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;
gap: 12px;
padding: 20px;
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
margin-top: 16px;
}
.new-command-container mat-form-field {
@ -407,43 +408,10 @@ table {
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%;
}
/* Secciones del formulario */
.form-section {
background: white !important;
border-radius: 8px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
border: 1px solid #bbdefb;
padding: 20px;
}
.form-section-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.form-section-title mat-icon {
color: #2196f3;
}
.toggle-options {
display: flex;
gap: 10px;

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

@ -7,7 +7,7 @@
</h2>
<div class="destination-info">
<div class="destination-badge">
<mat-icon class="destination-icon">cloud_download</mat-icon>
<mat-icon class="destination-icon">terminal</mat-icon>
<div class="destination-content">
<span class="destination-label">Destino</span>
<span class="destination-value">{{ runScriptTitle }}</span>
@ -25,7 +25,6 @@
</button>
</div>
</div>
<mat-divider></mat-divider>
<div class="select-container">
<mat-expansion-panel>
@ -65,7 +64,7 @@
class="client-image" />
<div class="client-details">
<span class="client-name">{{ client.name }}</span>
<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>
@ -83,6 +82,12 @@
Configuración de script
</div>
<div class="run-as-admin-container">
<mat-checkbox [(ngModel)]="runAsAdmin" color="primary">
Ejecutar como administrador
</mat-checkbox>
</div>
<div class="action-chips-container">
<mat-chip-listbox [(ngModel)]="commandType" required class="action-chip-listbox">
<mat-chip-option value="new" class="action-chip create-chip firmware-chip" (click)="commandType = 'new'">
@ -190,7 +195,7 @@
<mat-card-content>
<div class="script-content-wrapper">
<div class="script-preview" [innerHTML]="scriptContent"></div>
<pre class="script-preview">{{ scriptContent }}</pre>
</div>
</mat-card-content>
</mat-card>

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

@ -36,6 +36,7 @@ export class RunScriptAssistantComponent implements OnInit{
parameterNames: string[] = Object.keys(this.parameters);
runScriptContext: any = null;
newScriptParameters: string[] = [];
runAsAdmin: boolean = false;
constructor(
private http: HttpClient,
@ -200,7 +201,8 @@ export class RunScriptAssistantComponent implements OnInit{
this.http.post(`${this.baseUrl}/commands/run-script`, {
clients: this.selectedClients.map((client: any) => client.uuid),
script: this.commandType === 'existing' ? this.scriptContent : this.newScript,
queue: result
queue: result,
runAsAdmin: this.runAsAdmin
}).subscribe(
response => {
this.toastService.success('Script ejecutado correctamente');

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

@ -10,7 +10,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
padding: 6px 10px;
border-bottom: 1px solid #ddd;
}
@ -125,18 +125,19 @@
.groups-button-row {
display: flex;
gap: 15px;
gap: 8px;
padding-right: 0.5rem;
align-items: center;
}
.clients-view-header {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
margin-bottom: 0.25rem;
margin-top: 0.25rem;
align-items: center;
padding-right: 1rem;
padding-right: 0.75rem;
}
@media (max-width: 768px) {
@ -147,10 +148,10 @@
}
.clients-title-name {
font-size: x-large;
font-size: 1.15rem;
display: block;
padding: 1rem 1rem 1rem 13px;
margin-left: 0.6rem;
padding: 0.5rem 0.5rem 0.5rem 12px;
margin-left: 0.4rem;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
@ -189,6 +190,10 @@
padding-left: 1rem;
}
.cards-select-all-inline {
margin-right: 4px;
}
.list-view {
overflow-x: auto;
display: flex;
@ -229,13 +234,11 @@
.paginator-container {
display: flex;
justify-content: end;
justify-content: flex-end;
margin-top: auto;
}
.cards-paginator {
width: 100%;
margin-left: 1rem;
background-color: #fafafa;
margin-bottom: 1rem;
}
@ -422,7 +425,8 @@ mat-tree mat-tree-node.disabled:hover {
.filters-container {
display: flex;
flex-direction: column;
padding: 1em;
padding: 8px 12px;
gap: 2px;
flex-grow: 1;
}
@ -433,6 +437,31 @@ mat-tree mat-tree-node.disabled:hover {
box-sizing: border-box;
}
.direct-clients-toggle {
display: flex;
align-items: center;
padding: 4px 2px;
font-size: 13px;
}
::ng-deep .filters-container .mat-form-field-wrapper {
padding-bottom: 4px !important;
margin: 0 !important;
}
::ng-deep .filters-container .mat-form-field-infix {
padding: 6px 0 !important;
font-size: 13px;
}
::ng-deep .filters-container .mat-form-field-appearance-outline .mat-form-field-outline {
top: 0 !important;
}
::ng-deep .filters-container .mat-form-field-label {
font-size: 13px !important;
}
.filters-panel {
flex-shrink: 0;
}
@ -962,9 +991,9 @@ mat-button-toggle-group {
.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
padding: 0.5rem 1rem 1rem 1rem;
grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
gap: 8px;
padding: 0.25rem 0.75rem 0.75rem 0.75rem;
width: 100%;
box-sizing: border-box;
}

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

@ -15,7 +15,7 @@
</h2>
</div>
<div class="groups-button-row">
<div joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}" style="display: flex; gap: 15px;">
<div joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}" style="display: flex; gap: 8px;">
<button class="action-button" (click)="addOU($event)" *ngIf="auth.userCategory !== 'ou-minimal'"
matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
{{ 'newOrganizationalUnitButton' | translate }}
@ -104,6 +104,16 @@
</button>
</mat-form-field>
<div class="direct-clients-toggle">
<mat-slide-toggle
[(ngModel)]="showOnlyDirectClients"
(change)="onDirectClientsToggleChange()"
matTooltip="{{ 'directClientsToggleTooltip' | translate }}"
matTooltipShowDelay="1000">
{{ 'directClientsToggle' | translate }}
</mat-slide-toggle>
</div>
<!-- Funcionalidad actualmente deshabilitada-->
<!-- <mat-form-field appearance="outline">
<mat-select (selectionChange)="loadSelectedFilter($event.value)" placeholder="Cargar filtro" disabled>
@ -294,6 +304,12 @@
<strong>{{ selectedNode?.name }}</strong>
</span>
<div class="view-type-container">
<mat-checkbox *ngIf="currentView === 'card'" class="cards-select-all-inline"
(change)="toggleAllCards()"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
matTooltip="Seleccionar todos">
</mat-checkbox>
<button class="action-button" [disabled]="selection.selected.length === 0" (click)="changeParent($event)"
matTooltip="{{ 'moveClientsTooltip' | translate }}" matTooltipShowDelay="1000">
{{ 'changeOU' | translate }}
@ -370,10 +386,6 @@
<!-- Cards view -->
<div *ngIf="currentView === 'card'">
<section class="cards-view">
<mat-checkbox class="cards-select-all" (change)="toggleAllCards()"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
<div class="clients-grid">
<div *ngFor="let client of arrayClients" class="client-item" [ngClass]="'status-' + client.status">
<div class="client-card">
@ -400,7 +412,7 @@
<mat-icon>more_vert</mat-icon>
</button>
<span class="sync-spinner" *ngIf="syncStatus && syncingClientId === client.uuid">
<span class="sync-spinner" *ngIf="syncingClientIds.has(client.uuid)">
<mat-spinner diameter="24"></mat-spinner>
</span>
@ -413,7 +425,7 @@
<mat-icon>visibility</mat-icon>
<span>{{ 'viewDetails' | translate }}</span>
</button>
<button mat-menu-item *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
<button mat-menu-item *ngIf="!syncingClientIds.has(client.uuid)"
(click)="getStatus(client, selectedNode)">
<mat-icon>sync</mat-icon>
<span>{{ 'sync' | translate }}</span>
@ -447,7 +459,7 @@
</section>
<div class="paginator-container">
<mat-paginator class="cards-paginator" [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
[pageSizeOptions]="[5, 10, 20, 50, 100]" (page)="onPageChange($event)">
[pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
</mat-paginator>
</div>
</div>
@ -497,7 +509,7 @@
<div class="client-status-container">
<img [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon"
class="client-image" />
<span *ngIf="syncStatus && syncingClientId === client.uuid">
<span *ngIf="syncingClientIds.has(client.uuid)">
<mat-spinner diameter="24"></mat-spinner>
</span>
</div>

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

@ -75,13 +75,13 @@ export class GroupsComponent implements OnInit, OnDestroy {
currentView: string = 'list';
savedFilterNames: [string, string][] = [];
selectedTreeFilter = '';
syncStatus = false;
syncingClientId: string | null = null;
syncingClientIds = new Set<string>();
private originalTreeData: TreeNode[] = [];
arrayClients: any[] = [];
filters: { [key: string]: string } = {};
private clientFilterSubject = new Subject<string>();
loading = false;
showOnlyDirectClients: boolean = false;
// Nuevas propiedades para funcionalidades mejoradas
selectedClient: any = null;
@ -151,6 +151,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
this.treeDataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
this.currentView = this.auth.groupsView || 'list';
this.itemsPerPage = this.auth.clientsPerPage || 20;
if (!this.pageSizeOptions.includes(this.itemsPerPage)) {
this.pageSizeOptions = [...this.pageSizeOptions, this.itemsPerPage].sort((a, b) => a - b);
}
}
@ -406,6 +410,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
this.selectedNode = node;
const selectedClientsBeforeEdit = this.selection.selected.map(client => client.uuid);
this.fetchClientsForNode(node, selectedClientsBeforeEdit);
if (node.type === NodeType.Classroom || node.type === NodeType.ClientsGroup) {
this.getStatusForAllClientsInNode(node);
}
}
onMenuClick(event: Event, node: any): void {
@ -428,11 +436,21 @@ export class GroupsComponent implements OnInit, OnDestroy {
this.isLoadingClients = true;
this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: backendParams }).subscribe({
next: (response: any) => {
this.selectedClients.data = response['hydra:member'];
if (this.selectedNode) {
this.selectedNode.clients = response['hydra:member'];
let members = response['hydra:member'];
let total = response['hydra:totalItems'];
if (this.showOnlyDirectClients && node['@id']) {
members = members.filter((client: any) =>
client.organizationalUnit?.['@id'] === node['@id']
);
total = members.length;
}
this.length = response['hydra:totalItems'];
this.selectedClients.data = members;
if (this.selectedNode) {
this.selectedNode.clients = members;
}
this.length = total;
this.arrayClients = this.selectedClients.data;
this.hasClients = this.selectedClients.data.length > 0;
this.isLoadingClients = false;
@ -455,6 +473,13 @@ export class GroupsComponent implements OnInit, OnDestroy {
});
}
onDirectClientsToggleChange(): void {
this.page = 0;
if (this.selectedNode) {
this.fetchClientsForNode(this.selectedNode);
}
}
onPageChange(event: PageEvent): void {
this.page = event.pageIndex;
this.itemsPerPage = event.pageSize;
@ -796,24 +821,20 @@ export class GroupsComponent implements OnInit, OnDestroy {
getStatus(client: Client, node: any): void {
if (!client.uuid || !client['@id']) return;
this.syncingClientId = client.uuid;
this.syncStatus = true;
this.syncingClientIds.add(client.uuid);
const parentNodeId = client.organizationalUnit?.id || node.id;
console.log('Parent node id:', parentNodeId);
this.subscriptions.add(
this.http.post(`${this.baseUrl}${client['@id']}/agent/status`, {}).subscribe(
() => {
this.toastr.success('Cliente actualizado correctamente');
this.syncStatus = false;
this.syncingClientId = null;
this.syncingClientIds.delete(client.uuid);
this.refreshData(parentNodeId)
},
(error) => {
this.toastr.error(error.error['hydra:description'] || 'Error al actualizar el cliente');
this.syncStatus = false;
this.syncingClientId = null;
this.syncingClientIds.delete(client.uuid);
this.refreshData(parentNodeId)
}
)
@ -821,6 +842,27 @@ export class GroupsComponent implements OnInit, OnDestroy {
}
getStatusForAllClientsInNode(node: any): void {
this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&itemsPerPage=1000`).subscribe({
next: (response: any) => {
const clients: Client[] = response['hydra:member'];
const validClients = clients.filter(client => client.uuid && client['@id']);
if (validClients.length === 0) return;
validClients.forEach(client => {
this.syncingClientIds.add(client.uuid);
this.subscriptions.add(
this.http.post(`${this.baseUrl}${client['@id']}/agent/status`, {}).subscribe({
next: () => this.syncingClientIds.delete(client.uuid),
error: () => this.syncingClientIds.delete(client.uuid),
})
);
});
}
});
}
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.selectedClients.data.length;

1
ogWebconsole/src/app/components/groups/model/model.ts
View File

@ -47,6 +47,7 @@ export interface Client {
createdBy: string;
uuid: string;
parentName?: string;
notes?: string;
}
export interface ClientCollection {

15
ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.css
View File

@ -86,6 +86,21 @@ table {
box-shadow: none;
}
.notes-card {
background-color: #f1f1f1;
padding: 24px;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.notes-value {
font-size: 1rem;
color: #222;
white-space: pre-wrap;
word-break: break-word;
margin-top: 8px;
}
.table-header-container {
display: flex;
align-items: center;

5
ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.html
View File

@ -28,6 +28,11 @@
</div>
</div>
<div class="notes-card">
<div class="label">{{ 'notesLabel' | translate }}</div>
<div class="notes-value">{{ clientNotes || '--' }}</div>
</div>
<div class="table-header-container">
<h2 i18n="@@adminImagesTitle">Discos/Particiones</h2>
@if (clientData.firmwareType) {

4
ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.ts
View File

@ -125,6 +125,10 @@ export class ClientDetailsComponent {
];
}
get clientNotes(): string {
return this.clientData?.notes || '';
}
calculateDiskUsage() {
const diskUsageMap = new Map<number, { total: number, used: number, partitions: any[] }>();

4
ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.css
View File

@ -44,6 +44,10 @@ mat-option .unit-path {
row-gap: 20px;
}
.full-width {
grid-column: 1 / -1;
}
.action-container {
display: flex;
justify-content: flex-end;

6
ogWebconsole/src/app/components/groups/shared/clients/manage-client/manage-client.component.html
View File

@ -106,6 +106,12 @@
<mat-checkbox formControlName="maintenance">
{{ 'maintenance' | translate }}
</mat-checkbox>
<mat-form-field class="form-field full-width">
<mat-label>{{ 'notesLabel' | translate }}</mat-label>
<textarea matInput formControlName="notes" rows="4"
[placeholder]="'notesPlaceholder' | translate"></textarea>
</mat-form-field>
</form>
</div>
</mat-dialog-content>

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

@ -88,7 +88,8 @@ export class ManageClientComponent implements OnInit {
repository: [null],
menu: [null],
maintenance: [false],
resolution: [null]
resolution: [null],
notes: ['']
});
}
@ -250,7 +251,8 @@ export class ManageClientComponent implements OnInit {
pxeTemplate: data.pxeTemplate ? data.pxeTemplate['@id'] : null,
menu: data.menu ? data.menu['@id'] : null,
maintenance: data.maintenance,
resolution: data.resolution
resolution: data.resolution,
notes: data.notes || ''
});
resolve();
},

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

@ -1,10 +1,11 @@
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { DataService } from "../../../services/data.service";
import { ToastrService } from "ngx-toastr";
import { ConfigService } from '@services/config.service';
import { DeleteModalComponent } from '../../../../../shared/delete_modal/delete-modal/delete-modal.component';
@Component({
selector: 'app-manage-organizational-unit',
@ -59,6 +60,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
private dataService: DataService,
private configService: ConfigService,
private toastService: ToastrService,
private dialog: MatDialog,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.isEditMode = !!data?.uuid;
@ -270,71 +272,113 @@ export class ManageOrganizationalUnitComponent implements OnInit {
onSubmit() {
if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid) {
const parentValue = this.generalFormGroup.value.parent;
// Preparar networkSettings con lógica condicional para p2pTime
const networkSettings = { ...this.networkSettingsFormGroup.value };
if (networkSettings.p2pMode !== 'seeder') {
networkSettings.p2pTime = null;
}
const formData = {
name: this.generalFormGroup.value.name,
excludeParentChanges: this.generalFormGroup.value.excludeParentChanges,
parent: parentValue || null,
description: this.generalFormGroup.value.description,
comments: this.additionalInfoFormGroup.value.comments,
remoteCalendar: this.generalFormGroup.value.remoteCalendar,
type: this.generalFormGroup.value.type,
networkSettings: networkSettings,
location: this.classroomInfoFormGroup.value.location,
projector: this.classroomInfoFormGroup.value.projector,
board: this.classroomInfoFormGroup.value.board,
capacity: this.classroomInfoFormGroup.value.capacity,
};
if (this.isEditMode) {
const putUrl = `${this.baseUrl}/organizational-units/${this.data.uuid}`;
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
const confirmRef = this.dialog.open(DeleteModalComponent, {
width: '400px',
data: {
title: 'Propagar parámetros',
message: '¿Desea propagar los parámetros de red (ogLive, repositorio, menú, plantilla PXE, perfil hardware) a todos los clientes de esta unidad organizativa?',
confirmText: 'Sí, propagar',
cancelText: 'No, solo guardar',
}
});
this.http.put<any>(putUrl, formData, { headers }).subscribe(
response => {
confirmRef.afterClosed().subscribe((propagate: boolean) => {
this.submitForm(propagate === true);
});
} else {
this.submitForm(false);
}
}
}
private submitForm(propagate: boolean) {
const parentValue = this.generalFormGroup.value.parent;
const networkSettings = { ...this.networkSettingsFormGroup.value };
if (networkSettings.p2pMode !== 'seeder') {
networkSettings.p2pTime = null;
}
const formData = {
name: this.generalFormGroup.value.name,
excludeParentChanges: this.generalFormGroup.value.excludeParentChanges,
parent: parentValue || null,
description: this.generalFormGroup.value.description,
comments: this.additionalInfoFormGroup.value.comments,
remoteCalendar: this.generalFormGroup.value.remoteCalendar,
type: this.generalFormGroup.value.type,
networkSettings: networkSettings,
location: this.classroomInfoFormGroup.value.location,
projector: this.classroomInfoFormGroup.value.projector,
board: this.classroomInfoFormGroup.value.board,
capacity: this.classroomInfoFormGroup.value.capacity,
};
if (this.isEditMode) {
const putUrl = `${this.baseUrl}/organizational-units/${this.data.uuid}`;
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
this.http.put<any>(putUrl, formData, { headers }).subscribe(
response => {
if (propagate) {
this.propagateNetworkSettings();
} else {
this.unitAdded.emit();
this.dialogRef.close({ success: true });
this.toastService.success('Editado exitosamente', 'Éxito');
},
error => {
console.error('Error al realizar PUT:', error);
const errorMessages = error.error['hydra:description'].split('\n');
errorMessages.forEach((message: string) => {
const cleanedMessage = message.replace(/networkSettings\.(\w+):/, 'Error $1:');
this.toastService.error(cleanedMessage);
});
}
);
} else {
const postUrl = `${this.baseUrl}/organizational-units`;
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
},
error => {
console.error('Error al realizar PUT:', error);
const errorMessages = error.error['hydra:description'].split('\n');
errorMessages.forEach((message: string) => {
const cleanedMessage = message.replace(/networkSettings\.(\w+):/, 'Error $1:');
this.toastService.error(cleanedMessage);
});
}
);
} else {
const postUrl = `${this.baseUrl}/organizational-units`;
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
this.http.post<any>(postUrl, formData, { headers }).subscribe(
response => {
this.unitAdded.emit(response);
this.dialogRef.close({ success: true });
this.toastService.success('Creado exitosamente', 'Éxito');
},
error => {
console.error('Error al realizar POST:', error);
const errorMessages = error.error['hydra:description'].split('\n');
errorMessages.forEach((message: string) => {
const cleanedMessage = message.replace(/networkSettings\.(\w+):/, 'Error $1:');
this.toastService.error(cleanedMessage);
});
}
);
}
this.http.post<any>(postUrl, formData, { headers }).subscribe(
response => {
this.unitAdded.emit(response);
this.dialogRef.close({ success: true });
this.toastService.success('Creado exitosamente', 'Éxito');
},
error => {
console.error('Error al realizar POST:', error);
const errorMessages = error.error['hydra:description'].split('\n');
errorMessages.forEach((message: string) => {
const cleanedMessage = message.replace(/networkSettings\.(\w+):/, 'Error $1:');
this.toastService.error(cleanedMessage);
});
}
);
}
}
private propagateNetworkSettings() {
const propagateUrl = `${this.baseUrl}/organizational-units/${this.data.uuid}/propagate-network-settings`;
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
this.http.post<any>(propagateUrl, {}, { headers }).subscribe(
() => {
this.unitAdded.emit();
this.dialogRef.close({ success: true });
this.toastService.success('Editado y parámetros propagados exitosamente', 'Éxito');
},
error => {
console.error('Error al propagar parámetros:', error);
this.unitAdded.emit();
this.dialogRef.close({ success: true });
this.toastService.warning('Guardado, pero hubo un error al propagar los parámetros', 'Aviso');
}
);
}
getSelectedParentName(): string | undefined {
const parentId = this.generalFormGroup.get('parent')?.value;
return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;

14
ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.css
View File

@ -0,0 +1,14 @@
::ng-deep .mat-mdc-dialog-container {
max-height: 80vh;
}
::ng-deep .mat-mdc-dialog-content {
max-height: 65vh !important;
overflow-y: auto !important;
}
.info-content {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}

2
ogWebconsole/src/app/components/ogdhcp/server-info-dialog/server-info-dialog.component.html
View File

@ -1,6 +1,6 @@
<h2 mat-dialog-title>Información</h2>
<mat-dialog-content>
<pre>{{ data | json }}</pre>
<pre class="info-content">{{ data | json }}</pre>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button class="ordinary-button" mat-dialog-close>Cerrar</button>

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

@ -8,7 +8,7 @@
</div>
<div class="images-button-row">
<button class="action-button" (click)="openImageInfoDialog()">Ver Información</button>
<button disabled class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
<button class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
<button class="action-button" (click)="importImage()">
{{ 'importImageButton' | translate }}
</button>
@ -60,6 +60,12 @@
{{ image.partitionInfo?.osName }}
</div>
</ng-container>
<ng-container *ngIf="column.columnDef === 'datasize'">
<div>{{ formatSize(image.datasize) }}</div>
<div style="font-size: 0.75rem; color: gray;">
Comprimido: {{ formatSize(image.size) }}
</div>
</ng-container>
<ng-container *ngIf="column.columnDef === 'isGlobal'">
<mat-chip>
{{ image.image?.isGlobal ? 'Sí' : 'No' }}
@ -78,7 +84,7 @@
</mat-chip>
</ng-container>
<ng-container
*ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal' && column.columnDef !== 'name'">
*ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status' && column.columnDef !== 'isGlobal' && column.columnDef !== 'name' && column.columnDef !== 'datasize'">
{{ column.cell(image) }}
</ng-container>
</td>
@ -92,15 +98,17 @@
<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 mat-icon-button color="warn"
[matTooltip]="image.status === 'trash' ? 'Eliminar permanentemente' : 'Mover a papelera'"
(click)="toggleAction(image, image.status === 'trash' ? 'delete-permanent' : 'delete-trash')">
<mat-icon>{{ image.status === 'trash' ? 'delete_forever' : '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'"
<button mat-menu-item [disabled]="!image.imageFullsum || (image.status !== 'success' && image.status !== 'trash')"
(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>

25
ogWebconsole/src/app/components/repositories/show-monolitic-images/show-monolitic-images.component.ts
View File

@ -61,6 +61,11 @@ export class ShowMonoliticImagesComponent implements OnInit {
header: 'Estado',
cell: (image: any) => image.status
},
{
columnDef: 'datasize',
header: 'Tamaño',
cell: (image: any) => this.formatSize(image.datasize)
},
{
columnDef: 'description',
header: 'Descripción',
@ -144,17 +149,19 @@ export class ShowMonoliticImagesComponent implements OnInit {
showImageInfo(event: MouseEvent, image:any) {
event.stopPropagation();
this.loading = true;
this.loadImageAlert(image).subscribe(
response => {
this.alertMessage = response;
this.loading = false;
this.loadData();
this.dialog.open(ServerInfoDialogComponent, {
width: '800px',
data: {
message: this.alertMessage
}
});
this.loading = false;
},
error => {
this.toastService.error(error.error['hydra:description']);
@ -407,7 +414,7 @@ export class ShowMonoliticImagesComponent implements OnInit {
this.loading = true;
this.loadAlert().subscribe(
response => {
this.alertMessage = response.output;
this.alertMessage = response.details;
this.dialog.open(ServerInfoDialogComponent, {
width: '800px',
@ -427,5 +434,19 @@ export class ShowMonoliticImagesComponent implements OnInit {
this.dialogRef.close();
}
formatSize(bytes: string | number | null | undefined): string {
if (bytes === null || bytes === undefined || bytes === '') return '-';
const n = Number(bytes);
if (isNaN(n) || n === 0) return '-';
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let i = 0;
let value = n;
while (value >= 1024 && i < units.length - 1) {
value /= 1024;
i++;
}
return `${value.toFixed(2)} ${units[i]}`;
}
protected readonly isDevMode = isDevMode;
}

94
ogWebconsole/src/app/components/task-logs/task-logs.component.css
View File

@ -2,7 +2,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
padding: 6px 10px;
border-bottom: 1px solid #ddd;
background: white;
color: #333;
@ -56,10 +56,10 @@
}
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin: 20px 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
padding: 0 10px;
position: relative;
}
@ -119,12 +119,16 @@
.stat-card {
background: white;
border-radius: 12px;
padding: 20px;
border-radius: 20px;
padding: 8px 16px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 4px solid #667eea;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-left: none;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.stat-card.clickable {
@ -149,8 +153,8 @@
}
.stat-card.clickable:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.stat-card.clickable:active {
@ -238,6 +242,28 @@
color: #212529;
}
.stat-pending {
border-left-color: #ff9800;
background: #ff9800;
color: white;
}
.stat-pending .stat-number,
.stat-pending .stat-label {
color: white;
}
.stat-cancelled {
border-left-color: #9e9e9e;
background: #9e9e9e;
color: white;
}
.stat-cancelled .stat-number,
.stat-cancelled .stat-label {
color: white;
}
.stat-sent {
border-left-color: #b19cd9;
background: #b19cd9;
@ -250,23 +276,25 @@
}
.stat-number {
font-size: 2rem;
font-weight: bold;
font-size: 1.25rem;
font-weight: 700;
color: #667eea;
margin-bottom: 5px;
margin-bottom: 0;
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
font-size: 0.75rem;
color: #666;
font-weight: 500;
white-space: nowrap;
}
.filters-section {
background: #f8f9fa;
border-radius: 8px;
margin: 20px 0;
padding: 20px;
margin: 8px 0;
padding: 10px 16px;
border: 1px solid #e9ecef;
}
@ -274,7 +302,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
margin-bottom: 6px;
}
.filters-header-actions {
@ -315,25 +343,25 @@
.search-container {
display: flex;
flex-direction: column;
gap: 15px;
gap: 4px;
transition: all 0.3s ease;
}
.search-container.expanded {
gap: 20px;
gap: 8px;
}
.filter-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px;
align-items: end;
}
.advanced-filters {
border-top: 1px solid #dee2e6;
padding-top: 15px;
margin-top: 10px;
padding-top: 8px;
margin-top: 4px;
}
.calendar-button-row {
@ -360,22 +388,22 @@ table {
.search-string {
flex: 1;
padding: 5px;
padding: 0;
}
.search-boolean {
flex: 1;
padding: 5px;
padding: 0;
}
.search-select {
flex: 2;
padding: 5px;
padding: 0;
}
.search-date {
flex: 1;
padding: 5px;
padding: 0;
}
.mat-elevation-z8 {
@ -395,7 +423,7 @@ table {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
padding: 6px 16px;
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
@ -505,8 +533,8 @@ table {
.paginator-container {
display: flex;
justify-content: end;
margin: 20px 0;
justify-content: flex-end;
margin: 8px 0;
padding: 0 10px;
}
@ -667,7 +695,7 @@ button.cancel-button {
}
.stats-container {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.filter-row {

15
ogWebconsole/src/app/components/task-logs/task-logs.component.html
View File

@ -57,6 +57,20 @@
<div class="stat-number">{{ getStatusCount('in-progress') }}</div>
<div class="stat-label">{{ 'inProgress' | translate }}</div>
</div>
<div class="stat-card stat-pending clickable"
[class.active-filter]="isFilterActive('pending')"
(click)="filterByPending()"
matTooltip="Ver trazas pendientes">
<div class="stat-number">{{ getStatusCount('pending') }}</div>
<div class="stat-label">{{ 'pending' | translate }}</div>
</div>
<div class="stat-card stat-cancelled clickable"
[class.active-filter]="isFilterActive('cancelled')"
(click)="filterByCancelled()"
matTooltip="Ver trazas canceladas">
<div class="stat-number">{{ getStatusCount('cancelled') }}</div>
<div class="stat-label">{{ 'cancelled' | translate }}</div>
</div>
<div class="stat-card stat-sent clickable"
[class.active-filter]="isFilterActive('sent')"
(click)="filterBySent()"
@ -103,7 +117,6 @@
(click)="clearClientFilter($event, commandClientInput)">
<mat-icon>close</mat-icon>
</button>
<mat-hint>{{ 'enterClientName' | translate }}</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-select">

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

@ -116,6 +116,7 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
filteredCommands!: Observable<any[]>;
commandControl = new FormControl();
activeFilter: string = '';
private eventSource: EventSource | null = null;
constructor(private http: HttpClient,
private joyrideService: JoyrideService,
@ -145,10 +146,10 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
map(name => (name ? this._filterClients(name) : this.clients.slice()))
);
const eventSource = new EventSource(`${this.mercureUrl}?topic=`
this.eventSource = new EventSource(`${this.mercureUrl}?topic=`
+ encodeURIComponent(`traces`));
eventSource.onmessage = (event) => {
this.eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data && data['@id']) {
this.updateTracesStatus(data['@id'], data.status, data.progress);
@ -157,6 +158,9 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
if (this.eventSource) {
this.eventSource.close();
}
}
toggleFilters(): void {
@ -693,6 +697,20 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
this.loadTraces();
}
filterByPending(): void {
this.resetAllFilters();
this.filters['status'] = 'pending';
this.activeFilter = 'pending';
this.loadTraces();
}
filterByCancelled(): void {
this.resetAllFilters();
this.filters['status'] = 'cancelled';
this.activeFilter = 'cancelled';
this.loadTraces();
}
filterBySent(): void {
this.resetAllFilters();
this.filters['status'] = 'sent';
@ -716,6 +734,10 @@ export class TaskLogsComponent implements OnInit, OnDestroy {
return 'Trazas fallidas';
case 'in-progress':
return 'Trazas en progreso';
case 'pending':
return 'Trazas pendientes';
case 'cancelled':
return 'Trazas canceladas';
case 'sent':
return 'Trazas enviadas';
default:

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

@ -1,15 +1,16 @@
:host {
display: block;
}
mat-toolbar {
/*height: 7vh;*/
min-height: 65px;
min-width: 375px;
background: rgba(226, 232, 240, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: black;
position: fixed;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
@ -20,6 +21,15 @@ mat-toolbar {
padding: 0 16px;
}
.sidebar-toggle-button {
flex-shrink: 0;
color: #3f51b5 !important;
}
.sidebar-toggle-button .navbar-icon {
color: #3f51b5 !important;
}
/* Estilos específicos para el botón del sidebar */
.navbar-icon {
color: #3f51b5;
@ -67,6 +77,26 @@ mat-toolbar button[mat-icon-button]:hover {
cursor: pointer;
}
.download-agent-button {
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
color: inherit;
padding: 4px 10px !important;
font-size: 13px !important;
line-height: 1;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-weight: 400;
}
.download-icon {
font-size: 14px !important;
width: 14px !important;
height: 14px !important;
line-height: 14px !important;
}
.logout-button {
background-color: #f00e0e;
color: white;

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

@ -1,18 +1,25 @@
<mat-toolbar>
<button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral"
matTooltipShowDelay="1000" class="sidebar-toggle-button">
<mat-icon class="navbar-icon">menu</mat-icon>
</button>
<span class="navbar-title hide-on-small" matTooltip="Consola web de administración de Opengnsys"
matTooltipShowDelay="1000">
</span>
<div class="navbar-actions-row" *ngIf="!isSmallScreen">
<button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral"
matTooltipShowDelay="1000">
<mat-icon class="navbar-icon">menu</mat-icon>
</button>
<button routerLink="/commands-logs" mat-button>
<mat-icon class="trace-button" >notifications</mat-icon>
</button>
<div class="navbar-buttons-row">
<a class="ordinary-button download-agent-button" href="https://ognproject.evlt.uma.es/ogagent/" target="_blank" rel="noopener noreferrer"
matTooltip="Descargar el agente OGAgent" matTooltipShowDelay="1000">
<mat-icon class="download-icon">download</mat-icon>
{{ 'downloadAgent' | translate }}
</a>
<button class="ordinary-button" (click)="showGlobalStatus()">
{{ 'GlobalStatus' | translate }}
</button>
@ -36,10 +43,6 @@
<!-- Menú desplegable para pantallas pequeñas -->
<div *ngIf="isSmallScreen" class="isSmallScreenButtons">
<button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral"
matTooltipShowDelay="1000">
<mat-icon class="navbar-icon">menu</mat-icon>
</button>
<button class="trace-button" routerLink="/commands-logs" mat-button>
<mat-icon>notifications</mat-icon>
</button>
@ -47,6 +50,10 @@
<mat-icon>menu</mat-icon>
</button>
<mat-menu #smallScreenMenu="matMenu">
<a mat-menu-item href="https://ognproject.evlt.uma.es/ogagent/" target="_blank" rel="noopener noreferrer">
<mat-icon>download</mat-icon>
{{ 'downloadAgent' | translate }}
</a>
<button mat-menu-item (click)="showGlobalStatus()">
{{ 'GlobalStatus' | translate }}
</button>

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

@ -6,7 +6,6 @@ html, body {
.container {
height: 100%;
padding-top: 65px; /* Asegurar que el contenido no se superponga con el header fijo */
box-sizing: border-box;
}
@ -31,9 +30,7 @@ html, body {
background-color: #2a2a40;
}
/* Asegurar que el contenido principal tenga el espacio correcto */
.content {
padding-top: 0; /* El padding ya está en el container */
height: calc(100vh - 65px); /* Altura total menos el header */
height: 100%;
overflow: auto;
}

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

@ -50,6 +50,13 @@
<span>{{ 'tasks' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/commands-logs" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_TRACE_LOGS' | translate }}"
matTooltipShowDelay="1000" *ngIf="auth.userCategory !== 'ou-operator' && auth.userCategory !== 'ou-minimal'">
<span class="entry">
<mat-icon class="icon">chevron_right</mat-icon>
<span>{{ 'traceLogs' | translate }}</span>
</span>
</mat-list-item>
</mat-nav-list>
<mat-list-item routerLink="/subnets" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}"

6
ogWebconsole/src/app/services/auth.service.ts
View File

@ -15,6 +15,7 @@ interface JwtPayload {
id: number;
uuid: string;
groupsView: string;
clientsPerPage: number | null;
}
@Injectable({ providedIn: 'root' })
@ -94,6 +95,11 @@ export class AuthService {
return this.tokenPayload?.groupsView || null;
}
/** clientsPerPage del usuario */
get clientsPerPage(): number | null {
return this.tokenPayload?.clientsPerPage ?? null;
}
/**
* Devuelve el rol principal del usuario según prioridad.
*/

2
ogWebconsole/src/assets/config.json
View File

@ -1,5 +1,5 @@
{
"apiUrl": "https://192.168.68.62:8443",
"apiUrl": "https://127.0.0.1:8443",
"mercureUrl": "http://localhost:3000/.well-known/mercure",
"logUrl": "https://localhost:3030"
}

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

@ -1,4 +1,5 @@
{
"downloadAgent": "Download agent",
"Administration": "Administration",
"changePassword": "Change password",
"logout": "Logout",
@ -426,6 +427,75 @@
"TOOLTIP_COMMAND_GROUPS": "Manage command groups",
"tasks": "Tasks",
"TOOLTIP_TASKS": "View and manage scheduled tasks",
"traceLogs": "Trace logs",
"TOOLTIP_TRACE_LOGS": "View trace execution history",
"schedules": "Schedules",
"taskActions": "Actions",
"taskActionsTitle": "Task actions",
"taskActionsSequentialHint": "Actions are executed sequentially. If one action fails, subsequent actions are automatically cancelled.",
"newAction": "New Action",
"searchScriptContent": "Search script content",
"stepLabel": "Step",
"viewParameters": "View parameters",
"close": "Close",
"addActionTo": "Add action to",
"basicActions": "Basic Actions",
"selectBasicAction": "Select a basic system action",
"actionType": "Action Type",
"powerOnDevice": "Power On",
"shutdownDevice": "Shutdown",
"rebootDevice": "Reboot",
"loginSession": "Login",
"executionOrder": "Execution order",
"runScript": "Run Script",
"runCustomScript": "Run a custom script or create a new one",
"newScript": "New Script",
"savedScript": "Saved Script",
"enterScript": "Enter script",
"writeScriptHere": "Write your script here",
"saveScript": "Save Script",
"selectScriptToRun": "Select script to run",
"scriptLabel": "Script",
"enterParameters": "Enter parameters",
"valueFor": "Value for",
"manageTaskSchedules": "Manage task schedules for",
"newSchedule": "New Schedule",
"editSchedule": "Edit",
"createSchedule": "Create",
"taskSchedule": "Task Schedule",
"repetition": "Repetition",
"executionDate": "Execution date",
"executionTime": "Execution time",
"timeFormatHint": "Time in 24h format (e.g. 14:30)",
"weekDaysLabel": "Days of the week",
"monthsLabel": "Months",
"startDate": "Start date",
"endDate": "End date",
"enableSchedule": "Enable schedule",
"scheduleSummaryTitle": "Schedule Summary",
"nextExecution": "Next execution",
"willExecuteTimes": "Will execute {{count}} times",
"notCalculated": "Not calculated",
"notDefined": "Not defined",
"active": "Active",
"inactive": "Inactive",
"editScheduleTooltip": "Edit schedule",
"deleteScheduleTooltip": "Delete schedule",
"noActionsConfigured": "No actions configured.",
"searchScheduleLabel": "Search schedule",
"createTaskLabel": "Create task",
"addToExistingTask": "Add to existing task",
"selectTask": "Select a task",
"enterOrder": "Enter order",
"scopeLabel": "Scope",
"scopeOrganizationalUnit": "Organizational Unit",
"scopeClassroomsGroup": "Classrooms group",
"scopeClassroom": "Classrooms",
"scopeClientsGroup": "Client groups",
"scopeClients": "Clients",
"selectedClients": "Selected clients",
"preSelectedInfo": "Clients have been pre-selected from the image deployment component.",
"scheduleAfterCreate": "Do you want to schedule the task after creation?",
"dhcp": "DHCP",
"TOOLTIP_DHCP": "Configure and manage DHCP",
"TOOLTIP_DHCP_STATUS": "Current status of the DHCP service",
@ -506,6 +576,8 @@
"vistatarjeta": "Card View",
"ejecutarComandos": "Execute Commands",
"searchState": "Search state",
"directClientsToggle": "Current node only",
"directClientsToggleTooltip": "Show only equipment directly assigned to the selected node (no descendants)",
"executeCommands": {
"powerOn": "Power On",
"powerOff": "Shut Down",
@ -601,5 +673,27 @@
"manageHardwareTypes": "Manage hardware types",
"resolution": "Resolution",
"resolutionError": "Resolution is required",
"resolutionLabel": "Select resolution"
"resolutionLabel": "Select resolution",
"catImageOps": "Image operations",
"catImageOpsDesc": "Deploy or create images on devices",
"catPartition": "Partitioning",
"catPartitionDesc": "Partition and format disks",
"catSystemControl": "System control",
"catSystemControlDesc": "Power on, shut down, reboot or log in",
"catCustomScript": "Custom script",
"catCustomScriptDesc": "Run a new or saved script",
"deployImage": "Deploy image",
"createImage": "Create image",
"partitionAndFormat": "Partition and format",
"backToCategories": "Back to categories",
"systemActionHint": "This action will be executed directly on the devices assigned to the task. No additional configuration is needed.",
"assistantRequiredTitle": "Use the assistant from the device view",
"assistantRequiredDesc": "These operations need the device context to be configured correctly (disk size, existing partitions, available images). Use the dedicated assistants from the device or classroom view.",
"assistantStep1": "Go to a device or classroom in the navigation tree",
"assistantStep2": "Open the corresponding assistant (partitioning, deploy or create image)",
"assistantStep3": "In the assistant, select \"Queue\" to add the action to a scheduled task",
"supportedOpsLabel": "Operations available from the assistants",
"selectActionTypeError": "You must select an action type",
"executionOrderRequired": "You must specify the execution order",
"actionAddedSuccess": "Action added successfully"
}

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

@ -1,4 +1,5 @@
{
"downloadAgent": "Descargar OgAgent",
"Administration": "Administración",
"changePassword": "Cambiar contraseña",
"logout": "Cerrar sesión",
@ -427,6 +428,75 @@
"TOOLTIP_COMMAND_GROUPS": "Gestionar grupos de comandos",
"tasks": "Tareas",
"TOOLTIP_TASKS": "Ver y gestionar tareas programadas",
"traceLogs": "Logs de trazas",
"TOOLTIP_TRACE_LOGS": "Ver el historial de ejecución de trazas",
"schedules": "Programaciones",
"taskActions": "Acciones",
"taskActionsTitle": "Acciones de la tarea",
"taskActionsSequentialHint": "Las acciones se ejecutan en orden secuencial. Si una acción falla, las siguientes se cancelan automáticamente.",
"newAction": "Nueva Acción",
"searchScriptContent": "Buscar contenido de script",
"stepLabel": "Paso",
"viewParameters": "Ver parámetros",
"close": "Cerrar",
"addActionTo": "Añadir acción a",
"basicActions": "Acciones Básicas",
"selectBasicAction": "Selecciona una acción básica del sistema",
"actionType": "Tipo de Acción",
"powerOnDevice": "Encender Equipo",
"shutdownDevice": "Apagar Equipo",
"rebootDevice": "Reiniciar Equipo",
"loginSession": "Iniciar Sesión",
"executionOrder": "Orden de ejecución",
"runScript": "Ejecutar Script",
"runCustomScript": "Ejecuta un script personalizado o crea uno nuevo",
"newScript": "Nuevo Script",
"savedScript": "Script Guardado",
"enterScript": "Ingrese el script",
"writeScriptHere": "Escriba su script aquí",
"saveScript": "Guardar Script",
"selectScriptToRun": "Seleccione script a ejecutar",
"scriptLabel": "Script",
"enterParameters": "Ingrese los parámetros",
"valueFor": "Valor para",
"manageTaskSchedules": "Gestionar programaciones de tareas en",
"newSchedule": "Nueva Programación",
"editSchedule": "Editar",
"createSchedule": "Crear",
"taskSchedule": "Programación de Tarea",
"repetition": "Repetición",
"executionDate": "Fecha de ejecución",
"executionTime": "Hora de ejecución",
"timeFormatHint": "Hora en formato 24h (ej: 14:30)",
"weekDaysLabel": "Días de la semana",
"monthsLabel": "Meses",
"startDate": "Fecha de inicio",
"endDate": "Fecha de fin",
"enableSchedule": "Activar programación",
"scheduleSummaryTitle": "Resumen de la Programación",
"nextExecution": "Próxima ejecución",
"willExecuteTimes": "Se ejecutará {{count}} veces",
"notCalculated": "No calculada",
"notDefined": "No definido",
"active": "Activo",
"inactive": "Inactivo",
"editScheduleTooltip": "Editar programación",
"deleteScheduleTooltip": "Eliminar programación",
"noActionsConfigured": "No hay acciones configuradas.",
"searchScheduleLabel": "Buscar programación",
"createTaskLabel": "Crear tarea",
"addToExistingTask": "Introducir en tarea existente",
"selectTask": "Seleccione una tarea",
"enterOrder": "Introduce el orden",
"scopeLabel": "Ámbito",
"scopeOrganizationalUnit": "Unidad Organizativa",
"scopeClassroomsGroup": "Grupo de aulas",
"scopeClassroom": "Aulas",
"scopeClientsGroup": "Grupos de clientes",
"scopeClients": "Clientes",
"selectedClients": "Clientes seleccionados",
"preSelectedInfo": "Los clientes han sido pre-seleccionados desde el componente de despliegue de imágenes.",
"scheduleAfterCreate": "¿Quieres programar la tarea al finalizar su creación?",
"dhcp": "DHCP",
"TOOLTIP_DHCP": "Configurar y administrar DHCP",
"TOOLTIP_DHCP_STATUS": "Estado actual del servicio DHCP",
@ -507,6 +577,8 @@
"vistatarjeta": "Vista Tarjeta",
"ejecutarComandos": "Ejecutar Comandos",
"searchState": "Buscar por estado",
"directClientsToggle": "Solo nodo actual",
"directClientsToggleTooltip": "Mostrar solo los equipos directamente asignados al nodo seleccionado (sin descendientes)",
"executeCommands": {
"powerOn": "Encender",
"powerOff": "Apagar",
@ -606,6 +678,28 @@
"manageHardwareTypes": "Administrar tipos de hardware",
"resolution": "Resolución",
"resolutionError": "La resolución es requerida",
"resolutionLabel": "Seleccionar resolución"
"resolutionLabel": "Seleccionar resolución",
"catImageOps": "Operaciones de imagen",
"catImageOpsDesc": "Desplegar o crear imágenes en los equipos",
"catPartition": "Particionado",
"catPartitionDesc": "Particionar y formatear discos",
"catSystemControl": "Control del equipo",
"catSystemControlDesc": "Encender, apagar, reiniciar o iniciar sesión",
"catCustomScript": "Script personalizado",
"catCustomScriptDesc": "Ejecutar un script nuevo o guardado",
"deployImage": "Desplegar imagen",
"createImage": "Crear imagen",
"partitionAndFormat": "Particionar y formatear",
"backToCategories": "Volver a categorías",
"systemActionHint": "Esta acción se ejecutará directamente sobre los equipos asignados a la tarea. No requiere configuración adicional.",
"assistantRequiredTitle": "Usa el asistente desde la vista del equipo",
"assistantRequiredDesc": "Estas operaciones necesitan el contexto del equipo para configurarse correctamente (tamaño de disco, particiones existentes, imágenes disponibles). Usa los asistentes dedicados desde la vista del equipo o aula.",
"assistantStep1": "Ve a la vista de un equipo o aula en el árbol de navegación",
"assistantStep2": "Abre el asistente correspondiente (particionado, deploy o crear imagen)",
"assistantStep3": "En el asistente, selecciona \"Encolar\" para añadir la acción a una tarea programada",
"supportedOpsLabel": "Operaciones disponibles desde los asistentes",
"selectActionTypeError": "Debe seleccionar un tipo de acción",
"executionOrderRequired": "Debe especificar el orden de ejecución",
"actionAddedSuccess": "Acción añadida con éxito"
}

5
ogWebconsole/test-results/ogGui-junit-report.xml
View File

@ -1,3 +1,4 @@
<<<<<<< Updated upstream
<?xml version="1.0"?>
<testsuite name="Chrome Headless 131.0.0.0 (Linux x86_64)" package="" timestamp="2024-12-09T10:14:38" id="0" hostname="alvaro-Latitude-3420" tests="80" errors="0" failures="0" time="2.257">
<properties>
@ -92,4 +93,6 @@
]]>
</system-out>
<system-err/>
</testsuite>
</testsuite>
=======
>>>>>>> Stashed changes