1. format the date: startTime, endTime

2. format the log data, change \n\t to </br>
apache · Jun 5, 2017 · e384f1c · e384f1c
1 parent 2dc1884
commit e384f1c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/src/main/resources/static/trace/span.html b/src/main/resources/static/trace/span.html
@@ -7,7 +7,7 @@
                     class="sr-only">Close</span></button>
             <h4 class="modal-title">Span Info</h4>
             <small class="font-bold">OperationName: {{:operationName}})</small><br/>
-            <small class="font-bold">{{:startTime}} - {{:endTime}}</small>
+            <small class="font-bold">{{dateFormat:startTime}} - {{dateFormat:endTime}}</small>
         </div>
         <div class="modal-body" style="padding: 0">
             <div class="tabs-container">
@@ -36,9 +36,9 @@ <h4 class="modal-title">Span Info</h4>
                         {{for logs}}
                         <div id="logData{{: #index+1}}" class="tab-pane">
                             <div class="panel-body">
-                                <strong>time</strong><p>{{:time}}</p>
+                                <strong>time</strong><p>{{dateFormat:time}}</p>
                                 {{props fields}}
-                                    <strong>{{>key}}</strong><p>{{>prop}}</p>
+                                    <strong>{{>key}}</strong><p>{{tabCharacter:prop}}</p>
                                 {{/props}}
                             </div>
                         </div>

diff --git a/src/main/resources/static/trace/span.js b/src/main/resources/static/trace/span.js
@@ -5,11 +5,26 @@
 function showSpanModal(spanSegId) {
     $.getJSON("/spanDataLoad?spanSegId=" + spanSegId, function (data) {
         var spanModalTemplate = $.templates("#spanModalTemplate");
-
-        data.startTime = moment(data.startTime).format("YYYY/MM/DD HH:mm:ss SSS");
-        data.endTime = moment(data.endTime).format("YYYY/MM/DD HH:mm:ss SSS");
-
         spanModalTemplate.link("#spanModalDiv", data);
         $("#spanModalDiv").modal("toggle");
     });
+}
+
+$.views.converters({
+    dateFormat: function (val) {
+        return moment(val).format("YYYY/MM/DD HH:mm:ss SSS");
+    },
+
+    tabCharacter: function (val) {
+        console.log(val);
+        return replaceAll(val);
+    }
+});
+
+function replaceAll(str) {
+    if (str != null){
+        str = str.replace(/\\n\\t/ig, "<br />");
+        str = str.replace(/\\n/ig, "<br />");
+    }
+    return str;
 }