refs #1725 Use tab status component for dchp status in global component

ogWebconsole/src/app/components/global-status/global-status.component.css

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

ogWebconsole/src/app/components/global-status/global-status.component.html

@@ -4,62 +4,33 @@
 <mat-dialog-content>
 	<mat-tab-group (selectedTabChange)="onTabChange($event)">
 		<mat-tab label="OgBoot">
-            <app-loading [isLoading]="loading"></app-loading>
+			<app-status-tab 
-            <div *ngIf="!loading" class="dashboard">
+			[loading]="loading"
-                <!-- Disk Usage Section -->
+			[diskUsage]="ogBootDiskUsage"
-                <div class="disk-usage-container">
+			[servicesStatus]="ogBootServicesStatus"
-                    <h3 class="disk-title">{{ 'diskUsageTitle' | translate }}</h3>
+			[installedOgLives]="installedOgLives"
-                    <div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
+			[diskUsageChartData]="ogBootDiskUsageChartData"
-                        <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData"
+			[view]="view"
-                            [doughnut]="isDoughnut" [labels]="showLabels">
+			[colorScheme]="colorScheme"
-                        </ngx-charts-pie-chart>
+			[isDoughnut]="isDoughnut"
-                        <div class="disk-usage-info">
+			[showLabels]="showLabels">
-                            <p>{{ 'totalLabel' | translate }}: <strong>{{ formatBytes(ogBootDiskUsage.total) }}</strong></p>
+			</app-status-tab>
-                            <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>
-
-                <!-- 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>
-
-                <!-- 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="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>
+
 		<mat-tab label="Pxe"> Content 3 </mat-tab>
 	</mat-tab-group>
 </mat-dialog-content>

ogWebconsole/src/app/components/global-status/global-status.component.ts

@@ -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;
+        diskUsage = data.message.disk_usage;
-        this.ogBootSubnets = data.message.subnets;
+        servicesStatus = data.message.services_status;
-        this.ogBootServicesStatus = data.message.services_status;
         this.installedOgLives = data.message.installed_oglives;
-        this.diskUsageChartData = [
+        diskUsageChartData = [
-          { name: 'Usado', value: parseFloat(this.ogBootDiskUsage.used) },
+          { name: 'Usado', value: parseFloat(diskUsage.used) },
-          { name: 'Disponible', value: parseFloat(this.ogBootDiskUsage.available) }
+          { 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();
     }
-  }
+    else if (event.tab.textLabel === 'Dhcp') {
-
+      this.loadDhcpStatus();
-  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';
     }
   }
 }