ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html

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