From 06d0a83aabe968c3b303551d5d6442b62dd9023f Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Wed, 4 Jun 2025 13:13:30 +0200
Subject: [PATCH] refs #2169 Refactor legend component to enhance client status
 display and add translations for client states

---
 .../global-status.component.html              |  50 +++------
 .../groups/shared/legend/legend.component.css |  25 +++++
 .../shared/legend/legend.component.html       | 100 +++++++++++++-----
 ogWebconsole/src/locale/en.json               |  12 ++-
 ogWebconsole/src/locale/es.json               |  12 ++-
 5 files changed, 131 insertions(+), 68 deletions(-)

diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.html b/ogWebconsole/src/app/components/global-status/global-status.component.html
index ae4d259..97317a7 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.html
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.html
@@ -8,17 +8,9 @@
   <mat-tab-group (selectedTabChange)="onTabChange($event)">
     <mat-tab label="OgBoot">
       <div *ngIf="!loading && !errorOgBoot" class="content-container">
-        <app-status-tab 
-          [loading]="loading"
-          [diskUsage]="ogBootDiskUsage"
-          [servicesStatus]="ogBootServicesStatus"
-          [installedOgLives]="installedOgLives"
-          [diskUsageChartData]="ogBootDiskUsageChartData"
-          [view]="view"
-          [colorScheme]="colorScheme"
-          [isDoughnut]="isDoughnut"
-          [showLabels]="showLabels"
-          [isDhcp]="isDhcp"
+        <app-status-tab [loading]="loading" [diskUsage]="ogBootDiskUsage" [servicesStatus]="ogBootServicesStatus"
+          [installedOgLives]="installedOgLives" [diskUsageChartData]="ogBootDiskUsageChartData" [view]="view"
+          [colorScheme]="colorScheme" [isDoughnut]="isDoughnut" [showLabels]="showLabels" [isDhcp]="isDhcp"
           [isRepository]="false">
         </app-status-tab>
       </div>
@@ -31,18 +23,9 @@
 
     <mat-tab label="Dhcp">
       <div *ngIf="!loading && !errorDhcp" class="content-container">
-        <app-status-tab
-          [loading]="loading"
-          [diskUsage]="dhcpDiskUsage"
-          [servicesStatus]="dhcpServicesStatus"
-          [subnets]="subnets"
-          [diskUsageChartData]="dhcpDiskUsageChartData"
-          [view]="view"
-          [colorScheme]="colorScheme"
-          [isDoughnut]="isDoughnut"
-          [showLabels]="showLabels"
-          [isDhcp]="isDhcp"
-          [isRepository]="false">
+        <app-status-tab [loading]="loading" [diskUsage]="dhcpDiskUsage" [servicesStatus]="dhcpServicesStatus"
+          [subnets]="subnets" [diskUsageChartData]="dhcpDiskUsageChartData" [view]="view" [colorScheme]="colorScheme"
+          [isDoughnut]="isDoughnut" [showLabels]="showLabels" [isDhcp]="isDhcp" [isRepository]="false">
         </app-status-tab>
       </div>
       <mat-card *ngIf="!loading && errorDhcp" class="error-card">
@@ -52,31 +35,22 @@
       </mat-card>
     </mat-tab>
 
-    <mat-tab label="Repositorios">
+    <mat-tab label="{{ 'repositoryLabel' | translate }}">
       <mat-tab-group>
         <mat-tab *ngFor="let repository of repositories" [label]="repository.name">
           <div *ngIf="!loading && !errorRepositories[repository.uuid] && repositoryStatuses[repository.uuid]">
-            <app-status-tab
-              [loading]="loading"
-              [diskUsage]="repositoryStatuses[repository.uuid].disk"
+            <app-status-tab [loading]="loading" [diskUsage]="repositoryStatuses[repository.uuid].disk"
               [servicesStatus]="repositoryStatuses[repository.uuid].services"
               [processesStatus]="repositoryStatuses[repository.uuid].processes"
