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

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container i18n="form title"
   3                 class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
   4
   5   <ng-container class="modal-content">
   6     <form name="multisiteZoneForm"
   7           #formDir="ngForm"
   8           [formGroup]="multisiteZoneForm"
   9           novalidate>
  10     <div class="modal-body">
  11       <div class="form-group row">
  12         <label class="cd-col-form-label"
  13                for="selectedZonegroup"
  14                i18n>Select Zonegroup</label>
  15         <div class="cd-col-form-input">
  16           <select class="form-select"
  17                   id="selectedZonegroup"
  18                   [attr.disabled]="action === 'edit' ? true : null"
  19                   formControlName="selectedZonegroup"
  20                   name="selectedZonegroup"
  21                   (change)="onZoneGroupChange($event.target.value)">
  22             <option *ngFor="let zonegroupName of zonegroupList"
  23                     [value]="zonegroupName.name"
  24                     [selected]="zonegroupName.name === multisiteZoneForm.getValue('selectedZonegroup')">
  25             {{ zonegroupName.name }}
  26             </option>
  27           </select>
  28         </div>
  29       </div>
  30       <div class="form-group row">
  31         <label class="cd-col-form-label required"
  32                for="zonegroupName"
  33                i18n>Zone Name</label>
  34         <div class="cd-col-form-input">
  35           <input class="form-control"
  36                  type="text"
  37                  placeholder="Zone name..."
  38                  id="zoneName"
  39                  name="zoneName"
  40                  formControlName="zoneName">
  41           <span class="invalid-feedback"
  42                 *ngIf="multisiteZoneForm.showError('zoneName', formDir, 'required')"
  43                 i18n>This field is required.</span>
  44           <span class="invalid-feedback"
  45                 *ngIf="multisiteZoneForm.showError('zoneName', formDir, 'uniqueName')"
  46                 i18n>The chosen zone name is already in use.</span>
  47           <div class="custom-control custom-checkbox">
  48             <input class="form-check-input"
  49                    id="default_zone"
  50                    name="default_zone"
  51                    formControlName="default_zone"
  52                    [attr.disabled]="action === 'edit' ? true : null"
  53                    type="checkbox">
  54             <label class="form-check-label"
  55                    for="default_zone"
  56                    i18n>Default</label>
  57             <span *ngIf="disableDefault && action === 'create'">
  58               <cd-helper i18n>Default zone can only exist in a default zonegroup.
  59               </cd-helper>
  60             </span>
  61             <span *ngIf="isDefaultZone">
  62               <cd-helper i18n>You cannot unset the default flag.
  63               </cd-helper>
  64             </span>
  65             <cd-helper *ngIf="action === 'edit' && !isDefaultZone">
  66               <span i18n>Please consult the <a href="{{ docUrl }}">documentation</a> to follow the failover mechanism</span>
  67             </cd-helper><br>
  68           </div>
  69           <div class="custom-control custom-checkbox">
  70             <input class="form-check-input"
  71                    id="master_zone"
  72                    name="master_zone"
  73                    formControlName="master_zone"
  74                    [attr.disabled]="action === 'edit' ? true : null"
  75                    type="checkbox">
  76             <label class="form-check-label"
  77                    for="master_zone"
  78                    i18n>Master</label>
  79             <span *ngIf="disableMaster">
  80               <cd-helper i18n>Master zone already exists for the selected zonegroup.
  81               </cd-helper>
  82             </span>
  83             <span *ngIf="isMasterZone">
  84               <cd-helper i18n>You cannot unset the master flag.
  85               </cd-helper>
  86             </span>
  87             <cd-helper *ngIf="action === 'edit' && !isMasterZone">
  88               <span i18n>Please consult the <a href="{{ docUrl }}">documentation</a> to follow the failover mechanism</span>
  89             </cd-helper>
  90           </div>
  91         </div>
  92       </div>
  93       <div class="form-group row">
  94         <label class="cd-col-form-label required"
  95                for="zone_endpoints"
  96                i18n>Endpoints</label>
  97         <div class="cd-col-form-input">
  98           <input class="form-control"
  99                  type="text"
 100                  placeholder="e.g, http://ceph-node-00.com:80"
 101                  id="zone_endpoints"
 102                  name="zone_endpoints"
 103                  formControlName="zone_endpoints">
 104           <span class="invalid-feedback"
 105                 *ngIf="multisiteZoneForm.showError('zone_endpoints', formDir, 'required')"
 106                 i18n>This field is required.</span>
 107           <span class="invalid-feedback"
 108                 *ngIf="multisiteZoneForm.showError('zone_endpoints', formDir, 'endpoint')"
 109                 i18n>Please enter a valid IP address.</span>
 110         </div>
 111       </div>
 112       <div class="form-group row">
 113         <label class="cd-col-form-label required"
 114                for="access_key"
 115                i18n>Access key</label>
 116         <div class="cd-col-form-input">
 117           <input class="form-control"
 118                  type="text"
 119                  placeholder="DiPt4V7WWvy2njL1z6aC"
 120                  id="access_key"
 121                  name="access_key"
 122                  formControlName="access_key">
 123         </div>
 124       </div>
 125       <div class="form-group row">
 126         <label class="cd-col-form-label required"
 127                for="access_key"
 128                i18n>Secret key</label>
 129         <div class="cd-col-form-input">
 130           <input class="form-control"
 131                  type="text"
 132                  placeholder="xSZUdYky0bTctAdCEEW8ikhfBVKsBV5LFYL82vvh"
 133                  id="secret_key"
 134                  name="secret_key"
 135                  formControlName="secret_key">
 136         </div>
 137       </div>
 138       <div class="form-group row"
 139            *ngIf="action === 'edit'">
 140         <div *ngIf="action === 'edit'">
 141           <legend>Placement Targets</legend>
 142           <div class="form-group row">
 143             <label class="cd-col-form-label"
 144                    for="placementTarget"
 145                    i18n>Placement target</label>
 146             <div class="cd-col-form-input">
 147               <select class="form-select"
 148                       id="placementTarget"
 149                       formControlName="placementTarget"
 150                       name="placementTarget"
 151                       (change)="getZonePlacementData($event.target.value)">
 152                 <option *ngFor="let placement of placementTargets"
 153                         [value]="placement.name"
 154                         [selected]="placement.name === multisiteZoneForm.getValue('placementTarget')">
 155                 {{ placement.name }}
 156                 </option>
 157               </select>
 158             </div>
 159           </div>
 160           <div class="form-group row">
 161             <label class="cd-col-form-label"
 162                    for="placementDataPool"
 163                    i18n>Data pool</label>
 164             <div class="cd-col-form-input">
 165               <select class="form-select"
 166                       id="placementDataPool"
 167                       formControlName="placementDataPool"
 168                       [value]="placementDataPool"
 169                       name="placementDataPool">
 170                 <option *ngFor="let pool of poolList"
 171                         [value]="pool.poolname"
 172                         [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataPool')">
 173                 {{ pool.poolname }}
 174                 </option>
 175               </select>
 176             </div>
 177           </div>
 178           <div class="form-group row">
 179             <label class="cd-col-form-label"
 180                    for="placementIndexPool"
 181                    i18n>Index pool</label>
 182             <div class="cd-col-form-input">
 183               <select class="form-select"
 184                       id="placementIndexPool"
 185                       formControlName="placementIndexPool"
 186                       name="placementIndexPool">
 187                 <option *ngFor="let pool of poolList"
 188                         [value]="pool.poolname"
 189                         [selected]="pool.poolname === multisiteZoneForm.getValue('placementIndexPool')">
 190                 {{ pool.poolname }}
 191                 </option>
 192               </select>
 193             </div>
 194           </div>
 195           <div class="form-group row">
 196             <label class="cd-col-form-label"
 197                    for="placementDataExtraPool"
 198                    i18n>Data extra pool</label>
 199             <div class="cd-col-form-input">
 200               <select class="form-select"
 201                       id="placementDataExtraPool"
 202                       formControlName="placementDataExtraPool"
 203                       name="placementDataExtraPool">
 204                 <option *ngFor="let pool of poolList"
 205                         [value]="pool.poolname"
 206                         [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataExtraPool')">
 207                 {{ pool.poolname }}
 208                 </option>
 209               </select>
 210             </div>
 211           </div>
 212           <div>
 213             <legend>Storage Classes</legend>
 214             <div class="form-group row">
 215               <label class="cd-col-form-label"
 216                      for="storageClass"
 217                      i18n>Storage Class</label>
 218               <div class="cd-col-form-input">
 219                 <select class="form-select"
 220                         id="storageClass"
 221                         formControlName="storageClass"
 222                         (change)="getStorageClassData($event.target.value)"
 223                         name="storageClass">
 224                   <option *ngFor="let str of storageClassList"
 225                           [value]="str.value">
 226                   {{ str.value }}
 227                   </option>
 228                 </select>
 229               </div>
 230             </div>
 231             <div class="form-group row">
 232               <label class="cd-col-form-label"
 233                      for="storageDataPool"
 234                      i18n>Data pool</label>
 235               <div class="cd-col-form-input">
 236                 <select class="form-select"
 237                         id="storageDataPool"
 238                         formControlName="storageDataPool"
 239                         name="storageDataPool">
 240                   <option *ngFor="let pool of poolList"
 241                           [value]="pool.poolname"
 242                           [selected]="pool.poolname === multisiteZoneForm.getValue('storageDataPool')">
 243                   {{ pool.poolname }}
 244                   </option>
 245                 </select>
 246               </div>
 247             </div>
 248             <div class="form-group row">
 249               <label class="cd-col-form-label"
 250                      for="storageCompression"
 251                      i18n>Compression</label>
 252               <div class="cd-col-form-input">
 253                 <select class="form-select"
 254                         id="storageCompression"
 255                         formControlName="storageCompression"
 256                         name="storageCompression">
 257                   <option *ngFor="let compression of compressionTypes"
 258                           [value]="compression">
 259                   {{ compression }}
 260                   </option>
 261                 </select>
 262               </div>
 263             </div>
 264           </div>
 265         </div>
 266       </div>
 267     </div>
 268     <div class="modal-footer">
 269       <cd-form-button-panel (submitActionEvent)="submit()"
 270                             [form]="multisiteZoneForm"
 271                             [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 272     </div>
 273     </form>
 274   </ng-container>
 275 </cd-modal>