diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx index b68dda6812..e5b69ac77d 100644 --- a/frontend/src/components/Modal.tsx +++ b/frontend/src/components/Modal.tsx @@ -1,5 +1,5 @@ -import React, { ReactElement, useState } from "react"; -import { Modal, Button } from "antd"; +import React, { ReactElement } from "react"; +import { Modal } from "antd"; export const CustomModal = ({ title, diff --git a/frontend/src/constants/app.ts b/frontend/src/constants/app.ts index b3aa3904f5..9efa8d568e 100644 --- a/frontend/src/constants/app.ts +++ b/frontend/src/constants/app.ts @@ -1,5 +1,7 @@ +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; diff --git a/frontend/src/constants/auth.ts b/frontend/src/constants/auth.ts new file mode 100644 index 0000000000..c4b137b23e --- /dev/null +++ b/frontend/src/constants/auth.ts @@ -0,0 +1 @@ +export const IS_LOGGED_IN = "isLoggedIn"; \ No newline at end of file diff --git a/frontend/src/constants/onboarding.ts b/frontend/src/constants/onboarding.ts new file mode 100644 index 0000000000..6bf90cb01f --- /dev/null +++ b/frontend/src/constants/onboarding.ts @@ -0,0 +1 @@ +export const SKIP_ONBOARDING = "skip_onboarding"; diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts new file mode 100644 index 0000000000..9df35bbdb3 --- /dev/null +++ b/frontend/src/constants/routes.ts @@ -0,0 +1,13 @@ +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; diff --git a/frontend/src/modules/AppWrapper.tsx b/frontend/src/modules/AppWrapper.tsx index 935b7dc010..716345594b 100644 --- a/frontend/src/modules/AppWrapper.tsx +++ b/frontend/src/modules/AppWrapper.tsx @@ -1,7 +1,8 @@ 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 = () => { }> - - - - - - + + + + + + - - + + { - return localStorage.getItem("isLoggedIn") === "yes" ? ( - + return localStorage.getItem(IS_LOGGED_IN) === "yes" ? ( + ) : ( - + ); }} /> diff --git a/frontend/src/modules/Auth/Signup.tsx b/frontend/src/modules/Auth/Signup.tsx index c31bd84148..3557b0a1b6 100644 --- a/frontend/src/modules/Auth/Signup.tsx +++ b/frontend/src/modules/Auth/Signup.tsx @@ -1,6 +1,8 @@ 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 ( diff --git a/frontend/src/modules/Metrics/ErrorRateChart.tsx b/frontend/src/modules/Metrics/ErrorRateChart.tsx index 72d5670efb..12d381b8a5 100644 --- a/frontend/src/modules/Metrics/ErrorRateChart.tsx +++ b/frontend/src/modules/Metrics/ErrorRateChart.tsx @@ -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 { }; 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 }; diff --git a/frontend/src/modules/Metrics/LatencyLineChart.tsx b/frontend/src/modules/Metrics/LatencyLineChart.tsx index 18fd095df7..2a9c1bebc8 100644 --- a/frontend/src/modules/Metrics/LatencyLineChart.tsx +++ b/frontend/src/modules/Metrics/LatencyLineChart.tsx @@ -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 { }; 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 }; diff --git a/frontend/src/modules/Metrics/RequestRateChart.tsx b/frontend/src/modules/Metrics/RequestRateChart.tsx index c2d78ee6c5..81c74c0bb5 100644 --- a/frontend/src/modules/Metrics/RequestRateChart.tsx +++ b/frontend/src/modules/Metrics/RequestRateChart.tsx @@ -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 { }; 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 }; diff --git a/frontend/src/modules/Metrics/ServiceMetrics.tsx b/frontend/src/modules/Metrics/ServiceMetrics.tsx index 51dee6cf23..3430b52365 100644 --- a/frontend/src/modules/Metrics/ServiceMetrics.tsx +++ b/frontend/src/modules/Metrics/ServiceMetrics.tsx @@ -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 ( diff --git a/frontend/src/modules/Metrics/ServicesTable.tsx b/frontend/src/modules/Metrics/ServicesTable.tsx index bf398cc8b6..30df4fdf84 100644 --- a/frontend/src/modules/Metrics/ServicesTable.tsx +++ b/frontend/src/modules/Metrics/ServicesTable.tsx @@ -1,11 +1,17 @@ -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 { SKIP_ONBOARDING } from "Src/constants/onboarding"; +import ROUTES from "Src/constants/routes"; -import { getServicesList, GlobalTime, servicesListItem } from "../../store/actions"; +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) => ( - + {text} ), @@ -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 && ( - - No applications present. Please add instrumentation (follow this - - guide - - ) - - )} + No applications present. Please add instrumentation (follow this + + guide + + ) + + )} ); }; diff --git a/frontend/src/modules/Nav/SideNav.tsx b/frontend/src/modules/Nav/SideNav.tsx index d3f67284d1..ff5c97338b 100644 --- a/frontend/src/modules/Nav/SideNav.tsx +++ b/frontend/src/modules/Nav/SideNav.tsx @@ -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(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 = () => { }> Metrics }> - + Traces }> Service Map @@ -76,22 +80,22 @@ const SideNav = () => { }> Usage Explorer }> - + Settings }> - + Add instrumentation diff --git a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx index ab169f46e8..c3b890673b 100644 --- a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx +++ b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx @@ -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 = diff --git a/frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx b/frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx index b76af21eec..5c1c73c51f 100644 --- a/frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx +++ b/frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx @@ -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) => { diff --git a/frontend/src/modules/Nav/TopNav/index.tsx b/frontend/src/modules/Nav/TopNav/index.tsx index 20be5c10cc..e8987e2385 100644 --- a/frontend/src/modules/Nav/TopNav/index.tsx +++ b/frontend/src/modules/Nav/TopNav/index.tsx @@ -1,6 +1,7 @@ -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 ( diff --git a/frontend/src/modules/Traces/TraceGraph.tsx b/frontend/src/modules/Traces/TraceGraph.tsx index a1a65c09eb..102bb1a587 100644 --- a/frontend/src/modules/Traces/TraceGraph.tsx +++ b/frontend/src/modules/Traces/TraceGraph.tsx @@ -76,12 +76,24 @@ const _TraceGraph = (props: TraceGraphProps) => { {/**/} {/* */} - - -
-
Trace Graph component ID is {params.id}
-
diff --git a/frontend/src/modules/Traces/TraceList.tsx b/frontend/src/modules/Traces/TraceList.tsx index c75d872022..78aa97e6dd 100644 --- a/frontend/src/modules/Traces/TraceList.tsx +++ b/frontend/src/modules/Traces/TraceList.tsx @@ -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) => ( - {text.slice(-16)} + {text.slice(-16)} ), //only last 16 chars have traceID, druid makes it 32 by adding zeros }, diff --git a/frontend/src/store/actions/traces.ts b/frontend/src/store/actions/traces.ts index 2f8f5ae2d1..88721e56d9 100644 --- a/frontend/src/store/actions/traces.ts +++ b/frontend/src/store/actions/traces.ts @@ -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( apiV1 + request_string, ); diff --git a/frontend/src/utils/app.ts b/frontend/src/utils/app.ts index 21ae10c624..a84159006b 100644 --- a/frontend/src/utils/app.ts +++ b/frontend/src/utils/app.ts @@ -1,3 +1,5 @@ +import { SKIP_ONBOARDING } from "Src/constants/onboarding"; + export const isOnboardingSkipped = () => { - return localStorage.getItem("skip_onboarding") === "true"; + return localStorage.getItem(SKIP_ONBOARDING) === "true"; };