diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts index 971e21c877ec..43d7dc4acf14 100644 --- 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: "", }; diff --git a/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx b/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx index b26aa5783d1e..1459de5e916f 100644 --- 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 { 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 { 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 { 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), diff --git a/frontend/src/modules/Metrics/ServiceMetrics.tsx b/frontend/src/modules/Metrics/ServiceMetrics.tsx index 87dbfa83feca..54e5a0563653 100644 --- 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 { 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) => { -
-
-
- - - -
-
- - Number(s) / 1000000} - data={props.externalMetrics} - /> - -
-
-
+ + + + + + + + + + Number(s) / 1000000} + data={props.externalAvgDurationMetrics} + /> + + + + + + + + + + + + + + Number(s) / 1000000} + data={props.externalMetrics} + /> + + + ); @@ -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), diff --git a/frontend/src/store/actions/metrics.ts b/frontend/src/store/actions/metrics.ts index 2ee1e29166f4..3fbd205771a0 100644 --- 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(apiV1 + request_string); - console.log("response", response); dispatch({ 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( + apiV1 + request_string, + ); + dispatch({ + 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( + apiV1 + request_string, + ); + console.log("Re", response); + dispatch({ + type: ActionTypes.getErrCodeMetrics, + payload: response.data, + }); + }; +}; + export const getServicesMetrics = ( serviceName: string, globalTime: GlobalTime, diff --git a/frontend/src/store/actions/types.ts b/frontend/src/store/actions/types.ts index 60c76da5514c..b8a32466ba31 100644 --- 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; diff --git a/frontend/src/store/reducers/index.ts b/frontend/src/store/reducers/index.ts index 7ddd4bd29c8d..d66fb530b571 100644 --- 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({ servicesList: serviceTableReducer, serviceMetrics: serviceMetricsReducer, topEndpointsList: topEndpointsReducer, + externalAvgDurationMetrics: externalAvgDurationMetricsReducer, externalMetrics: externalMetricsReducer, + externalErrCodeMetrics: externalErrCodeMetricsReducer, usageDate: usageDataReducer, globalTime: updateGlobalTimeReducer, filteredTraceMetrics: filteredTraceMetricsReducer, diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts index 2926a3d8c6f1..65a056848538 100644 --- 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[] = [ {