mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Explore: Trace view now shows trace start time in selected timezone (#39054)
This commit is contained in:
@@ -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 = (
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user