ing

package-lock.json

@@ -0,0 +1,27 @@
+{
+  "name": "scanner-app",
+  "version": "0.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "ngx-perfect-scrollbar": {
+      "version": "6.3.1",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-6.3.1.tgz",
+      "integrity": "sha512-kgHT0A1pDnZO5CxB4TOwflHb1Q152wZ3Nec0Zf7d29bgA1kAFl6oK8wFmYtGWeaFNhSCExus6TOq3sWN3xRQig==",
+      "requires": {
+        "perfect-scrollbar": "1.4.0",
+        "resize-observer-polyfill": "1.5.0"
+      }
+    },
+    "perfect-scrollbar": {
+      "version": "1.4.0",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz",
+      "integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw=="
+    },
+    "resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+    }
+  }
+}

package.json

@@ -18,6 +18,7 @@
   "private": true,
   "dependencies": {
     "electron-devtools-installer": "^2.2.4",
+    "ngx-perfect-scrollbar": "^6.3.1",
     "rxjs": "^6.2.2",
     "sqlite3": "^4.0.2"
   },
@@ -54,24 +55,25 @@
     "codelyzer": "~4.2.1",
     "core-js": "^2.5.4",
     "d3": "^5.7.0",
-    "dexie": "^2.0.4",
     "devtron": "^1.4.0",
+    "dexie": "^2.0.4",
     "electron": "^2.0.9",
     "electron-builder": "^20.28.4",
-    "electron-connect-webpack-plugin": "^0.1.1",
     "electron-connect": "^0.6.3",
+    "electron-connect-webpack-plugin": "^0.1.1",
     "electron-debug": "^2.0.0",
     "electron-window-state": "^5.0.1",
     "file-uri-to-path": "^1.0.0",
     "file-url": "^2.0.2",
     "fs-extra": "^7.0.0",
+    "ip-cidr": "^2.0.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~1.7.1",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
     "karma-jasmine": "~1.1.1",
+    "karma-jasmine-html-reporter": "^0.2.2",
     "ngrx-store-freeze": "^0.2.4",
     "npm-run-all": "^4.1.3",
     "primeng": "^6.1.3",
@@ -85,7 +87,6 @@
     "wait-on": "^2.1.0",
     "webpack-cli": "^3.1.0",
     "webpack-node-externals": "^1.7.2",
-    "zone.js": "^0.8.26",
+    "zone.js": "^0.8.26"
-    "ip-cidr": "^2.0.0"
   }
 }

src/app/pages/home/home-page.component.ts

@@ -16,7 +16,6 @@ import { Link } from '../../../commons/model/link';
 import { RPCError } from '@overflow/rpc-js';
 import { toMetaIPType, MetaIPTypeEnum, toMetaCryptoType, MetaCryptoTypeEnum, toMetaPortType, MetaPortTypeEnum } from '@overflow/model/meta';
 import { DiscoveryModeType } from '@overflow/model/discovery/discovery';
-import { PingResult } from '@overflow/model/ping';
 
 @Component({
   selector: 'app-pages-home',

src/commons/commons.module.ts

@@ -2,15 +2,21 @@ import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
-
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
+import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
 
 import { COMPONENTS } from './component';
 
+const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
+  suppressScrollX: true
+};
+
 @NgModule({
   imports: [
     CommonModule,
-
     CommonsUIModule,
+    PerfectScrollbarModule
   ],
   exports: [
     ...COMPONENTS,
@@ -19,6 +25,10 @@ import { COMPONENTS } from './component';
     ...COMPONENTS,
   ],
   providers: [
+    {
+      provide: PERFECT_SCROLLBAR_CONFIG,
+      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
+    }
   ]
 })
 export class CommonsModule { }

src/commons/component/host-detail.component.html

@@ -79,7 +79,26 @@
     </p-tabPanel>
 
     <p-tabPanel header="Health">
+
+      <div class="ui-g-10 ui-g-offset-2">Retries :
+        <input type="number" pInputText style="width:100px;" [(ngModel)]="retries" min="1" max="10">
+      </div>
+      <!-- <div class="ui-g-10 ui-g-offset-2">Interval :
+              <input type="text" pInputText placeholder="3" style="width:100px;" [(ngModel)]="interval" (ngModelChange)="validateIP($event, 0)"
+                (keypress)="ipPressed($event)">
+            </div>
+            <div class="ui-g-10 ui-g-offset-2">Deadline :
+              <input type="text" pInputText placeholder="3" style="width:100px;" [(ngModel)]="deadline" (ngModelChange)="validateIP($event, 0)"
+                (keypress)="ipPressed($event)">
+            </div> -->
+
       <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
+      <br />
+      <textarea style="width: 100%; height: 200px" pInputTextarea autoResize="autoResize" [(ngModel)]="healthResponse"></textarea>
+
+      <div *ngIf="pingWaiting">
+        Checking....
+      </div>
       <div *ngIf="pingResult">
         <ul>
           <li *ngFor="let key of pingResult.responses | objectKeys">
@@ -100,11 +119,9 @@
           <div *ngIf="pingResult.summary.minTime">Min: {{pingResult.summary.minTime}} ms</div>
           <div *ngIf="pingResult.summary.maxTime">Min: {{pingResult.summary.maxTime}} ms</div>
         </div>
+
       </div>
     </p-tabPanel>
-
-
   </p-tabView>
-</div>
 
-<p-growl [(value)]="pingResult" [life]="9000"></p-growl>
+</div>

src/commons/component/host-detail.component.ts

@@ -2,9 +2,8 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Host } from '@overflow/model/discovery';
 import { ProbeService } from '../service/probe.service';
 import { map, catchError, take } from 'rxjs/operators';
