Tracing: Trace to metrics default range (#72433)

* Update default range

* Update tests

public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx

@@ -133,7 +133,7 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
       <InlineFieldRow>
         <IntervalInput
           label={getTimeShiftLabel('start')}
-          tooltip={getTimeShiftTooltip('start')}
+          tooltip={getTimeShiftTooltip('start', '0')}
           value={traceToLogs.spanStartTimeShift || ''}
           onChange={(val) => {
             updateTracesToLogs({ spanStartTimeShift: val });
@@ -145,7 +145,7 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
       <InlineFieldRow>
         <IntervalInput
           label={getTimeShiftLabel('end')}
-          tooltip={getTimeShiftTooltip('end')}
+          tooltip={getTimeShiftTooltip('end', '0')}
           value={traceToLogs.spanEndTimeShift || ''}
           onChange={(val) => {
             updateTracesToLogs({ spanEndTimeShift: val });
@@ -246,8 +246,8 @@ export const getTimeShiftLabel = (type: 'start' | 'end') => {
   return `Span ${type} time shift`;
 };
 
-export const getTimeShiftTooltip = (type: 'start' | 'end') => {
-  return `Shifts the ${type} time of the span. Default: 0 (Time units can be used here, for example: 5s, -1m, 3h)`;
+export const getTimeShiftTooltip = (type: 'start' | 'end', defaultVal: string) => {
+  return `Shifts the ${type} time of the span. Default: ${defaultVal} (Time units can be used here, for example: 5s, -1m, 3h)`;
 };
 
 export const invalidTimeShiftError = 'Invalid time shift. See tooltip for examples.';

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

@@ -82,7 +82,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
       <InlineFieldRow>
         <IntervalInput
           label={getTimeShiftLabel('start')}
-          tooltip={getTimeShiftTooltip('start')}
+          tooltip={getTimeShiftTooltip('start', '-2m')}
           value={options.jsonData.tracesToMetrics?.spanStartTimeShift || ''}
           onChange={(val) => {
             updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {
@@ -90,6 +90,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
               spanStartTimeShift: val,
             });
           }}
+          placeholder={'-2m'}
           isInvalidError={invalidTimeShiftError}
         />
       </InlineFieldRow>
@@ -97,7 +98,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
       <InlineFieldRow>
         <IntervalInput
           label={getTimeShiftLabel('end')}
-          tooltip={getTimeShiftTooltip('end')}
+          tooltip={getTimeShiftTooltip('end', '2m')}
           value={options.jsonData.tracesToMetrics?.spanEndTimeShift || ''}
           onChange={(val) => {
             updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {
@@ -105,6 +106,7 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
               spanEndTimeShift: val,
             });
           }}
+          placeholder={'2m'}
           isInvalidError={invalidTimeShiftError}
         />
       </InlineFieldRow>

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

@@ -466,7 +466,7 @@ describe('createSpanLinkFactory', () => {
       expect(linkDef?.type).toBe(SpanLinkType.Metrics);
       expect(linkDef!.href).toBe(
         `/explore?left=${encodeURIComponent(
-          '{"range":{"from":"2020-10-14T01:00:00.000Z","to":"2020-10-14T01:00:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"customQuery","refId":"A"}]}'
+          '{"range":{"from":"2020-10-14T00:58:00.000Z","to":"2020-10-14T01:02:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"customQuery","refId":"A"}]}'
         )}`
       );
     });
@@ -515,7 +515,7 @@ describe('createSpanLinkFactory', () => {
       expect(namedLink!.title).toBe('Named Query');
       expect(namedLink!.href).toBe(
         `/explore?left=${encodeURIComponent(
-          '{"range":{"from":"2020-10-14T01:00:00.000Z","to":"2020-10-14T01:00:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"customQuery","refId":"A"}]}'
+          '{"range":{"from":"2020-10-14T00:58:00.000Z","to":"2020-10-14T01:02:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"customQuery","refId":"A"}]}'
         )}`
       );
 
@@ -525,7 +525,7 @@ describe('createSpanLinkFactory', () => {
       expect(defaultLink!.title).toBe('defaultQuery');
       expect(defaultLink!.href).toBe(
         `/explore?left=${encodeURIComponent(
-          '{"range":{"from":"2020-10-14T01:00:00.000Z","to":"2020-10-14T01:00:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"histogram_quantile(0.5, sum(rate(traces_spanmetrics_latency_bucket{service=\\"test service\\"}[5m])) by (le))","refId":"A"}]}'
+          '{"range":{"from":"2020-10-14T00:58:00.000Z","to":"2020-10-14T01:02:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"histogram_quantile(0.5, sum(rate(traces_spanmetrics_latency_bucket{service=\\"test service\\"}[5m])) by (le))","refId":"A"}]}'
         )}`
       );
 
@@ -535,7 +535,7 @@ describe('createSpanLinkFactory', () => {
       expect(unnamedQuery!.title).toBeUndefined();
       expect(unnamedQuery!.href).toBe(
         `/explore?left=${encodeURIComponent(
-          '{"range":{"from":"2020-10-14T01:00:00.000Z","to":"2020-10-14T01:00:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"no_name_here","refId":"A"}]}'
+          '{"range":{"from":"2020-10-14T00:58:00.000Z","to":"2020-10-14T01:02:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"no_name_here","refId":"A"}]}'
         )}`
       );
     });
@@ -599,7 +599,7 @@ describe('createSpanLinkFactory', () => {
     expect(links![0].type).toBe(SpanLinkType.Metrics);
     expect(links![0].href).toBe(
       `/explore?left=${encodeURIComponent(
-        '{"range":{"from":"2020-10-14T01:00:00.000Z","to":"2020-10-14T01:00:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"metric{job=\\"tns/app\\", pod=\\"sample-pod\\", job=\\"tns/app\\", pod=\\"sample-pod\\"}[5m]","refId":"A"}]}'
+        '{"range":{"from":"2020-10-14T00:58:00.000Z","to":"2020-10-14T01:02:01.000Z"},"datasource":"prom1Uid","queries":[{"expr":"metric{job=\\"tns/app\\", pod=\\"sample-pod\\", job=\\"tns/app\\", pod=\\"sample-pod\\"}[5m]","refId":"A"}]}'
       )}`
     );
   });

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

@@ -266,10 +266,10 @@ function legacyCreateSpanLinkFactory(
           range: getTimeRangeFromSpan(span, {
             startMs: traceToMetricsOptions.spanStartTimeShift
               ? rangeUtil.intervalToMs(traceToMetricsOptions.spanStartTimeShift)
-              : 0,
+              : -120000,
             endMs: traceToMetricsOptions.spanEndTimeShift
               ? rangeUtil.intervalToMs(traceToMetricsOptions.spanEndTimeShift)
-              : 0,
+              : 120000,
           }),
           field: {} as Field,
           onClickFn: splitOpenFn,