-              [ramUsage]="repositoryStatuses[repository.uuid].ram"
-              [cpuUsage]="repositoryStatuses[repository.uuid].cpu"
+              [ramUsage]="repositoryStatuses[repository.uuid].ram" [cpuUsage]="repositoryStatuses[repository.uuid].cpu"
               [diskUsageChartData]="[
                 { name: 'Usado', value: repositoryStatuses[repository.uuid].disk.used },
                 { name: 'Disponible', value: repositoryStatuses[repository.uuid].disk.available }
-              ]"
-              [ramUsageChartData]="[
+              ]" [ramUsageChartData]="[
                 { name: 'Usado', value: repositoryStatuses[repository.uuid].ram.used },
                 { name: 'Disponible', value: repositoryStatuses[repository.uuid].ram.available }
-              ]"
-              [view]="view"
-              [colorScheme]="colorScheme"
-              [isDoughnut]="isDoughnut"
-              [showLabels]="showLabels"
-              [isDhcp]="false"
-              [isRepository]="true">
+              ]" [view]="view" [colorScheme]="colorScheme" [isDoughnut]="isDoughnut" [showLabels]="showLabels"
+              [isDhcp]="false" [isRepository]="true">
             </app-status-tab>
           </div>
           <mat-card *ngIf="!loading && errorRepositories[repository.uuid]" class="error-card">
diff --git a/ogWebconsole/src/app/components/groups/shared/legend/legend.component.css b/ogWebconsole/src/app/components/groups/shared/legend/legend.component.css
index e69de29..5ebf5ca 100644
--- a/ogWebconsole/src/app/components/groups/shared/legend/legend.component.css
+++ b/ogWebconsole/src/app/components/groups/shared/legend/legend.component.css
@@ -0,0 +1,25 @@
+mat-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(100px, 1fr));
+  gap: 16px;
+  padding: 8px;
+}
+
+.client-types,
+.other-items {
+  display: flex;
+  flex-direction: column;
+}
+
+.section-title {
+  font-size: large;
+  font-weight: 550;
+  padding-left: 17px;
+}
+
+mat-list-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: 8px;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/shared/legend/legend.component.html b/ogWebconsole/src/app/components/groups/shared/legend/legend.component.html
index 3d02ad5..387d3f4 100644
--- a/ogWebconsole/src/app/components/groups/shared/legend/legend.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/legend/legend.component.html
@@ -1,32 +1,76 @@
 <mat-list>
