Skip to content

Commit 4ec2377

Browse files
torkelotorkelo
committed
fix(notifications): added form validation and restored Send Test button which was always hidden, grafana#6159 
1 parent c6cf6d4 commit 4ec2377

File tree

3 files changed

+73
-69
lines changed

3 files changed

+73
-69
lines changed

‎public/app/features/alerting/notification_edit_ctrl.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import config from 'app/core/config';
77

88
export class AlertNotificationEditCtrl {
99
model: any;
10+
theForm: any;
1011
testSeverity: string = "critical";
1112

1213
/** @ngInject */
@@ -35,6 +36,10 @@ export class AlertNotificationEditCtrl {
3536
}
3637

3738
save() {
39+
if (!this.theForm.$valid) {
40+
return;
41+
}
42+
3843
if (this.model.id) {
3944
this.backendSrv.put(`/api/alert-notifications/${this.model.id}`, this.model).then(res => {
4045
this.model = res;
@@ -53,6 +58,10 @@ export class AlertNotificationEditCtrl {
5358
}
5459

5560
testNotification() {
61+
if (!this.theForm.$valid) {
62+
return;
63+
}
64+
5665
var payload = {
5766
name: this.model.name,
5867
type: this.model.type,

‎public/app/features/alerting/partials/notification_edit.html‎

Lines changed: 63 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -6,78 +6,73 @@
66
</navbar>
77

88
<div class="page-container" >
9-
<div class="page-header">
10-
<h1>Alert notification</h1>
9+
<div class="page-header">
10+
<h1>Alert notification</h1>
1111
</div>
1212

13-
<div class="gf-form-group">
14-
<div class="gf-form">
15-
<span class="gf-form-label width-12">Name</span>
16-
<input type="text" class="gf-form-input max-width-15" ng-model="ctrl.model.name" required></input>
17-
</div>
18-
<div class="gf-form">
19-
<span class="gf-form-label width-12">Type</span>
20-
<div class="gf-form-select-wrapper width-15">
21-
<select class="gf-form-input"
22-
ng-model="ctrl.model.type"
23-
ng-options="t for t in ['webhook', 'email', 'slack']"
24-
ng-change="ctrl.typeChanged(notification, $index)">
25-
</select>
26-
</div>
27-
</div>
28-
<div class="gf-form">
29-
<gf-form-switch
30-
class="gf-form"
31-
label="Send on all alerts"
32-
label-class="width-12"
33-
checked="ctrl.model.isDefault"
34-
tooltip="Use this notification for all alerts">
35-
</gf-form-switch>
36-
</div>
37-
</div>
13+
<form name="ctrl.theForm">
14+
<div class="gf-form-group">
15+
<div class="gf-form">
16+
<span class="gf-form-label width-12">Name</span>
17+
<input type="text" required class="gf-form-input max-width-15" ng-model="ctrl.model.name" required></input>
18+
</div>
19+
<div class="gf-form">
20+
<span class="gf-form-label width-12">Type</span>
21+
<div class="gf-form-select-wrapper width-15">
22+
<select class="gf-form-input" ng-model="ctrl.model.type" ng-options="t for t in ['webhook', 'email', 'slack']" ng-change="ctrl.typeChanged(notification, $index)">
23+
</select>
24+
</div>
25+
</div>
26+
<div class="gf-form">
27+
<gf-form-switch class="gf-form" label="Send on all alerts" label-class="width-12" checked="ctrl.model.isDefault" tooltip="Use this notification for all alerts">
28+
</gf-form-switch>
29+
</div>
30+
</div>
3831

39-
<div class="gf-form-group" ng-show="ctrl.model.type === 'webhook'">
40-
<h3 class="page-heading">Webhook settings</h3>
41-
<div class="gf-form">
42-
<span class="gf-form-label width-6">Url</span>
43-
<input type="text" class="gf-form-input max-width-26" ng-model="ctrl.model.settings.url"></input>
44-
</div>
45-
<div class="gf-form-inline">
46-
<div class="gf-form">
47-
<span class="gf-form-label width-6">Username</span>
48-
<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.username"></input>
49-
</div>
50-
<div class="gf-form">
51-
<span class="gf-form-label width-6">Password</span>
52-
<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.password"></input>
53-
</div>
54-
</div>
55-
</div>
32+
<div class="gf-form-group" ng-if="ctrl.model.type === 'webhook'">
33+
<h3 class="page-heading">Webhook settings</h3>
34+
<div class="gf-form">
35+
<span class="gf-form-label width-6">Url</span>
36+
<input type="text" required class="gf-form-input max-width-26" ng-model="ctrl.model.settings.url"></input>
37+
</div>
38+
<div class="gf-form-inline">
39+
<div class="gf-form">
40+
<span class="gf-form-label width-6">Username</span>
41+
<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.username"></input>
42+
</div>
43+
<div class="gf-form">
44+
<span class="gf-form-label width-6">Password</span>
45+
<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.password"></input>
46+
</div>
47+
</div>
48+
</div>
5649

57-
<div class="gf-form-group" ng-show="ctrl.model.type === 'slack'">
58-
<h3 class="page-heading">Slack settings</h3>
59-
<div class="gf-form">
60-
<span class="gf-form-label width-6">Url</span>
61-
<input type="text" class="gf-form-input max-width-30" ng-model="ctrl.model.settings.url" placeholder="Slack incoming webhook url"></input>
62-
</div>
63-
</div>
50+
<div class="gf-form-group" ng-if="ctrl.model.type === 'slack'">
51+
<h3 class="page-heading">Slack settings</h3>
52+
<div class="gf-form">
53+
<span class="gf-form-label width-6">Url</span>
54+
<input type="text" required class="gf-form-input max-width-30" ng-model="ctrl.model.settings.url" placeholder="Slack incoming webhook url"></input>
55+
</div>
56+
</div>
6457

65-
<div class="gf-form-group section" ng-show="ctrl.model.type === 'email'">
66-
<h3 class="page-heading">Email addresses</h3>
67-
<div class="gf-form">
68-
<textarea rows="7" class="gf-form-input width-25" ng-model="ctrl.model.settings.addresses"></textarea>
69-
</div>
70-
</div>
58+
<div class="gf-form-group section" ng-if="ctrl.model.type === 'email'">
59+
<h3 class="page-heading">Email addresses</h3>
60+
<div class="gf-form">
61+
<textarea rows="7" class="gf-form-input width-25" required ng-model="ctrl.model.settings.addresses"></textarea>
62+
</div>
63+
</div>
7164

72-
<div class="gf-form-group">
73-
<div class="gf-form-inline">
74-
<div class="gf-form width-6">
75-
<button ng-click="ctrl.save()" class="btn btn-success">Save</button>
76-
</div>
77-
<div class="gf-form width-20">
78-
<div class="gf-form" ng-show="ctrl.showTest">
79-
<button ng-click="ctrl.testNotification()" class="btn btn-secondary">Send</button>
80-
</div>
81-
</div>
82-
</div>
65+
<div class="gf-form-group">
66+
<div class="gf-form-inline">
67+
<div class="gf-form width-6">
68+
<button type="submit" ng-click="ctrl.save()" class="btn btn-success">Save</button>
69+
</div>
70+
<div class="gf-form width-20">
71+
<div class="gf-form">
72+
<button type="submit" ng-click="ctrl.testNotification()" class="btn btn-secondary">Send Test</button>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
</form>
8378
</div>

‎public/app/features/plugins/ds_edit_ctrl.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export class DataSourceEditCtrl {
122122
});
123123
}
124124

125-
saveChanges(test) {
125+
saveChanges() {
126126
if (!this.editForm.$valid) {
127127
return;
128128
}

0 commit comments

Comments
 (0)