From 629a00dedf050db8ebbd5183d0fba0e0e901ab3a Mon Sep 17 00:00:00 2001 From: jmbardallo Date: Tue, 31 Mar 2026 09:25:49 +0200 Subject: [PATCH 1/2] =?UTF-8?q?Creado=20componente=20compartido=20para=20m?= =?UTF-8?q?ostrar=20la=20selecci=C3=B3n=20de=20particiones=20en=20los=20co?= =?UTF-8?q?mandos=20crear=20imagen=20y=20deploy=20de=20imagenes=20con=20un?= =?UTF-8?q?=20dise=C3=B1o=20separado=20por=20disco?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ogWebconsole/src/app/app.module.ts | 3 +- .../create-image/create-image.component.html | 40 +--- .../create-image/create-image.component.ts | 9 +- .../deploy-image/deploy-image.component.css | 5 + .../deploy-image/deploy-image.component.html | 223 ++++++++---------- .../deploy-image/deploy-image.component.ts | 8 +- .../disk-partition-selector.component.css | 51 ++++ .../disk-partition-selector.component.html | 53 +++++ .../disk-partition-selector.component.ts | 58 +++++ 9 files changed, 278 insertions(+), 172 deletions(-) create mode 100644 ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.css create mode 100644 ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.html create mode 100644 ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.ts diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index 7f5df2f..db56824 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -172,6 +172,7 @@ import { HardwareProfileComponent } from './components/hardware-profile/hardware import { HardwareCollectionModalComponent } from './components/hardware-profile/hardware-collection-modal/hardware-collection-modal.component'; import { HardwareTypeComponent } from './components/hardware-type/hardware-type.component'; import { ShowDetailsComponent } from './components/hardware-type/show-details/show-details.component'; +import { DiskPartitionSelectorComponent } from './components/groups/shared/disk-partition-selector/disk-partition-selector.component'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './locale/', '.json'); } @@ -348,7 +349,7 @@ registerLocaleData(localeEs, 'es-ES'); progressAnimation: 'increasing', closeButton: true } - ), MatGridList, MatTree, MatTreeNode, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeOutlet, MatPaginator, MatGridTile, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelDescription, MatRadioGroup, MatRadioButton, MatAutocompleteTrigger, NgOptimizedImage + ), MatGridList, MatTree, MatTreeNode, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeOutlet, MatPaginator, MatGridTile, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelDescription, MatRadioGroup, MatRadioButton, MatAutocompleteTrigger, NgOptimizedImage, DiskPartitionSelectorComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA, diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html index e2e79a6..d28e1b6 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html @@ -224,39 +224,13 @@
- - - - - - - - - - - - - -
Seleccionar partición - - - - - {{ column.header }} - - {{ column.cell(image) }} - - - -
- {{ image.size }} MB - {{ image.size / 1024 }} GB -
- -
+ +
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts index eb8cc5e..a9ce00f 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts @@ -62,12 +62,11 @@ export class CreateClientImageComponent implements OnInit{ return this.gitData && this.gitData.repo && this.gitData.branch; } + isPartitionDisabled = (row: any): boolean => { + return !row.operativeSystem; + }; + columns = [ - { - columnDef: 'diskNumber', - header: 'Disco', - cell: (partition: any) => partition.diskNumber - }, { columnDef: 'partitionNumber', header: 'Particion', diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css index 1d6cb4e..6a2a8a6 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css @@ -590,6 +590,11 @@ table { } } +.partition-table-container { + overflow-x: auto; + margin-top: 10px; +} + .commits-table-container { margin-top: 20px; } diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html index 4dbb9f9..1b10903 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html @@ -16,9 +16,7 @@
- +
@@ -28,9 +26,7 @@
-
@@ -49,7 +45,8 @@
info - Puedes marcar o desmarcar un cliente haciendo clic en el área del ordenador. Además, selecciona con "Modelo" el equipo que actuará como modelo. + Puedes marcar o desmarcar un cliente haciendo clic en el área del ordenador. Además, selecciona con "Modelo" el + equipo que actuará como modelo.
@@ -61,17 +58,11 @@
-
+
- Client Icon + Client Icon
{{ client.name | slice:0:20 }} @@ -82,9 +73,7 @@
- + Modelo @@ -104,7 +93,7 @@ image Configuración de imagen
- +
Tipo de imagen @@ -119,7 +108,8 @@
Seleccionar Repositorio - + {{ repo }} @@ -129,7 +119,8 @@ Seleccionar Rama - + {{ branch }} @@ -176,8 +167,8 @@ Tags - + {{ tag }} Sin tags @@ -198,7 +189,7 @@ Seleccione imagen - +
{{ image.name }}
{{ image.description }}
@@ -212,13 +203,82 @@
+ +
+
+ settings + Opciones multicast + Opciones torrent +
+ +
+ + Puerto + + + + + Dirección + + + + + Modo Multicast + + + {{ option.name }} + + + + + + Velocidad + + + + + Máximo Clientes + + + + + Tiempo Máximo de Espera + + +
+ +
+ + Modo P2P + + + {{ option.name }} + + + + + + Semilla (minutos) + + +
+
+
storage Selección de partición
- +
@@ -234,107 +294,16 @@
- - - - - - - - - - - - - -
Seleccionar partición - - - - - {{ column.header }} - {{ column.cell(image) }} -
-
-
- - -
-
- settings - Opciones multicast - Opciones torrent -
- -
- - Puerto - - - - - Dirección - - - - - Modo Multicast - - - {{ option.name }} - - - - - - Velocidad - - - - - Máximo Clientes - - - - - Tiempo Máximo de Espera - - -
- -
- - Modo P2P - - - {{ option.name }} - - - - - - Semilla (minutos) - - + +
- - - - + + \ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts index 0396eae..dae7062 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts @@ -57,6 +57,7 @@ export class DeployImageComponent implements OnInit{ selectedClients: any[] = []; selectedModelClient: any = null; filteredPartitions: any[] = []; + selectedRepository: any = null; imageType: string = 'monolithic'; @@ -70,14 +71,9 @@ export class DeployImageComponent implements OnInit{ dataSource = new MatTableDataSource(); columns = [ - { - columnDef: 'diskNumber', - header: 'Disco', - cell: (partition: any) => `${partition.diskNumber}` - }, { columnDef: 'partitionNumber', - header: 'Particion', + header: 'Partición', cell: (partition: any) => `${partition.partitionNumber}` }, { diff --git a/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.css b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.css new file mode 100644 index 0000000..aa3c38d --- /dev/null +++ b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.css @@ -0,0 +1,51 @@ +/* Formatting specific to grouped partition selector */ +.disk-container { + display: flex; + flex-direction: column; + gap: 32px; + padding-top: 16px; +} + +.disk-card-wrapper { + margin-bottom: 20px; +} + +.disk-mat-card { + border-radius: 8px; + overflow: hidden; + padding: 0; +} + +.disk-card-header { + background-color: #f5f5f5; + padding: 16px 20px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #e0e0e0; +} + +.disk-card-title { + margin: 0; + font-size: 1.2rem; + color: #3f51b5; + font-weight: bold; +} + +.disk-card-layout { + display: flex; + align-items: stretch; + background: white; + gap: 0; +} + +.disk-table-container { + flex: 1; + overflow-x: auto; +} + +.disk-table { + width: 100%; + box-shadow: none !important; + border: none !important; +} diff --git a/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.html b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.html new file mode 100644 index 0000000..899e6c7 --- /dev/null +++ b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.html @@ -0,0 +1,53 @@ +
+ @for (disk of diskUsageData; track disk.diskNumber) { +
+ +
+

Disco {{ disk.diskNumber }}

+
+ +
+
+ + + + + + + + @for (column of columns; track column.columnDef) { + + + + + } + + + + +
Seleccionar + + + + {{ column.header }} + @if (column.columnDef === 'size') { +
+ {{ partition.size }} MB + {{ partition.size / 1024 | number:'1.0-2' }} GB +
+ } @else { + {{ column.cell ? column.cell(partition) : partition[column.columnDef] }} + } +
+
+
+ +
+ } +
diff --git a/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.ts b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.ts new file mode 100644 index 0000000..a3bb8ad --- /dev/null +++ b/ogWebconsole/src/app/components/groups/shared/disk-partition-selector/disk-partition-selector.component.ts @@ -0,0 +1,58 @@ +import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatCardModule } from '@angular/material/card'; +import { MatTableModule } from '@angular/material/table'; +import { MatRadioModule } from '@angular/material/radio'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'app-disk-partition-selector', + standalone: true, + imports: [CommonModule, MatCardModule, MatTableModule, MatRadioModule, FormsModule], + templateUrl: './disk-partition-selector.component.html', + styleUrl: './disk-partition-selector.component.css' +}) +export class DiskPartitionSelectorComponent implements OnChanges { + @Input() partitions: any[] = []; + @Input() columns: any[] = []; + @Input() displayedColumns: string[] = []; + @Input() selectedPartition: any; + @Input() disableCondition: (row: any) => boolean = () => false; + + @Output() selectedPartitionChange = new EventEmitter(); + + diskUsageData: any[] = []; + + ngOnChanges(changes: SimpleChanges): void { + if (changes['partitions']) { + this.calculateDiskUsage(this.partitions || []); + } + } + + calculateDiskUsage(partitions: any[]) { + this.diskUsageData = []; + const grouped = partitions.reduce((acc: any, curr: any) => { + if (!acc[curr.diskNumber]) { + acc[curr.diskNumber] = []; + } + acc[curr.diskNumber].push(curr); + return acc; + }, {}); + + for (const diskNum in grouped) { + if (grouped.hasOwnProperty(diskNum)) { + this.diskUsageData.push({ + diskNumber: diskNum, + partitions: grouped[diskNum] + }); + } + } + } + + onPartitionSelected(row: any) { + if (!this.disableCondition(row)) { + this.selectedPartition = row; + this.selectedPartitionChange.emit(this.selectedPartition); + } + } +} -- 2.40.1 From a3bf83f5d4cc27919e4864529ee967f7036d882b Mon Sep 17 00:00:00 2001 From: jmbardallo Date: Tue, 31 Mar 2026 09:27:19 +0200 Subject: [PATCH 2/2] =?UTF-8?q?Creado=20componente=20compartido=20para=20m?= =?UTF-8?q?ostrar=20la=20selecci=C3=B3n=20de=20particiones=20en=20los=20co?= =?UTF-8?q?mandos=20crear=20imagen=20y=20deploy=20de=20imagenes=20con=20un?= =?UTF-8?q?=20dise=C3=B1o=20separado=20por=20disco?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 289f745..311e0a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,8 @@ # Changelog +## [1.2.7] - 2026-03-31 +### Added +- Rediseño de la plantilla para seleccion de particiones, se ha creado un componente compartido por la vista de crear imagen y deploy de imagenes. + ## [1.2.6] - 2026-03-30 ### Added - Rediseño de la pantalla detalles de un equipo, en la partición CACHE, se muestra el listado de ficheros que contiene con el tamaño de cada uno. -- 2.40.1