fix(notifications): added form validation and restored Send Test button which was always hidden, #6159

This commit is contained in:
Torkel Ödegaard
2016-10-01 17:14:45 +02:00
parent c6cf6d4655
commit 4ec2377e09
3 changed files with 73 additions and 69 deletions

View File

@@ -7,6 +7,7 @@ import config from 'app/core/config';
export class AlertNotificationEditCtrl {
model: any;
theForm: any;
testSeverity: string = "critical";
/** @ngInject */
@@ -35,6 +36,10 @@ export class AlertNotificationEditCtrl {
}
save() {
if (!this.theForm.$valid) {
return;
}
if (this.model.id) {
this.backendSrv.put(`/api/alert-notifications/${this.model.id}`, this.model).then(res => {
this.model = res;
@@ -53,6 +58,10 @@ export class AlertNotificationEditCtrl {
}
testNotification() {
if (!this.theForm.$valid) {
return;
}
var payload = {
name: this.model.name,
type: this.model.type,

View File

@@ -6,78 +6,73 @@
</navbar>
<div class="page-container" >
<div class="page-header">
<h1>Alert notification</h1>
<div class="page-header">
<h1>Alert notification</h1>
</div>
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-12">Name</span>
<input type="text" class="gf-form-input max-width-15" ng-model="ctrl.model.name" required></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-12">Type</span>
<div class="gf-form-select-wrapper width-15">
<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)">
</select>
</div>
</div>
<div class="gf-form">
<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">
</gf-form-switch>
</div>
</div>
<form name="ctrl.theForm">
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-12">Name</span>
<input type="text" required class="gf-form-input max-width-15" ng-model="ctrl.model.name" required></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-12">Type</span>
<div class="gf-form-select-wrapper width-15">
<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)">
</select>
</div>
</div>
<div class="gf-form">
<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">
</gf-form-switch>
</div>
</div>
<div class="gf-form-group" ng-show="ctrl.model.type === 'webhook'">
<h3 class="page-heading">Webhook settings</h3>
<div class="gf-form">
<span class="gf-form-label width-6">Url</span>
<input type="text" class="gf-form-input max-width-26" ng-model="ctrl.model.settings.url"></input>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Username</span>
<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.username"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Password</span>
<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.password"></input>
</div>
</div>
</div>
<div class="gf-form-group" ng-if="ctrl.model.type === 'webhook'">
<h3 class="page-heading">Webhook settings</h3>
<div class="gf-form">
<span class="gf-form-label width-6">Url</span>
<input type="text" required class="gf-form-input max-width-26" ng-model="ctrl.model.settings.url"></input>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-6">Username</span>
<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.username"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-6">Password</span>
<input type="text" class="gf-form-input max-width-10" ng-model="ctrl.model.settings.password"></input>
</div>
</div>
</div>
<div class="gf-form-group" ng-show="ctrl.model.type === 'slack'">
<h3 class="page-heading">Slack settings</h3>
<div class="gf-form">
<span class="gf-form-label width-6">Url</span>
<input type="text" class="gf-form-input max-width-30" ng-model="ctrl.model.settings.url" placeholder="Slack incoming webhook url"></input>
</div>
</div>
<div class="gf-form-group" ng-if="ctrl.model.type === 'slack'">
<h3 class="page-heading">Slack settings</h3>
<div class="gf-form">
<span class="gf-form-label width-6">Url</span>
<input type="text" required class="gf-form-input max-width-30" ng-model="ctrl.model.settings.url" placeholder="Slack incoming webhook url"></input>
</div>
</div>
<div class="gf-form-group section" ng-show="ctrl.model.type === 'email'">
<h3 class="page-heading">Email addresses</h3>
<div class="gf-form">
<textarea rows="7" class="gf-form-input width-25" ng-model="ctrl.model.settings.addresses"></textarea>
</div>
</div>
<div class="gf-form-group section" ng-if="ctrl.model.type === 'email'">
<h3 class="page-heading">Email addresses</h3>
<div class="gf-form">
<textarea rows="7" class="gf-form-input width-25" required ng-model="ctrl.model.settings.addresses"></textarea>
</div>
</div>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form width-6">
<button ng-click="ctrl.save()" class="btn btn-success">Save</button>
</div>
<div class="gf-form width-20">
<div class="gf-form" ng-show="ctrl.showTest">
<button ng-click="ctrl.testNotification()" class="btn btn-secondary">Send</button>
</div>
</div>
</div>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form width-6">
<button type="submit" ng-click="ctrl.save()" class="btn btn-success">Save</button>
</div>
<div class="gf-form width-20">
<div class="gf-form">
<button type="submit" ng-click="ctrl.testNotification()" class="btn btn-secondary">Send Test</button>
</div>
</div>
</div>
</div>
</form>
</div>

View File

@@ -122,7 +122,7 @@ export class DataSourceEditCtrl {
});
}
saveChanges(test) {
saveChanges() {
if (!this.editForm.$valid) {
return;
}