import ceph quincy 17.2.6

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

<div class="cd-col-form"
     *cdFormLoading="loading">
  <form name="bucketForm"
        #frm="ngForm"
        [formGroup]="bucketForm"
        novalidate>
    <div class="card">
      <div i18n="form title"
           class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>

      <div class="card-body">
        <!-- Id -->
        <div class="form-group row"
             *ngIf="editing">
          <label i18n
                 class="cd-col-form-label"
                 for="id">Id</label>
          <div class="cd-col-form-input">
            <input id="id"
                   name="id"
                   class="form-control"
                   type="text"
                   formControlName="id"
                   readonly>
          </div>
        </div>

        <!-- Name -->
        <div class="form-group row">
          <label class="cd-col-form-label"
                 [ngClass]="{required: !editing}"
                 for="bid"
                 i18n>Name</label>
          <div class="cd-col-form-input">
            <input id="bid"
                   name="bid"
                   class="form-control"
                   type="text"
                   i18n-placeholder
                   placeholder="Name..."
                   formControlName="bid"
                   [readonly]="editing"
                   [autofocus]="!editing">
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'required')"
                  i18n>This field is required.</span>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'bucketNameInvalid')"
                  i18n>Bucket names can only contain lowercase letters, numbers, periods and hyphens.</span>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'bucketNameNotAllowed')"
                  i18n>The chosen name is already in use.</span>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'containsUpperCase')"
                  i18n>Bucket names must not contain uppercase characters or underscores.</span>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'lowerCaseOrNumber')"
                  i18n>Each label must start and end with a lowercase letter or a number.</span>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'ipAddress')"
                  i18n>Bucket names cannot be formatted as IP address.</span>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'onlyLowerCaseAndNumbers')"
                  i18n>Bucket labels cannot be empty and can only contain lowercase letters, numbers and hyphens.</span>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('bid', frm, 'shouldBeInRange')"
                  i18n>Bucket names must be 3 to 63 characters long.</span>
          </div>
        </div>

        <!-- Owner -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="owner"
                 i18n>Owner</label>
          <div class="cd-col-form-input">
            <select id="owner"
                    name="owner"
                    class="form-select"
                    formControlName="owner"
                    [autofocus]="editing">
              <option i18n
                      *ngIf="owners === null"
                      [ngValue]="null">Loading...</option>
              <option i18n
                      *ngIf="owners !== null"
                      [ngValue]="null">-- Select a user --</option>
              <option *ngFor="let owner of owners"
                      [value]="owner">{{ owner }}</option>
            </select>
            <span class="invalid-feedback"
                  *ngIf="bucketForm.showError('owner', frm, 'required')"
                  i18n>This field is required.</span>
          </div>
        </div>

        <!-- Placement target -->
        <div class="form-group row">
          <label class="cd-col-form-label"
                 [ngClass]="{required: !editing}"
                 for="placement-target"
                 i18n>Placement target</label>
          <div class="cd-col-form-input">
            <ng-template #placementTargetSelect>
              <select id="placement-target"
                      name="placement-target"
                      formControlName="placement-target"
                      class="form-select">
                <option i18n
                        *ngIf="placementTargets === null"
                        [ngValue]="null">Loading...</option>
                <option i18n
                        *ngIf="placementTargets !== null"
                        [ngValue]="null">-- Select a placement target --</option>
                <option *ngFor="let placementTarget of placementTargets"
                        [value]="placementTarget.name">{{ placementTarget.description }}</option>
              </select>
              <span class="invalid-feedback"
                    *ngIf="bucketForm.showError('placement-target', frm, 'required')"
                    i18n>This field is required.</span>
            </ng-template>
            <ng-container *ngIf="editing; else placementTargetSelect">
              <input id="placement-target"
                     name="placement-target"
                     formControlName="placement-target"
                     class="form-control"
                     type="text"
                     readonly>
            </ng-container>
          </div>
        </div>

        <!-- Versioning -->
        <fieldset *ngIf="editing">
          <legend class="cd-header"
                  i18n>Versioning</legend>

          <div class="form-group row">
            <div class="cd-col-form-offset">
              <div class="custom-control custom-checkbox">
                <input type="checkbox"
                       class="custom-control-input"
                       id="versioning"
                       name="versioning"
                       formControlName="versioning"
                       (change)="setMfaDeleteValidators()">
                <label class="custom-control-label"
                       for="versioning"
                       i18n>Enabled</label>
                <cd-helper>
                  <span i18n>Enables versioning for the objects in the bucket.</span>
                </cd-helper>
              </div>
            </div>
          </div>
        </fieldset>

        <!-- Multi-Factor Authentication -->
        <fieldset *ngIf="editing">
          <!-- MFA Delete -->
          <legend class="cd-header"
                  i18n>Multi-Factor Authentication</legend>

          <div class="form-group row">
            <div class="cd-col-form-offset">
              <div class="custom-control custom-checkbox">
                <input type="checkbox"
                       class="custom-control-input"
                       id="mfa-delete"
                       name="mfa-delete"
                       formControlName="mfa-delete"
                       (change)="setMfaDeleteValidators()">
                <label class="custom-control-label"
                       for="mfa-delete"
                       i18n>Delete enabled</label>
                <cd-helper>
                  <span i18n>Enables MFA (multi-factor authentication) Delete, which requires additional authentication for changing the bucket versioning state.</span>
                </cd-helper>
              </div>
            </div>
          </div>
          <div *ngIf="areMfaCredentialsRequired()"
               class="form-group row">
            <label i18n
                   class="cd-col-form-label"
                   for="mfa-token-serial">Token Serial Number</label>
            <div class="cd-col-form-input">
              <input type="text"
                     id="mfa-token-serial"
                     name="mfa-token-serial"
                     formControlName="mfa-token-serial"
                     class="form-control">
              <span class="invalid-feedback"
                    *ngIf="bucketForm.showError('mfa-token-serial', frm, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
          <div *ngIf="areMfaCredentialsRequired()"
               class="form-group row">
            <label i18n
                   class="cd-col-form-label"
                   for="mfa-token-pin">Token PIN</label>
            <div class="cd-col-form-input">
              <input type="text"
                     id="mfa-token-pin"
                     name="mfa-token-pin"
                     formControlName="mfa-token-pin"
                     class="form-control">
              <span class="invalid-feedback"
                    *ngIf="bucketForm.showError('mfa-token-pin', frm, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
        </fieldset>

        <!-- Locking -->
        <fieldset>
          <legend class="cd-header"
                  i18n>Locking</legend>

          <!-- Locking enabled -->
          <div class="form-group row">
            <div class="cd-col-form-offset">
              <div class="custom-control custom-checkbox">
                <input class="custom-control-input"
                       id="lock_enabled"
                       formControlName="lock_enabled"
                       type="checkbox">
                <label class="custom-control-label"
                       for="lock_enabled"
                       i18n>Enabled</label>
                <cd-helper>
                  <span i18n>Enables locking for the objects in the bucket. Locking can only be enabled while creating a bucket.</span>
                </cd-helper>
              </div>
            </div>
          </div>

          <!-- Locking mode -->
          <div *ngIf="bucketForm.getValue('lock_enabled')"
               class="form-group row">
            <label class="cd-col-form-label"
                   for="lock_mode"
                   i18n>Mode</label>
            <div class="cd-col-form-input">
              <select class="form-select"
                      formControlName="lock_mode"
                      name="lock_mode"
                      id="lock_mode">
                <option i18n
                        value="COMPLIANCE">Compliance</option>
                <option i18n
                        value="GOVERNANCE">Governance</option>
              </select>
            </div>
          </div>

          <!-- Retention period (days) -->
          <div *ngIf="bucketForm.getValue('lock_enabled')"
               class="form-group row">
            <label class="cd-col-form-label"
                   for="lock_retention_period_days">
              <ng-container i18n>Days</ng-container>
              <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>
            </label>
            <div class="cd-col-form-input">
              <input class="form-control"
                     type="number"
                     id="lock_retention_period_days"
                     formControlName="lock_retention_period_days"
                     min="0">
              <span class="invalid-feedback"
                    *ngIf="bucketForm.showError('lock_retention_period_days', frm, 'pattern')"
                    i18n>The entered value must be a positive integer.</span>
              <span class="invalid-feedback"
                    *ngIf="bucketForm.showError('lock_retention_period_days', frm, 'lockDays')"
                    i18n>Retention Days must be a positive integer.</span>
            </div>
          </div>
        </fieldset>

        <fieldset>
          <legend class="cd-header"
                  i18n>Security</legend>
          <div class="form-group row">
            <div class="cd-col-form-offset">
              <div class="custom-control custom-checkbox">
                <input class="form-check-input"
                       id="encryption_enabled"
                       name="encryption_enabled"
                       formControlName="encryption_enabled"
                       type="checkbox"
                       [attr.disabled]="!kmsVaultConfig && !s3VaultConfig ? true : null">
                <label class="form-check-label"
                       for="encryption_enabled"
                       i18n>Encryption</label>
                <cd-helper>
                  <span i18n>Enables encryption for the objects in the bucket.
                     To enable encryption on a bucket you need to set the configuration values for SSE-S3 or SSE-KMS.
                     To set the configuration values <a href="#/rgw/bucket/create"
                                                        (click)="openConfigModal()">Click here</a></span>
                </cd-helper>
              </div>
            </div>
          </div>

          <div *ngIf="bucketForm.getValue('encryption_enabled')">
            <div class="form-group row">
              <div class="cd-col-form-offset">
                <div class="custom-control custom-radio custom-control-inline ps-5">
                  <input class="form-check-input"
                         formControlName="encryption_type"
                         id="sse_S3_enabled"
                         type="radio"
                         name="encryption_type"
                         value="AES256"
                         [attr.disabled]="!s3VaultConfig ? true : null">
                  <label class="form-control-label"
                         for="sse_S3_enabled"
                         i18n>SSE-S3 Encryption</label>
                </div>
              </div>
            </div>

            <div class="form-group row">
              <div class="cd-col-form-offset">
                <div class="custom-control custom-radio custom-control-inline ps-5">
                  <input class="form-check-input"
                         formControlName="encryption_type"
                         id="kms_enabled"
                         name="encryption_type"
                         value="aws:kms"
                         [attr.disabled]="!kmsVaultConfig ? true : null"
                         type="radio">
                  <label class="form-control-label"
                         for="kms_enabled"
                         i18n>Connect to an external key management service</label>
                </div>
              </div>
            </div>

            <div *ngIf="bucketForm.getValue('encryption_type') === 'aws:kms'">
              <div class="form-group row">
                <label class="cd-col-form-label required"
                       for="kms_provider"
                       i18n>KMS Provider</label>
                <div class="cd-col-form-input">
                  <select id="kms_provider"
                          name="kms_provider"
                          class="form-select"
                          formControlName="kms_provider"
                          [autofocus]="editing">
                    <option i18n
                            *ngIf="kmsProviders !== null"
                            [ngValue]="null">-- Select a provider --</option>
                    <option *ngFor="let provider of kmsProviders"
                            [value]="provider">{{ provider }}</option>
                  </select>
                  <span class="invalid-feedback"
                        *ngIf="bucketForm.showError('kms_provider', frm, 'required')"
                        i18n>This field is required.</span>
                </div>
              </div>
            </div>

            <div *ngIf="bucketForm.getValue('encryption_type') === 'aws:kms'">
              <div class="form-group row">
                <label class="cd-col-form-label required"
                       for="keyId"
                       i18n>Key Id
                </label>
                <div class="cd-col-form-input">
                  <input id="keyId"
                         name="keyId"
                         class="form-control"
                         type="text"
                         formControlName="keyId">
                  <span class="invalid-feedback"
                        *ngIf="bucketForm.showError('keyId', frm, 'required')"
                        i18n>This field is required.</span>
                </div>
              </div>
            </div>
          </div>
        </fieldset>

      </div>
      <div class="card-footer">
        <cd-form-button-panel (submitActionEvent)="submit()"
                              [form]="bucketForm"
                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
                              wrappingClass="text-right"></cd-form-button-panel>
      </div>
    </div>
  </form>
</div>