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

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