[ENHANCEMENT] Tempo Explorer: retain selected timezone when clicking …

tempo/src/explore/TempoExplorer.tsx

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { Box, Stack } from '@mui/material';
-import { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';
+import { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay, useTimeZone } from '@perses-dev/components';
 import { Panel } from '@perses-dev/dashboards';
 import { useExplorerManagerContext } from '@perses-dev/explore';
 import { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';
@@ -32,6 +32,7 @@ interface SearchResultsPanelProps {
 }
 
 function SearchResultsPanel({ queries }: SearchResultsPanelProps): ReactElement {
+  const { timeZone } = useTimeZone();
   const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');
 
   // no query executed, show empty panel
@@ -75,7 +76,7 @@ function SearchResultsPanel({ queries }: SearchResultsPanelProps): ReactElement
               plugin: {
                 kind: 'ScatterChart',
                 spec: {
-                  link: linkToTrace,
+                  link: linkToTrace(timeZone),
                 },
               },
             },
@@ -96,7 +97,7 @@ function SearchResultsPanel({ queries }: SearchResultsPanelProps): ReactElement
               kind: 'TraceTable',
               spec: {
                 links: {
-                  trace: linkToTrace,
+                  trace: linkToTrace(timeZone),
                 },
               },
             },
@@ -114,6 +115,7 @@ interface TracingGanttChartPanelProps {
 
 function TracingGanttChartPanel(props: TracingGanttChartPanelProps): ReactElement {
   const { queries, selectedSpanId } = props;
+  const { timeZone } = useTimeZone();
   const firstQuery = (queries[0]?.spec.plugin.spec as TempoTraceQuerySpec | undefined)?.query;
 
   return (
@@ -128,8 +130,8 @@ function TracingGanttChartPanel(props: TracingGanttChartPanelProps): ReactElemen
             kind: 'TracingGanttChart',
             spec: {
               links: {
-                trace: linkToTrace,
-                span: linkToSpan,
+                trace: linkToTrace(timeZone),
+                span: linkToSpan(timeZone),
               },
               selectedSpanId,
             },

tempo/src/explore/links.test.ts

@@ -0,0 +1,59 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { linkToTrace, linkToSpan } from './links';
+
+function parseLink(link: string): { explorer: string | null; data: unknown; tz: string | null } {
+  const params = new URLSearchParams(link.split('?')[1]);
+  return {
+    explorer: params.get('explorer'),
+    data: JSON.parse(params.get('data')!),
+    tz: params.get('tz'),
+  };
+}
+
+describe('linkToTrace', () => {
+  it('builds explore link with template variables', () => {
+    const link = linkToTrace('America/New_York');
+    expect(parseLink(link)).toEqual({
+      explorer: 'Tempo-TempoExplorer',
+      data: {
+        queries: [
+          {
+            kind: 'TraceQuery',
+            spec: {
+              plugin: {
+                kind: 'TempoTraceQuery',
+                spec: {
+                  query: '${traceId}',
+                  datasource: { kind: 'TempoDatasource', name: '${datasourceName}' },
+                },
+              },
+            },
+          },
+        ],
+      },
+      tz: 'America/New_York',
+    });
+    expect(link).toContain('${traceId}');
+    expect(link).toContain('${datasourceName}');
+    expect(link).not.toContain('%24%7B');
+  });
+});
+
+describe('linkToSpan', () => {
+  it('includes spanId template variable', () => {
+    const link = linkToSpan('UTC');
+    expect(link).toContain('${spanId}');
+  });
+});

tempo/src/explore/links.ts

@@ -11,60 +11,40 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const linkToTraceParams = new URLSearchParams({
-  explorer: 'Tempo-TempoExplorer',
-  data: JSON.stringify({
-    queries: [
-      {
-        kind: 'TraceQuery',
-        spec: {
-          plugin: {
-            kind: 'TempoTraceQuery',
-            spec: {
-              query: 'TRACEID',
-              datasource: {
-                kind: 'TempoDatasource',
-                name: 'DATASOURCENAME',
+function buildExploreLink(timeZone: string, extraData?: Record<string, unknown>): string {
+  const params = new URLSearchParams({
+    explorer: 'Tempo-TempoExplorer',
+    data: JSON.stringify({
+      queries: [
+        {
+          kind: 'TraceQuery',
+          spec: {
+            plugin: {
+              kind: 'TempoTraceQuery',
+              spec: {
+                query: '${traceId}',
+                datasource: {
+                  kind: 'TempoDatasource',
+                  name: '${datasourceName}',
+                },
               },
             },
           },
         },
-      },
-    ],
-  }),
-});
+      ],
+      ...extraData,
+    }),
+    tz: timeZone,
+  });
 
-const linkToSpanParams = new URLSearchParams({
-  explorer: 'Tempo-TempoExplorer',
-  data: JSON.stringify({
-    queries: [
-      {
-        kind: 'TraceQuery',
-        spec: {
-          plugin: {
-            kind: 'TempoTraceQuery',
-            spec: {
-              query: 'TRACEID',
-              datasource: {
-                kind: 'TempoDatasource',
-                name: 'DATASOURCENAME',
-              },
-            },
-          },
-        },
-      },
-    ],
-    spanId: 'SPANID',
-  }),
-});
+  // Unescape ${...} template variables so they survive as literal text for runtime interpolation.
+  return `/explore?${params}`.replace(/%24%7B(\w+)%7D/g, '${$1}');
+}
 
-// add ${...} syntax after the URL is URL-encoded, because the characters ${} must not be URL-encoded
-export const linkToTrace = `/explore?${linkToTraceParams}`
-  .replace('DATASOURCENAME', '${datasourceName}')
-  .replace('TRACEID', '${traceId}');
+export function linkToTrace(timeZone: string): string {
+  return buildExploreLink(timeZone);
+}
 
-// add ${...} syntax after the URL is URL-encoded, because the characters ${} must not be URL-encoded
-export const linkToSpan = `/explore?${linkToSpanParams}`
-  .replace('DATASOURCENAME', '${datasourceName}')
-  .replace('TRACEID', '${traceId}')
-  .replace('SPANID', '${spanId}');
+export function linkToSpan(timeZone: string): string {
+  return buildExploreLink(timeZone, { spanId: '${spanId}' });
+}