From 1c5c65ddf7a58ec535ab0d37870271d60d938fac Mon Sep 17 00:00:00 2001 From: palash-signoz Date: Tue, 22 Mar 2022 21:56:12 +0530 Subject: [PATCH] bug: useHistory is removed and dashboard loading component is removed (#802) * bug: useHistory is removed and dashboard loading component is removed * chore: new dashboard is updated * chore: new dashboard is updated * chore: sidenav is updated * chore: getX console is removed * chore: sidenav is updated with correct pathname --- .../container/GridGraphLayout/Graph/Bar/index.tsx | 15 +++++++-------- frontend/src/container/GridGraphLayout/index.tsx | 8 +++++--- frontend/src/container/Header/index.tsx | 6 ++---- frontend/src/container/ListOfDashboard/index.tsx | 13 +++++++------ .../MetricsApplication/TopEndpointsTable.tsx | 4 ++-- .../NewDashboard/ComponentsSlider/index.tsx | 5 +++-- frontend/src/container/NewWidget/index.tsx | 8 ++++---- frontend/src/container/SideNav/index.tsx | 5 +++-- frontend/src/pages/Dashboard/index.tsx | 13 +------------ frontend/src/pages/DashboardWidget/index.tsx | 13 ++++--------- .../actions/dashboard/applySettingsToPanel.ts | 1 + 11 files changed, 39 insertions(+), 52 deletions(-) diff --git a/frontend/src/container/GridGraphLayout/Graph/Bar/index.tsx b/frontend/src/container/GridGraphLayout/Graph/Bar/index.tsx index 82c36c878c..7214d4839e 100644 --- a/frontend/src/container/GridGraphLayout/Graph/Bar/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/Bar/index.tsx @@ -3,8 +3,8 @@ import { EditFilled, FullscreenOutlined, } from '@ant-design/icons'; -import React, { useCallback } from 'react'; -import { useHistory, useLocation } from 'react-router'; +import history from 'lib/history'; +import React from 'react'; import { Widgets } from 'types/api/dashboard/getAll'; import { Container } from './styles'; @@ -14,13 +14,12 @@ function Bar({ onViewFullScreenHandler, onDeleteHandler, }: BarProps): JSX.Element { - const { push } = useHistory(); - const { pathname } = useLocation(); - - const onEditHandler = useCallback(() => { + const onEditHandler = (): void => { const widgetId = widget.id; - push(`${pathname}/new?widgetId=${widgetId}&graphType=${widget.panelTypes}`); - }, [push, pathname, widget]); + history.push( + `${window.location.pathname}/new?widgetId=${widgetId}&graphType=${widget.panelTypes}`, + ); + }; return ( diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx index 7bb6e4a5cf..8f5ad14080 100644 --- a/frontend/src/container/GridGraphLayout/index.tsx +++ b/frontend/src/container/GridGraphLayout/index.tsx @@ -1,12 +1,16 @@ +/* eslint-disable react/jsx-no-useless-fragment */ +/* eslint-disable react/no-unstable-nested-components */ /* eslint-disable react/display-name */ import { SaveFilled } from '@ant-design/icons'; import { notification } from 'antd'; import updateDashboardApi from 'api/dashboard/update'; import Spinner from 'components/Spinner'; import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; +import history from 'lib/history'; import React, { memo, useCallback, useEffect, useRef, useState } from 'react'; import { Layout } from 'react-grid-layout'; import { useSelector } from 'react-redux'; +import { useLocation } from 'react-router-dom'; import { AppState } from 'store/reducers'; import DashboardReducer from 'types/reducer/dashboards'; import { v4 } from 'uuid'; @@ -97,15 +101,13 @@ function GridGraph(): JSX.Element { setLayout(() => { const getX = (): number => { if (preLayouts && preLayouts?.length > 0) { - const last = preLayouts[preLayouts?.length - 1]; + const last = preLayouts[(preLayouts?.length || 0) - 1]; return (last.w + last.x) % 12; } return 0; }; - console.log({ x: getX() }); - return [ ...preLayouts, { diff --git a/frontend/src/container/Header/index.tsx b/frontend/src/container/Header/index.tsx index 2835d217ab..d019afcf10 100644 --- a/frontend/src/container/Header/index.tsx +++ b/frontend/src/container/Header/index.tsx @@ -16,13 +16,11 @@ const routesToSkip = [ ]; function TopNav(): JSX.Element | null { - const { pathname } = useLocation(); - if (history.location.pathname === ROUTES.SIGN_UP) { return null; } - const checkRouteExists = (currentPath: string) => { + const checkRouteExists = (currentPath: string): boolean => { for (let i = 0; i < routesToSkip.length; ++i) { if ( matchPath(currentPath, { path: routesToSkip[i], exact: true, strict: true }) @@ -39,7 +37,7 @@ function TopNav(): JSX.Element | null { - {!checkRouteExists(pathname) && ( + {!checkRouteExists(history.location.pathname) && ( diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx index 448a11bc5b..8828d748f2 100644 --- a/frontend/src/container/ListOfDashboard/index.tsx +++ b/frontend/src/container/ListOfDashboard/index.tsx @@ -1,12 +1,14 @@ +/* eslint-disable react/no-unstable-nested-components */ import { PlusOutlined } from '@ant-design/icons'; import { Row, Table, TableColumnProps, Typography } from 'antd'; import createDashboard from 'api/dashboard/create'; import { AxiosError } from 'axios'; import TextToolTip from 'components/TextToolTip'; import ROUTES from 'constants/routes'; +import history from 'lib/history'; import React, { useCallback, useState } from 'react'; import { useSelector } from 'react-redux'; -import { generatePath, useHistory } from 'react-router-dom'; +import { generatePath } from 'react-router-dom'; import { AppState } from 'store/reducers'; import DashboardReducer from 'types/reducer/dashboards'; import { v4 } from 'uuid'; @@ -19,7 +21,7 @@ import Name from './TableComponents/Name'; import Tags from './TableComponents/Tags'; function ListOfAllDashboard(): JSX.Element { - const { dashboards } = useSelector( + const { dashboards, loading } = useSelector( (state) => state.dashboards, ); @@ -29,8 +31,6 @@ function ListOfAllDashboard(): JSX.Element { errorMessage: '', }); - const { push } = useHistory(); - const columns: TableColumnProps[] = [ { title: 'Name', @@ -103,7 +103,7 @@ function ListOfAllDashboard(): JSX.Element { ...newDashboardState, loading: false, }); - push( + history.push( generatePath(ROUTES.DASHBOARD, { dashboardId: newDashboardId, }), @@ -123,7 +123,7 @@ function ListOfAllDashboard(): JSX.Element { errorMessage: (error as AxiosError).toString() || 'Something went Wrong', }); } - }, [newDashboardState, push]); + }, [newDashboardState]); const getText = (): string => { if (!newDashboardState.error && !newDashboardState.loading) { @@ -147,6 +147,7 @@ function ListOfAllDashboard(): JSX.Element { showHeader bordered sticky + loading={loading} title={(): JSX.Element => { return ( diff --git a/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx b/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx index 97a546cf1b..07961ad8d2 100644 --- a/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx +++ b/frontend/src/container/MetricsApplication/TopEndpointsTable.tsx @@ -4,17 +4,17 @@ import { METRICS_PAGE_QUERY_PARAM } from 'constants/query'; import ROUTES from 'constants/routes'; import React from 'react'; import { useSelector } from 'react-redux'; -import { useHistory, useParams } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; import { topEndpointListItem } from 'store/actions/MetricsActions'; import { AppState } from 'store/reducers'; import { GlobalReducer } from 'types/reducer/globalTime'; +import history from 'lib/history'; function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element { const { minTime, maxTime } = useSelector( (state) => state.globalTime, ); - const history = useHistory(); const params = useParams<{ servicename: string }>(); const handleOnClick = (operation: string): void => { diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx index 5f98ba75c7..bbe352b29a 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx +++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/naming-convention */ import { notification } from 'antd'; import { updateDashboard } from 'container/GridGraphLayout/utils'; import React, { useCallback } from 'react'; @@ -32,7 +33,7 @@ function DashboardGraphSlider(): JSX.Element { const getX = (): number => { if (data.layout && data.layout?.length > 0) { - const lastIndexX = data.layout[data.layout?.length - 1]; + const lastIndexX = data.layout[(data.layout?.length || 0) - 1]; return (lastIndexX.w + lastIndexX.x) % 12; } return 0; @@ -46,7 +47,7 @@ function DashboardGraphSlider(): JSX.Element { ...(data.layout || []), { h: 2, - i: ((data.layout || [])?.length + 1).toString(), + i: (((data.layout || [])?.length || 0) + 1).toString(), w: 6, x: getX(), y: 0, diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx index 1ab05d76bd..42abe26911 100644 --- a/frontend/src/container/NewWidget/index.tsx +++ b/frontend/src/container/NewWidget/index.tsx @@ -1,10 +1,11 @@ import { Button } from 'antd'; import ROUTES from 'constants/routes'; import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; +import history from 'lib/history'; import { DashboardWidgetPageParams } from 'pages/DashboardWidget'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { connect, useSelector } from 'react-redux'; -import { useHistory, useLocation, useParams } from 'react-router'; +import { useLocation, useParams } from 'react-router'; import { generatePath } from 'react-router-dom'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; @@ -57,7 +58,6 @@ function NewWidget({ const { widgets } = selectedDashboard.data; - const { push } = useHistory(); const { search } = useLocation(); const query = useMemo(() => { @@ -154,8 +154,8 @@ function NewWidget({ }; const onClickDiscardHandler = useCallback(() => { - push(generatePath(ROUTES.DASHBOARD, { dashboardId })); - }, [dashboardId, push]); + history.push(generatePath(ROUTES.DASHBOARD, { dashboardId })); + }, [dashboardId]); const getQueryResult = useCallback(() => { if (selectedWidget?.id.length !== 0) { diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx index 293516edb5..8292cc5283 100644 --- a/frontend/src/container/SideNav/index.tsx +++ b/frontend/src/container/SideNav/index.tsx @@ -31,9 +31,10 @@ function SideNav({ toggleDarkMode }: Props): JSX.Element { const [collapsed, setCollapsed] = useState( getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true', ); - const { pathname } = useLocation(); const { isDarkMode } = useSelector((state) => state.app); + const { pathname } = useLocation(); + const toggleTheme = useCallback(() => { const preMode: appMode = isDarkMode ? 'lightMode' : 'darkMode'; setTheme(preMode); @@ -61,7 +62,7 @@ function SideNav({ toggleDarkMode }: Props): JSX.Element { useLayoutEffect(() => { dispatch(SideBarCollapse(collapsed)); - }, [collapsed]); + }, [collapsed, dispatch]); const onClickHandler = useCallback( (to: string) => { diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx index 67c55336f2..f23945cba7 100644 --- a/frontend/src/pages/Dashboard/index.tsx +++ b/frontend/src/pages/Dashboard/index.tsx @@ -1,27 +1,16 @@ -import Spinner from 'components/Spinner'; import ListOfAllDashboard from 'container/ListOfDashboard'; import React, { useEffect } from 'react'; -import { connect, useSelector } from 'react-redux'; +import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; import { GetAllDashboards } from 'store/actions'; -import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; -import DashboardReducer from 'types/reducer/dashboards'; function Dashboard({ getAllDashboards }: DashboardProps): JSX.Element { - const { loading } = useSelector( - (state) => state.dashboards, - ); - useEffect(() => { getAllDashboards(); }, [getAllDashboards]); - if (loading) { - return ; - } - return ; } diff --git a/frontend/src/pages/DashboardWidget/index.tsx b/frontend/src/pages/DashboardWidget/index.tsx index b748d3cf32..216e020c55 100644 --- a/frontend/src/pages/DashboardWidget/index.tsx +++ b/frontend/src/pages/DashboardWidget/index.tsx @@ -5,24 +5,19 @@ import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import NewWidget from 'container/NewWidget'; import React, { useEffect, useRef, useState } from 'react'; import { connect, useSelector } from 'react-redux'; -import { - generatePath, - useHistory, - useLocation, - useParams, -} from 'react-router-dom'; +import { generatePath, useLocation, useParams } from 'react-router-dom'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; import { GetDashboard, GetDashboardProps } from 'store/actions'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import DashboardReducer from 'types/reducer/dashboards'; +import history from 'lib/history'; function DashboardWidget({ getDashboard }: NewDashboardProps): JSX.Element { const { search } = useLocation(); const { dashboardId } = useParams(); - const { push } = useHistory(); const [selectedGraph, setSelectedGraph] = useState(); const { loading, dashboards, error, errorMessage } = useSelector< AppState, @@ -42,11 +37,11 @@ function DashboardWidget({ getDashboard }: NewDashboardProps): JSX.Element { const graphType = params.get('graphType') as GRAPH_TYPES | null; if (graphType === null) { - push(generatePath(ROUTES.DASHBOARD, { dashboardId })); + history.push(generatePath(ROUTES.DASHBOARD, { dashboardId })); } else { setSelectedGraph(graphType); } - }, [dashboardId, push, search]); + }, [dashboardId, search]); const counter = useRef(0); diff --git a/frontend/src/store/actions/dashboard/applySettingsToPanel.ts b/frontend/src/store/actions/dashboard/applySettingsToPanel.ts index f18dcf7052..f4187cdc5f 100644 --- a/frontend/src/store/actions/dashboard/applySettingsToPanel.ts +++ b/frontend/src/store/actions/dashboard/applySettingsToPanel.ts @@ -21,4 +21,5 @@ export interface ApplySettingsToPanelProps { timePreferance: Widgets['timePreferance']; nullZeroValues: Widgets['nullZeroValues']; widgetId: Widgets['id']; + yAxisUnit: Widgets['yAxisUnit']; }