Commit 298cfd6a authored by Ankit Nayan's avatar Ankit Nayan
Browse files

Merge branch 'pull-52' into refactored

parents 730b67cf c8b92ce4
Showing with 131 additions and 76 deletions
+131 -76
import React, { ReactElement, useState } from "react";
import { Modal, Button } from "antd";
import React, { ReactElement } from "react";
import { Modal } from "antd";
export const CustomModal = ({
title,
......
import ROUTES from "./routes";
export const WITHOUT_SESSION_PATH = ["/redirect"];
export const AUTH0_REDIRECT_PATH = "/redirect";
export const DEFAULT_AUTH0_APP_REDIRECTION_PATH = "/application";
export const DEFAULT_AUTH0_APP_REDIRECTION_PATH = ROUTES.APPLICATION;
export const IS_LOGGED_IN = "isLoggedIn";
\ No newline at end of file
export const SKIP_ONBOARDING = "skip_onboarding";
const ROUTES = {
SIGN_UP: "/signup",
SERVICE_METRICS: "/application/:servicename",
SERVICE_MAP: "/service-map",
TRACES: "/traces",
TRACE_GRAPH: "/traces/:id",
SETTINGS: "/settings",
INSTRUMENTATION: "/add-instrumentation",
USAGE_EXPLORER: "/usage-explorer",
APPLICATION: "/application",
};
export default ROUTES;
import React, { Suspense } from "react";
import { Layout, Spin } from "antd";
import { useThemeSwitcher } from "react-css-theme-switcher";
import ROUTES from "Src/constants/routes";
import { IS_LOGGED_IN } from "Src/constants/auth";
import {
BrowserRouter as Router,
Route,
......@@ -41,27 +42,27 @@ const App = () => {
<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={ROUTES.SIGN_UP} component={Signup} />
<Route path={ROUTES.SERVICE_METRICS} component={ServiceMetrics} />
<Route path={ROUTES.SERVICE_MAP} component={ServiceMap} />
<Route path={ROUTES.TRACES} exact component={TraceDetail} />
<Route path={ROUTES.TRACE_GRAPH} component={TraceGraph} />
<Route path={ROUTES.SETTINGS} exact component={SettingsPage} />
<Route
path="/add-instrumentation"
path={ROUTES.INSTRUMENTATION}
exact
component={IntstrumentationPage}
/>
<Route path="/usage-explorer" component={UsageExplorer} />
<Route path="/application" exact component={ServicesTable} />
<Route path={ROUTES.USAGE_EXPLORER} component={UsageExplorer} />
<Route path={ROUTES.APPLICATION} exact component={ServicesTable} />
<Route
path="/"
exact
render={() => {
return localStorage.getItem("isLoggedIn") === "yes" ? (
<Redirect to="/application" />
return localStorage.getItem(IS_LOGGED_IN) === "yes" ? (
<Redirect to={ROUTES.APPLICATION} />
) : (
<Redirect to="/signup" />
<Redirect to={ROUTES.SIGN_UP} />
);
}}
/>
......
import React, { useState } from "react";
import { Row, Space, Button, Input } from "antd";
import api, { apiV1 } from "../../api";
import ROUTES from "Src/constants/routes";
import { IS_LOGGED_IN } from "Src/constants/auth";
import { withRouter } from "react-router";
import { RouteComponentProps } from "react-router-dom";
......@@ -35,8 +37,6 @@ const Signup = (props: SignUpProps) => {
const handleSubmit = (e: any) => {
e.preventDefault();
console.log("in handle submit");
setState({ ...state, submitted: true });
const payload = {
......@@ -51,8 +51,8 @@ const Signup = (props: SignUpProps) => {
console.log(res.data);
});
localStorage.setItem("isLoggedIn", "yes");
props.history.push("/application");
localStorage.setItem(IS_LOGGED_IN, "yes");
props.history.push(ROUTES.APPLICATION);
};
return (
......
......@@ -4,6 +4,7 @@ import { ChartOptions } from "chart.js";
import { withRouter } from "react-router";
import { RouteComponentProps } from "react-router-dom";
import styled from "styled-components";
import ROUTES from "Src/constants/routes";
import { metricItem } from "../../store/actions/metrics";
......@@ -74,11 +75,11 @@ class ErrorRateChart extends React.Component<ErrorRateChartProps> {
};
gotoTracesHandler = () => {
this.props.history.push("/traces");
this.props.history.push(ROUTES.TRACES);
};
gotoAlertsHandler = () => {
this.props.history.push("/service-map");
this.props.history.push(ROUTES.SERVICE_MAP);
// PNOTE - Keeping service map for now, will replace with alerts when alert page is made
};
......
......@@ -4,6 +4,7 @@ import { ChartOptions } from "chart.js";
import { withRouter } from "react-router";
import { RouteComponentProps } from "react-router-dom";
import styled from "styled-components";
import ROUTES from "Src/constants/routes";
import { metricItem } from "../../store/actions/metrics";
......@@ -80,11 +81,11 @@ class LatencyLineChart extends React.Component<LatencyLineChartProps> {
};
gotoTracesHandler = (xc: any) => {
this.props.history.push("/traces");
this.props.history.push(ROUTES.TRACES);
};
gotoAlertsHandler = () => {
this.props.history.push("/service-map");
this.props.history.push(ROUTES.SERVICE_MAP);
// PNOTE - Keeping service map for now, will replace with alerts when alert page is made
};
......
......@@ -6,6 +6,7 @@ import { RouteComponentProps } from "react-router-dom";
import styled from "styled-components";
import { metricItem } from "../../store/actions/metrics";
import ROUTES from "Src/constants/routes";
const ChartPopUpUnique = styled.div<{
ycoordinate: number;
......@@ -72,11 +73,11 @@ class RequestRateChart extends React.Component<RequestRateChartProps> {
};
gotoTracesHandler = () => {
this.props.history.push("/traces");
this.props.history.push(ROUTES.TRACES);
};
gotoAlertsHandler = () => {
this.props.history.push("/service-map");
this.props.history.push(ROUTES.SERVICE_MAP);
// PNOTE - Keeping service map for now, will replace with alerts when alert page is made
};
......
......@@ -3,6 +3,7 @@ import { Tabs, Card, Row, Col } from "antd";
import { connect } from "react-redux";
import { useParams, RouteComponentProps } from "react-router-dom";
import { withRouter } from "react-router";
import ROUTES from "Src/constants/routes";
import {
getServicesMetrics,
......@@ -50,7 +51,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
urlParams.set(METRICS_PAGE_QUERY_PARAM.service, servicename);
}
props.history.push(`/traces?${urlParams.toString()}`);
props.history.push(`${ROUTES.TRACES}?${urlParams.toString()}`);
};
return (
......
import React, { useEffect, useMemo, useState } from "react";
import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { NavLink } from "react-router-dom";
import { Button, Space, Spin, Table } from "antd";
import styled from "styled-components";
import { connect } from "react-redux";
import { getServicesList, GlobalTime, servicesListItem } from "../../store/actions";
import { SKIP_ONBOARDING } from "Src/constants/onboarding";
import ROUTES from "Src/constants/routes";
import {
getServicesList,
GlobalTime,
servicesListItem,
} from "../../store/actions";
import { StoreState } from "../../store/reducers";
import { CustomModal } from "../../components/Modal";
......@@ -47,7 +53,10 @@ const columns = [
dataIndex: "serviceName",
key: "serviceName",
render: (text: string) => (
<NavLink style={{ textTransform: "capitalize" }} to={"/application/" + text}>
<NavLink
style={{ textTransform: "capitalize" }}
to={ROUTES.APPLICATION + "/" + text}
>
<strong>{text}</strong>
</NavLink>
),
......@@ -90,11 +99,11 @@ const _ServicesTable = (props: ServicesTableProps) => {
!initialDataFetch && props.servicesList.length === 0;
const refetchFromBackend = isEmptyServiceList || errorObject.isError;
const [skipOnboarding, setSkipOnboarding] = useState(
localStorage.getItem("skip_onboarding") === "true",
localStorage.getItem(SKIP_ONBOARDING) === "true",
);
const onContinueClick = () => {
localStorage.setItem("skip_onboarding", "true");
localStorage.setItem(SKIP_ONBOARDING, "true");
setSkipOnboarding(true);
};
......@@ -114,7 +123,7 @@ const _ServicesTable = (props: ServicesTableProps) => {
useEffect(getApiServiceData, [props.globalTime]);
useEffect(() => {
if (props.servicesList.length > 1) {
localStorage.removeItem("skip_onboarding");
localStorage.removeItem(SKIP_ONBOARDING);
}
refetchFromBackend && setTimeout(getApiServiceData, 50000);
......@@ -178,21 +187,22 @@ const _ServicesTable = (props: ServicesTableProps) => {
pagination={false}
/>
{props.servicesList[0] !== undefined && props.servicesList[0].numCalls === 0 && (
<Space
style={{ width: "100%", margin: "40px 0", justifyContent: "center" }}
>
No applications present. Please add instrumentation (follow this
<a
href={"https://signoz.io/docs/instrumentation/overview"}
target={"_blank"}
style={{ marginLeft: 3 }}
{props.servicesList[0] !== undefined &&
props.servicesList[0].numCalls === 0 && (
<Space
style={{ width: "100%", margin: "40px 0", justifyContent: "center" }}
>
guide
</a>
)
</Space>
)}
No applications present. Please add instrumentation (follow this
<a
href={"https://signoz.io/docs/instrumentation/overview"}
target={"_blank"}
style={{ marginLeft: 3 }}
>
guide
</a>
)
</Space>
)}
</Wrapper>
);
};
......
......@@ -3,6 +3,7 @@ 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 ROUTES from "Src/constants/routes";
import {
LineChartOutlined,
......@@ -20,7 +21,7 @@ const SideNav = () => {
const [collapsed, setCollapsed] = useState<boolean>(false);
const history = useHistory();
if (status === "loading" || history.location.pathname === "/signup") {
if (status === "loading" || history.location.pathname === ROUTES.SIGN_UP) {
return null;
}
const toggleTheme = (isChecked: boolean) => {
......@@ -55,20 +56,23 @@ const SideNav = () => {
<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
<Menu.Item key="1" icon={<BarChartOutlined />}>
<NavLink
to="/application"
to={ROUTES.APPLICATION}
style={{ fontSize: 12, textDecoration: "none" }}
>
Metrics
</NavLink>
</Menu.Item>
<Menu.Item key="2" icon={<AlignLeftOutlined />}>
<NavLink to="/traces" style={{ fontSize: 12, textDecoration: "none" }}>
<NavLink
to={ROUTES.TRACES}
style={{ fontSize: 12, textDecoration: "none" }}
>
Traces
</NavLink>
</Menu.Item>
<Menu.Item key="3" icon={<DeploymentUnitOutlined />}>
<NavLink
to="/service-map"
to={ROUTES.SERVICE_MAP}
style={{ fontSize: 12, textDecoration: "none" }}
>
Service Map
......@@ -76,22 +80,22 @@ const SideNav = () => {
</Menu.Item>
<Menu.Item key="4" icon={<LineChartOutlined />}>
<NavLink
to="/usage-explorer"
to={ROUTES.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" }}>
<NavLink
to={ROUTES.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" }}
>
<NavLink to={ROUTES.INSTRUMENTATION} style={{ fontSize: 12, textDecoration: "none" }}>
Add instrumentation
</NavLink>
</Menu.Item>
......
......@@ -4,6 +4,7 @@ import styled from "styled-components";
import { withRouter } from "react-router";
import { RouteComponentProps, useLocation } from "react-router-dom";
import { connect } from "react-redux";
import ROUTES from "Src/constants/routes";
import CustomDateTimeModal from "./CustomDateTimeModal";
import { GlobalTime, updateTimeInterval } from "../../../store/actions";
......@@ -195,7 +196,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
{ value: "1day", label: "Last 1 day" },
{ value: "1week", label: "Last 1 week" },
];
if (props.location.pathname.startsWith("/usage-explorer")) {
if (props.location.pathname.startsWith(ROUTES.USAGE_EXPLORER)) {
return null;
} else {
const inputLabeLToShow =
......
......@@ -2,6 +2,7 @@ import React from "react";
import { Breadcrumb } from "antd";
import { Link, withRouter } from "react-router-dom";
import styled from "styled-components";
import ROUTES from "Src/constants/routes";
const BreadCrumbWrapper = styled.div`
padding-top: 20px;
......@@ -10,12 +11,12 @@ const BreadCrumbWrapper = styled.div`
const breadcrumbNameMap: any = {
// PNOTE - TO DO - Remove any and do typechecking - like https://stackoverflow.com/questions/56568423/typescript-no-index-signature-with-a-parameter-of-type-string-was-found-on-ty
"/application": "Application",
"/traces": "Traces",
"/service-map": "Service Map",
"/usage-explorer": "Usage Explorer",
"/add-instrumentation": "Add instrumentation",
"/settings": "Settings",
[ROUTES.APPLICATION]: "Application",
[ROUTES.TRACES]: "Traces",
[ROUTES.SERVICE_MAP]: "Service Map",
[ROUTES.USAGE_EXPLORER]: "Usage Explorer",
[ROUTES.INSTRUMENTATION]: "Add instrumentation",
[ROUTES.SETTINGS]: "Settings",
};
const ShowBreadcrumbs = withRouter((props) => {
......
import React, { useState } from "react";
import React from "react";
import { Row, Col } from "antd";
import { useHistory } from "react-router-dom";
import ROUTES from "Src/constants/routes";
import DateTimeSelector from "./DateTimeSelector";
import ShowBreadcrumbs from "./ShowBreadcrumbs";
......@@ -8,7 +9,7 @@ import ShowBreadcrumbs from "./ShowBreadcrumbs";
const TopNav = () => {
const history = useHistory();
if (history.location.pathname === "/signup") {
if (history.location.pathname === ROUTES.SIGN_UP) {
return null;
}
return (
......
......@@ -76,12 +76,24 @@ const _TraceGraph = (props: TraceGraphProps) => {
{/*</Col>*/}
<Col md={24} sm={24}>
{/* <Card style={{ width: 640 }}> */}
<Space direction="vertical" size="middle" style={{width: '100%'}}>
<Card bodyStyle={{ padding: 80 }} style={{ height: 320,
}}>
<div style={{display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center'}}>
<div style={{textAlign: "center"}}>Trace Graph component ID is {params.id} </div>
<Button type="primary" onClick={setResetZoom.bind(this, true)} style={{width: 160}}>
<Space direction="vertical" size="middle" style={{ width: "100%" }}>
<Card bodyStyle={{ padding: 80 }} style={{ height: 320 }}>
<div
style={{
display: "flex",
justifyContent: "center",
flexDirection: "column",
alignItems: "center",
}}
>
<div style={{ textAlign: "center" }}>
Trace Graph component ID is {params.id}{" "}
</div>
<Button
type="primary"
onClick={setResetZoom.bind(this, true)}
style={{ width: 160 }}
>
Reset Zoom
</Button>
<div id="chart" style={{ fontSize: 12, marginTop: 20 }}></div>
......
......@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
import { connect } from "react-redux";
import { NavLink } from "react-router-dom";
import { Space, Table } from "antd";
import ROUTES from "Src/constants/routes";
import { traceResponseNew, fetchTraces, pushDStree } from "../../store/actions";
import { StoreState } from "../../store/reducers";
......@@ -73,7 +74,7 @@ const _TraceList = (props: TraceListProps) => {
dataIndex: "traceid",
key: "traceid",
render: (text: string) => (
<NavLink to={"/traces/" + text}>{text.slice(-16)}</NavLink>
<NavLink to={ROUTES.TRACES + "/" + text}>{text.slice(-16)}</NavLink>
),
//only last 16 chars have traceID, druid makes it 32 by adding zeros
},
......
......@@ -4,6 +4,7 @@ import api, { apiV1 } from "../../api";
import { Dispatch } from "redux";
import { GlobalTime } from "./global";
import { toUTCEpoch } from "../../utils/timeUtils";
import ROUTES from "Src/constants/routes";
// PNOTE
// define trace interface - what it should return
......@@ -141,7 +142,7 @@ export const fetchTraces = (globalTime: GlobalTime, filter_params: string) => {
export const fetchTraceItem = (traceID: string) => {
return async (dispatch: Dispatch) => {
let request_string = "/traces/" + traceID;
let request_string = ROUTES.TRACES + "/" + traceID;
const response = await api.get<spansWSameTraceIDResponse>(
apiV1 + request_string,
);
......
import { SKIP_ONBOARDING } from "Src/constants/onboarding";
export const isOnboardingSkipped = () => {
return localStorage.getItem("skip_onboarding") === "true";
return localStorage.getItem(SKIP_ONBOARDING) === "true";
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment