member_webapp/@overflow/probe/component/detail/detail.component.html

<p-blockUI [target]="content" [blocked]="pending">
  <i class="fa ui-icon-lock block-icon"></i>
</p-blockUI>

<p-panel #content [showHeader]="false" class="block-panel">

  <div class="ui-g">
    <div class="ui-g-6 ui-nopad">
      <h1>Info</h1>
    </div>

    <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
      <button class="ui-button-width-fit" *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
      <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()" [disabled]="displayNamedisplayNameErrMsg || descriptionErrMsg"></button>
      <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Cancel" (click)="editMode = false"></button>
    </div>
  </div>
  <p-messages [(value)]="connectionStatus" [closable]="false"></p-messages>

  <!-- Probe info -->
  <div class="ui-g ui-bottom-space-10">
    <p-panel [showHeader]="false" class="nopad">
      <div *ngIf="probeHost">
        <div class="ui-g form-group">
          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <div *ngIf="editMode" class="of-key-value-div">
              <span>Name</span>
              <span class="ng-star-inserted">
                <input #displayName type="text" pInputText value="{{probeHost.probe.displayName}}" (keyup)="onDisplayNameEditing(displayName.value)"/>
                <div *ngIf="displayNameErrMsg" class="ui-message ui-messages-error ui-corner-all">{{displayNameErrMsg}}</div>
              </span>
            </div>
            <of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probeHost.probe.displayName"></of-key-value>
          </div>

          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
          </div>
          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <div *ngIf="editMode" class="of-key-value-div">
              <span>Description</span>
              <span class="ng-star-inserted">
                <input #description type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="onDescriptionEditing(description.value)"/>
                <div *ngIf="descriptionErrMsg" class="ui-message ui-messages-error ui-corner-all">{{descriptionErrMsg}}</div>
              </span>
            </div>
            <of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probeHost.probe.description"></of-key-value>
          </div>
          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <of-key-value [key]="'Key'" [value]="probeHost.probe.probeKey"></of-key-value>
          </div>
          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <of-key-value [key]="'Authrozied at'" [value]="probeHost.probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
          </div>
          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <of-key-value [key]="'Authrozied by'" [value]="probeHost.probe.authorizeMember.name"></of-key-value>
          </div>
        </div>
      </div>
    </p-panel>

    <!-- Host info -->
    <p-panel [showHeader]="false" class="nopad">
      <div *ngIf="probeHost">
        <div class="ui-g form-group">

          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <of-key-value [key]="'IPv4'" [value]="probeHost.host.ipv4"></of-key-value>
          </div>

          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <of-key-value [key]="'IPv6'" [value]="probeHost.host.ipv6 | uppercase"></of-key-value>
          </div>

          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <of-key-value [key]="'Mac Address'" [value]="probeHost.host.mac"></of-key-value>
          </div>

          <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
            <of-key-value [key]="'OS'" [value]="probeHost.host.os.vendor.name"></of-key-value>
          </div>

        </div>
      </div>
    </p-panel>

  </div>
  <div class="ui-g" dir="rtl">
    <button class="ui-button-danger ui-button-width-fit" [disabled]="true" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
      (click)="onRemoveClick()"></button>
    <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
  </div>

</p-panel>


<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<p-growl [(value)]="msgs"></p-growl> -->