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

rerfactoring

Browse Source
This commit is contained in:
Ankit Nayan 2021-04-30 23:00:15 +05:30
commit 9008815790
61 changed files with 322 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/api/apiV1.ts Normal file
View File

@ -0,0 +1,3 @@
const apiV1 = "/api/v1/";
export default apiV1;

8
frontend/src/api/graphQuery.js
View File

@ -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`,
});

9
frontend/src/api/index.ts Normal file
View File

@ -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 };

6
frontend/src/api/metricsAPI.js
View File

@ -1,6 +0,0 @@
import axios from "axios";
import { ENVIRONMENT } from "Src/constants/env";
export default axios.create({
baseURL: `${ENVIRONMENT.baseURL}/api/v1/`,
});

15
frontend/src/api/submitForm.js
View File

@ -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

12
frontend/src/api/tracesAPI.js
View File

@ -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/`,
});

185
frontend/src/components/App.tsx
View File

@ -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;

0
frontend/src/components/common/Modal.tsx → frontend/src/components/Modal.tsx
View File

20
frontend/src/index.tsx
View File

@ -1,26 +1,12 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import { ThemeSwitcherProvider } from "react-css-theme-switcher"; import { ThemeSwitcherProvider } from "react-css-theme-switcher";
import thunk from "redux-thunk"; import store from "Src/store";
// import { NavLink, BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import AppWrapper from "Src/modules/AppWrapper";
import { Auth0Provider } from "@auth0/auth0-react";
import AppWrapper from "Src/components/AppWrapper";
import "Src/assets/index.css"; import "Src/assets/index.css";
import { reducers } from "Src/reducers";
import { BrowserRouter as Router } from "react-router-dom"; import { BrowserRouter as Router } from "react-router-dom";
import { AUTH0_CLIENT_ID, AUTH0_DOMAIN } from "./constants/env"; import themes from "Src/themes";
// 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`,
};
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>

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

@ -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;

6
frontend/src/components/AppWrapper.tsx → frontend/src/modules/AppWrapper.tsx
View File

