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

   1 <div cdsCol
   2      [columnNumbers]="{ md: 4 }">
   3   <ng-container *cdFormLoading="loading">
   4     <form name="storageClassForm"
   5           #formDir="ngForm"
   6           [formGroup]="storageClassForm"
   7           novalidate>
   8       <div i18n="form title"
   9            class="form-header">
  10         {{ action | titlecase }} {{ resource | upperFirst }}
  11
  12         <cd-help-text [formAllFieldsRequired]="true"></cd-help-text>
  13       </div>
  14       <div class="form-item">
  15         <cds-select
  16           label="Type"
  17           i18n-label
  18           for="storageClassType"
  19           formControlName="storageClassType"
  20           [helperText]="storageClassText"
  21           id="storageClassType"
  22           [invalid]="storageClassForm.showError('storageClassType', formDir, 'required')"
  23           [invalidText]="storageError"
  24         >
  25           <option value=""
  26                   i18n>-- Select Storage Class --</option>
  27           <option value="local"
  28                   i18n>Local</option>
  29           <option value="cloud-s3"
  30                   i18n>Cloud S3</option>
  31         </cds-select>
  32         <ng-template #storageError>
  33           <span
  34             class="invalid-feedback"
  35             *ngIf="storageClassForm.showError('storageClassType', formDir, 'required')"
  36             i18n
  37             >This field is required.</span
  38           >
  39         </ng-template>
  40       </div>
  41       <div class="form-item form-item-append"
  42            cdsRow>
  43         <div cdsCol>
  44           <!-- Zone Group -->
  45           <cds-select
  46             label="Zone Group Name"
  47             i18n-label
  48             formControlName="zonegroup"
  49             id="zonegroup"
  50             [invalid]="storageClassForm.showError('zonegroup', formDir, 'required')"
  51             (change)="onZonegroupChange()"
  52             [invalidText]="zonegroupError"
  53           >
  54             <option
  55               *ngFor="let zonegrp of zonegroupNames"
  56               [value]="zonegrp.name"
  57               [selected]="zonegrp.name === storageClassForm.getValue('zonegroup')"
  58               i18n
  59             >
  60               {{ zonegrp.name }}
  61             </option>
  62           </cds-select>
  63           <ng-template #zonegroupError>
  64             <span
  65               class="invalid-feedback"
  66               *ngIf="storageClassForm.showError('zonegroup', formDir, 'required')"
  67               i18n
  68               >This field is required.</span
  69             >
  70           </ng-template>
  71         </div>
  72         <div cdsCol>
  73           <!-- Placement Target -->
  74           <cds-select
  75             label="Placement Target"
  76             i18n-label
  77             formControlName="placement_target"
  78             id="placement_target"
  79             [invalid]="storageClassForm.showError('placement_target', formDir, 'required')"
  80             [invalidText]="placementError"
  81           >
  82             <option [value]=""
  83                     i18n>--Select--</option>
  84             <option
  85               *ngFor="let placementTarget of placementTargets"
  86               [value]="placementTarget"
  87               [selected]="placementTarget === storageClassForm.getValue('placement_target')"
  88               i18n
  89             >
  90               {{ placementTarget }}
  91             </option>
  92           </cds-select>
  93           <ng-template #placementError>
  94             <span
  95               class="invalid-feedback"
  96               *ngIf="storageClassForm.showError('placement_target', formDir, 'required')"
  97               i18n
  98               >This field is required.</span
  99             >
 100           </ng-template>
 101         </div>
 102       </div>
 103       <!-- Storage Class -->
 104       <div class="form-item">
 105         <cds-text-label
 106           labelInputID="storage_class"
 107           i18n
 108           [disabled]="editing"
 109           [invalid]="
 110             storageClassForm.controls.storage_class.invalid &&
 111             storageClassForm.controls.storage_class.dirty
 112           "
 113           [invalidText]="storageClassError"
 114           >Name
 115           <input
 116             cdsText
 117             type="type"
 118             id="storage_class"
 119             formControlName="storage_class"
 120             [invalid]="storageClassForm.showError('storage_class', formDir, 'required')"
 121           />
 122         </cds-text-label>
 123         <ng-template #storageClassError>
 124           <span
 125             class="invalid-feedback"
 126             *ngIf="storageClassForm.showError('storage_class', formDir, 'required')"
 127             i18n
 128             >This field is required.</span
 129           >
 130         </ng-template>
 131       </div>
 132       <div *ngIf="storageClassForm.getValue('storageClassType') === TIER_TYPE.CLOUD_TIER">
 133         <div class="form-item form-item-append"
 134              cdsRow>
 135           <div cdsCol>
 136             <!-- Target Region -->
 137             <cds-text-label
 138               labelInputID="region"
 139               i18n
 140               [invalid]="storageClassForm.showError('region', formDir, 'required')"
 141               [invalidText]="regionError"
 142               [helperText]="targetRegionText"
 143               >Target Region
 144               <input
 145                 cdsText
 146                 type="text"
 147                 id="region"
 148                 formControlName="region"
 149                 placeholder="e.g, us-east-1"
 150                 i18n-placeholder
 151                 [invalid]="storageClassForm.showError('region', formDir, 'required')"
 152               />
 153             </cds-text-label>
 154             <ng-template #regionError>
 155               <span
 156                 class="invalid-feedback"
 157                 *ngIf="storageClassForm.showError('region', formDir, 'required')"
 158                 i18n
 159                 >This field is required.</span
 160               >
 161             </ng-template>
 162           </div>
 163           <div cdsCol>
 164             <!-- Target Endpoint -->
 165             <cds-text-label
 166               labelInputID="endpoint"
 167               i18n
 168               [invalid]="storageClassForm.showError('endpoint', formDir, 'required')"
 169               [invalidText]="endpointError"
 170               [helperText]="targetEndpointText"
 171               >Target Endpoint
 172               <input
 173                 cdsText
 174                 type="text"
 175                 placeholder="e.g, http://ceph-node-00.com:80"
 176                 i18n-placeholder
 177                 id="endpoint"
 178                 formControlName="endpoint"
 179                 [invalid]="storageClassForm.showError('endpoint', formDir, 'required')"
 180               />
 181             </cds-text-label>
 182             <ng-template #endpointError>
 183               <span
 184                 class="invalid-feedback"
 185                 *ngIf="storageClassForm.showError('endpoint', formDir, 'required')"
 186                 i18n
 187                 >This field is required.</span
 188               >
 189             </ng-template>
 190           </div>
 191         </div>
 192
 193         <!-- Access Key  -->
 194         <div class="form-item">
 195           <div cdsCol
 196                [columnNumbers]="{ md: 12 }"
 197                class="d-flex">
 198             <cds-password-label
 199               labelInputID="access_key"
 200               [invalid]="storageClassForm.showError('access_key', formDir, 'required')"
 201               [invalidText]="accessError"
 202               [helperText]="targetAccessKeyText"
 203               i18n
 204               >Target Access Key
 205               <input
 206                 cdsPassword
 207                 type="password"
 208                 id="access_key"
 209                 formControlName="access_key"
 210                 [invalid]="storageClassForm.showError('access_key', formDir, 'required')"
 211               />
 212             </cds-password-label>
 213             <cd-copy-2-clipboard-button class="clipboard"> </cd-copy-2-clipboard-button>
 214             <ng-template #accessError>
 215               <span
 216                 class="invalid-feedback"
 217                 *ngIf="storageClassForm.showError('access_key', formDir, 'required')"
 218                 i18n
 219                 >This field is required.</span
 220               >
 221             </ng-template>
 222           </div>
 223         </div>
 224
 225         <!-- Secret Key  -->
 226         <div class="form-item">
 227           <div cdsCol
 228                [columnNumbers]="{ md: 12 }"
 229                class="d-flex">
 230             <cds-password-label
 231               labelInputID="secret_key"
 232               [helperText]="targetSecretKeyText"
 233               [invalid]="storageClassForm.showError('secret_key', formDir, 'required')"
 234               [invalidText]="secretError"
 235               i18n
 236               >Target Secret Key
 237               <input
 238                 cdsPassword
 239                 type="password"
 240                 id="secret_key"
 241                 formControlName="secret_key"
 242                 [invalid]="storageClassForm.showError('secret_key', formDir, 'required')"
 243               />
 244             </cds-password-label>
 245             <cd-copy-2-clipboard-button class="clipboard"> </cd-copy-2-clipboard-button>
 246             <ng-template #secretError>
 247               <span
 248                 class="invalid-feedback"
 249                 *ngIf="storageClassForm.showError('secret_key', formDir, 'required')"
 250                 i18n
 251                 >This field is required.</span
 252               >
 253             </ng-template>
 254           </div>
 255         </div>
 256
 257         <!-- Target Path -->
 258         <div class="form-item">
 259           <cds-text-label
 260             labelInputID="target_path"
 261             i18n
 262             [invalid]="storageClassForm.showError('target_path', formDir, 'required')"
 263             [invalidText]="targetError"
 264             [helperText]="targetPathText"
 265             >Target Path
 266             <input
 267               cdsText
 268               type="text"
 269               id="target_path"
 270               formControlName="target_path"
 271               [invalid]="storageClassForm.showError('target_path', formDir, 'required')"
 272             />
 273           </cds-text-label>
 274           <ng-template #targetError>
 275             <span
 276               class="invalid-feedback"
 277               *ngIf="storageClassForm.showError('target_path', formDir, 'required')"
 278               i18n
 279               >This field is required.</span
 280             >
 281           </ng-template>
 282         </div>
 283       </div>
 284       <div *ngIf="storageClassForm.getValue('storageClassType') === TIER_TYPE.CLOUD_TIER">
 285         <ng-template #title>
 286           <h5 class="cds--accordion__title cd-header">Advanced</h5>
 287         </ng-template>
 288         <fieldset>
 289           <cds-accordion size="lg"
 290                          class="form-item">
 291             <cds-accordion-item
 292               [title]="title"
 293               id="advanced-fieldset"
 294               (selected)="showAdvanced = !showAdvanced"
 295             >
 296               <!-- Multi Part Sync Threshold -->
 297               <div class="form-item form-item-append"
 298                    cdsRow>
 299                 <div cdsCol>
 300                   <cds-text-label
 301                     labelInputID="multipart_sync_threshold"
 302                     i18n
 303                     [helperText]="multipartSyncThreholdText"
 304                     cdOptionalField="Multipart Sync Threshold"
 305                     >Multipart Sync Threshold
 306                     <input
 307                       cdsText
 308                       type="text"
 309                       id="multipart_sync_threshold"
 310                       formControlName="multipart_sync_threshold"
 311                     />
 312                   </cds-text-label>
 313                 </div>
 314                 <div cdsCol>
 315                   <cds-text-label
 316                     labelInputID="multipart_min_part_size"
 317                     i18n
 318                     [helperText]="multipartMinPartText"
 319                     cdOptionalField="Multipart Minimum Part Size"
 320                     >Multipart Minimum Part Size
 321                     <input
 322                       cdsText
 323                       type="text"
 324                       id="multipart_min_part_size"
 325                       formControlName="multipart_min_part_size"
 326                     />
 327                   </cds-text-label>
 328                 </div>
 329               </div>
 330               <div class="form-item">
 331                 <cds-checkbox
 332                   id="allow_read_through"
 333                   formControlName="allow_read_through"
 334                   cdOptionalField="Allow Read Through"
 335                   i18n
 336                   (change)="onAllowReadThroughChange($event)"
 337                   >Allow Read Through
 338                   <cd-help-text>{{ allowReadThroughText }}</cd-help-text>
 339                 </cds-checkbox>
 340               </div>
 341               <div class="form-item">
 342                 <cds-checkbox
 343                   id="retain_head_object"
 344                   formControlName="retain_head_object"
 345                   cdOptionalField="Head Object (Stub File)"
 346                   i18n
 347                   >Head Object (Stub File)
 348                   <cd-help-text>{{ retainHeadObjectText }}</cd-help-text>
 349                 </cds-checkbox>
 350               </div>
 351             </cds-accordion-item>
 352           </cds-accordion>
 353         </fieldset>
 354       </div>
 355       <cd-alert-panel
 356         type="warning"
 357         spacingClass="mb-2"
 358         *ngIf="storageClassForm.getValue('storageClassType') === TIER_TYPE.CLOUD_TIER"
 359       >
 360         <span i18n>RGW service would be restarted after creating the storage class.</span>
 361       </cd-alert-panel>
 362       <cd-form-button-panel
 363         (submitActionEvent)="submitAction()"
 364         [form]="storageClassForm"
 365         [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
 366         wrappingClass="text-right"
 367       ></cd-form-button-panel>
 368     </form>
 369   </ng-container>
 370 </div>