New Features:

1. Flamegraph navigation by product and date
New Pages:
1. flame-graph-for.page.html
2. flame-graph-date.page.html
Bugs Corrected:

To Be Corrected:
0. On product delete, delete trace results
1. On product delete, delete flamegraph results

src/app/app-routing.module.ts

@@ -112,6 +112,16 @@ const routes: Routes = [
     loadChildren: () => import('./pages/flame-graph/flame-graph.module').then( m => m.FlameGraphPageModule),
     ...canActivate(redirectUnauthorizedToLogin),
   },
+  {
+    path: 'flame-graph-for',
+    loadChildren: () => import('./pages/flame-graph-for/flame-graph-for.module').then( m => m.FlameGraphForPageModule),
+    ...canActivate(redirectUnauthorizedToLogin),
+  },
+  {
+    path: 'flame-graph-date',
+    loadChildren: () => import('./pages/flame-graph-date/flame-graph-date.module').then( m => m.FlameGraphDatePageModule),
+    ...canActivate(redirectUnauthorizedToLogin),
+  },
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -41,7 +41,7 @@ export class AppComponent implements OnInit {
     },
     {
       title: 'Flamegraph',
-      url: '/flame-graph',
+      url: '/flame-graph-for',
       icon: 'flame'
     },
     {

src/app/pages/flame-graph-date/flame-graph-date-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FlameGraphDatePage } from './flame-graph-date.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FlameGraphDatePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FlameGraphDatePageRoutingModule {}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FlameGraphDatePageRoutingModule } from './flame-graph-date-routing.module';
+
+import { FlameGraphDatePage } from './flame-graph-date.page';
+import {ComponentsModule} from "../../components/components.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        FlameGraphDatePageRoutingModule,
+        ComponentsModule
+    ],
+  declarations: [FlameGraphDatePage]
+})
+export class FlameGraphDatePageModule {}

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

