Prettify: Add basic indentation hygiene

frontend/.babelrc

@@ -10,9 +10,7 @@
 	],
 	"env": {
 		"production": {
-      "presets": [
+			"presets": ["minify"]
-        "minify"
-      ]
 		}
 	}
 }

frontend/README.md

@@ -1,14 +1,12 @@
+# Docker
 
- # Docker
+**Building image**
- **Building image**
 
-```docker-compose up`` 
+``docker-compose up`
 / This will also run
 
 or
-```docker build . -t tagname```
+`docker build . -t tagname`
-
-  
 
 **Tag to remote url- Introduce versinoing later on**
 
@@ -16,7 +14,7 @@ or
 docker tag signoz/frontend:latest 7296823551/signoz:latest
 ```
 
-  **Running locally**
+**Running locally**
 
 ```
 docker-compose up

frontend/package.json

@@ -6,7 +6,8 @@
 	"scripts": {
 		"dev": "NODE_ENV=development webpack serve",
 		"start": "node scripts/start.js",
-		"build": "webpack --config=webpack.config.prod.js"
+		"build": "webpack --config=webpack.config.prod.js",
+		"prettify": "prettier --write ."
 	},
 	"author": "",
 	"license": "ISC",

frontend/src/actions/metrics.ts

@@ -2,7 +2,7 @@ import { Dispatch } from "redux";
 import metricsAPI from "../api/metricsAPI";
 import { GlobalTime } from "./global";
 import { ActionTypes } from "./types";
