From e1793ef5e4f01b3a92b441ad98686357deb642b6 Mon Sep 17 00:00:00 2001
From: YoussefDahi <125285822+YoussefDahi@users.noreply.github.com>
Date: Thu, 9 Jan 2025 17:07:25 +0100
Subject: [PATCH 1/2] [Bug] Fixed view bugs related to end value being null
 (#80)

* [Bug fix] fixed timeline graph no showing due to requests not having end value.
[Bug fix] replaced null end values showed detail subrequest tables

* console clean

* Fix: [inspect-app#80] clean code
---
 src/app/model/trace.model.ts                  | 20 ++++++++++++-------
 src/app/shared/pipe/duration.pipe.ts          |  4 +++-
 .../detail-database-table.component.html      |  3 ++-
 .../ftp-table/detail-ftp-table.component.html |  4 ++--
 .../detail-ldap-table.component.html          |  4 ++--
 .../detail-local-table.component.html         |  4 ++--
 .../detail-rest-table.component.html          |  4 ++--
 .../detail-smtp-table.component.html          |  4 ++--
 .../timeline/detail-timeline.component.ts     |  9 +++++----
 .../session/rest/detail-session-rest.view.ts  |  3 ---
 src/styles.scss                               |  4 +++-
 11 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/app/model/trace.model.ts b/src/app/model/trace.model.ts
index 51b4e51..1d17e2b 100644
--- a/src/app/model/trace.model.ts
+++ b/src/app/model/trace.model.ts
@@ -259,7 +259,7 @@ export class LinkRequestNode implements Link<Label> {
 
     formatLink(field: Label): string {
         switch (field) {
-            case Label.ELAPSED_LATENSE: return `${(this.nodeObject.end - this.nodeObject.start).toFixed(3)}s`;
+            case Label.ELAPSED_LATENSE: return `${this.nodeObject.end - this.nodeObject.start ? (this.nodeObject.end - this.nodeObject.start).toFixed(3)+"s": "?"}`
             case Label.METHOD_RESOURCE: return `${this.nodeObject.method || "?"} ${this.nodeObject.path || "?"}`
             case Label.SIZE_COMPRESSION: return `${this.nodeObject.inDataSize < 0 ? 0 : sizeFormatter(this.nodeObject.inDataSize) } ↓↑ ${this.nodeObject.outDataSize < 0 ? 0 : sizeFormatter(this.nodeObject.outDataSize) }`
             case Label.PROTOCOL_SCHEME: return `${this.nodeObject.protocol || "?"}/${this.nodeObject.authScheme || "?"}`
@@ -288,7 +288,7 @@ export class JdbcRequestNode implements Node<Label>, Link<Label> {
 
     formatLink(field: Label): string {
         switch (field) {
-            case Label.ELAPSED_LATENSE: return `${(this.nodeObject.end - this.nodeObject.start).toFixed(3)}s`
+            case Label.ELAPSED_LATENSE: return `${this.nodeObject.end - this.nodeObject.start ? (this.nodeObject.end - this.nodeObject.start).toFixed(3)+"s": "?"}`
             case Label.METHOD_RESOURCE: return getCommand(this.nodeObject?.commands, 'SQL ')// todo: with sql add schema
             case Label.SIZE_COMPRESSION: return this.nodeObject?.count < 0 ? '0': this.nodeObject?.count!= undefined? this.nodeObject?.count.toString() : '?'; // remove undefined condition 
             case Label.PROTOCOL_SCHEME: return "JDBC/Basic"
@@ -321,7 +321,7 @@ export class FtpRequestNode implements Node<Label>, Link<Label> {
 
     formatLink(field: Label): string {
         switch (field) {
-            case Label.ELAPSED_LATENSE: return `${(this.nodeObject.end - this.nodeObject.start).toFixed(3)}s`
+            case Label.ELAPSED_LATENSE: return `${this.nodeObject.end - this.nodeObject.start ? (this.nodeObject.end - this.nodeObject.start).toFixed(3)+"s": "?"}`
             case Label.METHOD_RESOURCE: return getCommand(this.nodeObject?.commands, "SCRIPT")
             case Label.SIZE_COMPRESSION: return "?"
             case Label.PROTOCOL_SCHEME: return this.nodeObject.protocol + '/Basic'
@@ -354,7 +354,7 @@ export class MailRequestNode implements Node<Label>, Link<Label> {
 
     formatLink(field: Label): string {
         switch (field) {
-            case Label.ELAPSED_LATENSE: return `${(this.nodeObject.end - this.nodeObject.start).toFixed(3)}s`
+            case Label.ELAPSED_LATENSE: return `${this.nodeObject.end - this.nodeObject.start ? (this.nodeObject.end - this.nodeObject.start).toFixed(3)+"s": "?"}`
             case Label.METHOD_RESOURCE: return getCommand(this.nodeObject?.commands, "SCRIPT")
             case Label.SIZE_COMPRESSION: return this.nodeObject?.count < 0 ? '0': this.nodeObject?.count!= undefined? this.nodeObject?.count.toString() : '?';
             case Label.PROTOCOL_SCHEME: return "SMTP/Basic"
@@ -387,7 +387,7 @@ export class LdapRequestNode implements Node<Label>, Link<Label> {
 
     formatLink(field: Label): string {
         switch (field) {
-            case Label.ELAPSED_LATENSE: return `${(this.nodeObject.end - this.nodeObject.start).toFixed(3)}s`
+            case Label.ELAPSED_LATENSE: return `${this.nodeObject.end - this.nodeObject.start ? (this.nodeObject.end - this.nodeObject.start).toFixed(3)+"s": "?"}`
             case Label.METHOD_RESOURCE: return getCommand(this.nodeObject?.commands, "SCRIPT") || '?'
             case Label.SIZE_COMPRESSION: return "?"
             case Label.PROTOCOL_SCHEME: return this.nodeObject.protocol ?? "LDAP/Basic" // wait for fix backend
@@ -421,10 +421,16 @@ export class RestRequestNode implements Node<Label> {
     formatLink(field: Label): string {
         switch (field) {
             case Label.ELAPSED_LATENSE: {
-                var e1 = this.nodeObject.end - this.nodeObject.start;
+                let e1 = this.nodeObject.end - this.nodeObject.start;
+                if(!e1){
+                    return "?";
+                }
                 let e2 = 0;
                 if (this.nodeObject.remoteTrace) {
-                    e2 = e1 - (this.nodeObject.remoteTrace.end - this.nodeObject.remoteTrace.start)
+                    let e3 = this.nodeObject.remoteTrace.end - this.nodeObject.remoteTrace.start;
+                    if(e3){
+                        e2 = e1 - e3;
+                    }
                 }
                 return `${e1.toFixed(3)}s` + (e2 >= 1 ? `~${e2.toFixed(3)}s` : '');
             }
diff --git a/src/app/shared/pipe/duration.pipe.ts b/src/app/shared/pipe/duration.pipe.ts
index beb3ae9..151b8ad 100644
--- a/src/app/shared/pipe/duration.pipe.ts
+++ b/src/app/shared/pipe/duration.pipe.ts
@@ -10,8 +10,10 @@ export class DurationPipe implements PipeTransform {
      _decimalPipe = inject(DecimalPipe);
 
     transform(value: Period | number, ...args: any[]):string {
-        if(value == null) return 'N/A';
         let time = typeof value == "object" ? value.end - value.start : value;
+        if(!time){
+            return "?";
+        }
         const remainingSeconds = this._decimalPipe.transform(Math.round((time % 60) * 1000) / 1000);
         const minutes = Math.floor((time % 3600) / 60);
         const hours = Math.floor(time/3600);
diff --git a/src/app/views/detail/session/_component/database-table/detail-database-table.component.html b/src/app/views/detail/session/_component/database-table/detail-database-table.component.html
index 9d7a03e..a0b0366 100644
--- a/src/app/views/detail/session/_component/database-table/detail-database-table.component.html
+++ b/src/app/views/detail/session/_component/database-table/detail-database-table.component.html
@@ -39,7 +39,8 @@
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Durée </th>
             <td mat-cell *matCellDef="let element">
                 <span
-                    [matTooltip]="(element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') +' \n '+ (element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')">
+                     matTooltipClass="mat-tooltip"
+                     [matTooltip]="((element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') || '?') +' \n '+ ((element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')|| '?') ">
                     {{{start: element.start, end: element.end} | duration}}
                 </span>
             </td>
diff --git a/src/app/views/detail/session/_component/ftp-table/detail-ftp-table.component.html b/src/app/views/detail/session/_component/ftp-table/detail-ftp-table.component.html
index f3276b2..c6b8db2 100644
--- a/src/app/views/detail/session/_component/ftp-table/detail-ftp-table.component.html
+++ b/src/app/views/detail/session/_component/ftp-table/detail-ftp-table.component.html
@@ -35,8 +35,8 @@
             <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-text"> Durée </th>
             <td mat-cell *matCellDef="let element" class="center-text">
                 <span
-                    [matTooltip]="(element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') +' \n '+ (element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')  "
-                    matTooltipClass="mat-tooltip">
+                matTooltipClass="mat-tooltip"
+                [matTooltip]="(element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')|| '?' +' \n '+ (element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') || '?'">
                     {{{start: element.start, end: element.end} | duration }}
                 </span>
             </td>
diff --git a/src/app/views/detail/session/_component/ldap-table/detail-ldap-table.component.html b/src/app/views/detail/session/_component/ldap-table/detail-ldap-table.component.html
index f3276b2..398ef1e 100644
--- a/src/app/views/detail/session/_component/ldap-table/detail-ldap-table.component.html
+++ b/src/app/views/detail/session/_component/ldap-table/detail-ldap-table.component.html
@@ -35,8 +35,8 @@
             <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-text"> Durée </th>
             <td mat-cell *matCellDef="let element" class="center-text">
                 <span
-                    [matTooltip]="(element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') +' \n '+ (element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')  "
-                    matTooltipClass="mat-tooltip">
+                    matTooltipClass="mat-tooltip"
+                    [matTooltip]="((element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') || '?') +' \n '+ ((element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')|| '?') ">
                     {{{start: element.start, end: element.end} | duration }}
                 </span>
             </td>
diff --git a/src/app/views/detail/session/_component/local-table/detail-local-table.component.html b/src/app/views/detail/session/_component/local-table/detail-local-table.component.html
index 4aa748f..95d8a48 100644
--- a/src/app/views/detail/session/_component/local-table/detail-local-table.component.html
+++ b/src/app/views/detail/session/_component/local-table/detail-local-table.component.html
@@ -42,8 +42,8 @@
             <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-text"> Durée </th>
             <td mat-cell *matCellDef="let element" class="center-text">
                 <span
-                        [matTooltip]="(element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') +' \n '+ (element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')  "
-                        matTooltipClass="mat-tooltip">
+                    matTooltipClass="mat-tooltip"
+                    [matTooltip]="((element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') || '?') +' \n '+ ((element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')|| '?') ">
                     {{{start: element.start, end: element.end} | duration }}
                 </span>
             </td>
diff --git a/src/app/views/detail/session/_component/rest-table/detail-rest-table.component.html b/src/app/views/detail/session/_component/rest-table/detail-rest-table.component.html
index 165e703..38940e3 100644
--- a/src/app/views/detail/session/_component/rest-table/detail-rest-table.component.html
+++ b/src/app/views/detail/session/_component/rest-table/detail-rest-table.component.html
@@ -45,8 +45,8 @@
             <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-text"> Durée </th>
             <td mat-cell *matCellDef="let element" class="center-text">
                 <span
-                    [matTooltip]="(element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') +' \n '+ (element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')  "
-                    matTooltipClass="mat-tooltip">
+                    matTooltipClass="mat-tooltip"
+                    [matTooltip]="((element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') || '?') +' \n '+ ((element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')|| '?') ">
                     {{{start: element.start, end: element.end} | duration }}
                 </span>
             </td>
diff --git a/src/app/views/detail/session/_component/smtp-table/detail-smtp-table.component.html b/src/app/views/detail/session/_component/smtp-table/detail-smtp-table.component.html
index 9cc94aa..db64de2 100644
--- a/src/app/views/detail/session/_component/smtp-table/detail-smtp-table.component.html
+++ b/src/app/views/detail/session/_component/smtp-table/detail-smtp-table.component.html
@@ -35,8 +35,8 @@
             <th mat-header-cell *matHeaderCellDef mat-sort-header class="center-text"> Durée </th>
             <td mat-cell *matCellDef="let element" class="center-text">
                 <span
-                    [matTooltip]="(element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') +' \n '+ (element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')  "
-                    matTooltipClass="mat-tooltip">
+                    matTooltipClass="mat-tooltip"
+                    [matTooltip]="((element.start * 1000| date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr') || '?') +' \n '+ ((element.end * 1000 | date:'dd/MM/yyyy, HH:mm:ss.SSS':'fr')|| '?') ">
                     {{{start: element.start, end: element.end} | duration }}
                 </span>
             </td>
diff --git a/src/app/views/detail/session/_component/timeline/detail-timeline.component.ts b/src/app/views/detail/session/_component/timeline/detail-timeline.component.ts
index 5317418..f899f7e 100644
--- a/src/app/views/detail/session/_component/timeline/detail-timeline.component.ts
+++ b/src/app/views/detail/session/_component/timeline/detail-timeline.component.ts
@@ -13,6 +13,7 @@ import {EnvRouter} from "../../../../../service/router.service";
 import {DurationPipe} from "../../../../../shared/pipe/duration.pipe";
 import {ActivatedRoute} from "@angular/router";
 
+const INFINIT = new Date(9999,12,31).getTime();
 @Component({
     selector: 'timeline-table',
     templateUrl: './detail-timeline.component.html',
@@ -21,7 +22,6 @@ import {ActivatedRoute} from "@angular/router";
 export class DetailTimelineComponent implements OnChanges {
     private _router: EnvRouter = inject(EnvRouter);
     private _activatedRoute = inject(ActivatedRoute);
-
     timeline: Timeline;
     pipe = new DatePipe('fr-FR');
     private durationPipe = new DurationPipe();
@@ -60,18 +60,19 @@ export class DetailTimelineComponent implements OnChanges {
                     groups = Array.from(groups).map((g: string) => ({ id: g, content: g }))
                 }
                 data = dataArray.map((c: any, i: number) => {
+                    let end = c.end? c.end * 1000 : INFINIT;
                     let o = {
                         id: c.id ? `${c.id}_${c.type}` : `${c.idRequest}_no_session`,
                         group: isWebapp ? 0 : c.threadName,
                         content: c.type == 'stage' ? '' : (c.name || c.host || 'N/A'),
                         start: c.start * 1000,
-                        end: c.end * 1000,
-                        title: `<span>${this.pipe.transform(new Date(c.start * 1000), 'HH:mm:ss.SSS')} - ${this.pipe.transform(new Date(c.end * 1000), 'HH:mm:ss.SSS')}</span> (${this.durationPipe.transform({start: c.start, end: c.end})})<br>
+                        end: end,
+                        title: `<span>${this.pipe.transform(new Date(c.start * 1000), 'HH:mm:ss.SSS')} - ${c.end? this.pipe.transform(new Date(end), 'HH:mm:ss.SSS'):"?"}</span> ${c.end ? `(${this.durationPipe.transform({start: c.start, end: end/ 1000})})`:""}<br>
                     <h4>${c[title]}</h4>`,
                         className: c.type == 'database' ? "bdd" : c.type != 'stage' ? "rest" : "",
                         type: c.type == 'stage' ? 'background' : 'range'
                     }
-                    if (o.end > timeline_end) {
+                    if (o.end > timeline_end && o.end != INFINIT) {
                         timeline_end = o.end
                     }
                     return o;
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
index 32a1a0e..409d8f6 100644
--- a/src/app/views/detail/session/rest/detail-session-rest.view.ts
+++ b/src/app/views/detail/session/rest/detail-session-rest.view.ts
@@ -76,7 +76,6 @@ export class DetailSessionRestView implements OnInit, OnDestroy {
     }
 
     selectedRequest(event: { event: MouseEvent, row: any }) {
-        console.log(event)
         if (event.row) {
             if (event.event.ctrlKey) {
                 this._router.open(`#/session/rest/${event.row}`, '_blank',)
@@ -111,7 +110,6 @@ export class DetailSessionRestView implements OnInit, OnDestroy {
     }
 
     selectedSmtp(event: { event: MouseEvent, row: any }) { // TODO finish this
-        console.log(event)
         if (event.row) {
             if (event.event.ctrlKey) {
                 this._router.open(`#/session/rest/${this.session.id}/smtp/${event.row}`, '_blank',)
@@ -146,7 +144,6 @@ export class DetailSessionRestView implements OnInit, OnDestroy {
                 }
                 return acc;
             }, []);
-            console.log(this.queryBySchema)
         }
     }
 
diff --git a/src/styles.scss b/src/styles.scss
index c2a66bf..ebc0d1f 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -218,5 +218,7 @@ mat-form-field.loading {
       height: 100%;
 }
 
-
+.mat-tooltip {
+  white-space: pre-line; // Allow line break
+}
 

From dcf2003aac58072c6dd5370d61c4bb6e591115f2 Mon Sep 17 00:00:00 2001
From: YoussefDahi <125285822+YoussefDahi@users.noreply.github.com>
Date: Thu, 9 Jan 2025 17:16:23 +0100
Subject: [PATCH 2/2] Fix: [inspect-app#68] resolve multiple bugs related to
 loading in detail session page (#82)

- cards are loaded independently as soon as data is received
- added a loading indicator when getting the parent of session
- added a loafing indicator when getting db info in instance cards

additional changes:
- fixed a bug where parent session is not set to default after navigation
- fixed a bug where db info showed in instance card is not set to default after navigation
- clean consoles / unused imports
---
 .../_component/detail-session.component.html  | 16 +++---
 .../_component/detail-session.component.ts    |  3 +-
 .../rest/detail-session-rest.view.html        | 12 +++--
 .../session/rest/detail-session-rest.view.ts  | 53 ++++++++-----------
 4 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/src/app/views/detail/session/_component/detail-session.component.html b/src/app/views/detail/session/_component/detail-session.component.html
index a261768..b7cbe74 100644
--- a/src/app/views/detail/session/_component/detail-session.component.html
+++ b/src/app/views/detail/session/_component/detail-session.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="session.restRequests?.length" style="margin-bottom: 2em;">
+<div *ngIf="session?.restRequests?.length" style="margin-bottom: 2em;">
     <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; margin-bottom:  0.5em;">
         <mat-divider style="margin-right: 2em; flex: 1 1 0"></mat-divider>
         <div style="display: flex; align-items: center; gap: 0.5em; font-size: 20px; font-weight: 500;">
@@ -10,7 +10,7 @@
     <rest-table [requests]="session.restRequests"
                 (onClickRow)="selectedRequest($event)"></rest-table>
 </div>
-<div *ngIf="session.stages?.length" style="margin-bottom: 2em;">
+<div *ngIf="session?.stages?.length" style="margin-bottom: 2em;">
     <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; margin-bottom:  0.5em;">
         <mat-divider style="margin-right: 2em; flex: 1 1 0"></mat-divider>
         <div style="display: flex; align-items: center; gap: 0.5em; font-size: 20px; font-weight: 500;">
@@ -21,7 +21,7 @@
     </div>
     <local-table [requests]="session.stages"></local-table>
 </div>
-<div *ngIf="session.ftpRequests?.length" style="margin-bottom: 2em;">
+<div *ngIf="session?.ftpRequests?.length" style="margin-bottom: 2em;">
     <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; margin-bottom:  0.5em;">
         <mat-divider style="margin-right: 2em; flex: 1 1 0"></mat-divider>
         <div style="display: flex; align-items: center; gap: 0.5em; font-size: 20px; font-weight: 500;">
@@ -34,7 +34,7 @@
                (onClickRow)="selectedFtp($event)">
     </ftp-table>
 </div>
-<div *ngIf="session.mailRequests?.length" style="margin-bottom: 2em;">
+<div *ngIf="session?.mailRequests?.length" style="margin-bottom: 2em;">
     <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; margin-bottom:  0.5em;">
         <mat-divider style="margin-right: 2em; flex: 1 1 0"></mat-divider>
         <div style="display: flex; align-items: center; gap: 0.5em; font-size: 20px; font-weight: 500;">
@@ -47,7 +47,7 @@
                 (onClickRow)="selectedSmtp($event)">
     </smtp-table>
 </div>
-<div *ngIf="session.ldapRequests?.length" style="margin-bottom: 2em;">
+<div *ngIf="session?.ldapRequests?.length" style="margin-bottom: 2em;">
     <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; margin-bottom:  0.5em;">
         <mat-divider style="margin-right: 2em; flex: 1 1 0"></mat-divider>
         <div style="display: flex; align-items: center; gap: 0.5em; font-size: 20px; font-weight: 500;">
@@ -60,7 +60,7 @@
                 (onClickRow)="selectedLdap($event)">
     </ldap-table>
 </div>
-<div *ngIf="session.databaseRequests?.length" style="margin-bottom: 2em;">
+<div *ngIf="session?.databaseRequests?.length" style="margin-bottom: 2em;">
     <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center;  margin-bottom:  0.5em;">
         <mat-divider style="margin-right: 2em; flex: 1 1 0"></mat-divider>
         <div style="display: flex; align-items: center; gap: 0.5em; font-size: 20px; font-weight: 500;">
@@ -73,7 +73,7 @@
                     (onClickRow)="selectedQuery($event)">
     </database-table>
 </div>
-<div *ngIf="(session.databaseRequests?.length || session.restRequests?.length || session.stages?.length || session.ldapRequests?.length || session.ftpRequests?.length || session.mailRequests?.length) && (session.databaseRequests?.length+session.restRequests?.length+session.stages?.length+session.ldapRequests?.length+session.ftpRequests?.length+session.mailRequests?.length < 500) " style="margin-bottom: 1em;">
+<div *ngIf="(completedSession?.databaseRequests?.length || completedSession?.restRequests?.length || completedSession?.stages?.length || completedSession?.ldapRequests?.length || completedSession?.ftpRequests?.length || completedSession?.mailRequests?.length) && (completedSession?.databaseRequests?.length+completedSession?.restRequests?.length+completedSession?.stages?.length+completedSession?.ldapRequests?.length+completedSession?.ftpRequests?.length+completedSession?.mailRequests?.length < 500) " style="margin-bottom: 1em;">
     <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; margin-bottom:  0.5em;">
         <mat-divider style="margin-right: 2em; flex: 1 1 0"></mat-divider>
         <div style="display: flex; align-items: center; gap: 0.5em; font-size: 20px; font-weight: 500;">
@@ -82,5 +82,5 @@
         </div>
         <mat-divider style="margin-left: 2em; flex: 1 1 0"></mat-divider>
     </div>
-    <timeline-table [request]="session" [instance]="instance"></timeline-table>
+    <timeline-table [request]="completedSession" [instance]="instance"></timeline-table>
 </div>
\ No newline at end of file
diff --git a/src/app/views/detail/session/_component/detail-session.component.ts b/src/app/views/detail/session/_component/detail-session.component.ts
index 281ac7d..3965506 100644
--- a/src/app/views/detail/session/_component/detail-session.component.ts
+++ b/src/app/views/detail/session/_component/detail-session.component.ts
@@ -8,9 +8,10 @@ import {EnvRouter} from "../../../../service/router.service";
     styleUrls: ['./detail-session.component.scss']
 })
 export class DetailSessionComponent {
-    private _router: EnvRouter = inject(EnvRouter);
+    private readonly _router: EnvRouter = inject(EnvRouter);
 
     @Input() session: InstanceMainSession | InstanceRestSession;
+    @Input() completedSession: InstanceMainSession | InstanceRestSession;
     @Input() instance: InstanceEnvironment;
 
     selectedRequest(event: { event: MouseEvent, row: any }) {
diff --git a/src/app/views/detail/session/rest/detail-session-rest.view.html b/src/app/views/detail/session/rest/detail-session-rest.view.html
index 321abfd..c0e3158 100644
--- a/src/app/views/detail/session/rest/detail-session-rest.view.html
+++ b/src/app/views/detail/session/rest/detail-session-rest.view.html
@@ -1,4 +1,4 @@
-<div *ngIf="!isLoading && session && instance">
+<div *ngIf="session && instance ">
     <div class="header-card">
         <mat-card style="width: 60vw; min-width: 60vw;"
                   [ngStyle]="{'border-left': session.status >= 200 && session.status < 300 ? '4px solid green' :
@@ -12,8 +12,9 @@
                     {{ session.name || 'N/A' }}
                 </a>
                 <div class="right">
+                    <mat-progress-spinner *ngIf="!sessionParent" style="display:inline-flex !important;" diameter="30" mode="indeterminate"></mat-progress-spinner> 
                     <button mat-icon-button (click)="navigate($event,'parent')" matTooltip="Détail de l'appel parent"
-                            [disabled]="!sessionParent">
+                            [hidden]="!sessionParent">
                         <mat-icon>move_up</mat-icon>
                     </button>
                     <button mat-icon-button (click)="navigate($event,'tree')" matTooltip="Arbre d'appels">
@@ -70,6 +71,9 @@
                 </div>
             </mat-card-title>
             <mat-card-content>
+                <div *ngIf="!queryBySchema" style="display: flex; flex-direction: row; align-items: center; justify-content: center; font-style: italic; gap: 0.5em">
+                    <mat-progress-spinner  diameter="30" mode="indeterminate"></mat-progress-spinner> Chargement en cours...
+                </div>
                 <div style="display: flex; align-items: center;" *ngFor="let item of queryBySchema | keyvalue ">
                     <div style="display: flex; margin-right: 1em; margin-left: 1em;" *ngIf="item.key != 'null'">
                         <mat-icon class="material-symbols-outlined">Database</mat-icon>
@@ -100,7 +104,7 @@
             </mat-card-footer>
         </mat-card>
     </div>
-    <detail-session [session]="session" [instance]="instance"></detail-session>
+    <detail-session [session]="session" [completedSession]="completedSession" [instance]="instance"></detail-session>
 </div>
 
 <div *ngIf="!isLoading && !session && !instance" class="noDataMessage mat-elevation-z5" style="height: calc(100vh - 50px - 1em);">
@@ -109,6 +113,6 @@ <h2>
     </h2>
 </div>
 
-<div *ngIf="isLoading" style="width: 100%; height: calc(100vh - 50px - 1em); display: flex; flex-direction: row; align-items: center; justify-content: center; font-style: italic; gap: 0.5em">
+<div *ngIf="isLoading && !session && !instance" style="width: 100%; height: calc(100vh - 50px - 1em); display: flex; flex-direction: row; align-items: center; justify-content: center; font-style: italic; gap: 0.5em">
     <mat-progress-spinner diameter="30" mode="indeterminate"></mat-progress-spinner> Chargement en cours...
 </div>
\ No newline at end of file
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
index 409d8f6..686bc39 100644
--- a/src/app/views/detail/session/rest/detail-session-rest.view.ts
+++ b/src/app/views/detail/session/rest/detail-session-rest.view.ts
@@ -3,7 +3,7 @@ import {InstanceEnvironment, InstanceRestSession} from "../../../../model/trace.
 import {ActivatedRoute} from "@angular/router";
 import {TraceService} from "../../../../service/trace.service";
 import {Location} from "@angular/common";
-import {catchError, combineLatest, finalize, forkJoin, Observable, of, Subscription, switchMap, EMPTY} from "rxjs";
+import {catchError, combineLatest, finalize, of, Subscription, switchMap, merge, map} from "rxjs";
 import {application} from "../../../../../environments/environment";
 import {Utils} from "../../../../shared/util";
 import {EnvRouter} from "../../../../service/router.service";
@@ -13,13 +13,14 @@ import {EnvRouter} from "../../../../service/router.service";
     styleUrls: ['./detail-session-rest.view.scss'],
 })
 export class DetailSessionRestView implements OnInit, OnDestroy {
-    private _activatedRoute: ActivatedRoute = inject(ActivatedRoute);
-    private _traceService: TraceService = inject(TraceService);
-    private _router: EnvRouter = inject(EnvRouter);
-    private _location: Location = inject(Location);
+    private readonly _activatedRoute: ActivatedRoute = inject(ActivatedRoute);
+    private readonly _traceService: TraceService = inject(TraceService);
+    private readonly _router: EnvRouter = inject(EnvRouter);
+    private readonly _location: Location = inject(Location);
 
     session: InstanceRestSession;
     instance: InstanceEnvironment;
+    completedSession: InstanceRestSession
     sessionParent: { id: string, type: string };
     isLoading: boolean = false;
     subscriptions: Array<Subscription> = [];
@@ -42,37 +43,27 @@ export class DetailSessionRestView implements OnInit, OnDestroy {
     getSession(id: string) {
         this.isLoading = true;
         this.session = null;
+        this.completedSession =null;
+        this.queryBySchema = null;
+        this.sessionParent=null;
+        this._traceService.getSessionParent(id).pipe(catchError(() => of(null))).subscribe(d=>this.sessionParent=d) 
         this._traceService.getRestSession(id)
             .pipe(
                 switchMap(s => {
-                    return forkJoin({
-                        session: of(s),
-                        instance: this._traceService.getInstance(s.instanceId),
-                        parent: this._traceService.getSessionParent(id).pipe(catchError(() => of(null))),
-                        requests: (s.mask & 4) > 0 ? this._traceService.getRestRequests(s.id) : of([]),
-                        queries: (s.mask & 2) > 0 ? this._traceService.getDatabaseRequests(s.id) : of([]),
-                        stages: (s.mask & 1) > 0 ? this._traceService.getLocalRequests(s.id) : of([]),
-                        ftps: (s.mask & 8) > 0 ? this._traceService.getFtpRequests(s.id) : of([]),
-                        mails: (s.mask & 16) > 0 ? this._traceService.getSmtpRequests(s.id) : of([]),
-                        ldaps: (s.mask & 32) > 0 ? this._traceService.getLdapRequests(s.id) : of([])
-                    });
+                    return merge(
+                        of(s).pipe(map(s=>{this.session = {...s, restRequests:[],databaseRequests:[],stages:[],ftpRequests:[],mailRequests:[],ldapRequests:[]};})),
+                        this._traceService.getInstance(s.instanceId).pipe(map(d=>(this.instance=d))),
+                        (s.mask & 4) > 0 ? this._traceService.getRestRequests(s.id).pipe(map(d=>(this.session.restRequests.push(...d)))): of(),
+                        (s.mask & 2) > 0 ? this._traceService.getDatabaseRequests(s.id).pipe(map(d=>{this.session.databaseRequests.push(...d);this.groupQueriesBySchema();})) : of(),
+                        (s.mask & 1) > 0 ? this._traceService.getLocalRequests(s.id).pipe(map(d=>(this.session.stages.push(...d)))) : of(),
+                        (s.mask & 8) > 0 ? this._traceService.getFtpRequests(s.id).pipe(map(d=>(this.session.ftpRequests.push(...d)))) : of(),
+                        (s.mask & 16) > 0 ? this._traceService.getSmtpRequests(s.id).pipe(map(d=>(this.session.mailRequests.push(...d)))) : of(),
+                        (s.mask & 32) > 0 ? this._traceService.getLdapRequests(s.id).pipe(map(d=>(this.session.ldapRequests.push(...d)))) : of()
+                    )
                 }),
-                finalize(() => this.isLoading = false)
+                finalize(() =>{ this.completedSession = this.session; this.isLoading = false;})
             )
-            .subscribe({
-                next: result => {
-                    this.session = result.session;
-                    this.session.restRequests = result.requests;
-                    this.session.databaseRequests = result.queries;
-                    this.session.stages = result.stages;
-                    this.session.ftpRequests = result.ftps;
-                    this.session.mailRequests = result.mails;
-                    this.session.ldapRequests = result.ldaps;
-                    this.instance = result.instance;
-                    this.sessionParent = result.parent;
-                    this.groupQueriesBySchema();
-                }
-            });
+            .subscribe();
     }
 
     selectedRequest(event: { event: MouseEvent, row: any }) {