From 61b7c755884ea91ff9556463a6f3e158d9ccb400 Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Tue, 29 Oct 2024 11:57:41 +0100 Subject: [PATCH] refs #1048. Updated client view and partition assistant --- ogWebconsole/src/app/app-routing.module.ts | 4 + .../advanced-search.component.css | 26 +--- .../advanced-search.component.html | 2 +- .../client-main-view.component.css | 34 +++++ .../client-main-view.component.html | 26 ++-- .../client-main-view.component.ts | 43 ++++-- .../partition-assistant.component.css | 19 +-- .../partition-assistant.component.html | 139 +++++++++--------- .../partition-assistant.component.ts | 16 +- 9 files changed, 176 insertions(+), 133 deletions(-) diff --git a/ogWebconsole/src/app/app-routing.module.ts b/ogWebconsole/src/app/app-routing.module.ts index 11b48f0..925f4e6 100644 --- a/ogWebconsole/src/app/app-routing.module.ts +++ b/ogWebconsole/src/app/app-routing.module.ts @@ -27,6 +27,9 @@ import { RestoreImageComponent } from './components/groups/components/client-mai import {SoftwareComponent} from "./components/software/software.component"; import {SoftwareProfileComponent} from "./components/software-profile/software-profile.component"; import {OperativeSystemComponent} from "./components/operative-system/operative-system.component"; +import { + PartitionAssistantComponent +} from "./components/groups/components/client-main-view/partition-assistant/partition-assistant.component"; const routes: Routes = [ { path: '', redirectTo: 'auth/login', pathMatch: 'full' }, { @@ -51,6 +54,7 @@ const routes: Routes = [ { path: 'commands-logs', component: TaskLogsComponent }, { path: 'calendars', component: CalendarComponent }, { path: 'client/:id', component: ClientMainViewComponent }, + { path: 'client/:id/partition-assistant', component: PartitionAssistantComponent }, { path: 'images', component: ImagesComponent }, { path: 'restore-image', component: RestoreImageComponent}, { path: 'software', component: SoftwareComponent }, diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css index eec44f6..c265ef1 100644 --- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css +++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css @@ -174,23 +174,13 @@ mat-spinner { width: 100%; } -.results-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 16px; - margin-bottom: 16px; -} - .result-card { width: 100%; - max-width: 250px; - height: 250px; background-color: #ffffff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; padding: 15px; - margin: 10px 0; } .result-card:hover { @@ -228,7 +218,7 @@ mat-spinner { .result-internal-units, .result-clients { font-size: 0.9rem; - color: #007bff; + color: #007bff; margin: 5px 0; } @@ -251,13 +241,13 @@ mat-card { } .red-card { - background-color: #f35f53; + background-color: #f35f53; color: white; } .green-card { - background-color: #4caf50; - color: white; + background-color: #4caf50; + color: white; } .view-mode-buttons button.active { @@ -266,7 +256,7 @@ mat-card { } .result-card { - width: 100%; + width: 100%; } .result-card-list { @@ -283,7 +273,7 @@ mat-card { } .result-card-list .result-title { - font-size: 14px; + font-size: 14px; font-weight: bold; margin-right: 8px; } @@ -292,11 +282,11 @@ mat-card { display: flex; flex-direction: row; gap: 8px; - font-size: 12px; + font-size: 12px; } .result-card-list p { - margin: 0; + margin: 0; } .result-list { diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html index 89545cb..45f8c3f 100644 --- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html +++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html @@ -49,7 +49,7 @@
- + 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 0dad576..25ecb56 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 @@ -205,3 +205,37 @@ border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } + +.circular-chart { + display: block; + margin: 0 auto; + max-width: 100%; + max-height: 150px; +} + +.circle-bg { + fill: none; + stroke: #f0f0f0; + stroke-width: 3.8; +} + +.circle { + fill: none; + stroke-width: 3.8; + stroke-linecap: round; + animation: progress 1s ease-out forwards; +} + +/* Define colores distintos para cada partición */ +.partition-0 { stroke: #00bfa5; } /* Ejemplo: verde */ +.partition-1 { stroke: #ff6f61; } /* Ejemplo: rojo */ +.partition-2 { stroke: #ffb400; } /* Ejemplo: amarillo */ +.partition-3 { stroke: #3498db; } /* Ejemplo: azul */ + +/* Texto en el centro del gráfico */ +.percentage { + fill: #333; + font-size: 0.7rem; + text-anchor: middle; +} + 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 f739ef6..188b776 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 @@ -67,17 +67,20 @@

Disco {{ disk.diskNumber }}

- - - - {{ disk.percentage }}% + + + + + + + + {{ (disk.used / disk.total * 100).toFixed(0) }}%

Usado: {{ disk.used }} GB ({{ disk.percentage }}%)

@@ -86,4 +89,5 @@
+ 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 574dd78..3e4c70f 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 @@ -4,6 +4,7 @@ import {DatePipe} from "@angular/common"; import {MatTableDataSource} from "@angular/material/table"; import {PartitionAssistantComponent} from "./partition-assistant/partition-assistant.component"; import {MatDialog} from "@angular/material/dialog"; +import {Router} from "@angular/router"; interface ClientInfo { property: string; @@ -62,7 +63,11 @@ export class ClientMainViewComponent implements OnInit { isDiskUsageEmpty: boolean = true; loading: boolean = true; - constructor(private http: HttpClient, private dialog: MatDialog) { + constructor( + private http: HttpClient, + private dialog: MatDialog, + private router: Router + ) { const url = window.location.href; const segments = url.split('/'); this.clientUuid = segments[segments.length - 1]; @@ -105,12 +110,13 @@ export class ClientMainViewComponent implements OnInit { } calculateDiskUsage() { - const diskUsageMap = new Map(); + const diskUsageMap = new Map(); this.partitions.forEach((partition: any) => { const diskNumber = partition.diskNumber; + if (!diskUsageMap.has(diskNumber)) { - diskUsageMap.set(diskNumber, { total: 0, used: 0 }); + diskUsageMap.set(diskNumber, { total: 0, used: 0, partitions: [] }); } const diskData = diskUsageMap.get(diskNumber); @@ -118,17 +124,28 @@ export class ClientMainViewComponent implements OnInit { if (partition.partitionNumber === 0) { diskData!.total = Number((partition.size / 1024).toFixed(2)); } else { - diskData!.used += Number(((partition.size * (partition.memoryUsage / 100))/ 1024).toFixed(2)); + diskData!.used += Number(((partition.size * (partition.memoryUsage / 100)) / 1024).toFixed(2)); + diskData!.partitions.push(partition); } }); - this.diskUsageData = Array.from(diskUsageMap.entries()).map(([diskNumber, { total, used }]) => { + this.diskUsageData = Array.from(diskUsageMap.entries()).map(([diskNumber, { total, used, partitions }]) => { const percentage = total > 0 ? Math.round((used / total) * 100) : 0; - return { diskNumber, total, used, percentage }; + return { diskNumber, total, used, percentage, partitions }; }); + this.isDiskUsageEmpty = this.diskUsageData.length === 0; } + getStrokeOffset(partitions: any[], index: number): number { + const totalSize = partitions.reduce((acc, part) => acc + (part.size / 1024), 0); + + const offset = partitions.slice(0, index).reduce((acc, part) => acc + (part.size / 1024), 0); + console.log(offset, totalSize) + + return totalSize > 0 ? (offset / totalSize) : 0; + } + loadPartitions(): void { this.http.get(`${this.baseUrl}/partitions?client.id=${this.clientData?.id}`).subscribe({ next: data => { @@ -155,18 +172,14 @@ export class ClientMainViewComponent implements OnInit { onCommandSelect(command: any): void { if (command.name === 'Particionar y Formatear') { - this.openPartitionDialog(); + this.openPartitionAssistant(); } } - openPartitionDialog(): void { - const dialogRef = this.dialog.open(PartitionAssistantComponent, { - width: '1000px', - data: this.clientData['@id'] - }); - - dialogRef.afterClosed().subscribe((result: any) => { - console.log('El diálogo se cerró', result); + openPartitionAssistant(): void { + console.log(this.clientData) + this.router.navigate([`/client/${this.clientData.uuid}/partition-assistant`]).then(r => { + console.log('navigated', r); }); } } diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css index 1615bc2..284808b 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css @@ -5,20 +5,12 @@ margin: 20px auto; } -.header { +.header-container { display: flex; - align-items: center; justify-content: space-between; - margin-bottom: 15px; + align-items: center; + height: 100px; padding: 10px; - background-color: #cecbcb; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.header label { - font-weight: 500; - margin-right: 10px; } .disk-size { @@ -44,6 +36,11 @@ font-weight: 500; font-size: 0.9rem; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); + border-right: 2px solid white; /* Borde de separación */ +} + +.partition-segment:last-child { + border-right: none; } .partition-table { 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 index 4b24a0d..09e52c4 100644 --- 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 @@ -1,73 +1,72 @@ -

Asistente de particionado

- - - -
-
- - Tamaño: {{ (disk.totalDiskSize / 1024).toFixed(2) }} GB -
- -
-
- {{ partition.type }} ({{ (partition.size / 1024).toFixed(2) }} GB) -
-
- - - - - - - - - - - - - - - - - - - - - - - - -
ParticiónTipo particiónTamaño (MB)Uso (%)FormatearEliminar
{{ partition.partitionNumber }} - - - - - - - - - -
+
+

Asistente de particionado

+
+
- +
+ + +
+
+ + Tamaño: {{ (disk.totalDiskSize / 1024).toFixed(2) }} GB +
+ +
+
+ {{ partition.type }} ({{ (partition.size / 1024).toFixed(2) }} GB) +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
ParticiónTipo particiónTamaño (MB)Uso (%)FormatearEliminar
{{ partition.partitionNumber }} + + + + + + + + + +
+
{{ 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 index 472f7e6..196cc0a 100644 --- 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 @@ -2,6 +2,7 @@ import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/c import { HttpClient } from '@angular/common/http'; import { ToastrService } from 'ngx-toastr'; import {MAT_DIALOG_DATA} from "@angular/material/dialog"; +import {ActivatedRoute} from "@angular/router"; interface Partition { uuid?: string; @@ -26,6 +27,8 @@ export class PartitionAssistantComponent implements OnInit { errorMessage = ''; originalPartitions: any[] = []; + clientId: string | null = null; + data: any = {}; disks: { diskNumber: number; totalDiskSize: number; partitions: Partition[] }[] = []; private apiUrl: string = this.baseUrl + '/partitions'; @@ -33,15 +36,17 @@ export class PartitionAssistantComponent implements OnInit { constructor( private http: HttpClient, private toastService: ToastrService, - @Inject(MAT_DIALOG_DATA) public data: any + private route: ActivatedRoute ) {} ngOnInit() { + this.clientId = this.route.snapshot.paramMap.get('id'); + this.loadPartitions(); } loadPartitions() { - const url = `${this.baseUrl}${this.data}`; + const url = `${this.baseUrl}/clients/${this.clientId}`; this.http.get(url).subscribe( (response) => { this.data = response; @@ -76,7 +81,7 @@ export class PartitionAssistantComponent implements OnInit { type: partition.type || partition.filesystem || 'NTFS', sizeBytes: partition.size, format: false, - color: '#' + Math.floor(Math.random() * 16777215).toString(16), + color: '#1f1b91', percentage: 0 }); } @@ -216,14 +221,13 @@ export class PartitionAssistantComponent implements OnInit { memoryUsage: partition.memoryUsage, size: partition.size, filesystem: partition.type, - client: this.data['@id'] + client: `/clients/${this.clientId}` }; if (isNew) { this.http.post(this.apiUrl, payload).subscribe( (response) => { this.toastService.success('Partición creada exitosamente'); - this.loadPartitions(); }, (error) => { console.error('Error al crear la partición:', error); @@ -235,7 +239,6 @@ export class PartitionAssistantComponent implements OnInit { this.http.patch(patchUrl, payload).subscribe( (response) => { this.toastService.success('Partición actualizada exitosamente'); - this.loadPartitions(); }, (error) => { console.error('Error al actualizar la partición:', error); @@ -261,7 +264,6 @@ export class PartitionAssistantComponent implements OnInit { this.http.delete(deleteUrl).subscribe( (response) => { this.toastService.success('Partición eliminada exitosamente'); - this.loadPartitions(); }, (error) => {} );