Add json formatter.

src/Serilog.Ui.Web/wwwroot/css/main.css

@@ -376,4 +376,8 @@ a[data-toggle="collapse"] {
 
 .log-message {
     font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.modal-body.wrapped pre {
+    white-space: pre-wrap;
 }

src/Serilog.Ui.Web/wwwroot/js/main.js

@@ -1,7 +1,7 @@
 (function ($) {
     "use strict";
 
-    let fullHeight = function () {
+    const fullHeight = function () {
         $(".js-fullheight").css("height", $(window).height());
         $(window).resize(function () {
             $(".js-fullheight").css("height", $(window).height());
@@ -16,17 +16,17 @@
     $(".page-link").on("click", function (e) {
         e.preventDefault();
         $("#page").val($(this).attr("data-val"));
-        $("form").submit()
+        $("form").submit();
     });
 
     $("#logCount").on("change", function () {
         $("#page").val("1");
-        $("form").submit()
+        $("form").submit();
     });
 
     $("#logFilter").on("change", function () {
         $("#page").val("1");
-        $("form").submit()
+        $("form").submit();
     });
 
     $("#search").on("keypress", function (e) {
@@ -38,38 +38,24 @@
 
     $(".modal-trigger").on("click", function (e) {
         e.preventDefault();
+
+        const modal = $("#messageModal");
+        const modalBody = modal.find('.modal-body');
+        const dataType = $(this).attr("data-type");
         let message = $(this).find("span").text();
-        const isXml = $(this).attr("data-type") === "xml";
-        if (isXml)
+
+        if (dataType === "xml") {
             message = formatXml(message);
+            $(modalBody).removeClass('wrapped');
+        } else if (dataType === "json") {
+            const prop = JSON.parse(message);
+            message = JSON.stringify(prop, null, 2);
+            $(modalBody).removeClass('wrapped');
+        } else {
+            $(modalBody).addClass('wrapped');
+        }
 
-        const modal = $("#messageModal");
-        modal.find('.modal-body pre').text(message);
+        modalBody.find('pre').text(message);
         modal.modal("show");
     });
-
-    function formatXml(xml) {
-        const xmlDoc = new DOMParser().parseFromString(xml, 'application/xml');
-        const xsltDoc = new DOMParser().parseFromString([
-            // describes how we want to modify the XML - indent everything
-            '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
-            '  <xsl:strip-space elements="*"/>',
-            '  <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
-            '    <xsl:value-of select="normalize-space(.)"/>',
-            '  </xsl:template>',
-            '  <xsl:template match="node()|@*">',
-            '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
-            '  </xsl:template>',
-            '  <xsl:output indent="yes"/>',
-            '</xsl:stylesheet>',
-        ].join('\n'), 'application/xml');
-
-        const xsltProcessor = new XSLTProcessor();
-        xsltProcessor.importStylesheet(xsltDoc);
-
-        const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
-        const resultXml = new XMLSerializer().serializeToString(resultDoc);
-
-        return resultXml;
-    }
 })(jQuery);