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

 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 ROUTES from "Src/constants/routes";
+import NotFoundImage from "assets/NotFound";
+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 AppWrapper from "Src/modules/AppWrapper";
-import "Src/assets/index.css";
+import store from "store";
+import AppWrapper from "modules/AppWrapper";
+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

 import React, { Suspense } from "react";
 import { useThemeSwitcher } from "react-css-theme-switcher";
-import ROUTES from "Src/constants/routes";
-import { IS_LOGGED_IN } from "Src/constants/auth";
+import ROUTES from "constants/routes";
+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

 import React, { useState } from "react";
 import { Row, Space, Button, Input } from "antd";
-import api, { apiV1 } from "../../api";
-import ROUTES from "Src/constants/routes";
-import { IS_LOGGED_IN } from "Src/constants/auth";
+import api, { apiV1 } from "api";
+import ROUTES from "constants/routes";
+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 ROUTES from "Src/constants/routes";
+import { metricItem } from "store/actions/MetricsActions";
+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 { GlobalTime, updateTimeInterval } from "Src/store/actions";
+import ROUTES from "constants/routes";
+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 ROUTES from "Src/constants/routes";
-import { getServicesList, GlobalTime } from "../../store/actions";
-import { servicesListItem } from "../../store/actions/MetricsActions";
-import { StoreState } from "../../store/reducers";
-import { CustomModal } from "../../components/Modal";
-import { CustomSpinner,DefaultSpinner } from "../../components/Spiner";
+import { SKIP_ONBOARDING } from "constants/onboarding";
+import ROUTES from "constants/routes";
+import { getServicesList, GlobalTime } from "store/actions";
+import { servicesListItem } from "store/actions/MetricsActions";
+import { StoreState } from "store/reducers";
+import { CustomModal } from "components/Modal";
+import { CustomSpinner, DefaultSpinner } from "components/Spiner";
 
 interface ServicesTableProps {
 	servicesList: servicesListItem[];
@@ -124,9 +124,7 @@ const _ServicesTable = (props: ServicesTableProps) => {
 	}, [props.servicesList, errorObject]);
 
 	if (!initialDataFetch) {
-		return (
-			<CustomSpinner size="large" tip="Fetching data..."/>
-		);
+		return <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 { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
-import { GlobalTime } from "Src/store/actions";
-import { StoreState } from "Src/store/reducers";
+import { topEndpointListItem } from "store/actions/MetricsActions";
+import { METRICS_PAGE_QUERY_PARAM } from "constants/query";
+import { GlobalTime } from "store/actions";
+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

 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 { StoreState } from "../../../store/reducers";
+import { GlobalTime, updateTimeInterval } from "store/actions";
+import { StoreState } from "store/reducers";
 import FormItem from "antd/lib/form/FormItem";
 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";
+import { DateTimeRangeType } from "store/actions";
+import { METRICS_PAGE_QUERY_PARAM } from "constants/query";
+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

-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

 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";