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 Zonegroup</label>
  15         <div class="cd-col-form-input">
  16           <select class="form-select"
  17                   id="selectedZonegroup"
  18                   formControlName="selectedZonegroup"
  19                   name="selectedZonegroup"
  20                   (change)="onZoneGroupChange($event.target.value)">
  21             <option *ngFor="let zonegroupName of zonegroupList"
  22                     [value]="zonegroupName.name"
  23                     [selected]="zonegroupName.name === multisiteZoneForm.getValue('selectedZonegroup')">
  24             {{ zonegroupName.name }}
  25             </option>
  26           </select>
  27         </div>
  28       </div>
  29       <div class="form-group row">
  30         <label class="cd-col-form-label required"
  31                for="zonegroupName"
  32                i18n>ZoneName</label>
  33         <div class="cd-col-form-input">
  34           <input class="form-control"
  35                  type="text"
  36                  placeholder="Zone name..."
  37                  id="zoneName"
  38                  name="zoneName"
  39                  formControlName="zoneName">
  40           <span class="invalid-feedback"
  41                 *ngIf="multisiteZoneForm.showError('zoneName', formDir, 'required')"
  42                 i18n>This field is required.</span>
  43           <span class="invalid-feedback"
  44                 *ngIf="multisiteZoneForm.showError('zoneName', formDir, 'uniqueName')"
  45                 i18n>The chosen zone name is already in use.</span>
  46           <div class="custom-control custom-checkbox">
  47             <input class="form-check-input"
  48                    id="default_zone"
  49                    name="default_zone"
  50                    formControlName="default_zone"
  51                    type="checkbox">
  52             <label class="form-check-label"
  53                    for="default_zone"
  54                    i18n>Default</label><br>
  55             <input class="form-check-input"
  56                    id="master_zone"
  57                    name="master_zone"
  58                    formControlName="master_zone"
  59                    type="checkbox">
  60             <label class="form-check-label"
  61                    for="master_zone"
  62                    i18n>Master</label>
  63           </div>
  64         </div>
  65       </div>
  66       <div class="form-group row">
  67         <label class="cd-col-form-label required"
  68                for="zone_endpoints"
  69                i18n>Endpoints</label>
  70         <div class="cd-col-form-input">
  71           <input class="form-control"
  72                  type="text"
  73                  placeholder="e.g, http://ceph-node-00.com:80"
  74                  id="zone_endpoints"
  75                  name="zone_endpoints"
  76                  formControlName="zone_endpoints">
  77           <span class="invalid-feedback"
  78                 *ngIf="multisiteZoneForm.showError('zone_endpoints', formDir, 'required')"
  79                 i18n>This field is required.</span>
  80           <span class="invalid-feedback"
  81                 *ngIf="multisiteZoneForm.showError('zone_endpoints', formDir, 'endpoint')"
  82                 i18n>Please enter a valid IP address.</span>
  83         </div>
  84       </div>
  85       <div class="form-group row">
  86         <label class="cd-col-form-label"
  87                for="users"
  88                i18n>System User</label>
  89         <div class="cd-col-form-input">
  90           <select id="users"
  91                   name="users"
  92                   class="form-select"
  93                   formControlName="users">
  94           <option i18n
  95                   *ngIf="users === null"
  96                   [ngValue]="null">Loading...</option>
  97           <option i18n
  98                   *ngIf="users !== null"
  99                   [ngValue]="null">-- Select a user --</option>
 100           <option *ngFor="let user of users"
 101                   [value]="user.user_id">{{ user.user_id }}</option>
 102           </select>
 103         </div>
 104       </div>
 105     </div>
 106     <div class="modal-footer">
 107       <cd-form-button-panel (submitActionEvent)="submit()"
 108                             [form]="multisiteZoneForm"
 109                             [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 110     </div>
 111     </form>
 112   </ng-container>
 113 </cd-modal>