From fda4b3c6104bb2d359424ce92f9be1ace3330a22 Mon Sep 17 00:00:00 2001
From: crusader <crusader@atgame.net>
Date: Wed, 19 Sep 2018 17:13:55 +0900
Subject: [PATCH] ing

---
 @overflow/commons/ui/component/index.ts       |   2 +-
 .../primeng/popup-panel.component.ts          |   6 +-
 package.json                                  |   3 +-
 src/app/pages/home/home-page.component.html   | 160 ++++++------
 src/app/pages/home/home-page.component.scss   |  42 ++--
 src/app/pages/home/home-page.component.ts     |  76 +++---
 src/commons/commons.module.ts                 |  26 +-
 .../component/host-detail.component.html      |  15 +-
 .../component/zone-detail.component.html      | 230 +++++++++---------
 yarn.lock                                     |  19 +-
 10 files changed, 305 insertions(+), 274 deletions(-)

diff --git a/@overflow/commons/ui/component/index.ts b/@overflow/commons/ui/component/index.ts
index c54030d..8ed1e9e 100644
--- a/@overflow/commons/ui/component/index.ts
+++ b/@overflow/commons/ui/component/index.ts
@@ -4,7 +4,7 @@ import {
 
 import {
   DropdownPanelComponent,
-  PopupPanelComponent
+  PopupPanelComponent,
 } from './primeng';
 
 import {
diff --git a/@overflow/commons/ui/component/primeng/popup-panel.component.ts b/@overflow/commons/ui/component/primeng/popup-panel.component.ts
index 93a70c3..64daa3f 100644
--- a/@overflow/commons/ui/component/primeng/popup-panel.component.ts
+++ b/@overflow/commons/ui/component/primeng/popup-panel.component.ts
@@ -1,4 +1,8 @@
-import { NgModule, Component, ElementRef, OnDestroy, Input, Renderer2, ViewChild, Inject, forwardRef, Output, EventEmitter } from '@angular/core';
+import {
+  NgModule, Component, ElementRef, OnDestroy,
+  Input, Renderer2, ViewChild, Inject, forwardRef,
+  Output, EventEmitter,
+} from '@angular/core';
 import { trigger, state, style, transition, animate, AnimationEvent } from '@angular/animations';
 import { DomHandler } from 'primeng/primeng';
 
diff --git a/package.json b/package.json
index 985345d..ea0bec8 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
   "private": true,
   "dependencies": {
     "electron-devtools-installer": "^2.2.4",
-    "ngx-perfect-scrollbar": "^6.3.1",
     "rxjs": "^6.2.2",
     "sqlite3": "^4.0.2"
   },
@@ -90,4 +89,4 @@
     "webpack-node-externals": "^1.7.2",
     "zone.js": "^0.8.26"
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index 5fb9344..772cc70 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -1,93 +1,99 @@
-<div *ngIf="showIntro" class="home-start">
-  <div class="start-button" (click)="discoveryConfigService.setStarted(true)">
-    <svg version="1.1" viewBox="0 0 200 210">
-      <path d="M8.3,193.5c0.1,2.4,0.8,4.9,2.1,7.1c4.5,7.7,14.3,10.4,22.1,5.9l152.1-87.8c2-1.3,3.8-3.1,5.1-5.4
+<div #discoveryContainer>
+  <div *ngIf="showIntro" class="home-start">
+    <div class="start-button" (click)="discoveryConfigService.setStarted(true)">
+      <svg version="1.1" viewBox="0 0 200 210">
+        <path d="M8.3,193.5c0.1,2.4,0.8,4.9,2.1,7.1c4.5,7.7,14.3,10.4,22.1,5.9l152.1-87.8c2-1.3,3.8-3.1,5.1-5.4
         c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />
-    </svg>
-  </div>
-  <div class="home-description">
-    <h1>overFlow Scanner </h1>
-    <br>
-    <b>를 이용해 주셔서 감사합니다.</b>
-    <br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
+      </svg>
+    </div>
+    <div class="home-description">
+      <h1>overFlow Scanner </h1>
+      <br>
+      <b>를 이용해 주셔서 감사합니다.</b>
+      <br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
+    </div>
+
   </div>
 
-</div>
-
-<div *ngIf="!showIntro" class="discovery-container">
-  <svg #discoveryTarget width="100%" height="100%">
-    <g>
-      <g *ngFor="let link of links">
-        <g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.id"
-          [attr.targetId]="link.target.id">
-          <line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
-          <text *ngIf="link.target.group === 'service'" class="linkTextClass" [attr.x]="(link.source.x - link.target.x) / 2 + link.target.x"
-            [attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.target.port.portNumber}}</text>
+  <div *ngIf="!showIntro" class="discovery-container">
+    <svg #discoveryTarget width="100%" height="100%">
+      <g>
+        <g *ngFor="let link of links">
+          <g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.id"
+            [attr.targetId]="link.target.id">
+            <line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
+            <text *ngIf="link.target.group === 'service'" class="linkTextClass" [attr.x]="(link.source.x - link.target.x) / 2 + link.target.x"
+              [attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.target.port.portNumber}}</text>
+          </g>
         </g>
