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 }} {{ resource | upperFirst }}</ng-container>
   4     <ng-container class="modal-content"
   5                   *cdFormLoading="loading">
   6     <form name="snapScheduleForm"
   7           #formDir="ngForm"
   8           [formGroup]="snapScheduleForm"
   9           novalidate>
  10       <div class="modal-body">
  11         <!-- Directory -->
  12         <div class="form-group row">
  13           <label class="cd-col-form-label required"
  14                  for="directory"
  15                  i18n>Directory
  16           </label>
  17           <div class="cd-col-form-input">
  18             <div class="input-group">
  19             <input id="typeahead-http"
  20                    i18n
  21                    type="text"
  22                    class="form-control"
  23                    disabled="directoryStore.isLoading"
  24                    formControlName="directory"
  25                    [ngbTypeahead]="search"
  26                    [placeholder]="directoryStore.isLoading ? 'Loading directories' : 'Directory search'" />
  27             <div *ngIf="directoryStore.isLoading">
  28               <i [ngClass]="[icons.spinner, icons.spin, 'mt-2', 'me-2']"></i>
  29             </div>
  30           </div>
  31             <span class="invalid-feedback"
  32                   *ngIf="snapScheduleForm.showError('directory', formDir, 'required')"
  33                   i18n>This field is required.</span>
  34             <span class="invalid-feedback"
  35                   *ngIf="snapScheduleForm.showError('directory', formDir, 'notUnique')"
  36                   i18n>A snapshot schedule for this path already exists.</span>
  37           </div>
  38         </div>
  39         <!--Start date -->
  40         <div class="form-group row">
  41           <label class="cd-col-form-label required"
  42                  for="startDate"
  43                  i18n>Start date
  44           </label>
  45           <div class="cd-col-form-input">
  46             <div class="input-group">
  47               <input class="form-control"
  48                      placeholder="yyyy-mm-dd"
  49                      name="startDate"
  50                      id="startDate"
  51                      formControlName="startDate"
  52                      [minDate]="minDate"
  53                      ngbDatepicker
  54                      #d="ngbDatepicker"
  55                      (click)="d.open()">
  56               <button type="button"
  57                       class="btn btn-light"
  58                       (click)="d.toggle()"
  59                       title="Open">
  60                 <i [ngClass]="icons.calendar"></i>
  61               </button>
  62             </div>
  63             <span class="invalid-feedback"
  64                   *ngIf="snapScheduleForm.showError('startDate', formDir, 'required')"
  65                   i18n>This field is required.</span>
  66           </div>
  67         </div>
  68         <!-- Start time -->
  69         <div class="form-group row">
  70           <label class="cd-col-form-label required"
  71                  for="startTime"
  72                  i18n>Start time
  73             <cd-helper>The time zone is assumed to be UTC.</cd-helper>
  74           </label>
  75           <div class="cd-col-form-input">
  76             <ngb-timepicker [spinners]="false"
  77                             [seconds]="false"
  78                             [meridian]="true"
  79                             formControlName="startTime"
  80                             id="startTime"
  81                             name="startTime"></ngb-timepicker>
  82             <span class="invalid-feedback"
  83                   *ngIf="snapScheduleForm.showError('startTime', formDir, 'required')"
  84                   i18n>This field is required.</span>
  85           </div>
  86         </div>
  87         <!-- Repeat interval -->
  88         <div class="form-group row">
  89           <label class="cd-col-form-label required"
  90                  for="repeatInterval"
  91                  i18n>Schedule
  92           </label>
  93           <div class="cd-col-form-input">
  94             <div class="input-group">
  95               <input class="form-control"
  96                      type="number"
  97                      min="1"
  98                      id="repeatInterval"
  99                      name="repeatInterval"
 100                      formControlName="repeatInterval">
 101               <select [ngClass]="['form-select', 'me-5']"
 102                       id="repeatFrequency"
 103                       name="repeatFrequency"
 104                       formControlName="repeatFrequency"
 105                       *ngIf="repeatFrequencies">
 106                 <option *ngFor="let freq of repeatFrequencies"
 107                         [value]="freq[1]"
 108                         i18n>{{ freq[0] }}</option>
 109               </select>
 110             </div>
 111             <span class="invalid-feedback"
 112                   *ngIf="snapScheduleForm.showError('repeatFrequency', formDir, 'notUnique')"
 113                   i18n>This schedule already exists for the selected directory.</span>
 114             <span class="invalid-feedback"
 115                   *ngIf="snapScheduleForm.showError('repeatInterval', formDir, 'required')"
 116                   i18n>This field is required.</span>
 117             <span class="invalid-feedback"
 118                   *ngIf="snapScheduleForm.showError('repeatInterval', formDir, 'min')"
 119                   i18n>Choose a value greater than 0.</span>
 120           </div>
 121         </div>
 122         <!-- Retention policies -->
 123         <ng-container formArrayName="retentionPolicies"
 124                       *ngFor="let retentionPolicy of retentionPolicies.controls; index as i">
 125           <ng-container [formGroupName]="i">
 126             <div class="form-group row">
 127               <label [ngClass]="{'cd-col-form-label': true, 'visible': i == 0, 'invisible': i > 0}"
 128                     for="retentionInterval"
 129                     i18n>Retention policy
 130               </label>
 131               <div class="cd-col-form-input">
 132                 <div class="input-group">
 133                   <input class="form-control"
 134                          type="number"
 135                          min="1"
 136                          id="retentionInterval"
 137                          name="retentionInterval"
 138                          formControlName="retentionInterval">
 139                   <select class="form-select"
 140                           id="retentionFrequency"
 141                           name="retentionFrequency"
 142                           formControlName="retentionFrequency"
 143                           *ngIf="retentionFrequencies">
 144                     <option *ngFor="let freq of retentionFrequencies"
 145                             [value]="freq[1]"
 146                             i18n>{{ freq[0] }}</option>
 147                   </select>
 148                   <button class="btn btn-light"
 149                           type="button"
 150                           (click)="removeRetentionPolicy(i)">
 151                     <i [ngClass]="[icons.trash]"></i>
 152                   </button>
 153                 </div>
 154                 <span class="invalid-feedback"
 155                       *ngIf="snapScheduleForm.controls['retentionPolicies'].controls[i].invalid"
 156                       i18n>This retention policy already exists for the selected directory.</span>
 157               </div>
 158             </div>
 159           </ng-container>
 160         </ng-container>
 161         <div class="d-flex flex-row align-content-center justify-content-end">
 162           <button class="btn btn-light"
 163                   type="button"
 164                   (click)="addRetentionPolicy()">
 165             <i [ngClass]="[icons.add, 'me-2']"></i>
 166             <span i18n>Add retention policy</span>
 167           </button>
 168         </div>
 169       </div>
 170
 171       <div class="modal-footer">
 172         <cd-form-button-panel (submitActionEvent)="submit()"
 173                               [form]="snapScheduleForm"
 174                               [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 175       </div>
 176     </form>
 177   </ng-container>
 178 </cd-modal>