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

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