screen to view Processes (sessions) running on a server for a specifi…

…c duration (#69) * process screen * process screen --------- Co-authored-by: u$f <usf.alami@gmail.com>
oneteme · Jan 3, 2025 · e61995e · e61995e
1 parent fa31b71
commit e61995e
Show file tree

Hide file tree

Showing 14 changed files with 341 additions and 12 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -33,12 +33,17 @@ import {ArchitectureView} from "./views/architecture/architecture.view";
 import { NumberFormatterPipe } from './shared/pipe/number.pipe';
 import { TreeView } from './views/tree/tree.view';
 import {SizePipe} from "./shared/pipe/size.pipe";
+import {DumpView} from "./views/dump/dump.view";
 
 
 registerLocaleData(localeFr, 'fr-FR');
 const routes: Route[] = [
   {
     path: 'session', children: [
+      {
+        path: ':app_name/dump',
+        component: DumpView
+      },
       {
         path: 'rest',
         children: [

diff --git a/src/app/service/router.service.ts b/src/app/service/router.service.ts
@@ -1,5 +1,5 @@
 import {Injectable} from "@angular/core";
-import {NavigationExtras, Router} from "@angular/router";
+import {NavigationExtras, Router, UrlTree} from "@angular/router";
 import {Observable} from "rxjs";
 
 @Injectable()
@@ -41,6 +41,24 @@ export class EnvRouter {
         // return Promise.resolve(true);
     }
 
+    createUrlTree(commands: any[], extras?: NavigationExtras): UrlTree {
+        if (!extras?.queryParams?.env) {
+            if (this._env) {
+                if (!extras) {
+                    extras = {}
+                }
+                if (!extras.queryParams) {
+                    extras.queryParams = {}
+                }
+                extras.queryParams.env = this._env;
+            }
+        }
+        else {
+            this.env = extras.queryParams.env;
+        }
+        return this.router.createUrlTree(commands, extras);
+    }
+
     open(url?: string | URL, target?: string, features?: string): WindowProxy | null {
         return window.open(url, target, features);
     }

diff --git a/src/app/service/trace.service.ts b/src/app/service/trace.service.ts
@@ -31,6 +31,15 @@ export class TraceService {
         return this.http.get<Array<InstanceRestSession>>(`${this.server}/session/rest`, { params: params });
     }
 
+    getRestSessionsForDump(env: string, appName: string, start: Date, end: Date): Observable<Array<InstanceRestSession>> {
+        let params: any = {
+            'env': env,
+            'start': start.toISOString(),
+            'end': end.toISOString()
+        }
+        return this.http.get<Array<InstanceRestSession>>(`${this.server}/session/rest/${appName}/dump`, { params: params });
+    }
+
     getRestSession(id: string): Observable<InstanceRestSession> {
         return this.http.get<InstanceRestSession>(`${this.server}/session/rest/${id}`);
     }
@@ -39,6 +48,15 @@ export class TraceService {
         return this.http.get<Array<InstanceMainSession>>(`${this.server}/session/main`, { params: params });
     }
 
+    getMainSessionsForDump(env: string, appName: string, start: Date, end: Date): Observable<Array<InstanceMainSession>> {
+        let params: any = {
+            'env': env,
+            'start': start.toISOString(),
+            'end': end.toISOString()
+        }
+        return this.http.get<Array<InstanceMainSession>>(`${this.server}/session/main/${appName}/dump`, { params: params });
+    }
+
     getMainSession(id: string): Observable<InstanceMainSession> {
         return this.http.get<InstanceMainSession>(`${this.server}/session/main/${id}`);
     }

diff --git a/src/app/shared/pipe/title-case.pipe.ts b/src/app/shared/pipe/title-case.pipe.ts
@@ -0,0 +1,11 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+@Pipe({
+    name:"titleCase"
+})
+export class TitleCasePipe implements PipeTransform {
+    transform(value: any): any {
+        if (!value) return value;
+        return value[0].toUpperCase() + value.substring(1).toLowerCase();
+    }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -9,6 +9,7 @@ import { AdvancedFilterComponent } from './_component/advanced-filter/advanced-f
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DurationPipe } from './pipe/duration.pipe';
 import { SizePipe } from './pipe/size.pipe';
+import {TitleCasePipe} from "./pipe/title-case.pipe";
 
 @NgModule({
   imports: [
@@ -24,7 +25,8 @@ import { SizePipe } from './pipe/size.pipe';
     AdvancedFilterTriggerComponent,
     FilterRowPipe,
     DurationPipe,
-    SizePipe
+    SizePipe,
+    TitleCasePipe
   ],
   exports: [
     MaterialModule,
@@ -33,7 +35,8 @@ import { SizePipe } from './pipe/size.pipe';
     AdvancedFilterRecapComponent,
     AdvancedFilterTriggerComponent,
     DurationPipe,
-    SizePipe
+    SizePipe,
+    TitleCasePipe
   ]
 })
 export class SharedModule { }
diff --git a/src/app/views/detail/session/main/detail-session-main.view.html b/src/app/views/detail/session/main/detail-session-main.view.html
@@ -44,19 +44,21 @@
         </mat-card>
         <mat-card style="width: 40vw;">
             <mat-card-title>
-                <a style="display: flex; align-items: center; gap: 0.5em" *ngIf="session.type == 'VIEW'"
+                <a style="display: flex; align-items: center; gap: 0.5em; height: inherit;" *ngIf="session.type == 'VIEW'"
                    [routerLink]="'/dashboard/client/'+ instance.name"
                    [queryParams]="{'env': instance.env}" matTooltip="Statistiques Client">
                     <mat-icon>storage</mat-icon>
                     <div>{{instance.name}} <span style="font-size: 12px; font-style: italic; font-weight: normal;">{{instance.version}}</span></div>
                 </a>
-                <a style="display: flex; align-items: center; gap: 0.5em" *ngIf="session.type != 'VIEW'" [routerLink]="'/dashboard/server/'+ instance.name"
+                <a style="display: flex; align-items: center; gap: 0.5em; height: inherit;" *ngIf="session.type != 'VIEW'" [routerLink]="'/dashboard/server/'+ instance.name"
                    [queryParams]="{'env': instance.env}" matTooltip="Statistiques Serveur">
                     <mat-icon>storage</mat-icon>
                     <div>{{instance.name}} <span style="font-size: 12px; font-style: italic; font-weight: normal;">{{instance.version}}</span></div>
                 </a>
-                <div style="height: 48px">
-
+                <div class="right">
+                    <button [hidden]="session.type == 'VIEW'" mat-icon-button (click)="onClickDump($event)" matTooltip="Processus">
+                        <mat-icon>developer_board</mat-icon>
+                    </button>
                 </div>
             </mat-card-title>
             <mat-card-content>

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
@@ -112,6 +112,23 @@ export class DetailSessionMainView implements OnInit, OnDestroy {
         }
     }
 
+    onClickDump(event: MouseEvent) {
+        let params: {fragments: string[], queryParams: any} = {
+            fragments: ['session', this.instance.name, 'dump'],
+            queryParams:  { env: this.instance.env, date: new Date(this.session.start * 1000).toISOString() }
+        };
+        if (event.ctrlKey) {
+            let url = this._router.createUrlTree(params.fragments, {
+                queryParams: params.queryParams }
+            ).toString();
+            this._router.open(`#/${url}`, '_blank');
+        } else {
+            this._router.navigate(params.fragments, {
+                queryParams: params.queryParams
+            });
+        }
+    }
+
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
     }

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
@@ -65,8 +65,10 @@
                     <div>{{instance.name}} <span style="font-size: 12px; font-style: italic; font-weight: normal;">{{instance.version}}</span></div>
 
                 </a>
-                <div style="height: 48px">
-
+                <div class="right">
+                    <button mat-icon-button (click)="onClickDump($event)" matTooltip="Processus">
+                        <mat-icon>developer_board</mat-icon>
+                    </button>
                 </div>
             </mat-card-title>
             <mat-card-content>

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
@@ -160,8 +160,8 @@ export class DetailSessionRestView implements OnInit, OnDestroy {
             case "rest":
                 params.push('statistic', 'rest', this.session.name);
                 break;
-            case "app":
-                params.push('statistic', 'app', this.session.appName)
+            case "dump":
+                params.push('session', this.instance.name, 'dump')
                 break;
             case "tree":
                 params.push('session', 'rest', this.session.id, 'tree')
@@ -182,6 +182,23 @@ export class DetailSessionRestView implements OnInit, OnDestroy {
         }
     }
 
+    onClickDump(event: MouseEvent) {
+        let params: {fragments: string[], queryParams: any} = {
+            fragments: ['session', this.instance.name, 'dump'],
+            queryParams:  { env: this.instance.env, date: new Date(this.session.start * 1000).toISOString() }
+        };
+        if (event.ctrlKey) {
+            let url = this._router.createUrlTree(params.fragments, {
+                queryParams: params.queryParams }
+            ).toString();
+            this._router.open(`#/${url}`, '_blank');
+        } else {
+            this._router.navigate(params.fragments, {
+                queryParams: params.queryParams
+            });
+        }
+    }
+
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
     }

diff --git a/src/app/views/dump/dump.view.html b/src/app/views/dump/dump.view.html
@@ -0,0 +1,24 @@
+<header-page style="height: 56px;" titleIcon="developer_board" [ui-title]="params.app | titleCase">
+</header-page>
+
+<div class="timeline">
+    <div style="display: flex; justify-content: flex-end;">
+        <button mat-icon-button  matTooltip="Recule" [disabled]="loading()" (click)="previous()">
+            <mat-icon>keyboard_double_arrow_left</mat-icon>
+        </button>
+        <button mat-icon-button matTooltip="Dezoom" [disabled]="loading()" (click)="zoomOut()">
+            <mat-icon>zoom_out</mat-icon>
+        </button>
+        <button mat-icon-button matTooltip="Zoom" [disabled]="loading() || !zoomableIn()" (click)="zoomIn()">
+            <mat-icon>zoom_in</mat-icon>
+        </button>
+        <button mat-icon-button matTooltip="Avance" [disabled]="loading()" (click)="next()">
+            <mat-icon>keyboard_double_arrow_right</mat-icon>
+        </button>
+    </div>
+    <dump-timeline *ngIf="!loading()" [groups]="groups" [items]="items"></dump-timeline>
+    <div *ngIf="loading()" class="loading">
+        <span>Loading...</span>
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    </div>
+</div>
diff --git a/src/app/views/dump/dump.view.scss b/src/app/views/dump/dump.view.scss
@@ -0,0 +1,17 @@
+.timeline {
+  height: calc(100vh - 56px - 48px - 1.5em);
+  display: flex;
+  flex-direction: column;
+}
+
+.loading {
+  height: 100%;
+  width: 15%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #6c6c6c;
+}