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

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