From e29521bbac361acd643b4ffbd1b9100c4a28c18f Mon Sep 17 00:00:00 2001
From: Eduard Klimenko <edik.klimenko@gmail.com>
Date: Fri, 10 May 2024 16:35:23 +0300
Subject: [PATCH] fix: HEP-LOG parser on FLOW dialog-details

---
 .../tab-flow/tab-flow.component.ts            |   8 +-
 .../message-content.component.html            |   4 +-
 .../message-content.component.ts              | 364 +++++++++---------
 3 files changed, 192 insertions(+), 184 deletions(-)

diff --git a/src/app/components/search-grid-call/detail-dialog/tab-flow/tab-flow.component.ts b/src/app/components/search-grid-call/detail-dialog/tab-flow/tab-flow.component.ts
index 4fd1bcd6..63b953f8 100644
--- a/src/app/components/search-grid-call/detail-dialog/tab-flow/tab-flow.component.ts
+++ b/src/app/components/search-grid-call/detail-dialog/tab-flow/tab-flow.component.ts
@@ -557,9 +557,11 @@ export class TabFlowComponent
           item.description,
           Object.assign({}, item.source_data),
         ];
-        row.raw_source =
-          item.source_data?.item?.message ||
-          `${item.info_date} ${item.description} ${SDPbuffer}`;
+        if (!row.raw_source) {
+          row.raw_source =
+            item.source_data?.item?.message ||
+            `${item.info_date} ${item.description} ${SDPbuffer}`;
+        }
         row.id = `(${item.typeItem}) ${item.description}`;
 
         break;
diff --git a/src/app/components/search-grid-call/message-content/message-content.component.html b/src/app/components/search-grid-call/message-content/message-content.component.html
index c38b3ff5..70e5c5aa 100644
--- a/src/app/components/search-grid-call/message-content/message-content.component.html
+++ b/src/app/components/search-grid-call/message-content/message-content.component.html
@@ -2,13 +2,13 @@
 </app-webshark>
 <ng-template #baseContainer>
   <mat-tab-group class="message-container" #matTabGroup (selectedTabChange)="onSelectedTab()">
-    <mat-tab label="Message" *ngIf="raw" style="padding: 1rem;">
+    <mat-tab label="Message" *ngIf="raw || raw_hep_log" style="padding: 1rem;">
 
       <div class="time-label">{{ timeLabel }}</div>
       <ngx-json-viewer *ngIf="raw_isJSON" [json]="raw" [expanded]="true"></ngx-json-viewer>
 
       <div [innerHTML]="raw | safeHtml" class="raw-json" *ngIf="!raw_isJSON && type !== 'LOG'"></div>
-      <pre *ngIf="!raw_isJSON && type === 'LOG'" class="raw-json">{{raw}}</pre>
+      <pre *ngIf="!raw_isJSON && type === 'LOG'" class="raw-json">{{raw_hep_log}}</pre>
     </mat-tab>
 
     <mat-tab label="SIP" *ngIf="pt?.sip" class="parsed-data">
