oneteme · antonin77 · Feb 12, 2026 · Feb 17, 2026 · Feb 18, 2026 · Feb 18, 2026
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@angular/router": "^16.2.12",
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@oneteme/jquery-apexcharts": "^0.0.24",
+    "@oneteme/jquery-table": "^0.0.1",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "mxgraph": "^4.2.2",
@@ -58,5 +59,8 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "mxgraph-type-definitions": "^1.0.6",
     "typescript": "~4.9.3"
+  },
+  "overrides": {
+    "@oneteme/jquery-core": "0.0.27"
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,78 +1,4 @@
-<nav>
-  <mat-toolbar color="primary" style="display: flex; align-items: center; height: 48px;">
-    <span style="margin-right: 0.5em;cursor:pointer" (click)="gotoHome($event)">INSPECT</span>
-
-    <button mat-icon-button [matMenuTriggerFor]="menu">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    <mat-menu #menu="matMenu">
-      <a mat-menu-item [matMenuTriggerFor]="requests">
-        <mat-icon>{{ MAPPING_TYPE['request'].icon }}</mat-icon>
-        <span>{{ MAPPING_TYPE['request'].title }}</span>
-      </a>
-      <a mat-menu-item [routerLink]="['session/rest']" [queryParams]="{env: env.value }" routerLinkActive="menu-active">
-        <mat-icon class="material-symbols-outlined">{{ MAPPING_TYPE['rest'].icon }}</mat-icon>
-        <span>{{ MAPPING_TYPE['rest'].title }}</span>
-      </a>
-      <a mat-menu-item [routerLink]="['session/batch']" [queryParams]="{env: env.value }"
-         routerLinkActive="menu-active">
-        <mat-icon class="material-symbols-outlined">{{ MAPPING_TYPE['batch'].icon }}</mat-icon>
-        <span>{{ MAPPING_TYPE['batch'].title }}</span>
-      </a>
-      <a mat-menu-item [routerLink]="['session/test']" [queryParams]="{env: env.value }"
-         routerLinkActive="menu-active">
-        <mat-icon class="material-symbols-outlined">{{ MAPPING_TYPE['test'].icon }}</mat-icon>
-        <span>{{ MAPPING_TYPE['test'].title }}</span>
-      </a>
-      <a mat-menu-item [routerLink]="['session/startup']" [queryParams]="{env: env.value }"
-         routerLinkActive="menu-active">
-        <mat-icon class="material-symbols-outlined">{{ MAPPING_TYPE['startup'].icon }}</mat-icon>
-        <span>{{ MAPPING_TYPE['startup'].title }}</span>
-      </a>
-      <a mat-menu-item [routerLink]="['session/view']" [queryParams]="{env: env.value }" routerLinkActive="menu-active">
-        <mat-icon>{{ MAPPING_TYPE['view'].icon }}</mat-icon>
-        <span>{{ MAPPING_TYPE['view'].title }}</span>
-      </a>
-    </mat-menu>
-
-    <mat-menu #requests="matMenu">
-      <a mat-menu-item [routerLink]="['request/rest']" [queryParams]="{env: env.value }" routerLinkActive="menu-active">
-        <mat-icon class="material-symbols-outlined">{{ REQUEST_TYPE['rest'].icon }}</mat-icon>
-        <span>{{ REQUEST_TYPE['rest'].title }}</span>
-      </a>
-      <a mat-menu-item [routerLink]="['request/jdbc']" [queryParams]="{env: env.value }" routerLinkActive="menu-active">
-        <mat-icon class="material-symbols-outlined">{{ REQUEST_TYPE['jdbc'].icon }}</mat-icon>
-        <span>{{ REQUEST_TYPE['jdbc'].title }}</span>
-      </a>
-      <a mat-menu-item [routerLink]="['request/ftp']" [queryParams]="{env: env.value }" routerLinkActive="menu-active">
-        <mat-icon class="material-symbols-outlined">{{ REQUEST_TYPE['ftp'].icon }}</mat-icon>
-        <span>{{ REQUEST_TYPE['ftp'].title }}</span>
-      </a>
-      <a mat-menu-item [routerLink]="['request/smtp']" [queryParams]="{env: env.value }" routerLinkActive="menu-active">
-        <mat-icon class="material-symbols-outlined">{{ REQUEST_TYPE['smtp'].icon }}</mat-icon>
-        <span>{{ REQUEST_TYPE['smtp'].title }}</span>
-      </a>
-      <a mat-menu-item [routerLink]="['request/ldap']" [queryParams]="{env: env.value }" routerLinkActive="menu-active">
-        <mat-icon class="material-symbols-outlined">{{ REQUEST_TYPE['ldap'].icon }}</mat-icon>
-        <span>{{ REQUEST_TYPE['ldap'].title }}</span>
-      </a>
-    </mat-menu>
-    <span style="flex-grow: 1;"></span>
-    <a [routerLink]="['deploiment']" [queryParams]="{env: env.value }"
-       [matTooltip]="MAPPING_TYPE['deploiment'].title" style="margin-right: 0.5em" mat-icon-button>
-      <span class="material-symbols-outlined">{{ MAPPING_TYPE['deploiment'].icon }}</span>
-    </a>
-    <mat-form-field appearance="fill" class="md-2 no-subscript" [class.loading]="isLoadingEnv">
-      <mat-select [formControl]="env">
-        <mat-option *ngFor="let e of envs" [value]="e">{{ e }}</mat-option>
-      </mat-select>
-      <mat-spinner *ngIf="isLoadingEnv" [diameter]="18"></mat-spinner>
-    </mat-form-field>
-    <a href="https://github.com/orgs/oneteme/projects/17" style="margin-left: 0.5em" target="_blank" mat-icon-button>
-      <mat-icon svgIcon="github"></mat-icon>
-    </a>
-  </mat-toolbar>
-</nav>
+<app-navbar></app-navbar>
 <mat-drawer-container>
   <mat-drawer-content>
     <router-outlet></router-outlet>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,24 +1,18 @@
 :host {
-    display: flex; 
-    flex-direction: column;
+    display: block;
+    height: 100vh;
+    overflow: hidden;
 }
 
-.mat-mdc-menu-item.menu-active {
-    background-color: var(--mat-menu-item-hover-state-layer-color);
-    color: var(--inspect-blue);
-    font-weight: 500;
-    mat-icon {
-        color: currentColor;
-    }
-}
-
-.item-selected {
-    background-color: var(--mat-menu-item-hover-state-layer-color);
-    color: #1464dc;
+mat-drawer-container {
+    position: relative;
+    z-index: 1;
+    height: calc(100vh - 56px);
+    margin-top: 56px;
 }
 
 mat-drawer-content {
+    box-sizing: border-box;
     overflow-x: hidden;
     padding: 7px;
-    height: calc(100vh - 48px - 14px);
-}
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,14 +1,4 @@
-import {Component, inject, OnDestroy} from '@angular/core';
-import {FormControl} from '@angular/forms';
-import {ActivatedRoute} from '@angular/router';
-import {distinctUntilChanged, finalize, Subscription} from 'rxjs';
-import {app} from 'src/environments/environment';
-import {EnvRouter} from "./service/router.service";
-import {Constants} from "./views/constants";
-import {InstanceService} from "./service/jquery/instance.service";
-import {MatIconRegistry} from "@angular/material/icon";
-import {DomSanitizer} from "@angular/platform-browser";
-
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
@@ -22,6 +12,7 @@ export class AppComponent implements OnDestroy {
 
     MAPPING_TYPE = Constants.MAPPING_TYPE;
     REQUEST_TYPE = Constants.REQUEST_MAPPING_TYPE;
+    REQUEST_MAPPING_TYPE = Constants.REQUEST_MAPPING_TYPE;
     envs: any[];
     env: FormControl<string> = new FormControl();
     isLoadingEnv = false;

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -18,7 +18,6 @@ import {DetailSessionRestView} from "./views/detail/session/rest/detail-session-
 import {SearchMainView} from "./views/search/main/search-main.view";
 import {DetailSessionMainView} from "./views/detail/session/main/detail-session-main.view";
 import {StatisticUserView} from "./views/statistic/user/statistic-user.view";
-import {StatisticDatabaseView} from "./views/statistic/database/statistic-database.view";
 import {DashboardComponent} from "./views/dashboard/dashboard.component";
 import {EnvRouter} from "./service/router.service";
 import {DurationPipe} from "./shared/pipe/duration.pipe";
@@ -27,20 +26,19 @@ 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";
 import {StatisticServerView} from "./views/statistic/server/statistic-server.view";
 import {DeploimentComponent} from './views/deploiment/deploiment.component';
 import {Interceptor} from "./shared/interceptor/interceptor";
 import {AnalyticView} from "./views/analytic/analytic.view";
 import {SearchRequestView} from "./views/search/request/search-request.view";
 import {Constants} from "./views/constants";
 import {DetailRequestView} from "./views/detail/request/detail-request.view";
-import { InstanceComponent } from './views/detail/instance/instance.component';
+import {InstanceComponent} from './views/detail/instance/instance.component';
+import {NavbarComponent} from './components/navbar/navbar.component';
 import {ServerSupervisionView} from "./views/supervision/_component/server/server-supervision.view";
 import {ClientSupervisionView} from "./views/supervision/_component/client/client-supervision.view";
 import {StatisticRequestView} from "./views/statistic/request/statistic-request.view";
 
-
 registerLocaleData(localeFr, 'fr-FR');
 const routes: Route[] = [
     {
@@ -67,11 +65,6 @@ const routes: Route[] = [
     },
     {
     path: 'session', children: [
-      {
-        path: ':app_name/dump',
-        component: DumpView,
-        title: 'Pulse'
-      },
       {
         path: 'rest',
         children: [
@@ -173,7 +166,7 @@ const routes: Route[] = [
         }
       },
       {
-        path: 'request/:request_type/:request_host',
+        path: 'request/:request_type',
         component: StatisticRequestView
       },
       {
@@ -183,13 +176,6 @@ const routes: Route[] = [
           return `Dashboard > ${route.paramMap.get('user_name')}`;
         }
       },
-      {
-        path: 'database/:database_name',
-        component: StatisticDatabaseView,
-        title: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
-          return `Dashboard > ${route.paramMap.get('database_name')}`;
-        }
-      },
       {
         path: 'client/:client_name',
         component: StatisticClientView,
@@ -258,10 +244,11 @@ const routes: Route[] = [
     ViewsModule
   ],
   declarations: [
-    AppComponent
+    AppComponent,
+    NavbarComponent
   ],
   providers: [
-      SizePipe,
+    SizePipe,
     DatePipe,
     DecimalPipe,
     DurationPipe,

diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
@@ -0,0 +1,115 @@
+<nav class="navbar">
+  <div class="navbar-glow"></div>
+
+  <div class="navbar-content">
+    <div class="nav-brand" (click)="gotoHome()">
+      <svg
+        class="brand-logo"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1062 235"
+        preserveAspectRatio="xMidYMid meet"
+        role="img"
+        aria-label="Inspect"
+      >
+        <g transform="translate(0,235) scale(0.1,-0.1)">
+          <path d="M3595 2141 l-370 -6 -81 -33 c-225 -90 -355 -282 -355 -527 -1 -61 6 -123 16 -159 52 -192 212 -340 413 -381 48 -10 130 -15 236 -15 225 0 291 -22 336 -111 27 -51 26 -129 -3 -199 -20 -49 -28 -57 -81 -85 l-60 -30 -320 -2 c-289 -1 -322 -3 -331 -18 -5 -9 -42 -65 -81 -123 -39 -59 -83 -128 -98 -154 l-27 -47 33 -6 c18 -3 231 -4 473 -2 488 4 496 5 625 73 111 58 217 179 257 294 7 19 18 74 25 122 33 246 -78 466 -286 567 -113 55 -153 62 -386 70 -165 6 -213 11 -243 26 -152 72 -140 320 18 380 37 15 90 17 346 19 l303 1 63 95 c34 52 75 113 90 135 33 46 66 106 61 110 -10 8 -250 11 -573 6z"/>
+          <path d="M4845 2142 l-230 -2 -64 -93 c-107 -154 -161 -236 -161 -247 0 -6 67 -11 174 -12 l174 -3 -159 -170 c-88 -93 -166 -180 -175 -191 -14 -20 -17 -282 -14 -1116 l0 -67 184 2 c102 1 188 6 192 10 5 5 9 352 9 773 l0 765 250 -3 c244 -3 251 -4 300 -28 36 -18 58 -38 80 -74 28 -46 30 -56 30 -145 0 -87 -3 -101 -28 -143 -15 -26 -41 -57 -58 -69 -43 -30 -128 -49 -225 -49 l-81 0 -29 -42 c-16 -24 -31 -47 -34 -53 -3 -5 -32 -50 -65 -100 -66 -100 -85 -133 -85 -147 0 -6 94 -8 258 -6 201 4 270 8 317 22 166 47 305 160 375 308 47 98 60 158 60 282 2 181 -65 332 -200 452 -62 56 -102 78 -195 110 -95 32 -232 41 -600 36z"/>
+          <path d="M6288 2142 l-278 -2 0 -944 0 -943 88 -7 c107 -8 1248 -3 1256 5 5 5 -8 32 -59 117 -5 9 -24 37 -41 62 -17 25 -45 70 -62 101 l-32 56 -107 5 c-60 3 -233 4 -385 2 l-277 -3 2 215 2 214 211 0 211 0 104 157 c57 87 105 166 107 176 3 17 -14 17 -312 15 l-315 -3 -6 24 c-3 13 -3 109 1 213 l7 188 196 0 c108 1 274 2 369 3 l174 2 25 45 c14 25 35 61 45 80 11 19 26 42 33 50 22 26 97 161 92 166 -5 6 -683 10 -1049 6z"/>
+          <path d="M8205 2140 c-215 -7 -235 -9 -310 -34 -192 -67 -325 -167 -429 -326 -67 -101 -123 -230 -101 -230 3 0 30 20 60 44 92 76 240 135 440 177 39 8 182 14 410 17 302 3 352 6 367 19 10 9 18 20 18 25 0 4 24 45 53 91 97 148 127 201 119 208 -12 12 -380 17 -627 9z"/>
+          <path d="M9165 2142 l-90 -3 -60 -102 c-32 -56 -76 -131 -97 -166 -21 -34 -38 -67 -38 -72 0 -5 99 -9 228 -9 l227 1 80 76 c44 41 91 83 105 92 14 9 54 38 90 65 36 27 89 60 118 73 30 14 50 29 45 33 -8 9 -454 17 -608 12z"/>
+          <path d="M678 2130 c-2 -6 -55 -44 -118 -85 -231 -149 -216 -136 -223 -204 -10 -91 -8 -1579 1 -1585 17 -10 199 -17 290 -10 l92 6 0 944 c0 924 0 944 -19 944 -11 0 -21 -5 -23 -10z"/>
+          <path d="M960 1184 l0 -956 43 25 c23 14 96 62 162 107 66 45 135 91 153 102 l32 20 0 377 c0 346 -2 382 -19 437 -45 136 -109 341 -115 369 -8 32 7 12 229 -307 66 -94 140 -200 165 -234 25 -34 104 -146 175 -248 72 -103 162 -231 200 -285 39 -54 108 -153 155 -219 84 -120 85 -120 130 -125 59 -6 318 -2 325 5 3 3 7 34 8 69 l2 64 -97 135 c-53 74 -120 168 -150 207 -29 40 -73 102 -98 138 -25 36 -58 83 -75 105 -34 44 -103 140 -204 285 -69 99 -101 144 -171 240 -20 28 -88 122 -150 210 -63 88 -159 222 -213 298 l-100 137 -193 0 -194 0 0 -956z"/>
+          <path d="M2403 2021 l-181 -119 -7 -124 c-4 -67 -5 -224 -3 -348 l3 -226 55 -74 c30 -41 60 -82 65 -92 6 -10 66 -95 135 -190 l125 -173 5 60 c3 33 5 339 4 680 -2 749 -2 725 -12 725 -5 0 -90 -54 -189 -119z"/>
+          <path d="M9930 2133 c-111 -43 -362 -300 -441 -452 l-29 -55 0 -692 c0 -380 2 -693 5 -696 5 -5 146 83 183 113 7 6 30 20 50 32 66 39 141 98 146 115 3 9 6 76 5 147 0 72 0 358 0 638 l1 507 184 0 185 0 23 32 c39 54 178 292 178 306 0 9 -54 12 -237 11 -131 0 -245 -3 -253 -6z"/>
+          <path d="M7780 1661 c-172 -79 -253 -134 -377 -259 -82 -82 -95 -114 -94 -242 1 -477 255 -817 676 -905 52 -11 144 -15 357 -15 l287 0 12 23 c6 12 30 51 54 87 61 94 135 221 135 231 0 11 -15 11 -415 14 -352 3 -372 5 -467 66 -170 109 -258 313 -245 569 10 185 57 318 147 410 27 28 50 53 50 56 0 12 -44 -1 -120 -35z"/>
+        </g>
+      </svg>
+    </div>
+
+    <div class="nav-main">
+      <div class="nav-divider"></div>
+      <button class="menu-trigger" [matMenuTriggerFor]="mainMenu" #mainTrigger="matMenuTrigger">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <mat-menu #mainMenu="matMenu" class="main-nav-menu">
+        <ng-container *ngFor="let item of navItems">
+          <button
+            mat-menu-item
+            *ngIf="item.children"
+            [matMenuTriggerFor]="subMenu"
+          >
+            <mat-icon class="material-symbols-outlined">{{ item.icon }}</mat-icon>
+            <span>{{ item.label }}</span>
+          </button>
+
+          <mat-menu #subMenu="matMenu" class="sub-nav-menu">
+            <button
+              mat-menu-item
+              class="nav-item-with-kpi"
+              *ngFor="let subItem of item.children"
+              (click)="navigateToSub(item, subItem)">
+              <mat-icon class="material-symbols-outlined">{{ subItem.icon }}</mat-icon>
+              <span>{{ subItem.label }}</span>
+              <span
+                *ngIf="subItem.kpiRoute"
+                class="nav-kpi-btn"
+                (click)="$event.stopPropagation(); navigateToKpi(subItem.kpiRoute)"
+                [matTooltip]="'KPI ' + subItem.label"
+                matTooltipPosition="right"
+              >
+                <mat-icon class="material-symbols-outlined">finance_mode</mat-icon>
+              </span>
+            </button>
+          </mat-menu>
+
+          <button
+            mat-menu-item
+            *ngIf="!item.children"
+            (click)="navigateTo(item.route)"
+          >
+            <mat-icon class="material-symbols-outlined">{{ item.icon }}</mat-icon>
+            <span>{{ item.label }}</span>
+          </button>
+        </ng-container>
+      </mat-menu>
+
+    </div>
+
+    <div class="nav-actions">
+      <button
+        class="action-btn deploy-btn"
+        [matTooltip]="MAPPING_TYPE['deploiment'].title"
+        (click)="gotoDeploiment()"
+      >
+        <mat-icon class="material-symbols-outlined">{{ MAPPING_TYPE['deploiment'].icon }}</mat-icon>
+      </button>
+
+      <button class="env-trigger" [matMenuTriggerFor]="envMenu" [ngClass]="'env-' + getEnvClass(env.value)">
+        <span class="env-letter">{{ env.value?.charAt(0) | uppercase }}</span>
+        <span class="env-label">{{ env.value | uppercase }}</span>
+        <mat-icon>expand_more</mat-icon>
+        <mat-spinner *ngIf="isLoadingEnv" [diameter]="14"></mat-spinner>
+      </button>
+
+      <mat-menu #envMenu="matMenu" class="env-menu-panel">
+        <button mat-menu-item *ngFor="let e of envs" (click)="selectEnv(e)">
+          <mat-icon [style.visibility]="env.value === e ? 'visible' : 'hidden'">check</mat-icon>
+          <span>{{ e | uppercase }}</span>
+        </button>
+      </mat-menu>
+
+      <div class="nav-divider"></div>
+
+      <a
+        class="action-btn github-btn"
+        href="https://github.com/orgs/oneteme/projects/17"
+        target="_blank"
+        matTooltip="Contribuer sur GitHub"
+      >
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+        </svg>
+      </a>
+    </div>
+  </div>
+</nav>