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

   1 <div class="cd-col-form"
   2      *cdFormLoading="loading">
   3   <form name="configForm"
   4         #formDir="ngForm"
   5         [formGroup]="configForm"
   6         novalidate>
   7     <div class="card">
   8       <div class="card-header">
   9         <ng-container i18>Edit</ng-container> {{ configForm.getValue('name') }}
  10       </div>
  11
  12       <div class="card-body">
  13         <!-- Name -->
  14         <div class="form-group row">
  15           <label i18n
  16                  class="cd-col-form-label">Name</label>
  17           <div class="cd-col-form-input">
  18             <input class="form-control"
  19                    type="text"
  20                    id="name"
  21                    formControlName="name"
  22                    readonly>
  23           </div>
  24         </div>
  25
  26         <!-- Description -->
  27         <div class="form-group row"
  28              *ngIf="configForm.getValue('desc')">
  29           <label i18n
  30                  class="cd-col-form-label">Description</label>
  31           <div class="cd-col-form-input">
  32             <textarea class="form-control resize-vertical"
  33                       id="desc"
  34                       formControlName="desc"
  35                       readonly>
  36             </textarea>
  37           </div>
  38         </div>
  39
  40         <!-- Long description -->
  41         <div class="form-group row"
  42              *ngIf="configForm.getValue('long_desc')">
  43           <label i18n
  44                  class="cd-col-form-label">Long description</label>
  45           <div class="cd-col-form-input">
  46             <textarea class="form-control resize-vertical"
  47                       id="long_desc"
  48                       formControlName="long_desc"
  49                       readonly>
  50             </textarea>
  51           </div>
  52         </div>
  53
  54         <!-- Default -->
  55         <div class="form-group row"
  56              *ngIf="configForm.getValue('default') !== ''">
  57           <label i18n
  58                  class="cd-col-form-label">Default</label>
  59           <div class="cd-col-form-input">
  60             <input class="form-control"
  61                    type="text"
  62                    id="default"
  63                    formControlName="default"
  64                    readonly>
  65           </div>
  66         </div>
  67
  68         <!-- Daemon default -->
  69         <div class="form-group row"
  70              *ngIf="configForm.getValue('daemon_default') !== ''">
  71           <label i18n
  72                  class="cd-col-form-label">Daemon default</label>
  73           <div class="cd-col-form-input">
  74             <input class="form-control"
  75                    type="text"
  76                    id="daemon_default"
  77                    formControlName="daemon_default"
  78                    readonly>
  79           </div>
  80         </div>
  81
  82         <!-- Services -->
  83         <div class="form-group row"
  84              *ngIf="configForm.getValue('services').length > 0">
  85           <label i18n
  86                  class="cd-col-form-label">Services</label>
  87           <div class="cd-col-form-input">
  88             <span *ngFor="let service of configForm.getValue('services')"
  89                   class="form-component-badge">
  90               <span class="badge badge-dark">{{ service }}</span>
  91             </span>
  92           </div>
  93         </div>
  94
  95         <!-- Values -->
  96         <div formGroupName="values">
  97           <h3 i18n
  98               class="cd-header">Values</h3>
  99           <ng-container *ngFor="let section of availSections">
 100             <div class="form-group row"
 101                  *ngIf="type === 'bool'">
 102               <label class="cd-col-form-label"
 103                      [for]="section">{{ section }}
 104               </label>
 105               <div class="cd-col-form-input">
 106                 <select id="pool"
 107                         name="pool"
 108                         class="form-control"
 109                         [formControlName]="section">
 110                   <option [ngValue]="null"
 111                           i18n>-- Default --</option>
 112                   <option [ngValue]="true"
 113                           i18n>true</option>
 114                   <option [ngValue]="false"
 115                           i18n>false</option>
 116                 </select>
 117               </div>
 118             </div>
 119
 120             <div class="form-group row"
 121                  *ngIf="type !== 'bool'">
 122               <label class="cd-col-form-label"
 123                      [for]="section">{{ section }}
 124               </label>
 125               <div class="cd-col-form-input">
 126                 <input class="form-control"
 127                        [type]="inputType"
 128                        [id]="section"
 129                        [placeholder]="humanReadableType"
 130                        [formControlName]="section"
 131                        [step]="getStep(type, this.configForm.getValue(section))">
 132                 <span class="invalid-feedback"
 133                       *ngIf="configForm.showError(section, formDir, 'pattern')">
 134                   {{ patternHelpText }}
 135                 </span>
 136                 <span class="invalid-feedback"
 137                       *ngIf="configForm.showError(section, formDir, 'invalidUuid')">
 138                   {{ patternHelpText }}
 139                 </span>
 140                 <span class="invalid-feedback"
 141                       *ngIf="configForm.showError(section, formDir, 'max')"
 142                       i18n>The entered value is too high! It must not be greater than {{ maxValue }}.</span>
 143                 <span class="invalid-feedback"
 144                       *ngIf="configForm.showError(section, formDir, 'min')"
 145                       i18n>The entered value is too low! It must not be lower than {{ minValue }}.</span>
 146               </div>
 147             </div>
 148           </ng-container>
 149         </div>
 150       </div>
 151       <!-- Footer -->
 152       <div class="card-footer">
 153         <cd-form-button-panel (submitActionEvent)="submit()"
 154                               [form]="configForm"
 155                               [submitText]="actionLabels.UPDATE"
 156                               wrappingClass="text-right"></cd-form-button-panel>
 157       </div>
 158     </div>
 159   </form>
 160 </div>