removes hardcoding from routes

frontend/src/components/Modal.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement } from "react";
-import { Modal, Button } from "antd";
+import { Modal } from "antd";
 
 export const CustomModal = ({
 	title,

frontend/src/constants/app.ts

@@ -1,5 +1,7 @@
+import ROUTES from "./routes";
+
 export const WITHOUT_SESSION_PATH = ["/redirect"];
 
 export const AUTH0_REDIRECT_PATH = "/redirect";
 
-export const DEFAULT_AUTH0_APP_REDIRECTION_PATH = "/application";
+export const DEFAULT_AUTH0_APP_REDIRECTION_PATH = ROUTES.APPLICATION;

frontend/src/constants/onboarding.ts

@@ -0,0 +1 @@
+export const SKIP_ONBOARDING = "skip_onboarding";

frontend/src/constants/routes.ts

@@ -0,0 +1,13 @@
+const ROUTES = {
+	SIGN_UP: "/signup",
+	SERVICE_METRICS: "/application/:servicename",
+	SERVICE_MAP: "/service-map",
+	TRACES: "/traces",
+	TRACE_GRAPH: "/traces/:id",
+	SETTINGS: "/settings",
+	INSTRUMENTATION: "/add-instrumentation",
+	USAGE_EXPLORER: "/usage-explorer",
+	APPLICATION: "/application",
+};
+
+export default ROUTES;

frontend/src/modules/AppWrapper.tsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from "react";
 import { Layout, Spin } from "antd";
 import { useThemeSwitcher } from "react-css-theme-switcher";
-
+import ROUTES from "Src/constants/routes";
 import {
 	BrowserRouter as Router,
 	Route,
@@ -41,27 +41,27 @@ const App = () => {
 						<TopNav />
 						<Suspense fallback={<Spin size="large" />}>
 							<Switch>
-								<Route path="/signup" component={Signup} />
+								<Route path={ROUTES.SIGN_UP} component={Signup} />
-								<Route path="/application/:servicename" component={ServiceMetrics} />
+								<Route path={ROUTES.SERVICE_METRICS} component={ServiceMetrics} />
-								<Route path="/service-map" component={ServiceMap} />
+								<Route path={ROUTES.SERVICE_MAP} component={ServiceMap} />
-								<Route path="/traces" exact component={TraceDetail} />
+								<Route path={ROUTES.TRACES} exact component={TraceDetail} />
-								<Route path="/traces/:id" component={TraceGraph} />
+								<Route path={ROUTES.TRACE_GRAPH} component={TraceGraph} />
-								<Route path="/settings" exact component={SettingsPage} />
+								<Route path={ROUTES.SETTINGS} exact component={SettingsPage} />
 								<Route
-									path="/add-instrumentation"
+									path={ROUTES.INSTRUMENTATION}
 									exact
 									component={IntstrumentationPage}
 								/>
-								<Route path="/usage-explorer" component={UsageExplorer} />
+								<Route path={ROUTES.USAGE_EXPLORER} component={UsageExplorer} />
-								<Route path="/application" exact component={ServicesTable} />
+								<Route path={ROUTES.APPLICATION} exact component={ServicesTable} />
 								<Route
 									path="/"
 									exact
 									render={() => {
 										return localStorage.getItem("isLoggedIn") === "yes" ? (
-											<Redirect to="/application" />
+											<Redirect to={ROUTES.APPLICATION} />
 										) : (
-											<Redirect to="/signup" />
+											<Redirect to={ROUTES.SIGN_UP} />
 										);
 									}}
 								/>

frontend/src/modules/Auth/Signup.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Row, Space, Button, Input } from "antd";
 import api, { apiV1 } from "../../api";
+import ROUTES from "Src/constants/routes";
 
 import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";
@@ -52,7 +53,7 @@ const Signup = (props: SignUpProps) => {
 		});
 
 		localStorage.setItem("isLoggedIn", "yes");
-		props.history.push("/application");
+		props.history.push(ROUTES.APPLICATION);
 	};
 
 	return (

frontend/src/modules/Metrics/ErrorRateChart.tsx

@@ -4,6 +4,7 @@ import { ChartOptions } from "chart.js";
 import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";
 import styled from "styled-components";
+import ROUTES from "Src/constants/routes";
 
 import { metricItem } from "../../store/actions/metrics";
 
@@ -74,11 +75,11 @@ class ErrorRateChart extends React.Component<ErrorRateChartProps> {
 	};
 
 	gotoTracesHandler = () => {
-		this.props.history.push("/traces");
+		this.props.history.push(ROUTES.TRACES);
 	};
 
 	gotoAlertsHandler = () => {
-		this.props.history.push("/service-map");
+		this.props.history.push(ROUTES.SERVICE_MAP);
 		// PNOTE - Keeping service map for now, will replace with alerts when alert page is made
 	};
 

frontend/src/modules/Metrics/LatencyLineChart.tsx

@@ -4,6 +4,7 @@ import { ChartOptions } from "chart.js";
 import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";
 import styled from "styled-components";
+import ROUTES from "Src/constants/routes";
 
 import { metricItem } from "../../store/actions/metrics";
 
@@ -80,11 +81,11 @@ class LatencyLineChart extends React.Component<LatencyLineChartProps> {
 	};
 
 	gotoTracesHandler = (xc: any) => {
-		this.props.history.push("/traces");
+		this.props.history.push(ROUTES.TRACES);
 	};
 
 	gotoAlertsHandler = () => {
-		this.props.history.push("/service-map");
+		this.props.history.push(ROUTES.SERVICE_MAP);
 		// PNOTE - Keeping service map for now, will replace with alerts when alert page is made
 	};
 

frontend/src/modules/Metrics/RequestRateChart.tsx

@@ -6,6 +6,7 @@ import { RouteComponentProps } from "react-router-dom";
 import styled from "styled-components";
 
 import { metricItem } from "../../store/actions/metrics";
+import ROUTES from "Src/constants/routes";
 
 const ChartPopUpUnique = styled.div<{
 	ycoordinate: number;
@@ -72,11 +73,11 @@ class RequestRateChart extends React.Component<RequestRateChartProps> {
 	};
 
 	gotoTracesHandler = () => {
-		this.props.history.push("/traces");
+		this.props.history.push(ROUTES.TRACES);
 	};
 
 	gotoAlertsHandler = () => {
-		this.props.history.push("/service-map");
+		this.props.history.push(ROUTES.SERVICE_MAP);
 		// PNOTE - Keeping service map for now, will replace with alerts when alert page is made
 	};
 

frontend/src/modules/Metrics/ServiceMetrics.tsx

@@ -3,6 +3,7 @@ import { Tabs, Card, Row, Col } from "antd";
 import { connect } from "react-redux";
 import { useParams, RouteComponentProps } from "react-router-dom";
 import { withRouter } from "react-router";
+import ROUTES from "Src/constants/routes";
 
 import {
 	getServicesMetrics,
@@ -50,7 +51,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 			urlParams.set(METRICS_PAGE_QUERY_PARAM.service, servicename);
 		}
 
-		props.history.push(`/traces?${urlParams.toString()}`);
+		props.history.push(`${ROUTES.TRACES}?${urlParams.toString()}`);
 	};
 
 	return (

frontend/src/modules/Metrics/ServicesTable.tsx

@@ -1,11 +1,17 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { NavLink } from "react-router-dom";
 import { Button, Space, Spin, Table } from "antd";
 import styled from "styled-components";
 import { connect } from "react-redux";
+import { SKIP_ONBOARDING } from "Src/constants/onboarding";
+import ROUTES from "Src/constants/routes";
 
-import { getServicesList, GlobalTime, servicesListItem } from "../../store/actions";
+import {
+	getServicesList,
+	GlobalTime,
+	servicesListItem,
+} from "../../store/actions";
 import { StoreState } from "../../store/reducers";
 import { CustomModal } from "../../components/Modal";
 
@@ -47,7 +53,10 @@ const columns = [
 		dataIndex: "serviceName",
 		key: "serviceName",
 		render: (text: string) => (
-			<NavLink style={{ textTransform: "capitalize" }} to={"/application/" + text}>
+			<NavLink
+				style={{ textTransform: "capitalize" }}
+				to={ROUTES.APPLICATION + "/" + text}
+			>
 				<strong>{text}</strong>
 			</NavLink>
 		),
@@ -90,11 +99,11 @@ const _ServicesTable = (props: ServicesTableProps) => {
 		!initialDataFetch && props.servicesList.length === 0;
 	const refetchFromBackend = isEmptyServiceList || errorObject.isError;
 	const [skipOnboarding, setSkipOnboarding] = useState(
-		localStorage.getItem("skip_onboarding") === "true",
+		localStorage.getItem(SKIP_ONBOARDING) === "true",
 	);
 
 	const onContinueClick = () => {
-		localStorage.setItem("skip_onboarding", "true");
+		localStorage.setItem(SKIP_ONBOARDING, "true");
 		setSkipOnboarding(true);
 	};
 
@@ -114,7 +123,7 @@ const _ServicesTable = (props: ServicesTableProps) => {
 	useEffect(getApiServiceData, [props.globalTime]);
 	useEffect(() => {
 		if (props.servicesList.length > 1) {
-			localStorage.removeItem("skip_onboarding");
+			localStorage.removeItem(SKIP_ONBOARDING);
 		}
 
 		refetchFromBackend && setTimeout(getApiServiceData, 50000);
@@ -178,21 +187,22 @@ const _ServicesTable = (props: ServicesTableProps) => {
 				pagination={false}
 			/>
 
-			{props.servicesList[0] !== undefined && props.servicesList[0].numCalls === 0 && (
+			{props.servicesList[0] !== undefined &&
-				<Space
+				props.servicesList[0].numCalls === 0 && (
-					style={{ width: "100%", margin: "40px 0", justifyContent: "center" }}
+					<Space
-				>
+						style={{ width: "100%", margin: "40px 0", justifyContent: "center" }}
-					No applications present. Please add instrumentation (follow this
-					<a
-						href={"https://signoz.io/docs/instrumentation/overview"}
-						target={"_blank"}
-						style={{ marginLeft: 3 }}
 					>
-						guide
+						No applications present. Please add instrumentation (follow this
-					</a>
+						<a
-					)
+							href={"https://signoz.io/docs/instrumentation/overview"}
-				</Space>
+							target={"_blank"}
-			)}
+							style={{ marginLeft: 3 }}
+						>
+							guide
+						</a>
+						)
+					</Space>
+				)}
 		</Wrapper>
 	);
 };

frontend/src/modules/Nav/SideNav.tsx

@@ -3,6 +3,7 @@ import { Layout, Menu, Switch as ToggleButton } from "antd";
 import { NavLink } from "react-router-dom";
 import { useThemeSwitcher } from "react-css-theme-switcher";
 import { useHistory } from "react-router-dom";
+import ROUTES from "Src/constants/routes";
 
 import {
 	LineChartOutlined,
@@ -20,7 +21,7 @@ const SideNav = () => {
 	const [collapsed, setCollapsed] = useState<boolean>(false);
 	const history = useHistory();
 
-	if (status === "loading" || history.location.pathname === "/signup") {
+	if (status === "loading" || history.location.pathname === ROUTES.SIGN_UP) {
 		return null;
 	}
 	const toggleTheme = (isChecked: boolean) => {
@@ -55,20 +56,23 @@ const SideNav = () => {
 			<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
 				<Menu.Item key="1" icon={<BarChartOutlined />}>
 					<NavLink
-						to="/application"
+						to={ROUTES.APPLICATION}
 						style={{ fontSize: 12, textDecoration: "none" }}
 					>
 						Metrics
 					</NavLink>
 				</Menu.Item>
 				<Menu.Item key="2" icon={<AlignLeftOutlined />}>
-					<NavLink to="/traces" style={{ fontSize: 12, textDecoration: "none" }}>
+					<NavLink
+						to={ROUTES.TRACES}
+						style={{ fontSize: 12, textDecoration: "none" }}
+					>
 						Traces
 					</NavLink>
 				</Menu.Item>
 				<Menu.Item key="3" icon={<DeploymentUnitOutlined />}>
 					<NavLink
-						to="/service-map"
+						to={ROUTES.SERVICE_MAP}
 						style={{ fontSize: 12, textDecoration: "none" }}
 					>
 						Service Map
@@ -76,22 +80,22 @@ const SideNav = () => {
 				</Menu.Item>
 				<Menu.Item key="4" icon={<LineChartOutlined />}>
 					<NavLink
-						to="/usage-explorer"
+						to={ROUTES.USAGE_EXPLORER}
 						style={{ fontSize: 12, textDecoration: "none" }}
 					>
 						Usage Explorer
 					</NavLink>
 				</Menu.Item>
 				<Menu.Item key="5" icon={<SettingOutlined />}>
-					<NavLink to="/settings" style={{ fontSize: 12, textDecoration: "none" }}>
+					<NavLink
+						to={ROUTES.SETTINGS}
+						style={{ fontSize: 12, textDecoration: "none" }}
+					>
 						Settings
 					</NavLink>
 				</Menu.Item>
 				<Menu.Item key="6" icon={<ApiOutlined />}>
-					<NavLink
+					<NavLink to={ROUTES.INSTRUMENTATION} style={{ fontSize: 12, textDecoration: "none" }}>
-						to="/add-instrumentation"
-						style={{ fontSize: 12, textDecoration: "none" }}
-					>
 						Add instrumentation
 					</NavLink>
 				</Menu.Item>

frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { withRouter } from "react-router";
 import { RouteComponentProps, useLocation } from "react-router-dom";
 import { connect } from "react-redux";
+import ROUTES from "Src/constants/routes";
 
 import CustomDateTimeModal from "./CustomDateTimeModal";
 import { GlobalTime, updateTimeInterval } from "../../../store/actions";
@@ -195,7 +196,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 		{ value: "1day", label: "Last 1 day" },
 		{ value: "1week", label: "Last 1 week" },
 	];
-	if (props.location.pathname.startsWith("/usage-explorer")) {
+	if (props.location.pathname.startsWith(ROUTES.USAGE_EXPLORER)) {
 		return null;
 	} else {
 		const inputLabeLToShow =

frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Breadcrumb } from "antd";
 import { Link, withRouter } from "react-router-dom";
 import styled from "styled-components";
+import ROUTES from "Src/constants/routes";
 
 const BreadCrumbWrapper = styled.div`
 	padding-top: 20px;
@@ -10,12 +11,12 @@ const BreadCrumbWrapper = styled.div`
 
 const breadcrumbNameMap: any = {
 	// PNOTE - TO DO - Remove any and do typechecking - like https://stackoverflow.com/questions/56568423/typescript-no-index-signature-with-a-parameter-of-type-string-was-found-on-ty
-	"/application": "Application",
+	[ROUTES.APPLICATION]: "Application",
-	"/traces": "Traces",
+	[ROUTES.TRACES]: "Traces",
-	"/service-map": "Service Map",
+	[ROUTES.SERVICE_MAP]: "Service Map",
-	"/usage-explorer": "Usage Explorer",
+	[ROUTES.USAGE_EXPLORER]: "Usage Explorer",
-	"/add-instrumentation": "Add instrumentation",
+	[ROUTES.INSTRUMENTATION]: "Add instrumentation",
-	"/settings": "Settings",
+	[ROUTES.SETTINGS]: "Settings",
 };
 
 const ShowBreadcrumbs = withRouter((props) => {

frontend/src/modules/Nav/TopNav/index.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React from "react";
 import { Row, Col } from "antd";
 import { useHistory } from "react-router-dom";
+import ROUTES from "Src/constants/routes";
 
 import DateTimeSelector from "./DateTimeSelector";
 import ShowBreadcrumbs from "./ShowBreadcrumbs";
@@ -8,7 +9,7 @@ import ShowBreadcrumbs from "./ShowBreadcrumbs";
 const TopNav = () => {
 	const history = useHistory();
 
-	if (history.location.pathname === "/signup") {
+	if (history.location.pathname === ROUTES.SIGN_UP) {
 		return null;
 	}
 	return (

frontend/src/modules/Traces/TraceGraph.tsx

@@ -76,12 +76,24 @@ const _TraceGraph = (props: TraceGraphProps) => {
 			{/*</Col>*/}
 			<Col md={24} sm={24}>
 				{/* <Card style={{ width: 640 }}> */}
-				<Space direction="vertical" size="middle" style={{width: '100%'}}>
+				<Space direction="vertical" size="middle" style={{ width: "100%" }}>
-					<Card bodyStyle={{ padding: 80 }} style={{ height: 320,
+					<Card bodyStyle={{ padding: 80 }} style={{ height: 320 }}>
-						 }}>
+						<div
-						<div style={{display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center'}}>
+							style={{
-							<div style={{textAlign: "center"}}>Trace Graph component ID is {params.id} </div>
+								display: "flex",
-							<Button type="primary" onClick={setResetZoom.bind(this, true)} style={{width: 160}}>
+								justifyContent: "center",
+								flexDirection: "column",
+								alignItems: "center",
+							}}
+						>
+							<div style={{ textAlign: "center" }}>
+								Trace Graph component ID is {params.id}{" "}
+							</div>
+							<Button
+								type="primary"
+								onClick={setResetZoom.bind(this, true)}
+								style={{ width: 160 }}
+							>
 								Reset Zoom
 							</Button>
 							<div id="chart" style={{ fontSize: 12, marginTop: 20 }}></div>

frontend/src/modules/Traces/TraceList.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { NavLink } from "react-router-dom";
 import { Space, Table } from "antd";
+import ROUTES from "Src/constants/routes";
 
 import { traceResponseNew, fetchTraces, pushDStree } from "../../store/actions";
 import { StoreState } from "../../store/reducers";
@@ -68,7 +69,7 @@ const _TraceList = (props: TraceListProps) => {
 			dataIndex: "traceid",
 			key: "traceid",
 			render: (text: string) => (
-				<NavLink to={"/traces/" + text}>{text.slice(-16)}</NavLink>
+				<NavLink to={ROUTES.TRACES + "/" + text}>{text.slice(-16)}</NavLink>
 			),
 			//only last 16 chars have traceID, druid makes it 32 by adding zeros
 		},

frontend/src/store/actions/traces.ts

@@ -4,6 +4,7 @@ import api, { apiV1 } from "../../api";
 import { Dispatch } from "redux";
 import { GlobalTime } from "./global";
 import { toUTCEpoch } from "../../utils/timeUtils";
+import ROUTES from "Src/constants/routes";
 
 // PNOTE
 // define trace interface - what it should return
@@ -141,7 +142,7 @@ export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
 
 export const fetchTraceItem = (traceID: string) => {
 	return async (dispatch: Dispatch) => {
-		let request_string = "/traces/" + traceID;
+		let request_string = ROUTES.TRACES + "/" + traceID;
 		const response = await api.get<spansWSameTraceIDResponse>(
 			apiV1 + request_string,
 		);

frontend/src/utils/app.ts

@@ -1,3 +1,5 @@
+import { SKIP_ONBOARDING } from "Src/constants/onboarding";
+
 export const isOnboardingSkipped = () => {
-	return localStorage.getItem("skip_onboarding") === "true";
+	return localStorage.getItem(SKIP_ONBOARDING) === "true";
 };