opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor groups component to add sync functionality
testing/ogGui-multibranch/pipeline/head This commit is unstable Details

pull/10/head
Alvaro Puente Mella 2024-12-03 12:33:40 +01:00
parent 2eb08d0198
commit aa9b82cda5
2 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ogWebconsole/src/app/components/groups/groups.component.html
View File

@ -214,6 +214,11 @@
</mat-chip>
<button mat-raised-button color="primary" [matMenuTriggerFor]="clientMenu">Acciones</button>
<mat-menu #clientMenu="matMenu">
<button mat-menu-item *ngIf="(!syncStatus || syncingClientId !== client.uuid)" (click)="getStatus(client)">
<mat-icon>sync</mat-icon>
<span>Sincronizar</span>
</button>
<button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
<mat-icon>edit</mat-icon>
<span>Edit</span>
@ -265,7 +270,7 @@
</mat-chip>
</td>
</ng-container>
<ng-container matColumnDef="mantenimiento">
<ng-container matColumnDef="maintenace">
<th mat-header-cell *matHeaderCellDef> Mantenimiento </th>
<td mat-cell *matCellDef="let client"> {{ client.mantenimiento }} </td>
</ng-container>
@ -284,6 +289,12 @@
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #clientMenu="matMenu">
<button mat-menu-item *ngIf="(!syncStatus || syncingClientId !== client.uuid)" (click)="getStatus(client)">
<mat-icon>sync</mat-icon>
<span>Sincronizar</span>
</button>
<button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
<mat-icon>edit</mat-icon>
<span>Edit</span>
@ -299,11 +310,11 @@
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['name', 'ip', 'mac', 'oglive', 'status', 'mantenimiento', 'subnet', 'pxeTemplate', 'actions']"></tr>
<tr mat-row *matRowDef="let row; columns: ['name', 'ip', 'mac', 'oglive', 'status', 'mantenimiento', 'subnet', 'pxeTemplate', 'actions'];"></tr>
<tr mat-header-row *matHeaderRowDef="['name', 'ip', 'mac', 'oglive', 'status', 'maintenace', 'subnet', 'pxeTemplate', 'actions']"></tr>
<tr mat-row *matRowDef="let row; columns: ['name', 'ip', 'mac', 'oglive', 'status', 'maintenace', 'subnet', 'pxeTemplate', 'actions'];"></tr>
</table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
</ng-template>
</ng-template>

84
ogWebconsole/src/app/components/groups/groups.component.ts
View File

