Traces: Add absolute time to span details (#50685)

* Show absolute time

* Add test

.betterer.results

@@ -65,7 +65,7 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js:3813002651": [
       [14, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js:2816619357": [
+    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js:700147304": [
       [16, 19, 13, "RegExp match", "2409514259"]
     ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.test.js:2623922632": [

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js

@@ -26,7 +26,7 @@ import AccordianKeyValues from './AccordianKeyValues';
 import AccordianLogs from './AccordianLogs';
 import DetailState from './DetailState';
 
-import SpanDetail from './index';
+import SpanDetail, { getAbsoluteTime } from './index';
 
 describe('<SpanDetail>', () => {
   let wrapper;
@@ -139,6 +139,12 @@ describe('<SpanDetail>', () => {
     ).toEqual(words);
   });
 
+  it('start time shows the absolute time', () => {
+    const startTime = wrapper.find(LabeledList).prop('items')[2].value;
+    const absoluteTime = getAbsoluteTime(span.startTime);
+    expect(startTime).toContain(absoluteTime);
+  });
+
   it('renders the span tags', () => {
     const target = <AccordianKeyValues data={span.tags} label="Tags" isOpen={detailState.isTagsOpen} />;
     expect(wrapper.containsMatchingElement(target)).toBe(true);

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx

@@ -17,7 +17,7 @@ import cx from 'classnames';
 import React from 'react';
 import IoLink from 'react-icons/lib/io/link';
 
-import { GrafanaTheme2, LinkModel } from '@grafana/data';
+import { dateTimeFormat, GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
 import { DataLinkButton, TextArea, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
@@ -110,6 +110,7 @@ type SpanDetailProps = {
   logsToggle: (spanID: string) => void;
   processToggle: (spanID: string) => void;
   span: TraceSpan;
+  timeZone: TimeZone;
   tagsToggle: (spanID: string) => void;
   traceStartTime: number;
   warningsToggle: (spanID: string) => void;
@@ -153,6 +154,7 @@ export default function SpanDetail(props: SpanDetailProps) {
     process,
     duration,
     relativeStartTime,
+    startTime,
     traceID,
     spanID,
     logs,
@@ -161,6 +163,7 @@ export default function SpanDetail(props: SpanDetailProps) {
     references,
     stackTraces,
   } = span;
+  const { timeZone } = props;
   const overviewItems = [
     {
       key: 'svc',
@@ -175,7 +178,7 @@ export default function SpanDetail(props: SpanDetailProps) {
     {
       key: 'start',
       label: 'Start Time:',
-      value: formatDuration(relativeStartTime),
+      value: formatDuration(relativeStartTime) + getAbsoluteTime(startTime, timeZone),
     },
     ...(span.childSpanCount > 0
       ? [
@@ -312,3 +315,10 @@ export default function SpanDetail(props: SpanDetailProps) {
     </div>
   );
 }
+
+export const getAbsoluteTime = (startTime: number, timeZone: TimeZone) => {
+  const dateStr = dateTimeFormat(startTime / 1000, { timeZone, defaultWithMS: true });
+  const match = dateStr.split(' ');
+  const absoluteTime = match[1] ? match[1] : dateStr;
+  return ` (${absoluteTime})`;
+};

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx

@@ -15,7 +15,7 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme2, LinkModel } from '@grafana/data';
+import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
 import { stylesFactory, withTheme2 } from '@grafana/ui';
 
 import { autoColor } from '../Theme';
@@ -84,6 +84,7 @@ type SpanDetailRowProps = {
   warningsToggle: (spanID: string) => void;
   stackTracesToggle: (spanID: string) => void;
   span: TraceSpan;
+  timeZone: TimeZone;
   tagsToggle: (spanID: string) => void;
   traceStartTime: number;
   hoverIndentGuideIds: Set<string>;
@@ -119,6 +120,7 @@ export class UnthemedSpanDetailRow extends React.PureComponent<SpanDetailRowProp
       warningsToggle,
       stackTracesToggle,
       span,
+      timeZone,
       tagsToggle,
       traceStartTime,
       hoverIndentGuideIds,
@@ -165,6 +167,7 @@ export class UnthemedSpanDetailRow extends React.PureComponent<SpanDetailRowProp
               warningsToggle={warningsToggle}
               stackTracesToggle={stackTracesToggle}
               span={span}
+              timeZone={timeZone}
               tagsToggle={tagsToggle}
               traceStartTime={traceStartTime}
               createSpanLink={createSpanLink}

packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx

@@ -18,7 +18,7 @@ import memoizeOne from 'memoize-one';
 import * as React from 'react';
 import { createRef, RefObject } from 'react';
 
-import { GrafanaTheme2, LinkModel } from '@grafana/data';
+import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
 import { stylesFactory, withTheme2, ToolbarButton } from '@grafana/ui';
 
 import { Accessors } from '../ScrollManager';
@@ -84,6 +84,7 @@ export enum TopOfViewRefType {
 
 type TVirtualizedTraceViewOwnProps = {
   currentViewRangeTime: [number, number];
+  timeZone: TimeZone;
   findMatchesIDs: Set<string> | TNil;
   scrollToFirstVisibleSpan: () => void;
   registerAccessors: (accesors: Accessors) => void;
@@ -478,6 +479,7 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
       detailToggle,
       spanNameColumnWidth,
       trace,
+      timeZone,
       hoverIndentGuideIds,
       addHoverIndentGuideId,
       removeHoverIndentGuideId,
@@ -510,6 +512,7 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
           warningsToggle={detailWarningsToggle}
           stackTracesToggle={detailStackTracesToggle}
           span={span}
+          timeZone={timeZone}
           tagsToggle={detailTagsToggle}
           traceStartTime={trace.startTime}
           hoverIndentGuideIds={hoverIndentGuideIds}

packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx

@@ -15,7 +15,7 @@
 import { css } from '@emotion/css';
 import React, { RefObject } from 'react';
 
-import { GrafanaTheme2, LinkModel } from '@grafana/data';
+import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
 import { stylesFactory, withTheme2 } from '@grafana/ui';
 
 import { Accessors } from '../ScrollManager';
@@ -78,6 +78,7 @@ type TProps = TExtractUiFindFromStateReturn & {
   updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void;
   updateViewRangeTime: TUpdateViewRangeTimeFunction;
   viewRange: ViewRange;
+  timeZone: TimeZone;
 
   setSpanNameColumnWidth: (width: number) => void;
   collapseAll: (spans: TraceSpan[]) => void;

public/app/features/explore/TraceView/TraceView.tsx

@@ -159,6 +159,7 @@ export function TraceView(props: Props) {
             updateNextViewRangeTime={updateNextViewRangeTime}
             updateViewRangeTime={updateViewRangeTime}
             viewRange={viewRange}
+            timeZone={timeZone}
             setSpanNameColumnWidth={setSpanNameColumnWidth}
             collapseAll={collapseAll}
             collapseOne={collapseOne}