@ -1,8 +1,8 @@
import React, { Suspense, useState } from "react"; import React, { Suspense } from "react";
import { Spin } from "antd"; import { Spin } from "antd";
import { Route, Switch, Redirect } from "react-router-dom"; import { Route, Switch, Redirect } from "react-router-dom";
import Signup from "./Signup"; import Signup from "./Auth/Signup";
const App = React.lazy(() => import("Src/components/App")); const App = React.lazy(() => import("Src/modules/App"));
const AppWrapper = () => { const AppWrapper = () => {
return ( return (

21
frontend/src/components/Signup.tsx → frontend/src/modules/Auth/Signup.tsx
View File

@ -1,6 +1,7 @@
import React, { useState, useRef, Suspense } from "react"; import React, { useState } from "react";
import { Row, Space, Button, Input, Checkbox } from "antd"; import { Row, Space, Button, Input } from "antd";
import submitForm from "../api/submitForm"; import api, { apiV1 } from "../../api";
import { withRouter } from "react-router"; import { withRouter } from "react-router";
import { RouteComponentProps } from "react-router-dom"; import { RouteComponentProps } from "react-router-dom";
@ -15,14 +16,10 @@ const Signup = (props: SignUpProps) => {
password: { value: "", valid: true }, password: { value: "", valid: true },
emailOptIn: { value: 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") => { const updateForm = (name: any, target: any, valueAttr = "value") => {
/* Validate password (if applicable) */ /* Validate password (if applicable) */
if (name === "firstName") { if (name === "firstName") {
setFormState({ setFormState({
...formState, ...formState,
firstName: { ...formState.firstName, value: target[valueAttr] }, firstName: { ...formState.firstName, value: target[valueAttr] },
@ -49,9 +46,7 @@ const Signup = (props: SignUpProps) => {
let texttolog = JSON.stringify(payload); let texttolog = JSON.stringify(payload);
api.post(apiV1 + "/user?email=" + texttolog).then((res) => {
submitForm.post("user?email=" + texttolog).then((res) => {
console.log(res); console.log(res);
console.log(res.data); console.log(res.data);
}); });
@ -118,8 +113,6 @@ const Signup = (props: SignUpProps) => {
/> />
</div> </div>
<div className="input-set"> <div className="input-set">
<label htmlFor="signupFirstName">First Name</label> <label htmlFor="signupFirstName">First Name</label>
<Input <Input
@ -133,7 +126,7 @@ const Signup = (props: SignUpProps) => {
/> />
</div> </div>
<div className="text-center space-top" style={{marginTop: 12}}> <div className="text-center space-top" style={{ marginTop: 12 }}>
<Button <Button
type="primary" type="primary"
htmlType="submit" htmlType="submit"

2
frontend/src/components/metrics/ErrorRateChart.tsx → frontend/src/modules/Metrics/ErrorRateChart.tsx
View File

@ -5,7 +5,7 @@ import { withRouter } from "react-router";
import { RouteComponentProps } from "react-router-dom"; import { RouteComponentProps } from "react-router-dom";
import styled from "styled-components"; import styled from "styled-components";
import { metricItem } from "../../actions/metrics"; import { metricItem } from "../../store/actions/metrics";
const ChartPopUpUnique = styled.div<{ const ChartPopUpUnique = styled.div<{
ycoordinate: number; ycoordinate: number;

2
frontend/src/components/metrics/GenericVisualization.tsx → frontend/src/modules/Metrics/GenericVisualization.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import { Bar, Line as ChartJSLine } from "react-chartjs-2"; import { Bar, Line as ChartJSLine } from "react-chartjs-2";
import styled from "styled-components"; import styled from "styled-components";
import { customMetricsItem } from "../../actions/metrics"; import { customMetricsItem } from "../../store/actions/metrics";
const GenVisualizationWrapper = styled.div` const GenVisualizationWrapper = styled.div`
height: 160px; height: 160px;

2
frontend/src/components/metrics/LatencyLineChart.tsx → frontend/src/modules/Metrics/LatencyLineChart.tsx
View File

@ -5,7 +5,7 @@ import { withRouter } from "react-router";
import { RouteComponentProps } from "react-router-dom"; import { RouteComponentProps } from "react-router-dom";
import styled from "styled-components"; import styled from "styled-components";
import { metricItem } from "../../actions/metrics"; import { metricItem } from "../../store/actions/metrics";
const ChartPopUpUnique = styled.div<{ const ChartPopUpUnique = styled.div<{
ycoordinate: number; ycoordinate: number;

2
frontend/src/components/metrics/RequestRateChart.tsx → frontend/src/modules/Metrics/RequestRateChart.tsx
View File

@ -5,7 +5,7 @@ import { withRouter } from "react-router";
import { RouteComponentProps } from "react-router-dom"; import { RouteComponentProps } from "react-router-dom";
import styled from "styled-components"; import styled from "styled-components";
import { metricItem } from "../../actions/metrics"; import { metricItem } from "../../store/actions/metrics";
const ChartPopUpUnique = styled.div<{ const ChartPopUpUnique = styled.div<{
ycoordinate: number; ycoordinate: number;

4
frontend/src/components/metrics/ServiceMetrics.tsx → frontend/src/modules/Metrics/ServiceMetrics.tsx
View File

@ -11,8 +11,8 @@ import {
topEndpointListItem, topEndpointListItem,
GlobalTime, GlobalTime,
updateTimeInterval, updateTimeInterval,
} from "../../actions"; } from "../../store/actions";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import LatencyLineChart from "./LatencyLineChart"; import LatencyLineChart from "./LatencyLineChart";
import RequestRateChart from "./RequestRateChart"; import RequestRateChart from "./RequestRateChart";
import ErrorRateChart from "./ErrorRateChart"; import ErrorRateChart from "./ErrorRateChart";

0
frontend/src/components/metrics/ServiceMetricsDef.tsx → frontend/src/modules/Metrics/ServiceMetricsDef.tsx
View File

6
frontend/src/components/metrics/ServicesTable.tsx → frontend/src/modules/Metrics/ServicesTable.tsx
View File

@ -5,9 +5,9 @@ import { Button, Space, Spin, Table } from "antd";
import styled from "styled-components"; import styled from "styled-components";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { getServicesList, GlobalTime, servicesListItem } from "../../actions"; import { getServicesList, GlobalTime, servicesListItem } from "../../store/actions";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import { CustomModal } from "../common/Modal"; import { CustomModal } from "../../components/Modal";
interface ServicesTableProps { interface ServicesTableProps {
servicesList: servicesListItem[]; servicesList: servicesListItem[];

0
frontend/src/components/metrics/ServicesTableDef.tsx → frontend/src/modules/Metrics/ServicesTableDef.tsx
View File

2
frontend/src/components/metrics/TopEndpointsTable.tsx → frontend/src/modules/Metrics/TopEndpointsTable.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { Table } from "antd"; import { Table } from "antd";
import styled from "styled-components"; import styled from "styled-components";
import { topEndpointListItem } from "../../actions/metrics"; import { topEndpointListItem } from "../../store/actions/metrics";
const Wrapper = styled.div` const Wrapper = styled.div`
padding-top: 10px; padding-top: 10px;

100
frontend/src/modules/Nav/SideNav.tsx Normal file
View File

@ -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;

2
frontend/src/components/CustomDateTimeModal.tsx → frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Modal, DatePicker } from "antd"; import { Modal, DatePicker } from "antd";
import { DateTimeRangeType } from "../actions"; import { DateTimeRangeType } from "../../../store/actions";
import { Moment } from "moment"; import { Moment } from "moment";
import moment from "moment"; import moment from "moment";

6
frontend/src/components/DateTimeSelector.tsx → frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx
View File

@ -6,11 +6,11 @@ import { RouteComponentProps, useLocation } from "react-router-dom";
import { connect } from "react-redux"; import { connect } from "react-redux";
import CustomDateTimeModal from "./CustomDateTimeModal"; import CustomDateTimeModal from "./CustomDateTimeModal";
import { GlobalTime, updateTimeInterval } from "../actions"; import { GlobalTime, updateTimeInterval } from "../../../store/actions";
import { StoreState } from "../reducers"; import { StoreState } from "../../../store/reducers";
import FormItem from "antd/lib/form/FormItem"; import FormItem from "antd/lib/form/FormItem";
import { DateTimeRangeType } from "../actions"; import { DateTimeRangeType } from "../../../store/actions";
import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
import { LOCAL_STORAGE } from "Src/constants/localStorage"; import { LOCAL_STORAGE } from "Src/constants/localStorage";
import moment from "moment"; import moment from "moment";

0
frontend/src/components/ShowBreadcrumbs.tsx → frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx
View File

21
frontend/src/modules/Nav/TopNav/index.tsx Normal file
View File

@ -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;

8
frontend/src/modules/Nav/styles.ts Normal file
View File

@ -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;
`;

0
frontend/src/components/servicemap/ServiceGraph.tsx → frontend/src/modules/Servicemap/ServiceGraph.tsx
View File

0
frontend/src/components/servicemap/ServiceMap.tsx → frontend/src/modules/Servicemap/ServiceMap.tsx
View File

2
frontend/src/components/settings/settingsPage.tsx → frontend/src/modules/Settings/settingsPage.tsx
View File

@ -7,7 +7,7 @@ import {
EyeTwoTone, EyeTwoTone,
EyeInvisibleOutlined, EyeInvisibleOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import { Alert } from "antd"; import { Alert } from "antd";
interface SettingsPageProps {} interface SettingsPageProps {}

0
frontend/src/components/Test.tsx → frontend/src/modules/Test.tsx
View File

6
frontend/src/components/traces/FilterStateDisplay.tsx → frontend/src/modules/Traces/FilterStateDisplay.tsx
View File

@ -1,9 +1,11 @@
import React from "react"; import React from "react";
import { Card, Tag as AntTag } from "antd"; import { Card, Tag as AntTag } from "antd";
import { connect } from "react-redux"; import { connect } from "react-redux";
import styled from "styled-components"; import styled from "styled-components";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import { TagItem, TraceFilters, updateTraceFilters } from "../../actions"; import { TagItem, TraceFilters, updateTraceFilters } from "../../store/actions";
const Tag = styled(AntTag)` const Tag = styled(AntTag)`
.anticon { .anticon {

0
frontend/src/components/traces/LatencyModalForm.tsx → frontend/src/modules/Traces/LatencyModalForm.tsx
View File

0
frontend/src/components/traces/SelectedSpanDetails.tsx → frontend/src/modules/Traces/SelectedSpanDetails.tsx
View File

6
frontend/src/components/traces/TraceCustomVisualizations.tsx → frontend/src/modules/Traces/TraceCustomVisualizations.tsx
View File

@ -1,15 +1,15 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import GenericVisualizations from "../metrics/GenericVisualization"; import GenericVisualizations from "../Metrics/GenericVisualization";
import { Select, Card, Space, Form } from "antd"; import { Select, Card, Space, Form } from "antd";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import { import {
customMetricsItem, customMetricsItem,
getFilteredTraceMetrics, getFilteredTraceMetrics,
GlobalTime, GlobalTime,
TraceFilters, TraceFilters,
} from "../../actions"; } from "../../store/actions";
const { Option } = Select; const { Option } = Select;

0
frontend/src/components/traces/TraceDetail.tsx → frontend/src/modules/Traces/TraceDetail.tsx
View File

22
frontend/src/components/traces/TraceFilter.tsx → frontend/src/modules/Traces/TraceFilter.tsx
View File

@ -9,13 +9,13 @@ import {
fetchTraces, fetchTraces,
TraceFilters, TraceFilters,
GlobalTime, GlobalTime,
} from "../../actions"; } from "../../store/actions";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import LatencyModalForm from "./LatencyModalForm"; import LatencyModalForm from "./LatencyModalForm";
import { FilterStateDisplay } from "./FilterStateDisplay"; import { FilterStateDisplay } from "./FilterStateDisplay";
import FormItem from "antd/lib/form/FormItem"; import FormItem from "antd/lib/form/FormItem";
import metricsAPI from "../../api/metricsAPI"; import api, { apiV1 } from "../../api";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
@ -56,8 +56,8 @@ const _TraceFilter = (props: TraceFilterProps) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
metricsAPI api
.get<string[]>("services/list") .get<string[]>(`${apiV1}/services/list`)
.then((response) => { .then((response) => {
setServiceList(response.data); setServiceList(response.data);
}) })
@ -154,15 +154,17 @@ const _TraceFilter = (props: TraceFilterProps) => {
function handleChangeService(value: string) { function handleChangeService(value: string) {
let service_request = "/service/" + value + "/operations"; let service_request = "/service/" + value + "/operations";
metricsAPI.get<string[]>(service_request).then((response) => { api.get<string[]>(apiV1 + service_request).then((response) => {
// form_basefilter.resetFields(['operation',]) // form_basefilter.resetFields(['operation',])
setOperationsList(response.data); setOperationsList(response.data);
}); });
let tagkeyoptions_request = "tags?service=" + value; let tagkeyoptions_request = "/tags?service=" + value;
metricsAPI.get<TagKeyOptionItem[]>(tagkeyoptions_request).then((response) => { api
setTagKeyOptions(response.data); .get<TagKeyOptionItem[]>(apiV1 + tagkeyoptions_request)
}); .then((response) => {
setTagKeyOptions(response.data);
});
props.updateTraceFilters({ ...props.traceFilters, service: value }); props.updateTraceFilters({ ...props.traceFilters, service: value });
} }

0
frontend/src/components/traces/TraceGraph.css → frontend/src/modules/Traces/TraceGraph.css
View File

4
frontend/src/components/traces/TraceGraph.tsx → frontend/src/modules/Traces/TraceGraph.tsx
View File

@ -11,8 +11,8 @@ import * as d3Tip from "d3-tip";
import "./TraceGraph.css"; import "./TraceGraph.css";
import { spanToTreeUtil } from "../../utils/spanToTree"; import { spanToTreeUtil } from "../../utils/spanToTree";
import { fetchTraceItem, spansWSameTraceIDResponse } from "../../actions"; import { fetchTraceItem, spansWSameTraceIDResponse } from "../../store/actions";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import { TraceGraphColumn } from "./TraceGraphColumn"; import { TraceGraphColumn } from "./TraceGraphColumn";
import SelectedSpanDetails from "./SelectedSpanDetails"; import SelectedSpanDetails from "./SelectedSpanDetails";

4
frontend/src/components/traces/TraceGraphColumn.tsx → frontend/src/modules/Traces/TraceGraphColumn.tsx
View File

@ -2,8 +2,8 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Table } from "antd"; import { Table } from "antd";
import { traceResponseNew, pushDStree } from "../../actions"; import { traceResponseNew, pushDStree } from "../../store/actions";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
interface TraceGraphColumnProps { interface TraceGraphColumnProps {
traces: traceResponseNew; traces: traceResponseNew;

0
frontend/src/components/traces/TraceGraphDef.tsx → frontend/src/modules/Traces/TraceGraphDef.tsx
View File

4
frontend/src/components/traces/TraceList.tsx → frontend/src/modules/Traces/TraceList.tsx
View File

@ -3,8 +3,8 @@ import { connect } from "react-redux";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { Space, Table } from "antd"; import { Space, Table } from "antd";
import { traceResponseNew, fetchTraces, pushDStree } from "../../actions"; import { traceResponseNew, fetchTraces, pushDStree } from "../../store/actions";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import { isOnboardingSkipped } from "../../utils/app"; import { isOnboardingSkipped } from "../../utils/app";
import moment from "moment"; import moment from "moment";
import styled from "styled-components"; import styled from "styled-components";

4
frontend/src/components/usage/UsageExplorer.tsx → frontend/src/modules/Usage/UsageExplorer.tsx
View File

@ -9,8 +9,8 @@ import {
GlobalTime, GlobalTime,
servicesListItem, servicesListItem,
usageDataItem, usageDataItem,
} from "../../actions"; } from "../../store/actions";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import moment from "moment"; import moment from "moment";
import { isOnboardingSkipped } from "../../utils/app"; import { isOnboardingSkipped } from "../../utils/app";
const { Option } = Select; const { Option } = Select;

0
frontend/src/components/usage/UsageExplorerDef.tsx → frontend/src/modules/Usage/UsageExplorerDef.tsx
View File

2
frontend/src/components/add-instrumentation/instrumentationPage.tsx → frontend/src/modules/add-instrumentation/instrumentationPage.tsx
View File

@ -7,7 +7,7 @@ import {
EyeTwoTone, EyeTwoTone,
EyeInvisibleOutlined, EyeInvisibleOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { StoreState } from "../../reducers"; import { StoreState } from "../../store/reducers";
import { Alert } from "antd"; import { Alert } from "antd";

0
frontend/src/actions/global.ts → frontend/src/store/actions/global.ts
View File

0
frontend/src/actions/index.ts → frontend/src/store/actions/index.ts
View File

23
frontend/src/actions/metrics.ts → frontend/src/store/actions/metrics.ts
View File

@ -1,9 +1,10 @@
import { Dispatch } from "redux"; import { Dispatch } from "redux";
import metricsAPI from "../api/metricsAPI"; import api, { apiV1 } from "../../api";
import { GlobalTime } from "./global"; import { GlobalTime } from "./global";
import { ActionTypes } from "./types"; import { ActionTypes } from "./types";
import { Token } from "../utils/token"; import { Token } from "../../utils/token";
import { toUTCEpoch } from "../utils/timeUtils"; import { toUTCEpoch } from "../../utils/timeUtils";
export interface servicesListItem { export interface servicesListItem {
serviceName: string; serviceName: string;
@ -62,9 +63,9 @@ export interface getFilteredTraceMetricsAction {
export const getServicesList = (globalTime: GlobalTime) => { export const getServicesList = (globalTime: GlobalTime) => {
return async (dispatch: Dispatch) => { return async (dispatch: Dispatch) => {
let request_string = let request_string =
"services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime; "/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
const response = await metricsAPI.get<servicesListItem[]>(request_string); const response = await api.get<servicesListItem[]>(apiV1 + request_string);
dispatch<getServicesListAction>({ dispatch<getServicesListAction>({
type: ActionTypes.getServicesList, type: ActionTypes.getServicesList,
@ -80,14 +81,14 @@ export const getServicesMetrics = (
) => { ) => {
return async (dispatch: Dispatch) => { return async (dispatch: Dispatch) => {
let request_string = let request_string =
"service/overview?service=" + "/service/overview?service=" +
serviceName + serviceName +
"&start=" + "&start=" +
globalTime.minTime + globalTime.minTime +
"&end=" + "&end=" +
globalTime.maxTime + globalTime.maxTime +
"&step=60"; "&step=60";
const response = await metricsAPI.get<metricItem[]>(request_string); const response = await api.get<metricItem[]>(apiV1 + request_string);
dispatch<getServiceMetricsAction>({ dispatch<getServiceMetricsAction>({
type: ActionTypes.getServiceMetrics, type: ActionTypes.getServiceMetrics,
@ -103,13 +104,13 @@ export const getTopEndpoints = (
) => { ) => {
return async (dispatch: Dispatch) => { return async (dispatch: Dispatch) => {
let request_string = let request_string =
"service/top_endpoints?service=" + "/service/top_endpoints?service=" +
serviceName + serviceName +
"&start=" + "&start=" +
globalTime.minTime + globalTime.minTime +
"&end=" + "&end=" +
globalTime.maxTime; globalTime.maxTime;
const response = await metricsAPI.get<topEndpointListItem[]>(request_string); const response = await api.get<topEndpointListItem[]>(apiV1 + request_string);
dispatch<getTopEndpointsAction>({ dispatch<getTopEndpointsAction>({
type: ActionTypes.getTopEndpoints, type: ActionTypes.getTopEndpoints,
@ -125,13 +126,13 @@ export const getFilteredTraceMetrics = (
) => { ) => {
return async (dispatch: Dispatch) => { return async (dispatch: Dispatch) => {
let request_string = let request_string =
"spans/aggregates?start=" + "/spans/aggregates?start=" +
toUTCEpoch(globalTime.minTime) + toUTCEpoch(globalTime.minTime) +
"&end=" + "&end=" +
toUTCEpoch(globalTime.maxTime) + toUTCEpoch(globalTime.maxTime) +
"&" + "&" +
filter_params; filter_params;
const response = await metricsAPI.get<customMetricsItem[]>(request_string); const response = await api.get<customMetricsItem[]>(apiV1 + request_string);
dispatch<getFilteredTraceMetricsAction>({ dispatch<getFilteredTraceMetricsAction>({
type: ActionTypes.getFilteredTraceMetrics, type: ActionTypes.getFilteredTraceMetrics,

0
frontend/src/actions/traceFilters.ts → frontend/src/store/actions/traceFilters.ts
View File

15
frontend/src/actions/traces.ts → frontend/src/store/actions/traces.ts
View File

@ -1,8 +1,9 @@
import { ActionTypes } from "./types"; import { ActionTypes } from "./types";
import tracesAPI from "../api/tracesAPI"; import api, { apiV1 } from "../../api";
import { Dispatch } from "redux"; import { Dispatch } from "redux";
import { GlobalTime } from "./global"; import { GlobalTime } from "./global";
import { toUTCEpoch } from "../utils/timeUtils"; import { toUTCEpoch } from "../../utils/timeUtils";
// PNOTE // PNOTE
// define trace interface - what it should return // define trace interface - what it should return
@ -121,13 +122,13 @@ export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
return async (dispatch: Dispatch) => { return async (dispatch: Dispatch) => {
if (globalTime) { if (globalTime) {
let request_string = let request_string =
"spans?limit=100&lookback=2d&start=" + "/spans?limit=100&lookback=2d&start=" +
toUTCEpoch(globalTime.minTime) + toUTCEpoch(globalTime.minTime) +
"&end=" + "&end=" +
toUTCEpoch(globalTime.maxTime) + toUTCEpoch(globalTime.maxTime) +
"&" + "&" +
filter_params; filter_params;
const response = await tracesAPI.get<traceResponseNew>(request_string); const response = await api.get<traceResponseNew>(apiV1 + request_string);
dispatch<FetchTracesAction>({ dispatch<FetchTracesAction>({
type: ActionTypes.fetchTraces, type: ActionTypes.fetchTraces,
@ -140,9 +141,9 @@ export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
export const fetchTraceItem = (traceID: string) => { export const fetchTraceItem = (traceID: string) => {
return async (dispatch: Dispatch) => { return async (dispatch: Dispatch) => {
let request_string = "traces/" + traceID; let request_string = "/traces/" + traceID;
const response = await tracesAPI.get<spansWSameTraceIDResponse>( const response = await api.get<spansWSameTraceIDResponse>(
request_string, apiV1 + request_string,
); );
dispatch<FetchTraceItemAction>({ dispatch<FetchTraceItemAction>({

0
frontend/src/actions/types.ts → frontend/src/store/actions/types.ts
View File

9
frontend/src/actions/usage.ts → frontend/src/store/actions/usage.ts
View File

@ -1,8 +1,9 @@
import { Dispatch } from "redux"; import { Dispatch } from "redux";
import metricsAPI from "../api/metricsAPI"; import api, { apiV1 } from "../../api";
import { ActionTypes } from "./types"; import { ActionTypes } from "./types";
import { GlobalTime } from "./global"; import { GlobalTime } from "./global";
import { toUTCEpoch } from "../utils/timeUtils"; import { toUTCEpoch } from "../../utils/timeUtils";
export interface usageDataItem { export interface usageDataItem {
timestamp: number; timestamp: number;
@ -21,11 +22,11 @@ export const getUsageData = (
service: string, service: string,
) => { ) => {
return async (dispatch: Dispatch) => { return async (dispatch: Dispatch) => {
let request_string = `usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch( let request_string = `/usage?start=${toUTCEpoch(minTime)}&end=${toUTCEpoch(
maxTime, maxTime,
)}&step=${step}&service=${service ? service : ""}`; )}&step=${step}&service=${service ? service : ""}`;
//Step can only be multiple of 3600 //Step can only be multiple of 3600
const response = await metricsAPI.get<usageDataItem[]>(request_string); const response = await api.get<usageDataItem[]>(apiV1 + request_string);
dispatch<getUsageDataAction>({ dispatch<getUsageDataAction>({
type: ActionTypes.getUsageData, type: ActionTypes.getUsageData,

9
frontend/src/store/index.ts Normal file
View File

@ -0,0 +1,9 @@
import { createStore, applyMiddleware, compose } from "redux";
import reducers from "./reducers";
import thunk from "redux-thunk";
const composeEnhancers =
(window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));
export default store;

0
frontend/src/reducers/global.ts → frontend/src/store/reducers/global.ts
View File

4
frontend/src/reducers/index.ts → frontend/src/store/reducers/index.ts
View File

@ -34,7 +34,7 @@ export interface StoreState {
filteredTraceMetrics: customMetricsItem[]; filteredTraceMetrics: customMetricsItem[];
} }
export const reducers = combineReducers<StoreState>({ const reducers = combineReducers<StoreState>({
traceFilters: traceFiltersReducer, traceFilters: traceFiltersReducer,
inputTag: inputsReducer, inputTag: inputsReducer,
traces: tracesReducer, traces: tracesReducer,
@ -46,3 +46,5 @@ export const reducers = combineReducers<StoreState>({
globalTime: updateGlobalTimeReducer, globalTime: updateGlobalTimeReducer,
filteredTraceMetrics: filteredTraceMetricsReducer, filteredTraceMetrics: filteredTraceMetricsReducer,
}); });
export default reducers;

0
frontend/src/reducers/metrics.ts → frontend/src/store/reducers/metrics.ts
View File

0
frontend/src/reducers/traceFilters.ts → frontend/src/store/reducers/traceFilters.ts
View File

0
frontend/src/reducers/traces.ts → frontend/src/store/reducers/traces.ts
View File

0
frontend/src/reducers/usage.ts → frontend/src/store/reducers/usage.ts
View File

6
frontend/src/themes/index.ts Normal file
View File

@ -0,0 +1,6 @@
const themes = {
dark: `/dark-theme.css`,
light: `/light-theme.css`,
};
export default themes;

2
frontend/src/utils/spanToTree.ts
View File

@ -1,4 +1,4 @@
import { pushDStree, span, RefItem } from "../actions"; import { pushDStree, span, RefItem } from "../store/actions";
// PNOTE - should the data be taken from redux or only through props? - Directly as arguments // PNOTE - should the data be taken from redux or only through props? - Directly as arguments
export const spanToTreeUtil = (spanlist: span[]): pushDStree => { export const spanToTreeUtil = (spanlist: span[]): pushDStree => {