updates Graph title and adds initial set up for db overview

frontend/src/modules/Metrics/ServiceMetrics.tsx

@@ -8,6 +8,7 @@ import {
 	getServicesMetrics,
 	metricItem,
 	getTopEndpoints,
+	getDbOverViewMetrics,
 	getExternalMetrics,
 	externalMetricsAvgDurationItem,
 	externalErrCodeMetricsItem,
@@ -33,6 +34,7 @@ interface ServicesMetricsProps extends RouteComponentProps<any> {
 	getExternalMetrics: Function;
 	getExternalErrCodeMetrics: Function;
 	getExternalAvgDurationMetrics: Function;
+	getDbOverViewMetrics: Function;
 	externalMetrics: externalMetricsItem[];
 	topEndpointsList: topEndpointListItem[];
 	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
@@ -50,6 +52,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 		props.getExternalMetrics(servicename, props.globalTime);
 		props.getExternalErrCodeMetrics(servicename, props.globalTime);
 		props.getExternalAvgDurationMetrics(servicename, props.globalTime);
+		props.getDbOverViewMetrics(servicename, props.globalTime);
 	}, [props.globalTime, servicename]);
 
 	const onTracePopupClick = (timestamp: number) => {
@@ -108,7 +111,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 					<Col span={12}>
 						<Card bodyStyle={{ padding: 10 }}>
 							<ExternalApiGraph
-								title=" External Call Error Rate"
+								title="External Call Error Percentage (%)"
 								keyIdentifier="externalHttpUrl"
 								dataIdentifier="numCalls"
 								data={props.externalErrCodeMetrics}
@@ -129,7 +132,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 					</Col>
 				</Row>
 
-				<Row gutter={32} style={{ margin: 20 }}>
+				<Row gutter={32} style={{ margin: 20 }}> 
 					<Col span={12}>
 						<Card bodyStyle={{ padding: 10 }}>
 							<ExternalApiGraph
@@ -154,6 +157,33 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 					</Col>
 				</Row>
 			</TabPane>
+
+			<TabPane tab="Database Calls" key="3">
+				<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>
+			</TabPane>
 		</Tabs>
 	);
 };
@@ -186,5 +216,6 @@ export const ServiceMetrics = withRouter(
 		getExternalAvgDurationMetrics: getExternalAvgDurationMetrics,
 		getTopEndpoints: getTopEndpoints,
 		updateTimeInterval: updateTimeInterval,
+		getDbOverViewMetrics:getDbOverViewMetrics,
 	})(_ServiceMetrics),
 );

frontend/src/store/actions/metrics.ts

@@ -81,6 +81,10 @@ export interface getExternalMetricsAction {
 	payload: externalMetricsItem[];
 }
 
+export interface getDbOverViewMetricsAction {
+	type: ActionTypes.getDbOverviewMetrics;
+	payload: externalMetricsItem[];
+}
 export interface getTopEndpointsAction {
 	type: ActionTypes.getTopEndpoints;
 	payload: topEndpointListItem[];
@@ -106,6 +110,28 @@ export const getServicesList = (globalTime: GlobalTime) => {
 	};
 };
 
+export const getDbOverViewMetrics = (
+	serviceName: string,
+	globalTime: GlobalTime,
+) => {
+	return async (dispatch: Dispatch) => {
+		let request_string =
+			"/service/dbOverview?service=" +
+			serviceName +
+			"&start=" +
+			globalTime.minTime +
+			"&end=" +
+			globalTime.maxTime +
+			"&step=60";
+		const response = await api.get<any>(apiV1 + request_string);
+		console.log("response", response);
+		// dispatch<getExternalMetricsAction>({
+		// 	type: ActionTypes.getExternalMetrics,
+		// 	payload: response.data,
+		// });
+	};
+};
+
 export const getExternalMetrics = (
 	serviceName: string,
 	globalTime: GlobalTime,

frontend/src/store/actions/types.ts

@@ -8,6 +8,7 @@ import {
 	getExternalMetricsAction,
 	getTopEndpointsAction,
 	getFilteredTraceMetricsAction,
+	getDbOverViewMetricsAction,
 } from "./metrics";
 import { getUsageDataAction } from "./usage";
 import { updateTimeIntervalAction } from "./global";
@@ -21,6 +22,7 @@ export enum ActionTypes {
 	getServiceMetrics = "GET_SERVICE_METRICS",
 	getAvgDurationMetrics = "GET_AVG_DURATION_METRICS",
 	getErrCodeMetrics = "GET_ERR_CODE_METRICS",
+	getDbOverviewMetrics = "GET_DB_OVERVIEW_METRICS",
 	getExternalMetrics = "GET_EXTERNAL_METRICS",
 	getTopEndpoints = "GET_TOP_ENDPOINTS",
 	getUsageData = "GET_USAGE_DATE",
@@ -41,4 +43,5 @@ export type Action =
 	| getFilteredTraceMetricsAction
 	| getExternalMetricsAction
 	| externalErrCodeMetricsActions
+	| getDbOverViewMetricsAction
 	| externalMetricsAvgDurationAction;

frontend/src/store/reducers/index.ts

@@ -20,6 +20,7 @@ import {
 	externalErrCodeMetricsReducer,
 	serviceTableReducer,
 	topEndpointsReducer,
+	dbOverviewMetricsReducer,
 	externalMetricsReducer,
 	externalAvgDurationMetricsReducer,
 } from "./metrics";
@@ -36,6 +37,7 @@ export interface StoreState {
 	serviceMetrics: metricItem[];
 	topEndpointsList: topEndpointListItem[];
 	externalMetrics: externalMetricsItem[];
+	dbOverviewMetrics: externalMetricsItem[];
 	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
 	externalErrCodeMetrics: externalErrCodeMetricsItem[];
 	usageDate: usageDataItem[];
@@ -50,6 +52,7 @@ const reducers = combineReducers<StoreState>({
 	traceItem: traceItemReducer,
 	servicesList: serviceTableReducer,
 	serviceMetrics: serviceMetricsReducer,
+	dbOverviewMetrics: dbOverviewMetricsReducer,
 	topEndpointsList: topEndpointsReducer,
 	externalAvgDurationMetrics: externalAvgDurationMetricsReducer,
 	externalMetrics: externalMetricsReducer,

frontend/src/store/reducers/metrics.ts

@@ -125,6 +125,26 @@ export const externalMetricsReducer = (
 	}
 };
 
+export const dbOverviewMetricsReducer = (
+	state: externalMetricsItem[] = [
+		{
+			avgDuration: 0,
+			callRate: 0,
+			externalHttpUrl: "",
+			numCalls: 0,
+			timestamp: 0,
+		},
+	],
+	action: Action,
+) => {
+	switch (action.type) {
+		case ActionTypes.getDbOverviewMetrics:
+			return action.payload;
+		default:
+			return state;
+	}
+};
+
 export const filteredTraceMetricsReducer = (
 	state: customMetricsItem[] = [{ timestamp: 0, value: 0 }],
 	action: Action,