diff options
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html')
| -rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html | 291 |
1 files changed, 291 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html new file mode 100644 index 000000000..bad80a7f3 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html @@ -0,0 +1,291 @@ +<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-control" + 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-control"> + <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-control" + 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> + + </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> |