Alerting: adding query editor when creating threshold rule. (#33123)

* fix viz

* add datasource picker on query rows in mixed mode

* add timerange, handle add/remove queryrunners

* multiqueryrunner test

* trying things out.

* adding another test to verify running a induvidual query runner will update multirunner.

* cleaned up tests a bit.

* draft version working ok.

* fixing so we base the refId from request targets.

* reenable adding expression

* layout fixes for alerting page

* some cleanup

* cleaning up code that we won't use

* changed so we don't display the time range if params not passed.

* remove unused things in querygroup

* changed button to type button.

* removed timerange from dataQuery and removed multiquery runner.

* minor refactoring.

* renamed callback function to make it more clear what it does.

* renamed droppable area.

* changed so we only display the query editor when selecting threshold.

* removed the refresh picker.

* revert

* wip

* extending with data query.

* timerange fixes

* it is now possible to add grafana queries.

* removed unused type.

* removed expect import.

* added docs.

* moved range converting methods to rangeUtil.

* clean up some typings, remove file

* making sure we don't blow up on component being unmounted.

Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>

packages/grafana-data/src/datetime/rangeutil.test.ts

@@ -1,4 +1,4 @@
-import { rangeUtil } from './index';
+import { dateTime, rangeUtil } from './index';
 
 describe('Range Utils', () => {
   describe('relative time', () => {
@@ -40,4 +40,22 @@ describe('Range Utils', () => {
       expect(() => rangeUtil.describeInterval('xyz')).toThrow();
     });
   });
+
+  describe('relativeToTimeRange', () => {
+    it('should convert seconds to timeRange', () => {
+      const relativeTimeRange = { from: 600, to: 300 };
+      const timeRange = rangeUtil.relativeToTimeRange(relativeTimeRange, dateTime('2021-04-20T15:55:00Z'));
+
+      expect(timeRange.from.valueOf()).toEqual(dateTime('2021-04-20T15:45:00Z').valueOf());
+      expect(timeRange.to.valueOf()).toEqual(dateTime('2021-04-20T15:50:00Z').valueOf());
+    });
+
+    it('should convert from now', () => {
+      const relativeTimeRange = { from: 600, to: 0 };
+      const timeRange = rangeUtil.relativeToTimeRange(relativeTimeRange, dateTime('2021-04-20T15:55:00Z'));
+
+      expect(timeRange.from.valueOf()).toEqual(dateTime('2021-04-20T15:45:00Z').valueOf());
+      expect(timeRange.to.valueOf()).toEqual(dateTime('2021-04-20T15:55:00Z').valueOf());
+    });
+  });
 });

packages/grafana-data/src/datetime/rangeutil.ts

@@ -1,9 +1,9 @@
 import { each, groupBy, has } from 'lodash';
 
-import { RawTimeRange, TimeRange, TimeZone, IntervalValues } from '../types/time';
+import { RawTimeRange, TimeRange, TimeZone, IntervalValues, RelativeTimeRange } from '../types/time';
 
 import * as dateMath from './datemath';
-import { isDateTime, DateTime } from './moment_wrapper';
+import { isDateTime, DateTime, dateTime } from './moment_wrapper';
 import { timeZoneAbbrevation, dateTimeFormat, dateTimeFormatTimeAgo } from './formatter';
 import { dateTimeParse } from './parser';
 
@@ -432,3 +432,36 @@ export function roundInterval(interval: number) {
       return 31536000000; // 1y
   }
 }
+
+/**
+ * Converts a TimeRange to a RelativeTimeRange that can be used in
+ * e.g. alerting queries/rules.
+ *
+ * @internal
+ */
+export function timeRangeToRelative(timeRange: TimeRange): RelativeTimeRange {
+  const now = dateTime().unix();
+  const from = (now - timeRange.from.unix()) / 1000;
+  const to = (now - timeRange.to.unix()) / 1000;
+
+  return {
+    from,
+    to,
+  };
+}
+
+/**
+ * Converts a RelativeTimeRange to a TimeRange
+ *
+ * @internal
+ */
+export function relativeToTimeRange(relativeTimeRange: RelativeTimeRange, now: DateTime = dateTime()): TimeRange {
+  const from = dateTime(now).subtract(relativeTimeRange.from, 's');
+  const to = relativeTimeRange.to === 0 ? dateTime(now) : dateTime(now).subtract(relativeTimeRange.to, 's');
+
+  return {
+    from,
+    to,
+    raw: { from, to },
+  };
+}