develop #69
|
|
@ -107,12 +107,16 @@
|
|||
/* Layout horizontal: imagen + partición */
|
||||
.deploy-config-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.image-config-section {
|
||||
flex: 0 0 340px;
|
||||
min-width: 0;
|
||||
max-width: 340px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-config-section .filters-row {
|
||||
|
|
@ -125,11 +129,26 @@
|
|||
width: 100% !important;
|
||||
}
|
||||
|
||||
.partition-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.partition-select-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.deploy-mode-row {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.form-section-title mat-icon {
|
||||
color: #667eea;
|
||||
font-size: 24px;
|
||||
|
|
@ -343,27 +362,60 @@ table {
|
|||
/* Resumen de configuración avanzada */
|
||||
.method-config-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 8px 12px;
|
||||
background: #f0f4ff;
|
||||
border: 1px solid #d0d9ff;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.summary-top-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.summary-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.summary-header-icon {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #667eea;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.summary-header-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.summary-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.summary-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #667eea;
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #28a745;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -374,6 +426,39 @@ table {
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Estado pendiente de configurar método */
|
||||
.method-config-pending {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
background: #fff8e1;
|
||||
border: 1px solid #ffe082;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.pending-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pending-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #f9a825;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pending-text {
|
||||
font-size: 12px;
|
||||
color: #795548;
|
||||
}
|
||||
|
||||
/* Mensajes de error */
|
||||
|
|
@ -764,9 +849,9 @@ table {
|
|||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px 20px;
|
||||
background: #f7faff;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8ff;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.deploy-mode-label {
|
||||
|
|
|
|||
|
|
@ -157,9 +157,51 @@
|
|||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Configuración avanzada del método (Multicast / P2P) -->
|
||||
@if (imageType === 'monolithic' && selectedMethod && needsAdvancedConfig(selectedMethod)) {
|
||||
@if (methodConfigured) {
|
||||
<div class="method-config-summary">
|
||||
<div class="summary-top-row">
|
||||
<div class="summary-header">
|
||||
<mat-icon class="summary-header-icon">tune</mat-icon>
|
||||
<span class="summary-header-label">Parámetros de {{ getMethodLabel() }}</span>
|
||||
</div>
|
||||
<button mat-icon-button matTooltip="Editar parámetros de {{ getMethodLabel() }}" (click)="openMethodConfigDialog()">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="summary-content">
|
||||
<mat-icon class="summary-icon">check_circle</mat-icon>
|
||||
<span class="summary-text">{{ getMethodConfigSummary() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="method-config-pending">
|
||||
<div class="pending-message">
|
||||
<mat-icon class="pending-icon">warning</mat-icon>
|
||||
<span class="pending-text">Se requiere configurar los parámetros de {{ getMethodLabel() }}</span>
|
||||
</div>
|
||||
<button mat-stroked-button color="primary" (click)="openMethodConfigDialog()">
|
||||
<mat-icon>settings</mat-icon>
|
||||
Configurar {{ getMethodLabel() }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
<div *ngIf="errorMessage" class="error-message">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Columna derecha: modo de operación + partición -->
|
||||
<div class="partition-column">
|
||||
|
||||
<!-- Modo de despliegue: solo visible para métodos no-direct -->
|
||||
@if (imageType === 'monolithic' && selectedMethod && !isDirectMethod()) {
|
||||
<div class="form-section-row">
|
||||
<div class="form-section-row deploy-mode-row">
|
||||
<div class="deploy-mode-label">
|
||||
<mat-icon>cached</mat-icon>
|
||||
<span>Modo de operación</span>
|
||||
|
|
@ -187,21 +229,6 @@
|
|||
</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">
|
||||
|
|
@ -253,6 +280,8 @@
|
|||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div><!-- /partition-column -->
|
||||
</div>
|
||||
|
||||
<!-- Tabla de commits Git (solo cuando hay commits cargados) -->
|
||||
|
|
|
|||
|
|
@ -274,11 +274,10 @@ export class DeployImageComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
this.errorMessage = "";
|
||||
this.methodConfigured = false;
|
||||
|
||||
if (this.selectedMethod && this.needsAdvancedConfig(this.selectedMethod)) {
|
||||
this.openMethodConfigDialog();
|
||||
} else {
|
||||
this.methodConfigured = false;
|
||||
}
|
||||
|
||||
return true;
|
||||
|
|
@ -288,6 +287,16 @@ export class DeployImageComponent implements OnInit {
|
|||
return ['udpcast', 'uftp', 'udpcast-direct', 'p2p'].includes(method);
|
||||
}
|
||||
|
||||
getMethodLabel(): string {
|
||||
const labels: Record<string, string> = {
|
||||
'udpcast': 'Multicast',
|
||||
'uftp': 'UFTP',
|
||||
'udpcast-direct': 'Multicast (directo)',
|
||||
'p2p': 'Torrent (P2P)',
|
||||
};
|
||||
return this.selectedMethod ? (labels[this.selectedMethod] || this.selectedMethod) : '';
|
||||
}
|
||||
|
||||
openMethodConfigDialog(): void {
|
||||
const dialogRef = this.dialog.open(DeployMethodConfigDialogComponent, {
|
||||
width: '540px',
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export class ManageRepositoryComponent implements OnInit {
|
|||
this.http.put(`${this.baseUrl}${this.repositoryId}`, payload).subscribe(
|
||||
(response) => {
|
||||
this.toastService.success('Repositorio editada correctamente');
|
||||
this.dialogRef.close();
|
||||
this.dialogRef.close(true);
|
||||
},
|
||||
(error) => {
|
||||
this.toastService.error(error['error']['hydra:description']);
|
||||
|
|
@ -83,7 +83,7 @@ export class ManageRepositoryComponent implements OnInit {
|
|||
this.http.post(`${this.baseUrl}/image-repositories`, payload).subscribe(
|
||||
(response) => {
|
||||
this.toastService.success('Repositorio añadido correctamente');
|
||||
this.dialogRef.close();
|
||||
this.dialogRef.close(true);
|
||||
},
|
||||
(error) => {
|
||||
this.toastService.error(error['error']['hydra:description']);
|
||||
|
|
|
|||
Loading…
Reference in New Issue