ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/crush-rule-form-modal/crush-rule-form-modal.component.html

   1 <cd-modal [modalRef]="bsModalRef">
   2   <ng-container i18n="form title|Example: Create Pool@@formTitle"
   3                 class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
   4
   5   <ng-container class="modal-content">
   6     <form #frm="ngForm"
   7           [formGroup]="form"
   8           novalidate>
   9       <div class="modal-body">
  10         <div class="form-group row">
  11           <label for="name"
  12                  class="col-form-label col-sm-3">
  13             <ng-container i18n>Name</ng-container>
  14             <span class="required"></span>
  15           </label>
  16           <div class="col-sm-9">
  17             <input type="text"
  18                    id="name"
  19                    name="name"
  20                    class="form-control"
  21                    placeholder="Name..."
  22                    formControlName="name"
  23                    autofocus>
  24             <span class="invalid-feedback"
  25                   *ngIf="form.showError('name', frm, 'required')"
  26                   i18n>This field is required!</span>
  27             <span class="invalid-feedback"
  28                   *ngIf="form.showError('name', frm, 'pattern')"
  29                   i18n>The name can only consist of alphanumeric characters, dashes and underscores.</span>
  30             <span class="invalid-feedback"
  31                   *ngIf="form.showError('name', frm, 'uniqueName')"
  32                   i18n>The chosen erasure code profile name is already in use.</span>
  33           </div>
  34         </div>
  35
  36         <!-- Root -->
  37         <div class="form-group row">
  38           <label for="root"
  39                  class="col-form-label col-sm-3">
  40             <ng-container i18n>Root</ng-container>
  41             <cd-helper [html]="tooltips.root">
  42             </cd-helper>
  43             <span class="required"></span>
  44           </label>
  45           <div class="col-sm-9">
  46             <select class="form-control custom-select"
  47                     id="root"
  48                     name="root"
  49                     formControlName="root">
  50               <option *ngIf="!buckets"
  51                       ngValue=""
  52                       i18n>Loading...</option>
  53               <option *ngFor="let bucket of buckets"
  54                       [ngValue]="bucket">
  55                 {{ bucket.name }}
  56               </option>
  57             </select>
  58             <span class="invalid-feedback"
  59                   *ngIf="form.showError('root', frm, 'required')"
  60                   i18n>This field is required!</span>
  61           </div>
  62         </div>
  63
  64         <!-- Failure Domain Type -->
  65         <div class="form-group row">
  66           <label for="failure_domain"
  67                  class="col-form-label col-sm-3">
  68             <ng-container i18n>Failure domain type</ng-container>
  69             <cd-helper [html]="tooltips.failure_domain">
  70             </cd-helper>
  71             <span class="required"></span>
  72           </label>
  73           <div class="col-sm-9">
  74             <select class="form-control custom-select"
  75                     id="failure_domain"
  76                     name="failure_domain"
  77                     formControlName="failure_domain">
  78               <option *ngIf="!failureDomains"
  79                       ngValue=""
  80                       i18n>Loading...</option>
  81               <option *ngFor="let domain of failureDomainKeys()"
  82                       [ngValue]="domain">
  83                 {{ domain }} ( {{failureDomains[domain].length}} )
  84               </option>
  85             </select>
  86             <span class="invalid-feedback"
  87                   *ngIf="form.showError('failure_domain', frm, 'required')"
  88                   i18n>This field is required!</span>
  89           </div>
  90         </div>
  91
  92         <!-- Class -->
  93         <div class="form-group row">
  94           <label for="device_class"
  95                  class="col-form-label col-sm-3">
  96             <ng-container i18n>Device class</ng-container>
  97             <cd-helper [html]="tooltips.device_class">
  98             </cd-helper>
  99           </label>
 100           <div class="col-sm-9">
 101             <select class="form-control custom-select"
 102                     id="device_class"
 103                     name="device_class"
 104                     formControlName="device_class">
 105               <option ngValue=""
 106                       i18n>Let Ceph decide</option>
 107               <option *ngFor="let deviceClass of devices"
 108                       [ngValue]="deviceClass">
 109                 {{ deviceClass }}
 110               </option>
 111             </select>
 112           </div>
 113         </div>
 114       </div>
 115
 116       <div class="modal-footer">
 117         <cd-submit-button (submitAction)="onSubmit()"
 118                           i18n="form action button|Example: Create Pool@@formActionButton"
 119                           [form]="frm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
 120         <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
 121       </div>
 122     </form>
 123   </ng-container>
 124 </cd-modal>