Merge pull request #56 from oneteme/develop

bugfixs + update tree + filter rest remove
oneteme · Nov 26, 2024 · dca1515 · dca1515
2 parents 197d8a1 + d9d7597
commit dca1515
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 75 deletions.
diff --git a/angular.json b/angular.json
@@ -151,6 +151,7 @@
   "cli": {
     "schematicCollections": [
       "@angular-eslint/schematics"
-    ]
+    ],
+    "analytics": false
   }
 }
diff --git a/src/app/model/trace.model.ts b/src/app/model/trace.model.ts
@@ -249,7 +249,12 @@ export class LinkRequestNode implements Link<Label> {
         this.nodeObject = nodeObject;
     }
     getLinkStyle(): string {
-        return this.nodeObject.status > 400 || this.nodeObject.status == 0 ? 'FAILURE' : 'SUCCES'
+        switch(true){
+            case (this.nodeObject.status >= 200 && this.nodeObject.status < 300): return "SUCCES";
+            case (this.nodeObject.status >= 400 && this.nodeObject.status < 500):  return "CLIENT_ERROR"
+            case (this.nodeObject.status >=500):  return "SERVER_ERROR";
+            case (this.nodeObject.status == 0):   return "UNREACHABLE"
+        }   
     }
 
     formatLink(field: Label): string {
@@ -433,7 +438,12 @@ export class RestRequestNode implements Node<Label> {
     }
 
     getLinkStyle(): string {
-        return this.nodeObject.status > 400 || this.nodeObject.status == 0 ? 'FAILURE' : 'SUCCES'
+        switch(true){
+            case (this.nodeObject.status >= 200 && this.nodeObject.status < 300): return "SUCCES";
+            case (this.nodeObject.status > 400 && this.nodeObject.status < 500):  return "CLIENT_ERROR"
+            case (this.nodeObject.status >=500):  return "SERVER_ERROR";
+            case (this.nodeObject.status == 0):   return "UNREACHABLE"
+        }   
     }
 }
 

