From 9944a2f696f7035e00471e10b62c382156eeafa1 Mon Sep 17 00:00:00 2001
From: crusader <crusader@atgame.net>
Date: Thu, 4 Oct 2018 18:10:31 +0900
Subject: [PATCH] ing

---
 .../component/host-detail.component.html      | 123 +++++++++---------
 .../component/service-detail.component.html   | 120 +++++++++--------
 2 files changed, 128 insertions(+), 115 deletions(-)

diff --git a/src/commons/component/host-detail.component.html b/src/commons/component/host-detail.component.html
index 3b26146..1d0d638 100644
--- a/src/commons/component/host-detail.component.html
+++ b/src/commons/component/host-detail.component.html
@@ -20,53 +20,60 @@
 
   <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
     <p-tabPanel header=" General">
+      <div of-auto-height key="0">
+        <perfect-scrollbar>
 
-      <ul class="key-value">
+          <ul class="key-value">
 
-        <li *ngIf="host.address">
-          IP Address
-          <span class="meta-value">{{host.address}}</span>
-        </li>
+            <li *ngIf="host.address">
+              IP Address
+              <span class="meta-value">{{host.address}}</span>
+            </li>
 
-        <li *ngIf="host.hostType">
-          Type
-          <span class="meta-value">{{host.hostType}}</span>
-        </li>
-        <li *ngIf="host.hostVendor">
-          Vendor
-          <span class="meta-value">{{host.hostVendor}}</span>
-        </li>
-        <li *ngIf="host.hostModel">
-          Model
-          <span class="meta-value">{{host.hostModel}}</span>
-        </li>
+            <li *ngIf="host.hostType">
+              Type
+              <span class="meta-value">{{host.hostType}}</span>
+            </li>
+            <li *ngIf="host.hostVendor">
+              Vendor
+              <span class="meta-value">{{host.hostVendor}}</span>
+            </li>
+            <li *ngIf="host.hostModel">
+              Model
+              <span class="meta-value">{{host.hostModel}}</span>
+            </li>
 
-        <li *ngIf="host.osType">
-          OS
-          <span class="meta-value">{{host.osType}}</span>
-        </li>
+            <li *ngIf="host.osType">
+              OS
+              <span class="meta-value">{{host.osType}}</span>
+            </li>
 
-        <li *ngIf="host.mac">
-          Mac Address
-          <span class="meta-value">{{host.mac}}</span>
-        </li>
-
-      </ul>
+            <li *ngIf="host.mac">
+              Mac Address
+              <span class="meta-value">{{host.mac}}</span>
+            </li>
+          </ul>
+        </perfect-scrollbar>
+      </div>
     </p-tabPanel>
 
     <p-tabPanel header="Metadata" *ngIf="host.meta">
-      <ul class="detail-content-meta-title">
-        <li *ngFor="let key of host.meta | objectKeys">
-          {{key | stringPrettify}}
+      <div of-auto-height key="1">
+        <perfect-scrollbar>
+          <ul class="detail-content-meta-title">
+            <li *ngFor="let key of host.meta | objectKeys">
+              {{key | stringPrettify}}
 
-          <ul class="key-value">
-            <li *ngFor="let skey of host.meta[key] | objectKeys">
-              {{skey | stringPrettify}}
-              <span class="meta-value">{{host.meta[key][skey]}}</span>
+              <ul class="key-value">
+                <li *ngFor="let skey of host.meta[key] | objectKeys">
+                  {{skey | stringPrettify}}
+                  <span class="meta-value">{{host.meta[key][skey]}}</span>
+                </li>
+              </ul>
             </li>
           </ul>
-        </li>
-      </ul>
+        </perfect-scrollbar>
+      </div>
     </p-tabPanel>
 
     <p-tabPanel header="Ports" *ngIf="host.portList">
@@ -82,30 +89,30 @@
     </p-tabPanel>
 
     <p-tabPanel header="Health">
+      <div of-auto-height key="3">
+        <perfect-scrollbar>
+          <div class="ui-g">
+            <div class="ui-ping-row">
+              <div class="title">Count </div>
+              <p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner>
+            </div>
+            <div class="ui-ping-row">
+              <div class="title">Interval </div>
+              <p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner>
+            </div>
+            <div class="ui-ping-row">
+              <div class="title">Deadline </div>
+              <p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner>
+            </div>
+          </div>
+          <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
 
-      <div class="ui-g">
-        <div class="ui-ping-row">
-          <div class="title">Count </div>
-          <p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner>
-        </div>
-        <div class="ui-ping-row">
-          <div class="title">Interval </div>
-          <p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner>
-        </div>
-        <div class="ui-ping-row">
-          <div class="title">Deadline </div>
-          <p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner>
-        </div>
+          <div class="ui-ping-result-textarea">
+            <p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>
+            <textarea *ngIf="!pingWaiting && pingResult" pInputTextarea autoResize="autoResize" [(ngModel)]="pingResultRaw"></textarea>
+          </div>
+        </perfect-scrollbar>
       </div>
