integrated API, populates graph data

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

@@ -91,6 +91,7 @@ export const getOptions = (theme: string): ChartOptions => {
 };
 
 export const borderColors = [
+	"#00feff",
 	"rgba(227, 74, 51, 1.0)",
 	"rgba(250,174,50,1)",
 	"#058b00",
@@ -99,7 +100,6 @@ export const borderColors = [
 	"#45a1ff",
 	"#ffe900",
 	"#30e60b",
-	"#00feff",
 	"#8000d7",
 	"#ededf0"
 ];

frontend/src/modules/Metrics/ServiceMetrics.tsx

@@ -13,6 +13,7 @@ import {
 	externalMetricsAvgDurationItem,
 	externalErrCodeMetricsItem,
 	externalMetricsItem,
+	dbOverviewMetricsItem,
 	getExternalAvgDurationMetrics,
 	getExternalErrCodeMetrics,
 	topEndpointListItem,
@@ -30,6 +31,7 @@ const { TabPane } = Tabs;
 
 interface ServicesMetricsProps extends RouteComponentProps<any> {
 	serviceMetrics: metricItem[];
+	dbOverviewMetrics: dbOverviewMetricsItem[];
 	getServicesMetrics: Function;
 	getExternalMetrics: Function;
 	getExternalErrCodeMetrics: Function;
@@ -132,7 +134,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
@@ -163,10 +165,10 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 					<Col span={12}>
 						<Card bodyStyle={{ padding: 10 }}>
 							<ExternalApiGraph
-								title=" External Call Error Rate"
-								keyIdentifier="externalHttpUrl"
-								dataIdentifier="numCalls"
-								data={props.externalErrCodeMetrics}
+								title="Database Calls RPS"
+								keyIdentifier="dbSystem"
+								dataIdentifier="callRate"
+								data={props.dbOverviewMetrics}
 							/>
 						</Card>
 					</Col>
@@ -175,10 +177,10 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => {
 						<Card bodyStyle={{ padding: 10 }}>
 							<ExternalApiGraph
 								label="Average Duration"
-								title="External Call duration"
+								title="DataBase Calls Avg Duration"
 								dataIdentifier="avgDuration"
 								fnDataIdentifier={(s) => Number(s) / 1000000}
-								data={props.externalAvgDurationMetrics}
+								data={props.dbOverviewMetrics}
 							/>
 						</Card>
 					</Col>
@@ -196,6 +198,7 @@ const mapStateToProps = (
 	externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
 	externalErrCodeMetrics: externalErrCodeMetricsItem[];
 	externalMetrics: externalMetricsItem[];
+	dbOverviewMetrics: dbOverviewMetricsItem[];
 	globalTime: GlobalTime;
 } => {
 	return {
@@ -204,6 +207,7 @@ const mapStateToProps = (
 		topEndpointsList: state.topEndpointsList,
 		externalMetrics: state.externalMetrics,
 		globalTime: state.globalTime,
+		dbOverviewMetrics: state.dbOverviewMetrics,
 		externalAvgDurationMetrics: state.externalAvgDurationMetrics,
 	};
 };
@@ -216,6 +220,6 @@ export const ServiceMetrics = withRouter(
 		getExternalAvgDurationMetrics: getExternalAvgDurationMetrics,
 		getTopEndpoints: getTopEndpoints,
 		updateTimeInterval: updateTimeInterval,
-		getDbOverViewMetrics:getDbOverViewMetrics,
+		getDbOverViewMetrics: getDbOverViewMetrics,
 	})(_ServiceMetrics),
 );

frontend/src/store/actions/metrics.ts

@@ -54,6 +54,14 @@ export interface externalMetricsItem {
 	timestamp: number;
 }
 
+export interface dbOverviewMetricsItem {
+	avgDuration: number;
+	callRate: number;
+	dbSystem: string;
+	numCalls: number;
+	timestamp: number;
+}
+
 export interface customMetricsItem {
 	timestamp: number;
 	value: number;
@@ -83,7 +91,7 @@ export interface getExternalMetricsAction {
 
 export interface getDbOverViewMetricsAction {
 	type: ActionTypes.getDbOverviewMetrics;
-	payload: externalMetricsItem[];
+	payload: dbOverviewMetricsItem[];
 }
 export interface getTopEndpointsAction {
 	type: ActionTypes.getTopEndpoints;
@@ -123,12 +131,11 @@ export const getDbOverViewMetrics = (
 			"&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,
-		// });
+		const response = await api.get<dbOverviewMetricsItem[]>(apiV1 + request_string);
+		dispatch<getDbOverViewMetricsAction>({
+			type: ActionTypes.getDbOverviewMetrics,
+			payload: response.data,
+		});
 	};
 };
 

frontend/src/store/reducers/metrics.ts

@@ -7,6 +7,7 @@ import {
 	externalErrCodeMetricsItem,
 	customMetricsItem,
 	externalMetricsItem,
+	dbOverviewMetricsItem,
 	externalMetricsAvgDurationItem,
 } from "../actions";
 
@@ -126,11 +127,11 @@ export const externalMetricsReducer = (
 };
 
 export const dbOverviewMetricsReducer = (
-	state: externalMetricsItem[] = [
+	state: dbOverviewMetricsItem[] = [
 		{
 			avgDuration: 0,
 			callRate: 0,
-			externalHttpUrl: "",
+			dbSystem: "",
 			numCalls: 0,
 			timestamp: 0,
 		},