Pretty history details.

app/static/custom/css/custom.css

@@ -14,3 +14,21 @@ table td {
 .btn {
     padding: 5px 4px !important;
 }
+
+/* Pretty JSON */
+.json-pre {
+   background-color: ghostwhite;
+   border: 1px solid silver;
+   padding: 10px 20px;
+   margin: 20px;
+}
+.json-key {
+   color: brown;
+}
+.json-value {
+   color: navy;
+}
+.json-string {
+   color: olive;
+}
+

app/static/custom/js/custom.js

@@ -26,7 +26,6 @@ function applyChanges(data, url, showResult, refreshPage) {
             modal.modal('show');
         }
     });
-
 }
 
 function getTableData(table) {
@@ -151,3 +150,29 @@ function getdnssec(url){
         modal.modal('show');
     });
 }
+
+// pretty JSON
+json_library = {
+    replacer: function(match, pIndent, pKey, pVal, pEnd) {
+        var key = '<span class=json-key>';
+        var val = '<span class=json-value>';
+        var str = '<span class=json-string>';
+        var r = pIndent || '';
+        if (pKey){
+            r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
+        }
+        if (pVal){
+            r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
+        }
+        return r + (pEnd || '');
+    },
+    prettyPrint: function(obj) {
+        obj = obj.replace(/u'/g, "\'").replace(/'/g, "\"").replace(/(False|None)/g, "\"$1\"");
+        var jsonData = JSON.parse(obj);
+        var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
+            return JSON.stringify(jsonData, null, 3)
+            .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
+            .replace(/</g, '&lt;').replace(/>/g, '&gt;')
+            .replace(jsonLine, json_library.replacer);
+        }
+    };

app/templates/admin_history.html

@@ -42,8 +42,7 @@
                                 <td>{{ history.msg }}</td>
                                 <td>{{ history.created_on }}</td>
                                 <td width="6%">
-                                    <button type="button" class="btn btn-flat btn-primary history-info-button" value='{{ history.detail|replace("[]","None") }}'>
+                                    <button type="button" class="btn btn-flat btn-primary history-info-button" value='{{ history.detail }}'>Info&nbsp;<i class="fa fa-info"></i>
-                                        Info&nbsp;<i class="fa fa-info"></i>
                                     </button>
                                 </td>
                             </tr>
@@ -74,7 +73,7 @@
     $(document.body).on('click', '.history-info-button', function() {
         var modal = $("#modal_history_info");
         var info = $(this).val();
-        modal.find('.modal-body p').text(info);
+        $('#modal-code-content').html(json_library.prettyPrint(info));
         modal.modal('show');
     });
 </script>
@@ -97,8 +96,7 @@
             <div class="modal-footer">
                 <button type="button" class="btn btn-flat btn-default pull-left"
                     data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-flat btn-danger" onclick="applyChanges('', $SCRIPT_ROOT + '/admin/history');location.reload();">Clear
+                <button type="button" class="btn btn-flat btn-danger" onclick="applyChanges('', $SCRIPT_ROOT + '/admin/history');location.reload();">Clear History</button>
-                    History</button>
             </div>
         </div>
         <!-- /.modal-content -->
@@ -116,7 +114,7 @@
                 <h4 class="modal-title">History Details</h4>
             </div>
             <div class="modal-body">
-                <p></p>
+                <pre><code id="modal-code-content"></code></pre>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-flat btn-default pull-right"

app/templates/dashboard.html

@@ -235,7 +235,7 @@
     $(document.body).on('click', '.history-info-button', function() {
         var modal = $("#modal_history_info");
         var info = $(this).val();
-        modal.find('.modal-body p').text(info);
+        $('#modal-code-content').html(json_library.prettyPrint(info));
         modal.modal('show');
     });
     $(document.body).on("click", ".button_dnssec", function() {
@@ -256,7 +256,7 @@
                 <h4 class="modal-title">History Details</h4>
             </div>
             <div class="modal-body">
-                <p></p>
+                <pre><code id="modal-code-content"></code></pre>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-flat btn-default pull-right"