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

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