oneteme · YoussefDahi · Jan 9, 2025 · Jan 9, 2025 · Jan 9, 2025
diff --git 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
@@ -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
@@ -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/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>
diff --git 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/_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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;