-      <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
-
-      <div class="ui-ping-result-textarea">
-        <p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>
-        <textarea *ngIf="!pingWaiting && pingResult" pInputTextarea autoResize="autoResize" [(ngModel)]="pingResultRaw"></textarea>
-      </div>
-
-
-
     </p-tabPanel>
   </p-tabView>
 
diff --git a/src/commons/component/service-detail.component.html b/src/commons/component/service-detail.component.html
index 348fcb8..b8a180c 100644
--- a/src/commons/component/service-detail.component.html
+++ b/src/commons/component/service-detail.component.html
@@ -23,25 +23,29 @@
 
   <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
     <p-tabPanel header="General">
+      <div of-auto-height key="0">
+        <perfect-scrollbar>
 
-      <ul class="key-value">
-        <li *ngIf="service.key">
-          Name
-          <span class="meta-value">{{service.key}}</span>
-        </li>
-        <li *ngIf="service.port">
-          Port
-          <span class="meta-value">{{service.port.metaPortType.key}} {{service.port.portNumber}}</span>
-        </li>
-        <li *ngIf="service.description">
-          Description
-          <span class="meta-value">{{service.description}}</span>
-        </li>
-        <li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
-          Crypto Type
-          <span class="meta-value">{{service.metaCryptoType.name}}</span>
-        </li>
-      </ul>
+          <ul class="key-value">
+            <li *ngIf="service.key">
+              Name
+              <span class="meta-value">{{service.key}}</span>
+            </li>
+            <li *ngIf="service.port">
+              Port
+              <span class="meta-value">{{service.port.metaPortType.key}} {{service.port.portNumber}}</span>
+            </li>
+            <li *ngIf="service.description">
+              Description
+              <span class="meta-value">{{service.description}}</span>
+            </li>
+            <li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
+              Crypto Type
+              <span class="meta-value">{{service.metaCryptoType.name}}</span>
+            </li>
+          </ul>
+        </perfect-scrollbar>
+      </div>
 
     </p-tabPanel>
 
@@ -65,46 +69,48 @@
     </p-tabPanel>
 
     <p-tabPanel header="Health" *ngIf="service.port.metaPortType.key === 'TCP'">
-
-      <div class="ui-g">
-        <div class="ui-ping-row">
-          <div class="title">Count </div>
-          <p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner>
-        </div>
-        <div class="ui-ping-row">
-          <div class="title">Interval </div>
-          <p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner>
-        </div>
-        <div class="ui-ping-row">
-          <div class="title">Deadline </div>
-          <p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner>
-        </div>
+      <div of-auto-height key="2">
+        <perfect-scrollbar>
+          <div class="ui-g">
+            <div class="ui-ping-row">
+              <div class="title">Count </div>
+              <p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner>
+            </div>
+            <div class="ui-ping-row">
+              <div class="title">Interval </div>
+              <p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner>
+            </div>
+            <div class="ui-ping-row">
+              <div class="title">Deadline </div>
+              <p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner>
+            </div>
+          </div>
+          <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
+          <div class="ui-ping-result">
+            <p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>
+            <p-table [value]="pingResult.responses | objectKeys" *ngIf="!pingWaiting && pingResult" [scrollable]="true"
+              scrollHeight="200px">
+              <ng-template pTemplate="header">
+                <tr>
+                  <th style="width: 3.25em">No.</th>
+                  <th>Response Time (ms)</th>
+                </tr>
+              </ng-template>
+              <ng-template pTemplate="body" let-key let-i="rowIndex">
+                <tr>
+                  <td style="width: 3.25em">
+                    {{i + 1}}
+                  </td>
+                  <td>
+                    {{pingResult.responses[key].time}}
+                    {{pingResult.responses[key].error}}
+                  </td>
+                </tr>
+              </ng-template>
+            </p-table>
+          </div>
+        </perfect-scrollbar>
       </div>
-      <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
-      <div class="ui-ping-result">
-        <p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>
-        <p-table [value]="pingResult.responses | objectKeys" *ngIf="!pingWaiting && pingResult" [scrollable]="true"
-          scrollHeight="200px">
-          <ng-template pTemplate="header">
-            <tr>
-              <th style="width: 3.25em">No.</th>
-              <th>Response Time (ms)</th>
-            </tr>
-          </ng-template>
-          <ng-template pTemplate="body" let-key let-i="rowIndex">
-            <tr>
-              <td style="width: 3.25em">
-                {{i + 1}}
-              </td>
-              <td>
-                {{pingResult.responses[key].time}}
-                {{pingResult.responses[key].error}}
-              </td>
-            </tr>
-          </ng-template>
-        </p-table>
-      </div>
-
     </p-tabPanel>
 
   </p-tabView>