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

<div class="ui-g-12">

  <div class="detail-img">
    <!-- <svg width="200" height="200" viewBox="20 40 140 100">
          <image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
        </svg> -->
    <svg width="140" height="140" viewBox="15 35 140 100">
      <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" />
    </svg>
    <h3>{{host.name}} <span>{{host.address}}</span></h3>
  </div>

  <p-tabView class="detail-content">
    <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>
        <li *ngFor="let key of host.meta | objectKeys">
          {{key | stringPrettify}}

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