Merge pull request #64 from SigNoz/adds-external-calls

Adds external API monitoring calls

frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { Line as ChartJSLine } from "react-chartjs-2";
+import { ChartOptions } from "chart.js";
+import { withRouter } from "react-router";
+import { RouteComponentProps } from "react-router-dom";
+import styled from "styled-components";
+import { getOptions, borderColors } from "./graphConfig";
+import { externalMetricsItem } from "../../store/actions/metrics";
+import { uniqBy, filter } from "lodash";
+
+const theme = "dark";
+
+interface ExternalApiGraphProps extends RouteComponentProps<any> {
+	data: externalMetricsItem[];
+	keyIdentifier?: string;
+	label?: string;
+	title: string;
+	dataIdentifier: string;
+	fnDataIdentifier?: (s: number | string) => number | string;
+}
+
+interface ExternalApiGraph {
+	chartRef: any;
+}
+
+class ExternalApiGraph extends React.Component<ExternalApiGraphProps> {
+	constructor(props: ExternalApiGraphProps) {
+		super(props);
+		this.chartRef = React.createRef();
+	}
+
+	state = {
+		xcoordinate: 0,
+		ycoordinate: 0,
+		showpopUp: false,
+		firstpoint_ts: 0,
+		// graphInfo:{}
+	};
+
+	render() {
+		const {
+			title,
+			label,
+			data,
+			dataIdentifier,
+			keyIdentifier,
+			fnDataIdentifier,
+		} = this.props;
+		const getDataSets = () => {
+			if (!keyIdentifier) {
+				return [
+					{
+						label: label || "",
+						data: data.map((s: externalMetricsItem) =>
+							fnDataIdentifier
+								? fnDataIdentifier(s[dataIdentifier])
+								: s[dataIdentifier],
+						),
+						pointRadius: 0.5,
+						borderColor: borderColors[0],
+						borderWidth: 2,
+					},
+				];
+			}
+			const uniq = uniqBy(data, keyIdentifier);
+			return uniq.map((obj: externalMetricsItem, i: number) => {
+				const _data = filter(
+					data,
+					(s: externalMetricsItem) => s[keyIdentifier] === obj[keyIdentifier],
+				);
+				return {
+					label: obj[keyIdentifier],
+					data: _data.map((s: externalMetricsItem) =>
+						fnDataIdentifier
+							? fnDataIdentifier(s[dataIdentifier])
+							: s[dataIdentifier],
+					),
+					pointRadius: 0.5,
+					borderColor: borderColors[i] || borderColors[0], // Can also add transparency in border color
+					borderWidth: 2,
+				};
+			});
+		};
+		const data_chartJS = (canvas: any) => {
+			const ctx = canvas.getContext("2d");
+			const gradient = ctx.createLinearGradient(0, 0, 0, 100);
+			gradient.addColorStop(0, "rgba(250,174,50,1)");
+			gradient.addColorStop(1, "rgba(250,174,50,1)");
+			const uniqTimestamp = uniqBy(data, "timestamp");
+
+			return {
+				labels: uniqTimestamp.map(
+					(s: externalMetricsItem) => new Date(s.timestamp / 1000000),
+				),
+				datasets: getDataSets(),
+			};
+		};
+
+		return (
+			<div>
+				<div>
+					<div style={{ textAlign: "center" }}>{title}</div>
+					<ChartJSLine
+						ref={this.chartRef}
+						data={data_chartJS}
+						options={getOptions(theme)}
+					/>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default withRouter(ExternalApiGraph);

frontend/src/modules/Metrics/ExternalApi/graphConfig.ts

@@ -0,0 +1,97 @@
+import { ChartOptions } from "chart.js";
+
+export const getOptions = (theme: string): ChartOptions => {
+	return {
+		maintainAspectRatio: true,
+		responsive: true,
+
+		title: {
+			display: true,
+			text: "",
+			fontSize: 20,
+			position: "top",
+			padding: 8,
+			fontFamily: "Arial",
+			fontStyle: "regular",
+			fontColor: theme === "dark" ? "rgb(200, 200, 200)" : "rgb(20, 20, 20)",
+		},
+
+		legend: {
+			display: true,
+			position: "bottom",
+			align: "center",
+
+			labels: {
+				fontColor: theme === "dark" ? "rgb(200, 200, 200)" : "rgb(20, 20, 20)",
+				fontSize: 10,
+				boxWidth: 10,
+				usePointStyle: true,
+			},
+		},
+
+		tooltips: {
+			mode: "label",
+			bodyFontSize: 12,
+			titleFontSize: 12,
+
+			callbacks: {
+				label: function (tooltipItem, data) {
+					if (typeof tooltipItem.yLabel === "number") {
+						return (
+							data.datasets![tooltipItem.datasetIndex!].label +
+							" : " +
+							tooltipItem.yLabel.toFixed(2)
+						);
+					} else {
+						return "";
+					}
+				},
+			},
+		},
+
+		scales: {
+			yAxes: [
+				{
+					stacked: false,
+					ticks: {
+						beginAtZero: false,
+						fontSize: 10,
+						autoSkip: true,
+						maxTicksLimit: 6,
+					},
+
+					gridLines: {
+						// You can change the color, the dash effect, the main axe color, etc.
+						borderDash: [1, 4],
+						color: "#D3D3D3",
+						lineWidth: 0.25,
+					},
+				},
+			],
+			xAxes: [
+				{
+					type: "time",
+					// time: {
+					//     unit: 'second'
+					// },
+					distribution: "linear",
+					//'linear': data are spread according to their time (distances can vary)
+					// From https://www.chartjs.org/docs/latest/axes/cartesian/time.html
+					ticks: {
+						beginAtZero: false,
+						fontSize: 10,
+						autoSkip: true,
+						maxTicksLimit: 10,
+					},
+					// gridLines: false, --> not a valid option
+				},
+			],
+		},
+	};
+};
+
+export const borderColors = [
+	"rgba(250,174,50,1)",
+	"rgba(227, 74, 51, 1.0)",
+	"rgba(57, 255, 20, 1.0)",
+];

frontend/src/modules/Metrics/ExternalApi/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ExternalApiGraph";

frontend/src/modules/Metrics/ServiceMetrics.tsx

@@ -9,23 +9,35 @@ import {
 	getServicesMetrics,
 	metricItem,
 	getTopEndpoints,
+	getExternalMetrics,
+	externalMetricsAvgDurationItem,
+	externalErrCodeMetricsItem,
+	externalMetricsItem,
+	getExternalAvgDurationMetrics,
+	getExternalErrCodeMetrics,
 	topEndpointListItem,
 	GlobalTime,
 	updateTimeInterval,
-} from "../../store/actions";
+} from "Src/store/actions";
 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 ExternalApiGraph from "./ExternalApi";
 const { TabPane } = Tabs;
 
 interface ServicesMetricsProps extends RouteComponentProps<any> {
 	serviceMetrics: metricItem[];
 	getServicesMetrics: Function;
+	getExternalMetrics: Function;
+	getExternalErrCodeMetrics: Function;
+	getExternalAvgDurationMetrics: Function;
+	externalMetrics: externalMetricsItem[];
 	topEndpointsList: topEndpointListItem[];
+	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
+	externalErrCodeMetrics: externalErrCodeMetricsItem[];
 	getTopEndpoints: Function;
 	globalTime: GlobalTime;
 	updateTimeInterval: Function;
@@ -36,6 +48,9 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 	useEffect(() => {
 		props.getServicesMetrics(servicename, props.globalTime);
 		props.getTopEndpoints(servicename, props.globalTime);
+		props.getExternalMetrics(servicename, props.globalTime);
+		props.getExternalErrCodeMetrics(servicename, props.globalTime);
+		props.getExternalAvgDurationMetrics(servicename, props.globalTime);
 	}, [props.globalTime, servicename]);
 
 	const onTracePopupClick = (timestamp: number) => {
@@ -90,20 +105,55 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 			</TabPane>
 
 			<TabPane tab="External Calls" key="2">
-				<div style={{ margin: 20 }}> Coming Soon.. </div>
-				<div
-					className="container"
-					style={{ display: "flex", flexFlow: "column wrap" }}
-				>
-					<div className="row">
-						<div className="col-md-6 col-sm-12 col-12">
-							{/* <ChartJSLineChart data={this.state.graphData} />       */}
-						</div>
-						<div className="col-md-6 col-sm-12 col-12">
-							{/* <ChartJSLineChart data={this.state.graphData} />        */}
-						</div>
-					</div>
-				</div>
+				<Row gutter={32} style={{ margin: 20 }}>
+					<Col span={12}>
+						<Card bodyStyle={{ padding: 10 }}>
+							<ExternalApiGraph
+								title=" External Call Error Rate"
+								keyIdentifier="externalHttpUrl"
+								dataIdentifier="numCalls"
+								data={props.externalErrCodeMetrics}
+							/>
+						</Card>
+					</Col>
+
+					<Col span={12}>
+						<Card bodyStyle={{ padding: 10 }}>
+							<ExternalApiGraph
+								label="Average Duration"
+								title="External Call duration"
+								dataIdentifier="avgDuration"
+								fnDataIdentifier={(s) => Number(s) / 1000000}
+								data={props.externalAvgDurationMetrics}
+							/>
+						</Card>
+					</Col>
+				</Row>
+
+				<Row gutter={32} style={{ margin: 20 }}>
+					<Col span={12}>
+						<Card bodyStyle={{ padding: 10 }}>
+							<ExternalApiGraph
+								title="External Call RPS(by Address)"
+								keyIdentifier="externalHttpUrl"
+								dataIdentifier="callRate"
+								data={props.externalMetrics}
+							/>
+						</Card>
+					</Col>
+
+					<Col span={12}>
+						<Card bodyStyle={{ padding: 10 }}>
+							<ExternalApiGraph
+								title="External Call duration(by Address)"
+								keyIdentifier="externalHttpUrl"
+								dataIdentifier="avgDuration"
+								fnDataIdentifier={(s) => Number(s) / 1000000}
+								data={props.externalMetrics}
+							/>
+						</Card>
+					</Col>
+				</Row>
 			</TabPane>
 		</Tabs>
 	);
@@ -114,18 +164,27 @@ const mapStateToProps = (
 ): {
 	serviceMetrics: metricItem[];
 	topEndpointsList: topEndpointListItem[];
+	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
+	externalErrCodeMetrics: externalErrCodeMetricsItem[];
+	externalMetrics: externalMetricsItem[];
 	globalTime: GlobalTime;
 } => {
 	return {
+		externalErrCodeMetrics: state.externalErrCodeMetrics,
 		serviceMetrics: state.serviceMetrics,
 		topEndpointsList: state.topEndpointsList,
+		externalMetrics: state.externalMetrics,
 		globalTime: state.globalTime,
+		externalAvgDurationMetrics: state.externalAvgDurationMetrics,
 	};
 };
 
 export const ServiceMetrics = withRouter(
 	connect(mapStateToProps, {
 		getServicesMetrics: getServicesMetrics,
+		getExternalMetrics: getExternalMetrics,
+		getExternalErrCodeMetrics: getExternalErrCodeMetrics,
+		getExternalAvgDurationMetrics: getExternalAvgDurationMetrics,
 		getTopEndpoints: getTopEndpoints,
 		updateTimeInterval: updateTimeInterval,
 	})(_ServiceMetrics),

frontend/src/store/actions/metrics.ts

@@ -27,6 +27,17 @@ export interface metricItem {
 	errorRate: number;
 }
 
+export interface externalMetricsAvgDurationItem {
+	avgDuration: number;
+	timestamp: number;
+}
+
+export interface externalErrCodeMetricsItem {
+	callRate: number;
+	externalHttpUrl: string;
+	numCalls: number;
+	timestamp: number;
+}
 export interface topEndpointListItem {
 	p50: number;
 	p90: number;
@@ -35,6 +46,14 @@ export interface topEndpointListItem {
 	name: string;
 }
 
+export interface externalMetricsItem {
+	avgDuration: number;
+	callRate: number;
+	externalHttpUrl: string;
+	numCalls: number;
+	timestamp: number;
+}
+
 export interface customMetricsItem {
 	timestamp: number;
 	value: number;
@@ -45,10 +64,22 @@ export interface getServicesListAction {
 	payload: servicesListItem[];
 }
 
+export interface externalErrCodeMetricsActions {
+	type: ActionTypes.getErrCodeMetrics;
+	payload: externalErrCodeMetricsItem[];
+}
+export interface externalMetricsAvgDurationAction {
+	type: ActionTypes.getAvgDurationMetrics;
+	payload: externalMetricsAvgDurationItem[];
+}
 export interface getServiceMetricsAction {
 	type: ActionTypes.getServiceMetrics;
 	payload: metricItem[];
 }
+export interface getExternalMetricsAction {
+	type: ActionTypes.getExternalMetrics;
+	payload: externalMetricsItem[];
+}
 
 export interface getTopEndpointsAction {
 	type: ActionTypes.getTopEndpoints;
@@ -75,6 +106,74 @@ export const getServicesList = (globalTime: GlobalTime) => {
 	};
 };
 
+export const getExternalMetrics = (
+	serviceName: string,
+	globalTime: GlobalTime,
+) => {
+	return async (dispatch: Dispatch) => {
+		let request_string =
+			"/service/external?service=" +
+			serviceName +
+			"&start=" +
+			globalTime.minTime +
+			"&end=" +
+			globalTime.maxTime +
+			"&step=60";
+		const response = await api.get<externalMetricsItem[]>(apiV1 + request_string);
+		dispatch<getExternalMetricsAction>({
+			type: ActionTypes.getExternalMetrics,
+			payload: response.data,
+		});
+	};
+};
+
+export const getExternalAvgDurationMetrics = (
+	serviceName: string,
+	globalTime: GlobalTime,
+) => {
+	return async (dispatch: Dispatch) => {
+		let request_string =
+			"/service/externalAvgDuration?service=" +
+			serviceName +
+			"&start=" +
+			globalTime.minTime +
+			"&end=" +
+			globalTime.maxTime +
+			"&step=60";
+
+		const response = await api.get<externalMetricsAvgDurationItem[]>(
+			apiV1 + request_string,
+		);
+		dispatch<externalMetricsAvgDurationAction>({
+			type: ActionTypes.getAvgDurationMetrics,
+			payload: response.data,
+		});
+	};
+};
+export const getExternalErrCodeMetrics = (
+	serviceName: string,
+	globalTime: GlobalTime,
+) => {
+	return async (dispatch: Dispatch) => {
+		let request_string =
+			"/service/externalErrors?service=" +
+			serviceName +
+			"&start=" +
+			globalTime.minTime +
+			"&end=" +
+			globalTime.maxTime +
+			"&step=60";
+		const response = await api.get<externalErrCodeMetricsItem[]>(
+			apiV1 + request_string,
+		);
+
+		dispatch<externalErrCodeMetricsActions>({
+			type: ActionTypes.getErrCodeMetrics,
+			payload: response.data,
+		});
+	};
+};
+
 export const getServicesMetrics = (
 	serviceName: string,
 	globalTime: GlobalTime,

frontend/src/store/actions/types.ts

@@ -3,6 +3,9 @@ import { updateTraceFiltersAction, updateInputTagAction } from "./traceFilters";
 import {
 	getServicesListAction,
 	getServiceMetricsAction,
+	externalErrCodeMetricsActions,
+	externalMetricsAvgDurationAction,
+	getExternalMetricsAction,
 	getTopEndpointsAction,
 	getFilteredTraceMetricsAction,
 } from "./metrics";
@@ -16,6 +19,9 @@ export enum ActionTypes {
 	fetchTraceItem = "FETCH_TRACE_ITEM",
 	getServicesList = "GET_SERVICE_LIST",
 	getServiceMetrics = "GET_SERVICE_METRICS",
+	getAvgDurationMetrics = "GET_AVG_DURATION_METRICS",
+	getErrCodeMetrics = "GET_ERR_CODE_METRICS",
+	getExternalMetrics = "GET_EXTERNAL_METRICS",
 	getTopEndpoints = "GET_TOP_ENDPOINTS",
 	getUsageData = "GET_USAGE_DATE",
 	updateTimeInterval = "UPDATE_TIME_INTERVAL",
@@ -32,4 +38,7 @@ export type Action =
 	| getTopEndpointsAction
 	| getUsageDataAction
 	| updateTimeIntervalAction
-	| getFilteredTraceMetricsAction;
+	| getFilteredTraceMetricsAction
+	| getExternalMetricsAction
+	| externalErrCodeMetricsActions
+	| externalMetricsAvgDurationAction;

frontend/src/store/reducers/index.ts

@@ -5,8 +5,11 @@ import {
 	servicesListItem,
 	metricItem,
 	topEndpointListItem,
+	externalMetricsItem,
+	externalMetricsAvgDurationItem,
 	usageDataItem,
 	GlobalTime,
+	externalErrCodeMetricsItem,
 	customMetricsItem,
 	TraceFilters,
 } from "../actions";
@@ -14,8 +17,11 @@ import { updateGlobalTimeReducer } from "./global";
 import {
 	filteredTraceMetricsReducer,
 	serviceMetricsReducer,
+	externalErrCodeMetricsReducer,
 	serviceTableReducer,
 	topEndpointsReducer,
+	externalMetricsReducer,
+	externalAvgDurationMetricsReducer,
 } from "./metrics";
 import { traceFiltersReducer, inputsReducer } from "./traceFilters";
 import { traceItemReducer, tracesReducer } from "./traces";
@@ -29,6 +35,9 @@ export interface StoreState {
 	servicesList: servicesListItem[];
 	serviceMetrics: metricItem[];
 	topEndpointsList: topEndpointListItem[];
+	externalMetrics: externalMetricsItem[];
+	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
+	externalErrCodeMetrics: externalErrCodeMetricsItem[];
 	usageDate: usageDataItem[];
 	globalTime: GlobalTime;
 	filteredTraceMetrics: customMetricsItem[];
@@ -42,6 +51,9 @@ const reducers = combineReducers<StoreState>({
 	servicesList: serviceTableReducer,
 	serviceMetrics: serviceMetricsReducer,
 	topEndpointsList: topEndpointsReducer,
+	externalAvgDurationMetrics: externalAvgDurationMetricsReducer,
+	externalMetrics: externalMetricsReducer,
+	externalErrCodeMetrics: externalErrCodeMetricsReducer,
 	usageDate: usageDataReducer,
 	globalTime: updateGlobalTimeReducer,
 	filteredTraceMetrics: filteredTraceMetricsReducer,

frontend/src/store/reducers/metrics.ts

@@ -4,7 +4,10 @@ import {
 	servicesListItem,
 	metricItem,
 	topEndpointListItem,
+	externalErrCodeMetricsItem,
 	customMetricsItem,
+	externalMetricsItem,
+	externalMetricsAvgDurationItem,
 } from "../actions";
 
 export const serviceTableReducer = (
@@ -66,6 +69,62 @@ export const topEndpointsReducer = (
 	}
 };
 
+export const externalAvgDurationMetricsReducer = (
+	state: externalMetricsAvgDurationItem[] = [
+		{
+			avgDuration: 0,
+			timestamp: 0,
+		},
+	],
+	action: Action,
+) => {
+	switch (action.type) {
+		case ActionTypes.getAvgDurationMetrics:
+			return action.payload;
+		default:
+			return state;
+	}
+};
+
+export const externalErrCodeMetricsReducer = (
+	state: externalErrCodeMetricsItem[] = [
+		{
+			callRate: 0,
+			externalHttpUrl: "",
+			numCalls: 0,
+			timestamp: 0,
+		},
+	],
+	action: Action,
+) => {
+	switch (action.type) {
+		case ActionTypes.getErrCodeMetrics:
+			return action.payload;
+		default:
+			return state;
+	}
+};
+
+export const externalMetricsReducer = (
+	state: externalMetricsItem[] = [
+		{
+			avgDuration: 0,
+			callRate: 0,
+			externalHttpUrl: "",
+			numCalls: 0,
+			timestamp: 0,
+		},
+	],
+	action: Action,
+) => {
+	switch (action.type) {
+		case ActionTypes.getExternalMetrics:
+			return action.payload;
+		default:
+			return state;
+	}
+};
+
 export const filteredTraceMetricsReducer = (
 	state: customMetricsItem[] = [{ timestamp: 0, value: 0 }],
 	action: Action,