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