GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 16:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: export table panel (#3403)

Browse Source 
* fix: export table panel

* fix: create generate link helper

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
Yevhen Shevchenko 2023-08-23 19:44:33 +03:00 committed by GitHub
parent b20fc39e08
commit 02cd069bb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 59 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/constants/panelTypes.ts
View File

@ -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,
];

24
frontend/src/container/LogsExplorerViews/index.tsx
View File

@ -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,
],

3
frontend/src/hooks/dashboard/utils.ts
View File

@ -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,
},
],
},

24
frontend/src/pages/TracesExplorer/index.tsx
View File

@ -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(

23
frontend/src/utils/dashboard/generateExportToDashboardLink.ts Normal file
View File

@ -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))}`;