feat: add tracesToMetrics span time shift options (#54710) (#55335)

public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx

@@ -17,6 +17,8 @@ export interface TraceToMetricsOptions {
   datasourceUid?: string;
   tags?: Array<KeyValue<string>>;
   queries: TraceToMetricQuery[];
+  spanStartTimeShift?: string;
+  spanEndTimeShift?: string;
 }
 
 export interface TraceToMetricQuery {
@@ -90,6 +92,50 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
         </InlineField>
       </InlineFieldRow>
 
+      <InlineFieldRow>
+        <InlineField
+          label="Span start time shift"
+          labelWidth={26}
+          grow
+          tooltip="Shifts the start time of the span. Default 0 (Time units can be used here, for example: 5s, 1m, 3h)"
+        >
+          <Input
+            type="text"
+            placeholder="-1h"
+            width={40}
+            onChange={(v) =>
+              updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {
+                ...options.jsonData.tracesToMetrics,
+                spanStartTimeShift: v.currentTarget.value,
+              })
+            }
+            value={options.jsonData.tracesToMetrics?.spanStartTimeShift || ''}
+          />
+        </InlineField>
+      </InlineFieldRow>
+
+      <InlineFieldRow>
+        <InlineField
+          label="Span end time shift"
+          labelWidth={26}
+          grow
+          tooltip="Shifts the end time of the span. Default 0 Time units can be used here, for example: 5s, 1m, 3h"
+        >
+          <Input
+            type="text"
+            placeholder="1h"
+            width={40}
+            onChange={(v) =>
+              updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {
+                ...options.jsonData.tracesToMetrics,
+                spanEndTimeShift: v.currentTarget.value,
+              })
+            }
+            value={options.jsonData.tracesToMetrics?.spanEndTimeShift || ''}
+          />
+        </InlineField>
+      </InlineFieldRow>
+
       {options.jsonData.tracesToMetrics?.queries?.map((query, i) => (
         <div key={i} className={styles.queryRow}>
           <InlineField label="Link Label" labelWidth={10}>

public/app/features/explore/TraceView/createSpanLink.test.ts

@@ -476,6 +476,30 @@ describe('createSpanLinkFactory', () => {
         )}`
       );
     });
+
+    it('with adjusted start and end time', () => {
+      const splitOpenFn = jest.fn();
+      const createLink = createSpanLinkFactory({
+        splitOpenFn,
+        traceToMetricsOptions: {
+          datasourceUid: 'prom1Uid',
+          queries: [{ query: 'customQuery' }],
+          spanStartTimeShift: '-1h',
+          spanEndTimeShift: '1h',
+        },
+      });
+      expect(createLink).toBeDefined();
+
+      const links = createLink!(createTraceSpan());
+      const linkDef = links?.metricLinks?.[0];
+
+      expect(linkDef).toBeDefined();
+      expect(linkDef!.href).toBe(
+        `/explore?left=${encodeURIComponent(
+          '{"range":{"from":"2020-10-14T00:00:00.000Z","to":"2020-10-14T02:00:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"customQuery","refId":"A"}],"panelsState":{}}'
+        )}`
+      );
+    });
   });
 
   it('correctly interpolates span attributes', () => {

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

@@ -171,8 +171,12 @@ function legacyCreateSpanLinkFactory(
           internalLink: dataLink.internal!,
           scopedVars: {},
           range: getTimeRangeFromSpan(span, {
-            startMs: 0,
-            endMs: 0,
+            startMs: traceToMetricsOptions.spanStartTimeShift
+              ? rangeUtil.intervalToMs(traceToMetricsOptions.spanStartTimeShift)
+              : 0,
+            endMs: traceToMetricsOptions.spanEndTimeShift
+              ? rangeUtil.intervalToMs(traceToMetricsOptions.spanEndTimeShift)
+              : 0,
           }),
           field: {} as Field,
           onClickFn: splitOpenFn,