WIP simplifying email templates

emails/templates/ng_alert_notification.mjml

@@ -1,109 +1,27 @@
 <mjml>
   <mj-head>
-    <mj-title>
-      {{ Subject .Subject .TemplateData "{{ .Title }}" }}
-    </mj-title>
+    <mj-title>{{ Subject .Subject .TemplateData "{{ .Title }}" }}</mj-title>
     <mj-include path="./partials/alerting/summary.mjml" />
   </mj-head>
   <mj-body>
     <mj-include path="./partials/alerting/grouping_labels.mjml" />
 
     <!-- custom email message -->
-    <mj-raw>
-      {{ if .Message }}
-    </mj-raw>
+    <mj-raw>{{ if .Message }}</mj-raw>
     <mj-section>
       <mj-column>
         <mj-text>
-          <mj-raw>
-            {{ range $line := (splitList "\n" .Message) }}
-          </mj-raw>
+          <mj-raw>{{ range $line := (splitList "\n" .Message) }}</mj-raw>
           {{ $line }}<br />
-          <mj-raw>
-            {{ end }}
-          </mj-raw>
+          <mj-raw>{{ end }}</mj-raw>
         </mj-text>
       </mj-column>
     </mj-section>
 
     <!-- end custom email message -->
-    <mj-raw>
-      {{ else }}
-    </mj-raw>
-
-    <!-- default template -->
-
-    <!-- Firing instances -->
-    <mj-raw>
-      {{ if .Alerts.Firing  }}
-    </mj-raw>
-
-    <!-- Firing header -->
-    <mj-section padding="0">
-      <mj-column>
-        <mj-text padding="0">
-          <h3>🔥 {{ .Alerts.Firing | len }} firing instances</h3>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-
-    <!-- Firing instances loop -->
-    <mj-raw>
-      {{ range .Alerts.Firing }}
-    </mj-raw>
-    <mj-wrapper css-class="background" padding="0">
-      <mj-include path="./partials/alerting/firing_instance.mjml" />
-      <mj-include path="./partials/alerting/instance_details.mjml" />
-    </mj-wrapper>
-    <mj-section padding="10px" />
-
-    <!-- end Firing instances loop -->
-    <mj-raw>
-      {{ end }}
-    </mj-raw>
-
-    <!-- end Firing instances section -->
-    <mj-raw>
-      {{ end }}
-    </mj-raw>
-
-    <!-- Resolved instances -->
-    <mj-raw>
-      {{ if .Alerts.Resolved }}
-    </mj-raw>
-
-    <mj-section padding="0">
-      <mj-column>
-        <mj-text padding="0">
-          <h3>✅ {{ .Alerts.Resolved | len }} resolved instances</h3>
-        </mj-text>
-      </mj-column>
-    </mj-section>
-
-    <!-- Resolved instances loop -->
-    <mj-raw>
-      {{ range .Alerts.Resolved }}
-    </mj-raw>
-    <mj-wrapper css-class="background" padding="0">
-      <mj-include path="./partials/alerting/resolved_instance.mjml" />
-      <mj-include path="./partials/alerting/instance_details.mjml" />
-    </mj-wrapper>
-    <mj-section padding="10px" />
-
-    <!-- end Resolved instances loop -->
-    <mj-raw>
-      {{ end }}
-    </mj-raw>
-
-    <!-- end Resolved instances -->
-    <mj-raw>
-      {{ end }}
-    </mj-raw>
-
-    <!-- end default template -->
-    <mj-raw>
-      {{ end }}
-    </mj-raw>
+    <mj-raw>{{ else }}</mj-raw>
+    <mj-include path="./partials/alerting/default.mjml" />
+    <mj-raw>{{ end }}</mj-raw>
 
     <mj-section>
       <mj-include path="./partials/layout/footer.mjml" />

emails/templates/partials/alerting/default.mjml

