Explore: Trace view now shows trace start time in selected timezone (#39054)

This commit is contained in:
Connor Lindsey
2021-09-10 07:52:59 -06:00
committed by GitHub
parent ba9d5540b8
commit b89f8fdfcb
2 changed files with 11 additions and 4 deletions

View File

@@ -26,12 +26,13 @@ import TraceName from '../common/TraceName';
import { getTraceName } from '../model/trace-viewer'; import { getTraceName } from '../model/trace-viewer';
import { TNil } from '../types'; import { TNil } from '../types';
import { Trace } from '../types/trace'; import { Trace } from '../types/trace';
import { formatDatetime, formatDuration } from '../utils/date'; import { formatDuration } from '../utils/date';
import { getTraceLinks } from '../model/link-patterns'; import { getTraceLinks } from '../model/link-patterns';
import ExternalLinks from '../common/ExternalLinks'; import ExternalLinks from '../common/ExternalLinks';
import { createStyle } from '../Theme'; import { createStyle } from '../Theme';
import { uTxMuted } from '../uberUtilityStyles'; import { uTxMuted } from '../uberUtilityStyles';
import { dateTimeFormat, TimeZone } from '@grafana/data';
const getStyles = createStyle((theme: Theme) => { const getStyles = createStyle((theme: Theme) => {
return { return {
@@ -157,14 +158,16 @@ type TracePageHeaderEmbedProps = {
searchValue: string; searchValue: string;
onSearchValueChange: (value: string) => void; onSearchValueChange: (value: string) => void;
hideSearchButtons?: boolean; hideSearchButtons?: boolean;
timeZone: TimeZone;
}; };
export const HEADER_ITEMS = [ export const HEADER_ITEMS = [
{ {
key: 'timestamp', key: 'timestamp',
label: 'Trace Start', label: 'Trace Start',
renderer(trace: Trace, styles: ReturnType<typeof getStyles>) { renderer(trace: Trace, timeZone: TimeZone, styles: ReturnType<typeof getStyles>) {
const dateStr = formatDatetime(trace.startTime); // Convert date from micro to milli seconds
const dateStr = dateTimeFormat(trace.startTime / 1000, { timeZone });
const match = dateStr.match(/^(.+)(:\d\d\.\d+)$/); const match = dateStr.match(/^(.+)(:\d\d\.\d+)$/);
return match ? ( return match ? (
<span className={styles.TracePageHeaderOverviewItemValue}> <span className={styles.TracePageHeaderOverviewItemValue}>
@@ -219,6 +222,7 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
searchValue, searchValue,
onSearchValueChange, onSearchValueChange,
hideSearchButtons, hideSearchButtons,
timeZone,
} = props; } = props;
const styles = getStyles(useTheme()); const styles = getStyles(useTheme());
@@ -238,7 +242,7 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
!slimView && !slimView &&
HEADER_ITEMS.map((item) => { HEADER_ITEMS.map((item) => {
const { renderer, ...rest } = item; const { renderer, ...rest } = item;
return { ...rest, value: renderer(trace, styles) }; return { ...rest, value: renderer(trace, timeZone, styles) };
}); });
const title = ( const title = (

View File

@@ -15,6 +15,7 @@ import {
} from '@jaegertracing/jaeger-ui-components'; } from '@jaegertracing/jaeger-ui-components';
import { TraceToLogsData } from 'app/core/components/TraceToLogsSettings'; import { TraceToLogsData } from 'app/core/components/TraceToLogsSettings';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
import { getTimeZone } from 'app/features/profile/state/selectors';
import { StoreState } from 'app/types'; import { StoreState } from 'app/types';
import { ExploreId, SplitOpen } from 'app/types/explore'; import { ExploreId, SplitOpen } from 'app/types/explore';
import React, { useCallback, useMemo, useState } from 'react'; import React, { useCallback, useMemo, useState } from 'react';
@@ -67,6 +68,7 @@ export function TraceView(props: Props) {
const dataSourceName = useSelector((state: StoreState) => state.explore[props.exploreId]?.datasourceInstance?.name); const dataSourceName = useSelector((state: StoreState) => state.explore[props.exploreId]?.datasourceInstance?.name);
const traceToLogsOptions = (getDatasourceSrv().getInstanceSettings(dataSourceName)?.jsonData as TraceToLogsData) const traceToLogsOptions = (getDatasourceSrv().getInstanceSettings(dataSourceName)?.jsonData as TraceToLogsData)
?.tracesToLogs; ?.tracesToLogs;
const timeZone = useSelector((state: StoreState) => getTimeZone(state.user));
const theme = useTheme(); const theme = useTheme();
const traceTheme = useMemo( const traceTheme = useMemo(
@@ -130,6 +132,7 @@ export function TraceView(props: Props) {
searchValue={search} searchValue={search}
onSearchValueChange={setSearch} onSearchValueChange={setSearch}
hideSearchButtons={true} hideSearchButtons={true}
timeZone={timeZone}
/> />
<TraceTimelineViewer <TraceTimelineViewer
registerAccessors={noop} registerAccessors={noop}