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 Zone Group</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 zone group.
  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 zone group.
  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>S3 access key
 116           <cd-helper>
 117             <span>To see or copy your S3 access key, go to <b>Object Gateway > Users</b> and click on your user name. In <b>Keys</b>, click <b>Show</b>. View the access key by clicking Show and copy the key by clicking <b>Copy to Clipboard</b>.</span>
 118           </cd-helper>
 119         </label>
 120         <div class="cd-col-form-input">
 121           <input class="form-control"
 122                  type="text"
 123                  placeholder="DiPt4V7WWvy2njL1z6aC"
 124                  id="access_key"
 125                  name="access_key"
 126                  formControlName="access_key">
 127         </div>
 128       </div>
 129       <div class="form-group row">
 130         <label class="cd-col-form-label required"
 131                for="access_key"
 132                i18n>S3 secret key
 133           <cd-helper>
 134             <span>To see or copy your S3 access key, go to <b>Object Gateway > Users</b> and click on your user name. In <b>Keys</b>, click <b>Show</b>. View the secret key by clicking Show and copy the key by clicking <b>Copy to Clipboard</b>.</span>
 135           </cd-helper>
 136         </label>
 137         <div class="cd-col-form-input">
 138           <input class="form-control"
 139                  type="text"
 140                  placeholder="xSZUdYky0bTctAdCEEW8ikhfBVKsBV5LFYL82vvh"
 141                  id="secret_key"
 142                  name="secret_key"
 143                  formControlName="secret_key">
 144         </div>
 145       </div>
 146       <div class="form-group row"
 147            *ngIf="action === 'edit'">
 148         <div *ngIf="action === 'edit'">
 149           <legend>Placement Targets</legend>
 150           <div class="form-group row">
 151             <label class="cd-col-form-label"
 152                    for="placementTarget"
 153                    i18n>Placement target</label>
 154             <div class="cd-col-form-input">
 155               <select class="form-select"
 156                       id="placementTarget"
 157                       formControlName="placementTarget"
 158                       name="placementTarget"
 159                       (change)="getZonePlacementData($event.target.value)">
 160                 <option *ngFor="let placement of placementTargets"
 161                         [value]="placement.name"
 162                         [selected]="placement.name === multisiteZoneForm.getValue('placementTarget')">
 163                 {{ placement.name }}
 164                 </option>
 165               </select>
 166             </div>
 167           </div>
 168           <div class="form-group row">
 169             <label class="cd-col-form-label"
 170                    for="placementDataPool"
 171                    i18n>Data pool</label>
 172             <div class="cd-col-form-input">
 173               <select class="form-select"
 174                       id="placementDataPool"
 175                       formControlName="placementDataPool"
 176                       [value]="placementDataPool"
 177                       name="placementDataPool">
 178                 <option *ngFor="let pool of poolList"
 179                         [value]="pool.poolname"
 180                         [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataPool')">
 181                 {{ pool.poolname }}
 182                 </option>
 183               </select>
 184             </div>
 185           </div>
 186           <div class="form-group row">
 187             <label class="cd-col-form-label"
 188                    for="placementIndexPool"
 189                    i18n>Index pool</label>
 190             <div class="cd-col-form-input">
 191               <select class="form-select"
 192                       id="placementIndexPool"
 193                       formControlName="placementIndexPool"
 194                       name="placementIndexPool">
 195                 <option *ngFor="let pool of poolList"
 196                         [value]="pool.poolname"
 197                         [selected]="pool.poolname === multisiteZoneForm.getValue('placementIndexPool')">
 198                 {{ pool.poolname }}
 199                 </option>
 200               </select>
 201             </div>
 202           </div>
 203           <div class="form-group row">
 204             <label class="cd-col-form-label"
 205                    for="placementDataExtraPool"
 206                    i18n>Data extra pool</label>
 207             <div class="cd-col-form-input">
 208               <select class="form-select"
 209                       id="placementDataExtraPool"
 210                       formControlName="placementDataExtraPool"
 211                       name="placementDataExtraPool">
 212                 <option *ngFor="let pool of poolList"
 213                         [value]="pool.poolname"
 214                         [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataExtraPool')">
 215                 {{ pool.poolname }}
 216                 </option>
 217               </select>
 218             </div>
 219           </div>
 220           <div>
 221             <legend>Storage Classes</legend>
 222             <div class="form-group row">
 223               <label class="cd-col-form-label"
 224                      for="storageClass"
 225                      i18n>Storage Class</label>
 226               <div class="cd-col-form-input">
 227                 <select class="form-select"
 228                         id="storageClass"
 229                         formControlName="storageClass"
 230                         (change)="getStorageClassData($event.target.value)"
 231                         name="storageClass">
 232                   <option *ngFor="let str of storageClassList"
 233                           [value]="str.value">
 234                   {{ str.value }}
 235                   </option>
 236                 </select>
 237               </div>
 238             </div>
 239             <div class="form-group row">
 240               <label class="cd-col-form-label"
 241                      for="storageDataPool"
 242                      i18n>Data pool</label>
 243               <div class="cd-col-form-input">
 244                 <select class="form-select"
 245                         id="storageDataPool"
 246                         formControlName="storageDataPool"
 247                         name="storageDataPool">
 248                   <option *ngFor="let pool of poolList"
 249                           [value]="pool.poolname"
 250                           [selected]="pool.poolname === multisiteZoneForm.getValue('storageDataPool')">
 251                   {{ pool.poolname }}
 252                   </option>
 253                 </select>
 254               </div>
 255             </div>
 256             <div class="form-group row">
 257               <label class="cd-col-form-label"
 258                      for="storageCompression"
 259                      i18n>Compression</label>
 260               <div class="cd-col-form-input">
 261                 <select class="form-select"
 262                         id="storageCompression"
 263                         formControlName="storageCompression"
 264                         name="storageCompression">
 265                   <option *ngFor="let compression of compressionTypes"
 266                           [value]="compression">
 267                   {{ compression }}
 268                   </option>
 269                 </select>
 270               </div>
 271             </div>
 272           </div>
 273         </div>
 274       </div>
 275     </div>
 276     <div class="modal-footer">
 277       <cd-form-button-panel (submitActionEvent)="submit()"
 278                             [form]="multisiteZoneForm"
 279                             [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 280     </div>
 281     </form>
 282   </ng-container>
 283 </cd-modal>