@@ -0,0 +1,46 @@
+<mj-raw>{{ if .CommonAnnotations.description }}</mj-raw>
+<mj-section><mj-column><mj-text>
+<mj-raw>{{ range $line := (splitList "\n" .CommonAnnotations.description) }}</mj-raw>
+{{ $line }}<br />
+<mj-raw>{{ end }}</mj-raw>
+</mj-text></mj-column></mj-section>
+<mj-raw>{{ end }}</mj-raw>
+
+<mj-raw>{{ if .Alerts.Firing  }}</mj-raw>
+<mj-text><h3>🔥 {{ .Alerts.Firing | len }} firing instances</h3></mj-text>
+
+<mj-raw>{{ range .Alerts.Firing }}</mj-raw>
+<mj-include path="./instance.mjml" />
+<mj-raw>{{ end }}{{ end }}</mj-raw>
+
+<mj-raw>{{ if .Alerts.Resolved }}</mj-raw>
+<mj-text><h3>✅ {{ .Alerts.Resolved | len }} resolved instances</h3></mj-text>
+<mj-raw>{{ range .Alerts.Resolved }}</mj-raw>
+<mj-include path="./instance.mjml" />
+<mj-raw>{{ end }}{{ end }}</mj-raw>
+
+<!-- actions -->
+<mj-section>
+  <mj-raw>{{ if .SilenceURL }}</mj-raw>
+  <mj-column><mj-button href="{{ .SilenceURL }}">Silence</mj-button></mj-column>
+  <mj-raw>{{ end }}</mj-raw>
+
+  <mj-raw>{{ if .Annotations.runbook_url }}</mj-raw>
+  <mj-column><mj-button href="{{ .Annotations.runbook_url }}">View runbook</mj-button>
+  </mj-column>
+  <mj-raw>{{ end }}</mj-raw>
+
+  <mj-raw>{{ if .PanelURL }}</mj-raw>
+  <mj-column><mj-button href="{{ .PanelURL }}">View panel</mj-button></mj-column>
+  <mj-raw>{{ else if .DashboardURL }}</mj-raw>
+  <mj-column><mj-button href="{{ .DashboardURL }}">View dashboard</mj-button></mj-column>
+  <mj-raw>{{ end }}</mj-raw>
+</mj-section>
+
+<mj-raw>{{ if .ImageURL }}</mj-raw>
+<mj-section><mj-column><mj-image href="{{ .ImageURL }}" src="{{ .ImageURL }}"/></mj-column></mj-section>
+<mj-raw>{{ end }}</mj-raw>
+
+<mj-raw>{{ if .EmbeddedImage }}</mj-raw>
+<mj-section><mj-column><mj-image src="cid:{{ .EmbeddedImage }}"/></mj-column></mj-section>
+<mj-raw>{{ end }}</mj-raw>

emails/templates/partials/alerting/grouping_labels.mjml

@@ -1,27 +1,11 @@
 <mj-section>
   <mj-column>
-    <!-- we show this only when we're using the default grouping (grafana_folder, alertname) -->
-    <mj-raw>
-      {{ if eq (.GroupLabels.SortedPairs.Names | join ",") "alertname,grafana_folder" }}
-    </mj-raw>
-    <mj-text>
-      <h2>{{ .GroupLabels.grafana_folder }} &rsaquo; {{ .GroupLabels.alertname }}</h2>
-    </mj-text>
-    <mj-raw>
-      {{ else if gt (len .GroupLabels.SortedPairs) 0 }}
-    </mj-raw>
-    <!-- non-default grouping labels are just printed verbatim, if we are grouping at all -->
-    <mj-text>
-      <mj-raw>
-        {{ range .GroupLabels.SortedPairs }}
-      </mj-raw>
-      {{ .Name }}={{ .Value }}
-      <mj-raw>
-        {{ end }}
-      </mj-raw>
-    </mj-text>
-    <mj-raw>
-      {{ end }}
-    </mj-raw>
+    <mj-raw>{{ if eq .GroupLabels.alertname "DatasourceError" }}</mj-raw>
+    <mj-text><h2>Query Error &mdash; {{ .CommonLabels.datasource_uid}}</h2></mj-text>
+    <mj-raw>{{ else if eq .GroupLabels.alertname "DatasourceNoData" }}</mj-raw>
+    <mj-text><h2>No Data &mdash; {{ .CommonLabels.datasource_uid}}</h2></mj-text>
+    <mj-raw>{{ else }}</mj-raw>
+    <mj-text><h2>{{ .GroupLabels.app }} &mdash; {{ .GroupLabels.alertname}}</h2></mj-text>
+    <mj-raw>{{ end }}</mj-raw>
   </mj-column>
 </mj-section>

emails/templates/partials/alerting/instance.mjml

@@ -0,0 +1,17 @@
+<mj-section>
+  <mj-raw>{{ if .Labels.alertname | regexMatch "Datasource(Error|NoData)" }}</mj-raw>
+  <mj-column><mj-text><strong>{{ .Labels.rulename }}</strong></mj-text></mj-column>
+  <mj-column><mj-text><strong>{{ .Annotations.Error }}</strong></mj-text></mj-column>
+  <mj-raw>{{ if gt (len .GeneratorURL) 0 }}</mj-raw>
+  <mj-column><mj-button href="{{ .GeneratorURL }}">View alert</mj-button></mj-column>
+  <mj-raw>{{ end }}{{ else }}</mj-raw>
+
+  <mj-column><mj-table>
+  <mj-raw>{{ range $k, $v := .Values }}</mj-raw>
+  <tr><td><strong>{{ $k }}</strong></td><td>{{ $v }}</td></tr>
+  <mj-raw>{{ end }}</mj-raw>
+  </mj-table></mj-column>
+
+  <mj-raw>{{ end }}</mj-raw>
+  <mj-column><mj-text>[{{ ago .StartsAt }}]</mj-text></mj-column>
+</mj-section>