rerfactoring

frontend/src/api/apiV1.ts

@@ -0,0 +1,3 @@
+const apiV1 = "/api/v1/";
+
+export default apiV1;

frontend/src/api/graphQuery.js

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

frontend/src/api/index.ts

@@ -0,0 +1,9 @@
+import axios, { AxiosRequestConfig } from "axios";
+import { ENVIRONMENT } from "Src/constants/env";
+import apiV1 from "./apiV1";
+
+export default axios.create({
+	baseURL: `${ENVIRONMENT.baseURL}`,
+});
+
+export { apiV1 };

frontend/src/api/metricsAPI.js

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

frontend/src/api/submitForm.js

@@ -1,15 +0,0 @@
-import axios from "axios";
-import { ENVIRONMENT } from "Src/constants/env";
-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/`,
-});
-
-//https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/sendMessage?chat_id=351813222&text=Hello%20there
-
-// Chat ID can be obtained from here
-//https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/getUpdates

frontend/src/api/tracesAPI.js

@@ -1,12 +0,0 @@
-import axios from "axios";
-import { ENVIRONMENT } from "Src/constants/env";
-import { Token } from "../utils/token";
-//import { format } from 'path';
-
-export default axios.create({
-	// baseURL: 'http://104.211.113.204:8080/api/v1/' //comment this line and remove  this comment before pushing
-	// baseURL: process.env.QUERY_SERVICE_URL,
-	// console.log('in traces API', process.env.QUERY_SERVICE_URL)
-	// baseURL: "/api/v1/",
-	baseURL: `${ENVIRONMENT.baseURL}/api/v1/`,
-});

frontend/src/components/App.tsx

@@ -1,185 +0,0 @@
-import React, { Suspense, useState } from "react";
-import { Layout, Menu, Switch as ToggleButton, Spin, Row, Col } from "antd";
-import { useThemeSwitcher } from "react-css-theme-switcher";
-
-import {
-	NavLink,
-	BrowserRouter as Router,
-	Route,
-	Switch,
-} from "react-router-dom";
-import {
-	LineChartOutlined,
-	BarChartOutlined,
-	DeploymentUnitOutlined,
-	AlignLeftOutlined,
-	AppstoreOutlined,
-	SettingOutlined,
-	ApiOutlined
-} from "@ant-design/icons";
-
-import DateTimeSelector from "Src/components/DateTimeSelector";
-import ShowBreadcrumbs from "Src/components/ShowBreadcrumbs";
-import styled from "styled-components";
-
-const { Content, Footer, Sider } = Layout;
-
-const ServiceMetrics = React.lazy(
-	() => import("Src/components/metrics/ServiceMetricsDef"),
-);
-const ServiceMap = React.lazy(
-	() => import("Src/components/servicemap/ServiceMap"),
-);
-const TraceDetail = React.lazy(
-	() => 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"),
-);
-
-const IntstrumentationPage = React.lazy(
-	() => import("Src/components/add-instrumentation/instrumentationPage"),
-);
-//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.
-
-const ThemeSwitcherWrapper = styled.div`
-	display: flex;
-	justify-content: center;
-	margin-top: 20px;
-`;
-const App = () => {
-	// state = { collapsed: false, isDarkMode: true };
-	const { switcher, currentTheme, status, themes } = useThemeSwitcher();
-	const [isDarkMode, setIsDarkMode] = useState(true);
-	const [collapsed, setCollapsed] = useState(false);
-
-	const toggleTheme = (isChecked: boolean) => {
-		setIsDarkMode(isChecked);
-		switcher({ theme: isChecked ? themes.dark : themes.light });
-	};
-
-	const onCollapse = (): void => {
-		setCollapsed(!collapsed);
-	};
-
-	if (status === "loading") {
-		return null;
-	}
-
-	return (
-		<Router basename="/">
-			<Layout style={{ minHeight: "100vh" }}>
-				<Sider
-					collapsible
-					collapsed={collapsed}
-					onCollapse={onCollapse}
-					width={160}
-				>
-					<div className="logo">
-						<ThemeSwitcherWrapper>
-							<ToggleButton checked={isDarkMode} onChange={toggleTheme} />
-						</ThemeSwitcherWrapper>
-						<NavLink to="/">
-							<img
-								src={"/signoz.svg"}
-								alt={"SigNoz"}
-								style={{
-									margin: "5%",
-									width: 100,
-									display: !collapsed ? "block" : "none",
-								}}
-							/>
-						</NavLink>
-					</div>
-
-					<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
-						<Menu.Item key="1" icon={<BarChartOutlined />}>
-							<NavLink
-								to="/application"
-								style={{ fontSize: 12, textDecoration: "none" }}
-							>
-								Metrics
-							</NavLink>
-						</Menu.Item>
-						<Menu.Item key="2" icon={<AlignLeftOutlined />}>
-							<NavLink to="/traces" style={{ fontSize: 12, textDecoration: "none" }}>
-								Traces
-							</NavLink>
-						</Menu.Item>
-						<Menu.Item key="3" icon={<DeploymentUnitOutlined />}>
-							<NavLink
-								to="/service-map"
-								style={{ fontSize: 12, textDecoration: "none" }}
-							>
-								Service Map
-							</NavLink>
-						</Menu.Item>
-						<Menu.Item key="4" icon={<LineChartOutlined />}>
-							<NavLink
-								to="/usage-explorer"
-								style={{ fontSize: 12, textDecoration: "none" }}
-							>
-								Usage Explorer
-							</NavLink>
-						</Menu.Item>
-						<Menu.Item key="5" icon={<SettingOutlined />}>
-							<NavLink to="/settings" style={{ fontSize: 12, textDecoration: "none" }}>
-								Settings
-							</NavLink>
-						</Menu.Item>
-						<Menu.Item key="6" icon={<ApiOutlined />}>
-							<NavLink to="/add-instrumentation" style={{ fontSize: 12, textDecoration: "none" }}>
-								Add instrumentation
-							</NavLink>
-						</Menu.Item>
-					</Menu>
-				</Sider>
-				<Layout className="site-layout">
-					<Content style={{ margin: "0 16px" }}>
-						<Row>
-							<Col span={16}>
-								<ShowBreadcrumbs />
-							</Col>
-
-							<Col span={8}>
-								<DateTimeSelector />
-							</Col>
-						</Row>
-
-						{/* <Divider /> */}
-
-						<Suspense fallback={<Spin size="large" />}>
-							<Switch>
-								<Route path="/application/:servicename" component={ServiceMetrics} />
-								<Route path="/service-map" component={ServiceMap} />
-								<Route path="/traces" exact component={TraceDetail} />
-								<Route path="/traces/:id" component={TraceGraph} />
-								<Route path="/settings" exact component={SettingsPage} />
-								<Route path="/add-instrumentation" exact component={IntstrumentationPage} />
-								<Route path="/usage-explorer" component={UsageExplorer} />
-								<Route path="/" component={ServicesTable} />
-								<Route path="/application" exact component={ServicesTable} />
-							</Switch>
-						</Suspense>
-					</Content>
-					<Footer style={{ textAlign: "center", fontSize: 10 }}>
-						SigNoz Inc. ©2020{" "}
-					</Footer>
-				</Layout>
-			</Layout>
-		</Router>
-	);
-};
-
-export default App;

frontend/src/index.tsx

@@ -1,26 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
-import { createStore, applyMiddleware, compose } from "redux";
 import { ThemeSwitcherProvider } from "react-css-theme-switcher";
-import thunk from "redux-thunk";
-// import { NavLink, BrowserRouter as Router,  Route, Switch  } from 'react-router-dom';
-import { Auth0Provider } from "@auth0/auth0-react";
-
-import AppWrapper from "Src/components/AppWrapper";
+import store from "Src/store";
+import AppWrapper from "Src/modules/AppWrapper";
 import "Src/assets/index.css";
-import { reducers } from "Src/reducers";
 import { BrowserRouter as Router } from "react-router-dom";
-import { AUTH0_CLIENT_ID, AUTH0_DOMAIN } from "./constants/env";
-// import Signup from './components/Signup';
-// @ts-ignore
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));
-
-const themes = {
-	dark: `/dark-theme.css`,
-	light: `/light-theme.css`,
-};
+import themes from "Src/themes";
 
 ReactDOM.render(
 	<Provider store={store}>

frontend/src/modules/App.tsx

@@ -0,0 +1,81 @@
+import React, { Suspense } from "react";
+import { Layout, Spin } from "antd";
+import { useThemeSwitcher } from "react-css-theme-switcher";
+
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+
+import SideNav from "./Nav/SideNav";
+import TopNav from "./Nav/TopNav";
+
+const { Content, Footer } = Layout;
+
+const ServiceMetrics = React.lazy(
+	() => import("Src/modules/metrics/ServiceMetricsDef"),
+);
+const ServiceMap = React.lazy(
+	() => import("Src/modules/Servicemap/ServiceMap"),
+);
+const TraceDetail = React.lazy(() => import("Src/modules/Traces/TraceDetail"));
+const TraceGraph = React.lazy(() => import("Src/modules/Traces/TraceGraphDef"));
+const UsageExplorer = React.lazy(
+	() => import("Src/modules/Usage/UsageExplorerDef"),
+);
+const ServicesTable = React.lazy(
+	() => import("Src/modules/metrics/ServicesTableDef"),
+);
+const Signup = React.lazy(() => import("Src/modules/Auth/Signup"));
+const SettingsPage = React.lazy(
+	() => import("Src/modules/Settings/settingsPage"),
+);
+
+const IntstrumentationPage = React.lazy(
+	() => import("Src/modules/add-instrumentation/instrumentationPage"),
+);
+//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.
+
+const App = () => {
+	const { status } = useThemeSwitcher();
+
+	if (status === "loading") {
+		return null;
+	}
+
+	return (
+		<Router basename="/">
+			<Layout style={{ minHeight: "100vh" }}>
+				<SideNav />
+				<Layout className="site-layout">
+					<Content style={{ margin: "0 16px" }}>
+						<TopNav />
+
+						{/* <Divider /> */}
+
+						<Suspense fallback={<Spin size="large" />}>
+							<Switch>
+								<Route path="/application/:servicename" component={ServiceMetrics} />
+								<Route path="/service-map" component={ServiceMap} />
+								<Route path="/traces" exact component={TraceDetail} />
+								<Route path="/traces/:id" component={TraceGraph} />
+								<Route path="/settings" exact component={SettingsPage} />
+								<Route
+									path="/add-instrumentation"
+									exact
+									component={IntstrumentationPage}
+								/>
+								<Route path="/usage-explorer" component={UsageExplorer} />
+								<Route path="/" component={ServicesTable} />
+								<Route path="/application" exact component={ServicesTable} />
+							</Switch>
+						</Suspense>
+					</Content>
+					<Footer style={{ textAlign: "center", fontSize: 10 }}>
+						SigNoz Inc. ©2020{" "}
+					</Footer>
+				</Layout>
+			</Layout>
+		</Router>
+	);
+};
+
+export default App;

frontend/src/modules/AppWrapper.tsx

@@ -1,8 +1,8 @@
-import React, { Suspense, useState } from "react";
+import React, { Suspense } from "react";
 import { Spin } from "antd";
 import { Route, Switch, Redirect } from "react-router-dom";
-import Signup from "./Signup";
-const App = React.lazy(() => import("Src/components/App"));
+import Signup from "./Auth/Signup";
+const App = React.lazy(() => import("Src/modules/App"));
 
 const AppWrapper = () => {
 	return (

frontend/src/modules/Auth/Signup.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useRef, Suspense } from "react";
-import { Row, Space, Button, Input, Checkbox } from "antd";
-import submitForm from "../api/submitForm";
+import React, { useState } from "react";
+import { Row, Space, Button, Input } from "antd";
+import api, { apiV1 } from "../../api";
+
 import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";
 
@@ -15,10 +16,6 @@ const Signup = (props: SignUpProps) => {
 		password: { value: "", valid: true },
 		emailOptIn: { value: true },
 	});
-	const passwordInput = useRef(null);
-	// const { createAccount } = useActions(signupLogic)
-	// const { accountLoading } = useValues(signupLogic)
-	// const { plan } = fromParams()
 
 	const updateForm = (name: any, target: any, valueAttr = "value") => {
 		/* Validate password (if applicable) */
@@ -49,9 +46,7 @@ const Signup = (props: SignUpProps) => {
 
 		let texttolog = JSON.stringify(payload);
 
-
-
-		submitForm.post("user?email=" + texttolog).then((res) => {
+		api.post(apiV1 + "/user?email=" + texttolog).then((res) => {
 			console.log(res);
 			console.log(res.data);
 		});
@@ -118,8 +113,6 @@ const Signup = (props: SignUpProps) => {
 							/>
 						</div>
 
-
-
 						<div className="input-set">
 							<label htmlFor="signupFirstName">First Name</label>
 							<Input
@@ -133,7 +126,7 @@ const Signup = (props: SignUpProps) => {
 							/>
 						</div>
 
-						<div className="text-center space-top" style={{marginTop: 12}}>
+						<div className="text-center space-top" style={{ marginTop: 12 }}>
 							<Button
 								type="primary"
 								htmlType="submit"

frontend/src/modules/Metrics/ErrorRateChart.tsx

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

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 "../../actions/metrics";
+import { customMetricsItem } from "../../store/actions/metrics";
 
 const GenVisualizationWrapper = styled.div`
 	height: 160px;

