Merge pull request #295 from sipcapture/devel

Devel
sipcapture · Jul 2, 2020 · eabb719 · eabb719
2 parents 12347e0 + 49391a4
commit eabb719
Show file tree

Hide file tree

Showing 16 changed files with 180 additions and 69 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -2,6 +2,6 @@ FROM node:12-alpine
 
 RUN apk add git && git clone https://github.com/sipcapture/homer-ui /app
 WORKDIR /app
-RUN npm install && npm install -g @angular/cli
+RUN npm install && npm install -g @angular/cli@8.3.14
 CMD ["ng","build"]
 
diff --git a/angular.json b/angular.json
@@ -23,7 +23,9 @@
             },
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              { "glob": "worker-javascript.js", "input": "./d /ace-builds/src-min/", "output": "/" },
+              { "glob": "worker-json.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" }
             ],
             "styles": [
               "src/styles.scss"
@@ -37,7 +39,9 @@
               "node_modules/ace-builds/src-min/mode-javascript.js",
               "node_modules/ace-builds/src-min/worker-html.js",
               "node_modules/ace-builds/src-min/worker-css.js",
-              "node_modules/ace-builds/src-min/worker-javascript.js"
+              "node_modules/ace-builds/src-min/worker-javascript.js",
+              "node_modules/ace-builds/src-min/mode-json.js",
+              "node_modules/ace-builds/src-min/worker-json.js"
             ]
           },
           "configurations": {
@@ -184,11 +188,15 @@
               "node_modules/ace-builds/src-min/mode-javascript.js",
               "node_modules/ace-builds/src-min/worker-html.js",
               "node_modules/ace-builds/src-min/worker-css.js",
-              "node_modules/ace-builds/src-min/worker-javascript.js"
+              "node_modules/ace-builds/src-min/worker-javascript.js",
+              "node_modules/ace-builds/src-min/mode-json.js",
+              "node_modules/ace-builds/src-min/worker-json.js"
             ],
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              { "glob": "worker-javascript.js", "input": "./d /ace-builds/src-min/", "output": "/" },
+              { "glob": "worker-json.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" }
             ]
           }
         },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "homer-ui",
-  "version": "7.7.0",
+  "version": "7.8.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 80",

diff --git a/src/VERSION.ts b/src/VERSION.ts
@@ -1 +1 @@
-export const VERSION = '7.8.0';
+export const VERSION = '7.8.1';
diff --git a/src/app/components/preference/dialogs/dialog-advanced/dialog-advanced.component.html b/src/app/components/preference/dialogs/dialog-advanced/dialog-advanced.component.html
@@ -21,7 +21,7 @@
   </div>
   <strong>Data</strong><hr />
   <ace-editor
-      [mode]="'json'"
+      [mode]="mode"
       [theme]="'eclipse'"
       [readOnly]="false"
       [(text)]="data.data.data"

diff --git a/src/app/components/preference/dialogs/dialog-advanced/dialog-advanced.component.ts b/src/app/components/preference/dialogs/dialog-advanced/dialog-advanced.component.ts
@@ -1,25 +1,25 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-dialog-advanced',
   templateUrl: './dialog-advanced.component.html',
   styleUrls: ['./dialog-advanced.component.scss']
 })
