From fcc248ddf6cefcfea1814a36a69fcd190a33fbb8 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sat, 15 May 2021 15:18:30 +0530 Subject: [PATCH 1/9] 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 2/9] 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 38770809e3db005af5af0a50888077f815569614 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sun, 16 May 2021 18:35:50 +0530 Subject: [PATCH 3/9] 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 4/9] 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}%
`; - }; From 789880fa07f63cdb87143599be10ef849bd21b80 Mon Sep 17 00:00:00 2001 From: Ankit Anand Date: Sun, 16 May 2021 19:55:36 +0530 Subject: [PATCH 5/9] changing constants for zoom-in for different screen sizes --- frontend/src/modules/Servicemap/utils.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts index bec9c16a68..8a733b824c 100644 --- a/frontend/src/modules/Servicemap/utils.ts +++ b/frontend/src/modules/Servicemap/utils.ts @@ -78,10 +78,10 @@ export const getZoomPx = (): number => { const width = window.screen.width; if (width < 1400) { return 190; - } else if (width > 1400 && width < 2500) { + } else if (width > 1400 && width < 1700) { return 380; - } else if (width > 2500) { - return 360; + } else if (width > 1700) { + return 470; } }; From 171fd714deffd1d637d7256c1d1cd7acf6a2a02e Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Mon, 17 May 2021 09:06:05 +0530 Subject: [PATCH 6/9] removes zoom post becoming stable --- frontend/src/modules/Servicemap/ServiceMap.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index e9cf6c2425..cf94a2a307 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -86,9 +86,6 @@ const ServiceMap = (props: ServiceMapProps) => { { - fgRef.current.zoomToFit(100, 120); - }} graphData={graphData} nodeLabel={getTooltip} linkAutoColorBy={(d) => d.target} From 1d2f964a6333c14730d5596dcd1f101b1d208621 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Mon, 17 May 2021 09:39:20 +0530 Subject: [PATCH 7/9] updates text color --- frontend/src/modules/Servicemap/ServiceMap.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index cf94a2a307..5960997313 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -103,7 +103,7 @@ const ServiceMap = (props: ServiceMapProps) => { ctx.fill(); ctx.textAlign = "center"; ctx.textBaseline = "middle"; - ctx.fillStyle = "#333333"; + ctx.fillStyle = "#646464"; ctx.fillText(label, node.x, node.y); }} onNodeClick={(node) => { From 8a5178f0dc5534e51c48899119170078062d9d00 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Mon, 17 May 2021 14:42:39 +0530 Subject: [PATCH 8/9] adds default view option --- .../src/modules/Servicemap/SelectService.tsx | 19 ++++++++++++++++--- .../src/modules/Servicemap/ServiceMap.tsx | 5 +++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/frontend/src/modules/Servicemap/SelectService.tsx b/frontend/src/modules/Servicemap/SelectService.tsx index 8317e87212..2377293fe4 100644 --- a/frontend/src/modules/Servicemap/SelectService.tsx +++ b/frontend/src/modules/Servicemap/SelectService.tsx @@ -4,6 +4,7 @@ import { InfoCircleOutlined } from "@ant-design/icons"; import { Select } from "antd"; import styled from "styled-components"; const { Option } = Select; +import { cloneDeep } from "lodash"; const Container = styled.div` margin-top: 12px; @@ -25,14 +26,26 @@ const Container = styled.div` interface SelectServiceProps { services: servicesItem[]; zoomToService: (arg0: string) => void; + zoomToDefault: () => void; } +const defaultOption = { + serviceName: "Default" +}; + const SelectService = (props: SelectServiceProps) => { - const [selectedVal, setSelectedVal] = useState(); - const { services, zoomToService } = props; + const [selectedVal, setSelectedVal] = useState(defaultOption.serviceName); + console.log("props",props); + const { zoomToService, zoomToDefault } = props; + const services = cloneDeep(props.services); + services.unshift(defaultOption) const handleSelect = (value: string) => { + if(value === defaultOption.serviceName){ + zoomToDefault() + } else { + zoomToService(value); + } setSelectedVal(value); - zoomToService(value); }; return ( diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index 5960997313..77fec0c920 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -75,6 +75,10 @@ const ServiceMap = (props: ServiceMapProps) => { fgRef && fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value); }; + const zoomToDefault = () => { + fgRef && fgRef.current.zoomToFit(100, 120); + }; + const { nodes, links } = getGraphData(serviceMap); const graphData = { nodes, links }; return ( @@ -82,6 +86,7 @@ const ServiceMap = (props: ServiceMapProps) => { Date: Mon, 17 May 2021 14:43:20 +0530 Subject: [PATCH 9/9] remove logs --- frontend/src/modules/Servicemap/SelectService.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/modules/Servicemap/SelectService.tsx b/frontend/src/modules/Servicemap/SelectService.tsx index 2377293fe4..016a504fe6 100644 --- a/frontend/src/modules/Servicemap/SelectService.tsx +++ b/frontend/src/modules/Servicemap/SelectService.tsx @@ -35,7 +35,6 @@ const defaultOption = { const SelectService = (props: SelectServiceProps) => { const [selectedVal, setSelectedVal] = useState(defaultOption.serviceName); - console.log("props",props); const { zoomToService, zoomToDefault } = props; const services = cloneDeep(props.services); services.unshift(defaultOption)