grafana/emails/templates/ng_alert_notification.html

<!-- The template body needs to be wrapped in div to prevent Premailer from adding </tr></td> tags which breaks the HTML structure -->
<div>

[[Subject .Subject "[[.Title]]"]]

[[ define "alert" ]]
  <tr>
    <td colspan="2" class="value">
      <span class="value-heading">Value:</span> <span class="value-value">[[ .ValueString ]]</span>
    </td>
  </tr>
  [[ if gt (len .Annotations.SortedPairs) 0 ]]
      <tr>
        <td colspan="2" class="annotations">
          [[ range .Annotations.SortedPairs ]]
          <p><span class="annotations-heading">[[ .Name ]]:</span> <span class="annotations-value">[[ .Value ]]</span></p>
          [[ end ]]
        </td>
      </tr>
  [[ end ]]
  <tr>
    <td colspan="2">
      <span class="labels-heading">Labels:</span>
      <ul class="labels-list">
        [[ range .Labels.SortedPairs ]]<li>[[ .Name ]]: [[ .Value ]]</li>[[ end ]]
      </ul>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="actions">
      [[ if .SilenceURL ]]
        <a
          href="[[ .SilenceURL ]]"
          class="button"
        >
          <img
            alt=""
            height="14"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF1SURBVHgBrZLNTsJAEMf/2wYTPfEI9Q1qvBgjsEl5gB498gj1SDHpEKUckaMn4eiNFyAp4cJN30CPHrn5BV1noTWlFD3oJNuZ3Z39zUcH+A9pUffJpzAoOO/xuvvprZHooYCgLISoa7FyFSCbdOXuApj6M43GUVXWhYZUpKP3k1NZ14+kAOYChleVjnssK/ezKHrLAkQuZWIVKCgKyW+n55cUciZClzLoUPOiqISVlPB+s6ZulnNN/ihG3GfT84jKOwGvMO0krVEewoBoHeTA2glIhRuno7WzkH0Yc633sCz/CoiVshdYRGxGKYSo9ahgHnEPoqzvdxP1b/sEHtgsF2e12ditDD6gPE59XgIO8ytfTlbM1DiTzjk7WQvEYgllZ5fSXeE7vnfTOdkC1GqOBSFO2Mk22JG1TB4l+1VzX/IQgQJpBaHHsB6bA47+rNOHUI1O4A/zw2YWAaaT8UyPNkdcZ6JUs0P+7eouGXuO3WC7j7/KF29iokiLUdaFAAAAAElFTkSuQmCC"
            class="button-img"
            width="14"
          />
          Silence
        </a>
      [[ end ]]
      [[ if .Annotations.runbook_url ]]
        <a
          href="[[ .Annotations.runbook_url ]]"
          class="button"
        >
          <img
            class="button-img"
            alt=""
            height="14"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADaSURBVHgBrVNLDoIwFJwq0bjTG+ARvIGeQI/ADdSVARY8oki8jZxEbyDewLUfahttAoEWDM7m9bVvJtN0CrQEyzdENLyjt2RgtoFzjcgl1XTyJw/0T4K8ghmBH8Zz1VhqsaHtVBT7CYwP5KY6tk+xw3k2Kgl0YdmyKrIYvEjB73EqbI+rBC1owMDXGdjws0aqm9MK7Mg7ogE6aInWAqUreLQPanJgdtAgB2YHIgeTuhxUOlBPNcBvKPwFT4RHbnDgLOpNw3EEaxEFblJwIPECZhw8MZAlQkX+C95zCzqWDYrK2AAAAABJRU5ErkJggg=="
            width="14"
          />
          View Runbook
        </a>
      [[ end ]]
      [[ if .DashboardURL]]
        <a
          href="[[ .DashboardURL ]]"
          class="button"
        >
          <img
            alt=""
            height="14"
            class="button-img"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE9SURBVHgBrVLNWcMwDH220/bjhEdIR2AC6ASMQEeAU6G9+FLycQojdAUmgE7ACGSEcEybRkj5cUKbnFp9X2JZ8nuypQecaUp+Kxf98BIeJ3cwNxqZDRB89mCTtXuZBvVGwBsCtiUrkYVS8RgHmzeVFB4Lwm9d9Y6XB/EbAhCK7atbbcRfuCjkRNwtt6fs4825RPyli4SkJNA40/wNFCm7cC6sdnnYSdVmQs6Xnla4JjoikDcHmMQYrCSNrI434C7BrA/EXf6Slad0kieY1BPsUKQahcWA5cj7otYTjKG/+/oplQU8oAMx1aKInkbAVL6BJ818ns82wVYHilLnlon4rIOTGeTIWHleB6mq4xfUAfTts1tXPh1YyubfwZGa3HO+K+WWgMeacHBuoOc1m7cr6HSPcvbvpnNhweAS9gdSqGSnoVA2cQAAAABJRU5ErkJggg=="
            width="14"
          />
          Go to Dashboard
        </a>
      [[ end ]]
      [[ if .PanelURL]]
        <a
          href="[[ .PanelURL ]]"
          class="button"
        >
          <img
            alt=""
            class="button-img"
            height="14"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE9SURBVHgBrVLNWcMwDH220/bjhEdIR2AC6ASMQEeAU6G9+FLycQojdAUmgE7ACGSEcEybRkj5cUKbnFp9X2JZ8nuypQecaUp+Kxf98BIeJ3cwNxqZDRB89mCTtXuZBvVGwBsCtiUrkYVS8RgHmzeVFB4Lwm9d9Y6XB/EbAhCK7atbbcRfuCjkRNwtt6fs4825RPyli4SkJNA40/wNFCm7cC6sdnnYSdVmQs6Xnla4JjoikDcHmMQYrCSNrI434C7BrA/EXf6Slad0kieY1BPsUKQahcWA5cj7otYTjKG/+/oplQU8oAMx1aKInkbAVL6BJ818ns82wVYHilLnlon4rIOTGeTIWHleB6mq4xfUAfTts1tXPh1YyubfwZGa3HO+K+WWgMeacHBuoOc1m7cr6HSPcvbvpnNhweAS9gdSqGSnoVA2cQAAAABJRU5ErkJggg=="
            width="14"
          />
            Go to Panel
          </a>
      [[ end ]]
      [[ if gt (len .GeneratorURL) 0 ]]<a href="[[ .GeneratorURL ]]" class="button">Source</a>[[ end ]]
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div style="height: 24px"></div>
      <div style="background: #c7d0d9; height: 1px"></div>
      <div style="height: 24px"></div>
    </td>
  </tr>
