fix(FE): tsConfig baseUrl is used rather than using the alias for module (#256)

* tsconfig-paths-webpack-plugin package is added

* baseUrl is updated

* webpack config for development and production are updated

* baseUrl is removed in the file

* more .. is being removed

* chore: removed the commented part in the webpack.config

Co-authored-by: FIPalash Gupta <palash@indiagold.co>

frontend/package.json

@@ -102,6 +102,7 @@
 		"styled-components": "^5.2.1",
 		"terser-webpack-plugin": "4.2.3",
 		"ts-pnp": "1.2.0",
+		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
 		"url-loader": "4.1.1",
 		"web-vitals": "^0.2.4",

frontend/src/api/index.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosRequestConfig } from "axios";
-import { ENVIRONMENT } from "Src/constants/env";
+import { ENVIRONMENT } from "constants/env";
 import apiV1 from "./apiV1";
 
 export default axios.create({

frontend/src/components/NotFound/index.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 import { Button, Text, TextContainer, Container } from "./styles";
 
-import NotFoundImage from "Src/assets/NotFound";
+import NotFoundImage from "assets/NotFound";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
 
 const NotFound = (): JSX.Element => {
 	return (

frontend/src/index.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { ThemeSwitcherProvider } from "react-css-theme-switcher";
-import store from "Src/store";
+import store from "store";
-import AppWrapper from "Src/modules/AppWrapper";
+import AppWrapper from "modules/AppWrapper";
-import "Src/assets/index.css";
+import "assets/index.css";
 import { BrowserRouter as Router } from "react-router-dom";
-import themes from "Src/themes";
+import themes from "themes";
 
 ReactDOM.render(
 	<Provider store={store}>

frontend/src/modules/AppWrapper.tsx

@@ -1,9 +1,9 @@
 import React, { Suspense } from "react";
 import { useThemeSwitcher } from "react-css-theme-switcher";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
-import { IS_LOGGED_IN } from "Src/constants/auth";
+import { IS_LOGGED_IN } from "constants/auth";
 import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
-import { CustomSpinner } from "./../components/Spiner";
+import { CustomSpinner } from "components/Spiner";
 
 import BaseLayout from "./BaseLayout";
 import {
@@ -16,9 +16,9 @@ import {
 	Signup,
 	SettingsPage,
 	InstrumentationPage,
-} from "Src/pages";
+} from "pages";
 import { RouteProvider } from "./RouteProvider";
-import NotFound from "Src/components/NotFound";
+import NotFound from "components/NotFound";
 
 const App = () => {
 	const { status } = useThemeSwitcher();

frontend/src/modules/Auth/Signup.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { Row, Space, Button, Input } from "antd";
-import api, { apiV1 } from "../../api";
+import api, { apiV1 } from "api";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
-import { IS_LOGGED_IN } from "Src/constants/auth";
+import { IS_LOGGED_IN } from "constants/auth";
 
 import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";

frontend/src/modules/Metrics/ErrorRateChart.tsx

@@ -4,9 +4,9 @@ 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 ROUTES from "constants/routes";
 
-import { metricItem } from "../../store/actions/MetricsActions";
+import { metricItem } from "store/actions/MetricsActions";
 
 const ChartPopUpUnique = styled.div<{
 	ycoordinate: number;

frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx

@@ -3,7 +3,7 @@ import { Line as ChartJSLine } from "react-chartjs-2";
 import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";
 import { getOptions, borderColors } from "./graphConfig";
-import { externalMetricsItem } from "../../../store/actions/MetricsActions";
+import { externalMetricsItem } from "store/actions/MetricsActions";
 import { uniqBy, filter } from "lodash";
 
 const theme = "dark";

frontend/src/modules/Metrics/GenericVisualization.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Bar, Line as ChartJSLine } from "react-chartjs-2";
 import styled from "styled-components";
 
-import { customMetricsItem } from "../../store/actions/MetricsActions";
+import { customMetricsItem } from "store/actions/MetricsActions";
 
 const GenVisualizationWrapper = styled.div`
 	height: 160px;
@@ -15,10 +15,16 @@ interface GenericVisualizationsProps {
 
 const GenericVisualizations = (props: GenericVisualizationsProps) => {
 	const data = {
-		labels: (props.data !== undefined && props.data !== null) && props.data.map((s) => new Date(s.timestamp / 1000000)),
+		labels:
+			props.data !== undefined &&
+			props.data !== null &&
+			props.data.map((s) => new Date(s.timestamp / 1000000)),
 		datasets: [
 			{
-				data: (props.data !== undefined && props.data !== null) && props.data.map((s) => s.value),
+				data:
+					props.data !== undefined &&
+					props.data !== null &&
+					props.data.map((s) => s.value),
 				borderColor: "rgba(250,174,50,1)", // for line chart
 				backgroundColor: props.chartType === "bar" ? "rgba(250,174,50,1)" : "", // for bar chart, don't assign backgroundcolor if its not a bar chart, may be relevant for area graph though
 			},

frontend/src/modules/Metrics/LatencyLineChart.tsx

@@ -4,7 +4,7 @@ import { ChartOptions } from "chart.js";
 import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";
 import styled from "styled-components";
-import { metricItem } from "../../store/actions/MetricsActions";
+import { metricItem } from "store/actions/MetricsActions";
 
 const ChartPopUpUnique = styled.div<{
 	ycoordinate: number;

frontend/src/modules/Metrics/RequestRateChart.tsx

@@ -5,8 +5,8 @@ import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";
 import styled from "styled-components";
 
-import { metricItem } from "../../store/actions/MetricsActions";
+import { metricItem } from "store/actions/MetricsActions";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
 
 const ChartPopUpUnique = styled.div<{
 	ycoordinate: number;
@@ -208,7 +208,7 @@ class RequestRateChart extends React.Component<RequestRateChartProps> {
 		return (
 			<div>
 				{this.GraphTracePopUp()}
-				<div style={{textAlign: "center"}}>Request per sec</div>
+				<div style={{ textAlign: "center" }}>Request per sec</div>
 				<ChartJSLine
 					ref={this.chartRef}
 					data={data_chartJS}

frontend/src/modules/Metrics/ServiceMetrics.tsx

@@ -3,8 +3,8 @@ 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 ROUTES from "constants/routes";
-import { GlobalTime, updateTimeInterval } from "Src/store/actions";
+import { GlobalTime, updateTimeInterval } from "store/actions";
 import {
 	metricItem,
 	externalMetricsAvgDurationItem,
@@ -12,7 +12,7 @@ import {
 	externalMetricsItem,
 	dbOverviewMetricsItem,
 	topEndpointListItem,
-} from "../../store/actions/MetricsActions";
+} from "store/actions/MetricsActions";
 import {
 	getServicesMetrics,
 	getTopEndpoints,
@@ -20,14 +20,14 @@ import {
 	getExternalMetrics,
 	getExternalAvgDurationMetrics,
 	getExternalErrCodeMetrics,
-} from "../../store/actions/MetricsActions";
+} from "store/actions/MetricsActions";
 
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
 import LatencyLineChart from "./LatencyLineChart";
 import RequestRateChart from "./RequestRateChart";
 import ErrorRateChart from "./ErrorRateChart";
 import TopEndpointsTable from "./TopEndpointsTable";
-import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
+import { METRICS_PAGE_QUERY_PARAM } from "constants/query";
 import ExternalApiGraph from "./ExternalApi";
 const { TabPane } = Tabs;
 

frontend/src/modules/Metrics/ServicesTable.tsx

@@ -3,13 +3,13 @@ import { NavLink } from "react-router-dom";
 import { Button, Space, Table } from "antd";
 import styled from "styled-components";
 import { connect } from "react-redux";
-import { SKIP_ONBOARDING } from "Src/constants/onboarding";
+import { SKIP_ONBOARDING } from "constants/onboarding";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
-import { getServicesList, GlobalTime } from "../../store/actions";
+import { getServicesList, GlobalTime } from "store/actions";
-import { servicesListItem } from "../../store/actions/MetricsActions";
+import { servicesListItem } from "store/actions/MetricsActions";
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
-import { CustomModal } from "../../components/Modal";
+import { CustomModal } from "components/Modal";
-import { CustomSpinner,DefaultSpinner } from "../../components/Spiner";
+import { CustomSpinner, DefaultSpinner } from "components/Spiner";
 
 interface ServicesTableProps {
 	servicesList: servicesListItem[];
@@ -124,9 +124,7 @@ const _ServicesTable = (props: ServicesTableProps) => {
 	}, [props.servicesList, errorObject]);
 
 	if (!initialDataFetch) {
-		return (
+		return <CustomSpinner size="large" tip="Fetching data..." />;
-			<CustomSpinner size="large" tip="Fetching data..."/>
-		);
 	}
 
 	if (refetchFromBackend && !skipOnboarding) {
@@ -152,7 +150,7 @@ const _ServicesTable = (props: ServicesTableProps) => {
 						allowFullScreen
 					></iframe>
 					<div style={{ margin: "20px 0" }}>
-						<DefaultSpinner/>
+						<DefaultSpinner />
 					</div>
 					<div>
 						No instrumentation data.

frontend/src/modules/Metrics/TopEndpointsTable.tsx

@@ -3,10 +3,10 @@ import { Table, Button, Tooltip } from "antd";
 import { connect } from "react-redux";
 import styled from "styled-components";
 import { useHistory, useParams } from "react-router-dom";
-import { topEndpointListItem } from "../../store/actions/MetricsActions";
+import { topEndpointListItem } from "store/actions/MetricsActions";
-import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
+import { METRICS_PAGE_QUERY_PARAM } from "constants/query";
-import { GlobalTime } from "Src/store/actions";
+import { GlobalTime } from "store/actions";
-import { StoreState } from "Src/store/reducers";
+import { StoreState } from "store/reducers";
 import "./TopEndpointsTable.css";
 
 const Wrapper = styled.div`

frontend/src/modules/Nav/SideNav.tsx

@@ -3,7 +3,7 @@ import { Layout, Menu, Switch as ToggleButton } from "antd";
 import { NavLink } from "react-router-dom";
 import { useThemeSwitcher } from "react-css-theme-switcher";
 import { useLocation } from "react-router-dom";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
 
 import {
 	LineChartOutlined,

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Modal, DatePicker } from "antd";
-import { DateTimeRangeType } from "../../../store/actions";
+import { DateTimeRangeType } from "store/actions";
 import { Moment } from "moment";
 import moment from "moment";
 

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

@@ -6,19 +6,19 @@ 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 ROUTES from "constants/routes";
 import CustomDateTimeModal from "./CustomDateTimeModal";
-import { GlobalTime, updateTimeInterval } from "../../../store/actions";
+import { GlobalTime, updateTimeInterval } from "store/actions";
-import { StoreState } from "../../../store/reducers";
+import { StoreState } from "store/reducers";
 import FormItem from "antd/lib/form/FormItem";
 import {
 	Options,
 	ServiceMapOptions,
 	DefaultOptionsBasedOnRoute,
 } from "./config";
-import { DateTimeRangeType } from "../../../store/actions";
+import { DateTimeRangeType } from "store/actions";
-import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
+import { METRICS_PAGE_QUERY_PARAM } from "constants/query";
-import { LOCAL_STORAGE } from "Src/constants/localStorage";
+import { LOCAL_STORAGE } from "constants/localStorage";
 import moment from "moment";
 const { Option } = DefaultSelect;
 

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

@@ -2,7 +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";
+import ROUTES from "constants/routes";
 
 const BreadCrumbWrapper = styled.div`
 	padding-top: 20px;

frontend/src/modules/Nav/TopNav/config.ts

@@ -1,4 +1,4 @@
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
 
 export const Options = [
 	{ value: "5min", label: "Last 5 min" },

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Row, Col } from "antd";
 import { useHistory } from "react-router-dom";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
 
 import DateTimeSelector from "./DateTimeSelector";
 import ShowBreadcrumbs from "./ShowBreadcrumbs";

frontend/src/modules/Nav/TopNav/utils.ts

@@ -1,4 +1,4 @@
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
 
 export const getLocalStorageRouteKey = (pathName: string) => {
 	let localStorageKey = "";

frontend/src/modules/RouteProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, createContext, ReactNode, Dispatch } from "react";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
 
 type State = {
 	[key: string]: {

frontend/src/modules/Servicemap/ServiceMap.tsx

@@ -6,15 +6,15 @@ import {
 	serviceMapStore,
 	getServiceMapItems,
 	getDetailedServiceMapItems,
-} from "Src/store/actions";
+} from "store/actions";
 import styled from "styled-components";
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
 
 import { getZoomPx, getGraphData, getTooltip, transformLabel } from "./utils";
 import SelectService from "./SelectService";
 import { ForceGraph2D } from "react-force-graph";
-import { useRoute } from "../RouteProvider";
+import { useRoute } from "modules/RouteProvider";
-import { CustomSpinner } from "../../components/Spiner";
+import { CustomSpinner } from "components/Spiner";
 
 const Container = styled.div`
 	.force-graph-container .graph-tooltip {
@@ -78,7 +78,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 		fgRef.current && fgRef.current.d3Force("charge").strength(-400);
 	});
 	if (!serviceMap.items.length || !serviceMap.services.length) {
-		return <CustomSpinner size="large" tip="Loading..."/>;
+		return <CustomSpinner size="large" tip="Loading..." />;
 	}
 
 	const zoomToService = (value: string) => {

frontend/src/modules/Settings/settingsPage.tsx

@@ -1,13 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Form, Input, Space } from "antd";
 import { connect } from "react-redux";
-import { Tooltip } from "antd";
+import { StoreState } from "store/reducers";
-import {
-	InfoCircleOutlined,
-	EyeTwoTone,
-	EyeInvisibleOutlined,
-} from "@ant-design/icons";
-import { StoreState } from "../../store/reducers";
 import { Alert } from "antd";
 
 interface SettingsPageProps {}

frontend/src/modules/Traces/FilterStateDisplay.tsx

@@ -3,9 +3,8 @@ import { Card, Tag as AntTag } from "antd";
 import { connect } from "react-redux";
 
 import styled from "styled-components";
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
-import { TagItem, TraceFilters, updateTraceFilters } from "../../store/actions";
+import { TagItem, TraceFilters, updateTraceFilters } from "store/actions";
-
 
 const Tag = styled(AntTag)`
 	.anticon {

frontend/src/modules/Traces/SelectedSpanDetails.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Card, Space, Tabs, Typography } from "antd";
 import styled from "styled-components";
-import { pushDStree } from "Src/store/actions";
+import { pushDStree } from "store/actions";
 
 const { TabPane } = Tabs;
 

frontend/src/modules/Traces/TraceCustomVisualizations.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from "react";
-import GenericVisualizations from "../Metrics/GenericVisualization";
+import GenericVisualizations from "modules/Metrics/GenericVisualization";
 import { Select, Card, Space, Form } from "antd";
 import { connect } from "react-redux";
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
-import { GlobalTime, TraceFilters } from "../../store/actions";
+import { GlobalTime, TraceFilters } from "store/actions";
-import { useRoute } from "../RouteProvider";
+import { useRoute } from "modules/RouteProvider";
-import { getFilteredTraceMetrics } from "../../store/actions/MetricsActions";
+import { getFilteredTraceMetrics } from "store/actions/MetricsActions";
-import { customMetricsItem } from "../../store/actions/MetricsActions";
+import { customMetricsItem } from "store/actions/MetricsActions";
 const { Option } = Select;
 
 const entity = [

frontend/src/modules/Traces/TraceFilter.tsx

@@ -9,16 +9,16 @@ import {
 	fetchTraces,
 	TraceFilters,
 	GlobalTime,
-} from "../../store/actions";
+} from "store/actions";
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
 import LatencyModalForm from "./LatencyModalForm";
 import { FilterStateDisplay } from "./FilterStateDisplay";
 
 import FormItem from "antd/lib/form/FormItem";
-import api, { apiV1 } from "../../api";
+import api, { apiV1 } from "api";
 import { useLocation } from "react-router-dom";
-import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
+import { METRICS_PAGE_QUERY_PARAM } from "constants/query";
-import { useRoute } from "../RouteProvider";
+import { useRoute } from "modules/RouteProvider";
 
 const { Option } = Select;
 
@@ -56,13 +56,13 @@ const _TraceFilter = (props: TraceFilterProps) => {
 	const spanKindList: ISpanKind[] = [
 		{
 			label: "SERVER",
-			value: "2"
+			value: "2",
 		},
 		{
 			label: "CLIENT",
-			value: "3"
+			value: "3",
-		}
+		},
-	]
+	];
 
 	useEffect(() => {
 		handleApplyFilterForm({
@@ -70,7 +70,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 			tags: [],
 			operation: "",
 			latency: { min: "", max: "" },
-			kind: ""
+			kind: "",
 		});
 	}, []);
 
@@ -93,7 +93,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 						...props.traceFilters,
 						operation: operationName,
 						service: serviceName,
-						kind: ""
+						kind: "",
 					});
 					populateData(serviceName);
 				} else if (serviceName && errorTag) {
@@ -107,7 +107,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 								operator: "equals",
 							},
 						],
-						kind: ""
+						kind: "",
 					});
 				} else {
 					if (operationName) {
@@ -282,7 +282,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 						operator: values.operator,
 					},
 				],
-				kind: props.traceFilters.kind
+				kind: props.traceFilters.kind,
 			});
 		} else {
 			props.updateTraceFilters({
@@ -296,7 +296,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 						operator: values.operator,
 					},
 				],
-				kind: props.traceFilters.kind
+				kind: props.traceFilters.kind,
 			});
 		}
 
@@ -361,7 +361,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 				max: "",
 				min: "",
 			},
-			kind: values.kind
+			kind: values.kind,
 		});
 	};
 
@@ -372,14 +372,14 @@ const _TraceFilter = (props: TraceFilterProps) => {
 				operation: "",
 				tags: [],
 				latency: { min: "", max: "" },
-				kind: ""
+				kind: "",
 			});
 		};
 	}, []);
 
-	const handleChangeSpanKind = (value:string = '') => {
+	const handleChangeSpanKind = (value: string = "") => {
 		props.updateTraceFilters({ ...props.traceFilters, kind: value });
-	}
+	};
 
 	return (
 		<div>
@@ -437,8 +437,10 @@ const _TraceFilter = (props: TraceFilterProps) => {
 						placeholder="Select Span Kind"
 						allowClear
 					>
-						{spanKindList.map(spanKind => (
+						{spanKindList.map((spanKind) => (
-							<Option value={spanKind.value} key={spanKind.value}>{spanKind.label}</Option>
+							<Option value={spanKind.value} key={spanKind.value}>
+								{spanKind.label}
+							</Option>
 						))}
 					</Select>
 				</FormItem>

frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx

@@ -3,8 +3,8 @@ import { Table, Progress, Tabs, Button, Row, Col } from "antd";
 import "./TraceGanttChart.css";
 import { max, isEmpty, has } from "lodash-es";
 import styled from "styled-components";
-import { pushDStree } from "Src/store/actions";
+import { pushDStree } from "store/actions";
-import traverseTreeData from "Src/modules/Traces/TraceGanttChart/TraceGanttChartHelpers";
+import traverseTreeData from "modules/Traces/TraceGanttChart/TraceGanttChartHelpers";
 
 const { TabPane } = Tabs;
 

frontend/src/modules/Traces/TraceGanttChart/TraceGanttChartHelpers.ts

@@ -1,5 +1,5 @@
 import { isEmpty } from "lodash-es";
-import { pushDStree } from "Src/store/actions";
+import { pushDStree } from "store/actions";
 
 interface itemProps {
 	treeData: pushDStree[];

frontend/src/modules/Traces/TraceGraph.tsx

@@ -6,13 +6,13 @@ import { Card, Row, Col, Space, Affix } from "antd";
 import * as d3 from "d3";
 import * as d3Tip from "d3-tip";
 import "./TraceGraph.css";
-import { spanToTreeUtil } from "Src/utils/spanToTree";
+import { spanToTreeUtil } from "utils/spanToTree";
 import {
 	fetchTraceItem,
 	pushDStree,
 	spansWSameTraceIDResponse,
-} from "../../store/actions";
+} from "store/actions";
-import { StoreState } from "Src/store/reducers";
+import { StoreState } from "store/reducers";
 import SelectedSpanDetails from "./SelectedSpanDetails";
 import TraceGanttChart from "./TraceGanttChart";
 import styled from "styled-components";
@@ -72,14 +72,22 @@ const _TraceGraph = (props: TraceGraphProps) => {
 			setSortedTreeData(sortedData?.[0]);
 			getSpanInfo(sortedData?.[0], spanId);
 			// This is causing element to change ref. Can use both useRef or this approach.
-			d3.select("#chart").datum(tree).call(chart).sort(item=>item.startTime);
+			d3
+				.select("#chart")
+				.datum(tree)
+				.call(chart)
+				.sort((item) => item.startTime);
 		}
 	}, [props.traceItem]);
 	// if this monitoring of props.traceItem.data is removed then zoom on click doesn't work
 	// Doesn't work if only do initial check, works if monitor an element - as it may get updated in sometime
 
 	useEffect(() => {
-		if(!isEmpty(sortedTreeData) && sortedTreeData?.id !== "empty" && isEmpty(clickedSpanTags)) {
+		if (
+			!isEmpty(sortedTreeData) &&
+			sortedTreeData?.id !== "empty" &&
+			isEmpty(clickedSpanTags)
+		) {
 			setClickedSpanTags(sortedTreeData?.[0]);
 		}
 	}, [sortedTreeData]);
@@ -87,7 +95,11 @@ const _TraceGraph = (props: TraceGraphProps) => {
 	useEffect(() => {
 		if (resetZoom) {
 			// This is causing element to change ref. Can use both useRef or this approach.
-			d3.select("#chart").datum(tree).call(chart).sort(item=>item.startTime);
+			d3
+				.select("#chart")
+				.datum(tree)
+				.call(chart)
+				.sort((item) => item.startTime);
 			setResetZoom(false);
 		}
 	}, [resetZoom]);

frontend/src/modules/Traces/TraceGraphColumn.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { connect } from "react-redux";
 import { Table } from "antd";
 
-import { traceResponseNew, pushDStree } from "../../store/actions";
+import { traceResponseNew, pushDStree } from "store/actions";
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
 
 interface TraceGraphColumnProps {
 	traces: traceResponseNew;

frontend/src/modules/Traces/TraceList.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import { useHistory} from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import { Space, Table } from "antd";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
 
-import { traceResponseNew, fetchTraces, pushDStree } from "../../store/actions";
+import { traceResponseNew, fetchTraces, pushDStree } from "store/actions";
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
-import { isOnboardingSkipped } from "../../utils/app";
+import { isOnboardingSkipped } from "utils/app";
 import moment from "moment";
 import styled from "styled-components";
 
 const StyledTable = styled(Table)`
 	cursor: pointer;
-`
+`;
 
 const TraceHeader = styled.div`
 	margin: 16px 0;
@@ -103,12 +103,13 @@ const _TraceList = (props: TraceListProps) => {
 
 			//antd table in typescript - https://codesandbox.io/s/react-typescript-669cv
 
-			return <StyledTable
+			return (
-				dataSource={dataSource}
+				<StyledTable
-				columns={columns}
+					dataSource={dataSource}
-				size="middle"
+					columns={columns}
-				rowClassName=""
+					size="middle"
-				onRow={(record) => ({
+					rowClassName=""
+					onRow={(record) => ({
 						onClick: () => {
 							history.push({
 								pathname: ROUTES.TRACES + "/" + record.traceid,
@@ -116,10 +117,10 @@ const _TraceList = (props: TraceListProps) => {
 									spanId: record.spanid,
 								},
 							});
-						}
+						},
-				})}
+					})}
-		/>
+				/>
-			;
+			);
 		} else {
 			if (isOnboardingSkipped()) {
 				return (

frontend/src/modules/Usage/UsageExplorer.tsx

@@ -8,12 +8,12 @@ import {
 	getUsageData,
 	GlobalTime,
 	usageDataItem,
-} from "../../store/actions";
+} from "store/actions";
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
 import moment from "moment";
-import { isOnboardingSkipped } from "../../utils/app";
+import { isOnboardingSkipped } from "utils/app";
-import { useRoute } from "../RouteProvider";
+import { useRoute } from "modules/RouteProvider";
-import { servicesListItem } from "../../store/actions/MetricsActions";
+import { servicesListItem } from "store/actions/MetricsActions";
 const { Option } = Select;
 
 interface UsageExplorerProps {

frontend/src/modules/add-instrumentation/instrumentationPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Space } from "antd";
 import { connect } from "react-redux";
-import { StoreState } from "../../store/reducers";
+import { StoreState } from "store/reducers";
 import { useThemeSwitcher } from "react-css-theme-switcher";
 import styled from "styled-components";
 
@@ -9,7 +9,8 @@ const InstrumentCard = styled.div<{
 	currentThemeStatus: string | undefined;
 }>`
 	border-radius: 4px;
-	background: ${({ currentThemeStatus }) => currentThemeStatus === 'dark' ? '#313131' : '#ddd'};
+	background: ${({ currentThemeStatus }) =>
+		currentThemeStatus === "dark" ? "#313131" : "#ddd"};
 	padding: 33px 23px;
 	max-width: 800px;
 	margin-top: 40px;
@@ -22,20 +23,36 @@ const InstrumentationPage = (props: InstrumentationPageProps) => {
 
 	return (
 		<React.Fragment>
-			<Space style={{ marginLeft: 60, marginTop: 48, display: 'block' }}>
+			<Space style={{ marginLeft: 60, marginTop: 48, display: "block" }}>
 				<div>
-					<h2>
+					<h2>Instrument your application</h2>
-						Instrument your application
-					</h2>
 				</div>
 				<InstrumentCard currentThemeStatus={currentTheme}>
-					Congrats, you have successfully installed SigNoz!<br/>
+					Congrats, you have successfully installed SigNoz!
-					To start seeing YOUR application data here, follow the instructions in the docs -
+					<br />
-					<a href={"https://signoz.io/docs/instrumentation/overview"} target="_blank"> https://signoz.io/docs/instrumentation/overview</a>
+					To start seeing YOUR application data here, follow the instructions in the
-					<br/>
+					docs -
-					If you face any issues, join our <a href={"https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA"} target="_blank">
+					<a
-					slack community</a> to ask any questions or mail us at <a href={"mailto:support@signoz.io"} target="_blank">
+						href={"https://signoz.io/docs/instrumentation/overview"}
-					support@signoz.io</a>
+						target="_blank"
+					>
+						{" "}
+						https://signoz.io/docs/instrumentation/overview
+					</a>
+					<br />
+					If you face any issues, join our{" "}
+					<a
+						href={
+							"https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA"
+						}
+						target="_blank"
+					>
+						slack community
+					</a>{" "}
+					to ask any questions or mail us at{" "}
+					<a href={"mailto:support@signoz.io"} target="_blank">
+						support@signoz.io
+					</a>
 				</InstrumentCard>
 			</Space>
 		</React.Fragment>

frontend/src/pages.ts

@@ -1,28 +1,28 @@
 import React from "react";
 
 export const ServiceMetrics = React.lazy(
-	() => import("Src/modules/Metrics/ServiceMetricsDef"),
+	() => import("modules/Metrics/ServiceMetricsDef"),
 );
 export const ServiceMap = React.lazy(
-	() => import("Src/modules/Servicemap/ServiceMap"),
+	() => import("modules/Servicemap/ServiceMap"),
 );
 export const TraceDetail = React.lazy(
-	() => import("Src/modules/Traces/TraceDetail"),
+	() => import("modules/Traces/TraceDetail"),
 );
 export const TraceGraph = React.lazy(
-	() => import("Src/modules/Traces/TraceGraphDef"),
+	() => import("modules/Traces/TraceGraphDef"),
 );
 export const UsageExplorer = React.lazy(
-	() => import("Src/modules/Usage/UsageExplorerDef"),
+	() => import("modules/Usage/UsageExplorerDef"),
 );
 export const ServicesTable = React.lazy(
-	() => import("Src/modules/Metrics/ServicesTableDef"),
+	() => import("modules/Metrics/ServicesTableDef"),
 );
-export const Signup = React.lazy(() => import("Src/modules/Auth/Signup"));
+export const Signup = React.lazy(() => import("modules/Auth/Signup"));
 export const SettingsPage = React.lazy(
-	() => import("Src/modules/Settings/settingsPage"),
+	() => import("modules/Settings/settingsPage"),
 );
 
 export const InstrumentationPage = React.lazy(
-	() => import("Src/modules/add-instrumentation/instrumentationPage"),
+	() => import("modules/add-instrumentation/instrumentationPage"),
 );

frontend/src/store/actions/MetricsActions/metricsActions.ts

@@ -1,8 +1,8 @@
 import { Dispatch } from "redux";
-import api, { apiV1 } from "../../../api";
+import api, { apiV1 } from "api";
 
-import { GlobalTime } from "../global";
+import { GlobalTime } from "store/actions/global";
-import { toUTCEpoch } from "../../../utils/timeUtils";
+import { toUTCEpoch } from "utils/timeUtils";
 import { MetricsActionTypes } from "./metricsActionTypes";
 import * as MetricsInterfaces from "./metricsInterfaces";
 

frontend/src/store/actions/serviceMap.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from "redux";
-import api, { apiV1 } from "../../api";
+import api, { apiV1 } from "api";
 import { GlobalTime } from "./global";
 import { ActionTypes } from "./types";
 

frontend/src/store/actions/traces.ts

@@ -1,10 +1,10 @@
 import { ActionTypes } from "./types";
-import api, { apiV1 } from "../../api";
+import api, { apiV1 } from "api";
 
 import { Dispatch } from "redux";
 import { GlobalTime } from "./global";
-import { toUTCEpoch } from "../../utils/timeUtils";
+import { toUTCEpoch } from "utils/timeUtils";
-import ROUTES from "Src/constants/routes";
+import ROUTES from "constants/routes";
 
 // PNOTE
 // define trace interface - what it should return

frontend/src/store/actions/types.ts

@@ -1,5 +1,5 @@
 import { FetchTracesAction, FetchTraceItemAction } from "./traces";
-import { updateTraceFiltersAction, updateInputTagAction } from "./traceFilters";
+import { updateTraceFiltersAction } from "./traceFilters";
 
 import { serviceMapItemAction, servicesAction } from "./serviceMap";
 import { getUsageDataAction } from "./usage";
@@ -19,7 +19,6 @@ export type Action =
 	| FetchTraceItemAction
 	| FetchTracesAction
 	| updateTraceFiltersAction
-	| updateInputTagAction
 	| getUsageDataAction
 	| updateTimeIntervalAction
 	| servicesAction

frontend/src/store/actions/usage.ts

@@ -1,8 +1,8 @@
 import { Dispatch } from "redux";
-import api, { apiV1 } from "../../api";
+import api, { apiV1 } from "api";
 
 import { ActionTypes } from "./types";
-import { toUTCEpoch } from "../../utils/timeUtils";
+import { toUTCEpoch } from "utils/timeUtils";
 
 export interface usageDataItem {
 	timestamp: number;

frontend/src/store/reducers/global.ts

@@ -1,4 +1,4 @@
-import { ActionTypes, Action, GlobalTime } from "../actions";
+import { ActionTypes, Action, GlobalTime } from "store/actions";
 
 export const updateGlobalTimeReducer = (
 	state: GlobalTime = {

frontend/src/store/reducers/index.ts

@@ -6,7 +6,7 @@ import {
 	GlobalTime,
 	serviceMapStore,
 	TraceFilters,
-} from "../actions";
+} from "store/actions";
 import { updateGlobalTimeReducer } from "./global";
 import { MetricsInitialState, metricsReducer } from "./metrics";
 import TraceFilterReducer from "./traceFilters";

frontend/src/store/reducers/metrics.ts

@@ -7,8 +7,8 @@ import {
 	externalMetricsItem,
 	dbOverviewMetricsItem,
 	externalMetricsAvgDurationItem,
-} from "../actions/MetricsActions";
+} from "store/actions/MetricsActions";
-import { MetricsActionTypes as ActionTypes } from "../actions/MetricsActions/metricsActionTypes";
+import { MetricsActionTypes as ActionTypes } from "store/actions/MetricsActions/metricsActionTypes";
 
 export type MetricsInitialState = {
 	serviceList?: servicesListItem[];

frontend/src/store/reducers/serviceMap.ts

@@ -1,4 +1,4 @@
-import { ActionTypes, Action, serviceMapStore } from "../actions";
+import { ActionTypes, Action, serviceMapStore } from "store/actions";
 
 const initialState: serviceMapStore = {
 	items: [],

frontend/src/store/reducers/traceFilters.ts

@@ -1,4 +1,4 @@
-import { ActionTypes, TraceFilters } from "../actions";
+import { ActionTypes, TraceFilters } from "store/actions";
 
 type ACTION = {
 	type: ActionTypes;
@@ -9,7 +9,7 @@ const initialState: TraceFilters = {
 	tags: [],
 	operation: "",
 	latency: { min: "", max: "" },
-	kind: ""
+	kind: "",
 };
 
 const TraceFilterReducer = (state = initialState, action: ACTION) => {

frontend/src/store/reducers/traces.ts

@@ -4,7 +4,7 @@ import {
 	traceResponseNew,
 	spanList,
 	spansWSameTraceIDResponse,
-} from "../actions";
+} from "store/actions";
 
 // PNOTE - Initializing is a must for state variable otherwise it gives an error in reducer
 var spanlistinstance: spanList = { events: [], segmentID: "", columns: [] };

frontend/src/store/reducers/usage.ts

@@ -1,4 +1,4 @@
-import { ActionTypes, Action, usageDataItem } from "../actions";
+import { ActionTypes, Action, usageDataItem } from "store/actions";
 
 export const usageDataReducer = (
 	state: usageDataItem[] = [{ timestamp: 0, count: 0 }],

frontend/src/utils/app.ts

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

frontend/src/utils/spanToTree.ts

@@ -1,4 +1,4 @@
-import { pushDStree, span, RefItem } from "../store/actions";
+import { pushDStree, span, RefItem } from "store/actions";
 // PNOTE - should the data be taken from redux or only through props? - Directly as arguments
 
 export const spanToTreeUtil = (spanlist: span[]): pushDStree => {
@@ -24,7 +24,7 @@ export const spanToTreeUtil = (spanlist: span[]): pushDStree => {
 		//May1
 		//https://stackoverflow.com/questions/13315131/enforcing-the-type-of-the-indexed-members-of-a-typescript-object
 
-		let mapped_array: { [id: string]: span; } = {};
+		let mapped_array: { [id: string]: span } = {};
 
 		for (let i = 0; i < spanlist.length; i++) {
 			mapped_array[spanlist[i][1]] = spanlist[i];
@@ -32,12 +32,10 @@ export const spanToTreeUtil = (spanlist: span[]): pushDStree => {
 			//  of type pushDStree
 			// console.log('IDs while creating mapped array')
 			// console.log(`SpanID is ${spanlist[i][1]}\n`);
-
 		}
 
 		// console.log(`In SpanTreeUtil: mapped_arrayis ${mapped_array}`);
 
-
 		for (let id in mapped_array) {
 			let child_span = mapped_array[id];
 
@@ -100,14 +98,17 @@ export const spanToTreeUtil = (spanlist: span[]): pushDStree => {
 					let parentID = references[0].spanID;
 					// console.log(`In SpanTreeUtil: mapped_array[parentID] is ${mapped_array[parentID]}`);
 
-					if (typeof mapped_array[parentID] !== 'undefined') { //checking for undefined [10] issue
+					if (typeof mapped_array[parentID] !== "undefined") {
+						//checking for undefined [10] issue
 						mapped_array[parentID][10].push(push_object);
 					} else {
-						console.log(`In SpanTreeUtil: mapped_array[parentID] is undefined, parentID is ${parentID}`);
+						console.log(
-						console.log(`In SpanTreeUtil: mapped_array[parentID] is undefined, mapped_array[parentID] is ${mapped_array[parentID]}`);
+							`In SpanTreeUtil: mapped_array[parentID] is undefined, parentID is ${parentID}`,
-
+						);
+						console.log(
+							`In SpanTreeUtil: mapped_array[parentID] is undefined, mapped_array[parentID] is ${mapped_array[parentID]}`,
+						);
 					}
-
 				}
 			} else {
 				tree = push_object;

frontend/tsconfig.json

@@ -17,9 +17,6 @@
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"noEmit": true,
-		"baseUrl": ".",
+		"baseUrl": "./src"
-		"paths": {
-			"Src/*": ["./src/*"]
-		}
 	}
 }

frontend/webpack.config.js

@@ -1,9 +1,10 @@
 // shared config (dev and prod)
 const { resolve } = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const portFinderSync = require('portfinder-sync')
+const portFinderSync = require("portfinder-sync");
 const dotenv = require("dotenv");
 const webpack = require("webpack");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 
 dotenv.config();
 
@@ -33,10 +34,8 @@ module.exports = {
 		publicPath: "/",
 	},
 	resolve: {
-		alias: {
-			Src: resolve(__dirname, "./src/"),
-		},
 		extensions: [".ts", ".tsx", ".js", ".jsx"],
+		plugins: [new TsconfigPathsPlugin({})],
 	},
 	module: {
 		rules: [

frontend/webpack.config.prod.js

@@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const CompressionPlugin = require("compression-webpack-plugin");
 const webpack = require("webpack");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 
 module.exports = {
 	mode: "production",
@@ -16,10 +17,8 @@ module.exports = {
 	},
 
 	resolve: {
-		alias: {
-			Src: resolve(__dirname, "./src/"),
-		},
 		extensions: [".ts", ".tsx", ".js", ".jsx"],
+		plugins: [new TsconfigPathsPlugin({})],
 	},
 	module: {
 		rules: [

frontend/yarn.lock

@@ -13144,6 +13144,15 @@ ts-pnp@1.2.0, ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+tsconfig-paths-webpack-plugin@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.5.1.tgz#e4dbf492a20dca9caab60086ddacb703afc2b726"
+  integrity sha512-n5CMlUUj+N5pjBhBACLq4jdr9cPTitySCjIosoQm0zwK99gmrcTGAfY9CwxRFT9+9OleNWXPRUcxsKP4AYExxQ==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.7.0"
+    tsconfig-paths "^3.9.0"
+
 tsconfig-paths@^3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"