@ -30,7 +30,7 @@ interface TreeNode {
ip?: string;
'@id'?: string;
hasClients?: boolean;
status?: string ;
status?: string;
}
interface FlatNode {
@ -68,6 +68,10 @@ export class GroupsComponent implements OnInit {
isTreeViewActive: boolean = false;
savedFilterNames: any[] = [];
selectedTreeFilter: string = '';
syncStatus: boolean = false;
syncingClientId: number | null = null;
@ViewChild('clientTab') clientTabComponent!: ClientTabViewComponent;
@ViewChild('organizationalUnitTab') organizationalUnitTabComponent!: OrganizationalUnitTabViewComponent;
@ -109,6 +113,7 @@ export class GroupsComponent implements OnInit {
this.updateGridCols();
window.addEventListener('resize', () => this.updateGridCols());
}
toggleView(view: 'card' | 'list') {
this.currentView = view;
}
@ -146,10 +151,7 @@ export class GroupsComponent implements OnInit {
loadSelectedFilter(savedFilter: any) {
const url = `${this.baseUrl}/views/` + savedFilter[1];
console.log('llamando a:', url);
this.dataService.getFilter(savedFilter[1]).subscribe(response => {
console.log('Response from server:', response.filters);
if (response) {
console.log('Filter1:', response.filters);
}
@ -158,7 +160,6 @@ export class GroupsComponent implements OnInit {
});
}
search(): void {
this.loading = true;
this.dataService.getOrganizationalUnits(this.searchTerm).subscribe(
@ -176,29 +177,24 @@ export class GroupsComponent implements OnInit {
onSelectUnidad(unidad: any): void {
this.selectedUnidad = unidad;
this.selectedDetail = unidad;
this.selectedClients = this.collectAllClients(unidad);
this.selectedClientsOriginal = [...this.selectedClients];
this.loadChildrenAndClients(unidad.id).then(fullData => {
const treeData = this.convertToTreeData(fullData);
this.treeDataSource.data = treeData[0]?.children || [];
});
this.isTreeViewActive = true;
}
private collectAllClients(node: any): any[] {
let clients = node.clients || [];
let clients = node.clients || [];
if (node.children && node.children.length > 0) {
node.children.forEach((child: any) => {
clients = clients.concat(this.collectAllClients(child));
clients = clients.concat(this.collectAllClients(child));
});
}
return clients;
}
async loadChildrenAndClients(id: string): Promise<any> {
try {
@ -237,8 +233,8 @@ export class GroupsComponent implements OnInit {
onNodeClick(node: TreeNode): void {
this.selectedNode = node;
this.selectedClients = node.clients || [];
this.selectedClientsOriginal = [...this.selectedClients];
this.selectedClients = node.clients || [];
this.selectedClientsOriginal = [...this.selectedClients];
if (node.hasClients) {
const url = `${this.baseUrl}${node['@id']}`;
this.http.get(url).subscribe(
@ -257,7 +253,6 @@ export class GroupsComponent implements OnInit {
}
getNodeIcon(node: any): string {
console.log('Node:', node);
switch (node.type) {
case 'organizational-unit': return 'apartment';
case 'classrooms-group': return 'doors';
@ -275,10 +270,10 @@ export class GroupsComponent implements OnInit {
this.dataService.getOrganizationalUnits().subscribe(
data => {
this.organizationalUnits = data;
this.loadChildrenAndClients(this.selectedUnidad?.id || '').then(updatedData => {
this.loadChildrenAndClients(this.selectedUnidad?.id || '').then(updatedData => {
const treeData = this.convertToTreeData(updatedData);
this.treeDataSource.data = treeData[0]?.children || [];
});
});
},
error => console.error('Error fetching unidades organizativas', error)
);
@ -330,8 +325,6 @@ export class GroupsComponent implements OnInit {
}
onDeleteClick(event: MouseEvent, node: TreeNode | null, clientNode?: TreeNode | null): void {
console.log('Deleting node or client:', node);
const uuid = node && node['@id'] ? node['@id'].split('/').pop() || '' : '';
const name = node?.name || 'Elemento desconocido';
const type = node?.type || '';
@ -347,15 +340,12 @@ export class GroupsComponent implements OnInit {
if (result === true) {
this.dataService.deleteElement(uuid, type).subscribe(
() => {
console.log('Entity deleted successfully:', uuid);
this.loadChildrenAndClients(this.selectedUnidad?.id || '').then(updatedData => {
const treeData = this.convertToTreeData(updatedData);
this.treeDataSource.data = treeData[0]?.children || [];
});
if (type === 'client' && clientNode) {
console.log('Refreshing clients for node:', clientNode);
this.refreshClients(clientNode);
}
@ -363,7 +353,7 @@ export class GroupsComponent implements OnInit {
data => {
this.organizationalUnits = data;
},
error => console.error('Error fetching unidades organizativas:', error)
error => console.error('Error fetching unidades organizativas', error)
);
this.toastr.success('Entidad eliminada exitosamente');
@ -379,22 +369,16 @@ export class GroupsComponent implements OnInit {
private refreshClients(node: TreeNode): void {
if (!node || !node['@id']) {
console.warn('Node or @id is missing, clearing clients.');
this.selectedClients = [];
return;
}
const url = `${this.baseUrl}${node['@id']}`;
console.log('Fetching clients for node with URL:', url);
this.http.get(url).subscribe(
(data: any) => {
console.log('Response data:', data);
if (data && Array.isArray(data.clients)) {
this.selectedClients = data.clients;
console.log('Clients updated successfully:', this.selectedClients);
} else {
console.warn('No "clients" field found in response, clearing clients.');
this.selectedClients = [];
}
},
@ -496,53 +480,65 @@ export class GroupsComponent implements OnInit {
.map(node => {
const matchesName = node.name.toLowerCase().includes(searchTerm.toLowerCase());
const matchesType = filterType ? node.type.toLowerCase() === filterType.toLowerCase() : true;
const filteredChildren = node.children ? filterNodes(node.children) : [];
if (matchesName && matchesType || filteredChildren.length > 0) {
return { ...node, children: filteredChildren };
}
return null;
})
.filter(node => node !== null);
.filter(node => node !== null);
};
const filteredData = filterNodes(this.treeDataSource.data);
this.treeDataSource.data = filteredData;
}
onTreeFilterInput(event: Event): void {
const input = event.target as HTMLInputElement;
const searchTerm = input?.value || '';
const searchTerm = input?.value || '';
this.filterTree(searchTerm, this.selectedTreeFilter);
}
onClientFilterInput(event: Event): void {
const input = event.target as HTMLInputElement;
const searchTerm = input?.value || '';
const searchTerm = input?.value || '';
this.filterClients(searchTerm);
}
filterClients(searchTerm: string): void {
if (!searchTerm) {
this.selectedClients = [...this.selectedClientsOriginal];
return;
}
const lowerTerm = searchTerm.toLowerCase();
this.selectedClients = this.selectedClientsOriginal.filter(client => {
const matchesName = client.name.toLowerCase().includes(lowerTerm);
const matchesIP = client.ip?.toLowerCase().includes(lowerTerm) || false;
const matchesStatus = client.status?.toLowerCase().includes(lowerTerm) || false;
const matchesMac = client.mac?.toLowerCase().includes(lowerTerm) || false;
return matchesName || matchesIP || matchesStatus || matchesMac;
});
}
getStatus(client: any): void {
this.syncingClientId = client.uuid;
this.syncStatus = true;
this.http.post(`${this.baseUrl}${client['@id']}/agent/status`, {}).subscribe(
response => {
this.toastr.success('Cliente actualizado correctamente');
this.search();
this.syncStatus = false;
this.syncingClientId = null;
},
error => {
this.toastr.error('Error de conexión con el cliente');
this.syncStatus = false;
this.syncingClientId = null;
}
);
}
}