git.apps.os.sepia.ceph.com Git - ceph.git/blob

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