Alerting: Layout fixes for email template (grafana#40676)

peterholmberg · web-flow · commit b1b0f713129a · 2021-10-22T09:12:37.000+02:00
* changes in email footer and ngalert template

* more adjustments to labels list
diff --git a/emails/assets/css/style.css b/emails/assets/css/style.css
@@ -91,7 +91,8 @@ margin-bottom: 25px;
 .footer {
   background-color: #2e2e2e;
   color: #999999;
-  margin-top: 20px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 @media only screen and (max-width: 600px) {
diff --git a/emails/templates/ng_alert_notification.html b/emails/templates/ng_alert_notification.html
@@ -5,21 +5,21 @@
       <tr>
         <td colspan="2" class="annotations">
           [[ range .Annotations.SortedPairs ]]
-            <p>[[ .Name ]]: [[ .Value ]]</p>
+          <p><span class="annotations-heading">[[ .Name ]]:</span> <span class="annotations-value">[[ .Value ]]</span></p>
           [[ end ]]
         </td>
       </tr>
   [[ end ]]
   <tr>
-    <td valign="top" class="labels-heading">Labels:</td>
-    <td>
+    <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">
+    <td colspan="2" class="actions">
       [[ if .SilenceURL ]]
         <a
           href="[[ .SilenceURL ]]"
@@ -116,10 +116,24 @@
     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;
@@ -132,6 +146,7 @@
     font-weight: bold;
     padding: 0 0 0 12px;
     text-decoration: underline;
+    vertical-align: middle;
   }
   .status-tag {
     color: #ffffff;
@@ -213,6 +228,6 @@
       </table>
       </table>
     </td>
-  </tr> 
+  </tr>
 </table>
-[[ end ]]
+[[ end ]]
diff --git a/public/emails/alert_notification.html b/public/emails/alert_notification.html
@@ -344,7 +344,7 @@ <h5 class="data" style="color: #222222; font-family: 'Open Sans', 'Helvetica Neu
 						</tr>
 					</table>
 					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; margin-top: 20px; padding: 0;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
 						<tr style="vertical-align: top; padding: 0;" align="left">
 							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
 								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
diff --git a/public/emails/invited_to_org.html b/public/emails/invited_to_org.html
@@ -257,7 +257,7 @@ <h4 class="center" style="color: #222222; font-family: 'Open Sans', 'Helvetica N
 						</tr>
 					</table>
 					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; margin-top: 20px; padding: 0;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
 						<tr style="vertical-align: top; padding: 0;" align="left">
 							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
 								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
diff --git a/public/emails/new_user_invite.html b/public/emails/new_user_invite.html
@@ -258,7 +258,7 @@ <h4 class="center" style="color: #222222; font-family: 'Open Sans', 'Helvetica N
 						</tr>
 					</table>
 					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; margin-top: 20px; padding: 0;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
 						<tr style="vertical-align: top; padding: 0;" align="left">
 							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
 								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
diff --git a/public/emails/ng_alert_notification.html b/public/emails/ng_alert_notification.html
@@ -211,21 +211,21 @@
       </td></tr><tr style="vertical-align: top; padding: 0;" align="left">
         <td colspan="2" class="annotations" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 24px 0 12px;" align="left" valign="top">
           {{ range .Annotations.SortedPairs }}
-            <p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left">{{ .Name }}: {{ .Value }}</p>
+          <p style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0 0 10px; padding: 0;" align="left"><span class="annotations-heading" style="font-weight: bold; text-transform: capitalize;">{{ .Name }}:</span> <span class="annotations-value" style="padding-left: 8px;">{{ .Value }}</span></p>
           {{ end }}
         </td>
       </tr>
   {{ end }}
   <tr style="vertical-align: top; padding: 0;" align="left">
-    <td valign="top" class="labels-heading" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: bold; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left">Labels:</td>
-    <td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top">
-      <ul class="labels-list" style="font-size: 14px; vertical-align: top;">
+    <td colspan="2" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top">
+      <span class="labels-heading" style="font-size: 14px; font-weight: bold; vertical-align: top; display: inline-block;">Labels:</span>
+      <ul class="labels-list" style="font-size: 14px; vertical-align: top; display: inline-block; padding-left: 8px; margin: 0;">
         {{ range .Labels.SortedPairs }}<li>{{ .Name }}: {{ .Value }}</li>{{ end }}
       </ul>
     </td>
   </tr>
   <tr style="vertical-align: top; padding: 0;" align="left">
-    <td colspan="2" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 0;" align="left" valign="top">
+    <td colspan="2" class="actions" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 24px 0 12px;" align="left" valign="top">
       {{ if .SilenceURL }}
         <a href="{{ .SilenceURL }}" class="button" style="color: #464c54; text-decoration: none; background-color: #f1f5f9; border-radius: 2px; display: inline-block; font-size: 12px; font-weight: bold; margin: 0 10px 0 0; padding: 5px 9px; border: 1px solid #c7d0d9;">
           <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" style="outline: none !important; text-decoration: none !important; -ms-interpolation-mode: bicubic; width: 14px; clear: both; display: block; height: 14px; vertical-align: sub; margin: 0 5px 0 0; border: 0 none;" align="left" />
@@ -286,7 +286,7 @@
             <td class="status-tag status-firing" width="68" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #ffffff; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 68px; margin: 0; padding: 4px 8px;" align="center" bgcolor="#e02f44" valign="top">
               Firing
             </td>
-            <td class="alert-label" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: bold; line-height: 19px; font-size: 16px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; text-decoration: underline; margin: 0; padding: 0 0 0 12px;" align="left" valign="top">
+            <td class="alert-label" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: bold; line-height: 19px; font-size: 16px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; text-decoration: underline; margin: 0; padding: 0 0 0 12px;" align="left" valign="middle">
               {{ .Labels.alertname }}
             </td>
           </tr>
@@ -307,7 +307,7 @@
             <td class="status-tag status-resolved" width="68" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #ffffff; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 68px; margin: 0; padding: 4px 8px;" align="center" bgcolor="#464c54" valign="top">
               Resolved
             </td>
-            <td class="alert-label" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: bold; line-height: 19px; font-size: 16px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; text-decoration: underline; margin: 0; padding: 0 0 0 12px;" align="left" valign="top">
+            <td class="alert-label" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: bold; line-height: 19px; font-size: 16px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; text-decoration: underline; margin: 0; padding: 0 0 0 12px;" align="left" valign="middle">
               {{ .Labels.alertname }}
             </td>
           </tr>
@@ -322,15 +322,16 @@
       </table>
       </td></tr></table>
     
-   
+  
 </table>
 {{ end }}
+
 								
 							</center></td>
 						</tr>
 					</table>
 					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; margin-top: 20px; padding: 0;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
 						<tr style="vertical-align: top; padding: 0;" align="left">
 							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
 								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
diff --git a/public/emails/reset_password.html b/public/emails/reset_password.html
@@ -252,7 +252,7 @@ <h4 style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetic
 						</tr>
 					</table>
 					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; margin-top: 20px; padding: 0;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
 						<tr style="vertical-align: top; padding: 0;" align="left">
 							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
 								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
diff --git a/public/emails/signup_started.html b/public/emails/signup_started.html
@@ -256,7 +256,7 @@ <h4 class="center" style="color: #222222; font-family: 'Open Sans', 'Helvetica N
 						</tr>
 					</table>
 					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; margin-top: 20px; padding: 0;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
 						<tr style="vertical-align: top; padding: 0;" align="left">
 							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
 								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">
diff --git a/public/emails/welcome_on_signup.html b/public/emails/welcome_on_signup.html
@@ -258,7 +258,7 @@ <h4 style="color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetic
 						</tr>
 					</table>
 					
-					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; margin-top: 20px; padding: 0;" bgcolor="#2e2e2e">
+					<table class="footer center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; color: #999999; width: 100%; margin: 0 auto; padding: 0;" bgcolor="#2e2e2e">
 						<tr style="vertical-align: top; padding: 0;" align="left">
 							<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; position: relative; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
 								<table class="twelve columns center" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: center; width: 580px; margin: 0 auto; padding: 0;">

Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,8 @@ margin-bottom: 25px;`
`91`	`91`	`.footer {`
`92`	`92`	`background-color: #2e2e2e;`
`93`	`93`	`color: #999999;`
`94`		`- margin-top: 20px;`
	`94`	`+ margin: 0 auto;`
	`95`	`+ width: 100%;`
`95`	`96`	`}`
`96`	`97`
`97`	`98`	`@media only screen and (max-width: 600px) {`