From df213926e3db6b9fad3d71e5bb25c511ffe4b8c2 Mon Sep 17 00:00:00 2001 From: Santamaura Date: Wed, 22 Sep 2021 13:57:05 -0700 Subject: [PATCH] ui: fix drag-to-zoom granularity issue This PR addresses the issue where a user drags-to-zoom on a small timeframe and the resulting graphs retain the previous timewindow's sample size. This is due to the MetricsDataProvider component prematurely requesting a set of timeseries query data before the redux store can update the timescale sample size. The PR solves the issue by using the currentwindow state as the source of truth for the timescale sample size. Release note (ui change): fix drag-to-zoom granularity issue --- .../containers/metricDataProvider/index.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx b/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx index 5d47ab46893d..470e2293a213 100644 --- a/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx +++ b/pkg/ui/workspaces/db-console/src/views/shared/containers/metricDataProvider/index.tsx @@ -20,7 +20,7 @@ import { requestMetrics as requestMetricsAction, } from "src/redux/metrics"; import { AdminUIState } from "src/redux/state"; -import { MilliToNano } from "src/util/convert"; +import { MilliToNano, MilliToSeconds } from "src/util/convert"; import { findChildrenOfType } from "src/util/find"; import { Metric, @@ -29,7 +29,11 @@ import { QueryTimeInfo, } from "src/views/shared/components/metricQuery"; import { PayloadAction } from "src/interfaces/action"; -import { TimeWindow, TimeScale } from "src/redux/timewindow"; +import { + TimeWindow, + TimeScale, + findClosestTimeScale, +} from "src/redux/timewindow"; import { History } from "history"; import { refreshSettings } from "src/redux/apiReducers"; @@ -249,11 +253,20 @@ const timeInfoSelector = createSelector( if (!_.isObject(tw.currentWindow)) { return null; } + + // It is possible for the currentWindow and scale to be out of sync due to + // the flow of some events such as drag-to-zoom. Thus, the source of truth for + // scale here should be based on the currentWindow. + const { currentWindow } = tw; + const start = currentWindow.start.valueOf(); + const end = currentWindow.end.valueOf(); + const syncedScale = findClosestTimeScale(MilliToSeconds(end - start)); + return { - start: Long.fromNumber(MilliToNano(tw.currentWindow.start.valueOf())), - end: Long.fromNumber(MilliToNano(tw.currentWindow.end.valueOf())), + start: Long.fromNumber(MilliToNano(start)), + end: Long.fromNumber(MilliToNano(end)), sampleDuration: Long.fromNumber( - MilliToNano(tw.scale.sampleSize.asMilliseconds()), + MilliToNano(syncedScale.sampleSize.asMilliseconds()), ), }; },