refs #1984. Modify image ogGit
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
parent
d6a092ce75
commit
0248067d14
|
|
@ -263,10 +263,6 @@ export class CreateClientImageComponent implements OnInit{
|
|||
this.toastService.error('Debes seleccionar un repositorio Git');
|
||||
return;
|
||||
}
|
||||
if (this.gitAction === 'update' && !this.selectedExistingImage) {
|
||||
this.toastService.error('Debes seleccionar un repositorio de imágenes Git');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.imageType === 'monolithic') {
|
||||
|
|
@ -295,24 +291,39 @@ export class CreateClientImageComponent implements OnInit{
|
|||
if (result !== undefined) {
|
||||
this.loading = true;
|
||||
|
||||
let payload: any = {
|
||||
client: `/clients/${this.clientId}`,
|
||||
partition: this.selectedPartition['@id'],
|
||||
source: 'assistant',
|
||||
type: this.imageType,
|
||||
queue: result
|
||||
};
|
||||
let endpoint: string;
|
||||
let payload: any;
|
||||
|
||||
if (this.imageType === 'git') {
|
||||
payload.gitRepository = this.selectedGitRepository.name
|
||||
payload.name = this.selectedGitRepository.name;
|
||||
|
||||
if (this.gitAction === 'create') {
|
||||
payload.action = 'create';
|
||||
if (this.gitAction === 'update') {
|
||||
endpoint = `${this.baseUrl}/git-repositories/update-image`;
|
||||
payload = {
|
||||
client: `/clients/${this.clientId}`,
|
||||
partition: this.selectedPartition['@id'],
|
||||
gitRepository: this.selectedGitRepository.name,
|
||||
queue: result
|
||||
};
|
||||
} else {
|
||||
payload.action = 'update';
|
||||
endpoint = `${this.baseUrl}/images`;
|
||||
payload = {
|
||||
client: `/clients/${this.clientId}`,
|
||||
partition: this.selectedPartition['@id'],
|
||||
type: this.imageType,
|
||||
gitRepository: this.selectedGitRepository.name,
|
||||
name: this.selectedGitRepository.name,
|
||||
action: 'create',
|
||||
queue: result
|
||||
};
|
||||
}
|
||||
} else {
|
||||
endpoint = `${this.baseUrl}/images`;
|
||||
payload = {
|
||||
client: `/clients/${this.clientId}`,
|
||||
partition: this.selectedPartition['@id'],
|
||||
type: this.imageType,
|
||||
queue: result
|
||||
};
|
||||
|
||||
if (this.monolithicAction === 'create') {
|
||||
payload.name = this.name;
|
||||
payload.action = 'create';
|
||||
|
|
@ -322,7 +333,7 @@ export class CreateClientImageComponent implements OnInit{
|
|||
}
|
||||
}
|
||||
|
||||
this.http.post(`${this.baseUrl}/images`, payload)
|
||||
this.http.post(endpoint, payload)
|
||||
.subscribe({
|
||||
next: (response) => {
|
||||
let actionText = 'creación';
|
||||
|
|
|
|||
|
|
@ -519,4 +519,73 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
.commits-table-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
color: white !important;
|
||||
border-radius: 20px !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 12px !important;
|
||||
padding: 8px 16px !important;
|
||||
margin: 2px !important;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary:hover {
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-chip.mat-standard-chip.mat-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
color: white !important;
|
||||
border-radius: 20px !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 12px !important;
|
||||
padding: 8px 16px !important;
|
||||
margin: 2px !important;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-chip.mat-standard-chip.mat-primary:hover {
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
|
||||
}
|
||||
|
||||
::ng-deep .custom-tag-chip.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
|
||||
background: rgba(102, 126, 234, 0.1) !important;
|
||||
color: #667eea !important;
|
||||
border: 1px solid rgba(102, 126, 234, 0.3) !important;
|
||||
border-radius: 8px !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 10px !important;
|
||||
padding: 2px 6px !important;
|
||||
margin: 1px !important;
|
||||
box-shadow: none !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
::ng-deep .custom-tag-chip.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary:hover {
|
||||
background: rgba(102, 126, 234, 0.15) !important;
|
||||
border-color: rgba(102, 126, 234, 0.5) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.no-tags-text {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
border: 1px dashed #dee2e6;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -129,11 +129,18 @@
|
|||
</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>
|
||||
|
||||
<!-- Tabla de commits (solo si imageType === 'git') -->
|
||||
<div *ngIf="imageType === 'git' && commits.length > 0" class="commits-table-container">
|
||||
<table mat-table [dataSource]="commits" class="mat-elevation-z8">
|
||||
<div *ngIf="imageType === 'git' && filteredCommits.length > 0" class="commits-table-container">
|
||||
<table mat-table [dataSource]="filteredCommits" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="select">
|
||||
<th mat-header-cell *matHeaderCellDef>Seleccionar</th>
|
||||
<td mat-cell *matCellDef="let commit">
|
||||
|
|
@ -162,8 +169,11 @@
|
|||
<th mat-header-cell *matHeaderCellDef>Tags</th>
|
||||
<td mat-cell *matCellDef="let commit">
|
||||
<mat-chip-list>
|
||||
<mat-chip *ngFor="let tag of commit.tags" color="primary" selected>{{ tag }}</mat-chip>
|
||||
<span *ngIf="!commit.tags || commit.tags.length === 0" style="color: #999; font-style: italic;">Sin tags</span>
|
||||
<mat-chip *ngFor="let tag of commit.tags" color="primary" selected class="custom-tag-chip"
|
||||
style="background: rgba(102, 126, 234, 0.1) !important; color: #667eea !important; border: 1px solid rgba(102, 126, 234, 0.3) !important; border-radius: 8px !important; font-weight: 500 !important; font-size: 10px !important; padding: 2px 6px !important; margin: 1px !important; box-shadow: none !important;">
|
||||
{{ tag }}
|
||||
</mat-chip>
|
||||
<span *ngIf="!commit.tags || commit.tags.length === 0" class="no-tags-text">Sin tags</span>
|
||||
</mat-chip-list>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
|
@ -172,7 +182,6 @@
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Selector de método y de imagen solo si imageType === 'monolithic' -->
|
||||
<div class="monolithic-row" *ngIf="imageType === 'monolithic'">
|
||||
<mat-form-field appearance="fill" class="half-width">
|
||||
<mat-label>Seleccione método de deploy</mat-label>
|
||||
|
|
|
|||
|
|
@ -109,6 +109,9 @@ export class DeployImageComponent implements OnInit{
|
|||
selectedCommit: any = null;
|
||||
private initialGitLoad = true;
|
||||
|
||||
showOnlyTagged: boolean = false;
|
||||
filteredCommits: any[] = [];
|
||||
|
||||
constructor(
|
||||
private http: HttpClient,
|
||||
private toastService: ToastrService,
|
||||
|
|
@ -387,7 +390,7 @@ export class DeployImageComponent implements OnInit{
|
|||
}
|
||||
|
||||
if (this.imageType === 'git') {
|
||||
if (!this.selectedCommit) {
|
||||
if (!this.selectedCommit || this.filteredCommits.length === 0) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -519,7 +522,9 @@ export class DeployImageComponent implements OnInit{
|
|||
this.selectedBranch = '';
|
||||
this.branches = [];
|
||||
this.commits = [];
|
||||
this.filteredCommits = [];
|
||||
this.selectedCommit = null;
|
||||
this.showOnlyTagged = false;
|
||||
this.loadGitBranches();
|
||||
}
|
||||
|
||||
|
|
@ -545,6 +550,8 @@ export class DeployImageComponent implements OnInit{
|
|||
onGitBranchChange() {
|
||||
this.selectedCommit = null;
|
||||
this.commits = [];
|
||||
this.filteredCommits = [];
|
||||
this.showOnlyTagged = false;
|
||||
this.loadGitCommits();
|
||||
}
|
||||
|
||||
|
|
@ -558,6 +565,12 @@ export class DeployImageComponent implements OnInit{
|
|||
data => {
|
||||
this.commits = data.commits || [];
|
||||
this.loadingCommits = false;
|
||||
this.filterCommits();
|
||||
if (this.filteredCommits.length > 0) {
|
||||
this.selectedCommit = this.filteredCommits.reduce((a, b) =>
|
||||
new Date(a.committed_date * 1000) > new Date(b.committed_date * 1000) ? a : b
|
||||
);
|
||||
}
|
||||
},
|
||||
error => {
|
||||
this.toastService.error('Error al cargar los commits');
|
||||
|
|
@ -565,4 +578,23 @@ export class DeployImageComponent implements OnInit{
|
|||
}
|
||||
);
|
||||
}
|
||||
|
||||
filterCommits() {
|
||||
if (this.showOnlyTagged) {
|
||||
this.filteredCommits = this.commits.filter(commit =>
|
||||
commit.tags && commit.tags.length > 0
|
||||
);
|
||||
} else {
|
||||
this.filteredCommits = this.commits;
|
||||
}
|
||||
}
|
||||
|
||||
onTagFilterChange() {
|
||||
this.filterCommits();
|
||||
if (this.filteredCommits.length > 0 && !this.filteredCommits.includes(this.selectedCommit)) {
|
||||
this.selectedCommit = this.filteredCommits.reduce((a, b) =>
|
||||
new Date(a.committed_date * 1000) > new Date(b.committed_date * 1000) ? a : b
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -709,6 +709,454 @@
|
|||
margin: 5px 0 !important;
|
||||
}
|
||||
|
||||
/* ===== LAYOUT PRINCIPAL ===== */
|
||||
.partition-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* ===== BARRA DE PROGRESO DE PARTICIONES ===== */
|
||||
.partition-progress-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.progress-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.disk-info-summary {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.disk-info-summary span {
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.total-size {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.used-size {
|
||||
background: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.free-size {
|
||||
background: #e8f5e8;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.partition-progress-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.progress-segments {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 2px solid #e0e0e0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.progress-segment {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.progress-segment:hover {
|
||||
filter: brightness(1.2);
|
||||
transform: scale(1.02);
|
||||
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.progress-segment:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.progress-segment.removed {
|
||||
opacity: 0.3;
|
||||
background: #ccc !important;
|
||||
}
|
||||
|
||||
.progress-segment.free-space {
|
||||
background: linear-gradient(45deg, #e8f5e8, #c8e6c9);
|
||||
border-left: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.segment-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.partition-number {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.partition-percentage {
|
||||
font-size: 10px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.free-label {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.free-percentage {
|
||||
font-size: 10px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ===== LEYENDA DE PARTICIONES ===== */
|
||||
.partition-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e9ecef;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.legend-item:hover {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.legend-item.removed {
|
||||
opacity: 0.5;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.legend-item:hover .legend-color {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.legend-color.free-color {
|
||||
background: linear-gradient(45deg, #e8f5e8, #c8e6c9);
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.legend-size {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
background: #f8f9fa;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
/* ===== TABLA MAT-TABLE ===== */
|
||||
.table-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e0e0e0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
padding: 20px 24px 16px 24px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.table-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.partition-mat-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.partition-mat-table .mat-header-cell {
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding: 16px 12px;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.partition-mat-table .mat-cell {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #f1f3f4;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.partition-mat-table .mat-row:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Campos compactos para la tabla */
|
||||
.compact-form-field {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.compact-form-field .mat-form-field-wrapper {
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.compact-form-field .mat-form-field-infix {
|
||||
padding: 2px 0;
|
||||
min-height: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.compact-form-field .mat-form-field-outline {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.compact-form-field .mat-form-field-outline-start,
|
||||
.compact-form-field .mat-form-field-outline-end {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.compact-form-field .mat-form-field-outline-gap {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
/* Estilos para inputs y selects compactos */
|
||||
.compact-form-field input,
|
||||
.compact-form-field .mat-select {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.compact-form-field .mat-select-value {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Reducir el padding de las celdas de la tabla */
|
||||
.partition-mat-table .mat-cell {
|
||||
padding: 6px 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.partition-mat-table .mat-header-cell {
|
||||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
/* Hacer los inputs más pequeños */
|
||||
.compact-form-field .mat-form-field-infix {
|
||||
padding: 2px 0;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
/* Ajustar el tamaño de los selects */
|
||||
.compact-form-field .mat-select-trigger {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Ajustar el tamaño de los inputs numéricos */
|
||||
.compact-form-field input[type="number"] {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* Reducir el espacio del wrapper del form field */
|
||||
.compact-form-field .mat-form-field-wrapper {
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Ajustar el espacio del outline */
|
||||
.compact-form-field .mat-form-field-outline {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.compact-form-field .mat-form-field-outline-start,
|
||||
.compact-form-field .mat-form-field-outline-end,
|
||||
.compact-form-field .mat-form-field-outline-gap {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
/* Checkbox en la tabla */
|
||||
.partition-mat-table .mat-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Botón de eliminar */
|
||||
.partition-mat-table .mat-icon-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.partition-mat-table .mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.partition-layout {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.disk-info-summary {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.partition-legend {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.partition-mat-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.compact-form-field {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.progress-segments {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.segment-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.partition-number {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.partition-percentage {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.partition-mat-table .mat-header-cell,
|
||||
.partition-mat-table .mat-cell {
|
||||
padding: 8px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== ANIMACIONES ===== */
|
||||
.progress-segment {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== ESTADOS DE ADVERTENCIA ===== */
|
||||
/* Advertencia (90% a 99% usado) */
|
||||
.warning {
|
||||
|
|
@ -847,3 +1295,4 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -256,18 +256,21 @@
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<div class="chart-container" *ngIf="selectedDisk">
|
||||
<div class="chart-container" *ngIf="selectedDisk" #chartContainer>
|
||||
<div class="chart-header">
|
||||
<h3>Distribución de Particiones</h3>
|
||||
</div>
|
||||
<ngx-charts-pie-chart
|
||||
[results]="selectedDisk.chartData"
|
||||
[doughnut]="true"
|
||||
[gradient]="true"
|
||||
[labels]="true"
|
||||
[tooltipDisabled]="false"
|
||||
[animations]="true">
|
||||
</ngx-charts-pie-chart>
|
||||
<div class="chart-wrapper">
|
||||
<ngx-charts-pie-chart
|
||||
[results]="selectedDisk.chartData"
|
||||
[doughnut]="true"
|
||||
[gradient]="true"
|
||||
[labels]="true"
|
||||
[tooltipDisabled]="false"
|
||||
[animations]="true"
|
||||
[view]="view">
|
||||
</ngx-charts-pie-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core';
|
||||
import {Component, EventEmitter, Inject, Input, OnInit, Output, AfterViewInit, OnDestroy, ViewChild, ElementRef, HostListener} from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
|
|
@ -8,6 +8,9 @@ import { ConfigService } from '@services/config.service';
|
|||
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";
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil, debounceTime } from 'rxjs/operators';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
|
||||
interface Partition {
|
||||
uuid?: string;
|
||||
|
|
@ -28,7 +31,7 @@ interface Partition {
|
|||
templateUrl: './partition-assistant.component.html',
|
||||
styleUrls: ['./partition-assistant.component.css']
|
||||
})
|
||||
export class PartitionAssistantComponent implements OnInit{
|
||||
export class PartitionAssistantComponent implements OnInit, AfterViewInit, OnDestroy{
|
||||
baseUrl: string;
|
||||
private apiUrl: string;
|
||||
@Output() dataChange = new EventEmitter<any>();
|
||||
|
|
@ -47,6 +50,10 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
runScriptContext: any = null;
|
||||
showInstructions = false;
|
||||
|
||||
@ViewChild('chartContainer', { static: false }) chartContainer!: ElementRef;
|
||||
private destroy$ = new Subject<void>();
|
||||
private resizeSubject = new Subject<void>();
|
||||
|
||||
view: [number, number] = [300, 200];
|
||||
showLegend = true;
|
||||
showLabels = true;
|
||||
|
|
@ -55,6 +62,17 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
selectedModelClient: any = null;
|
||||
partitionCode: string = '';
|
||||
generatedInstructions: string = '';
|
||||
|
||||
// Columnas para mat-table
|
||||
displayedColumns: string[] = ['partitionNumber', 'partitionCode', 'filesystem', 'size', 'percentage', 'format', 'actions'];
|
||||
|
||||
// Paleta de colores para las particiones
|
||||
private partitionColors = [
|
||||
'#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
|
||||
'#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9',
|
||||
'#F8C471', '#82E0AA', '#F1948A', '#85C1E9', '#D7BDE2',
|
||||
'#A8E6CF', '#FFD3B6', '#FFAAA5', '#DCEDC8', '#FFE0B2'
|
||||
];
|
||||
|
||||
constructor(
|
||||
private http: HttpClient,
|
||||
|
|
@ -90,6 +108,48 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
this.route.queryParams.subscribe(params => {
|
||||
this.runScriptContext = params['runScriptContext'] ? JSON.parse(params['runScriptContext']) : null;
|
||||
});
|
||||
|
||||
this.resizeSubject.pipe(
|
||||
takeUntil(this.destroy$),
|
||||
debounceTime(100)
|
||||
).subscribe(() => {
|
||||
this.resizeChart();
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
setTimeout(() => {
|
||||
this.resizeChart();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
@HostListener('window:resize')
|
||||
onResize(): void {
|
||||
this.resizeSubject.next();
|
||||
}
|
||||
|
||||
private resizeChart(): void {
|
||||
if (this.chartContainer && this.chartContainer.nativeElement) {
|
||||
const container = this.chartContainer.nativeElement;
|
||||
const width = container.offsetWidth;
|
||||
|
||||
if (width > 0) {
|
||||
const height = Math.max(250, Math.min(450, width * 0.7));
|
||||
|
||||
if (Math.abs(this.view[0] - width) > 10 || Math.abs(this.view[1] - height) > 10) {
|
||||
this.view = [width, height];
|
||||
|
||||
setTimeout(() => {
|
||||
this.view = [...this.view];
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get selectedDisk():any {
|
||||
|
|
@ -135,7 +195,6 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
initializeDisks() {
|
||||
this.disks = [];
|
||||
|
||||
// Verificar que hay datos válidos
|
||||
if (!this.data || !this.data.partitions || !Array.isArray(this.data.partitions)) {
|
||||
console.warn('No hay datos de particiones válidos');
|
||||
return;
|
||||
|
|
@ -161,10 +220,10 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
size: this.convertBytesToGB(partition.partitionNumber === 1 && this.partitionCode === 'GPT' ? 512 : partition.size),
|
||||
memoryUsage: partition.memoryUsage,
|
||||
partitionCode: partition.partitionNumber === 1 && this.partitionCode === 'GPT' ? 'EFI' : partition.partitionCode,
|
||||
filesystem: partition.filesystem,
|
||||
filesystem: partition.partitionNumber === 1 && this.partitionCode === 'GPT' ? 'FAT32' : partition.filesystem,
|
||||
sizeBytes: partition.partitionNumber === 1 && this.partitionCode === 'GPT' ? 512 : partition.size,
|
||||
format: false,
|
||||
color: '#1f1b91',
|
||||
color: this.getColorForPartition(partition.partitionNumber),
|
||||
percentage: 0,
|
||||
removed: false
|
||||
});
|
||||
|
|
@ -267,12 +326,17 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
memoryUsage: 0,
|
||||
sizeBytes: 0,
|
||||
format: false,
|
||||
color: '#' + Math.floor(Math.random() * 16777215).toString(16),
|
||||
color: this.getNextPartitionColor(),
|
||||
percentage: 0,
|
||||
removed: false
|
||||
});
|
||||
this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize);
|
||||
this.updateDiskChart(disk);
|
||||
|
||||
// Redimensionar el gráfico después de añadir partición
|
||||
setTimeout(() => {
|
||||
this.resizeChart();
|
||||
}, 100);
|
||||
} else {
|
||||
this.toastService.error('No hay suficiente espacio libre en el disco para crear una nueva partición.');
|
||||
}
|
||||
|
|
@ -389,6 +453,11 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
|
||||
this.updateDiskChart(disk);
|
||||
this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize);
|
||||
|
||||
// Redimensionar el gráfico después de eliminar partición
|
||||
setTimeout(() => {
|
||||
this.resizeChart();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -433,6 +502,11 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
disk.chartData = this.generateChartData(disk.partitions);
|
||||
disk.used = this.calculateUsedSpace(disk.partitions);
|
||||
disk.percentage = (disk.used / disk.totalDiskSize) * 100;
|
||||
|
||||
// Redimensionar el gráfico después de actualizar los datos
|
||||
setTimeout(() => {
|
||||
this.resizeChart();
|
||||
}, 50);
|
||||
}
|
||||
|
||||
openScheduleModal(): void {
|
||||
|
|
@ -502,6 +576,11 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
onDiskSelectionChange() {
|
||||
if (this.selectedDiskNumber) {
|
||||
this.scrollToPartitionTable();
|
||||
|
||||
// Redimensionar el gráfico después de cambiar de disco
|
||||
setTimeout(() => {
|
||||
this.resizeChart();
|
||||
}, 150);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -536,4 +615,46 @@ export class PartitionAssistantComponent implements OnInit{
|
|||
console.error('No se encontró el botón execute-button');
|
||||
}
|
||||
}
|
||||
|
||||
getPartitionsDataSource(): MatTableDataSource<Partition> {
|
||||
return new MatTableDataSource<Partition>(this.selectedDisk?.partitions || []);
|
||||
}
|
||||
|
||||
getPartitionIndex(partition: Partition): number {
|
||||
return this.selectedDisk?.partitions.findIndex((p: Partition) => p.uuid === partition.uuid) || -1;
|
||||
}
|
||||
|
||||
getFreeSpacePercentage(): number {
|
||||
if (!this.selectedDisk) return 0;
|
||||
return this.selectedDisk.totalDiskSize > 0 ?
|
||||
((this.selectedDisk.totalDiskSize - this.selectedDisk.used) / this.selectedDisk.totalDiskSize) * 100 : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Asigna un color único a una nueva partición
|
||||
*/
|
||||
private getNextPartitionColor(): string {
|
||||
if (!this.selectedDisk) return this.partitionColors[0];
|
||||
|
||||
const usedColors = this.selectedDisk.partitions
|
||||
.filter((p: Partition) => !p.removed)
|
||||
.map((p: Partition) => p.color);
|
||||
|
||||
// Buscar el primer color no usado
|
||||
for (const color of this.partitionColors) {
|
||||
if (!usedColors.includes(color)) {
|
||||
return color;
|
||||
}
|
||||
}
|
||||
|
||||
// Si todos están usados, generar uno aleatorio
|
||||
return this.partitionColors[Math.floor(Math.random() * this.partitionColors.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* Asigna un color basado en el número de partición
|
||||
*/
|
||||
private getColorForPartition(partitionNumber: number): string {
|
||||
return this.partitionColors[(partitionNumber - 1) % this.partitionColors.length];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue