From dbe3488ad148cbca9b79352e1bfaf5e2ac6d149c Mon Sep 17 00:00:00 2001 From: dhrubesh-makeen Date: Sat, 24 Apr 2021 02:29:12 +0530 Subject: [PATCH] components --> modules & refactored TopNav and SideNav --- frontend/src/components/App.tsx | 185 ------------------ .../src/components/{common => }/Modal.tsx | 0 frontend/src/index.tsx | 2 +- frontend/src/modules/App.tsx | 81 ++++++++ .../{components => modules}/AppWrapper.tsx | 6 +- .../{components => modules/Auth}/Signup.tsx | 2 +- .../Metrics}/ErrorRateChart.tsx | 0 .../Metrics}/GenericVisualization.tsx | 0 .../Metrics}/LatencyLineChart.tsx | 0 .../Metrics}/RequestRateChart.tsx | 0 .../Metrics}/ServiceMetrics.tsx | 2 +- .../Metrics}/ServiceMetricsDef.tsx | 0 .../Metrics}/ServicesTable.tsx | 2 +- .../Metrics}/ServicesTableDef.tsx | 0 .../Metrics}/TopEndpointsTable.tsx | 0 frontend/src/modules/Nav/SideNav.tsx | 100 ++++++++++ .../Nav/TopNav}/CustomDateTimeModal.tsx | 2 +- .../Nav/TopNav}/DateTimeSelector.tsx | 6 +- .../Nav/TopNav}/ShowBreadcrumbs.tsx | 0 frontend/src/modules/Nav/TopNav/index.tsx | 21 ++ frontend/src/modules/Nav/styles.ts | 8 + .../Servicemap}/ServiceGraph.tsx | 0 .../Servicemap}/ServiceMap.tsx | 0 .../Settings}/settingsPage.tsx | 0 frontend/src/{components => modules}/Test.tsx | 0 .../Traces}/FilterStateDisplay.tsx | 0 .../Traces}/LatencyModalForm.tsx | 0 .../Traces}/SelectedSpanDetails.tsx | 0 .../Traces}/TraceCustomVisualizations.tsx | 2 +- .../traces => modules/Traces}/TraceDetail.tsx | 0 .../traces => modules/Traces}/TraceFilter.tsx | 0 .../traces => modules/Traces}/TraceGraph.css | 0 .../traces => modules/Traces}/TraceGraph.tsx | 0 .../Traces}/TraceGraphColumn.tsx | 0 .../Traces}/TraceGraphDef.tsx | 0 .../traces => modules/Traces}/TraceList.tsx | 0 .../usage => modules/Usage}/UsageExplorer.tsx | 0 .../Usage}/UsageExplorerDef.tsx | 0 .../instrumentationPage.tsx | 0 39 files changed, 222 insertions(+), 197 deletions(-) delete mode 100644 frontend/src/components/App.tsx rename frontend/src/components/{common => }/Modal.tsx (100%) create mode 100644 frontend/src/modules/App.tsx rename frontend/src/{components => modules}/AppWrapper.tsx (86%) rename frontend/src/{components => modules/Auth}/Signup.tsx (99%) rename frontend/src/{components/metrics => modules/Metrics}/ErrorRateChart.tsx (100%) rename frontend/src/{components/metrics => modules/Metrics}/GenericVisualization.tsx (100%) rename frontend/src/{components/metrics => modules/Metrics}/LatencyLineChart.tsx (100%) rename frontend/src/{components/metrics => modules/Metrics}/RequestRateChart.tsx (100%) rename frontend/src/{components/metrics => modules/Metrics}/ServiceMetrics.tsx (97%) rename frontend/src/{components/metrics => modules/Metrics}/ServiceMetricsDef.tsx (100%) rename frontend/src/{components/metrics => modules/Metrics}/ServicesTable.tsx (98%) rename frontend/src/{components/metrics => modules/Metrics}/ServicesTableDef.tsx (100%) rename frontend/src/{components/metrics => modules/Metrics}/TopEndpointsTable.tsx (100%) create mode 100644 frontend/src/modules/Nav/SideNav.tsx rename frontend/src/{components => modules/Nav/TopNav}/CustomDateTimeModal.tsx (95%) rename frontend/src/{components => modules/Nav/TopNav}/DateTimeSelector.tsx (97%) rename frontend/src/{components => modules/Nav/TopNav}/ShowBreadcrumbs.tsx (100%) create mode 100644 frontend/src/modules/Nav/TopNav/index.tsx create mode 100644 frontend/src/modules/Nav/styles.ts rename frontend/src/{components/servicemap => modules/Servicemap}/ServiceGraph.tsx (100%) rename frontend/src/{components/servicemap => modules/Servicemap}/ServiceMap.tsx (100%) rename frontend/src/{components/settings => modules/Settings}/settingsPage.tsx (100%) rename frontend/src/{components => modules}/Test.tsx (100%) rename frontend/src/{components/traces => modules/Traces}/FilterStateDisplay.tsx (100%) rename frontend/src/{components/traces => modules/Traces}/LatencyModalForm.tsx (100%) rename frontend/src/{components/traces => modules/Traces}/SelectedSpanDetails.tsx (100%) rename frontend/src/{components/traces => modules/Traces}/TraceCustomVisualizations.tsx (99%) rename frontend/src/{components/traces => modules/Traces}/TraceDetail.tsx (100%) rename frontend/src/{components/traces => modules/Traces}/TraceFilter.tsx (100%) rename frontend/src/{components/traces => modules/Traces}/TraceGraph.css (100%) rename frontend/src/{components/traces => modules/Traces}/TraceGraph.tsx (100%) rename frontend/src/{components/traces => modules/Traces}/TraceGraphColumn.tsx (100%) rename frontend/src/{components/traces => modules/Traces}/TraceGraphDef.tsx (100%) rename frontend/src/{components/traces => modules/Traces}/TraceList.tsx (100%) rename frontend/src/{components/usage => modules/Usage}/UsageExplorer.tsx (100%) rename frontend/src/{components/usage => modules/Usage}/UsageExplorerDef.tsx (100%) rename frontend/src/{components => modules}/add-instrumentation/instrumentationPage.tsx (100%) diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx deleted file mode 100644 index 66b613674c..0000000000 --- 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 - - - - - - - - - - - - - - - - - {/* */} - - }> - - - - - - - - - - - - - -
- SigNoz Inc. ©2020{" "} -
- - - - ); -}; - -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 7e5997f08d..bb4230356d 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 0000000000..d2828d9f10 --- /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 ( + + + + + + + + {/* */} + + }> + + + + + + + + + + + + + +
+ SigNoz Inc. ©2020{" "} +
+ + + + ); +}; + +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 d72332f361..ca75872572 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 6e90ceb6fe..c31bd84148 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 cf0209dd45..b37276e51e 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 8422995169..bf398cc8b6 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 0000000000..2fbafa4015 --- /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 1fa6010dd6..c8fe90346d 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 f53fcf54bb..e29ec25d0d 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 0000000000..82b64ae66a --- /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 0000000000..f5878006bf --- /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 4f642a8fb3..e97b54e150 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