From de4adeded599b2dd3c8bed1574d24737ab18112f Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Thu, 13 May 2021 20:06:44 +0530 Subject: [PATCH 01/11] creates 2 diff config for datepicker --- frontend/src/modules/Nav/TopNav/config.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 frontend/src/modules/Nav/TopNav/config.ts diff --git a/frontend/src/modules/Nav/TopNav/config.ts b/frontend/src/modules/Nav/TopNav/config.ts new file mode 100644 index 0000000000..b605ae4686 --- /dev/null +++ b/frontend/src/modules/Nav/TopNav/config.ts @@ -0,0 +1,14 @@ +export const DefaultOptions = [ + { value: "custom", label: "Custom" }, + { value: "15min", label: "Last 15 min" }, + { value: "30min", label: "Last 30 min" }, + { value: "1hr", label: "Last 1 hour" }, + { value: "6hr", label: "Last 6 hour" }, + { value: "1day", label: "Last 1 day" }, + { value: "1week", label: "Last 1 week" }, +]; + +export const ServiceMapOptions = [ + { value: "1min", label: "Last 1 min" }, + { value: "1day", label: "Last 1 day" }, +]; From 173bd01e70fa989b34bf334625d7737e0bd8c8b6 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Thu, 13 May 2021 20:07:25 +0530 Subject: [PATCH 02/11] adds last 1min to store --- frontend/src/store/actions/global.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/store/actions/global.ts b/frontend/src/store/actions/global.ts index 4af5e7adce..4fc8fc7acb 100644 --- a/frontend/src/store/actions/global.ts +++ b/frontend/src/store/actions/global.ts @@ -23,6 +23,11 @@ export const updateTimeInterval = ( // set directly based on that. Assuming datetimeRange values are in ms, and minTime is 0th element switch (interval) { + case "1min": + maxTime = Date.now() * 1000000; // in nano sec + minTime = (Date.now() - 1 * 60 * 1000) * 1000000; + break; + case "15min": maxTime = Date.now() * 1000000; // in nano sec minTime = (Date.now() - 15 * 60 * 1000) * 1000000; From a416767950b8d7612ac8c9e172bcdb53e5e4b712 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Thu, 13 May 2021 20:07:48 +0530 Subject: [PATCH 03/11] choose config based on routes --- .../modules/Nav/TopNav/DateTimeSelector.tsx | 33 ++++++++----------- .../src/modules/Servicemap/ServiceMap.tsx | 2 +- 2 files changed, 14 insertions(+), 21 deletions(-) diff --git a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx index c3b890673b..c293ea4b8e 100644 --- a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx +++ b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx @@ -5,12 +5,12 @@ import { withRouter } from "react-router"; import { RouteComponentProps, useLocation } from "react-router-dom"; import { connect } from "react-redux"; import ROUTES from "Src/constants/routes"; - +import { findIndex } from "lodash"; import CustomDateTimeModal from "./CustomDateTimeModal"; import { GlobalTime, updateTimeInterval } from "../../../store/actions"; import { StoreState } from "../../../store/reducers"; import FormItem from "antd/lib/form/FormItem"; - +import { DefaultOptions, ServiceMapOptions } from "./config"; import { DateTimeRangeType } from "../../../store/actions"; import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; import { LOCAL_STORAGE } from "Src/constants/localStorage"; @@ -32,16 +32,19 @@ interface DateTimeSelectorProps extends RouteComponentProps { This components is mounted all the time. Use event listener to track changes. */ const _DateTimeSelector = (props: DateTimeSelectorProps) => { - const defaultTime = "30min"; + const location = useLocation(); + const options = + location.pathname === ROUTES.SERVICE_MAP ? ServiceMapOptions : DefaultOptions; + const defaultTime = options[0].value; + const [customDTPickerVisible, setCustomDTPickerVisible] = useState(false); const [timeInterval, setTimeInterval] = useState(defaultTime); const [startTime, setStartTime] = useState(null); const [endTime, setEndTime] = useState(null); const [refreshButtonHidden, setRefreshButtonHidden] = useState(false); const [refreshText, setRefreshText] = useState(""); - const [refreshButtonClick, setRefreshButtoClick] = useState(0); + const [refreshButtonClick, setRefreshButtonClick] = useState(0); const [form_dtselector] = Form.useForm(); - const location = useLocation(); const updateTimeOnQueryParamChange = () => { const timeDurationInLocalStorage = localStorage.getItem( @@ -78,13 +81,11 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => { // On URL Change useEffect(() => { updateTimeOnQueryParamChange(); + if (findIndex(options, (option) => option.value === timeInterval) === -1) { + setTimeInterval(options[0].value); + } }, [location]); - //On mount - useEffect(() => { - updateTimeOnQueryParamChange(); - }, []); - const setMetricsTimeInterval = (value: string) => { props.updateTimeInterval(value); setTimeInterval(value); @@ -173,7 +174,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => { }; const handleRefresh = () => { - setRefreshButtoClick(refreshButtonClick + 1); + setRefreshButtonClick(refreshButtonClick + 1); setMetricsTimeInterval(timeInterval); }; @@ -187,15 +188,6 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => { }; }, [props.location, refreshButtonClick]); - const options = [ - { value: "custom", label: "Custom" }, - { value: "15min", label: "Last 15 min" }, - { value: "30min", label: "Last 30 min" }, - { value: "1hr", label: "Last 1 hour" }, - { value: "6hr", label: "Last 6 hour" }, - { value: "1day", label: "Last 1 day" }, - { value: "1week", label: "Last 1 week" }, - ]; if (props.location.pathname.startsWith(ROUTES.USAGE_EXPLORER)) { return null; } else { @@ -205,6 +197,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => { "YYYY/MM/DD HH:mm", )}` : timeInterval; + return ( diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index e2db06ad70..f6098cd994 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -62,7 +62,7 @@ const ServiceMap = (props: ServiceMapProps) => { useEffect(() => { getServiceMapItems(globalTime); getDetailedServiceMapItems(globalTime); - }, []); + }, [globalTime]); useEffect(() => { fgRef.current && fgRef.current.d3Force("charge").strength(-400); From 3318ec8c38ecf44fd23c7080fc0b140b74b1af25 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sat, 15 May 2021 14:59:47 +0530 Subject: [PATCH 04/11] removes 1day and adds 5mins --- frontend/src/modules/Nav/TopNav/config.ts | 2 +- frontend/src/store/actions/global.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/modules/Nav/TopNav/config.ts b/frontend/src/modules/Nav/TopNav/config.ts index b605ae4686..84ad7dc51f 100644 --- a/frontend/src/modules/Nav/TopNav/config.ts +++ b/frontend/src/modules/Nav/TopNav/config.ts @@ -10,5 +10,5 @@ export const DefaultOptions = [ export const ServiceMapOptions = [ { value: "1min", label: "Last 1 min" }, - { value: "1day", label: "Last 1 day" }, + { value: "5min", label: "Last 5 min" }, ]; diff --git a/frontend/src/store/actions/global.ts b/frontend/src/store/actions/global.ts index 4fc8fc7acb..25c25852dc 100644 --- a/frontend/src/store/actions/global.ts +++ b/frontend/src/store/actions/global.ts @@ -27,6 +27,10 @@ export const updateTimeInterval = ( maxTime = Date.now() * 1000000; // in nano sec minTime = (Date.now() - 1 * 60 * 1000) * 1000000; break; + case "5min": + maxTime = Date.now() * 1000000; // in nano sec + minTime = (Date.now() - 5 * 60 * 1000) * 1000000; + break; case "15min": maxTime = Date.now() * 1000000; // in nano sec From fcc248ddf6cefcfea1814a36a69fcd190a33fbb8 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sat, 15 May 2021 15:18:30 +0530 Subject: [PATCH 05/11] resets data to avoid multiple re-rendering for parallel apis --- frontend/src/store/actions/serviceMap.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/frontend/src/store/actions/serviceMap.ts b/frontend/src/store/actions/serviceMap.ts index a8a660d423..fbad4148c3 100644 --- a/frontend/src/store/actions/serviceMap.ts +++ b/frontend/src/store/actions/serviceMap.ts @@ -38,6 +38,11 @@ export interface servicesAction { export const getServiceMapItems = (globalTime: GlobalTime) => { return async (dispatch: Dispatch) => { + dispatch({ + type: ActionTypes.getServiceMapItems, + payload: [], + }); + let request_string = "/serviceMapDependencies?start=" + globalTime.minTime + @@ -45,7 +50,7 @@ export const getServiceMapItems = (globalTime: GlobalTime) => { globalTime.maxTime; const response = await api.get(apiV1 + request_string); - + dispatch({ type: ActionTypes.getServiceMapItems, payload: response.data, @@ -55,11 +60,16 @@ export const getServiceMapItems = (globalTime: GlobalTime) => { export const getDetailedServiceMapItems = (globalTime: GlobalTime) => { return async (dispatch: Dispatch) => { + dispatch({ + type: ActionTypes.getServices, + payload: [], + }); + let request_string = "/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime; const response = await api.get(apiV1 + request_string); - + dispatch({ type: ActionTypes.getServices, payload: response.data, From 2482e91348c27e37993c8eaba42c34979d432615 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sat, 15 May 2021 18:23:29 +0530 Subject: [PATCH 06/11] calculate zoom px based on screen size --- frontend/src/modules/Servicemap/ServiceMap.tsx | 4 ++-- frontend/src/modules/Servicemap/utils.ts | 11 +++++++++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index f6098cd994..46cf64b6cc 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -10,7 +10,7 @@ import { import { Spin } from "antd"; import styled from "styled-components"; import { StoreState } from "../../store/reducers"; -import { getGraphData } from "./utils"; +import { getZoomPx, getGraphData } from "./utils"; import SelectService from "./SelectService"; import { ForceGraph2D } from "react-force-graph"; @@ -72,7 +72,7 @@ const ServiceMap = (props: ServiceMapProps) => { } const zoomToService = (value: string) => { - fgRef && fgRef.current.zoomToFit(700, 380, (e) => e.id === value); + fgRef && fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value); }; const { nodes, links } = getGraphData(serviceMap); diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts index 296cd05060..ada3fb4a00 100644 --- a/frontend/src/modules/Servicemap/utils.ts +++ b/frontend/src/modules/Servicemap/utils.ts @@ -73,3 +73,14 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => { links, }; }; + +export const getZoomPx = (): number => { + const width = window.screen.width; + if (width < 1400) { + return 190; + } else if (width > 1400 && width < 2500) { + return 380; + } else if (width > 2500) { + return 360; + } +}; From 24416ceabddd5862d1477e1e2c237487a8cecd83 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sat, 15 May 2021 19:50:16 +0530 Subject: [PATCH 07/11] adds width to Select --- frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx index c293ea4b8e..b62776ee45 100644 --- a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx +++ b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { Select, Button, Space, Form } from "antd"; +import { Select as DefaultSelect, Button, Space, Form } from "antd"; import styled from "styled-components"; import { withRouter } from "react-router"; import { RouteComponentProps, useLocation } from "react-router-dom"; @@ -15,13 +15,15 @@ import { DateTimeRangeType } from "../../../store/actions"; import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; import { LOCAL_STORAGE } from "Src/constants/localStorage"; import moment from "moment"; -const { Option } = Select; +const { Option } = DefaultSelect; const DateTimeWrapper = styled.div` margin-top: 20px; justify-content: flex-end !important; `; - +const Select = styled(DefaultSelect)` + width: 150px; +`; interface DateTimeSelectorProps extends RouteComponentProps { currentpath?: string; updateTimeInterval: Function; From 8b0abbec7959ee0e777d89c8e6564e2b2fecb162 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sat, 15 May 2021 23:24:53 +0530 Subject: [PATCH 08/11] adds default options config by route --- .../src/modules/Nav/TopNav/DateTimeSelector.tsx | 16 ++++++++++++---- frontend/src/modules/Nav/TopNav/config.ts | 13 +++++++++++-- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx index b62776ee45..7852638be3 100644 --- a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx +++ b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx @@ -10,7 +10,11 @@ import CustomDateTimeModal from "./CustomDateTimeModal"; import { GlobalTime, updateTimeInterval } from "../../../store/actions"; import { StoreState } from "../../../store/reducers"; import FormItem from "antd/lib/form/FormItem"; -import { DefaultOptions, ServiceMapOptions } from "./config"; +import { + Options, + ServiceMapOptions, + DefaultOptionsBasedOnRoute, +} from "./config"; import { DateTimeRangeType } from "../../../store/actions"; import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; import { LOCAL_STORAGE } from "Src/constants/localStorage"; @@ -36,8 +40,12 @@ This components is mounted all the time. Use event listener to track changes. const _DateTimeSelector = (props: DateTimeSelectorProps) => { const location = useLocation(); const options = - location.pathname === ROUTES.SERVICE_MAP ? ServiceMapOptions : DefaultOptions; - const defaultTime = options[0].value; + location.pathname === ROUTES.SERVICE_MAP ? ServiceMapOptions : Options; + const defaultTime = + location.pathname === ROUTES.SERVICE_MAP || + location.pathname === ROUTES.APPLICATION + ? DefaultOptionsBasedOnRoute[location.pathname] + : DefaultOptionsBasedOnRoute.default; const [customDTPickerVisible, setCustomDTPickerVisible] = useState(false); const [timeInterval, setTimeInterval] = useState(defaultTime); @@ -84,7 +92,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => { useEffect(() => { updateTimeOnQueryParamChange(); if (findIndex(options, (option) => option.value === timeInterval) === -1) { - setTimeInterval(options[0].value); + setTimeInterval(defaultTime); } }, [location]); diff --git a/frontend/src/modules/Nav/TopNav/config.ts b/frontend/src/modules/Nav/TopNav/config.ts index 84ad7dc51f..b4a436c25e 100644 --- a/frontend/src/modules/Nav/TopNav/config.ts +++ b/frontend/src/modules/Nav/TopNav/config.ts @@ -1,14 +1,23 @@ -export const DefaultOptions = [ - { value: "custom", label: "Custom" }, +import ROUTES from "Src/constants/routes"; + +export const Options = [ + { value: "5min", label: "Last 5 min" }, { value: "15min", label: "Last 15 min" }, { value: "30min", label: "Last 30 min" }, { value: "1hr", label: "Last 1 hour" }, { value: "6hr", label: "Last 6 hour" }, { value: "1day", label: "Last 1 day" }, { value: "1week", label: "Last 1 week" }, + { value: "custom", label: "Custom" }, ]; export const ServiceMapOptions = [ { value: "1min", label: "Last 1 min" }, { value: "5min", label: "Last 5 min" }, ]; + +export const DefaultOptionsBasedOnRoute = { + [ROUTES.SERVICE_MAP]: ServiceMapOptions[0].value, + [ROUTES.APPLICATION]: Options[0].value, + default: Options[2].value, +}; From 55a7b5b1b37d5967ecee2d0989d4042dee2a9cf8 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sun, 16 May 2021 15:08:31 +0530 Subject: [PATCH 09/11] adds tooltip on hover --- .../src/modules/Servicemap/ServiceMap.tsx | 20 +++------------- frontend/src/modules/Servicemap/utils.ts | 23 +++++++++++++++++++ 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index f6098cd994..9375923664 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -10,7 +10,7 @@ import { import { Spin } from "antd"; import styled from "styled-components"; import { StoreState } from "../../store/reducers"; -import { getGraphData } from "./utils"; +import { getGraphData, getTooltip } from "./utils"; import SelectService from "./SelectService"; import { ForceGraph2D } from "react-force-graph"; @@ -90,7 +90,7 @@ const ServiceMap = (props: ServiceMapProps) => { fgRef.current.zoomToFit(100, 120); }} graphData={graphData} - nodeLabel="id" + nodeLabel={getTooltip} linkAutoColorBy={(d) => d.target} linkDirectionalParticles="value" linkDirectionalParticleSpeed={(d) => d.value} @@ -112,21 +112,7 @@ const ServiceMap = (props: ServiceMapProps) => { onNodeClick={(node) => { const tooltip = document.querySelector(".graph-tooltip"); if (tooltip && node) { - tooltip.innerHTML = `
-
${node.id}
-
-
P99 latency:
-
${node.p99 / 1000000}ms
-
-
-
Request:
-
${node.callRate}/sec
-
-
-
Error Rate:
-
${node.errorRate}%
-
-
`; + tooltip.innerHTML = getTooltip(node); } }} nodePointerAreaPaint={(node, color, ctx) => { diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts index 296cd05060..28295ad2c5 100644 --- a/frontend/src/modules/Servicemap/utils.ts +++ b/frontend/src/modules/Servicemap/utils.ts @@ -73,3 +73,26 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => { links, }; }; + +export const getTooltip = (node: { + p99: number; + errorRate: number; + callRate: number; + id: string; +}) => { + return `
+
${node.id}
+
+
P99 latency:
+
${node.p99 / 1000000}ms
+
+
+
Request:
+
${node.callRate}/sec
+
+
+
Error Rate:
+
${node.errorRate}%
+
+
`; +}; From 38770809e3db005af5af0a50888077f815569614 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sun, 16 May 2021 18:35:50 +0530 Subject: [PATCH 10/11] handles route specific default value connected to localstorage --- frontend/src/constants/localStorage.ts | 2 +- frontend/src/modules/AppWrapper.tsx | 93 ++++++++----------- frontend/src/modules/BaseLayout.tsx | 29 ++++++ .../modules/Nav/TopNav/DateTimeSelector.tsx | 75 +++++++++------ frontend/src/modules/Nav/TopNav/config.ts | 1 + frontend/src/modules/Nav/TopNav/utils.ts | 19 ++++ 6 files changed, 138 insertions(+), 81 deletions(-) create mode 100644 frontend/src/modules/BaseLayout.tsx create mode 100644 frontend/src/modules/Nav/TopNav/utils.ts diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts index 26512b627d..5dd89c624c 100644 --- a/frontend/src/constants/localStorage.ts +++ b/frontend/src/constants/localStorage.ts @@ -1,3 +1,3 @@ export enum LOCAL_STORAGE { - METRICS_TIME_IN_DURATION = "metricsTimeDuration", + METRICS_TIME_IN_DURATION = "metricsTimeDurations", } diff --git a/frontend/src/modules/AppWrapper.tsx b/frontend/src/modules/AppWrapper.tsx index 716345594b..b261ad3e32 100644 --- a/frontend/src/modules/AppWrapper.tsx +++ b/frontend/src/modules/AppWrapper.tsx @@ -1,17 +1,11 @@ import React, { Suspense } from "react"; -import { Layout, Spin } from "antd"; +import { Spin } from "antd"; import { useThemeSwitcher } from "react-css-theme-switcher"; import ROUTES from "Src/constants/routes"; import { IS_LOGGED_IN } from "Src/constants/auth"; -import { - BrowserRouter as Router, - Route, - Switch, - Redirect, -} from "react-router-dom"; +import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom"; -import SideNav from "./Nav/SideNav"; -import TopNav from "./Nav/TopNav"; +import BaseLayout from "./BaseLayout"; import { ServiceMetrics, ServiceMap, @@ -24,8 +18,6 @@ import { IntstrumentationPage, } from "Src/pages"; -const { Content, Footer } = Layout; - const App = () => { const { status } = useThemeSwitcher(); @@ -34,47 +26,44 @@ const App = () => { } return ( - - - - - - - }> - - - - - - - - - - - { - return localStorage.getItem(IS_LOGGED_IN) === "yes" ? ( - - ) : ( - - ); - }} - /> - - - -
- SigNoz Inc. ©2020{" "} -
- - - + + }> + + + + + + + + + + + + + { + return localStorage.getItem(IS_LOGGED_IN) === "yes" ? ( + + ) : ( + + ); + }} + /> + + + + + ); }; diff --git a/frontend/src/modules/BaseLayout.tsx b/frontend/src/modules/BaseLayout.tsx new file mode 100644 index 0000000000..a36ac96e66 --- /dev/null +++ b/frontend/src/modules/BaseLayout.tsx @@ -0,0 +1,29 @@ +import React, { ReactNode } from "react"; + +import { Layout } from "antd"; +import SideNav from "./Nav/SideNav"; +import TopNav from "./Nav/TopNav"; +const { Content, Footer } = Layout; + +interface BaseLayoutProps { + children: ReactNode; +} + +const BaseLayout: React.FC = ({ children }) => { + return ( + + + + + + {children} + +
+ SigNoz Inc. ©2020{" "} +
+ + + ); +}; + +export default BaseLayout; diff --git a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx index 7852638be3..03758461d4 100644 --- a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx +++ b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx @@ -1,11 +1,12 @@ import React, { useEffect, useState } from "react"; +import { cloneDeep } from "lodash"; import { Select as DefaultSelect, Button, Space, Form } from "antd"; import styled from "styled-components"; import { withRouter } from "react-router"; +import { getLocalStorageRouteKey } from "./utils"; import { RouteComponentProps, useLocation } from "react-router-dom"; import { connect } from "react-redux"; import ROUTES from "Src/constants/routes"; -import { findIndex } from "lodash"; import CustomDateTimeModal from "./CustomDateTimeModal"; import { GlobalTime, updateTimeInterval } from "../../../store/actions"; import { StoreState } from "../../../store/reducers"; @@ -25,9 +26,7 @@ const DateTimeWrapper = styled.div` margin-top: 20px; justify-content: flex-end !important; `; -const Select = styled(DefaultSelect)` - width: 150px; -`; +const Select = styled(DefaultSelect)``; interface DateTimeSelectorProps extends RouteComponentProps { currentpath?: string; updateTimeInterval: Function; @@ -39,14 +38,23 @@ This components is mounted all the time. Use event listener to track changes. */ const _DateTimeSelector = (props: DateTimeSelectorProps) => { const location = useLocation(); + const LocalStorageRouteKey: string = getLocalStorageRouteKey( + location.pathname, + ); + const timeDurationInLocalStorage = + JSON.parse(localStorage.getItem(LOCAL_STORAGE.METRICS_TIME_IN_DURATION)) || + {}; const options = location.pathname === ROUTES.SERVICE_MAP ? ServiceMapOptions : Options; - const defaultTime = - location.pathname === ROUTES.SERVICE_MAP || - location.pathname === ROUTES.APPLICATION - ? DefaultOptionsBasedOnRoute[location.pathname] - : DefaultOptionsBasedOnRoute.default; - + let defaultTime = DefaultOptionsBasedOnRoute[LocalStorageRouteKey] + ? DefaultOptionsBasedOnRoute[LocalStorageRouteKey] + : DefaultOptionsBasedOnRoute.default; + if (timeDurationInLocalStorage[LocalStorageRouteKey]) { + defaultTime = timeDurationInLocalStorage[LocalStorageRouteKey]; + } + const [currentLocalStorageRouteKey, setCurrentLocalStorageRouteKey] = useState( + LocalStorageRouteKey, + ); const [customDTPickerVisible, setCustomDTPickerVisible] = useState(false); const [timeInterval, setTimeInterval] = useState(defaultTime); const [startTime, setStartTime] = useState(null); @@ -57,9 +65,6 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => { const [form_dtselector] = Form.useForm(); const updateTimeOnQueryParamChange = () => { - const timeDurationInLocalStorage = localStorage.getItem( - LOCAL_STORAGE.METRICS_TIME_IN_DURATION, - ); const urlParams = new URLSearchParams(location.search); const intervalInQueryParam = urlParams.get(METRICS_PAGE_QUERY_PARAM.interval); const startTimeString = urlParams.get(METRICS_PAGE_QUERY_PARAM.startTime); @@ -75,25 +80,38 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => { const startTime = moment(Number(startTimeString)); const endTime = moment(Number(endTimeString)); setCustomTime(startTime, endTime, true); + } else if (currentLocalStorageRouteKey !== LocalStorageRouteKey) { + setMetricsTimeInterval(defaultTime); + setCurrentLocalStorageRouteKey(LocalStorageRouteKey); } // first pref: handle intervalInQueryParam else if (intervalInQueryParam) { - window.localStorage.setItem( - LOCAL_STORAGE.METRICS_TIME_IN_DURATION, - intervalInQueryParam, - ); setMetricsTimeInterval(intervalInQueryParam); - } else if (timeDurationInLocalStorage) { - setMetricsTimeInterval(timeDurationInLocalStorage); } }; + const setToLocalStorage = (val: string) => { + let timeDurationInLocalStorageObj = cloneDeep(timeDurationInLocalStorage); + if (timeDurationInLocalStorageObj) { + timeDurationInLocalStorageObj[LocalStorageRouteKey] = val; + } else { + timeDurationInLocalStorageObj = { + [LocalStorageRouteKey]: val, + }; + } + window.localStorage.setItem( + LOCAL_STORAGE.METRICS_TIME_IN_DURATION, + JSON.stringify(timeDurationInLocalStorageObj), + ); + }; + + useEffect(() => { + setMetricsTimeInterval(defaultTime); + }, []); + // On URL Change useEffect(() => { updateTimeOnQueryParamChange(); - if (findIndex(options, (option) => option.value === timeInterval) === -1) { - setTimeInterval(defaultTime); - } }, [location]); const setMetricsTimeInterval = (value: string) => { @@ -101,8 +119,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => { setTimeInterval(value); setEndTime(null); setStartTime(null); - - window.localStorage.setItem(LOCAL_STORAGE.METRICS_TIME_IN_DURATION, value); + setToLocalStorage(value); }; const setCustomTime = ( startTime: moment.Moment, @@ -259,8 +276,10 @@ const mapStateToProps = (state: StoreState): { globalTime: GlobalTime } => { return { globalTime: state.globalTime }; }; -export const DateTimeSelector = connect(mapStateToProps, { - updateTimeInterval: updateTimeInterval, -})(_DateTimeSelector); +export const DateTimeSelector = withRouter( + connect(mapStateToProps, { + updateTimeInterval: updateTimeInterval, + })(_DateTimeSelector), +); -export default withRouter(DateTimeSelector); +export default DateTimeSelector; diff --git a/frontend/src/modules/Nav/TopNav/config.ts b/frontend/src/modules/Nav/TopNav/config.ts index b4a436c25e..1cad032461 100644 --- a/frontend/src/modules/Nav/TopNav/config.ts +++ b/frontend/src/modules/Nav/TopNav/config.ts @@ -19,5 +19,6 @@ export const ServiceMapOptions = [ export const DefaultOptionsBasedOnRoute = { [ROUTES.SERVICE_MAP]: ServiceMapOptions[0].value, [ROUTES.APPLICATION]: Options[0].value, + [ROUTES.SERVICE_METRICS]: Options[2].value, default: Options[2].value, }; diff --git a/frontend/src/modules/Nav/TopNav/utils.ts b/frontend/src/modules/Nav/TopNav/utils.ts new file mode 100644 index 0000000000..3e54a997a7 --- /dev/null +++ b/frontend/src/modules/Nav/TopNav/utils.ts @@ -0,0 +1,19 @@ +import ROUTES from "Src/constants/routes"; + +export const getLocalStorageRouteKey = (pathName: string) => { + let localStorageKey = ""; + const pathNameSplit = pathName.split("/"); + console.log("pathName", pathName); + if (!pathNameSplit[2]) { + localStorageKey = pathName; + } else { + Object.keys(ROUTES).forEach((key) => { + if (ROUTES[key].indexOf(":") > -1) { + if (ROUTES[key].indexOf(pathNameSplit[1]) > -1) { + localStorageKey = ROUTES[key]; + } + } + }); + } + return localStorageKey; +}; From c6e2e297d58a4da4fe9f53459e6985f05afabeb4 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sun, 16 May 2021 18:44:26 +0530 Subject: [PATCH 11/11] resolves conflicts --- frontend/src/modules/Nav/TopNav/utils.ts | 1 - frontend/src/modules/Servicemap/ServiceMap.tsx | 3 +-- frontend/src/modules/Servicemap/utils.ts | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/modules/Nav/TopNav/utils.ts b/frontend/src/modules/Nav/TopNav/utils.ts index 3e54a997a7..e46503312e 100644 --- a/frontend/src/modules/Nav/TopNav/utils.ts +++ b/frontend/src/modules/Nav/TopNav/utils.ts @@ -3,7 +3,6 @@ import ROUTES from "Src/constants/routes"; export const getLocalStorageRouteKey = (pathName: string) => { let localStorageKey = ""; const pathNameSplit = pathName.split("/"); - console.log("pathName", pathName); if (!pathNameSplit[2]) { localStorageKey = pathName; } else { diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index da67cd9dbb..e9cf6c2425 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -10,8 +10,7 @@ import { import { Spin } from "antd"; import styled from "styled-components"; import { StoreState } from "../../store/reducers"; -import { getZoomPx, getGraphData } from "./utils"; -import { getGraphData, getTooltip } from "./utils"; +import { getZoomPx, getGraphData, getTooltip } from "./utils"; import SelectService from "./SelectService"; import { ForceGraph2D } from "react-force-graph"; diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts index 7caf5862aa..bec9c16a68 100644 --- a/frontend/src/modules/Servicemap/utils.ts +++ b/frontend/src/modules/Servicemap/utils.ts @@ -83,6 +83,7 @@ export const getZoomPx = (): number => { } else if (width > 2500) { return 360; } +}; export const getTooltip = (node: { p99: number; @@ -105,5 +106,4 @@ export const getTooltip = (node: {
${node.errorRate}%
`; - };