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

fix(FE): tsConfig baseUrl is used rather than using the alias for module (#256)

Browse Source 
* tsconfig-paths-webpack-plugin package is added

* baseUrl is updated

* webpack config for development and production are updated

* baseUrl is removed in the file

* more .. is being removed

* chore: removed the commented part in the webpack.config

Co-authored-by: FIPalash Gupta <palash@indiagold.co>
This commit is contained in:
palash-signoz 2021-08-19 22:53:33 +05:30 committed by GitHub
parent 77c0237ba1
commit 4b205e61c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
54 changed files with 230 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

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

2
frontend/src/api/index.ts
View File

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

4
frontend/src/components/NotFound/index.tsx
View File

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

8
frontend/src/index.tsx
View File

@ -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(
<Provider store={store}>

10
frontend/src/modules/AppWrapper.tsx
View File

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

6
frontend/src/modules/Auth/Signup.tsx
View File

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

4
frontend/src/modules/Metrics/ErrorRateChart.tsx
View File

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

2
frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx
View File

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

12
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 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
},

2
frontend/src/modules/Metrics/LatencyLineChart.tsx
View File

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

6
frontend/src/modules/Metrics/RequestRateChart.tsx
View File

@ -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<RequestRateChartProps> {
return (
<div>
{this.GraphTracePopUp()}
<div style={{textAlign: "center"}}>Request per sec</div>
<div style={{ textAlign: "center" }}>Request per sec</div>
<ChartJSLine
ref={this.chartRef}
data={data_chartJS}

12
frontend/src/modules/Metrics/ServiceMetrics.tsx
View File

@ -3,8 +3,8 @@ 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 { GlobalTime, updateTimeInterval } from "Src/store/actions";
import ROUTES from "constants/routes";
import { GlobalTime, updateTimeInterval } from "store/actions";
import {
metricItem,
externalMetricsAvgDurationItem,
@ -12,7 +12,7 @@ import {
externalMetricsItem,
dbOverviewMetricsItem,
topEndpointListItem,
} from "../../store/actions/MetricsActions";
} from "store/actions/MetricsActions";
import {
getServicesMetrics,
getTopEndpoints,
@ -20,14 +20,14 @@ import {
getExternalMetrics,
getExternalAvgDurationMetrics,
getExternalErrCodeMetrics,
} from "../../store/actions/MetricsActions";
} from "store/actions/MetricsActions";
import { StoreState } from "../../store/reducers";
import { StoreState } from "store/reducers";
import LatencyLineChart from "./LatencyLineChart";
import RequestRateChart from "./RequestRateChart";
import ErrorRateChart from "./ErrorRateChart";
import TopEndpointsTable from "./TopEndpointsTable";
import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
import { METRICS_PAGE_QUERY_PARAM } from "constants/query";
import ExternalApiGraph from "./ExternalApi";
const { TabPane } = Tabs;

20
frontend/src/modules/Metrics/ServicesTable.tsx
View File

@ -3,13 +3,13 @@ import { NavLink } from "react-router-dom";
import { Button, Space, 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 } from "../../store/actions";
import { servicesListItem } from "../../store/actions/MetricsActions";
import { StoreState } from "../../store/reducers";
import { CustomModal } from "../../components/Modal";
import { CustomSpinner,DefaultSpinner } from "../../components/Spiner";
import { SKIP_ONBOARDING } from "constants/onboarding";
import ROUTES from "constants/routes";
import { getServicesList, GlobalTime } from "store/actions";
import { servicesListItem } from "store/actions/MetricsActions";
import { StoreState } from "store/reducers";
import { CustomModal } from "components/Modal";
import { CustomSpinner, DefaultSpinner } from "components/Spiner";
interface ServicesTableProps {
servicesList: servicesListItem[];
@ -124,9 +124,7 @@ const _ServicesTable = (props: ServicesTableProps) => {
}, [props.servicesList, errorObject]);
if (!initialDataFetch) {
return (
<CustomSpinner size="large" tip="Fetching data..."/>
);
return <CustomSpinner size="large" tip="Fetching data..." />;
}
if (refetchFromBackend && !skipOnboarding) {
@ -152,7 +150,7 @@ const _ServicesTable = (props: ServicesTableProps) => {
allowFullScreen
></iframe>
<div style={{ margin: "20px 0" }}>
<DefaultSpinner/>
<DefaultSpinner />
</div>
<div>
No instrumentation data.

8
frontend/src/modules/Metrics/TopEndpointsTable.tsx
View File

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

2
frontend/src/modules/Nav/SideNav.tsx
View File

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

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

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

12
frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx
View File

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

2
frontend/src/modules/Nav/TopNav/ShowBreadcrumbs.tsx
View File

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

2
frontend/src/modules/Nav/TopNav/config.ts
View File

@ -1,4 +1,4 @@
import ROUTES from "Src/constants/routes";
import ROUTES from "constants/routes";
export const Options = [
{ value: "5min", label: "Last 5 min" },

2
frontend/src/modules/Nav/TopNav/index.tsx
View File

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

2
frontend/src/modules/Nav/TopNav/utils.ts
View File

@ -1,4 +1,4 @@
import ROUTES from "Src/constants/routes";
import ROUTES from "constants/routes";
export const getLocalStorageRouteKey = (pathName: string) => {
let localStorageKey = "";

2
frontend/src/modules/RouteProvider.tsx
View File

@ -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]: {

10
frontend/src/modules/Servicemap/ServiceMap.tsx
View File

@ -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 <CustomSpinner size="large" tip="Loading..."/>;
return <CustomSpinner size="large" tip="Loading..." />;
}
const zoomToService = (value: string) => {

8
frontend/src/modules/Settings/settingsPage.tsx
View File

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

5
frontend/src/modules/Traces/FilterStateDisplay.tsx
View File

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

2
frontend/src/modules/Traces/SelectedSpanDetails.tsx
View File

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

12
frontend/src/modules/Traces/TraceCustomVisualizations.tsx
View File

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

42
frontend/src/modules/Traces/TraceFilter.tsx
View File

@ -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 (
<div>
@ -437,8 +437,10 @@ const _TraceFilter = (props: TraceFilterProps) => {
placeholder="Select Span Kind"
allowClear
>
{spanKindList.map(spanKind => (
<Option value={spanKind.value} key={spanKind.value}>{spanKind.label}</Option>
{spanKindList.map((spanKind) => (
<Option value={spanKind.value} key={spanKind.value}>
{spanKind.label}
</Option>
))}
</Select>
</FormItem>

4
frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx
View File

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

2
frontend/src/modules/Traces/TraceGanttChart/TraceGanttChartHelpers.ts
View File

@ -1,5 +1,5 @@
import { isEmpty } from "lodash-es";
import { pushDStree } from "Src/store/actions";
import { pushDStree } from "store/actions";
interface itemProps {
treeData: pushDStree[];

24
frontend/src/modules/Traces/TraceGraph.tsx
View File

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

4
frontend/src/modules/Traces/TraceGraphColumn.tsx
View File

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

33
frontend/src/modules/Traces/TraceList.tsx
View File

@ -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 <StyledTable
dataSource={dataSource}
columns={columns}
size="middle"
rowClassName=""
onRow={(record) => ({
return (
<StyledTable
dataSource={dataSource}
columns={columns}
size="middle"
rowClassName=""
onRow={(record) => ({
onClick: () => {
history.push({
pathname: ROUTES.TRACES + "/" + record.traceid,
@ -116,10 +117,10 @@ const _TraceList = (props: TraceListProps) => {
spanId: record.spanid,
},
});
}
})}
/>
;
},
})}
/>
);
} else {
if (isOnboardingSkipped()) {
return (

10
frontend/src/modules/Usage/UsageExplorer.tsx
View File

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

43
frontend/src/modules/add-instrumentation/instrumentationPage.tsx
View File

@ -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 (
<React.Fragment>
<Space style={{ marginLeft: 60, marginTop: 48, display: 'block' }}>
<Space style={{ marginLeft: 60, marginTop: 48, display: "block" }}>
<div>
<h2>
Instrument your application
</h2>
<h2>Instrument your application</h2>
</div>
<InstrumentCard currentThemeStatus={currentTheme}>
Congrats, you have successfully installed SigNoz!<br/>
To start seeing YOUR application data here, follow the instructions in the docs -
<a href={"https://signoz.io/docs/instrumentation/overview"} target="_blank"> https://signoz.io/docs/instrumentation/overview</a>
<br/>
If you face any issues, join our <a href={"https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA"} target="_blank">
slack community</a> to ask any questions or mail us at <a href={"mailto:support@signoz.io"} target="_blank">
support@signoz.io</a>
Congrats, you have successfully installed SigNoz!
<br />
To start seeing YOUR application data here, follow the instructions in the
docs -
<a
href={"https://signoz.io/docs/instrumentation/overview"}
target="_blank"
>
{" "}
https://signoz.io/docs/instrumentation/overview
</a>
<br />
If you face any issues, join our{" "}
<a
href={
"https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA"
}
target="_blank"
>
slack community
</a>{" "}
to ask any questions or mail us at{" "}
<a href={"mailto:support@signoz.io"} target="_blank">
support@signoz.io
</a>
</InstrumentCard>
</Space>
</React.Fragment>

18
frontend/src/pages.ts
View File

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

6
frontend/src/store/actions/MetricsActions/metricsActions.ts
View File

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

2
frontend/src/store/actions/serviceMap.ts
View File

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

6
frontend/src/store/actions/traces.ts
View File

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

3
frontend/src/store/actions/types.ts
View File

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

4
frontend/src/store/actions/usage.ts
View File

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

2
frontend/src/store/reducers/global.ts
View File

@ -1,4 +1,4 @@
import { ActionTypes, Action, GlobalTime } from "../actions";
import { ActionTypes, Action, GlobalTime } from "store/actions";
export const updateGlobalTimeReducer = (
state: GlobalTime = {

2
frontend/src/store/reducers/index.ts
View File

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

4
frontend/src/store/reducers/metrics.ts
View File

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

2
frontend/src/store/reducers/serviceMap.ts
View File

@ -1,4 +1,4 @@
import { ActionTypes, Action, serviceMapStore } from "../actions";
import { ActionTypes, Action, serviceMapStore } from "store/actions";
const initialState: serviceMapStore = {
items: [],

4
frontend/src/store/reducers/traceFilters.ts
View File

@ -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) => {

2
frontend/src/store/reducers/traces.ts
View File

@ -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: [] };

2
frontend/src/store/reducers/usage.ts
View File

@ -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 }],

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

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

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

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

5
frontend/tsconfig.json
View File

@ -17,9 +17,6 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"Src/*": ["./src/*"]
}
"baseUrl": "./src"
}
}

7
frontend/webpack.config.js
View File

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

5
frontend/webpack.config.prod.js
View File

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

9
frontend/yarn.lock
View File

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