-export class DialogAdvancedComponent {
-
+export class DialogAdvancedComponent implements OnInit {
+  mode: any;
   constructor(
     public dialogRef: MatDialogRef<DialogAdvancedComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any) {
       if ( data.isnew ) {
         data.data = {
-          partid: 10,
-          category: '',
-          param: '',
-          data: {},
-        }
+            partid: 10,
+            category: '',
+            param: '',
+            data: {},
+        };
       }
-      data.data.data = data.isnew ? 
+      data.data.data = data.isnew ?
             '' :
             (typeof data.data.data === 'string' ?
                 data.data.data :
@@ -30,5 +30,12 @@ export class DialogAdvancedComponent {
   onNoClick(): void {
       this.dialogRef.close();
   }
+  ngOnInit() {
+    if (this.data.data.category === 'scripts') {
+        this.mode = 'javascript';
+    } else {
+        this.mode = 'json';
+    }
+  }
 
-}
+}
diff --git a/src/app/components/search-grid-call/detail-dialog/detail-dialog.component.html b/src/app/components/search-grid-call/detail-dialog/detail-dialog.component.html
@@ -17,32 +17,20 @@
     [ngStyle]="{'display': (activeTab <= 1) ? 'block' : 'none'}"
   ><mat-icon>filter_list</mat-icon></button>
   <!-- filter -->
-  <div *ngIf="activeTab <= 1 && isFilterOpened"
+  <div *ngIf="activeTab <= 1 && isFilterOpened" style="height: calc(100% - 75px);overflow-x: auto;"
     class="button-icon-right-top filter-container"
     #filterContainer>
     <mat-slide-toggle style="width: 200px;font-size: .8em;" color="warn" [(ngModel)]="isSimplify">
       Extended Format
     </mat-slide-toggle>
     <br *ngIf="activeTab !== 0">
 
-    <mat-slide-toggle
-    *ngIf="activeTab !== 0"
-      style="width: 200px;font-size: .8em;" color="warn"
-      [(ngModel)]="isCombineByAlias"
-      (click)="doFilterMessages()">
-      Combined by Alias
-    </mat-slide-toggle>
-
-    <br *ngIf="activeTab !== 0">
+    <mat-radio-group *ngIf="activeTab !== 0" [(ngModel)]='combineType'  class="filter-radio-group" (change)='doFilterMessages()'>
+      <mat-radio-button color="warn" class="filter-radio-button" *ngFor="let type of listCombineTypes | keyvalue" [value]="type.key">
+        {{type.value}}
+      </mat-radio-button>
+    </mat-radio-group>
 
-    <mat-slide-toggle
-    *ngIf="activeTab !== 0"
-      style="width: 200px;font-size: .8em;" color="warn"
-      [(ngModel)]="isSimplifyPort"
-      (click)="doFilterMessages()">
-      Show Ports
-    </mat-slide-toggle>
-    <hr/>
     <div class="filter-label">PayloadType:</div>
     <mat-checkbox color="warn" style="font-size: .8em;"
       *ngFor="let checkboxItem of checkboxListFilterPayloadType"
@@ -51,7 +39,7 @@
       [(ngModel)]="checkboxItem.selected"
     >{{ checkboxItem.title }}</mat-checkbox>
 
-    <!-- <hr/>
+    <!-- 
     <div class="filter-label">Ports:</div>
     <div style="display: flex; flex-flow: row wrap; width: 250px;">
       <mat-checkbox color="warn" style="font-size: .8em;"
@@ -61,10 +49,8 @@
         [(ngModel)]="checkboxItem.selected"
       >{{ checkboxItem.title }}</mat-checkbox>
     </div> -->
-
-    <hr/>
     <div class="filter-label">CallId:</div>
-    <div style="display: flex; flex-direction: column;">
+    <div style="display: flex; flex-direction: column; ">
       <mat-checkbox color="warn" style="font-size: .8em;"
         *ngFor="let checkboxItem of checkboxListFilterCallId"
         class="example-margin"

diff --git a/src/app/components/search-grid-call/detail-dialog/detail-dialog.component.scss b/src/app/components/search-grid-call/detail-dialog/detail-dialog.component.scss
@@ -31,6 +31,18 @@
 	color: rgba(0,0,0,0.8);
 	background-color: rgba(0,0,0,0.2);
 	margin: -1rem;
+	margin-top: 1rem;
 	margin-bottom: 1rem;
 	padding: 0.5rem;
 }
+.filter-radio-group {
+	display: flex;
+	flex-direction: column;
+	margin: 15px 0;
+	.filter-radio-button {
+		margin: 5px;
+		font-size: .8em
+  	}
+}
+
+
diff --git a/src/app/components/search-grid-call/detail-dialog/detail-dialog.component.ts b/src/app/components/search-grid-call/detail-dialog/detail-dialog.component.ts
@@ -34,6 +34,12 @@ export class DetailDialogComponent implements OnInit {
     activeTab = 0;
     isFilterOpened = false;
     isFilterOpenedOutside = false;
+    combineType = '1none';
+    listCombineTypes = {
+        '1none': 'Ungrouped',
+        '2alias': 'Group by Alias',
+        '3port': 'Group Ports'
+    };
     tabs = {
         messages: false,
         flow: false,
@@ -199,6 +205,16 @@ export class DetailDialogComponent implements OnInit {
         });
     }
     doFilterMessages() {
+        if (this.combineType === '1none') {
+            this.isCombineByAlias = false;
+            this.isSimplifyPort   = false;
+        } else if (this.combineType === '2alias') {
+            this.isCombineByAlias = true;
+            this.isSimplifyPort   = true;
+        } else if (this.combineType === '3port') {
+            this.isCombineByAlias = false;
+            this.isSimplifyPort   = true;
+        }
         setTimeout(() => {
             const fc = Functions.cloneObject;
             this.sipDataItem.data.messages = fc(this._messagesBuffer).messages.filter(i => {

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
@@ -8,26 +8,36 @@
     <div class="hosts" [ngStyle]="{'min-width.px': (isSimplify ? 150 : 200) * (flowGridLines.length)}">
         <!-- host titles -->
         <ng-template ngFor let-itemhost [ngForOf]="aliasTitle">
+
             <div *ngIf="itemhost.empty" style="min-width: 100px;"></div>
             <div *ngIf="!itemhost.empty && itemhost && !itemhost.hidden"
+            matTooltipClass="iptooltip"
             [matTooltip]="_isCombineByAlias ? 
                 pipeToString(itemhost) :
-                itemhost.IP + (itemhost.PORT ? ':' + itemhost.PORT : '')"
+                itemhost.IP + (itemhost.PORT ? ':' + itemhost.PORT : '') + ' ( click to copy )'"
+                (click)="openSnackBar(_isCombineByAlias ? 
+                pipeToString(itemhost) :
+                itemhost.IP + (itemhost.PORT ? ':' + itemhost.PORT : ''))"
+
             [ngClass]="'item-wrapper' + (isSimplify ? ' big' : '')"> <!-- wrapper -->
-                <div class="item"> <!-- container -->
-                    <div style="font-size: 0.9em;color: #999">{{(!_isSimplifyPort ? 'PORT:' + itemhost.PORT : '')}}</div>
-                    <div *ngIf="!itemhost.arrip"> {{ itemhost.shortIPtext2 }} </div>
-                    <div *ngIf="itemhost.arrip"> 
-                        <div *ngFor="let ip of itemhost.arrip"
-                        style="text-align: center;">{{ shortcutIPv6String(ip) }}</div>
-                    </div>
+
+                <div class="item" style="user-select:text; cursor:pointer"> <!-- container -->
                     <div
                     *ngIf="itemhost.alias !== itemhost.ip && itemhost.alias !== itemhost.IP && itemhost.alias !== ''"
                     style="text-align: center; font-size: 14px;"> {{
                         itemhost.alias === itemhost.ip || itemhost.alias === '' ?
                             itemhost.shortIPtext2 :
                             itemhost.alias
                     }} </div>
+                   <!-- <div style="font-size: 0.9em;color: #999">{{(_isSimplifyPort ? 'PORT:' + itemhost.PORT : '')}}</div> -->
+                    <div *ngIf="!itemhost.arrip"> {{ itemhost.shortIPtext2 }} </div>
+                    <div *ngIf="itemhost.arrip"> 
+                        <div *ngFor="let ip of itemhost.arrip"
+                        id="{{ shortcutIPv6String(ip) }}"
+
+                        style="text-align: center;">{{ shortcutIPv6String(ip) }}</div>
+                    </div>
+
                 </div>
             </div>
         </ng-template>
@@ -39,10 +49,10 @@
         *ngFor="let item of arrayItems; let idx = index"
         [ngStyle]="{
             'min-width.px': (isSimplify ? 150 : 200) * (flowGridLines.length),
-            'display': item.invisibleDisplayNone ? 'none' : 'flex',
-            'overflow': item.invisibleDisplayNone ? 'hidden' : 'inherit',
-            'max-height.px': !item.invisible ? 100 : 0,
-            'opacity': !item.invisible ? 1 : 0.0001
+            'display': 'flex',
+            'overflow': 'inherit',
+            'max-height.px': 100,
+            'opacity':  1 
         }">
             <div class="bg-color-polygon" [ngStyle]="{'background-color': item.options.color }" ></div> <!-- background-color -->
 
@@ -58,7 +68,7 @@
                 }} <span *ngIf="item.QOS" [ngClass]="item.options.mosColor"></span> {{
                     item.QOS ? item.QOS.MOS + ' [' + item.QOS.qosTYPEless + ']' : ''
                 }} </div>
-                <div class="call_text-mini" [ngStyle]="{'height.px': !isSimplify ? 15 : 0}">{{item.ruri_user}}</div>
+                <div class="call_text-mini" [ngStyle]="{'height.px': !isSimplify ? 15 : 0,'max-width.px':isSimplify ? 150 : 200}">{{ item.ruri_user }}</div>
                 <div [ngClass]="'port-label-' + (!item.options.direction ? 'left' : 'right')">{{ item.srcPort }}</div>
                 <!-- ARROW line -->
                 <div
@@ -76,8 +86,14 @@
                 <div [ngClass]="'port-label-' + (item.options.direction ? 'left' : 'right')"
                     [ngStyle]="item.options.isRedialArrow && {'left.px' : -47 }"
                 >{{ item.dstPort }}</div>
-                <div class="call-text-date" [ngStyle]="{'maxHeight.px': !isSimplify ? 50 : 0}">[{{ idx + 1 }}][{{ item.proto | uppercase }}] {{ item.micro_ts }}</div>
-                <div class="call-text-date">+ {{ item.diffTs }} s</div>
+                <span *ngIf='!item.options.isRedialArrow; else elseBlock'>
+                    <div class="call-text-date" [ngStyle]="{'maxHeight.px': !isSimplify ? 50 : 0}">[{{ idx + 1 }}][{{ item.proto | uppercase }}] {{ item.micro_ts }}</div>
+                    <div class="call-text-date">+ {{ item.diffTs }} s</div> 
+                </span>
+                <ng-template #elseBlock>
+                    <div class="call-text-date" [ngStyle]="{'maxHeight.px': (!isSimplify ? 50 : 0)}">[{{ idx + 1 }}][{{ item.proto | uppercase }}] {{ item.micro_ts }} + {{ item.diffTs }} s</div>
+                    <div class="call-text-date" [ngStyle]="{'display': (!isSimplify ? 'none' : 'block'),'text-align': 'center'}"> + {{ item.diffTs }} s </div>
+                </ng-template>
             </div>
             <div [ngStyle]="{'flex': item.options.rightEnd || 0.0000001 }"></div> <!-- right space -->
         </div>

diff --git a/src/app/components/search-grid-call/detail-dialog/tab-flow/tab-flow.component.scss b/src/app/components/search-grid-call/detail-dialog/tab-flow/tab-flow.component.scss
@@ -253,3 +253,18 @@
         border-radius: 4px;
     }
 }
+.iptooltip{ 
+    white-space: pre-line !important;
+
+    font-size:11px !important;
+    font-weight: bold;
+
+}
+.copysnack {
+    color:white !important;
+    background-color:rgb(61, 61, 61) !important;
+    .mat-simple-snackbar-action {
+        color: rgb(28, 221, 160) !important;
+    }
+
+}