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

refs #2169 Refactor legend component to enhance client status display and add translations for client states

pull/26/head
Lucas Lara García 2025-06-04 13:13:30 +02:00
parent 3bc07b56cd
commit 06d0a83aab
5 changed files with 131 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ogWebconsole/src/app/components/global-status/global-status.component.html
View File

@ -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">

25
ogWebconsole/src/app/components/groups/shared/legend/legend.component.css
View File

@ -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;
}

100
ogWebconsole/src/app/components/groups/shared/legend/legend.component.html
View File

@ -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>

12
ogWebconsole/src/locale/en.json
View File

@ -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"
}

12
ogWebconsole/src/locale/es.json
View File

@ -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"
}