Fix camelCase vs snake_case inconsistencies when accessing traces

ee/app/assets/javascripts/tracing/components/trace_utils.js

@@ -48,12 +48,12 @@ export function mapTraceToTreeRoot(trace) {
   if (!rootSpan) return undefined;
 
   const spanToNode = (span) => ({
-    startTimeMs: timestampToMs(span.timestamp) - timestampToMs(rootSpan.timestamp),
+    start_ms: timestampToMs(span.timestamp) - timestampToMs(rootSpan.timestamp),
     timestamp: span.timestamp,
-    spanId: span.span_id,
+    span_id: span.span_id,
     operation: span.operation,
     service: span.service_name,
-    durationMs: durationNanoToMs(span.duration_nano),
+    duration_ms: durationNanoToMs(span.duration_nano),
     children: [],
   });
 

ee/app/assets/javascripts/tracing/components/tracing_details_spans_chart.vue

@@ -70,10 +70,10 @@ export default {
       return this.expanded[index];
     },
     durationBarLayout(span) {
-      const computedWidth = Math.floor((100 * span.durationMs) / this.traceDurationMs);
+      const computedWidth = Math.floor((100 * span.duration_ms) / this.traceDurationMs);
       const width = clamp(computedWidth, 0.5, 100);
 
-      const computedMarginLeft = Math.floor((100 * span.startTimeMs) / this.traceDurationMs);
+      const computedMarginLeft = Math.floor((100 * span.start_ms) / this.traceDurationMs);
       const marginLeft = clamp(
         computedMarginLeft,
         0, // avoid negative margins. this can happen in case of skewed time between the root and child spans
@@ -101,13 +101,13 @@ export default {
       };
     },
     durationValue(span) {
-      return formatDurationMs(span.durationMs);
+      return formatDurationMs(span.duration_ms);
     },
     onSelect({ spanId }) {
       this.$emit('span-selected', { spanId });
     },
     isSpanSelected(span) {
-      return span.spanId === this.selectedSpanId;
+      return span.span_id === this.selectedSpanId;
     },
   },
 };
