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