From 4f85f1bc9d95ef1ec9422c0bf5e4d7bbd5fe40fc Mon Sep 17 00:00:00 2001 From: Iaroslavna Soloveva <90199600+solovevayaroslavna@users.noreply.github.com> Date: Fri, 29 Jul 2022 14:11:11 +0400 Subject: [PATCH] PMM-9987: subtracting-a-minute-for-qan (#1356) * PMM-9987-subtracting-a-minute-for-qan: fix time update logic, removing double requests, subtract minute * PMM-9987-subtracting-a-minute-for-qan: no subtracting from no 'now' mode * PMM-9987-subtracting-a-minute-for-qan: subtract one minute in tests --- .../pmm-qan/panel/provider/provider.tools.ts | 5 ---- .../src/pmm-qan/panel/provider/provider.tsx | 30 +++++++++++++++++-- .../helpers/time-parameters-parser.test.ts | 8 ++--- .../helpers/time-parameters-parser.ts | 4 +-- 4 files changed, 33 insertions(+), 14 deletions(-) diff --git a/pmm-app/src/pmm-qan/panel/provider/provider.tools.ts b/pmm-app/src/pmm-qan/panel/provider/provider.tools.ts index b90795f57e..1a61f5e394 100644 --- a/pmm-app/src/pmm-qan/panel/provider/provider.tools.ts +++ b/pmm-app/src/pmm-qan/panel/provider/provider.tools.ts @@ -1,5 +1,4 @@ import { getLocationSrv } from '@grafana/runtime'; -import { ParseQueryParamDate } from 'shared/components/helpers/time-parameters-parser'; import { ALL_VARIABLE_TEXT, AUTO_VARIABLE_TEXT, @@ -135,10 +134,6 @@ export const refreshGrafanaVariables = (state) => { }; export const parseURL = (query) => ({ - from: ParseQueryParamDate.transform(query.get('from') || 'now-12h', 'from'), - to: ParseQueryParamDate.transform(query.get('to') || 'now', 'to') - .utc() - .format('YYYY-MM-DDTHH:mm:ssZ'), columns: JSON.parse(query.get('columns')) || DEFAULT_COLUMNS, labels: setFilters(query), pageNumber: query.get('page_number') || DEFAULT_PAGE_NUMBER, diff --git a/pmm-app/src/pmm-qan/panel/provider/provider.tsx b/pmm-app/src/pmm-qan/panel/provider/provider.tsx index fcc85dac29..8d936f1a8f 100644 --- a/pmm-app/src/pmm-qan/panel/provider/provider.tsx +++ b/pmm-app/src/pmm-qan/panel/provider/provider.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'; import { omit, isEqual } from 'lodash'; import { parseURL, refreshGrafanaVariables, setLabels } from './provider.tools'; import { QueryAnalyticsContext } from './provider.types'; +import { ParseQueryParamDate } from '../../../shared/components/helpers/time-parameters-parser'; const initialState = {} as QueryAnalyticsContext; @@ -135,6 +136,12 @@ export const UrlParametersProvider = ({ timeRange, children }) => { const query = new URLSearchParams(window.location.search); const searchRef = useRef(null); + const [fromTimeMomentValue, setFromTimeMomentValue] = useState(ParseQueryParamDate.transform( + query.get('from') || 'now-12h', 'from', + ).utc().format('YYYY-MM-DDTHH:mm:ssZ')); + const [toTimeMomentValue, setToTimeMomentValue] = useState(ParseQueryParamDate.transform( + query.get('to') || 'now', 'to', + ).utc().format('YYYY-MM-DDTHH:mm:ssZ')); const [panelState, setContext] = useState({ ...parseURL(query), @@ -142,6 +149,8 @@ export const UrlParametersProvider = ({ timeRange, children }) => { from: timeRange.raw.from, to: timeRange.raw.to, }, + from: fromTimeMomentValue, + to: toTimeMomentValue, search: searchRef.current, }); @@ -173,14 +182,29 @@ export const UrlParametersProvider = ({ timeRange, children }) => { const [to, setTo] = useState(getAbsoluteTime(timeRange.raw.to)); const [previousState, setPreviousState] = useState(panelState); + useEffect(() => { + const newFrom = getAbsoluteTime(timeRange.raw.from); + const newTo = getAbsoluteTime(timeRange.raw.to); + + if (!((from === newFrom) && (to === newTo))) { + if (newTo === 'now') { + setToTimeMomentValue(timeRange.to.utc().subtract(1, 'minute').format('YYYY-MM-DDTHH:mm:ssZ')); + setFromTimeMomentValue(timeRange.from.utc().subtract(1, 'minute').format('YYYY-MM-DDTHH:mm:ssZ')); + } else { + setToTimeMomentValue(timeRange.to.utc().format('YYYY-MM-DDTHH:mm:ssZ')); + setFromTimeMomentValue(timeRange.from.utc().format('YYYY-MM-DDTHH:mm:ssZ')); + } + } + }, [timeRange, from, to]); + useEffect(() => { const newFrom = getAbsoluteTime(timeRange.raw.from); const newTo = getAbsoluteTime(timeRange.raw.to); const newState = { ...panelState, - from: timeRange.from.utc().format('YYYY-MM-DDTHH:mm:ssZ'), - to: timeRange.to.utc().format('YYYY-MM-DDTHH:mm:ssZ'), + from: fromTimeMomentValue, + to: toTimeMomentValue, rawTime: { from: newFrom, to: newTo, @@ -207,7 +231,7 @@ export const UrlParametersProvider = ({ timeRange, children }) => { setFrom(newFrom); setTo(newTo); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [timeRange, from, to]); + }, [fromTimeMomentValue, toTimeMomentValue]); const wrapAction = (key) => (...value) => setContext(actions[key](...value)); diff --git a/pmm-app/src/shared/components/helpers/time-parameters-parser.test.ts b/pmm-app/src/shared/components/helpers/time-parameters-parser.test.ts index 75dfbbb06d..a6e4165da3 100644 --- a/pmm-app/src/shared/components/helpers/time-parameters-parser.test.ts +++ b/pmm-app/src/shared/components/helpers/time-parameters-parser.test.ts @@ -27,15 +27,15 @@ describe('Time parameters parser::', () => { const result2 = ParseQueryParamDate.transform('now/d', 'to'); const result3 = ParseQueryParamDate.transform('now/d', 'from'); - expect(result1.format('YYYY-MM-DDTHH:mm:ss.000')).toStrictEqual('2020-11-15T00:00:59.000'); - expect(result2.format('YYYY-MM-DDTHH:mm:ss.000')).toStrictEqual('2020-11-22T23:59:59.000'); - expect(result3.format('YYYY-MM-DDTHH:mm:ss.000')).toStrictEqual('2020-11-22T00:00:00.000'); + expect(result1.format('YYYY-MM-DDTHH:mm:ss.000')).toStrictEqual('2020-11-14T23:59:59.000'); + expect(result2.format('YYYY-MM-DDTHH:mm:ss.000')).toStrictEqual('2020-11-22T23:58:59.000'); + expect(result3.format('YYYY-MM-DDTHH:mm:ss.000')).toStrictEqual('2020-11-21T23:59:00.000'); }); it('date is now', () => { const result1 = ParseQueryParamDate.transform('now'); - expect(result1.toISOString()).toStrictEqual('2020-11-22T00:00:00.000Z'); + expect(result1.toISOString()).toStrictEqual('2020-11-21T23:59:00.000Z'); }); it('date is incorrect', () => { diff --git a/pmm-app/src/shared/components/helpers/time-parameters-parser.ts b/pmm-app/src/shared/components/helpers/time-parameters-parser.ts index 538c223bb6..a80a67207f 100644 --- a/pmm-app/src/shared/components/helpers/time-parameters-parser.ts +++ b/pmm-app/src/shared/components/helpers/time-parameters-parser.ts @@ -68,14 +68,14 @@ export class ParseQueryParamDate { } if (date === 'now') { - return nowFunc(); + return nowFunc().subtract(1, 'minute'); } if (date.length > 4 && date.startsWith('now')) { // Calculate complex time range, for example 'Week to date' // from=now-5d&to=now-6M ... from=now/w&to=now/w // https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/ - parsedDate = getComplexTimeValue(date, nowFunc, edge); + parsedDate = getComplexTimeValue(date, nowFunc, edge).subtract(1, 'minute'); } else { // expect unix timestamp in milliseconds const isNum = /^\d+$/.test(date);