feat(alerting): improve email notifications layout

emails/templates/alert_notification.html

@@ -1,12 +1,56 @@
-[[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 />