ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html

   1 <div class="form-group row">
   2   <label class="cd-col-form-label"
   3          i18n>Clients</label>
   4
   5   <div class="cd-col-form-input"
   6        [formGroup]="form"
   7        #formDir="ngForm">
   8     <span *ngIf="form.get('clients').value.length === 0"
   9           class="no-border text-muted">
  10       <span class="form-text text-muted"
  11             i18n>Any client can access</span>
  12     </span>
  13
  14     <ng-container formArrayName="clients">
  15       <div *ngFor="let item of clientsFormArray.controls; let index = index; trackBy: trackByFn">
  16         <div class="card"
  17              [formGroup]="item">
  18           <div class="card-header">
  19             {{ (index + 1) | ordinal }}
  20             <span class="float-right clickable"
  21                   name="remove_client"
  22                   (click)="removeClient(index)"
  23                   ngbTooltip="Remove">&times;</span>
  24           </div>
  25
  26           <div class="card-body">
  27             <!-- Addresses -->
  28             <div class="form-group row">
  29               <label i18n
  30                      class="cd-col-form-label required"
  31                      for="addresses">Addresses</label>
  32               <div class="cd-col-form-input">
  33                 <input type="text"
  34                        class="form-control"
  35                        name="addresses"
  36                        id="addresses"
  37                        formControlName="addresses"
  38                        placeholder="192.168.0.10, 192.168.1.0/8">
  39                 <span class="invalid-feedback">
  40                   <span *ngIf="showError(index, 'addresses', formDir, 'required')"
  41                         i18n>This field is required.</span>
  42
  43                   <span *ngIf="showError(index, 'addresses', formDir, 'pattern')">
  44                     <ng-container i18n>Must contain one or more comma-separated values</ng-container>
  45                     <br>
  46                     <ng-container i18n>For example:</ng-container> 192.168.0.10, 192.168.1.0/8
  47                   </span>
  48                 </span>
  49               </div>
  50             </div>
  51
  52             <!-- Access Type-->
  53             <div class="form-group row">
  54               <label i18n
  55                      class="cd-col-form-label"
  56                      for="access_type">Access Type</label>
  57               <div class="cd-col-form-input">
  58                 <select class="form-control"
  59                         name="access_type"
  60                         id="access_type"
  61                         formControlName="access_type">
  62                   <option value="">{{ getNoAccessTypeDescr() }}</option>
  63                   <option *ngFor="let item of nfsAccessType"
  64                           [value]="item.value">{{ item.value }}</option>
  65                 </select>
  66                 <span class="form-text text-muted"
  67                       *ngIf="getValue(index, 'access_type')">
  68                   {{ getAccessTypeHelp(index) }}
  69                 </span>
  70               </div>
  71             </div>
  72
  73             <!-- Squash -->
  74             <div class="form-group row">
  75               <label class="cd-col-form-label"
  76                      for="squash">
  77                 <span i18n>Squash</span>
  78                 <ng-container *ngTemplateOutlet="squashHelperTpl"></ng-container>
  79               </label>
  80               <div class="cd-col-form-input">
  81                 <select class="form-control"
  82                         name="squash"
  83                         id="squash"
  84                         formControlName="squash">
  85                   <option value="">{{ getNoSquashDescr() }}</option>
  86                   <option *ngFor="let squash of nfsSquash"
  87                           [value]="squash">{{ squash }}</option>
  88                 </select>
  89               </div>
  90             </div>
  91           </div>
  92         </div>
  93       </div>
  94     </ng-container>
  95
  96     <div class="row">
  97       <div class="col-12">
  98         <div class="float-right">
  99           <button class="btn btn-light "
 100                   (click)="addClient()"
 101                   name="add_client">
 102             <i [ngClass]="[icons.add]"></i>
 103             <ng-container i18n>Add clients</ng-container>
 104           </button>
 105         </div>
 106       </div>
 107     </div>
 108   </div>
 109 </div>