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

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