diff --git a/src/app/model/tree.model.ts b/src/app/model/tree.model.ts
@@ -54,19 +54,24 @@ export class TreeGraph {
                 if (cell.value.nodes) {
                     let res = tg.groupBy(cell.value.nodes, (v: any) => v.formatLink(cell.value.linkLbl))
                     let entries = Object.entries(res)
-                    let extendMessage = '';
-                    let max;
+
+                    let max; 
+                    let count = 0;
                     if (entries.length > 5) {
                         max = 5;
-                        extendMessage = `...<b>${cell.value.nodes.length - 5} Autres</b>`
+
                     } else {
                         max = entries.length;
                     }
 
                     for (let i = 0; i < max; i++) {
                         modal += `<b>${entries[i][0]}</b>${entries[i][1].length>1 ?' ×'+entries[i][1].length: ''}<br>`
+                        count +=entries[i][1].length;
+                    }
+                    if(entries.length> 5){
+                        modal += `...<b>${cell.value.nodes.length - count} Autres</b>`
                     }
-                    modal += extendMessage;
+
                 }
                 else {
                     modal += `<b>${cell.value}</b>`
@@ -241,6 +246,8 @@ export const ServerConfig = {
 }
 export const LinkConfig = {
     SUCCES: "strokeColor=green;",
-    FAILURE: "strokeColor=red;"
+    CLIENT_ERROR: "strokeColor=yellow;",
+    SERVER_ERROR: "strokeColor=red;",
+    UNREACHABLE: "strokeColor=red;"
 }
 
diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss
@@ -1,7 +1,6 @@
 .exception-card {
     display: flex;
     flex-direction: row;
-    display: -webkit-box;
     gap: 1em;
     margin-bottom: 1em;
 }

diff --git a/src/app/views/detail/database/detail-database.view.html b/src/app/views/detail/database/detail-database.view.html
@@ -4,7 +4,7 @@
         <mat-card-title>
             <p style="display: flex; align-items: center; gap: 0.5em">
                 <mat-icon class="material-symbols-outlined">Database</mat-icon>
-                {{ request.host ? request.host + ':' + request.port + ' -- ' + request.name : 'N/A'}}
+                {{ request.host ? request.host + ':' + (request.port || '') + ' -- ' + request.name : 'N/A'}}
             </p>
 
             <div class="right">

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
@@ -1,29 +1,3 @@
-<div style="display: flex; justify-content: space-between; margin-bottom: 0.2em;">
-    <mat-form-field appearance="outline" class="searchwidth md-2 no-subscript">
-        <input matInput #input (keyup)="applyFilter($event)" placeholder="Filtrer..."
-            autocomplete="off">
-        <mat-icon matSuffix>search</mat-icon>
-    </mat-form-field>
-
-    <mat-button-toggle-group #group="matButtonToggleGroup" multiple
-        (change)="toggleFilter($event.value)">
-        <mat-button-toggle value="2xx" matTooltip="2xx">
-            <span class="material-symbols-outlined" style="color: #22bb33;">
-                done
-            </span>
-        </mat-button-toggle>
-        <mat-button-toggle value="4xx" matTooltip="4xx">
-            <span class="material-symbols-outlined" style="color: #f9ad4e;">
-                error
-            </span>
-        </mat-button-toggle>
-        <mat-button-toggle value="5xx" matTooltip="5xx">
-            <span class="material-symbols-outlined" style="color: #bb2124;">
-                warning
-            </span>
-        </mat-button-toggle>
-    </mat-button-toggle-group>
-</div>
 <div class="mat-elevation-z8">
     <table mat-table [dataSource]="dataSource" #sort="matSort" matSort
         matSortActive="date_debut" matSortDirection="desc">

diff --git a/src/app/views/detail/session/_component/rest-table/detail-rest-table.component.ts b/src/app/views/detail/session/_component/rest-table/detail-rest-table.component.ts
@@ -12,7 +12,6 @@ import {RestRequest} from "src/app/model/trace.model";
 export class DetailRestTableComponent implements OnInit {
     displayedColumns: string[] = ['status', 'host', 'path', 'start', 'duree'];
     dataSource: MatTableDataSource<RestRequest> = new MatTableDataSource();
-    filterTable = new Map<string, any>();
 
     @ViewChild('paginator', {static: true}) paginator: MatPaginator;
     @ViewChild('sort', {static: true}) sort: MatSort;
@@ -28,21 +27,6 @@ export class DetailRestTableComponent implements OnInit {
 
     ngOnInit() {
         this.dataSource.sortingDataAccessor = sortingDataAccessor;
-        this.dataSource.filterPredicate = filterPredicate;
-    }
-
-    applyFilter(event: Event) {
-        const filterValue = (event.target as HTMLInputElement).value;
-        this.filterTable.set('filter', filterValue.trim().toLowerCase());
-        this.dataSource.filter = JSON.stringify(Array.from(this.filterTable.entries()));
-        if (this.dataSource.paginator) {
-            this.dataSource.paginator.firstPage();
-        }
-    }
-
-    toggleFilter(filter: string[]) {
-        this.filterTable.set('status', filter);
-        this.dataSource.filter = JSON.stringify(Array.from(this.filterTable.entries()));
     }
 
     selectedRequest(event: MouseEvent, row: any) {
@@ -56,21 +40,3 @@ const sortingDataAccessor = (row: any, columnName: string) => {
     if (columnName == "duree") return (row["end"] - row["start"]);
     return row[columnName as keyof any] as string;
 }
-
-const filterPredicate = (data: RestRequest, filter: string) => {
-    var map: Map<string, any> = new Map(JSON.parse(filter));
-    let isMatch = true;
-    for (let [key, value] of map.entries()) {
-        if (key == 'filter') {
-            isMatch = isMatch && (value == '' ||
-                (data.host?.toLowerCase().includes(value) || data.method?.toLowerCase().includes(value) || data.query?.toLowerCase().includes(value) ||
-                data.path?.toLowerCase().includes(value)));
-        } else if (key == 'status') {
-            const s = data.status.toString();
-            isMatch = isMatch && (!value.length || (value.some((status: any) => {
-                return s.startsWith(status[0]);
-            })));
-        }
-    }
-    return isMatch;
-}
diff --git a/src/app/views/tree/tree.view.ts b/src/app/views/tree/tree.view.ts
@@ -148,7 +148,7 @@ export class TreeView implements OnDestroy {
         if (v[1].length > 1) {
           b = this.draw(treeGraph, this.mergeRestRequests(v[0], v[1]), serverlbl, linklbl);
           label = { linkLbl: linklbl, nodes: v[1] };
-          linkStyle = LinkConfig[this.checkSome<RestRequestNode>(v[1], v => { return v.nodeObject.status > 400 || v.nodeObject.status == 0 }) ? 'FAILURE' : 'SUCCES'] + "strokeWidth=1.5;"
+          linkStyle = LinkConfig[this.checkSome<RestRequestNode>(v[1], v => { return v.nodeObject.status > 400 || v.nodeObject.status == 0 }) ? 'SERVER_ERROR' : 'SUCCES'] + "strokeWidth=1.5;"
         }
         else {
           let restRequestNode = v[1][0];
@@ -169,7 +169,7 @@ export class TreeView implements OnDestroy {
         b = treeGraph.insertServer(jdbcRequestNode.formatNode(serverlbl), "JDBC"); // demon server
         if (v[1].length > 1) {
           label = { linkLbl: linklbl, nodes: v[1] };
-          linkStyle = LinkConfig[this.checkSome<JdbcRequestNode>(v[1], v => { return !v.nodeObject.status }) ? 'FAILURE' : 'SUCCES'] + "strokeWidth=1.5;"
+          linkStyle = LinkConfig[this.checkSome<JdbcRequestNode>(v[1], v => { return !v.nodeObject.status }) ? 'SERVER_ERROR' : 'SUCCES'] + "strokeWidth=1.5;"
         } else {
           label = jdbcRequestNode.formatLink(linklbl);
           linkStyle = LinkConfig[jdbcRequestNode.getLinkStyle()];
@@ -186,7 +186,7 @@ export class TreeView implements OnDestroy {
         b = treeGraph.insertServer(ftpRequestNode.formatNode(serverlbl), "FTP"); // demon server
         if (v[1].length > 1) {
           label = { linkLbl: linklbl, nodes: v[1] };
-          linkStyle = LinkConfig[this.checkSome<FtpRequestNode>(v[1], v => { return !v.nodeObject.status }) ? 'FAILURE' : 'SUCCES'] + "strokeWidth=1.5;"
+          linkStyle = LinkConfig[this.checkSome<FtpRequestNode>(v[1], v => { return !v.nodeObject.status }) ? 'SERVER_ERROR' : 'SUCCES'] + "strokeWidth=1.5;"
         } else {
           label = ftpRequestNode.formatLink(linklbl);
           linkStyle = LinkConfig[ftpRequestNode.getLinkStyle()];
@@ -203,7 +203,7 @@ export class TreeView implements OnDestroy {
         b = treeGraph.insertServer(mailRequestNode.formatNode(serverlbl), "SMTP"); // demon server
         if (v[1].length > 1) {
           label = { linkLbl: linklbl, nodes: v[1] };
-          linkStyle = LinkConfig[this.checkSome<MailRequestNode>(v[1], v => { return !v.nodeObject.status }) ? 'FAILURE' : 'SUCCES'] + "strokeWidth=1.5;"
+          linkStyle = LinkConfig[this.checkSome<MailRequestNode>(v[1], v => { return !v.nodeObject.status }) ? 'SERVER_ERROR' : 'SUCCES'] + "strokeWidth=1.5;"
         } else {
           label = mailRequestNode.formatLink(linklbl);
           linkStyle = LinkConfig[mailRequestNode.getLinkStyle()];
@@ -220,7 +220,7 @@ export class TreeView implements OnDestroy {
         b = treeGraph.insertServer(ldapRequestNode.formatNode(serverlbl), "LDAP"); // demon server
         if (v[1].length > 1) {
           label = { linkLbl: linklbl, nodes: v[1] };
-          linkStyle = LinkConfig[this.checkSome<MailRequestNode>(v[1], v => { return !v.nodeObject.status }) ? 'FAILURE' : 'SUCCES'] + "strokeWidth=1.5;"
+          linkStyle = LinkConfig[this.checkSome<MailRequestNode>(v[1], v => { return !v.nodeObject.status }) ? 'SERVER_ERROR' : 'SUCCES'] + "strokeWidth=1.5;"
         } else {
           label = ldapRequestNode.formatLink(linklbl);
           linkStyle = LinkConfig[ldapRequestNode.getLinkStyle()];