Improve HTML email display in the "Ping Details" dialog

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 - Rename VictorOps -> Splunk On-Call
 - Implement email body decoding in the "Ping Details" dialog
 - Add a "Subject" field in the "Ping Details" dialog
+- Improve HTML email display in the "Ping Details" dialog
 
 ## Bug Fixes
 - Fix downtime summary to handle months when the check didn't exist yet (#472)

static/css/ping_details.css

@@ -23,4 +23,12 @@
 #ping-details-body pre {
     padding: 16px;
     margin: 0;
+    max-height: 500px;
+}
+
+#email-body-html-iframe {
+    border: 0;
+    width: 100%;
+    height: 500px;
+    background: #f5f5f5;
 }

static/js/details.js

@@ -132,6 +132,16 @@ $(function () {
 
         $.get(this.dataset.url, function(data) {
                 $("#ping-details-body").html(data);
+
+                var htmlPre = $("#email-body-html pre");
+                if (htmlPre.length) {
+                    var opts = {USE_PROFILES: {html: true}};
+                    var clean = DOMPurify.sanitize(htmlPre.text(), opts);
+                    var blob = new Blob([clean], {type: "text/html"});
+
+                    htmlPre.remove();
+                    document.getElementById("email-body-html-iframe").src = URL.createObjectURL(blob);
+                }
             }
         );
 

static/js/log.js

@@ -5,6 +5,16 @@ $(function () {
 
         $.get(this.dataset.url, function(data) {
             $("#ping-details-body").html(data);
+
+            var htmlPre = $("#email-body-html pre");
+            if (htmlPre.length) {
+                var opts = {USE_PROFILES: {html: true}};
+                var clean = DOMPurify.sanitize(htmlPre.text(), opts);
+                var blob = new Blob([clean], {type: "text/html"});
+
+                htmlPre.remove();
+                document.getElementById("email-body-html-iframe").src = URL.createObjectURL(blob);
+            }
         });
 
         return false;
@@ -16,8 +26,8 @@ $(function () {
             format == "local" ? dt.local() : dt.tz(format);
 
             $(".date", row).text(dt.format("MMM D"));
-            $(".time", row).text(dt.format("HH:mm"));                
-        })        
+            $(".time", row).text(dt.format("HH:mm"));
+        })
     }
 
     $("#format-switcher").click(function(ev) {

templates/front/details.html

@@ -330,6 +330,7 @@
 <script src="{% static 'js/snippet-copy.js' %}"></script>
 <script src="{% static 'js/moment.min.js' %}"></script>
 <script src="{% static 'js/moment-timezone-with-data-10-year-range.min.js' %}"></script>
+<script src="{% static 'js/purify.min.js' %}"></script>
 <script src="{% static 'js/update-timeout-modal.js' %}"></script>
 <script src="{% static 'js/adaptive-setinterval.js' %}"></script>
 <script src="{% static 'js/details.js' %}"></script>

templates/front/log.html

@@ -148,6 +148,7 @@
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/moment.min.js' %}"></script>
 <script src="{% static 'js/moment-timezone-with-data-10-year-range.min.js' %}"></script>
+<script src="{% static 'js/purify.min.js' %}"></script>
 <script src="{% static 'js/log.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/front/ping_details.html

@@ -106,6 +106,7 @@
             {% if html %}
             <div id="email-body-html" class="tab-pane">
                 <pre>{{ html }}</pre>
+                <iframe id="email-body-html-iframe" sandbox></iframe>
             </div>
             {% endif %}
         </div>