GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-09-13 17:23:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: added the share link for view widget mode (#4052)

Browse Source
This commit is contained in:
Palash Gupta 2023-11-28 13:33:39 +05:30 committed by GitHub
parent 5e0b6366cc
commit 780a863943
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/constants/query.ts
View File

@ -26,4 +26,5 @@ export enum QueryParams {
linesPerRow = 'linesPerRow', linesPerRow = 'linesPerRow',
viewName = 'viewName', viewName = 'viewName',
viewKey = 'viewKey', viewKey = 'viewKey',
expandedWidgetId = 'expandedWidgetId',
} }

23
frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
View File

@ -1,9 +1,11 @@
import { Skeleton, Typography } from 'antd'; import { Skeleton, Typography } from 'antd';
import { ToggleGraphProps } from 'components/Graph/types'; import { ToggleGraphProps } from 'components/Graph/types';
import { SOMETHING_WENT_WRONG } from 'constants/api'; import { SOMETHING_WENT_WRONG } from 'constants/api';
import { QueryParams } from 'constants/query';
import GridPanelSwitch from 'container/GridPanelSwitch'; import GridPanelSwitch from 'container/GridPanelSwitch';
import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard'; import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
import useUrlQuery from 'hooks/useUrlQuery';
import createQueryParams from 'lib/createQueryParams'; import createQueryParams from 'lib/createQueryParams';
import history from 'lib/history'; import history from 'lib/history';
import { useDashboard } from 'providers/Dashboard/Dashboard'; import { useDashboard } from 'providers/Dashboard/Dashboard';
@ -43,11 +45,14 @@ function WidgetGraphComponent({
onDragSelect, onDragSelect,
}: WidgetGraphComponentProps): JSX.Element { }: WidgetGraphComponentProps): JSX.Element {
const [deleteModal, setDeleteModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false);
const [modal, setModal] = useState<boolean>(false);
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false);
const { notifications } = useNotifications(); const { notifications } = useNotifications();
const { pathname } = useLocation(); const { pathname } = useLocation();
const params = useUrlQuery();
const isFullViewOpen = params.get(QueryParams.expandedWidgetId) === widget.id;
const lineChartRef = useRef<ToggleGraphProps>(); const lineChartRef = useRef<ToggleGraphProps>();
const graphRef = useRef<HTMLDivElement>(null); const graphRef = useRef<HTMLDivElement>(null);
@ -175,7 +180,14 @@ function WidgetGraphComponent({
}; };
const handleOnView = (): void => { const handleOnView = (): void => {
onToggleModal(setModal); const queryParams = {
[QueryParams.expandedWidgetId]: widget.id,
};
history.push({
pathname,
search: createQueryParams(queryParams),
});
}; };
const handleOnDelete = (): void => { const handleOnDelete = (): void => {
@ -187,7 +199,10 @@ function WidgetGraphComponent({
}; };
const onToggleModelHandler = (): void => { const onToggleModelHandler = (): void => {
onToggleModal(setModal); history.push({
pathname,
search: createQueryParams({}),
});
}; };
if (queryResponse.isLoading || queryResponse.status === 'idle') { if (queryResponse.isLoading || queryResponse.status === 'idle') {
@ -236,7 +251,7 @@ function WidgetGraphComponent({
title={widget?.title || 'View'} title={widget?.title || 'View'}
footer={[]} footer={[]}
centered centered
open={modal} open={isFullViewOpen}
onCancel={onToggleModelHandler} onCancel={onToggleModelHandler}
width="85%" width="85%"
destroyOnClose destroyOnClose

3
frontend/src/container/ListOfDashboard/index.tsx
View File

@ -29,9 +29,9 @@ import { ButtonContainer, NewDashboardButton, TableContainer } from './styles';
import DeleteButton from './TableComponents/DeleteButton'; import DeleteButton from './TableComponents/DeleteButton';
import Name from './TableComponents/Name'; import Name from './TableComponents/Name';
function ListOfAllDashboard(): JSX.Element {
const { Search } = Input; const { Search } = Input;
function ListOfAllDashboard(): JSX.Element {
const { const {
data: dashboardListResponse = [], data: dashboardListResponse = [],
isLoading: isDashboardListLoading, isLoading: isDashboardListLoading,
@ -321,7 +321,6 @@ function ListOfAllDashboard(): JSX.Element {
</Row> </Row>
), ),
[ [
Search,
isDashboardListLoading, isDashboardListLoading,
handleSearch, handleSearch,
isFilteringDashboards, isFilteringDashboards,

4
frontend/src/lib/createQueryParams.ts
View File

@ -1,4 +1,6 @@
const createQueryParams = (params: { [x: string]: string | number }): string => const createQueryParams = (params: {
[x: string]: string | number | undefined;
}): string =>
Object.keys(params) Object.keys(params)
.map( .map(
(k) => `${encodeURIComponent(k)}=${encodeURIComponent(String(params[k]))}`, (k) => `${encodeURIComponent(k)}=${encodeURIComponent(String(params[k]))}`,