-import { PingResult, PingResponse } from '@overflow/model/ping';
+import { PingResult } from '@overflow/model/ping';
 import { of } from 'rxjs';
-import { Message } from 'primeng/primeng';
 
 
 @Component({
@@ -15,16 +14,26 @@ import { Message } from 'primeng/primeng';
 export class HostDetailComponent {
 
   @Input() host: Host;
+
+  healthResponse: string;
+
+  pingWaiting: boolean;
   pingResult: PingResult;
+  retries: number;
 
   constructor(
-    private probeService: ProbeService
+    private probeService: ProbeService,
   ) {
+    this.pingWaiting = false;
+    this.retries = 5;
   }
 
   doPing() {
+    this.pingWaiting = true;
+    this.pingWaiting = true;
+
     const option = {
-      Retry: 3,
+      Retry: this.retries,
       Interval: 1,
       Deadline: 1,
     };
@@ -33,13 +42,16 @@ export class HostDetailComponent {
       .call<PingResult>('PingService.PingHost', this.host, option)
       .pipe(
         map((pingResult: PingResult) => {
+          this.healthResponse = 'aslkdfjas\nasdflskjdf';
           if (pingResult) {
             this.pingResult = pingResult;
           }
+          this.pingWaiting = false;
         }),
         catchError(error => {
           console.log(error);
           alert('An error has occurred.');
+          this.pingWaiting = false;
           return of();
         }),
         take(1)

src/commons/component/node-detail.component.html

@@ -1,5 +1,8 @@
 <div class="ui-g">
+
   <div class="ui-g-12">
+
+
     <ng-container [ngSwitch]="node.group">
 
       <ng-container *ngSwitchCase="'zone'">
@@ -18,5 +21,6 @@
       </ng-container>
 
     </ng-container>
+
   </div>
 </div>

src/commons/component/service-detail.component.html

@@ -21,7 +21,6 @@
 
 
   <p-tabView class="detail-content">
-    <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
     <p-tabPanel header="General">
 
       <ul class="key-value">
@@ -60,6 +59,25 @@
       </ul>
     </p-tabPanel>
 
+    <p-tabPanel header="Health">
+      <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
+      <div *ngIf="pingWaiting">
+        Checking....
+      </div>
+      <div *ngIf="pingResult">
+        <ul>
+          <li *ngFor="let key of pingResult.responses | objectKeys">
+            <span *ngIf="pingResult.responses[key].error else value">
+              {{pingResult.responses[key].error}}
+            </span>
+            <ng-template #value>
+              {{pingResult.responses[key].time}}ms
+            </ng-template>
+          </li>
+        </ul>
+      </div>
+    </p-tabPanel>
+
   </p-tabView>
 
 </div>

src/commons/component/service-detail.component.ts

@@ -13,15 +13,19 @@ import { of } from 'rxjs';
 export class ServiceDetailComponent {
 
   @Input() service: Service;
-  @Output() ping = new EventEmitter<PingResult>();
+  pingWaiting: boolean;
+  pingResult: PingResult;
 
   constructor(
     private probeService: ProbeService
   ) {
-
+    this.pingWaiting = false;
   }
 
   doPing() {
+    this.pingWaiting = true;
+
+
     const option = {
       Retry: 3,
       Interval: 1,
@@ -32,11 +36,15 @@ export class ServiceDetailComponent {
       .call<PingResult>('PingService.PingService', this.service, option)
       .pipe(
         map((pingResult: PingResult) => {
-          this.ping.emit(pingResult);
+          if (pingResult) {
+            this.pingResult = pingResult;
+          }
+          this.pingWaiting = false;
         }),
         catchError(error => {
           console.log(error);
           alert('An error has occurred.');
+          this.pingWaiting = false;
           return of();
         }),
         take(1)

src/commons/component/zone-detail.component.html

@@ -15,38 +15,117 @@
   </div>
 
   <p-tabView class="detail-content">
-    <p-tabPanel header="General">
 
+    <p-tabPanel header="General">
+      <perfect-scrollbar>
         <ul class="key-value">
           <li *ngIf="zone.iface">
             Interface
             <span class="meta-value">{{zone.iface}}</span>
           </li>
-
           <li *ngIf="zone.mac">
             Mac Address
             <span class="meta-value">{{zone.mac}}</span>
           </li>
-
           <li *ngIf="zone.metaIPType">
             IP Version
             <span class="meta-value">{{zone.metaIPType.key}}</span>
           </li>
-
           <li *ngIf="zone.network">
             Network
             <span class="meta-value">{{zone.network}}</span>
           </li>
-
           <li *ngIf="zone.network">
             IP Range
             <span class="meta-value">{{ipRange}}</span>
           </li>
-
+          <!--  -->
+          <li *ngIf="zone.iface">
+            Interface
+            <span class="meta-value">{{zone.iface}}</span>
+          </li>
+          <li *ngIf="zone.mac">
+            Mac Address
+            <span class="meta-value">{{zone.mac}}</span>
+          </li>
+          <li *ngIf="zone.metaIPType">
+            IP Version
+            <span class="meta-value">{{zone.metaIPType.key}}</span>
+          </li>
+          <li *ngIf="zone.network">
+            Network
+            <span class="meta-value">{{zone.network}}</span>
+          </li>
+          <li *ngIf="zone.network">
+            IP Range
+            <span class="meta-value">{{ipRange}}</span>
+          </li>
+          <li *ngIf="zone.iface">
+            Interface
+            <span class="meta-value">{{zone.iface}}</span>
+          </li>
+          <li *ngIf="zone.mac">
+            Mac Address
+            <span class="meta-value">{{zone.mac}}</span>
+          </li>
+          <li *ngIf="zone.metaIPType">
+            IP Version
+            <span class="meta-value">{{zone.metaIPType.key}}</span>
+          </li>
+          <li *ngIf="zone.network">
+            Network
+            <span class="meta-value">{{zone.network}}</span>
+          </li>
+          <li *ngIf="zone.network">
+            IP Range
+            <span class="meta-value">{{ipRange}}</span>
+          </li>
+          <li *ngIf="zone.iface">
+            Interface
+            <span class="meta-value">{{zone.iface}}</span>
+          </li>
+          <li *ngIf="zone.mac">
+            Mac Address
+            <span class="meta-value">{{zone.mac}}</span>
+          </li>
+          <li *ngIf="zone.metaIPType">
+            IP Version
+            <span class="meta-value">{{zone.metaIPType.key}}</span>
+          </li>
+          <li *ngIf="zone.network">
+            Network
+            <span class="meta-value">{{zone.network}}</span>
+          </li>
+          <li *ngIf="zone.network">
+            IP Range
+            <span class="meta-value">{{ipRange}}</span>
+          </li>
+          <li *ngIf="zone.iface">
+            Interface
+            <span class="meta-value">{{zone.iface}}</span>
+          </li>
+          <li *ngIf="zone.mac">
+            Mac Address
+            <span class="meta-value">{{zone.mac}}</span>
+          </li>
+          <li *ngIf="zone.metaIPType">
+            IP Version
+            <span class="meta-value">{{zone.metaIPType.key}}</span>
+          </li>
+          <li *ngIf="zone.network">
+            Network
+            <span class="meta-value">{{zone.network}}</span>
+          </li>
+          <li *ngIf="zone.network">
+            IP Range
+            <span class="meta-value">{{ipRange}}</span>
+          </li>
         </ul>
+      </perfect-scrollbar>
     </p-tabPanel>
 
     <p-tabPanel header="Hosts">
+      <perfect-scrollbar>
         <ul class="key-value">
           <li *ngFor="let host of zone.hostList | ipSort: 'address'">
             <a href="javascript:void(0)" (click)="hostSelected(host)" style="text-decoration:none">
@@ -55,7 +134,9 @@
             </a>
           </li>
         </ul>
+      </perfect-scrollbar>
     </p-tabPanel>
+
   </p-tabView>
 
 </div>

yarn.lock

@@ -5264,6 +5264,13 @@ ngrx-store-freeze@^0.2.4:
   dependencies:
     deep-freeze-strict "^1.1.1"
 
+ngx-perfect-scrollbar@^6.3.1:
+  version "6.3.1"
+  resolved "https://nexus.loafle.net/repository/npm-all/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-6.3.1.tgz#38e5e3259a61e911d82ba24f06fc01ab92eaf919"
+  dependencies:
+    perfect-scrollbar "^1.4.0"
+    resize-observer-polyfill "^1.4.0"
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://nexus.loafle.net/repository/npm-all/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -5870,6 +5877,10 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://nexus.loafle.net/repository/npm-all/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
+perfect-scrollbar@^1.4.0:
+  version "1.4.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz#5d014ef9775e1f43058a1dbae9ed1daf0e7091f1"
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://nexus.loafle.net/repository/npm-all/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -6475,6 +6486,10 @@ requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://nexus.loafle.net/repository/npm-all/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.4.0:
+  version "1.5.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://nexus.loafle.net/repository/npm-all/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"