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 },
+  };
+}

packages/grafana-data/src/types/time.ts

@@ -11,6 +11,15 @@ export interface TimeRange {
   raw: RawTimeRange;
 }
 
+/**
+ * Type to describe relative time to now in seconds.
+ * @internal
+ */
+export interface RelativeTimeRange {
+  from: number;
+  to: number;
+}
+
 export interface AbsoluteTimeRange {
   from: number;
   to: number;

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

@@ -43,7 +43,7 @@ export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
   };
 
   return (
-    <>
+    <div className={styles.wrapper}>
       <ToolbarButton
         className={className}
         isOpen={isOpen}
@@ -71,7 +71,7 @@ export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
           </ClickOutsideWrapper>
         </div>
       )}
-    </>
+    </div>
   );
 });
 
@@ -79,6 +79,10 @@ ButtonSelect.displayName = 'ButtonSelect';
 
 const getStyles = (theme: GrafanaTheme) => {
   return {
+    wrapper: css`
+      position: relative;
+      display: inline-flex;
+    `,
     menuWrapper: css`
       position: absolute;
       z-index: ${theme.zIndex.dropdown};