import ceph quincy 17.2.4

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / cluster / hosts / host-form / host-form.component.html

<cd-modal [pageURL]="pageURL"
          [modalRef]="activeModal">
  <span class="modal-title"
        i18n>{{ action | titlecase }} {{ resource | upperFirst }}</span>

  <ng-container class="modal-content">

    <div *cdFormLoading="loading">
      <form name="hostForm"
            #formDir="ngForm"
            [formGroup]="hostForm"
            novalidate>

        <div class="modal-body">

          <!-- Hostname -->
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="hostname">
            <ng-container i18n>Hostname</ng-container>
            <cd-helper>
              <p i18n>To add multiple hosts at once, you can enter:</p>
              <ul>
                <li i18n>a comma-separated list of hostnames <samp>(e.g.: example-01,example-02,example-03)</samp>,</li>
                <li i18n>a range expression <samp>(e.g.: example-[01-03].ceph)</samp>,</li>
                <li i18n>a comma separated range expression <samp>(e.g.: example-[01-05].lab.com,example2-[1-4].lab.com,example3-[001-006].lab.com)</samp></li>
              </ul>
            </cd-helper>
            </label>
            <div class="cd-col-form-input">
              <input class="form-control"
                     type="text"
                     placeholder="mon-123"
                     id="hostname"
                     name="hostname"
                     formControlName="hostname"
                     autofocus
                     (keyup)="checkHostNameValue()">
              <span class="invalid-feedback"
                    *ngIf="hostForm.showError('hostname', formDir, 'required')"
                    i18n>This field is required.</span>
              <span class="invalid-feedback"
                    *ngIf="hostForm.showError('hostname', formDir, 'uniqueName')"
                    i18n>The chosen hostname is already in use.</span>
            </div>
          </div>

          <!-- Address -->
          <div class="form-group row"
               *ngIf="!hostPattern">
            <label class="cd-col-form-label"
                   for="addr"
                   i18n>Network address</label>
            <div class="cd-col-form-input">
              <input class="form-control"
                     type="text"
                     placeholder="192.168.0.1"
                     id="addr"
                     name="addr"
                     formControlName="addr">
              <span class="invalid-feedback"
                    *ngIf="hostForm.showError('addr', formDir, 'pattern')"
                    i18n>The value is not a valid IP address.</span>
            </div>
          </div>

          <!-- Labels -->
          <div class="form-group row">
            <label i18n
                   for="labels"
                   class="cd-col-form-label">Labels</label>
            <div class="cd-col-form-input">
              <cd-select-badges id="labels"
                                [data]="hostForm.controls.labels.value"
                                [options]="labelsOption"
                                [customBadges]="true"
                                [messages]="messages">
              </cd-select-badges>
            </div>
          </div>

          <!-- Maintenance Mode -->
          <div class="form-group row"
               *ngIf="!hideMaintenance">
            <div class="cd-col-form-offset">
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input"
                       id="maintenance"
                       type="checkbox"
                       formControlName="maintenance">
                <label class="custom-control-label"
                       for="maintenance"
                       i18n>Maintenance Mode</label>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <cd-form-button-panel (submitActionEvent)="submit()"
                                [form]="hostForm"
                                [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
                                wrappingClass="text-right"></cd-form-button-panel>
        </div>
      </form>
    </div>
  </ng-container>
</cd-modal>