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

   1 <cd-modal [pageURL]="pageURL"
   2           [modalRef]="activeModal">
   3   <span class="modal-title"
   4         i18n>{{ action | titlecase }} {{ resource | upperFirst }}</span>
   5
   6   <ng-container class="modal-content">
   7
   8     <div *cdFormLoading="loading">
   9       <form name="hostForm"
  10             #formDir="ngForm"
  11             [formGroup]="hostForm"
  12             novalidate>
  13
  14         <div class="modal-body">
  15
  16           <!-- Hostname -->
  17           <div class="form-group row">
  18             <label class="cd-col-form-label required"
  19                    for="hostname">
  20             <ng-container i18n>Hostname</ng-container>
  21             <cd-helper>
  22               <p i18n>To add multiple hosts at once, you can enter:</p>
  23               <ul>
  24                 <li i18n>a comma-separated list of hostnames <samp>(e.g.: example-01,example-02,example-03)</samp>,</li>
  25                 <li i18n>a range expression <samp>(e.g.: example-[01-03].ceph)</samp>,</li>
  26                 <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>
  27               </ul>
  28             </cd-helper>
  29             </label>
  30             <div class="cd-col-form-input">
  31               <input class="form-control"
  32                      type="text"
  33                      placeholder="mon-123"
  34                      id="hostname"
  35                      name="hostname"
  36                      formControlName="hostname"
  37                      autofocus
  38                      (keyup)="checkHostNameValue()">
  39               <span class="invalid-feedback"
  40                     *ngIf="hostForm.showError('hostname', formDir, 'required')"
  41                     i18n>This field is required.</span>
  42               <span class="invalid-feedback"
  43                     *ngIf="hostForm.showError('hostname', formDir, 'uniqueName')"
  44                     i18n>The chosen hostname is already in use.</span>
  45             </div>
  46           </div>
  47
  48           <!-- Address -->
  49           <div class="form-group row"
  50                *ngIf="!hostPattern">
  51             <label class="cd-col-form-label"
  52                    for="addr"
  53                    i18n>Network address</label>
  54             <div class="cd-col-form-input">
  55               <input class="form-control"
  56                      type="text"
  57                      placeholder="192.168.0.1"
  58                      id="addr"
  59                      name="addr"
  60                      formControlName="addr">
  61               <span class="invalid-feedback"
  62                     *ngIf="hostForm.showError('addr', formDir, 'pattern')"
  63                     i18n>The value is not a valid IP address.</span>
  64             </div>
  65           </div>
  66
  67           <!-- Labels -->
  68           <div class="form-group row">
  69             <label i18n
  70                    for="labels"
  71                    class="cd-col-form-label">Labels</label>
  72             <div class="cd-col-form-input">
  73               <cd-select-badges id="labels"
  74                                 [data]="hostForm.controls.labels.value"
  75                                 [options]="labelsOption"
  76                                 [customBadges]="true"
  77                                 [messages]="messages">
  78               </cd-select-badges>
  79             </div>
  80           </div>
  81
  82           <!-- Maintenance Mode -->
  83           <div class="form-group row"
  84                *ngIf="!hideMaintenance">
  85             <div class="cd-col-form-offset">
  86               <div class="custom-control custom-checkbox">
  87                 <input class="custom-control-input"
  88                        id="maintenance"
  89                        type="checkbox"
  90                        formControlName="maintenance">
  91                 <label class="custom-control-label"
  92                        for="maintenance"
  93                        i18n>Maintenance Mode</label>
  94               </div>
  95             </div>
  96           </div>
  97         </div>
  98
  99         <div class="modal-footer">
 100           <cd-form-button-panel (submitActionEvent)="submit()"
 101                                 [form]="hostForm"
 102                                 [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
 103                                 wrappingClass="text-right"></cd-form-button-panel>
 104         </div>
 105       </form>
 106     </div>
 107   </ng-container>
 108 </cd-modal>