adds error and external call duration graph

2025-08-08 18:39:01 +08:00 · 2021-05-01 19:13:31 +05:30 · 2021-05-01 19:13:31 +05:30 · ec52ad7636
commit ec52ad7636
parent 61c26d7727
7 changed files with 206 additions and 35 deletions
--- a/frontend/src/constants/env.ts
+++ b/frontend/src/constants/env.ts
@ -1,3 +1,3 @@
 export const ENVIRONMENT = {
-	baseURL: "http://ec2-3-135-219-130.us-east-2.compute.amazonaws.com:8080",
+	baseURL: "",
 };
--- a/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx
+++ b/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx
@ -12,7 +12,8 @@ const theme = "dark";

 interface ExternalApiGraphProps extends RouteComponentProps<any> {
 	data: externalMetricsItem[];
-	keyIdentifier: string;
+	keyIdentifier?: string;
+	label?: string;
 	title: string;
 	dataIdentifier: string;
 	fnDataIdentifier?: (s: number | string) => number | string;
@ -39,12 +40,28 @@ class ExternalApiGraph extends React.Component<ExternalApiGraphProps> {
 	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(
@ -68,9 +85,9 @@ class ExternalApiGraph extends React.Component<ExternalApiGraphProps> {
 			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)");
+			gradient.addColorStop(1, "rgba(250,174,50,1)");
 			const uniqTimestamp = uniqBy(data, "timestamp");
-      
+
 			return {
 				labels: uniqTimestamp.map(
 					(s: externalMetricsItem) => new Date(s.timestamp / 1000000),
--- a/frontend/src/modules/Metrics/ServiceMetrics.tsx
+++ b/frontend/src/modules/Metrics/ServiceMetrics.tsx
@ -9,7 +9,11 @@ import {
 	metricItem,
 	getTopEndpoints,
 	getExternalMetrics,
+	externalMetricsAvgDurationItem,
+	externalErrCodeMetricsItem,
 	externalMetricsItem,
+	getExternalAvgDurationMetrics,
+	getExternalErrCodeMetrics,
 	topEndpointListItem,
 	GlobalTime,
 	updateTimeInterval,
@ -26,9 +30,13 @@ const { TabPane } = Tabs;
 interface ServicesMetricsProps extends RouteComponentProps<any> {
 	serviceMetrics: metricItem[];
 	getServicesMetrics: Function;
-	getExternalMetrics: Function;g
+	getExternalMetrics: Function;
+	getExternalErrCodeMetrics: Function;
+	getExternalAvgDurationMetrics: Function;
 	externalMetrics: externalMetricsItem[];
 	topEndpointsList: topEndpointListItem[];
+	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
+	externalErrCodeMetrics: externalErrCodeMetricsItem[];
 	getTopEndpoints: Function;
 	globalTime: GlobalTime;
 	updateTimeInterval: Function;
@ -40,6 +48,8 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 		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) => {
@ -94,34 +104,55 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 			</TabPane>

 			<TabPane tab="External Calls" key="2">
-				<div
-					className="container"
-					style={{ display: "flex", flexFlow: "column wrap" }}
-				>
-					<div className="row">
-						<div className="col-md-6 col-sm-12 col-12">
-							<Card bodyStyle={{ padding: 10 }}>
-								<ExternalApiGraph
-									title="External Call RPS(by Address)"
-									keyIdentifier="externalHttpUrl"
-									dataIdentifier="callRate"
-									data={props.externalMetrics}
-								/>
-							</Card>
-						</div>
-						<div className="col-md-6 col-sm-12 col-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>
-						</div>
-					</div>
-				</div>
+				<Row gutter={32} style={{ margin: 20 }}>
+					<Col span={12}>
+						<Card bodyStyle={{ padding: 10 }}>
+							<ExternalApiGraph
+								title="External Call RPS(by Address)"
+								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>
 	);
@ -132,14 +163,18 @@ 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,
 	};
 };

@ -147,6 +182,8 @@ export const ServiceMetrics = withRouter(
 	connect(mapStateToProps, {
 		getServicesMetrics: getServicesMetrics,
 		getExternalMetrics: getExternalMetrics,
+		getExternalErrCodeMetrics: getExternalErrCodeMetrics,
+		getExternalAvgDurationMetrics: getExternalAvgDurationMetrics,
 		getTopEndpoints: getTopEndpoints,
 		updateTimeInterval: updateTimeInterval,
 	})(_ServiceMetrics),
--- a/frontend/src/store/actions/metrics.ts
+++ b/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;
@ -53,6 +64,14 @@ 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[];
@ -101,7 +120,6 @@ export const getExternalMetrics = (
 			globalTime.maxTime +
 			"&step=60";
 		const response = await api.get<externalMetricsItem[]>(apiV1 + request_string);
-		console.log("response", response);
 		dispatch<getExternalMetricsAction>({
 			type: ActionTypes.getExternalMetrics,
 			payload: response.data,
@ -109,6 +127,53 @@ export const getExternalMetrics = (
 	};
 };

+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,
+		);
+		console.log("Re", response);
+		dispatch<externalErrCodeMetricsActions>({
+			type: ActionTypes.getErrCodeMetrics,
+			payload: response.data,
+		});
+	};
+};
+
 export const getServicesMetrics = (
 	serviceName: string,
 	globalTime: GlobalTime,
--- a/frontend/src/store/actions/types.ts
+++ b/frontend/src/store/actions/types.ts
@ -3,6 +3,8 @@ import { updateTraceFiltersAction, updateInputTagAction } from "./traceFilters";
 import {
 	getServicesListAction,
 	getServiceMetricsAction,
+	externalErrCodeMetricsActions,
+	externalMetricsAvgDurationAction,
 	getExternalMetricsAction,
 	getTopEndpointsAction,
 	getFilteredTraceMetricsAction,
@ -17,6 +19,8 @@ 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",
@ -35,4 +39,6 @@ export type Action =
 	| getUsageDataAction
 	| updateTimeIntervalAction
 	| getFilteredTraceMetricsAction
-	| getExternalMetricsAction;
+	| getExternalMetricsAction
+	| externalErrCodeMetricsActions
+	| externalMetricsAvgDurationAction;
--- a/frontend/src/store/reducers/index.ts
+++ b/frontend/src/store/reducers/index.ts
@ -6,8 +6,10 @@ import {
 	metricItem,
 	topEndpointListItem,
 	externalMetricsItem,
+	externalMetricsAvgDurationItem,
 	usageDataItem,
 	GlobalTime,
+	externalErrCodeMetricsItem,
 	customMetricsItem,
 	TraceFilters,
 } from "../actions";
@ -15,9 +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";
@ -32,6 +36,8 @@ export interface StoreState {
 	serviceMetrics: metricItem[];
 	topEndpointsList: topEndpointListItem[];
 	externalMetrics: externalMetricsItem[];
+	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
+	externalErrCodeMetrics: externalErrCodeMetricsItem[];
 	usageDate: usageDataItem[];
 	globalTime: GlobalTime;
 	filteredTraceMetrics: customMetricsItem[];
@ -45,7 +51,9 @@ const reducers = combineReducers<StoreState>({
 	servicesList: serviceTableReducer,
 	serviceMetrics: serviceMetricsReducer,
 	topEndpointsList: topEndpointsReducer,
+	externalAvgDurationMetrics: externalAvgDurationMetricsReducer,
 	externalMetrics: externalMetricsReducer,
+	externalErrCodeMetrics: externalErrCodeMetricsReducer,
 	usageDate: usageDataReducer,
 	globalTime: updateGlobalTimeReducer,
 	filteredTraceMetrics: filteredTraceMetricsReducer,
--- a/frontend/src/store/reducers/metrics.ts
+++ b/frontend/src/store/reducers/metrics.ts
@ -4,8 +4,10 @@ import {
 	servicesListItem,
 	metricItem,
 	topEndpointListItem,
+	externalErrCodeMetricsItem,
 	customMetricsItem,
 	externalMetricsItem,
+	externalMetricsAvgDurationItem,
 } from "../actions";

 export const serviceTableReducer = (
@ -67,6 +69,42 @@ 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[] = [
 		{