GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-28 20:52:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'issue-92' of github.com-dhrubesh:SigNoz/signoz into issue-92

Browse Source
This commit is contained in:
dhrubesh 2021-05-16 18:36:18 +05:30
commit 2bc01e50bd
3 changed files with 51 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/modules/Servicemap/ServiceMap.tsx
View File

@ -10,7 +10,8 @@ import {
import { Spin } from "antd"; import { Spin } from "antd";
import styled from "styled-components"; import styled from "styled-components";
import { StoreState } from "../../store/reducers"; import { StoreState } from "../../store/reducers";
import { getGraphData } from "./utils"; import { getZoomPx, getGraphData } from "./utils";
import { getGraphData, getTooltip } from "./utils";
import SelectService from "./SelectService"; import SelectService from "./SelectService";
import { ForceGraph2D } from "react-force-graph"; import { ForceGraph2D } from "react-force-graph";
@ -72,7 +73,7 @@ const ServiceMap = (props: ServiceMapProps) => {
} }
const zoomToService = (value: string) => { const zoomToService = (value: string) => {
fgRef && fgRef.current.zoomToFit(700, 380, (e) => e.id === value); fgRef && fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value);
}; };
const { nodes, links } = getGraphData(serviceMap); const { nodes, links } = getGraphData(serviceMap);
@ -90,7 +91,7 @@ const ServiceMap = (props: ServiceMapProps) => {
fgRef.current.zoomToFit(100, 120); fgRef.current.zoomToFit(100, 120);
}} }}
graphData={graphData} graphData={graphData}
nodeLabel="id" nodeLabel={getTooltip}
linkAutoColorBy={(d) => d.target} linkAutoColorBy={(d) => d.target}
linkDirectionalParticles="value" linkDirectionalParticles="value"
linkDirectionalParticleSpeed={(d) => d.value} linkDirectionalParticleSpeed={(d) => d.value}
@ -112,21 +113,7 @@ const ServiceMap = (props: ServiceMapProps) => {
onNodeClick={(node) => { onNodeClick={(node) => {
const tooltip = document.querySelector(".graph-tooltip"); const tooltip = document.querySelector(".graph-tooltip");
if (tooltip && node) { if (tooltip && node) {
tooltip.innerHTML = `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;"> tooltip.innerHTML = getTooltip(node);
<div style="font-weight:bold; margin-bottom:16px;">${node.id}</div>
<div class="keyval">
<div class="key">P99 latency:</div>
<div class="val">${node.p99 / 1000000}ms</div>
</div>
<div class="keyval">
<div class="key">Request:</div>
<div class="val">${node.callRate}/sec</div>
</div>
<div class="keyval">
<div class="key">Error Rate:</div>
<div class="val">${node.errorRate}%</div>
</div>
</div>`;
} }
}} }}
nodePointerAreaPaint={(node, color, ctx) => { nodePointerAreaPaint={(node, color, ctx) => {

34
frontend/src/modules/Servicemap/utils.ts
View File

@ -73,3 +73,37 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
links, links,
}; };
}; };
export const getZoomPx = (): number => {
const width = window.screen.width;
if (width < 1400) {
return 190;
} else if (width > 1400 && width < 2500) {
return 380;
} else if (width > 2500) {
return 360;
}
export const getTooltip = (node: {
p99: number;
errorRate: number;
callRate: number;
id: string;
}) => {
return `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;">
<div style="font-weight:bold; margin-bottom:16px;">${node.id}</div>
<div class="keyval">
<div class="key">P99 latency:</div>
<div class="val">${node.p99 / 1000000}ms</div>
</div>
<div class="keyval">
<div class="key">Request:</div>
<div class="val">${node.callRate}/sec</div>
</div>
<div class="keyval">
<div class="key">Error Rate:</div>
<div class="val">${node.errorRate}%</div>
</div>
</div>`;
};

10
frontend/src/store/actions/serviceMap.ts
View File

@ -38,6 +38,11 @@ export interface servicesAction {
export const getServiceMapItems = (globalTime: GlobalTime) => { export const getServiceMapItems = (globalTime: GlobalTime) => {
return async (dispatch: Dispatch) => { return async (dispatch: Dispatch) => {
dispatch<serviceMapItemAction>({
type: ActionTypes.getServiceMapItems,
payload: [],
});
let request_string = let request_string =
"/serviceMapDependencies?start=" + "/serviceMapDependencies?start=" +
globalTime.minTime + globalTime.minTime +
@ -55,6 +60,11 @@ export const getServiceMapItems = (globalTime: GlobalTime) => {
export const getDetailedServiceMapItems = (globalTime: GlobalTime) => { export const getDetailedServiceMapItems = (globalTime: GlobalTime) => {
return async (dispatch: Dispatch) => { return async (dispatch: Dispatch) => {
dispatch<servicesAction>({
type: ActionTypes.getServices,
payload: [],
});
let request_string = let request_string =
"/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime; "/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;