adapt to trace changes in snapshot

spring-boot-admin-server-ui/src/main/frontend/views/instances/trace/index.vue

@@ -86,59 +86,44 @@
       : (val, key) => oldFilter(val, key) && addedFilter(val, key);
 
   class Trace {
-    constructor({timestamp, info}) {
-      this.info = info;
+    constructor({timestamp, ...trace}) {
+      Object.assign(this, trace);
       this.timestamp = moment(timestamp);
     }
 
     get key() {
-      return `${this.timestamp}-${this.method}-${this.path}`;
-    }
-
-    get method() {
-      return this.info.method;
-    }
-
-    get path() {
-      return this.info.path;
-    }
-
-    get status() {
-      return this.info.headers.response.status;
-    }
-
-    get timeTaken() {
-      const timeTaken = this.info.timeTaken;
-      if (timeTaken && /^\d+$/.test(timeTaken)) {
-        return parseInt(timeTaken);
-      }
+      return `${this.timestamp}-${this.request.method}-${this.request.uri}`;
     }
 
     get contentLength() {
-      const contentLength = this.info.headers.response['Content-Length'];
+      const contentLength = this.response.headers['Content-Length'] && this.response.headers['Content-Length'][0];
       if (contentLength && /^\d+$/.test(contentLength)) {
         return parseInt(contentLength);
       }
     }
 
     get contentType() {
-      const contentType = this.info.headers.response['Content-Type'];
+      const contentType = this.response.headers['Content-Type'] && this.response.headers['Content-Type'][0];
       if (contentType) {
         const idx = contentType.indexOf(';');
         return idx >= 0 ? contentType.substring(0, idx) : contentType;
       }
     }
 
+    compareTo(other) {
+      return this.timestamp - other.timestamp;
+    }
+
     isSuccess() {
-      return this.status <= 299
+      return this.response.status <= 399
     }
 
     isClientError() {
-      return this.status >= 400 && this.status <= 499
+      return this.response.status >= 400 && this.response.status <= 499
     }
 
     isServerError() {
-      return this.status >= 500 && this.status <= 599
+      return this.response.status >= 500 && this.response.status <= 599
     }
   }
 
@@ -187,9 +172,10 @@
     methods: {
       async fetchTrace() {
         const response = await this.instance.fetchTrace();
-        const traces = response.data.traces.filter(
-          trace => moment(trace.timestamp).isAfter(this.lastTimestamp)
+        const traces = response.data.traces.map(trace => new Trace(trace)).filter(
+          trace => trace.timestamp.isAfter(this.lastTimestamp)
         );
+        traces.sort((a, b) => -1 * a.compareTo(b));
         if (traces.length > 0) {
           this.lastTimestamp = traces[0].timestamp;
         }
@@ -202,8 +188,7 @@
           return Observable.timer(0, 5000)
             .concatMap(vm.fetchTrace)
             .subscribe({
-              next: rawTraces => {
-                const traces = rawTraces.map(trace => new Trace(trace));
+              next: traces => {
                 vm.traces = vm.traces ? traces.concat(vm.traces) : traces;
               },
               errors: err => {
@@ -215,11 +200,11 @@
       getFilterFn() {
         let filterFn = null;
         if (this.actuatorPath !== null && this.excludeActuator) {
-          filterFn = addToFilter(filterFn, (trace) => trace.path.indexOf(this.actuatorPath) !== 0);
+          filterFn = addToFilter(filterFn, (trace) => trace.request.uri.indexOf(this.actuatorPath) < 0);
         }
         if (this.filter) {
           const normalizedFilter = this.filter.toLowerCase();
-          filterFn = addToFilter(filterFn, (trace) => trace.path.toLowerCase().indexOf(normalizedFilter) >= 0);
+          filterFn = addToFilter(filterFn, (trace) => trace.request.uri.toLowerCase().indexOf(normalizedFilter) >= 0);
         }
         if (!this.showSuccess) {
           filterFn = addToFilter(filterFn, (trace) => !trace.isSuccess());

spring-boot-admin-server-ui/src/main/frontend/views/instances/trace/traces-chart.vue

@@ -54,7 +54,7 @@
   //see https://github.com/d3/d3/issues/2733#issuecomment-190743489
   import d3 from '@/utils/d3';
   import {event as d3Event} from 'd3-selection';
-  import moment from 'moment-shortformat';
+  import moment from 'moment';
 
   const interval = 1000;
   export default {
@@ -71,12 +71,12 @@
         const chartData = [];
         const now = moment.now().valueOf();
         let idx = this.traces.length - 1;
-        const oldest = this.traces[this.traces.length - 1].timestamp;
+        const oldest = this.traces[this.traces.length - 1].timestamp.valueOf();
 
         for (let time = Math.floor(oldest.valueOf() / interval) * interval; time < now; time += interval) {
           const bucket = {
-            timeStart: new Date(time),
-            timeEnd: new Date(time + interval),
+            timeStart: time,
+            timeEnd: time + interval,
             totalCount: 0,
             totalSuccess: 0,
             totalClientErrors: 0,
@@ -90,11 +90,9 @@
             bucket.totalCount++;
             if (trace.isSuccess()) {
               bucket.totalSuccess++;
-            }
-            if (trace.isClientError()) {
+            } else if (trace.isClientError()) {
               bucket.totalClientErrors++;
-            }
-            if (trace.isServerError()) {
+            } else if (trace.isServerError()) {
               bucket.totalServerErrors++;
             }
             if (trace.timeTaken) {
@@ -117,8 +115,6 @@
           bucket => bucket.timeStart.valueOf() >= selection[0] && bucket.timeStart.valueOf() < selection[1]
         ).reduce(
           (current, next) => ({
-            timeStart: new Date(Math.min(current.timeStart.valueOf(), next.timeStart.valueOf())),
-            timeEnd: new Date(Math.max(current.timeEnd.valueOf(), next.timeEnd.valueOf())),
             totalCount: current.totalCount + next.totalCount,
             totalSuccess: current.totalSuccess + next.totalSuccess,
             totalClientErrors: current.totalClientErrors + next.totalClientErrors,
@@ -127,8 +123,6 @@
             maxTime: Math.max(current.maxTime, next.maxTime)
           }),
           {
-            timeStart: new Date(selection[0]),
-            timeEnd: new Date(selection[1]),
             totalCount: 0,
             totalSuccess: 0,
             totalClientErrors: 0,
@@ -175,7 +169,7 @@
         //draw axis
         vm.xAxis.call(d3.axisBottom(x)
           .ticks(10)
-          .tickFormat(d => `-${moment(d).short(true)}`)
+          .tickFormat(d => moment(d).format("HH:mm:ss"))
         );
 
         vm.yAxis.call(d3.axisRight(y)

spring-boot-admin-server-ui/src/main/frontend/views/instances/trace/traces-list.vue

@@ -33,10 +33,10 @@
                 @click="showDetails[trace.key]  ?  $delete(showDetails, trace.key) : $set(showDetails, trace.key, true)"
                 :key="trace.key">
                 <td v-text="trace.timestamp.format('L HH:mm:ss.SSS')"></td>
-                <td v-text="trace.method"></td>
-                <td v-text="trace.path"></td>
+                <td v-text="trace.request.method"></td>
+                <td v-text="trace.request.uri"></td>
                 <td>
-                    <span v-text="trace.status" class="tag"
+                    <span v-text="trace.response.status" class="tag"
                           :class="{ 'is-success' : trace.isSuccess(), 'is-warning' : trace.isClientError(), 'is-danger' : trace.isServerError() }"></span>
                 </td>
                 <td v-text="trace.contentType"></td>
@@ -45,12 +45,12 @@
             </tr>
             <tr class="trace__detail" :key="`${trace.key}-detail`" v-if="showDetails[trace.key]">
                 <td colspan="7">
-                    <pre v-text="toJson(trace.info)"></pre>
+                    <pre v-text="toJson(trace)"></pre>
                 </td>
             </tr>
         </template>
         <tr v-if="traces.length === 0">
-            <td class="is-muted" colspan="5">No traces found.</td>
+            <td class="is-muted" colspan="7">No traces found.</td>
         </tr>
     </table>
 </template>