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

integrated API, populates graph data

Browse Source
This commit is contained in:
dhrubesh 2021-05-02 16:58:34 +05:30
parent 39012d86d7
commit 25803e660c
4 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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