Clear requests when URL changes (#145)

oneteme · Feb 19, 2025 · 72ff8da · 72ff8da
1 parent b19016c
commit 72ff8da
Show file tree

Hide file tree

Showing 14 changed files with 99 additions and 104 deletions.
diff --git a/...d/_component/advanced-filter/advanced-filter-trigger/advanced-filter-trigger.component.ts b/...d/_component/advanced-filter/advanced-filter-trigger/advanced-filter-trigger.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild, inject } from "@angular/core";
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild, inject, OnDestroy} from "@angular/core";
 import { Filter, FilterConstants, FilterPreset, FilterMap } from "src/app/views/constants";
 import { AdvancedFilterComponent } from "../advanced-filter-modal/advanced-filter-modal.component";
 import { MatDialog } from "@angular/material/dialog";
@@ -15,12 +15,12 @@ import { error } from "console";
 
 
 })
-export class AdvancedFilterTriggerComponent implements OnInit {
+export class AdvancedFilterTriggerComponent implements OnInit, OnDestroy {
 
     private _dialog = inject(MatDialog)
     private _filter = inject(FilterService);
     private filters: () => FilterMap;
-
+    subscriptions: Subscription[] = [];
     currentPreset: string;
     presetsFilter: FilterPreset[];
     selectedPreset: FilterPreset;
@@ -57,19 +57,19 @@ export class AdvancedFilterTriggerComponent implements OnInit {
                 pageName: this.pageName,
             }
         })
