diff --git a/frontend/package.json b/frontend/package.json index 3d49b2d4c8..e2c8bbc3a0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -102,6 +102,7 @@ "styled-components": "^5.2.1", "terser-webpack-plugin": "4.2.3", "ts-pnp": "1.2.0", + "tsconfig-paths-webpack-plugin": "^3.5.1", "typescript": "^4.0.5", "url-loader": "4.1.1", "web-vitals": "^0.2.4", diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts index c580024bcb..6363a6aead 100644 --- a/frontend/src/api/index.ts +++ b/frontend/src/api/index.ts @@ -1,5 +1,5 @@ import axios, { AxiosRequestConfig } from "axios"; -import { ENVIRONMENT } from "Src/constants/env"; +import { ENVIRONMENT } from "constants/env"; import apiV1 from "./apiV1"; export default axios.create({ diff --git a/frontend/src/components/NotFound/index.tsx b/frontend/src/components/NotFound/index.tsx index a2fc5dcc35..6b0e6c68ba 100644 --- a/frontend/src/components/NotFound/index.tsx +++ b/frontend/src/components/NotFound/index.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Button, Text, TextContainer, Container } from "./styles"; -import NotFoundImage from "Src/assets/NotFound"; -import ROUTES from "Src/constants/routes"; +import NotFoundImage from "assets/NotFound"; +import ROUTES from "constants/routes"; const NotFound = (): JSX.Element => { return ( diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index bb4230356d..e1d50d7d3f 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -2,11 +2,11 @@ import React from "react"; import ReactDOM from "react-dom"; import { Provider } from "react-redux"; import { ThemeSwitcherProvider } from "react-css-theme-switcher"; -import store from "Src/store"; -import AppWrapper from "Src/modules/AppWrapper"; -import "Src/assets/index.css"; +import store from "store"; +import AppWrapper from "modules/AppWrapper"; +import "assets/index.css"; import { BrowserRouter as Router } from "react-router-dom"; -import themes from "Src/themes"; +import themes from "themes"; ReactDOM.render( diff --git a/frontend/src/modules/AppWrapper.tsx b/frontend/src/modules/AppWrapper.tsx index 25dd23ed2b..b3e1a2b2dc 100644 --- a/frontend/src/modules/AppWrapper.tsx +++ b/frontend/src/modules/AppWrapper.tsx @@ -1,9 +1,9 @@ import React, { Suspense } from "react"; import { useThemeSwitcher } from "react-css-theme-switcher"; -import ROUTES from "Src/constants/routes"; -import { IS_LOGGED_IN } from "Src/constants/auth"; +import ROUTES from "constants/routes"; +import { IS_LOGGED_IN } from "constants/auth"; import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom"; -import { CustomSpinner } from "./../components/Spiner"; +import { CustomSpinner } from "components/Spiner"; import BaseLayout from "./BaseLayout"; import { @@ -16,9 +16,9 @@ import { Signup, SettingsPage, InstrumentationPage, -} from "Src/pages"; +} from "pages"; import { RouteProvider } from "./RouteProvider"; -import NotFound from "Src/components/NotFound"; +import NotFound from "components/NotFound"; const App = () => { const { status } = useThemeSwitcher(); diff --git a/frontend/src/modules/Auth/Signup.tsx b/frontend/src/modules/Auth/Signup.tsx index 3557b0a1b6..899895b932 100644 --- a/frontend/src/modules/Auth/Signup.tsx +++ b/frontend/src/modules/Auth/Signup.tsx @@ -1,8 +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 api, { apiV1 } from "api"; +import ROUTES from "constants/routes"; +import { IS_LOGGED_IN } from "constants/auth"; import { withRouter } from "react-router"; import { RouteComponentProps } from "react-router-dom"; diff --git a/frontend/src/modules/Metrics/ErrorRateChart.tsx b/frontend/src/modules/Metrics/ErrorRateChart.tsx index fa119ea0d8..dab22cb6b1 100644 --- a/frontend/src/modules/Metrics/ErrorRateChart.tsx +++ b/frontend/src/modules/Metrics/ErrorRateChart.tsx @@ -4,9 +4,9 @@ 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 ROUTES from "constants/routes"; -import { metricItem } from "../../store/actions/MetricsActions"; +import { metricItem } from "store/actions/MetricsActions"; const ChartPopUpUnique = styled.div<{ ycoordinate: number; diff --git a/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx b/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx index b7cc2999ee..4620ceadf0 100644 --- a/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx +++ b/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx @@ -3,7 +3,7 @@ import { Line as ChartJSLine } from "react-chartjs-2"; import { withRouter } from "react-router"; import { RouteComponentProps } from "react-router-dom"; import { getOptions, borderColors } from "./graphConfig"; -import { externalMetricsItem } from "../../../store/actions/MetricsActions"; +import { externalMetricsItem } from "store/actions/MetricsActions"; import { uniqBy, filter } from "lodash"; const theme = "dark"; diff --git a/frontend/src/modules/Metrics/GenericVisualization.tsx b/frontend/src/modules/Metrics/GenericVisualization.tsx index c35e63679e..6712bbff85 100644 --- a/frontend/src/modules/Metrics/GenericVisualization.tsx +++ b/frontend/src/modules/Metrics/GenericVisualization.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Bar, Line as ChartJSLine } from "react-chartjs-2"; import styled from "styled-components"; -import { customMetricsItem } from "../../store/actions/MetricsActions"; +import { customMetricsItem } from "store/actions/MetricsActions"; const GenVisualizationWrapper = styled.div` height: 160px; @@ -15,10 +15,16 @@ interface GenericVisualizationsProps { const GenericVisualizations = (props: GenericVisualizationsProps) => { const data = { - labels: (props.data !== undefined && props.data !== null) && props.data.map((s) => new Date(s.timestamp / 1000000)), + labels: + props.data !== undefined && + props.data !== null && + props.data.map((s) => new Date(s.timestamp / 1000000)), datasets: [ { - data: (props.data !== undefined && props.data !== null) && props.data.map((s) => s.value), + data: + props.data !== undefined && + props.data !== null && + props.data.map((s) => s.value), borderColor: "rgba(250,174,50,1)", // for line chart backgroundColor: props.chartType === "bar" ? "rgba(250,174,50,1)" : "", // for bar chart, don't assign backgroundcolor if its not a bar chart, may be relevant for area graph though }, diff --git a/frontend/src/modules/Metrics/LatencyLineChart.tsx b/frontend/src/modules/Metrics/LatencyLineChart.tsx index eb41a28056..be41f109dc 100644 --- a/frontend/src/modules/Metrics/LatencyLineChart.tsx +++ b/frontend/src/modules/Metrics/LatencyLineChart.tsx @@ -4,7 +4,7 @@ import { ChartOptions } from "chart.js"; import { withRouter } from "react-router"; import { RouteComponentProps } from "react-router-dom"; import styled from "styled-components"; -import { metricItem } from "../../store/actions/MetricsActions"; +import { metricItem } from "store/actions/MetricsActions"; const ChartPopUpUnique = styled.div<{ ycoordinate: number; diff --git a/frontend/src/modules/Metrics/RequestRateChart.tsx b/frontend/src/modules/Metrics/RequestRateChart.tsx index ed61189fef..70889b4228 100644 --- a/frontend/src/modules/Metrics/RequestRateChart.tsx +++ b/frontend/src/modules/Metrics/RequestRateChart.tsx @@ -5,8 +5,8 @@ import { withRouter } from "react-router"; import { RouteComponentProps } from "react-router-dom"; import styled from "styled-components"; -import { metricItem } from "../../store/actions/MetricsActions"; -import ROUTES from "Src/constants/routes"; +import { metricItem } from "store/actions/MetricsActions"; +import ROUTES from "constants/routes"; const ChartPopUpUnique = styled.div<{ ycoordinate: number; @@ -208,7 +208,7 @@ class RequestRateChart extends React.Component { return (
{this.GraphTracePopUp()} -
Request per sec
+
Request per sec
{ }, [props.servicesList, errorObject]); if (!initialDataFetch) { - return ( - - ); + return ; } if (refetchFromBackend && !skipOnboarding) { @@ -152,7 +150,7 @@ const _ServicesTable = (props: ServicesTableProps) => { allowFullScreen >
- +
No instrumentation data. diff --git a/frontend/src/modules/Metrics/TopEndpointsTable.tsx b/frontend/src/modules/Metrics/TopEndpointsTable.tsx index 999a2a7260..fd041c2a08 100644 --- a/frontend/src/modules/Metrics/TopEndpointsTable.tsx +++ b/frontend/src/modules/Metrics/TopEndpointsTable.tsx @@ -3,10 +3,10 @@ import { Table, Button, Tooltip } from "antd"; import { connect } from "react-redux"; import styled from "styled-components"; import { useHistory, useParams } from "react-router-dom"; -import { topEndpointListItem } from "../../store/actions/MetricsActions"; -import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; -import { GlobalTime } from "Src/store/actions"; -import { StoreState } from "Src/store/reducers"; +import { topEndpointListItem } from "store/actions/MetricsActions"; +import { METRICS_PAGE_QUERY_PARAM } from "constants/query"; +import { GlobalTime } from "store/actions"; +import { StoreState } from "store/reducers"; import "./TopEndpointsTable.css"; const Wrapper = styled.div` diff --git a/frontend/src/modules/Nav/SideNav.tsx b/frontend/src/modules/Nav/SideNav.tsx index 483d5c32ea..2247ba7e2c 100644 --- a/frontend/src/modules/Nav/SideNav.tsx +++ b/frontend/src/modules/Nav/SideNav.tsx @@ -3,7 +3,7 @@ import { Layout, Menu, Switch as ToggleButton } from "antd"; import { NavLink } from "react-router-dom"; import { useThemeSwitcher } from "react-css-theme-switcher"; import { useLocation } from "react-router-dom"; -import ROUTES from "Src/constants/routes"; +import ROUTES from "constants/routes"; import { LineChartOutlined, diff --git a/frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx b/frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx index c8fe90346d..72d5ee708d 100644 --- a/frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx +++ b/frontend/src/modules/Nav/TopNav/CustomDateTimeModal.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { Modal, DatePicker } from "antd"; -import { DateTimeRangeType } from "../../../store/actions"; +import { DateTimeRangeType } from "store/actions"; import { Moment } from "moment"; import moment from "moment"; diff --git a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx index 03758461d4..ad78f906cd 100644 --- a/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx +++ b/frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx @@ -6,19 +6,19 @@ import { withRouter } from "react-router"; import { getLocalStorageRouteKey } from "./utils"; import { RouteComponentProps, useLocation } from "react-router-dom"; import { connect } from "react-redux"; -import ROUTES from "Src/constants/routes"; +import ROUTES from "constants/routes"; import CustomDateTimeModal from "./CustomDateTimeModal"; -import { GlobalTime, updateTimeInterval } from "../../../store/actions"; -import { StoreState } from "../../../store/reducers"; +import { GlobalTime, updateTimeInterval } from "store/actions"; +import { StoreState } from "store/reducers"; import FormItem from "antd/lib/form/FormItem"; import { Options, ServiceMapOptions, DefaultOptionsBasedOnRoute, } from "./config"; -import { DateTimeRangeType } from "../../../store/actions"; -import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; -import { LOCAL_STORAGE } from "Src/constants/localStorage"; +import { DateTimeRangeType } from "store/actions"; +import { METRICS_PAGE_QUERY_PARAM } from "constants/query"; +import { LOCAL_STORAGE } from "constants/localStorage"; import moment from "moment"; const { Option } = DefaultSelect; diff --git a/frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx b/frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx index 5c1c73c51f..13eada4049 100644 --- a/frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx +++ b/frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx @@ -2,7 +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"; +import ROUTES from "constants/routes"; const BreadCrumbWrapper = styled.div` padding-top: 20px; diff --git a/frontend/src/modules/Nav/TopNav/config.ts b/frontend/src/modules/Nav/TopNav/config.ts index 1cad032461..53a8c93e16 100644 --- a/frontend/src/modules/Nav/TopNav/config.ts +++ b/frontend/src/modules/Nav/TopNav/config.ts @@ -1,4 +1,4 @@ -import ROUTES from "Src/constants/routes"; +import ROUTES from "constants/routes"; export const Options = [ { value: "5min", label: "Last 5 min" }, diff --git a/frontend/src/modules/Nav/TopNav/index.tsx b/frontend/src/modules/Nav/TopNav/index.tsx index e8987e2385..b43a58607b 100644 --- a/frontend/src/modules/Nav/TopNav/index.tsx +++ b/frontend/src/modules/Nav/TopNav/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Row, Col } from "antd"; import { useHistory } from "react-router-dom"; -import ROUTES from "Src/constants/routes"; +import ROUTES from "constants/routes"; import DateTimeSelector from "./DateTimeSelector"; import ShowBreadcrumbs from "./ShowBreadcrumbs"; diff --git a/frontend/src/modules/Nav/TopNav/utils.ts b/frontend/src/modules/Nav/TopNav/utils.ts index e46503312e..14bc2c8c85 100644 --- a/frontend/src/modules/Nav/TopNav/utils.ts +++ b/frontend/src/modules/Nav/TopNav/utils.ts @@ -1,4 +1,4 @@ -import ROUTES from "Src/constants/routes"; +import ROUTES from "constants/routes"; export const getLocalStorageRouteKey = (pathName: string) => { let localStorageKey = ""; diff --git a/frontend/src/modules/RouteProvider.tsx b/frontend/src/modules/RouteProvider.tsx index 6b1ebbf786..45c14aa9e7 100644 --- a/frontend/src/modules/RouteProvider.tsx +++ b/frontend/src/modules/RouteProvider.tsx @@ -1,5 +1,5 @@ import React, { useContext, createContext, ReactNode, Dispatch } from "react"; -import ROUTES from "Src/constants/routes"; +import ROUTES from "constants/routes"; type State = { [key: string]: { diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index 404b12e70e..b16d24a513 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -6,15 +6,15 @@ import { serviceMapStore, getServiceMapItems, getDetailedServiceMapItems, -} from "Src/store/actions"; +} from "store/actions"; import styled from "styled-components"; -import { StoreState } from "../../store/reducers"; +import { StoreState } from "store/reducers"; import { getZoomPx, getGraphData, getTooltip, transformLabel } from "./utils"; import SelectService from "./SelectService"; import { ForceGraph2D } from "react-force-graph"; -import { useRoute } from "../RouteProvider"; -import { CustomSpinner } from "../../components/Spiner"; +import { useRoute } from "modules/RouteProvider"; +import { CustomSpinner } from "components/Spiner"; const Container = styled.div` .force-graph-container .graph-tooltip { @@ -78,7 +78,7 @@ const ServiceMap = (props: ServiceMapProps) => { fgRef.current && fgRef.current.d3Force("charge").strength(-400); }); if (!serviceMap.items.length || !serviceMap.services.length) { - return ; + return ; } const zoomToService = (value: string) => { diff --git a/frontend/src/modules/Settings/settingsPage.tsx b/frontend/src/modules/Settings/settingsPage.tsx index a514e6051c..ae42e0cecb 100644 --- a/frontend/src/modules/Settings/settingsPage.tsx +++ b/frontend/src/modules/Settings/settingsPage.tsx @@ -1,13 +1,7 @@ import React, { useEffect, useState } from "react"; import { Form, Input, Space } from "antd"; import { connect } from "react-redux"; -import { Tooltip } from "antd"; -import { - InfoCircleOutlined, - EyeTwoTone, - EyeInvisibleOutlined, -} from "@ant-design/icons"; -import { StoreState } from "../../store/reducers"; +import { StoreState } from "store/reducers"; import { Alert } from "antd"; interface SettingsPageProps {} diff --git a/frontend/src/modules/Traces/FilterStateDisplay.tsx b/frontend/src/modules/Traces/FilterStateDisplay.tsx index 7f05a32704..7018f968d6 100644 --- a/frontend/src/modules/Traces/FilterStateDisplay.tsx +++ b/frontend/src/modules/Traces/FilterStateDisplay.tsx @@ -3,9 +3,8 @@ import { Card, Tag as AntTag } from "antd"; import { connect } from "react-redux"; import styled from "styled-components"; -import { StoreState } from "../../store/reducers"; -import { TagItem, TraceFilters, updateTraceFilters } from "../../store/actions"; - +import { StoreState } from "store/reducers"; +import { TagItem, TraceFilters, updateTraceFilters } from "store/actions"; const Tag = styled(AntTag)` .anticon { diff --git a/frontend/src/modules/Traces/SelectedSpanDetails.tsx b/frontend/src/modules/Traces/SelectedSpanDetails.tsx index f470eb5631..b15bb3f427 100644 --- a/frontend/src/modules/Traces/SelectedSpanDetails.tsx +++ b/frontend/src/modules/Traces/SelectedSpanDetails.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Card, Space, Tabs, Typography } from "antd"; import styled from "styled-components"; -import { pushDStree } from "Src/store/actions"; +import { pushDStree } from "store/actions"; const { TabPane } = Tabs; diff --git a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx index 710d508d76..ed02c69b96 100644 --- a/frontend/src/modules/Traces/TraceCustomVisualizations.tsx +++ b/frontend/src/modules/Traces/TraceCustomVisualizations.tsx @@ -1,12 +1,12 @@ import React, { useState, useEffect } from "react"; -import GenericVisualizations from "../Metrics/GenericVisualization"; +import GenericVisualizations from "modules/Metrics/GenericVisualization"; import { Select, Card, Space, Form } from "antd"; import { connect } from "react-redux"; -import { StoreState } from "../../store/reducers"; -import { GlobalTime, TraceFilters } from "../../store/actions"; -import { useRoute } from "../RouteProvider"; -import { getFilteredTraceMetrics } from "../../store/actions/MetricsActions"; -import { customMetricsItem } from "../../store/actions/MetricsActions"; +import { StoreState } from "store/reducers"; +import { GlobalTime, TraceFilters } from "store/actions"; +import { useRoute } from "modules/RouteProvider"; +import { getFilteredTraceMetrics } from "store/actions/MetricsActions"; +import { customMetricsItem } from "store/actions/MetricsActions"; const { Option } = Select; const entity = [ diff --git a/frontend/src/modules/Traces/TraceFilter.tsx b/frontend/src/modules/Traces/TraceFilter.tsx index 446ddf4754..8c61944cec 100644 --- a/frontend/src/modules/Traces/TraceFilter.tsx +++ b/frontend/src/modules/Traces/TraceFilter.tsx @@ -9,16 +9,16 @@ import { fetchTraces, TraceFilters, GlobalTime, -} from "../../store/actions"; -import { StoreState } from "../../store/reducers"; +} from "store/actions"; +import { StoreState } from "store/reducers"; import LatencyModalForm from "./LatencyModalForm"; import { FilterStateDisplay } from "./FilterStateDisplay"; import FormItem from "antd/lib/form/FormItem"; -import api, { apiV1 } from "../../api"; +import api, { apiV1 } from "api"; import { useLocation } from "react-router-dom"; -import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; -import { useRoute } from "../RouteProvider"; +import { METRICS_PAGE_QUERY_PARAM } from "constants/query"; +import { useRoute } from "modules/RouteProvider"; const { Option } = Select; @@ -56,13 +56,13 @@ const _TraceFilter = (props: TraceFilterProps) => { const spanKindList: ISpanKind[] = [ { label: "SERVER", - value: "2" + value: "2", }, { label: "CLIENT", - value: "3" - } - ] + value: "3", + }, + ]; useEffect(() => { handleApplyFilterForm({ @@ -70,7 +70,7 @@ const _TraceFilter = (props: TraceFilterProps) => { tags: [], operation: "", latency: { min: "", max: "" }, - kind: "" + kind: "", }); }, []); @@ -93,7 +93,7 @@ const _TraceFilter = (props: TraceFilterProps) => { ...props.traceFilters, operation: operationName, service: serviceName, - kind: "" + kind: "", }); populateData(serviceName); } else if (serviceName && errorTag) { @@ -107,7 +107,7 @@ const _TraceFilter = (props: TraceFilterProps) => { operator: "equals", }, ], - kind: "" + kind: "", }); } else { if (operationName) { @@ -282,7 +282,7 @@ const _TraceFilter = (props: TraceFilterProps) => { operator: values.operator, }, ], - kind: props.traceFilters.kind + kind: props.traceFilters.kind, }); } else { props.updateTraceFilters({ @@ -296,7 +296,7 @@ const _TraceFilter = (props: TraceFilterProps) => { operator: values.operator, }, ], - kind: props.traceFilters.kind + kind: props.traceFilters.kind, }); } @@ -361,7 +361,7 @@ const _TraceFilter = (props: TraceFilterProps) => { max: "", min: "", }, - kind: values.kind + kind: values.kind, }); }; @@ -372,14 +372,14 @@ const _TraceFilter = (props: TraceFilterProps) => { operation: "", tags: [], latency: { min: "", max: "" }, - kind: "" + kind: "", }); }; }, []); - const handleChangeSpanKind = (value:string = '') => { + const handleChangeSpanKind = (value: string = "") => { props.updateTraceFilters({ ...props.traceFilters, kind: value }); - } + }; return (
@@ -437,8 +437,10 @@ const _TraceFilter = (props: TraceFilterProps) => { placeholder="Select Span Kind" allowClear > - {spanKindList.map(spanKind => ( - + {spanKindList.map((spanKind) => ( + ))} diff --git a/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx b/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx index b79bc11938..2820c54300 100644 --- a/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx +++ b/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx @@ -3,8 +3,8 @@ import { Table, Progress, Tabs, Button, Row, Col } from "antd"; import "./TraceGanttChart.css"; import { max, isEmpty, has } from "lodash-es"; import styled from "styled-components"; -import { pushDStree } from "Src/store/actions"; -import traverseTreeData from "Src/modules/Traces/TraceGanttChart/TraceGanttChartHelpers"; +import { pushDStree } from "store/actions"; +import traverseTreeData from "modules/Traces/TraceGanttChart/TraceGanttChartHelpers"; const { TabPane } = Tabs; diff --git a/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChartHelpers.ts b/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChartHelpers.ts index 534de8b8c0..8f5e1e5e8d 100644 --- a/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChartHelpers.ts +++ b/frontend/src/modules/Traces/TraceGanttChart/TraceGanttChartHelpers.ts @@ -1,5 +1,5 @@ import { isEmpty } from "lodash-es"; -import { pushDStree } from "Src/store/actions"; +import { pushDStree } from "store/actions"; interface itemProps { treeData: pushDStree[]; diff --git a/frontend/src/modules/Traces/TraceGraph.tsx b/frontend/src/modules/Traces/TraceGraph.tsx index ab7501bc74..433aeaf191 100644 --- a/frontend/src/modules/Traces/TraceGraph.tsx +++ b/frontend/src/modules/Traces/TraceGraph.tsx @@ -6,13 +6,13 @@ import { Card, Row, Col, Space, Affix } from "antd"; import * as d3 from "d3"; import * as d3Tip from "d3-tip"; import "./TraceGraph.css"; -import { spanToTreeUtil } from "Src/utils/spanToTree"; +import { spanToTreeUtil } from "utils/spanToTree"; import { fetchTraceItem, pushDStree, spansWSameTraceIDResponse, -} from "../../store/actions"; -import { StoreState } from "Src/store/reducers"; +} from "store/actions"; +import { StoreState } from "store/reducers"; import SelectedSpanDetails from "./SelectedSpanDetails"; import TraceGanttChart from "./TraceGanttChart"; import styled from "styled-components"; @@ -72,14 +72,22 @@ const _TraceGraph = (props: TraceGraphProps) => { setSortedTreeData(sortedData?.[0]); getSpanInfo(sortedData?.[0], spanId); // This is causing element to change ref. Can use both useRef or this approach. - d3.select("#chart").datum(tree).call(chart).sort(item=>item.startTime); + d3 + .select("#chart") + .datum(tree) + .call(chart) + .sort((item) => item.startTime); } }, [props.traceItem]); // if this monitoring of props.traceItem.data is removed then zoom on click doesn't work // Doesn't work if only do initial check, works if monitor an element - as it may get updated in sometime useEffect(() => { - if(!isEmpty(sortedTreeData) && sortedTreeData?.id !== "empty" && isEmpty(clickedSpanTags)) { + if ( + !isEmpty(sortedTreeData) && + sortedTreeData?.id !== "empty" && + isEmpty(clickedSpanTags) + ) { setClickedSpanTags(sortedTreeData?.[0]); } }, [sortedTreeData]); @@ -87,7 +95,11 @@ const _TraceGraph = (props: TraceGraphProps) => { useEffect(() => { if (resetZoom) { // This is causing element to change ref. Can use both useRef or this approach. - d3.select("#chart").datum(tree).call(chart).sort(item=>item.startTime); + d3 + .select("#chart") + .datum(tree) + .call(chart) + .sort((item) => item.startTime); setResetZoom(false); } }, [resetZoom]); diff --git a/frontend/src/modules/Traces/TraceGraphColumn.tsx b/frontend/src/modules/Traces/TraceGraphColumn.tsx index 48e36d0156..089c9bb4ab 100644 --- a/frontend/src/modules/Traces/TraceGraphColumn.tsx +++ b/frontend/src/modules/Traces/TraceGraphColumn.tsx @@ -2,8 +2,8 @@ import React from "react"; import { connect } from "react-redux"; import { Table } from "antd"; -import { traceResponseNew, pushDStree } from "../../store/actions"; -import { StoreState } from "../../store/reducers"; +import { traceResponseNew, pushDStree } from "store/actions"; +import { StoreState } from "store/reducers"; interface TraceGraphColumnProps { traces: traceResponseNew; diff --git a/frontend/src/modules/Traces/TraceList.tsx b/frontend/src/modules/Traces/TraceList.tsx index d4cd375ef9..90a147b65c 100644 --- a/frontend/src/modules/Traces/TraceList.tsx +++ b/frontend/src/modules/Traces/TraceList.tsx @@ -1,18 +1,18 @@ import React, { useEffect } from "react"; import { connect } from "react-redux"; -import { useHistory} from "react-router-dom"; +import { useHistory } from "react-router-dom"; import { Space, Table } from "antd"; -import ROUTES from "Src/constants/routes"; +import ROUTES from "constants/routes"; -import { traceResponseNew, fetchTraces, pushDStree } from "../../store/actions"; -import { StoreState } from "../../store/reducers"; -import { isOnboardingSkipped } from "../../utils/app"; +import { traceResponseNew, fetchTraces, pushDStree } from "store/actions"; +import { StoreState } from "store/reducers"; +import { isOnboardingSkipped } from "utils/app"; import moment from "moment"; import styled from "styled-components"; const StyledTable = styled(Table)` cursor: pointer; -` +`; const TraceHeader = styled.div` margin: 16px 0; @@ -103,12 +103,13 @@ const _TraceList = (props: TraceListProps) => { //antd table in typescript - https://codesandbox.io/s/react-typescript-669cv - return ({ + return ( + ({ onClick: () => { history.push({ pathname: ROUTES.TRACES + "/" + record.traceid, @@ -116,10 +117,10 @@ const _TraceList = (props: TraceListProps) => { spanId: record.spanid, }, }); - } - })} - /> - ; + }, + })} + /> + ); } else { if (isOnboardingSkipped()) { return ( diff --git a/frontend/src/modules/Usage/UsageExplorer.tsx b/frontend/src/modules/Usage/UsageExplorer.tsx index f5133a6ecf..2e3c23fa60 100644 --- a/frontend/src/modules/Usage/UsageExplorer.tsx +++ b/frontend/src/modules/Usage/UsageExplorer.tsx @@ -8,12 +8,12 @@ import { getUsageData, GlobalTime, usageDataItem, -} from "../../store/actions"; -import { StoreState } from "../../store/reducers"; +} from "store/actions"; +import { StoreState } from "store/reducers"; import moment from "moment"; -import { isOnboardingSkipped } from "../../utils/app"; -import { useRoute } from "../RouteProvider"; -import { servicesListItem } from "../../store/actions/MetricsActions"; +import { isOnboardingSkipped } from "utils/app"; +import { useRoute } from "modules/RouteProvider"; +import { servicesListItem } from "store/actions/MetricsActions"; const { Option } = Select; interface UsageExplorerProps { diff --git a/frontend/src/modules/add-instrumentation/instrumentationPage.tsx b/frontend/src/modules/add-instrumentation/instrumentationPage.tsx index 4ec576f605..089c66b56f 100644 --- a/frontend/src/modules/add-instrumentation/instrumentationPage.tsx +++ b/frontend/src/modules/add-instrumentation/instrumentationPage.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Space } from "antd"; import { connect } from "react-redux"; -import { StoreState } from "../../store/reducers"; +import { StoreState } from "store/reducers"; import { useThemeSwitcher } from "react-css-theme-switcher"; import styled from "styled-components"; @@ -9,7 +9,8 @@ const InstrumentCard = styled.div<{ currentThemeStatus: string | undefined; }>` border-radius: 4px; - background: ${({ currentThemeStatus }) => currentThemeStatus === 'dark' ? '#313131' : '#ddd'}; + background: ${({ currentThemeStatus }) => + currentThemeStatus === "dark" ? "#313131" : "#ddd"}; padding: 33px 23px; max-width: 800px; margin-top: 40px; @@ -22,20 +23,36 @@ const InstrumentationPage = (props: InstrumentationPageProps) => { return ( - +
-

- Instrument your application -

+

Instrument your application

- Congrats, you have successfully installed SigNoz!
- To start seeing YOUR application data here, follow the instructions in the docs - - https://signoz.io/docs/instrumentation/overview -
- If you face any issues, join our - slack community to ask any questions or mail us at - support@signoz.io + Congrats, you have successfully installed SigNoz! +
+ To start seeing YOUR application data here, follow the instructions in the + docs - + + {" "} + https://signoz.io/docs/instrumentation/overview + +
+ If you face any issues, join our{" "} + + slack community + {" "} + to ask any questions or mail us at{" "} + + support@signoz.io + diff --git a/frontend/src/pages.ts b/frontend/src/pages.ts index 10dfe98932..ffe2fb173d 100644 --- a/frontend/src/pages.ts +++ b/frontend/src/pages.ts @@ -1,28 +1,28 @@ import React from "react"; export const ServiceMetrics = React.lazy( - () => import("Src/modules/Metrics/ServiceMetricsDef"), + () => import("modules/Metrics/ServiceMetricsDef"), ); export const ServiceMap = React.lazy( - () => import("Src/modules/Servicemap/ServiceMap"), + () => import("modules/Servicemap/ServiceMap"), ); export const TraceDetail = React.lazy( - () => import("Src/modules/Traces/TraceDetail"), + () => import("modules/Traces/TraceDetail"), ); export const TraceGraph = React.lazy( - () => import("Src/modules/Traces/TraceGraphDef"), + () => import("modules/Traces/TraceGraphDef"), ); export const UsageExplorer = React.lazy( - () => import("Src/modules/Usage/UsageExplorerDef"), + () => import("modules/Usage/UsageExplorerDef"), ); export const ServicesTable = React.lazy( - () => import("Src/modules/Metrics/ServicesTableDef"), + () => import("modules/Metrics/ServicesTableDef"), ); -export const Signup = React.lazy(() => import("Src/modules/Auth/Signup")); +export const Signup = React.lazy(() => import("modules/Auth/Signup")); export const SettingsPage = React.lazy( - () => import("Src/modules/Settings/settingsPage"), + () => import("modules/Settings/settingsPage"), ); export const InstrumentationPage = React.lazy( - () => import("Src/modules/add-instrumentation/instrumentationPage"), + () => import("modules/add-instrumentation/instrumentationPage"), ); diff --git a/frontend/src/store/actions/MetricsActions/metricsActions.ts b/frontend/src/store/actions/MetricsActions/metricsActions.ts index e0889df5e9..c8996330c4 100644 --- a/frontend/src/store/actions/MetricsActions/metricsActions.ts +++ b/frontend/src/store/actions/MetricsActions/metricsActions.ts @@ -1,8 +1,8 @@ import { Dispatch } from "redux"; -import api, { apiV1 } from "../../../api"; +import api, { apiV1 } from "api"; -import { GlobalTime } from "../global"; -import { toUTCEpoch } from "../../../utils/timeUtils"; +import { GlobalTime } from "store/actions/global"; +import { toUTCEpoch } from "utils/timeUtils"; import { MetricsActionTypes } from "./metricsActionTypes"; import * as MetricsInterfaces from "./metricsInterfaces"; diff --git a/frontend/src/store/actions/serviceMap.ts b/frontend/src/store/actions/serviceMap.ts index fbad4148c3..592b008ded 100644 --- a/frontend/src/store/actions/serviceMap.ts +++ b/frontend/src/store/actions/serviceMap.ts @@ -1,5 +1,5 @@ import { Dispatch } from "redux"; -import api, { apiV1 } from "../../api"; +import api, { apiV1 } from "api"; import { GlobalTime } from "./global"; import { ActionTypes } from "./types"; diff --git a/frontend/src/store/actions/traces.ts b/frontend/src/store/actions/traces.ts index 88721e56d9..dc8f319a00 100644 --- a/frontend/src/store/actions/traces.ts +++ b/frontend/src/store/actions/traces.ts @@ -1,10 +1,10 @@ import { ActionTypes } from "./types"; -import api, { apiV1 } from "../../api"; +import api, { apiV1 } from "api"; import { Dispatch } from "redux"; import { GlobalTime } from "./global"; -import { toUTCEpoch } from "../../utils/timeUtils"; -import ROUTES from "Src/constants/routes"; +import { toUTCEpoch } from "utils/timeUtils"; +import ROUTES from "constants/routes"; // PNOTE // define trace interface - what it should return diff --git a/frontend/src/store/actions/types.ts b/frontend/src/store/actions/types.ts index d1f68ca1b0..9adc7f3ad3 100644 --- a/frontend/src/store/actions/types.ts +++ b/frontend/src/store/actions/types.ts @@ -1,5 +1,5 @@ import { FetchTracesAction, FetchTraceItemAction } from "./traces"; -import { updateTraceFiltersAction, updateInputTagAction } from "./traceFilters"; +import { updateTraceFiltersAction } from "./traceFilters"; import { serviceMapItemAction, servicesAction } from "./serviceMap"; import { getUsageDataAction } from "./usage"; @@ -19,7 +19,6 @@ export type Action = | FetchTraceItemAction | FetchTracesAction | updateTraceFiltersAction - | updateInputTagAction | getUsageDataAction | updateTimeIntervalAction | servicesAction diff --git a/frontend/src/store/actions/usage.ts b/frontend/src/store/actions/usage.ts index fb29114b3b..b2190b4185 100644 --- a/frontend/src/store/actions/usage.ts +++ b/frontend/src/store/actions/usage.ts @@ -1,8 +1,8 @@ import { Dispatch } from "redux"; -import api, { apiV1 } from "../../api"; +import api, { apiV1 } from "api"; import { ActionTypes } from "./types"; -import { toUTCEpoch } from "../../utils/timeUtils"; +import { toUTCEpoch } from "utils/timeUtils"; export interface usageDataItem { timestamp: number; diff --git a/frontend/src/store/reducers/global.ts b/frontend/src/store/reducers/global.ts index c7ff91e7be..25a522db3a 100644 --- a/frontend/src/store/reducers/global.ts +++ b/frontend/src/store/reducers/global.ts @@ -1,4 +1,4 @@ -import { ActionTypes, Action, GlobalTime } from "../actions"; +import { ActionTypes, Action, GlobalTime } from "store/actions"; export const updateGlobalTimeReducer = ( state: GlobalTime = { diff --git a/frontend/src/store/reducers/index.ts b/frontend/src/store/reducers/index.ts index 62b7c7676a..852d66183d 100644 --- a/frontend/src/store/reducers/index.ts +++ b/frontend/src/store/reducers/index.ts @@ -6,7 +6,7 @@ import { GlobalTime, serviceMapStore, TraceFilters, -} from "../actions"; +} from "store/actions"; import { updateGlobalTimeReducer } from "./global"; import { MetricsInitialState, metricsReducer } from "./metrics"; import TraceFilterReducer from "./traceFilters"; diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts index 94b1ff1aec..38796a1dac 100644 --- a/frontend/src/store/reducers/metrics.ts +++ b/frontend/src/store/reducers/metrics.ts @@ -7,8 +7,8 @@ import { externalMetricsItem, dbOverviewMetricsItem, externalMetricsAvgDurationItem, -} from "../actions/MetricsActions"; -import { MetricsActionTypes as ActionTypes } from "../actions/MetricsActions/metricsActionTypes"; +} from "store/actions/MetricsActions"; +import { MetricsActionTypes as ActionTypes } from "store/actions/MetricsActions/metricsActionTypes"; export type MetricsInitialState = { serviceList?: servicesListItem[]; diff --git a/frontend/src/store/reducers/serviceMap.ts b/frontend/src/store/reducers/serviceMap.ts index f3a5db4fe4..820dcb3c75 100644 --- a/frontend/src/store/reducers/serviceMap.ts +++ b/frontend/src/store/reducers/serviceMap.ts @@ -1,4 +1,4 @@ -import { ActionTypes, Action, serviceMapStore } from "../actions"; +import { ActionTypes, Action, serviceMapStore } from "store/actions"; const initialState: serviceMapStore = { items: [], diff --git a/frontend/src/store/reducers/traceFilters.ts b/frontend/src/store/reducers/traceFilters.ts index e349f14f58..51f5fb8adc 100644 --- a/frontend/src/store/reducers/traceFilters.ts +++ b/frontend/src/store/reducers/traceFilters.ts @@ -1,4 +1,4 @@ -import { ActionTypes, TraceFilters } from "../actions"; +import { ActionTypes, TraceFilters } from "store/actions"; type ACTION = { type: ActionTypes; @@ -9,7 +9,7 @@ const initialState: TraceFilters = { tags: [], operation: "", latency: { min: "", max: "" }, - kind: "" + kind: "", }; const TraceFilterReducer = (state = initialState, action: ACTION) => { diff --git a/frontend/src/store/reducers/traces.ts b/frontend/src/store/reducers/traces.ts index 625e914c64..03a95547f0 100644 --- a/frontend/src/store/reducers/traces.ts +++ b/frontend/src/store/reducers/traces.ts @@ -4,7 +4,7 @@ import { traceResponseNew, spanList, spansWSameTraceIDResponse, -} from "../actions"; +} from "store/actions"; // PNOTE - Initializing is a must for state variable otherwise it gives an error in reducer var spanlistinstance: spanList = { events: [], segmentID: "", columns: [] }; diff --git a/frontend/src/store/reducers/usage.ts b/frontend/src/store/reducers/usage.ts index 287c27d487..c51765efb8 100644 --- a/frontend/src/store/reducers/usage.ts +++ b/frontend/src/store/reducers/usage.ts @@ -1,4 +1,4 @@ -import { ActionTypes, Action, usageDataItem } from "../actions"; +import { ActionTypes, Action, usageDataItem } from "store/actions"; export const usageDataReducer = ( state: usageDataItem[] = [{ timestamp: 0, count: 0 }], diff --git a/frontend/src/utils/app.ts b/frontend/src/utils/app.ts index a84159006b..94143ef051 100644 --- a/frontend/src/utils/app.ts +++ b/frontend/src/utils/app.ts @@ -1,4 +1,4 @@ -import { SKIP_ONBOARDING } from "Src/constants/onboarding"; +import { SKIP_ONBOARDING } from "constants/onboarding"; export const isOnboardingSkipped = () => { return localStorage.getItem(SKIP_ONBOARDING) === "true"; diff --git a/frontend/src/utils/spanToTree.ts b/frontend/src/utils/spanToTree.ts index ea3e5b0a46..90c55471a5 100644 --- a/frontend/src/utils/spanToTree.ts +++ b/frontend/src/utils/spanToTree.ts @@ -1,4 +1,4 @@ -import { pushDStree, span, RefItem } from "../store/actions"; +import { pushDStree, span, RefItem } from "store/actions"; // PNOTE - should the data be taken from redux or only through props? - Directly as arguments export const spanToTreeUtil = (spanlist: span[]): pushDStree => { @@ -24,7 +24,7 @@ export const spanToTreeUtil = (spanlist: span[]): pushDStree => { //May1 //https://stackoverflow.com/questions/13315131/enforcing-the-type-of-the-indexed-members-of-a-typescript-object - let mapped_array: { [id: string]: span; } = {}; + let mapped_array: { [id: string]: span } = {}; for (let i = 0; i < spanlist.length; i++) { mapped_array[spanlist[i][1]] = spanlist[i]; @@ -32,12 +32,10 @@ export const spanToTreeUtil = (spanlist: span[]): pushDStree => { // of type pushDStree // console.log('IDs while creating mapped array') // console.log(`SpanID is ${spanlist[i][1]}\n`); - } // console.log(`In SpanTreeUtil: mapped_arrayis ${mapped_array}`); - for (let id in mapped_array) { let child_span = mapped_array[id]; @@ -100,14 +98,17 @@ export const spanToTreeUtil = (spanlist: span[]): pushDStree => { let parentID = references[0].spanID; // console.log(`In SpanTreeUtil: mapped_array[parentID] is ${mapped_array[parentID]}`); - if (typeof mapped_array[parentID] !== 'undefined') { //checking for undefined [10] issue + if (typeof mapped_array[parentID] !== "undefined") { + //checking for undefined [10] issue mapped_array[parentID][10].push(push_object); } else { - console.log(`In SpanTreeUtil: mapped_array[parentID] is undefined, parentID is ${parentID}`); - console.log(`In SpanTreeUtil: mapped_array[parentID] is undefined, mapped_array[parentID] is ${mapped_array[parentID]}`); - + console.log( + `In SpanTreeUtil: mapped_array[parentID] is undefined, parentID is ${parentID}`, + ); + console.log( + `In SpanTreeUtil: mapped_array[parentID] is undefined, mapped_array[parentID] is ${mapped_array[parentID]}`, + ); } - } } else { tree = push_object; diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index c2509fb541..1852ef96c2 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -17,9 +17,6 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "baseUrl": ".", - "paths": { - "Src/*": ["./src/*"] - } + "baseUrl": "./src" } } diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 922dc017ed..755ca2d326 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -1,9 +1,10 @@ // shared config (dev and prod) const { resolve } = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); -const portFinderSync = require('portfinder-sync') +const portFinderSync = require("portfinder-sync"); const dotenv = require("dotenv"); const webpack = require("webpack"); +const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin"); dotenv.config(); @@ -33,10 +34,8 @@ module.exports = { publicPath: "/", }, resolve: { - alias: { - Src: resolve(__dirname, "./src/"), - }, extensions: [".ts", ".tsx", ".js", ".jsx"], + plugins: [new TsconfigPathsPlugin({})], }, module: { rules: [ diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js index 0d9bdae721..6c71b20fbd 100644 --- a/frontend/webpack.config.prod.js +++ b/frontend/webpack.config.prod.js @@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin"); const CompressionPlugin = require("compression-webpack-plugin"); const webpack = require("webpack"); +const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin"); module.exports = { mode: "production", @@ -16,10 +17,8 @@ module.exports = { }, resolve: { - alias: { - Src: resolve(__dirname, "./src/"), - }, extensions: [".ts", ".tsx", ".js", ".jsx"], + plugins: [new TsconfigPathsPlugin({})], }, module: { rules: [ diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 5339fea9dd..33294201ab 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -13144,6 +13144,15 @@ ts-pnp@1.2.0, ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== +tsconfig-paths-webpack-plugin@^3.5.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.5.1.tgz#e4dbf492a20dca9caab60086ddacb703afc2b726" + integrity sha512-n5CMlUUj+N5pjBhBACLq4jdr9cPTitySCjIosoQm0zwK99gmrcTGAfY9CwxRFT9+9OleNWXPRUcxsKP4AYExxQ== + dependencies: + chalk "^4.1.0" + enhanced-resolve "^5.7.0" + tsconfig-paths "^3.9.0" + tsconfig-paths@^3.9.0: version "3.9.0" resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"