From 02cd069bb2d9a0af3465d1c258bed762dde997b1 Mon Sep 17 00:00:00 2001 From: Yevhen Shevchenko <90138953+yeshev@users.noreply.github.com> Date: Wed, 23 Aug 2023 19:44:33 +0300 Subject: [PATCH] fix: export table panel (#3403) * fix: export table panel * fix: create generate link helper --------- Co-authored-by: Vishal Sharma Co-authored-by: Palash Gupta --- frontend/src/constants/panelTypes.ts | 5 ++++ .../src/container/LogsExplorerViews/index.tsx | 24 ++++++++++++------- frontend/src/hooks/dashboard/utils.ts | 3 ++- frontend/src/pages/TracesExplorer/index.tsx | 24 +++++++++++-------- .../generateExportToDashboardLink.ts | 23 ++++++++++++++++++ 5 files changed, 59 insertions(+), 20 deletions(-) create mode 100644 frontend/src/utils/dashboard/generateExportToDashboardLink.ts diff --git a/frontend/src/constants/panelTypes.ts b/frontend/src/constants/panelTypes.ts index 811e06f0d0..93d66e5019 100644 --- a/frontend/src/constants/panelTypes.ts +++ b/frontend/src/constants/panelTypes.ts @@ -12,3 +12,8 @@ export const PANEL_TYPES_COMPONENT_MAP = { [PANEL_TYPES.LIST]: null, [PANEL_TYPES.EMPTY_WIDGET]: null, } as const; + +export const AVAILABLE_EXPORT_PANEL_TYPES = [ + PANEL_TYPES.TIME_SERIES, + PANEL_TYPES.TABLE, +]; diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx index 51244e7959..fac0441486 100644 --- a/frontend/src/container/LogsExplorerViews/index.tsx +++ b/frontend/src/container/LogsExplorerViews/index.tsx @@ -1,6 +1,6 @@ import { Tabs, TabsProps } from 'antd'; import TabLabel from 'components/TabLabel'; -import { QueryParams } from 'constants/query'; +import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes'; import { initialAutocompleteData, initialFilters, @@ -9,7 +9,6 @@ import { PANEL_TYPES, } from 'constants/queryBuilder'; import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; -import ROUTES from 'constants/routes'; import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config'; import ExportPanel from 'container/ExportPanel'; import GoToTop from 'container/GoToTop'; @@ -30,7 +29,7 @@ import useUrlQueryData from 'hooks/useUrlQueryData'; import { getPaginationQueryData } from 'lib/newQueryBuilder/getPaginationQueryData'; import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; -import { generatePath, useHistory } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { AppState } from 'store/reducers'; import { Dashboard } from 'types/api/dashboard/getAll'; import { ILog } from 'types/api/logs/log'; @@ -42,6 +41,7 @@ import { } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource, StringOperators } from 'types/common/queryBuilder'; import { GlobalReducer } from 'types/reducer/globalTime'; +import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink'; import { ActionsWrapper } from './LogsExplorerViews.styled'; @@ -299,11 +299,16 @@ function LogsExplorerViews(): JSX.Element { const handleExport = useCallback( (dashboard: Dashboard | null): void => { - if (!dashboard) return; + if (!dashboard || !panelType) return; + + const panelTypeParam = AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType) + ? panelType + : PANEL_TYPES.TIME_SERIES; const updatedDashboard = addEmptyWidgetInDashboardJSONWithQuery( dashboard, exportDefaultQuery, + panelTypeParam, ); updateDashboard(updatedDashboard, { @@ -332,11 +337,11 @@ function LogsExplorerViews(): JSX.Element { return; } - const dashboardEditView = `${generatePath(ROUTES.DASHBOARD, { - dashboardId: data?.payload?.uuid, - })}/new?${QueryParams.graphType}=graph&${QueryParams.widgetId}=empty&${ - queryParamNamesMap.compositeQuery - }=${encodeURIComponent(JSON.stringify(exportDefaultQuery))}`; + const dashboardEditView = generateExportToDashboardLink({ + query: exportDefaultQuery, + panelType: panelTypeParam, + dashboardId: data.payload?.uuid || '', + }); history.push(dashboardEditView); }, @@ -347,6 +352,7 @@ function LogsExplorerViews(): JSX.Element { exportDefaultQuery, history, notifications, + panelType, updateDashboard, handleAxisError, ], diff --git a/frontend/src/hooks/dashboard/utils.ts b/frontend/src/hooks/dashboard/utils.ts index ea2457daa8..84fa59332d 100644 --- a/frontend/src/hooks/dashboard/utils.ts +++ b/frontend/src/hooks/dashboard/utils.ts @@ -5,6 +5,7 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData'; export const addEmptyWidgetInDashboardJSONWithQuery = ( dashboard: Dashboard, query: Query, + panelTypes?: PANEL_TYPES, ): Dashboard => ({ ...dashboard, data: { @@ -30,7 +31,7 @@ export const addEmptyWidgetInDashboardJSONWithQuery = ( opacity: '', title: '', timePreferance: 'GLOBAL_TIME', - panelTypes: PANEL_TYPES.TIME_SERIES, + panelTypes: panelTypes || PANEL_TYPES.TIME_SERIES, }, ], }, diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx index 6cb81093f3..6a89825fd1 100644 --- a/frontend/src/pages/TracesExplorer/index.tsx +++ b/frontend/src/pages/TracesExplorer/index.tsx @@ -1,14 +1,13 @@ import { Tabs } from 'antd'; import axios from 'axios'; import ExplorerCard from 'components/ExplorerCard'; -import { QueryParams } from 'constants/query'; +import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes'; import { initialAutocompleteData, initialQueriesMap, PANEL_TYPES, } from 'constants/queryBuilder'; import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; -import ROUTES from 'constants/routes'; import ExportPanel from 'container/ExportPanel'; import { SIGNOZ_VALUE } from 'container/QueryBuilder/filters/OrderByFilter/constants'; import QuerySection from 'container/TracesExplorer/QuerySection'; @@ -19,10 +18,10 @@ import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; import { useCallback, useEffect, useMemo } from 'react'; -import { generatePath } from 'react-router-dom'; import { Dashboard } from 'types/api/dashboard/getAll'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; +import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink'; import { ActionsWrapper, Container } from './styles'; import { getTabsItems } from './utils'; @@ -95,11 +94,16 @@ function TracesExplorer(): JSX.Element { const handleExport = useCallback( (dashboard: Dashboard | null): void => { - if (!dashboard) return; + if (!dashboard || !panelType) return; + + const panelTypeParam = AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType) + ? panelType + : PANEL_TYPES.TIME_SERIES; const updatedDashboard = addEmptyWidgetInDashboardJSONWithQuery( dashboard, exportDefaultQuery, + panelTypeParam, ); updateDashboard(updatedDashboard, { @@ -127,11 +131,11 @@ function TracesExplorer(): JSX.Element { return; } - const dashboardEditView = `${generatePath(ROUTES.DASHBOARD, { - dashboardId: data?.payload?.uuid, - })}/new?${QueryParams.graphType}=graph&${QueryParams.widgetId}=empty&${ - queryParamNamesMap.compositeQuery - }=${encodeURIComponent(JSON.stringify(exportDefaultQuery))}`; + const dashboardEditView = generateExportToDashboardLink({ + query: exportDefaultQuery, + panelType: panelTypeParam, + dashboardId: data.payload?.uuid || '', + }); history.push(dashboardEditView); }, @@ -144,7 +148,7 @@ function TracesExplorer(): JSX.Element { }, }); }, - [exportDefaultQuery, notifications, updateDashboard], + [exportDefaultQuery, notifications, panelType, updateDashboard], ); const getUpdateQuery = useCallback( diff --git a/frontend/src/utils/dashboard/generateExportToDashboardLink.ts b/frontend/src/utils/dashboard/generateExportToDashboardLink.ts new file mode 100644 index 0000000000..c8b85166af --- /dev/null +++ b/frontend/src/utils/dashboard/generateExportToDashboardLink.ts @@ -0,0 +1,23 @@ +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'; + +type GenerateExportToDashboardLinkParams = { + dashboardId: string; + panelType: PANEL_TYPES; + query: Query; +}; + +export const generateExportToDashboardLink = ({ + query, + dashboardId, + panelType, +}: GenerateExportToDashboardLinkParams): string => + `${generatePath(ROUTES.DASHBOARD, { + dashboardId, + })}/new?${QueryParams.graphType}=${panelType}&${QueryParams.widgetId}=empty&${ + queryParamNamesMap.compositeQuery + }=${encodeURIComponent(JSON.stringify(query))}`;