fix(swabbie): Update swabbie email template (#671)

* fix(swabbie): Update swabbie email template - Updated template to reflect new model * - adding s
spinnaker · Oct 12, 2019 · 4349d8b · 4349d8b
1 parent 22a5b3b
commit 4349d8b
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 153 deletions.
diff --git a/echo-notifications/src/main/resources/templates/swabbie/body.ftl b/echo-notifications/src/main/resources/templates/swabbie/body.ftl
@@ -1,92 +1,87 @@
 <!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;
+  <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;
     }
-    .loop__data {
-      margin: 8px;
-      width: auto !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;
+      }
     }
-    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>
+    /* ANDROID CENTER FIX */
+    div[style*="margin: 16px 0;"] { margin: 0 !important; }
+  </style>
 
 </head>
 <body style="margin: 0 !important; padding: 0 !important;">
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
   <tr>
-  <!-- HEADER -->
+    <!-- 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>
@@ -106,84 +101,97 @@
   </tr>
 
   <tr>
-  <!-- MIDDLE -->
+    <!-- MIDDLE -->
     <td class="middle" bgcolor="#d7e8ed" align="center" style="padding: 32px 16px;">
 
-    <!-- CONTENT -->
+      <!-- CONTENT -->
       <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 1000px;">
-        <!-- To map the resourceType to web ui we need an additional 's' -->
-      <#assign rawResourceType = notification.additionalContext.configuration.resourceType+"s">
-      <!-- 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>
+        <#assign notificationContext = notification.additionalContext>
+        <!-- LOOP -->
+        <#foreach resourceData in notificationContext.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;">
+              ${resourceData?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%">
+                    ${notificationContext.resourceType}
+                  </td>
 
-              <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
-                <#assign resourceWebUrl = notification.additionalContext.spinnakerLink+resource.resourceId+"&tab="+rawResourceType>
-                <a href="${resourceWebUrl}">${resource.resourceId}</a>
-              </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.createTs??>
-            <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%">
-                created on
-              </td>
-              <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
-                ${resource.createTs?number_to_date?string("EEE, d MMM yyyy")}
-              </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: 145px;">
-            <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 of Delete</a>
-          </td>
-        </tr>
+                  <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                    <a href="${resourceData.resourceUrl}">${resourceData.resource.resourceId}</a>
+                  </td>
+                </tr>
+                <#if resourceData.resource.resourceId != resourceData.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;">
+                      ${resourceData.resource.name}
+                    </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%">
+                    account
+                  </td>
+                  <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                    ${resourceData.account}
+                  </td>
+                </tr>
+                <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%">
+                    region
+                  </td>
+                  <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                    ${resourceData.location}
+                  </td>
+                </tr>
+                <#if resourceData.resource.createTs??>
+                  <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%">
+                      created on
+                    </td>
+                    <td align="left" style="padding: 4px 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                      ${resourceData.resource.createTs?number_to_date?string("EEE, d MMM yyyy")}
+                    </td>
+                  </tr>
+                </#if>
+                <#if resourceData.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;">
+                      ${resourceData.resource.lastSeenInfo.timeSeen?number_to_date?string("EEE, d MMM yyyy")} - <span style="color: #999999;">${resourceData.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;">
+                    ${resourceData.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: 145px;">
+              <a href="${resourceData.optOutUrl}" 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 of Delete</a>
+            </td>
+          </tr>
         </#foreach>
 
       </table>
     </td>
   </tr>
   <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.
+      For questions, reach out to <a href="${notificationContext.slackChannelLink}" target="_blank" >#spinnaker</a> 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,7 +1 @@
-[Cleanup] ${notification.additionalContext.application} ${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>
-<#if notification.additionalContext.configuration.location != "" && notification.additionalContext.configuration.location != "none">
- | ${notification.additionalContext.configuration.location?upper_case}
-</#if>
+[Cleanup] ${notification.additionalContext.resourceType}s scheduled for deletion