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

cosmetic updates

Browse Source
This commit is contained in:
dhrubesh 2021-05-09 23:45:42 +05:30
parent 45f1c2ec11
commit 36ad8987dd
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,12 +64,15 @@ const ServiceMap = (props: ServiceMapProps) => {
getDetailedServiceMapItems(globalTime); getDetailedServiceMapItems(globalTime);
}, []); }, []);
useEffect(() => {
fgRef.current && fgRef.current.d3Force("charge").strength(-400);
});
if (!serviceMap.items.length || !serviceMap.services.length) { if (!serviceMap.items.length || !serviceMap.services.length) {
return <Spin />; return <Spin />;
} }
const zoomToService = (value: string) => { const zoomToService = (value: string) => {
fgRef && fgRef.current.zoomToFit(700, 390, (e) => e.id === value); fgRef && fgRef.current.zoomToFit(700, 399, (e) => e.id === value);
}; };
const { nodes, links } = getGraphData(serviceMap); const { nodes, links } = getGraphData(serviceMap);
@ -83,7 +86,9 @@ const ServiceMap = (props: ServiceMapProps) => {
<ForceGraph2D <ForceGraph2D
ref={fgRef} ref={fgRef}
cooldownTicks={100} cooldownTicks={100}
onEngineStop={() => fgRef.current.zoomToFit(100, 120)} onEngineStop={() => {
fgRef.current.zoomToFit(100, 120);
}}
graphData={graphData} graphData={graphData}
nodeLabel="id" nodeLabel="id"
linkAutoColorBy={(d) => d.target} linkAutoColorBy={(d) => d.target}
@ -111,7 +116,7 @@ const ServiceMap = (props: ServiceMapProps) => {
<div style="font-weight:bold; margin-bottom:16px;">${node.id}</div> <div style="font-weight:bold; margin-bottom:16px;">${node.id}</div>
<div class="keyval"> <div class="keyval">
<div class="key">P99 latency:</div> <div class="key">P99 latency:</div>
<div class="val">${node.p99 / 1000000}</div> <div class="val">${node.p99 / 1000000}ms</div>
</div> </div>
<div class="keyval"> <div class="keyval">
<div class="key">Request:</div> <div class="key">Request:</div>

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

@ -63,7 +63,7 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
width, width,
color, color,
nodeVal: width, nodeVal: width,
callRate: service.callRate, callRate: service.callRate.toFixed(2),
errorRate: service.errorRate, errorRate: service.errorRate,
p99: service.p99, p99: service.p99,
}; };