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           </div>
  54         </div>
  55
  56         <!-- Owner -->
  57         <div class="form-group row">
  58           <label class="cd-col-form-label required"
  59                  for="owner"
  60                  i18n>Owner</label>
  61           <div class="cd-col-form-input">
  62             <select id="owner"
  63                     name="owner"
  64                     class="form-control custom-select"
  65                     formControlName="owner"
  66                     [autofocus]="editing">
  67               <option i18n
  68                       *ngIf="owners === null"
  69                       [ngValue]="null">Loading...</option>
  70               <option i18n
  71                       *ngIf="owners !== null"
  72                       [ngValue]="null">-- Select a user --</option>
  73               <option *ngFor="let owner of owners"
  74                       [value]="owner">{{ owner }}</option>
  75             </select>
  76             <span class="invalid-feedback"
  77                   *ngIf="bucketForm.showError('owner', frm, 'required')"
  78                   i18n>This field is required.</span>
  79           </div>
  80         </div>
  81
  82         <!-- Placement target -->
  83         <div class="form-group row">
  84           <label class="cd-col-form-label"
  85                  [ngClass]="{required: !editing}"
  86                  for="placement-target"
  87                  i18n>Placement target</label>
  88           <div class="cd-col-form-input">
  89             <ng-template #placementTargetSelect>
  90               <select id="placement-target"
  91                       name="placement-target"
  92                       formControlName="placement-target"
  93                       class="form-control custom-select">
  94                 <option i18n
  95                         *ngIf="placementTargets === null"
  96                         [ngValue]="null">Loading...</option>
  97                 <option i18n
  98                         *ngIf="placementTargets !== null"
  99                         [ngValue]="null">-- Select a placement target --</option>
 100                 <option *ngFor="let placementTarget of placementTargets"
 101                         [value]="placementTarget.name">{{ placementTarget.description }}</option>
 102               </select>
 103               <span class="invalid-feedback"
 104                     *ngIf="bucketForm.showError('placement-target', frm, 'required')"
 105                     i18n>This field is required.</span>
 106             </ng-template>
 107             <ng-container *ngIf="editing; else placementTargetSelect">
 108               <input id="placement-target"
 109                      name="placement-target"
 110                      formControlName="placement-target"
 111                      class="form-control"
 112                      type="text"
 113                      readonly>
 114             </ng-container>
 115           </div>
 116         </div>
 117
 118         <!-- Versioning -->
 119         <fieldset *ngIf="editing">
 120           <legend class="cd-header"
 121                   i18n>Versioning</legend>
 122
 123           <div class="form-group row">
 124             <div class="cd-col-form-offset">
 125               <div class="custom-control custom-checkbox">
 126                 <input type="checkbox"
 127                        class="custom-control-input"
 128                        id="versioning"
 129                        name="versioning"
 130                        formControlName="versioning"
 131                        (change)="setMfaDeleteValidators()">
 132                 <label class="custom-control-label"
 133                        for="versioning"
 134                        i18n>Enabled</label>
 135                 <cd-helper>
 136                   <span i18n>Enables versioning for the objects in the bucket.</span>
 137                 </cd-helper>
 138               </div>
 139             </div>
 140           </div>
 141         </fieldset>
 142
 143         <!-- Multi-Factor Authentication -->
 144         <fieldset *ngIf="editing">
 145           <!-- MFA Delete -->
 146           <legend class="cd-header"
 147                   i18n>Multi-Factor Authentication</legend>
 148
 149           <div class="form-group row">
 150             <div class="cd-col-form-offset">
 151               <div class="custom-control custom-checkbox">
 152                 <input type="checkbox"
 153                        class="custom-control-input"
 154                        id="mfa-delete"
 155                        name="mfa-delete"
 156                        formControlName="mfa-delete"
 157                        (change)="setMfaDeleteValidators()">
 158                 <label class="custom-control-label"
 159                        for="mfa-delete"
 160                        i18n>Delete enabled</label>
 161                 <cd-helper>
 162                   <span i18n>Enables MFA (multi-factor authentication) Delete, which requires additional authentication for changing the bucket versioning state.</span>
 163                 </cd-helper>
 164               </div>
 165             </div>
 166           </div>
 167           <div *ngIf="areMfaCredentialsRequired()"
 168                class="form-group row">
 169             <label i18n
 170                    class="cd-col-form-label"
 171                    for="mfa-token-serial">Token Serial Number</label>
 172             <div class="cd-col-form-input">
 173               <input type="text"
 174                      id="mfa-token-serial"
 175                      name="mfa-token-serial"
 176                      formControlName="mfa-token-serial"
 177                      class="form-control">
 178               <span class="invalid-feedback"
 179                     *ngIf="bucketForm.showError('mfa-token-serial', frm, 'required')"
 180                     i18n>This field is required.</span>
 181             </div>
 182           </div>
 183           <div *ngIf="areMfaCredentialsRequired()"
 184                class="form-group row">
 185             <label i18n
 186                    class="cd-col-form-label"
 187                    for="mfa-token-pin">Token PIN</label>
 188             <div class="cd-col-form-input">
 189               <input type="text"
 190                      id="mfa-token-pin"
 191                      name="mfa-token-pin"
 192                      formControlName="mfa-token-pin"
 193                      class="form-control">
 194               <span class="invalid-feedback"
 195                     *ngIf="bucketForm.showError('mfa-token-pin', frm, 'required')"
 196                     i18n>This field is required.</span>
 197             </div>
 198           </div>
 199         </fieldset>
 200
 201         <!-- Locking -->
 202         <fieldset>
 203           <legend class="cd-header"
 204                   i18n>Locking</legend>
 205
 206           <!-- Locking enabled -->
 207           <div class="form-group row">
 208             <div class="cd-col-form-offset">
 209               <div class="custom-control custom-checkbox">
 210                 <input class="custom-control-input"
 211                        id="lock_enabled"
 212                        formControlName="lock_enabled"
 213                        type="checkbox">
 214                 <label class="custom-control-label"
 215                        for="lock_enabled"
 216                        i18n>Enabled</label>
 217                 <cd-helper>
 218                   <span i18n>Enables locking for the objects in the bucket. Locking can only be enabled while creating a bucket.</span>
 219                 </cd-helper>
 220               </div>
 221             </div>
 222           </div>
 223
 224           <!-- Locking mode -->
 225           <div *ngIf="bucketForm.getValue('lock_enabled')"
 226                class="form-group row">
 227             <label class="cd-col-form-label"
 228                    for="lock_mode"
 229                    i18n>Mode</label>
 230             <div class="cd-col-form-input">
 231               <select class="form-control custom-select"
 232                       formControlName="lock_mode"
 233                       name="lock_mode"
 234                       id="lock_mode">
 235                 <option i18n
 236                         value="COMPLIANCE">Compliance</option>
 237                 <option i18n
 238                         value="GOVERNANCE">Governance</option>
 239               </select>
 240             </div>
 241           </div>
 242
 243           <!-- Retention period (days) -->
 244           <div *ngIf="bucketForm.getValue('lock_enabled')"
 245                class="form-group row">
 246             <label class="cd-col-form-label"
 247                    for="lock_retention_period_days">
 248               <ng-container i18n>Days</ng-container>
 249               <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>
 250             </label>
 251             <div class="cd-col-form-input">
 252               <input class="form-control"
 253                      type="number"
 254                      id="lock_retention_period_days"
 255                      formControlName="lock_retention_period_days"
 256                      min="0">
 257               <span class="invalid-feedback"
 258                     *ngIf="bucketForm.showError('lock_retention_period_days', frm, 'pattern')"
 259                     i18n>The entered value must be a positive integer.</span>
 260               <span class="invalid-feedback"
 261                     *ngIf="bucketForm.showError('lock_retention_period_days', frm, 'eitherDaysOrYears')"
 262                     i18n>Retention period requires either Days or Years.</span>
 263             </div>
 264           </div>
 265
 266           <!-- Retention period (years) -->
 267           <div *ngIf="bucketForm.getValue('lock_enabled')"
 268                class="form-group row">
 269             <label class="cd-col-form-label"
 270                    for="lock_retention_period_years">
 271               <ng-container i18n>Years</ng-container>
 272               <cd-helper i18n>The number of years that you want to specify for the default retention period that will be applied to new objects placed in this bucket.</cd-helper>
 273             </label>
 274             <div class="cd-col-form-input">
 275               <input class="form-control"
 276                      type="number"
 277                      id="lock_retention_period_years"
 278                      formControlName="lock_retention_period_years"
 279                      min="0">
 280               <span class="invalid-feedback"
 281                     *ngIf="bucketForm.showError('lock_retention_period_days', frm, 'pattern')"
 282                     i18n>The entered value must be a positive integer.</span>
 283               <span class="invalid-feedback"
 284                     *ngIf="bucketForm.showError('lock_retention_period_years', frm, 'eitherDaysOrYears')"
 285                     i18n>Retention period requires either Days or Years.</span>
 286             </div>
 287           </div>
 288         </fieldset>
 289
 290       </div>
 291       <div class="card-footer">
 292         <cd-form-button-panel (submitActionEvent)="submit()"
 293                               [form]="bucketForm"
 294                               [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
 295                               wrappingClass="text-right"></cd-form-button-panel>
 296       </div>
 297     </div>
 298   </form>
 299 </div>