git.apps.os.sepia.ceph.com Git - ceph.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               <span
  43                 class="invalid-feedback"
  44                 *ngIf="currentFormGroupContext.showError('bucket_name', frm, 'bucketNameNotAllowed')"
  45                 i18n>The bucket with chosen name does not exist.</span>
  46             </div>
  47           </div>
  48           <ng-container *ngIf="groupType == flowType.symmetrical; else directionalFlow">
  49             <div class="form-group row">
  50               <label
  51                   class="cd-col-form-label required"
  52                   for="zones">
  53                 <ng-container i18n>Zones</ng-container>
  54                 <cd-helper>
  55                   <span i18n>Flow need to be associated with atleast one zone</span>
  56                 </cd-helper>
  57               </label>
  58               <div class="cd-col-form-input">
  59                 <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'zones', zone: zones }"></ng-container>
  60               </div>
  61             </div>
  62           </ng-container>
  63           <ng-template #directionalFlow>
  64             <div class="form-group row">
  65               <label
  66                 class="cd-col-form-label required"
  67                 for="source_zone"
  68                 i18n>Source Zone
  69               </label>
  70               <div class="cd-col-form-input">
  71                 <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'source_zone', zone: sourceZones }"></ng-container>
  72               </div>
  73             </div>
  74             <div class="form-group row">
  75               <label
  76                   class="cd-col-form-label required"
  77                   for="destination_zone"
  78                   i18n>Destination Zone</label>
  79               <div class="cd-col-form-input">
  80                 <ng-container *ngTemplateOutlet="zoneMultiSelect;context: { name: 'destination_zone', zone: destinationZones }"></ng-container>
  81               </div>
  82             </div>
  83           </ng-template>
  84         </div>
  85         <div class="modal-footer">
  86           <cd-form-button-panel
  87             (submitActionEvent)="submit()"
  88             [form]="currentFormGroupContext"
  89             [submitText]="(action | titlecase) + ' ' + (groupType | upperFirst) + ' ' + 'Flow'"></cd-form-button-panel>
  90         </div>
  91       </form>
  92     </ng-container>
  93   </cd-modal>
  94
  95 <ng-template
  96   #zoneMultiSelect
  97   let-name="name"
  98   let-zone="zone">
  99   <cd-select-badges
 100     [id]="name"
 101     [name]="name"
 102     [customBadges]="zone.customBadges"
 103     [customBadgeValidators]="zone.data.validators"
 104     [messages]="zone.data.messages"
 105     [data]="zone.data.selected"
 106     [options]="zone.data.available"
 107     (selection)="zoneSelection()">
 108   </cd-select-badges>
 109   <i
 110     *ngIf="zone.data.selected.length <= 0"
 111     i18n-title
 112     title="Flow should be associated with {{name?.split('_')}}"
 113     class="{{ icons.warning }} icon-warning-color">
 114   </i>
 115   <span
 116     class="invalid-feedback"
 117     *ngIf="currentFormGroupContext.showError(name, frm, 'required')"
 118     i18n>{{name?.split('_')}} selection is required!
 119   </span>
 120 </ng-template>