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

   1 <div class="col-sm-12 col-md-12 col-lg-6">
   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="col-form-label col-sm-3">Name</label>
  16           <div class="col-sm-9">
  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="col-form-label col-sm-3">Description</label>
  30           <div class="col-sm-9">
  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="col-form-label col-sm-3">Long description</label>
  44           <div class="col-sm-9">
  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="col-form-label col-sm-3">Default</label>
  58           <div class="col-sm-9">
  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="col-form-label col-sm-3">Daemon default</label>
  72           <div class="col-sm-9">
  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="col-form-label col-sm-3">Services</label>
  86           <div class="col-sm-9">
  87             <span *ngFor="let service of configForm.getValue('services')"
  88                   class="form-component-badge">
  89               <span class="badge badge-pill 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               <div class="offset-sm-3 col-sm-9">
 102                 <div class="form-check abc-checkbox abc-checkbox-primary">
 103                   <input class="form-check-input"
 104                          [id]="section"
 105                          type="checkbox"
 106                          [formControlName]="section">
 107                   <label class="form-check-label"
 108                          [for]="section">{{ section }}
 109                   </label>
 110                 </div>
 111               </div>
 112             </div>
 113
 114             <div class="form-group row"
 115                  [ngClass]="{':invalid': configForm.showError(section, formDir)}"
 116                  *ngIf="type !== 'bool'">
 117               <label class="col-form-label col-sm-3"
 118                      [for]="section">{{ section }}
 119               </label>
 120               <div class="col-sm-9">
 121                 <input class="form-control"
 122                        [type]="inputType"
 123                        [id]="section"
 124                        [placeholder]="humanReadableType"
 125                        [formControlName]="section"
 126                        [step]="getStep(type, this.configForm.getValue(section))">
 127                 <span class="form-text text-muted"
 128                       *ngIf="configForm.showError(section, formDir, 'pattern')">
 129                   {{ patternHelpText }}
 130                 </span>
 131                 <span class="form-text text-muted"
 132                       *ngIf="configForm.showError(section, formDir, 'invalidUuid')">
 133                   {{ patternHelpText }}
 134                 </span>
 135                 <span class="form-text text-muted"
 136                       *ngIf="configForm.showError(section, formDir, 'max')"
 137                       i18n>The entered value is too high! It must not be greater than {{ maxValue }}.</span>
 138                 <span class="form-text text-muted"
 139                       *ngIf="configForm.showError(section, formDir, 'min')"
 140                       i18n>The entered value is too low! It must not be lower than {{ minValue }}.</span>
 141               </div>
 142             </div>
 143           </ng-container>
 144         </div>
 145       </div>
 146       <!-- Footer -->
 147       <div class="card-footer">
 148         <div class="button-group text-right">
 149           <cd-submit-button [form]="formDir"
 150                             (submitAction)="submit()">
 151             <span i18n>Save</span>
 152           </cd-submit-button>
 153           <cd-back-button></cd-back-button>
 154         </div>
 155       </div>
 156     </div>
 157   </form>
 158 </div>