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>
<br>
<table class="row">
<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>
Alert state: [[.RuleState]]<br>
<table class="row" >
<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() {
func (e *Engine) execDispatcher() {
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)
}
}
......
pkg/services/alerting/eval_context.go
......@@ -100,6 +100,6 @@ func NewEvalContext(rule *Rule) *EvalContext {
Events: make([]*Event, 0),
DoneChan: 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 (
"github.com/grafana/grafana/pkg/metrics"
m "github.com/grafana/grafana/pkg/models"
"github.com/grafana/grafana/pkg/services/alerting"
"github.com/grafana/grafana/pkg/setting"
)
func init() {
......@@ -49,11 +50,14 @@ func (this *EmailNotifier) Notify(context *alerting.EvalContext) {
cmd := &m.SendEmailCommand{
Data: map[string]interface{}{
"Title": context.GetNotificationTitle(),
"RuleState": context.Rule.State,
"RuleName": context.Rule.Name,
"Severity": context.Rule.Severity,
"RuleUrl": ruleUrl,
"Title": context.GetNotificationTitle(),
"State": context.Rule.State,
"Name": context.Rule.Name,
"Severity": context.Rule.Severity,
"SeverityColor": context.GetColor(),
"RuleUrl": ruleUrl,
"ImageLink": context.ImagePublicUrl,
"AlertPageUrl": setting.AppUrl + "alerting",
},
To: this.Addresses,
Template: "alert_notification.html",
......
pkg/services/notifications/send_email_integration_test.go
......@@ -18,6 +18,7 @@ func TestEmailIntegrationTest(t *testing.T) {
setting.Smtp.Enabled = true
setting.Smtp.TemplatesPattern = "emails/*.html"
setting.Smtp.FromAddress = "from@address.com"
setting.BuildVersion = "4.0.0"
err := Init()
So(err, ShouldBeNil)
......@@ -30,19 +31,17 @@ func TestEmailIntegrationTest(t *testing.T) {
cmd := &m.SendEmailCommand{
Data: map[string]interface{}{
"Name": "Name",
"State": "Critical",
"Description": "Description",
"DashboardLink": "http://localhost:3000/dashboard/db/alerting",
"AlertPageUrl": "http://localhost:3000/alerting",
"DashboardImage": "http://localhost:3000/render/dashboard-solo/db/alerting?from=1466169458375&to=1466171258375&panelId=3&width=1000&height=500",
"TriggeredAlerts": []testTriggeredAlert{
{Name: "desktop", State: "Critical", ActualValue: 13},
{Name: "mobile", State: "Warn", ActualValue: 5},
},
"Title": "[CRITICAL] Imaginary timeserie alert",
"State": "Firing",
"Name": "Imaginary timeserie alert",
"Severity": "Critical",
"Message": "Alert message that will support markdown in some distant future.",
"RuleUrl": "http://localhost:3000/dashboard/db/graphite-dashboard",
"AlertPageUrl": "http://localhost:3000/alerting",
"ImageLink": "http://localhost:3000/render/dashboard-solo/db/graphite-dashboard?panelId=1&from=1471008499616&to=1471012099617&width=1000&height=500",
"SeverityColor": "#D63232",
},
To: []string{"asd@asd.com "},
To: []string{"asdf@asdf.com "},
Template: "alert_notification.html",
}
......
public/emails/alert_notification.html
......@@ -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">
<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">
{{Subject .Subject "Grafana Alert: {{.Severity}} {{.RuleName}}"}}
{{Subject .Subject "{{.Title}}"}}
<br />
<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%">
<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 />
Alert state: {{.RuleState}}<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%">
<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