-import {Token} from "../utils/token";
+import { Token } from "../utils/token";
 import { toUTCEpoch } from "../utils/timeUtils";
 
 export interface servicesListItem {
@@ -61,7 +61,8 @@ export interface getFilteredTraceMetricsAction {
 
 export const getServicesList = (globalTime: GlobalTime) => {
 	return async (dispatch: Dispatch) => {
-		let request_string = "services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
+		let request_string =
+			"services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
 
 		const response = await metricsAPI.get<servicesListItem[]>(request_string);
 
@@ -125,7 +126,7 @@ export const getFilteredTraceMetrics = (
 	return async (dispatch: Dispatch) => {
 		let request_string =
 			"spans/aggregates?start=" +
-				toUTCEpoch(	globalTime.minTime) +
+			toUTCEpoch(globalTime.minTime) +
 			"&end=" +
 			toUTCEpoch(globalTime.maxTime) +
 			"&" +

frontend/src/actions/types.ts

@@ -10,7 +10,7 @@ import { getUsageDataAction } from "./usage";
 import { updateTimeIntervalAction } from "./global";
 
 export enum ActionTypes {
-	updateTraceFilters= "UPDATE_TRACES_FILTER",
+	updateTraceFilters = "UPDATE_TRACES_FILTER",
 	updateInput = "UPDATE_INPUT",
 	fetchTraces = "FETCH_TRACES",
 	fetchTraceItem = "FETCH_TRACE_ITEM",

frontend/src/actions/usage.ts

@@ -14,9 +14,16 @@ export interface getUsageDataAction {
 	payload: usageDataItem[];
 }
 
-export const getUsageData = (minTime: number, maxTime: number, step: number, service: string) => {
+export const getUsageData = (
+	minTime: number,
+	maxTime: number,
+	step: number,
+	service: string,
+) => {
 	return async (dispatch: Dispatch) => {
-		let request_string = `usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch(maxTime)}&step=${step}&service=${service ? service : ""}`;
+		let request_string = `usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch(
+			maxTime,
+		)}&step=${step}&service=${service ? service : ""}`;
 		//Step can only be multiple of 3600
 		const response = await metricsAPI.get<usageDataItem[]>(request_string);
 

frontend/src/api/graphQuery.js

@@ -1,8 +1,8 @@
 import axios from "axios";
 import { ENVIRONMENT } from "../constants/env";
-import {Token} from "../utils/token";
+import { Token } from "../utils/token";
 
 // No auth for the API
 export default axios.create({
-	baseURL: `${ENVIRONMENT.baseURL}/api/prom/api/v1`
+	baseURL: `${ENVIRONMENT.baseURL}/api/prom/api/v1`,
 });

frontend/src/api/metricsAPI.js

@@ -2,5 +2,5 @@ import axios from "axios";
 import { ENVIRONMENT } from "../constants/env";
 
 export default axios.create({
-	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`
+	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`,
 });

frontend/src/api/submitForm.js

@@ -1,12 +1,12 @@
 import axios from "axios";
 import { ENVIRONMENT } from "../constants/env";
-import {Token} from "../utils/token";
+import { Token } from "../utils/token";
 
 export default axios.create({
 	// baseURL: 'https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/',
 	// baseURL: 'http://104.211.113.204:8080/api/v1/',
 	// baseURL: "/api/v1/",
-	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`
+	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`,
 });
 
 //https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/sendMessage?chat_id=351813222&text=Hello%20there

frontend/src/api/tracesAPI.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { ENVIRONMENT } from "../constants/env";
-import {Token} from "../utils/token";
+import { Token } from "../utils/token";
 //import { format } from 'path';
 
 export default axios.create({
@@ -8,5 +8,5 @@ export default axios.create({
 	// baseURL: process.env.QUERY_SERVICE_URL,
 	// console.log('in traces API', process.env.QUERY_SERVICE_URL)
 	// baseURL: "/api/v1/",
-	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`
+	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`,
 });

frontend/src/assets/index.css

@@ -1,7 +1,7 @@
 @import "~antd/dist/antd.dark.css";
 @import "~antd/dist/antd.compact.css";
 
-.ant-space-item{
+.ant-space-item {
 	margin-right: 0 !important;
 }
 /* #components-layout-demo-side .logo {

frontend/src/components/App.tsx

@@ -14,7 +14,7 @@ import {
 	DeploymentUnitOutlined,
 	AlignLeftOutlined,
 	AppstoreOutlined,
-	SettingOutlined
+	SettingOutlined,
 } from "@ant-design/icons";
 
 import DateTimeSelector from "Src/components/DateTimeSelector";
@@ -23,14 +23,28 @@ import styled from "styled-components";
 
 const { Content, Footer, Sider } = Layout;
 
-const ServiceMetrics = React.lazy(() => import("Src/components/metrics/ServiceMetricsDef"));
+const ServiceMetrics = React.lazy(
-const ServiceMap = React.lazy(() => import("Src/components/servicemap/ServiceMap"));
+	() => import("Src/components/metrics/ServiceMetricsDef"),
-const TraceDetail = React.lazy(() => import("Src/components/traces/TraceDetail"));
+);
-const TraceGraph = React.lazy(() => import("Src/components/traces/TraceGraphDef"));
+const ServiceMap = React.lazy(
-const UsageExplorer = React.lazy(() => import("Src/components/usage/UsageExplorerDef"));
+	() => import("Src/components/servicemap/ServiceMap"),
-const ServicesTable = React.lazy(() => import("Src/components/metrics/ServicesTableDef"));
+);
- const Signup = React.lazy(() => import('Src/components/Signup'));
+const TraceDetail = React.lazy(
-const SettingsPage = React.lazy(() => import("Src/components/settings/settingsPage"));
+	() => import("Src/components/traces/TraceDetail"),
+);
+const TraceGraph = React.lazy(
+	() => import("Src/components/traces/TraceGraphDef"),
+);
+const UsageExplorer = React.lazy(
+	() => import("Src/components/usage/UsageExplorerDef"),
+);
+const ServicesTable = React.lazy(
+	() => import("Src/components/metrics/ServicesTableDef"),
+);
+const Signup = React.lazy(() => import("Src/components/Signup"));
+const SettingsPage = React.lazy(
+	() => import("Src/components/settings/settingsPage"),
+);
 //PNOTE
 //React. lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don't pull in unused components.
 
@@ -93,7 +107,7 @@ const App = () => {
 								Metrics
 							</NavLink>
 						</Menu.Item>
-						<Menu.Item key="2" icon={<AlignLeftOutlined/>}>
+						<Menu.Item key="2" icon={<AlignLeftOutlined />}>
 							<NavLink to="/traces" style={{ fontSize: 12, textDecoration: "none" }}>
 								Traces
 							</NavLink>
@@ -115,10 +129,7 @@ const App = () => {
 							</NavLink>
 						</Menu.Item>
 						<Menu.Item key="5" icon={<SettingOutlined />}>
-							<NavLink
+							<NavLink to="/settings" style={{ fontSize: 12, textDecoration: "none" }}>
-								to="/settings"
-								style={{ fontSize: 12, textDecoration: "none" }}
-							>
 								Settings
 							</NavLink>
 						</Menu.Item>
@@ -148,7 +159,6 @@ const App = () => {
 								<Route path="/usage-explorer" component={UsageExplorer} />
 								<Route path="/" component={ServicesTable} />
 								<Route path="/application" exact component={ServicesTable} />
-
 							</Switch>
 						</Suspense>
 					</Content>

frontend/src/components/AppWrapper.tsx

@@ -1,18 +1,13 @@
 import React, { Suspense, useState } from "react";
 import { Spin } from "antd";
-import {
+import { Route, Switch, Redirect } from "react-router-dom";
-	Route,
-	Switch,
-	Redirect
-} from "react-router-dom";
 import Signup from "./Signup";
 const App = React.lazy(() => import("Src/components/App"));
 
 const AppWrapper = () => {
-
+	console.log("other");
-	console.log("other")
 	return (
-		<Suspense fallback={<Spin size="large"/>}>
+		<Suspense fallback={<Spin size="large" />}>
 			<Switch>
 				<Route path="/application" exact component={App} />
 				<Route path="/application/:servicename" component={App} />

frontend/src/components/DateTimeSelector.tsx

@@ -40,7 +40,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 	const [refreshButtonClick, setRefreshButtoClick] = useState(0);
 	const [form_dtselector] = Form.useForm();
 	const location = useLocation();
-	const updateTimeOnQueryParamChange = ()=>{
+	const updateTimeOnQueryParamChange = () => {
 		const timeDurationInLocalStorage = localStorage.getItem(
 			LOCAL_STORAGE.METRICS_TIME_IN_DURATION,
 		);
@@ -51,10 +51,15 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 		const endTimeString = urlParams.get(METRICS_PAGE_QUERY_PARAM.endTime);
 
 		// first pref: handle both startTime and endTime
-		if(startTimeString && startTimeString.length>0 && endTimeString && endTimeString.length>0){
+		if (
+			startTimeString &&
+			startTimeString.length > 0 &&
+			endTimeString &&
+			endTimeString.length > 0
+		) {
 			const startTime = moment(Number(startTimeString));
 			const endTime = moment(Number(endTimeString));
-			setCustomTime(startTime,endTime,true)
+			setCustomTime(startTime, endTime, true);
 		}
 		// first pref: handle intervalInQueryParam
 		else if (intervalInQueryParam) {
@@ -66,8 +71,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 		} else if (timeDurationInLocalStorage) {
 			setMetricsTimeInterval(timeDurationInLocalStorage);
 		}
-
+	};
-	}
 
 	// On URL Change
 	useEffect(() => {
@@ -79,22 +83,20 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 		updateTimeOnQueryParamChange();
 	}, []);
 
-	const setMetricsTimeInterval= (value: string) => {
+	const setMetricsTimeInterval = (value: string) => {
 		props.updateTimeInterval(value);
 		setTimeInterval(value);
 		setEndTime(null);
 		setStartTime(null);
 
-		window.localStorage.setItem(
+		window.localStorage.setItem(LOCAL_STORAGE.METRICS_TIME_IN_DURATION, value);
-			LOCAL_STORAGE.METRICS_TIME_IN_DURATION,
-			value,
-		);
 	};
-	const setCustomTime= (startTime: moment.Moment, endTime: moment.Moment, triggeredByURLChange = false) => {
+	const setCustomTime = (
-		props.updateTimeInterval("custom", [
+		startTime: moment.Moment,
-			startTime.valueOf(),
+		endTime: moment.Moment,
-			endTime.valueOf(),
+		triggeredByURLChange = false,
-		]);
+	) => {
+		props.updateTimeInterval("custom", [startTime.valueOf(), endTime.valueOf()]);
 		setEndTime(endTime);
 		setStartTime(startTime);
 	};
@@ -105,10 +107,17 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 		}); //pass time in URL query param for all choices except custom in datetime picker
 	};
 
-	const updateUrlForCustomTime= (startTime: moment.Moment, endTime: moment.Moment, triggeredByURLChange = false) => {
+	const updateUrlForCustomTime = (
-		props.history.push(`?${METRICS_PAGE_QUERY_PARAM.startTime}=${startTime.valueOf()}&${METRICS_PAGE_QUERY_PARAM.endTime}=${endTime.valueOf()}`);
+		startTime: moment.Moment,
-	}
+		endTime: moment.Moment,
-
+		triggeredByURLChange = false,
+	) => {
+		props.history.push(
+			`?${METRICS_PAGE_QUERY_PARAM.startTime}=${startTime.valueOf()}&${
+				METRICS_PAGE_QUERY_PARAM.endTime
+			}=${endTime.valueOf()}`,
+		);
+	};
 
 	const handleOnSelect = (value: string) => {
 		if (value === "custom") {
@@ -131,7 +140,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 			const startTime = dateTimeRange[0].valueOf();
 			const endTime = dateTimeRange[1].valueOf();
 
-			updateUrlForCustomTime(moment(startTime),moment(endTime))
+			updateUrlForCustomTime(moment(startTime), moment(endTime));
 			//setting globaltime
 			setRefreshButtonHidden(true);
 			form_dtselector.setFieldsValue({
@@ -146,35 +155,35 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 
 	const timeSinceLastRefresh = () => {
 		const currentTime = moment();
-		const lastRefresh = moment(props.globalTime.maxTime / 1000000)
+		const lastRefresh = moment(props.globalTime.maxTime / 1000000);
 		const duration = moment.duration(currentTime.diff(lastRefresh));
 
 		const secondsDiff = Math.floor(duration.asSeconds());
 		const minutedDiff = Math.floor(duration.asMinutes());
-		const hoursDiff = Math.floor(duration.asHours())
+		const hoursDiff = Math.floor(duration.asHours());
 
-		if(hoursDiff>0){
+		if (hoursDiff > 0) {
-			return `Last refresh - ${hoursDiff} hrs ago`
+			return `Last refresh - ${hoursDiff} hrs ago`;
-		}else if(minutedDiff>0){
+		} else if (minutedDiff > 0) {
-			return `Last refresh - ${minutedDiff} mins ago`
+			return `Last refresh - ${minutedDiff} mins ago`;
 		}
-			return `Last refresh - ${secondsDiff} sec ago`
+		return `Last refresh - ${secondsDiff} sec ago`;
 	};
 
 	const handleRefresh = () => {
-		setRefreshButtoClick(refreshButtonClick+1);
+		setRefreshButtoClick(refreshButtonClick + 1);
 		setMetricsTimeInterval(timeInterval);
 	};
 
-	useEffect(()=>{
+	useEffect(() => {
-		setRefreshText("")
+		setRefreshText("");
-		const interval = setInterval(()=>{
+		const interval = setInterval(() => {
-			setRefreshText(timeSinceLastRefresh())
+			setRefreshText(timeSinceLastRefresh());
-		}, 2000)
+		}, 2000);
-		return ()=>{
+		return () => {
-			clearInterval(interval)
+			clearInterval(interval);
-		}
+		};
-	},[props.location,refreshButtonClick])
+	}, [props.location, refreshButtonClick]);
 
 	const options = [
 		{ value: "custom", label: "Custom" },
@@ -188,11 +197,15 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 	if (props.location.pathname.startsWith("/usage-explorer")) {
 		return null;
 	} else {
-
+		const inputLabeLToShow =
-		const inputLabeLToShow = startTime && endTime? (`${startTime.format("YYYY/MM/DD HH:mm")} - ${endTime.format("YYYY/MM/DD HH:mm")}`):timeInterval
+			startTime && endTime
+				? `${startTime.format("YYYY/MM/DD HH:mm")} - ${endTime.format(
+						"YYYY/MM/DD HH:mm",
+				  )}`
+				: timeInterval;
 		return (
 			<DateTimeWrapper>
-				<Space style={{float: "right", display:"block"}}>
+				<Space style={{ float: "right", display: "block" }}>
 					<Space>
 						<Form
 							form={form_dtselector}
@@ -206,16 +219,23 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 								))}
 							</Select>
 
-
 							<FormItem hidden={refreshButtonHidden} name="refresh_button">
 								<Button type="primary" onClick={handleRefresh}>
 									Refresh
 								</Button>
 							</FormItem>
-
 						</Form>
 					</Space>
-						<Space style={{float: "right", display:"block", marginRight: 20, minHeight: 23, width: 200, textAlign: "right"}}>
+					<Space
+						style={{
+							float: "right",
+							display: "block",
+							marginRight: 20,
+							minHeight: 23,
+							width: 200,
+							textAlign: "right",
+						}}
+					>
 						{refreshText}
 					</Space>
 					<CustomDateTimeModal

frontend/src/components/Test.tsx

@@ -1,9 +1,5 @@
 const Test = () => {
-    return (
+	return <div>INSIDE PUBLIC CODE</div>;
-        <div>
+};
-            INSIDE PUBLIC CODE
-      </div>
-    )
-}
 
 export default Test;

frontend/src/components/common/Modal.tsx

@@ -1,20 +1,28 @@
 import React, { ReactElement, useState } from "react";
-import { Modal, Button } from 'antd';
+import { Modal, Button } from "antd";
 
-export const CustomModal = ({title,children, isModalVisible, setIsModalVisible, footer, closable=true}:{
+export const CustomModal = ({
-	isModalVisible: boolean,
+	title,
-	closable?: boolean,
+	children,
-	setIsModalVisible: Function,
+	isModalVisible,
-	footer?: any,
+	setIsModalVisible,
-	title: string,
+	footer,
-	children: ReactElement
+	closable = true,
+}: {
+	isModalVisible: boolean;
+	closable?: boolean;
+	setIsModalVisible: Function;
+	footer?: any;
+	title: string;
+	children: ReactElement;
 }) => {
-
 	return (
 		<>
-			<Modal title={title} visible={isModalVisible} footer={footer}
+			<Modal
+				title={title}
+				visible={isModalVisible}
+				footer={footer}
 				closable={closable}
-
 			>
 				{children}
 			</Modal>

frontend/src/components/metrics/LatencyLineChart.tsx

@@ -187,7 +187,7 @@ class LatencyLineChart extends React.Component<LatencyLineChartProps> {
 				>
 					<PopUpElements
 						onClick={() => {
-							this.props.popupClickHandler(this.state.firstpoint_ts)
+							this.props.popupClickHandler(this.state.firstpoint_ts);
 						}}
 					>
 						View Traces

frontend/src/components/metrics/ServiceMetrics.tsx

@@ -31,7 +31,7 @@ interface ServicesMetricsProps extends RouteComponentProps<any> {
 }
 
 const _ServiceMetrics = (props: ServicesMetricsProps) => {
-	const {servicename} = useParams<{ servicename?: string }>();
+	const { servicename } = useParams<{ servicename?: string }>();
 	useEffect(() => {
 		props.getServicesMetrics(servicename, props.globalTime);
 		props.getTopEndpoints(servicename, props.globalTime);
@@ -41,22 +41,18 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 		const tMinus15Min = timestamp / 1000000 - 15 * 60 * 1000;
 		const currentTime = timestamp / 1000000;
 
-		props.updateTimeInterval("custom", [
+		props.updateTimeInterval("custom", [tMinus15Min, currentTime]); // updateTimeInterval takes second range in ms -- give -5 min to selected time,
-			tMinus15Min,
-			currentTime,
-		]); // updateTimeInterval takes second range in ms -- give -5 min to selected time,
 
 		const urlParams = new URLSearchParams();
-			urlParams.set(METRICS_PAGE_QUERY_PARAM.startTime,tMinus15Min.toString())
+		urlParams.set(METRICS_PAGE_QUERY_PARAM.startTime, tMinus15Min.toString());
-		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime,currentTime.toString())
+		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, currentTime.toString());
-		if(servicename){
+		if (servicename) {
-			urlParams.set(METRICS_PAGE_QUERY_PARAM.service,servicename)
+			urlParams.set(METRICS_PAGE_QUERY_PARAM.service, servicename);
 		}
 
 		props.history.push(`/traces?${urlParams.toString()}`);
 	};
 
-
 	return (
 		<Tabs defaultActiveKey="1">
 			<TabPane tab="Application Metrics" key="1">

frontend/src/components/metrics/ServicesTable.tsx

@@ -35,11 +35,11 @@ const TableLoadingWrapper = styled.div`
 	display: flex;
 	justify-content: center;
 	margin-top: 80px;
-`
+`;
 
 const LoadingText = styled.div`
 	margin-left: 16px;
-`
+`;
 
 const columns = [
 	{
@@ -81,51 +81,61 @@ const columns = [
 const _ServicesTable = (props: ServicesTableProps) => {
 	const search = useLocation().search;
 	const time_interval = new URLSearchParams(search).get("time");
-	const [initialDataFetch, setDataFetched] = useState(false)
+	const [initialDataFetch, setDataFetched] = useState(false);
-	const [errorObject, setErrorObject] = useState({message: "", isError: false});
+	const [errorObject, setErrorObject] = useState({
-	const isEmptyServiceList = !initialDataFetch && props.servicesList.length === 0;
+		message: "",
+		isError: false,
+	});
+	const isEmptyServiceList =
+		!initialDataFetch && props.servicesList.length === 0;
 	const refetchFromBackend = isEmptyServiceList || errorObject.isError;
- const [skipOnboarding, setSkipOnboarding ] = useState(localStorage.getItem('skip_onboarding') === "true");
+	const [skipOnboarding, setSkipOnboarding] = useState(
+		localStorage.getItem("skip_onboarding") === "true",
+	);
 
-	const onContinueClick = ()=>{
+	const onContinueClick = () => {
-		localStorage.setItem('skip_onboarding', 'true');
+		localStorage.setItem("skip_onboarding", "true");
-		setSkipOnboarding(true)
+		setSkipOnboarding(true);
-	}
+	};
 
 	function getApiServiceData() {
-			props.getServicesList(props.globalTime).then(() => {
+		props
+			.getServicesList(props.globalTime)
+			.then(() => {
 				setDataFetched(true);
 				setErrorObject({ message: "", isError: false });
-			}).catch((e: string) => {
+			})
+			.catch((e: string) => {
 				setErrorObject({ message: e, isError: true });
 				setDataFetched(true);
 			});
 	}
 
 	useEffect(getApiServiceData, [props.globalTime]);
-	useEffect(()=>{
+	useEffect(() => {
-		if(props.servicesList.length > 1 ){
+		if (props.servicesList.length > 1) {
-			localStorage.removeItem('skip_onboarding') ;
+			localStorage.removeItem("skip_onboarding");
 		}
 
-		refetchFromBackend &&  setTimeout(getApiServiceData, 50000)
+		refetchFromBackend && setTimeout(getApiServiceData, 50000);
-	}, [props.servicesList,errorObject])
+	}, [props.servicesList, errorObject]);
 
-	if(!initialDataFetch){
+	if (!initialDataFetch) {
 		return (
 			<TableLoadingWrapper>
-					<Spin/>
+				<Spin />
 				<LoadingText>Fetching data</LoadingText>
 			</TableLoadingWrapper>
-		)
+		);
 	}
 
-	if(refetchFromBackend && !skipOnboarding){
+	if (refetchFromBackend && !skipOnboarding) {
 		return (
-			<CustomModal title={"Setup instrumentation"}
+			<CustomModal
+				title={"Setup instrumentation"}
 				isModalVisible={true}
 				closable={false}
-																setIsModalVisible={()=>{}}
+				setIsModalVisible={() => {}}
 				footer={[
 					<Button key="submit" type="primary" onClick={onContinueClick}>
 						Continue without instrumentation
@@ -133,19 +143,31 @@ const _ServicesTable = (props: ServicesTableProps) => {
 				]}
 			>
 				<div>
-					<iframe width="100%" height="265" src="https://www.youtube.com/embed/Ly34WBQ2640" frameBorder="0"
+					<iframe
+						width="100%"
+						height="265"
+						src="https://www.youtube.com/embed/Ly34WBQ2640"
+						frameBorder="0"
 						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-													allowFullScreen></iframe>
+						allowFullScreen
-					<div style={{margin: "20px 0"}}>
+					></iframe>
-						<Spin/>
+					<div style={{ margin: "20px 0" }}>
+						<Spin />
 					</div>
 					<div>
-						No instrumentation data.<br/>
+						No instrumentation data.
-						Please instrument your application as mentioned <a href={"https://signoz.io/docs/instrumentation/overview"} target={"_blank"}>here</a>
+						<br />
+						Please instrument your application as mentioned{" "}
+						<a
+							href={"https://signoz.io/docs/instrumentation/overview"}
+							target={"_blank"}
+						>
+							here
+						</a>
 					</div>
 				</div>
 			</CustomModal>
-		)
+		);
 	}
 
 	return (
@@ -157,9 +179,19 @@ const _ServicesTable = (props: ServicesTableProps) => {
 			/>
 
 			{props.servicesList[0].numCalls === 0 && (
-				<Space style={{width: '100%', margin: "40px 0", justifyContent: "center"}}>
+				<Space
+					style={{ width: "100%", margin: "40px 0", justifyContent: "center" }}
+				>
 					No applications present. Please add instrumentation (follow this
-					<a href={"https://signoz.io/docs/instrumentation/overview"} target={"_blank"} style={{marginLeft: 3}}>guide</a>)</Space>
+					<a
+						href={"https://signoz.io/docs/instrumentation/overview"}
+						target={"_blank"}
+						style={{ marginLeft: 3 }}
+					>
+						guide
+					</a>
+					)
+				</Space>
 			)}
 		</Wrapper>
 	);

frontend/src/components/settings/settingsPage.tsx

@@ -1,72 +1,63 @@
 import React, { useEffect, useState } from "react";
 import { Form, Input, Space } from "antd";
 import { connect } from "react-redux";
-import { Tooltip } from 'antd';
+import { Tooltip } from "antd";
-import { InfoCircleOutlined,EyeTwoTone,EyeInvisibleOutlined } from '@ant-design/icons';
+import {
+	InfoCircleOutlined,
+	EyeTwoTone,
+	EyeInvisibleOutlined,
+} from "@ant-design/icons";
 import { StoreState } from "../../reducers";
 import { useAuthenticationData } from "../../hooks/authentication";
 import { TOKEN_DATE } from "../../../../../sass/frontend/src/constants/accessToken";
-import { Alert } from 'antd';
+import { Alert } from "antd";
 
-interface SettingsPageProps {
+interface SettingsPageProps {}
-}
 
 const layout = {
 	labelCol: { span: 3 },
 	wrapperCol: { span: 6 },
 };
 
-
 const SettingsPage = (props: SettingsPageProps) => {
 	const [form] = Form.useForm();
 
-	useEffect(()=>{
+	useEffect(() => {
 		form.setFieldsValue({
-			retention_period: "3 days"
+			retention_period: "3 days",
+		});
 	});
-	})
-
 
 	return (
 		<React.Fragment>
-
-
 			<Form
 				{...layout}
 				name="basic"
 				initialValues={{ remember: true }}
-				style={{ marginLeft: 20}}
+				style={{ marginLeft: 20 }}
 				form={form}
 			>
-
 				<Form.Item
 					label="Retention Period"
 					name="retention_period"
-
 					rules={[{ required: false }]}
 				>
-					<Input style={{ marginLeft: 60}}		disabled={true}/>
+					<Input style={{ marginLeft: 60 }} disabled={true} />
 				</Form.Item>
 			</Form>
 
-			<Space 			style={{ marginLeft: 60, marginTop: 48}}>
+			<Space style={{ marginLeft: 60, marginTop: 48 }}>
 				<Alert
 					message="Mail us at plans@signoz.io to change your plan or retention period"
 					type="info"
 				/>
-
 			</Space>
-
 		</React.Fragment>
 	);
 };
 
-const mapStateToProps = (
+const mapStateToProps = (state: StoreState): {} => {
-	state: StoreState
-): { } => {
 	return {};
 };
 
-export default connect(mapStateToProps, {
+export default connect(mapStateToProps, {})(SettingsPage);
-
-})(SettingsPage);

frontend/src/components/traces/LatencyModalForm.tsx

@@ -5,12 +5,13 @@ import { Store } from "antd/lib/form/interface";
 interface LatencyModalFormProps {
 	onCreate: (values: Store) => void; //Store is defined in antd forms library
 	onCancel: () => void;
-	latencyFilterValues: {min: string, max: string}
+	latencyFilterValues: { min: string; max: string };
 }
 
 const LatencyModalForm: React.FC<LatencyModalFormProps> = ({
 	onCreate,
-	onCancel,latencyFilterValues
+	onCancel,
+	latencyFilterValues,
 }) => {
 	const [form] = Form.useForm();
 	return (

frontend/src/components/traces/TraceFilter.tsx

@@ -43,16 +43,19 @@ const _TraceFilter = (props: TraceFilterProps) => {
 	const [serviceList, setServiceList] = useState<string[]>([]);
 	const [operationList, setOperationsList] = useState<string[]>([]);
 	const [tagKeyOptions, setTagKeyOptions] = useState<TagKeyOptionItem[]>([]);
-	const location = useLocation()
+	const location = useLocation();
 	const urlParams = new URLSearchParams(location.search.split("?")[1]);
 
 	useEffect(() => {
-		metricsAPI.get<string[]>("services/list").then((response) => {
+		metricsAPI
+			.get<string[]>("services/list")
+			.then((response) => {
 				setServiceList(response.data);
-		}).then(()=>{
+			})
-				const serviceName =urlParams.get(METRICS_PAGE_QUERY_PARAM.service);
+			.then(() => {
-				if(serviceName){
+				const serviceName = urlParams.get(METRICS_PAGE_QUERY_PARAM.service);
-					handleChangeService(serviceName)
+				if (serviceName) {
+					handleChangeService(serviceName);
 				}
 			});
 	}, []);
@@ -120,7 +123,10 @@ const _TraceFilter = (props: TraceFilterProps) => {
 	const [loading] = useState(false);
 
 	const [tagKeyValueApplied, setTagKeyValueApplied] = useState([""]);
-	const [latencyFilterValues, setLatencyFilterValues] = useState<{min: string, max: string}>({
+	const [latencyFilterValues, setLatencyFilterValues] = useState<{
+		min: string;
+		max: string;
+	}>({
 		min: "100",
 		max: "500",
 	});
@@ -158,7 +164,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 
 	const onLatencyModalApply = (values: Store) => {
 		setModalVisible(false);
-		const { min, max}= values
+		const { min, max } = values;
 		props.updateTraceFilters({
 			...props.traceFilters,
 			latency: {
@@ -167,7 +173,7 @@ const _TraceFilter = (props: TraceFilterProps) => {
 			},
 		});
 
-		setLatencyFilterValues({min, max})
+		setLatencyFilterValues({ min, max });
 	};
 
 	const onTagFormSubmit = (values: any) => {
@@ -382,13 +388,15 @@ const _TraceFilter = (props: TraceFilterProps) => {
 				</FormItem>
 			</Form>
 
-			{modalVisible && <LatencyModalForm
+			{modalVisible && (
+				<LatencyModalForm
 					onCreate={onLatencyModalApply}
 					latencyFilterValues={latencyFilterValues}
 					onCancel={() => {
 						setModalVisible(false);
 					}}
-			/>}
+				/>
+			)}
 		</div>
 	);
 };

frontend/src/components/traces/TraceGraph.tsx

@@ -46,7 +46,7 @@ const _TraceGraph = (props: TraceGraphProps) => {
 		.default()
 		.attr("class", "d3-tip")
 		.html(function (d: any) {
-			return d.data.name + "<br>duration: " + d.data.value/1000000+'ms';
+			return d.data.name + "<br>duration: " + d.data.value / 1000000 + "ms";
 		});
 
 	const onClick = (z: any) => {
@@ -84,7 +84,7 @@ const _TraceGraph = (props: TraceGraphProps) => {
 						<Button type="primary" onClick={setResetZoom.bind(this, true)}>
 							Reset Zoom
 						</Button>
-						<div id="chart" style={{ fontSize: 12, marginTop: 20}}></div>
+						<div id="chart" style={{ fontSize: 12, marginTop: 20 }}></div>
 					</Card>
 
 					<SelectedSpanDetails clickedSpanTags={clickedSpanTags} />

frontend/src/components/traces/TraceList.tsx

@@ -107,11 +107,22 @@ const _TraceList = (props: TraceListProps) => {
 
 			return <Table dataSource={dataSource} columns={columns} size="middle" />;
 		} else {
-
+			if (isOnboardingSkipped()) {
-			if(isOnboardingSkipped()){
+				return (
-				return (						<Space style={{width: '100%', margin: "40px 0", justifyContent: "center"}}>
+					<Space
+						style={{ width: "100%", margin: "40px 0", justifyContent: "center" }}
+					>
 						No spans found. Please add instrumentation (follow this
-					<a href={"https://signoz.io/docs/instrumentation/overview"} target={"_blank"} style={{marginLeft: 3}}>guide</a>)</Space>)
+						<a
+							href={"https://signoz.io/docs/instrumentation/overview"}
+							target={"_blank"}
+							style={{ marginLeft: 3 }}
+						>
+							guide
+						</a>
+						)
+					</Space>
+				);
 			}
 			return <div> No spans found for given filter!</div>;
 		}

frontend/src/components/usage/UsageExplorer.tsx

@@ -3,7 +3,13 @@ import { Bar } from "react-chartjs-2";
 import { Card, Form, Select, Space } from "antd";
 import { connect } from "react-redux";
 
-import { getServicesList, getUsageData, GlobalTime, servicesListItem, usageDataItem } from "../../actions";
+import {
+	getServicesList,
+	getUsageData,
+	GlobalTime,
+	servicesListItem,
+	usageDataItem,
+} from "../../actions";
 import { StoreState } from "../../reducers";
 import moment from "moment";
 import { isOnboardingSkipped } from "../../utils/app";
@@ -20,37 +26,58 @@ interface UsageExplorerProps {
 const timeDaysOptions = [
 	{ value: 30, label: "Last 30 Days" },
 	{ value: 7, label: "Last week" },
-	{ value: 1, label: "Last day" }
+	{ value: 1, label: "Last day" },
 ];
 
 const interval = [
-	{ value: 604800, chartDivideMultiplier: 1, label: "Weekly", applicableOn: [timeDaysOptions[0]] },
+	{
-	{ value: 86400, chartDivideMultiplier: 30,label: "Daily", applicableOn: [timeDaysOptions[0],timeDaysOptions[1]]  },
+		value: 604800,
-	{ value: 3600, chartDivideMultiplier: 10,label: "Hours", applicableOn: [timeDaysOptions[2],timeDaysOptions[1]]  },,
+		chartDivideMultiplier: 1,
+		label: "Weekly",
+		applicableOn: [timeDaysOptions[0]],
+	},
+	{
+		value: 86400,
+		chartDivideMultiplier: 30,
+		label: "Daily",
+		applicableOn: [timeDaysOptions[0], timeDaysOptions[1]],
+	},
+	{
+		value: 3600,
+		chartDivideMultiplier: 10,
+		label: "Hours",
+		applicableOn: [timeDaysOptions[2], timeDaysOptions[1]],
+	},
+	,
 ];
 
 const _UsageExplorer = (props: UsageExplorerProps) => {
-	const [selectedTime, setSelectedTime] = useState(timeDaysOptions[1])
+	const [selectedTime, setSelectedTime] = useState(timeDaysOptions[1]);
-	const [selectedInterval, setSelectedInterval] = useState(interval[2])
+	const [selectedInterval, setSelectedInterval] = useState(interval[2]);
-	const [selectedService, setSelectedService] = useState<string>("")
+	const [selectedService, setSelectedService] = useState<string>("");
 
 	useEffect(() => {
-		if(selectedTime && selectedInterval) {
+		if (selectedTime && selectedInterval) {
-			const maxTime = new Date().getTime() * 1000000  ;
+			const maxTime = new Date().getTime() * 1000000;
-			const minTime = (maxTime - (selectedTime.value * 24 * 3600000 * 1000000 ) );
+			const minTime = maxTime - selectedTime.value * 24 * 3600000 * 1000000;
 
-			props.getUsageData(minTime, maxTime, selectedInterval!.value, selectedService);
+			props.getUsageData(
+				minTime,
+				maxTime,
+				selectedInterval!.value,
+				selectedService,
+			);
 		}
-	}, [selectedTime,selectedInterval,selectedService]);
+	}, [selectedTime, selectedInterval, selectedService]);
 
 	useEffect(() => {
 		props.getServicesList(props.globalTime);
 	}, []);
 
-
-
 	const data = {
-		labels: props.usageData.map((s) => moment(s.timestamp/1000000).format("MMM Do h a")),
+		labels: props.usageData.map((s) =>
+			moment(s.timestamp / 1000000).format("MMM Do h a"),
+		),
 		datasets: [
 			{
 				label: "Span Count",
@@ -62,7 +89,6 @@ const _UsageExplorer = (props: UsageExplorerProps) => {
 		],
 	};
 
-
 	const options = {
 		scales: {
 			yAxes: [
@@ -82,50 +108,78 @@ const _UsageExplorer = (props: UsageExplorerProps) => {
 	return (
 		<React.Fragment>
 			{/* PNOTE - TODO - Keep it in reponsive row column tab */}
-			<Space style={{marginTop: 40, marginLeft: 20}}>
+			<Space style={{ marginTop: 40, marginLeft: 20 }}>
 				<Space>
-						<Select onSelect={(value, option)=>{
+					<Select
-							setSelectedTime(timeDaysOptions.filter((item)=>item.value == parseInt(value))[0])
+						onSelect={(value, option) => {
-						}} value={selectedTime.label}>
+							setSelectedTime(
+								timeDaysOptions.filter((item) => item.value == parseInt(value))[0],
+							);
+						}}
+						value={selectedTime.label}
+					>
 						{timeDaysOptions.map(({ value, label }) => (
 							<Option value={value}>{label}</Option>
 						))}
 					</Select>
 				</Space>
 				<Space>
-					<Select onSelect={(value)=>{
+					<Select
-					 setSelectedInterval(interval.filter((item)=>item!.value === parseInt(value))[0])
+						onSelect={(value) => {
-					}} value={selectedInterval!.label}>
+							setSelectedInterval(
-
+								interval.filter((item) => item!.value === parseInt(value))[0],
-						{interval.filter((interval)=>interval!.applicableOn.includes(selectedTime)).map((item) => (
+							);
+						}}
+						value={selectedInterval!.label}
+					>
+						{interval
+							.filter((interval) => interval!.applicableOn.includes(selectedTime))
+							.map((item) => (
 								<Option value={item!.value}>{item!.label}</Option>
 							))}
 					</Select>
 				</Space>
 
 				<Space>
-					<Select onSelect={(value) => {
+					<Select
-						setSelectedService(value)
+						onSelect={(value) => {
-					}} value={ selectedService || "All Services"}>
+							setSelectedService(value);
+						}}
+						value={selectedService || "All Services"}
+					>
 						<Option value={""}>All Services</Option>
-						{props.servicesList.map((service)=><Option value={service.serviceName}>{service.serviceName}</Option>)}
+						{props.servicesList.map((service) => (
+							<Option value={service.serviceName}>{service.serviceName}</Option>
+						))}
 					</Select>
 				</Space>
 
-				{	isOnboardingSkipped() && props.totalCount === 0 ? (
+				{isOnboardingSkipped() && props.totalCount === 0 ? (
-					<Space style={{width: '100%', margin: "40px 0", marginLeft: 20, justifyContent: "center"}}>
+					<Space
+						style={{
+							width: "100%",
+							margin: "40px 0",
+							marginLeft: 20,
+							justifyContent: "center",
+						}}
+					>
 						No spans found. Please add instrumentation (follow this
-						<a href={"https://signoz.io/docs/instrumentation/overview"} target={"_blank"} style={{marginLeft: 3}}>guide</a>)</Space>
+						<a
-				): (
+							href={"https://signoz.io/docs/instrumentation/overview"}
-					<Space style={{display: "block", marginLeft: 20, width:200}}>
+							target={"_blank"}
+							style={{ marginLeft: 3 }}
+						>
+							guide
+						</a>
+						)
+					</Space>
+				) : (
+					<Space style={{ display: "block", marginLeft: 20, width: 200 }}>
 						{`Total count is ${props.totalCount}`}
 					</Space>
-				)
+				)}
-				}
-
 			</Space>
 
-
 			<Card style={{ width: "90%", margin: 20 }} bodyStyle={{ padding: 20 }}>
 				<Bar data={data} options={options} />
 			</Card>
@@ -134,16 +188,26 @@ const _UsageExplorer = (props: UsageExplorerProps) => {
 };
 
 const mapStateToProps = (
-	state: StoreState
+	state: StoreState,
-): { totalCount: number; globalTime: GlobalTime; servicesList: servicesListItem[]; usageData: usageDataItem[]; } => {
+): {
+	totalCount: number;
+	globalTime: GlobalTime;
+	servicesList: servicesListItem[];
+	usageData: usageDataItem[];
+} => {
 	let totalCount = 0;
-	for(let item of state.usageDate){
+	for (let item of state.usageDate) {
-		totalCount = totalCount+item.count;
+		totalCount = totalCount + item.count;
 	}
-	return {totalCount:totalCount, usageData: state.usageDate, globalTime: state.globalTime, servicesList: state.servicesList };
+	return {
+		totalCount: totalCount,
+		usageData: state.usageDate,
+		globalTime: state.globalTime,
+		servicesList: state.servicesList,
+	};
 };
 
 export const UsageExplorer = connect(mapStateToProps, {
 	getUsageData: getUsageData,
-	getServicesList: getServicesList
+	getServicesList: getServicesList,
 })(_UsageExplorer);

frontend/src/constants/app.ts

@@ -1,6 +1,4 @@
-export const WITHOUT_SESSION_PATH = [
+export const WITHOUT_SESSION_PATH = ["/redirect"];
- "/redirect"
-]
 
 export const AUTH0_REDIRECT_PATH = "/redirect";
 

frontend/src/constants/query.ts

@@ -2,6 +2,5 @@ export enum METRICS_PAGE_QUERY_PARAM {
 	interval = "interval",
 	startTime = "startTime",
 	endTime = "endTime",
-	service = "service"
+	service = "service",
 }
-

frontend/src/index.tsx

@@ -10,7 +10,7 @@ import { Auth0Provider } from "@auth0/auth0-react";
 import AppWrapper from "Src/components/AppWrapper";
 import "Src/assets/index.css";
 import { reducers } from "./reducers";
-import {BrowserRouter as Router} from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 import { AUTH0_CLIENT_ID, AUTH0_DOMAIN } from "./constants/env";
 // import Signup from './components/Signup';
 // @ts-ignore
@@ -31,7 +31,6 @@ ReactDOM.render(
 				</Router>
 			</ThemeSwitcherProvider>
 		</React.StrictMode>
-	</Provider>
+	</Provider>,
-    ,
 	document.querySelector("#root"),
 );

frontend/src/reducers/global.ts

@@ -3,7 +3,7 @@ import { ActionTypes, Action, GlobalTime } from "../actions";
 export const updateGlobalTimeReducer = (
 	state: GlobalTime = {
 		maxTime: Date.now() * 1000000,
-		minTime: (Date.now() - 15 * 60 * 1000) * 1000000
+		minTime: (Date.now() - 15 * 60 * 1000) * 1000000,
 	},
 	action: Action,
 ) => {

frontend/src/utils/app.ts

@@ -1 +1,3 @@
-export const isOnboardingSkipped = ()=>{return localStorage.getItem('skip_onboarding') === "true"}
+export const isOnboardingSkipped = () => {
+	return localStorage.getItem("skip_onboarding") === "true";
+};

frontend/src/utils/timeUtils.ts

@@ -1,4 +1,4 @@
-export const toUTCEpoch = (time: number):number=>{
+export const toUTCEpoch = (time: number): number => {
-	const x = new Date()
+	const x = new Date();
-	return (time + x.getTimezoneOffset()*60*1000);
+	return time + x.getTimezoneOffset() * 60 * 1000;
-}
+};

frontend/src/utils/token.ts

@@ -1,3 +1,3 @@
-export class Token{
+export class Token {
-    static auth0Token = ""
+	static auth0Token = "";
-};
+}

frontend/webpack.config.js

@@ -1,7 +1,7 @@
 // shared config (dev and prod)
 const { resolve } = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-console.log(resolve(__dirname, './src/'));
+console.log(resolve(__dirname, "./src/"));
 module.exports = {
 	mode: "development",
 	devtool: "source-map",
@@ -9,11 +9,11 @@ module.exports = {
 	devServer: {
 		historyApiFallback: true,
 		publicPath: "/",
-        transportMode: 'ws',
+		transportMode: "ws",
 		contentBase: [resolve(__dirname, "./public")],
 		hot: true,
 		liveReload: false,
-        inline:true,
+		inline: true,
 		port: 3000,
 	},
 	output: {
@@ -23,9 +23,9 @@ module.exports = {
 	},
 	resolve: {
 		alias: {
-          Src: resolve(__dirname, './src/')
+			Src: resolve(__dirname, "./src/"),
 		},
-        extensions: [".ts", ".tsx",".js", ".jsx"],
+		extensions: [".ts", ".tsx", ".js", ".jsx"],
 	},
 	module: {
 		rules: [

frontend/webpack.config.prod.js

@@ -15,9 +15,9 @@ module.exports = {
 
 	resolve: {
 		alias: {
-            Src: resolve(__dirname, './src/'),
+			Src: resolve(__dirname, "./src/"),
 		},
-        extensions: [".ts", ".tsx",".js", ".jsx"],
+		extensions: [".ts", ".tsx", ".js", ".jsx"],
 	},
 	module: {
 		rules: [
@@ -46,10 +46,8 @@ module.exports = {
 	plugins: [
 		new HtmlWebpackPlugin({ template: "src/index.html.ejs" }),
 		new CopyPlugin({
-            patterns: [
+			patterns: [{ from: resolve(__dirname, "public/"), to: "." }],
-                { from: resolve(__dirname, "public/"), to: "." },
+		}),
-            ],
-        })
 	],
 	performance: {
 		hints: false,