sipcapture · danieldonoghue · Feb 27, 2025
diff --git a/Dockerfile.local b/Dockerfile.local
@@ -0,0 +1,15 @@
+# OPTIONAL; use this Dockerfile for local development:
+#   1. docker build -t homer-ui -f ./Dockerfile.local .
+#   2. cd /path/to/homer-app
+#   3. make localfe
+
+FROM node:18-alpine
+
+RUN apk add git
+
+COPY . /app/
+WORKDIR /app
+
+RUN npm install && npm install -g @angular/cli
+RUN npm run build
+#RUN ng build
diff --git a/src/app/components/controls/transaction-filter/transaction-filter.component.html b/src/app/components/controls/transaction-filter/transaction-filter.component.html
@@ -31,8 +31,9 @@
             {{type.value}}
         </mat-radio-button>
     </mat-radio-group>
+
     <div style="margin: 0 -10px 5px -10px;">
-        <mat-accordion>
+        <mat-accordion>            
             <mat-expansion-panel [expanded]="true">
                 <mat-expansion-panel-header>
                     <mat-panel-title>PayloadType</mat-panel-title>
@@ -47,6 +48,29 @@
                     </ng-container>
                 </div>
             </mat-expansion-panel>
+            <mat-expansion-panel *ngIf="(isFlowTab && (hasFingerprints$ | async)) as hasFingerprints">
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Capture ID Consolidation
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <mat-slide-toggle class="slide-toggle"
+                    *ngIf="hasFingerprints"
+                    color="primary"
+                    [(ngModel)]="isConsolidateCaptureIds"
+                    (click)="doFilterMessages()">
+                    Enable
+                </mat-slide-toggle>
+                <br *ngIf="hasFingerprints">
+                <mat-form-field *ngIf="hasFingerprints" class="example-full-width">
+                    <mat-label>Threshold (ms)</mat-label>
+                    <input matInput type="number" min="100" max="10000" step="100"
+                        [(ngModel)]="consolidationTimeThreshold"
+                        [disabled]="!isConsolidateCaptureIds"
+                        placeholder="Enter time threshold"
+                        (change)="doFilterMessages()">
+                </mat-form-field>
+            </mat-expansion-panel>            
             <mat-expansion-panel *ngIf="checkboxListFilterAliases.length">
                 <mat-expansion-panel-header>
                     <mat-panel-title>Alias filter</mat-panel-title>

diff --git a/src/app/components/controls/transaction-filter/transaction-filter.component.ts b/src/app/components/controls/transaction-filter/transaction-filter.component.ts
@@ -13,7 +13,8 @@ import { Functions, setStorage } from '@app/helpers/functions';
 import { TransactionFilterService } from './transaction-filter.service';
 import { CallIDColor } from '@app/models/CallIDColor.model';
 import { AlertMessage, AlertService, PreferenceAdvancedService } from '@app/services';
