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

   1 <ng-template #matcherTpl
   2              let-matcher="matcher"
   3              let-index="index">
   4   <div class="input-group my-2">
   5     <ng-container *ngFor="let config of matcherConfig">
   6       <div class="input-group-prepend">
   7         <span class="input-group-text"
   8               *ngIf="config.attribute === 'isRegex'"
   9               [ngbTooltip]="config.tooltip">
  10           <i *ngIf="matcher[config.attribute]">~</i>
  11           <i *ngIf="!matcher[config.attribute]">=</i>
  12         </span>
  13       </div>
  14
  15       <ng-container *ngIf="config.attribute !== 'isRegex'">
  16         <input type="text"
  17                id="matcher-{{config.attribute}}-{{index}}"
  18                class="form-control"
  19                [value]="matcher[config.attribute]"
  20                disabled
  21                readonly>
  22       </ng-container>
  23     </ng-container>
  24
  25     <!-- Matcher actions -->
  26     <span class="input-group-append">
  27       <button type="button"
  28               class="btn btn-light"
  29               id="matcher-edit-{{index}}"
  30               i18n-ngbTooltip
  31               ngbTooltip="Edit"
  32               (click)="showMatcherModal(index)">
  33         <i [ngClass]="[icons.edit]"></i>
  34       </button>
  35       <button type="button"
  36               class="btn btn-light"
  37               id="matcher-delete-{{index}}"
  38               i18n-ngbTooltip
  39               ngbTooltip="Delete"
  40               (click)="deleteMatcher(index)">
  41         <i [ngClass]="[icons.trash]"></i>
  42       </button>
  43     </span>
  44   </div>
  45   <span class="help-block"></span>
  46 </ng-template>
  47
  48 <div class="cd-col-form">
  49   <form #formDir="ngForm"
  50         [formGroup]="form"
  51         class="form"
  52         name="form"
  53         novalidate>
  54     <div class="card">
  55       <div class="card-header">
  56         <span i18n>{{ action | titlecase }} {{ resource | upperFirst }}</span>
  57         <cd-helper *ngIf="edit"
  58                    i18n>Editing a silence will expire the old silence and recreate it as a new silence</cd-helper>
  59       </div>
  60
  61       <!-- Creator -->
  62       <div class="card-body">
  63         <div class="form-group row">
  64           <label class="cd-col-form-label required"
  65                  for="created-by"
  66                  i18n>Creator</label>
  67           <div class="cd-col-form-input">
  68             <input class="form-control"
  69                    formControlName="createdBy"
  70                    id="created-by"
  71                    name="created-by"
  72                    type="text">
  73             <span *ngIf="form.showError('createdBy', formDir, 'required')"
  74                   class="invalid-feedback"
  75                   i18n>This field is required!</span>
  76           </div>
  77         </div>
  78
  79         <!-- Comment -->
  80         <div class="form-group row">
  81           <label class="cd-col-form-label required"
  82                  for="comment"
  83                  i18n>Comment</label>
  84           <div class="cd-col-form-input">
  85             <textarea class="form-control"
  86                       formControlName="comment"
  87                       id="comment"
  88                       name="comment"
  89                       type="text">
  90             </textarea>
  91             <span *ngIf="form.showError('comment', formDir, 'required')"
  92                   class="invalid-feedback"
  93                   i18n>This field is required!</span>
  94           </div>
  95         </div>
  96
  97         <!-- Start time -->
  98         <div class="form-group row">
  99           <label class="cd-col-form-label"
 100                  for="starts-at">
 101             <span class="required"
 102                   i18n>Start time</span>
 103             <cd-helper i18n>If the start time lies in the past the creation time will be used</cd-helper>
 104           </label>
 105           <div class="cd-col-form-input">
 106             <input class="form-control"
 107                    formControlName="startsAt"
 108                    [ngbPopover]="popStart"
 109                    triggers="manual"
 110                    #ps="ngbPopover"
 111                    (click)="ps.open()"
 112                    (keypress)="ps.close()">
 113             <span *ngIf="form.showError('startsAt', formDir, 'required')"
 114                   class="invalid-feedback"
 115                   i18n>This field is required!</span>
 116           </div>
 117         </div>
 118
 119         <!-- Duration -->
 120         <div class="form-group row">
 121           <label class="cd-col-form-label required"
 122                  for="duration"
 123                  i18n>Duration</label>
 124           <div class="cd-col-form-input">
 125             <input class="form-control"
 126                    formControlName="duration"
 127                    id="duration"
 128                    name="duration"
 129                    type="text">
 130             <span *ngIf="form.showError('duration', formDir, 'required')"
 131                   class="invalid-feedback"
 132                   i18n>This field is required!</span>
 133           </div>
 134         </div>
 135
 136         <!-- End time -->
 137         <div class="form-group row">
 138           <label class="cd-col-form-label required"
 139                  for="ends-at"
 140                  i18n>End time</label>
 141           <div class="cd-col-form-input">
 142             <input class="form-control"
 143                    formControlName="endsAt"
 144                    [ngbPopover]="popEnd"
 145                    triggers="manual"
 146                    #pe="ngbPopover"
 147                    (click)="pe.open()"
 148                    (keypress)="pe.close()">
 149             <span *ngIf="form.showError('endsAt', formDir, 'required')"
 150                   class="invalid-feedback"
 151                   i18n>This field is required!</span>
 152           </div>
 153         </div>
 154
 155         <!-- Matchers -->
 156         <fieldset>
 157           <legend class="required"
 158                   i18n>Matchers</legend>
 159
 160           <div class="cd-col-form-offset">
 161             <h5 *ngIf="matchers.length === 0"
 162                 [ngClass]="{'text-warning': !formDir.submitted, 'text-danger': formDir.submitted}">
 163               <strong i18n>A silence requires at least one matcher</strong>
 164             </h5>
 165
 166             <span *ngFor="let matcher of matchers; let i=index;">
 167               <ng-container *ngTemplateOutlet="matcherTpl; context:{index: i, matcher: matcher}"></ng-container>
 168             </span>
 169
 170             <div class="row">
 171               <div class="col-12">
 172                 <button type="button"
 173                         id="add-matcher"
 174                         class="btn btn-light float-right my-3"
 175                         [ngClass]="{'btn-warning': formDir.submitted && matchers.length === 0 }"
 176                         (click)="showMatcherModal()">
 177                   <i [ngClass]="[icons.add]"></i>
 178                   <ng-container i18n>Add matcher</ng-container>
 179                 </button>
 180               </div>
 181             </div>
 182           </div>
 183
 184           <div *ngIf="matchers.length && matcherMatch"
 185                class="cd-col-form-offset {{matcherMatch.cssClass}}"
 186                id="match-state">
 187             <span class="text-muted {{matcherMatch.cssClass}}">
 188               {{ matcherMatch.status }}
 189             </span>
 190           </div>
 191         </fieldset>
 192       </div>
 193
 194       <div class="card-footer">
 195         <div class="text-right">
 196           <cd-form-button-panel (submitActionEvent)="submit()"
 197                                 [form]="form"
 198                                 [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 199         </div>
 200       </div>
 201     </div>
 202   </form>
 203 </div>
 204
 205 <ng-template #popStart>
 206   <cd-date-time-picker [control]="form.get('startsAt')"
 207                        [hasSeconds]="false"></cd-date-time-picker>
 208 </ng-template>
 209
 210
 211 <ng-template #popEnd>
 212   <cd-date-time-picker [control]="form.get('endsAt')"
 213                        [hasSeconds]="false"></cd-date-time-picker>
 214 </ng-template>