React UI: Select time range with mouse drag (#8977)

* Added selection flot plugin

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Added time selection

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Added tests

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Removed irrelevant line in license header

Signed-off-by: Levi Harrison <git@leviharrison.dev>

web/ui/react-app/src/pages/graph/Graph.tsx

@@ -14,6 +14,7 @@ require('../../vendor/flot/jquery.flot');
 require('../../vendor/flot/jquery.flot.stack');
 require('../../vendor/flot/jquery.flot.time');
 require('../../vendor/flot/jquery.flot.crosshair');
+require('../../vendor/flot/jquery.flot.selection');
 require('jquery.flot.tooltip');
 
 export interface GraphProps {
@@ -25,6 +26,7 @@ export interface GraphProps {
   stacked: boolean;
   useLocalTime: boolean;
   showExemplars: boolean;
+  handleTimeRangeSelection: (startTime: number, endTime: number) => void;
   queryParams: QueryParams | null;
   id: string;
 }
@@ -117,6 +119,15 @@ class Graph extends PureComponent<GraphProps, GraphState> {
         });
       }
     });
+
+    $(`.graph-${this.props.id}`).bind('plotselected', (_, ranges) => {
+      if (isPresent(this.$chart)) {
+        // eslint-disable-next-line
+        // @ts-ignore Typescript doesn't think this method exists although it actually does.
+        this.$chart.clearSelection();
+        this.props.handleTimeRangeSelection(ranges.xaxis.from, ranges.xaxis.to);
+      }
+    });
   }
 
   componentWillUnmount() {

web/ui/react-app/src/pages/graph/GraphHelpers.test.ts

@@ -234,6 +234,9 @@ describe('GraphHelpers', () => {
           lines: { lineWidth: 1, steps: false, fill: true },
           shadowSize: 0,
         },
+        selection: {
+          mode: 'x',
+        },
       });
     });
   });

web/ui/react-app/src/pages/graph/GraphHelpers.ts

@@ -147,6 +147,9 @@ export const getOptions = (stacked: boolean, useLocalTime: boolean): jquery.flot
       },
       shadowSize: 0,
     },
+    selection: {
+      mode: 'x',
+    },
   };
 };
 

web/ui/react-app/src/pages/graph/GraphTabContent.tsx

@@ -10,6 +10,7 @@ interface GraphTabContentProps {
   stacked: boolean;
   useLocalTime: boolean;
   showExemplars: boolean;
+  handleTimeRangeSelection: (startTime: number, endTime: number) => void;
   lastQueryParams: QueryParams | null;
   id: string;
 }
