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