frontend/src/modules/Metrics/LatencyLineChart.tsx

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

frontend/src/modules/Metrics/RequestRateChart.tsx

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

frontend/src/modules/Metrics/ServiceMetrics.tsx

@@ -11,8 +11,8 @@ import {
 	topEndpointListItem,
 	GlobalTime,
 	updateTimeInterval,
-} from "../../actions";
-import { StoreState } from "../../reducers";
+} from "../../store/actions";
+import { StoreState } from "../../store/reducers";
 import LatencyLineChart from "./LatencyLineChart";
 import RequestRateChart from "./RequestRateChart";
 import ErrorRateChart from "./ErrorRateChart";

frontend/src/modules/Metrics/ServicesTable.tsx

@@ -5,9 +5,9 @@ import { Button, Space, Spin, Table } from "antd";
 import styled from "styled-components";
 import { connect } from "react-redux";
 
-import { getServicesList, GlobalTime, servicesListItem } from "../../actions";
-import { StoreState } from "../../reducers";
-import { CustomModal } from "../common/Modal";
+import { getServicesList, GlobalTime, servicesListItem } from "../../store/actions";
+import { StoreState } from "../../store/reducers";
+import { CustomModal } from "../../components/Modal";
 
 interface ServicesTableProps {
 	servicesList: servicesListItem[];

frontend/src/modules/Metrics/TopEndpointsTable.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 import { Table } from "antd";
 import styled from "styled-components";
-import { topEndpointListItem } from "../../actions/metrics";
+import { topEndpointListItem } from "../../store/actions/metrics";
 
 const Wrapper = styled.div`
 	padding-top: 10px;

frontend/src/modules/Nav/SideNav.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { Layout, Menu, Switch as ToggleButton } from "antd";
+import { NavLink } from "react-router-dom";
+import { useThemeSwitcher } from "react-css-theme-switcher";
+
+import {
+	LineChartOutlined,
+	BarChartOutlined,
+	DeploymentUnitOutlined,
+	AlignLeftOutlined,
+	SettingOutlined,
+	ApiOutlined,
+} from "@ant-design/icons";
+import { ThemeSwitcherWrapper } from "./styles";
+const { Sider } = Layout;
+
+const SideNav = () => {
+	const { switcher, currentTheme, status, themes } = useThemeSwitcher();
+	const [collapsed, setCollapsed] = useState<boolean>(false);
+	if (status === "loading") {
+		return null;
+	}
+	const toggleTheme = (isChecked: boolean) => {
+		switcher({ theme: isChecked ? themes.dark : themes.light });
+	};
+
+	const onCollapse = (): void => {
+		setCollapsed(!collapsed);
+	};
+	return (
+		<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={160}>
+			<div className="logo">
+				<ThemeSwitcherWrapper>
+					<ToggleButton
+						checked={currentTheme === themes.dark}
+						onChange={toggleTheme}
+					/>
+				</ThemeSwitcherWrapper>
+				<NavLink to="/">
+					<img
+						src={"/signoz.svg"}
+						alt={"SigNoz"}
+						style={{
+							margin: "5%",
+							width: 100,
+							display: !collapsed ? "block" : "none",
+						}}
+					/>
+				</NavLink>
+			</div>
+
+			<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
+				<Menu.Item key="1" icon={<BarChartOutlined />}>
+					<NavLink
+						to="/application"
+						style={{ fontSize: 12, textDecoration: "none" }}
+					>
+						Metrics
+					</NavLink>
+				</Menu.Item>
+				<Menu.Item key="2" icon={<AlignLeftOutlined />}>
+					<NavLink to="/traces" style={{ fontSize: 12, textDecoration: "none" }}>
+						Traces
+					</NavLink>
+				</Menu.Item>
+				<Menu.Item key="3" icon={<DeploymentUnitOutlined />}>
+					<NavLink
+						to="/service-map"
+						style={{ fontSize: 12, textDecoration: "none" }}
+					>
+						Service Map
+					</NavLink>
+				</Menu.Item>
+				<Menu.Item key="4" icon={<LineChartOutlined />}>
+					<NavLink
+						to="/usage-explorer"
+						style={{ fontSize: 12, textDecoration: "none" }}
+					>
+						Usage Explorer
+					</NavLink>
+				</Menu.Item>
+				<Menu.Item key="5" icon={<SettingOutlined />}>
+					<NavLink to="/settings" style={{ fontSize: 12, textDecoration: "none" }}>
+						Settings
+					</NavLink>
+				</Menu.Item>
+				<Menu.Item key="6" icon={<ApiOutlined />}>
+					<NavLink
+						to="/add-instrumentation"
+						style={{ fontSize: 12, textDecoration: "none" }}
+					>
+						Add instrumentation
+					</NavLink>
+				</Menu.Item>
+			</Menu>
+		</Sider>
+	);
+};
+
+export default SideNav;

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

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

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

@@ -6,11 +6,11 @@ import { RouteComponentProps, useLocation } from "react-router-dom";
 import { connect } from "react-redux";
 
 import CustomDateTimeModal from "./CustomDateTimeModal";
-import { GlobalTime, updateTimeInterval } from "../actions";
-import { StoreState } from "../reducers";
+import { GlobalTime, updateTimeInterval } from "../../../store/actions";
+import { StoreState } from "../../../store/reducers";
 import FormItem from "antd/lib/form/FormItem";
 
-import { DateTimeRangeType } from "../actions";
+import { DateTimeRangeType } from "../../../store/actions";
 import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
 import { LOCAL_STORAGE } from "Src/constants/localStorage";
 import moment from "moment";

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

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { Row, Col } from "antd";
+
+import DateTimeSelector from "./DateTimeSelector";
+import ShowBreadcrumbs from "./ShowBreadcrumbs";
+
+const TopNav = () => {
+	return (
+		<Row>
+			<Col span={16}>
+				<ShowBreadcrumbs />
+			</Col>
+
+			<Col span={8}>
+				<DateTimeSelector />
+			</Col>
+		</Row>
+	);
+};
+
+export default TopNav;

frontend/src/modules/Nav/styles.ts

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const ThemeSwitcherWrapper = styled.div`
+	display: flex;
+	justify-content: center;
+	margin-top: 24px;
+	margin-bottom: 16px;
+`;

frontend/src/modules/Settings/settingsPage.tsx

@@ -7,7 +7,7 @@ import {
 	EyeTwoTone,
 	EyeInvisibleOutlined,
 } from "@ant-design/icons";
-import { StoreState } from "../../reducers";
+import { StoreState } from "../../store/reducers";
 import { Alert } from "antd";
 
 interface SettingsPageProps {}

frontend/src/modules/Traces/FilterStateDisplay.tsx

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

frontend/src/modules/Traces/TraceCustomVisualizations.tsx

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

frontend/src/modules/Traces/TraceFilter.tsx

@@ -9,13 +9,13 @@ import {
 	fetchTraces,
 	TraceFilters,
 	GlobalTime,
-} from "../../actions";
-import { StoreState } from "../../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 metricsAPI from "../../api/metricsAPI";
+import api, { apiV1 } from "../../api";
 import { useLocation } from "react-router-dom";
 import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
 
@@ -56,8 +56,8 @@ const _TraceFilter = (props: TraceFilterProps) => {
 	}, []);
 
 	useEffect(() => {
-		metricsAPI
-			.get<string[]>("services/list")
+		api
+			.get<string[]>(`${apiV1}/services/list`)
 			.then((response) => {
 				setServiceList(response.data);
 			})
@@ -154,13 +154,15 @@ const _TraceFilter = (props: TraceFilterProps) => {
 
 	function handleChangeService(value: string) {
 		let service_request = "/service/" + value + "/operations";
-		metricsAPI.get<string[]>(service_request).then((response) => {
+		api.get<string[]>(apiV1 + service_request).then((response) => {
 			// form_basefilter.resetFields(['operation',])
 			setOperationsList(response.data);
 		});
 
-		let tagkeyoptions_request = "tags?service=" + value;
-		metricsAPI.get<TagKeyOptionItem[]>(tagkeyoptions_request).then((response) => {
+		let tagkeyoptions_request = "/tags?service=" + value;
+		api
+			.get<TagKeyOptionItem[]>(apiV1 + tagkeyoptions_request)
+			.then((response) => {
 				setTagKeyOptions(response.data);
 			});
 

frontend/src/modules/Traces/TraceGraph.tsx

@@ -11,8 +11,8 @@ import * as d3Tip from "d3-tip";
 
 import "./TraceGraph.css";
 import { spanToTreeUtil } from "../../utils/spanToTree";
-import { fetchTraceItem, spansWSameTraceIDResponse } from "../../actions";
-import { StoreState } from "../../reducers";
+import { fetchTraceItem, spansWSameTraceIDResponse } from "../../store/actions";
+import { StoreState } from "../../store/reducers";
 import { TraceGraphColumn } from "./TraceGraphColumn";
 import SelectedSpanDetails from "./SelectedSpanDetails";
 

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 "../../actions";
-import { StoreState } from "../../reducers";
+import { traceResponseNew, pushDStree } from "../../store/actions";
+import { StoreState } from "../../store/reducers";
 
 interface TraceGraphColumnProps {
 	traces: traceResponseNew;

frontend/src/modules/Traces/TraceList.tsx

@@ -3,8 +3,8 @@ import { connect } from "react-redux";
 import { NavLink } from "react-router-dom";
 import { Space, Table } from "antd";
 
-import { traceResponseNew, fetchTraces, pushDStree } from "../../actions";
-import { StoreState } from "../../reducers";
+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";

frontend/src/modules/Usage/UsageExplorer.tsx

@@ -9,8 +9,8 @@ import {
 	GlobalTime,
 	servicesListItem,
 	usageDataItem,
-} from "../../actions";
-import { StoreState } from "../../reducers";
+} from "../../store/actions";
+import { StoreState } from "../../store/reducers";
 import moment from "moment";
 import { isOnboardingSkipped } from "../../utils/app";
 const { Option } = Select;

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

@@ -7,7 +7,7 @@ import {
 	EyeTwoTone,
 	EyeInvisibleOutlined,
 } from "@ant-design/icons";
-import { StoreState } from "../../reducers";
+import { StoreState } from "../../store/reducers";
 
 import { Alert } from "antd";
 

frontend/src/store/actions/metrics.ts

@@ -1,9 +1,10 @@
 import { Dispatch } from "redux";
-import metricsAPI from "../api/metricsAPI";
+import api, { apiV1 } from "../../api";
+
 import { GlobalTime } from "./global";
 import { ActionTypes } from "./types";
-import { Token } from "../utils/token";
-import { toUTCEpoch } from "../utils/timeUtils";
+import { Token } from "../../utils/token";
+import { toUTCEpoch } from "../../utils/timeUtils";
 
 export interface servicesListItem {
 	serviceName: string;
@@ -62,9 +63,9 @@ export interface getFilteredTraceMetricsAction {
 export const getServicesList = (globalTime: GlobalTime) => {
 	return async (dispatch: Dispatch) => {
 		let request_string =
-			"services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
+			"/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
 
-		const response = await metricsAPI.get<servicesListItem[]>(request_string);
+		const response = await api.get<servicesListItem[]>(apiV1 + request_string);
 
 		dispatch<getServicesListAction>({
 			type: ActionTypes.getServicesList,
@@ -80,14 +81,14 @@ export const getServicesMetrics = (
 ) => {
 	return async (dispatch: Dispatch) => {
 		let request_string =
-			"service/overview?service=" +
+			"/service/overview?service=" +
 			serviceName +
 			"&start=" +
 			globalTime.minTime +
 			"&end=" +
 			globalTime.maxTime +
 			"&step=60";
-		const response = await metricsAPI.get<metricItem[]>(request_string);
+		const response = await api.get<metricItem[]>(apiV1 + request_string);
 
 		dispatch<getServiceMetricsAction>({
 			type: ActionTypes.getServiceMetrics,
@@ -103,13 +104,13 @@ export const getTopEndpoints = (
 ) => {
 	return async (dispatch: Dispatch) => {
 		let request_string =
-			"service/top_endpoints?service=" +
+			"/service/top_endpoints?service=" +
 			serviceName +
 			"&start=" +
 			globalTime.minTime +
 			"&end=" +
 			globalTime.maxTime;
-		const response = await metricsAPI.get<topEndpointListItem[]>(request_string);
+		const response = await api.get<topEndpointListItem[]>(apiV1 + request_string);
 
 		dispatch<getTopEndpointsAction>({
 			type: ActionTypes.getTopEndpoints,
@@ -125,13 +126,13 @@ export const getFilteredTraceMetrics = (
 ) => {
 	return async (dispatch: Dispatch) => {
 		let request_string =
-			"spans/aggregates?start=" +
+			"/spans/aggregates?start=" +
 			toUTCEpoch(globalTime.minTime) +
 			"&end=" +
 			toUTCEpoch(globalTime.maxTime) +
 			"&" +
 			filter_params;
-		const response = await metricsAPI.get<customMetricsItem[]>(request_string);
+		const response = await api.get<customMetricsItem[]>(apiV1 + request_string);
 
 		dispatch<getFilteredTraceMetricsAction>({
 			type: ActionTypes.getFilteredTraceMetrics,

frontend/src/store/actions/traces.ts

@@ -1,8 +1,9 @@
 import { ActionTypes } from "./types";
-import tracesAPI from "../api/tracesAPI";
+import api, { apiV1 } from "../../api";
+
 import { Dispatch } from "redux";
 import { GlobalTime } from "./global";
-import { toUTCEpoch } from "../utils/timeUtils";
+import { toUTCEpoch } from "../../utils/timeUtils";
 
 // PNOTE
 // define trace interface - what it should return
@@ -121,13 +122,13 @@ export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
 	return async (dispatch: Dispatch) => {
 		if (globalTime) {
 			let request_string =
-				"spans?limit=100&lookback=2d&start=" +
+				"/spans?limit=100&lookback=2d&start=" +
 				toUTCEpoch(globalTime.minTime) +
 				"&end=" +
 				toUTCEpoch(globalTime.maxTime) +
 				"&" +
 				filter_params;
-			const response = await tracesAPI.get<traceResponseNew>(request_string);
+			const response = await api.get<traceResponseNew>(apiV1 + request_string);
 
 			dispatch<FetchTracesAction>({
 				type: ActionTypes.fetchTraces,
@@ -140,9 +141,9 @@ export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
 
 export const fetchTraceItem = (traceID: string) => {
 	return async (dispatch: Dispatch) => {
-		let request_string = "traces/" + traceID;
-		const response = await tracesAPI.get<spansWSameTraceIDResponse>(
-			request_string,
+		let request_string = "/traces/" + traceID;
+		const response = await api.get<spansWSameTraceIDResponse>(
+			apiV1 + request_string,
 		);
 
 		dispatch<FetchTraceItemAction>({

frontend/src/store/actions/usage.ts

@@ -1,8 +1,9 @@
 import { Dispatch } from "redux";
-import metricsAPI from "../api/metricsAPI";
+import api, { apiV1 } from "../../api";
+
 import { ActionTypes } from "./types";
 import { GlobalTime } from "./global";
-import { toUTCEpoch } from "../utils/timeUtils";
+import { toUTCEpoch } from "../../utils/timeUtils";
 
 export interface usageDataItem {
 	timestamp: number;
@@ -21,11 +22,11 @@ export const getUsageData = (
 	service: string,
 ) => {
 	return async (dispatch: Dispatch) => {
-		let request_string = `usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch(
+		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);
+		const response = await api.get<usageDataItem[]>(apiV1 + request_string);
 
 		dispatch<getUsageDataAction>({
 			type: ActionTypes.getUsageData,

frontend/src/store/index.ts

@@ -0,0 +1,9 @@
+import { createStore, applyMiddleware, compose } from "redux";
+import reducers from "./reducers";
+import thunk from "redux-thunk";
+
+const composeEnhancers =
+	(window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
+const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));
+
+export default store;

frontend/src/store/reducers/index.ts

@@ -34,7 +34,7 @@ export interface StoreState {
 	filteredTraceMetrics: customMetricsItem[];
 }
 
-export const reducers = combineReducers<StoreState>({
+const reducers = combineReducers<StoreState>({
 	traceFilters: traceFiltersReducer,
 	inputTag: inputsReducer,
 	traces: tracesReducer,
@@ -46,3 +46,5 @@ export const reducers = combineReducers<StoreState>({
 	globalTime: updateGlobalTimeReducer,
 	filteredTraceMetrics: filteredTraceMetricsReducer,
 });
+
+export default reducers;

frontend/src/themes/index.ts

@@ -0,0 +1,6 @@
+const themes = {
+	dark: `/dark-theme.css`,
+	light: `/light-theme.css`,
+};
+
+export default themes;

frontend/src/utils/spanToTree.ts

@@ -1,4 +1,4 @@
-import { pushDStree, span, RefItem } from "../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 => {