Alerting: adding a time picker for selecting relative time. (#33689)

* adding placeholder for relative time range.

* fixed story.

* added basic structure to handle open/close of time range picker.

* removed section from TimeOptions since it isn't used any where.

* adding mapper and tests

* move relativetimepicker to its own dir

* added some simple tests.

* changed test.

* use relativetimerangeinput

* redo state management

* refactored the tests.

* replace timerange with relativetimerange

* wip

* wip

* did some refactoring.

* refactored time option formatting.

* added proper formatting and display of time range.

* add relative time description, slight refactor of height

* fixed incorrect import.

* added validator and changed formatting.

* removed unused dep.

* reverted back to internal function.

* fixed display of relative time range picker.

* fixed failing tests.

* fixed parsing issue.

* fixed position of time range picker.

* some more refactorings.

* fixed validation of really big values.

* added another test.

Co-authored-by: Peter Holmberg <peter.hlmbrg@gmail.com>

public/app/features/alerting/components/AlertingQueryRows.tsx

@@ -1,10 +1,17 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
-import { DataQuery, DataSourceInstanceSettings, rangeUtil, PanelData, TimeRange } from '@grafana/data';
+import {
+  DataQuery,
+  DataSourceInstanceSettings,
+  getDefaultRelativeTimeRange,
+  PanelData,
+  RelativeTimeRange,
+} from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { QueryEditorRow } from 'app/features/query/components/QueryEditorRow';
 import { isExpressionQuery } from 'app/features/expressions/guards';
 import { GrafanaQuery } from 'app/types/unified-alerting-dto';
+import { RelativeTimeRangePicker } from '@grafana/ui';
 
 interface Props {
   // The query configuration
@@ -30,7 +37,7 @@ export class AlertingQueryRows extends PureComponent<Props, State> {
     this.props.onQueriesChange(this.props.queries.filter((item) => item.model !== query));
   };
 
-  onChangeTimeRange(timeRange: TimeRange, index: number) {
+  onChangeTimeRange(timeRange: RelativeTimeRange, index: number) {
     const { queries, onQueriesChange } = this.props;
     onQueriesChange(
       queries.map((item, itemIndex) => {
@@ -39,7 +46,7 @@ export class AlertingQueryRows extends PureComponent<Props, State> {
         }
         return {
           ...item,
-          relativeTimeRange: rangeUtil.timeRangeToRelative(timeRange),
+          relativeTimeRange: timeRange,
         };
       })
     );
@@ -84,6 +91,7 @@ export class AlertingQueryRows extends PureComponent<Props, State> {
         }
         return {
           ...item,
+          refId: query.refId,
           model: {
             ...item.model,
             ...query,
@@ -155,16 +163,7 @@ export class AlertingQueryRows extends PureComponent<Props, State> {
                       data={data}
                       query={query.model}
                       onChange={(query) => this.onChangeQuery(query, index)}
-                      timeRange={
-                        !isExpressionQuery(query.model) && query.relativeTimeRange
-                          ? rangeUtil.relativeToTimeRange(query.relativeTimeRange)
-                          : undefined
-                      }
-                      onChangeTimeRange={
-                        !isExpressionQuery(query.model)
-                          ? (timeRange) => this.onChangeTimeRange(timeRange, index)
-                          : undefined
-                      }
+                      renderHeaderExtras={() => this.renderTimePicker(query, index)}
                       onRemoveQuery={this.onRemoveQuery}
                       onAddQuery={(duplicate) => this.onDuplicateQuery(duplicate, query)}
                       onRunQuery={this.props.onRunQueries}
@@ -180,4 +179,17 @@ export class AlertingQueryRows extends PureComponent<Props, State> {
       </DragDropContext>
     );
   }
+
+  renderTimePicker(query: GrafanaQuery, index: number): ReactNode {
+    if (isExpressionQuery(query.model)) {
+      return null;
+    }
+
+    return (
+      <RelativeTimeRangePicker
+        timeRange={query.relativeTimeRange ?? getDefaultRelativeTimeRange()}
+        onChange={(range) => this.onChangeTimeRange(range, index)}
+      />
+    );
+  }
 }