Refactor groups component to update filter option value and improve client status display

ogWebconsole/src/app/components/groups/groups.component.css

@@ -186,7 +186,6 @@ button[mat-raised-button] {
 
 mat-tree {
   background-color: #f9f9f9;
-  border-right: 1px solid #ddd;
   padding: 10px;
 }
 
@@ -317,29 +316,34 @@ mat-tree mat-tree-node.disabled:hover {
   margin-bottom: 16px;
 }
 
-.pc-og-live {
-  color: #4caf50;
+.chip-busy {
+  background-color: indianred !important;
+  color: black;
 }
 
-.pc-busy {
-  color: #ff9800;
+.chip-og-live {
+  background-color: yellow !important;
+  color: black;
 }
 
-.pc-windows {
-  color: #0078d7;
+.chip-windows,
+.chip-windows-session,
+.chip-macos {
+  background-color: cornflowerblue !important;
+  color: white;
 }
 
-.pc-linux {
-  color: #f0ad4e;
+.chip-linux,
+.chip-linux-session {
+  background-color: mediumpurple !important;
+  color: white;
 }
 
-.pc-macos {
-  color: #999999;
+.chip-off {
+  background-color: darkgrey !important;
+  color: white;
 }
 
-.pc-off {
-  color: #f44336;
-}
 
 .clients-card-container {
   display: flex;
@@ -553,7 +557,30 @@ button[mat-raised-button] {
   padding: 0 16px;
 }
 
+.mat-elevation-z8 {
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+}
+
 .filters-container mat-form-field {
   flex: 1 1 300px;
   max-width: 300px;
 }
+
+.client-info {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin: 5px;
+}
+
+.client-name {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.flex {
+  display: flex;
+  justify-self: center;
+  align-items: center;
+}
+

ogWebconsole/src/app/components/groups/groups.component.html

@@ -49,7 +49,7 @@
         <mat-option value="group">{{ 'computerGroups' | translate }}</mat-option>
       </mat-select>
     </mat-form-field>
-    
+
   </div>
 </mat-expansion-panel>
 
@@ -159,6 +159,8 @@
         </mat-tree-node>
       </mat-tree>
     </div>
+    <mat-divider [vertical]="true"></mat-divider>
+
     <mat-menu restoreFocus=false #commandMenu="matMenu">
       <button mat-menu-item *ngFor="let command of commands" (click)="executeCommand(command, selectedNode)">
         <span>{{ command.name }}</span>
@@ -203,23 +205,33 @@
             <div class="client-details">
               <span class="client-name">{{ client.name }}</span>
               <span class="client-ip">{{ client.ip }}</span>
-              <mat-chip [ngClass]="{
-                'chip-og-live': client.status === 'og-live',
-                'chip-busy': client.status === 'busy',
-                'chip-windows': client.status === 'windows' || client.status === 'windows-session',
-                'chip-linux': client.status === 'linux' || client.status === 'linux-session',
-                'chip-macos': client.status === 'macos',
-                'chip-off': client.status === 'off'
-              }">
-                {{ client.status || 'off' }}
-              </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)">
+              <div class="flex">
+                <mat-chip [ngClass]="{
+                  'chip-og-live': client.status === 'og-live',
+                  'chip-busy': client.status === 'busy',
+                  'chip-windows': client.status === 'windows' || client.status === 'windows-session',
+                  'chip-linux': client.status === 'linux' || client.status === 'linux-session',
+                  'chip-macos': client.status === 'macos',
+                  'chip-off': client.status === 'off'
+                }">
+                  {{ client.status || 'off' }}
+
+                </mat-chip>
+                <button
+                  *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
+                  mat-icon-button color="primary"
+                  (click)="getStatus(client)">
                   <mat-icon>sync</mat-icon>
-                    <span>{{ 'sync' | translate }}</span>
                 </button>
 
+                <button
+                  *ngIf="syncStatus && syncingClientId === client.uuid"
+                  mat-icon-button color="primary">
+                  <mat-spinner diameter="24"></mat-spinner>
+                </button>
+              </div>
+              <button mat-raised-button color="primary" [matMenuTriggerFor]="clientMenu">Acciones</button>
+              <mat-menu #clientMenu="matMenu">
                 <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
                   <mat-icon>edit</mat-icon>
                     <span>{{ 'edit' | translate }}</span>
@@ -236,25 +248,22 @@
             </div>
           </div>
         </div>
-        <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
       </div>
       <div class="clients-table" *ngIf="currentView === 'list'">
         <table mat-table matSort [dataSource]="selectedClients" class="mat-elevation-z8">
           <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'name' | translate }} </th>
-            <td mat-cell *matCellDef="let client"> {{ client.name }} </td>
-          </ng-container>
-          <ng-container matColumnDef="ip">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> IP </th>
-            <td mat-cell *matCellDef="let client"> {{ client.ip }} </td>
-          </ng-container>
-          <ng-container matColumnDef="mac">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> MAC </th>
-            <td mat-cell *matCellDef="let client"> {{ client.mac }} </td>
+            <td mat-cell *matCellDef="let client">
+              <div class="client-info">
+                <div class="client-name">{{ client.name }}</div>
+                <div class="client-ip">{{ client.ip }}</div>
+                <div class="client-ip">{{ client.mac }}</div>
+              </div>
+            </td>
           </ng-container>
           <ng-container matColumnDef="oglive">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> OG Live </th>
-            <td mat-cell *matCellDef="let client"> {{ client.oglive }} </td>
+            <td mat-cell *matCellDef="let client"> {{ client.ogLive?.name }} </td>
           </ng-container>
           <ng-container matColumnDef="status">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'status' | translate }} </th>
@@ -268,12 +277,25 @@
                 'chip-off': client.status === 'off'
               }">
                 {{ client.status || 'off' }}
