Skip to content

N
nexpie-grafana-theme
Commit c4e90547 by bergquist
Options

feat(alerting): improve email notifications layout

parent 74dbd7fb
Showing with 124 additions and 33 deletions
emails/templates/alert_notification.html
[[Subject .Subject "Grafana Alert: [[.Severity]] [[.RuleName]]"]] [[Subject .Subject "[[.Title]]"]]
<br> <table class="row">
<br> <tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="center">
<h3 style="text-align:center;color: [[.SeverityColor]]; font-weight: bold;">[[.Title]]</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
Alert rule: [[.RuleName]]<br> <table class="row" >
Alert state: [[.RuleState]]<br> <tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="center">
<p style="text-align:center">[[.Message]]</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="center">
<img src="[[.ImageLink]]" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<a href="[[.RuleLink]]">Link to alert rule</a> <table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="center">
<a href="[[.RuleUrl]]" target="_blank">Alert rule</a> - <a href="[[.AlertPageUrl]]" target="_blank">Alerts page</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
pkg/services/alerting/engine.go
...@@ -72,7 +72,7 @@ func (e *Engine) alertingTicker() { ...@@ -72,7 +72,7 @@ func (e *Engine) alertingTicker() {
func (e *Engine) execDispatcher() { func (e *Engine) execDispatcher() {
for job := range e.execQueue { for job := range e.execQueue {
e.log.Debug("Starting executing alert rule %s", job.Rule.Name) e.log.Debug("Starting executing alert rule", "alert id", job.Rule.Id)
go e.executeJob(job) go e.executeJob(job)
} }
} }
......
pkg/services/alerting/eval_context.go
...@@ -100,6 +100,6 @@ func NewEvalContext(rule *Rule) *EvalContext { ...@@ -100,6 +100,6 @@ func NewEvalContext(rule *Rule) *EvalContext {
Events: make([]*Event, 0), Events: make([]*Event, 0),
DoneChan: make(chan bool, 1), DoneChan: make(chan bool, 1),
CancelChan: make(chan bool, 1), CancelChan: make(chan bool, 1),
log: log.New("alerting.engine"), log: log.New("alerting.evalContext"),
} }
} }
pkg/services/alerting/notifiers/email.go
...@@ -8,6 +8,7 @@ import ( ...@@ -8,6 +8,7 @@ import (
"github.com/grafana/grafana/pkg/metrics" "github.com/grafana/grafana/pkg/metrics"
m "github.com/grafana/grafana/pkg/models" m "github.com/grafana/grafana/pkg/models"
"github.com/grafana/grafana/pkg/services/alerting" "github.com/grafana/grafana/pkg/services/alerting"
"github.com/grafana/grafana/pkg/setting"
) )
func init() { func init() {
...@@ -49,11 +50,14 @@ func (this *EmailNotifier) Notify(context *alerting.EvalContext) { ...@@ -49,11 +50,14 @@ func (this *EmailNotifier) Notify(context *alerting.EvalContext) {
cmd := &m.SendEmailCommand{ cmd := &m.SendEmailCommand{
Data: map[string]interface{}{ Data: map[string]interface{}{
"Title": context.GetNotificationTitle(), "Title": context.GetNotificationTitle(),
"RuleState": context.Rule.State, "State": context.Rule.State,
"RuleName": context.Rule.Name, "Name": context.Rule.Name,
"Severity": context.Rule.Severity, "Severity": context.Rule.Severity,
"RuleUrl": ruleUrl, "SeverityColor": context.GetColor(),
"RuleUrl": ruleUrl,
"ImageLink": context.ImagePublicUrl,
"AlertPageUrl": setting.AppUrl + "alerting",
}, },
To: this.Addresses, To: this.Addresses,
Template: "alert_notification.html", Template: "alert_notification.html",
......
pkg/services/notifications/send_email_integration_test.go
...@@ -18,6 +18,7 @@ func TestEmailIntegrationTest(t *testing.T) { ...@@ -18,6 +18,7 @@ func TestEmailIntegrationTest(t *testing.T) {
setting.Smtp.Enabled = true setting.Smtp.Enabled = true
setting.Smtp.TemplatesPattern = "emails/*.html" setting.Smtp.TemplatesPattern = "emails/*.html"
setting.Smtp.FromAddress = "from@address.com" setting.Smtp.FromAddress = "from@address.com"
setting.BuildVersion = "4.0.0"
err := Init() err := Init()
So(err, ShouldBeNil) So(err, ShouldBeNil)
...@@ -30,19 +31,17 @@ func TestEmailIntegrationTest(t *testing.T) { ...@@ -30,19 +31,17 @@ func TestEmailIntegrationTest(t *testing.T) {
cmd := &m.SendEmailCommand{ cmd := &m.SendEmailCommand{
Data: map[string]interface{}{ Data: map[string]interface{}{
"Name": "Name", "Title": "[CRITICAL] Imaginary timeserie alert",
"State": "Critical", "State": "Firing",
"Description": "Description", "Name": "Imaginary timeserie alert",
"DashboardLink": "http://localhost:3000/dashboard/db/alerting", "Severity": "Critical",
"AlertPageUrl": "http://localhost:3000/alerting", "Message": "Alert message that will support markdown in some distant future.",
"DashboardImage": "http://localhost:3000/render/dashboard-solo/db/alerting?from=1466169458375&to=1466171258375&panelId=3&width=1000&height=500", "RuleUrl": "http://localhost:3000/dashboard/db/graphite-dashboard",
"AlertPageUrl": "http://localhost:3000/alerting",
"TriggeredAlerts": []testTriggeredAlert{ "ImageLink": "http://localhost:3000/render/dashboard-solo/db/graphite-dashboard?panelId=1&from=1471008499616&to=1471012099617&width=1000&height=500",
{Name: "desktop", State: "Critical", ActualValue: 13}, "SeverityColor": "#D63232",
{Name: "mobile", State: "Warn", ActualValue: 5},
},
}, },
To: []string{"asd@asd.com "}, To: []string{"asdf@asdf.com "},
Template: "alert_notification.html", Template: "alert_notification.html",
} }
......
public/emails/alert_notification.html
...@@ -113,17 +113,61 @@ color: #FFFFFF !important; ...@@ -113,17 +113,61 @@ color: #FFFFFF !important;
<table class="container" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px"> <table class="container" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left"> <tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top"> <td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
{{Subject .Subject "Grafana Alert: {{.Severity}} {{.RuleName}}"}} {{Subject .Subject "{{.Title}}"}}
<br /> <table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
<br /> <tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: center; vertical-align: top; word-break: break-word" align="center" valign="top">
<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: {{.SeverityColor}}; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: bold; line-height: 1.3; margin: 20px 0 0; padding: 0; text-align: center; word-break: normal" align="center">{{.Title}}</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
Alert rule: {{.RuleName}}<br /> <table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
Alert state: {{.RuleState}}<br /> <tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: center; vertical-align: top; word-break: break-word" align="center" valign="top">
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0; text-align: center" align="center">{{.Message}}</p>
</td>
</tr>
</table>
</td>
</tr>
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: center; vertical-align: top; word-break: break-word" align="center" valign="top">
<img src="{{.ImageLink}}" style="-ms-interpolation-mode: bicubic; clear: both; display: block; float: left; max-width: 100%; outline: none; text-decoration: none; width: auto" align="left" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<a href="{{.RuleLink}}" style="color: #E67612; text-decoration: none">Link to alert rule</a> <table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; text-align: center; vertical-align: top; word-break: break-word" align="center" valign="top">
<a href="{{.RuleUrl}}" target="_blank" style="color: #E67612; text-decoration: none">Alert rule</a> - <a href="{{.AlertPageUrl}}" target="_blank" style="color: #E67612; text-decoration: none">Alerts page</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment