ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html

   1 <div class="cd-col-form"
   2      *cdFormLoading="loading">
   3   <form name="bucketForm"
   4         #frm="ngForm"
   5         [formGroup]="bucketForm"
   6         novalidate>
   7     <div class="card">
   8       <div i18n="form title|Example: Create Pool@@formTitle"
   9            class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
  10
  11       <div class="card-body">
  12         <!-- Id -->
  13         <div class="form-group row"
  14              *ngIf="editing">
  15           <label i18n
  16                  class="cd-col-form-label"
  17                  for="id">Id</label>
  18           <div class="cd-col-form-input">
  19             <input id="id"
  20                    name="id"
  21                    class="form-control"
  22                    type="text"
  23                    formControlName="id"
  24                    readonly>
  25           </div>
  26         </div>
  27
  28         <!-- Name -->
  29         <div class="form-group row">
  30           <label class="cd-col-form-label"
  31                  [ngClass]="{required: !editing}"
  32                  for="bid"
  33                  i18n>Name</label>
  34           <div class="cd-col-form-input">
  35             <input id="bid"
  36                    name="bid"
  37                    class="form-control"
  38                    type="text"
  39                    i18n-placeholder
  40                    placeholder="Name..."
  41                    formControlName="bid"
  42                    [readonly]="editing"
  43                    [autofocus]="!editing">
  44             <span class="invalid-feedback"
  45                   *ngIf="bucketForm.showError('bid', frm, 'required')"
  46                   i18n>This field is required.</span>
  47             <span class="invalid-feedback"
  48                   *ngIf="bucketForm.showError('bid', frm, 'bucketNameInvalid')"
  49                   i18n>The value is not valid.</span>
  50             <span class="invalid-feedback"
  51                   *ngIf="bucketForm.showError('bid', frm, 'bucketNameExists')"
  52                   i18n>The chosen name is already in use.</span>
  53             <span class="invalid-feedback"
  54                   *ngIf="bucketForm.showError('bid', frm, 'containsUpperCase')"
  55                   i18n>Bucket names must not contain uppercase characters or underscores.</span>
  56             <span class="invalid-feedback"
  57                   *ngIf="bucketForm.showError('bid', frm, 'lowerCaseOrNumber')"
  58                   i18n>Each label must start and end with a lowercase letter or a number.</span>
  59             <span class="invalid-feedback"
  60                   *ngIf="bucketForm.showError('bid', frm, 'ipAddress')"
  61                   i18n>Bucket names cannot be formatted as IP address.</span>
  62             <span class="invalid-feedback"
  63                   *ngIf="bucketForm.showError('bid', frm, 'onlyLowerCaseAndNumbers')"
  64                   i18n>Bucket names can only contain lowercase letters, numbers, and hyphens.</span>
  65             <span class="invalid-feedback"
  66                   *ngIf="bucketForm.showError('bid', frm, 'shouldBeInRange')"
  67                   i18n>Bucket names must be 3 to 63 characters long.</span>
  68           </div>
  69         </div>
  70
  71         <!-- Owner -->
  72         <div class="form-group row">
  73           <label class="cd-col-form-label required"
  74                  for="owner"
  75                  i18n>Owner</label>
  76           <div class="cd-col-form-input">
  77             <select id="owner"
  78                     name="owner"
  79                     class="form-control custom-select"
  80                     formControlName="owner"
  81                     [autofocus]="editing">
  82               <option i18n
  83                       *ngIf="owners === null"
  84                       [ngValue]="null">Loading...</option>
  85               <option i18n
  86                       *ngIf="owners !== null"
  87                       [ngValue]="null">-- Select a user --</option>
  88               <option *ngFor="let owner of owners"
  89                       [value]="owner">{{ owner }}</option>
  90             </select>
  91             <span class="invalid-feedback"
  92                   *ngIf="bucketForm.showError('owner', frm, 'required')"
  93                   i18n>This field is required.</span>
  94           </div>
  95         </div>
  96
  97         <!-- Placement target -->
  98         <div class="form-group row">
  99           <label class="cd-col-form-label"
 100                  [ngClass]="{required: !editing}"
 101                  for="placement-target"
 102                  i18n>Placement target</label>
 103           <div class="cd-col-form-input">
 104             <ng-template #placementTargetSelect>
 105               <select id="placement-target"
 106                       name="placement-target"
 107                       formControlName="placement-target"
 108                       class="form-control custom-select">
 109                 <option i18n
 110                         *ngIf="placementTargets === null"
 111                         [ngValue]="null">Loading...</option>
 112                 <option i18n
 113                         *ngIf="placementTargets !== null"
 114                         [ngValue]="null">-- Select a placement target --</option>
 115                 <option *ngFor="let placementTarget of placementTargets"
 116                         [value]="placementTarget.name">{{ placementTarget.description }}</option>
 117               </select>
 118               <span class="invalid-feedback"
 119                     *ngIf="bucketForm.showError('placement-target', frm, 'required')"
 120                     i18n>This field is required.</span>
 121             </ng-template>
 122             <ng-container *ngIf="editing; else placementTargetSelect">
 123               <input id="placement-target"
 124                      name="placement-target"
 125                      formControlName="placement-target"
 126                      class="form-control"
 127                      type="text"
 128                      readonly>
 129             </ng-container>
 130           </div>
 131         </div>
 132
 133         <!-- Versioning -->
 134         <fieldset *ngIf="editing">
 135           <legend class="cd-header"
 136                   i18n>Versioning</legend>
 137
 138           <div class="form-group row">
 139             <div class="cd-col-form-offset">
 140               <div class="custom-control custom-checkbox">
 141                 <input type="checkbox"
 142                        class="custom-control-input"
 143                        id="versioning"
 144                        name="versioning"
 145                        formControlName="versioning"
 146                        (change)="setMfaDeleteValidators()">
 147                 <label class="custom-control-label"
 148                        for="versioning"
 149                        i18n>Enabled</label>
 150                 <cd-helper>
 151                   <span i18n>Enables versioning for the objects in the bucket.</span>
 152                 </cd-helper>
 153               </div>
 154             </div>
 155           </div>
 156         </fieldset>
 157
 158         <!-- Multi-Factor Authentication -->
 159         <fieldset *ngIf="editing">
 160           <!-- MFA Delete -->
 161           <legend class="cd-header"
 162                   i18n>Multi-Factor Authentication</legend>
 163
 164           <div class="form-group row">
 165             <div class="cd-col-form-offset">
 166               <div class="custom-control custom-checkbox">
 167                 <input type="checkbox"
 168                        class="custom-control-input"
 169                        id="mfa-delete"
 170                        name="mfa-delete"
 171                        formControlName="mfa-delete"
 172                        (change)="setMfaDeleteValidators()">
 173                 <label class="custom-control-label"
 174                        for="mfa-delete"
 175                        i18n>Delete enabled</label>
 176                 <cd-helper>
 177                   <span i18n>Enables MFA (multi-factor authentication) Delete, which requires additional authentication for changing the bucket versioning state.</span>
 178                 </cd-helper>
 179               </div>
 180             </div>
 181           </div>
 182           <div *ngIf="areMfaCredentialsRequired()"
 183                class="form-group row">
 184             <label i18n
 185                    class="cd-col-form-label"
 186                    for="mfa-token-serial">Token Serial Number</label>
 187             <div class="cd-col-form-input">
 188               <input type="text"
 189                      id="mfa-token-serial"
 190                      name="mfa-token-serial"
 191                      formControlName="mfa-token-serial"
 192                      class="form-control">
 193               <span class="invalid-feedback"
 194                     *ngIf="bucketForm.showError('mfa-token-serial', frm, 'required')"
 195                     i18n>This field is required.</span>
 196             </div>
 197           </div>
 198           <div *ngIf="areMfaCredentialsRequired()"
 199                class="form-group row">
 200             <label i18n
 201                    class="cd-col-form-label"
 202                    for="mfa-token-pin">Token PIN</label>
 203             <div class="cd-col-form-input">
 204               <input type="text"
 205                      id="mfa-token-pin"
 206                      name="mfa-token-pin"
 207                      formControlName="mfa-token-pin"
 208                      class="form-control">
 209               <span class="invalid-feedback"
 210                     *ngIf="bucketForm.showError('mfa-token-pin', frm, 'required')"
 211                     i18n>This field is required.</span>
 212             </div>
 213           </div>
 214         </fieldset>
 215
 216         <!-- Locking -->
 217         <fieldset>
 218           <legend class="cd-header"
 219                   i18n>Locking</legend>
 220
 221           <!-- Locking enabled -->
 222           <div class="form-group row">
 223             <div class="cd-col-form-offset">
 224               <div class="custom-control custom-checkbox">
 225                 <input class="custom-control-input"
 226                        id="lock_enabled"
 227                        formControlName="lock_enabled"
 228                        type="checkbox">
 229                 <label class="custom-control-label"
 230                        for="lock_enabled"
 231                        i18n>Enabled</label>
 232                 <cd-helper>
 233                   <span i18n>Enables locking for the objects in the bucket. Locking can only be enabled while creating a bucket.</span>
 234                 </cd-helper>
 235               </div>
 236             </div>
 237           </div>
 238
 239           <!-- Locking mode -->
 240           <div *ngIf="bucketForm.getValue('lock_enabled')"
 241                class="form-group row">
 242             <label class="cd-col-form-label"
 243                    for="lock_mode"
 244                    i18n>Mode</label>
 245             <div class="cd-col-form-input">
 246               <select class="form-control custom-select"
 247                       formControlName="lock_mode"
 248                       name="lock_mode"
 249                       id="lock_mode">
 250                 <option i18n
 251                         value="COMPLIANCE">Compliance</option>
 252                 <option i18n
 253                         value="GOVERNANCE">Governance</option>
 254               </select>
 255             </div>
 256           </div>
 257
 258           <!-- Retention period (days) -->
 259           <div *ngIf="bucketForm.getValue('lock_enabled')"
 260                class="form-group row">
 261             <label class="cd-col-form-label"
 262                    for="lock_retention_period_days">
 263               <ng-container i18n>Days</ng-container>
 264               <cd-helper i18n>The number of days that you want to specify for the default retention period that will be applied to new objects placed in this bucket.</cd-helper>
 265             </label>
 266             <div class="cd-col-form-input">
 267               <input class="form-control"
 268                      type="number"
 269                      id="lock_retention_period_days"
 270                      formControlName="lock_retention_period_days"
 271                      min="0">
 272               <span class="invalid-feedback"
 273                     *ngIf="bucketForm.showError('lock_retention_period_days', frm, 'pattern')"
 274                     i18n>The entered value must be a positive integer.</span>
 275               <span class="invalid-feedback"
 276                     *ngIf="bucketForm.showError('lock_retention_period_days', frm, 'lockDays')"
 277                     i18n>Retention Days must be a positive integer.</span>
 278             </div>
 279           </div>
 280         </fieldset>
 281
 282       </div>
 283       <div class="card-footer">
 284         <cd-form-button-panel (submitActionEvent)="submit()"
 285                               [form]="bucketForm"
 286                               [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
 287                               wrappingClass="text-right"></cd-form-button-panel>
 288       </div>
 289     </div>
 290   </form>
 291 </div>