diff --git a/frontend/src/constants/queryBuilder.ts b/frontend/src/constants/queryBuilder.ts index 9d09cd37ed..7b7b464b3e 100644 --- a/frontend/src/constants/queryBuilder.ts +++ b/frontend/src/constants/queryBuilder.ts @@ -174,8 +174,8 @@ export const initialQueryBuilderFormValues: IBuilderQuery = { sourceNames: alphabet, }), disabled: false, - having: [], stepInterval: 60, + having: [], limit: null, orderBy: [], groupBy: [], diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx index 5143f84f9d..5a4bf13e00 100644 --- a/frontend/src/container/FormAlertRules/index.tsx +++ b/frontend/src/container/FormAlertRules/index.tsx @@ -22,7 +22,6 @@ import PlotTag from 'container/NewWidget/LeftContainer/WidgetGraph/PlotTag'; import { BuilderUnitsFilter } from 'container/QueryBuilder/filters'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl'; -import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; import { MESSAGE, useIsFeatureDisabled } from 'hooks/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; import useUrlQuery from 'hooks/useUrlQuery'; @@ -70,7 +69,7 @@ function FormAlertRules({ // init namespace for translations const { t } = useTranslation('alerts'); - const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector< + const { selectedTime: globalSelectedInterval } = useSelector< AppState, GlobalReducer >((state) => state.globalTime); @@ -191,7 +190,9 @@ function FormAlertRules({ } const query: Query = { ...currentQuery, queryType: val }; - redirectWithQueryBuilderData(updateStepInterval(query, maxTime, minTime)); + // update step interval is removed from here as if the user enters + // any value we will use that rather than auto update + redirectWithQueryBuilderData(query); }; const { notifications } = useNotifications(); @@ -540,7 +541,7 @@ function FormAlertRules({ queryCategory={currentQuery.queryType} setQueryCategory={onQueryCategoryChange} alertType={alertType || AlertTypes.METRICS_BASED_ALERT} - runQuery={handleRunQuery} + runQuery={(): void => handleRunQuery(true)} alertDef={alertDef} panelType={panelType || PANEL_TYPES.TIME_SERIES} key={currentQuery.queryType} diff --git a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx index a1dab3d33f..02d71ed9bb 100644 --- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx +++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx @@ -15,7 +15,6 @@ import { } from 'container/NewWidget/RightContainer/timeItems'; import PanelWrapper from 'container/PanelWrapper/PanelWrapper'; import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange'; -import { useStepInterval } from 'hooks/queryBuilder/useStepInterval'; import { useChartMutable } from 'hooks/useChartMutable'; import useUrlQuery from 'hooks/useUrlQuery'; import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables'; @@ -71,7 +70,7 @@ function FullView({ enum: widget?.timePreferance || 'GLOBAL_TIME', }); - const updatedQuery = useStepInterval(widget?.query); + const updatedQuery = widget?.query; const [requestData, setRequestData] = useState(() => { if (widget.panelTypes !== PANEL_TYPES.LIST) { diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx index a553fe7241..79003af7b8 100644 --- a/frontend/src/container/GridCardLayout/GridCard/index.tsx +++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx @@ -3,7 +3,6 @@ import { QueryParams } from 'constants/query'; import { PANEL_TYPES } from 'constants/queryBuilder'; import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/config'; import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange'; -import { useStepInterval } from 'hooks/queryBuilder/useStepInterval'; import { useIntersectionObserver } from 'hooks/useIntersectionObserver'; import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables'; import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults'; @@ -90,7 +89,7 @@ function GridCardGraph({ } }, [toScrollWidgetId, setToScrollWidgetId, widget.id]); - const updatedQuery = useStepInterval(widget?.query); + const updatedQuery = widget?.query; const isEmptyWidget = widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget); diff --git a/frontend/src/container/LogExplorerQuerySection/index.tsx b/frontend/src/container/LogExplorerQuerySection/index.tsx index 39b027a51d..1eea60da47 100644 --- a/frontend/src/container/LogExplorerQuerySection/index.tsx +++ b/frontend/src/container/LogExplorerQuerySection/index.tsx @@ -47,7 +47,7 @@ function LogExplorerQuerySection({ const isTable = panelTypes === PANEL_TYPES.TABLE; const isList = panelTypes === PANEL_TYPES.LIST; const config: QueryBuilderProps['filterConfigs'] = { - stepInterval: { isHidden: isTable, isDisabled: true }, + stepInterval: { isHidden: isTable, isDisabled: false }, having: { isHidden: isList, isDisabled: true }, filters: { customKey: 'body', diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx index beed344d8b..3f6deab6f8 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx @@ -12,7 +12,6 @@ import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interface import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl'; -import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; import { useIsDarkMode } from 'hooks/useDarkMode'; import useUrlQuery from 'hooks/useUrlQuery'; import { defaultTo } from 'lodash-es'; @@ -33,7 +32,6 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; import { EQueryType } from 'types/common/dashboard'; import AppReducer from 'types/reducer/app'; -import { GlobalReducer } from 'types/reducer/globalTime'; import ClickHouseQueryContainer from './QueryBuilder/clickHouse'; import PromQLQueryContainer from './QueryBuilder/promQL'; @@ -46,10 +44,6 @@ function QuerySection({ const urlQuery = useUrlQuery(); const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys(); - const { minTime, maxTime } = useSelector( - (state) => state.globalTime, - ); - const { featureResponse } = useSelector( (state) => state.app, ); @@ -80,8 +74,6 @@ function QuerySection({ return; } - const updatedQuery = updateStepInterval(query, maxTime, minTime); - const selectedWidgetIndex = getSelectedWidgetIndex( selectedDashboard, selectedWidget.id, @@ -102,18 +94,16 @@ function QuerySection({ ...previousWidgets, { ...selectedWidget, - query: updatedQuery, + query, }, ...nextWidgets, ], }, }); - redirectWithQueryBuilderData(updatedQuery); + redirectWithQueryBuilderData(query); }, [ selectedDashboard, - maxTime, - minTime, selectedWidget, setSelectedDashboard, redirectWithQueryBuilderData, @@ -137,7 +127,7 @@ function QuerySection({ const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => { const config: QueryBuilderProps['filterConfigs'] = { - stepInterval: { isHidden: false, isDisabled: true }, + stepInterval: { isHidden: false, isDisabled: false }, }; return config; diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx index b5c8868184..427b57198c 100644 --- a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx +++ b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx @@ -22,7 +22,6 @@ import { QueryHistoryState } from 'container/LiveLogs/types'; import NewExplorerCTA from 'container/NewExplorerCTA'; import dayjs, { Dayjs } from 'dayjs'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; -import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; import useUrlQuery from 'hooks/useUrlQuery'; import GetMinMax from 'lib/getMinMax'; import getTimeString from 'lib/getTimeString'; @@ -315,8 +314,6 @@ function DateTimeSelection({ return; } - const { maxTime, minTime } = GetMinMax(value, getTime()); - if (!isLogsExplorerPage) { urlQuery.delete('startTime'); urlQuery.delete('endTime'); @@ -333,7 +330,8 @@ function DateTimeSelection({ return; } // the second boolean param directs the qb about the time change so to merge the query and retain the current state - initQueryBuilderData(updateStepInterval(stagedQuery, maxTime, minTime), true); + // we removed update step interval to stop auto updating the value on time change + initQueryBuilderData(stagedQuery, true); }; const onRefreshHandler = (): void => { @@ -383,8 +381,6 @@ function DateTimeSelection({ setIsValidteRelativeTime(true); - const { maxTime, minTime } = GetMinMax(dateTimeStr, getTime()); - if (!isLogsExplorerPage) { urlQuery.delete('startTime'); urlQuery.delete('endTime'); @@ -400,7 +396,8 @@ function DateTimeSelection({ } // the second boolean param directs the qb about the time change so to merge the query and retain the current state - initQueryBuilderData(updateStepInterval(stagedQuery, maxTime, minTime), true); + // we removed update step interval to stop auto updating the value on time change + initQueryBuilderData(stagedQuery, true); }; const getCustomOrIntervalTime = ( diff --git a/frontend/src/container/TracesExplorer/QuerySection/index.tsx b/frontend/src/container/TracesExplorer/QuerySection/index.tsx index 0bd9515720..8f5d2606f0 100644 --- a/frontend/src/container/TracesExplorer/QuerySection/index.tsx +++ b/frontend/src/container/TracesExplorer/QuerySection/index.tsx @@ -19,7 +19,7 @@ function QuerySection(): JSX.Element { const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => { const isList = panelTypes === PANEL_TYPES.LIST; const config: QueryBuilderProps['filterConfigs'] = { - stepInterval: { isHidden: false, isDisabled: true }, + stepInterval: { isHidden: false, isDisabled: false }, limit: { isHidden: isList, isDisabled: true }, having: { isHidden: isList, isDisabled: true }, }; @@ -56,7 +56,7 @@ function QuerySection(): JSX.Element { version="v3" // setting this to v3 as we this is rendered in logs explorer actions={ - diff --git a/frontend/src/hooks/queryBuilder/useStepInterval.ts b/frontend/src/hooks/queryBuilder/useStepInterval.ts index 55dad54664..62f8a0d7c1 100644 --- a/frontend/src/hooks/queryBuilder/useStepInterval.ts +++ b/frontend/src/hooks/queryBuilder/useStepInterval.ts @@ -8,6 +8,7 @@ export const updateStepInterval = ( query: Widgets['query'], maxTime: number, minTime: number, + shallUpdateStepInterval?: boolean, ): Widgets['query'] => { const stepInterval = getStep({ start: minTime, @@ -15,6 +16,14 @@ export const updateStepInterval = ( inputFormat: 'ns', }); + function getStepInterval(customInterval: number): number { + // if user enters some value then auto update should never come + if (shallUpdateStepInterval) { + return customInterval; + } + return stepInterval; + } + return { ...query, builder: { @@ -22,7 +31,7 @@ export const updateStepInterval = ( queryData: query?.builder?.queryData?.map((item) => ({ ...item, - stepInterval, + stepInterval: getStepInterval(item.stepInterval), })) || [], }, }; diff --git a/frontend/src/providers/QueryBuilder.tsx b/frontend/src/providers/QueryBuilder.tsx index 77fa791b14..8d3f1890b8 100644 --- a/frontend/src/providers/QueryBuilder.tsx +++ b/frontend/src/providers/QueryBuilder.tsx @@ -752,26 +752,30 @@ export function QueryBuilderProvider({ [], ); - const handleRunQuery = useCallback(() => { - redirectWithQueryBuilderData({ - ...{ - ...currentQuery, - ...updateStepInterval( - { - builder: currentQuery.builder, - clickhouse_sql: currentQuery.clickhouse_sql, - promql: currentQuery.promql, - id: currentQuery.id, - queryType, - unit: currentQuery.unit, - }, - maxTime, - minTime, - ), - }, - queryType, - }); - }, [currentQuery, queryType, maxTime, minTime, redirectWithQueryBuilderData]); + const handleRunQuery = useCallback( + (shallUpdateStepInterval?: boolean) => { + redirectWithQueryBuilderData({ + ...{ + ...currentQuery, + ...updateStepInterval( + { + builder: currentQuery.builder, + clickhouse_sql: currentQuery.clickhouse_sql, + promql: currentQuery.promql, + id: currentQuery.id, + queryType, + unit: currentQuery.unit, + }, + maxTime, + minTime, + !!shallUpdateStepInterval, + ), + }, + queryType, + }); + }, + [currentQuery, queryType, maxTime, minTime, redirectWithQueryBuilderData], + ); useEffect(() => { if (!compositeQueryParam) return; diff --git a/frontend/src/types/common/queryBuilder.ts b/frontend/src/types/common/queryBuilder.ts index 6ba9faf3be..7d566283e6 100644 --- a/frontend/src/types/common/queryBuilder.ts +++ b/frontend/src/types/common/queryBuilder.ts @@ -222,7 +222,7 @@ export type QueryBuilderContextType = { redirectToUrl?: typeof ROUTES[keyof typeof ROUTES], shallStringify?: boolean, ) => void; - handleRunQuery: () => void; + handleRunQuery: (shallUpdateStepInterval?: boolean) => void; resetQuery: (newCurrentQuery?: QueryState) => void; handleOnUnitsChange: (units: Format['id']) => void; updateAllQueriesOperators: (