pipes

@overflow/commons/ui/pipe/index.ts

@@ -1,2 +1,7 @@
+import { ObjectKeys } from "./object-keys";
+import { stringPrettify } from "./string-prettify";
+
 export const PIPES = [
+  ObjectKeys,
+  stringPrettify
 ];

@overflow/commons/ui/pipe/object-keys.ts

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'objectKeys' })
+export class ObjectKeys implements PipeTransform {
+  transform(value: any, args: any[] = null): any {
+    return Object.keys(value);
+  }
+}

@overflow/commons/ui/pipe/string-prettify.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'stringPrettify' })
+export class stringPrettify implements PipeTransform {
+  transform(value: string): any {
+    value = value.replace('-', ' ');
+    value = value.replace('_', ' ');
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+}

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

@@ -30,16 +30,14 @@
           <span class="meta-value">{{host.mac}}</span>
         </li>
 
-        <li *ngIf="host.discoveredBy">
-          Discovered by
-          <span class="meta-value">{{host.discoveredBy.join(',')}}</span>
-        </li>
       </ul>
 
     </p-tabPanel>
 
-    <p-tabPanel header="Metadata" *ngIf="host.meta && host.meta.length > 0">
-
+    <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">

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

@@ -12,11 +12,11 @@ export class HostDetailComponent {
   @Input() host: Host;
   ports: Port[];
   selectedPort: Port;
+  discoveredBy: string;
 
   constructor(
   ) {
 
   }
 
-
 }