ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-subvolumegroup-form/cephfs-subvolumegroup-form.component.html

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container i18n="form title"
   3                 class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
   4
   5   <ng-container class="modal-content"
   6                 *cdFormLoading="loading">
   7     <form name="subvolumegroupForm"
   8           #formDir="ngForm"
   9           [formGroup]="subvolumegroupForm"
  10           novalidate>
  11       <div class="modal-body">
  12         <div class="form-group row">
  13           <label class="cd-col-form-label required"
  14                  for="subvolumegroupName"
  15                  i18n>Name</label>
  16           <div class="cd-col-form-input">
  17             <input class="form-control"
  18                    type="text"
  19                    placeholder="subvolumegroup name..."
  20                    id="subvolumegroupName"
  21                    name="subvolumegroupName"
  22                    formControlName="subvolumegroupName"
  23                    autofocus>
  24             <span class="invalid-feedback"
  25                   *ngIf="subvolumegroupForm.showError('subvolumegroupName', formDir, 'required')"
  26                   i18n>This field is required.</span>
  27             <span class="invalid-feedback"
  28                   *ngIf="subvolumegroupForm.showError('subvolumegroupName', formDir, 'notUnique')"
  29                   i18n>The subvolume group already exists.</span>
  30             <span *ngIf="subvolumegroupForm.showError('subvolumegroupName', formDir, 'pattern')"
  31                   class="invalid-feedback"
  32                   i18n>Subvolume name can only contain letters, numbers, '.', '-' or '_'</span>
  33           </div>
  34         </div>
  35
  36         <!-- Volume name -->
  37         <div class="form-group row">
  38           <label class="cd-col-form-label"
  39                  for="volumeName"
  40                  i18n>Volume name</label>
  41           <div class="cd-col-form-input">
  42             <input class="form-control"
  43                    id="volumeName"
  44                    name="volumeName"
  45                    formControlName="volumeName">
  46           </div>
  47         </div>
  48
  49         <!-- Size -->
  50         <div class="form-group row">
  51           <label class="cd-col-form-label"
  52                  for="size"
  53                  i18n>Size
  54             <cd-helper>The size of the subvolume group is specified by setting a quota on it.
  55             If left blank or put 0, then quota will be infinite</cd-helper>
  56           </label>
  57           <div class="cd-col-form-input">
  58             <input class="form-control"
  59                    type="text"
  60                    id="size"
  61                    name="size"
  62                    formControlName="size"
  63                    i18n-placeholder
  64                    placeholder="e.g., 10GiB"
  65                    defaultUnit="GiB"
  66                    cdDimlessBinary>
  67             <span *ngIf="subvolumegroupForm.showError('size', formDir, 'pattern')"
  68                   class="invalid-feedback"
  69                   i18n>Size must be a number or in a valid format. eg: 5 GiB</span>
  70           </div>
  71         </div>
  72
  73         <!-- CephFS Pools -->
  74         <div class="form-group row">
  75           <label class="cd-col-form-label"
  76                  for="pool"
  77                  i18n>Pool
  78             <cd-helper>By default, the data_pool_layout of the parent directory is selected.</cd-helper>
  79           </label>
  80           <div class="cd-col-form-input">
  81             <select class="form-select"
  82                     id="pool"
  83                     name="pool"
  84                     formControlName="pool">
  85               <option *ngFor="let pool of dataPools"
  86                       [value]="pool.pool">{{ pool.pool }}</option>
  87             </select>
  88           </div>
  89         </div>
  90
  91         <!-- UID -->
  92         <div class="form-group row">
  93           <label class="cd-col-form-label"
  94                  for="uid"
  95                  i18n>UID</label>
  96           <div class="cd-col-form-input">
  97             <input class="form-control"
  98                    type="number"
  99                    placeholder="subvolumegroup UID..."
 100                    id="uid"
 101                    name="uid"
 102                    formControlName="uid">
 103           </div>
 104         </div>
 105
 106         <!-- GID -->
 107         <div class="form-group row">
 108           <label class="cd-col-form-label"
 109                  for="gid"
 110                  i18n>GID</label>
 111           <div class="cd-col-form-input">
 112             <input class="form-control"
 113                    type="number"
 114                    placeholder="subvolumegroup GID..."
 115                    id="gid"
 116                    name="gid"
 117                    formControlName="gid">
 118           </div>
 119         </div>
 120
 121         <!-- Mode -->
 122         <div class="form-group row">
 123           <label class="cd-col-form-label"
 124                  for="mode"
 125                  i18n>Mode
 126             <cd-helper>Permissions for the directory. Default mode is 755 which is rwxr-xr-x</cd-helper>
 127           </label>
 128           <div class="cd-col-form-input">
 129             <cd-checked-table-form [data]="scopePermissions"
 130                                    [columns]="columns"
 131                                    [form]="subvolumegroupForm"
 132                                    inputField="mode"
 133                                    [isTableForOctalMode]="true"
 134                                    [initialValue]="initialMode"
 135                                    [scopes]="scopes"
 136                                    [isDisabled]="isEdit"></cd-checked-table-form>
 137           </div>
 138         </div>
 139       </div>
 140
 141       <div class="modal-footer">
 142         <cd-form-button-panel (submitActionEvent)="submit()"
 143                               [form]="subvolumegroupForm"
 144                               [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 145       </div>
 146     </form>
 147   </ng-container>
 148 </cd-modal>