-      </g>
-      <g *ngFor="let node of nodes">
-        <g class="node-container" [ngClass]="node.group" [attr.nodeId]="node.id" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
-          <g *ngIf="node.group === 'zone'">
-            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-              xlink:href="../../assets/image/icon/icon_overflow.svg"></image>
-          </g>
-          <g *ngIf="node.group === 'zone'">
-            <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.network}}</text>
-          </g>
-          <g *ngIf="node.group !== 'zone'">
-            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-              xlink:href="../../assets/image/icon/icon_background.svg"></image>
-          </g>
-          <g *ngIf="node.group === 'host'">
-            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-              attr.xlink:href="../../assets/image/icon/icon_{{node.target.hostType | lowercase}}.svg"></image>
-          </g>
-          <g *ngIf="node.group === 'host' && node.target.hostType === 'HOST' && node.target.osType !== 'UNKNOWN'">
-            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-              attr.xlink:href="../../assets/image/logo/logo_{{node.target.osType | lowercase}}.svg"></image>
-          </g>
-          <!-- <g *ngIf="node.group === 'host' && node.target.hostType !== 'HOST' && node.target.hostVendor !== ''">
+        <g *ngFor="let node of nodes">
+          <g class="node-container" [ngClass]="node.group" [attr.nodeId]="node.id" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
+            <g *ngIf="node.group === 'zone'">
+              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+                xlink:href="../../assets/image/icon/icon_overflow.svg"></image>
+            </g>
+            <g *ngIf="node.group === 'zone'">
+              <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.network}}</text>
+            </g>
+            <g *ngIf="node.group !== 'zone'">
+              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+                xlink:href="../../assets/image/icon/icon_background.svg"></image>
+            </g>
+            <g *ngIf="node.group === 'host'">
+              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+                attr.xlink:href="../../assets/image/icon/icon_{{node.target.hostType | lowercase}}.svg"></image>
+            </g>
+            <g *ngIf="node.group === 'host' && node.target.hostType === 'HOST' && node.target.osType !== 'UNKNOWN'">
+              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+                attr.xlink:href="../../assets/image/logo/logo_{{node.target.osType | lowercase}}.svg"></image>
+            </g>
+            <!-- <g *ngIf="node.group === 'host' && node.target.hostType !== 'HOST' && node.target.hostVendor !== ''">
             <text class="textClass" [attr.y]="(node.r - 30) / 10 + 'em'" text-anchor="middle">{{node.target.hostVendor}}</text>
           </g> -->
