git.apps.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 <cd-modal [modalRef]="activeModal">
   2   <ng-container
   3     i18n="form title"
   4     class="modal-title">{{ action | titlecase }} Pipe</ng-container>
   5
   6   <ng-container class="modal-content">
   7     <form
   8       name="pipeForm"
   9       #frm="ngForm"
  10       [formGroup]="pipeForm"
  11       novalidate>
  12       <div class="modal-body">
  13         <div class="form-group row">
  14           <label
  15             class="cd-col-form-label required"
  16             for="pipe_id"
  17             i18n>Name</label>
  18           <div class="cd-col-form-input">
  19             <input
  20               class="form-control"
  21               type="text"
  22               placeholder="Pipe Name..."
  23               id="pipe_id"
  24               name="pipe_id"
  25               formControlName="pipe_id"
  26               [readonly]="editing"/>
  27           </div>
  28           </div>
  29           <div class="form-group row">
  30             <label
  31               class="cd-col-form-label required"
  32               for="source_zone"
  33               i18n>Source Zone </label>
  34             <div class="cd-col-form-input">
  35               <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'source_zones', zone: sourceZones }"></ng-container>
  36             </div>
  37           </div>
  38           <div class="form-group row">
  39             <label
  40               class="cd-col-form-label required"
  41               for="destination_zone"
  42               i18n>Destination Zone</label>
  43             <div class="cd-col-form-input">
  44               <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'destination_zones', zone: destZones }"></ng-container>
  45             </div>
  46           </div>
  47         <div class="form-group row">
  48           <label
  49             class="cd-col-form-label"
  50             for="bucket"
  51             i18n>Bucket Name</label>
  52           <div class="cd-col-form-input">
  53             <input
  54               id="bucket"
  55               name="bucket"
  56               class="form-control"
  57               type="text"
  58               i18n-placeholder
  59               placeholder="Bucket Name..."
  60               formControlName="bucket_name"/>
  61           </div>
  62         </div>
  63         <div class="form-group row">
  64           <label
  65             class="cd-col-form-label"
  66             for="source_bucket"
  67             i18n>Source Bucket</label>
  68           <div class="cd-col-form-input">
  69             <input
  70               id="source_bucket"
  71               name="source_bucket"
  72               class="form-control"
  73               type="text"
  74               i18n-placeholder
  75               placeholder="Source Bucket Name..."
  76               formControlName="source_bucket"/>
  77           </div>
  78           </div>
  79         <div class="form-group row">
  80           <label
  81             class="cd-col-form-label"
  82             for="dest_bucket"
  83             i18n>Destination Bucket</label>
  84           <div class="cd-col-form-input">
  85             <input
  86               id="dest_bucket"
  87               name="dest_bucket"
  88               class="form-control"
  89               type="text"
  90               i18n-placeholder
  91               placeholder="Destination Bucket Name..."
  92               formControlName="destination_bucket"/>
  93           </div>
  94         </div>
  95       </div>
  96       <div class="modal-footer">
  97         <cd-form-button-panel
  98           (submitActionEvent)="submit()"
  99           [form]="pipeForm"
 100           [submitText]="(action | titlecase) + ' ' + 'Pipe'">
 101         </cd-form-button-panel>
 102       </div>
 103     </form>
 104   </ng-container>
 105 </cd-modal>
 106
 107 <ng-template
 108   #zoneMultiSelect
 109   let-name="name"
 110   let-zone="zone">
 111   <cd-select-badges
 112     id="{{ name }}"
 113     name="{{ name }}"
 114     [customBadges]="zone.customBadges"
 115     [customBadgeValidators]="zone.data.validators"
 116     [messages]="zone.data.messages"
 117     [data]="zone.data.selected"
 118     [options]="zone.data.available"
 119     (selection)="onZoneSelection(name)">
 120   </cd-select-badges>
 121   <i
 122     *ngIf="zone.data.selected.length <= 0"
 123     i18n-title
 124     title="Pipe should be associated with {{ name }}"
 125     class="{{ icons.warning }} icon-warning-color">
 126   </i>
 127   <span
 128     class="invalid-feedback"
 129     *ngIf="pipeForm.showError(name, frm, 'required')"
 130     i18n>{{ name }} selection is required!
 131   </span>
 132 </ng-template>