ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html

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