@@ -117,7 +117,7 @@ export default {
   <div class="span-tree">
     <div
       v-for="(span, index) in spans"
-      :key="span.spanId"
+      :key="span.span_id"
       :data-testid="`span-wrapper-${depth}-${index}`"
     >
       <div
@@ -127,7 +127,7 @@ export default {
           'gl-bg-blue-100': isSpanSelected(span),
           'gl-hover-bg-t-gray-a-08': !isSpanSelected(span),
         }"
-        @click="onSelect({ spanId: span.spanId })"
+        @click="onSelect({ spanId: span.span_id })"
       >
         <div
           data-testid="span-details"

ee/app/assets/javascripts/tracing/components/tracing_scatter_chart.vue

@@ -39,7 +39,7 @@ export default {
       const data = this.traces.map((t) => ({
         value: [t.timestamp, durationNanoToMs(t.duration_nano)],
         traceId: t.trace_id,
-        hasError: t.statusCode === 'STATUS_CODE_ERROR',
+        hasError: t.status_code === 'STATUS_CODE_ERROR',
       }));
 
       return [

ee/spec/frontend/tracing/components/trace_utils_spec.js

@@ -122,37 +122,37 @@ describe('trace_utils', () => {
       };
 
       expect(mapTraceToTreeRoot(trace)).toEqual({
-        durationMs: 100.12,
+        duration_ms: 100.12,
         operation: 'lets-go',
         service: 'tracegen',
-        spanId: 'SPAN-1',
-        startTimeMs: 0,
+        span_id: 'SPAN-1',
+        start_ms: 0,
         timestamp: '2023-08-07T15:03:32.199806Z',
         children: [
           {
-            durationMs: 100.055,
+            duration_ms: 100.055,
             operation: 'okey-dokey',
             service: 'tracegen',
-            spanId: 'SPAN-2',
-            startTimeMs: 0,
+            span_id: 'SPAN-2',
+            start_ms: 0,
             timestamp: '2023-08-07T15:03:32.199871Z',
             children: [
               {
                 children: [],
-                durationMs: 50.0275,
+                duration_ms: 50.0275,
                 operation: 'okey-dokey',
                 service: 'tracegen',
-                spanId: 'SPAN-3',
-                startTimeMs: 21000,
+                span_id: 'SPAN-3',
+                start_ms: 21000,
                 timestamp: '2023-08-07T15:03:53.199871Z',
               },
               {
                 children: [],
-                durationMs: 50.0275,
+                duration_ms: 50.0275,
                 operation: 'okey-dokey',
                 service: 'fake-service-2',
-                spanId: 'SPAN-4',
-                startTimeMs: 21000,
+                span_id: 'SPAN-4',
+                start_ms: 21000,
                 timestamp: '2023-08-07T15:03:53.199871Z',
               },
             ],

ee/spec/frontend/tracing/components/tracing_details_drawer_spec.js

@@ -109,7 +109,7 @@ describe('TracingDetailsDrawer', () => {
 
   describe('with no span', () => {
     beforeEach(() => {
-      wrapper = shallowMountExtended(TracingDetailsDrawer, {});
+      mountComponent({ span: null });
     });
 
     it('displays an empty title', () => {

ee/spec/frontend/tracing/components/tracing_details_span_chart_spec.js

@@ -8,16 +8,16 @@ describe('TracingDetailsSpansChart', () => {
     {
       operation: 'operation-1',
       service: 'service-1',
-      spanId: 'span1',
-      startTimeMs: 100,
-      durationMs: 150,
+      span_id: 'span1',
+      start_ms: 100,
+      duration_ms: 150,
       children: [
         {
           operation: 'operation-3',
           service: 'service-3',
-          spanId: 'span3',
-          startTimeMs: 0,
-          durationMs: 100,
+          span_id: 'span3',
+          start_ms: 0,
+          duration_ms: 100,
           children: [],
         },
       ],
@@ -25,9 +25,9 @@ describe('TracingDetailsSpansChart', () => {
     {
       operation: 'operation-2',
       service: 'service-2',
-      spanId: 'span2',
-      startTimeMs: 100,
-      durationMs: 200,
+      span_id: 'span2',
+      start_ms: 100,
+      duration_ms: 200,
       children: [],
     },
   ];
@@ -173,10 +173,10 @@ describe('TracingDetailsSpansChart', () => {
     });
 
     it.each([
-      [{ startTimeMs: 0, durationMs: 0.4 }, '0.5%', '0%'],
-      [{ startTimeMs: 0, durationMs: 110 }, '100%', '0%'],
-      [{ startTimeMs: 80, durationMs: 40 }, '40%', '60%'],
-      [{ startTimeMs: -10, durationMs: 40 }, '40%', '0%'],
+      [{ start_ms: 0, duration_ms: 0.4 }, '0.5%', '0%'],
+      [{ start_ms: 0, duration_ms: 110 }, '100%', '0%'],
+      [{ start_ms: 80, duration_ms: 40 }, '40%', '60%'],
+      [{ start_ms: -10, duration_ms: 40 }, '40%', '0%'],
     ])('caps the layout width and margin', (spanAttrs, expectedWidth, expectedMargin) => {
       wrapper = shallowMountExtended(TracingDetailsSpansChart, {
         propsData: {

ee/spec/frontend/tracing/components/tracing_scatter_chart_spec.js

@@ -10,13 +10,13 @@ describe('TracingScatterChart', () => {
       timestamp: 1620000000,
       duration_nano: 1000000000,
       trace_id: '123',
-      statusCode: 'STATUS_CODE_ERROR',
+      status_code: 'STATUS_CODE_ERROR',
     },
     {
       timestamp: 1621000000,
       duration_nano: 2000000000,
       trace_id: '456',
-      statusCode: 'STATUS_CODE_SUCCESS',
+      status_code: 'STATUS_CODE_SUCCESS',
     },
   ];