Explore: Fix date formatting in url for trace logs link (#28381)

* Fix url formatting

* Reverse the overhang buffers

* Fix range when opening split

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

@@ -82,7 +82,7 @@ describe('createSpanLinkFactory', () => {
     } as any);
 
     expect(linkDef.href).toBe(
-      `/explore?left={"range":{"from":"20201014T005955","to":"20201014T020001"},"datasource":"Loki1","queries":[{"expr":"{cluster=\\"cluster1\\", hostname=\\"hostname1\\"}","refId":""}]}`
+      `/explore?left={"range":{"from":"20201014T000000","to":"20201014T010006"},"datasource":"Loki1","queries":[{"expr":"{cluster=\\"cluster1\\", hostname=\\"hostname1\\"}","refId":""}]}`
     );
   });
 });

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

@@ -76,17 +76,18 @@ function getLokiQueryFromSpan(span: TraceSpan): string {
  * something more intelligent should probably be implemented
  */
 function getTimeRangeFromSpan(span: TraceSpan): TimeRange {
-  const from = dateTime(span.startTime / 1000 - 5 * 1000);
+  const from = dateTime(span.startTime / 1000 - 1000 * 60 * 60);
   const spanEndMs = (span.startTime + span.duration) / 1000;
-  const to = dateTime(spanEndMs + 1000 * 60 * 60);
+  const to = dateTime(spanEndMs + 5 * 1000);
+
   return {
     from,
     to,
     // Weirdly Explore does not handle ISO string which would have been the default stringification if passed as object
     // and we have to use this custom format :( .
     raw: {
-      from: from.format('YYYYMMDDTHHmmss'),
-      to: to.format('YYYYMMDDTHHmmss'),
+      from: from.utc().format('YYYYMMDDTHHmmss'),
+      to: to.utc().format('YYYYMMDDTHHmmss'),
     },
   };
 }

public/app/features/explore/state/actions.ts

@@ -681,6 +681,7 @@ export function splitClose(itemId: ExploreId): ThunkResult<void> {
 export function splitOpen<T extends DataQuery = any>(options?: {
   datasourceUid: string;
   query: T;
+  // Don't use right now. It's used for Traces to Logs interaction but is hacky in how the range is actually handled.
   range?: TimeRange;
 }): ThunkResult<void> {
   return async (dispatch, getState) => {
@@ -702,7 +703,16 @@ export function splitOpen<T extends DataQuery = any>(options?: {
       rightState.urlState = urlState;
       if (options.range) {
         urlState.range = options.range.raw;
-        rightState.range = options.range;
+        // This is super hacky. In traces to logs we want to create a link but also internally open split window.
+        // We use the same range object but the raw part is treated differently because it's parsed differently during
+        // init depending on whether we open split or new window.
+        rightState.range = {
+          ...options.range,
+          raw: {
+            from: options.range.from.utc().toISOString(),
+            to: options.range.to.utc().toISOString(),
+          },
+        };
       }
 
       dispatch(splitOpenAction({ itemState: rightState }));