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 }} Zone Group</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>Zone Group Name</label>
  34         <div class="cd-col-form-input">
  35           <input class="form-control"
  36                  type="text"
  37                  placeholder="Zone group 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 zone group 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                  [attr.disabled]="action === 'edit' ? true : null"
  53                  type="checkbox">
  54           <label class="form-check-label"
  55                  for="default_zonegroup"
  56                  i18n>Default</label>
  57           <span *ngIf="disableDefault && action === 'create'">
  58             <cd-helper i18n>Zone group doesn't belong to the default realm.</cd-helper>
  59           </span>
  60           <cd-helper *ngIf="action === 'edit' && !info.data.is_default">
  61             <span i18n>Please consult the&nbsp;<a href="{{ docUrl }}">documentation</a>&nbsp;to follow the failover mechanism</span>
  62           </cd-helper>
  63           <cd-helper *ngIf="action === 'edit' && info.data.is_default">
  64             <span i18n>You cannot unset the default flag.</span>
  65           </cd-helper><br>
  66           <input class="form-check-input"
  67                  id="master_zonegroup"
  68                  name="master_zonegroup"
  69                  formControlName="master_zonegroup"
  70                  [attr.disabled]="action === 'edit' ? true : null"
  71                  type="checkbox">
  72           <label class="form-check-label"
  73                  for="master_zonegroup"
  74                  i18n>Master</label>
  75           <span *ngIf="disableMaster && action === 'create'">
  76             <cd-helper i18n>Multiple master zone groups can't be configured. If you want to create a new zone group and make it the master zone group, you must delete the default zone group.</cd-helper>
  77           </span>
  78           <cd-helper *ngIf="action === 'edit' && !info.data.is_master">
  79             <span i18n>Please consult the&nbsp;<a href="{{ docUrl }}">documentation</a>&nbsp;to follow the failover mechanism</span>
  80           </cd-helper>
  81           <cd-helper *ngIf="action === 'edit' && info.data.is_master">
  82             <span i18n>You cannot unset the master flag.</span>
  83           </cd-helper>
  84         </div>
  85         </div>
  86       </div>
  87       <div class="form-group row">
  88         <label class="cd-col-form-label required"
  89                for="zonegroup_endpoints"
  90                i18n>Endpoints</label>
  91         <div class="cd-col-form-input">
  92           <input class="form-control"
  93                  type="text"
  94                  placeholder="e.g, http://ceph-node-00.com:80"
  95                  id="zonegroup_endpoints"
  96                  name="zonegroup_endpoints"
  97                  formControlName="zonegroup_endpoints">
  98         <span class="invalid-feedback"
  99               *ngIf="multisiteZonegroupForm.showError('zonegroup_endpoints', formDir, 'required')"
 100               i18n>This field is required.</span>
 101         <span class="invalid-feedback"
 102               *ngIf="multisiteZonegroupForm.showError('zonegroup_endpoints', formDir, 'endpoint')"
 103               i18n>Please enter a valid IP address.</span>
 104         </div>
 105       </div>
 106       <div class="form-group row"
 107            *ngIf="action === 'edit'">
 108         <label i18n
 109                for="zones"
 110                class="cd-col-form-label">Zones</label>
 111         <div class="cd-col-form-input">
 112           <cd-select-badges id="zones"
 113                             [data]="zonegroupZoneNames"
 114                             [options]="labelsOption"
 115                             [customBadges]="true">
 116           </cd-select-badges><br>
 117           <span class="invalid-feedback"
 118                 *ngIf="isRemoveMasterZone"
 119                 i18n>Cannot remove master zone.</span>
 120         </div>
 121       </div>
 122       <div *ngIf="action === 'edit'">
 123         <legend>Placement targets</legend>
 124         <ng-container formArrayName="placementTargets">
 125           <div *ngFor="let item of placementTargets.controls; let index = index; trackBy: trackByFn">
 126             <div class="card"
 127                  [formGroup]="item">
 128               <div class="card-header">
 129                 {{ (index + 1) | ordinal }}
 130                 <span class="float-end clickable"
 131                       name="remove_placement_target"
 132                       (click)="removePlacementTarget(index)"
 133                       ngbTooltip="Remove">&times;</span>
 134               </div>
 135
 136               <div class="card-body">
 137                 <!-- Placement Id -->
 138                 <div class="form-group row">
 139                   <label i18n
 140                          class="cd-col-form-label required"
 141                          for="placement_id">Placement Id</label>
 142                   <div class="cd-col-form-input">
 143                     <input type="text"
 144                            class="form-control"
 145                            name="placement_id"
 146                            id="placement_id"
 147                            formControlName="placement_id"
 148                            placeholder="eg. default-placement">
 149                     <span class="invalid-feedback">
 150                       <span *ngIf="showError(index, 'placement_id', formDir, 'required')"
 151                             i18n>This field is required.</span>
 152                     </span>
 153                   </div>
 154                 </div>
 155
 156                 <!-- Tags-->
 157                 <div class="form-group row">
 158                   <label i18n
 159                          class="cd-col-form-label"
 160                          for="tags">Tags</label>
 161                   <div class="cd-col-form-input">
 162                     <input type="text"
 163                            class="form-control"
 164                            name="tags"
 165                            id="tags"
 166                            formControlName="tags"
 167                            placeholder="comma separated tags, eg. default-placement, ssd">
 168                   </div>
 169                 </div>
 170
 171                 <!-- Storage Class -->
 172                 <div class="form-group row">
 173                   <label i18n
 174                          class="cd-col-form-label"
 175                          for="storage_class">Storage Class</label>
 176                   <div class="cd-col-form-input">
 177                     <input type="text"
 178                            class="form-control"
 179                            name="storage_class"
 180                            id="storage_class"
 181                            formControlName="storage_class"
 182                            placeholder="eg. Standard-tier">
 183                   </div>
 184                 </div>
 185               </div>
 186             </div>
 187           </div>
 188         </ng-container>
 189         <button type="button"
 190                 id="add-plc"
 191                 class="btn btn-light float-end my-3"
 192                 (click)="addPlacementTarget()">
 193           <i [ngClass]="[icons.add]"></i>
 194           <ng-container i18n>Add placement target</ng-container>
 195         </button>
 196       </div>
 197     </div>
 198     <div class="modal-footer">
 199       <cd-form-button-panel (submitActionEvent)="submit()"
 200                             [form]="multisiteZonegroupForm"
 201                             [submitText]="(action | titlecase) + ' ' + 'Zone Group'"></cd-form-button-panel>
 202     </div>
 203     </form>
 204   </ng-container>
 205 </cd-modal>