@@ -21,6 +22,7 @@ export const GraphTabContent: FC<GraphTabContentProps> = ({
   useLocalTime,
   lastQueryParams,
   showExemplars,
+  handleTimeRangeSelection,
   id,
 }) => {
   if (!isPresent(data)) {
@@ -41,6 +43,7 @@ export const GraphTabContent: FC<GraphTabContentProps> = ({
       stacked={stacked}
       useLocalTime={useLocalTime}
       showExemplars={showExemplars}
+      handleTimeRangeSelection={handleTimeRangeSelection}
       queryParams={lastQueryParams}
       id={id}
     />

web/ui/react-app/src/pages/graph/Panel.tsx

@@ -255,6 +255,10 @@ class Panel extends Component<PanelProps, PanelState> {
     this.setOptions({ showExemplars: show });
   };
 
+  handleTimeRangeSelection = (startTime: number, endTime: number) => {
+    this.setOptions({ range: endTime - startTime, endTime: endTime });
+  };
+
   render() {
     const { pastQueries, metricNames, options } = this.props;
     return (
@@ -356,6 +360,7 @@ class Panel extends Component<PanelProps, PanelState> {
                       showExemplars={options.showExemplars}
                       lastQueryParams={this.state.lastQueryParams}
                       id={this.props.id}
+                      handleTimeRangeSelection={this.handleTimeRangeSelection}
                     />
                   </>
                 )}

web/ui/react-app/src/pages/graph/TimeInput.tsx

@@ -79,7 +79,9 @@ class TimeInput extends Component<TimeInputProps> {
     });
 
     this.$time.on('change.datetimepicker', (e: any) => {
-      if (e.date) {
+      // The end time can also be set by dragging a section on the graph,
+      // and that value will have decimal places.
+      if (e.date && e.date.valueOf() !== Math.trunc(this.props.time?.valueOf()!)) {
         this.props.onChangeTime(e.date.valueOf());
       }
     });

web/ui/react-app/src/types/index.d.ts

@@ -43,6 +43,9 @@ declare namespace jquery.flot {
     series: { [K in keyof jquery.flot.seriesOptions]: jq.flot.seriesOptions[K] } & {
       stack: boolean;
     };
+    selection: {
+      mode: string;
+    };
   }
 }
 

web/ui/react-app/src/vendor/flot/jquery.flot.selection.js

@@ -0,0 +1,412 @@
+/**
+ *
+ * THIS FILE WAS COPIED INTO PROMETHEUS FROM GRAFANA'S VENDORED FORK OF FLOT
+ * (LIVING AT https://github.com/grafana/grafana/tree/v7.5.8/public/vendor/flot).
+ * THE ORIGINAL FLOT CODE WAS LICENSED UNDER THE MIT LICENSE AS STATED BELOW.
+ * ADDITIONAL CHANGES HAVE BEEN CONTRIBUTED TO THE GRAFANA FORK UNDER AN
+ * APACHE 2 LICENSE, SEE https://github.com/grafana/grafana/blob/v7.5.8/LICENSE.
+ */
+
+/* eslint-disable prefer-spread */
+/* eslint-disable no-loop-func */
+/* eslint-disable @typescript-eslint/no-this-alias */
+/* eslint-disable no-redeclare */
+/* eslint-disable no-useless-escape */
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable eqeqeq */
+/* eslint-disable no-var */
+/* Flot plugin for selecting regions of a plot.
+
+Copyright (c) 2007-2013 IOLA and Ole Laursen.
+Licensed under the MIT license.
+
+The plugin supports these options:
+
+selection: {
+	mode: null or "x" or "y" or "xy",
+	color: color,
+	shape: "round" or "miter" or "bevel",
+	minSize: number of pixels
+}
+
+Selection support is enabled by setting the mode to one of "x", "y" or "xy".
+In "x" mode, the user will only be able to specify the x range, similarly for
+"y" mode. For "xy", the selection becomes a rectangle where both ranges can be
+specified. "color" is color of the selection (if you need to change the color
+later on, you can get to it with plot.getOptions().selection.color). "shape"
+is the shape of the corners of the selection.
+
+"minSize" is the minimum size a selection can be in pixels. This value can
+be customized to determine the smallest size a selection can be and still
+have the selection rectangle be displayed. When customizing this value, the
+fact that it refers to pixels, not axis units must be taken into account.
+Thus, for example, if there is a bar graph in time mode with BarWidth set to 1
+minute, setting "minSize" to 1 will not make the minimum selection size 1
+minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent
+"plotunselected" events from being fired when the user clicks the mouse without
+dragging.
+
+When selection support is enabled, a "plotselected" event will be emitted on
+the DOM element you passed into the plot function. The event handler gets a
+parameter with the ranges selected on the axes, like this:
+
+	placeholder.bind( "plotselected", function( event, ranges ) {
+		alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
+		// similar for yaxis - with multiple axes, the extra ones are in
+		// x2axis, x3axis, ...
+	});
+
+The "plotselected" event is only fired when the user has finished making the
+selection. A "plotselecting" event is fired during the process with the same
+parameters as the "plotselected" event, in case you want to know what's
+happening while it's happening,
+
+A "plotunselected" event with no arguments is emitted when the user clicks the
+mouse to remove the selection. As stated above, setting "minSize" to 0 will
+destroy this behavior.
+
+The plugin allso adds the following methods to the plot object:
+
+- setSelection( ranges, preventEvent )
+
+  Set the selection rectangle. The passed in ranges is on the same form as
+  returned in the "plotselected" event. If the selection mode is "x", you
+  should put in either an xaxis range, if the mode is "y" you need to put in
+  an yaxis range and both xaxis and yaxis if the selection mode is "xy", like
+  this:
+
+	setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
+
+  setSelection will trigger the "plotselected" event when called. If you don't
+  want that to happen, e.g. if you're inside a "plotselected" handler, pass
+  true as the second parameter. If you are using multiple axes, you can
+  specify the ranges on any of those, e.g. as x2axis/x3axis/... instead of
+  xaxis, the plugin picks the first one it sees.
+
+- clearSelection( preventEvent )
+
+  Clear the selection rectangle. Pass in true to avoid getting a
+  "plotunselected" event.
+
+- getSelection()
+
+  Returns the current selection in the same format as the "plotselected"
+  event. If there's currently no selection, the function returns null.
+
+*/
+
+(function($) {
+  function init(plot) {
+    var selection = {
+      first: { x: -1, y: -1 },
+      second: { x: -1, y: -1 },
+      show: false,
+      active: false,
+    };
+
+    // FIXME: The drag handling implemented here should be
+    // abstracted out, there's some similar code from a library in
+    // the navigation plugin, this should be massaged a bit to fit
+    // the Flot cases here better and reused. Doing this would
+    // make this plugin much slimmer.
+    var savedhandlers = {};
+
+    var mouseUpHandler = null;
+
+    function onMouseMove(e) {
+      if (selection.active) {
+        updateSelection(e);
+
+        plot.getPlaceholder().trigger('plotselecting', [getSelection()]);
+      }
+    }
+
+    function onMouseDown(e) {
+      if (e.which != 1)
+        // only accept left-click
+        return;
+
+      // cancel out any text selections
+      document.body.focus();
+
+      // prevent text selection and drag in old-school browsers
+      if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
+        savedhandlers.onselectstart = document.onselectstart;
+        document.onselectstart = function() {
+          return false;
+        };
+      }
+      if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
+        savedhandlers.ondrag = document.ondrag;
+        document.ondrag = function() {
+          return false;
+        };
+      }
+
+      setSelectionPos(selection.first, e);
+
+      selection.active = true;
+
+      // this is a bit silly, but we have to use a closure to be
+      // able to whack the same handler again
+      mouseUpHandler = function(e) {
+        onMouseUp(e);
+      };
+
+      $(document).one('mouseup', mouseUpHandler);
+    }
+
+    function onMouseUp(e) {
+      mouseUpHandler = null;
+
+      // revert drag stuff for old-school browsers
+      if (document.onselectstart !== undefined) document.onselectstart = savedhandlers.onselectstart;
+      if (document.ondrag !== undefined) document.ondrag = savedhandlers.ondrag;
+
+      // no more dragging
+      selection.active = false;
+      updateSelection(e);
+
+      if (selectionIsSane()) triggerSelectedEvent(e);
+      else {
+        // this counts as a clear
+        plot.getPlaceholder().trigger('plotunselected', []);
+        plot.getPlaceholder().trigger('plotselecting', [null]);
+      }
+
+      setTimeout(function() {
+        plot.isSelecting = false;
+      }, 10);
+
+      return false;
+    }
+
+    function getSelection() {
+      if (!selectionIsSane()) return null;
+
+      if (!selection.show) return null;
+
+      var r = {},
+        c1 = selection.first,
+        c2 = selection.second;
+      var axes = plot.getAxes();
+      // look if no axis is used
+      var noAxisInUse = true;
+      $.each(axes, function(name, axis) {
+        if (axis.used) {
+          //anyUsed = false;
+        }
+      });
+
+      $.each(axes, function(name, axis) {
+        if (axis.used || noAxisInUse) {
+          var p1 = axis.c2p(c1[axis.direction]),
+            p2 = axis.c2p(c2[axis.direction]);
+          r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) };
+        }
+      });
+      return r;
+    }
+
+    function triggerSelectedEvent(event) {
+      var r = getSelection();
+
+      // Add ctrlKey and metaKey to event
+      r.ctrlKey = event.ctrlKey;
+      r.metaKey = event.metaKey;
+
+      plot.getPlaceholder().trigger('plotselected', [r]);
+
+      // backwards-compat stuff, to be removed in future
+      if (r.xaxis && r.yaxis)
+        plot.getPlaceholder().trigger('selected', [{ x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to }]);
+    }
+
+    function clamp(min, value, max) {
+      return value < min ? min : value > max ? max : value;
+    }
+
+    function setSelectionPos(pos, e) {
+      var o = plot.getOptions();
+      var offset = plot.getPlaceholder().offset();
+      var plotOffset = plot.getPlotOffset();
+      pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
+      pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
+
+      if (o.selection.mode == 'y') pos.x = pos == selection.first ? 0 : plot.width();
+
+      if (o.selection.mode == 'x') pos.y = pos == selection.first ? 0 : plot.height();
+    }
+
+    function updateSelection(pos) {
+      if (pos.pageX == null) return;
+
+      setSelectionPos(selection.second, pos);
+      if (selectionIsSane()) {
+        plot.isSelecting = true;
+        selection.show = true;
+        plot.triggerRedrawOverlay();
+      } else clearSelection(true);
+    }
+
+    function clearSelection(preventEvent) {
+      if (selection.show) {
+        selection.show = false;
+        plot.triggerRedrawOverlay();
+        if (!preventEvent) plot.getPlaceholder().trigger('plotunselected', []);
+      }
+    }
+
+    // function taken from markings support in Flot
+    function extractRange(ranges, coord) {
+      var axis,
+        from,
+        to,
+        key,
+        axes = plot.getAxes();
+
+      for (var k in axes) {
+        axis = axes[k];
+        if (axis.direction == coord) {
+          key = coord + axis.n + 'axis';
+          if (!ranges[key] && axis.n == 1) key = coord + 'axis'; // support x1axis as xaxis
+          if (ranges[key]) {
+            from = ranges[key].from;
+            to = ranges[key].to;
+            break;
+          }
+        }
+      }
+
+      // backwards-compat stuff - to be removed in future
+      if (!ranges[key]) {
+        axis = coord == 'x' ? plot.getXAxes()[0] : plot.getYAxes()[0];
+        from = ranges[coord + '1'];
+        to = ranges[coord + '2'];
+      }
+
+      // auto-reverse as an added bonus
+      if (from != null && to != null && from > to) {
+        var tmp = from;
+        from = to;
+        to = tmp;
+      }
+
+      return { from: from, to: to, axis: axis };
+    }
+
+    function setSelection(ranges, preventEvent) {
+      var range,
+        o = plot.getOptions();
+
+      if (o.selection.mode == 'y') {
+        selection.first.x = 0;
+        selection.second.x = plot.width();
+      } else {
+        range = extractRange(ranges, 'x');
+
+        selection.first.x = range.axis.p2c(range.from);
+        selection.second.x = range.axis.p2c(range.to);
+      }
+
+      if (o.selection.mode == 'x') {
+        selection.first.y = 0;
+        selection.second.y = plot.height();
+      } else {
+        range = extractRange(ranges, 'y');
+
+        selection.first.y = range.axis.p2c(range.from);
+        selection.second.y = range.axis.p2c(range.to);
+      }
+
+      selection.show = true;
+      plot.triggerRedrawOverlay();
+      if (!preventEvent && selectionIsSane()) triggerSelectedEvent();
+    }
+
+    function selectionIsSane() {
+      var minSize = plot.getOptions().selection.minSize;
+      return (
+        Math.abs(selection.second.x - selection.first.x) >= minSize &&
+        Math.abs(selection.second.y - selection.first.y) >= minSize
+      );
+    }
+
+    plot.clearSelection = clearSelection;
+    plot.setSelection = setSelection;
+    plot.getSelection = getSelection;
+
+    plot.hooks.bindEvents.push(function(plot, eventHolder) {
+      var o = plot.getOptions();
+      if (o.selection.mode != null) {
+        eventHolder.mousemove(onMouseMove);
+        eventHolder.mousedown(onMouseDown);
+      }
+    });
+
+    plot.hooks.drawOverlay.push(function(plot, ctx) {
+      // draw selection
+      if (selection.show && selectionIsSane()) {
+        var plotOffset = plot.getPlotOffset();
+        var o = plot.getOptions();
+
+        ctx.save();
+        ctx.translate(plotOffset.left, plotOffset.top);
+
+        var c = $.color.parse(o.selection.color);
+
+        ctx.strokeStyle = c.scale('a', 0.8).toString();
+        ctx.lineWidth = 1;
+        ctx.lineJoin = o.selection.shape;
+        ctx.fillStyle = c.scale('a', 0.4).toString();
+
+        var x = Math.min(selection.first.x, selection.second.x) + 0.5,
+          y = Math.min(selection.first.y, selection.second.y) + 0.5,
+          w = Math.abs(selection.second.x - selection.first.x) - 1,
+          h = Math.abs(selection.second.y - selection.first.y) - 1;
+
+        ctx.fillRect(x, y, w, h);
+        ctx.strokeRect(x, y, w, h);
+
+        ctx.restore();
+      }
+    });
+
+    plot.hooks.shutdown.push(function(plot, eventHolder) {
+      eventHolder.unbind('mousemove', onMouseMove);
+      eventHolder.unbind('mousedown', onMouseDown);
+
+      if (mouseUpHandler) {
+        $(document).unbind('mouseup', mouseUpHandler);
+        // grafana addition
+        // In L114 this plugin is overrinding document.onselectstart handler to prevent default or custom behaviour
+        // Then this patch is being restored during mouseup event. But, mouseup handler is unbound when this plugin is destroyed
+        // and the overridden onselectstart handler is not restored.  The problematic behaviour surfaces when flot is re-rendered
+        // as a consequence of panel's model update. When i.e. options are applied via onBlur
+        // event on some input which results in flot re-render. The mouseup handler should be called to resture the original handlers
+        //  but by the time the document mouseup event occurs, the event handler is no longer there, so onselectstart is permanently overridden.
+        // To fix that we are making sure that the overrides are reverted when this plugin is destroyed, the same way as they would
+        // via mouseup event handler (L138)
+
+        if (document.onselectstart !== undefined) document.onselectstart = savedhandlers.onselectstart;
+        if (document.ondrag !== undefined) document.ondrag = savedhandlers.ondrag;
+      }
+    });
+  }
+
+  $.plot.plugins.push({
+    init: init,
+    options: {
+      selection: {
+        mode: null, // one of null, "x", "y" or "xy"
+        color: '#e8cfac',
+        shape: 'round', // one of "round", "miter", or "bevel"
+        minSize: 5, // minimum number of pixels
+      },
+    },
+    name: 'selection',
+    version: '1.1',
+  });
+})(window.jQuery);