From 96adc7f61caca961ec01e6e7118f466c4795ed62 Mon Sep 17 00:00:00 2001 From: Rajat Dabade Date: Tue, 12 Sep 2023 11:57:33 +0530 Subject: [PATCH] Save view PRD design changes. (#3480) * refactor: search in dropdown * refactor: name of the view to i18 * refactor: make the use of useForm from antd * refactor: moved QuerySearchParamNames into save view module * refactor: reset to query build when click on explorer link * refactor: save view prd design changes * refactor: reverted resetQuery in querybuilder * refactor: queryParams to query.ts in querybuilder constants * fix: redirect with saved view is updated * refactor: removed useffect logic for updating query --------- Co-authored-by: Palash Gupta --- .../components/ExplorerCard/ExplorerCard.tsx | 45 +++++-------------- .../src/components/ExplorerCard/constants.ts | 12 ++--- frontend/src/components/ExplorerCard/utils.ts | 15 +++---- frontend/src/constants/query.ts | 8 ++++ .../src/constants/queryBuilderQueryNames.ts | 16 ------- frontend/src/container/ExportPanel/index.tsx | 8 ++-- .../GridGraphLayout/WidgetHeader/index.tsx | 10 ++--- .../container/ListAlertRules/ListAlert.tsx | 4 +- .../container/LiveLogs/BackButton/index.tsx | 4 +- .../src/container/LogsExplorerViews/index.tsx | 4 +- frontend/src/container/LogsTopNav/index.tsx | 4 +- .../NewDashboard/ComponentsSlider/index.tsx | 6 +-- .../src/container/PageSizeSelect/index.tsx | 4 +- .../queryBuilder/useGetCompositeQueryParam.ts | 4 +- .../useGetPanelTypesQueryParam.ts | 4 +- .../src/hooks/useHandleExplorerTabChange.ts | 15 +++---- frontend/src/providers/QueryBuilder.tsx | 20 ++++++++- .../store/actions/dashboard/saveDashboard.ts | 4 +- frontend/src/types/common/queryBuilder.ts | 5 +++ .../generateExportToDashboardLink.ts | 3 +- 20 files changed, 88 insertions(+), 107 deletions(-) delete mode 100644 frontend/src/constants/queryBuilderQueryNames.ts diff --git a/frontend/src/components/ExplorerCard/ExplorerCard.tsx b/frontend/src/components/ExplorerCard/ExplorerCard.tsx index 4615eedd5a..0944023b6c 100644 --- a/frontend/src/components/ExplorerCard/ExplorerCard.tsx +++ b/frontend/src/components/ExplorerCard/ExplorerCard.tsx @@ -19,6 +19,7 @@ import { import axios from 'axios'; import TextToolTip from 'components/TextToolTip'; import { SOMETHING_WENT_WRONG } from 'constants/api'; +import { QueryParams } from 'constants/query'; import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useDeleteView } from 'hooks/saveViews/useDeleteView'; @@ -27,14 +28,10 @@ import { useUpdateView } from 'hooks/saveViews/useUpdateView'; import useErrorNotification from 'hooks/useErrorNotification'; import { useNotifications } from 'hooks/useNotifications'; import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useCopyToClipboard } from 'react-use'; -import { - ExploreHeaderToolTip, - querySearchParams, - SaveButtonText, -} from './constants'; +import { ExploreHeaderToolTip, SaveButtonText } from './constants'; import MenuItemGenerator from './MenuItemGenerator'; import SaveViewWithName from './SaveViewWithName'; import { @@ -43,7 +40,7 @@ import { OffSetCol, } from './styles'; import { ExplorerCardProps } from './types'; -import { deleteViewHandler, isQueryUpdatedInView } from './utils'; +import { deleteViewHandler } from './utils'; function ExplorerCard({ sourcepage, @@ -51,7 +48,6 @@ function ExplorerCard({ }: ExplorerCardProps): JSX.Element { const [isOpen, setIsOpen] = useState(false); const [, setCopyUrl] = useCopyToClipboard(); - const [isQueryUpdated, setIsQueryUpdated] = useState(false); const { notifications } = useNotifications(); const onCopyUrlHandler = (): void => { @@ -62,11 +58,11 @@ function ExplorerCard({ }; const { - stagedQuery, currentQuery, panelType, redirectWithQueryBuilderData, updateAllQueriesOperators, + isStagedQueryUpdated, } = useQueryBuilder(); const { @@ -83,10 +79,11 @@ function ExplorerCard({ setIsOpen(newOpen); }; - const viewName = - useGetSearchQueryParam(querySearchParams.viewName) || 'Query Builder'; + const viewName = useGetSearchQueryParam(QueryParams.viewName) || ''; - const viewKey = useGetSearchQueryParam(querySearchParams.viewKey) || ''; + const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || ''; + + const isQueryUpdated = isStagedQueryUpdated(viewsData?.data?.data, viewKey); const { mutateAsync: updateViewAsync } = useUpdateView({ compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType), @@ -128,7 +125,6 @@ function ExplorerCard({ }, { onSuccess: () => { - setIsQueryUpdated(false); notifications.success({ message: 'View Updated Successfully', }); @@ -141,24 +137,6 @@ function ExplorerCard({ ); }; - useEffect(() => { - setIsQueryUpdated( - isQueryUpdatedInView({ - data: viewsData?.data?.data, - stagedQuery, - viewKey, - currentPanelType: panelType, - }), - ); - }, [ - currentQuery, - viewsData?.data?.data, - stagedQuery, - stagedQuery?.builder.queryData, - viewKey, - panelType, - ]); - const moreOptionMenu: MenuProps = { items: [ { @@ -179,7 +157,7 @@ function ExplorerCard({ - {viewName} + Query Builder {viewsData?.data.data.map((view) => ( diff --git a/frontend/src/components/ExplorerCard/constants.ts b/frontend/src/components/ExplorerCard/constants.ts index c6e1fd6a9e..ee06168796 100644 --- a/frontend/src/components/ExplorerCard/constants.ts +++ b/frontend/src/components/ExplorerCard/constants.ts @@ -1,3 +1,5 @@ +import { QueryParams } from 'constants/query'; + export const ExploreHeaderToolTip = { url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder', @@ -9,12 +11,4 @@ export const SaveButtonText = { SAVE_VIEW: 'Save view', }; -export type QuerySearchParamNames = 'viewName' | 'viewKey'; - -export const querySearchParams: Record< - QuerySearchParamNames, - QuerySearchParamNames -> = { - viewName: 'viewName', - viewKey: 'viewKey', -}; +export type QuerySearchParamNames = QueryParams.viewName | QueryParams.viewKey; diff --git a/frontend/src/components/ExplorerCard/utils.ts b/frontend/src/components/ExplorerCard/utils.ts index 012ecd07ee..2fd33b3c7d 100644 --- a/frontend/src/components/ExplorerCard/utils.ts +++ b/frontend/src/components/ExplorerCard/utils.ts @@ -1,12 +1,11 @@ import { NotificationInstance } from 'antd/es/notification/interface'; import axios from 'axios'; import { SOMETHING_WENT_WRONG } from 'constants/api'; +import { QueryParams } from 'constants/query'; import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi'; import isEqual from 'lodash-es/isEqual'; -import { querySearchParams } from './constants'; import { DeleteViewHandlerProps, GetViewDetailsUsingViewKey, @@ -119,9 +118,9 @@ export const saveViewHandler = ({ onSuccess: (data) => { refetchAllView(); redirectWithQueryBuilderData(mapQueryDataFromApi(compositeQuery), { - [queryParamNamesMap.panelTypes]: panelType, - [querySearchParams.viewName]: viewName, - [querySearchParams.viewKey]: data.data.data, + [QueryParams.panelTypes]: panelType, + [QueryParams.viewName]: viewName, + [QueryParams.viewKey]: data.data.data, }); notifications.success({ message: 'View Saved Successfully', @@ -159,9 +158,9 @@ export const deleteViewHandler = ({ sourcePage, ), { - [querySearchParams.viewName]: 'Query Builder', - [queryParamNamesMap.panelTypes]: panelType, - [querySearchParams.viewKey]: '', + [QueryParams.viewName]: '', + [QueryParams.panelTypes]: panelType, + [QueryParams.viewKey]: '', }, ); } diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts index 3d5f1150e3..a35f0223a7 100644 --- a/frontend/src/constants/query.ts +++ b/frontend/src/constants/query.ts @@ -18,4 +18,12 @@ export enum QueryParams { q = 'q', activeLogId = 'activeLogId', timeRange = 'timeRange', + compositeQuery = 'compositeQuery', + panelTypes = 'panelTypes', + pageSize = 'pageSize', + viewMode = 'viewMode', + selectedFields = 'selectedFields', + linesPerRow = 'linesPerRow', + viewName = 'viewName', + viewKey = 'viewKey', } diff --git a/frontend/src/constants/queryBuilderQueryNames.ts b/frontend/src/constants/queryBuilderQueryNames.ts deleted file mode 100644 index b3ee34cf89..0000000000 --- a/frontend/src/constants/queryBuilderQueryNames.ts +++ /dev/null @@ -1,16 +0,0 @@ -type QueryParamNames = - | 'compositeQuery' - | 'panelTypes' - | 'pageSize' - | 'viewMode' - | 'selectedFields' - | 'linesPerRow'; - -export const queryParamNamesMap: Record = { - compositeQuery: 'compositeQuery', - panelTypes: 'panelTypes', - pageSize: 'pageSize', - viewMode: 'viewMode', - selectedFields: 'selectedFields', - linesPerRow: 'linesPerRow', -}; diff --git a/frontend/src/container/ExportPanel/index.tsx b/frontend/src/container/ExportPanel/index.tsx index 8447814fa7..c3751c7e58 100644 --- a/frontend/src/container/ExportPanel/index.tsx +++ b/frontend/src/container/ExportPanel/index.tsx @@ -1,6 +1,6 @@ import { AlertOutlined, AreaChartOutlined } from '@ant-design/icons'; import { Button, Modal, Space } from 'antd'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; +import { QueryParams } from 'constants/query'; import ROUTES from 'constants/routes'; import history from 'lib/history'; import { useCallback, useState } from 'react'; @@ -22,9 +22,9 @@ function ExportPanel({ const onCreateAlertsHandler = useCallback(() => { history.push( - `${ROUTES.ALERTS_NEW}?${ - queryParamNamesMap.compositeQuery - }=${encodeURIComponent(JSON.stringify(query))}`, + `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent( + JSON.stringify(query), + )}`, ); }, [query]); diff --git a/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx b/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx index 0e0829ecce..b5c4b3ffbf 100644 --- a/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx +++ b/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx @@ -8,7 +8,7 @@ import { } from '@ant-design/icons'; import { Dropdown, MenuProps, Tooltip, Typography } from 'antd'; import Spinner from 'components/Spinner'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; +import { QueryParams } from 'constants/query'; import ROUTES from 'constants/routes'; import useComponentPermission from 'hooks/useComponentPermission'; import history from 'lib/history'; @@ -73,7 +73,7 @@ function WidgetHeader({ history.push( `${window.location.pathname}/new?widgetId=${widgetId}&graphType=${ widget.panelTypes - }&${queryParamNamesMap.compositeQuery}=${encodeURIComponent( + }&${QueryParams.compositeQuery}=${encodeURIComponent( JSON.stringify(widget.query), )}`, ); @@ -81,9 +81,9 @@ function WidgetHeader({ const onCreateAlertsHandler = useCallback(() => { history.push( - `${ROUTES.ALERTS_NEW}?${ - queryParamNamesMap.compositeQuery - }=${encodeURIComponent(JSON.stringify(widget.query))}`, + `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent( + JSON.stringify(widget.query), + )}`, ); }, [widget]); diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index b1bfc7f725..7dd1052a67 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -5,7 +5,7 @@ import { ColumnsType } from 'antd/lib/table'; import saveAlertApi from 'api/alerts/save'; import { ResizeTable } from 'components/ResizeTable'; import TextToolTip from 'components/TextToolTip'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; +import { QueryParams } from 'constants/query'; import ROUTES from 'constants/routes'; import useComponentPermission from 'hooks/useComponentPermission'; import useInterval from 'hooks/useInterval'; @@ -76,7 +76,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { history.push( `${ROUTES.EDIT_ALERTS}?ruleId=${record.id.toString()}&${ - queryParamNamesMap.compositeQuery + QueryParams.compositeQuery }=${encodeURIComponent(JSON.stringify(compositeQuery))}`, ); }) diff --git a/frontend/src/container/LiveLogs/BackButton/index.tsx b/frontend/src/container/LiveLogs/BackButton/index.tsx index 4516a86652..5dee8d9546 100644 --- a/frontend/src/container/LiveLogs/BackButton/index.tsx +++ b/frontend/src/container/LiveLogs/BackButton/index.tsx @@ -1,10 +1,10 @@ import { ArrowLeftOutlined } from '@ant-design/icons'; import { Button } from 'antd'; +import { QueryParams } from 'constants/query'; import { initialQueryBuilderFormValuesMap, PANEL_TYPES, } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import ROUTES from 'constants/routes'; import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; @@ -38,7 +38,7 @@ function BackButton(): JSX.Element { const JSONCompositeQuery = encodeURIComponent(JSON.stringify(updatedQuery)); - const path = `${ROUTES.LOGS_EXPLORER}?${queryParamNamesMap.compositeQuery}=${JSONCompositeQuery}`; + const path = `${ROUTES.LOGS_EXPLORER}?${QueryParams.compositeQuery}=${JSONCompositeQuery}`; history.push(path); }, [history, compositeQuery, updateAllQueriesOperators]); diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx index 9331d089d4..a76dd5b77c 100644 --- a/frontend/src/container/LogsExplorerViews/index.tsx +++ b/frontend/src/container/LogsExplorerViews/index.tsx @@ -1,13 +1,13 @@ import { Tabs, TabsProps } from 'antd'; import TabLabel from 'components/TabLabel'; import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes'; +import { QueryParams } from 'constants/query'; import { initialFilters, initialQueriesMap, initialQueryBuilderFormValues, PANEL_TYPES, } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config'; import ExportPanel from 'container/ExportPanel'; import GoToTop from 'container/GoToTop'; @@ -50,7 +50,7 @@ function LogsExplorerViews(): JSX.Element { const { activeLogId, timeRange, onTimeRangeChange } = useCopyLogLink(); const { queryData: pageSize } = useUrlQueryData( - queryParamNamesMap.pageSize, + QueryParams.pageSize, DEFAULT_PER_PAGE_VALUE, ); diff --git a/frontend/src/container/LogsTopNav/index.tsx b/frontend/src/container/LogsTopNav/index.tsx index 462d85a7e9..6bb8f93530 100644 --- a/frontend/src/container/LogsTopNav/index.tsx +++ b/frontend/src/container/LogsTopNav/index.tsx @@ -1,9 +1,9 @@ import { PlayCircleFilled } from '@ant-design/icons'; +import { QueryParams } from 'constants/query'; import { initialQueryBuilderFormValuesMap, PANEL_TYPES, } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import ROUTES from 'constants/routes'; import { @@ -63,7 +63,7 @@ function LogsTopNav(): JSX.Element { const JSONCompositeQuery = encodeURIComponent(JSON.stringify(compositeQuery)); - const path = `${ROUTES.LIVE_LOGS}?${queryParamNamesMap.compositeQuery}=${JSONCompositeQuery}`; + const path = `${ROUTES.LIVE_LOGS}?${QueryParams.compositeQuery}=${JSONCompositeQuery}`; history.push(path, queryHistoryState); }, [history, panelType, queryClient, stagedQuery]); diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx index 9e8526fe5b..da6e28ccca 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx +++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx @@ -1,5 +1,5 @@ +import { QueryParams } from 'constants/query'; import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useNotifications } from 'hooks/useNotifications'; import createQueryParams from 'lib/createQueryParams'; @@ -49,9 +49,7 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element { const queryParams = { graphType: name, widgetId: emptyLayout.i, - [queryParamNamesMap.compositeQuery]: JSON.stringify( - initialQueriesMap.metrics, - ), + [QueryParams.compositeQuery]: JSON.stringify(initialQueriesMap.metrics), }; history.push(`${pathname}/new?${createQueryParams(queryParams)}`); diff --git a/frontend/src/container/PageSizeSelect/index.tsx b/frontend/src/container/PageSizeSelect/index.tsx index 835549ddaa..21e408f4ce 100644 --- a/frontend/src/container/PageSizeSelect/index.tsx +++ b/frontend/src/container/PageSizeSelect/index.tsx @@ -1,5 +1,5 @@ import { Col, Row, Select } from 'antd'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; +import { QueryParams } from 'constants/query'; import { defaultSelectStyle, ITEMS_PER_PAGE_OPTIONS, @@ -14,7 +14,7 @@ function PageSizeSelect({ isShow, }: PageSizeSelectProps): JSX.Element | null { const { redirectWithQuery, queryData: pageSize } = useUrlQueryData( - queryParamNamesMap.pageSize, + QueryParams.pageSize, ITEMS_PER_PAGE_OPTIONS[0], ); diff --git a/frontend/src/hooks/queryBuilder/useGetCompositeQueryParam.ts b/frontend/src/hooks/queryBuilder/useGetCompositeQueryParam.ts index d9060539cc..442531a15b 100644 --- a/frontend/src/hooks/queryBuilder/useGetCompositeQueryParam.ts +++ b/frontend/src/hooks/queryBuilder/useGetCompositeQueryParam.ts @@ -1,4 +1,4 @@ -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; +import { QueryParams } from 'constants/query'; import useUrlQuery from 'hooks/useUrlQuery'; import { useMemo } from 'react'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; @@ -7,7 +7,7 @@ export const useGetCompositeQueryParam = (): Query | null => { const urlQuery = useUrlQuery(); return useMemo(() => { - const compositeQuery = urlQuery.get(queryParamNamesMap.compositeQuery); + const compositeQuery = urlQuery.get(QueryParams.compositeQuery); let parsedCompositeQuery: Query | null = null; try { diff --git a/frontend/src/hooks/queryBuilder/useGetPanelTypesQueryParam.ts b/frontend/src/hooks/queryBuilder/useGetPanelTypesQueryParam.ts index 8b5aed7a44..0a63a3d52e 100644 --- a/frontend/src/hooks/queryBuilder/useGetPanelTypesQueryParam.ts +++ b/frontend/src/hooks/queryBuilder/useGetPanelTypesQueryParam.ts @@ -1,5 +1,5 @@ +import { QueryParams } from 'constants/query'; import { PANEL_TYPES } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import useUrlQuery from 'hooks/useUrlQuery'; import { useMemo } from 'react'; @@ -9,7 +9,7 @@ export const useGetPanelTypesQueryParam = ( const urlQuery = useUrlQuery(); return useMemo(() => { - const panelTypeQuery = urlQuery.get(queryParamNamesMap.panelTypes); + const panelTypeQuery = urlQuery.get(QueryParams.panelTypes); return panelTypeQuery ? JSON.parse(panelTypeQuery) : defaultPanelType; }, [urlQuery, defaultPanelType]); diff --git a/frontend/src/hooks/useHandleExplorerTabChange.ts b/frontend/src/hooks/useHandleExplorerTabChange.ts index 7a6e1020dd..415c4807c8 100644 --- a/frontend/src/hooks/useHandleExplorerTabChange.ts +++ b/frontend/src/hooks/useHandleExplorerTabChange.ts @@ -1,6 +1,5 @@ -import { querySearchParams } from 'components/ExplorerCard/constants'; +import { QueryParams } from 'constants/query'; import { initialAutocompleteData, PANEL_TYPES } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import { SIGNOZ_VALUE } from 'container/QueryBuilder/filters/OrderByFilter/constants'; import { useCallback } from 'react'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; @@ -23,9 +22,9 @@ export const useHandleExplorerTabChange = (): { updateQueriesData, } = useQueryBuilder(); - const viewName = useGetSearchQueryParam(querySearchParams.viewName) || ''; + const viewName = useGetSearchQueryParam(QueryParams.viewName) || ''; - const viewKey = useGetSearchQueryParam(querySearchParams.viewKey) || ''; + const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || ''; const getUpdateQuery = useCallback( (newPanelType: PANEL_TYPES): Query => { @@ -60,12 +59,12 @@ export const useHandleExplorerTabChange = (): { const query = currentQueryData?.query || getUpdateQuery(newPanelType); redirectWithQueryBuilderData(query, { - [queryParamNamesMap.panelTypes]: newPanelType, - [querySearchParams.viewName]: currentQueryData?.name || viewName, - [querySearchParams.viewKey]: currentQueryData?.uuid || viewKey, + [QueryParams.panelTypes]: newPanelType, + [QueryParams.viewName]: currentQueryData?.name || viewName, + [QueryParams.viewKey]: currentQueryData?.uuid || viewKey, }); }, - [getUpdateQuery, panelType, redirectWithQueryBuilderData, viewKey, viewName], + [panelType, getUpdateQuery, redirectWithQueryBuilderData, viewName, viewKey], ); return { handleExplorerTabChange }; diff --git a/frontend/src/providers/QueryBuilder.tsx b/frontend/src/providers/QueryBuilder.tsx index a95d02b71e..593bc642fd 100644 --- a/frontend/src/providers/QueryBuilder.tsx +++ b/frontend/src/providers/QueryBuilder.tsx @@ -1,3 +1,5 @@ +import { isQueryUpdatedInView } from 'components/ExplorerCard/utils'; +import { QueryParams } from 'constants/query'; import { alphabet, baseAutoCompleteIdKeysOrder, @@ -13,7 +15,6 @@ import { MAX_QUERIES, PANEL_TYPES, } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam'; import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; import useUrlQuery from 'hooks/useUrlQuery'; @@ -42,6 +43,7 @@ import { Query, QueryState, } from 'types/api/queryBuilder/queryBuilderData'; +import { ViewProps } from 'types/api/saveViews/types'; import { EQueryType } from 'types/common/dashboard'; import { DataSource, @@ -73,6 +75,7 @@ export const QueryBuilderContext = createContext({ updateQueriesData: () => initialQueriesMap.metrics, initQueryBuilderData: () => {}, handleOnUnitsChange: () => {}, + isStagedQueryUpdated: () => false, }); export function QueryBuilderProvider({ @@ -449,6 +452,17 @@ export function QueryBuilderProvider({ [updateQueryBuilderData], ); + const isStagedQueryUpdated = useCallback( + (viewData: ViewProps[] | undefined, viewKey: string): boolean => + isQueryUpdatedInView({ + currentPanelType: panelType, + data: viewData, + stagedQuery, + viewKey, + }), + [panelType, stagedQuery], + ); + const redirectWithQueryBuilderData = useCallback( (query: Partial, searchParams?: Record) => { const queryType = @@ -481,7 +495,7 @@ export function QueryBuilderProvider({ }; urlQuery.set( - queryParamNamesMap.compositeQuery, + QueryParams.compositeQuery, encodeURIComponent(JSON.stringify(currentGeneratedQuery)), ); @@ -613,6 +627,7 @@ export function QueryBuilderProvider({ updateQueriesData, initQueryBuilderData, handleOnUnitsChange, + isStagedQueryUpdated, }), [ query, @@ -635,6 +650,7 @@ export function QueryBuilderProvider({ updateQueriesData, initQueryBuilderData, handleOnUnitsChange, + isStagedQueryUpdated, ], ); diff --git a/frontend/src/store/actions/dashboard/saveDashboard.ts b/frontend/src/store/actions/dashboard/saveDashboard.ts index 1339a3a7b8..614c66b18c 100644 --- a/frontend/src/store/actions/dashboard/saveDashboard.ts +++ b/frontend/src/store/actions/dashboard/saveDashboard.ts @@ -1,8 +1,8 @@ import { notification } from 'antd'; import updateDashboardApi from 'api/dashboard/update'; import { AxiosError } from 'axios'; +import { QueryParams } from 'constants/query'; import { PANEL_TYPES } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import ROUTES from 'constants/routes'; import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; import history from 'lib/history'; @@ -88,7 +88,7 @@ export const SaveDashboard = ({ }; const allLayout = getAllLayout(); const params = new URLSearchParams(window.location.search); - const compositeQuery = params.get(queryParamNamesMap.compositeQuery); + const compositeQuery = params.get(QueryParams.compositeQuery); const { maxTime, minTime } = store.getState().globalTime; const query = compositeQuery ? updateStepInterval( diff --git a/frontend/src/types/common/queryBuilder.ts b/frontend/src/types/common/queryBuilder.ts index eaed61da34..6916d7fed2 100644 --- a/frontend/src/types/common/queryBuilder.ts +++ b/frontend/src/types/common/queryBuilder.ts @@ -8,6 +8,7 @@ import { Query, QueryState, } from 'types/api/queryBuilder/queryBuilderData'; +import { ViewProps } from 'types/api/saveViews/types'; import { EQueryType } from './dashboard'; @@ -204,6 +205,10 @@ export type QueryBuilderContextType = { ) => QueryBuilderData[T][number], ) => Query; initQueryBuilderData: (query: Query) => void; + isStagedQueryUpdated: ( + viewData: ViewProps[] | undefined, + viewKey: string, + ) => boolean; }; export type QueryAdditionalFilter = { diff --git a/frontend/src/utils/dashboard/generateExportToDashboardLink.ts b/frontend/src/utils/dashboard/generateExportToDashboardLink.ts index c8b85166af..6dac5c97c2 100644 --- a/frontend/src/utils/dashboard/generateExportToDashboardLink.ts +++ b/frontend/src/utils/dashboard/generateExportToDashboardLink.ts @@ -1,6 +1,5 @@ import { QueryParams } from 'constants/query'; import { PANEL_TYPES } from 'constants/queryBuilder'; -import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import ROUTES from 'constants/routes'; import { generatePath } from 'react-router-dom'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; @@ -19,5 +18,5 @@ export const generateExportToDashboardLink = ({ `${generatePath(ROUTES.DASHBOARD, { dashboardId, })}/new?${QueryParams.graphType}=${panelType}&${QueryParams.widgetId}=empty&${ - queryParamNamesMap.compositeQuery + QueryParams.compositeQuery }=${encodeURIComponent(JSON.stringify(query))}`;