Explore: Preserve time range when creating a dashboard panel from Explore (#80070)

* Explore: Preserve time range when creating a dashboard panel from Explore

* fix tests

public/app/features/explore/extensions/AddToDashboard/AddToDashboardForm.tsx

@@ -102,6 +102,8 @@ export function AddToDashboardForm(props: Props): ReactElement {
       queries: exploreItem.queries.length,
     });
 
+    const { from, to } = exploreItem.range.raw;
+
     try {
       await setDashboardInLocalStorage({
         dashboardUid,
@@ -109,6 +111,10 @@ export function AddToDashboardForm(props: Props): ReactElement {
         queries: exploreItem.queries,
         queryResponse: exploreItem.queryResponse,
         panelState: exploreItem?.panelsState,
+        time: {
+          from: typeof from === 'string' ? from : from.toISOString(),
+          to: typeof to === 'string' ? to : to.toISOString(),
+        },
       });
     } catch (error) {
       switch (error) {

public/app/features/explore/extensions/AddToDashboard/addToDashboard.test.ts

@@ -23,6 +23,7 @@ describe('addPanelToDashboard', () => {
       queries: [],
       queryResponse: createEmptyQueryResponse(),
       datasource: { type: 'loki', uid: 'someUid' },
+      time: { from: 'now-1h', to: 'now' },
     });
     expect(spy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -33,12 +34,30 @@ describe('addPanelToDashboard', () => {
     );
   });
 
+  it('Correct time range is used', async () => {
+    await setDashboardInLocalStorage({
+      queries: [],
+      queryResponse: createEmptyQueryResponse(),
+      datasource: { type: 'loki', uid: 'someUid' },
+      time: { from: 'now-10h', to: 'now' },
+    });
+
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dashboard: expect.objectContaining({
+          time: expect.objectContaining({ from: 'now-10h', to: 'now' }),
+        }),
+      })
+    );
+  });
+
   it('All queries are correctly passed through', async () => {
     const queries: DataQuery[] = [{ refId: 'A' }, { refId: 'B', hide: true }];
 
     await setDashboardInLocalStorage({
       queries,
       queryResponse: createEmptyQueryResponse(),
+      time: { from: 'now-1h', to: 'now' },
     });
     expect(spy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -68,6 +87,7 @@ describe('addPanelToDashboard', () => {
       queryResponse: createEmptyQueryResponse(),
       dashboardUid: 'someUid',
       datasource: { type: '' },
+      time: { from: 'now-1h', to: 'now' },
     });
 
     expect(spy).toHaveBeenCalledWith(
@@ -95,7 +115,7 @@ describe('addPanelToDashboard', () => {
       ];
 
       it.each(cases)('%s', async (_, queries, queryResponse) => {
-        await setDashboardInLocalStorage({ queries, queryResponse });
+        await setDashboardInLocalStorage({ queries, queryResponse, time: { from: 'now-1h', to: 'now' } });
         expect(spy).toHaveBeenCalledWith(
           expect.objectContaining({
             dashboard: expect.objectContaining({
@@ -127,7 +147,7 @@ describe('addPanelToDashboard', () => {
             [framesType]: [new MutableDataFrame({ refId: 'A', fields: [] })],
           };
 
-          await setDashboardInLocalStorage({ queries, queryResponse });
+          await setDashboardInLocalStorage({ queries, queryResponse, time: { from: 'now-1h', to: 'now' } });
           expect(spy).toHaveBeenCalledWith(
             expect.objectContaining({
               dashboard: expect.objectContaining({
@@ -151,7 +171,7 @@ describe('addPanelToDashboard', () => {
           ],
         };
 
-        await setDashboardInLocalStorage({ queries, queryResponse });
+        await setDashboardInLocalStorage({ queries, queryResponse, time: { from: 'now-1h', to: 'now' } });
         expect(spy).toHaveBeenCalledWith(
           expect.objectContaining({
             dashboard: expect.objectContaining({

public/app/features/explore/extensions/AddToDashboard/addToDashboard.ts

@@ -1,5 +1,5 @@
 import { DataFrame, ExplorePanelsState } from '@grafana/data';
-import { DataQuery, DataSourceRef } from '@grafana/schema';
+import { Dashboard, DataQuery, DataSourceRef } from '@grafana/schema';
 import { DataTransformerConfig } from '@grafana/schema/dist/esm/raw/dashboard/x/dashboard_types.gen';
 import { backendSrv } from 'app/core/services/backend_srv';
 import {
@@ -19,6 +19,7 @@ interface AddPanelToDashboardOptions {
   datasource?: DataSourceRef;
   dashboardUid?: string;
   panelState?: ExplorePanelsState;
+  time: Dashboard['time'];
 }
 
 function createDashboard(): DashboardDTO {
@@ -93,6 +94,8 @@ export async function setDashboardInLocalStorage(options: AddPanelToDashboardOpt
 
   dto.dashboard.panels = [panel, ...(dto.dashboard.panels ?? [])];
 
+  dto.dashboard.time = options.time;
+
   try {
     setDashboardToFetchFromLocalStorage(dto);
   } catch {

public/app/features/explore/extensions/AddToDashboard/index.test.tsx

@@ -24,6 +24,11 @@ const setup = (children: ReactNode, queries: DataQuery[] = [{ refId: 'A' }]) =>
     explore: {
       panes: {
         left: {
+          range: {
+            from: 'now-6h',
+            to: 'now',
+            raw: { from: 'now-6h', to: 'now' },
+          },
           queries,
           queryResponse: createEmptyQueryResponse(),
         },