components --> modules & refactored TopNav and SideNav

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

@@ -3,7 +3,7 @@ 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/components/AppWrapper";
+import AppWrapper from "Src/modules/AppWrapper";
 import "Src/assets/index.css";
 import { BrowserRouter as Router } from "react-router-dom";
 import themes from "Src/themes";

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,6 @@
 import React, { useState } from "react";
 import { Row, Space, Button, Input } from "antd";
-import api, { apiV1 } from "../api";
+import api, { apiV1 } from "../../api";
 
 import { withRouter } from "react-router";
 import { RouteComponentProps } from "react-router-dom";

frontend/src/modules/Metrics/ServiceMetrics.tsx

@@ -17,7 +17,7 @@ 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 "../Traces/node_modules/Src/constants/query";
 
 const { TabPane } = Tabs;
 

frontend/src/modules/Metrics/ServicesTable.tsx

@@ -7,7 +7,7 @@ import { connect } from "react-redux";
 
 import { getServicesList, GlobalTime, servicesListItem } from "../../store/actions";
 import { StoreState } from "../../store/reducers";
-import { CustomModal } from "../common/Modal";
+import { CustomModal } from "../../components/Modal";
 
 interface ServicesTableProps {
 	servicesList: servicesListItem[];

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 "../store/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 "../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 { DateTimeRangeType } from "../store/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/Traces/TraceCustomVisualizations.tsx

@@ -1,5 +1,5 @@
 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";