-  <mat-list-item>
-    <mat-icon matListItemIcon>apartment</mat-icon>
-    <div matListItemTitle>{{ 'orgUnitTitle' | translate }}</div>
-  </mat-list-item>
-  <mat-list-item>
-    <mat-icon matListItemIcon>meeting_room</mat-icon>
-    <div matListItemTitle>{{ 'classroomGroupsTitle' | translate }}</div>
-  </mat-list-item>
-  <mat-list-item>
-    <mat-icon matListItemIcon>school</mat-icon>
-    <div matListItemTitle>{{ 'classroomTitle' | translate }}</div>
-  </mat-list-item>
-  <mat-list-item>
-    <mat-icon matListItemIcon>lan</mat-icon>
-    <div matListItemTitle>{{ 'clientGroupsTitle' | translate }}</div>
-  </mat-list-item>
-  <mat-list-item>
-    <mat-icon matListItemIcon>computer</mat-icon>
-    <div matListItemTitle>{{ 'clientTitle' | translate }}</div>
-  </mat-list-item>
+  <div class="client-types">
+    <p class="section-title">Clientes</p>
+    <mat-divider></mat-divider>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_off.svg">
+      <div matListItemTitle>{{ 'clientOff' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_busy.svg">
+      <div matListItemTitle>{{ 'clientBusy' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_disconnected.svg">
+      <div matListItemTitle>{{ 'clientDisconnected' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_initializing.svg">
+      <div matListItemTitle>{{ 'clientInitializing' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_linux-session.svg">
+      <div matListItemTitle>{{ 'clientLinuxSession' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_linux.svg">
+      <div matListItemTitle>{{ 'clientLinux' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_macos.svg">
+      <div matListItemTitle>{{ 'clientMacOS' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_og-live.svg">
+      <div matListItemTitle>{{ 'clientOgLive' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_windows-session.svg">
+      <div matListItemTitle>{{ 'clientWindowsSession' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <img matListItemIcon src="assets/images/computer_windows.svg">
+      <div matListItemTitle>{{ 'clientWindows' | translate }}</div>
+    </mat-list-item>
+  </div>
 
-  <mat-list-item>
-    <mat-icon matListItemIcon style="color: green;">school</mat-icon>
-    <div matListItemTitle>{{ 'remoteAccess' | translate }}</div>
-  </mat-list-item>
-  <mat-list-item>
-    <mat-icon matListItemIcon style="color: rgb(209, 5, 5);">school</mat-icon>
-    <div matListItemTitle>{{ 'noRemoteAccess' | translate }}</div>
-  </mat-list-item>
+  <div class="other-items">
+    <p class="section-title">Entidades</p>
+    <mat-divider></mat-divider>
+    <mat-list-item>
+      <mat-icon matListItemIcon>apartment</mat-icon>
+      <div matListItemTitle>{{ 'orgUnitTitle' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <mat-icon matListItemIcon>meeting_room</mat-icon>
+      <div matListItemTitle>{{ 'classroomGroupsTitle' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <mat-icon matListItemIcon>school</mat-icon>
+      <div matListItemTitle>{{ 'classroomTitle' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <mat-icon matListItemIcon style="color: green;">school</mat-icon>
+      <div matListItemTitle>{{ 'remoteAccess' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <mat-icon matListItemIcon style="color: rgb(209, 5, 5);">school</mat-icon>
+      <div matListItemTitle>{{ 'noRemoteAccess' | translate }}</div>
+    </mat-list-item>
+    <mat-list-item>
+      <mat-icon matListItemIcon>lan</mat-icon>
+      <div matListItemTitle>{{ 'clientGroupsTitle' | translate }}</div>
+    </mat-list-item>
+  </div>
 
 </mat-list>
\ No newline at end of file
diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json
index fcfacdf..6e91915 100644
--- a/ogWebconsole/src/locale/en.json
+++ b/ogWebconsole/src/locale/en.json
@@ -533,5 +533,15 @@
   "tracesTitleStepText": "In this screen, you can see the execution traces of each client, with its id, command, real-time status, date and actions to be performed.",
   "filtersStepText": "Here you can see the different filters to apply to the table information.",
   "tracesProgressStepText": "Here you can see the execution status updated in real time.",
-  "tracesInfoStepText": "Here you can consult detailed information about the specific trace."
+  "tracesInfoStepText": "Here you can consult detailed information about the specific trace.",
+  "clientOff": "Client off",
+  "clientBusy": "Busy client",
+  "clientDisconnected": "Disconnected client",
+  "clientInitializing": "Initializing client",
+  "clientLinuxSession": "Linux session client",
+  "clientLinux": "Linux client",
+  "clientMacOS": "MacOS client",
+  "clientOgLive": "OGLive client",
+  "clientWindowsSession": "Windows session client",
+  "clientWindows": "Windows client"
 }
diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json
index d130767..16c0409 100644
--- a/ogWebconsole/src/locale/es.json
+++ b/ogWebconsole/src/locale/es.json
@@ -536,5 +536,15 @@
   "tracesTitleStepText": "En esta pantalla, puedes ver las trazas de ejecución de cada cliente, con su id, comando, estado en tiempo real, fecha y acciones a realizar.",
   "filtersStepText": "Aquí puedes ver los diferentes filtros que aplicar a la información de la tabla.",
   "tracesProgressStepText": "Aquí puedes ver el estado de ejecución actualizado en tiempo real.",
-  "tracesInfoStepText": "Aquí puedes consultar información detallada de la traza en concreto."
+  "tracesInfoStepText": "Aquí puedes consultar información detallada de la traza en concreto.",
+  "clientOff": "Cliente apagado",
+  "clientBusy": "Cliente ocupado",
+  "clientDisconnected": "Cliente desconectado",
+  "clientInitializing": "Cliente inicializando",
+  "clientLinuxSession": "Cliente con sesión Linux",
+  "clientLinux": "Cliente Linux",
+  "clientMacOS": "Cliente MacOS",
+  "clientOgLive": "Cliente OGLive",
+  "clientWindowsSession": "Cliente con sesión Windows",
+  "clientWindows": "Cliente Windows"
 }