test

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>

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>