[[ end ]]

[[ if gt (len .Message) 0 ]]
 [[ .Message ]]
[[ else ]]

<style>
  .button {
    background: #f1f5f9;
    border: 1px solid #c7d0d9;
    border-radius: 2px;
    color: #464c54;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 5px 9px;
  }
  .value {
    font-size: 14px;
    padding-top: 24px;
  }
  .value-heading {
    font-weight: bold;
  }
  .value-value {
    padding-left: 8px;
  }
  .annotations {
    font-size: 14px;
    padding: 24px 0 12px 0;
  }
  .labels-heading {
    font-size: 14px;
    font-weight: bold;
    vertical-align: top;
    display: inline-block;
  }
  .annotations-heading {
    font-weight: bold;
    text-transform: capitalize;
  }
  .annotations-value {
    padding-left: 8px;
  }
  .labels-list {
    font-size: 14px;
    vertical-align: top;
    margin: 0;
    display: inline-block;
    padding-left: 8px;
  }
  .actions {
    padding: 24px 0 12px 0;
  }
  .section-heading {
    color: #2c3235;
    font-size: 22px;
    font-weight: bold;
    padding: 0 0 32px 0;
  }
  .alert-label {
    font-size: 16px;
    font-weight: bold;
    padding: 0 0 0 12px;
    text-decoration: underline;
    vertical-align: middle;
  }
  .status-tag {
    color: #ffffff;
    padding: 4px 8px;
    text-align: center;
    width: 68px
  }
  .status-firing {
    background: #e02f44;
  }
  .status-resolved {
    background: #464c54;
  }
  .button-img {
    height: 14px;
    margin: 0 5px 0 0;
    vertical-align: sub;
    width: 14px;
  }
</style>

<table class="row">
  <tr>
    <td class="twelve">
      <table>
          [[ if gt (len .Alerts.Firing) 0 ]]
            <tr>
              <td colspan="2" class="section-heading">
                Firing: [[ .Alerts.Firing | len ]] alert[[ if gt (len .Alerts.Firing) 1 ]]s[[ end ]][[ if gt (len .GroupLabels.SortedPairs) 1 ]] for
                [[ range .GroupLabels.SortedPairs ]]
                [[ .Name ]]=[[ .Value ]]
                [[ end ]][[ end ]]
              </td>
            </tr>
            [[ range .Alerts.Firing ]]
              <tr>
                <td
                  class="status-tag status-firing"
                  width="68"
                >
                  Firing
                </td>
                <td class="alert-label">
                  [[ .Labels.alertname ]]
                </td>
              </tr>
              [[ template "alert" . ]]
            [[ end ]]
          [[ end ]]
          [[ if gt (len .Alerts.Resolved) 0 ]]
            <tr>
              <td colspan="2" class="section-heading">
                Resolved: [[ .Alerts.Resolved | len ]] alert[[ if gt (len .Alerts.Resolved) 1 ]]s[[ end ]][[ if gt (len .GroupLabels.SortedPairs) 1 ]] for
                [[ range .GroupLabels.SortedPairs ]]
                  [[ .Name ]]=[[ .Value ]]
                [[ end ]][[ end ]]
              </td>
            </tr>
            [[ range .Alerts.Resolved ]]
              <tr>
                <td
                  class="status-tag status-resolved"
                  width="68"
                >
                  Resolved
                </td>
                <td class="alert-label">
                  [[ .Labels.alertname ]]
                </td>
              </tr>
              [[ template "alert" . ]]
            [[ end ]]
          [[ end ]]
          <tr>
            <td colspan="2">
              <a href="[[ .AlertPageUrl ]]" class="button">Go to alerts page</a>
            </td>
          </tr>
      </table>
    </td>
  </tr>
</table>
[[ end ]]

</div>