-          <g *ngIf="node.group === 'host'">
-            <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.address}}</text>
-          </g>
-          <g *ngIf="node.group === 'service'">
-            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-              attr.xlink:href="../../assets/image/icon/icon_{{node.target.serviceType | lowercase}}.svg"></image>
-          </g>
-          <g *ngIf="node.group === 'service' && node.target.key !== 'UNKNOWN'">
-            <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-              attr.xlink:href="../../assets/image/logo/logo_{{node.target.key | lowercase}}.svg"></image>
-          </g>
-          <g *ngIf="node.group === 'service'">
-            <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.name}}</text>
+            <g *ngIf="node.group === 'host'">
+              <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.address}}</text>
+            </g>
+            <g *ngIf="node.group === 'service'">
+              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+                attr.xlink:href="../../assets/image/icon/icon_{{node.target.serviceType | lowercase}}.svg"></image>
+            </g>
+            <g *ngIf="node.group === 'service' && node.target.key !== 'UNKNOWN'">
+              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
+                attr.xlink:href="../../assets/image/logo/logo_{{node.target.key | lowercase}}.svg"></image>
+            </g>
+            <g *ngIf="node.group === 'service'">
+              <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.name}}</text>
+            </g>
           </g>
         </g>
       </g>
-    </g>
-  </svg>
-  <p-card class="ui-map-info" *ngIf="resultMsg">
-    <div class="ui-map-info-row ui-border-bottom">
-      <div>Total Hosts: </div>{{resultMsg[0]}}
-    </div>
-    <div class="ui-map-info-row ui-border-bottom">
-      <div>Total Services: </div>{{resultMsg[1]}}
-    </div>
-    <div class="ui-map-info-row">
-      <div>Elapsed: </div>{{resultMsg[2]}}
-    </div>
-  </p-card>
+    </svg>
+    <p-card class="ui-map-info" *ngIf="resultMsg">
+      <div class="ui-map-info-row ui-border-bottom">
+        <div>Total Hosts: </div>{{resultMsg[0]}}
+      </div>
+      <div class="ui-map-info-row ui-border-bottom">
+        <div>Total Services: </div>{{resultMsg[1]}}
+      </div>
+      <div class="ui-map-info-row">
+        <div>Elapsed: </div>{{resultMsg[2]}}
+      </div>
+    </p-card>
+
+    <div #detailSidebar style="position: relative; top: 0; left: 0; height: 100%;"></div>
+
+    <p-sidebar [(visible)]="displaySidebar" [modal]="false" [appendTo]="detailSidebar" styleClass="ui-sidebar-md"
+      position="right" (onHide)="onHideDetail()" [style]="{position:'absolute'}">
+      <div *ngIf="selectedNode !== null">
+        <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
+      </div>
+    </p-sidebar>
+
+  </div>
 </div>
 
 <p-confirmDialog></p-confirmDialog>
 
-<p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right" (onHide)="onHideDetail()">
-  <div *ngIf="selectedNode !== null">
-    <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
-  </div>
-</p-sidebar>
-
 
 <!-- <div class="ui-fluid">
     <div class="ui-g">
diff --git a/src/app/pages/home/home-page.component.scss b/src/app/pages/home/home-page.component.scss
index 645f61f..34b2ed7 100644
--- a/src/app/pages/home/home-page.component.scss
+++ b/src/app/pages/home/home-page.component.scss
@@ -9,26 +9,27 @@
   margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
   padding: 0;
   box-sizing: border-box;
