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

   1 <div class="modal-header">
   2   <h4 i18n="form title|Example: Create Pool@@formTitle"
   3       class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
   4
   5   <button type="button"
   6           class="close float-right"
   7           aria-label="Close"
   8           (click)="bsModalRef.hide()">
   9     <span aria-hidden="true">&times;</span>
  10   </button>
  11 </div>
  12
  13 <form #frm="ngForm"
  14       [formGroup]="form"
  15       novalidate>
  16   <div class="modal-body">
  17     <div class="form-group row">
  18       <label for="name"
  19              class="col-form-label col-sm-3">
  20         <ng-container i18n>Name</ng-container>
  21         <span class="required"></span>
  22       </label>
  23       <div class="col-sm-9">
  24         <input type="text"
  25                id="name"
  26                name="name"
  27                class="form-control"
  28                placeholder="Name..."
  29                formControlName="name"
  30                autofocus>
  31         <span class="invalid-feedback"
  32               *ngIf="form.showError('name', frm, 'required')"
  33               i18n>This field is required!</span>
  34         <span class="invalid-feedback"
  35               *ngIf="form.showError('name', frm, 'pattern')"
  36               i18n>The name can only consist of alphanumeric characters, dashes and underscores.</span>
  37         <span class="invalid-feedback"
  38               *ngIf="form.showError('name', frm, 'uniqueName')"
  39               i18n>The chosen erasure code profile name is already in use.</span>
  40       </div>
  41     </div>
  42
  43     <div class="form-group row">
  44       <label for="plugin"
  45              class="col-form-label col-sm-3">
  46         <ng-container i18n>Plugin</ng-container>
  47         <span class="required"></span>
  48         <cd-helper [html]="tooltips.plugins[plugin].description">
  49         </cd-helper>
  50       </label>
  51       <div class="col-sm-9">
  52         <select class="form-control"
  53                 id="plugin"
  54                 name="plugin"
  55                 formControlName="plugin">
  56           <option *ngIf="!plugins"
  57                   ngValue=""
  58                   i18n>Loading...</option>
  59           <option *ngFor="let plugin of plugins"
  60                   [ngValue]="plugin">
  61             {{ plugin }}
  62           </option>
  63         </select>
  64         <span class="invalid-feedback"
  65               *ngIf="form.showError('name', frm, 'required')"
  66               i18n>This field is required!</span>
  67       </div>
  68     </div>
  69
  70     <div class="form-group row">
  71       <label for="k"
  72              class="col-form-label col-sm-3">
  73         <ng-container i18n>Data chunks (k)</ng-container>
  74         <span class="required"
  75               *ngIf="requiredControls.includes('k')"></span>
  76         <cd-helper [html]="tooltips.k">
  77         </cd-helper>
  78       </label>
  79       <div class="col-sm-9">
  80         <input type="number"
  81                id="k"
  82                name="k"
  83                class="form-control"
  84                ng-model="$ctrl.erasureCodeProfile.k"
  85                placeholder="Data chunks..."
  86                formControlName="k">
  87         <span class="invalid-feedback"
  88               *ngIf="form.showError('k', frm, 'required')"
  89               i18n>This field is required!</span>
  90         <span class="invalid-feedback"
  91               *ngIf="form.showError('k', frm, 'min')"
  92               i18n>Must be equal to or greater than 2.</span>
  93       </div>
  94     </div>
  95
  96     <div class="form-group row">
  97       <label for="m"
  98              class="col-form-label col-sm-3">
  99         <ng-container i18n>Coding chunks (m)</ng-container>
 100         <span class="required"
 101               *ngIf="requiredControls.includes('m')"></span>
 102         <cd-helper [html]="tooltips.m">
 103         </cd-helper>
 104       </label>
 105       <div class="col-sm-9">
 106         <input type="number"
 107                id="m"
 108                name="m"
 109                class="form-control"
 110                placeholder="Coding chunks..."
 111                formControlName="m">
 112         <span class="invalid-feedback"
 113               *ngIf="form.showError('m', frm, 'required')"
 114               i18n>This field is required!</span>
 115         <span class="invalid-feedback"
 116               *ngIf="form.showError('m', frm, 'min')"
 117               i18n>Must be equal to or greater than 1.</span>
 118       </div>
 119     </div>
 120
 121     <div class="form-group row"
 122          *ngIf="plugin === 'shec'">
 123       <label for="c"
 124              class="col-form-label col-sm-3">
 125         <ng-container i18n>Durability estimator (c)</ng-container>
 126         <cd-helper [html]="tooltips.plugins.shec.c">
 127         </cd-helper>
 128       </label>
 129       <div class="col-sm-9">
 130         <input type="number"
 131                id="c"
 132                name="c"
 133                class="form-control"
 134                placeholder="Coding chunks..."
 135                formControlName="c">
 136         <span class="invalid-feedback"
 137               *ngIf="form.showError('c', frm, 'min')"
 138               i18n>Must be equal to or greater than 1.</span>
 139       </div>
 140     </div>
 141
 142     <div class="form-group row"
 143          *ngIf="plugin === PLUGIN.LRC">
 144       <label for="l"
 145              class="col-form-label col-sm-3">
 146         <ng-container i18n>Locality (l)</ng-container>
 147         <span class="required"></span>
 148         <cd-helper [html]="tooltips.plugins.lrc.l">
 149         </cd-helper>
 150       </label>
 151       <div class="col-sm-9">
 152         <input type="number"
 153                id="l"
 154                name="l"
 155                class="form-control"
 156                placeholder="Coding chunks..."
 157                formControlName="l">
 158         <span class="invalid-feedback"
 159               *ngIf="form.showError('l', frm, 'required')"
 160               i18n>This field is required!</span>
 161         <span class="invalid-feedback"
 162               *ngIf="form.showError('l', frm, 'min')"
 163               i18n>Must be equal to or greater than 1.</span>
 164       </div>
 165     </div>
 166
 167     <div class="form-group row">
 168       <label for="crushFailureDomain"
 169              class="col-form-label col-sm-3">
 170         <ng-container i18n>Crush failure domain</ng-container>
 171         <cd-helper [html]="tooltips.crushFailureDomain">
 172         </cd-helper>
 173       </label>
 174       <div class="col-sm-9">
 175         <select class="form-control"
 176                 id="crushFailureDomain"
 177                 name="crushFailureDomain"
 178                 formControlName="crushFailureDomain">
 179           <option *ngIf="!failureDomains"
 180                   ngValue=""
 181                   i18n>Loading...</option>
 182           <option *ngFor="let domain of failureDomains"
 183                   [ngValue]="domain">
 184             {{ domain }}
 185           </option>
 186         </select>
 187       </div>
 188     </div>
 189
 190     <div class="form-group row"
 191          *ngIf="plugin === PLUGIN.LRC">
 192       <label for="crushLocality"
 193              class="col-form-label col-sm-3">
 194         <ng-container i18n>Crush Locality</ng-container>
 195         <cd-helper [html]="tooltips.plugins.lrc.crushLocality">
 196         </cd-helper>
 197       </label>
 198       <div class="col-sm-9">
 199         <select class="form-control"
 200                 id="crushLocality"
 201                 name="crushLocality"
 202                 formControlName="crushLocality">
 203           <option *ngIf="!failureDomains"
 204                   ngValue=""
 205                   i18n>Loading...</option>
 206           <option *ngIf="failureDomains && failureDomains.length > 0"
 207                   ngValue=""
 208                   i18n>None</option>
 209           <option *ngFor="let domain of failureDomains"
 210                   [ngValue]="domain">
 211             {{ domain }}
 212           </option>
 213         </select>
 214       </div>
 215     </div>
 216
 217     <div class="form-group row"
 218          *ngIf="[PLUGIN.JERASURE, PLUGIN.ISA].includes(plugin)">
 219       <label for="technique"
 220              class="col-form-label col-sm-3">
 221         <ng-container i18n>Technique</ng-container>
 222         <cd-helper [html]="tooltips.plugins[plugin].technique">
 223         </cd-helper>
 224       </label>
 225       <div class="col-sm-9">
 226         <select class="form-control"
 227                 id="technique"
 228                 name="technique"
 229                 formControlName="technique">
 230           <option *ngFor="let technique of techniques"
 231                   [ngValue]="technique">
 232             {{ technique }}
 233           </option>
 234         </select>
 235       </div>
 236     </div>
 237
 238     <div class="form-group row"
 239          *ngIf="plugin === PLUGIN.JERASURE">
 240       <label for="packetSize"
 241              class="col-form-label col-sm-3">
 242         <ng-container i18n>Packetsize</ng-container>
 243         <cd-helper [html]="tooltips.plugins.jerasure.packetSize">
 244         </cd-helper>
 245       </label>
 246       <div class="col-sm-9">
 247         <input type="number"
 248                id="packetSize"
 249                name="packetSize"
 250                class="form-control"
 251                placeholder="Packetsize..."
 252                formControlName="packetSize">
 253         <span class="invalid-feedback"
 254               *ngIf="form.showError('packetSize', frm, 'min')"
 255               i18n>Must be equal to or greater than 1.</span>
 256       </div>
 257     </div>
 258
 259     <div class="form-group row">
 260       <label for="crushRoot"
 261              class="col-form-label col-sm-3">
 262         <ng-container i18n>Crush root</ng-container>
 263         <cd-helper [html]="tooltips.crushRoot">
 264         </cd-helper>
 265       </label>
 266       <div class="col-sm-9">
 267         <input type="text"
 268                id="crushRoot"
 269                name="crushRoot"
 270                class="form-control"
 271                placeholder="root..."
 272                formControlName="crushRoot">
 273       </div>
 274     </div>
 275
 276     <div class="form-group row">
 277       <label for="crushDeviceClass"
 278              class="col-form-label col-sm-3">
 279         <ng-container i18n>Crush device class</ng-container>
 280         <cd-helper [html]="tooltips.crushDeviceClass">
 281         </cd-helper>
 282       </label>
 283       <div class="col-sm-9">
 284         <select class="form-control"
 285                 id="crushDeviceClass"
 286                 name="crushDeviceClass"
 287                 formControlName="crushDeviceClass">
 288           <option ngValue=""
 289                   i18n>any</option>
 290           <option *ngFor="let deviceClass of devices"
 291                   [ngValue]="deviceClass">
 292             {{ deviceClass }}
 293           </option>
 294         </select>
 295       </div>
 296     </div>
 297
 298     <div class="form-group row">
 299       <label for="directory"
 300              class="col-form-label col-sm-3">
 301         <ng-container i18n>Directory</ng-container>
 302         <cd-helper [html]="tooltips.directory">
 303         </cd-helper>
 304       </label>
 305       <div class="col-sm-9">
 306         <input type="text"
 307                id="directory"
 308                name="directory"
 309                class="form-control"
 310                placeholder="Path..."
 311                formControlName="directory">
 312       </div>
 313     </div>
 314   </div>
 315
 316   <div class="modal-footer">
 317     <cd-submit-button (submitAction)="onSubmit()"
 318                       i18n="form action button|Example: Create Pool@@formActionButton"
 319                       [form]="frm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
 320     <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
 321   </div>
 322 </form>