GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-11 01:09:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'pull-68' into main

Browse Source
This commit is contained in:
Ankit Nayan 2021-05-02 17:44:14 +05:30
commit c22d6dd1cc
6 changed files with 110 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/modules/Metrics/ExternalApi/graphConfig.ts
View File

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

39
frontend/src/modules/Metrics/ServiceMetrics.tsx
View File

@ -9,10 +9,12 @@ import {
getServicesMetrics,
metricItem,
getTopEndpoints,
getDbOverViewMetrics,
getExternalMetrics,
externalMetricsAvgDurationItem,
externalErrCodeMetricsItem,
externalMetricsItem,
dbOverviewMetricsItem,
getExternalAvgDurationMetrics,
getExternalErrCodeMetrics,
topEndpointListItem,
@ -30,10 +32,12 @@ const { TabPane } = Tabs;
interface ServicesMetricsProps extends RouteComponentProps<any> {
serviceMetrics: metricItem[];
dbOverviewMetrics: dbOverviewMetricsItem[];
getServicesMetrics: Function;
getExternalMetrics: Function;
getExternalErrCodeMetrics: Function;
getExternalAvgDurationMetrics: Function;
getDbOverViewMetrics: Function;
externalMetrics: externalMetricsItem[];
topEndpointsList: topEndpointListItem[];
externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
@ -51,6 +55,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) => {
@ -129,9 +134,9 @@ 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"
dataIdentifier="errorRate"
data={props.externalErrCodeMetrics}
/>
</Card>
@ -175,6 +180,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="Database Calls RPS"
keyIdentifier="dbSystem"
dataIdentifier="callRate"
data={props.dbOverviewMetrics}
/>
</Card>
</Col>
<Col span={12}>
<Card bodyStyle={{ padding: 10 }}>
<ExternalApiGraph
label="Average Duration"
title="DataBase Calls Avg Duration"
dataIdentifier="avgDuration"
fnDataIdentifier={(s) => Number(s) / 1000000}
data={props.dbOverviewMetrics}
/>
</Card>
</Col>
</Row>
</TabPane>
</Tabs>
);
};
@ -187,6 +219,7 @@ const mapStateToProps = (
externalAvgDurationMetrics: externalMetricsAvgDurationItem[];
externalErrCodeMetrics: externalErrCodeMetricsItem[];
externalMetrics: externalMetricsItem[];
dbOverviewMetrics: dbOverviewMetricsItem[];
globalTime: GlobalTime;
} => {
return {
@ -195,6 +228,7 @@ const mapStateToProps = (
topEndpointsList: state.topEndpointsList,
externalMetrics: state.externalMetrics,
globalTime: state.globalTime,
dbOverviewMetrics: state.dbOverviewMetrics,
externalAvgDurationMetrics: state.externalAvgDurationMetrics,
};
};
@ -207,5 +241,6 @@ export const ServiceMetrics = withRouter(
getExternalAvgDurationMetrics: getExternalAvgDurationMetrics,
getTopEndpoints: getTopEndpoints,
updateTimeInterval: updateTimeInterval,
getDbOverViewMetrics: getDbOverViewMetrics,
})(_ServiceMetrics),
);

39
frontend/src/store/actions/metrics.ts
View File

@ -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 {
@ -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;
@ -81,6 +89,10 @@ export interface getExternalMetricsAction {
payload: externalMetricsItem[];
}
export interface getDbOverViewMetricsAction {
type: ActionTypes.getDbOverviewMetrics;
payload: dbOverviewMetricsItem[];
}
export interface getTopEndpointsAction {
type: ActionTypes.getTopEndpoints;
payload: topEndpointListItem[];
@ -106,6 +118,29 @@ 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<dbOverviewMetricsItem[]>(
apiV1 + request_string,
);
dispatch<getDbOverViewMetricsAction>({
type: ActionTypes.getDbOverviewMetrics,
payload: response.data,
});
};
};
export const getExternalMetrics = (
serviceName: string,
globalTime: GlobalTime,

3
frontend/src/store/actions/types.ts
View File

@ -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;

3
frontend/src/store/reducers/index.ts
View File

@ -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,

21
frontend/src/store/reducers/metrics.ts
View File

@ -7,6 +7,7 @@ import {
externalErrCodeMetricsItem,
customMetricsItem,
externalMetricsItem,
dbOverviewMetricsItem,
externalMetricsAvgDurationItem,
} from "../actions";
@ -125,6 +126,26 @@ export const externalMetricsReducer = (
}
};
export const dbOverviewMetricsReducer = (
state: dbOverviewMetricsItem[] = [
{
avgDuration: 0,
callRate: 0,
dbSystem: "",
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,