WIP simplifying email templates

superfly · Mar 15, 2024 · b1fedac · b1fedac
1 parent 5b69347
commit b1fedac
Show file tree

Hide file tree

Showing 11 changed files with 228 additions and 349 deletions.
diff --git a/emails/templates/ng_alert_notification.mjml b/emails/templates/ng_alert_notification.mjml
@@ -1,44 +1,30 @@
 <mjml>
-  <!-- global variables -->
-  <mj-include path="./partials/_globals.mjml" />
-  <!-- css styling -->
-  <mj-include path="./partials/layout/theme.css" type="css" css-inline="inline" />
   <mj-head>
-    <!-- ⬇ Don't forget to specify an email subject below! ⬇ -->
     <mj-title>
       {{ Subject .Subject .TemplateData "{{ .Title }}" }}
     </mj-title>
-    <mj-include path="./partials/layout/head.mjml" />
-    <!-- Summary of the email contents, this will go in the email preview -->
     <mj-include path="./partials/alerting/summary.mjml" />
   </mj-head>
   <mj-body>
-    <mj-section>
-      <mj-include path="./partials/layout/header.mjml" />
-    </mj-section>
-
-    <!-- This is our grouping header, it says what grouping labels have been applied to this email -->
     <mj-include path="./partials/alerting/grouping_labels.mjml" />
 
     <!-- custom email message -->
     <mj-raw>
       {{ if .Message }}
     </mj-raw>
-    <mj-wrapper css-class="background" padding="0">
-      <mj-section padding="0">
-        <mj-column>
-          <mj-text align="left">
-            <mj-raw>
-              {{ range $line := (splitList "\n" .Message) }}
-            </mj-raw>
-            {{ $line }}<br />
-            <mj-raw>
-              {{ end }}
-            </mj-raw>
-          </mj-text>
-        </mj-column>
-      </mj-section>
-    </mj-wrapper>
+    <mj-section>
+      <mj-column>
+        <mj-text>
+          <mj-raw>
+            {{ range $line := (splitList "\n" .Message) }}
+          </mj-raw>
+          {{ $line }}<br />
+          <mj-raw>
+            {{ end }}
+          </mj-raw>
+        </mj-text>
+      </mj-column>
+    </mj-section>
 
     <!-- end custom email message -->
     <mj-raw>
@@ -119,7 +105,7 @@
       {{ end }}
     </mj-raw>
 
-    <mj-section padding-top="10px">
+    <mj-section>
       <mj-include path="./partials/layout/footer.mjml" />
     </mj-section>
   </mj-body>

diff --git a/emails/templates/partials/alerting/grouping_labels.mjml b/emails/templates/partials/alerting/grouping_labels.mjml
@@ -1,20 +1,17 @@
-<mj-section padding="0">
+<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 padding="0" align="left">
-      <h2>📁 {{ .GroupLabels.grafana_folder }} &rsaquo; {{ .GroupLabels.alertname }}</h2>
+    <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 padding="0" align="left">
-      <h2>
-        📁 Grouped by&nbsp;
-      </h2>
+    <mj-text>
       <mj-raw>
         {{ range .GroupLabels.SortedPairs }}
       </mj-raw>

diff --git a/emails/templates/partials/alerting/instance_details.mjml b/emails/templates/partials/alerting/instance_details.mjml
@@ -65,38 +65,24 @@
   <mj-column>
     <!-- Labels -->
     <mj-raw>{{ if .Labels.SortedPairs }}</mj-raw>
-    <mj-text>
-      <strong>Labels</strong>
-    </mj-text>
+    <mj-text><strong>Labels</strong></mj-text>
 
     <mj-table>
       <mj-raw>{{ range .Labels.SortedPairs }}</mj-raw>
-      <tr>
-        <td>
-          <strong>{{ .Name }}</strong>
-        </td>
-        <td>{{ .Value }}</td>
-      </tr>
+      <tr><td><strong>{{ .Name }}</strong></td><td>{{ .Value }}</td></tr>
       <mj-raw>{{ end }}</mj-raw>
     </mj-table>
 
     <mj-raw>{{ end }}</mj-raw>
 
     <!-- Annotations, we exclude "description" and "summary" because those have their own dedicated section -->
     <mj-raw>{{ if (without .Annotations.SortedPairs.Names "description" "summary") }}</mj-raw>
