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