ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html

   1 <div class="cd-col-form"
   2      *cdFormLoading="loading">
   3   <form name="mgrModuleForm"
   4         #frm="ngForm"
   5         [formGroup]="mgrModuleForm"
   6         novalidate>
   7     <div class="card">
   8       <div class="card-header"
   9            i18n>Edit Manager module</div>
  10       <div class="card-body">
  11         <div class="form-group row"
  12              *ngFor="let moduleOption of moduleOptions | keyvalue">
  13
  14           <!-- Field label -->
  15           <label class="cd-col-form-label"
  16                  for="{{ moduleOption.value.name }}">
  17             {{ moduleOption.value.name }}
  18             <cd-helper *ngIf="moduleOption.value.long_desc || moduleOption.value.desc">
  19               {{ moduleOption.value.long_desc || moduleOption.value.desc | upperFirst }}
  20             </cd-helper>
  21           </label>
  22
  23           <!-- Field control -->
  24           <!-- bool -->
  25           <div class="cd-col-form-input"
  26                *ngIf="moduleOption.value.type === 'bool'">
  27             <div class="custom-control custom-checkbox">
  28               <input id="{{ moduleOption.value.name }}"
  29                      type="checkbox"
  30                      class="custom-control-input"
  31                      formControlName="{{ moduleOption.value.name }}">
  32               <label class="custom-control-label"
  33                      for="{{ moduleOption.value.name }}"></label>
  34             </div>
  35           </div>
  36
  37           <!-- addr|str|uuid -->
  38           <div class="cd-col-form-input"
  39                *ngIf="['addr', 'str', 'uuid'].includes(moduleOption.value.type)">
  40             <input id="{{ moduleOption.value.name }}"
  41                    class="form-control"
  42                    type="text"
  43                    formControlName="{{ moduleOption.value.name }}"
  44                    *ngIf="moduleOption.value.enum_allowed.length === 0">
  45             <select id="{{ moduleOption.value.name }}"
  46                     class="form-control"
  47                     formControlName="{{ moduleOption.value.name }}"
  48                     *ngIf="moduleOption.value.enum_allowed.length > 0">
  49               <option *ngFor="let value of moduleOption.value.enum_allowed"
  50                       [ngValue]="value">
  51                 {{ value }}
  52               </option>
  53             </select>
  54             <span class="invalid-feedback"
  55                   *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'invalidUuid')"
  56                   i18n>The entered value is not a valid UUID, e.g.: 67dcac9f-2c03-4d6c-b7bd-1210b3a259a8</span>
  57             <span class="invalid-feedback"
  58                   *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'pattern')"
  59                   i18n>The entered value needs to be a valid IP address.</span>
  60           </div>
  61
  62           <!-- uint|int|size|secs -->
  63           <div class="cd-col-form-input"
  64                *ngIf="['uint', 'int', 'size', 'secs'].includes(moduleOption.value.type)">
  65             <input id="{{ moduleOption.value.name }}"
  66                    class="form-control"
  67                    type="number"
  68                    formControlName="{{ moduleOption.value.name }}"
  69                    min="{{ moduleOption.value.min }}"
  70                    max="{{ moduleOption.value.max }}">
  71             <span class="invalid-feedback"
  72                   *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'required')"
  73                   i18n>This field is required.</span>
  74             <span class="invalid-feedback"
  75                   *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'max')"
  76                   i18n>The entered value is too high! It must be lower or equal to {{ moduleOption.value.max }}.</span>
  77             <span class="invalid-feedback"
  78                   *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'min')"
  79                   i18n>The entered value is too low! It must be greater or equal to {{ moduleOption.value.min }}.</span>
  80             <span class="invalid-feedback"
  81                   *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'pattern')"
  82                   i18n>The entered value needs to be a number.</span>
  83           </div>
  84
  85           <!-- float -->
  86           <div class="cd-col-form-input"
  87                *ngIf="moduleOption.value.type === 'float'">
  88             <input id="{{ moduleOption.value.name }}"
  89                    class="form-control"
  90                    type="number"
  91                    formControlName="{{ moduleOption.value.name }}">
  92             <span class="invalid-feedback"
  93                   *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'required')"
  94                   i18n>This field is required.</span>
  95             <span class="invalid-feedback"
  96                   *ngIf="mgrModuleForm.showError(moduleOption.value.name, frm, 'pattern')"
  97                   i18n>The entered value needs to be a number or decimal.</span>
  98           </div>
  99
 100         </div>
 101       </div>
 102       <div class="card-footer">
 103         <cd-form-button-panel (submitActionEvent)="onSubmit()"
 104                               [form]="mgrModuleForm"
 105                               [submitText]="actionLabels.UPDATE"
 106                               wrappingClass="text-right"></cd-form-button-panel>
 107       </div>
 108     </div>
 109   </form>
 110 </div>