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

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