From 33525f116343431322e07b1c5d4cc66f50fc6e49 Mon Sep 17 00:00:00 2001 From: apuente Date: Mon, 14 Oct 2024 21:13:21 +0200 Subject: [PATCH] refs #918 update client-main-view component --- ogWebconsole/src/app/app.module.ts | 5 +- .../partition-assistant.component.html | 50 -------- .../partition-assistant.component.ts | 108 ------------------ .../client-main-view.component.css | 27 +++-- .../client-main-view.component.html | 102 +++++++++-------- .../client-main-view.component.spec.ts | 23 ---- .../client-main-view.component.ts | 20 ++++ .../partition-assistant.component.css | 8 +- .../partition-assistant.component.html | 69 +++++++++++ .../partition-assistant.component.ts | 107 +++++++++++++++++ 10 files changed, 279 insertions(+), 240 deletions(-) delete mode 100644 ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.html delete mode 100644 ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.ts delete mode 100644 ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.spec.ts rename ogWebconsole/src/app/components/{commands/commands-modals => groups/components/client-main-view}/partition-assistant/partition-assistant.component.css (85%) create mode 100644 ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html create mode 100644 ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index 0aba61e..f4c38a5 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -89,7 +89,6 @@ import { CalendarComponent } from './components/calendar/calendar.component'; import { CreateCalendarComponent } from './components/calendar/create-calendar/create-calendar.component'; import {MatRadioButton, MatRadioGroup} from "@angular/material/radio"; import { CreateCalendarRuleComponent } from './components/calendar/create-calendar-rule/create-calendar-rule.component'; - import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component'; import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component'; import { CreateCommandGroupComponent } from './components/commands/commands-groups/create-command-group/create-command-group.component'; @@ -106,6 +105,7 @@ import {MatSliderModule} from '@angular/material/slider'; import { ClientMainViewComponent } from './components/groups/components/client-main-view/client-main-view.component'; import { ImagesComponent } from './components/images/images.component'; import { CreateImageComponent } from './components/images/create-image/create-image.component'; +import { PartitionAssistantComponent } from './components/groups/components/client-main-view/partition-assistant/partition-assistant.component'; @NgModule({ declarations: [ AppComponent, @@ -167,7 +167,8 @@ import { CreateImageComponent } from './components/images/create-image/create-im StatusComponent, ClientMainViewComponent, ImagesComponent, - CreateImageComponent + CreateImageComponent, + PartitionAssistantComponent, ], bootstrap: [AppComponent], imports: [BrowserModule, diff --git a/ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.html b/ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.html deleted file mode 100644 index fbfab41..0000000 --- a/ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.html +++ /dev/null @@ -1,50 +0,0 @@ -
-

Asistente de Particionado de Disco

-
- - - -

Particiones actuales

- - - {{ partition.name }} - {{ partition.size }} GB - {{ partition.type }} - - - - - -

Añadir Partición

