refs #1725 Use tab status component for dchp status in global component
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
parent
50755bd1d5
commit
6c8ad465ea
|
|
@ -1,80 +1,7 @@
|
|||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
mat-dialog-content {
|
||||
padding-top: 0.5em !important;
|
||||
}
|
||||
|
||||
.disk-usage-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.disk-usage {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service-list {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.services-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.services-status li {
|
||||
margin: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-led {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.status-led.active {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.status-led.inactive {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.disk-title {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
|
|||
|
|
@ -1,68 +1,39 @@
|
|||
<header>
|
||||
<h1 mat-dialog-title>Estado global de la aplicación</h1>
|
||||
<h1 mat-dialog-title>Estado global de la aplicación</h1>
|
||||
</header>
|
||||
<mat-dialog-content>
|
||||
<mat-tab-group (selectedTabChange)="onTabChange($event)">
|
||||
<mat-tab label="OgBoot">
|
||||
<app-loading [isLoading]="loading"></app-loading>
|
||||
<div *ngIf="!loading" class="dashboard">
|
||||
<!-- Disk Usage Section -->
|
||||
<div class="disk-usage-container">
|
||||
<h3 class="disk-title">{{ 'diskUsageTitle' | translate }}</h3>
|
||||
<div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
|
||||
<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData"
|
||||
[doughnut]="isDoughnut" [labels]="showLabels">
|
||||
</ngx-charts-pie-chart>
|
||||
<div class="disk-usage-info">
|
||||
<p>{{ 'totalLabel' | translate }}: <strong>{{ formatBytes(ogBootDiskUsage.total) }}</strong></p>
|
||||
<p>{{ 'usedLabel' | translate }}: <strong>{{ formatBytes(ogBootDiskUsage.used) }}</strong></p>
|
||||
<p>{{ 'availableLabel' | translate }}: <strong>{{ formatBytes(ogBootDiskUsage.available) }}</strong></p>
|
||||
<p>{{ 'freeLabel' | translate }}: <strong>{{ ogBootDiskUsage.percentage }}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-tab-group (selectedTabChange)="onTabChange($event)">
|
||||
<mat-tab label="OgBoot">
|
||||
<app-status-tab
|
||||
[loading]="loading"
|
||||
[diskUsage]="ogBootDiskUsage"
|
||||
[servicesStatus]="ogBootServicesStatus"
|
||||
[installedOgLives]="installedOgLives"
|
||||
[diskUsageChartData]="ogBootDiskUsageChartData"
|
||||
[view]="view"
|
||||
[colorScheme]="colorScheme"
|
||||
[isDoughnut]="isDoughnut"
|
||||
[showLabels]="showLabels">
|
||||
</app-status-tab>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Services Status Section -->
|
||||
<div class="services-status" joyrideStep="servicesStatusStep"
|
||||
text="{{ 'servicesStatusDescription' | translate }}">
|
||||
<h3 class="service-title">{{ 'servicesTitle' | translate }}</h3>
|
||||
<ul class="service-list">
|
||||
<li *ngFor="let service of getServices()">
|
||||
<span class="status-led"
|
||||
[ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"></span>
|
||||
{{ service.name }}: {{ service.status | translate }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<mat-tab label="Dhcp">
|
||||
<app-status-tab
|
||||
[loading]="loading"
|
||||
[diskUsage]="dhcpDiskUsage"
|
||||
[servicesStatus]="dhcpServicesStatus"
|
||||
[installedOgLives]="installedOgLives"
|
||||
[diskUsageChartData]="dhcpDiskUsageChartData"
|
||||
[view]="view"
|
||||
[colorScheme]="colorScheme"
|
||||
[isDoughnut]="isDoughnut"
|
||||
[showLabels]="showLabels">
|
||||
</app-status-tab>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Installed OgLives Section -->
|
||||
<div class="installed-oglives" joyrideStep="oglivesStep" text="{{ 'oglivesDescription' | translate }}">
|
||||
<h3>{{ 'installedOglivesTitle' | translate }}</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ 'idLabel' | translate }}</th>
|
||||
<th>{{ 'kernelLabel' | translate }}</th>
|
||||
<th>{{ 'architectureLabel' | translate }}</th>
|
||||
<th>{{ 'revisionLabel' | translate }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let oglive of installedOgLives">
|
||||
<td>{{ oglive.id }}</td>
|
||||
<td>{{ oglive.kernel }}</td>
|
||||
<td>{{ oglive.architecture }}</td>
|
||||
<td>{{ oglive.revision }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Dhcp"> Content 2 </mat-tab>
|
||||
<mat-tab label="Pxe"> Content 3 </mat-tab>
|
||||
</mat-tab-group>
|
||||
<mat-tab label="Pxe"> Content 3 </mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions class="action-container">
|
||||
<button class="ordinary-button" [mat-dialog-close]="true">{{ 'closeButton' | translate }}</button>
|
||||
<button class="ordinary-button" [mat-dialog-close]="true">{{ 'closeButton' | translate }}</button>
|
||||
</mat-dialog-actions>
|
||||
|
|
@ -11,14 +11,8 @@ import { MatTabChangeEvent } from '@angular/material/tabs';
|
|||
})
|
||||
export class GlobalStatusComponent implements OnInit {
|
||||
baseUrl: string;
|
||||
ogBootApiUrl: string;
|
||||
loading: boolean = false;
|
||||
ogBootDiskUsage: any = {};
|
||||
ogBootSubnets: any[] = [];
|
||||
ogBootServicesStatus: any = {};
|
||||
installedOgLives: any[] = [];
|
||||
diskUsageChartData: any[] = [];
|
||||
gradient: boolean = true;
|
||||
showLabels: boolean = true;
|
||||
isDoughnut: boolean = true;
|
||||
colorScheme: any = {
|
||||
|
|
@ -26,6 +20,16 @@ export class GlobalStatusComponent implements OnInit {
|
|||
};
|
||||
view: [number, number] = [400, 220];
|
||||
|
||||
ogBootApiUrl: string;
|
||||
ogBootDiskUsage: any = {};
|
||||
ogBootServicesStatus: any = {};
|
||||
ogBootDiskUsageChartData: any[] = [];
|
||||
|
||||
dhcpApiUrl: string;
|
||||
dhcpDiskUsage: any = {};
|
||||
dhcpServicesStatus: any = {};
|
||||
dhcpDiskUsageChartData: any[] = [];
|
||||
|
||||
constructor(
|
||||
private configService: ConfigService,
|
||||
private http: HttpClient,
|
||||
|
|
@ -33,60 +37,54 @@ export class GlobalStatusComponent implements OnInit {
|
|||
) {
|
||||
this.baseUrl = this.configService.apiUrl;
|
||||
this.ogBootApiUrl = `${this.baseUrl}/og-boot/status`;
|
||||
this.dhcpApiUrl = `${this.baseUrl}/og-dhcp/status`;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadOgBootStatus();
|
||||
}
|
||||
|
||||
loadOgBootStatus(): void {
|
||||
loadStatus(apiUrl: string, diskUsage: any, servicesStatus: any, diskUsageChartData: any[]): void {
|
||||
this.loading = true;
|
||||
this.http.get<any>(this.ogBootApiUrl).subscribe({
|
||||
const timeoutId = setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.toastService.error('Error al sincronizar: Tiempo de espera excedido')
|
||||
}, 5000);
|
||||
this.http.get<any>(apiUrl).subscribe({
|
||||
next: data => {
|
||||
this.ogBootDiskUsage = data.message.disk_usage;
|
||||
this.ogBootSubnets = data.message.subnets;
|
||||
this.ogBootServicesStatus = data.message.services_status;
|
||||
diskUsage = data.message.disk_usage;
|
||||
servicesStatus = data.message.services_status;
|
||||
this.installedOgLives = data.message.installed_oglives;
|
||||
this.diskUsageChartData = [
|
||||
{ name: 'Usado', value: parseFloat(this.ogBootDiskUsage.used) },
|
||||
{ name: 'Disponible', value: parseFloat(this.ogBootDiskUsage.available) }
|
||||
diskUsageChartData = [
|
||||
{ name: 'Usado', value: parseFloat(diskUsage.used) },
|
||||
{ name: 'Disponible', value: parseFloat(diskUsage.available) }
|
||||
];
|
||||
this.loading = false;
|
||||
clearTimeout(timeoutId);
|
||||
},
|
||||
error: error => {
|
||||
this.toastService.error('Error al sincronizar ogBoot');
|
||||
this.toastService.error('Error al sincronizar');
|
||||
console.log(error);
|
||||
this.loading = false;
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadOgBootStatus(): void {
|
||||
this.loadStatus(this.ogBootApiUrl, this.ogBootDiskUsage, this.ogBootServicesStatus, this.ogBootDiskUsageChartData)
|
||||
}
|
||||
|
||||
loadDhcpStatus(): void {
|
||||
this.loadStatus(this.dhcpApiUrl, this.dhcpDiskUsage, this.dhcpServicesStatus, this.dhcpDiskUsageChartData)
|
||||
}
|
||||
|
||||
onTabChange(event: MatTabChangeEvent): void {
|
||||
if (event.tab.textLabel === 'OgBoot') {
|
||||
this.loadOgBootStatus();
|
||||
}
|
||||
}
|
||||
|
||||
getServices(): { name: string, status: string }[] {
|
||||
if (!this.ogBootServicesStatus) {
|
||||
return [];
|
||||
}
|
||||
const services = Object.keys(this.ogBootServicesStatus).map(key => ({
|
||||
name: key,
|
||||
status: this.ogBootServicesStatus[key]
|
||||
}))
|
||||
return services;
|
||||
}
|
||||
|
||||
formatBytes(bytes: number): string {
|
||||
if (bytes >= 1e9) {
|
||||
return (bytes / 1e9).toFixed(2) + ' GB';
|
||||
} else if (bytes >= 1e6) {
|
||||
return (bytes / 1e6).toFixed(2) + ' MB';
|
||||
} else if (bytes >= 1e3) {
|
||||
return (bytes / 1e3).toFixed(2) + ' KB';
|
||||
} else {
|
||||
return bytes + ' B';
|
||||
else if (event.tab.textLabel === 'Dhcp') {
|
||||
this.loadDhcpStatus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue