Change Email Alert Template

The email alert template is usually located at /usr/share/grafana/public/emails/alert_notification.html

We can edit this file.

First create a backup,

cd /usr/share/grafana/public/emails
cp alert_notification.html alert_notification.html.bak

Now we can edit the actual the Email template HTML used when sending the alert.

The available properties that are passed to the email template are,

  • Title
  • State
  • Name
  • StateModel
  • Message
  • Error
  • RuleUrl
  • ImageLink
  • EmbeddedImage
  • AlertPageUrl
  • EvalMatches

The actual GO script that Grafana uses can be viewed here on GitHub at https://github.com/grafana/grafana/blob/master/pkg/services/alerting/notifiers/email.go

Values can be used inside the html template like this,

{{.Title}} or {{.Message}}

You can check there values, eg

{{if ne .EmbeddedImage "" }}
    <!--If .EmbeddedImage is not an empty string, then add it like below-->
    <img src="cid:{{.EmbeddedImage}}" />
{{end}}

or

{{if eq .State "ok" }}
    <!--Do things if the state = ok-->
{{end}}

You can iterate if it is an array, eg

{{range .EvalMatches}}
    &nbsp;&nbsp;.Metric = {{.Metric}}<br/>
{{end}}

And you can gets its attributes if it is an object, eg

{{.StateModel.Color}}

See the official file at /usr/share/grafana/public/emails/alert_notification.html for more examples. Search for the {{ string in the file to see several different ways of how the variables can be used.

Simplified Email Template

This is a very simplified email template demonstrating the use of all of the above variables. Overwrite the file alert_notification.html with this code below. Ensure you have backed up the original alert_notification.html file though, you may want it later.

This is a much more simplified email template written specifically to help understand the available properties better. You can experiment with this until you create your own custom email template suitable for your needs.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />
  <style></style>
</head>

<body>

  <p>.Title = {{.Title}}</p>

  <p>.State = {{.State}}</p>

  <p>.Name = {{.Name}}</p>

  <p>.StateModel = {{.StateModel}}<br/>
  .StateModel.Color = {{.StateModel.Color}}<br/>
  .StateModel.Text = {{.StateModel.Text}}<br/>
  </p>

  <p>.Message = {{.Message}}</p>

  <p>.Error = {{.Error}}</p>

  <p>.RuleUrl = {{.RuleUrl}}</p>

  <p>.ImageLink = {{.ImageLink}}</p>

  <p>.EmbeddedImage = {{.EmbeddedImage}}<br/>
    {{if ne .EmbeddedImage "" }}
    <img src="cid:{{.EmbeddedImage}}" />
    {{end}}
  </p>

  <p>.AlertPageUrl = {{.AlertPageUrl}}</p>

  <p>.EvalMatches = {{.EvalMatches}}<br/>
    {{range .EvalMatches}}
    &nbsp;&nbsp;.Metric = {{.Metric}}<br/>
    &nbsp;&nbsp;.Value = {{.Value}}<br/>
    &nbsp;&nbsp;.Tags = {{.Tags}}<br/>
    {{end}}
  </p>

</body>

</html>

When editing the template, changes won't be applied until you restart the Grafana Server service.

Also, the different properties listed above are available dependant on which state the alert was in so sometimes you won't see any values.

Restart the service after any changes to the email template html file

sudo service grafana-server restart

If there are any errors in your script, some of them may be detected when the Grafana service restarts, and will be written to the log. So I advise you open a separate SSH session and tail the log file in case any errors are detected when you restart the service.

tail -f /var/log/grafana/grafana.log

Tailing the Grafana Server log file is also useful to see when each of the alerting states changes, and maybe there will be errors displayed in the console as well.