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="multisiteZonegroupForm"
   7           #formDir="ngForm"
   8           [formGroup]="multisiteZonegroupForm"
   9           novalidate>
  10     <div class="modal-body">
  11       <div class="form-group row">
  12         <label class="cd-col-form-label"
  13                for="selectedRealm"
  14                i18n>Select Realm</label>
  15         <div class="cd-col-form-input">
  16           <select class="form-select"
  17                   id="selectedRealm"
  18                   formControlName="selectedRealm"
  19                   name="selectedRealm">
  20           <option ngValue=""
  21                   i18n>-- Select a realm --</option>
  22           <option *ngFor="let realmName of realmList"
  23                   [value]="realmName.name"
  24                   [selected]="realmName.name === multisiteZonegroupForm.getValue('selectedRealm')">
  25                 {{ realmName.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>Zonegroup Name</label>
  34         <div class="cd-col-form-input">
  35           <input class="form-control"
  36                  type="text"
  37                  placeholder="Zonegroup name..."
  38                  id="zonegroupName"
  39                  name="zonegroupName"
  40                  formControlName="zonegroupName">
  41           <span class="invalid-feedback"
  42                 *ngIf="multisiteZonegroupForm.showError('zonegroupName', formDir, 'required')"
  43                 i18n>This field is required.</span>
  44           <span class="invalid-feedback"
  45                 *ngIf="multisiteZonegroupForm.showError('zonegroupName', formDir, 'uniqueName')"
  46                 i18n>The chosen zonegroup name is already in use.</span>
  47         <div class="custom-control custom-checkbox">
  48           <input class="form-check-input"
  49                  id="default_zonegroup"
  50                  name="default_zonegroup"
  51                  formControlName="default_zonegroup"
  52                  type="checkbox">
  53           <label class="form-check-label"
  54                  for="default_zonegroup"
  55                  i18n>Default</label>
  56           <span *ngIf="disableDefault">
  57           <cd-helper i18n>Zonegroup doesn't belong to the default realm.</cd-helper>
  58           </span><br>
  59           <input class="form-check-input"
  60                  id="master_zonegroup"
  61                  name="master_zonegroup"
  62                  formControlName="master_zonegroup"
  63                  type="checkbox">
  64           <label class="form-check-label"
  65                  for="master_zonegroup"
  66                  i18n>Master</label>
  67           <span *ngIf="!isMaster">
  68           <cd-helper i18n>RGW multi-site configuration must have a master zonegroup. Setting
  69             the first zonegroup created as master, to avoid any errors on udating the period.
  70             Can be modified later by editing a zonegroup.
  71           </cd-helper>
  72           </span>
  73           <span *ngIf="disableMaster">
  74             <cd-helper i18n>Multiple master zonegroups can't be configured. If you want to create a new zonegroup and make it the master zonegroup, you must delete the default zonegroup.</cd-helper>
  75           </span>
  76         </div>
  77         </div>
  78       </div>
  79       <div class="form-group row">
  80         <label class="cd-col-form-label required"
  81                for="zonegroup_endpoints"
  82                i18n>Endpoints</label>
  83         <div class="cd-col-form-input">
  84           <input class="form-control"
  85                  type="text"
  86                  placeholder="e.g, http://ceph-node-00.com:80"
  87                  id="zonegroup_endpoints"
  88                  name="zonegroup_endpoints"
  89                  formControlName="zonegroup_endpoints">
  90         <span class="invalid-feedback"
  91               *ngIf="multisiteZonegroupForm.showError('zonegroup_endpoints', formDir, 'required')"
  92               i18n>This field is required.</span>
  93         <span class="invalid-feedback"
  94               *ngIf="multisiteZonegroupForm.showError('zonegroup_endpoints', formDir, 'endpoint')"
  95               i18n>Please enter a valid IP address.</span>
  96         </div>
  97       </div>
  98       <div class="form-group row"
  99            *ngIf="action === 'edit'">
 100         <label i18n
 101                for="zones"
 102                class="cd-col-form-label">Zones</label>
 103         <div class="cd-col-form-input">
 104           <cd-select-badges id="zones"
 105                             [data]="zonegroupZoneNames"
 106                             [options]="labelsOption"
 107                             [customBadges]="true">
 108           </cd-select-badges><br>
 109           <span class="invalid-feedback"
 110                 *ngIf="isRemoveMasterZone"
 111                 i18n>Cannot remove master zone.</span>
 112         </div>
 113       </div>
 114       <div *ngIf="action === 'edit'">
 115         <legend>Placement targets</legend>
 116         <ng-container formArrayName="placementTargets">
 117           <div *ngFor="let item of placementTargets.controls; let index = index; trackBy: trackByFn">
 118             <div class="card"
 119                  [formGroup]="item">
 120               <div class="card-header">
 121                 {{ (index + 1) | ordinal }}
 122                 <span class="float-end clickable"
 123                       name="remove_placement_target"
 124                       (click)="removePlacementTarget(index)"
 125                       ngbTooltip="Remove">&times;</span>
 126               </div>
 127
 128               <div class="card-body">
 129                 <!-- Placement Id -->
 130                 <div class="form-group row">
 131                   <label i18n
 132                          class="cd-col-form-label required"
 133                          for="placement_id">Placement Id</label>
 134                   <div class="cd-col-form-input">
 135                     <input type="text"
 136                            class="form-control"
 137                            name="placement_id"
 138                            id="placement_id"
 139                            formControlName="placement_id"
 140                            placeholder="eg. default-placement">
 141                     <span class="invalid-feedback">
 142                       <span *ngIf="showError(index, 'placement_id', formDir, 'required')"
 143                             i18n>This field is required.</span>
 144                     </span>
 145                   </div>
 146                 </div>
 147
 148                 <!-- Tags-->
 149                 <div class="form-group row">
 150                   <label i18n
 151                          class="cd-col-form-label"
 152                          for="tags">Tags</label>
 153                   <div class="cd-col-form-input">
 154                     <input type="text"
 155                            class="form-control"
 156                            name="tags"
 157                            id="tags"
 158                            formControlName="tags"
 159                            placeholder="comma separated tags, eg. default-placement, ssd">
 160                   </div>
 161                 </div>
 162
 163                 <!-- Storage Class -->
 164                 <div class="form-group row">
 165                   <label i18n
 166                          class="cd-col-form-label"
 167                          for="storage_class">Storage Class</label>
 168                   <div class="cd-col-form-input">
 169                     <input type="text"
 170                            class="form-control"
 171                            name="storage_class"
 172                            id="storage_class"
 173                            formControlName="storage_class"
 174                            placeholder="eg. Standard-tier">
 175                   </div>
 176                 </div>
 177               </div>
 178             </div>
 179           </div>
 180         </ng-container>
 181         <button type="button"
 182                 id="add-plc"
 183                 class="btn btn-light float-end my-3"
 184                 (click)="addPlacementTarget()">
 185           <i [ngClass]="[icons.add]"></i>
 186           <ng-container i18n>Add placement target</ng-container>
 187         </button>
 188       </div>
 189     </div>
 190     <div class="modal-footer">
 191       <cd-form-button-panel (submitActionEvent)="submit()"
 192                             [form]="multisiteZonegroupForm"
 193                             [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 194     </div>
 195     </form>
 196   </ng-container>
 197 </cd-modal>