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.address">
          IP Address
          <span class="meta-value">{{host.address}}</span>
        </li>

        <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">
      <ul class="key-value">
        <li *ngFor="let key of host.meta | objectKeys">
          {{key | stringPrettify}}
          <span class="meta-value">{{host.meta[key]}}</span>
        </li>
      </ul>
    </p-tabPanel>

    <p-tabPanel header="Ports" *ngIf="host.portList">
      <p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
    </p-tabPanel>
  </p-tabView>
</div>