New Features:

1. Flamegraph showing data from firestore
2. Flamegraph service gets data
New Pages:
1. flame-graph.page.ts
Bugs Corrected:
To Be Corrected:
0. On product delete, delete trace results
1. On product delete, delete flamegraph results

src/app/pages/flame-graph-date/flame-graph-date.page.ts

@@ -5,6 +5,7 @@ import {ActivatedRoute, Router} from "@angular/router";
 import {User} from "../../interfaces/user";
 import {Product} from "../../interfaces/product";
 
+
 @Component({
   selector: 'app-flame-graph-date',
   templateUrl: './flame-graph-date.page.html',
@@ -23,7 +24,7 @@ export class FlameGraphDatePage implements OnInit {
     private route: ActivatedRoute,
   ) { }
 
-  async ngOnInit() {
+  async ionViewWillEnter() {
     this.getProductFromParams();
     await this.getDates();
   }
@@ -95,4 +96,7 @@ export class FlameGraphDatePage implements OnInit {
     await this.loadingCtrl.dismiss();
   }
 
+  ngOnInit(): void {
+  }
+
 }

src/app/pages/flame-graph-for/flame-graph-for.page.ts

@@ -6,6 +6,7 @@ import {Router} from "@angular/router";
 import {User} from "../../interfaces/user";
 import {FlameGraphService} from "../../services/flame-graph.service";
 
+
 @Component({
   selector: 'app-flame-graph-for',
   templateUrl: './flame-graph-for.page.html',
@@ -21,7 +22,7 @@ export class FlameGraphForPage implements OnInit {
     private router: Router
   ) {}
 
-  async ngOnInit() {
+  async ionViewWillEnter() {
     await this.getProducts();
   }
 
@@ -83,4 +84,7 @@ export class FlameGraphForPage implements OnInit {
   viewProduct(product: Product) {
 
   }
+
+  ngOnInit(): void {
+  }
 }

src/app/pages/flame-graph/flame-graph.page.ts

@@ -5,6 +5,9 @@ import {FlameGraphService} from "../../services/flame-graph.service";
 import {LoadingController} from "@ionic/angular";
 import {ActivatedRoute, Router} from "@angular/router";
 import {Product} from "../../interfaces/product";
+import {User} from "../../interfaces/user";
+
+
 
 
 @Component({
@@ -18,6 +21,10 @@ export class FlameGraphPage implements OnInit {
   date:string = ''
 
 
+
+
+
+
   // @ts-ignore
   config:FlameGraphConfig = {data}
 
@@ -29,11 +36,13 @@ export class FlameGraphPage implements OnInit {
     private route: ActivatedRoute,
   ) { }
 
-  ngOnInit() {
+  ionViewWillEnter() {
     this.getProductAndDateFromParams();
+    this.getFlameGraph();
   }
 
 
+
   /**
    * This method gets the product and date from URL parameters.
    */
@@ -48,79 +57,157 @@ export class FlameGraphPage implements OnInit {
 
   }
 
+  async getFlameGraph() {
+    try {
+      await this.showLoading()
+      const userString = localStorage.getItem('user');
 
+      if (!userString) {
+        return;
+      }
 
+      const user: User = JSON.parse(userString);
+      const orgName:string = user.orgName!;
+      console.log(orgName);
 
+      const flameGraph = await this.flameGraphService.getFlameGraphByDate(orgName, this.product.productObjective!, this.date);
+      console.log(flameGraph);
 
-}
+      let allRawData: RawData[] = [];
 
-const data = [
+      for (let key in flameGraph) {
+        // @ts-ignore
+        const data_to_transform = flameGraph?.[key];
+        console.log(data_to_transform);
+
+        for (let serverKey in data_to_transform) {
+          const rawData = this.transformToRawData(data_to_transform[serverKey][0]);
+          allRawData.push(rawData);
+        }
 
-  {
-    "label": "BDD",
-    "value": 22,
-    "children": [
-      {
-        "label": "SubService1",
-        "value": 50,
-        "children": [
-          {
-            "label": "SubSub1",
-            "value": 100,
-            "children": [
-              {
-                "label": "SubSubSub2",
-                "value": 75,
-                "children": []
-              },
-              {
-                "label": "SubSubSub1",
-                "value": 25,
-                "children": []
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "label": "SubService2",
-        "value": 80,
-        "children": []
       }
-    ]
-  },
-  {
-    "label": "BDD2",
-    "value": 22,
-    "children": [
-      {
-        "label": "SubService1",
-        "value": 50,
-        "children": [
-          {
-            "label": "SubSub1",
-            "value": 100,
-            "children": [
-              {
-                "label": "SubSubSub2",
-                "value": 69.44444444444444,
-                "children": []
-              },
-              {
-                "label": "SubSubSub1",
-                "value": 30.555555555555557,
-                "children": []
-              }
-            ]
+
+      //Add the root node
+      allRawData = [{
+        label: "root",
+        value: 100,
+        children: allRawData
+      }];
+
+
+      this.config = {data: allRawData};
+      console.log(allRawData);
+
+
+
+
+
+
+
+
+
+      await this.hideLoading();
+
+
+
+
+
+      } catch (e) {
+      console.log(e);
+    }
+  }
+
+  /**
+   * Show a loading spinner.
+   */
+  async showLoading() {
+    const loading = await this.loadingCtrl.create({
+    });
+    await loading.present();
+  }
+
+  /**
+   * Hide the loading spinner.
+   */
+  async hideLoading() {
+    await this.loadingCtrl.dismiss();
+  }
+
+
+  ngOnInit(): void {
+  }
+
+  average(values: string[]): number {
+    const numbers = values.map(Number);
+    const sum = numbers.reduce((acc, val) => acc + val, 0);
+    return sum / numbers.length;
+  }
+
+  transformToRawData(json: any): RawData {
+    const cpuUsage = json.cpu_usage ? this.average(json.cpu_usage) : 0;
+    const children: RawData[] = [];
+
+    // Loop through each key in the object
+    for (const key in json) {
+      if (key === "id" || key === "cpu_usage") continue;
+
+      const value = json[key];
+
+      if (typeof value === 'object' && !Array.isArray(value)) {
+        // If the key is "sub_services", handle its children directly
+        if (key === "sub_services") {
+          for (const subKey in value) {
+            const subValue = value[subKey];
+            const subCpuUsage = subValue.cpu_usage ? this.average(subValue.cpu_usage) : 0;
+
+            const child: RawData = {
+              label: subKey,
+              value: subCpuUsage,
+              children: this.transformToRawData(subValue).children
+            };
+
+            children.push(child);
           }
-        ]
-      },
-      {
-        "label": "SubService2",
-        "value": 71.11111111111111,
-        "children": []
+        } else {
+          const childCpuUsage = value.cpu_usage ? this.average(value.cpu_usage) : 0;
+
+          const child: RawData = {
+            label: key,
+            value: childCpuUsage,
+            children: this.transformToRawData(value).children
+          };
+
+          children.push(child);
+        }
+      } else if (typeof value !== 'object') {
+        children.push({
+          label: key,
+          value: 0,
+          children: []
+        });
       }
-    ]
+    }
+
+    return {
+      label: json.id,
+      value: cpuUsage,
+      children: children
+    };
   }
 
+
+
+
+
+
+}
+
+const data = [
+  {
+    label:"root",
+    value: 100,
+    children:[]
+  }
 ] as RawData[];
+
+

src/app/services/flame-graph.service.ts

@@ -1,14 +1,21 @@
 import { Injectable } from '@angular/core';
-import {collection, Firestore, getDocs} from "@angular/fire/firestore";
+import {collection, doc, Firestore, getDoc, getDocs} from "@angular/fire/firestore";
 import {Product} from "../interfaces/product";
+import {DocumentData} from "@angular/fire/compat/firestore";
+import {HttpClient} from "@angular/common/http";
 
 @Injectable({
   providedIn: 'root'
 })
 export class FlameGraphService {
 
+  url:string = 'https://cors-ea3m.onrender.com/https://devprobeapi.onrender.com/flame_graph_date';
+
+
+
   constructor(
-    private firestore: Firestore
+    private firestore: Firestore,
+    private http: HttpClient,
   ) { }
 
   async getProducts(orgName:string){
@@ -33,16 +40,21 @@ export class FlameGraphService {
     }
   }
 
-  async getFlameGraphByDate(orgName:string, productObjective:string, date:string){
+  async getFlameGraphByDate(orgName: string, productObjective: string, date: string) {
     try {
-      const collectionRef = collection(this.firestore, 'teams', orgName, 'products', productObjective, 'cpu_usage', date);
-      const flameGraph = await getDocs(collectionRef);
-      return flameGraph.docs.map(doc => doc.data());
-    } catch (e) {
+
+      let body = {
+        "team": orgName,
+        "product": productObjective,
+        "date": date
+      }
+      //Get the flame graph
+      return   await this.http.post(this.url, body).toPromise();
+
+    }catch (e) {
       console.log(e);
-      return [];
+      return {};
     }
-
   }