UI: Select time range with mouse drag

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

@@ -11,6 +11,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 {
@@ -20,6 +21,7 @@ export interface GraphProps {
   };
   stacked: boolean;
   useLocalTime: boolean;
+  handleTimeRangeSelection: (startTime: number, endTime: number) => void;
   queryParams: QueryParams | null;
 }
 
@@ -66,6 +68,15 @@ class Graph extends PureComponent<GraphProps, GraphState> {
 
   componentDidMount(): void {
     this.plot();
+
+    $(`.graph-chart`).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(): void {

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

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

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

@@ -8,10 +8,17 @@ interface GraphTabContentProps {
   data: any;
   stacked: boolean;
   useLocalTime: boolean;
+  handleTimeRangeSelection: (startTime: number, endTime: number) => void;
   lastQueryParams: QueryParams | null;
 }
 
-export const GraphTabContent: FC<GraphTabContentProps> = ({ data, stacked, useLocalTime, lastQueryParams }) => {
+export const GraphTabContent: FC<GraphTabContentProps> = ({
+  data,
+  stacked,
+  useLocalTime,
+  lastQueryParams,
+  handleTimeRangeSelection,
+}) => {
   if (!isPresent(data)) {
     return <UncontrolledAlert color="light">No data queried yet</UncontrolledAlert>;
   }
@@ -25,5 +32,13 @@ export const GraphTabContent: FC<GraphTabContentProps> = ({ data, stacked, useLo
       </UncontrolledAlert>
     );
   }
-  return <Graph data={data} stacked={stacked} useLocalTime={useLocalTime} queryParams={lastQueryParams} />;
+  return (
+    <Graph
+      data={data}
+      stacked={stacked}
+      useLocalTime={useLocalTime}
+      handleTimeRangeSelection={handleTimeRangeSelection}
+      queryParams={lastQueryParams}
+    />
+  );
 };

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

@@ -425,6 +425,10 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
     }
   };
 
+  handleTimeRangeSelection = (startTime: number, endTime: number) => {
+    this.setOptions({ range: endTime - startTime, endTime: endTime });
+  };
+
   getExplainOutput = (): void => {
     //We need to pass the same parameters as query endpoints, to the explain endpoints.
     const endTime = this.getEndTime().valueOf() / 1000;
@@ -742,6 +746,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
                       data={this.state.data}
                       stacked={options.stacked}
                       useLocalTime={this.props.useLocalTime}
+                      handleTimeRangeSelection={this.handleTimeRangeSelection}
                       lastQueryParams={this.state.lastQueryParams}
                     />
                   </>

pkg/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());
       }
     });

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

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