From 5ba1d178f2c64b23f68a74d5d7e180e7bd05a060 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Wed, 12 Sep 2018 15:10:57 +0900
Subject: [PATCH] test

---
 .../component/host-detail.component.html      | 89 +++++++++++++++++--
 .../component/service-detail.component.html   |  8 +-
 2 files changed, 88 insertions(+), 9 deletions(-)

diff --git a/src/commons/component/host-detail.component.html b/src/commons/component/host-detail.component.html
index b76187d..3862669 100644
--- a/src/commons/component/host-detail.component.html
+++ b/src/commons/component/host-detail.component.html
@@ -7,6 +7,11 @@
 
       <ul class="key-value">
 
+        <li *ngIf="host.address">
+          IP Address
+          <span class="meta-value">{{host.address}}</span>
+        </li>
+
         <li *ngIf="host.deviceType">
           Type
           <span class="meta-value">{{host.deviceType}}</span>
@@ -35,13 +40,81 @@
     </p-tabPanel>
 
     <p-tabPanel header="Metadata" *ngIf="host.meta">
-      <div *ngFor="let key of host.meta | objectKeys">
-        {{key | stringPrettify}}: {{host.meta[key]}}
-      </div>
-    </p-tabPanel>
 
-    <p-tabPanel header="Ports" *ngIf="host.portList">
-      <p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
-    </p-tabPanel>
-  </p-tabView>
+      <perfect-scrollbar style="height: 80%">
+        <ul class="key-value">
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+            <span class="meta-value">{{host.meta[key]}}</span>
+          </li>
+        </ul>
+      </perfect-scrollbar>
+
+</div>
+</p-tabPanel>
+
+<p-tabPanel header="Ports" *ngIf="host.portList">
+  <p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
+</p-tabPanel>
+</p-tabView>
 </div>
\ No newline at end of file
diff --git a/src/commons/component/service-detail.component.html b/src/commons/component/service-detail.component.html
index d7bd865..85a0ba5 100644
--- a/src/commons/component/service-detail.component.html
+++ b/src/commons/component/service-detail.component.html
@@ -28,7 +28,13 @@
 
     </p-tabPanel>
 
-    <p-tabPanel header="Metadata ">
+    <p-tabPanel header="Metadata" *ngIf="service.meta">
+      <ul class="key-value">
+        <li *ngFor="let key of service.meta | objectKeys">
+          {{key | stringPrettify}}
+          <span class="meta-value">{{service.meta[key]}}</span>
+        </li>
+      </ul>
     </p-tabPanel>
 
   </p-tabView>