diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx deleted file mode 100644 index 66b613674c82..000000000000 --- a/frontend/src/components/App.tsx +++ /dev/null @@ -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 ( - - - -
- - - - - {"SigNoz"} - -
- - - }> - - Metrics - - - }> - - Traces - - - }> - - Service Map - - - }> - - Usage Explorer - - - }> - - Settings - - - }> - - Add instrumentation - - - - - - - - - - - - - - - - - {/* */} - - }> - - - - - - - - - - - - - - - - - - ); -}; - -export default App; diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/Modal.tsx similarity index 100% rename from frontend/src/components/common/Modal.tsx rename to frontend/src/components/Modal.tsx diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 7e5997f08df6..bb4230356d4c 100644 --- a/frontend/src/index.tsx +++ b/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"; diff --git a/frontend/src/modules/App.tsx b/frontend/src/modules/App.tsx new file mode 100644 index 000000000000..d2828d9f106f --- /dev/null +++ b/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 ( + + + + + + + + {/* */} + + }> + + + + + + + + + + + + + + + + + + ); +}; + +export default App; diff --git a/frontend/src/components/AppWrapper.tsx b/frontend/src/modules/AppWrapper.tsx similarity index 86% rename from frontend/src/components/AppWrapper.tsx rename to frontend/src/modules/AppWrapper.tsx index d72332f36178..ca7587257205 100644 --- a/frontend/src/components/AppWrapper.tsx +++ b/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 ( diff --git a/frontend/src/components/Signup.tsx b/frontend/src/modules/Auth/Signup.tsx similarity index 99% rename from frontend/src/components/Signup.tsx rename to frontend/src/modules/Auth/Signup.tsx index 6e90ceb6feb8..c31bd8414827 100644 --- a/frontend/src/components/Signup.tsx +++ b/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"; diff --git a/frontend/src/components/metrics/ErrorRateChart.tsx b/frontend/src/modules/Metrics/ErrorRateChart.tsx similarity index 100% rename from frontend/src/components/metrics/ErrorRateChart.tsx rename to frontend/src/modules/Metrics/ErrorRateChart.tsx diff --git a/frontend/src/components/metrics/GenericVisualization.tsx b/frontend/src/modules/Metrics/GenericVisualization.tsx similarity index 100% rename from frontend/src/components/metrics/GenericVisualization.tsx rename to frontend/src/modules/Metrics/GenericVisualization.tsx diff --git a/frontend/src/components/metrics/LatencyLineChart.tsx b/frontend/src/modules/Metrics/LatencyLineChart.tsx similarity index 100% rename from frontend/src/components/metrics/LatencyLineChart.tsx rename to frontend/src/modules/Metrics/LatencyLineChart.tsx diff --git a/frontend/src/components/metrics/RequestRateChart.tsx b/frontend/src/modules/Metrics/RequestRateChart.tsx similarity index 100% rename from frontend/src/components/metrics/RequestRateChart.tsx rename to frontend/src/modules/Metrics/RequestRateChart.tsx diff --git a/frontend/src/components/metrics/ServiceMetrics.tsx b/frontend/src/modules/Metrics/ServiceMetrics.tsx similarity index 97% rename from frontend/src/components/metrics/ServiceMetrics.tsx rename to frontend/src/modules/Metrics/ServiceMetrics.tsx index cf0209dd45fc..b37276e51e30 100644 --- a/frontend/src/components/metrics/ServiceMetrics.tsx +++ b/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; diff --git a/frontend/src/components/metrics/ServiceMetricsDef.tsx b/frontend/src/modules/Metrics/ServiceMetricsDef.tsx similarity index 100% rename from frontend/src/components/metrics/ServiceMetricsDef.tsx rename to frontend/src/modules/Metrics/ServiceMetricsDef.tsx diff --git a/frontend/src/components/metrics/ServicesTable.tsx b/frontend/src/modules/Metrics/ServicesTable.tsx similarity index 98% rename from frontend/src/components/metrics/ServicesTable.tsx rename to frontend/src/modules/Metrics/ServicesTable.tsx index 8422995169bb..bf398cc8b63f 100644 --- a/frontend/src/components/metrics/ServicesTable.tsx +++ b/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[]; diff --git a/frontend/src/components/metrics/ServicesTableDef.tsx b/frontend/src/modules/Metrics/ServicesTableDef.tsx similarity index 100% rename from frontend/src/components/metrics/ServicesTableDef.tsx rename to frontend/src/modules/Metrics/ServicesTableDef.tsx diff --git a/frontend/src/components/metrics/TopEndpointsTable.tsx b/frontend/src/modules/Metrics/TopEndpointsTable.tsx similarity index 100% rename from frontend/src/components/metrics/TopEndpointsTable.tsx rename to frontend/src/modules/Metrics/TopEndpointsTable.tsx diff --git a/frontend/src/modules/Nav/SideNav.tsx b/frontend/src/modules/Nav/SideNav.tsx new file mode 100644 index 000000000000..2fbafa4015c1 --- /dev/null +++ b/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(false); + if (status === "loading") { + return null; + } + const toggleTheme = (isChecked: boolean) => { + switcher({ theme: isChecked ? themes.dark : themes.light }); + }; + + const onCollapse = (): void => { + setCollapsed(!collapsed); + }; + return ( + +
+ + + + + {"SigNoz"} + +
+ + + }> + + Metrics + + + }> + + Traces + + + }> + + Service Map + + + }> + + Usage Explorer + + + }> + + Settings + + + }> + + Add instrumentation + + + + + ); +}; + +export default SideNav; diff --git a/frontend/src/components/CustomDateTimeModal.tsx b/frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx similarity index 95% rename from frontend/src/components/CustomDateTimeModal.tsx rename to frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx index 1fa6010dd6a5..c8fe90346df1 100644 --- a/frontend/src/components/CustomDateTimeModal.tsx +++ b/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"; diff --git a/frontend/src/components/DateTimeSelector.tsx b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx similarity index 97% rename from frontend/src/components/DateTimeSelector.tsx rename to frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx index f53fcf54bba7..e29ec25d0d5b 100644 --- a/frontend/src/components/DateTimeSelector.tsx +++ b/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"; diff --git a/frontend/src/components/ShowBreadcrumbs.tsx b/frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx similarity index 100% rename from frontend/src/components/ShowBreadcrumbs.tsx rename to frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx diff --git a/frontend/src/modules/Nav/TopNav/index.tsx b/frontend/src/modules/Nav/TopNav/index.tsx new file mode 100644 index 000000000000..82b64ae66a43 --- /dev/null +++ b/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 ( + + + + + + + + + + ); +}; + +export default TopNav; diff --git a/frontend/src/modules/Nav/styles.ts b/frontend/src/modules/Nav/styles.ts new file mode 100644 index 000000000000..f5878006bf7c --- /dev/null +++ b/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; +`; \ No newline at end of file diff --git a/frontend/src/components/servicemap/ServiceGraph.tsx b/frontend/src/modules/Servicemap/ServiceGraph.tsx similarity index 100% rename from frontend/src/components/servicemap/ServiceGraph.tsx rename to frontend/src/modules/Servicemap/ServiceGraph.tsx diff --git a/frontend/src/components/servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx similarity index 100% rename from frontend/src/components/servicemap/ServiceMap.tsx rename to frontend/src/modules/Servicemap/ServiceMap.tsx diff --git a/frontend/src/components/settings/settingsPage.tsx b/frontend/src/modules/Settings/settingsPage.tsx similarity index 100% rename from frontend/src/components/settings/settingsPage.tsx rename to frontend/src/modules/Settings/settingsPage.tsx diff --git a/frontend/src/components/Test.tsx b/frontend/src/modules/Test.tsx similarity index 100% rename from frontend/src/components/Test.tsx rename to frontend/src/modules/Test.tsx diff --git a/frontend/src/components/traces/FilterStateDisplay.tsx b/frontend/src/modules/Traces/FilterStateDisplay.tsx similarity index 100% rename from frontend/src/components/traces/FilterStateDisplay.tsx rename to frontend/src/modules/Traces/FilterStateDisplay.tsx diff --git a/frontend/src/components/traces/LatencyModalForm.tsx b/frontend/src/modules/Traces/LatencyModalForm.tsx similarity index 100% rename from frontend/src/components/traces/LatencyModalForm.tsx rename to frontend/src/modules/Traces/LatencyModalForm.tsx diff --git a/frontend/src/components/traces/SelectedSpanDetails.tsx b/frontend/src/modules/Traces/SelectedSpanDetails.tsx similarity index 100% rename from frontend/src/components/traces/SelectedSpanDetails.tsx rename to frontend/src/modules/Traces/SelectedSpanDetails.tsx diff --git a/frontend/src/components/traces/TraceCustomVisualizations.tsx b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx similarity index 99% rename from frontend/src/components/traces/TraceCustomVisualizations.tsx rename to frontend/src/modules/Traces/TraceCustomVisualizations.tsx index 4f642a8fb33e..e97b54e150f0 100644 --- a/frontend/src/components/traces/TraceCustomVisualizations.tsx +++ b/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"; diff --git a/frontend/src/components/traces/TraceDetail.tsx b/frontend/src/modules/Traces/TraceDetail.tsx similarity index 100% rename from frontend/src/components/traces/TraceDetail.tsx rename to frontend/src/modules/Traces/TraceDetail.tsx diff --git a/frontend/src/components/traces/TraceFilter.tsx b/frontend/src/modules/Traces/TraceFilter.tsx similarity index 100% rename from frontend/src/components/traces/TraceFilter.tsx rename to frontend/src/modules/Traces/TraceFilter.tsx diff --git a/frontend/src/components/traces/TraceGraph.css b/frontend/src/modules/Traces/TraceGraph.css similarity index 100% rename from frontend/src/components/traces/TraceGraph.css rename to frontend/src/modules/Traces/TraceGraph.css diff --git a/frontend/src/components/traces/TraceGraph.tsx b/frontend/src/modules/Traces/TraceGraph.tsx similarity index 100% rename from frontend/src/components/traces/TraceGraph.tsx rename to frontend/src/modules/Traces/TraceGraph.tsx diff --git a/frontend/src/components/traces/TraceGraphColumn.tsx b/frontend/src/modules/Traces/TraceGraphColumn.tsx similarity index 100% rename from frontend/src/components/traces/TraceGraphColumn.tsx rename to frontend/src/modules/Traces/TraceGraphColumn.tsx diff --git a/frontend/src/components/traces/TraceGraphDef.tsx b/frontend/src/modules/Traces/TraceGraphDef.tsx similarity index 100% rename from frontend/src/components/traces/TraceGraphDef.tsx rename to frontend/src/modules/Traces/TraceGraphDef.tsx diff --git a/frontend/src/components/traces/TraceList.tsx b/frontend/src/modules/Traces/TraceList.tsx similarity index 100% rename from frontend/src/components/traces/TraceList.tsx rename to frontend/src/modules/Traces/TraceList.tsx diff --git a/frontend/src/components/usage/UsageExplorer.tsx b/frontend/src/modules/Usage/UsageExplorer.tsx similarity index 100% rename from frontend/src/components/usage/UsageExplorer.tsx rename to frontend/src/modules/Usage/UsageExplorer.tsx diff --git a/frontend/src/components/usage/UsageExplorerDef.tsx b/frontend/src/modules/Usage/UsageExplorerDef.tsx similarity index 100% rename from frontend/src/components/usage/UsageExplorerDef.tsx rename to frontend/src/modules/Usage/UsageExplorerDef.tsx diff --git a/frontend/src/components/add-instrumentation/instrumentationPage.tsx b/frontend/src/modules/add-instrumentation/instrumentationPage.tsx similarity index 100% rename from frontend/src/components/add-instrumentation/instrumentationPage.tsx rename to frontend/src/modules/add-instrumentation/instrumentationPage.tsx