diff --git a/frontend/src/api/apiV1.ts b/frontend/src/api/apiV1.ts new file mode 100644 index 0000000000..2cd9b83295 --- /dev/null +++ b/frontend/src/api/apiV1.ts @@ -0,0 +1,3 @@ +const apiV1 = "/api/v1/"; + +export default apiV1; diff --git a/frontend/src/api/graphQuery.js b/frontend/src/api/graphQuery.js deleted file mode 100644 index e679ca505d..0000000000 --- a/frontend/src/api/graphQuery.js +++ /dev/null @@ -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`, -}); diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts new file mode 100644 index 0000000000..c580024bcb --- /dev/null +++ b/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 }; diff --git a/frontend/src/api/metricsAPI.js b/frontend/src/api/metricsAPI.js deleted file mode 100644 index f82bf8f357..0000000000 --- a/frontend/src/api/metricsAPI.js +++ /dev/null @@ -1,6 +0,0 @@ -import axios from "axios"; -import { ENVIRONMENT } from "Src/constants/env"; - -export default axios.create({ - baseURL: `${ENVIRONMENT.baseURL}/api/v1/`, -}); diff --git a/frontend/src/api/submitForm.js b/frontend/src/api/submitForm.js deleted file mode 100644 index 216569dad5..0000000000 --- a/frontend/src/api/submitForm.js +++ /dev/null @@ -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 diff --git a/frontend/src/api/tracesAPI.js b/frontend/src/api/tracesAPI.js deleted file mode 100644 index 9c11771e6b..0000000000 --- a/frontend/src/api/tracesAPI.js +++ /dev/null @@ -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/`, -}); 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 - - - - - - - - - - - - - - - - - {/* */} - - }> - - - - - - - - - - - - - - - - - - ); -}; - -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 629469570f..bb4230356d 100644 --- a/frontend/src/index.tsx +++ b/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( 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 88% rename from frontend/src/components/Signup.tsx rename to frontend/src/modules/Auth/Signup.tsx index c8e7d6593e..c31bd84148 100644 --- a/frontend/src/components/Signup.tsx +++ b/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,14 +16,10 @@ 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) */ - if (name === "firstName") { + if (name === "firstName") { setFormState({ ...formState, firstName: { ...formState.firstName, value: target[valueAttr] }, @@ -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) => { /> - -
{ />
-
+