-    <mj-text>
-      <strong>Annotations</strong>
-    </mj-text>
+    <mj-text><strong>Annotations</strong></mj-text>
 
     <mj-table>
       <mj-raw>{{ range .Annotations.SortedPairs }}</mj-raw>
       <mj-raw>{{ if and (ne .Name "description") (ne .Name "summary") }}</mj-raw>
-      <tr>
-        <td>
-          <strong>{{ .Name }}</strong>
-        </td>
-        <td>{{ .Value }}</td>
-      </tr>
+      <tr><td><strong>{{ .Name }}</strong></td><td>{{ .Value }}</td></tr>
       <mj-raw>{{ end }}</mj-raw>
       <mj-raw>{{ end }}</mj-raw>
     </mj-table>
@@ -106,39 +92,27 @@
 </mj-section>
 
 <!-- actions -->
-<mj-section text-align="left" css-class="border-top" padding="15px 0px">
+<mj-section>
   <mj-raw>{{ if .SilenceURL }}</mj-raw>
-  <mj-column>
-    <mj-button align="center" vertical-align="middle" href="{{ .SilenceURL }}" padding="0" inner-padding="5px 12px">
-      Silence
-    </mj-button>
-  </mj-column>
+  <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 align="center" href="{{ .Annotations.runbook_url }}" padding="0" inner-padding="5px 12px">
-      View runbook
-    </mj-button>
-  </mj-column>
-  <mj-raw>{{ end }}</mj-raw>
-  <mj-raw>{{ if .DashboardURL }}</mj-raw>
-  <mj-column>
-    <mj-button align="center" href="{{ .DashboardURL }}" padding="0" inner-padding="5px 12px">
-      View dashboard
-    </mj-button>
+  <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 align="center" href="{{ .PanelURL }}" padding="0" inner-padding="5px 12px"> View panel </mj-button>
-  </mj-column>
+  <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>
 
 <!-- Observed -->
-<mj-section css-class="border-top" padding="5px 0">
+<mj-section>
   <mj-column>
-    <mj-text color="#91929e">
+    <mj-text>
       Observed <strong>{{ ago .StartsAt }}</strong> before this notification was delivered, at
       <strong>{{ .StartsAt }}</strong>
     </mj-text>

diff --git a/emails/templates/partials/layout/footer.mjml b/emails/templates/partials/layout/footer.mjml
@@ -1,5 +1,5 @@
-<mj-column background-color="transparent">
-  <mj-text align="center">
-    &copy; {{ now | date "2006" }} Grafana Labs. Sent by <a href="{{ .AppUrl }}">Grafana v{{ .BuildVersion }}</a>.
+<mj-column>
+  <mj-text>
+    Sent by <a href="{{ .AppUrl }}">Fly Metrics</a>.
   </mj-text>
 </mj-column>
diff --git a/public/emails/invited_to_org.html b/public/emails/invited_to_org.html
@@ -1,10 +1,8 @@
 <!doctype html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 
 <head>
-  <title>
-    {{ Subject .Subject .TemplateData "{{ .InvitedBy }} has added you to the {{ .OrgName }} organization" }}
-  </title>
+  <title>{{ Subject .Subject .TemplateData "{{ .InvitedBy }} has added you to the {{ .OrgName }} organization" }}</title>
   {{ __dangerouslyInjectHTML `<!--[if !mso]><!-->` }}
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   {{ __dangerouslyInjectHTML `<!--<![endif]-->` }}
@@ -83,7 +81,7 @@
 
   </style>
   <style type="text/css">