@@ -0,0 +1,27 @@
+<app-header-return [title]="'Usage for date'"></app-header-return>
+
+<ion-content [fullscreen]="true">
+
+
+
+
+  <ion-grid>
+    <app-title [title]="'Usage for date'"></app-title>
+    <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" size-md="4" size-lg="4" class="">
+        <p>Choose a date to see the server usage.</p>
+      </ion-col>
+    </ion-row>
+    <ion-row class="lg:m-10">
+      <ion-col size="12">
+        <ion-list [inset]="true" class="bg-white">
+          @for (date of dates; track date){
+            <ion-item color="dark" (click)="viewUsageForDate(date)">
+              <ion-label>{{date}}</ion-label>
+            </ion-item>
+          }
+        </ion-list>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

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

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FlameGraphDatePage } from './flame-graph-date.page';
+
+describe('FlameGraphDatePage', () => {
+  let component: FlameGraphDatePage;
+  let fixture: ComponentFixture<FlameGraphDatePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlameGraphDatePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,98 @@
+import { Component, OnInit } from '@angular/core';
+import {FlameGraphService} from "../../services/flame-graph.service";
+import {LoadingController} from "@ionic/angular";
+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',
+  styleUrls: ['./flame-graph-date.page.scss'],
+})
+export class FlameGraphDatePage implements OnInit {
+
+  dates:string[] = [];
+  product:Product = {}
+
+
+  constructor(
+    private flameGraphService: FlameGraphService,
+    private loadingCtrl: LoadingController,
+    private router: Router,
+    private route: ActivatedRoute,
+  ) { }
+
+  async ngOnInit() {
+    this.getProductFromParams();
+    await this.getDates();
+  }
+
+  /**
+   * This method gets the product from URL parameters.
+   */
+  getProductFromParams() {
+    // Get product from URL params
+    this.route.queryParams.subscribe(params => {
+      this.product = JSON.parse(params['product']);
+    });
+    console.log(this.product.productObjective);
+
+  }
+
+  async getDates(){
+    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);
+      this.dates = await this.flameGraphService.getDates(orgName, this.product.productObjective!);
+      console.log(this.dates);
+      await this.hideLoading()
+
+      if (this.dates.length === 0) {
+        this.dates.push('No dates found');
+      }
+
+
+    }catch (e) {
+      console.log(e);
+    }
+  }
+
+
+  async viewUsageForDate(date: string) {
+    await this.router.navigate(['/flame-graph'], {queryParams: {product: JSON.stringify(this.product), date: date}});
+  }
+
+
+
+
+  async doRefresh(event: any) {
+    await this.getDates();
+    event.target.complete();
+  }
+
+  /**
+   * 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();
+  }
+
+}

src/app/pages/flame-graph-for/flame-graph-for-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FlameGraphForPage } from './flame-graph-for.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FlameGraphForPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FlameGraphForPageRoutingModule {}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FlameGraphForPageRoutingModule } from './flame-graph-for-routing.module';
+
+import { FlameGraphForPage } from './flame-graph-for.page';
+import {ComponentsModule} from "../../components/components.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        FlameGraphForPageRoutingModule,
+        ComponentsModule
+    ],
+  declarations: [FlameGraphForPage]
+})
+export class FlameGraphForPageModule {}

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

@@ -0,0 +1,30 @@
+<app-header [title]="'Server Usage'"></app-header>
+
+<ion-content [fullscreen]="true">
+
+  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+
+  <ion-grid>
+    <app-title [title]="'Server usage for'"></app-title>
+    <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" size-md="4" size-lg="4" class="">
+        <p>Choose a  product to see the server usage.</p>
+      </ion-col>
+    </ion-row>
+    <ion-row class="lg:m-10">
+      <ion-col size="12">
+        <ion-list [inset]="true" class="bg-white">
+          @for (product of products; track product){
+            <ion-item color="dark" (click)="viewDatesForProduct(product)">
+              <ion-label>{{product.productObjective}}</ion-label>
+            </ion-item>
+          }
+        </ion-list>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>
+

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

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FlameGraphForPage } from './flame-graph-for.page';
+
+describe('FlameGraphForPage', () => {
+  let component: FlameGraphForPage;
+  let fixture: ComponentFixture<FlameGraphForPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlameGraphForPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,86 @@
+import { Component, OnInit } from '@angular/core';
+import {Product} from "../../interfaces/product";
+import {ProductService} from "../../services/product.service";
+import {AlertController, LoadingController} from "@ionic/angular";
+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',
+  styleUrls: ['./flame-graph-for.page.scss'],
+})
+export class FlameGraphForPage implements OnInit {
+
+  products:Product[] = [];
+
+  constructor(
+    private flameGraphService: FlameGraphService,
+    private loadingCtrl: LoadingController,
+    private router: Router
+  ) {}
+
+  async ngOnInit() {
+    await this.getProducts();
+  }
+
+  async getProducts(){
+    try {
+      await this.showLoading()
+      const userString = localStorage.getItem('user');
+
+      if (!userString) {
+        return;
+      }
+
+      const user: User = JSON.parse(userString);
+      const orgName:string = user.orgName!;
+      this.products = await this.flameGraphService.getProducts(orgName);
+
+      //if no products, add a default product
+      if(this.products.length === 0){
+        const new_product:Product = {
+          productObjective: 'No products found',
+        }
+        this.products.push(new_product);
+      }
+
+
+      await this.hideLoading()
+    }catch (e) {
+      console.log(e);
+    }
+  }
+
+  async viewDatesForProduct(product: Product) {
+    await this.router.navigate(['/flame-graph-date'], {queryParams: {product: JSON.stringify(product)}});
+  }
+
+
+
+  async doRefresh(event: any) {
+    await this.getProducts();
+    event.target.complete();
+  }
+
+  /**
+   * 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();
+  }
+
+  viewProduct(product: Product) {
+
+  }
+}