-        dialog.afterClosed().subscribe(result => {
+        this.subscriptions.push(dialog.afterClosed().subscribe(result => {
             if (result) {
                 this.handleDialogclose.emit(result);
             }
-        })
+        }))
     }
 
      savePreset() {
-         this._filter.savePreset(this.currentPreset, this.pageName).subscribe(val => {
+         this.subscriptions.push(this._filter.savePreset(this.currentPreset, this.pageName).subscribe(val => {
                 this.presetsFilter = this._filter.getPresetsLocalStrorage(this.pageName);
                 this.selectedPreset = val;
                 this.currentPreset= this.selectedPreset.name;
-        })
+        }))
     }
 
     onPresetSelected(name: string) {
@@ -105,5 +105,9 @@ export class AdvancedFilterTriggerComponent implements OnInit {
         this.handleFilterReset.emit();
     }
 
+    ngOnDestroy(): void {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
+
 
 }
diff --git a/src/app/views/architecture/architecture.view.ts b/src/app/views/architecture/architecture.view.ts
@@ -182,7 +182,7 @@ export class ArchitectureView implements OnInit, AfterViewInit, OnDestroy {
     @ViewChild('graphContainer') graphContainer: ElementRef;
 
     ngOnInit() {
-        combineLatest({
+        this.subscriptions.push(combineLatest({
             params: this._activatedRoute.params,
             queryParams: this._activatedRoute.queryParams
         }).subscribe({
@@ -194,9 +194,9 @@ export class ArchitectureView implements OnInit, AfterViewInit, OnDestroy {
                 this.init();
                 this._location.replaceState(`${this._router.url.split('?')[0]}?env=${this.params.env}&start=${this.params.start.toISOString()}&end=${this.params.end.toISOString()}`);
             }
-        });
+        }));
 
-        this.treeMapControl.valueChanges.subscribe({
+        this.subscriptions.push(this.treeMapControl.valueChanges.subscribe({
             next: res => {
                 let _field = res ? 'sum': 'count';
                 let d  = this.heatMapData.reduce((acc:any,cur:any) => {
@@ -219,9 +219,9 @@ export class ArchitectureView implements OnInit, AfterViewInit, OnDestroy {
                     return t
                 });
             }
-        });
+        }));
 
-        this.heatMapControl.valueChanges.subscribe({
+        this.subscriptions.push(this.heatMapControl.valueChanges.subscribe({
             next: res => {
                 let _field = res ? 'sum': 'count';
                 const ranges = this.createRanges(this.heatMapData, _field, res);
@@ -235,7 +235,7 @@ export class ArchitectureView implements OnInit, AfterViewInit, OnDestroy {
                 ];
                 this.heatMapConfig = { ...newConfig };
             }
-        })
+        }));
     }
 
     ngAfterViewInit() {
@@ -292,7 +292,7 @@ export class ArchitectureView implements OnInit, AfterViewInit, OnDestroy {
         this.syntheseIsLoading = true;
         this.heatMapData = [];
         this.treeMapData = [];
-        forkJoin(
+        this.subscriptions.push(forkJoin(
             {
                 rest: this._restSessionService.getArchitectureForHeatMap({ start: this.params.start, end: this.params.end, env: this.params.env }),
                 main: this._mainSessionService.getMainSessionArchitectureForHeatMap({ start: this.params.start, end: this.params.end, env: this.params.env }),
@@ -304,9 +304,9 @@ export class ArchitectureView implements OnInit, AfterViewInit, OnDestroy {
                 this.treeMapControl.updateValueAndValidity();
                 this.heatMapControl.updateValueAndValidity();
             }
-        });
+        }));
 
-        forkJoin({
+        this.subscriptions.push(forkJoin({
             mainSession: this._instanceService.getMainSessionApplication(this.params.start, this.params.end, this.params.env),
             restSession: this._treeService.getArchitecture(this.params.start, this.params.end, this.params.env)
         }).pipe(map(res => {
@@ -317,7 +317,7 @@ export class ArchitectureView implements OnInit, AfterViewInit, OnDestroy {
                 this.tree.clearCells();
                 this.tree.draw(() => this.draw(this.tree, res));
             }
-        });
+        }));
     }
 
     buildHeatMapCharts(res: {count: number, sum: number, origin: string, target: string}[]) {

diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
@@ -1,6 +1,6 @@
-import { AfterViewInit, Component, inject, ViewChild } from '@angular/core';
+import {AfterViewInit, Component, inject, OnDestroy, ViewChild} from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { combineLatest, finalize, forkJoin, map, Observable, Subscription, take } from 'rxjs';
+import {combineLatest, config, finalize, forkJoin, map, Observable, Subscription, take} from 'rxjs';
 import { DatePipe, Location } from '@angular/common';
 import { application, makeDatePeriod } from 'src/environments/environment';
 import { EnvRouter } from "../../service/router.service";
@@ -28,7 +28,7 @@ import { NumberFormatterPipe } from 'src/app/shared/pipe/number.pipe';
     styleUrls: ['./dashboard.component.scss'],
 
 })
-export class DashboardComponent implements AfterViewInit  {
+export class DashboardComponent implements AfterViewInit, OnDestroy  {
     constants = Constants;
     private _activatedRoute: ActivatedRoute = inject(ActivatedRoute);
     private _router: EnvRouter = inject(EnvRouter);
@@ -50,7 +50,6 @@ export class DashboardComponent implements AfterViewInit  {
     serverStartDisplayedColumns: string[] = ["appName", "version", "duree"];
     sessionExceptionsDisplayedColumns: string[] = ["date", "errorType", "count"];
     batchExceptionDisplayedColumns: string[] = ["date", "error", "count"];
-    paramsSubscription: any;
     today: Date = new Date();
     subscriptions: Subscription[] = [];
     tabRequests: { [key: string]: { observable?: Observable<Object>, data?: MatTableDataSource<any[]>, isLoading?: boolean, key?: string } } = {};
@@ -80,7 +79,7 @@ export class DashboardComponent implements AfterViewInit  {
 
 
     constructor() {
-        this.paramsSubscription = combineLatest({
+        this.subscriptions.push(combineLatest({
             params: this._activatedRoute.params,
             queryParams: this._activatedRoute.queryParams
         }).subscribe({
@@ -110,7 +109,7 @@ export class DashboardComponent implements AfterViewInit  {
                 this.initCharts();
                 this._location.replaceState(`${this._router.url.split('?')[0]}?env=${this.params.env}&start=${this.params.start.toISOString()}&end=${this.params.end.toISOString()}${this.params.serveurs.length > 0 ? '&' + this.params.serveurs.map(name => `appname=${name}`).join('&') : ''}`)
             }
-        });
+        }));
     }
     ngAfterViewInit(): void {
         this.initTab();
@@ -123,14 +122,14 @@ export class DashboardComponent implements AfterViewInit  {
             if(!this.chartRequests[k].isLoading){
                 this.charts[k] = [];
                 this.chartRequests[k].isLoading = true;
-                this.chartRequests[k].observable
+                this.subscriptions.push(this.chartRequests[k].observable
                     .pipe(finalize(() => {   this.chartRequests[k].isLoading = false;  })).pipe(take(1))
                     .subscribe({
                         next: (res: any) => {
                             this.chartRequests[k].data = res.data;
                             this.chartRequests[k].chart =res.chart
                         }
-                    })
+                    }))
             }
 
         })
@@ -144,15 +143,15 @@ export class DashboardComponent implements AfterViewInit  {
         Object.keys(this.tabRequests).forEach(i => {
             if(!this.tabRequests[i].isLoading){
             this.tabRequests[i].isLoading = true;
-            this.tabRequests[i].observable
+            this.subscriptions.push(this.tabRequests[i].observable
                 .pipe(finalize(() => {   this.tabRequests[i].isLoading = false;  })).pipe(take(1))
                 .subscribe({
                     next: (res: any[]) => {
                         this.tabRequests[i].data = new MatTableDataSource(res);
                         this.tabRequests[i].data.sort = that[`${i}Sort`];
                         this.tabRequests[i].data.paginator = that[`${i}Paginator`];
                     }
-                })
+                }))
             }
 
         })
@@ -231,8 +230,7 @@ export class DashboardComponent implements AfterViewInit  {
                 width: "70%",
                 data: exceptions
             })
-            dialog.afterClosed().subscribe(result => {
-            })
+            this.subscriptions.push(dialog.afterClosed().subscribe());
         }
     }
 
@@ -381,6 +379,10 @@ export class DashboardComponent implements AfterViewInit  {
             },
         }
     }
