mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
fix(notifications): added form validation and restored Send Test button which was always hidden, #6159
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -122,7 +122,7 @@ export class DataSourceEditCtrl {
|
||||
});
|
||||
}
|
||||
|
||||
saveChanges(test) {
|
||||
saveChanges() {
|
||||
if (!this.editForm.$valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user