UI: Select time range with mouse drag feature (#7853)

* UI: Select time range with mouse drag

Signed-off-by: Yu Long <yu.long@databricks.com>

* QueryFrontend: pass "stats" parameter forward (#7852)

If a querier sees a "stats" parameter in the query request, it will attach important information about the query execution to the response.
But currently, even if an user sets this value, the Query Frontend will lose this value in its middleware/roundtrippers.

This PR fixes this problem by properly encoding/decoding the requests in QFE.

Signed-off-by: Pedro Tanaka <pedro.tanaka@shopify.com>
Signed-off-by: Yu Long <yu.long@databricks.com>

* build(deps): bump go.opentelemetry.io/otel/bridge/opentracing (#7851)

Bumps [go.opentelemetry.io/otel/bridge/opentracing](https://github.com/open-telemetry/opentelemetry-go) from 1.29.0 to 1.31.0.
- [Release notes](https://github.com/open-telemetry/opentelemetry-go/releases)
- [Changelog](https://github.com/open-telemetry/opentelemetry-go/blob/main/CHANGELOG.md)
- [Commits](open-telemetry/opentelemetry-go@v1.29.0...v1.31.0)

---
updated-dependencies:
- dependency-name: go.opentelemetry.io/otel/bridge/opentracing
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Signed-off-by: Yu Long <yu.long@databricks.com>

* Update CHANGELOG

Signed-off-by: Yu Long <yu.long@databricks.com>

* Apply fix to linter error (from orig prom PR)

Signed-off-by: Yu Long <yu.long@databricks.com>

* Fix not-null assertion bug from orig PR

Signed-off-by: Yu Long <yu.long@databricks.com>

* Commit generated files

Signed-off-by: Yu Long <yu.long@databricks.com>

* Fix unit test

Signed-off-by: Yu Long <yu.long@databricks.com>

---------

Signed-off-by: Yu Long <yu.long@databricks.com>
Signed-off-by: Pedro Tanaka <pedro.tanaka@shopify.com>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Yu Long <yu.long@databricks.com>
Co-authored-by: Pedro Tanaka <pedro.tanaka@shopify.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -32,6 +32,7 @@ We use *breaking :warning:* to mark changes that are not backward compatible (re
 - [#7560](https://github.com/thanos-io/thanos/pull/7560) Query: Added the possibility of filtering rules by rule_name, rule_group or file to HTTP api.
 - [#7652](https://github.com/thanos-io/thanos/pull/7652) Store: Implement metadata API limit in stores.
 - [#7659](https://github.com/thanos-io/thanos/pull/7659) Receive: Add support for replication using [Cap'n Proto](https://capnproto.org/). This protocol has a lower CPU and memory footprint, which leads to a reduction in resource usage in Receivers. Before enabling it, make sure that all receivers are updated to a version which supports this replication method.
+- [#7853](https://github.com/thanos-io/thanos/pull/7853) UI: Add support for selecting graph time range with mouse drag.
 
 ### Changed
 

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.test.ts

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

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

@@ -78,8 +78,11 @@ class TimeInput extends Component<TimeInputProps> {
       defaultDate: this.props.time,
     });
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     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() ?? 0)) {
         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;
+    };
   }
 }