+
               </mat-chip>
+              <button
+                *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
+                mat-icon-button color="primary"
+                (click)="getStatus(client)">
+                <mat-icon>sync</mat-icon>
+              </button>
+
+              <button
+                *ngIf="syncStatus && syncingClientId === client.uuid"
+                mat-icon-button color="primary">
+                <mat-spinner diameter="24"></mat-spinner>
+              </button>
             </td>
           </ng-container>
           <ng-container matColumnDef="maintenace">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'maintenance' | translate }} </th>
-            <td mat-cell *matCellDef="let client"> {{ client.mantenimiento }} </td>
+            <td mat-cell *matCellDef="let client"> {{ client.maintenance }} </td>
           </ng-container>
           <ng-container matColumnDef="subnet">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'subnet' | translate }} </th>
@@ -281,14 +303,14 @@
           </ng-container>
           <ng-container matColumnDef="pxeTemplate">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'pxeTemplate' | translate }} </th>
-            <td mat-cell *matCellDef="let client"> {{ client.pxeTemplate }} </td>
+            <td mat-cell *matCellDef="let client"> {{ client.template?.name }} </td>
           </ng-container>
 
           <ng-container matColumnDef="parentName">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'parent' | translate }} </th>
             <td mat-cell *matCellDef="let client"> {{ client.parentName }} </td>
           </ng-container>
-          
+
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'actions' | translate }} </th>
             <td mat-cell *matCellDef="let client">
@@ -300,22 +322,6 @@
 
               <mat-menu #clientMenu="matMenu">
 
-                <mat-menu restoreFocus=false #commandMenu="matMenu" xPosition="before">
-                  <button mat-menu-item *ngFor="let command of commands" (click)="executeCommand(command, client)">
-                  <span>{{ command.name }}</span>
-                  </button>
-                </mat-menu>
-
-                <button mat-menu-item [matMenuTriggerFor]="commandMenu" (click)="fetchCommands()">
-                  <mat-icon>play_arrow</mat-icon>
-                  <span>{{ 'executeCommand' | translate }}</span>
-                </button>
-              
-                <button mat-menu-item *ngIf="(!syncStatus || syncingClientId !== client.uuid)" (click)="getStatus(client)">
-                  <mat-icon>sync</mat-icon>
-                    <span>{{ 'sync' | translate }}</span>
-                </button>
-
                 <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
                   <mat-icon>edit</mat-icon>
                     <span>{{ 'edit' | translate }}</span>

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -63,9 +63,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
   syncingClientId: string | null = null;
   private originalTreeData: TreeNode[] = [];
 
-
-
-  displayedColumns: string[] = ['name', 'ip', 'mac', 'oglive', 'status', 'maintenace', 'subnet', 'pxeTemplate', 'parentName', 'actions'];
+  displayedColumns: string[] = ['name', 'oglive', 'status', 'maintenace', 'subnet', 'pxeTemplate', 'parentName', 'actions'];
 
   private _sort!: MatSort;
   private _paginator!: MatPaginator;
@@ -233,7 +231,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
       ...client,
       parentName: node.name
     }));
-  
+
     if (node.children) {
       node.children.forEach((child) => {
         clients = clients.concat(this.collectAllClients(child).map(client => ({
@@ -244,7 +242,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     }
     return clients;
   }
-  
+
 
   private async loadChildrenAndClients(id: string): Promise<UnidadOrganizativa> {
     try {
@@ -310,7 +308,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
       this.selectedClients._updateChangeSubscription();
     }
   }
-  
+
   getNodeIcon(node: TreeNode): string {
     switch (node.type) {
       case NodeType.OrganizationalUnit:

ogWebconsole/src/locale/en.json

@@ -399,6 +399,7 @@
   "ogLive": "ogLive",
   "TOOLTIP_PXE_IMAGES": "View available PXE boot images",
   "pxeTemplates": "PXE Templates",
+  "pxeTemplate" : "Plantilla",
   "TOOLTIP_PXE_TEMPLATES": "Manage PXE boot templates",
   "pxeBootFiles": "PXE Boot Files",
   "TOOLTIP_PXE_BOOT_FILES": "Configure PXE boot files",

ogWebconsole/src/locale/es.json

@@ -401,6 +401,7 @@
   "ogLive": "ogLive",
   "TOOLTIP_PXE_IMAGES": "Ver imágenes disponibles para arranque PXE",
   "pxeTemplates": "Plantillas PXE",
+  "pxeTemplate": "Plantilla",
   "TOOLTIP_PXE_TEMPLATES": "Gestionar plantillas de arranque PXE",
   "pxeBootFiles": "Arranque PXE",
   "TOOLTIP_PXE_BOOT_FILES": "Configurar archivos de arranque PXE",