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 class="form-control"
 119                    formControlName="startsAt"
 120                    [ngbPopover]="popStart"
 121                    triggers="manual"
 122                    #ps="ngbPopover"
 123                    (click)="ps.open()"
 124                    (keypress)="ps.close()">
 125             <span *ngIf="form.showError('startsAt', formDir, 'required')"
 126                   class="invalid-feedback"
 127                   i18n>This field is required!</span>
 128           </div>
 129         </div>
 130
 131         <!-- Duration -->
 132         <div class="form-group row">
 133           <label class="cd-col-form-label required"
 134                  for="duration"
 135                  i18n>Duration</label>
 136           <div class="cd-col-form-input">
 137             <input class="form-control"
 138                    formControlName="duration"
 139                    id="duration"
 140                    name="duration"
 141                    type="text">
 142             <span *ngIf="form.showError('duration', formDir, 'required')"
 143                   class="invalid-feedback"
 144                   i18n>This field is required!</span>
 145           </div>
 146         </div>
 147
 148         <!-- End time -->
 149         <div class="form-group row">
 150           <label class="cd-col-form-label required"
 151                  for="ends-at"
 152                  i18n>End time</label>
 153           <div class="cd-col-form-input">
 154             <input class="form-control"
 155                    formControlName="endsAt"
 156                    [ngbPopover]="popEnd"
 157                    triggers="manual"
 158                    #pe="ngbPopover"
 159                    (click)="pe.open()"
 160                    (keypress)="pe.close()">
 161             <span *ngIf="form.showError('endsAt', formDir, 'required')"
 162                   class="invalid-feedback"
 163                   i18n>This field is required!</span>
 164           </div>
 165         </div>
 166
 167         <!-- Matchers -->
 168         <fieldset>
 169           <legend class="required"
 170                   i18n>Matchers</legend>
 171
 172           <div class="cd-col-form-offset">
 173             <h5 *ngIf="matchers.length === 0"
 174                 [ngClass]="{'text-warning': !formDir.submitted, 'text-danger': formDir.submitted}">
 175               <strong i18n>A silence requires at least one matcher</strong>
 176             </h5>
 177
 178             <span *ngFor="let matcher of matchers; let i=index;">
 179               <ng-container *ngTemplateOutlet="matcherTpl; context:{index: i, matcher: matcher}"></ng-container>
 180             </span>
 181
 182             <div class="row">
 183               <div class="col-12">
 184                 <button type="button"
 185                         id="add-matcher"
 186                         class="btn btn-light float-right my-3"
 187                         [ngClass]="{'btn-warning': formDir.submitted && matchers.length === 0 }"
 188                         (click)="showMatcherModal()">
 189                   <i [ngClass]="[icons.add]"></i>
 190                   <ng-container i18n>Add matcher</ng-container>
 191                 </button>
 192               </div>
 193             </div>
 194           </div>
 195
 196           <div *ngIf="matchers.length && matcherMatch"
 197                class="cd-col-form-offset {{matcherMatch.cssClass}}"
 198                id="match-state">
 199             <span class="text-muted {{matcherMatch.cssClass}}">
 200               {{ matcherMatch.status }}
 201             </span>
 202           </div>
 203         </fieldset>
 204       </div>
 205
 206       <div class="card-footer">
 207         <div class="text-right">
 208           <cd-form-button-panel (submitActionEvent)="submit()"
 209                                 [form]="form"
 210                                 [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
 211         </div>
 212       </div>
 213     </div>
 214   </form>
 215 </div>
 216
 217 <ng-template #popStart>
 218   <cd-date-time-picker [control]="form.get('startsAt')"
 219                        [hasSeconds]="false"></cd-date-time-picker>
 220 </ng-template>
 221
 222
 223 <ng-template #popEnd>
 224   <cd-date-time-picker [control]="form.get('endsAt')"
 225                        [hasSeconds]="false"></cd-date-time-picker>
 226 </ng-template>