From f87927c82e95ae87e90901bc2115b3a1b09ef4e0 Mon Sep 17 00:00:00 2001 From: Joey Tawadrous <90795735+joey-grafana@users.noreply.github.com> Date: Tue, 14 Jun 2022 11:13:33 +0100 Subject: [PATCH] Traces: Add absolute time to span details (#50685) * Show absolute time * Add test --- .betterer.results | 2 +- .../TraceTimelineViewer/SpanDetail/index.test.js | 8 +++++++- .../src/TraceTimelineViewer/SpanDetail/index.tsx | 14 ++++++++++++-- .../src/TraceTimelineViewer/SpanDetailRow.tsx | 5 ++++- .../TraceTimelineViewer/VirtualizedTraceView.tsx | 5 ++++- .../src/TraceTimelineViewer/index.tsx | 3 ++- .../app/features/explore/TraceView/TraceView.tsx | 1 + 7 files changed, 31 insertions(+), 7 deletions(-) diff --git a/.betterer.results b/.betterer.results index d72ef859fbb..b0446b22725 100644 --- a/.betterer.results +++ b/.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": [ diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js index 05c548991f0..e13a3550f97 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js +++ b/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('', () => { let wrapper; @@ -139,6 +139,12 @@ describe('', () => { ).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 = ; expect(wrapper.containsMatchingElement(target)).toBe(true); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx index 65c9dbf6c71..c337bf45a7d 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx +++ b/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) { ); } + +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})`; +}; diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx index aedf2034c18..8bd0944a9e3 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx +++ b/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; @@ -119,6 +120,7 @@ export class UnthemedSpanDetailRow extends React.PureComponent | TNil; scrollToFirstVisibleSpan: () => void; registerAccessors: (accesors: Accessors) => void; @@ -478,6 +479,7 @@ export class UnthemedVirtualizedTraceView extends React.Component void; updateViewRangeTime: TUpdateViewRangeTimeFunction; viewRange: ViewRange; + timeZone: TimeZone; setSpanNameColumnWidth: (width: number) => void; collapseAll: (spans: TraceSpan[]) => void; diff --git a/public/app/features/explore/TraceView/TraceView.tsx b/public/app/features/explore/TraceView/TraceView.tsx index 199e3fd7670..360bb1f6de5 100644 --- a/public/app/features/explore/TraceView/TraceView.tsx +++ b/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}