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               [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="@@formTitle">
  67           {{ action | titlecase }} {{ resource | upperFirst }}
  68         </span>
  69         <cd-helper *ngIf="edit"
  70                    i18n>Editing a silence will expire the old silence and recreate it as a new silence</cd-helper>
  71       </div>
  72
  73       <!-- Creator -->
  74       <div class="card-body">
  75         <div class="form-group row">
  76           <label class="cd-col-form-label required"
  77                  for="created-by"
  78                  i18n>Creator</label>
  79           <div class="cd-col-form-input">
  80             <input class="form-control"
  81                    formControlName="createdBy"
  82                    id="created-by"
  83                    name="created-by"
  84                    type="text">
  85             <span *ngIf="form.showError('createdBy', formDir, 'required')"
  86                   class="invalid-feedback"
  87                   i18n>This field is required!</span>
  88           </div>
  89         </div>
  90
  91         <!-- Comment -->
  92         <div class="form-group row">
  93           <label class="cd-col-form-label required"
  94                  for="comment"
  95                  i18n>Comment</label>
  96           <div class="cd-col-form-input">
  97             <textarea class="form-control"
  98                       formControlName="comment"
  99                       id="comment"
 100                       name="comment"
 101                       type="text">
 102             </textarea>
 103             <span *ngIf="form.showError('comment', formDir, 'required')"
 104                   class="invalid-feedback"
 105                   i18n>This field is required!</span>
 106           </div>
 107         </div>
 108
 109         <!-- Start time -->
 110         <div class="form-group row">
 111           <label class="cd-col-form-label"
 112                  for="starts-at">
 113             <span class="required"
 114                   i18n>Start time</span>
 115             <cd-helper i18n>If the start time lies in the past the creation time will be used</cd-helper>
 116           </label>
 117           <div class="cd-col-form-input">
 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="invalid-feedback"
 126                   i18n>This field is required!</span>
 127           </div>
 128         </div>
 129
 130         <!-- Duration -->
 131         <div class="form-group row">
 132           <label class="cd-col-form-label required"
 133                  for="duration"
 134                  i18n>Duration</label>
 135           <div class="cd-col-form-input">
 136             <input class="form-control"
 137                    formControlName="duration"
 138                    id="duration"
 139                    name="duration"
 140                    type="text">
 141             <span *ngIf="form.showError('duration', formDir, 'required')"
 142                   class="invalid-feedback"
 143                   i18n>This field is required!</span>
 144           </div>
 145         </div>
 146
 147         <!-- End time -->
 148         <div class="form-group row">
 149           <label class="cd-col-form-label required"
 150                  for="ends-at"
 151                  i18n>End time</label>
 152           <div class="cd-col-form-input">
 153             <input [bsConfig]="bsConfig"
 154                    bsDatepicker
 155                    class="form-control"
 156                    formControlName="endsAt"
 157                    id="ends-at"
 158                    name="ends-at">
 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-submit-button (submitAction)="submit()"
 207                             [form]="formDir"
 208                             i18n="@@formTitle">
 209             {{ action | titlecase }} {{ resource | upperFirst }}
 210           </cd-submit-button>
 211           <cd-back-button></cd-back-button>
 212         </div>
 213       </div>
 214     </div>
 215   </form>
 216 </div>