Alerting: Preserve new-lines from custom email templates in rendered email

[alexweav]

What this PR does / why we need it:

Right now, any customized email messages from alerting display with the newlines destroyed:

This is because the newlines aren't changed to <br>'s, nor is any stying applied to that block aside from the parent styling.

Which issue(s) this PR fixes:

This PR adds some simple styling to this message block (if it's present) that preserves newlines transparently. Now, newlines from the Alerting template show up in the actual email by default, completely as the user would expect.

rel #42946

Fixes #52310

Special notes for your reviewer:

There are a lot of unrelated changes in this PR. Essentially, several changes have gone into the code-generated email templates that were implemented by hand. So, if I run the template generator, all these changes get un-done (!!!)

I dug through the git history and found every such PR, and hand-recreated them in the generator side. Ran the generator and now everything is back in alignment!

There are still a few minor changes that the generator added, which are all ones that we actually do want to preserve or have no effect. These include:

• Whitespace produced by the generator
• border -> border-width changes
• Some inherited class names (whose contents are inlined, so this doesn't affect anything)

[alexweav]

This is the only real change that relates to this PR. The rest of the changes are recreations of past PRs, in the generator.

[gotjosh]

LGTM, but how do we make sure this stays up to day always?

[grafanabot]

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/26261

[alexweav]

@gotjosh The typical way of doing this is to never check generated code into git. Instead the makefile should do the generation, and developers are essentially forced to make the change in the right place.

However, in this particular case, this is unusually difficult. This generator has a lot of unusual dependencies that are not typical for the grafana project. It requires an installation of Ruby, etc. IMO it's unreasonable to suddenly make local builds of Grafana require an entirely new programming language just for this, so I did not go down this route in this PR.

[joeblubaugh]

To keep things up to date, we could add a CI step that runs the generator and errors if there’s a difference.

@alexweav what do you think about left-aligning the lines?

[JacobsonMT]

LGTM. I think I agree with @joeblubaugh on left aligning the lines, but either way it's a good improvement.

[alexweav]

After trying it, definitely agree with @joeblubaugh and @JacobsonMT, left aligning was a great suggestion and it looks even better. Thanks!

[alexweav]

Holding off on the CI step or anything of that nature for now, to keep this PR targeted.

[grafanabot]

Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/26683

[basvdl]

Is my understanding correct that this will be part of the 9.0.4 release?

[MrDibbley]

Running 9.0.4 (ng_alert_notification.html has above changes) and emails still wrapping without new lines? does something need configuring in the template to enable this ?

my testing is only with Outlook for Office 365 which seem to have a poor html engine I believe.

Thanks

[anwu]

Seconding @MrDibbley here.
I'm on 9.0.5 and still am having issues with the newlines not being preserved.
@alexweav I see in your screenshot that your version is 9.1.0-pre. Is it going to be in 9.1.0 and the notes in 9.0.4 are incorrect?

[alexweav]

@MrDibbley @anwu Sorry to hear there are still issues! Firstly, this change definitely made it into 9.0.4 - although the screenshots above say 9.1.0, we did also backport this to the 9.0 releases.

Our email templating system is fairly confusing right now, we're working on improving the whole template experience as a whole. There are two layers of templating happening and this change only affects the second layer. If no newlines made it to this file in the first place, this PR won't appear to change anything. This is the first thing to check - is your original alert template sending newlines?

FWIW, I installed a 9.0 version (happened to be 9.0.7, but this has not changed since 9.0.4 so it should be the same). I used the following test template:

{{ len .Alerts.Firing }} firing:

{{-  range .Alerts.Firing }}
[{{.Status}}] {{ .Labels.alertname }}:
Labels:
  {{- range .Labels.SortedPairs }}
  - {{ .Name }}: {{ .Value }}
  {{- end }}
{{ end }}

It showed the newlines (and left-align) as expected:

The other thing to check, is that this ng_alert_notification file is only used by Unified Alerting. If you are using Legacy alerting, it uses yet another different templating system and thus you might not see this change take effect. The solution for legacy might not be the same as this.

Hopefully this helps you both! If you are still having problems, please feel free to open an issue and we can take a deeper look.

[jamunam]

I have installed version 9.1.7, but still facing the issue of newlines not appearing in the email alert. Any suggestions? I know newlines are in the template because the MS Teams notification is working as expected.
Also, I'm running this in a AKS cluster, and it is not allowing me to edit ng_alert_notification.html. I mention this because the code seems to be missing closing span tag from the template

{{ if gt (len .Message) 0 }}
  <div style="white-space: pre-line;" align="left">{{ .Message }}
{{ else }}

[iStep2Step]

Is there a chance that this is going to be fixed for older versions too (8.0.4)?

[yzaltz]

Using latest version 9.3.2 - and the problem exist for me

My template:
{{ with $values }}
{{ range $k, $v := . }}
{{ if $v.Labels.action }}
- Action: {{ $v.Labels.action }}
{{ end }}
{{ if $v.Labels.service }}
- Service: {{ $v.Labels.service }}
{{ end }}
Value: {{ $v }}
{{ end }}
{{ end }}

The same notification is sent to Outlook and Telegram -
The Outlook email output doesn't include the newline while the Telegram does (see below) is this bug really fixed?
Outlook:

Telegram:

[gillesdemey]

Outlook does not support white-space: pre-line introduced in the PR. We did not know that Outlook and some other mail clients do not support this CSS property.

Grafana v9.4 will be released with updated email templates and those will parse newlines in the template renderer instead.