-
- - Nombre - - - - Tamaño (GB) - - - - Tipo - - {{ type }} - - - - - - Imagen - - - {{ image.name }} - {{ image.description }} - - - - - - -
- - - \ No newline at end of file diff --git a/ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.ts b/ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.ts deleted file mode 100644 index 09d765d..0000000 --- a/ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { ToastrService } from 'ngx-toastr'; - -interface ClientInfo { - name: string; - type: string; - ip: string; - mac: string; - serialNumber: string; - netiface: string; - netDriver: string; -} - -interface Partition { - name: string; - size: number; - type: string; -} - -interface Disk { - name: string; - size: number; -} - -interface ImageData { - name: string; - uuid: string; // Usaremos el UUID como valor - description: string; -} - -@Component({ - selector: 'app-partition-assistant', - templateUrl: './partition-assistant.component.html', - styleUrls: ['./partition-assistant.component.css'] -}) -export class PartitionAssistantComponent implements OnInit { - baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; - - @Input() clientUuid!: string; - clientInfo: ClientInfo | undefined; - availableDisks: Disk[] = []; - selectedDisk: Disk | undefined; - partitions: Partition[] = []; - images: ImageData[] = []; // Lista para almacenar las imágenes cargadas - selectedImageUuid: string = ''; // Variable para almacenar la imagen seleccionada - - newPartition: Partition = { name: '', size: 0, type: '' }; - partitionTypes: string[] = ['NTFS', 'FAT32', 'EXT4']; - - constructor( - private http: HttpClient, - private toastService: ToastrService - ) {} - - ngOnInit(): void { - if (this.clientUuid) { - this.getClientInfo(this.clientUuid); - } else { - console.error('No client UUID provided!'); - } - - // Llamada a la API para obtener las imágenes - this.getImages(); - } - - getClientInfo(uuid: string): void { - this.http.get(`${this.baseUrl}/clients/${uuid}`) - .subscribe( - (response: ClientInfo) => { - this.clientInfo = response; - console.log('Client info:', this.clientInfo); - }, - error => { - console.error('Error fetching client info:', error); - } - ); - } - - // Método para obtener las imágenes desde la API - getImages(): void { - this.http.get('http://127.0.0.1:8001/images?page=1&itemsPerPage=30') - .subscribe( - (response) => { - this.images = response['hydra:member']; - console.log('Images loaded:', this.images); - }, - error => { - console.error('Error fetching images:', error); - this.toastService.error('Error al cargar las imágenes.'); - } - ); - } - - addPartition(): void { - if (this.newPartition.name && this.newPartition.size > 0 && this.newPartition.type) { - // Añadir la partición solo si todos los campos son válidos - this.partitions.push({ ...this.newPartition }); - this.newPartition = { name: '', size: 0, type: '' }; - } else { - this.toastService.error('Por favor, complete todos los campos correctamente.'); - } - } - - removePartition(partition: Partition): void { - this.partitions = this.partitions.filter(p => p !== partition); - } -} diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css index d863133..20d5e0a 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css @@ -4,7 +4,7 @@ .client-header { display: flex; align-items: center; - margin-bottom: 40px; + margin-bottom: 10px; background-color: #fff; padding: 20px; border-radius: 12px; @@ -41,7 +41,7 @@ .client-info { display: grid; grid-template-columns: 1fr 1fr; - gap: 40px; + gap: 10px; } .info-section { @@ -102,18 +102,23 @@ font-size: 0.5rem; text-anchor: middle; } - - /* Footer */ - .client-footer { - margin-top: 40px; - text-align: center; - font-size: 1rem; - color: #555; + + .assistants-container{ + background-color: #fff; + margin-top: 10px; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } - + + .buttons-row{ + display: flex; + justify-content: space-between; + padding: 20px; + } + @keyframes progress { 0% { stroke-dasharray: 0, 100; } } - \ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html index 821a007..43c79dd 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html @@ -1,47 +1,59 @@
-
- computer -
-
-

{{ clientData?.name }}

-

UUID: {{ clientData?.uuid }}

-

IP Address: {{ clientData?.ip }}

-
-
- -
- -
-

General Information

-

Type: {{ clientData?.type }}

-

MAC Address: {{ clientData?.mac }}

-

Serial Number: {{ clientData?.serialNumber }}

-

Organizational Unit

-

Name: {{ clientData?.organizationalUnit?.name }}

-

Type: {{ clientData?.organizationalUnit?.type }}

-
- - -
-

Disk Space

-
-
- - - - 75% - -
-

Used: 75% (375GB)

-

Total: 500GB

-
-
+
+ computer +
+
+

{{ clientData?.name }}

+

UUID: {{ clientData?.uuid }}

+

IP: {{ clientData?.ip }}

+
+
- \ No newline at end of file +
+ +
+ +

Información General

+

MAC: {{ clientData?.mac }}

+

Número de serie: {{ clientData?.serialNumber }}

+

Unidad Organizativa

+

{{ clientData?.organizationalUnit?.name }}

+
+ + +
+ +

Disco

+
+
+ + + + 75% + +
+

Usado: 75% (375GB)

+

Total: 500GB

+
+
+
+ +
+ + +
+ +
+ +
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.spec.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.spec.ts deleted file mode 100644 index 9b91bce..0000000 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ClientMainViewComponent } from './client-main-view.component'; - -describe('ClientMainViewComponent', () => { - let component: ClientMainViewComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ClientMainViewComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(ClientMainViewComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts index e779de1..32a4137 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts @@ -10,6 +10,10 @@ export class ClientMainViewComponent implements OnInit { baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; clientUuid: string; clientData: any; + isPartitionAssistantVisible: boolean = false; + isBootImageVisible: boolean = false; + isGeneralInfoVisible: boolean = true; + isDiskUsageVisible: boolean = true; constructor(private http: HttpClient) { const url = window.location.href; @@ -32,5 +36,21 @@ export class ClientMainViewComponent implements OnInit { ); } + togglePartitionAssistant() { + this.isPartitionAssistantVisible = !this.isPartitionAssistantVisible; + } + + toggleGeneralInfo() { + this.isGeneralInfoVisible = !this.isGeneralInfoVisible; + } + + toggleDiskUsage() { + this.isDiskUsageVisible = !this.isDiskUsageVisible; + } + + showBootImage() { + this.isPartitionAssistantVisible = false; + } + } diff --git a/ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css similarity index 85% rename from ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.css rename to ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css index 0dd4907..dc57c03 100644 --- a/ogWebconsole/src/app/components/commands/commands-modals/partition-assistant/partition-assistant.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css @@ -14,6 +14,7 @@ margin: 10px 0; height: 30px; border: 1px solid #ccc; + background-color: #c5c5c5; } .partition-segment { @@ -36,7 +37,7 @@ .actions { display: flex; - justify-content: space-between; + justify-content: flex-end; } .remove-btn { @@ -46,3 +47,8 @@ padding: 5px; cursor: pointer; } + +.error-message { + color: red; + margin-top: 10px; +} \ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html new file mode 100644 index 0000000..c0e7d4f --- /dev/null +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html @@ -0,0 +1,69 @@ +
+
+ + + + + Tamaño: {{ totalDiskSize }} GB +
+ + +
+
+ {{ partition.type }} ({{ partition.size }} GB) +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ParticiónTipo particiónTamaño (GB)FormatearEliminar
{{ i + 1 }} + + + + + + + +
+
{{ errorMessage }}
+ + +
+ +
+
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts new file mode 100644 index 0000000..bec7d80 --- /dev/null +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts @@ -0,0 +1,107 @@ +import { Component } from '@angular/core'; + +interface Partition { + size: number; + type: string; + sizeBytes: number; + format: boolean; + color: string; + percentage: number; +} + +@Component({ + selector: 'app-partition-assistant', + templateUrl: './partition-assistant.component.html', + styleUrls: ['./partition-assistant.component.css'] +}) +export class PartitionAssistantComponent { + diskNumber = 1; + partitionTable = 'MSDOS'; + totalDiskSize = 100; + errorMessage = ''; + + partitions: Partition[] = [ + { size: 17.96, type: 'NTFS', sizeBytes: 17.96 * 1024 * 1024 * 1024, format: false, color: '#00a2e8', percentage: 17.96 }, + { size: 17.29, type: 'LINUX', sizeBytes: 17.29 * 1024 * 1024 * 1024, format: false, color: '#6a5acd', percentage: 17.29 }, + { size: 12.64, type: 'CACHE', sizeBytes: 12.64 * 1024 * 1024 * 1024, format: false, color: '#ff0000', percentage: 12.64 } + ]; + + addPartition() { + const remainingGB = this.getRemainingGB(); + if (remainingGB > 0) { + this.partitions.push({ + size: 0, + type: 'NTFS', + sizeBytes: 0, + format: false, + color: '#cccccc', + percentage: 0 + }); + } else { + this.errorMessage = 'No hay suficiente espacio libre en el disco para crear una nueva partición.'; + } + } + + removePartition(index: number) { + this.partitions.splice(index, 1); + this.updatePartitionPercentages(); + } + + updatePartitionSize(index: number, type: 'gb') { + const partition = this.partitions[index]; + const remainingGB = this.getRemainingGB() + partition.size; + + if (partition.size > remainingGB) { + this.errorMessage = `El tamaño de la partición no puede superar el espacio libre (${remainingGB.toFixed(2)} GB).`; + partition.size = 0; + } else { + this.errorMessage = ''; + partition.sizeBytes = partition.size * 1024 * 1024 * 1024; + this.updatePartitionPercentages(); + } + } + + updatePartitionPercentages() { + const totalUsedGB = this.partitions.reduce((acc, partition) => acc + partition.size, 0); + const remainingGB = this.totalDiskSize - totalUsedGB; + + this.partitions.forEach(partition => { + partition.percentage = (partition.size / this.totalDiskSize) * 100; + }); + + if (remainingGB > 0) { + const freeSpaceIndex = this.partitions.findIndex(partition => partition.type === 'LIBRE'); + + if (freeSpaceIndex > -1) { + this.partitions[freeSpaceIndex].size = remainingGB; + this.partitions[freeSpaceIndex].percentage = (remainingGB / this.totalDiskSize) * 100; + } + } + } + + getRemainingGB(): number { + const totalUsedGB = this.partitions.reduce((acc, partition) => acc + partition.size, 0); + return Math.max(0, this.totalDiskSize - totalUsedGB); + } + + save() { + const totalSize = this.partitions.reduce((acc, partition) => acc + partition.size, 0); + + if (totalSize > this.totalDiskSize) { + this.errorMessage = `El tamaño total de las particiones (${totalSize} GB) supera el tamaño total del disco (${this.totalDiskSize} GB).`; + return; + } else { + this.errorMessage = ''; + } + + const payload = this.partitions.map((partition, index) => ({ + diskNumber: this.diskNumber, + partitionNumber: index + 1, + size: partition.size, + filesystem: partition.type, + format: partition.format + })); + + console.log('Payload:', JSON.stringify(payload, null, 2)); + } +}