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>

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

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