+
+    ngOnDestroy(): void {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
 }
 
 

diff --git a/src/app/views/deploiment/deploiment.component.ts b/src/app/views/deploiment/deploiment.component.ts
@@ -1,6 +1,6 @@
-import { Component, inject, ViewChild } from '@angular/core';
+import {Component, inject, OnDestroy, ViewChild} from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { combineLatest, finalize} from 'rxjs';
+import {combineLatest, finalize, Subscription} from 'rxjs';
 import { app} from 'src/environments/environment';
 import { Constants } from '../constants';
 import { MatPaginator } from '@angular/material/paginator';
@@ -14,7 +14,7 @@ import { MatTableDataSource } from '@angular/material/table';
     styleUrls: ['./deploiment.component.scss'],
 
 })
-export class DeploimentComponent   {
+export class DeploimentComponent implements OnDestroy  {
     constants = Constants;
     private readonly _activatedRoute: ActivatedRoute = inject(ActivatedRoute);
     private readonly _instanceService= inject(InstanceService);
@@ -27,28 +27,28 @@ export class DeploimentComponent   {
     collectorColor: any;
     branchColor:any;
     params: Partial<{ env: string }> = {};
+    subscriptions: Subscription[] = [];
 
     @ViewChild('lastServerStartTablePaginator')lastServerStartTablePaginator: MatPaginator;
     @ViewChild('lastServerStartTableSort') lastServerStartTableSort: MatSort;
 
     constructor() {
-        combineLatest({
+        this.subscriptions.push(combineLatest({
             params: this._activatedRoute.params,
             queryParams: this._activatedRoute.queryParams
         })
-
         .subscribe({
             next: (v: { params: Params, queryParams: Params }) => {
                 this.params.env = v.queryParams.env || app.defaultEnv;
                 this.getLastServerStart();
             }
-        });
+        }));
     }
 
     getLastServerStart(){
         this.lastServerStart.isLoading =true;
 
-        this._instanceService.getlastServerStart({ env: this.params.env})
+        this.subscriptions.push(this._instanceService.getlastServerStart({ env: this.params.env})
         .pipe(finalize(()=>(this.lastServerStart.isLoading =false)))
         .subscribe({
             next: ((d:any)=> {
@@ -60,7 +60,7 @@ export class DeploimentComponent   {
                 this.lastServerStart.data.sort = this.lastServerStartTableSort;
                 this.lastServerStart.data.sortingDataAccessor = sortingDataAccessor;
             })
-        });
+        }));
     }    
 
     groupBy<T>(array: T[], fn: (o: T) => any): { [name: string]: T[] } { // todo : refacto
@@ -83,6 +83,10 @@ export class DeploimentComponent   {
         }
         return color;
     }
+
+    ngOnDestroy(): void {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
 }
 
 const sortingDataAccessor = (row: any, columnName: string) => {

diff --git a/src/app/views/detail/session/main/detail-session-main.view.ts b/src/app/views/detail/session/main/detail-session-main.view.ts
@@ -45,7 +45,7 @@ export class DetailSessionMainView implements OnInit, OnDestroy {
         this.isLoading = true;
         this.session = null;
         this.completedSession =null;
-        this._traceService.getMainSession(id).pipe(
+        this.subscriptions.push(this._traceService.getMainSession(id).pipe(
                 switchMap(s => {
                     return of(s).pipe(
                         map(s=>{
@@ -65,7 +65,7 @@ export class DetailSessionMainView implements OnInit, OnDestroy {
                 }),
                 finalize(() => {this.completedSession = this.session; this.isLoading = false;})
             )
-            .subscribe();
+            .subscribe());
     }
 
     navigate(event: MouseEvent, targetType: string, extraParam?: string) {

diff --git a/src/app/views/detail/session/rest/detail-session-rest.view.ts b/src/app/views/detail/session/rest/detail-session-rest.view.ts
@@ -46,8 +46,8 @@ export class DetailSessionRestView implements OnInit, OnDestroy {
         this.session = null;
         this.completedSession =null;
         this.sessionParent=null;
-        this._traceService.getSessionParent(id).pipe(catchError(() => of(null)),finalize(()=>(this.parentLoading = false))).subscribe(d=>this.sessionParent=d) 
-        this._traceService.getRestSession(id)
+        this.subscriptions.push(this._traceService.getSessionParent(id).pipe(catchError(() => of(null)),finalize(()=>(this.parentLoading = false))).subscribe(d=>this.sessionParent=d))
+        this.subscriptions.push(this._traceService.getRestSession(id)
             .pipe(
                 switchMap(s => {
                     return of(s).pipe(
@@ -68,7 +68,7 @@ export class DetailSessionRestView implements OnInit, OnDestroy {
                 }),
                 finalize(() =>{ this.completedSession = this.session; this.isLoading = false;})
             )
-            .subscribe();
+            .subscribe());
     }
 
     selectedRequest(event: { event: MouseEvent, row: any }) {