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

<div class="ui-g-12 detail-view-box">

  <h3>{{host.name}} <span>{{host.address}}</span></h3>

  <p-tabView>
    <p-tabPanel header="General">

      <ul class="key-value">

        <li *ngIf="host.deviceType">
          Type
          <span class="meta-value">{{host.deviceType}}</span>
        </li>
        <li *ngIf="host.deviceVendor">
          Vendor
          <span class="meta-value">{{host.deviceVendor}}</span>
        </li>
        <li *ngIf="host.model">
          Model
          <span class="meta-value">{{host.model}}</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>

    </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>
</div>