-  background-image: linear-gradient(#171a1d, #2b323a , #171a1d);
+  background-image: linear-gradient(#171a1d, #2b323a, #171a1d);
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 400px;
-  //text-align: center;
+  min-width: 400px; //text-align: center;
 }
+
 .home-description {
-   color: #b6b6b6;
-   width:300px;
-   h1 {
-     color: #e7e7e7;
-   }
+  color: #b6b6b6;
+  width: 300px;
+  h1 {
+    color: #e7e7e7;
+  }
 }
+
 .start-button {
   width: 200px;
   height: 210px;
   margin-right: 20px;
   transition: 0.3s;
-  svg{
+  svg {
     fill: #f0f0f0;
     stroke: #3C2412;
     stroke-miterlimit: 10;
@@ -41,9 +42,11 @@
     transition: 0.1s;
   }
 }
+
 /deep/ .ui-panel .ui-panel-content {
   padding: .6em .75em;
 }
+
 .discovery-container {
   height: 100vh;
   margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
@@ -52,8 +55,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 400px;
-  //text-align: center;
+  min-width: 400px; //text-align: center;
 }
 
 .link {
@@ -93,9 +95,6 @@
   opacity: 0.3;
 }
 
-
-
-
 .semi-unselected {
   opacity: 0.8;
 }
@@ -107,8 +106,8 @@
 .ui-map-info {
   position: absolute;
   top: 10px;
-  left :10px;
- .ui-map-info-row{
+  left: 10px;
+  .ui-map-info-row {
     //display: inline;
     font-size: 0.8em;
     line-height: 2em;
@@ -121,12 +120,19 @@
       width: 75px;
     }
   }
-  .ui-border-bottom{
+  .ui-border-bottom {
     border-bottom: 1px solid #d6d6d6;
   }
 }
+
 /deep/ .ui-card-body {
-  padding: 0.5em ;
+  padding: 0.5em;
   border: 1px solid #d6d6d6;
   border-radius: 3px;
+}
+
+.detail-sidebar {
+  top: 0;
+  left: 0;
+  height: 100%;
 }
\ No newline at end of file
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index 3b4c932..f61814f 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -350,7 +350,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
         }
 
         if (null === __this.selectedNode) {
-          __this.selectedNode = node;
           nodeElements.each(function () {
             const _thisElement = this as Element;
             d3.select(_thisElement).classed('semi-unfocused', false);
@@ -362,51 +361,66 @@ export class HomePageComponent implements OnInit, OnDestroy {
             d3.select(_thisElement).classed('semi-unfocused', false);
             d3.select(_thisElement).classed('unfocused', false);
           });
-
+        } else {
           nodeElements.each(function () {
             const _thisElement = this as Element;
-            switch (isConnectedNode(node, _thisElement)) {
-              case ConnectedNode.CONNECTED:
-                d3.select(_thisElement).classed('semi-unselected', true);
-                break;
-              case ConnectedNode.NOT_CONNECTED:
-                d3.select(_thisElement).classed('unselected', true);
-                break;
-              default:
-                break;
-            }
+            d3.select(_thisElement).classed('semi-unselected', false);
+            d3.select(_thisElement).classed('unselected', false);
           });
 
           linkElements.each(function () {
             const _thisElement = this as Element;
-            if (isConnectedLink(node, _thisElement)) {
-              d3.select(_thisElement).classed('semi-unselected', true);
-            } else {
-              d3.select(_thisElement).classed('unselected', true);
-            }
+            d3.select(_thisElement).classed('semi-unselected', false);
+            d3.select(_thisElement).classed('unselected', false);
           });
         }
 
+        __this.selectedNode = node;
+
+        nodeElements.each(function () {
+          const _thisElement = this as Element;
+          switch (isConnectedNode(node, _thisElement)) {
+            case ConnectedNode.CONNECTED:
+              d3.select(_thisElement).classed('semi-unselected', true);
+              break;
+            case ConnectedNode.NOT_CONNECTED:
+              d3.select(_thisElement).classed('unselected', true);
+              break;
+            default:
+              break;
+          }
+        });
+
+        linkElements.each(function () {
+          const _thisElement = this as Element;
+          if (isConnectedLink(node, _thisElement)) {
+            d3.select(_thisElement).classed('semi-unselected', true);
+          } else {
+            d3.select(_thisElement).classed('unselected', true);
+          }
+        });
+
+
         __this.onTargetClick(node);
       });
 
       // Highlight
-      const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
-      discoveryContainer.on('click', function () {
-        __this.selectedNode = null;
+      // const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
+      // discoveryContainer.on('click', function () {
+      //   __this.selectedNode = null;
 
-        nodeElements.each(function () {
-          const _thisElement = this as Element;
-          d3.select(_thisElement).classed('semi-unselected', false);
-          d3.select(_thisElement).classed('unselected', false);
-        });
+      // nodeElements.each(function () {
+      //   const _thisElement = this as Element;
+      //   d3.select(_thisElement).classed('semi-unselected', false);
+      //   d3.select(_thisElement).classed('unselected', false);
+      // });
 
-        linkElements.each(function () {
-          const _thisElement = this as Element;
-          d3.select(_thisElement).classed('semi-unselected', false);
-          d3.select(_thisElement).classed('unselected', false);
-        });
-      });
+      // linkElements.each(function () {
+      //   const _thisElement = this as Element;
+      //   d3.select(_thisElement).classed('semi-unselected', false);
+      //   d3.select(_thisElement).classed('unselected', false);
+      // });
+      // });
 
       nodeElements
         .on('mouseover', function () {
diff --git a/src/commons/commons.module.ts b/src/commons/commons.module.ts
index 9a5c00f..b4bb72a 100644
--- a/src/commons/commons.module.ts
+++ b/src/commons/commons.module.ts
@@ -2,21 +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 { 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
-};
+// const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
+//   suppressScrollX: true
+// };
 
 @NgModule({
   imports: [
     CommonModule,
     CommonsUIModule,
-    PerfectScrollbarModule
+    // PerfectScrollbarModule
   ],
   exports: [
     ...COMPONENTS,
@@ -24,11 +24,11 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
   declarations: [
     ...COMPONENTS,
   ],
-  providers: [
-    {
-      provide: PERFECT_SCROLLBAR_CONFIG,
-      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
-    }
-  ]
+  // providers: [
+  //   {
+  //     provide: PERFECT_SCROLLBAR_CONFIG,
+  //     useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
+  //   }
+  // ]
 })
 export class CommonsModule { }
diff --git a/src/commons/component/host-detail.component.html b/src/commons/component/host-detail.component.html
index 2e2d5c7..2a9b380 100644
--- a/src/commons/component/host-detail.component.html
+++ b/src/commons/component/host-detail.component.html
@@ -52,7 +52,20 @@
         </li>
 
       </ul>
-
+      <p-scrollPanel [style]="{width: '100%', height: '100px'}">
+        The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+        His
+        beloved
+        son Michael has just come home from the war, but does not intend to become part of his father's business.
+        Through Michael's life the nature of the family business becomes clear. The business of the family is just
+        like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence
+        whenever anything stands against the good of the family. The story begins as Don Vito Corleone, the head
+        of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from
+        the war, but does not intend to become part of his father's business. Through Michael's life the nature of
+        the family business becomes clear. The business of the family is just like the head of the family, kind and
+        benevolent to those who give respect, but given to ruthless violence whenever anything stands against the
+        good of the family.
+      </p-scrollPanel>
     </p-tabPanel>
 
     <p-tabPanel header="Metadata" *ngIf="host.meta">
diff --git a/src/commons/component/zone-detail.component.html b/src/commons/component/zone-detail.component.html
index 916269f..5812a85 100644
--- a/src/commons/component/zone-detail.component.html
+++ b/src/commons/component/zone-detail.component.html
@@ -17,124 +17,124 @@
   <p-tabView class="detail-content">
 
     <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>
+      <!-- <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">
-              <span class="meta-value">{{host.address}}</span> <span *ngIf="host.name" class="meta-value">
-                ({{host.name}})</span>
-            </a>
-          </li>
-        </ul>
-      </perfect-scrollbar>
+      <!-- <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">
+            <span class="meta-value">{{host.address}}</span> <span *ngIf="host.name" class="meta-value">
+              ({{host.name}})</span>
+          </a>
+        </li>
+      </ul>
+      <!-- </perfect-scrollbar> -->
     </p-tabPanel>
 
   </p-tabView>
diff --git a/yarn.lock b/yarn.lock
index 8f032c9..1e2ed49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5264,13 +5264,6 @@ 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"
@@ -5877,10 +5870,6 @@ 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"
@@ -6490,10 +6479,6 @@ 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"
@@ -6566,6 +6551,10 @@ rx@^4.1.0:
   version "4.1.0"
   resolved "https://nexus.loafle.net/repository/npm-all/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
 
+rxjs-compat@^6.3.2:
+  version "6.3.2"
+  resolved "https://nexus.loafle.net/repository/npm-all/rxjs-compat/-/rxjs-compat-6.3.2.tgz#2386ade05e693480fdf96f56042a629aef6c5ea5"
+
 rxjs@^6.0.0, rxjs@^6.1.0, rxjs@^6.2.2:
   version "6.3.2"
   resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.2.tgz#6a688b16c4e6e980e62ea805ec30648e1c60907f"