import { inject } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { MAT_DIALOG_DATA } from '@angular/material/dialog'; import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { DatePipe } from "@angular/common"; import { MatTableDataSource } from "@angular/material/table"; import { MatDialog } from "@angular/material/dialog"; import { Router } from "@angular/router"; import { ToastrService } from "ngx-toastr"; import { ManageClientComponent } from "../../shared/clients/manage-client/manage-client.component"; import { ConfigService } from '@services/config.service'; interface ClientInfo { property: string; value: any; } @Component({ selector: 'app-client-details', templateUrl: './client-details.component.html', styleUrl: './client-details.component.css' }) export class ClientDetailsComponent { public translate = inject(TranslateService); baseUrl: string; @ViewChild('assistantContainer') assistantContainer!: ElementRef; clientUuid: string; clientData: any = {}; isPartitionAssistantVisible: boolean = false; isBootImageVisible: boolean = false; isDiskUsageVisible: boolean = true; dataSource = new MatTableDataSource(); generalData: ClientInfo[] = []; networkData: ClientInfo[] = []; classroomData: ClientInfo[] = []; diskUsageData: any[] = []; partitions: any[] = []; commands: any[] = []; chartDisk: any[] = []; view: [number, number] = [260, 160]; showLegend: boolean = true; legendPosition: any = 'below'; datePipe: DatePipe = new DatePipe('es-ES'); columns = [ { columnDef: 'partition', header: 'partition1', cell: (partition: any) => `${partition.partitionNumber}` }, { columnDef: 'partitionCode', header: 'partitionType', cell: (partition: any) => partition.partitionCode }, { columnDef: 'description', header: 'fileSystem', cell: (partition: any) => partition.filesystem }, { columnDef: 'size', header: 'size', cell: (partition: any) => `${(partition.size / 1024).toFixed(2)} GB` }, { columnDef: 'memoryUsage', header: 'use', cell: (partition: any) => `${partition.memoryUsage}%` }, { columnDef: 'operativeSystem', header: 'soimage', cell: (partition: any) => partition.operativeSystem?.name } ]; displayedColumns = [...this.columns.map(column => column.columnDef)]; isDiskUsageEmpty: boolean = true; loading: boolean = true; constructor( private http: HttpClient, private dialog: MatDialog, private configService: ConfigService, private router: Router, private toastService: ToastrService, @Inject(MAT_DIALOG_DATA) public data: { clientData: any } ) { this.baseUrl = this.configService.apiUrl; const url = window.location.href; const segments = url.split('/'); this.clientUuid = segments[segments.length - 1]; } ngOnInit() { if (this.data && this.data.clientData) { this.clientData = this.data.clientData; this.updateGeneralData(); this.updateNetworkData(); this.calculateDiskUsage(); this.loadPartitions(); this.loading = false; } else { console.error(this.translate.instant('noDataWasReceivedFrom')); } } updateGeneralData() { this.generalData = [ { property: 'Nombre', value: this.clientData?.name || '' }, { property: 'IP', value: this.clientData?.ip || '' }, { property: 'MAC', value: this.clientData?.mac || '' }, { property: 'Nº de serie', value: this.clientData?.serialNumber || '' }, { property: 'Netiface', value: this.clientData?.netiface || this.clientData?.organizationalUnit?.networkSettings?.netiface || '' }, { property: 'Perfil hardware', value: this.clientData?.hardwareProfile?.description || '' }, ]; } updateNetworkData() { this.networkData = [ { property: 'Padre', value: this.clientData?.organizationalUnit?.name || '' }, { property: 'Pxe', value: this.clientData?.pxeTemplate?.name || '' }, { property: 'Remote Pc', value: this.clientData.remotePc || '' }, { property: 'Subred', value: this.clientData?.subnet || '' }, { property: 'OGlive', value: this.clientData?.ogLive?.name || '' }, { property: 'Repositorio', value: this.clientData?.repository?.name || '' }, ]; } get clientNotes(): string { return this.clientData?.notes || ''; } calculateDiskUsage() { const diskUsageMap = new Map(); this.partitions.forEach((partition: any) => { const diskNumber = partition.diskNumber; if (!diskUsageMap.has(diskNumber)) { diskUsageMap.set(diskNumber, { total: 0, used: 0, partitions: [] }); } const diskData = diskUsageMap.get(diskNumber); if (partition.partitionNumber === 0) { diskData!.total = Number((partition.size / 1024).toFixed(2)); } else { diskData!.used += Number((partition.size / 1024).toFixed(2)); diskData!.partitions.push(partition); } }); this.chartDisk = Array.from(diskUsageMap.entries()).map(([diskNumber, { total, used, partitions }]) => { const partitionData = partitions.map(partition => ({ name: `Partición ${partition.partitionNumber}`, value: Number((partition.size / 1024).toFixed(2)) })); const freeSpace = total - used; if (freeSpace > 0) { partitionData.push({ name: 'Espacio libre', value: Number(freeSpace.toFixed(2)) }); } return { diskNumber, chartData: partitionData, total, used, percentage: total > 0 ? Math.round((used / total) * 100) : 0, partitions }; }); this.diskUsageData = this.chartDisk; this.isDiskUsageEmpty = this.diskUsageData.length === 0; } loadPartitions(): void { if (!this.clientData?.id) { return; } this.http.get(`${this.baseUrl}/partitions?client.id=${this.clientData.id}&order[diskNumber, partitionNumber]=ASC`).subscribe({ next: data => { const filteredPartitions = data['hydra:member']; this.dataSource = filteredPartitions; this.partitions = filteredPartitions; this.calculateDiskUsage(); }, error: error => { console.error(this.translate.instant('errorGettingPartitions'), error); } }); } parseCacheContent(content: string): { name: string, size: string }[] { if (!content) return []; return content.split(',').map(item => { const [name, bytes] = item.split(':'); const sizeMB = (parseInt(bytes) / (1024 * 1024)).toFixed(2) + ' MB'; return { name, size: sizeMB }; }); } onNoClick(): void { this.dialog.closeAll(); } }