GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-10 16:58:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

moves routing to a single place

Browse Source
This commit is contained in:
dhrubesh-makeen 2021-04-24 03:51:31 +05:30
parent 515766452d
commit 55e86ead02
5 changed files with 112 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/modules/App.tsx
View File

@ -1,81 +0,0 @@
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;

104
frontend/src/modules/AppWrapper.tsx
View File

@ -1,36 +1,80 @@
import React, { Suspense } from "react";
import { Spin } from "antd";
import { Route, Switch, Redirect } from "react-router-dom";
import Signup from "./Auth/Signup";
const App = React.lazy(() => import("Src/modules/App"));
import { Layout, Spin } from "antd";
import { useThemeSwitcher } from "react-css-theme-switcher";
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
} from "react-router-dom";
import SideNav from "./Nav/SideNav";
import TopNav from "./Nav/TopNav";
import {
ServiceMetrics,
ServiceMap,
TraceDetail,
TraceGraph,
UsageExplorer,
ServicesTable,
Signup,
SettingsPage,
IntstrumentationPage,
} from "Src/pages";
const { Content, Footer } = Layout;
const App = () => {
const { status } = useThemeSwitcher();
if (status === "loading") {
return null;
}
const AppWrapper = () => {
return (
<Suspense fallback={<Spin size="large" />}>
<Switch>
<Route path="/application" exact component={App} />
<Route path="/application/:servicename" component={App} />
<Route path="/service-map" component={App} />
<Route path="/traces" exact component={App} />
<Route path="/traces/:id" component={App} />
<Route path="/usage-explorer" component={App} />
<Route path="/settings" component={App} />
<Route path="/add-instrumentation" component={App} />
<Route path="/signup" component={Signup} />
<Route
path="/"
exact
render={() => {
return localStorage.getItem("isLoggedIn") === "yes" ? (
<Redirect to="/application" />
) : (
<Redirect to="/signup" />
);
}}
/>
</Switch>
</Suspense>
<Router basename="/">
<Layout style={{ minHeight: "100vh" }}>
<SideNav />
<Layout className="site-layout">
<Content style={{ margin: "0 16px" }}>
<TopNav />
<Suspense fallback={<Spin size="large" />}>
<Switch>
<Route path="/signup" component={Signup} />
<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="/application" exact component={ServicesTable} />
<Route
path="/"
exact
render={() => {
return localStorage.getItem("isLoggedIn") === "yes" ? (
<Redirect to="/application" />
) : (
<Redirect to="/signup" />
);
}}
/>
</Switch>
</Suspense>
</Content>
<Footer style={{ textAlign: "center", fontSize: 10 }}>
SigNoz Inc. ©2020{" "}
</Footer>
</Layout>
</Layout>
</Router>
);
};
export default AppWrapper;
export default App;

5
frontend/src/modules/Nav/SideNav.tsx
View File

@ -2,6 +2,7 @@ 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 { useHistory } from "react-router-dom";
import {
LineChartOutlined,
@ -17,7 +18,9 @@ const { Sider } = Layout;
const SideNav = () => {
const { switcher, currentTheme, status, themes } = useThemeSwitcher();
const [collapsed, setCollapsed] = useState<boolean>(false);
if (status === "loading") {
const history = useHistory();
if (status === "loading" || history.location.pathname === "/signup") {
return null;
}
const toggleTheme = (isChecked: boolean) => {

6
frontend/src/modules/Nav/TopNav/index.tsx
View File

@ -1,10 +1,16 @@
import React, { useState } from "react";
import { Row, Col } from "antd";
import { useHistory } from "react-router-dom";
import DateTimeSelector from "./DateTimeSelector";
import ShowBreadcrumbs from "./ShowBreadcrumbs";
const TopNav = () => {
const history = useHistory();
if (history.location.pathname === "/signup") {
return null;
}
return (
<Row>
<Col span={16}>

28
frontend/src/pages.ts Normal file
View File

@ -0,0 +1,28 @@
import React from "react";
export const ServiceMetrics = React.lazy(
() => import("Src/modules/metrics/ServiceMetricsDef"),
);
export const ServiceMap = React.lazy(
() => import("Src/modules/Servicemap/ServiceMap"),
);
export const TraceDetail = React.lazy(
() => import("Src/modules/Traces/TraceDetail"),
);
export const TraceGraph = React.lazy(
() => import("Src/modules/Traces/TraceGraphDef"),
);
export const UsageExplorer = React.lazy(
() => import("Src/modules/Usage/UsageExplorerDef"),
);
export const ServicesTable = React.lazy(
() => import("Src/modules/metrics/ServicesTableDef"),
);
export const Signup = React.lazy(() => import("Src/modules/Auth/Signup"));
export const SettingsPage = React.lazy(
() => import("Src/modules/Settings/settingsPage"),
);
export const IntstrumentationPage = React.lazy(
() => import("Src/modules/add-instrumentation/instrumentationPage"),
);