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

links end points to traces

Browse Source
This commit is contained in:
dhrubesh 2021-05-01 20:27:46 +05:30
parent f412573972
commit a59e33d241
3 changed files with 67 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/constants/query.ts
View File

@ -3,4 +3,5 @@ export enum METRICS_PAGE_QUERY_PARAM {
startTime = "startTime",
endTime = "endTime",
service = "service",
operation = "operation",
}

51
frontend/src/modules/Metrics/TopEndpointsTable.tsx
View File

@ -1,8 +1,12 @@
import React from "react";
import { NavLink } from "react-router-dom";
import { Table } from "antd";
import { Table, Button } from "antd";
import { connect } from "react-redux";
import styled from "styled-components";
import { useHistory, useParams } from "react-router-dom";
import { topEndpointListItem } from "../../store/actions/metrics";
import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
import { GlobalTime } from "Src/store/actions";
import { StoreState } from "Src/store/reducers";
const Wrapper = styled.div`
padding-top: 10px;
@ -22,16 +26,42 @@ const Wrapper = styled.div`
interface TopEndpointsTableProps {
data: topEndpointListItem[];
globalTime: GlobalTime;
}
const TopEndpointsTable = (props: TopEndpointsTableProps) => {
const _TopEndpointsTable = (props: TopEndpointsTableProps) => {
const history = useHistory();
const params = useParams<{ servicename: string }>();
const handleOnClick = (operation: string) => {
const urlParams = new URLSearchParams();
const { servicename } = params;
const { maxTime, minTime } = props.globalTime;
urlParams.set(
METRICS_PAGE_QUERY_PARAM.startTime,
String(Number(minTime) / 1000000),
);
urlParams.set(
METRICS_PAGE_QUERY_PARAM.endTime,
String(Number(maxTime) / 1000000),
);
if (servicename) {
urlParams.set(METRICS_PAGE_QUERY_PARAM.service, servicename);
}
urlParams.set(METRICS_PAGE_QUERY_PARAM.operation, operation);
history.push(`/traces?${urlParams.toString()}`);
};
const columns: any = [
{
title: "Name",
dataIndex: "name",
key: "name",
render: (text: string) => <NavLink to={"/" + text}>{text}</NavLink>,
render: (text: string) => (
<Button type="link" onClick={() => handleOnClick(text)}>
{text}
</Button>
),
},
{
title: "P50 (in ms)",
@ -73,4 +103,17 @@ const TopEndpointsTable = (props: TopEndpointsTableProps) => {
);
};
const mapStateToProps = (
state: StoreState,
): {
globalTime: GlobalTime;
} => {
return { globalTime: state.globalTime };
};
export const TopEndpointsTable = connect(
mapStateToProps,
null,
)(_TopEndpointsTable);
export default TopEndpointsTable;

27
frontend/src/modules/Traces/TraceFilter.tsx
View File

@ -62,9 +62,22 @@ const _TraceFilter = (props: TraceFilterProps) => {
setServiceList(response.data);
})
.then(() => {
const operationName = urlParams.get(METRICS_PAGE_QUERY_PARAM.operation);
const serviceName = urlParams.get(METRICS_PAGE_QUERY_PARAM.service);
if (serviceName) {
handleChangeService(serviceName);
if (operationName && serviceName) {
props.updateTraceFilters({
...props.traceFilters,
operation: operationName,
service: serviceName,
});
populateData(serviceName);
} else {
if (operationName) {
handleChangeOperation(operationName);
}
if (serviceName) {
handleChangeService(serviceName);
}
}
});
}, []);
@ -144,15 +157,11 @@ const _TraceFilter = (props: TraceFilterProps) => {
const [form_basefilter] = Form.useForm();
function handleChange(value: string) {
console.log(value);
}
function handleChangeOperation(value: string) {
props.updateTraceFilters({ ...props.traceFilters, operation: value });
}
function handleChangeService(value: string) {
function populateData(value: string) {
let service_request = "/service/" + value + "/operations";
api.get<string[]>(apiV1 + service_request).then((response) => {
// form_basefilter.resetFields(['operation',])
@ -165,7 +174,9 @@ const _TraceFilter = (props: TraceFilterProps) => {
.then((response) => {
setTagKeyOptions(response.data);
});
}
function handleChangeService(value: string) {
populateData(value);
props.updateTraceFilters({ ...props.traceFilters, service: value });
}