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 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            *ngIf="action === 'edit'">
 114         <label class="cd-col-form-label"
 115                for="users"
 116                i18n>System User</label>
 117         <div class="cd-col-form-input">
 118           <select id="users"
 119                   name="users"
 120                   class="form-select"
 121                   formControlName="users">
 122           <option i18n
 123                   *ngIf="users === null"
 124                   [ngValue]="null">Loading...</option>
 125           <option i18n
 126                   *ngIf="users !== null"
 127                   [ngValue]="null">-- Select a user --</option>
 128           <option *ngFor="let user of users"
 129                   [value]="user.user_id">{{ user.user_id }}</option>
 130           </select><br><br>
 131           <div *ngIf="info.data.zone_zonegroup.is_master && info.data.is_master">
 132             <button type="button"
 133                     class="btn btn-light"
 134                     (click)="CreateSystemUser()">
 135                     Create System User
 136             </button>
 137           </div>
 138         </div>
 139         <div *ngIf="action === 'edit'">
 140           <legend>Placement Targets</legend>
 141           <div class="form-group row">
 142             <label class="cd-col-form-label"
 143                    for="placementTarget"
 144                    i18n>Placement target</label>
 145             <div class="cd-col-form-input">
 146               <select class="form-select"
 147                       id="placementTarget"
 148                       formControlName="placementTarget"
 149                       name="placementTarget"
 150                       (change)="getZonePlacementData($event.target.value)">
 151                 <option *ngFor="let placement of placementTargets"
 152                         [value]="placement.name"
 153                         [selected]="placement.name === multisiteZoneForm.getValue('placementTarget')">
 154                 {{ placement.name }}
 155                 </option>
 156               </select>
 157             </div>
 158           </div>
 159           <div class="form-group row">
 160             <label class="cd-col-form-label"
 161                    for="placementDataPool"
 162                    i18n>Data pool</label>
 163             <div class="cd-col-form-input">
 164               <select class="form-select"
 165                       id="placementDataPool"
 166                       formControlName="placementDataPool"
 167                       [value]="placementDataPool"
 168                       name="placementDataPool">
 169                 <option *ngFor="let pool of poolList"
 170                         [value]="pool.poolname"
 171                         [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataPool')">
 172                 {{ pool.poolname }}
 173                 </option>
 174               </select>
 175             </div>
 176           </div>
 177           <div class="form-group row">
 178             <label class="cd-col-form-label"
 179                    for="placementIndexPool"
 180                    i18n>Index pool</label>
 181             <div class="cd-col-form-input">
 182               <select class="form-select"
 183                       id="placementIndexPool"
 184                       formControlName="placementIndexPool"
 185                       name="placementIndexPool">
 186                 <option *ngFor="let pool of poolList"
 187                         [value]="pool.poolname"
 188                         [selected]="pool.poolname === multisiteZoneForm.getValue('placementIndexPool')">
 189                 {{ pool.poolname }}
 190                 </option>
 191               </select>
 192             </div>
 193           </div>
 194           <div class="form-group row">
 195             <label class="cd-col-form-label"
 196                    for="placementDataExtraPool"
 197                    i18n>Data extra pool</label>
 198             <div class="cd-col-form-input">
 199               <select class="form-select"
 200                       id="placementDataExtraPool"
 201                       formControlName="placementDataExtraPool"
 202                       name="placementDataExtraPool">
 203                 <option *ngFor="let pool of poolList"
 204                         [value]="pool.poolname"
 205                         [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataExtraPool')">
 206                 {{ pool.poolname }}
 207                 </option>
 208               </select>
 209             </div>
 210           </div>
 211           <div>
 212             <legend>Storage Classes</legend>
 213             <div class="form-group row">
 214               <label class="cd-col-form-label"
 215                      for="storageClass"
 216                      i18n>Storage Class</label>
 217               <div class="cd-col-form-input">
 218                 <select class="form-select"
 219                         id="storageClass"
 220                         formControlName="storageClass"
 221                         (change)="getStorageClassData($event.target.value)"
 222                         name="storageClass">
 223                   <option *ngFor="let str of storageClassList"
 224                           [value]="str.value">
 225                   {{ str.value }}
 226                   </option>
 227                 </select>
 228               </div>
 229             </div>
 230             <div class="form-group row">
 231               <label class="cd-col-form-label"
 232                      for="storageDataPool"
 233                      i18n>Data pool</label>
 234               <div class="cd-col-form-input">
 235                 <select class="form-select"
 236                         id="storageDataPool"
 237                         formControlName="storageDataPool"
 238                         name="storageDataPool">
 239                   <option *ngFor="let pool of poolList"
 240                           [value]="pool.poolname"
 241                           [selected]="pool.poolname === multisiteZoneForm.getValue('storageDataPool')">
 242                   {{ pool.poolname }}
 243                   </option>
 244                 </select>
 245               </div>
 246             </div>
 247             <div class="form-group row">
 248               <label class="cd-col-form-label"
 249                      for="storageCompression"
 250                      i18n>Compression</label>
 251               <div class="cd-col-form-input">
 252                 <select class="form-select"
 253                         id="storageCompression"
 254                         formControlName="storageCompression"
 255                         name="storageCompression">
 256                   <option *ngFor="let compression of compressionTypes"
 257                           [value]="compression">
 258                   {{ compression }}
 259                   </option>
 260                 </select>
 261               </div>
 262             </div>
 263           </div>
 264         </div>
 265       </div>
 266     </div>
 267     <div class="modal-footer">
 268       <cd-form-button-panel (submitActionEvent)="submit()"
 269                             [form]="multisiteZoneForm"
 270                             [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 271     </div>
 272     </form>
 273   </ng-container>
 274 </cd-modal>