Merge #66321

66321: ui: drag-to-select time range on custom charts page r=elkmaster a=elkmaster provide missing props to make custom chart drag-to-select feature work the same as on the main metrics page Resolves: #64792 Release note(ui): add drag-to-select timescale feature to custom charts page Co-authored-by: Vlad Los <[email protected]>
cockroachdb · Jun 24, 2021 · f661758 · f661758
2 parents 663a44a + a451751
commit f661758
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/pkg/ui/src/views/cluster/components/linegraph/index.tsx b/pkg/ui/src/views/cluster/components/linegraph/index.tsx
@@ -404,6 +404,7 @@ export class LineGraph extends React.Component<LineGraphProps, {}> {
   // TODO(davidh): figure out why the timescale doesn't get more granular
   // automatically when a narrower time frame is selected.
   setNewTimeRange(startMillis: number, endMillis: number) {
+    if (startMillis === endMillis) return;
     const start = MilliToSeconds(startMillis);
     const end = MilliToSeconds(endMillis);
     this.props.setTimeRange({

diff --git a/pkg/ui/src/views/reports/containers/customChart/index.tsx b/pkg/ui/src/views/reports/containers/customChart/index.tsx
@@ -40,13 +40,22 @@ import { INodeStatus } from "src/util/proto";
 import { CustomChartState, CustomChartTable } from "./customMetric";
 import "./customChart.styl";
 import { queryByName } from "src/util/query";
+import { PayloadAction } from "src/interfaces/action";
+import {
+  TimeWindow,
+  TimeScale,
+  setTimeRange,
+  setTimeScale,
+} from "src/redux/timewindow";
 
 export interface CustomChartProps {
   refreshNodes: typeof refreshNodes;
   nodesQueryValid: boolean;
   nodesSummary: NodesSummary;
   refreshMetricMetadata: typeof refreshMetricMetadata;
   metricsMetadata: MetricsMetadata;
+  setTimeRange: (tw: TimeWindow) => PayloadAction<TimeWindow>;
+  setTimeScale: (ts: TimeScale) => PayloadAction<TimeScale>;
 }
 
 interface UrlState {
@@ -193,7 +202,12 @@ export class CustomChart extends React.Component<
     const { nodesSummary } = this.props;
 
     return (
-      <MetricsDataProvider id={`debug-custom-chart.${index}`} key={index}>
+      <MetricsDataProvider
+        id={`debug-custom-chart.${index}`}
+        key={index}
+        setTimeRange={this.props.setTimeRange}
+        setTimeScale={this.props.setTimeScale}
+      >
         <LineGraph>
           <Axis units={units}>
             {metrics.map((m, i) => {
@@ -313,6 +327,8 @@ const mapStateToProps = (state: AdminUIState) => ({
 const mapDispatchToProps = {
   refreshNodes,
   refreshMetricMetadata,
+  setTimeRange,
+  setTimeScale,
 };
 
 export default withRouter(