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