diff --git a/src/app/components/search-grid-call/message-content/message-content.component.ts b/src/app/components/search-grid-call/message-content/message-content.component.ts
index 84d9327e..ea505c7f 100644
--- a/src/app/components/search-grid-call/message-content/message-content.component.ts
+++ b/src/app/components/search-grid-call/message-content/message-content.component.ts
@@ -12,201 +12,207 @@ import { DateFormat, TimeFormattingService } from '@app/services/time-formatting
 const parsip = _parsip;
 // const moment = _moment;
 @Component({
-    selector: 'app-message-content',
-    templateUrl: './message-content.component.html',
-    styleUrls: ['./message-content.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-message-content',
+  templateUrl: './message-content.component.html',
+  styleUrls: ['./message-content.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MessageContentComponent implements OnInit, OnDestroy, AfterViewInit, AfterContentInit {
-    _data: any;
-    dateFormat: DateFormat;
-    timeLabel: string;
-    raw;
-    type;
-    raw_isJSON = false;
-    labelList = {};
-    private _interval: any;
-    _pt: any;
-    tableObj = {};
-    get data() {
-        return this._data;
+  _data: any;
+  dateFormat: DateFormat;
+  timeLabel: string;
+  raw;
+  raw_hep_log;
+  type;
+  raw_isJSON = false;
+  labelList = {};
+  private _interval: any;
+  _pt: any;
+  tableObj = {};
+  get data() {
+    return this._data;
+  }
+  get pt(): any {
+    return this._pt;
+  }
+  set pt(v: any) {
+    this._pt = v;
+  }
+
+
+  @ViewChild('matTabGroup', { static: false }) matTabGroup: MatTabGroup;
+  @Input() rowData: any;
+  @Input() set isDecoded(val: boolean) {
+    this.cdr.detectChanges()
+  }
+  @Input('data') set data(val) {
+    this._data = Functions.cloneObject(val);
+    // console.log('this._data', this._data);
+    if (val.frame_protocol) {
+      // is web-shark
+
+      return;
     }
-    get pt(): any {
-        return this._pt;
-    }
-    set pt(v: any) {
-        this._pt = v;
-    }
-
 
-    @ViewChild('matTabGroup', { static: false }) matTabGroup: MatTabGroup;
-    @Input() rowData: any;
-    @Input() set isDecoded(val: boolean) {
-        this.cdr.detectChanges()
+    if (val.typeItem === 'HEP-LOG') {
+      this.type = 'LOG'
+    } else {
+      this.type = val.type || '';
     }
-    @Input('data') set data(val) {
-        this._data = val;
-        // console.log('this._data', this._data);
-        if (val.frame_protocol) {
-            // is web-shark
-
-            return;
-        }
 
+    console.log('val', val);
+    console.log('this.type', val.typeItem, this.type);
+    /** parse tabs */
+    try {
+      if (this._data?.raw_source) {
+        this.pt = {};
+
+        /** parse SIP */
+        this.pt.sip = _parsip.getSIP(this._data.raw_source);
+        const sipData: any = { ...this.pt.sip };
+        if ((sipData?.headers?.['Content-Type']?.[0]?.raw)?.toLowerCase() === 'application/sdp'
+          && sipData?.body) {
+          /**parse SDP  */
+          this.pt.sdp = parsip.getSDP(sipData?.body);
+
+        } if ((sipData?.headers?.['Content-Type']?.[0]?.raw)?.toLowerCase() === 'application/vq-rtcpxr') {
+          /**parse vq */
+          this.pt.vqr = parsip.getVQ(sipData?.body);
+        } if (sipData?.headers?.['X-Rtp-Stat']?.[0]?.raw ||
+          sipData?.headers?.[('X-Rtp-Stat').toLocaleLowerCase()]?.[0]?.raw) {
+          /** parse x-rtp */
+          this.pt.xrtp = parsip.getVQ(sipData?.headers['X-Rtp-Stat' || 'x-rtp-stat'][0].raw);
+
+        } if (sipData?.headers?.Identity?.[0]?.raw) {
+          /** parse jwt */
+          this.pt.jwt = jwt_decode(sipData?.headers?.Identity[0].raw);
 
-        this.type = val.type || val.typeItem === 'HEP-LOG' && 'LOG'  || '';
-        console.log('val', val);
-        console.log('this.type', val.typeItem, this.type);
-        /** parse tabs */
-        try {
-            if (this._data?.raw_source) {
-                this.pt = {};
-
-                /** parse SIP */
-                this.pt.sip = _parsip.getSIP(this._data.raw_source);
-                const sipData: any = { ...this.pt.sip };
-                if ((sipData?.headers?.['Content-Type']?.[0]?.raw)?.toLowerCase() === 'application/sdp'
-                    && sipData?.body) {
-                    /**parse SDP  */
-                    this.pt.sdp = parsip.getSDP(sipData?.body);
-
-                } if ((sipData?.headers?.['Content-Type']?.[0]?.raw)?.toLowerCase() === 'application/vq-rtcpxr') {
-                    /**parse vq */
-                    this.pt.vqr = parsip.getVQ(sipData?.body);
-                } if (sipData?.headers?.['X-Rtp-Stat']?.[0]?.raw ||
-                    sipData?.headers?.[('X-Rtp-Stat').toLocaleLowerCase()]?.[0]?.raw) {
-                    /** parse x-rtp */
-                    this.pt.xrtp = parsip.getVQ(sipData?.headers['X-Rtp-Stat' || 'x-rtp-stat'][0].raw);
-
-                } if (sipData?.headers?.Identity?.[0]?.raw) {
-                    /** parse jwt */
-                    this.pt.jwt = jwt_decode(sipData?.headers?.Identity[0].raw);
-
-                }
-            }
-
-        } catch (e) {
-            console.log(e);
-        }
-        this.messageDetailTableData = this._data.messageDetailTableData;
-        this.tableObj = this.messageDetailTableData?.reduce((p, a) => {
-            return ({ ...p, [a.name]: a.value });
-        }, {});
-
-        try {
-            const { create_ts, srcId, dstId, srcIp, srcPort, dstIp, dstPort } = this._data;
-            this._tfs.getFormat().then((res: DateFormat) => {
-                this.dateFormat = res;
-                if (srcId && dstId) {
-                    this.timeLabel = `${moment(create_ts).format(this.dateFormat.dateTimeMsZ)}: ${srcId} -> ${dstId}`;
-                } else if(srcIp && srcPort && dstIp && dstPort) {
-                    this.timeLabel = `${moment(create_ts).format(this.dateFormat.dateTimeMsZ)}: ${srcIp}:${srcPort} -> ${dstIp}:${dstPort}`;
-                } else {
-                    if (this._data?.id?.replace) {
-                        this.timeLabel = this._data?.id?.replace(/\(.*\]\s?/g, '');
-                    }
-                }
-            });
-        } catch (e) { }
-        if (val.typeItem==='HEP-LOG') {
-          this.type='LOG';
-          this.raw_isJSON=false;
-          this.raw=val.raw[2].raw_source;
-          this.cdr.detectChanges();
-          return;
         }
-        this.raw = this._data.item.raw;
-
-        if (this._data.tabType === 'UAReport') {
-            // the parcing for RTP User Agent packets
-            try {
-                if (!this.raw.match(';')) {
-                    this.raw = this.raw.split(',').reduce((a, b) => {
-                        const [k, v] = b.split('=');
-                        a[k] = v;
-                        return a;
-                    }, {});
-                } else {
-                    this.raw = this.raw.split(';').reduce((a, b) => {
-                        const [key, v] = b.split('=');
-                        a[key] = v.match(',') ? v.split(',') : v;
-                        return a;
-                    }, {});
-                }
-            } catch (_) { }
-        }
-
-        if (typeof this.raw === 'string') {
-            this.raw = Functions.JSON_parse(this.raw) || Functions.JSON_parse(this._data.raw_source) || this.raw;
-        }
-        this.raw_isJSON = typeof this.raw !== 'string';
+      }
 
-        // console.log('this.raw, this.raw_isJSON', this.raw, this.raw_isJSON, JSON.parse(this.raw));
-        this.cdr.detectChanges();
+    } catch (e) {
+      console.log(e);
     }
-
-    messageDetailTableData: any;
-
-    constructor(
-        private cdr: ChangeDetectorRef,
-        private _tfs: TimeFormattingService,
-        public alertService: AlertService,
-        public translateService: TranslateService
-
-    ) { }
-
-    identify(index, item) {
-        return item.name;
-    }
-    isParsedData(item) {
-        return this.pt.hasOwnProperty(item);
-    }
-    isObject(item) {
-        return typeof item === 'object';
+    this.messageDetailTableData = this._data.messageDetailTableData;
+    this.tableObj = this.messageDetailTableData?.reduce((p, a) => {
+      return ({ ...p, [a.name]: a.value });
+    }, {});
+
+    try {
+      const { create_ts, srcId, dstId, srcIp, srcPort, dstIp, dstPort } = this._data;
+      this._tfs.getFormat().then((res: DateFormat) => {
+        this.dateFormat = res;
+        if (srcId && dstId) {
+          this.timeLabel = `${moment(create_ts).format(this.dateFormat.dateTimeMsZ)}: ${srcId} -> ${dstId}`;
+        } else if (srcIp && srcPort && dstIp && dstPort) {
+          this.timeLabel = `${moment(create_ts).format(this.dateFormat.dateTimeMsZ)}: ${srcIp}:${srcPort} -> ${dstIp}:${dstPort}`;
+        } else {
+          if (this._data?.id?.replace) {
+            this.timeLabel = this._data?.id?.replace(/\(.*\]\s?/g, '');
+          }
+        }
+      });
+    } catch (e) { }
+    if (val.typeItem === 'HEP-LOG') {
+      this.type = 'LOG';
+      this.raw_isJSON = false;
+      this.raw_hep_log = val.raw[2].raw_source;
+      this.cdr.detectChanges();
+      return;
+    } else {
+      this.raw = this._data.item.raw;
     }
-    ngOnInit() {
-        this._interval = setInterval(() => {
-            this.matTabGroup?.realignInkBar();
-        }, 2000);
 
-    }
-    ngAfterViewInit() {
-        this.matTabGroup?.realignInkBar();
-        this.cdr.detectChanges();
-    }
-    ngAfterContentInit() {
-        this.matTabGroup?.realignInkBar();
-        this.cdr.detectChanges();
-    }
-    ngOnDestroy() {
-        if (this._interval) {
-            clearInterval(this._interval);
+    if (this._data.tabType === 'UAReport') {
+      // the parcing for RTP User Agent packets
+      try {
+        if (!this.raw.match(';')) {
+          this.raw = this.raw.split(',').reduce((a, b) => {
+            const [k, v] = b.split('=');
+            a[k] = v;
+            return a;
+          }, {});
+        } else {
+          this.raw = this.raw.split(';').reduce((a, b) => {
+            const [key, v] = b.split('=');
+            a[key] = v.match(',') ? v.split(',') : v;
+            return a;
+          }, {});
         }
+      } catch (_) { }
     }
 
-    onSelectedTab() {
-        const tabs = this.matTabGroup._tabs['_results'].reduce((a, b) => {
-            return { ...a, [b.isActive]: b.textLabel };
-        }, {});
-        const actualTab = tabs['true'];
-        const rawAsJSON = this.data.raw_source && Functions.JSON_parse(this.data.raw_source) || this.data.raw_source;
-        // console.log('rawAsJSON', rawAsJSON);
-        const tabsInfo = {
-            Message: typeof this.data.raw_source !== 'undefined' ? this.data.raw_source : this.objString(this.data.raw),
-            SIP: this.objString(this.pt?.sip),
-            SDP: this.objString(this.pt?.sdp),
-            Decoded: this.objString(this._data.decoded),
-            Details: this.objString(this.tableObj),
-            XRTP: this.objString(this.pt?.xrtp),
-            JWT: this.objString(this.pt?.jwt),
-            VQR: this.objString(this.pt?.vqr),
-
-        };
-
-
+    if (typeof this.raw === 'string') {
+      this.raw = Functions.JSON_parse(this.raw) || Functions.JSON_parse(this._data.raw_source) || this.raw;
     }
-    objString(s) {
-        return JSON.stringify(s, null, 4);
+    this.raw_isJSON = typeof this.raw !== 'string';
+
+    // console.log('this.raw, this.raw_isJSON', this.raw, this.raw_isJSON, JSON.parse(this.raw));
+    this.cdr.detectChanges();
+  }
+
+  messageDetailTableData: any;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private _tfs: TimeFormattingService,
+    public alertService: AlertService,
+    public translateService: TranslateService
+
+  ) { }
+
+  identify(index, item) {
+    return item.name;
+  }
+  isParsedData(item) {
+    return this.pt.hasOwnProperty(item);
+  }
+  isObject(item) {
+    return typeof item === 'object';
+  }
+  ngOnInit() {
+    this._interval = setInterval(() => {
+      this.matTabGroup?.realignInkBar();
+    }, 2000);
+
+  }
+  ngAfterViewInit() {
+    this.matTabGroup?.realignInkBar();
+    this.cdr.detectChanges();
+  }
+  ngAfterContentInit() {
+    this.matTabGroup?.realignInkBar();
+    this.cdr.detectChanges();
+  }
+  ngOnDestroy() {
+    if (this._interval) {
+      clearInterval(this._interval);
     }
+  }
+
+  onSelectedTab() {
+    const tabs = this.matTabGroup._tabs['_results'].reduce((a, b) => {
+      return { ...a, [b.isActive]: b.textLabel };
+    }, {});
+    const actualTab = tabs['true'];
+    const rawAsJSON = this.data.raw_source && Functions.JSON_parse(this.data.raw_source) || this.data.raw_source;
+    // console.log('rawAsJSON', rawAsJSON);
+    const tabsInfo = {
+      Message: typeof this.data.raw_source !== 'undefined' ? this.data.raw_source : this.objString(this.data.raw),
+      SIP: this.objString(this.pt?.sip),
+      SDP: this.objString(this.pt?.sdp),
+      Decoded: this.objString(this._data.decoded),
+      Details: this.objString(this.tableObj),
+      XRTP: this.objString(this.pt?.xrtp),
+      JWT: this.objString(this.pt?.jwt),
+      VQR: this.objString(this.pt?.vqr),
+
+    };
+
+
+  }
+  objString(s) {
+    return JSON.stringify(s, null, 4);
+  }
 
 }