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

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

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,
 					{

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 {
 				<ShowBreadcrumbs />
 			</Col>
 
-			{!checkRouteExists(pathname) && (
+			{!checkRouteExists(history.location.pathname) && (
 				<Col span={8}>
 					<DateTimeSelector />
 				</Col>

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<AppState, DashboardReducer>(
+	const { dashboards, loading } = useSelector<AppState, DashboardReducer>(
 		(state) => state.dashboards,
 	);
 
@@ -29,8 +31,6 @@ function ListOfAllDashboard(): JSX.Element {
 		errorMessage: '',
 	});
 
-	const { push } = useHistory();
-
 	const columns: TableColumnProps<Data>[] = [
 		{
 			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 (
 						<Row justify="space-between">

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<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
 
-	const history = useHistory();
 	const params = useParams<{ servicename: string }>();
 
 	const handleOnClick = (operation: string): void => {

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,

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) {

frontend/src/container/SideNav/index.tsx

@@ -31,9 +31,10 @@ function SideNav({ toggleDarkMode }: Props): JSX.Element {
 	const [collapsed, setCollapsed] = useState<boolean>(
 		getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true',
 	);
-	const { pathname } = useLocation();
 	const { isDarkMode } = useSelector<AppState, AppReducer>((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) => {

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<AppState, DashboardReducer>(
-		(state) => state.dashboards,
-	);
-
 	useEffect(() => {
 		getAllDashboards();
 	}, [getAllDashboards]);
 
-	if (loading) {
-		return <Spinner size="large" tip="Loading.." />;
-	}
-
 	return <ListOfAllDashboard />;
 }
 

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<DashboardWidgetPageParams>();
 
-	const { push } = useHistory();
 	const [selectedGraph, setSelectedGraph] = useState<GRAPH_TYPES>();
 	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);
 

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'];
 }