ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html

   1 <div class="col-sm-12 col-lg-6">
   2   <form name="rbdForm"
   3         class="form-horizontal"
   4         #formDir="ngForm"
   5         [formGroup]="rbdForm"
   6         novalidate>
   7     <div class="panel panel-default">
   8       <div class="panel-heading">
   9         <h3 i18n="form title|Example: Create Pool@@formTitle"
  10             class="panel-title">{{ action | titlecase }} {{ resource | upperFirst }}</h3>
  11       </div>
  12       <div class="panel-body">
  13
  14         <!-- Parent -->
  15         <div class="form-group"
  16              *ngIf="rbdForm.getValue('parent')">
  17           <label i18n
  18                  class="control-label col-sm-3"
  19                  for="name">{{ action | titlecase }} from</label>
  20           <div class="col-sm-9">
  21             <input class="form-control"
  22                    type="text"
  23                    id="parent"
  24                    name="parent"
  25                    formControlName="parent">
  26             <hr>
  27           </div>
  28         </div>
  29
  30         <!-- Name -->
  31         <div class="form-group"
  32              [ngClass]="{'has-error': rbdForm.showError('name', formDir)}">
  33           <label class="control-label col-sm-3"
  34                  for="name">
  35             <ng-container i18n>Name</ng-container>
  36             <span class="required"></span>
  37           </label>
  38           <div class="col-sm-9">
  39             <input class="form-control"
  40                    type="text"
  41                    placeholder="Name..."
  42                    id="name"
  43                    name="name"
  44                    formControlName="name"
  45                    autofocus>
  46             <span class="help-block"
  47                   *ngIf="rbdForm.showError('name', formDir, 'required')">
  48               <ng-container i18n>This field is required.</ng-container>
  49             </span>
  50             <span class="help-block"
  51                   *ngIf="rbdForm.showError('name', formDir, 'pattern')">
  52               <ng-container i18n>'/' and '@' are not allowed.</ng-container>
  53             </span>
  54           </div>
  55         </div>
  56
  57         <!-- Pool -->
  58         <div class="form-group"
  59              [ngClass]="{'has-error': rbdForm.showError('pool', formDir)}"
  60              (change)="onPoolChange($event.target.value)">
  61           <label class="control-label col-sm-3"
  62                  for="pool">
  63             Pool
  64             <span class="required"
  65                   *ngIf="mode !== 'editing'"></span>
  66           </label>
  67           <div class="col-sm-9">
  68             <input class="form-control"
  69                    type="text"
  70                    placeholder="Pool name..."
  71                    id="pool"
  72                    name="pool"
  73                    formControlName="pool"
  74                    *ngIf="mode === 'editing' || !poolPermission.read">
  75             <select id="pool"
  76                     name="pool"
  77                     class="form-control"
  78                     formControlName="pool"
  79                     *ngIf="mode !== 'editing' && poolPermission.read">
  80               <option *ngIf="pools === null"
  81                       [ngValue]="null"
  82                       i18n>Loading...</option>
  83               <option *ngIf="pools !== null && pools.length === 0"
  84                       [ngValue]="null"
  85                       i18n>-- No rbd pools available --</option>
  86               <option *ngIf="pools !== null && pools.length > 0"
  87                       [ngValue]="null"
  88                       i18n>-- Select a pool --</option>
  89               <option *ngFor="let pool of pools"
  90                       [value]="pool.pool_name">{{ pool.pool_name }}</option>
  91             </select>
  92             <span *ngIf="rbdForm.showError('pool', formDir, 'required')"
  93                   class="help-block"
  94                   i18n>This field is required.</span>
  95           </div>
  96         </div>
  97
  98         <!-- Use a dedicated pool -->
  99         <div class="form-group">
 100           <div class="col-sm-offset-3 col-sm-9">
 101             <div class="checkbox checkbox-primary">
 102               <input type="checkbox"
 103                      id="useDataPool"
 104                      name="useDataPool"
 105                      formControlName="useDataPool"
 106                      (change)="onUseDataPoolChange()">
 107               <label i18n
 108                      for="useDataPool">Use a dedicated data pool</label>
 109             </div>
 110           </div>
 111         </div>
 112
 113         <!-- Data Pool -->
 114         <div class="form-group"
 115              [ngClass]="{'has-error': rbdForm.showError('dataPool', formDir)}"
 116              *ngIf="rbdForm.getValue('useDataPool')">
 117           <label class="control-label col-sm-3"
 118                  for="dataPool">
 119             <ng-container i18n>Data pool</ng-container>
 120             <span class="required"
 121                   *ngIf="mode !== 'editing'"></span>
 122             <cd-helper i18n-html
 123                        html="Dedicated pool that stores the object-data of the RBD.">
 124             </cd-helper>
 125           </label>
 126           <div class="col-sm-9">
 127             <input class="form-control"
 128                    type="text"
 129                    placeholder="Data pool name..."
 130                    id="dataPool"
 131                    name="dataPool"
 132                    formControlName="dataPool"
 133                    *ngIf="mode === 'editing' || !poolPermission.read">
 134             <select id="dataPool"
 135                     name="dataPool"
 136                     class="form-control"
 137                     formControlName="dataPool"
 138                     (change)="onDataPoolChange($event.target.value)"
 139                     *ngIf="mode !== 'editing' && poolPermission.read">
 140               <option *ngIf="dataPools === null"
 141                       [ngValue]="null"
 142                       i18n>Loading...</option>
 143               <option *ngIf="dataPools !== null && dataPools.length === 0"
 144                       [ngValue]="null"
 145                       i18n>-- No data pools available --</option>
 146               <option *ngIf="dataPools !== null && dataPools.length > 0"
 147                       [ngValue]="null">-- Select a data pool --
 148               </option>
 149               <option *ngFor="let dataPool of dataPools"
 150                       [value]="dataPool.pool_name">{{ dataPool.pool_name }}</option>
 151             </select>
 152             <span class="help-block"
 153                   *ngIf="rbdForm.showError('dataPool', formDir, 'required')"
 154                   i18n>This field is required.</span>
 155           </div>
 156         </div>
 157
 158         <!-- Size -->
 159         <div class="form-group"
 160              [ngClass]="{'has-error': rbdForm.showError('size', formDir)}">
 161           <label class="control-label col-sm-3"
 162                  for="size">
 163             <ng-container i18n>Size</ng-container>
 164             <span class="required"></span>
 165           </label>
 166           <div class="col-sm-9">
 167             <input id="size"
 168                    name="size"
 169                    class="form-control"
 170                    type="text"
 171                    formControlName="size"
 172                    i18n-placeholder
 173                    placeholder="e.g., 10GiB"
 174                    defaultUnit="GiB"
 175                    cdDimlessBinary>
 176             <span class="help-block"
 177                   *ngIf="rbdForm.showError('size', formDir, 'required')"
 178                   i18n>This field is required.</span>
 179             <span class="help-block"
 180                   *ngIf="rbdForm.showError('size', formDir, 'invalidSizeObject')"
 181                   i18n>You have to increase the size.</span>
 182           </div>
 183         </div>
 184
 185         <!-- Features -->
 186         <div class="form-group"
 187              [ngClass]="{'has-error': (formDir.submitted || rbdForm.get('features').dirty) && rbdForm.get('features').invalid}"
 188              formGroupName="features">
 189           <label i18n
 190                  class="col-sm-3 control-label"
 191                  for="features">Features</label>
 192           <div class="col-sm-9">
 193             <div class="checkbox checkbox-primary"
 194                  *ngFor="let feature of featuresList">
 195               <input type="checkbox"
 196                      id="{{ feature.key }}"
 197                      name="{{ feature.key }}"
 198                      formControlName="{{ feature.key }}">
 199               <label for="{{ feature.key }}">{{ feature.desc }}</label>
 200               <cd-helper *ngIf="feature.helperHtml"
 201                          html="{{ feature.helperHtml }}">
 202               </cd-helper>
 203             </div>
 204           </div>
 205         </div>
 206
 207         <!-- Advanced -->
 208         <div class="row">
 209           <div class="col-sm-12">
 210             <a class="pull-right margin-right-md"
 211                (click)="advancedEnabled = true"
 212                *ngIf="!advancedEnabled"
 213                i18n>Advanced...</a>
 214           </div>
 215         </div>
 216         <div [hidden]="!advancedEnabled">
 217
 218           <h2 i18n
 219               class="page-header">Advanced</h2>
 220
 221           <div class="section">
 222             <h3 class="page-header" i18n>Striping</h3>
 223
 224             <!-- Object Size -->
 225             <div class="form-group"
 226                  [ngClass]="{'has-error': rbdForm.showError('obj_size', formDir)}">
 227               <label i18n
 228                      class="control-label col-sm-3"
 229                      for="size">Object size</label>
 230               <div class="col-sm-9">
 231                 <select id="obj_size"
 232                         name="obj_size"
 233                         class="form-control"
 234                         formControlName="obj_size">
 235                   <option *ngFor="let objectSize of objectSizes"
 236                           [value]="objectSize">{{ objectSize }}</option>
 237                 </select>
 238               </div>
 239             </div>
 240
 241             <!-- Stripe Unit -->
 242             <div class="form-group"
 243                  [ngClass]="{'has-error': rbdForm.showError('stripingUnit', formDir)}">
 244               <label class="control-label col-sm-3"
 245                      for="stripingUnit">
 246                 <span i18n>Stripe unit</span>
 247                 <span class="required"
 248                       *ngIf="rbdForm.getValue('stripingCount')">
 249               </span>
 250               </label>
 251               <div class="col-sm-9">
 252                 <select id="stripingUnit"
 253                         name="stripingUnit"
 254                         class="form-control"
 255                         formControlName="stripingUnit">
 256                   <option i18n
 257                           [ngValue]="null">-- Select stripe unit --</option>
 258                   <option *ngFor="let objectSize of objectSizes"
 259                           [value]="objectSize">{{ objectSize }}</option>
 260                 </select>
 261                 <span class="help-block"
 262                       *ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
 263                       i18n>This field is required because stripe count is defined!</span>
 264                 <span class="help-block"
 265                       *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
 266                       i18n>Stripe unit is greater than object size.</span>
 267               </div>
 268             </div>
 269
 270             <!-- Stripe Count -->
 271             <div class="form-group"
 272                  [ngClass]="{'has-error': rbdForm.showError('stripingCount', formDir)}">
 273               <label class="control-label col-sm-3"
 274                      for="stripingCount">
 275                 <span i18n>Stripe count</span>
 276                 <span class="required"
 277                       *ngIf="rbdForm.getValue('stripingUnit')">
 278               </span>
 279               </label>
 280               <div class="col-sm-9">
 281                 <input id="stripingCount"
 282                        name="stripingCount"
 283                        formControlName="stripingCount"
 284                        class="form-control"
 285                        type="number">
 286                 <span class="help-block"
 287                       *ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
 288                       i18n>This field is required because stripe unit is defined!</span>
 289                 <span class="help-block"
 290                       *ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
 291                       i18n>Stripe count must be greater than 0.</span>
 292               </div>
 293             </div>
 294           </div>
 295
 296           <div class="section">
 297             <cd-rbd-configuration-form [form]="rbdForm"
 298                                        [initializeData]="initializeConfigData"
 299                                        (changes)="getDirtyConfigurationValues = $event"></cd-rbd-configuration-form>
 300           </div>
 301
 302         </div>
 303
 304       </div>
 305       <div class="panel-footer">
 306         <div class="button-group text-right">
 307           <cd-submit-button
 308             [form]="formDir"
 309             (submitAction)="submit()"
 310             i18n="form action button|Example: Create Pool@@formActionButton"
 311             type="button">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
 312           <cd-back-button></cd-back-button>
 313         </div>
 314       </div>
 315     </div>
 316   </form>
 317 </div>