ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container class="modal-title"
   3                 i18n>OSD Recovery Priority</ng-container>
   4
   5   <ng-container class="modal-content">
   6     <form #formDir="ngForm"
   7           [formGroup]="osdRecvSpeedForm"
   8           novalidate
   9           cdFormScope="osd">
  10       <div class="modal-body">
  11         <!-- Priority -->
  12         <div class="form-group row">
  13           <label class="cd-col-form-label required"
  14                  for="priority"
  15                  i18n>Priority</label>
  16           <div class="cd-col-form-input">
  17             <select class="form-control"
  18                     formControlName="priority"
  19                     id="priority"
  20                     (change)="onPriorityChange($event.target.value)">
  21               <option *ngFor="let priority of priorities"
  22                       [value]="priority.name">
  23                 {{ priority.text }}
  24               </option>
  25             </select>
  26             <span class="invalid-feedback"
  27                   *ngIf="osdRecvSpeedForm.showError('priority', formDir, 'required')"
  28                   i18n>This field is required.</span>
  29           </div>
  30         </div>
  31
  32         <!-- Customize priority -->
  33         <div class="form-group row">
  34           <div class="cd-col-form-offset">
  35             <div class="custom-control custom-checkbox">
  36               <input formControlName="customizePriority"
  37                      class="custom-control-input"
  38                      id="customizePriority"
  39                      name="customizePriority"
  40                      type="checkbox"
  41                      (change)="onCustomizePriorityChange()">
  42               <label class="custom-control-label"
  43                      for="customizePriority"
  44                      i18n>Customize priority values</label>
  45             </div>
  46           </div>
  47         </div>
  48
  49         <!-- Priority values -->
  50         <div class="form-group row"
  51              *ngFor="let attr of priorityAttrs | keyvalue">
  52           <label class="cd-col-form-label"
  53                  [for]="attr.key">
  54             <span [ngClass]="{'required': osdRecvSpeedForm.getValue('customizePriority')}">
  55               {{ attr.value.text }}
  56             </span>
  57             <cd-helper *ngIf="attr.value.desc">{{ attr.value.desc }}</cd-helper>
  58           </label>
  59           <div class="cd-col-form-input">
  60             <input class="form-control"
  61                    type="number"
  62                    [id]="attr.key"
  63                    [formControlName]="attr.key"
  64                    [readonly]="!osdRecvSpeedForm.getValue('customizePriority')">
  65             <span class="invalid-feedback"
  66                   *ngIf="osdRecvSpeedForm.getValue('customizePriority') &&
  67                   osdRecvSpeedForm.showError(attr.key, formDir, 'required')"
  68                   i18n>This field is required!</span>
  69             <span class="invalid-feedback"
  70                   *ngIf="osdRecvSpeedForm.getValue('customizePriority') &&
  71                   osdRecvSpeedForm.showError(attr.key, formDir, 'pattern')"
  72                   i18n>{{ attr.value.patternHelpText }}</span>
  73             <span class="invalid-feedback"
  74                   *ngIf="osdRecvSpeedForm.getValue('customizePriority') &&
  75                   osdRecvSpeedForm.showError(attr.key, formDir, 'max')"
  76                   i18n>The entered value is too high! It must not be greater than {{ attr.value.maxValue }}.</span>
  77             <span class="invalid-feedback"
  78                   *ngIf="osdRecvSpeedForm.getValue('customizePriority') &&
  79                   osdRecvSpeedForm.showError(attr.key, formDir, 'min')"
  80                   i18n>The entered value is too low! It must not be lower than {{ attr.value.minValue }}.</span>
  81           </div>
  82         </div>
  83       </div>
  84       <div class="modal-footer">
  85         <cd-form-button-panel (submitActionEvent)="submitAction()"
  86                               [form]="osdRecvSpeedForm"
  87                               [submitText]="actionLabels.UPDATE"
  88                               [showSubmit]="permissions.configOpt.update"></cd-form-button-panel>
  89       </div>
  90     </form>
  91   </ng-container>
  92 </cd-modal>