You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ak...@apache.org on 2018/11/20 21:20:19 UTC

[incubator-pinot] branch master updated: [TE] Attempt to organize and cleanup the email template (#3527)

This is an automated email from the ASF dual-hosted git repository.

akshayrai09 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-pinot.git


The following commit(s) were added to refs/heads/master by this push:
     new bcd91e3  [TE] Attempt to organize and cleanup the email template (#3527)
bcd91e3 is described below

commit bcd91e3a036a8ec098e137c37de102a155e08d30
Author: Akshay Rai <ak...@gmail.com>
AuthorDate: Tue Nov 20 13:20:14 2018 -0800

    [TE] Attempt to organize and cleanup the email template (#3527)
    
    Changes:
    * Display metrics new line separated in the main alert message
    * Readjusted and used consistent padding and margins throughout the template
    * Other minor style changes.
    
    Testing:
    * Tested locally
---
 .../alert/scheme/DetectionEmailAlerter.java        |  2 +-
 .../thirdeye/detector/holiday-anomaly-report.ftl   | 86 ++++++++++------------
 .../com/linkedin/thirdeye/detector/lib/utils.ftl   |  2 +-
 ...multiple-anomalies-email-content-formatter.html | 70 ++++++++----------
 4 files changed, 71 insertions(+), 89 deletions(-)

diff --git a/thirdeye/thirdeye-pinot/src/main/java/com/linkedin/thirdeye/detection/alert/scheme/DetectionEmailAlerter.java b/thirdeye/thirdeye-pinot/src/main/java/com/linkedin/thirdeye/detection/alert/scheme/DetectionEmailAlerter.java
index 6e100d2..a956b90 100644
--- a/thirdeye/thirdeye-pinot/src/main/java/com/linkedin/thirdeye/detection/alert/scheme/DetectionEmailAlerter.java
+++ b/thirdeye/thirdeye-pinot/src/main/java/com/linkedin/thirdeye/detection/alert/scheme/DetectionEmailAlerter.java
@@ -146,7 +146,7 @@ public class DetectionEmailAlerter extends DetectionAlertScheme {
     HtmlEmail email = emailEntity.getContent();
     email.setFrom(this.config.getFrom());
     email.setTo(AlertUtils.toAddress(recipients.getTo()));
-    email.setSubject(email.getSubject());
+    email.setSubject(emailEntity.getSubject());
     if (CollectionUtils.isNotEmpty(recipients.getCc())) {
       email.setCc(AlertUtils.toAddress(recipients.getCc()));
     }
diff --git a/thirdeye/thirdeye-pinot/src/main/resources/com/linkedin/thirdeye/detector/holiday-anomaly-report.ftl b/thirdeye/thirdeye-pinot/src/main/resources/com/linkedin/thirdeye/detector/holiday-anomaly-report.ftl
index f1a519f..8a2c600 100644
--- a/thirdeye/thirdeye-pinot/src/main/resources/com/linkedin/thirdeye/detector/holiday-anomaly-report.ftl
+++ b/thirdeye/thirdeye-pinot/src/main/resources/com/linkedin/thirdeye/detector/holiday-anomaly-report.ftl
@@ -5,22 +5,22 @@
 </head>
 
 <body style="background-color: #EDF0F3;">
-<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%; font-family: 'Proxima Nova','Arial', 'Helvetica Neue',Helvetica, sans-serif;font-size:16px;line-height:normal;margin:0 auto; max-width: 700px; background-color: #F3F6F8; margin: 0 auto;">
-  <tr style="background-color: #F3F6F8;">
-    <td align="left" style="padding: 12px 24px; height: 60px; background-color: #F6F8FA;" colspan="2">
+<table border="0" cellpadding="0" cellspacing="0" colspan="2" style="width:100%; font-family: 'Proxima Nova','Arial','Helvetica Neue',Helvetica,sans-serif; font-size:14px; line-height:normal; margin:0 auto; max-width: 65%; background-color: #F3F6F8;">
+  <tr>
+    <td align="left" style="padding: 12px;">
       <img width="35" height="35" alt="logo" src="https://static.licdn-ei.com/scds/common/u/images/email/logos/logo_shift_inbug_82x82_v1.png"
-           style="vertical-align: middle; display: inline-block; margin-right: 8px; background: white;">
+           style="vertical-align: middle; display: inline-block; background: white;">
       <span style="color: rgba(0,0,0,0.75);font-size: 18px; font-weight: bold; letter-spacing: 2px; display: inline-block;vertical-align: middle;">THIRDEYE</span>
     </td>
   </tr>
 
   <tr>
     <td>
-      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:white; border:1px solid #E9E9E9; border-radius: 2px; width: 100%;">
+      <table border="0" cellpadding="0" cellspacing="0" style="border:1px solid #E9E9E9; border-radius: 2px; width: 100%;">
         <tr>
-          <td style="padding: 32px; background-color: #0073B1; color: #FFF; text-align: center" colspan="2">
-            <h2 style="margin-bottom: 12px;">ACTION REQUIRED</h2>
-            <p style="font-size: 14px; margin-bottom: 12px;">
+          <td style="padding: 12px; background-color: #0073B1; color: #FFF; text-align: center;">
+            <h2>ACTION REQUIRED</h2>
+            <p>
                 <#if anomalyCount == 1>
                   <strong>An anomaly</strong> was detected between <strong>${startTime} and ${endTime} (${timeZone})</strong>
                 <#else>
@@ -32,26 +32,24 @@
                   on metrics
                 </#if>
                 <#list metricsMap?keys as id>
-                  <strong><a style="color: white;" href="${dashboardHost}/app/#/rootcause?metricId=${id}">${metricsMap[id].name}</a></strong><#sep>, </#sep>
+                  <div style="padding-top: 10px;">
+                    <strong><a style="color: white;" href="${dashboardHost}/app/#/rootcause?metricId=${id}">${metricsMap[id].name}</a></strong>
+                  </div>
                 </#list>
             </p>
-            <p style="margin-top: 0px; font-size:14px;  margin-bottom: 25px;">
+            <p>
               <#if isGroupedAnomaly>
-                <a style="margin-top: 0px; padding: 4px 12px; border-radius: 2px; border: 1px solid #FFF; font-size: 16px; font-weight: bold; color: white; text-decoration: none; line-height: 32px;" href="${dashboardHost}/thirdeye#anomalies?anomaliesSearchMode=groupId&anomalyGroupIds=${groupId}">Investigate all in ThirdEye</a>
+                <a style="padding: 4px 12px; border-radius: 2px; border: 1px solid #FFF; font-size: 16px; font-weight: bold; color: white; text-decoration: none; line-height: 32px;" href="${dashboardHost}/thirdeye#anomalies?anomaliesSearchMode=groupId&anomalyGroupIds=${groupId}">Investigate all in ThirdEye</a>
               <#else>
-                <a style="margin-top: 0px; padding: 4px 12px; border-radius: 2px; border: 1px solid #FFF; font-size: 16px; font-weight: bold; color: white; text-decoration: none; line-height: 32px;" href="${dashboardHost}/thirdeye#anomalies?anomaliesSearchMode=id&anomalyIds=${anomalyIds}">Investigate all in ThirdEye</a>
+                <a style="padding: 4px 12px; border-radius: 2px; border: 1px solid #FFF; font-size: 16px; font-weight: bold; color: white; text-decoration: none; line-height: 32px;" href="${dashboardHost}/thirdeye#anomalies?anomaliesSearchMode=id&anomalyIds=${anomalyIds}">Investigate all in ThirdEye</a>
               </#if>
             </p>
           </td>
         </tr>
-        <tr>
-          <td colspan="2" style="border-bottom: 1px solid #E9E9E9;">
-          </td>
-        </tr>
 
           <#if cid?has_content>
             <tr>
-              <td style="padding: 24px;" colspan="2" align="center">
+              <td style="padding: 12px;" align="center">
                 <a href="${anomalyDetails[0].anomalyURL}${anomalyDetails[0].anomalyId}" target="_blank">
                   <img style="width: 70%;" src="cid:${cid}" \>
                 </a>
@@ -61,9 +59,9 @@
 
           <#list metricAnomalyDetails?keys as metric>
             <@utils.addRow title="" align="left">
-                <p style="margin-left: 24px;">
-                  <span style="color: #606060; font-size: 20px; line-height: 24px; margin-right: 16px;">Metric</span>
-                  <span style="color: #1D1D1D; font-size: 20px; font-weight: bold; line-height: 24px;">${metric}</span>
+                <p>
+                  <span style="color: #606060; font-size: 20px;">Metric</span>
+                  <span style="color: #1D1D1D; font-size: 20px; font-weight: bold;">${metric}</span>
                 </p>
                 <#list functionAnomalyDetails?keys as function>
                   <#assign newTable = false>
@@ -73,27 +71,27 @@
                     </#if>
                   </#list>
                   <#if newTable>
-                  <p style="margin: 24px;">
-                    <span style="color: #606060; font-size: 14px; line-height: 20px; margin-right: 16px;">Alert</span>
-                    <a href="${dashboardHost}/app/#/manage/alert/${functionToId[function]?string.computer}" target="blank" style="text-decoration: none; color: #0B5EA1; font-size: 14px; font-weight: bold; line-height: 20px;">${function}</a>
+                  <p>
+                    <span style="color: #606060;">Alert</span>
+                    <a href="${dashboardHost}/app/#/manage/alert/${functionToId[function]?string.computer}" target="blank" style="text-decoration: none; color: #0B5EA1; font-weight: bold;">${function}</a>
                   </p>
                   </#if>
                   <table border="0" width="100%" align="center" style="width:100%; padding:0; margin:0; border-collapse: collapse;text-align:left;">
                     <#list functionAnomalyDetails[function] as anomaly>
                       <#if anomaly.metric==metric>
                         <#if newTable>
-                          <tr style="background-color: #F6F8FA; border-top: 2px solid #C7D1D8; border-bottom: 2px solid #C7D1D8;">
-                            <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px;">Start / Duration</th>
-                            <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px;">Dimensions</th>
-                            <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px;">Current</th>
-                            <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px;">Predicted</th>
-                            <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px; display: none;">Wow</th>
-                            <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px; display: none;">Wo2W</th>
+                          <tr style="text-align:center; background-color: #F6F8FA; border-top: 2px solid #C7D1D8; border-bottom: 2px solid #C7D1D8;">
+                            <th style="text-align:left; padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px;">Start / Duration</th>
+                            <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px;">Dimensions</th>
+                            <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px;">Current</th>
+                            <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px;">Predicted</th>
+                            <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px; display: none;">Wow</th>
+                            <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px; display: none;">Wo2W</th>
                           </tr>
                         </#if>
                         <#assign newTable = false>
                         <tr style="border-bottom: 1px solid #C7D1D8;">
-                          <td style="padding: 14px 24px;white-space: nowrap;">
+                          <td style="padding: 6px 12px;white-space: nowrap;">
                             <a style="font-weight: bold; text-decoration: none; font-size:14px; line-height:20px; color: #0073B1;" href="${anomaly.anomalyURL}${anomaly.anomalyId}"
                                target="_blank">${anomaly.startDateTime} ${anomaly.timezone}</a>
                             <div style="color: rgba(0,0,0,0.6); font-size:12px; line-height:16px;">${anomaly.duration}</div>
@@ -121,7 +119,7 @@
             <@utils.addRow title="Useful Links" align="left">
               <#list referenceLinks?keys as referenceLinkKey>
                 <div style="padding-top: 16px;">
-                  <a href="${referenceLinks[referenceLinkKey]}" style="text-decoration: none; color:#0073B1; font-size:14px; font-weight:bold; line-height:20px; margin-bottom: 0;">${referenceLinkKey}</a>
+                  <a href="${referenceLinks[referenceLinkKey]}" style="padding-left: 16px; font-weight: bold; text-decoration: none; color:#0073B1;">${referenceLinkKey}</a>
                 </div>
               </#list>
             </...@utils.addRow>
@@ -129,21 +127,21 @@
 
           <#if holidays?has_content>
             <@utils.addRow title="Holidays" align="left">
-              <table border="0" width="100%" align="center" style="width:100%; padding:0; margin:0; border-collapse: collapse; text-align:left;">
+              <table border="0" align="center" style="table-layout: fixed; width:100%; padding:0; margin:0; border-collapse: collapse; text-align:left;">
                 <#list holidays as holiday>
-                  <tr style="border-bottom: 1px solid #C7D1D8;">
+                  <tr style="border-bottom: 1px solid #C7D1D8; padding-top: 16px;">
 
-                    <td style="padding:14px 24px;">
-                      <a href="https://www.google.com/search?q=${holiday.name}" style="text-decoration: none; white-space:nowrap; color:#0073B1; font-size:14px; font-weight:bold;">${holiday.name}</a>
+                    <td>
+                      <a href="https://www.google.com/search?q=${holiday.name}" style="text-decoration: none; color:#0073B1; font-size:12px; font-weight:bold;">${holiday.name}</a>
                     </td>
 
-                    <td style="padding:14px 24px;">
-                      <span style="white-space:nowrap; font-size: 14px; color:#606060;">(${holiday.startTime?number_to_date})</span>
+                    <td>
+                      <span style="font-size: 12px; color:#606060;">(${holiday.startTime?number_to_date})</span>
                     </td>
 
                     <#if holiday.targetDimensionMap["countryCode"]??>
-                      <td style="padding:14px 24px;">
-                        <span style="white-space:nowrap; color: rgba(0,0,0,0.6); font-size: 12px;">${holiday.targetDimensionMap["countryCode"]?join(", ")}</span>
+                      <td>
+                        <span style="color: rgba(0,0,0,0.6); font-size: 12px;">${holiday.targetDimensionMap["countryCode"]?join(", ")}</span>
                       </td>
                     </#if>
 
@@ -154,13 +152,7 @@
           </#if>
 
         <tr>
-          <td colspan="2" style="border-bottom: 1px solid #E9E9E9;">
-          </td>
-        </tr>
-
-        <tr>
-          <td style="text-align: center; background-color: #EDF0F3; font-size: 12px; font-family:'Proxima Nova','Arial', 'Helvetica Neue',Helvetica, sans-serif; color: #737373; padding: 24px; font-size:14px;"
-              colspan="2">
+          <td style="text-align: center; background-color: #EDF0F3; font-size: 12px; font-family:'Proxima Nova','Arial', 'Helvetica Neue',Helvetica, sans-serif; color: #737373; padding: 12px;">
             <p style="margin-top:0;"> You are receiving this email because you have subscribed to ThirdEye Alert Service for
               <strong>${alertConfigName}</strong>.</p>
             <p>
diff --git a/thirdeye/thirdeye-pinot/src/main/resources/com/linkedin/thirdeye/detector/lib/utils.ftl b/thirdeye/thirdeye-pinot/src/main/resources/com/linkedin/thirdeye/detector/lib/utils.ftl
index 020a343..4667e06 100644
--- a/thirdeye/thirdeye-pinot/src/main/resources/com/linkedin/thirdeye/detector/lib/utils.ftl
+++ b/thirdeye/thirdeye-pinot/src/main/resources/com/linkedin/thirdeye/detector/lib/utils.ftl
@@ -1,6 +1,6 @@
 <#macro addRow title align>
     <tr>
-      <td style="border-bottom: 1px solid rgba(0,0,0,0.15); padding: 24px; font-family:'Proxima Nova','Arial', 'Helvetica Neue',Helvetica, sans-serif;" colspan="2" align="${align}">
+      <td style="border-bottom: 1px solid rgba(0,0,0,0.15); padding: 24px; align:${align}">
         <#if title?has_content>
           <p style="font-size:20px; line-height:24px; color:#1D1D1D; font-weight: 500; margin:0; padding:0;">${title}</p>
         </#if>
diff --git a/thirdeye/thirdeye-pinot/src/test/resources/test-multiple-anomalies-email-content-formatter.html b/thirdeye/thirdeye-pinot/src/test/resources/test-multiple-anomalies-email-content-formatter.html
index 63a08cb..66925ac 100644
--- a/thirdeye/thirdeye-pinot/src/test/resources/test-multiple-anomalies-email-content-formatter.html
+++ b/thirdeye/thirdeye-pinot/src/test/resources/test-multiple-anomalies-email-content-formatter.html
@@ -3,56 +3,54 @@
 </head>
 
 <body style="background-color: #EDF0F3;">
-<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%; font-family: 'Proxima Nova','Arial', 'Helvetica Neue',Helvetica, sans-serif;font-size:16px;line-height:normal;margin:0 auto; max-width: 700px; background-color: #F3F6F8; margin: 0 auto;">
-  <tr style="background-color: #F3F6F8;">
-    <td align="left" style="padding: 12px 24px; height: 60px; background-color: #F6F8FA;" colspan="2">
+<table border="0" cellpadding="0" cellspacing="0" colspan="2" style="width:100%; font-family: 'Proxima Nova','Arial','Helvetica Neue',Helvetica,sans-serif; font-size:14px; line-height:normal; margin:0 auto; max-width: 65%; background-color: #F3F6F8;">
+  <tr>
+    <td align="left" style="padding: 12px;">
       <img width="35" height="35" alt="logo" src="https://static.licdn-ei.com/scds/common/u/images/email/logos/logo_shift_inbug_82x82_v1.png"
-           style="vertical-align: middle; display: inline-block; margin-right: 8px; background: white;">
+           style="vertical-align: middle; display: inline-block; background: white;">
       <span style="color: rgba(0,0,0,0.75);font-size: 18px; font-weight: bold; letter-spacing: 2px; display: inline-block;vertical-align: middle;">THIRDEYE</span>
     </td>
   </tr>
 
   <tr>
     <td>
-      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:white; border:1px solid #E9E9E9; border-radius: 2px; width: 100%;">
+      <table border="0" cellpadding="0" cellspacing="0" style="border:1px solid #E9E9E9; border-radius: 2px; width: 100%;">
         <tr>
-          <td style="padding: 32px; background-color: #0073B1; color: #FFF; text-align: center" colspan="2">
-            <h2 style="margin-bottom: 12px;">ACTION REQUIRED</h2>
-            <p style="font-size: 14px; margin-bottom: 12px;">
+          <td style="padding: 12px; background-color: #0073B1; color: #FFF; text-align: center;">
+            <h2>ACTION REQUIRED</h2>
+            <p>
               <strong>2 anomalies</strong> were detected between <strong>Nov 06, 10:00 and Nov 07, 17:00 (PDT)</strong> on metric
-              <strong><a style="color: white;" href="http://localhost:8080/dashboard/app/#/rootcause?metricId=4">test</a></strong>
+              <div style="padding-top: 10px;">
+                <strong><a style="color: white;" href="http://localhost:8080/dashboard/app/#/rootcause?metricId=4">test</a></strong>
+              </div>
             </p>
-            <p style="margin-top: 0px; font-size:14px;  margin-bottom: 25px;">
-              <a style="margin-top: 0px; padding: 4px 12px; border-radius: 2px; border: 1px solid #FFF; font-size: 16px; font-weight: bold; color: white; text-decoration: none; line-height: 32px;" href="http://localhost:8080/dashboard/thirdeye#anomalies?anomaliesSearchMode=id&anomalyIds=2,3">Investigate all in ThirdEye</a>
+            <p>
+              <a style="padding: 4px 12px; border-radius: 2px; border: 1px solid #FFF; font-size: 16px; font-weight: bold; color: white; text-decoration: none; line-height: 32px;" href="http://localhost:8080/dashboard/thirdeye#anomalies?anomaliesSearchMode=id&anomalyIds=2,3">Investigate all in ThirdEye</a>
             </p>
           </td>
         </tr>
-        <tr>
-          <td colspan="2" style="border-bottom: 1px solid #E9E9E9;">
-          </td>
-        </tr>
 
         <tr>
-          <td style="border-bottom: 1px solid rgba(0,0,0,0.15); padding: 24px; font-family:'Proxima Nova','Arial', 'Helvetica Neue',Helvetica, sans-serif;" colspan="2" align="left">
-            <p style="margin-left: 24px;">
-              <span style="color: #606060; font-size: 20px; line-height: 24px; margin-right: 16px;">Metric</span>
-              <span style="color: #1D1D1D; font-size: 20px; font-weight: bold; line-height: 24px;">test</span>
+          <td style="border-bottom: 1px solid rgba(0,0,0,0.15); padding: 24px; align: left">
+            <p>
+              <span style="color: #606060; font-size: 20px; ">Metric</span>
+              <span style="color: #1D1D1D; font-size: 20px; font-weight: bold;">test</span>
             </p>
-            <p style="margin: 24px;">
-              <span style="color: #606060; font-size: 14px; line-height: 20px; margin-right: 16px;">Alert</span>
-              <a href="http://localhost:8080/dashboard/app/#/manage/alert/1" target="blank" style="text-decoration: none; color: #0B5EA1; font-size: 14px; font-weight: bold; line-height: 20px;">integration test function 1</a>
+            <p>
+              <span style="color: #606060;">Alert</span>
+              <a href="http://localhost:8080/dashboard/app/#/manage/alert/1" target="blank" style="text-decoration: none; color: #0B5EA1; font-weight: bold;">integration test function 1</a>
             </p>
             <table border="0" width="100%" align="center" style="width:100%; padding:0; margin:0; border-collapse: collapse;text-align:left;">
-              <tr style="background-color: #F6F8FA; border-top: 2px solid #C7D1D8; border-bottom: 2px solid #C7D1D8;">
-                <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px;">Start / Duration</th>
-                <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px;">Dimensions</th>
-                <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px;">Current</th>
-                <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px;">Predicted</th>
-                <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px; display: none;">Wow</th>
-                <th style="padding: 4px 24px; font-size: 12px; font-weight: bold; line-height: 20px; display: none;">Wo2W</th>
+              <tr style="text-align:center; background-color: #F6F8FA; border-top: 2px solid #C7D1D8; border-bottom: 2px solid #C7D1D8;">
+                <th style="text-align:left; padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px;">Start / Duration</th>
+                <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px;">Dimensions</th>
+                <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px;">Current</th>
+                <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px;">Predicted</th>
+                <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px; display: none;">Wow</th>
+                <th style="padding: 6px 12px; font-size: 12px; font-weight: bold; line-height: 20px; display: none;">Wo2W</th>
               </tr>
               <tr style="border-bottom: 1px solid #C7D1D8;">
-                <td style="padding: 14px 24px;white-space: nowrap;">
+                <td style="padding: 6px 12px;white-space: nowrap;">
                   <a style="font-weight: bold; text-decoration: none; font-size:14px; line-height:20px; color: #0073B1;" href="http://localhost:8080/dashboard/app/#/rootcause?anomalyId=2"
                      target="_blank">Nov 06, 10:00 PDT</a>
                   <div style="color: rgba(0,0,0,0.6); font-size:12px; line-height:16px;">3 hours</div>
@@ -66,7 +64,7 @@
                 </td>
               </tr>
               <tr style="border-bottom: 1px solid #C7D1D8;">
-                <td style="padding: 14px 24px;white-space: nowrap;">
+                <td style="padding: 6px 12px;white-space: nowrap;">
                   <a style="font-weight: bold; text-decoration: none; font-size:14px; line-height:20px; color: #0073B1;" href="http://localhost:8080/dashboard/app/#/rootcause?anomalyId=3"
                      target="_blank">Nov 07, 10:00 PDT</a>
                   <div style="color: rgba(0,0,0,0.6); font-size:12px; line-height:16px;">7 hours</div>
@@ -83,16 +81,8 @@
           </td>
         </tr>
 
-
-
-        <tr>
-          <td colspan="2" style="border-bottom: 1px solid #E9E9E9;">
-          </td>
-        </tr>
-
         <tr>
-          <td style="text-align: center; background-color: #EDF0F3; font-size: 12px; font-family:'Proxima Nova','Arial', 'Helvetica Neue',Helvetica, sans-serif; color: #737373; padding: 24px; font-size:14px;"
-              colspan="2">
+          <td style="text-align: center; background-color: #EDF0F3; font-size: 12px; font-family:'Proxima Nova','Arial', 'Helvetica Neue',Helvetica, sans-serif; color: #737373; padding: 12px;">
             <p style="margin-top:0;"> You are receiving this email because you have subscribed to ThirdEye Alert Service for
               <strong>Test Config</strong>.</p>
             <p>


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org