]>
Commit | Line | Data |
---|---|---|
494da23a TL |
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> |