From eafc2919c7dd29ed2b09b37a2caaac25cb564778 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sun, 2 May 2021 14:41:18 +0530 Subject: [PATCH 1/4] adds color tokens --- .../src/modules/Metrics/ExternalApi/graphConfig.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts b/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts index d04ef3d0cb..5e964f7854 100644 --- a/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts +++ b/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts @@ -91,7 +91,15 @@ export const getOptions = (theme: string): ChartOptions => { }; export const borderColors = [ - "rgba(250,174,50,1)", "rgba(227, 74, 51, 1.0)", + "rgba(250,174,50,1)", + "#058b00", + "#a47f00", "rgba(57, 255, 20, 1.0)", + "#45a1ff", + "#ffe900", + "#30e60b", + "#00feff", + "#8000d7", + "#ededf0" ]; From 39012d86d7625eda11c808825979bd466563b779 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sun, 2 May 2021 14:42:30 +0530 Subject: [PATCH 2/4] updates Graph title and adds initial set up for db overview --- .../src/modules/Metrics/ServiceMetrics.tsx | 35 +++++++++++++++++-- frontend/src/store/actions/metrics.ts | 26 ++++++++++++++ frontend/src/store/actions/types.ts | 3 ++ frontend/src/store/reducers/index.ts | 3 ++ frontend/src/store/reducers/metrics.ts | 20 +++++++++++ 5 files changed, 85 insertions(+), 2 deletions(-) diff --git a/frontend/src/modules/Metrics/ServiceMetrics.tsx b/frontend/src/modules/Metrics/ServiceMetrics.tsx index 19cdc2168f..245cee8b43 100644 --- a/frontend/src/modules/Metrics/ServiceMetrics.tsx +++ b/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 { 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) => { { - + { + + + + + + + + + + + + Number(s) / 1000000} + data={props.externalAvgDurationMetrics} + /> + + + + ); }; @@ -186,5 +216,6 @@ export const ServiceMetrics = withRouter( getExternalAvgDurationMetrics: getExternalAvgDurationMetrics, getTopEndpoints: getTopEndpoints, updateTimeInterval: updateTimeInterval, + getDbOverViewMetrics:getDbOverViewMetrics, })(_ServiceMetrics), ); diff --git a/frontend/src/store/actions/metrics.ts b/frontend/src/store/actions/metrics.ts index f0bb09ab48..b7701c293f 100644 --- a/frontend/src/store/actions/metrics.ts +++ b/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(apiV1 + request_string); + console.log("response", response); + // dispatch({ + // type: ActionTypes.getExternalMetrics, + // payload: response.data, + // }); + }; +}; + export const getExternalMetrics = ( serviceName: string, globalTime: GlobalTime, diff --git a/frontend/src/store/actions/types.ts b/frontend/src/store/actions/types.ts index b8a32466ba..013a4ff77d 100644 --- a/frontend/src/store/actions/types.ts +++ b/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; diff --git a/frontend/src/store/reducers/index.ts b/frontend/src/store/reducers/index.ts index d66fb530b5..57abab376c 100644 --- a/frontend/src/store/reducers/index.ts +++ b/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({ traceItem: traceItemReducer, servicesList: serviceTableReducer, serviceMetrics: serviceMetricsReducer, + dbOverviewMetrics: dbOverviewMetricsReducer, topEndpointsList: topEndpointsReducer, externalAvgDurationMetrics: externalAvgDurationMetricsReducer, externalMetrics: externalMetricsReducer, diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts index 65a0568485..1f80711a3c 100644 --- a/frontend/src/store/reducers/metrics.ts +++ b/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, From 25803e660cef048d3fad0fc74fa9d28b2cbb2a4f Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sun, 2 May 2021 16:58:34 +0530 Subject: [PATCH 3/4] integrated API, populates graph data --- .../Metrics/ExternalApi/graphConfig.ts | 2 +- .../src/modules/Metrics/ServiceMetrics.tsx | 20 +++++++++++------- frontend/src/store/actions/metrics.ts | 21 ++++++++++++------- frontend/src/store/reducers/metrics.ts | 5 +++-- 4 files changed, 30 insertions(+), 18 deletions(-) diff --git a/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts b/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts index 5e964f7854..a9a7b07a07 100644 --- a/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts +++ b/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" ]; diff --git a/frontend/src/modules/Metrics/ServiceMetrics.tsx b/frontend/src/modules/Metrics/ServiceMetrics.tsx index 245cee8b43..2f4c0c32b5 100644 --- a/frontend/src/modules/Metrics/ServiceMetrics.tsx +++ b/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 { serviceMetrics: metricItem[]; + dbOverviewMetrics: dbOverviewMetricsItem[]; getServicesMetrics: Function; getExternalMetrics: Function; getExternalErrCodeMetrics: Function; @@ -132,7 +134,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => { - + { @@ -175,10 +177,10 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => { Number(s) / 1000000} - data={props.externalAvgDurationMetrics} + data={props.dbOverviewMetrics} /> @@ -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), ); diff --git a/frontend/src/store/actions/metrics.ts b/frontend/src/store/actions/metrics.ts index b7701c293f..d0cbe036c3 100644 --- a/frontend/src/store/actions/metrics.ts +++ b/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(apiV1 + request_string); - console.log("response", response); - // dispatch({ - // type: ActionTypes.getExternalMetrics, - // payload: response.data, - // }); + const response = await api.get(apiV1 + request_string); + dispatch({ + type: ActionTypes.getDbOverviewMetrics, + payload: response.data, + }); }; }; diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts index 1f80711a3c..f1afd73738 100644 --- a/frontend/src/store/reducers/metrics.ts +++ b/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, }, From 63f0eadb6163152f27b502a77699f4837d2e51fa Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sun, 2 May 2021 17:11:02 +0530 Subject: [PATCH 4/4] fixes error percentage key --- frontend/src/modules/Metrics/ServiceMetrics.tsx | 2 +- frontend/src/store/actions/metrics.ts | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/modules/Metrics/ServiceMetrics.tsx b/frontend/src/modules/Metrics/ServiceMetrics.tsx index 2f4c0c32b5..db89f6ab1d 100644 --- a/frontend/src/modules/Metrics/ServiceMetrics.tsx +++ b/frontend/src/modules/Metrics/ServiceMetrics.tsx @@ -115,7 +115,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => { diff --git a/frontend/src/store/actions/metrics.ts b/frontend/src/store/actions/metrics.ts index d0cbe036c3..bd35b2415f 100644 --- a/frontend/src/store/actions/metrics.ts +++ b/frontend/src/store/actions/metrics.ts @@ -33,9 +33,9 @@ export interface externalMetricsAvgDurationItem { } export interface externalErrCodeMetricsItem { - callRate: number; + errorRate: number; externalHttpUrl: string; - numCalls: number; + numErrors: number; timestamp: number; } export interface topEndpointListItem { @@ -131,7 +131,9 @@ export const getDbOverViewMetrics = ( "&end=" + globalTime.maxTime + "&step=60"; - const response = await api.get(apiV1 + request_string); + const response = await api.get( + apiV1 + request_string, + ); dispatch({ type: ActionTypes.getDbOverviewMetrics, payload: response.data,