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

…39054) (#39093)

(cherry picked from commit b89f8fd)

Co-authored-by: Connor Lindsey <cblindsey3@gmail.com>

packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx

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

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

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