Alerting: Fix passing time range to query components (#101041)

Add range prop to QueryEditorRow, pass range from QueryWrapper

public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx

@@ -13,6 +13,8 @@ import {
   PanelData,
   RelativeTimeRange,
   ThresholdsConfig,
+  getDefaultRelativeTimeRange,
+  rangeUtil,
 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
@@ -187,12 +189,12 @@ export const QueryWrapper = ({
   // ⚠️ the query editors want the entire array of queries passed as "DataQuery" NOT "AlertQuery"
   // TypeScript isn't complaining here because the interfaces just happen to be compatible
   const editorQueries = cloneDeep(queries.map((query) => query.model));
+  const range = rangeUtil.relativeToTimeRange(query.relativeTimeRange ?? getDefaultRelativeTimeRange());
 
   return (
     <Stack direction="column" gap={0.5}>
       <div className={styles.wrapper}>
         <QueryEditorRow<AlertDataQuery>
-          alerting
           hideRefId={!isAdvancedMode}
           hideActionButtons={!isAdvancedMode}
           collapsable={false}
@@ -209,6 +211,7 @@ export const QueryWrapper = ({
           onAddQuery={() => onDuplicateQuery(cloneDeep(query))}
           onRunQuery={onRunQueries}
           queries={editorQueries}
+          range={range}
           renderHeaderExtras={() => (
             <HeaderExtras query={query} index={index} error={error} isAdvancedMode={isAdvancedMode} />
           )}

public/app/features/query/components/QueryEditorRow.test.tsx

@@ -354,6 +354,7 @@ describe('QueryEditorRow', () => {
     onChange: jest.fn(),
     onRemoveQuery: jest.fn(),
     index: 0,
+    range: { from: dateTime(), to: dateTime(), raw: { from: 'now-1d', to: 'now' } },
   });
   it('should display error message in corresponding panel', async () => {
     const data = {

public/app/features/query/components/QueryEditorRow.tsx

@@ -63,9 +63,9 @@ export interface Props<TQuery extends DataQuery> {
   visualization?: ReactNode;
   hideHideQueryButton?: boolean;
   app?: CoreApp;
+  range: TimeRange;
   history?: Array<HistoryItem<TQuery>>;
   eventBus?: EventBusExtended;
-  alerting?: boolean;
   hideActionButtons?: boolean;
   onQueryCopied?: () => void;
   onQueryRemoved?: () => void;
@@ -273,7 +273,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   }
 
   renderPluginEditor = () => {
-    const { query, onChange, queries, onRunQuery, onAddQuery, app = CoreApp.PanelEditor, history } = this.props;
+    const { query, onChange, queries, onRunQuery, onAddQuery, range, app = CoreApp.PanelEditor, history } = this.props;
     const { datasource, data } = this.state;
 
     if (this.isWaitingForDatasourceToLoad()) {
@@ -298,7 +298,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
               onRunQuery={onRunQuery}
               onAddQuery={onAddQuery}
               data={data}
-              range={getTimeSrv().timeRange()}
+              range={range}
               queries={queries}
               app={app}
               history={history}
@@ -518,8 +518,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   };
 
   renderHeader = (props: QueryOperationRowRenderProps) => {
-    const { alerting, query, dataSource, onChangeDataSource, onChange, queries, renderHeaderExtras, hideRefId } =
-      this.props;
+    const { app, query, dataSource, onChangeDataSource, onChange, queries, renderHeaderExtras, hideRefId } = this.props;
 
     return (
       <QueryEditorRowHeader
@@ -532,7 +531,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
         onChange={onChange}
         collapsedText={!props.isOpen ? this.renderCollapsedText() : null}
         renderExtras={renderHeaderExtras}
-        alerting={alerting}
+        alerting={app === CoreApp.UnifiedAlerting}
         hideRefId={hideRefId}
       />
     );

public/app/features/query/components/QueryEditorRows.tsx

@@ -11,6 +11,7 @@ import {
   getDataSourceRef,
 } from '@grafana/data';
 import { getDataSourceSrv, reportInteraction } from '@grafana/runtime';
+import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 
 import { QueryEditorRow } from './QueryEditorRow';
 
@@ -175,6 +176,7 @@ export class QueryEditorRows extends PureComponent<Props> {
                       onQueryToggled={onQueryToggled}
                       queries={queries}
                       app={app}
+                      range={getTimeSrv().timeRange()}
                       history={history}
                       eventBus={eventBus}
                     />