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

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