Ogboot Status hardcode delete

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

@@ -1,53 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-ogboot-status',
   templateUrl: './ogboot-status.component.html',
-  styleUrl: './ogboot-status.component.css'
+  styleUrls: ['./ogboot-status.component.css']
 })
-export class OgbootStatusComponent {
-  diskUsage: any = {
-    total: '11G',
-    used: '9.4G',
-    available: '794M',
-    percentage: '93%'
-  };
+export class OgbootStatusComponent implements OnInit {
+  diskUsage: any = {};
+  servicesStatus: any = {};
+  installedOglives: any[] = [];
+  diskUsageChartData: any[] = [];
 
-  servicesStatus: any = {
-    oglive_daemon: 'active',
-    tftpboot: 'active',
-    nginx: 'inactive'
-  };
+  view: [number, number] = [1300, 500];
 
-  installedOglives: any[] = [
-    {
-      id: 'f7a8ba47d27d0fbceb82b55d8b5f8ccc',
-      kernel: '5.11.0',
-      architecture: 'amd64',
-      revision: 'r20210413'
-    },
-    {
-      id: '6153d21e7bd7f2486c027c5b9b3b93b6',
-      kernel: '5.13.0',
-      architecture: 'amd64',
-      revision: 'r20210706'
-    }
-  ];
-
-  diskUsageChartData: any[] = [
-    {
-      name: 'Usado',
-      value: parseFloat(this.diskUsage.used)
-    },
-    {
-      name: 'Disponible',
-      value: parseFloat(this.diskUsage.available)
-    }
-  ];
-
-  view: [number, number] = [1300, 500]; // Tamaño de la gráfica
-
-  // Opciones de la gráfica
   gradient: boolean = true;
   showLegend: boolean = true;
   showLabels: boolean = true;
@@ -56,15 +22,36 @@ export class OgbootStatusComponent {
     domain: ['#FF6384', '#3f51b5']
   };
 
-  constructor() {}
+  constructor(private http: HttpClient) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.loadStatus();
+  }
 
-  // Método para obtener los servicios en un formato adecuado para ser mostrado
+  loadStatus(): void {
+    this.http.get<any>('http://127.0.0.1:8080/og-boot/status').subscribe(data => {
+      this.diskUsage = data.disk_usage;
+      this.servicesStatus = data.services_status;
+      this.installedOglives = data.installed_oglives;
+
+      this.diskUsageChartData = [
+        {
+          name: 'Usado',
+          value: parseFloat(this.diskUsage.used)
+        },
+        {
+          name: 'Disponible',
+          value: parseFloat(this.diskUsage.available)
+        }
+      ];
+    }, error => {
+      console.error('Error fetching status', error);
+    });
+  }
   getServices(): { name: string, status: string }[] {
     return Object.keys(this.servicesStatus).map(key => ({
       name: key,
       status: this.servicesStatus[key]
     }));
   }
-}
+}