release: 0.3.5

Co-authored-by: Ankit Nayan <ankit@signoz.io>

.github/workflows/commitlint.yml

@@ -11,4 +11,6 @@ jobs:
       - uses: actions/setup-node@v2.1.0
       # or just "yarn" if you depend on "@commitlint/cli" already
       - run: yarn add @commitlint/cli
+      - run: yarn add @commitlint/config-conventional
+      - run: echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
       - run: yarn run commitlint --from HEAD~${{ github.event.pull_request.commits }} --to HEAD

.github/workflows/push.yaml

@@ -6,7 +6,13 @@ on:
       - ^v[0-9]*.[0-9]*.x$
     tags:
       - "*"
-
+  # pull_request:
+  #   branches:
+  #     - main
+  #     - v*
+  #   paths:
+  #     - 'pkg/**'
+  #     - 'frontend/**'
 jobs:
   get-envs:
     runs-on: ubuntu-latest
@@ -21,6 +27,9 @@ jobs:
           then
               echo "tag build"
               img_tag=${GITHUB_REF#refs/*/v}
+          elif [ ${array[1]} == "pull" ]
+          then
+            img_tag="pull-${{ github.event.number }}"
           else
               echo "non tag build"
               img_tag="latest"
@@ -74,7 +83,7 @@ jobs:
         run: |
           branch=${GITHUB_REF#refs/*/}
           array=(`echo ${GITHUB_REF} | sed 's/\//\n/g'`)
-          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
+          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [ ${array[1]} == "pull" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
           then
             source env-vars
             make build-push-frontend
@@ -115,7 +124,7 @@ jobs:
         run: |
           branch=${GITHUB_REF#refs/*/}
           array=(`echo ${GITHUB_REF} | sed 's/\//\n/g'`)
-          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
+          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [ ${array[1]} == "pull" ] ||[[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
           then
             source env-vars
             make build-push-query-service
@@ -156,7 +165,7 @@ jobs:
         run: |
           branch=${GITHUB_REF#refs/*/}
           array=(`echo ${GITHUB_REF} | sed 's/\//\n/g'`)
-          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
+          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [ ${array[1]} == "pull" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
           then
             source env-vars
             make build-push-flattener

CONTRIBUTING.md

@@ -26,7 +26,7 @@ Need to update [https://github.com/SigNoz/signoz/tree/main/frontend](https://git
 If you don't want to install SigNoz backend just for doing frontend development, we can provide you with test environments which you can use as the backend. Please ping us in #contributing channel in our [slack community](https://join.slack.com/t/signoz-community/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA) and we will DM you with `<test environment URL>`
 
 - `git clone https://github.com/SigNoz/signoz.git && cd signoz/frontend`
-- change baseURL to `<test environment URL>` in file `src/constants/env.ts`
+- Create a file `.env` with `FRONTEND_API_ENDPOINT=<test environment URL>`
 - `yarn install`
 - `yarn dev`
 
@@ -64,11 +64,12 @@ You can always reach out to `ankit@signoz.io` to understand more about the repo
 - If you want to discuss something about the product, start a new [discussion](https://github.com/SigNoz/signoz/discussions)
 
 ### Conventions to follow when submitting commits, PRs
+
 1. We try to follow https://www.conventionalcommits.org/en/v1.0.0/
 
 More specifically the commits and PRs should have type specifiers prefixed in the name. [This](https://www.conventionalcommits.org/en/v1.0.0/#specification) should give you a better idea.
 
-e.g. If you are submitting a fix for an issue in frontend - PR name should be prefixed with `fix(FE):` 
+e.g. If you are submitting a fix for an issue in frontend - PR name should be prefixed with `fix(FE):`
 
 2. Follow [GitHub Flow](https://guides.github.com/introduction/flow/) guidelines for your contribution flows
 

deploy/docker/clickhouse-setup/docker-compose.yaml

@@ -20,7 +20,7 @@ services:
         retries: 3
 
   query-service:
-    image: signoz/query-service:0.3.4
+    image: signoz/query-service:0.3.5
     container_name: query-service
 
     ports:
@@ -36,7 +36,7 @@ services:
         condition: service_healthy
     
   frontend:
-    image: signoz/frontend:0.3.4
+    image: signoz/frontend:0.3.5
     container_name: frontend
 
     depends_on:

deploy/docker/druid-kafka-setup/docker-compose-tiny.yaml

@@ -147,7 +147,7 @@ services:
       retries: 5
 
   flatten-processor:
-    image: signoz/flattener-processor:0.3.4
+    image: signoz/flattener-processor:0.3.5
     container_name: flattener-processor
 
     depends_on:
@@ -163,7 +163,7 @@ services:
     
 
   query-service:
-    image: signoz.docker.scarf.sh/signoz/query-service:0.3.4
+    image: signoz.docker.scarf.sh/signoz/query-service:0.3.5
     container_name: query-service
 
     depends_on:
@@ -182,7 +182,7 @@ services:
         condition: service_healthy
     
   frontend:
-    image: signoz/frontend:0.3.4
+    image: signoz/frontend:0.3.5
     container_name: frontend
 
     depends_on:

deploy/docker/druid-kafka-setup/docker-compose.yaml

@@ -142,7 +142,7 @@ services:
       retries: 5
 
   flatten-processor:
-    image: signoz/flattener-processor:0.3.4
+    image: signoz/flattener-processor:0.3.5
     container_name: flattener-processor
 
     depends_on:
@@ -158,7 +158,7 @@ services:
     
 
   query-service:
-    image: signoz.docker.scarf.sh/signoz/query-service:0.3.4
+    image: signoz.docker.scarf.sh/signoz/query-service:0.3.5
     container_name: query-service
 
     depends_on:
@@ -177,7 +177,7 @@ services:
         condition: service_healthy
     
   frontend:
-    image: signoz/frontend:0.3.4
+    image: signoz/frontend:0.3.5
     container_name: frontend
 
     depends_on:

deploy/kubernetes/platform/Chart.lock

@@ -10,12 +10,12 @@ dependencies:
   version: 0.2.18
 - name: flattener-processor
   repository: file://./signoz-charts/flattener-processor
-  version: 0.3.4
+  version: 0.3.5
 - name: query-service
   repository: file://./signoz-charts/query-service
-  version: 0.3.4
+  version: 0.3.5
 - name: frontend
   repository: file://./signoz-charts/frontend
-  version: 0.3.4
-digest: sha256:49f8b43acecdb7cb0fb8ed5af1488bfbef5b66be02e17bb716403750a6894844
-generated: "2021-08-10T23:37:01.176317+05:30"
+  version: 0.3.5
+digest: sha256:c2083da617d4c61f5c56e26c0648b40a3f61ebba52c464005717b9da33a7db93
+generated: "2021-08-20T12:45:02.903711+05:30"

deploy/kubernetes/platform/Chart.yaml

@@ -34,10 +34,10 @@ dependencies:
     version: 0.2.18
   - name: flattener-processor
     repository: "file://./signoz-charts/flattener-processor"
-    version: 0.3.4
+    version: 0.3.5
   - name: query-service
     repository: "file://./signoz-charts/query-service"
-    version: 0.3.4
+    version: 0.3.5
   - name: frontend
     repository: "file://./signoz-charts/frontend"
-    version: 0.3.4
+    version: 0.3.5

deploy/kubernetes/platform/signoz-charts/flattener-processor/Chart.yaml

@@ -14,8 +14,8 @@ type: application
 
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
-version: 0.3.4
+version: 0.3.5
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application.
-appVersion: 0.3.4
+appVersion: 0.3.5

deploy/kubernetes/platform/signoz-charts/frontend/Chart.yaml

@@ -14,8 +14,8 @@ type: application
 
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
-version: 0.3.4
+version: 0.3.5
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application.
-appVersion: 0.3.4
+appVersion: 0.3.5

deploy/kubernetes/platform/signoz-charts/query-service/Chart.yaml

@@ -14,8 +14,8 @@ type: application
 
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
-version: 0.3.4
+version: 0.3.5
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application.
-appVersion: 0.3.4
+appVersion: 0.3.5

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

@@ -1,9 +1,9 @@
 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

@@ -1,8 +1,8 @@
 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;
 
@@ -93,7 +93,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 	};
 
 	return (
-		<Tabs defaultActiveKey="1" tabBarGutter={48}>
+		<Tabs defaultActiveKey="1">
 			<TabPane tab="Application Metrics" key="1">
 				<Row gutter={32} style={{ margin: 20 }}>
 					<Col span={12}>

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

@@ -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 { 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

@@ -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 { CustomSpinner } from "../../components/Spiner";
+import { useRoute } from "modules/RouteProvider";
+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 {
-	InfoCircleOutlined,
-	EyeTwoTone,
-	EyeInvisibleOutlined,
-} from "@ant-design/icons";
-import { StoreState } from "../../store/reducers";
+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 { TagItem, TraceFilters, updateTraceFilters } from "../../store/actions";
-
+import { StoreState } from "store/reducers";
+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;
 
@@ -47,16 +47,20 @@ const CustomSubText = styled(Paragraph)`
 	}
 `;
 
+const CardContainer = styled(Card)`
+	.ant-card-body {
+		max-height: 90vh;
+		overflow-y: auto;
+	}
+`;
+
 const SelectedSpanDetails = (props: SelectedSpanDetailsProps) => {
 	const spanTags = props.data?.tags;
 	const service = props.data?.name?.split(":")[0];
 	const operation = props.data?.name?.split(":")[1];
 
 	return (
-		<Card
-			style={{ border: "none", background: "transparent", padding: 0 }}
-			bodyStyle={{ padding: 0 }}
-		>
+		<CardContainer>
 			<Space direction="vertical">
 				<strong> Details for selected Span </strong>
 				<Space direction="vertical" size={2}>
@@ -98,7 +102,7 @@ const SelectedSpanDetails = (props: SelectedSpanDetailsProps) => {
 							))}
 				</TabPane>
 			</Tabs>
-		</Card>
+		</CardContainer>
 	);
 };
 

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 { GlobalTime, TraceFilters } from "../../store/actions";
-import { useRoute } from "../RouteProvider";
-import { getFilteredTraceMetrics } from "../../store/actions/MetricsActions";
-import { customMetricsItem } from "../../store/actions/MetricsActions";
+import { StoreState } from "store/reducers";
+import { GlobalTime, TraceFilters } from "store/actions";
+import { useRoute } from "modules/RouteProvider";
+import { getFilteredTraceMetrics } 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";
-import { StoreState } from "../../store/reducers";
+} from "store/actions";
+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 { useRoute } from "../RouteProvider";
+import { METRICS_PAGE_QUERY_PARAM } from "constants/query";
+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 => (
-							<Option value={spanKind.value} key={spanKind.value}>{spanKind.label}</Option>
+						{spanKindList.map((spanKind) => (
+							<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 traverseTreeData from "Src/modules/Traces/TraceGanttChart/TraceGanttChartHelpers";
+import { pushDStree } from "store/actions";
+import traverseTreeData from "modules/Traces/TraceGanttChart/TraceGanttChartHelpers";
 
 const { TabPane } = Tabs;
 
@@ -20,7 +20,7 @@ interface TraceGanttChartProps {
 	treeData: pushDStree[];
 	clickedSpan: pushDStree;
 	selectedSpan: pushDStree;
-	resetZoom: () => {};
+	resetZoom: (value: boolean) => {};
 	setSpanTagsInfo: (p: { data: any }) => {};
 }
 
@@ -32,14 +32,16 @@ const TraceGanttChart = ({
 	setSpanTagsInfo,
 }: TraceGanttChartProps) => {
 	let checkStrictly = true;
-	const [selectedRows, setSelectedRows] = useState([]);
+	const [selectedRows, setSelectedRows] = useState<string[]>([]);
 	const [clickedSpanData, setClickedSpanData] = useState(clickedSpan);
-	const [defaultExpandedRows, setDefaultExpandedRows] = useState([]);
+	const [defaultExpandedRows, setDefaultExpandedRows] = useState<string[]>([]);
 	const [sortedTreeData, setSortedTreeData] = useState(treeData);
 	const [isReset, setIsReset] = useState(false);
 	const [tabsContainerWidth, setTabsContainerWidth] = useState(0);
 	const tableRef = useRef("");
-	let tabsContainer = document.querySelector("#collapsable .ant-tabs-nav-list");
+	let tabsContainer = document.querySelector<HTMLElement>(
+		"#collapsable .ant-tabs-nav-list",
+	);
 
 	let tabs = document.querySelectorAll("#collapsable .ant-tabs-tab");
 
@@ -55,7 +57,9 @@ const TraceGanttChart = ({
 			if (clickedSpan) {
 				setClickedSpanData(clickedSpan);
 			}
-			setTabsContainerWidth(tabsContainer?.offsetWidth);
+			if (tabsContainer) {
+				setTabsContainerWidth(tabsContainer.offsetWidth);
+			}
 		}
 		handleScroll(selectedSpan?.id);
 	}, [sortedTreeData, treeData, clickedSpan]);
@@ -69,12 +73,13 @@ const TraceGanttChart = ({
 		) {
 			setSelectedRows([clickedSpan.id]);
 			getParentKeys(clickedSpan);
-			handleFocusOnSelectedPath("", [clickedSpan.id], clickedSpan);
+			handleFocusOnSelectedPath("", [clickedSpan.id]);
 		}
 	}, [clickedSpan, selectedRows, isReset, clickedSpanData]);
 
-	let parentKeys = [];
-	let childrenKeys = [];
+	let parentKeys: string[] = [];
+	let childrenKeys: string[] = [];
+
 	const getParentKeys = (obj) => {
 		if (has(obj, "parent")) {
 			parentKeys.push(obj.parent.id);
@@ -82,7 +87,7 @@ const TraceGanttChart = ({
 		}
 	};
 
-	const getChildrenKeys = (obj) => {
+	const getChildrenKeys = (obj: pushDStree) => {
 		if (has(obj, "children")) {
 			childrenKeys.push(obj.id);
 			if (!isEmpty(obj.children)) {
@@ -105,7 +110,7 @@ const TraceGanttChart = ({
 			setDefaultExpandedRows([treeData?.[0]?.id]);
 			// /.setSpanTagsInfo({data: treeData?.[0]})
 		}
-	}, [selectedSpan, treeData]);
+	}, [selectedSpan, treeData, clickedSpan]);
 
 	const getMaxEndTime = (treeData) => {
 		if (treeData.length > 0) {
@@ -169,7 +174,7 @@ const TraceGanttChart = ({
 				}
 
 				let paddingLeft = 0;
-				let startTime = parseFloat(record.startTime);
+				let startTime = parseFloat(record.startTime.toString());
 				let duration = parseFloat((record.time / 1000000).toFixed(2));
 				paddingLeft = parseInt(
 					getPaddingLeft(
@@ -200,7 +205,17 @@ const TraceGanttChart = ({
 
 	const handleFocusOnSelectedPath = (event, selectedRowsList = selectedRows) => {
 		if (!isEmpty(selectedRowsList)) {
-			let node = {};
+			// initializing the node
+			let node: pushDStree = {
+				children: [],
+				id: "",
+				name: "",
+				startTime: 0,
+				tags: [],
+				time: 0,
+				value: 0,
+			};
+
 			traverseTreeData(treeData, (item: pushDStree) => {
 				if (item.id === selectedRowsList[0]) {
 					node = item;
@@ -214,13 +229,20 @@ const TraceGanttChart = ({
 				console.error("Node not found in Tree Data.");
 			}
 
+			// get the parent of the node
 			getParentKeys(node);
+
+			// get the children of the node
 			getChildrenKeys(node);
 
 			let rows = document.querySelectorAll("#collapsable table tbody tr");
-			Array.from(rows).map((row) => {
-				let attribKey = row.getAttribute("data-row-key");
-				if (!selectedRowsList.includes(attribKey)) {
+			rows.forEach((row) => {
+				let attribKey = row.getAttribute("data-row-key") || "";
+				if (
+					!isEmpty(attribKey) &&
+					!selectedRowsList.includes(attribKey) &&
+					!childrenKeys.includes(attribKey)
+				) {
 					row.classList.add("hide");
 				}
 			});
@@ -230,7 +252,7 @@ const TraceGanttChart = ({
 
 	const handleResetFocus = () => {
 		const rows = document.querySelectorAll("#collapsable table tbody tr");
-		Array.from(rows).map((row) => {
+		rows.forEach((row) => {
 			row.classList.remove("hide");
 		});
 
@@ -256,13 +278,13 @@ const TraceGanttChart = ({
 				setIsReset(false);
 			}
 		},
-		onSelect: (record) => {
+		onSelect: (record: pushDStree) => {
 			handleRowOnClick(record);
 		},
 		selectedRowKeys: selectedRows,
 	};
 
-	const handleRowOnClick = (record) => {
+	const handleRowOnClick = (record: pushDStree) => {
 		let node = {};
 		traverseTreeData(treeData, (item: pushDStree) => {
 			if (item.id === record.id) {
@@ -286,7 +308,7 @@ const TraceGanttChart = ({
 		setSelectedRows([record.id]);
 	};
 
-	const handleOnExpandedRowsChange = (item) => {
+	const handleOnExpandedRowsChange = (item: string[]) => {
 		setDefaultExpandedRows(item);
 	};
 
@@ -303,8 +325,7 @@ const TraceGanttChart = ({
 					>
 						<Col>
 							<StyledButton onClick={handleFocusOnSelectedPath}>
-								{" "}
-								Focus on selected path{" "}
+								Focus on selected path
 							</StyledButton>
 						</Col>
 						<Col>
@@ -320,14 +341,18 @@ const TraceGanttChart = ({
 						dataSource={sortedTreeData}
 						rowKey="id"
 						sticky={true}
-						onRow={(record, rowIndex) => {
+						onRow={(record) => {
 							return {
-								onClick: () => handleRowOnClick(record, rowIndex), // click row
+								onClick: () => handleRowOnClick(record), // click row
 							};
 						}}
-						expandedRowKeys={defaultExpandedRows}
-						onExpandedRowsChange={handleOnExpandedRowsChange}
+						onExpandedRowsChange={(keys) =>
+							handleOnExpandedRowsChange(keys.map((e) => e.toString()))
+						}
 						pagination={false}
+						expandable={{
+							expandedRowKeys: defaultExpandedRows,
+						}}
 						scroll={{ y: 540 }}
 						rowClassName="row-styles"
 						filterMultiple={false}

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";
-import { StoreState } from "Src/store/reducers";
+} from "store/actions";
+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 { StoreState } from "../../store/reducers";
+import { traceResponseNew, pushDStree } from "store/actions";
+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 { StoreState } from "../../store/reducers";
-import { isOnboardingSkipped } from "../../utils/app";
+import { traceResponseNew, fetchTraces, pushDStree } from "store/actions";
+import { StoreState } from "store/reducers";
+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
-				dataSource={dataSource}
-				columns={columns}
-				size="middle"
-				rowClassName=""
-				onRow={(record) => ({
+			return (
+				<StyledTable
+					dataSource={dataSource}
+					columns={columns}
+					size="middle"
+					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";
-import { StoreState } from "../../store/reducers";
+} from "store/actions";
+import { StoreState } from "store/reducers";
 import moment from "moment";
-import { isOnboardingSkipped } from "../../utils/app";
-import { useRoute } from "../RouteProvider";
-import { servicesListItem } from "../../store/actions/MetricsActions";
+import { isOnboardingSkipped } from "utils/app";
+import { useRoute } from "modules/RouteProvider";
+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>
-						Instrument your application
-					</h2>
+					<h2>Instrument your application</h2>
 				</div>
 				<InstrumentCard currentThemeStatus={currentTheme}>
-					Congrats, you have successfully installed SigNoz!<br/>
-					To start seeing YOUR application data here, follow the instructions in the docs -
-					<a href={"https://signoz.io/docs/instrumentation/overview"} 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>
+					Congrats, you have successfully installed SigNoz!
+					<br />
+					To start seeing YOUR application data here, follow the instructions in the
+					docs -
+					<a
+						href={"https://signoz.io/docs/instrumentation/overview"}
+						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 { toUTCEpoch } from "../../../utils/timeUtils";
+import { GlobalTime } from "store/actions/global";
+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 ROUTES from "Src/constants/routes";
+import { toUTCEpoch } from "utils/timeUtils";
+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";
-import { MetricsActionTypes as ActionTypes } from "../actions/MetricsActions/metricsActionTypes";
+} from "store/actions/MetricsActions";
+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(`In SpanTreeUtil: mapped_array[parentID] is undefined, mapped_array[parentID] is ${mapped_array[parentID]}`);
-
+						console.log(
+							`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": ".",
-		"paths": {
-			"Src/*": ["./src/*"]
-		}
+		"baseUrl": "./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"