Develop

.gitignore

@@ -38,4 +38,11 @@ testem.log
 
 # System Files
 .DS_Store
+
+# Docs locaux (contexte non versionné)
+docs/
 Thumbs.db
+
+# Local context & documentation
+CONTEXT.md
+

README.md

@@ -42,3 +42,5 @@ export const app: Application = {
 | DEFAULT_ENV | **string** | dev      | 
 | DEFAULT_GRID_VIEW_PERIOD | **string** | LAST_30  |
 | DEFAULT_KPI_VIEW_PERIOD  | **string** | LAST_1440  | 
+
+## Authentification

angular.json

@@ -26,22 +26,22 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
+              "src/logout.html",
               {
                 "glob": "**/*",
                 "input": "./node_modules/mxgraph/javascript/src",
                 "output": "./assets/mxgraph"
               },
               {
                 "glob": "**/*",
-                "input": "./node_modules/@oneteme/jquery-apexcharts/src/assets",
+                "input": "./node_modules/@oneteme/jquery-echarts/src/assets",
                 "output": "./assets/icons"
               }
             ],
             "styles": [
               "node_modules/vis-timeline/styles/vis-timeline-graph2d.min.css",
               "src/styles/theme.scss",
-              "node_modules/@fortawesome/fontawesome-free/css/all.css",
-              "node_modules/@oneteme/jquery-apexcharts/styles/styles.scss"
+              "node_modules/@fortawesome/fontawesome-free/css/all.css"
             ],
             "scripts": [
               "node_modules/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"
@@ -134,7 +134,8 @@
             "scripts": [],
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/logout.html"
             ]
           }
         },

package.json

@@ -20,9 +20,12 @@
     "@angular/material": "^16.2.12",
     "@angular/platform-browser": "^16.2.12",
     "@angular/platform-browser-dynamic": "^16.2.12",
+    "angular-oauth2-oidc": "^17.0.0",
+    "@oneteme/inspect-ng-collector": "^1.3.2",
     "@angular/router": "^16.2.12",
     "@fortawesome/fontawesome-free": "^6.0.0",
-    "@oneteme/jquery-apexcharts": "^0.0.24",
+    "@oneteme/jquery-echarts": "^0.0.4",
+    "@oneteme/jquery-table": "^0.0.5",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "mxgraph": "^4.2.2",
@@ -58,5 +61,8 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "mxgraph-type-definitions": "^1.0.6",
     "typescript": "~4.9.3"
+  },
+  "overrides": {
+    "@oneteme/jquery-core": "^0.0.32"
   }
 }

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>

src/app/app.component.scss

@@ -1,24 +1,12 @@
-:host {
-    display: flex; 
-    flex-direction: column;
-}
-
-.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);
-}
+}

src/app/app.component.ts

@@ -1,95 +1,10 @@
-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',
     templateUrl: 'app.component.html',
     styleUrls: ['app.component.scss']
 })
-export class AppComponent implements OnDestroy {
-    private readonly _activatedRoute: ActivatedRoute = inject(ActivatedRoute);
-    private readonly _service: InstanceService = inject(InstanceService);
-    private readonly _router: EnvRouter = inject(EnvRouter);
-
-    MAPPING_TYPE = Constants.MAPPING_TYPE;
-    REQUEST_TYPE = Constants.REQUEST_MAPPING_TYPE;
-    envs: any[];
-    env: FormControl<string> = new FormControl();
-    isLoadingEnv = false;
-    subscriptions: Subscription[] = [];
-
-
-    constructor() {
-        const iconRegistry = inject(MatIconRegistry);
-        const sanitizer = inject(DomSanitizer);
-
-        // Note that we provide the icon here as a string literal here due to a limitation in
-        // Stackblitz. If you want to provide the icon from a URL, you can use:
-        iconRegistry.addSvgIcon('github', sanitizer.bypassSecurityTrustResourceUrl('./assets/github.svg'));
-        this.envs = [app.defaultEnv];
-        if (!localStorage.getItem('server')) {
-            localStorage.setItem('server', app.host);
-        }
-        this.isLoadingEnv = true;
-        this.subscriptions.push(this._service.getEnvironments()
-            .pipe(finalize(() => this.isLoadingEnv = false))
-            .subscribe({
-                next: res => {
-                    this.envs = res.map(r => r.environement);
-                }
-            }));
-        this.subscriptions.push(this.env.valueChanges
-            .pipe(
-                distinctUntilChanged((previous: string, current: string) => {
-                    return previous == current;
-                }))
-            .subscribe({
-                next: res => {
-                    this._router.navigate([], {
-                        queryParamsHandling: 'merge',
-                        queryParams: {env: res}
-                    });
-                }
-            }));
-
-        this.subscriptions.push(this._activatedRoute.queryParams
-            .subscribe({
-                next: res => {
-                    let r = this._activatedRoute.snapshot.queryParams['env'];
-                    if (!r) {
-                        r = app.defaultEnv;
-                    }
-                    if (this.env.value != r) {
-                        this.env.setValue(r, {emitEvent: false});
-                    }
-                }
-            }));
-    }
-
-    ngOnDestroy(): void {
-        this.unsubscribe();
-    }
-
-    unsubscribe() {
-        this.subscriptions.forEach(s => s.unsubscribe());
-    }
+export class AppComponent {
 
-    gotoHome(event: MouseEvent){
-        if (event.ctrlKey) {
-            this._router.open(`#/home?env=${this.env.value}`, '_blank',)
-        } else {
-            this._router.navigate([`home`], {
-                queryParams: { env: this.env.value }
-            });
-        }
-    }
 }