-import { lastValueFrom } from 'rxjs';
+import { lastValueFrom, BehaviorSubject, Subscription } from 'rxjs';
+import { CallCaptureIdConsolidationService } from '@app/services/call/consolidation.service';
 
 interface FilterItem {
     title: string;
@@ -22,6 +23,8 @@ interface FilterItem {
 }
 export interface FlowFilter {
     isSimplify: boolean;
+    isConsolidateCaptureIds: boolean;
+    consolidationTimeThreshold: number;
     isSimplifyPort: boolean;
     isCombineByAlias: boolean;
     PayloadType: Array<FilterItem>;
@@ -40,11 +43,17 @@ export class TransactionFilterComponent implements OnInit {
     filterSettings: any = {};
 
     isSimplify = true;
+    hasFingerprints = false;
+    isConsolidateCaptureIds = false;
+    consolidationTimeThreshold = 500;
     isSimplifyPort = true;
     isCombineByAlias = false;
     IdFromCallID;
     isFilterOpened = false;
 
+    hasFingerprints$ = new BehaviorSubject<boolean>(false);
+    consolidationFilterSubscription: Subscription;
+
     checkboxListFilterPayloadType = [];
     checkboxListFilterPort = [];
     checkboxListFilterCallId = [];
@@ -139,6 +148,7 @@ export class TransactionFilterComponent implements OnInit {
                 };
             });
         console.log('checkboxListFilterPayloadType', this.checkboxListFilterPayloadType);
+
         /**
          * Call-ID
          */
@@ -157,6 +167,8 @@ export class TransactionFilterComponent implements OnInit {
         this.flowFilters = {
             channel: this.channel,
             isSimplify: this.isSimplify,
+            isConsolidateCaptureIds: this.isConsolidateCaptureIds,
+            consolidationTimeThreshold: this.consolidationTimeThreshold,
             isSimplifyPort: !this._isSingleIP ? this.isSimplifyPort : false,
             isCombineByAlias: !this._isSingleIP ? this.isCombineByAlias : false,
             PayloadType: this.checkboxListFilterPayloadType,
@@ -179,22 +191,50 @@ export class TransactionFilterComponent implements OnInit {
         private cdr: ChangeDetectorRef,
         private _pas: PreferenceAdvancedService,
         private transactionFilterService: TransactionFilterService,
-        private alertService: AlertService
+        private alertService: AlertService,
+        private consolidationService: CallCaptureIdConsolidationService
     ) { }
+
     async ngOnInit() {
         const advanced = await lastValueFrom(this._pas.getAll());
         const filterSettings = advanced?.data?.find(i =>
             i.category == 'transaction' &&
             i.param == "filter"
         )?.data;
 
+        this.checkFingerprints();
+
+        // Initialize the consolidation state from the service
+        this.consolidationFilterSubscription = this.consolidationService.consolidationFilter$.subscribe(value => {
+            this.isConsolidateCaptureIds = value.isConsolidateCaptureIds;
+            this.consolidationTimeThreshold = value.consolidationTimeThreshold;
+            this.cdr.detectChanges();
+        });
+
         this.isAdvancedDefaultFilter = !!filterSettings;
         this.filterSettings = filterSettings;
         console.log({
             filterSettings
 
         });
     }
+
+    ngOnDestory() {
+        if (this.consolidationFilterSubscription) {
+            this.consolidationFilterSubscription.unsubscribe();
+        }
+    }
+
+    private checkFingerprints(): void {
+        setTimeout(() => {
+            const hasFingerprint = this.dataItem.data.messages.some(
+                (i) => i.messageData.item?.fingerprint !== undefined
+            );
+            console.log("fingerprints:", hasFingerprint);
+            this.hasFingerprints$.next(hasFingerprint);
+        }, 0);
+    }
+
     doFilterMessages(type: string = null) {
         setTimeout(() => {
             if (this.combineType === '1none') {
@@ -258,6 +298,8 @@ export class TransactionFilterComponent implements OnInit {
             this.flowFilters = {
                 channel: this.channel,
                 isSimplify: this.isSimplify,
+                isConsolidateCaptureIds: this.isConsolidateCaptureIds,
+                consolidationTimeThreshold: this.consolidationTimeThreshold,
                 isSimplifyPort: this.isSimplifyPort,
                 isCombineByAlias: this.isCombineByAlias,
                 PayloadType: this.checkboxListFilterPayloadType,
@@ -269,18 +311,27 @@ export class TransactionFilterComponent implements OnInit {
                 this.saveFiltersToLocalStorage();
             }
             this.transactionFilterService.setFilter(this.flowFilters);
+            this.consolidationService.setConsolidationFilter({
+                isConsolidateCaptureIds: this.isConsolidateCaptureIds,
+                consolidationTimeThreshold: this.consolidationTimeThreshold
+            });
+
             this.cdr.detectChanges();
         });
     }
     saveFiltersToLocalStorage() {
         setStorage(UserConstValue.LOCAL_FILTER_STATE, {
             isSimplify: this.isSimplify,
+            isConsolidateCaptureIds: this.isConsolidateCaptureIds,
+            consolidationTimeThreshold: this.consolidationTimeThreshold,
             isSimplifyPort: this.isSimplifyPort,
             isCombineByAlias: this.isCombineByAlias,
             combineType: this.combineType,
 
             flowFilters: {
                 isSimplify: this.isSimplify,
+                isConsolidateCaptureIds: this.isConsolidateCaptureIds,
+                consolidationTimeThreshold: this.consolidationTimeThreshold,
                 isSimplifyPort: this.isSimplifyPort,
                 isCombineByAlias: this.isCombineByAlias,
                 // filterIP: this.checkboxListFilterIP,
@@ -332,6 +383,14 @@ export class TransactionFilterComponent implements OnInit {
                     ? localFilterState.combineType
                     : '1none';
                 this.isSimplify = localFilterState.isSimplify;
+
+                this.isConsolidateCaptureIds = localFilterState.isConsolidateCaptureIds;
+                this.consolidationTimeThreshold = localFilterState.consolidationTimeThreshold;
+                this.consolidationService.setConsolidationFilter({
+                    isConsolidateCaptureIds: localFilterState.isConsolidateCaptureIds,
+                    consolidationTimeThreshold: localFilterState.consolidationTimeThreshold
+                });
+
                 this.isSimplifyPort = !this._isSingleIP
                     ? localFilterState.isSimplifyPort
                     : false;
@@ -341,6 +400,10 @@ export class TransactionFilterComponent implements OnInit {
 
                 this.flowFilters = this.flowFilters || {};
                 this.flowFilters.isSimplify = localFilterState.flowFilters.isSimplify;
+                this.flowFilters.isConsolidateCaptureIds =
+                    localFilterState.flowFilters.isConsolidateCaptureIds;
+                this.flowFilters.consolidationTimeThreshold =
+                    localFilterState.flowFilters.consolidationTimeThreshold;
                 this.flowFilters.isSimplifyPort = !this._isSingleIP
                     ? localFilterState.flowFilters.isSimplifyPort
                     : false;

diff --git a/...app/components/search-grid-call/detail-dialog/tab-flow/flow-item/flow-item.component.html b/...app/components/search-grid-call/detail-dialog/tab-flow/flow-item/flow-item.component.html
@@ -1,26 +1,28 @@
-<div class="item-flow-packet-container">
+<ng-template #itemFlowPacket let-item="item" let-idx="idx" >
   <div class="bg-color-polygon"
     [style.background-color]="item.options.color"></div>
   <!-- background-color -->
 
   <div [style.flex]="item.options.start || 0.0000001"></div>
   <!-- left space -->
   <div class="item-flow-packet"
-    (click)="onClickItem(idx, $event)"
+    (click)="onClickItem(item, idx, $event)"
     [style.flex]="item.options.middle || 0.0000001"
     [style.text-align]="item.options.direction ? 'right' : 'left'">
 
     <!-- content -->
     <div class="call_text"
       [style.color]="item.options.color_method || 'initial'">
+      <span *ngIf="item.subItems && item.subItems.length > 0" [style.opacity]="0.6" (click)="toggleSubItems($event)">
+        {{ showSubItems ? '▽' : '▷' }}
+      </span>
       {{ item.method_text }}
       <span *ngIf="item.QOS && item.QOS.MOS"
         class="blinkLamp"
         [style.backgroundColor]="MOSColorGradient(item.QOS.MOS)"></span>
       {{ item.QOS ? (item.QOS.MOS ? (item.QOS.MOS + " [" + item.QOS.qosTYPEless + "]") : 'UA Report') : "" }}
     </div>
 
-
     <div class="call_text-mini"
       [style.height.px]=" !isSimplify ? 15 : 0 ">
       {{ item.description }}
@@ -65,4 +67,12 @@
   <div
     [style.flex]="(item.options.rightEnd - (item.options.isRadialArrow && !item.options.isLastHost ? 1 : 0 )) || 0.0000001">
   </div>
+</ng-template>
+<div class="item-flow-packet-container">
+  <ng-container *ngTemplateOutlet="itemFlowPacket; context: { item: item, idx: idx }"></ng-container>
 </div>
+<div class="item-flow-packet-container" *ngIf="showSubItems && item.subItems && item.subItems.length > 0">
+  <ng-container *ngFor="let subItem of item.subItems; let subIdx = index">
+    <ng-container *ngTemplateOutlet="itemFlowPacket; context: { item: subItem, idx: idx }"></ng-container>
+  </ng-container>
+</div>
diff --git a/src/app/components/search-grid-call/detail-dialog/tab-flow/flow-item/flow-item.component.ts b/src/app/components/search-grid-call/detail-dialog/tab-flow/flow-item/flow-item.component.ts
@@ -9,6 +9,8 @@ import {
   ChangeDetectorRef,
 } from '@angular/core';
 import { Functions } from '@app/helpers/functions';
+import { Subscription } from 'rxjs';
+import { CallCaptureIdConsolidationService } from '@app/services/call/consolidation.service';
 
 @Component({
   selector: 'app-flow-item',
@@ -18,8 +20,14 @@ import { Functions } from '@app/helpers/functions';
 })
 export class FlowItemComponent implements AfterViewChecked {
   _item: any = {};
+  showSubItems: boolean = false;
+
+  consolidationFilterSubscription: Subscription;
+  expandedItemSubscription: Subscription;
+
   @Input() set item(val: any) {
     this._item = val;
+    this.mergeOptions();
   }
   get item(): any {
     return this._item;
@@ -28,18 +36,52 @@ export class FlowItemComponent implements AfterViewChecked {
   @Input() isGroupByAlias = false;
   @Input() idx = 0;
   @Input() isAbsolute: boolean = false;
-  @Output() itemClick: EventEmitter<any> = new EventEmitter();
+  @Output() itemClick: EventEmitter<{ idx: number, event: any, item: any }> = new EventEmitter();
+
+  constructor(
+    private cdr: ChangeDetectorRef, 
+    private consolidationService: CallCaptureIdConsolidationService) {}
+
+  ngOnInit() {
+    this.expandedItemSubscription = this.consolidationService.expandedItem$.subscribe(expandedIdx => {
+      if (expandedIdx !== this.idx && this.showSubItems) {
+        this.showSubItems = false;
+        this.cdr.detectChanges();
+      }
+    });
+  }
 
-  constructor(private cdr: ChangeDetectorRef) { }
+  ngOnDestory() {
+    if (this.consolidationFilterSubscription) this.consolidationFilterSubscription.unsubscribe();
+    if (this.expandedItemSubscription) this.expandedItemSubscription.unsubscribe();
+  }
+
+  onClickItem(item, idx, event) {
+    this.itemClick.emit({ idx, event, item });
+  }
 
-  onClickItem(idx, event) {
-    this.itemClick.emit({ idx, event });
+  toggleSubItems(event: Event) {
+    event.stopPropagation(); // Prevent triggering the onClickItem event
+    this.showSubItems = !this.showSubItems;
+    if (this.showSubItems) {
+      this.consolidationService.setExpandedItem(this.idx);
+    }    
   }
 
   MOSColorGradient(hue) {
     return Functions.MOSColorGradient(hue * 100, 80, 50);
   }
 
+  private mergeOptions() {
+    if (this._item && this._item.subItems) {
+      this._item.subItems = this._item.subItems.map((subItem, iter) => ({
+        ...subItem,
+        options: this._item.options,
+        __item__subindex__: iter
+      }));
+    }
+  }
+
   ngAfterViewChecked() {
     this.cdr.detectChanges();
   }

diff --git a/src/app/components/search-grid-call/detail-dialog/tab-flow/tab-flow.component.html b/src/app/components/search-grid-call/detail-dialog/tab-flow/tab-flow.component.html
@@ -154,7 +154,7 @@ <h1 style="text-align: center; padding: 8rem; color: #aaa">
                 [isGroupByAlias]="_isCombineByAlias"
                 [isSimplify]="isSimplify"
                 [isAbsolute]="false"
-                (itemClick)="onClickMessage($event.idx, $event.event, item)"
+                (itemClick)="onClickMessage($event.idx, $event.event, $event.item)"
             ></app-flow-item>
             <div style="height: 60px"></div>
         </div>
@@ -189,7 +189,7 @@ <h1 style="text-align: center; padding: 8rem; color: #aaa">
             [isGroupByAlias]="_isCombineByAlias"
             [isSimplify]="isSimplify"
             [isAbsolute]="false"
-            (itemClick)="onClickMessage($event.idx, $event.event, item)"
+            (itemClick)="onClickMessage($event.idx, $event.event, $event.item)"
           >
           </app-flow-item>
         </ng-template>