feat(swabbie): adds notification email design (#384)

* feat(swabbie): adds notification email design
spinnaker · Nov 2, 2018 · 521d0e1 · 521d0e1
1 parent e3c23a1
commit 521d0e1
Show file tree

Hide file tree

Showing 2 changed files with 167 additions and 42 deletions.
diff --git a/echo-notifications/src/main/resources/templates/swabbie/body.ftl b/echo-notifications/src/main/resources/templates/swabbie/body.ftl
@@ -1,51 +1,176 @@
+<!DOCTYPE html>
 <html>
 <head>
+<title>Cleanup Notifications</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<style type="text/css">
+  /* CLIENT-SPECIFIC STYLES */
+  body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
+  table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
+  img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
+
+  /* RESET STYLES */
+  img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
+  table{border-collapse: collapse !important;}
+  body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
+
+  /* iOS BLUE LINKS */
+  a[x-apple-data-detectors] {
+    color: inherit !important;
+    text-decoration: none !important;
+    font-size: inherit !important;
+    font-family: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+  }
+
+  /* MOBILE STYLES */
+  @media screen and (max-width: 600px) {
+
+    .header td,
+    .loop__data td,
+    .loop td {
+      display: block !important;
+      box-sizing: border-box;
+      clear: both;
+    }
+    .m-logo {
+      display: block !important;
+    }
+    td.logo {
+      display: none !important;
+    }
+    .title {
+      padding: 0 12px 16px !important;
+    }
+    .title h1 {
+      font-size: 18px !important;
+    }
+    .title h2 {
+      font-size: 14px !important;
+    }
+    .middle {
+      padding: 32px 4px !important;
+    }
+    .loop__data {
+      margin: 8px;
+      width: auto !important;
+    }
+    td.loop__number {
+      display: none !important;
+    }
+    .loop__key {
+      text-align: left !important;
+      width: auto !important;
+      padding-top: 8px !important;
+      padding-bottom: 0px !important;
+    }
+    .loop__btns {
+      width: 100% !important;
+      padding: 0 8px 12px 8px !important;
+      text-align: right;
+    }
+    .loop__btns a {
+      display: inline-block !important;
+      margin: 0 4px !important;
+    }
+  }
+
+  /* ANDROID CENTER FIX */
+  div[style*="margin: 16px 0;"] { margin: 0 !important; }
+</style>
+
 </head>
-<body style="-moz-box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -webkit-text-size-adjust: 100%; Margin: 0; background-color: #FAFAFA !important; box-sizing: border-box; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">
-<table class="container" align="center" style="Margin: 0 auto; background: #fefefe; border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px;">
-  <tr style="padding: 0; text-align: left; vertical-align: top;">
-    <td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background-color: #D8E8ED; border-collapse: collapse !important; color: #3A5469; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0 20px; padding-left: 0; text-align: left; text-transform: uppercase; vertical-align: middle; word-wrap: break-word;" class="sp-header">
-      Cleanup Notifications
+<body style="margin: 0 !important; padding: 0 !important;">
+<table border="0" cellpadding="0" cellspacing="0" width="100%">
+  <tr>
+  <!-- HEADER -->
+    <td bgcolor="#333333" style="border-bottom: 3px solid #129cb5;" align="center">
+      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 1000px;" class="header">
+        <tr>
+          <td align="center" valign="top" style="padding: 16px 12px 0 12px; display: none;" class="m-logo">
+            <img alt="Spinnaker" src="spinnaker-logo-400.png" width="100" height="100" border="0">
+          </td>
+          <td class="title" align="left" valign="middle" style="padding: 16px 0 16px 32px; height: 100%;">
+            <h1 style="display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 28px;">Cleanup Notifications</h1>
+            <h2 style="display: block; font-family: Helvetica, Arial, sans-serif; color: #d8d8d8; font-size: 16px; font-weight: normal;">${notification.additionalContext.resources?size} image(s) scheduled for cleanup</h2>
+          </td>
+          <td align="center" valign="top" style="padding: 16px 32px 16px 16px; width: 140px;" class="logo">
+            <img alt="Spinnaker" src="https://www.spinnaker.io/assets/emails/spinnaker-logo-400.png" width="140" height="140" border="0">
+          </td>
+        </tr>
+      </table>
     </td>
   </tr>
-  <tr style="padding: 0; text-align: left; vertical-align: top;">
-    <td class="summary" colspan="2" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background-color: #EFEFEF; border-collapse: collapse !important; color: #3A5469; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 20px 20px; text-align: left; vertical-align: top; word-wrap: break-word;">
-      <strong style="color: #229CB4; font-size: 24px; font-weight: bold;">${notification.additionalContext.resources?size}</strong>
-      <span style="font-size: 16px;">
-        ${notification.additionalContext.resourceType}(s) scheduled for cleanup.
-      </span>
+
+  <tr>
+  <!-- MIDDLE -->
+    <td class="middle" bgcolor="#d7e8ed" align="center" style="padding: 32px 16px;">
+
+    <!-- CONTENT -->
+      <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 1000px;">
+
+      <!-- LOOP -->
+        <#foreach resource in notification.additionalContext.resources>
+        <tr class="loop" style="border-bottom: 1px solid #cccccc;">
+          <td class="loop__number" valign="middle" style="padding: 16px 16px 16px 32px; width: 40px; font-family: Helvetica, Arial, sans-serif; color: #cccccc; font-size: 18px; font-weight: bold;">
+            ${resource?index + 1}
+          </td>
+          <td>
+          <table class="loop__data" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 1000px;" class="wrapper">
+            <tr>
+              <td class="loop__key" align="right" valign="top" style="padding: 4px 16px 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;" width="30%">
+                id
+              </td>
+              <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                ${resource.resourceId}
+              </td>
+            </tr>
+            <#if resource.resourceId != resource.name>
+            <tr>
+              <td class="loop__key" align="right" valign="top" style="padding: 4px 16px 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;" width="30%">
+                name
+              </td>
+              <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                ${resource.name}
+              </td>
+            </tr>
+            </#if>
+            <#if resource.lastSeenInfo??>
+            <tr>
+              <td class="loop__key" align="right" valign="top" style="padding: 4px 16px 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;" width="30%">
+                last seen
+              </td>
+              <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                ${resource.lastSeenInfo.timeSeen?number_to_date?string("EEE, d MMM yyyy")} - <span style="color: #999999;">${resource.lastSeenInfo.usedByResourceIdentifier}</span>
+              </td>
+            </tr>
+            </#if>
+            <tr>
+              <td class="loop__key" align="right" valign="top" style="padding: 4px 16px 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;" width="30%">
+                cleanup date
+              </td>
+              <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                ${resource.projectedDeletionStamp?number_to_date?string("EEE, d MMM yyyy")}
+              </td>
+            </tr>
+          </table>
+          </td>
+          <td class="loop__btns" valign="middle" style="padding: 16px 32px 16px 16px; width: 112px;">
+            <a href="${notification.additionalContext.optOutLink}/${resource.namespace}/${resource.resourceId}" target="_blank" style="font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; margin: 8px 0; text-decoration: none; background-color: #149cb5; text-align: center; text-decoration: none; border-radius: 4px; padding: 8px 16px; display: block;" class="mobile-button">More Info</a>
+            <a href="${notification.additionalContext.optOutLink}/${resource.namespace}/${resource.resourceId}/optOut" target="_blank" style="font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: #666666; margin: 8px 0; text-decoration: none; background-color: #ffffff; text-align: center; text-decoration: none; border-radius: 4px; padding: 8px 16px; display: block; border: 1px solid #cccccc" class="mobile-button">Opt Out</a>
+          </td>
+        </tr>
+        </#foreach>
+
+      </table>
     </td>
   </tr>
-  <tr style="padding: 0; text-align: left; vertical-align: top;">
-    <td colspan="2" class="caption title" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background-color: white; border-collapse: collapse !important; color: #555; font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; margin-bottom: 8px; padding: 12px 20px; text-align: left; vertical-align: top; word-wrap: break-word;">
-      Resources
-    </td>
-  </tr>
-  <#foreach resource in notification.additionalContext.resources>
-  <tr style="padding: 0; text-align: left; vertical-align: top;">
-    <td class="item" colspan="2" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background-color: white; border-bottom: 1px dotted #ddd; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 8px 32px; text-align: left; vertical-align: top; word-wrap: break-word;">
-      <div style="margin: 4px 0;">
-        <a href="${notification.additionalContext.spinnakerLink}${resource.resourceId}" target="_blank"
-           style="Margin: 0; color: #2199e8; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
-          ${resource.resourceId}
-          <#if resource.resourceId != resource.name>
-            - (${resource.name})
-          </#if>
-        </a>
-          <#if resource.lastSeenInfo??>
-            . Last seen in ${resource.lastSeenInfo.usedByResourceIdentifier} on ${resource.lastSeenInfo.timeSeen?number_to_date?string("EEE, d MMM yyyy")}
-          </#if>
-        . Opt this resource out of deletion <a href="${notification.additionalContext.optOutLink}/${resource.namespace}/${resource.resourceId}/optOut" style="Margin: 0; color: #2199e8; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> here </a>
-        or view detailed resource information <a href="${notification.additionalContext.optOutLink}/${resource.namespace}/${resource.resourceId}" style="Margin: 0; color: #2199e8; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> here</a>.
-        Cleanup scheduled for <em>${resource.projectedDeletionStamp?number_to_date?string("EEE, d MMM yyyy")}</em>
-        &nbsp;&nbsp;
-      </div>
-    </td>
-  </tr>
-  </#foreach>
-  <tr style="padding: 0; text-align: left; vertical-align: top;">
-    <td colspan="2" class="footer" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background-color: #F2f2f2; border-collapse: collapse !important; color: #3A5469; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 30px; text-align: left; vertical-align: top; word-wrap: break-word;">
-      For questions, reach out to #spinnaker in Slack.<br>
+  <tr>
+    <td bgcolor="#ffffff" style="border-top: 3px solid #737373; padding: 32px 16px 96px 16px; font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #737373;" align="center">
+      For questions, reach out to #spinnaker in Slack.
     </td>
   </tr>
 </table>

diff --git a/echo-notifications/src/main/resources/templates/swabbie/subject.ftl b/echo-notifications/src/main/resources/templates/swabbie/subject.ftl
@@ -1,4 +1,4 @@
-[Cleanup Notification] ${notification.additionalContext.resourceType}s scheduled for deletion for ${notification.additionalContext.resourceOwner}
+[Cleanup Notification] ${notification.additionalContext.resources?size} ${notification.additionalContext.resourceType}s scheduled for deletion for ${notification.additionalContext.resourceOwner}
 <#if notification.additionalContext.configuration.account.name != "" && notification.additionalContext.configuration.account.name != "none">
   in ${notification.additionalContext.configuration.account.name?upper_case}
 </#if>