From 61c26d7727d854422c2e576a712bf78d12198a51 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sat, 1 May 2021 16:30:20 +0530 Subject: [PATCH 1/3] adds external call RPS and duration via address --- frontend/src/constants/env.ts | 2 +- .../Metrics/ExternalApi/ExternalApiGraph.tsx | 97 +++++++++++++++++++ .../Metrics/ExternalApi/graphConfig.ts | 97 +++++++++++++++++++ .../src/modules/Metrics/ExternalApi/index.tsx | 1 + .../src/modules/Metrics/ServiceMetrics.tsx | 32 +++++- frontend/src/store/actions/metrics.ts | 34 +++++++ frontend/src/store/actions/types.ts | 5 +- frontend/src/store/reducers/index.ts | 4 + frontend/src/store/reducers/metrics.ts | 21 ++++ 9 files changed, 286 insertions(+), 7 deletions(-) create mode 100644 frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx create mode 100644 frontend/src/modules/Metrics/ExternalApi/graphConfig.ts create mode 100644 frontend/src/modules/Metrics/ExternalApi/index.tsx diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts index 96256e7f4c..971e21c877 100644 --- a/frontend/src/constants/env.ts +++ b/frontend/src/constants/env.ts @@ -1,3 +1,3 @@ export const ENVIRONMENT = { - baseURL: "", + baseURL: "http://ec2-3-135-219-130.us-east-2.compute.amazonaws.com:8080", }; diff --git a/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx b/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx new file mode 100644 index 0000000000..b26aa5783d --- /dev/null +++ b/frontend/src/modules/Metrics/ExternalApi/ExternalApiGraph.tsx @@ -0,0 +1,97 @@ +import React from "react"; +import { Line as ChartJSLine } from "react-chartjs-2"; +import { ChartOptions } from "chart.js"; +import { withRouter } from "react-router"; +import { RouteComponentProps } from "react-router-dom"; +import styled from "styled-components"; +import { getOptions, borderColors } from "./graphConfig"; +import { externalMetricsItem } from "../../store/actions/metrics"; +import { uniqBy, filter } from "lodash"; + +const theme = "dark"; + +interface ExternalApiGraphProps extends RouteComponentProps { + data: externalMetricsItem[]; + keyIdentifier: string; + title: string; + dataIdentifier: string; + fnDataIdentifier?: (s: number | string) => number | string; +} + +interface ExternalApiGraph { + chartRef: any; +} + +class ExternalApiGraph extends React.Component { + constructor(props: ExternalApiGraphProps) { + super(props); + this.chartRef = React.createRef(); + } + + state = { + xcoordinate: 0, + ycoordinate: 0, + showpopUp: false, + firstpoint_ts: 0, + // graphInfo:{} + }; + + render() { + const { + title, + data, + dataIdentifier, + keyIdentifier, + fnDataIdentifier, + } = this.props; + const getDataSets = () => { + const uniq = uniqBy(data, keyIdentifier); + return uniq.map((obj: externalMetricsItem, i: number) => { + const _data = filter( + data, + (s: externalMetricsItem) => s[keyIdentifier] === obj[keyIdentifier], + ); + return { + label: obj[keyIdentifier], + data: _data.map((s: externalMetricsItem) => + fnDataIdentifier + ? fnDataIdentifier(s[dataIdentifier]) + : s[dataIdentifier], + ), + pointRadius: 0.5, + borderColor: borderColors[i] || borderColors[0], // Can also add transparency in border color + borderWidth: 2, + }; + }); + }; + const data_chartJS = (canvas: any) => { + 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)"); + const uniqTimestamp = uniqBy(data, "timestamp"); + + return { + labels: uniqTimestamp.map( + (s: externalMetricsItem) => new Date(s.timestamp / 1000000), + ), + datasets: getDataSets(), + }; + }; + + return ( +
+
+
{title}
+ +
+
+ ); + } +} + +export default withRouter(ExternalApiGraph); diff --git a/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts b/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts new file mode 100644 index 0000000000..d04ef3d0cb --- /dev/null +++ b/frontend/src/modules/Metrics/ExternalApi/graphConfig.ts @@ -0,0 +1,97 @@ +import { ChartOptions } from "chart.js"; + +export const getOptions = (theme: string): ChartOptions => { + return { + maintainAspectRatio: true, + responsive: true, + + title: { + display: true, + text: "", + fontSize: 20, + position: "top", + padding: 8, + fontFamily: "Arial", + fontStyle: "regular", + fontColor: theme === "dark" ? "rgb(200, 200, 200)" : "rgb(20, 20, 20)", + }, + + legend: { + display: true, + position: "bottom", + align: "center", + + labels: { + fontColor: theme === "dark" ? "rgb(200, 200, 200)" : "rgb(20, 20, 20)", + fontSize: 10, + boxWidth: 10, + usePointStyle: true, + }, + }, + + tooltips: { + mode: "label", + bodyFontSize: 12, + titleFontSize: 12, + + callbacks: { + label: function (tooltipItem, data) { + if (typeof tooltipItem.yLabel === "number") { + return ( + data.datasets![tooltipItem.datasetIndex!].label + + " : " + + tooltipItem.yLabel.toFixed(2) + ); + } else { + return ""; + } + }, + }, + }, + + scales: { + yAxes: [ + { + stacked: false, + ticks: { + beginAtZero: false, + fontSize: 10, + autoSkip: true, + maxTicksLimit: 6, + }, + + gridLines: { + // You can change the color, the dash effect, the main axe color, etc. + borderDash: [1, 4], + color: "#D3D3D3", + lineWidth: 0.25, + }, + }, + ], + xAxes: [ + { + type: "time", + // time: { + // unit: 'second' + // }, + distribution: "linear", + //'linear': data are spread according to their time (distances can vary) + // From https://www.chartjs.org/docs/latest/axes/cartesian/time.html + ticks: { + beginAtZero: false, + fontSize: 10, + autoSkip: true, + maxTicksLimit: 10, + }, + // gridLines: false, --> not a valid option + }, + ], + }, + }; +}; + +export const borderColors = [ + "rgba(250,174,50,1)", + "rgba(227, 74, 51, 1.0)", + "rgba(57, 255, 20, 1.0)", +]; diff --git a/frontend/src/modules/Metrics/ExternalApi/index.tsx b/frontend/src/modules/Metrics/ExternalApi/index.tsx new file mode 100644 index 0000000000..7333a56db0 --- /dev/null +++ b/frontend/src/modules/Metrics/ExternalApi/index.tsx @@ -0,0 +1 @@ +export { default } from "./ExternalApiGraph"; diff --git a/frontend/src/modules/Metrics/ServiceMetrics.tsx b/frontend/src/modules/Metrics/ServiceMetrics.tsx index 51dee6cf23..87dbfa83fe 100644 --- a/frontend/src/modules/Metrics/ServiceMetrics.tsx +++ b/frontend/src/modules/Metrics/ServiceMetrics.tsx @@ -8,22 +8,26 @@ import { getServicesMetrics, metricItem, getTopEndpoints, + getExternalMetrics, + externalMetricsItem, topEndpointListItem, GlobalTime, updateTimeInterval, -} from "../../store/actions"; +} from "Src/store/actions"; import { StoreState } from "../../store/reducers"; import LatencyLineChart from "./LatencyLineChart"; import RequestRateChart from "./RequestRateChart"; import ErrorRateChart from "./ErrorRateChart"; import TopEndpointsTable from "./TopEndpointsTable"; import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query"; - +import ExternalApiGraph from "./ExternalApi"; const { TabPane } = Tabs; interface ServicesMetricsProps extends RouteComponentProps { serviceMetrics: metricItem[]; getServicesMetrics: Function; + getExternalMetrics: Function;g + externalMetrics: externalMetricsItem[]; topEndpointsList: topEndpointListItem[]; getTopEndpoints: Function; globalTime: GlobalTime; @@ -35,6 +39,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => { useEffect(() => { props.getServicesMetrics(servicename, props.globalTime); props.getTopEndpoints(servicename, props.globalTime); + props.getExternalMetrics(servicename, props.globalTime); }, [props.globalTime, servicename]); const onTracePopupClick = (timestamp: number) => { @@ -89,17 +94,31 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => { -
Coming Soon..
- {/* */} + + +
- {/* */} + + Number(s) / 1000000} + data={props.externalMetrics} + /> +
@@ -113,11 +132,13 @@ const mapStateToProps = ( ): { serviceMetrics: metricItem[]; topEndpointsList: topEndpointListItem[]; + externalMetrics: externalMetricsItem[]; globalTime: GlobalTime; } => { return { serviceMetrics: state.serviceMetrics, topEndpointsList: state.topEndpointsList, + externalMetrics: state.externalMetrics, globalTime: state.globalTime, }; }; @@ -125,6 +146,7 @@ const mapStateToProps = ( export const ServiceMetrics = withRouter( connect(mapStateToProps, { getServicesMetrics: getServicesMetrics, + getExternalMetrics: getExternalMetrics, getTopEndpoints: getTopEndpoints, updateTimeInterval: updateTimeInterval, })(_ServiceMetrics), diff --git a/frontend/src/store/actions/metrics.ts b/frontend/src/store/actions/metrics.ts index 68bc0edc72..2ee1e29166 100644 --- a/frontend/src/store/actions/metrics.ts +++ b/frontend/src/store/actions/metrics.ts @@ -35,6 +35,14 @@ export interface topEndpointListItem { name: string; } +export interface externalMetricsItem { + avgDuration: number; + callRate: number; + externalHttpUrl: string; + numCalls: number; + timestamp: number; +} + export interface customMetricsItem { timestamp: number; value: number; @@ -49,6 +57,10 @@ export interface getServiceMetricsAction { type: ActionTypes.getServiceMetrics; payload: metricItem[]; } +export interface getExternalMetricsAction { + type: ActionTypes.getExternalMetrics; + payload: externalMetricsItem[]; +} export interface getTopEndpointsAction { type: ActionTypes.getTopEndpoints; @@ -75,6 +87,28 @@ export const getServicesList = (globalTime: GlobalTime) => { }; }; +export const getExternalMetrics = ( + serviceName: string, + globalTime: GlobalTime, +) => { + return async (dispatch: Dispatch) => { + let request_string = + "/service/external?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 getServicesMetrics = ( serviceName: string, globalTime: GlobalTime, diff --git a/frontend/src/store/actions/types.ts b/frontend/src/store/actions/types.ts index 12a1ca15f1..60c76da551 100644 --- a/frontend/src/store/actions/types.ts +++ b/frontend/src/store/actions/types.ts @@ -3,6 +3,7 @@ import { updateTraceFiltersAction, updateInputTagAction } from "./traceFilters"; import { getServicesListAction, getServiceMetricsAction, + getExternalMetricsAction, getTopEndpointsAction, getFilteredTraceMetricsAction, } from "./metrics"; @@ -16,6 +17,7 @@ export enum ActionTypes { fetchTraceItem = "FETCH_TRACE_ITEM", getServicesList = "GET_SERVICE_LIST", getServiceMetrics = "GET_SERVICE_METRICS", + getExternalMetrics = "GET_EXTERNAL_METRICS", getTopEndpoints = "GET_TOP_ENDPOINTS", getUsageData = "GET_USAGE_DATE", updateTimeInterval = "UPDATE_TIME_INTERVAL", @@ -32,4 +34,5 @@ export type Action = | getTopEndpointsAction | getUsageDataAction | updateTimeIntervalAction - | getFilteredTraceMetricsAction; + | getFilteredTraceMetricsAction + | getExternalMetricsAction; diff --git a/frontend/src/store/reducers/index.ts b/frontend/src/store/reducers/index.ts index 565b8c1d7f..7ddd4bd29c 100644 --- a/frontend/src/store/reducers/index.ts +++ b/frontend/src/store/reducers/index.ts @@ -5,6 +5,7 @@ import { servicesListItem, metricItem, topEndpointListItem, + externalMetricsItem, usageDataItem, GlobalTime, customMetricsItem, @@ -16,6 +17,7 @@ import { serviceMetricsReducer, serviceTableReducer, topEndpointsReducer, + externalMetricsReducer, } from "./metrics"; import { traceFiltersReducer, inputsReducer } from "./traceFilters"; import { traceItemReducer, tracesReducer } from "./traces"; @@ -29,6 +31,7 @@ export interface StoreState { servicesList: servicesListItem[]; serviceMetrics: metricItem[]; topEndpointsList: topEndpointListItem[]; + externalMetrics: externalMetricsItem[]; usageDate: usageDataItem[]; globalTime: GlobalTime; filteredTraceMetrics: customMetricsItem[]; @@ -42,6 +45,7 @@ const reducers = combineReducers({ servicesList: serviceTableReducer, serviceMetrics: serviceMetricsReducer, topEndpointsList: topEndpointsReducer, + externalMetrics: externalMetricsReducer, usageDate: usageDataReducer, globalTime: updateGlobalTimeReducer, filteredTraceMetrics: filteredTraceMetricsReducer, diff --git a/frontend/src/store/reducers/metrics.ts b/frontend/src/store/reducers/metrics.ts index 1bf0be0c53..2926a3d8c6 100644 --- a/frontend/src/store/reducers/metrics.ts +++ b/frontend/src/store/reducers/metrics.ts @@ -5,6 +5,7 @@ import { metricItem, topEndpointListItem, customMetricsItem, + externalMetricsItem, } from "../actions"; export const serviceTableReducer = ( @@ -66,6 +67,26 @@ export const topEndpointsReducer = ( } }; +export const externalMetricsReducer = ( + state: externalMetricsItem[] = [ + { + avgDuration: 0, + callRate: 0, + externalHttpUrl: "", + numCalls: 0, + timestamp: 0, + }, + ], + action: Action, +) => { + switch (action.type) { + case ActionTypes.getExternalMetrics: + return action.payload; + default: + return state; + } +}; + export const filteredTraceMetricsReducer = ( state: customMetricsItem[] = [{ timestamp: 0, value: 0 }], action: Action, From ec52ad76369938e478287588897492ba46034dcf Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sat, 1 May 2021 19:13:31 +0530 Subject: [PATCH 2/3] adds error and external call duration graph --- frontend/src/constants/env.ts | 2 +- .../Metrics/ExternalApi/ExternalApiGraph.tsx | 23 ++++- .../src/modules/Metrics/ServiceMetrics.tsx | 95 +++++++++++++------ frontend/src/store/actions/metrics.ts | 67 ++++++++++++- frontend/src/store/actions/types.ts | 8 +- frontend/src/store/reducers/index.ts | 8 ++ frontend/src/store/reducers/metrics.ts | 38 ++++++++ 7 files changed, 206 insertions(+), 35 deletions(-) diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts index 971e21c877..43d7dc4acf 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 b26aa5783d..1459de5e91 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 87dbfa83fe..54e5a05636 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 2ee1e29166..3fbd205771 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 60c76da551..b8a32466ba 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 7ddd4bd29c..d66fb530b5 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 2926a3d8c6..65a0568485 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[] = [ { From f412573972c11714ab3889aa66dd9071cc5c1c9d Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sat, 1 May 2021 19:18:18 +0530 Subject: [PATCH 3/3] updates label of graph --- frontend/src/modules/Metrics/ServiceMetrics.tsx | 2 +- frontend/src/store/actions/metrics.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/modules/Metrics/ServiceMetrics.tsx b/frontend/src/modules/Metrics/ServiceMetrics.tsx index 54e5a05636..19cdc2168f 100644 --- a/frontend/src/modules/Metrics/ServiceMetrics.tsx +++ b/frontend/src/modules/Metrics/ServiceMetrics.tsx @@ -108,7 +108,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => { ( apiV1 + request_string, ); - console.log("Re", response); + dispatch({ type: ActionTypes.getErrCodeMetrics, payload: response.data,