-    @media only screen and (max-width:480px) {
+    @media only screen and (max-width:479px) {
       table.mj-full-width-mobile {
         width: 100% !important;
       }
@@ -94,12 +92,10 @@
     }
 
   </style>
-  <style type="text/css">
-  </style>
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="canvas" style="background-color: #fff;">
+  <div class="canvas" style="background-color: #fff;" lang="und" dir="auto">
     {{ __dangerouslyInjectHTML `<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->` }}
     <div style="margin:0px auto;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
@@ -116,7 +112,7 @@
                           <tbody>
                             <tr>
                               <td style="width:200px;">
-                                <img height="auto" src="https://grafana.com/static/assets/img/logo_new_transparent_light_400x100.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200">
+                                <img alt src="https://grafana.com/static/assets/img/logo_new_transparent_light_400x100.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200" height="auto">
                               </td>
                             </tr>
                           </tbody>
@@ -161,7 +157,7 @@ <h2>You have been added to {{ .OrgName }}</h2>
                       </td>
                     </tr>
                     <tr>
-                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                      <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                         <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                           <tbody>
                             <tr>
@@ -200,11 +196,11 @@ <h2>You have been added to {{ .OrgName }}</h2>
             <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
               {{ __dangerouslyInjectHTML `<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->` }}
               <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
-                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                   <tbody>
                     <tr>
-                      <td align="center" class="txt" style="font-size:0px;padding:10px 25px;word-break:break-word;">
-                        <div style="font-family: Inter, Helvetica, Arial; font-size: 13px; line-height: 150%; text-align: center; color: #000000;">&copy; {{ now | date "2006" }} Grafana Labs. Sent by <a href="{{ .AppUrl }}" style="color: #6E9FFF;">Grafana v{{ .BuildVersion }}</a>.</div>
+                      <td align="left" class="txt" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family: Inter, Helvetica, Arial; font-size: 13px; line-height: 150%; text-align: left; color: #000000;">Sent by <a href="{{ .AppUrl }}" style="color: #6E9FFF;">Fly Metrics</a>.</div>
                       </td>
                     </tr>
                   </tbody>

diff --git a/public/emails/new_user_invite.html b/public/emails/new_user_invite.html
@@ -1,10 +1,8 @@
 <!doctype html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 
 <head>
-  <title>
-    {{ Subject .Subject .TemplateData "{{ .InvitedBy }} has invited you to join Grafana" }}
-  </title>
+  <title>{{ Subject .Subject .TemplateData "{{ .InvitedBy }} has invited you to join Grafana" }}</title>
   {{ __dangerouslyInjectHTML `<!--[if !mso]><!-->` }}
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   {{ __dangerouslyInjectHTML `<!--<![endif]-->` }}
@@ -83,7 +81,7 @@
 
   </style>
   <style type="text/css">
-    @media only screen and (max-width:480px) {
+    @media only screen and (max-width:479px) {
       table.mj-full-width-mobile {
         width: 100% !important;
       }
@@ -94,12 +92,10 @@
     }
 
   </style>
-  <style type="text/css">
-  </style>
 </head>
 
 <body style="word-spacing:normal;">
-  <div class="canvas" style="background-color: #fff;">
+  <div class="canvas" style="background-color: #fff;" lang="und" dir="auto">
     {{ __dangerouslyInjectHTML `<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->` }}
     <div style="margin:0px auto;max-width:600px;">
       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
@@ -116,7 +112,7 @@
                           <tbody>
                             <tr>
                               <td style="width:200px;">
-                                <img height="auto" src="https://grafana.com/static/assets/img/logo_new_transparent_light_400x100.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200">
+                                <img alt src="https://grafana.com/static/assets/img/logo_new_transparent_light_400x100.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="200" height="auto">
                               </td>
                             </tr>
                           </tbody>
@@ -155,7 +151,7 @@ <h2>You're invited to join {{ .OrgName }}</h2>
                       </td>
                     </tr>
                     <tr>
-                      <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                      <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                         <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                           <tbody>
                             <tr>
@@ -194,11 +190,11 @@ <h2>You're invited to join {{ .OrgName }}</h2>
             <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
               {{ __dangerouslyInjectHTML `<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->` }}
               <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
-                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:transparent;vertical-align:top;" width="100%">
+                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                   <tbody>
                     <tr>
-                      <td align="center" class="txt" style="font-size:0px;padding:10px 25px;word-break:break-word;">
-                        <div style="font-family: Inter, Helvetica, Arial; font-size: 13px; line-height: 150%; text-align: center; color: #000000;">&copy; {{ now | date "2006" }} Grafana Labs. Sent by <a href="{{ .AppUrl }}" style="color: #6E9FFF;">Grafana v{{ .BuildVersion }}</a>.</div>
+                      <td align="left" class="txt" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                        <div style="font-family: Inter, Helvetica, Arial; font-size: 13px; line-height: 150%; text-align: left; color: #000000;">Sent by <a href="{{ .AppUrl }}" style="color: #6E9FFF;">Fly Metrics</a>.</div>
                       </td>
                     </tr>
                   </tbody>