recover menu with sub menu items

src/app/components/controls/menu-stat/menu-stat.component.html

@@ -4,61 +4,35 @@
 <div *ngIf="menuTree">
   <a (click)="gotoUploadPage()">
     <!-- <button mat-icon-button> -->
-    <mat-icon mat-list-icon color="primary" style="margin: 5px; float: left"
-      >note</mat-icon
-    >
+    <mat-icon mat-list-icon color="primary" style="margin: 5px; float: left">note</mat-icon>
     <!-- </button> -->
   </a>
-  <button
-    mat-button
-    *ngFor="let item of [m05]; let idx = index"
-    [matMenuTriggerFor]="item"
-  >
+  <button mat-button *ngFor="let item of [m01,m02,m03,m04,m05]; let idx = index" [matMenuTriggerFor]="item">
     {{ menuTree[idx].name }}
   </button>
 
   <mat-menu #m01="matMenu">
-    <button
-      mat-menu-item
-      *ngFor="let item of menuTree[0].children; let idx = index"
-      (click)="onMenuClick(item)"
-    >
+    <button mat-menu-item *ngFor="let item of menuTree[0].children; let idx = index" (click)="onMenuClick(item)">
       {{ item.name }}
     </button>
   </mat-menu>
   <mat-menu #m02="matMenu">
-    <button
-      mat-menu-item
-      *ngFor="let item of menuTree[1].children; let idx = index"
-      (click)="onMenuClick(item)"
-    >
+    <button mat-menu-item *ngFor="let item of menuTree[1].children; let idx = index" (click)="onMenuClick(item)">
       {{ item.name }}
     </button>
   </mat-menu>
   <mat-menu #m03="matMenu">
-    <button
-      mat-menu-item
-      *ngFor="let item of menuTree[2].children; let idx = index"
-      (click)="onMenuClick(item)"
-    >
+    <button mat-menu-item *ngFor="let item of menuTree[2].children; let idx = index" (click)="onMenuClick(item)">
       {{ item.name }}
     </button>
   </mat-menu>
   <mat-menu #m04="matMenu">
-    <button
-      mat-menu-item
-      *ngFor="let item of menuTree[3].children; let idx = index"
-      (click)="onMenuClick(item)"
-    >
+    <button mat-menu-item *ngFor="let item of menuTree[3].children; let idx = index" (click)="onMenuClick(item)">
       {{ item.name }}
     </button>
   </mat-menu>
   <mat-menu #m05="matMenu">
-    <button
-      mat-menu-item
-      *ngFor="let item of menuTree[4].children; let idx = index"
-      (click)="onMenuClick(item)"
-    >
+    <button mat-menu-item *ngFor="let item of menuTree[4].children; let idx = index" (click)="onMenuClick(item)">
       {{ item.name }}
     </button>
   </mat-menu>

src/app/components/controls/menu-stat/menu-stat.component.ts

@@ -3,7 +3,7 @@ import { WebSharkDataService } from '@app/services/web-shark-data.service';
 import { ModalResizableService } from '../modal-resizable/modal-resizable.service';
 import { WiregasmService } from '@app/services/wiregasm.service';
 import { Router } from '@angular/router';
-
+import menu_data from '../../../helper/menu_data.json';
 @Component({
   selector: 'app-menu-stat',
   templateUrl: './menu-stat.component.html',
@@ -18,7 +18,7 @@ export class MenuStatComponent implements OnInit {
     private cdr: ChangeDetectorRef,
     private router: Router
   ) { }
-
+  menu_data:any = menu_data;
   async ngOnInit() {
     const d = await this.initMenu();
   }
@@ -30,35 +30,21 @@ export class MenuStatComponent implements OnInit {
   async initMenu() {
     try {
       this.menuTreeIndex = [];
-      // console.log('MENU:ngOnInit()')
+      console.log('MENU:ngOnInit()', this.menu_data)
       const info = await this.webSharkDataService.getInfo();
       const {
         stats = [], nstat = [], convs = [],
         seqa = [], taps = [], eo = [],
         srt = [], rtd = []
-      } = info;
+      } = this.menu_data;
 
       const menuCollection = [
-        { name: 'Misc', children: [...convs] },
+        // Endpoints
+        { name: 'Endpoints', children: [...convs] },
         { name: 'Response Time', children: [...srt, ...rtd] },
         { name: 'Statistics', children: [...stats, ...nstat] },
         { name: 'Export Objects', children: [...eo] },
-        {
-          name: 'Misc', children: [
-            {
-              name: 'RTP Streams',
-              type: 'rtp-streams',
-              jsonData: {}
-            },
-
-            {
-              name: 'Flow',
-              type: 'flow',
-              jsonData: {}
-            },
-
-          ]
-        }
+        { name: 'Misc', children: [...taps, ...seqa] }
       ];
       this.menuTree = menuCollection;
 

src/app/components/controls/tap/tap-page.component.html

@@ -1,18 +1,16 @@
-<isData [inProgress]="loading" [noDataIf]="!jsonData">
+<isData [inProgress]="loading" [noDataIf]="!jsonData && !(type == 'rtp-streams' || type === 'seqa:any')">
   <ng-container [ngSwitch]="type">
-    <ng-template ngSwitchCase="flow">
-      <tap-flow [data]="jsonData"></tap-flow>
+    <ng-template ngSwitchCase="seqa:any">
+      <tap-flow [data]="jsonData || []"></tap-flow>
     </ng-template>
 
     <ng-template ngSwitchCase="rtp-streams">
-      <tap-rtp-streams [data]="jsonData"></tap-rtp-streams>
+      <tap-rtp-streams [data]="jsonData || []"></tap-rtp-streams>
     </ng-template>
 
     <ng-template ngSwitchDefault>
-
       <chart-and-table [data]="jsonData"></chart-and-table>
-      <tree-filter [jsonData]="jsonData"
-      [isFilter]="false"></tree-filter>
+      <tree-filter [jsonData]="jsonData" [isFilter]="false"></tree-filter>
     </ng-template>
   </ng-container>
 </isData>

src/app/components/controls/tap/tap-page.component.ts

@@ -14,9 +14,17 @@ export class TapPageComponent {
   @Input() set taplink(obj: any) {
 
     this.title = obj.name;
-    this.type = obj?.type;
+    this.type = obj?.type || obj?.tap;
     this.jsonData = obj?.jsonData;
     console.log('taplink ==> ', obj)
   }
-
+  async initData(link: string) {
+    const data: any = {}; // await this.webSharkDataService.getTapJson(link);
+    const [tapData] = data?.taps || [];
+    this.jsonData = tapData;
+    const { name, proto, type } = tapData || {};
+    this.title = (name || proto || '') + (type ? ` [${type}]` : '');
+    this.type = type || '';
+    this.loading = false;
+  }
 }