git.apps.os.sepia.ceph.com Git - ceph.git/blob

   1 <cds-modal size="md"
   2            [open]="open"
   3            (overlaySelected)="closeModal()">
   4   <cds-modal-header (closeSelect)="closeModal()"
   5                     i18n>{{editing ? 'Edit' : 'Create'}} Tiering configuration
   6     <cd-help-text [formAllFieldsRequired]="true"></cd-help-text>
   7   </cds-modal-header>
   8
   9 <ng-container *cdFormLoading="loading">
  10   <section cdsModalContent>
  11     <cd-alert-panel
  12       *ngIf="(snapScheduleModuleStatus$ | async) === false"
  13       type="info"
  14       spacingClass="mb-3"
  15       i18n
  16       class="align-items-center"
  17       actionName="Enable"
  18       (action)="enableSnapshotSchedule()"
  19 >
  20   In order to access the snapshot scheduler feature, the snap_scheduler module must be enabled
  21     </cd-alert-panel>
  22       <cd-alert-panel *ngIf="storageClassList?.length === 0 &&
  23                       isStorageClassFetched"
  24                       type="info"
  25                       spacingClass="mb-3"
  26                       class="align-items-center"
  27                       actionName="Create"
  28                       i18n
  29                       (action)="goToCreateStorageClass()">
  30       No storage class found. Consider creating it first to proceed.
  31     </cd-alert-panel>
  32     <form name="tieringForm"
  33           #formDir="ngForm"
  34           [formGroup]="tieringForm"
  35           novalidate>
  36       <div class="form-item">
  37         <cds-text-label
  38           labelInputID="rule_name"
  39           [invalid]="!tieringForm.controls.name.valid && tieringForm.controls.name.dirty"
  40           [invalidText]="ruleNameError"
  41           [helperText]="ruleHelper"
  42           i18n
  43           >Rule Name
  44           <input
  45             cdsText
  46             type="text"
  47             id="rule_name"
  48             maxlength="255"
  49             formControlName="name"
  50           />
  51         </cds-text-label>
  52         <ng-template #ruleHelper>
  53           <span i18n>Unique identifier for the rule. The value cannot be longer than 255 characters.
  54           </span>
  55         </ng-template>
  56         <ng-template #ruleNameError>
  57           <span *ngIf="tieringForm.showError('name', formDir, 'required')"
  58                 class="invalid-feedback">
  59             <ng-container i18n>This field is required.</ng-container>
  60           </span>
  61           <span *ngIf="tieringForm.showError('name', formDir, 'duplicate')"
  62                 class="invalid-feedback">
  63             <ng-container i18n>Please enter a unique name.</ng-container>
  64           </span>
  65         </ng-template>
  66       </div>
  67       <div class="form-item">
  68         <cds-select id="storageClass"
  69                     formControlName="storageClass"
  70                     label="Storage Class"
  71                     [helperText]="storageClassHelper">
  72           <option *ngIf="storageClassList === null"
  73                   value="">Loading...</option>
  74           <option *ngIf="storageClassList !== null && storageClassList.length === 0"
  75                   value="">-- No storage class available --</option>
  76           <option *ngIf="storageClassList !== null && storageClassList.length > 0"
  77                   value="">-- Select the storage class --</option>
  78           <option *ngFor="let tier of storageClassList"
  79                   [value]="tier.storage_class">
  80             {{ tier.storage_class }}
  81           </option>
  82         </cds-select>
  83         <ng-template #storageClassHelper>
  84           <span i18n>The storage class to which you want the object to transition.
  85           </span>
  86         </ng-template>
  87       </div>
  88       <legend class="cds--label">Choose a configuration scope</legend>
  89       <div>
  90         <cds-radio-group
  91           formControlName="hasPrefix"
  92         >
  93         <cds-radio [value]="false"
  94                    i18n>
  95             {{ 'Apply to all objects in the bucket' }}
  96           </cds-radio>
  97           <cds-radio [value]="true"
  98                      i18n>
  99             {{ 'Limit the scope of this rule to selected filter criteria' }}
 100           </cds-radio>
 101         </cds-radio-group>
 102       </div>
 103       <div class="form-item"
 104            *ngIf="tieringForm.controls.hasPrefix.value">
 105         <cds-text-label labelInputID="prefix"
 106                         [invalid]="!tieringForm.controls.prefix.valid && tieringForm.controls.prefix.dirty"
 107                         [invalidText]="prefixError"
 108                         [helperText]="prefixHelper"
 109                         i18n>Prefix
 110           <input cdsText
 111                  type="text"
 112                  id="prefix"
 113                  formControlName="prefix"/>
 114         </cds-text-label>
 115         <ng-template #prefixHelper>
 116           <span i18n>
 117           Prefix identifying one or more objects to which the rule applies
 118           </span>
 119         </ng-template>
 120         <ng-template #prefixError>
 121           <span *ngIf="tieringForm.showError('prefix', formDir, 'required')"
 122                 class="invalid-feedback">
 123             <ng-container i18n>This field is required.</ng-container>
 124           </span>
 125         </ng-template>
 126       </div>
 127
 128       <!-- tags -->
 129       <div *ngIf="tieringForm.controls.hasPrefix.value">
 130         <div class="form-group-header">Tags</div>
 131         <div>All the tags must exist in the object's tag set for the rule to apply.</div>
 132         <ng-container formArrayName="tags"
 133                       *ngFor="let tags of tags.controls; index as i">
 134           <ng-container [formGroupName]="i">
 135             <div cdsRow
 136                  class="form-item form-item-append">
 137               <div cdsCol>
 138                 <cds-text-label labelInputID="Key"
 139                                 i18n>Name of the object key
 140                   <input cdsText
 141                          type="text"
 142                          placeholder="Enter name of the object key"
 143                          id="Key"
 144                          formControlName="Key"
 145                          i18n-placeholder/>
 146                 </cds-text-label>
 147               </div>
 148               <div cdsCol>
 149                 <cds-text-label labelInputID="Value"
 150                                 i18n>Value of the tag
 151                   <input cdsText
 152                          type="text"
 153                          placeholder="Enter value of the tag"
 154                          id="Value"
 155                          formControlName="Value"
 156                          i18n-placeholder/>
 157                 </cds-text-label>
 158               </div>
 159               <div cdsCol
 160                    [columnNumbers]="{ lg: 2, md: 2 }"
 161                    class="item-action-btn">
 162                 <cds-icon-button kind="tertiary"
 163                                  size="sm"
 164                                  (click)="removeTags(i)">
 165                   <svg cdsIcon="trash-can"
 166                        size="32"
 167                        class="cds--btn__icon"></svg>
 168                 </cds-icon-button>
 169               </div>
 170             </div>
 171           </ng-container>
 172         </ng-container>
 173         <div class="form-item">
 174           <button cdsButton="tertiary"
 175                   type="button"
 176                   (click)="addTags()"
 177                   i18n>Add tags
 178             <svg cdsIcon="add"
 179                  size="32"
 180                  class="cds--btn__icon"
 181                  icon></svg>
 182           </button>
 183         </div>
 184       </div>
 185
 186       <legend class="cds--label">Status</legend>
 187       <div>
 188         <cds-radio-group
 189           formControlName="status">
 190         <cds-radio [value]="'Enabled'"
 191                    i18n>Enabled </cds-radio>
 192           <cds-radio [value]="'Disabled'"
 193                      i18n>Disabled </cds-radio>
 194         </cds-radio-group>
 195       </div>
 196       <div class="form-item">
 197         <cds-number formControlName="days"
 198                     label="Number of days"
 199                     [min]="1"
 200                     [invalid]="!tieringForm.controls.days.valid && tieringForm.controls.days.dirty"
 201                     [invalidText]="daysError"
 202                     [helperText]="daysHelper"></cds-number>
 203         <ng-template #daysHelper>
 204           <span i18n>Select the number of days to transition the objects to the specified storage class. The value must be a positive integer.
 205           </span>
 206         </ng-template>
 207         <ng-template #daysError>
 208           <span *ngIf="tieringForm.showError('days', formDir, 'required')"
 209                 i18n>This field is required.</span>
 210           <span *ngIf="tieringForm.showError('days', formDir, 'pattern')"
 211                 i18n>Enter a valid positive number</span>
 212         </ng-template>
 213       </div>
 214     </form>
 215   </section>
 216 </ng-container>
 217   <cd-form-button-panel
 218     (submitActionEvent)="submitTieringConfig()"
 219     [form]="tieringForm"
 220     [submitText]="editing ? actionLabels.EDIT : actionLabels.CREATE"
 221     [modalForm]="true"
 222     [disabled]="storageClassList?.length === 0 && isStorageClassFetched"
 223   ></cd-form-button-panel>
 224 </cds-modal>