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